update 51 files

front
amirhoseingorji 2 years ago
parent a50605c711
commit ebdcf3c301
  1. 154
      public/index.html
  2. 82
      public/serviceworker.js
  3. 424
      scripts/build.js
  4. 330
      scripts/start.js
  5. 72
      src/App.js
  6. 840
      src/AppRouter.js
  7. 114
      src/QRScan/Scanner/index.js
  8. 488
      src/QRScan/index.js
  9. 56
      src/Redux/reducers/blog.js
  10. 386
      src/Redux/reducers/public.js
  11. 562
      src/views/About/index.js
  12. 96
      src/views/Arabickar/index.js
  13. 110
      src/views/Auth/Login/index.js
  14. 214
      src/views/Auth/Profile/Birthdate/index.js
  15. 1226
      src/views/Auth/Profile/index.js
  16. 330
      src/views/Cart/Discount/index.js
  17. 926
      src/views/Cart/Table/index.js
  18. 864
      src/views/Cart/index.js
  19. 146
      src/views/ChatRoom/Body/Message/MultiSelect/index.js
  20. 128
      src/views/ChatRoom/Body/Message/Select/index.js
  21. 120
      src/views/ChatRoom/Body/Message/Slider/index.js
  22. 118
      src/views/ChatRoom/Body/Message/Sort/index.js
  23. 60
      src/views/ChatRoom/Body/Message/Tap/index.js
  24. 1272
      src/views/ChatRoom/Body/index.js
  25. 184
      src/views/Checkout/Discount/index.js
  26. 510
      src/views/Checkout/Table/index.js
  27. 1136
      src/views/Checkout/index.js
  28. 344
      src/views/Contact/index.js
  29. 128
      src/views/Download/Item/index.js
  30. 510
      src/views/Home/Footer/index.js
  31. 150
      src/views/Home/HomeSlider/Header/index.js
  32. 402
      src/views/Home/HomeSlider/index.js
  33. 278
      src/views/Home/HomeStatic/index.js
  34. 538
      src/views/Home/Navbar/Laptop/index.js
  35. 348
      src/views/Home/index.js
  36. 202
      src/views/MyBooks/index.js
  37. 1086
      src/views/NewProfile/index.js
  38. 290
      src/views/Orders/index.js
  39. 50
      src/views/PDF/index.js
  40. 62
      src/views/Product/Info/index.js
  41. 912
      src/views/Product/index.js
  42. 236
      src/views/Products/Filters/TypicalFilters/index.js
  43. 178
      src/views/Products/List/index.js
  44. 416
      src/views/Products/Product/index.js
  45. 180
      src/views/Products/Select/index.js
  46. 142
      src/views/Products/Sort/index.js
  47. 348
      src/views/Products/index.js
  48. 94
      src/views/QRScan/LastQr/index.js
  49. 98
      src/views/QRScan/Scanner/index.js
  50. 358
      src/views/QRScan/index.js
  51. 386
      src/views/Support/index.js

@ -1,78 +1,78 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" /> <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="دانوین" /> <meta name="description" content="دانوین" />
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" /> <link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>دانوین</title> <title>دانوین</title>
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<script src="https://dnvn.ir/ar.js"></script> <script src="https://dnvn.ir/ar.js"></script>
<script src="https://dnvn.ir/en.js"></script> <script src="https://dnvn.ir/en.js"></script>
<script> <script>
const lang = localStorage.getItem("language"); const lang = localStorage.getItem("language");
window.lang = lang; window.lang = lang;
window.ar = ar; window.ar = ar;
window.en = en; window.en = en;
window.ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1 window.ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1
window.tr = (price) => Math.round(window.ratio * price * 100) / 100 window.tr = (price) => Math.round(window.ratio * price * 100) / 100
function t(val) { function t(val) {
const lang_ = window[window.lang]; const lang_ = window[window.lang];
if (!lang_) return val; if (!lang_) return val;
if (!lang_[val]) console.error(val); if (!lang_[val]) console.error(val);
return lang_[val] || "*" + val; return lang_[val] || "*" + val;
} }
(function (w, d, s, l, i) { (function (w, d, s, l, i) {
w[l] = w[l] || []; w[l] = w[l] || [];
w[l].push({ w[l].push({
"gtm.start": new Date().getTime(), "gtm.start": new Date().getTime(),
event: "gtm.js", event: "gtm.js",
}); });
var f = d.getElementsByTagName(s)[0], var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : ""; dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true; j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f); f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-WVV8H9L"); })(window, document, "script", "dataLayer", "GTM-WVV8H9L");
</script> </script>
<!-- End Google Tag Manager --> <!-- End Google Tag Manager -->
</head> </head>
<body> <body>
<!-- Google Tag Manager (noscript) --> <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVV8H9L" height="0" width="0" <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVV8H9L" height="0" width="0"
style="display: none; visibility: hidden"></iframe></noscript> style="display: none; visibility: hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --> <!-- End Google Tag Manager (noscript) -->
<div id="root"></div> <div id="root"></div>
<script> <script>
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
window.addEventListener("load", function () { window.addEventListener("load", function () {
navigator.serviceWorker navigator.serviceWorker
.register("./serviceworker.js") .register("./serviceworker.js")
.then((registration) => { .then((registration) => {
// Registration was successful // Registration was successful
console.log( console.log(
"ServiceWorker registration successful with scope: ", "ServiceWorker registration successful with scope: ",
registration.scope registration.scope
); );
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
}); });
}); });
} }
</script> </script>
</body> </body>
</html> </html>

@ -1,41 +1,41 @@
const CACHE_NAME = "version-26-6-19aimmi"; const CACHE_NAME = "version-26-6-34aimmi";
const urlsToCache = ["index.html", "offline.html"]; const urlsToCache = ["index.html", "offline.html"];
const self = this; const self = this;
//Install SW //Install SW
self.addEventListener("install", (event) => { self.addEventListener("install", (event) => {
event.waitUntil( event.waitUntil(
caches.open(CACHE_NAME).then((cache) => { caches.open(CACHE_NAME).then((cache) => {
console.log("Opened cache"); console.log("Opened cache");
return cache.addAll(urlsToCache); return cache.addAll(urlsToCache);
}) })
); );
}); });
//Listen for requests //Listen for requests
self.addEventListener("fetch", (event) => { self.addEventListener("fetch", (event) => {
event.respondWith( event.respondWith(
caches.match(event.request).then(() => { caches.match(event.request).then(() => {
return fetch(event.request).catch(() => caches.match("offline.html")); return fetch(event.request).catch(() => caches.match("offline.html"));
}) })
); );
}); });
//Activate the SW //Activate the SW
self.addEventListener("activate", (event) => { self.addEventListener("activate", (event) => {
const cacheWhiteList = []; const cacheWhiteList = [];
cacheWhiteList.push(CACHE_NAME); cacheWhiteList.push(CACHE_NAME);
event.waitUntil( event.waitUntil(
caches.keys().then((cacheNames) => caches.keys().then((cacheNames) =>
Promise.all( Promise.all(
cacheNames.map((cacheName) => { cacheNames.map((cacheName) => {
if (!cacheWhiteList.includes(cacheName)) { if (!cacheWhiteList.includes(cacheName)) {
return caches.delete(cacheName); return caches.delete(cacheName);
} }
}) })
) )
) )
); );
}); });

@ -1,212 +1,212 @@
'use strict'; 'use strict';
// Do this as the first thing so that any code reading it knows the right env. // Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production'; process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production'; process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently // Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will // ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code. // terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => { process.on('unhandledRejection', err => {
throw err; throw err;
}); });
// Ensure environment variables are read. // Ensure environment variables are read.
require('../config/env'); require('../config/env');
const path = require('path'); const path = require('path');
const chalk = require('react-dev-utils/chalk'); const chalk = require('react-dev-utils/chalk');
const fs = require('fs-extra'); const fs = require('fs-extra');
const bfj = require('bfj'); const bfj = require('bfj');
const webpack = require('webpack'); const webpack = require('webpack');
const configFactory = require('../config/webpack.config'); const configFactory = require('../config/webpack.config');
const paths = require('../config/paths'); const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError'); const printBuildError = require('react-dev-utils/printBuildError');
const measureFileSizesBeforeBuild = const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild; FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile); const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them. // These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
const isInteractive = process.stdout.isTTY; const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing // Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1); process.exit(1);
} }
const argv = process.argv.slice(2); const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf('--stats') !== -1; const writeStatsJson = argv.indexOf('--stats') !== -1;
// Generate configuration // Generate configuration
const config = configFactory('production'); const config = configFactory('production');
// We require that you explicitly set browsers and do not fall back to // We require that you explicitly set browsers and do not fall back to
// browserslist defaults. // browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper'); const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive) checkBrowsers(paths.appPath, isInteractive)
.then(() => { .then(() => {
// First, read the current file sizes in build directory. // First, read the current file sizes in build directory.
// This lets us display how much they changed later. // This lets us display how much they changed later.
return measureFileSizesBeforeBuild(paths.appBuild); return measureFileSizesBeforeBuild(paths.appBuild);
}) })
.then(previousFileSizes => { .then(previousFileSizes => {
// Remove all content but keep the directory so that // Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash // if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild); fs.emptyDirSync(paths.appBuild);
// Merge with the public folder // Merge with the public folder
copyPublicFolder(); copyPublicFolder();
// Start the webpack build // Start the webpack build
return build(previousFileSizes); return build(previousFileSizes);
}) })
.then( .then(
({ stats, previousFileSizes, warnings }) => { ({ stats, previousFileSizes, warnings }) => {
if (warnings.length) { if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n')); console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n')); console.log(warnings.join('\n\n'));
console.log( console.log(
'\nSearch for the ' + '\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) + chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.' ' to learn more about each warning.'
); );
console.log( console.log(
'To ignore, add ' + 'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') + chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n' ' to the line before.\n'
); );
} else { } else {
console.log(chalk.green('Compiled successfully.\n')); console.log(chalk.green('Compiled successfully.\n'));
} }
console.log('File sizes after gzip:\n'); console.log('File sizes after gzip:\n');
printFileSizesAfterBuild( printFileSizesAfterBuild(
stats, stats,
previousFileSizes, previousFileSizes,
paths.appBuild, paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE, WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE WARN_AFTER_CHUNK_GZIP_SIZE
); );
console.log(); console.log();
const appPackage = require(paths.appPackageJson); const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrlOrPath; const publicUrl = paths.publicUrlOrPath;
const publicPath = config.output.publicPath; const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild); const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions( printHostingInstructions(
appPackage, appPackage,
publicUrl, publicUrl,
publicPath, publicPath,
buildFolder, buildFolder,
useYarn useYarn
); );
}, },
err => { err => {
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
if (tscCompileOnError) { if (tscCompileOnError) {
console.log( console.log(
chalk.yellow( chalk.yellow(
'Compiled with the following type errors (you may want to check these before deploying your app):\n' 'Compiled with the following type errors (you may want to check these before deploying your app):\n'
) )
); );
printBuildError(err); printBuildError(err);
} else { } else {
console.log(chalk.red('Failed to compile.\n')); console.log(chalk.red('Failed to compile.\n'));
printBuildError(err); printBuildError(err);
process.exit(1); process.exit(1);
} }
} }
) )
.catch(err => { .catch(err => {
if (err && err.message) { if (err && err.message) {
console.log(err.message); console.log(err.message);
} }
process.exit(1); process.exit(1);
}); });
// Create the production build and print the deployment instructions. // Create the production build and print the deployment instructions.
function build(previousFileSizes) { function build(previousFileSizes) {
console.log('Creating an optimized production build...'); console.log('Creating an optimized production build...');
const compiler = webpack(config); const compiler = webpack(config);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
compiler.run((err, stats) => { compiler.run((err, stats) => {
let messages; let messages;
if (err) { if (err) {
if (!err.message) { if (!err.message) {
return reject(err); return reject(err);
} }
let errMessage = err.message; let errMessage = err.message;
// Add additional information for postcss errors // Add additional information for postcss errors
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) { if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
errMessage += errMessage +=
'\nCompileError: Begins at CSS selector ' + '\nCompileError: Begins at CSS selector ' +
err['postcssNode'].selector; err['postcssNode'].selector;
} }
messages = formatWebpackMessages({ messages = formatWebpackMessages({
errors: [errMessage], errors: [errMessage],
warnings: [], warnings: [],
}); });
} else { } else {
messages = formatWebpackMessages( messages = formatWebpackMessages(
stats.toJson({ all: false, warnings: true, errors: true }) stats.toJson({ all: false, warnings: true, errors: true })
); );
} }
if (messages.errors.length) { if (messages.errors.length) {
// Only keep the first error. Others are often indicative // Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise. // of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) { if (messages.errors.length > 1) {
messages.errors.length = 1; messages.errors.length = 1;
} }
return reject(new Error(messages.errors.join('\n\n'))); return reject(new Error(messages.errors.join('\n\n')));
} }
if ( if (
process.env.CI && process.env.CI &&
(typeof process.env.CI !== 'string' || (typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') && process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length messages.warnings.length
) { ) {
console.log( console.log(
chalk.yellow( chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' + '\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n' 'Most CI servers set it automatically.\n'
) )
); );
return reject(new Error(messages.warnings.join('\n\n'))); return reject(new Error(messages.warnings.join('\n\n')));
} }
const resolveArgs = { const resolveArgs = {
stats, stats,
previousFileSizes, previousFileSizes,
warnings: messages.warnings, warnings: messages.warnings,
}; };
if (writeStatsJson) { if (writeStatsJson) {
return bfj return bfj
.write(paths.appBuild + '/bundle-stats.json', stats.toJson()) .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
.then(() => resolve(resolveArgs)) .then(() => resolve(resolveArgs))
.catch(error => reject(new Error(error))); .catch(error => reject(new Error(error)));
} }
return resolve(resolveArgs); return resolve(resolveArgs);
}); });
}); });
} }
function copyPublicFolder() { function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, { fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true, dereference: true,
filter: file => file !== paths.appHtml, filter: file => file !== paths.appHtml,
}); });
} }

@ -1,165 +1,165 @@
"use strict"; "use strict";
// Do this as the first thing so that any code reading it knows the right env. // Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = "development"; process.env.BABEL_ENV = "development";
process.env.NODE_ENV = "development"; process.env.NODE_ENV = "development";
// Makes the script crash on unhandled rejections instead of silently // Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will // ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code. // terminate the Node.js process with a non-zero exit code.
process.on("unhandledRejection", (err) => { process.on("unhandledRejection", (err) => {
throw err; throw err;
}); });
// Ensure environment variables are read. // Ensure environment variables are read.
require("../config/env"); require("../config/env");
const fs = require("fs"); const fs = require("fs");
const chalk = require("react-dev-utils/chalk"); const chalk = require("react-dev-utils/chalk");
const webpack = require("webpack"); const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server"); const WebpackDevServer = require("webpack-dev-server");
const clearConsole = require("react-dev-utils/clearConsole"); const clearConsole = require("react-dev-utils/clearConsole");
const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles"); const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
const { const {
choosePort, choosePort,
createCompiler, createCompiler,
prepareProxy, prepareProxy,
prepareUrls, prepareUrls,
} = require("react-dev-utils/WebpackDevServerUtils"); } = require("react-dev-utils/WebpackDevServerUtils");
const openBrowser = require("react-dev-utils/openBrowser"); const openBrowser = require("react-dev-utils/openBrowser");
const semver = require("semver"); const semver = require("semver");
const paths = require("../config/paths"); const paths = require("../config/paths");
const configFactory = require("../config/webpack.config"); const configFactory = require("../config/webpack.config");
const createDevServerConfig = require("../config/webpackDevServer.config"); const createDevServerConfig = require("../config/webpackDevServer.config");
const getClientEnvironment = require("../config/env"); const getClientEnvironment = require("../config/env");
const react = require(require.resolve("react", { paths: [paths.appPath] })); const react = require(require.resolve("react", { paths: [paths.appPath] }));
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
const useYarn = fs.existsSync(paths.yarnLockFile); const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY; const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing // Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1); process.exit(1);
} }
// Tools like Cloud9 rely on this. // Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || "0.0.0.0"; const HOST = process.env.HOST || "0.0.0.0";
if (process.env.HOST) { if (process.env.HOST) {
console.log( console.log(
chalk.cyan( chalk.cyan(
`Attempting to bind to HOST environment variable: ${chalk.yellow( `Attempting to bind to HOST environment variable: ${chalk.yellow(
chalk.bold(process.env.HOST) chalk.bold(process.env.HOST)
)}` )}`
) )
); );
console.log( console.log(
`If this was unintentional, check that you haven't mistakenly set it in your shell.` `If this was unintentional, check that you haven't mistakenly set it in your shell.`
); );
console.log( console.log(
`Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}` `Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}`
); );
console.log(); console.log();
} }
// We require that you explicitly set browsers and do not fall back to // We require that you explicitly set browsers and do not fall back to
// browserslist defaults. // browserslist defaults.
const { checkBrowsers } = require("react-dev-utils/browsersHelper"); const { checkBrowsers } = require("react-dev-utils/browsersHelper");
checkBrowsers(paths.appPath, isInteractive) checkBrowsers(paths.appPath, isInteractive)
.then(() => { .then(() => {
// We attempt to use the default port but if it is busy, we offer the user to // We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port. // run on a different port. `choosePort()` Promise resolves to the next free port.
return choosePort(HOST, DEFAULT_PORT); return choosePort(HOST, DEFAULT_PORT);
}) })
.then((port) => { .then((port) => {
if (port == null) { if (port == null) {
// We have not found a port. // We have not found a port.
return; return;
} }
const config = configFactory("development"); const config = configFactory("development");
const protocol = process.env.HTTPS === "true" ? "https" : "http"; const protocol = process.env.HTTPS === "true" ? "https" : "http";
const appName = require(paths.appPackageJson).name; const appName = require(paths.appPackageJson).name;
const useTypeScript = fs.existsSync(paths.appTsConfig); const useTypeScript = fs.existsSync(paths.appTsConfig);
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true"; const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true";
const urls = prepareUrls( const urls = prepareUrls(
protocol, protocol,
HOST, HOST,
port, port,
paths.publicUrlOrPath.slice(0, -1) paths.publicUrlOrPath.slice(0, -1)
); );
const devSocket = { const devSocket = {
warnings: (warnings) => warnings: (warnings) =>
devServer.sockWrite(devServer.sockets, "warnings", warnings), devServer.sockWrite(devServer.sockets, "warnings", warnings),
errors: (errors) => errors: (errors) =>
devServer.sockWrite(devServer.sockets, "errors", errors), devServer.sockWrite(devServer.sockets, "errors", errors),
}; };
// Create a webpack compiler that is configured with custom messages. // Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler({ const compiler = createCompiler({
appName, appName,
config, config,
devSocket, devSocket,
urls, urls,
useYarn, useYarn,
useTypeScript, useTypeScript,
tscCompileOnError, tscCompileOnError,
webpack, webpack,
}); });
// Load proxy config // Load proxy config
const proxySetting = require(paths.appPackageJson).proxy; const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy( const proxyConfig = prepareProxy(
proxySetting, proxySetting,
paths.appPublic, paths.appPublic,
paths.publicUrlOrPath paths.publicUrlOrPath
); );
// Serve webpack assets generated by the compiler over a web server. // Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig( const serverConfig = createDevServerConfig(
proxyConfig, proxyConfig,
urls.lanUrlForConfig urls.lanUrlForConfig
); );
const devServer = new WebpackDevServer(compiler, serverConfig); const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer. // Launch WebpackDevServer.
devServer.listen(port, HOST, (err) => { devServer.listen(port, HOST, (err) => {
if (err) { if (err) {
return console.log(err); return console.log(err);
} }
if (isInteractive) { if (isInteractive) {
clearConsole(); clearConsole();
} }
if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) { if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) {
console.log( console.log(
chalk.yellow( chalk.yellow(
`Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.` `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
) )
); );
} }
console.log(chalk.cyan("Starting the development server...\n")); console.log(chalk.cyan("Starting the development server...\n"));
openBrowser(urls.localUrlForBrowser); openBrowser(urls.localUrlForBrowser);
}); });
["SIGINT", "SIGTERM"].forEach(function (sig) { ["SIGINT", "SIGTERM"].forEach(function (sig) {
process.on(sig, function () { process.on(sig, function () {
devServer.close(); devServer.close();
process.exit(); process.exit();
}); });
}); });
if (process.env.CI !== "true") { if (process.env.CI !== "true") {
// Gracefully exit when stdin ends // Gracefully exit when stdin ends
process.stdin.on("end", function () { process.stdin.on("end", function () {
devServer.close(); devServer.close();
process.exit(); process.exit();
}); });
} }
}) })
.catch((err) => { .catch((err) => {
if (err && err.message) { if (err && err.message) {
console.log(err.message); console.log(err.message);
} }
process.exit(1); process.exit(1);
}); });

@ -1,36 +1,36 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import AppRouter from "./AppRouter"; import AppRouter from "./AppRouter";
import store from "./Redux/store"; import store from "./Redux/store";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
class App extends Component { class App extends Component {
state = { lang: window.lang }; state = { lang: window.lang };
componentDidMount() { componentDidMount() {
window.forceUpdate = () => { window.forceUpdate = () => {
this.setState({ lang: window.lang }); this.setState({ lang: window.lang });
}; };
} }
render() { render() {
return ( return (
<Provider store={store}> <Provider store={store}>
<AppRouter lang={this.state.lang} /> <AppRouter lang={this.state.lang} />
<ToastContainer <ToastContainer
position="top-right" position="top-right"
autoClose={2000} autoClose={2000}
hideProgressBar={true} hideProgressBar={true}
newestOnTop={true} newestOnTop={true}
closeOnClick closeOnClick
rtl={true} rtl={true}
pauseOnFocusLoss pauseOnFocusLoss
draggable draggable
pauseOnHover pauseOnHover
/> />
</Provider> </Provider>
); );
} }
} }
export default App; export default App;

@ -1,420 +1,420 @@
import React, { Component } from "react"; import React, { Component } from "react";
import "./App.css"; import "./App.css";
import { import {
BrowserRouter as Router, BrowserRouter as Router,
Route, Route,
Switch, Switch,
Redirect, Redirect,
} from "react-router-dom"; } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { user } from "~/Redux/actions"; import { user } from "~/Redux/actions";
import { userProduct } from "~/Redux/actions"; import { userProduct } from "~/Redux/actions";
import proxy from "./Redux/proxy"; import proxy from "./Redux/proxy";
import Home from "./views/Home/index"; import Home from "./views/Home/index";
import Faq from "./views/Faq/index"; import Faq from "./views/Faq/index";
import Arabickar from "./views/Arabickar/index"; import Arabickar from "./views/Arabickar/index";
import Contact from "./views/Contact/index"; import Contact from "./views/Contact/index";
import About from "./views/About/index"; import About from "./views/About/index";
import Products from "./views/Products/index"; import Products from "./views/Products/index";
import Product from "./views/Product/index"; import Product from "./views/Product/index";
import QR from "./views/QR/index"; import QR from "./views/QR/index";
import Reset from "./views/Reset"; import Reset from "./views/Reset";
import Auth from "./views/Auth/index"; import Auth from "./views/Auth/index";
import QRScan from "./views/QRScan/index"; import QRScan from "./views/QRScan/index";
import Activation from "./views/Activation/index"; import Activation from "./views/Activation/index";
import ChatList from "./views/ChatList/index"; import ChatList from "./views/ChatList/index";
import Chatroom from "./views/ChatRoom/index"; import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index"; import Cart from "./views/Cart/index";
import Checkout from "./views/Checkout/index"; import Checkout from "./views/Checkout/index";
import MyBooks from "./views/MyBooks/index"; import MyBooks from "./views/MyBooks/index";
import AR from "./views/AR/index"; import AR from "./views/AR/index";
import Download from "./views/Download/index"; import Download from "./views/Download/index";
import Support from "./views/Support/index"; import Support from "./views/Support/index";
import NewProfile from "./views/NewProfile/index"; import NewProfile from "./views/NewProfile/index";
import Blogs from "./views/Blogs/index"; import Blogs from "./views/Blogs/index";
import Blog from "./views/Blog/index"; import Blog from "./views/Blog/index";
// import Sample from "./views/Sample/index"; // import Sample from "./views/Sample/index";
import PDF from "./views/PDF/index"; import PDF from "./views/PDF/index";
import Orders from "./views/Orders"; import Orders from "./views/Orders";
// import MyBooks2 from "./views/MyBook2"; // import MyBooks2 from "./views/MyBook2";
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
window.router = this; window.router = this;
this.state = { this.state = {
cartControll: false, cartControll: false,
}; };
} }
state = {}; state = {};
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (this.props.userProductList > 0) { if (this.props.userProductList > 0) {
if (!this.state.cartControll) { if (!this.state.cartControll) {
this.setState({ this.setState({
cartControll: true, cartControll: true,
}); });
} }
} else { } else {
if (!this.state.cartControll) { if (!this.state.cartControll) {
this.setState({ this.setState({
cartControll: true, cartControll: true,
}); });
} }
} }
} }
componentDidMount() { componentDidMount() {
// if (proxy.status() && this.props.userProductList == null) // if (proxy.status() && this.props.userProductList == null)
// this.props.getUserProductList(); // this.props.getUserProductList();
} }
render() { render() {
const mobile = window.innerWidth < 1000 ? true : false; const mobile = window.innerWidth < 1000 ? true : false;
let status = proxy.status(); let status = proxy.status();
const afterLogin = localStorage.getItem("afterLogin"); const afterLogin = localStorage.getItem("afterLogin");
let home = ( let home = (
<Route exact path={"/"}> <Route exact path={"/"}>
{status && status.status === 0 ? ( {status && status.status === 0 ? (
<Auth page={"profile"} lang={this.props.lang} /> <Auth page={"profile"} lang={this.props.lang} />
) : afterLogin ? ( ) : afterLogin ? (
<> <>
<Redirect <Redirect
to={{ to={{
pathname: afterLogin, pathname: afterLogin,
}} }}
/> />
</> </>
) : ( ) : (
<Home status={status} lang={this.props.lang} /> <Home status={status} lang={this.props.lang} />
)} )}
</Route> </Route>
); );
const pathname = window.location.pathname; const pathname = window.location.pathname;
return ( return (
<div <div
className={` ${ className={` ${
localStorage.getItem("language") === "en" ? "ltr" : "rtl" localStorage.getItem("language") === "en" ? "ltr" : "rtl"
}`} }`}
style={{ height: "100%" }} style={{ height: "100%" }}
> >
<Router> <Router>
<Switch> <Switch>
{home} {home}
<Route path={"/Arabickar"}> <Route path={"/Arabickar"}>
<Arabickar lang={this.props.lang} /> <Arabickar lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/reset"}> <Route exact path={"/reset"}>
<Reset lang={this.props.lang} /> <Reset lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/faq"}> <Route exact path={"/faq"}>
<Faq lang={this.props.lang} /> <Faq lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/contact"}> <Route exact path={"/contact"}>
<Contact lang={this.props.lang} /> <Contact lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/download"}> <Route exact path={"/download"}>
<Download lang={this.props.lang} /> <Download lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/blogs"}> <Route exact path={"/blogs"}>
<Blogs lang={this.props.lang} /> <Blogs lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/blogs/:id"}> <Route exact path={"/blogs/:id"}>
<Blog lang={this.props.lang} /> <Blog lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/page/:name"}> <Route exact path={"/page/:name"}>
<Blog lang={this.props.lang} /> <Blog lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/about"}> <Route exact path={"/about"}>
<About lang={this.props.lang} /> <About lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/products"}> <Route exact path={"/products"}>
<Products lang={this.props.lang} /> <Products lang={this.props.lang} />
</Route> </Route>
<Route exact path="/orders"> <Route exact path="/orders">
<Orders lang={this.props.lang} /> <Orders lang={this.props.lang} />
</Route> </Route>
<Route exact path="/mybooks"> <Route exact path="/mybooks">
<MyBooks lang={this.props.lang} /> <MyBooks lang={this.props.lang} />
</Route> </Route>
{/* <Route path={"/sample"}> {/* <Route path={"/sample"}>
<Sample /> <Sample />
</Route> */} </Route> */}
<Route path={"/pdf"}> <Route path={"/pdf"}>
<PDF lang={this.props.lang} /> <PDF lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/newProfile"}> <Route exact path={"/newProfile"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<NewProfile lang={this.props.lang} /> <NewProfile lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : ( ) : (
<NewProfile /> <NewProfile />
)} )}
</Route> </Route>
<Route exact path={"/support"}> <Route exact path={"/support"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<Support lang={this.props.lang} /> <Support lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : ( ) : (
<Support /> <Support />
)} )}
</Route> </Route>
<Route exact path={"/products/digital/:id"}> <Route exact path={"/products/digital/:id"}>
<Product page="digital" lang={this.props.lang} /> <Product page="digital" lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/products/physical/:id"}> <Route exact path={"/products/physical/:id"}>
<Product page="physical" lang={this.props.lang} /> <Product page="physical" lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/qr"}> <Route exact path={"/qr"}>
<QR lang={this.props.lang} /> <QR lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/auth"}> <Route exact path={"/auth"}>
{proxy.status() ? ( {proxy.status() ? (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) : ( ) : (
<Auth lang={this.props.lang} /> <Auth lang={this.props.lang} />
)} )}
</Route> </Route>
<Route exact path={"/support"}> <Route exact path={"/support"}>
<Support lang={this.props.lang} /> <Support lang={this.props.lang} />
{/* {mobile ? ( {/* {mobile ? (
status ? ( status ? (
<Support /> <Support />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/auth", pathname: "/auth",
}} }}
/> />
) )
) : ( ) : (
<Support /> <Support />
)} */} )} */}
</Route> </Route>
<Route exact path={"/products/digital/:id"}> <Route exact path={"/products/digital/:id"}>
<Product page="digital" lang={this.props.lang} /> <Product page="digital" lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/products/physical/:id"}> <Route exact path={"/products/physical/:id"}>
<Product page="physical" lang={this.props.lang} /> <Product page="physical" lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/qr"}> <Route exact path={"/qr"}>
<QR lang={this.props.lang} /> <QR lang={this.props.lang} />
</Route> </Route>
<Route exact path={"/auth"}> <Route exact path={"/auth"}>
{proxy.status() ? ( {proxy.status() ? (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) : ( ) : (
<Auth lang={this.props.lang} /> <Auth lang={this.props.lang} />
)} )}
</Route> </Route>
<Route exact path={"/profile"}> <Route exact path={"/profile"}>
{status ? <Auth page={"profile"} lang={this.props.lang} /> : null} {status ? <Auth page={"profile"} lang={this.props.lang} /> : null}
</Route> </Route>
<Route exact path={"/qr-scan"}> <Route exact path={"/qr-scan"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<QRScan lang={this.props.lang} /> <QRScan lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : status ? ( ) : status ? (
<QRScan lang={this.props.lang} /> <QRScan lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/auth", pathname: "/auth",
}} }}
/> />
)} )}
</Route> </Route>
<Route exact path={"/activation"}> <Route exact path={"/activation"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<Activation lang={this.props.lang} /> <Activation lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : status ? ( ) : status ? (
<Activation lang={this.props.lang} /> <Activation lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/auth", pathname: "/auth",
}} }}
/> />
)} )}
</Route> </Route>
<Route exact path={"/chatroom"}> <Route exact path={"/chatroom"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<ChatList lang={this.props.lang} /> <ChatList lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : status ? ( ) : status ? (
<ChatList lang={this.props.lang} /> <ChatList lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/auth", pathname: "/auth",
}} }}
/> />
)} )}
</Route> </Route>
<Route exact path={"/cart"}> <Route exact path={"/cart"}>
<Cart lang={this.props.lang} /> <Cart lang={this.props.lang} />
{/* {status ? ( {/* {status ? (
<Cart /> <Cart />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
)} */} )} */}
</Route> </Route>
<Route exact path={"/checkout"}> <Route exact path={"/checkout"}>
{status ? ( {status ? (
<Checkout lang={this.props.lang} /> <Checkout lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
)} )}
</Route> </Route>
{/* <Route exact path={"/mybooks"}> {/* <Route exact path={"/mybooks"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<MyBooks /> <MyBooks />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : status ? ( ) : status ? (
<MyBooks /> <MyBooks />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/auth", pathname: "/auth",
}} }}
/> />
)} )}
</Route> */} </Route> */}
<Route exact path={"/ar"}> <Route exact path={"/ar"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<AR lang={this.props.lang} /> <AR lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : status ? ( ) : status ? (
<AR lang={this.props.lang} /> <AR lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/auth", pathname: "/auth",
}} }}
/> />
)} )}
</Route> </Route>
<Route exact path={"/chatroom/:id"}> <Route exact path={"/chatroom/:id"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<Chatroom lang={this.props.lang} /> <Chatroom lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/",
}} }}
/> />
) )
) : status ? ( ) : status ? (
<Chatroom lang={this.props.lang} /> <Chatroom lang={this.props.lang} />
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: "/auth", pathname: "/auth",
}} }}
/> />
)} )}
</Route> </Route>
<Route path={""}> <Route path={""}>
{/* {pathname.split("/").slice(-1)[0] == "origami" ? ( {/* {pathname.split("/").slice(-1)[0] == "origami" ? (
<Origami /> <Origami />
) : ( */} ) : ( */}
<Redirect <Redirect
to={{ to={{
pathname: "/qr", pathname: "/qr",
search: search:
"?id=" + "?id=" +
window.location.pathname.slice( window.location.pathname.slice(
window.location.pathname.lastIndexOf("/") + 1, window.location.pathname.lastIndexOf("/") + 1,
window.location.pathname.length window.location.pathname.length
), ),
}} }}
/> />
{/* )} */} {/* )} */}
</Route> </Route>
</Switch> </Switch>
</Router> </Router>
</div> </div>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
profile: state.user.status, profile: state.user.status,
userProductList: state.userProduct.list, userProductList: state.userProduct.list,
config: state.publicApi.config, config: state.publicApi.config,
lang: state.publicApi.lang, lang: state.publicApi.lang,
// status: state.user.status, // status: state.user.status,
}), }),
{ getProfile: user.getProfile, getUserProductList: userProduct.list } { getProfile: user.getProfile, getUserProductList: userProduct.list }
)(AppRouter); )(AppRouter);

@ -1,57 +1,57 @@
import React, { Component } from "react"; import React, { Component } from "react";
//import QrReader from "react-camera-qr"; //import QrReader from "react-camera-qr";
import QrReader from "react-qr-reader"; import QrReader from "react-qr-reader";
export default class Scanner extends Component { export default class Scanner extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
delay: 100, delay: 100,
result: "", result: "",
}; };
this.handleScan = this.handleScan.bind(this); this.handleScan = this.handleScan.bind(this);
} }
handleScan(data) { handleScan(data) {
this.props.parent.setState({ this.props.parent.setState({
value: data, value: data,
}); });
} }
handleError(err) { handleError(err) {
console.error(err); console.error(err);
} }
render() { render() {
let cam = this.props.parent.state.cameraId; let cam = this.props.parent.state.cameraId;
let facingMode = this.props.parent.state.cameraId; let facingMode = this.props.parent.state.cameraId;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<QrReader <QrReader
delay={800 + Math.random() * 10} delay={800 + Math.random() * 10}
onError={this.handleError} onError={this.handleError}
onScan={this.handleScan} onScan={this.handleScan}
style={{ width: "100%" }} style={{ width: "100%" }}
cameraId={cam} cameraId={cam}
facingMode={facingMode} facingMode={facingMode}
/> />
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<QrReader <QrReader
delay={800 + Math.random() * 10} delay={800 + Math.random() * 10}
onError={this.handleError} onError={this.handleError}
onScan={this.handleScan} onScan={this.handleScan}
style={{ width: "100%" }} style={{ width: "100%" }}
cameraId={cam} cameraId={cam}
facingMode={facingMode} facingMode={facingMode}
/> />
) : null} ) : null}
{/* <div>{facingMode[this.props.parent.state.facingMode]}</div> {/* <div>{facingMode[this.props.parent.state.facingMode]}</div>
<div>{(this.state?.devices || []).join(",")}</div> */} <div>{(this.state?.devices || []).join(",")}</div> */}
</> </>
); );
} }
} }

@ -1,244 +1,244 @@
import React, { Component } from "react"; import React, { Component } from "react";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Scanner from "./Scanner/index"; import Scanner from "./Scanner/index";
import LastQr from "./LastQr/index"; import LastQr from "./LastQr/index";
import Modal from "./Modal/index"; import Modal from "./Modal/index";
import ReplayIcon from "@material-ui/icons/Replay"; import ReplayIcon from "@material-ui/icons/Replay";
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { qr } from "~/Redux/actions"; import { qr } from "~/Redux/actions";
import sciense_6 from "../../assets/images/sciense-6.png"; import sciense_6 from "../../assets/images/sciense-6.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70,
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90,
}, },
}; };
class QRScan extends Component { class QRScan extends Component {
state = { state = {
value: null, value: null,
facingMode: 0, facingMode: 0,
tail: null, tail: null,
cameraIds: [], cameraIds: [],
cameraId: "rare", cameraId: "rare",
}; };
componentDidMount() { componentDidMount() {
navigator.mediaDevices.enumerateDevices().then((devices) => { navigator.mediaDevices.enumerateDevices().then((devices) => {
console.log({ devices }); console.log({ devices });
var cameraIds = devices var cameraIds = devices
.filter(function (device) { .filter(function (device) {
return device.kind === "videoinput"; return device.kind === "videoinput";
}) })
.map((e) => [e.label, e.deviceId]); .map((e) => [e.label, e.deviceId]);
var environmentPattern = /rear|back|environment/gi; var environmentPattern = /rear|back|environment/gi;
var userPattern = /front|user|face/gi; var userPattern = /front|user|face/gi;
var backs = cameraIds.filter((label) => environmentPattern.test(label)); var backs = cameraIds.filter((label) => environmentPattern.test(label));
var notFronts = cameraIds.filter((label) => !userPattern.test(label)); var notFronts = cameraIds.filter((label) => !userPattern.test(label));
let cameraId = backs[0] || notFronts[0] || cameraIds[0]; let cameraId = backs[0] || notFronts[0] || cameraIds[0];
let cameraIdx = cameraIds.findIndex((cam) => cam[1] === cameraId[1]); let cameraIdx = cameraIds.findIndex((cam) => cam[1] === cameraId[1]);
console.log({ console.log({
cameraIds, cameraIds,
cameraId: cameraId[0], cameraId: cameraId[0],
cameraIdx, cameraIdx,
}); });
this.setState({ this.setState({
cameraIds, cameraIds,
cameraId, cameraId,
cameraIdx, cameraIdx,
}); });
}); });
} }
async componentDidUpdate() { async componentDidUpdate() {
if (this.state.value) { if (this.state.value) {
let tail = this.state.value.slice( let tail = this.state.value.slice(
this.state.value.lastIndexOf("/") + 1, this.state.value.lastIndexOf("/") + 1,
this.state.value.length this.state.value.length
); );
this.props.info({ tail: tail }); this.props.info({ tail: tail });
this.setState({ value: null, tail: tail }); this.setState({ value: null, tail: tail });
} }
} }
render() { render() {
const { data } = this.props; const { data } = this.props;
return ( return (
<> <>
{window.innerWidth > 100 ? ( {window.innerWidth > 100 ? (
<> <>
<div className="qr-scan d-flex flex-column align-items-center"> <div className="qr-scan d-flex flex-column align-items-center">
<Navbar /> <Navbar />
<div className="qr-scan__box d-flex flex-column"> <div className="qr-scan__box d-flex flex-column">
<header className="qr-scan__box--header d-flex flex-column"> <header className="qr-scan__box--header d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}> <h1 style={{ fontSize: fontSize.desktop.h1 }}>
{window.t("نکته")} {window.t("نکته")}
</h1> </h1>
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
{window.t( {window.t(
"لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار" "لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار"
)} )}
{window.t("دهید تا اسکن دوربین انجام شود")}{" "} {window.t("دهید تا اسکن دوربین انجام شود")}{" "}
</p> </p>
</header> </header>
{this.state.cameraIds.length > 1 ? ( {this.state.cameraIds.length > 1 ? (
<div className="qr-scan__box--select d-flex"> <div className="qr-scan__box--select d-flex">
<select <select
value={this.state.cameraId} value={this.state.cameraId}
onChange={(e) => onChange={(e) =>
this.setState({ this.setState({
facingMode: Math.round() * 3, facingMode: Math.round() * 3,
cameraId: e.target.value, cameraId: e.target.value,
}) })
} }
> >
{this.state.cameraIds.map((e) => ( {this.state.cameraIds.map((e) => (
<option value={e[1]}>{e[0] || e[1]}</option> <option value={e[1]}>{e[0] || e[1]}</option>
))} ))}
</select> </select>
</div> </div>
) : null} ) : null}
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> <section className="qr-scan__box--camera d-flex justify-content-center align-items-center">
<FlipCameraIosIcon <FlipCameraIosIcon
style={{ style={{
fontSize: 35, fontSize: 35,
position: "absolute", position: "absolute",
left: 10, left: 10,
top: 10, top: 10,
zIndex: 100, zIndex: 100,
color: "white", color: "white",
}} }}
onClick={() => onClick={() =>
this.setState({ this.setState({
facingMode: (this.state.facingMode + 1) % 2, facingMode: (this.state.facingMode + 1) % 2,
}) })
} }
/> />
{this.state.value !== null ? ( {this.state.value !== null ? (
<div <div
style={{ zIndex: 1000 }} style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })} onClick={() => this.setState({ value: null })}
> >
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> <ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div> </div>
) : ( ) : (
<Scanner parent={this} cameraId={this.state.cameraId} /> <Scanner parent={this} cameraId={this.state.cameraId} />
)} )}
</section> </section>
{this.state.tail === null ? null : ( {this.state.tail === null ? null : (
<Modal tail={this.state.tail} /> <Modal tail={this.state.tail} />
)} )}
</div> </div>
</div> </div>
<Footer /> <Footer />
</> </>
) : null} ) : null}
{window.innerWidth < 100 ? ( {window.innerWidth < 100 ? (
<> <>
<div className="mobile-qr-scan d-flex flex-column"> <div className="mobile-qr-scan d-flex flex-column">
<Navbar page="qr-scan" /> <Navbar page="qr-scan" />
<header className="mobile-qr-scan__header d-flex flex-column"></header> <header className="mobile-qr-scan__header d-flex flex-column"></header>
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> <section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
{this.state.cameraIds.length > 1 ? ( {this.state.cameraIds.length > 1 ? (
<> <>
<div <div
className="qr-scan__box--select d-flex" className="qr-scan__box--select d-flex"
style={{ position: "absolute", zIndex: 500 }} style={{ position: "absolute", zIndex: 500 }}
> >
<select <select
value={this.state.cameraId} value={this.state.cameraId}
onChange={(e) => onChange={(e) =>
this.setState({ this.setState({
facingMode: Math.round() * 3, facingMode: Math.round() * 3,
cameraId: e.target.value, cameraId: e.target.value,
}) })
} }
> >
{this.state.cameraIds.map((e) => ( {this.state.cameraIds.map((e) => (
<option value={e[1]}> <option value={e[1]}>
{e[0]} {e[0]}
{e[1]} {e[1]}
</option> </option>
))} ))}
</select> </select>
</div> </div>
<FlipCameraIosIcon <FlipCameraIosIcon
style={{ style={{
fontSize: 35, fontSize: 35,
position: "absolute", position: "absolute",
left: 10, left: 10,
top: 10, top: 10,
zIndex: 100, zIndex: 100,
color: "white", color: "white",
}} }}
onClick={() => { onClick={() => {
let cameraIdx = let cameraIdx =
(this.state.cameraIdx + 1) % (this.state.cameraIdx + 1) %
this.state.cameraIds.length; this.state.cameraIds.length;
this.setState({ this.setState({
cameraIdx, cameraIdx,
cameraId: this.state.cameraIds[cameraIdx], cameraId: this.state.cameraIds[cameraIdx],
}); });
}} }}
/> />
</> </>
) : null} ) : null}
{false && this.state.cameraId === "" ? ( {false && this.state.cameraId === "" ? (
<div <div
style={{ zIndex: 1000 }} style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })} onClick={() => this.setState({ value: null })}
> >
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> <ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div> </div>
) : ( ) : (
<Scanner parent={this} cameraId={this.state.cameraId} /> <Scanner parent={this} cameraId={this.state.cameraId} />
)} )}
</section> </section>
{this.state.tail === null ? null : ( {this.state.tail === null ? null : (
<Modal parent={this} tail={this.state.tail} /> <Modal parent={this} tail={this.state.tail} />
)} )}
{localStorage.getItem("latestQr") ? ( {localStorage.getItem("latestQr") ? (
<section className="mobile-qr-scan__lasts d-flex flex-column"> <section className="mobile-qr-scan__lasts d-flex flex-column">
<h2>{window.t("آخرین مشاهدات")}</h2> <h2>{window.t("آخرین مشاهدات")}</h2>
{data.map((item, i) => ( {data.map((item, i) => (
<LastQr <LastQr
data={JSON.parse(localStorage.getItem("latestQr"))} data={JSON.parse(localStorage.getItem("latestQr"))}
key={i} key={i}
/> />
))} ))}
</section> </section>
) : null} ) : null}
</div> </div>
</> </>
) : null} ) : null}
</> </>
); );
} }
} }
export default connect((state) => ({ list: state.qr.list }), { info: qr.info })( export default connect((state) => ({ list: state.qr.list }), { info: qr.info })(
QRScan QRScan
); );
QRScan.defaultProps = { QRScan.defaultProps = {
data: [ data: [
{ {
title: "ریاضیات گسسته خیلی پیشرفته", title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "پایه هفتم ابتدایی", subTitle: "پایه هفتم ابتدایی",
page: 13, page: 13,
image: sciense_6, image: sciense_6,
}, },
], ],
}; };

@ -1,28 +1,28 @@
import { toast } from "react-toastify"; import { toast } from "react-toastify";
const initialState = { const initialState = {
loading: false, loading: false,
error: null, error: null,
list: [], list: [],
}; };
export default function blog(state = initialState, action) { export default function blog(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "blog/list": case "blog/list":
return { ...state, loading: false, list: data, error: null }; return { ...state, loading: false, list: data, error: null };
case "blog/update": case "blog/update":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "blog/add": case "blog/add":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "blog/delete": case "blog/delete":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
///////////// /////////////
case "blog/loading": case "blog/loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "blog/error": case "blog/error":
toast.error(data.message); toast.error(data.message);
return { ...state, loading: false, error: data.message }; return { ...state, loading: false, error: data.message };
default: default:
return state; return state;
} }
} }

@ -1,193 +1,193 @@
import { toast } from "react-toastify"; import { toast } from "react-toastify";
const initialState = { const initialState = {
homeData: [], homeData: [],
newProducts: [], newProducts: [],
levels: [], levels: [],
faqList: [], faqList: [],
loading: false, loading: false,
error: null, error: null,
searchResult: [], searchResult: [],
contactData: null, contactData: null,
arList: [], arList: [],
blogList: [], blogList: [],
blog: null, blog: null,
province: [], province: [],
city: [], city: [],
config: { config: {
direction: "ltr", direction: "ltr",
}, },
}; };
export default function publicApi(state = initialState, action) { export default function publicApi(state = initialState, action) {
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "public/direction": case "public/direction":
return { ...state, config: { [data.name]: data.value } }; return { ...state, config: { [data.name]: data.value } };
case "public/homePage": case "public/homePage":
let itemsLevel; let itemsLevel;
// if (window.innerWidth > 1000) { // if (window.innerWidth > 1000) {
const jadidTarin = data?.filter( const jadidTarin = data?.filter(
(item) => item.title === window.t("کتابهای دانوین") (item) => item.title === window.t("کتابهای دانوین")
); );
itemsLevel = itemsLevel =
jadidTarin && jadidTarin[0] && jadidTarin[0].data jadidTarin && jadidTarin[0] && jadidTarin[0].data
? jadidTarin[0].data ? jadidTarin[0].data
.map((item) => item.book.gradeId * 1) .map((item) => item.book.gradeId * 1)
.sort((a, b) => a - b) .sort((a, b) => a - b)
.map((e) => grades[e]) .map((e) => grades[e])
: []; : [];
itemsLevel.unshift(window.t("پایه تحصیلی")); itemsLevel.unshift(window.t("پایه تحصیلی"));
// } // }
return { return {
...state, ...state,
loading: false, loading: false,
levels: [...new Set(itemsLevel)], levels: [...new Set(itemsLevel)],
error: null, error: null,
homeData: data, homeData: data,
}; };
case "user/logout": case "user/logout":
case "user/login": case "user/login":
case "user/otp/login": case "user/otp/login":
return { ...state, homeData: [] }; return { ...state, homeData: [] };
case "public/filter": case "public/filter":
const realList = const realList =
state.newProducts.length === 0 state.newProducts.length === 0
? state.homeData.filter( ? state.homeData.filter(
(item) => item.title === window.t("کتابهای دانوین") (item) => item.title === window.t("کتابهای دانوین")
)[0].data )[0].data
: state.newProducts; : state.newProducts;
if (state.newProducts.length === 0) { if (state.newProducts.length === 0) {
state = { state = {
...state, ...state,
newProducts: realList, newProducts: realList,
}; };
} }
const level = data.levels; const level = data.levels;
const search = data.search; const search = data.search;
if (level.length > 0 || search) { if (level.length > 0 || search) {
localStorage.setItem("filter", "ON"); localStorage.setItem("filter", "ON");
} else { } else {
return { return {
...state, ...state,
loading: false, loading: false,
error: null, error: null,
homeData: state.homeData.map((item) => homeData: state.homeData.map((item) =>
item.title === window.t("کتابهای دانوین") item.title === window.t("کتابهای دانوین")
? { ...item, data: state.newProducts } ? { ...item, data: state.newProducts }
: { ...item } : { ...item }
), ),
newProducts: [], newProducts: [],
}; };
} }
let byLevelFilter = []; let byLevelFilter = [];
if (level.length > 0) { if (level.length > 0) {
level.forEach((item1) => { level.forEach((item1) => {
for (let i = 0; i < realList.length; i++) { for (let i = 0; i < realList.length; i++) {
if (grades[realList[i].book.gradeId] === item1) { if (grades[realList[i].book.gradeId] === item1) {
byLevelFilter.push(realList[i]); byLevelFilter.push(realList[i]);
} }
} }
}); });
} else { } else {
byLevelFilter = realList; byLevelFilter = realList;
} }
// let bySubjectFilter = []; // let bySubjectFilter = [];
// if (subject.length > 0) { // if (subject.length > 0) {
// subject.map((item1) => { // subject.map((item1) => {
// for (let i = 0; i < byLevelFilter.length; i++) { // for (let i = 0; i < byLevelFilter.length; i++) {
// if (byLevelFilter[i].name === item1) { // if (byLevelFilter[i].name === item1) {
// bySubjectFilter.push(byLevelFilter[i]); // bySubjectFilter.push(byLevelFilter[i]);
// } // }
// } // }
// }); // });
// } else { // } else {
// bySubjectFilter = byLevelFilter; // bySubjectFilter = byLevelFilter;
// } // }
const bySearchFilter = search const bySearchFilter = search
? byLevelFilter.filter((item1) => item1.name.indexOf(search) !== -1) ? byLevelFilter.filter((item1) => item1.name.indexOf(search) !== -1)
: byLevelFilter; : byLevelFilter;
// if (sort === window.t("گران ترین")) { // if (sort === window.t("گران ترین")) {
// finalSort = bySearchFilter.sort((item1, item2) => { // finalSort = bySearchFilter.sort((item1, item2) => {
// return item1.product[0].price - item2.product[0].price; // return item1.product[0].price - item2.product[0].price;
// }); // });
// } else { // } else {
// finalSort = bySearchFilter; // finalSort = bySearchFilter;
// } // }
return { return {
...state, ...state,
loading: false, loading: false,
error: null, error: null,
homeData: state.homeData.map((item) => homeData: state.homeData.map((item) =>
item.title === window.t("کتابهای دانوین") item.title === window.t("کتابهای دانوین")
? { ...item, data: bySearchFilter } ? { ...item, data: bySearchFilter }
: { ...item } : { ...item }
), ),
}; };
case "faq/list": case "faq/list":
return { ...state, loading: false, error: null, faqList: data }; return { ...state, loading: false, error: null, faqList: data };
case "public/province": case "public/province":
return { ...state, loading: false, error: null, province: data }; return { ...state, loading: false, error: null, province: data };
case "public/city": case "public/city":
return { ...state, loading: false, error: null, city: data }; return { ...state, loading: false, error: null, city: data };
case "public/faq/activate": case "public/faq/activate":
return { return {
...state, ...state,
loading: false, loading: false,
error: null, error: null,
faqList: state.faqList.map((item) => faqList: state.faqList.map((item) =>
item.id === data item.id === data
? { ...item, active: !item.active } ? { ...item, active: !item.active }
: { ...item, active: false } : { ...item, active: false }
), ),
}; };
case "public/faq/search": case "public/faq/search":
return { return {
...state, ...state,
loading: false, loading: false,
error: null, error: null,
searchResult: state.faqList.filter( searchResult: state.faqList.filter(
(item) => (item) =>
item.title.indexOf(data) !== -1 || item.title.indexOf(data) !== -1 ||
item.description.indexOf(data) !== -1 item.description.indexOf(data) !== -1
), ),
}; };
case "public/contact": case "public/contact":
return { ...state, loading: false, error: null, contactData: data }; return { ...state, loading: false, error: null, contactData: data };
case "public/ar": case "public/ar":
return { ...state, loading: false, error: null, arList: data }; return { ...state, loading: false, error: null, arList: data };
case "public/blogList": case "public/blogList":
return { ...state, loading: false, error: null, blogList: data }; return { ...state, loading: false, error: null, blogList: data };
case "public/blogInfo": case "public/blogInfo":
return { ...state, loading: false, error: null, blog: data }; return { ...state, loading: false, error: null, blog: data };
case "public/loading": case "public/loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "public/error": case "public/error":
toast.error(data.message); toast.error(data.message);
return { ...state, loading: false, error: data.message }; return { ...state, loading: false, error: data.message };
case "public/changeLanguage": case "public/changeLanguage":
return { ...state, lang: window.lang, contactData: null, faqList: [] }; return { ...state, lang: window.lang, contactData: null, faqList: [] };
default: default:
return state; return state;
} }
} }

@ -1,281 +1,281 @@
import React, { Component, Fragment } from "react"; import React, { Component, Fragment } from "react";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import pic from "../../assets/images/pic.png"; import pic from "../../assets/images/pic.png";
import aboutLg from "../../assets/images/about-lg.png"; import aboutLg from "../../assets/images/about-lg.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 650; const maxMobileSize = 650;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
}, },
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18, h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,
p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28, p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28,
h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23, h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23,
li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28, li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28,
}, },
}; };
export default class About extends Component { export default class About extends Component {
render() { render() {
const state = { const state = {
first: { first: {
title: window.t("درباره ما"), title: window.t("درباره ما"),
text: window.t( text: window.t(
"ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است." "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است."
), ),
}, },
fury: { fury: {
title: window.t("ماموریت ما در دانوین چیست ؟"), title: window.t("ماموریت ما در دانوین چیست ؟"),
text: window.t( text: window.t(
"ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول" "ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول"
), ),
}, },
keywords: { keywords: {
title: window.t("کیفیت آموزش را بالا میبریم"), title: window.t("کیفیت آموزش را بالا میبریم"),
list: [ list: [
window.t( window.t(
"شایستگی در ایجاد فهم علمی در موضوع هدف و در موضوعات وابسته به آن" "شایستگی در ایجاد فهم علمی در موضوع هدف و در موضوعات وابسته به آن"
), ),
window.t( window.t(
"شایستگی در ایجاد زمینه ی معرفتی- ارزشی موثر برای محتواهای آموزشی" "شایستگی در ایجاد زمینه ی معرفتی- ارزشی موثر برای محتواهای آموزشی"
), ),
], ],
}, },
keywords2: { keywords2: {
title: window.t("جذابیت کلید بهبود یادگیری"), title: window.t("جذابیت کلید بهبود یادگیری"),
list: [ list: [
window.t( window.t(
"بکارگیری عوامل متنوع سازگار با ارزشها برای علاقمندی دانش آموز و معلم به استفاده از محتوای دانوین" "بکارگیری عوامل متنوع سازگار با ارزشها برای علاقمندی دانش آموز و معلم به استفاده از محتوای دانوین"
), ),
window.t( window.t(
"سازگار با نظام آ.پ : بطوریکه بتواند در مدارس فعلی مورد استفاده قرار گرفته و با نظام رسمی فعلی در تضاد نباشد" "سازگار با نظام آ.پ : بطوریکه بتواند در مدارس فعلی مورد استفاده قرار گرفته و با نظام رسمی فعلی در تضاد نباشد"
), ),
window.t( window.t(
"در راستای نیل به سند تحول : تلاش برای نزدیکی گام به گام به آرمانها و اهداف سند تحول" "در راستای نیل به سند تحول : تلاش برای نزدیکی گام به گام به آرمانها و اهداف سند تحول"
), ),
], ],
}, },
advantages: { advantages: {
title: window.t("مزیت رقابتی دانوین"), title: window.t("مزیت رقابتی دانوین"),
list: [ list: [
window.t( window.t(
"بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)" "بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)"
), ),
window.t("دارای رویکرد آموزش سرگرم کننده"), window.t("دارای رویکرد آموزش سرگرم کننده"),
window.t("بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی"), window.t("بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی"),
window.t("رویکرد معرفتی-ارزشی"), window.t("رویکرد معرفتی-ارزشی"),
window.t("ویدئو های منحصر بفرد"), window.t("ویدئو های منحصر بفرد"),
window.t("متن گفتگو محور ، روایی ، قابل فهم ،جذاب و سرگرم کننده"), window.t("متن گفتگو محور ، روایی ، قابل فهم ،جذاب و سرگرم کننده"),
], ],
}, },
}; };
const { fury, advantages, keywords, keywords2, first } = state; const { fury, advantages, keywords, keywords2, first } = state;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> <>
<div className={"about d-flex flex-column align-items-center "}> <div className={"about d-flex flex-column align-items-center "}>
<Navbar page={"about"} /> <Navbar page={"about"} />
<div <div
className={ className={
"about__first d-flex " + (window.lang == "en" ? "ltr" : "") "about__first d-flex " + (window.lang == "en" ? "ltr" : "")
} }
> >
<div className={"top align-self-start"}> <div className={"top align-self-start"}>
<h1 style={{ fontSize: fontSize.desktop.h1 }}> <h1 style={{ fontSize: fontSize.desktop.h1 }}>
{first.title} {first.title}
</h1> </h1>
<p <p
style={{ style={{
fontSize: fontSize.desktop.p + 2, fontSize: fontSize.desktop.p + 2,
lineHeight: 2, lineHeight: 2,
}} }}
> >
{first.text} {first.text}
</p> </p>
</div> </div>
</div> </div>
<div <div
className="linegr" className="linegr"
style={{ width: "100%", height: "4px" }} style={{ width: "100%", height: "4px" }}
></div> ></div>
<div <div
className={ className={
"about__fury d-flex " + (window.lang == "en" ? "ltr" : "") "about__fury d-flex " + (window.lang == "en" ? "ltr" : "")
} }
> >
<div className="about__fury--right d-flex flex-column justify-content-center"> <div className="about__fury--right d-flex flex-column justify-content-center">
<div className="right-top align-self-start"> <div className="right-top align-self-start">
<h1 style={{ fontSize: fontSize.desktop.h1 }}> <h1 style={{ fontSize: fontSize.desktop.h1 }}>
{fury.title} {fury.title}
</h1> </h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p> <p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
</div> </div>
<div className="right-bottom align-self-start"> <div className="right-bottom align-self-start">
<h2 style={{ fontSize: fontSize.desktop.h2 }}> <h2 style={{ fontSize: fontSize.desktop.h2 }}>
{keywords.title} {keywords.title}
</h2> </h2>
<ul> <ul>
{keywords.list.map((item, i) => ( {keywords.list.map((item, i) => (
<Fragment key={i}> <Fragment key={i}>
<li <li
style={{ style={{
fontSize: fontSize.desktop.li, fontSize: fontSize.desktop.li,
padding: 5, padding: 5,
}} }}
> >
{item} {item}
</li> </li>
</Fragment> </Fragment>
))} ))}
</ul> </ul>
</div> </div>
<div className="right-bottom align-self-start"> <div className="right-bottom align-self-start">
<h2 style={{ fontSize: fontSize.desktop.h2 }}> <h2 style={{ fontSize: fontSize.desktop.h2 }}>
{keywords2.title} {keywords2.title}
</h2> </h2>
<ul> <ul>
{keywords2.list.map((item, i) => ( {keywords2.list.map((item, i) => (
<Fragment key={i}> <Fragment key={i}>
<li <li
style={{ style={{
fontSize: fontSize.desktop.li, fontSize: fontSize.desktop.li,
padding: 5, padding: 5,
}} }}
> >
{item} {item}
</li> </li>
</Fragment> </Fragment>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
<div className="about__fury--left d-flex align-items-center"> <div className="about__fury--left d-flex align-items-center">
<img className="about__fury--left__1" src={aboutLg} alt="" /> <img className="about__fury--left__1" src={aboutLg} alt="" />
{/* {this.props.absoluteImages.map((item, i) => ( {/* {this.props.absoluteImages.map((item, i) => (
<img src={item.imageUrl} className={item.class} /> <img src={item.imageUrl} className={item.class} />
))} */} ))} */}
</div> </div>
</div> </div>
<div <div
className={ className={
"about__advantages d-flex " + "about__advantages d-flex " +
(window.lang == "en" ? "ltr" : "") (window.lang == "en" ? "ltr" : "")
} }
> >
<div className="about__advantages--right d-flex"> <div className="about__advantages--right d-flex">
<img src={pic} alt="" /> <img src={pic} alt="" />
</div> </div>
<div className="about__advantages--left"> <div className="about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}> <h1 style={{ fontSize: fontSize.desktop.h1 }}>
{advantages.title} {advantages.title}
</h1> </h1>
<ul> <ul>
{advantages.list.map((item, i) => ( {advantages.list.map((item, i) => (
<Fragment key={i}> <Fragment key={i}>
<li <li
style={{ fontSize: fontSize.desktop.li, padding: 5 }} style={{ fontSize: fontSize.desktop.li, padding: 5 }}
> >
{item} {item}
</li> </li>
</Fragment> </Fragment>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer />
</> </>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-about d-flex flex-column"> <div className="mobile-about d-flex flex-column">
<Navbar page={"about"} /> <Navbar page={"about"} />
<div className="about__first d-flex" style={{ width: "100%" }}> <div className="about__first d-flex" style={{ width: "100%" }}>
<div className="top align-self-start"> <div className="top align-self-start">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{first.title}</h1> <h1 style={{ fontSize: fontSize.mobile.h1 }}>{first.title}</h1>
<p <p
style={{ style={{
fontSize: fontSize.mobile.p + 2, fontSize: fontSize.mobile.p + 2,
lineHeight: 2, lineHeight: 2,
}} }}
> >
{first.text} {first.text}
</p> </p>
</div> </div>
</div> </div>
<div <div
className="linegr" className="linegr"
style={{ width: "100%", height: "4px", marginBottom: 15 }} style={{ width: "100%", height: "4px", marginBottom: 15 }}
></div> ></div>
<div className="mobile-about__fury d-flex flex-column"> <div className="mobile-about__fury d-flex flex-column">
<div> <div>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{fury.title}</h1> <h1 style={{ fontSize: fontSize.mobile.h1 }}>{fury.title}</h1>
</div> </div>
<p style={{ fontSize: fontSize.mobile.p }}>{fury.text}</p> <p style={{ fontSize: fontSize.mobile.p }}>{fury.text}</p>
</div> </div>
<div className="mobile-about__images d-flex"> <div className="mobile-about__images d-flex">
{this.props.absoluteImages.map((item, i) => ( {this.props.absoluteImages.map((item, i) => (
<img src={item.imageUrl} className={item.class} alt="" /> <img src={item.imageUrl} className={item.class} alt="" />
))} ))}
</div> </div>
<div className="mobile-about__keys align-self-end"> <div className="mobile-about__keys align-self-end">
<div> <div>
<h2 style={{ fontSize: fontSize.mobile.h2 }}> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
{keywords.title} {keywords.title}
</h2> </h2>
</div> </div>
<ul> <ul>
{keywords.list.map((item, i) => ( {keywords.list.map((item, i) => (
<Fragment key={i}> <Fragment key={i}>
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li> <li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
</Fragment> </Fragment>
))} ))}
</ul> </ul>
</div> </div>
<div className="mobile-about__video d-flex"> <div className="mobile-about__video d-flex">
<img src={pic} alt="" /> <img src={pic} alt="" />
</div> </div>
<div className="mobile-about__advantages d-flex flex-column"> <div className="mobile-about__advantages d-flex flex-column">
<div> <div>
<h1 style={{ fontSize: fontSize.mobile.h1 }}> <h1 style={{ fontSize: fontSize.mobile.h1 }}>
{advantages.title} {advantages.title}
</h1> </h1>
</div> </div>
<ul> <ul>
{advantages.list.map((item, i) => ( {advantages.list.map((item, i) => (
<Fragment key={i}> <Fragment key={i}>
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li> <li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
</Fragment> </Fragment>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
) : null} ) : null}
</> </>
); );
} }
} }
About.defaultProps = { About.defaultProps = {
absoluteImages: [ absoluteImages: [
{ {
class: class:
window.innerWidth > 1000 window.innerWidth > 1000
? "about__fury--left__1" ? "about__fury--left__1"
: "mobile-about__images--1", : "mobile-about__images--1",
imageUrl: aboutLg, imageUrl: aboutLg,
}, },
], ],
}; };

@ -1,48 +1,48 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ArabickarImg from "../../assets/images/origami.jpg"; import ArabickarImg from "../../assets/images/origami.jpg";
class Arabickar extends Component { class Arabickar extends Component {
render() { render() {
return ( return (
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
width: "100%", width: "100%",
textAlign: "center", textAlign: "center",
height: "100vh", height: "100vh",
}} }}
> >
<img <img
src={ArabickarImg} src={ArabickarImg}
alt={"حرفة ورقية"} alt={"حرفة ورقية"}
style={{ style={{
padding: "5px", padding: "5px",
maxHheight: "70vh", maxHheight: "70vh",
maxWidth: "80vw", maxWidth: "80vw",
margin: "auto", margin: "auto",
}} }}
/> />
<a <a
style={{ style={{
display: "flex", display: "flex",
backgroundColor: "#0099ff", backgroundColor: "#0099ff",
color: "#fff", color: "#fff",
textDecoration: "none", textDecoration: "none",
textAlign: "center", textAlign: "center",
margin: "30px auto", margin: "30px auto",
fontSize: "20px", fontSize: "20px",
fontWeight: "bold", fontWeight: "bold",
padding: "5px 80px", padding: "5px 80px",
borderRadius: "5px", borderRadius: "5px",
}} }}
href="https://zil.ink/arabickar" href="https://zil.ink/arabickar"
> >
حرفة ورقية حرفة ورقية
</a> </a>
</div> </div>
); );
} }
} }
export default Arabickar; export default Arabickar;

@ -1,55 +1,55 @@
import React, { Component } from "react"; import React, { Component } from "react";
import Cellphone from "./Cellphone/index"; import Cellphone from "./Cellphone/index";
import Code from "./Code/index"; import Code from "./Code/index";
import Splash from "../Splash/index"; import Splash from "../Splash/index";
import { user } from "../../../Redux/actions"; import { user } from "../../../Redux/actions";
import { connect } from "react-redux"; import { connect } from "react-redux";
class Login extends Component { class Login extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
page: 0, page: 0,
splash: false, splash: false,
}; };
} }
async componentDidUpdate() { async componentDidUpdate() {
const { cellphone, otp, page } = this.state; const { cellphone, otp, page } = this.state;
if (cellphone && !otp) this.props.otp({ cellphone }); if (cellphone && !otp) this.props.otp({ cellphone });
if (page && cellphone && otp) if (page && cellphone && otp)
this.props.otp_login({ this.props.otp_login({
cellphone, cellphone,
otp, otp,
userToken: "2", userToken: "2",
applicationToken: "22", applicationToken: "22",
}); });
} }
resend = () => { resend = () => {
const { cellphone } = this.state; const { cellphone } = this.state;
this.props.otp({ cellphone }); this.props.otp({ cellphone });
}; };
render() { render() {
return ( return (
<> <>
{this.state.page === 0 ? ( {this.state.page === 0 ? (
!this.state.splash ? ( !this.state.splash ? (
<Cellphone parent={this} /> <Cellphone parent={this} />
) : null ) : null
) : ( ) : (
<Code parent={this} /> <Code parent={this} />
)} )}
{this.state.splash ? <Splash /> : null} {this.state.splash ? <Splash /> : null}
</> </>
); );
} }
} }
export default connect((state) => ({ isLogin: state.user.isLogin }), { export default connect((state) => ({ isLogin: state.user.isLogin }), {
otp: user.otp, otp: user.otp,
otp_login: user.otp_login, otp_login: user.otp_login,
})(Login); })(Login);

@ -1,107 +1,107 @@
import React, { useState } from "react"; import React, { useState } from "react";
import onInput from "~/util/onInput"; import onInput from "~/util/onInput";
import Input from "../Input/index"; import Input from "../Input/index";
import "./index.scss"; import "./index.scss";
import moment from "jalali-moment"; import moment from "jalali-moment";
export default function Birthdate(props) { export default function Birthdate(props) {
const { defaultValue, parent, name } = props; const { defaultValue, parent, name } = props;
console.log({ defaultValue }); console.log({ defaultValue });
let momentDate = moment((defaultValue || {})[name]); let momentDate = moment((defaultValue || {})[name]);
let isvalid = momentDate?.isValid(); let isvalid = momentDate?.isValid();
const day = isvalid ? momentDate?.format("jDD") : null, const day = isvalid ? momentDate?.format("jDD") : null,
month = isvalid ? momentDate?.format("jMM") : null, month = isvalid ? momentDate?.format("jMM") : null,
year = isvalid ? momentDate?.format("jYYYY") : null; year = isvalid ? momentDate?.format("jYYYY") : null;
const [state, setState] = useState({ day, month, year }); const [state, setState] = useState({ day, month, year });
const onChange = (_name, value) => { const onChange = (_name, value) => {
let _state = { ...state, [_name]: value }; let _state = { ...state, [_name]: value };
setState(_state); setState(_state);
parent.onChange( parent.onChange(
name, name,
moment moment
.from( .from(
`${_state?.year}/${_state?.month}/${_state?.day}`, `${_state?.year}/${_state?.month}/${_state?.day}`,
"fa", "fa",
"YYYY/M/D" "YYYY/M/D"
) )
.locale("en") .locale("en")
); );
}; };
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-birthdate d-flex justify-content-between align-items-center"> <div className="mobile-birthdate d-flex justify-content-between align-items-center">
<label>{window.t("تاریخ تولد")}</label> <label>{window.t("تاریخ تولد")}</label>
<div className="mobile-birthdate__date d-flex align-items-center"> <div className="mobile-birthdate__date d-flex align-items-center">
<Input <Input
variant="standard" variant="standard"
name="day" name="day"
placeholder={window.t("روز")} placeholder={window.t("روز")}
maxLength={2} maxLength={2}
onInput={onInput.dayHandler} onInput={onInput.dayHandler}
parent={{ onChange }} parent={{ onChange }}
defaultValue={state} defaultValue={state}
/> />
<span>/</span> <span>/</span>
<Input <Input
variant="standard" variant="standard"
name="month" name="month"
placeholder={window.t("ماه")} placeholder={window.t("ماه")}
maxLength={2} maxLength={2}
onInput={onInput.monthHandler} onInput={onInput.monthHandler}
parent={{ onChange }} parent={{ onChange }}
defaultValue={state} defaultValue={state}
/> />
<span>/</span> <span>/</span>
<Input <Input
variant="standard" variant="standard"
name="year" name="year"
placeholder={window.t("سال")} placeholder={window.t("سال")}
maxLength={4} maxLength={4}
onInput={onInput.yearHandler} onInput={onInput.yearHandler}
parent={{ onChange }} parent={{ onChange }}
defaultValue={state} defaultValue={state}
/> />
</div> </div>
</div> </div>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div className="birthdate d-flex justify-content-between align-items-center"> <div className="birthdate d-flex justify-content-between align-items-center">
<label>{window.t("تاریخ تولد")}</label> <label>{window.t("تاریخ تولد")}</label>
<div className="birthdate__date d-flex align-items-center"> <div className="birthdate__date d-flex align-items-center">
<Input <Input
variant="standard" variant="standard"
name="day" name="day"
placeholder={window.t("روز")} placeholder={window.t("روز")}
maxLength={2} maxLength={2}
onInput={onInput.dayHandler} onInput={onInput.dayHandler}
parent={{ onChange }} parent={{ onChange }}
defaultValue={state} defaultValue={state}
/> />
<span>/</span> <span>/</span>
<Input <Input
variant="standard" variant="standard"
name="month" name="month"
placeholder={window.t("ماه")} placeholder={window.t("ماه")}
maxLength={2} maxLength={2}
onInput={onInput.monthHandler} onInput={onInput.monthHandler}
parent={{ onChange }} parent={{ onChange }}
defaultValue={state} defaultValue={state}
/> />
<span>/</span> <span>/</span>
<Input <Input
variant="standard" variant="standard"
name="year" name="year"
placeholder={window.t("سال")} placeholder={window.t("سال")}
maxLength={4} maxLength={4}
onInput={onInput.yearHandler} onInput={onInput.yearHandler}
parent={{ onChange }} parent={{ onChange }}
defaultValue={state} defaultValue={state}
/> />
</div> </div>
</div> </div>
) : null} ) : null}
</> </>
); );
} }

File diff suppressed because it is too large Load Diff

@ -1,165 +1,165 @@
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userFactor } from "~/Redux/actions"; import { userFactor } from "~/Redux/actions";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55,
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
}, },
mobile: { mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
}, },
}; };
const DiscoutCode = ({ const DiscoutCode = ({
codeId, codeId,
setCodeId, setCodeId,
delCodeId, delCodeId,
userId, userId,
factorId, factorId,
code, code,
}) => { }) => {
const [value, setValue] = React.useState(code || ""); const [value, setValue] = React.useState(code || "");
function setOff() { function setOff() {
setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); setCodeId({ offCodeValue: value, userId: userId, id: factorId || null });
} }
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div className="discount-code d-flex flex-column"> <div className="discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}> <h2 style={{ fontSize: fontSize.desktop.h2 }}>
{window.t("کد تخفیف")} {window.t("کد تخفیف")}
</h2> </h2>
{!code ? ( {!code ? (
<> <>
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} {window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "}
</p> </p>
<div className="discount-code__box d-flex align-items-center"> <div className="discount-code__box d-flex align-items-center">
<input <input
style={{ fontSize: fontSize.desktop.input }} style={{ fontSize: fontSize.desktop.input }}
type="text" type="text"
defaultValue={codeId} defaultValue={codeId}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
/> />
<button <button
style={{ fontSize: fontSize.desktop.button }} style={{ fontSize: fontSize.desktop.button }}
onClick={setOff} onClick={setOff}
> >
{window.t("ثبت کد")}{" "} {window.t("ثبت کد")}{" "}
</button> </button>
</div> </div>
</> </>
) : ( ) : (
<> <>
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
{window.t("کد تخفیف برای شما ثبت شده است")}{" "} {window.t("کد تخفیف برای شما ثبت شده است")}{" "}
</p> </p>
<div <div
className="discount-code__box d-flex align-items-center" className="discount-code__box d-flex align-items-center"
style={{ backgroundColor: "#eee" }} style={{ backgroundColor: "#eee" }}
> >
<input <input
disabled disabled
style={{ fontSize: 13, color: "gray" }} style={{ fontSize: 13, color: "gray" }}
type="text" type="text"
defaultValue={code} defaultValue={code}
/> />
<button <button
style={{ style={{
fontSize: fontSize.mobile.button, fontSize: fontSize.mobile.button,
backgroundColor: "orange", backgroundColor: "orange",
width: 40, width: 40,
}} }}
onClick={() => delCodeId({})} onClick={() => delCodeId({})}
> >
x{" "} x{" "}
</button> </button>
</div> </div>
</> </>
)} )}
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-discount-code d-flex flex-column"> <div className="mobile-discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
{window.t("کد تخفیف")} {window.t("کد تخفیف")}
</h2> </h2>
{!code ? ( {!code ? (
<> <>
{" "} {" "}
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} {window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "}
</p> </p>
<div className="mobile-discount-code__box d-flex align-items-center"> <div className="mobile-discount-code__box d-flex align-items-center">
<input <input
style={{ fontSize: fontSize.mobile.input }} style={{ fontSize: fontSize.mobile.input }}
type="text" type="text"
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
/> />
<button <button
style={{ fontSize: fontSize.mobile.button }} style={{ fontSize: fontSize.mobile.button }}
onClick={setOff} onClick={setOff}
> >
{window.t("ثبت کد")}{" "} {window.t("ثبت کد")}{" "}
</button> </button>
</div> </div>
</> </>
) : ( ) : (
<> <>
{" "} {" "}
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{window.t("کد تخفیف برای شما ثبت شده است")}{" "} {window.t("کد تخفیف برای شما ثبت شده است")}{" "}
</p> </p>
<div <div
className="discount-code__box d-flex align-items-center" className="discount-code__box d-flex align-items-center"
style={{ backgroundColor: "#eee" }} style={{ backgroundColor: "#eee" }}
> >
<input <input
disabled disabled
style={{ fontSize: 13, color: "gray" }} style={{ fontSize: 13, color: "gray" }}
type="text" type="text"
defaultValue={code} defaultValue={code}
/> />
<button <button
style={{ style={{
fontSize: fontSize.mobile.button, fontSize: fontSize.mobile.button,
backgroundColor: "orange", backgroundColor: "orange",
width: 40, width: 40,
}} }}
onClick={() => delCodeId({})} onClick={() => delCodeId({})}
> >
x{" "} x{" "}
</button> </button>
</div> </div>
</> </>
)} )}
</div> </div>
) : null} ) : null}
</> </>
); );
}; };
export default connect( export default connect(
(state) => ({ (state) => ({
codeId: state.userFactor.info?.codeId, codeId: state.userFactor.info?.codeId,
code: state.userFactor.info?.offCode?.code, code: state.userFactor.info?.offCode?.code,
userId: state.user.status.id, userId: state.user.status.id,
factorId: state.userFactor.info?.id, factorId: state.userFactor.info?.id,
lang: state.publicApi.lang, lang: state.publicApi.lang,
}), }),
{ {
setCodeId: userFactor.update, setCodeId: userFactor.update,
delCodeId: userFactor.deleteUserOffCode, delCodeId: userFactor.deleteUserOffCode,
} }
)(DiscoutCode); )(DiscoutCode);

@ -1,463 +1,463 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userProduct } from "~/Redux/actions"; import { userProduct } from "~/Redux/actions";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table"; import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody"; import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer"; import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead"; import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
import "./index.scss"; import "./index.scss";
const useStyles = makeStyles({ const useStyles = makeStyles({
table: {}, table: {},
}); });
const maxMobileSize = 550; const maxMobileSize = 550;
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
mobile: { mobile: {
info: { info: {
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
}, },
price: { price: {
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22,
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40,
}, },
counter: { counter: {
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25,
}, },
delete: { delete: {
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28,
}, },
}, },
desktop: { desktop: {
info: { info: {
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
}, },
price: { price: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60,
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
}, },
counter: { counter: {
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65,
}, },
delete: { delete: {
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
}, },
}, },
}; };
function BasicTable(props) { function BasicTable(props) {
const classes = useStyles(); const classes = useStyles();
const { list, handleDelete, route, factorInfo } = props; const { list, handleDelete, route, factorInfo } = props;
const sum = () => { const sum = () => {
let total = 0; let total = 0;
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
total += list[i].count * 1; total += list[i].count * 1;
} }
return total; return total;
}; };
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table"> <Table className={classes.table} aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align="right">{window.t("محصولات")}</TableCell> <TableCell align="right">{window.t("محصولات")}</TableCell>
<TableCell align="center">{window.t("قیمت")}</TableCell> <TableCell align="center">{window.t("قیمت")}</TableCell>
{route === "callback" ? ( {route === "callback" ? (
<TableCell align="center">{window.t("تعداد")}</TableCell> <TableCell align="center">{window.t("تعداد")}</TableCell>
) : null} ) : null}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{list.map((row, i) => ( {list.map((row, i) => (
<Item <Item
data={row} data={row}
key={i} key={i}
// handleCounter={handleCounter} // handleCounter={handleCounter}
pushToCart={props.pushToCart} pushToCart={props.pushToCart}
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route} route={route}
factorInfo={factorInfo} factorInfo={factorInfo}
/> />
))} ))}
{route === "cart" && factorInfo ? ( {route === "cart" && factorInfo ? (
<TableRow> <TableRow>
<TableCell align="center"> <TableCell align="center">
<span style={{ color: "grey" }}> <span style={{ color: "grey" }}>
{window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)} {window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)}
</span> </span>
</TableCell> </TableCell>
<TableCell align="right" component="th" scope="row"> <TableCell align="right" component="th" scope="row">
<span style={{ color: "grey" }}> <span style={{ color: "grey" }}>
{sum()} {window.t("محصول")} {sum()} {window.t("محصول")}
</span> </span>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : null} ) : null}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table"> <Table className={classes.table} aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align="right">{window.t("محصولات")}</TableCell> <TableCell align="right">{window.t("محصولات")}</TableCell>
<TableCell align="center">{window.t("قیمت")}</TableCell> <TableCell align="center">{window.t("قیمت")}</TableCell>
<TableCell align="center">{window.t("تعداد")}</TableCell> <TableCell align="center">{window.t("تعداد")}</TableCell>
<TableCell align="center"></TableCell> <TableCell align="center"></TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{list.map((row, i) => ( {list.map((row, i) => (
<Item <Item
data={row} data={row}
key={i} key={i}
// handleCounter={handleCounter} // handleCounter={handleCounter}
pushToCart={props.pushToCart} pushToCart={props.pushToCart}
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route} route={route}
factorInfo={factorInfo} factorInfo={factorInfo}
/> />
))} ))}
{factorInfo ? ( {factorInfo ? (
<TableRow> <TableRow>
<TableCell align="right" component="th" scope="row"> <TableCell align="right" component="th" scope="row">
<span style={{ color: "grey" }}></span> <span style={{ color: "grey" }}></span>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<span style={{ color: "grey" }}> <span style={{ color: "grey" }}>
{window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)} {window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)}
</span> </span>
</TableCell> </TableCell>
<TableCell align="center" component="th" scope="row"> <TableCell align="center" component="th" scope="row">
<span style={{ color: "grey" }}> <span style={{ color: "grey" }}>
{sum()} {window.t("محصول")} {sum()} {window.t("محصول")}
</span> </span>
</TableCell> </TableCell>
<TableCell align="center" component="th" scope="row"> <TableCell align="center" component="th" scope="row">
<span style={{ color: "grey" }}></span> <span style={{ color: "grey" }}></span>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : null} ) : null}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
) : null} ) : null}
</> </>
); );
} }
const Item = (props) => { const Item = (props) => {
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
const { data, pushToCart, id, route } = props; const { data, pushToCart, id, route } = props;
if (!data.product) return null; if (!data.product) return null;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<TableRow key={data.product.book.name}> <TableRow key={data.product.book.name}>
<TableCell align="right" component="th" scope="row"> <TableCell align="right" component="th" scope="row">
<div className="mobile-cart-table-product d-flex align-items-center"> <div className="mobile-cart-table-product d-flex align-items-center">
<img <img
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
alt={data.product.book.name} alt={data.product.book.name}
/> />
<div <div
className={`mobile-cart-table-product__info d-flex flex-column p-1 ${ className={`mobile-cart-table-product__info d-flex flex-column p-1 ${
window.lang === "en" ? "align-items-start" : "" window.lang === "en" ? "align-items-start" : ""
}`} }`}
> >
<strong style={{ fontSize: fontSize.mobile.info.strong }}> <strong style={{ fontSize: fontSize.mobile.info.strong }}>
{window.t("نسخه") + {window.t("نسخه") +
` ${ ` ${
+data.product.productType === 1 +data.product.productType === 1
? window.t("الکترونیکی") ? window.t("الکترونیکی")
: window.t("چاپی") : window.t("چاپی")
} ${data.product.book.name} `} } ${data.product.book.name} `}
</strong> </strong>
<p style={{ fontSize: 12 }}> <p style={{ fontSize: 12 }}>
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} {window.t("پایه") + ` ${grades[data.product.book.gradeId]}`}
</p> </p>
<span style={{ fontSize: 10 }}> <span style={{ fontSize: 10 }}>
{window.t("همراه با:")} {window.t("همراه با:")}
{data.product.book.items || {data.product.book.items ||
window.t("کد فعالسازی محتوای الکترونیک")} window.t("کد فعالسازی محتوای الکترونیک")}
</span> </span>
{route !== "callback" ? ( {route !== "callback" ? (
<div <div
className={`mobile-cart-table-product__info--delete d-flex align-items-center ${ className={`mobile-cart-table-product__info--delete d-flex align-items-center ${
window.lang === "en" window.lang === "en"
? "align-self-start" ? "align-self-start"
: "align-self-end" : "align-self-end"
}`} }`}
> >
<DeleteOutlineOutlinedIcon <DeleteOutlineOutlinedIcon
style={{ style={{
color: "#FC120A", color: "#FC120A",
fontSize: 25, fontSize: 25,
marginLeft: 0, marginLeft: 0,
cursor: "pointer", cursor: "pointer",
}} }}
onClick={() => onClick={() =>
pushToCart({ pushToCart({
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: -data.count, count: -data.count,
}) })
} }
/> />
<span <span
onClick={() => onClick={() =>
pushToCart({ pushToCart({
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: -data.count, count: -data.count,
}) })
} }
style={{ style={{
fontSize: fontSize.mobile.delete.span, fontSize: fontSize.mobile.delete.span,
color: "#FC120A", color: "#FC120A",
cursor: "pointer", cursor: "pointer",
}} }}
> >
{window.t("حذف")} {window.t("حذف")}
</span> </span>
</div> </div>
) : null} ) : null}
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> <div className="mobile-cart-table-price d-flex flex-column align-items-center">
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> <div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.mobile.price.strong }}> <strong style={{ fontSize: fontSize.mobile.price.strong }}>
{window.tr(data.product.price * data.count || 1000)} {window.tr(data.product.price * data.count || 1000)}
</strong> </strong>
{route !== "callback" ? ( {route !== "callback" ? (
<span style={{ fontSize: fontSize.mobile.price.span }}> <span style={{ fontSize: fontSize.mobile.price.span }}>
{window.tr(data.product.price || "100")}{" "} {window.tr(data.product.price || "100")}{" "}
{window.t("قیمت هر واحد")}{" "} {window.t("قیمت هر واحد")}{" "}
</span> </span>
) : null} ) : null}
</div> </div>
{route === "cart" ? ( {route === "cart" ? (
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> <div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
<button <button
onClick={() => onClick={() =>
pushToCart( pushToCart(
{ {
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: 1, count: 1,
}, },
{}, {},
{ id: data.factorId } { id: data.factorId }
) )
} }
style={{ fontSize: fontSize.mobile.counter.button }} style={{ fontSize: fontSize.mobile.counter.button }}
> >
+ +
</button> </button>
<span style={{ fontSize: fontSize.mobile.counter.span }}> <span style={{ fontSize: fontSize.mobile.counter.span }}>
{data.count} {data.count}
</span> </span>
<button <button
onClick={() => onClick={() =>
data.count > 0 data.count > 0
? pushToCart( ? pushToCart(
{ {
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: -1, count: -1,
}, },
{}, {},
{ id: data.factorId } { id: data.factorId }
) )
: null : null
} }
style={{ fontSize: fontSize.mobile.counter.button }} style={{ fontSize: fontSize.mobile.counter.button }}
> >
- -
</button> </button>
</div> </div>
) : null} ) : null}
</div> </div>
</TableCell> </TableCell>
{route === "callback" ? ( {route === "callback" ? (
<TableCell> <TableCell>
<strong className="d-flex justify-content-center align-items-center"> <strong className="d-flex justify-content-center align-items-center">
{data.count} {data.count}
</strong> </strong>
</TableCell> </TableCell>
) : null} ) : null}
</TableRow> </TableRow>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<TableRow key={data.product.book?.name}> <TableRow key={data.product.book?.name}>
<TableCell align="right" component="th" scope="row"> <TableCell align="right" component="th" scope="row">
<div className="cart-item__info d-flex"> <div className="cart-item__info d-flex">
<img <img
src={`https://dnvn.ir/api/v1/file/${data.product?.book?.fileIds}`} src={`https://dnvn.ir/api/v1/file/${data.product?.book?.fileIds}`}
alt={data.product?.book?.name} alt={data.product?.book?.name}
/> />
<div className="d-flex flex-column justify-content-center"> <div className="d-flex flex-column justify-content-center">
<strong style={{ fontSize: fontSize.desktop.info.strong }}> <strong style={{ fontSize: fontSize.desktop.info.strong }}>
{`${window.t("نسخه")} ${ {`${window.t("نسخه")} ${
+data.product?.productType === 1 +data.product?.productType === 1
? window.t("الکترونیکی") ? window.t("الکترونیکی")
: window.t("چاپی") : window.t("چاپی")
} ${data.product?.book?.name} `} } ${data.product?.book?.name} `}
</strong> </strong>
<p style={{ fontSize: fontSize?.desktop?.info.p }}> <p style={{ fontSize: fontSize?.desktop?.info.p }}>
{window.t("پایه") + ` ${grades[data.product?.book?.gradeId]}`} {window.t("پایه") + ` ${grades[data.product?.book?.gradeId]}`}
</p> </p>
<span style={{ fontSize: fontSize.desktop.info.span }}> <span style={{ fontSize: fontSize.desktop.info.span }}>
{window.t("همراه با:")} {window.t("همراه با:")}
{data.product?.book?.items || {data.product?.book?.items ||
window.t("کد فعالسازی محتوای الکترونیک")} window.t("کد فعالسازی محتوای الکترونیک")}
</span> </span>
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> <div className="cart-item__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.desktop.price.strong }}> <strong style={{ fontSize: fontSize.desktop.price.strong }}>
{window.tr(data.product.price * data.count || "1000")}{" "} {window.tr(data.product.price * data.count || "1000")}{" "}
{window.t("تومان")} {window.t("تومان")}
</strong> </strong>
<span style={{ fontSize: fontSize.desktop.price.span }}> <span style={{ fontSize: fontSize.desktop.price.span }}>
{window.t("قیمت هر عدد")}{" "} {window.t("قیمت هر عدد")}{" "}
{window.tr(data.product.price) || "100"} {window.tr(data.product.price) || "100"}
{window.t("تومان")} {window.t("تومان")}
</span> </span>
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="cart-item__counter d-flex align-items-center"> <div className="cart-item__counter d-flex align-items-center">
<div className="cart-item__counter--box d-flex justify-content-around align-items-center"> <div className="cart-item__counter--box d-flex justify-content-around align-items-center">
<button <button
onClick={() => onClick={() =>
pushToCart( pushToCart(
{ {
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: 1, count: 1,
}, },
{}, {},
{ id: data.factorId } { id: data.factorId }
) )
} }
style={{ fontSize: fontSize.desktop.counter.button }} style={{ fontSize: fontSize.desktop.counter.button }}
> >
+ +
</button> </button>
<span style={{ fontSize: fontSize.desktop.counter.span }}> <span style={{ fontSize: fontSize.desktop.counter.span }}>
{data.count} {data.count}
</span> </span>
<button <button
onClick={() => onClick={() =>
pushToCart( pushToCart(
{ {
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: -1, count: -1,
}, },
{}, {},
{ id: data.factorId } { id: data.factorId }
) )
} }
style={{ fontSize: fontSize.desktop.counter.button }} style={{ fontSize: fontSize.desktop.counter.button }}
> >
- -
</button> </button>
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="cart-item__delete d-flex align-items-center justify-content-center"> <div className="cart-item__delete d-flex align-items-center justify-content-center">
<DeleteOutlineOutlinedIcon <DeleteOutlineOutlinedIcon
style={{ style={{
color: "#FC120A", color: "#FC120A",
fontSize: 30, fontSize: 30,
marginLeft: 5, marginLeft: 5,
cursor: "pointer", cursor: "pointer",
}} }}
// onClick={() => handleDelete(data.id)} // onClick={() => handleDelete(data.id)}
onClick={() => onClick={() =>
pushToCart({ pushToCart({
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: -data.count, count: -data.count,
}) })
} }
/> />
<span <span
// onClick={() => handleDelete(data.id)} // onClick={() => handleDelete(data.id)}
onClick={() => onClick={() =>
pushToCart({ pushToCart({
productId: data.productId, productId: data.productId,
userId: id, userId: id,
count: -data.count, count: -data.count,
}) })
} }
style={{ style={{
fontSize: fontSize.desktop.delete.span, fontSize: fontSize.desktop.delete.span,
cursor: "pointer", cursor: "pointer",
}} }}
> >
{window.t("حذف")} {window.t("حذف")}
</span> </span>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : null} ) : null}
</> </>
); );
}; };
export default connect( export default connect(
(state) => ({ (state) => ({
loading: state.userProduct.loading, loading: state.userProduct.loading,
info: state.book.info, info: state.book.info,
id: state.user.status.id, id: state.user.status.id,
factorInfo: state.userFactor.info, factorInfo: state.userFactor.info,
lang: state.publicApi.lang, lang: state.publicApi.lang,
}), }),
{ pushToCart: userProduct.add } { pushToCart: userProduct.add }
)(BasicTable); )(BasicTable);

@ -1,432 +1,432 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { transport, userFactor } from "~/Redux/actions"; import { transport, userFactor } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Table from "./Table/index"; import Table from "./Table/index";
import DiscoutCode from "./Discount/index"; import DiscoutCode from "./Discount/index";
import DeliveryMethod from "./DeliveryMethod/index"; import DeliveryMethod from "./DeliveryMethod/index";
import Factor from "./Factor/index"; import Factor from "./Factor/index";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import "./index.scss"; import "./index.scss";
function Navigate({ path }) { function Navigate({ path }) {
let history = useHistory(); let history = useHistory();
return <>{history.push(path)}</>; return <>{history.push(path)}</>;
} }
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55,
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90, p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90,
}, },
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
}, },
}; };
class Cart extends Component { class Cart extends Component {
state = { state = {
selectedDelivery: { name: "", price: 0 }, selectedDelivery: { name: "", price: 0 },
discount: 0, discount: 0,
totalPrice: null, totalPrice: null,
list: this.props.list, list: this.props.list,
controlFactorInfoRepeat: true, controlFactorInfoRepeat: true,
}; };
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
// if (this.props.factorInfo === null && !this.props.loading) { // if (this.props.factorInfo === null && !this.props.loading) {
// this.props.getFactorInfo({}); // this.props.getFactorInfo({});
// } // }
if (window.location.search) if (window.location.search)
if (!window.location.search.includes("NOK") && !window.location.hash) { if (!window.location.search.includes("NOK") && !window.location.hash) {
let Authority = window.location.search let Authority = window.location.search
.slice(1) .slice(1)
.split("&")[0] .split("&")[0]
.split("=")[1]; .split("=")[1];
this.props.getVerify({ Authority }); this.props.getVerify({ Authority });
window.location.hash = "verified"; window.location.hash = "verified";
} }
// if (this.props.factorInfo === null && !this.controlFactorInfoRepeat) { // if (this.props.factorInfo === null && !this.controlFactorInfoRepeat) {
// this.props.getFactorInfo({}); // this.props.getFactorInfo({});
// this.controlFactorInfoRepeat = true; // this.controlFactorInfoRepeat = true;
// } // }
// if (this.props.list.length > 0) { // if (this.props.list.length > 0) {
// let wantedId; //should be zero // let wantedId; //should be zero
// for (let item of this.props.list) { // for (let item of this.props.list) {
// if (item.condition === 2) { // if (item.condition === 2) {
// wantedId = item.id; // wantedId = item.id;
// break; // break;
// } // }
// } // }
// if (this.props.list.length !== 1) { // if (this.props.list.length !== 1) {
// // this.props.getInfo({ id: wantedId }); // // this.props.getInfo({ id: wantedId });
// } // }
// } else { // } else {
// // this.props.getFactorInfo({}); // // this.props.getFactorInfo({});
// } // }
} }
componentDidMount() { componentDidMount() {
localStorage.removeItem("afterLogin"); localStorage.removeItem("afterLogin");
window.scrollTo(0, 0); window.scrollTo(0, 0);
this.props.getTransportList(); this.props.getTransportList();
this.props.getFactorInfo({}); this.props.getFactorInfo({});
} }
handleCounter = (type, id) => { handleCounter = (type, id) => {
if (type === "increase") { if (type === "increase") {
this.setState((prevState) => ({ this.setState((prevState) => ({
list: prevState.list.map((item) => list: prevState.list.map((item) =>
item.id === id ? { ...item, number: item.number + 1 } : item item.id === id ? { ...item, number: item.number + 1 } : item
), ),
})); }));
} else { } else {
this.setState((prevState) => ({ this.setState((prevState) => ({
list: prevState.list.map((item) => list: prevState.list.map((item) =>
item.id === id ? { ...item, number: item.number - 1 } : item item.id === id ? { ...item, number: item.number - 1 } : item
), ),
})); }));
} }
}; };
handleDelete = (id) => { handleDelete = (id) => {
let list = this.state.list.filter((item) => item.id !== id); let list = this.state.list.filter((item) => item.id !== id);
this.setState({ this.setState({
list: list, list: list,
}); });
}; };
totalPrice = () => { totalPrice = () => {
let total = 0; let total = 0;
for (let i = 0; i < this.state.list.length; i++) { for (let i = 0; i < this.state.list.length; i++) {
total += this.state.list[i].price * this.state.list[i].number; total += this.state.list[i].price * this.state.list[i].number;
} }
return total - this.state.discount + this.state.selectedDelivery.price; return total - this.state.discount + this.state.selectedDelivery.price;
}; };
render() { render() {
const { list, payPrice, payMethods, factorInfo } = this.props; const { list, payPrice, payMethods, factorInfo } = this.props;
if (!factorInfo || list.length === 0) if (!factorInfo || list.length === 0)
return ( return (
<div <div
align="center" align="center"
className={window.innerWidth < 1000 ? "mobile-cart" : "cart "} className={window.innerWidth < 1000 ? "mobile-cart" : "cart "}
> >
<Navbar /> <Navbar />
<div align="center" style={{ marginTop: 50 }}> <div align="center" style={{ marginTop: 50 }}>
{window.t("هیچ محصولی در سبد خرید شما وجود ندارد")}{" "} {window.t("هیچ محصولی در سبد خرید شما وجود ندارد")}{" "}
</div> </div>
<br /> <br />
<Link <Link
to="/products" to="/products"
style={{ style={{
textDecoration: "none", textDecoration: "none",
width: "80%", width: "80%",
textAlign: "center", textAlign: "center",
backgroundColor: "green", backgroundColor: "green",
color: "white", color: "white",
borderRadius: "10px", borderRadius: "10px",
padding: "5px 10px", padding: "5px 10px",
margin: "10 auto", margin: "10 auto",
}} }}
> >
{window.t("فروشگاه")}{" "} {window.t("فروشگاه")}{" "}
</Link> </Link>
</div> </div>
); );
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
list.length > 0 ? ( list.length > 0 ? (
<> <>
<div className="cart d-flex flex-column"> <div className="cart d-flex flex-column">
<Navbar /> <Navbar />
{window.location.search.includes("NOK") || {window.location.search.includes("NOK") ||
this.props.isVerified === false ? ( this.props.isVerified === false ? (
<div> <div>
{window.t( {window.t(
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" "پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید"
)}{" "} )}{" "}
</div> </div>
) : window.location.search.includes("OK") ? ( ) : window.location.search.includes("OK") ? (
<Navigate path="/orders" /> <Navigate path="/orders" />
) : null} ) : null}
<div <div
className="d-flex" className="d-flex"
style={{ width: "100%", flex: 1, marginBottom: 10 }} style={{ width: "100%", flex: 1, marginBottom: 10 }}
> >
<section className="cart__right d-flex flex-column"> <section className="cart__right d-flex flex-column">
<header> <header>
<h1 style={{ fontSize: fontSize.desktop.h1 }}> <h1 style={{ fontSize: fontSize.desktop.h1 }}>
{window.t("سبد پیش خرید")}{" "} {window.t("سبد پیش خرید")}{" "}
</h1> </h1>
</header> </header>
<Table <Table
list={list} list={list}
handleCounter={this.handleCounter} handleCounter={this.handleCounter}
handleDelete={this.handleDelete} handleDelete={this.handleDelete}
payPrice={payPrice} payPrice={payPrice}
route={"cart"} route={"cart"}
/> />
</section> </section>
<section className="cart__left d-flex flex-column p-3"> <section className="cart__left d-flex flex-column p-3">
{false && factorInfo.transportId ? ( {false && factorInfo.transportId ? (
<header className="cart__left--header d-flex flex-column"> <header className="cart__left--header d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}> <h2 style={{ fontSize: fontSize.desktop.h2 }}>
{window.t("روشهای ارسال")} {window.t("روشهای ارسال")}
</h2> </h2>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
{payMethods.map((item, i) => ( {payMethods.map((item, i) => (
<DeliveryMethod <DeliveryMethod
data={item} data={item}
key={i} key={i}
parent={this} parent={this}
transportId={ transportId={
factorInfo ? factorInfo.transportId : null factorInfo ? factorInfo.transportId : null
} }
/> />
))} ))}
</div> </div>
</header> </header>
) : null} ) : null}
{factorInfo ? <DiscoutCode /> : null} {factorInfo ? <DiscoutCode /> : null}
{factorInfo ? <Factor parent={this} list={list} /> : null} {factorInfo ? <Factor parent={this} list={list} /> : null}
{factorInfo ? ( {factorInfo ? (
<div className="cart__totalPrice d-flex align-items-center justify-content-center"> <div className="cart__totalPrice d-flex align-items-center justify-content-center">
<h3 style={{ fontSize: fontSize.mobile.h2 }}> <h3 style={{ fontSize: fontSize.mobile.h2 }}>
{window.t("جمع کل")} {window.t("جمع کل")}
<br /> <br />
{window.t("سبد خرید")}{" "} {window.t("سبد خرید")}{" "}
</h3> </h3>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}> <strong style={{ fontSize: fontSize.mobile.h1 }}>
{window.tr( {window.tr(
factorInfo.payPrice - factorInfo.transportPrice factorInfo.payPrice - factorInfo.transportPrice
)} )}
</strong> </strong>
<span style={{ fontSize: fontSize.mobile.h3 }}> <span style={{ fontSize: fontSize.mobile.h3 }}>
{window.t("تومان")} {window.t("تومان")}
</span> </span>
</div> </div>
</div> </div>
) : null} ) : null}
{/* <div className="cart__left--header d-flex flex-column mt-3"> {/* <div className="cart__left--header d-flex flex-column mt-3">
<h2 style={{ fontSize: fontSize.desktop.h2 }}> <h2 style={{ fontSize: fontSize.desktop.h2 }}>
{window.t("روشهای ارسال")} {window.t("روشهای ارسال")}
</h2> </h2>
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
{window.t("با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> {window.t("با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
{payMethods.map((item, i) => ( {payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} /> <DeliveryMethod data={item} key={i} parent={this} />
))} ))}
</div> </div>
</div> */} </div> */}
<Link <Link
disabled={window.lang == "ar" || window.lang == "en"} disabled={window.lang == "ar" || window.lang == "en"}
to={ to={
window.lang == "ar" || window.lang == "en" window.lang == "ar" || window.lang == "en"
? "/cart" ? "/cart"
: "/checkout" : "/checkout"
} }
className="cart__left--submit" className="cart__left--submit"
style={{ textDecoration: "none", textAlign: "center" }} style={{ textDecoration: "none", textAlign: "center" }}
//onClick={() => this.props.payFactor({ userId: userId })} //onClick={() => this.props.payFactor({ userId: userId })}
> >
{window.t("ادامه")}{" "} {window.t("ادامه")}{" "}
</Link> </Link>
</section> </section>
</div> </div>
</div> </div>
<Footer /> <Footer />
</> </>
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Loader /> <Loader />
</div> </div>
) )
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
list.length > 0 ? ( list.length > 0 ? (
<div className="mobile-cart d-flex flex-column"> <div className="mobile-cart d-flex flex-column">
<Navbar /> <Navbar />
{window.location.search.includes("NOK") ? ( {window.location.search.includes("NOK") ? (
<div> <div>
{window.t( {window.t(
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" "پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید"
)} )}
</div> </div>
) : null} ) : null}
<h1 style={{ fontSize: fontSize.mobile.h1 }}> <h1 style={{ fontSize: fontSize.mobile.h1 }}>
{window.t("سبد پیش خرید")} {window.t("سبد پیش خرید")}
</h1> </h1>
<div <div
className={`d-flex ${ className={`d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<Table <Table
list={list} list={list}
handleCounter={this.handleCounter} handleCounter={this.handleCounter}
handleDelete={this.handleDelete} handleDelete={this.handleDelete}
payPrice={payPrice} payPrice={payPrice}
route={"cart"} route={"cart"}
/> />
</div> </div>
{false && factorInfo.transportId ? ( {false && factorInfo.transportId ? (
<div className="mobile-cart__payMethods d-flex flex-column"> <div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
{window.t("روشهای ارسال")} {window.t("روشهای ارسال")}
</h2> </h2>
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{window.t( {window.t(
"با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید" "با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید"
)}{" "} )}{" "}
</p> </p>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => ( {this.props.payMethods.map((item, i) => (
<DeliveryMethod <DeliveryMethod
data={item} data={item}
key={i} key={i}
parent={this} parent={this}
transportId={factorInfo ? factorInfo.transportId : null} transportId={factorInfo ? factorInfo.transportId : null}
/> />
))} ))}
</div> </div>
</div> </div>
) : null} ) : null}
<DiscoutCode parent={this} /> <DiscoutCode parent={this} />
{factorInfo ? <Factor parent={this} list={list} /> : null} {factorInfo ? <Factor parent={this} list={list} /> : null}
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2"> <div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2">
<h3 style={{ fontSize: fontSize.mobile.h2 }}> <h3 style={{ fontSize: fontSize.mobile.h2 }}>
{window.t("جمع کل")} <br /> {window.t("جمع کل")} <br />
{window.t("سبد خرید")}{" "} {window.t("سبد خرید")}{" "}
</h3> </h3>
{factorInfo ? ( {factorInfo ? (
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}> <strong style={{ fontSize: fontSize.mobile.h1 }}>
{window.tr( {window.tr(
factorInfo.payPrice - factorInfo.transportPrice factorInfo.payPrice - factorInfo.transportPrice
)} )}
{/* // factorInfo.transportPrice - // factorInfo.offPrice} */} {/* // factorInfo.transportPrice - // factorInfo.offPrice} */}
</strong> </strong>
<span style={{ fontSize: fontSize.mobile.h3 }}> <span style={{ fontSize: fontSize.mobile.h3 }}>
{window.t("تومان")} {window.t("تومان")}
</span> </span>
</div> </div>
) : null} ) : null}
</div> </div>
{/* <div className="mobile-cart__payMethods d-flex flex-column"> {/* <div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>{window.t("روشهای ارسال")}</h2> <h2 style={{ fontSize: fontSize.mobile.h2 }}>{window.t("روشهای ارسال")}</h2>
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => ( {this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} /> <DeliveryMethod data={item} key={i} parent={this} />
))} ))}
</div> </div>
</div> */} </div> */}
{/* <button {/* <button
className="mobile-cart__submit" className="mobile-cart__submit"
onClick={() => this.props.payFactor({ userId: userId })} onClick={() => this.props.payFactor({ userId: userId })}
> >
پرداخت")} پرداخت")}
</button> */} </button> */}
<br /> <br />
<div className="product-addtocart__box--accept d-flex"> <div className="product-addtocart__box--accept d-flex">
<input type="checkbox" checked={true} /> <input type="checkbox" checked={true} />
<Link <Link
to="/page/privacy" to="/page/privacy"
style={{ fontSize: "13px", margin: 0, padding: 0 }} style={{ fontSize: "13px", margin: 0, padding: 0 }}
> >
{window.t( {window.t(
"شرایط استفاده از دانوین و حریم خصوصی را مطالعه کرده ام" "شرایط استفاده از دانوین و حریم خصوصی را مطالعه کرده ام"
)} )}
</Link> </Link>
</div> </div>
<div className="product-addtocart__box--accept d-flex"> <div className="product-addtocart__box--accept d-flex">
<input type="checkbox" checked={true} /> <input type="checkbox" checked={true} />
<Link <Link
to="/page/returning" to="/page/returning"
style={{ fontSize: "13px", margin: 0, padding: 0 }} style={{ fontSize: "13px", margin: 0, padding: 0 }}
> >
{window.t("شرایط مرجوع کردن کالا در دانوین")} {window.t("شرایط مرجوع کردن کالا در دانوین")}
</Link> </Link>
</div> </div>
<Link <Link
disabled={window.lang == "ar" || window.lang == "en"} disabled={window.lang == "ar" || window.lang == "en"}
to={ to={
window.lang == "ar" || window.lang == "en" window.lang == "ar" || window.lang == "en"
? "/cart" ? "/cart"
: "/checkout" : "/checkout"
} }
className="mobile-cart__submit" className="mobile-cart__submit"
style={{ textAlign: "center", textDecoration: "none" }} style={{ textAlign: "center", textDecoration: "none" }}
// onClick={() => this.props.payFactor({ userId: userId })} // onClick={() => this.props.payFactor({ userId: userId })}
> >
{window.t("ادامه")}{" "} {window.t("ادامه")}{" "}
</Link> </Link>
</div> </div>
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Loader /> <Loader />
</div> </div>
) )
) : null} ) : null}
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
list: list:
state.userFactor.info?.products?.filter((item) => +item.condition < 2) || state.userFactor.info?.products?.filter((item) => +item.condition < 2) ||
[], [],
payPrice: state.userProduct.sum, payPrice: state.userProduct.sum,
payMethods: state.transport.list, payMethods: state.transport.list,
factorInfo: state.userFactor.info, factorInfo: state.userFactor.info,
loading: state.userFactor.loading, loading: state.userFactor.loading,
userId: state.user.status.id, userId: state.user.status.id,
lang: state.publicApi.lang, lang: state.publicApi.lang,
isVerified: state.userFactor.isVerified, isVerified: state.userFactor.isVerified,
}), }),
{ {
// getList: userProduct.list, // getList: userProduct.list,
// getInfo: userProduct.info, // getInfo: userProduct.info,
getTransportList: transport.list, getTransportList: transport.list,
getFactorInfo: userFactor.info, getFactorInfo: userFactor.info,
payFactor: userFactor.payment, payFactor: userFactor.payment,
getVerify: userFactor.verify, getVerify: userFactor.verify,
} }
)(Cart); )(Cart);

@ -1,73 +1,73 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
export default class RadioMessage extends Component { export default class RadioMessage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
value: this.props.message.value, value: this.props.message.value,
}; };
} }
handleRadioChange = (newValue) => { handleRadioChange = (newValue) => {
if (this.props.isActive) if (this.props.isActive)
this.setState({ this.setState({
value: newValue, value: newValue,
}); });
}; };
render() { render() {
const { message, isActive } = this.props; const { message, isActive } = this.props;
return ( return (
<div className="message-2d d-flex flex-column d-flex"> <div className="message-2d d-flex flex-column d-flex">
<div className="message-2d__options d-flex flex-wrap justify-content-center"> <div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((row) => ( {message.options.map((row) => (
<Row <Row
list={row} list={row}
handleRadioChange={this.handleRadioChange} handleRadioChange={this.handleRadioChange}
value={this.state.value} value={this.state.value}
/> />
))} ))}
</div> </div>
{isActive && ( {isActive && (
<button <button
className="message-2d__submit" className="message-2d__submit"
onClick={() => toast.success(window.t("ثبت شد"))} onClick={() => toast.success(window.t("ثبت شد"))}
> >
<ArrowRightAltIcon <ArrowRightAltIcon
style={{ color: "white", width: 32, height: 32, marginLeft: 10 }} style={{ color: "white", width: 32, height: 32, marginLeft: 10 }}
/> />
</button> </button>
)} )}
</div> </div>
); );
} }
} }
const Row = (props) => { const Row = (props) => {
return ( return (
<div className="message-2d__options--row d-flex"> <div className="message-2d__options--row d-flex">
{props.list.map((item) => ( {props.list.map((item) => (
<Item item={item} {...props} /> <Item item={item} {...props} />
))} ))}
</div> </div>
); );
}; };
const Item = (props) => { const Item = (props) => {
return ( return (
<div <div
onClick={() => props.handleRadioChange(props.item.name)} onClick={() => props.handleRadioChange(props.item.name)}
style={{ style={{
backgroundColor: backgroundColor:
props.item.name === props.value props.item.name === props.value
? "#6f42c1" ? "#6f42c1"
: "rgb(181 224 252 / 47%)", : "rgb(181 224 252 / 47%)",
color: props.item.name === props.value ? "white" : "black", color: props.item.name === props.value ? "white" : "black",
}} }}
> >
{props.item.name} {props.item.name}
</div> </div>
); );
}; };

@ -1,64 +1,64 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
export default class RadioMessage extends Component { export default class RadioMessage extends Component {
state = { state = {
value: this.props.message.value, value: this.props.message.value,
}; };
handleRadioChange = (value) => { handleRadioChange = (value) => {
if (this.props.isActive) this.setState({ value }); if (this.props.isActive) this.setState({ value });
}; };
render() { render() {
const { message, isActive, action } = this.props; const { message, isActive, action } = this.props;
const { value } = this.state; const { value } = this.state;
return ( return (
<div className="message-2d d-flex flex-column d-flex"> <div className="message-2d d-flex flex-column d-flex">
<div className="message-2d__options d-flex flex-wrap justify-content-center"> <div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((row) => ( {message.options.map((row) => (
<Row <Row
list={row} list={row}
handleRadioChange={this.handleRadioChange} handleRadioChange={this.handleRadioChange}
value={value} value={value}
/> />
))} ))}
</div> </div>
{isActive && ( {isActive && (
<button <button
className="message-2d__submit" className="message-2d__submit"
onClick={() => action({ value })} onClick={() => action({ value })}
> >
<ArrowRightAltIcon /> <ArrowRightAltIcon />
</button> </button>
)} )}
</div> </div>
); );
} }
} }
const Row = (props) => { const Row = (props) => {
return ( return (
<div className="message-2d__options--row d-flex"> <div className="message-2d__options--row d-flex">
{props.list.map((item) => ( {props.list.map((item) => (
<Item item={item} {...props} /> <Item item={item} {...props} />
))} ))}
</div> </div>
); );
}; };
const Item = (props) => { const Item = (props) => {
return ( return (
<div <div
onClick={() => props.handleRadioChange(props.item.name)} onClick={() => props.handleRadioChange(props.item.name)}
style={{ style={{
backgroundColor: backgroundColor:
props.item.name === props.value props.item.name === props.value
? "rgb(100, 205, 130)" ? "rgb(100, 205, 130)"
: "rgba(255, 255, 255, 0.4)", : "rgba(255, 255, 255, 0.4)",
color: props.item.name === props.value ? "white" : "black", color: props.item.name === props.value ? "white" : "black",
}} }}
> >
{props.item.name} {props.item.name}
</div> </div>
); );
}; };

@ -1,60 +1,60 @@
import React, { Component } from "react"; import React, { Component } from "react";
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
import Slider from "@material-ui/core/Slider"; import Slider from "@material-ui/core/Slider";
import Input from "@material-ui/core/Input"; import Input from "@material-ui/core/Input";
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
export default class SliderMessage extends Component { export default class SliderMessage extends Component {
state = { state = {
value: this.props.message.value || 0, value: this.props.message.value || 0,
}; };
onChange = (value) => { onChange = (value) => {
if (!this.props.isActive || !value) return; if (!this.props.isActive || !value) return;
const [min, max] = this.props.message.options[0] || [0, 100, 1]; const [min, max] = this.props.message.options[0] || [0, 100, 1];
this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) }); this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) });
}; };
render() { render() {
const { message, isActive, action } = this.props; const { message, isActive, action } = this.props;
const [min, max, step] = message.options[0] || [0, 100, 1]; const [min, max, step] = message.options[0] || [0, 100, 1];
const { value } = this.state; const { value } = this.state;
return ( return (
<div className="message-2d d-flex flex-column d-flex sliderBox"> <div className="message-2d d-flex flex-column d-flex sliderBox">
<Grid container spacing={2} alignItems="center"> <Grid container spacing={2} alignItems="center">
<Grid item xs> <Grid item xs>
<Slider <Slider
className="slider" className="slider"
value={value} value={value}
onChange={(e, value) => this.onChange(value)} onChange={(e, value) => this.onChange(value)}
aria-labelledby="input-slider" aria-labelledby="input-slider"
min={min} min={min}
max={max} max={max}
step={step} step={step}
/> />
</Grid> </Grid>
<Grid item> <Grid item>
<Input <Input
className="input" className="input"
disabled={!isActive} disabled={!isActive}
value={this.state.value} value={this.state.value}
onChange={(e) => this.onChange(e.target.value)} onChange={(e) => this.onChange(e.target.value)}
onBlur={() => this.onChange(value)} onBlur={() => this.onChange(value)}
inputProps={{ inputProps={{
step: step, step: step,
min: min, min: min,
max: max, max: max,
type: "number", type: "number",
"aria-labelledby": "input-slider", "aria-labelledby": "input-slider",
}} }}
/> />
</Grid> </Grid>
</Grid> </Grid>
{isActive && ( {isActive && (
<button className="message-2d__submit" onClick={() => action()}> <button className="message-2d__submit" onClick={() => action()}>
<ArrowRightAltIcon /> <ArrowRightAltIcon />
</button> </button>
)} )}
</div> </div>
); );
} }
} }

@ -1,59 +1,59 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { SortableContainer, SortableElement } from "react-sortable-hoc"; import { SortableContainer, SortableElement } from "react-sortable-hoc";
import arrayMove from "array-move"; import arrayMove from "array-move";
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
export default class DraggableMessage extends Component { export default class DraggableMessage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = this.props.message; this.state = this.props.message;
} }
onSortEnd = ({ oldIndex, newIndex }) => { onSortEnd = ({ oldIndex, newIndex }) => {
if (this.props.isActive) if (this.props.isActive)
this.setState(({ options }) => ({ this.setState(({ options }) => ({
options: arrayMove(options, oldIndex, newIndex), options: arrayMove(options, oldIndex, newIndex),
})); }));
}; };
render() { render() {
const { isActive, action } = this.props; const { isActive, action } = this.props;
return ( return (
<div className="message-2d d-flex flex-column d-flex"> <div className="message-2d d-flex flex-column d-flex">
<SortableList <SortableList
items={this.state.options} items={this.state.options}
onSortEnd={this.onSortEnd} onSortEnd={this.onSortEnd}
disabled={!isActive} disabled={!isActive}
/> />
{isActive && ( {isActive && (
<button className="message-2d__submit" onClick={() => action()}> <button className="message-2d__submit" onClick={() => action()}>
<ArrowRightAltIcon /> <ArrowRightAltIcon />
</button> </button>
)} )}
</div> </div>
); );
} }
} }
const SortableList = SortableContainer(({ items, disabled }) => { const SortableList = SortableContainer(({ items, disabled }) => {
return ( return (
<div className="message-2d__options d-flex flex-column"> <div className="message-2d__options d-flex flex-column">
{items.map((row, index) => ( {items.map((row, index) => (
<SortableItem <SortableItem
key={`item-${index}`} key={`item-${index}`}
index={index} index={index}
value={row} value={row}
disabled={disabled} disabled={disabled}
/> />
))} ))}
</div> </div>
); );
}); });
const SortableItem = SortableElement(({ value }) => ( const SortableItem = SortableElement(({ value }) => (
<div className="message-2d__options--row d-flex"> <div className="message-2d__options--row d-flex">
{value.map((item) => ( {value.map((item) => (
<div>{item.name}</div> <div>{item.name}</div>
))} ))}
</div> </div>
)); ));

@ -1,30 +1,30 @@
import React, { Component } from "react"; import React, { Component } from "react";
import arrayMove from "array-move"; import arrayMove from "array-move";
import "./index.scss"; import "./index.scss";
export default class DraggableMessage extends Component { export default class DraggableMessage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = this.props.message; this.state = this.props.message;
} }
onSortEnd = ({ oldIndex, newIndex }) => { onSortEnd = ({ oldIndex, newIndex }) => {
if (this.props.isActive) if (this.props.isActive)
this.setState(({ options }) => ({ this.setState(({ options }) => ({
options: arrayMove(options, oldIndex, newIndex), options: arrayMove(options, oldIndex, newIndex),
})); }));
}; };
render() { render() {
const { isActive } = this.props; const { isActive } = this.props;
if (!isActive) return null; if (!isActive) return null;
return <div className="ptapbox"></div>; return <div className="ptapbox"></div>;
} }
a = ( a = (
<button <button
className="message-2d__submit" className="message-2d__submit"
onClick={(e) => this.props.action({ value: e.target.value })} onClick={(e) => this.props.action({ value: e.target.value })}
> >
ثبت{" "} ثبت{" "}
</button> </button>
); );
} }

File diff suppressed because it is too large Load Diff

@ -1,92 +1,92 @@
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userFactor } from "~/Redux/actions"; import { userFactor } from "~/Redux/actions";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55,
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
}, },
mobile: { mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
}, },
}; };
const DiscoutCode = ({ codeId, setCodeId, userId, factorId }) => { const DiscoutCode = ({ codeId, setCodeId, userId, factorId }) => {
const [value, setValue] = React.useState(codeId || ""); const [value, setValue] = React.useState(codeId || "");
function setOff() { function setOff() {
setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); setCodeId({ offCodeValue: value, userId: userId, id: factorId || null });
} }
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div className="discount-code d-flex flex-column"> <div className="discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}> <h2 style={{ fontSize: fontSize.desktop.h2 }}>
{window.t("کد تخفیف")} {window.t("کد تخفیف")}
</h2> </h2>
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} {window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "}
</p> </p>
<div className="discount-code__box d-flex align-items-center"> <div className="discount-code__box d-flex align-items-center">
<input <input
style={{ fontSize: fontSize.desktop.input }} style={{ fontSize: fontSize.desktop.input }}
type="text" type="text"
defaultValue={codeId} defaultValue={codeId}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
/> />
<button <button
style={{ fontSize: fontSize.desktop.button }} style={{ fontSize: fontSize.desktop.button }}
onClick={setOff} onClick={setOff}
> >
{window.t("ثبت کد")}{" "} {window.t("ثبت کد")}{" "}
</button> </button>
</div> </div>
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-discount-code d-flex flex-column"> <div className="mobile-discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
{window.t("کد تخفیف")} {window.t("کد تخفیف")}
</h2> </h2>
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} {window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "}
</p> </p>
<div className="mobile-discount-code__box d-flex align-items-center"> <div className="mobile-discount-code__box d-flex align-items-center">
<input <input
style={{ fontSize: fontSize.mobile.input }} style={{ fontSize: fontSize.mobile.input }}
type="text" type="text"
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
/> />
<button <button
style={{ fontSize: fontSize.mobile.button }} style={{ fontSize: fontSize.mobile.button }}
onClick={setOff} onClick={setOff}
> >
{window.t("ثبت کد")}{" "} {window.t("ثبت کد")}{" "}
</button> </button>
</div> </div>
</div> </div>
) : null} ) : null}
</> </>
); );
}; };
export default connect( export default connect(
(state) => ({ (state) => ({
codeId: state.userFactor.info?.codeId, codeId: state.userFactor.info?.codeId,
userId: state.user.status.id, userId: state.user.status.id,
factorId: state.userFactor.info?.id, factorId: state.userFactor.info?.id,
lang: state.publicApi.lang, lang: state.publicApi.lang,
}), }),
{ {
setCodeId: userFactor.update, setCodeId: userFactor.update,
} }
)(DiscoutCode); )(DiscoutCode);

@ -1,255 +1,255 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userProduct } from "~/Redux/actions"; import { userProduct } from "~/Redux/actions";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table"; import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody"; import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer"; import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead"; import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import "./index.scss"; import "./index.scss";
const useStyles = makeStyles({ const useStyles = makeStyles({
table: {}, table: {},
}); });
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
const maxMobileSize = 550; const maxMobileSize = 550;
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
mobile: { mobile: {
info: { info: {
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
}, },
price: { price: {
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22,
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40,
}, },
counter: { counter: {
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25,
}, },
delete: { delete: {
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28,
}, },
}, },
desktop: { desktop: {
info: { info: {
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
}, },
price: { price: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60,
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
}, },
counter: { counter: {
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65,
}, },
delete: { delete: {
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
}, },
}, },
}; };
function BasicTable(props) { function BasicTable(props) {
const classes = useStyles(); const classes = useStyles();
const { list, handleDelete, route, factorInfo } = props; const { list, handleDelete, route, factorInfo } = props;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table"> <Table className={classes.table} aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align="right">{window.t("محصولات")}</TableCell> <TableCell align="right">{window.t("محصولات")}</TableCell>
<TableCell align="center">{window.t("قیمت")}</TableCell> <TableCell align="center">{window.t("قیمت")}</TableCell>
{route === "callback" ? ( {route === "callback" ? (
<TableCell align="center">{window.t("تعداد")}</TableCell> <TableCell align="center">{window.t("تعداد")}</TableCell>
) : null} ) : null}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{list.map((row, i) => ( {list.map((row, i) => (
<Item <Item
data={row} data={row}
key={i} key={i}
// handleCounter={handleCounter} // handleCounter={handleCounter}
pushToCart={props.pushToCart} pushToCart={props.pushToCart}
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route} route={route}
factorInfo={factorInfo} factorInfo={factorInfo}
/> />
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table"> <Table className={classes.table} aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align="right">{window.t("محصولات")}</TableCell> <TableCell align="right">{window.t("محصولات")}</TableCell>
<TableCell align="center">{window.t("تعداد")}</TableCell> <TableCell align="center">{window.t("تعداد")}</TableCell>
<TableCell align="center">{window.t("قیمت")}</TableCell> <TableCell align="center">{window.t("قیمت")}</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{list.map((row, i) => ( {list.map((row, i) => (
<Item <Item
data={row} data={row}
key={i} key={i}
// handleCounter={handleCounter} // handleCounter={handleCounter}
pushToCart={props.pushToCart} pushToCart={props.pushToCart}
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route} route={route}
factorInfo={factorInfo} factorInfo={factorInfo}
/> />
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
) : null} ) : null}
</> </>
); );
} }
const Item = (props) => { const Item = (props) => {
const { data, route } = props; const { data, route } = props;
if (!data.product) return null; if (!data.product) return null;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<TableRow key={data.product.book.name}> <TableRow key={data.product.book.name}>
<TableCell align="right" component="th" scope="row"> <TableCell align="right" component="th" scope="row">
<div className="mobile-cart-table-product d-flex align-items-center"> <div className="mobile-cart-table-product d-flex align-items-center">
<img <img
style={{ height: 60 }} style={{ height: 60 }}
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
alt={data.product.book.name} alt={data.product.book.name}
/> />
<div className="mobile-cart-table-product__info d-flex flex-column p-1"> <div className="mobile-cart-table-product__info d-flex flex-column p-1">
<strong style={{ fontSize: fontSize.mobile.info.strong }}> <strong style={{ fontSize: fontSize.mobile.info.strong }}>
{`${window.t("نسخه")} ${ {`${window.t("نسخه")} ${
+data.product.productType === 1 +data.product.productType === 1
? window.t("الکترونیکی") ? window.t("الکترونیکی")
: window.t("چاپی") : window.t("چاپی")
} ${data.product.book.name} `} } ${data.product.book.name} `}
</strong> </strong>
<p style={{ fontSize: 12 }}> <p style={{ fontSize: 12 }}>
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} {window.t("پایه") + ` ${grades[data.product.book.gradeId]}`}
</p> </p>
<span style={{ fontSize: 10 }}> <span style={{ fontSize: 10 }}>
{window.t("همراه با")} : {window.t("همراه با")} :
{data.product.book.items || {data.product.book.items ||
window.t("کد فعالسازی محتوای الکترونیک")} window.t("کد فعالسازی محتوای الکترونیک")}
</span> </span>
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> <div className="mobile-cart-table-price d-flex flex-column align-items-center">
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> <div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: 14 }}> <strong style={{ fontSize: 14 }}>
{window.tr(data.product.price * data.count) || "1000"}{" "} {window.tr(data.product.price * data.count) || "1000"}{" "}
{window.t("تومان")} {window.t("تومان")}
</strong> </strong>
</div> </div>
{route === "cart" ? ( {route === "cart" ? (
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> <div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
<span style={{ fontSize: 12 }}> <span style={{ fontSize: 12 }}>
{data.count} {window.t("عدد")} {data.count} {window.t("عدد")}
</span> </span>
</div> </div>
) : null} ) : null}
</div> </div>
</TableCell> </TableCell>
{route === "callback" ? ( {route === "callback" ? (
<TableCell> <TableCell>
<strong className="d-flex justify-content-center align-items-center"> <strong className="d-flex justify-content-center align-items-center">
{data.count} {window.t("عدد")}{" "} {data.count} {window.t("عدد")}{" "}
</strong> </strong>
</TableCell> </TableCell>
) : null} ) : null}
</TableRow> </TableRow>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<TableRow key={data.product.book.name}> <TableRow key={data.product.book.name}>
<TableCell align="right" component="th" scope="row"> <TableCell align="right" component="th" scope="row">
<div className="cart-item__info d-flex"> <div className="cart-item__info d-flex">
<img <img
style={{ height: "60px" }} style={{ height: "60px" }}
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
alt={data.product.book.name} alt={data.product.book.name}
/> />
<div className="d-flex flex-column justify-content-center"> <div className="d-flex flex-column justify-content-center">
<strong style={{ fontSize: 13 }}> <strong style={{ fontSize: 13 }}>
{`${data.product.book.name} `} {`${data.product.book.name} `}
</strong> </strong>
<span style={{ fontSize: 12 }}> <span style={{ fontSize: 12 }}>
{" "} {" "}
{`${window.t("نسخه")} ${ {`${window.t("نسخه")} ${
+data.product.productType === 1 +data.product.productType === 1
? window.t("الکترونیکی") ? window.t("الکترونیکی")
: window.t("چاپی") : window.t("چاپی")
}`} }`}
</span> </span>
<p style={{ fontSize: fontSize.desktop.info.p }}> <p style={{ fontSize: fontSize.desktop.info.p }}>
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} {window.t("پایه") + ` ${grades[data.product.book.gradeId]}`}
</p> </p>
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<span style={{ fontSize: 12 }}>{data.count}</span> <span style={{ fontSize: 12 }}>{data.count}</span>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> <div className="cart-item__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: 12 }}> <strong style={{ fontSize: 12 }}>
{data.product.price * data.count || "1000"} {data.product.price * data.count || "1000"}
</strong> </strong>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : null} ) : null}
</> </>
); );
}; };
export default connect( export default connect(
(state) => ({ (state) => ({
loading: state.userProduct.loading, loading: state.userProduct.loading,
info: state.book.info, info: state.book.info,
id: state.user.status.id, id: state.user.status.id,
factorInfo: state.userFactor.info, factorInfo: state.userFactor.info,
}), }),
{ pushToCart: userProduct.add } { pushToCart: userProduct.add }
)(BasicTable); )(BasicTable);

File diff suppressed because it is too large Load Diff

@ -1,172 +1,172 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions"; import { publicApi } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import location from "../../assets/icons/location.png"; import location from "../../assets/icons/location.png";
import home from "../../assets/icons/home.png"; import home from "../../assets/icons/home.png";
import contact from "../../assets/icons/contact.png"; import contact from "../../assets/icons/contact.png";
import Location from "./Location/Location"; import Location from "./Location/Location";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import Support from "../Support"; import Support from "../Support";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
}, },
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16, h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34, p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32, span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32,
}, },
}; };
class Contact extends Component { class Contact extends Component {
state = { state = {
name: null, name: null,
cellphone: null, cellphone: null,
unit: null, unit: null,
book: null, book: null,
subject: null, subject: null,
text: null, text: null,
}; };
componentDidUpdate() { componentDidUpdate() {
if (!this.props.contactData?.address && !this.props.loading) if (!this.props.contactData?.address && !this.props.loading)
this.props.getContactData(); this.props.getContactData();
} }
render() { render() {
const { contactData, loading } = this.props; const { contactData, loading } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
!loading ? ( !loading ? (
<> <>
<div className="contact d-flex flex-column align-items-center"> <div className="contact d-flex flex-column align-items-center">
<Navbar page={"contact"} /> <Navbar page={"contact"} />
<div className="contact__forms d-flex"> <div className="contact__forms d-flex">
<div className="contact__forms--right d-flex flex-column"> <div className="contact__forms--right d-flex flex-column">
<Support /> <Support />
</div> </div>
<div className="contact__forms--left d-flex flex-column"> <div className="contact__forms--left d-flex flex-column">
<div className="contact__location d-flex align-items-center"> <div className="contact__location d-flex align-items-center">
<img <img
src={location} src={location}
alt={window.t("آدرس")} alt={window.t("آدرس")}
className="m-1" className="m-1"
/> />
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
{contactData?.address || ""} {contactData?.address || ""}
</p> </p>
</div> </div>
<div <div
className="d-flex align-items-center mt-1" className="d-flex align-items-center mt-1"
style={{ width: "55%", justifyContent: "space-between" }} style={{ width: "55%", justifyContent: "space-between" }}
> >
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.desktop.span }}> <span style={{ fontSize: fontSize.desktop.span }}>
{contactData?.cellphone || ""} {contactData?.cellphone || ""}
</span> </span>
<img <img
src={contact} src={contact}
alt={window.t("تماس")} alt={window.t("تماس")}
className="m-1" className="m-1"
/> />
</div> </div>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.desktop.span }}> <span style={{ fontSize: fontSize.desktop.span }}>
{contactData?.email || ""} {contactData?.email || ""}
</span> </span>
<img <img
src={home} src={home}
alt={window.t("خانه")} alt={window.t("خانه")}
className="m-1" className="m-1"
/> />
</div> </div>
</div> </div>
<div className="contact__map d-flex align-items-center mt-3"> <div className="contact__map d-flex align-items-center mt-3">
<Location /> <Location />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer />
</> </>
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Navbar page={"contact"} /> <Navbar page={"contact"} />
<Loader /> <Loader />
</div> </div>
) )
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
!loading ? ( !loading ? (
<div className="mobile-contact d-flex flex-column align-items-center"> <div className="mobile-contact d-flex flex-column align-items-center">
<Navbar page={"contact"} /> <Navbar page={"contact"} />
<Support /> <Support />
<div className="mobile-contact__address d-flex flex-column"> <div className="mobile-contact__address d-flex flex-column">
<div className="mobile-contact__address--location d-flex align-items-center"> <div className="mobile-contact__address--location d-flex align-items-center">
<img src={location} alt={window.t("آدرس")} className="m-1" /> <img src={location} alt={window.t("آدرس")} className="m-1" />
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{contactData?.address || ""}{" "} {contactData?.address || ""}{" "}
</p> </p>
</div> </div>
<div <div
className="d-flex align-items-center mt-1" className="d-flex align-items-center mt-1"
style={{ width: "55%", justifyContent: "space-between" }} style={{ width: "55%", justifyContent: "space-between" }}
> >
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}> <span style={{ fontSize: fontSize.mobile.span }}>
{contactData?.cellphone || ""}{" "} {contactData?.cellphone || ""}{" "}
</span> </span>
<img src={contact} alt={window.t("تماس")} className="m-1" /> <img src={contact} alt={window.t("تماس")} className="m-1" />
</div> </div>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}> <span style={{ fontSize: fontSize.mobile.span }}>
{contactData?.email || ""} {contactData?.email || ""}
</span> </span>
<img src={home} alt={window.t("خانه")} className="m-1" /> <img src={home} alt={window.t("خانه")} className="m-1" />
</div> </div>
</div> </div>
<div className="mobile-contact__address--map d-flex align-items-center mt-3"> <div className="mobile-contact__address--map d-flex align-items-center mt-3">
<Location /> <Location />
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Navbar page={"contact"} /> <Navbar page={"contact"} />
<Loader /> <Loader />
</div> </div>
) )
) : null} ) : null}
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
loading: state.publicApi.loading, loading: state.publicApi.loading,
contactData: state.publicApi.contactData, contactData: state.publicApi.contactData,
list: state.userProduct.mylist || [], list: state.userProduct.mylist || [],
// loading: state.publicApi.loading, // loading: state.publicApi.loading,
}), }),
{ getContactData: publicApi.getContactData } { getContactData: publicApi.getContactData }
)(Contact); )(Contact);

@ -1,64 +1,64 @@
import React, { Component } from "react"; import React, { Component } from "react";
const maxMobileSize = 550; const maxMobileSize = 550;
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26, h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34, h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32, div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
}, },
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120, old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
}, },
}; };
export default class Item extends Component { export default class Item extends Component {
render() { render() {
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
const { data } = this.props; const { data } = this.props;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<a <a
rel="noreferrer" rel="noreferrer"
href={`https://ar.dnvn.ir/lunch?id=${data.id}`} href={`https://ar.dnvn.ir/lunch?id=${data.id}`}
target="_blank" target="_blank"
className="mobile-products-product d-flex flex-column" className="mobile-products-product d-flex flex-column"
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`} src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`}
alt={data.title} alt={data.title}
/> />
<div className="mobile-products-product__info d-flex flex-column"> <div className="mobile-products-product__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}> <h1 style={{ fontSize: fontSize.mobile.h1 }}>
{data["product.book.name"]}{" "} {data["product.book.name"]}{" "}
{grades[+data["product.book.gradeId"]]} {grades[+data["product.book.gradeId"]]}
</h1> </h1>
</div> </div>
</a> </a>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items"></article> <article className="products-product d-flex flex-column align-items"></article>
) : null} ) : null}
</> </>
); );
} }
} }

@ -1,242 +1,268 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import location from "../../../assets/icons/location.png"; import location from "../../../assets/icons/location.png";
import home from "../../../assets/icons/home.png"; import home from "../../../assets/icons/home.png";
import contact from "../../../assets/icons/contact.png"; import contact from "../../../assets/icons/contact.png";
import "./index.scss"; import "./index.scss";
export default class Footer extends Component { export default class Footer extends Component {
render() { render() {
const fastAccess = [ const fastAccess = [
{ name: window.t("صفحه اصلی"), link: "/" }, { name: window.t("صفحه اصلی"), link: "/" },
{ name: window.t("فروشگاه"), link: "/shop" }, { name: window.t("فروشگاه"), link: "/shop" },
{ name: window.t("سوالات متداول"), link: "/faq" }, { name: window.t("سوالات متداول"), link: "/faq" },
{ name: window.t("درباره ما"), link: "/about" }, { name: window.t("درباره ما"), link: "/about" },
{ name: window.t("تماس با ما"), link: "/call" }, { name: window.t("تماس با ما"), link: "/call" },
]; ];
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<footer <footer
className={`footer d-flex flex-column ${ className={`footer d-flex flex-column ${
window.lang === "en" ? "ltr" : "" window.lang === "en" ? "ltr" : ""
}`} }`}
> >
<div <div
className={`footer-container d-flex ${ className={`footer-container d-flex ${
window.lang === "en" ? "ltr" : "" window.lang === "en" ? "ltr" : ""
}`} }`}
> >
<div <div
className={`footer-container__content d-flex ${ className={`footer-container__content d-flex ${
window.lang === "en" ? "ltr" : "" window.lang === "en" ? "ltr" : ""
}`} }`}
> >
<div <div
className={`footer-container__content--box first d-flex flex-column ${ className={`footer-container__content--box first d-flex flex-column ${
window.lang === "en" ? "ltr" : "" window.lang === "en" ? "ltr" : ""
}`} }`}
> >
<h1 <h1
style={{ style={{
textAlign: window.lang == "en" ? "left" : "right", textAlign: window.lang == "en" ? "left" : "right",
}} }}
> >
{window.t("دانوین کجاست؟")} {window.t("دانوین کجاست؟")}
</h1> </h1>
<p <p
className="mt-2" className="mt-2"
style={{ style={{
textAlign: window.lang == "en" ? "left" : "right", textAlign: window.lang == "en" ? "left" : "right",
}} }}
> >
{window.t( {window.t(
"ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولیدمحتوایی جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش کشور ایجاد کنیم." "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولیدمحتوایی جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش کشور ایجاد کنیم."
)} )}
</p> </p>
<div className="footer__location d-flex align-items-center mt-2"> <div className="footer__location d-flex align-items-center mt-2">
<img <img
src={location} src={location}
alt={window.t("آدرس")} alt={window.t("آدرس")}
className="m-1" className="m-1"
/> />
<p> <p>
{window.t( {window.t(
"آدرس: تهران، میدان فردوسی، خیابان موسوی، پلاک ۳۰" "آدرس: تهران، میدان فردوسی، خیابان موسوی، پلاک ۳۰"
)} )}
</p> </p>
</div> </div>
<div <div
className={ className={
"d-flex align-items-center mt-1 " + window.lang == "en" "d-flex align-items-center mt-1 " + window.lang == "en"
? "ltr" ? "ltr"
: "" : ""
} }
style={{ style={{
width: "55%", width: "55%",
justifyContent: "space-between", justifyContent: "space-between",
textAlign: window.lang == "en" ? "left" : "right", textAlign: window.lang == "en" ? "left" : "right",
}} }}
> >
<div <div
className={ className={
"d-flex align-items-center " + window.lang === "en" "d-flex align-items-center " + window.lang === "en"
? "ltr" ? "ltr"
: "" : ""
} }
> >
<img <img
src={contact} src={contact}
alt={window.t("تماس")} alt={window.t("تماس")}
className="m-1" className="m-1"
/>{" "} />{" "}
<a <a
href="tel:58795" href="tel:58795"
style={{ style={{
textDecoration: "none", textDecoration: "none",
color: "white", color: "white",
fontFamily: window.lang == "en" ? "Arial" : "", fontFamily: window.lang == "en" ? "Arial" : "",
}} }}
> >
58795 58795
</a> </a>
</div> </div>
{/* <div {/* <div
className="d-flex align-items-center" className="d-flex align-items-center"
style={{ style={{
fontName: "IRANSansNumeralLight", fontName: "IRANSansNumeralLight",
}} }}
> >
<a <a
href="tel:02188814673" href="tel:02188814673"
style={{ textDecoration: "none", color: "white" }} style={{ textDecoration: "none", color: "white" }}
> >
021-88814673 021-88814673
</a> </a>
<img src={contact} alt={window.t("تماس") className="m-1" /> <img src={contact} alt={window.t("تماس") className="m-1" />
</div> */} </div> */}
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<span>Info@Danovin.ir</span> <span>Info@Danovin.ir</span>
<img src={home} alt={window.t("خانه")} className="m-1" /> <img src={home} alt={window.t("خانه")} className="m-1" />
</div> </div>
</div> </div>
</div> </div>
<div <div
className={`footer-container__content--box second d-flex flex-column ${ className={`footer-container__content--box second d-flex flex-column ${
window.lang === "en" ? "align-items-start" : "" window.lang === "en" ? "align-items-start" : ""
}`} }`}
> >
<h1 className={`${window.lang === "en" ? "text-start" : ""}`}> <h1 className={`${window.lang === "en" ? "text-start" : ""}`}>
{window.t("دسترسی سریع")} {window.t("دسترسی سریع")}
</h1> </h1>
<ul <ul
className={`d-flex flex-column ${ className={`d-flex flex-column ${
window.lang === "en" ? "align-items-start" : "" window.lang === "en" ? "align-items-start" : ""
}`} }`}
> >
{fastAccess.map((item, i) => ( {fastAccess.map((item, i) => (
<li key={i}> <li key={i}>
<Link to={item.link}>{item.name}</Link> <Link to={item.link}>{item.name}</Link>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
<div <div
className={`footer-container__content--box second d-flex flex-column ${ className={`footer-container__content--box second d-flex flex-column ${
window.lang === "en" ? "align-items-start" : "" window.lang === "en" ? "align-items-start" : ""
}`} }`}
> >
<h1>{window.t("لینک های کاربردی")}</h1> <h1>{window.t("لینک های کاربردی")}</h1>
<ul <ul
className={`d-flex flex-column ${ className={`d-flex flex-column ${
window.lang === "en" ? "align-items-start" : "" window.lang === "en" ? "align-items-start" : ""
}`} }`}
> >
{fastAccess.map((item, i) => ( {fastAccess.map((item, i) => (
<li key={i}> <li key={i}>
<Link to={item.link}>{item.name}</Link> <Link to={item.link}>{item.name}</Link>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
</div> <div
</div> style={{
<div className="footer__privacy d-flex align-items-center"> margin: "auto",
<p> backgroundColor: "#ffffff22",
{window.t( align: "center",
"تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400" textAlign: "center",
)} borderRadius: "4px",
</p> }}
</div> >
</footer> <div class="namad" style={{ margin: "auto" }}>
) : null} <a
{window.innerWidth < 1000 ? ( rel="noreferrer"
<footer className="mobile-footer d-flex flex-column"> referrerpolicy="origin"
<div className="mobile-footer-container d-flex"> target="_blank"
<div className="mobile-footer-container__content d-flex flex-column"> href="https://trustseal.enamad.ir/?id=224965&Code=x8oNSO7tTnqAniyPpPyN"
<div className="mobile-footer-container__content--box first d-flex flex-column"> >
<h1>{window.t("دانوین کجاست؟")}</h1> <img
<p className="mt-2"></p> referrerpolicy="origin"
<div className="mobile-footer__location d-flex align-items-center mt-2"> src="https://trustseal.enamad.ir/logo.aspx?id=224965&Code=x8oNSO7tTnqAniyPpPyN"
<img alt=""
src={location} style={{ cursor: "pointer" }}
alt={window.t("آدرس")} code="x8oNSO7tTnqAniyPpPyN"
className="m-1" />
/> </a>
<p></p> </div>
</div> </div>
<div </div>
className="d-flex align-items-center mt-1" </div>
style={{ width: "55%", justifyContent: "space-between" }} <div className="footer__privacy d-flex align-items-center">
> <p>
<div className="d-flex align-items-center"> {window.t(
<span></span> "تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400"
<img )}
src={contact} </p>
alt={window.t("تماس")} </div>
className="m-1" </footer>
/> ) : null}
</div> {window.innerWidth < 1000 ? (
<div className="d-flex align-items-center"> <footer className="mobile-footer d-flex flex-column">
<span>Info@Danovin.ir</span> <div className="mobile-footer-container d-flex">
<img src={home} alt={window.t("خانه")} className="m-1" /> <div className="mobile-footer-container__content d-flex flex-column">
</div> <div className="mobile-footer-container__content--box first d-flex flex-column">
</div> <h1>{window.t("دانوین کجاست؟")}</h1>
</div> <p className="mt-2"></p>
<div className="mobile-footer-container__content--box second d-flex flex-column"> <div className="mobile-footer__location d-flex align-items-center mt-2">
<h1>{window.t("دسترسی سریع")}</h1> <img
<ul> src={location}
{fastAccess.map((item) => ( alt={window.t("آدرس")}
<li> className="m-1"
<Link to={item.link}>{item.name}</Link> />
</li> <p></p>
))} </div>
</ul> <div
</div> className="d-flex align-items-center mt-1"
<div className="mobile-footer-container__content--box second d-flex flex-column"> style={{ width: "55%", justifyContent: "space-between" }}
<h1>{window.t("دسترسی سریع")}</h1> >
<ul> <div className="d-flex align-items-center">
{fastAccess.map((item) => ( <span></span>
<li> <img
<Link to={item.link}>{item.name}</Link> src={contact}
</li> alt={window.t("تماس")}
))} className="m-1"
</ul> />
</div> </div>
</div> <div className="d-flex align-items-center">
</div> <span>Info@Danovin.ir</span>
<div className="mobile-footer__privacy d-flex align-items-center"> <img src={home} alt={window.t("خانه")} className="m-1" />
<p> </div>
{window.t( </div>
"تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400" </div>
)} <div className="mobile-footer-container__content--box second d-flex flex-column">
</p> <h1>{window.t("دسترسی سریع")}</h1>
</div> <ul>
</footer> {fastAccess.map((item) => (
) : null} <li>
</> <Link to={item.link}>{item.name}</Link>
); </li>
} ))}
} </ul>
</div>
Footer.defaultProps = {}; <div className="mobile-footer-container__content--box second d-flex flex-column">
<h1>{window.t("دسترسی سریع")}</h1>
<ul>
{fastAccess.map((item) => (
<li>
<Link to={item.link}>{item.name}</Link>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="mobile-footer__privacy d-flex align-items-center">
<p>
{window.t(
"تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400"
)}
</p>
</div>
</footer>
) : null}
</>
);
}
}
Footer.defaultProps = {};

@ -1,75 +1,75 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import "./index.scss"; import "./index.scss";
export default class Header extends Component { export default class Header extends Component {
render() { render() {
const { height, data } = this.props; const { height, data } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div <div
style={{ style={{
minWidth: `${data.width}`, minWidth: `${data.width}`,
height: height, height: height,
cursor: "pointer", cursor: "pointer",
}} }}
className={`slider-header d-flex ${window.lang === "en" ? "" : ""}`} className={`slider-header d-flex ${window.lang === "en" ? "" : ""}`}
onClick={() => data.link && window.open(data.link, "_blank")} onClick={() => data.link && window.open(data.link, "_blank")}
> >
<div <div
className="slider-header__right d-flex" className="slider-header__right d-flex"
style={{ backgroundColor: data.backgroundColor }} style={{ backgroundColor: data.backgroundColor }}
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title} alt={data.title}
/> />
</div> </div>
<div <div
style={{ backgroundColor: data.backgroundColor }} style={{ backgroundColor: data.backgroundColor }}
className="slider-header__left d-flex flex-column" className="slider-header__left d-flex flex-column"
> >
<h1>{data.title}</h1> <h1>{data.title}</h1>
<h2>{data.subTitle}</h2> <h2>{data.subTitle}</h2>
{data.buttonText && ( {data.buttonText && (
<Link to={data.link || "/"}>{data.buttonText}</Link> <Link to={data.link || "/"}>{data.buttonText}</Link>
)} )}
</div> </div>
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div <div
style={{ style={{
minWidth: `${data.width}`, minWidth: `${data.width}`,
height: height, height: height,
}} }}
className="mobile-slider-header d-flex" className="mobile-slider-header d-flex"
> >
<div <div
className="mobile-slider-header__right d-flex" className="mobile-slider-header__right d-flex"
style={{ style={{
backgroundColor: data.backgroundColor, backgroundColor: data.backgroundColor,
cursor: "pointer", cursor: "pointer",
}} }}
onClick={() => data.link && window.open(data.link, "_blank")} onClick={() => data.link && window.open(data.link, "_blank")}
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title} alt={data.title}
/> />
</div> </div>
<div <div
style={{ backgroundColor: data.backgroundColor }} style={{ backgroundColor: data.backgroundColor }}
className="mobile-slider-header__left d-flex flex-column" className="mobile-slider-header__left d-flex flex-column"
> >
<h1>{data.title}</h1> <h1>{data.title}</h1>
<h2>{data.subTitle}</h2> <h2>{data.subTitle}</h2>
<Link to={data.link || "/"}>{data.buttonText}</Link> <Link to={data.link || "/"}>{data.buttonText}</Link>
</div> </div>
</div> </div>
) : null} ) : null}
</> </>
); );
} }
} }

@ -1,201 +1,201 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Carousel from "react-elastic-carousel"; import Carousel from "react-elastic-carousel";
import Simple from "./Simple/index"; import Simple from "./Simple/index";
import Header from "./Header/index"; import Header from "./Header/index";
import Blog from "./Blog/index"; import Blog from "./Blog/index";
import dropdown from "../../../assets/icons/dropdown.png"; import dropdown from "../../../assets/icons/dropdown.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
}, },
}; };
const SimpleHeader = (props) => { const SimpleHeader = (props) => {
console.log("Simple Header", props.link); console.log("Simple Header", props.link);
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div <div
className={`home-scroll__header d-flex ${ className={`home-scroll__header d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<div className="home-scroll__header--right d-flex"> <div className="home-scroll__header--right d-flex">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1> <h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
<span></span> <span></span>
</div> </div>
{props.more ? ( {props.more ? (
<Link <Link
to={props.link} to={props.link}
className={`home-scroll__header--more d-flex align-items-center ${ className={`home-scroll__header--more d-flex align-items-center ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<span style={{ fontSize: fontSize.desktop.h1 }}> <span style={{ fontSize: fontSize.desktop.h1 }}>
{window.t("بیشتر")} {window.t("بیشتر")}
</span> </span>
<img <img
src={dropdown} src={dropdown}
style={{ style={{
transform: window.lang === "en" ? "rotate(-90deg)" : "", transform: window.lang === "en" ? "rotate(-90deg)" : "",
margin: "0px 5px", margin: "0px 5px",
}} }}
alt={window.t("فلش")} alt={window.t("فلش")}
/> />
</Link> </Link>
) : null} ) : null}
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div <div
className={`mobile-home-scroll__header d-flex ${ className={`mobile-home-scroll__header d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<div <div
className={`mobile-home-scroll__header--right d-flex ${ className={`mobile-home-scroll__header--right d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<h1>{props.title}</h1> <h1>{props.title}</h1>
<span></span> <span></span>
</div> </div>
</div> </div>
) : null} ) : null}
</> </>
); );
}; };
const TabHeader = (props) => { const TabHeader = (props) => {
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div <div
className={`home-scroll__header d-flex ${ className={`home-scroll__header d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<div className="home-scroll__header--right d-flex"> <div className="home-scroll__header--right d-flex">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1> <h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
<span></span> <span></span>
</div> </div>
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div <div
className={`mobile-home-scroll__header d-flex ${ className={`mobile-home-scroll__header d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<div <div
className={`mobile-home-scroll__header--right d-flex ${ className={`mobile-home-scroll__header--right d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<h1>{props.title}</h1> <h1>{props.title}</h1>
<span></span> <span></span>
</div> </div>
</div> </div>
) : null} ) : null}
</> </>
); );
}; };
export default class HomeSlider extends Component { export default class HomeSlider extends Component {
render() { render() {
const { data, title, height, designType, number, link } = this.props; const { data, title, height, designType, number, link } = this.props;
let header; let header;
if (title) { if (title) {
if (designType === "simple" || designType === "blog") { if (designType === "simple" || designType === "blog") {
header = ( header = (
<SimpleHeader title={title} link={link} more={data.length > number} /> <SimpleHeader title={title} link={link} more={data.length > number} />
); );
} else if (designType === "tab") { } else if (designType === "tab") {
header = <TabHeader title={title} link={link} />; header = <TabHeader title={title} link={link} />;
} }
} }
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div <div
className={ className={
title ? "home-slider d-flex flex-column" : "home-slider d-flex" title ? "home-slider d-flex flex-column" : "home-slider d-flex"
} }
> >
{header} {header}
<Carousel <Carousel
itemsToShow={number} itemsToShow={number}
isRTL={true} isRTL={true}
enableTilt={false} enableTilt={false}
showArrows={true} showArrows={true}
pagination={false} pagination={false}
> >
{data.map((item, i) => ( {data.map((item, i) => (
<Item <Item
height={height} height={height}
designType={designType} designType={designType}
data={item} data={item}
key={i} key={i}
/> />
))} ))}
</Carousel> </Carousel>
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div <div
className={ className={
title title
? "mobile-home-slider d-flex flex-column" ? "mobile-home-slider d-flex flex-column"
: "mobile-home-slider d-flex" : "mobile-home-slider d-flex"
} }
> >
{header} {header}
<Carousel <Carousel
itemsToShow={number} itemsToShow={number}
isRTL={true} isRTL={true}
enableTilt={false} enableTilt={false}
showArrows={false} showArrows={false}
pagination={false} pagination={false}
> >
{data.map((item, i) => ( {data.map((item, i) => (
<Item <Item
height={height} height={height}
designType={designType} designType={designType}
data={item} data={item}
key={i} key={i}
/> />
))} ))}
</Carousel> </Carousel>
</div> </div>
) : null} ) : null}
</> </>
); );
} }
} }
const Item = (props) => { const Item = (props) => {
return ( return (
<> <>
{props.designType === "header" ? ( {props.designType === "header" ? (
<Header height={props.height} data={props.data} /> <Header height={props.height} data={props.data} />
) : null} ) : null}
{props.designType === "simple" || props.designType === "tab" ? ( {props.designType === "simple" || props.designType === "tab" ? (
<Simple height={props.height} data={props.data} /> <Simple height={props.height} data={props.data} />
) : null} ) : null}
{props.designType === "blog" ? ( {props.designType === "blog" ? (
<Blog height={props.height} data={props.data} /> <Blog height={props.height} data={props.data} />
) : null} ) : null}
</> </>
// //
); );
}; };

@ -1,139 +1,139 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import Identifier from "./Identifier/index"; import Identifier from "./Identifier/index";
import proxy from "~/Redux/proxy"; import proxy from "~/Redux/proxy";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
}, },
}; };
export default class HomeStatic extends Component { export default class HomeStatic extends Component {
render() { render() {
const status = proxy.status(); const status = proxy.status();
const { data, height, title } = this.props; const { data, height, title } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<section <section
className={ className={
title ? "home-static d-flex flex-column" : "home-static d-flex" title ? "home-static d-flex flex-column" : "home-static d-flex"
} }
> >
{title ? ( {title ? (
<div className="home-scroll__header d-flex"> <div className="home-scroll__header d-flex">
<h1>{title}</h1> <h1>{title}</h1>
<div className="home-scroll__header--more d-flex"> <div className="home-scroll__header--more d-flex">
<span>{window.t("موارد بیشتر")}</span> <span>{window.t("موارد بیشتر")}</span>
<ChevronLeftIcon <ChevronLeftIcon
style={{ style={{
width: 20, width: 20,
height: 20, height: 20,
color: "black", color: "black",
marginRight: 1, marginRight: 1,
}} }}
/> />
</div> </div>
</div> </div>
) : null} ) : null}
<div className="home-static__list d-flex"> <div className="home-static__list d-flex">
{data.map((item, i) => ( {data.map((item, i) => (
<Item data={item} height={height} key={i} /> <Item data={item} height={height} key={i} />
))} ))}
</div> </div>
</section> </section>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<section <section
className="mobile-home-static d-flex" className="mobile-home-static d-flex"
style={{ height: height }} style={{ height: height }}
> >
{data.map((item, i) => {data.map((item, i) =>
proxy.status() ? ( proxy.status() ? (
<Identifier data={item} key={i} status={status} /> <Identifier data={item} key={i} status={status} />
) : ( ) : (
<Item data={item} height={height} key={i} /> <Item data={item} height={height} key={i} />
) )
)} )}
</section> </section>
) : null} ) : null}
</> </>
); );
} }
} }
const Item = (props) => { const Item = (props) => {
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div <div
style={{ style={{
width: `${props.data.width}%`, width: `${props.data.width}%`,
height: props.height, height: props.height,
cursor: "pointer", cursor: "pointer",
}} }}
className={`home-static__list--item d-flex ${ className={`home-static__list--item d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
onClick={() => onClick={() =>
props.data.link && window.open(props.data.link, "_blank") props.data.link && window.open(props.data.link, "_blank")
} }
> >
<div <div
className={`d-flex flex-column ${ className={`d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
style={{}} style={{}}
> >
<h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}> <h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>
{props.data.topText} {props.data.topText}
</h2> </h2>
<h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}> <h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>
{props.data.bottomText} {props.data.bottomText}
</h2> </h2>
</div> </div>
<img <img
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`} src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
alt={window.t("عکس")} alt={window.t("عکس")}
/> />
</div> </div>
) : ( ) : (
<div <div
onClick={() => onClick={() =>
props.data.link && window.open(props.data.link, "_blank") props.data.link && window.open(props.data.link, "_blank")
} }
style={{ style={{
width: `${props.data.width}%`, width: `${props.data.width}%`,
height: props.height, height: props.height,
cursor: "pointer", cursor: "pointer",
}} }}
className={`home-static__list2--item ${ className={`home-static__list2--item ${
window.lang === "en" ? "d-flex" : "" window.lang === "en" ? "d-flex" : ""
}`} }`}
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`} src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
alt={window.t("عکس")} alt={window.t("عکس")}
style={{ float: "left" }} style={{ float: "left" }}
/> />
<div <div
className={`d-flex flex-column ${ className={`d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
> >
<h2 style={{ color: "#02733c", fontSize: 12 }}> <h2 style={{ color: "#02733c", fontSize: 12 }}>
{props.data.topText} {props.data.topText}
</h2> </h2>
<h2 style={{ color: "#7dc241", fontSize: 12 }}> <h2 style={{ color: "#7dc241", fontSize: 12 }}>
{props.data.bottomText} {props.data.bottomText}
</h2> </h2>
</div> </div>
</div> </div>
)} )}
</> </>
); );
}; };

@ -1,269 +1,269 @@
import React, { Component } from "react"; import React, { Component } from "react";
import proxy from "~/Redux/proxy"; import proxy from "~/Redux/proxy";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Avatar from "@material-ui/core/Avatar"; import Avatar from "@material-ui/core/Avatar";
import logo from "~/assets/icons/logo.png"; import logo from "~/assets/icons/logo.png";
import basket from "~/assets/icons/basket.png"; import basket from "~/assets/icons/basket.png";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu"; import Menu from "@material-ui/core/Menu";
import { connect } from "react-redux"; import { connect } from "react-redux";
import "./index.scss"; import "./index.scss";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { user, publicApi } from "~/Redux/actions"; import { user, publicApi } from "~/Redux/actions";
function Navigate({ path }) { function Navigate({ path }) {
let history = useHistory(); let history = useHistory();
return <>{history.push(path)}</>; return <>{history.push(path)}</>;
} }
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
li: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, li: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
}, },
}; };
// const changeLanguage = (val) => { // const changeLanguage = (val) => {
// if (val === "fa") { // if (val === "fa") {
// localStorage.removeItem("language"); // localStorage.removeItem("language");
// } else if (val === "en") { // } else if (val === "en") {
// localStorage.setItem("language", "en"); // localStorage.setItem("language", "en");
// } else { // } else {
// localStorage.setItem("language", "ar"); // localStorage.setItem("language", "ar");
// } // }
// window.location.reload(); // window.location.reload();
// }; // };
class LaptopNavbar extends Component { class LaptopNavbar extends Component {
state = {}; state = {};
render() { render() {
const { status } = this.props; const { status } = this.props;
if (this.state.navigatePath) if (this.state.navigatePath)
return <Navigate path={this.state.navigatePath} />; return <Navigate path={this.state.navigatePath} />;
const links = [ const links = [
{ name: window.t("صفحه اصلی"), to: "/", page: "home" }, { name: window.t("صفحه اصلی"), to: "/", page: "home" },
{ name: window.t("فروشگاه"), to: "/products", page: "products" }, { name: window.t("فروشگاه"), to: "/products", page: "products" },
{ name: window.t("سوالات متداول"), to: "/faq", page: "faq" }, { name: window.t("سوالات متداول"), to: "/faq", page: "faq" },
{ name: window.t("درباره ما"), to: "/about", page: "about" }, { name: window.t("درباره ما"), to: "/about", page: "about" },
{ name: window.t("پشتیبانی"), to: "/contact", page: "contact" }, { name: window.t("پشتیبانی"), to: "/contact", page: "contact" },
]; ];
return ( return (
<nav <nav
className={`laptop-navbar d-flex ${window.lang === "en" ? "ltr" : ""}`} className={`laptop-navbar d-flex ${window.lang === "en" ? "ltr" : ""}`}
> >
<div className={`d-flex ${window.lang === "en" ? "ltr" : ""}`}> <div className={`d-flex ${window.lang === "en" ? "ltr" : ""}`}>
<Link to="/" className="laptop-navbar__logo"> <Link to="/" className="laptop-navbar__logo">
<img src={logo} alt={window.t("لوگو")} /> <img src={logo} alt={window.t("لوگو")} />
</Link> </Link>
<ul <ul
className={`laptop-navbar__list d-flex ${ className={`laptop-navbar__list d-flex ${
window.lang === "en" ? "ltr" : "" window.lang === "en" ? "ltr" : ""
}`} }`}
> >
{links.map((item, i) => ( {links.map((item, i) => (
<li style={{ fontSize: fontSize.desktop.li }} key={i}> <li style={{ fontSize: fontSize.desktop.li }} key={i}>
<Link <Link
to={item.to} to={item.to}
style={{ style={{
color: color:
this.props.page === item.page ? "#6cbe44" : "#6f7074", this.props.page === item.page ? "#6cbe44" : "#6f7074",
}} }}
> >
{item.name} {item.name}
</Link> </Link>
</li> </li>
))} ))}
<li style={{ fontSize: fontSize.desktop.li }}> <li style={{ fontSize: fontSize.desktop.li }}>
<span <span
onClick={() => { onClick={() => {
window.scrollTo(0, document.body.scrollHeight); window.scrollTo(0, document.body.scrollHeight);
}} }}
style={{ style={{
cursor: "pointer", cursor: "pointer",
color: "#6f7074", color: "#6f7074",
}} }}
> >
{window.t("دانلود")} {window.t("دانلود")}
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
<div <div
className={`d-flex align-items-center ${ className={`d-flex align-items-center ${
window.lang === "en" ? "ltr" : "" window.lang === "en" ? "ltr" : ""
}`} }`}
> >
{proxy.status() ? ( {proxy.status() ? (
<> <>
{/* <Dropdown> {/* <Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic"> <Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button Dropdown Button
</Dropdown.Toggle> </Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item> <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2"> <Dropdown.Item href="#/action-2">
Another action Another action
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item href="#/action-3"> <Dropdown.Item href="#/action-3">
Something else Something else
</Dropdown.Item> </Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> */} </Dropdown> */}
<Link to="/cart" className="laptop-navbar__logout"> <Link to="/cart" className="laptop-navbar__logout">
{window.t("سبد خرید")}{" "} {window.t("سبد خرید")}{" "}
<img <img
width="20" width="20"
height="23" height="23"
src={basket} src={basket}
alt={window.t("سبد خرید")} alt={window.t("سبد خرید")}
style={{ marginRight: 5 }} style={{ marginRight: 5 }}
/> />
</Link> </Link>
<Menu <Menu
id="menu-desktop-navbar" id="menu-desktop-navbar"
anchorEl={this.state.anchorEl} anchorEl={this.state.anchorEl}
keepMounted keepMounted
anchorOrigin={{ anchorOrigin={{
vertical: "bottom", vertical: "bottom",
horizontal: "center", horizontal: "center",
}} }}
transformOrigin={{ transformOrigin={{
vertical: "bottom", vertical: "bottom",
horizontal: "center", horizontal: "center",
}} }}
open={this.state.dropdown || false} open={this.state.dropdown || false}
onClose={() => this.setState({ dropdown: false })} onClose={() => this.setState({ dropdown: false })}
> >
<MenuItem onClick={() => this.setState({ dropdown: false })}> <MenuItem onClick={() => this.setState({ dropdown: false })}>
<Link to={"/profile"}>{window.t("ویرایش مشخصات")}</Link> <Link to={"/profile"}>{window.t("ویرایش مشخصات")}</Link>
</MenuItem> </MenuItem>
<MenuItem onClick={() => this.setState({ dropdown: false })}> <MenuItem onClick={() => this.setState({ dropdown: false })}>
<Link to={"/orders"}>{window.t("پیگری سفارشات")}</Link> <Link to={"/orders"}>{window.t("پیگری سفارشات")}</Link>
</MenuItem> </MenuItem>
<MenuItem onClick={() => this.setState({ dropdown: false })}> <MenuItem onClick={() => this.setState({ dropdown: false })}>
<Link to={"/myBooks"}>{window.t("کتاب های من")}</Link> <Link to={"/myBooks"}>{window.t("کتاب های من")}</Link>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
onClick={() => { onClick={() => {
this.props.logout({}); this.props.logout({});
this.setState({ dropdown: false }); this.setState({ dropdown: false });
}} }}
> >
{window.t("خروج")}{" "} {window.t("خروج")}{" "}
</MenuItem> </MenuItem>
</Menu> </Menu>
<select <select
className="language-select" className="language-select"
onChange={(e) => { onChange={(e) => {
window.localStorage.setItem("language", e.target.value); window.localStorage.setItem("language", e.target.value);
window.reLang(e.target.value); window.reLang(e.target.value);
this.props.changeLanguage(); this.props.changeLanguage();
this.setState({ navigatePath: "/reset" }); this.setState({ navigatePath: "/reset" });
//window.location.reload(); //window.location.reload();
}} }}
> >
{[ {[
{ key: "فارسی", lang: "fa", default: true }, { key: "فارسی", lang: "fa", default: true },
{ key: "English", lang: "en" }, { key: "English", lang: "en" },
{ key: "العربیه", lang: "ar" }, { key: "العربیه", lang: "ar" },
].map((el, index) => ( ].map((el, index) => (
<option <option
key={el.lang} key={el.lang}
value={el.lang} value={el.lang}
selected={ selected={
(!window.lang && el.default) || el.lang == window.lang (!window.lang && el.default) || el.lang == window.lang
} }
> >
{el.key} {el.key}
</option> </option>
))} ))}
</select> </select>
<div <div
className="navbar-drawer__header d-flex align-items-center" className="navbar-drawer__header d-flex align-items-center"
onClick={(event) => onClick={(event) =>
this.setState({ this.setState({
dropdown: !this.state.dropdown, dropdown: !this.state.dropdown,
anchorEl: event.currentTarget, anchorEl: event.currentTarget,
}) })
} }
> >
<div <div
className="laptop-navbar__header--right d-fex flex-column" className="laptop-navbar__header--right d-fex flex-column"
style={{ fontSize: "13px" }} style={{ fontSize: "13px" }}
> >
{status.firstName + " " + status.lastName} {status.firstName + " " + status.lastName}
</div>{" "} </div>{" "}
<Avatar <Avatar
style={{ width: 40, height: 40, marginRight: 10 }} style={{ width: 40, height: 40, marginRight: 10 }}
alt="Remy Sharp" alt="Remy Sharp"
src={ src={
status.picFileId status.picFileId
? `https://dnvn.ir/api/v1/file/${status.picFileId}` ? `https://dnvn.ir/api/v1/file/${status.picFileId}`
: "" : ""
} }
/> />
</div> </div>
</> </>
) : ( ) : (
<div <div
className={`d-flex ${ className={`d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<select <select
className="language-select" className="language-select"
onChange={(e) => { onChange={(e) => {
window.localStorage.setItem("language", e.target.value); window.localStorage.setItem("language", e.target.value);
// window.location.reload(); // window.location.reload();
window.reLang(e.target.value); window.reLang(e.target.value);
this.props.changeLanguage(); this.props.changeLanguage();
this.setState({ navigatePath: "/reset" }); this.setState({ navigatePath: "/reset" });
}} }}
> >
{console.log(window.lang)} {console.log(window.lang)}
{[ {[
{ key: "فارسی", lang: "fa", default: true }, { key: "فارسی", lang: "fa", default: true },
{ key: "English", lang: "en" }, { key: "English", lang: "en" },
{ key: "العربیه", lang: "ar" }, { key: "العربیه", lang: "ar" },
].map((el, index) => ( ].map((el, index) => (
<option <option
key={el.lang} key={el.lang}
value={el.lang} value={el.lang}
selected={ selected={
(!window.lang && el.default) || el.lang == window.lang (!window.lang && el.default) || el.lang == window.lang
} }
> >
{el.key} {el.key}
</option> </option>
))} ))}
</select> </select>
<Link <Link
style={{ fontSize: fontSize.desktop.a }} style={{ fontSize: fontSize.desktop.a }}
to={"/auth"} to={"/auth"}
className="laptop-navbar__signup" className="laptop-navbar__signup"
> >
{window.t("ورود یا ثبتنام")} {window.t("ورود یا ثبتنام")}
</Link> </Link>
</div> </div>
)} )}
</div> </div>
</nav> </nav>
); );
} }
} }
export default connect( export default connect(
(state) => ({ status: state.user.status, lang: state.publicApi.lang }), (state) => ({ status: state.user.status, lang: state.publicApi.lang }),
{ {
changeLanguage: publicApi.changeLanguage, changeLanguage: publicApi.changeLanguage,
logout: user.logout, logout: user.logout,
} }
)(LaptopNavbar); )(LaptopNavbar);
LaptopNavbar.defaultProps = {}; LaptopNavbar.defaultProps = {};

@ -1,174 +1,174 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions"; import { publicApi } from "~/Redux/actions";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import HomeHeader from "./HomeHeader/index"; import HomeHeader from "./HomeHeader/index";
import HomeStatic from "./HomeStatic/index"; import HomeStatic from "./HomeStatic/index";
import HomeScroll from "./HomeScroll/index"; import HomeScroll from "./HomeScroll/index";
import Footer from "./Footer/index"; import Footer from "./Footer/index";
import HomeSlider from "./HomeSlider/index"; import HomeSlider from "./HomeSlider/index";
import HomeSearch from "./HomeSearch/index"; import HomeSearch from "./HomeSearch/index";
import Membership from "./Membership/index"; import Membership from "./Membership/index";
import SingleBlog from "./SingleBlog/index"; import SingleBlog from "./SingleBlog/index";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import Download from "./Download/index"; import Download from "./Download/index";
// import pic1 from "~/assets/images/pic1.png"; // import pic1 from "~/assets/images/pic1.png";
// import pic from "~/assets/images/pic.png"; // import pic from "~/assets/images/pic.png";
// import online from "~/assets/icons/online-education.png"; // import online from "~/assets/icons/online-education.png";
// import chemistry from "~/assets/icons/chemistry.png"; // import chemistry from "~/assets/icons/chemistry.png";
// import calculator from "~/assets/icons/calculator.png"; // import calculator from "~/assets/icons/calculator.png";
// import homework from "~/assets/icons/homework.png"; // import homework from "~/assets/icons/homework.png";
// import sciense_6 from "~/assets/images/sciense-6.png"; // import sciense_6 from "~/assets/images/sciense-6.png";
// import chemistry_10 from "~/assets/images/chemistry-10.png"; // import chemistry_10 from "~/assets/images/chemistry-10.png";
// import sciense_8 from "~/assets/images/sciense-8.png"; // import sciense_8 from "~/assets/images/sciense-8.png";
// import sciense_9 from "~/assets/images/sciense-9.png"; // import sciense_9 from "~/assets/images/sciense-9.png";
// import zist_10 from "~/assets/images/zist-10.png"; // import zist_10 from "~/assets/images/zist-10.png";
// import blog1 from "~/assets/images/blog1.png"; // import blog1 from "~/assets/images/blog1.png";
// import blog2 from "~/assets/images/blog2.png"; // import blog2 from "~/assets/images/blog2.png";
// import blog3 from "~/assets/images/blog3.png"; // import blog3 from "~/assets/images/blog3.png";
// import ar from "~/assets/icons/qr.svg"; // import ar from "~/assets/icons/qr.svg";
// import qr from "~/assets/icons/qr.svg"; // import qr from "~/assets/icons/qr.svg";
// import myBook from "~/assets/images/myBook.png"; // import myBook from "~/assets/images/myBook.png";
// import homeBlog from "~/assets/images/homeBlog.png"; // import homeBlog from "~/assets/images/homeBlog.png";
// import bookActivation from "~/assets/images/bookActivating.png"; // import bookActivation from "~/assets/images/bookActivating.png";
// import home_chat from "~/assets/icons/home_chat.png"; // import home_chat from "~/assets/icons/home_chat.png";
// import home_ar from "~/assets/icons/home_ar(2).png"; // import home_ar from "~/assets/icons/home_ar(2).png";
import "./index.scss"; import "./index.scss";
class Home extends Component { class Home extends Component {
componentDidMount() { componentDidMount() {
const mobile = window.innerWidth < 1000; const mobile = window.innerWidth < 1000;
window.scrollTo(0, 0); window.scrollTo(0, 0);
// if (this.props.homeData.length == 0) { // if (this.props.homeData.length == 0) {
if (mobile && this.props.userStatus) { if (mobile && this.props.userStatus) {
this.props.getHomeData({ device: 2 }); this.props.getHomeData({ device: 2 });
} else { } else {
this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 }); this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 });
} }
return null; return null;
// } // }
} }
//componentDidupdate = this.componentDidMount(); //componentDidupdate = this.componentDidMount();
render() { render() {
const { homeData, loading } = this.props; const { homeData, loading } = this.props;
if (!loading && this.props.homeData?.length === 0) if (!loading && this.props.homeData?.length === 0)
return this.componentDidMount(); return this.componentDidMount();
const mobile = window.innerWidth < 1000; const mobile = window.innerWidth < 1000;
if (loading && this.props.homeData?.length === 0) if (loading && this.props.homeData?.length === 0)
return ( return (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Navbar page={"home"} /> <Navbar page={"home"} />
<Loader /> <Loader />
</div> </div>
); );
let scale = Math.max( let scale = Math.max(
1, 1,
mobile ? Math.min(800, window.innerWidth) / 540 : 1 mobile ? Math.min(800, window.innerWidth) / 540 : 1
); );
return ( return (
<> <>
<> <>
<div <div
className={ className={
(this.props.status && mobile ? "mobile-home" : "home") + (this.props.status && mobile ? "mobile-home" : "home") +
" d-flex flex-column" " d-flex flex-column"
} }
style={ style={
this.props.status && mobile this.props.status && mobile
? { ? {
transformStyle: "flat", transformStyle: "flat",
transformOrigin: "top", transformOrigin: "top",
transform: `scale(${scale})`, transform: `scale(${scale})`,
} }
: null : null
} }
> >
<Navbar page={"home"} /> <Navbar page={"home"} />
{homeData?.map((item, i) => ( {homeData?.map((item, i) => (
<Identifier item={item} key={i} /> <Identifier item={item} key={i} />
))} ))}
{window.location.host.indexOf("app") > -1 ? null : <Download />} {window.location.host.indexOf("app") > -1 ? null : <Download />}
</div> </div>
{window.innerWidth > 1000 ? <Footer /> : null} {window.innerWidth > 1000 ? <Footer /> : null}
</> </>
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
homeData: state.publicApi.homeData, homeData: state.publicApi.homeData,
loading: state.publicApi.loading, loading: state.publicApi.loading,
userStatus: state.user.status, userStatus: state.user.status,
}), }),
{ getHomeData: publicApi.getHomeData } { getHomeData: publicApi.getHomeData }
)(Home); )(Home);
const Identifier = (props) => { const Identifier = (props) => {
return ( return (
<> <>
{props.item.type === "header" ? ( {props.item.type === "header" ? (
<HomeHeader <HomeHeader
height={props.item.height} height={props.item.height}
title={props.item.title} title={props.item.title}
data={props.item.data} data={props.item.data}
/> />
) : null} ) : null}
{props.item.type === "static" ? ( {props.item.type === "static" ? (
<HomeStatic <HomeStatic
height={props.item.height} height={props.item.height}
title={props.item.title} title={props.item.title}
data={props.item.data} data={props.item.data}
designType={props.item.design} designType={props.item.design}
/> />
) : null} ) : null}
{props.item.type === "scroll" ? ( {props.item.type === "scroll" ? (
props.item.data.length > 0 ? ( props.item.data.length > 0 ? (
<HomeScroll <HomeScroll
number={props.item.number} number={props.item.number}
height={props.item.height} height={props.item.height}
title={props.item.title} title={props.item.title}
data={props.item.data} data={props.item.data}
designType={props.item.design} designType={props.item.design}
moreText={props.item.moreText} moreText={props.item.moreText}
/> />
) : null ) : null
) : null} ) : null}
{props.item.type === "slider" ? ( {props.item.type === "slider" ? (
props.item.data.length > 0 ? ( props.item.data.length > 0 ? (
<HomeSlider <HomeSlider
designType={props.item.design} designType={props.item.design}
number={props.item.number} number={props.item.number}
height={props.item.height} height={props.item.height}
title={props.item.title} title={props.item.title}
data={props.item.data} data={props.item.data}
link={props.item.link} link={props.item.link}
/> />
) : null ) : null
) : null} ) : null}
{props.item.type === "search" ? ( {props.item.type === "search" ? (
<HomeSearch height={props.item.height} data={props.item.data} /> <HomeSearch height={props.item.height} data={props.item.data} />
) : null} ) : null}
{props.item.type === "membership" && window.innerWidth > 1000 ? ( {props.item.type === "membership" && window.innerWidth > 1000 ? (
<Membership /> <Membership />
) : null} ) : null}
{props.item.type === "singleBlog" && window.innerWidth > 1000 ? ( {props.item.type === "singleBlog" && window.innerWidth > 1000 ? (
<SingleBlog <SingleBlog
height={props.item.height} height={props.item.height}
data={props.item.data} data={props.item.data}
direction={props.item.direction} direction={props.item.direction}
/> />
) : null} ) : null}
</> </>
); );
}; };

@ -1,101 +1,101 @@
import React, { Component } from "react"; import React, { Component } from "react";
import Navbar from "../Home/Navbar"; import Navbar from "../Home/Navbar";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userProduct } from "~/Redux/actions"; import { userProduct } from "~/Redux/actions";
import moment from "jalali-moment"; import moment from "jalali-moment";
import "./index.scss"; import "./index.scss";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
class MyBooks extends Component { class MyBooks extends Component {
componentDidMount() { componentDidMount() {
if (!this.props.mylist) this.props.getMyList(); if (!this.props.mylist) this.props.getMyList();
} }
render() { render() {
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
const data = (this.props.myList || []).filter((e) => +e.productType === 3); const data = (this.props.myList || []).filter((e) => +e.productType === 3);
return ( return (
<div className="mybooks"> <div className="mybooks">
<Navbar /> <Navbar />
<div className="mybooks-title">{window.t("کتاب های من")}</div> <div className="mybooks-title">{window.t("کتاب های من")}</div>
<div className="mybooks-tabs"> <div className="mybooks-tabs">
<div className="mybooks-tabs-item mybooks-tabs-item1 mybooks-tabs-active"> <div className="mybooks-tabs-item mybooks-tabs-item1 mybooks-tabs-active">
{window.t("فعال سازی شده")}{" "} {window.t("فعال سازی شده")}{" "}
</div> </div>
<div <div
className="mybooks-tabs-item mybooks-tabs-item2" className="mybooks-tabs-item mybooks-tabs-item2"
style={{ opacity: 0.2 }} style={{ opacity: 0.2 }}
> >
{window.t("دیجیتال")} {window.t("دیجیتال")}
</div> </div>
</div> </div>
<div className="mybooks-main-content"> <div className="mybooks-main-content">
{data.map((item) => ( {data.map((item) => (
<div key={item.id} className="mybooks-main-content-item"> <div key={item.id} className="mybooks-main-content-item">
<div className="mybooks-main-content-row1"> <div className="mybooks-main-content-row1">
<div className="mybooks-main-content-row1-img-container"> <div className="mybooks-main-content-row1-img-container">
<img <img
src={`https://dnvn.ir/api/v1/file/${ src={`https://dnvn.ir/api/v1/file/${
item.product.book.fileIds.split(",")[0] item.product.book.fileIds.split(",")[0]
}`} }`}
className="mybooks-main-content-row1-img" className="mybooks-main-content-row1-img"
alt="mybook-img" alt="mybook-img"
/> />
</div> </div>
<div className="mybooks-main-content-row1-text d-flex justify-content-between flex-column"> <div className="mybooks-main-content-row1-text d-flex justify-content-between flex-column">
<div className="mybooks-main-content-row1-text-name"> <div className="mybooks-main-content-row1-text-name">
{item.product.book.name} {window.t("پایه")} {item.product.book.name} {window.t("پایه")}
{grades[item.product.book.gradeId]} {grades[item.product.book.gradeId]}
</div> </div>
<div className="mybooks-main-content-row1-text-activation-date"> <div className="mybooks-main-content-row1-text-activation-date">
{window.t("تاریخ فعالسازی:")}{" "} {window.t("تاریخ فعالسازی:")}{" "}
{moment(item.updatedAt).format("YYYY/M/D")} {moment(item.updatedAt).format("YYYY/M/D")}
</div> </div>
<div className="mybooks-main-content-row1-text-activation-code"> <div className="mybooks-main-content-row1-text-activation-code">
{window.t("کد فعالسازی:")} {item.activationCode} {window.t("کد فعالسازی:")} {item.activationCode}
</div> </div>
<div className="d-flex justify-content-around mybooks-main-content_bottoms"> <div className="d-flex justify-content-around mybooks-main-content_bottoms">
<Link to="/qr-scan"> {window.t("اسکن بارکد")}</Link> <Link to="/qr-scan"> {window.t("اسکن بارکد")}</Link>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<a <a
href={`https://ar.dnvn.ir/lunch?id=${item.product?.ARId}`} href={`https://ar.dnvn.ir/lunch?id=${item.product?.ARId}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="" className=""
> >
{window.t("واقعیت افزوده")}{" "} {window.t("واقعیت افزوده")}{" "}
</a> </a>
) : null} ) : null}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div> </div>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
myList: state.userProduct.myList, myList: state.userProduct.myList,
loading: state.loading, loading: state.loading,
}), }),
{ {
getMyList: userProduct.myList, getMyList: userProduct.myList,
} }
)(MyBooks); )(MyBooks);

File diff suppressed because it is too large Load Diff

@ -1,145 +1,145 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Navbar from "../Home/Navbar"; import Navbar from "../Home/Navbar";
import { userFactor } from "~/Redux/actions"; import { userFactor } from "~/Redux/actions";
import "./index.css"; import "./index.css";
import moment from "jalali-moment"; import moment from "jalali-moment";
class Orders extends Component { class Orders extends Component {
componentDidMount() { componentDidMount() {
if (!this.props.list) this.props.getList(); if (!this.props.list) this.props.getList();
} }
render() { render() {
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
// props.getList(); // props.getList();
let data = this.props.list; let data = this.props.list;
return ( return (
<div className="order"> <div className="order">
<Navbar /> <Navbar />
<div className="order-title" align="center"> <div className="order-title" align="center">
{window.t("سفارشات من")} {window.t("سفارشات من")}
</div> </div>
<div className="order-data-container"> <div className="order-data-container">
{data != null && {data != null &&
data.map((item, i) => ( data.map((item, i) => (
<div key={i} className="order-data-container-item"> <div key={i} className="order-data-container-item">
<div className="order-data-container-item-row1"> <div className="order-data-container-item-row1">
<div className="order-data-container-item-row1-order-id"> <div className="order-data-container-item-row1-order-id">
{window.t("شناسه سفارش")}: <span>{item.id}</span> {window.t("شناسه سفارش")}: <span>{item.id}</span>
</div> </div>
<div className="order-data-container-item-row1-order-status"> <div className="order-data-container-item-row1-order-status">
<div <div
style={{ style={{
backgroundColor: [0, "#11FA2F", "#11FADB", "#FA3011"][ backgroundColor: [0, "#11FA2F", "#11FADB", "#FA3011"][
item.condition item.condition
], ],
}} }}
className="order-data-container-item-row1-order-status-circle" className="order-data-container-item-row1-order-status-circle"
></div> ></div>
<div <div
style={{ style={{
color: [0, "#0F9420", "#30C2BD", "#FA4C0D"][ color: [0, "#0F9420", "#30C2BD", "#FA4C0D"][
item.condition item.condition
], ],
backgroundColor: [0, "#B0F8B5", "#B5FFFD", "#FDC9B6"][ backgroundColor: [0, "#B0F8B5", "#B5FFFD", "#FDC9B6"][
item.condition item.condition
], ],
}} }}
className="order-data-container-item-row1-order-status-text" className="order-data-container-item-row1-order-status-text"
> >
{ {
[ [
window.t("پرداخت نشده"), window.t("پرداخت نشده"),
window.t("در حال پردازش"), window.t("در حال پردازش"),
window.t("ارسال شد"), window.t("ارسال شد"),
window.t("لغو شد"), window.t("لغو شد"),
][item.condition] ][item.condition]
} }
</div> </div>
</div> </div>
</div> </div>
<div className="order-data-container-item-row2"> <div className="order-data-container-item-row2">
<div className="order-data-container-item-row2-transactionId"> <div className="order-data-container-item-row2-transactionId">
{window.t("شناسه پرداخت")} :{" "} {window.t("شناسه پرداخت")} :{" "}
<span>{item.transactionId}</span> <span>{item.transactionId}</span>
</div> </div>
<div className="order-data-container-item-row2-order-date"> <div className="order-data-container-item-row2-order-date">
<span> <span>
{moment(item.payedAt).format("jYYYY/jMM/jDD hh:mm")} {moment(item.payedAt).format("jYYYY/jMM/jDD hh:mm")}
</span> </span>
</div> </div>
</div> </div>
<div className="order-data-container-item-row3 d-flex"> <div className="order-data-container-item-row3 d-flex">
<div className="order-data-container-item-row3-order-price "> <div className="order-data-container-item-row3-order-price ">
{window.t("مبلغ")} : <span>{window.tr(item.payPrice)}</span>{" "} {window.t("مبلغ")} : <span>{window.tr(item.payPrice)}</span>{" "}
<span className="odcir2op-unit">{window.t("تومان")}</span> <span className="odcir2op-unit">{window.t("تومان")}</span>
</div> </div>
<div className="order-data-container-item-row3-order-offcodeprice"> <div className="order-data-container-item-row3-order-offcodeprice">
{window.t("تخفیف")} :{" "} {window.t("تخفیف")} :{" "}
<span>{window.tr(item.offPrice)}</span>{" "} <span>{window.tr(item.offPrice)}</span>{" "}
<span className="odcir2oo-unit">{window.t("تومان")}</span> <span className="odcir2oo-unit">{window.t("تومان")}</span>
</div> </div>
</div> </div>
<div className="order-data-container-item-row4"> <div className="order-data-container-item-row4">
<div className="order-data-container-item-row4-imgs"> <div className="order-data-container-item-row4-imgs">
{item.products.map((item, i) => ( {item.products.map((item, i) => (
<div <div
key={i} key={i}
className="order-data-container-item-row4-imgs-container" className="order-data-container-item-row4-imgs-container"
> >
<img <img
className="order-data-container-item-row4-imgs-img" className="order-data-container-item-row4-imgs-img"
src={`https://dnvn.ir/api/v1/file/${ src={`https://dnvn.ir/api/v1/file/${
item.book.fileIds.split(",")[0] item.book.fileIds.split(",")[0]
}`} }`}
alt="" alt=""
/> />
<div style={{ height: 0 }}> <div style={{ height: 0 }}>
<div className="order-data-container-item-row4-imgs-img-count"> <div className="order-data-container-item-row4-imgs-img-count">
{item.count}{" "} {item.count}{" "}
<span style={{ fontSize: "12px" }}>×</span> <span style={{ fontSize: "12px" }}>×</span>
</div> </div>
</div> </div>
<div style={{ fontSize: "10px" }} align="center"> <div style={{ fontSize: "10px" }} align="center">
{`${item.book.name} ${grades[item.book.gradeId]}`} {`${item.book.name} ${grades[item.book.gradeId]}`}
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</div> </div>
))} ))}
{data == null && ( {data == null && (
<div className="order-message"> <div className="order-message">
{window.t("سفارشی برای نماش وجود ندارد")} {window.t("سفارشی برای نماش وجود ندارد")}
</div> </div>
)} )}
</div> </div>
</div> </div>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
list: state.userFactor.list, list: state.userFactor.list,
}), }),
{ {
getList: userFactor.list, getList: userFactor.list,
} }
)(Orders); )(Orders);

@ -1,25 +1,25 @@
import React, { Component } from "react"; import React, { Component } from "react";
import Iframe from "react-iframe"; import Iframe from "react-iframe";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
export default class Test extends Component { export default class Test extends Component {
render() { render() {
const id = +window.location.pathname.split("/").slice(-1)[0]; const id = +window.location.pathname.split("/").slice(-1)[0];
console.log(1); console.log(1);
return ( return (
<div style={{ height: "100%" }}> <div style={{ height: "100%" }}>
<Navbar /> <Navbar />
<br /> <br />
<br /> <br />
<Iframe <Iframe
url={"https://dnvn.ir/xpdf/" + id} url={"https://dnvn.ir/xpdf/" + id}
width="100%" width="100%"
height="100%" height="100%"
style={{ position: "relative", top: 80 }} style={{ position: "relative", top: 80 }}
/> />
</div> </div>
); );
} }
} }

@ -1,31 +1,31 @@
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55, h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55,
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
}, },
}; };
export default function Info(props) { export default function Info(props) {
const { title, subTitle, description } = props; const { title, subTitle, description } = props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<section <section
className={`product-info d-flex flex-column ${ className={`product-info d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
> >
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1> <h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1>
<span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span> <span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span>
<p style={{ fontSize: fontSize.desktop.p }}>{description}</p> <p style={{ fontSize: fontSize.desktop.p }}>{description}</p>
</section> </section>
) : null} ) : null}
</> </>
); );
} }

@ -1,456 +1,456 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import proxy from "~/Redux/proxy"; import proxy from "~/Redux/proxy";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "~/Redux/actions"; import { book } from "~/Redux/actions";
import { userProduct } from "~/Redux/actions"; import { userProduct } from "~/Redux/actions";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Comment from "./Comment/index"; import Comment from "./Comment/index";
import Breadcrumbs from "./BreadCrumb/index"; import Breadcrumbs from "./BreadCrumb/index";
import Gallery from "./Gallery/index"; import Gallery from "./Gallery/index";
import Info from "./Info/index"; import Info from "./Info/index";
import AddToCart from "./AddToCart/index"; import AddToCart from "./AddToCart/index";
import HomeScroll from "../Home/HomeScroll/index"; import HomeScroll from "../Home/HomeScroll/index";
import HomeSlider from "../Home/HomeSlider/index"; import HomeSlider from "../Home/HomeSlider/index";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import MaterialModal from "./MaterialModal/index"; import MaterialModal from "./MaterialModal/index";
import product_shipping from "~/assets/icons/product-shipping.png"; import product_shipping from "~/assets/icons/product-shipping.png";
import product_cash_back from "~/assets/icons/product-cash-back.png"; import product_cash_back from "~/assets/icons/product-cash-back.png";
import product_support from "~/assets/icons/product-support.png"; import product_support from "~/assets/icons/product-support.png";
import send_comment from "~/assets/icons/send-comment.png"; import send_comment from "~/assets/icons/send-comment.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
}, },
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18, h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24, h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26, h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26, a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30, p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29, li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29,
}, },
}; };
function Addbutton({ page, info, pushToCart, userId }) { function Addbutton({ page, info, pushToCart, userId }) {
let history = useHistory(); let history = useHistory();
function Navigate({ path }) { function Navigate({ path }) {
history.push(path); history.push(path);
} }
let productId = localStorage.getItem("pushToCart"); let productId = localStorage.getItem("pushToCart");
if (productId) { if (productId) {
toast.info(window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید")); toast.info(window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید"));
localStorage.removeItem("pushToCart"); localStorage.removeItem("pushToCart");
pushToCart({ pushToCart({
productId, productId,
userId, userId,
count: 1, count: 1,
}); });
setTimeout(() => history.push("/cart"), 2000); setTimeout(() => history.push("/cart"), 2000);
} }
return ( return (
<button <button
onClick={() => { onClick={() => {
if (proxy.status()) if (proxy.status())
pushToCart({ pushToCart({
productId: productId:
page === "digital" ? info.product[0].id : info.product[0].id, page === "digital" ? info.product[0].id : info.product[0].id,
userId, userId,
count: 1, count: 1,
}); });
else { else {
toast.info(window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید")); toast.info(window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید"));
localStorage.setItem("afterLogin", window.location.pathname); localStorage.setItem("afterLogin", window.location.pathname);
localStorage.setItem( localStorage.setItem(
"pushToCart", "pushToCart",
page === "digital" ? info.product[0].id : info.product[0].id page === "digital" ? info.product[0].id : info.product[0].id
); );
Navigate({ path: "/auth" }); Navigate({ path: "/auth" });
} }
}} }}
className="mobile-product__header--sampleButton" className="mobile-product__header--sampleButton"
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
> >
{window.t("افزودن به سبد خرید")}{" "} {window.t("افزودن به سبد خرید")}{" "}
</button> </button>
); );
} }
class Product extends Component { class Product extends Component {
state = { state = {
openComment: false, openComment: false,
}; };
handleOpenComment = () => [ handleOpenComment = () => [
this.setState({ this.setState({
openComment: !this.state.openComment, openComment: !this.state.openComment,
}), }),
]; ];
componentDidMount() { componentDidMount() {
window.scrollTo(0, 0); window.scrollTo(0, 0);
this.props.getInfo({ this.props.getInfo({
id: window.location.pathname.slice( id: window.location.pathname.slice(
window.location.pathname.lastIndexOf("/") + 1, window.location.pathname.lastIndexOf("/") + 1,
window.location.pathname.length window.location.pathname.length
), ),
}); });
this.props.getList(); this.props.getList();
} }
componentDidUpdate() { componentDidUpdate() {
if (!this.props.loading && !this.props.list.length) { if (!this.props.loading && !this.props.list.length) {
this.props.getInfo({ this.props.getInfo({
id: window.location.pathname.slice( id: window.location.pathname.slice(
window.location.pathname.lastIndexOf("/") + 1, window.location.pathname.lastIndexOf("/") + 1,
window.location.pathname.length window.location.pathname.length
), ),
}); });
this.props.getList(); this.props.getList();
} }
} }
render() { render() {
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
const { info, page } = this.props; const { info, page } = this.props;
const supportItems = [ const supportItems = [
{ title: window.t("ارسال سریع"), icon: product_shipping }, { title: window.t("ارسال سریع"), icon: product_shipping },
{ title: window.t("پشتیبانی 24 ساعته"), icon: product_support }, { title: window.t("پشتیبانی 24 ساعته"), icon: product_support },
{ title: window.t("ضمانت بازگشت"), icon: product_cash_back }, { title: window.t("ضمانت بازگشت"), icon: product_cash_back },
]; ];
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
info ? ( info ? (
<> <>
<div <div
className={`product d-flex flex-column ${ className={`product d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
> >
<Navbar /> <Navbar />
<Breadcrumbs <Breadcrumbs
page={page} page={page}
name={ name={
page === "digital" page === "digital"
? info.product[0].name ? info.product[0].name
: info.product[0].name : info.product[0].name
} }
/> />
<header <header
className={`product__header d-flex mt-4 ${ className={`product__header d-flex mt-4 ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<Gallery gallery={info.files} /> <Gallery gallery={info.files} />
<Info <Info
subTitle={`${window.t("پایه")} ${grades[info.gradeId]}`} subTitle={`${window.t("پایه")} ${grades[info.gradeId]}`}
title={`${info.name} ${grades[info.gradeId]}`} title={`${info.name} ${grades[info.gradeId]}`}
description={ description={
info.description || window.t("توضیحات محصول خالیست") info.description || window.t("توضیحات محصول خالیست")
} }
/> />
<AddToCart <AddToCart
info={info} info={info}
sampleFileId={info.sampleFileId} sampleFileId={info.sampleFileId}
supportItems={supportItems} supportItems={supportItems}
price={ price={
page === "digital" page === "digital"
? info.product[0].price ? info.product[0].price
: info.product[0].price : info.product[0].price
} }
// off={product.off} // off={product.off}
page={page} page={page}
productType={page === "digital" ? 0 : 1} productType={page === "digital" ? 0 : 1}
/> />
</header> </header>
<div className="product__comments d-flex flex-column"> <div className="product__comments d-flex flex-column">
<div <div
className={`d-flex justify-content-between ${ className={`d-flex justify-content-between ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<h3 style={{ fontSize: fontSize.desktop.h1 }}> <h3 style={{ fontSize: fontSize.desktop.h1 }}>
{window.t("نظرات خریداران")} {window.t("نظرات خریداران")}
</h3> </h3>
<button onClick={() => this.handleOpenComment()}> <button onClick={() => this.handleOpenComment()}>
{window.t("ارسال نظر")} {window.t("ارسال نظر")}
<img src={send_comment} alt={window.t("ارسال نظر")} /> <img src={send_comment} alt={window.t("ارسال نظر")} />
</button> </button>
</div> </div>
<div className="product__comments--list d-flex flex-column"> <div className="product__comments--list d-flex flex-column">
{info.comment.length > 0 ? ( {info.comment.length > 0 ? (
info.comment.map((item, i) => ( info.comment.map((item, i) => (
<Comment comment={item} key={i} /> <Comment comment={item} key={i} />
)) ))
) : ( ) : (
<div className="nocomments"> <div className="nocomments">
{window.t( {window.t(
"از اینکه با نظرات خود ما را در ارتقای کیفیت محصولاتمان" "از اینکه با نظرات خود ما را در ارتقای کیفیت محصولاتمان"
)} )}
{window.t("یاری کنید ، سپاسگزاریم")} {window.t("یاری کنید ، سپاسگزاریم")}
</div> </div>
)} )}
</div> </div>
</div> </div>
{0 ? <Identifier item={[]} /> : null} {0 ? <Identifier item={[]} /> : null}
</div> </div>
<Footer /> <Footer />
<MaterialModal <MaterialModal
openComment={this.state.openComment} openComment={this.state.openComment}
handleOpenComment={this.handleOpenComment} handleOpenComment={this.handleOpenComment}
/> />
</> </>
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Loader /> <Loader />
</div> </div>
) )
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
info ? ( info ? (
<> <>
<div className="mobile-product d-flex flex-column"> <div className="mobile-product d-flex flex-column">
<Navbar /> <Navbar />
<header <header
className={ className={
"mobile-product__header d-flex flex-column align-items-center" "mobile-product__header d-flex flex-column align-items-center"
} }
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${info.fileIds}`} src={`https://dnvn.ir/api/v1/file/${info.fileIds}`}
alt={info.name} alt={info.name}
/> />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{`${ <h1 style={{ fontSize: fontSize.mobile.h1 }}>{`${
info.name info.name
} ${window.t("پایه")} ${grades[info.gradeId]}`}</h1> } ${window.t("پایه")} ${grades[info.gradeId]}`}</h1>
<h2 style={{ fontSize: fontSize.mobile.h2 }}> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
{page !== "digital" {page !== "digital"
? window.t("نسخه چاپی") ? window.t("نسخه چاپی")
: window.t("نسخه الکترونیک")} : window.t("نسخه الکترونیک")}
</h2> </h2>
<h3 style={{ fontSize: fontSize.mobile.h1 }}> <h3 style={{ fontSize: fontSize.mobile.h1 }}>
{page === "digital" {page === "digital"
? info.product[0].price ? info.product[0].price
: window.tr(info.product[0].price)}{" "} : window.tr(info.product[0].price)}{" "}
{window.t("تومان")} {window.t("تومان")}
</h3> </h3>
<div className="d-flex flex-column mt-3"> <div className="d-flex flex-column mt-3">
<div <div
className={`d-flex ${ className={`d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<Link <Link
// to={`/products/${ // to={`/products/${
// page === "digital" // page === "digital"
// ? `physical/${window.location.pathname.slice( // ? `physical/${window.location.pathname.slice(
// window.location.pathname.lastIndexOf("/") + 1, // window.location.pathname.lastIndexOf("/") + 1,
// window.location.pathname.length // window.location.pathname.length
// )}` // )}`
// : `digital/${window.location.pathname.slice( // : `digital/${window.location.pathname.slice(
// window.location.pathname.lastIndexOf("/") + 1, // window.location.pathname.lastIndexOf("/") + 1,
// window.location.pathname.length // window.location.pathname.length
// )}` // )}`
// }`} // }`}
className="mobile-product__header--digitalButton" className="mobile-product__header--digitalButton"
style={{ fontSize: fontSize.mobile.a, opacity: 0.3 }} style={{ fontSize: fontSize.mobile.a, opacity: 0.3 }}
> >
{page === "digital" {page === "digital"
? window.t("نسخه چاپی") ? window.t("نسخه چاپی")
: window.t("نسخه الکترونیک")} : window.t("نسخه الکترونیک")}
</Link> </Link>
<Link <Link
to={ to={
info.sampleFileId ? `/pdf/${info.sampleFileId}` : "#" info.sampleFileId ? `/pdf/${info.sampleFileId}` : "#"
} }
onClick={() => onClick={() =>
!info.sampleFileId !info.sampleFileId
? toast.info( ? toast.info(
window.t("برای این کتاب نمونهای درج نشده است.") window.t("برای این کتاب نمونهای درج نشده است.")
) )
: null : null
} }
className="mobile-product__header--purchase" className="mobile-product__header--purchase"
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
> >
{window.t("مطالعه نمونه کتاب")}{" "} {window.t("مطالعه نمونه کتاب")}{" "}
</Link> </Link>
</div> </div>
<Addbutton <Addbutton
page={page} page={page}
info={info} info={info}
userId={this.props.id} userId={this.props.id}
pushToCart={this.props.pushToCart} pushToCart={this.props.pushToCart}
/> />
</div> </div>
</header> </header>
<div className="mobile-product__abstraction d-flex flex-column"> <div className="mobile-product__abstraction d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}> <h3 style={{ fontSize: fontSize.mobile.h3 }}>
{window.t("معرفی کتاب")} {window.t("معرفی کتاب")}
</h3> </h3>
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{info.description || window.t("توضیحات محصول خالیست")} {info.description || window.t("توضیحات محصول خالیست")}
</p> </p>
</div> </div>
<div className="mobile-product__modules d-flex flex-column"> <div className="mobile-product__modules d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}> <h3 style={{ fontSize: fontSize.mobile.h3 }}>
{window.t("این کتاب شامل چه مواردی است؟")} {window.t("این کتاب شامل چه مواردی است؟")}
</h3> </h3>
<ul> <ul>
{/* {product.modules.map((item, i) => ( {/* {product.modules.map((item, i) => (
<React.Fragment key={i}> <React.Fragment key={i}>
<Item item={item} /> <Item item={item} />
</React.Fragment> </React.Fragment>
))} */} ))} */}
</ul> </ul>
</div> </div>
<div className="mobile-product__description d-flex"> <div className="mobile-product__description d-flex">
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{info.description} {info.description}
</p> </p>
</div> </div>
<div className="mobile-product__comments d-flex flex-column"> <div className="mobile-product__comments d-flex flex-column">
<div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex justify-content-between align-items-center mb-3">
<h3 style={{ fontSize: fontSize.mobile.h3 }}> <h3 style={{ fontSize: fontSize.mobile.h3 }}>
{window.t("نظرات خریداران")} {window.t("نظرات خریداران")}
</h3> </h3>
<button onClick={() => this.handleOpenComment()}> <button onClick={() => this.handleOpenComment()}>
{window.t("ارسال نظر")} {window.t("ارسال نظر")}
<img src={send_comment} alt={window.t("ارسال نظر")} /> <img src={send_comment} alt={window.t("ارسال نظر")} />
</button> </button>
</div> </div>
<div className="mobile-product__comments--list d-flex"> <div className="mobile-product__comments--list d-flex">
{info.comment.length > 0 ? ( {info.comment.length > 0 ? (
info.comment.map((item, i) => ( info.comment.map((item, i) => (
<Comment comment={item} key={i} /> <Comment comment={item} key={i} />
)) ))
) : ( ) : (
<div className="nocomments"> <div className="nocomments">
{window.t( {window.t(
"از اینکه با نظرات خود ما را در ارتقای کیفیت محصولاتمان" "از اینکه با نظرات خود ما را در ارتقای کیفیت محصولاتمان"
)} )}
{window.t("یاری کنید ، سپاسگزاریم")} {window.t("یاری کنید ، سپاسگزاریم")}
</div> </div>
)} )}
</div> </div>
</div> </div>
</div> </div>
<div <div
className="d-flex" className="d-flex"
style={{ style={{
// position: "fixed", // position: "fixed",
// bottom: 1, // bottom: 1,
width: "100%", width: "100%",
height: "40px", height: "40px",
left: "0px", left: "0px",
}} }}
> >
<Link <Link
to={"/cart"} to={"/cart"}
style={{ style={{
position: "fixed", position: "fixed",
bottom: "0", bottom: "0",
width: "calc(100% - 10px)", width: "calc(100% - 10px)",
color: "white", color: "white",
backgroundColor: "#00cc69", backgroundColor: "#00cc69",
cursor: "pointer", cursor: "pointer",
borderRadius: 8, borderRadius: 8,
textDecoration: "none", textDecoration: "none",
padding: "5px 10px", padding: "5px 10px",
margin: "5px 5px 5px", margin: "5px 5px 5px",
textAlign: "center", textAlign: "center",
}} }}
> >
{window.t("سبد خرید")}{" "} {window.t("سبد خرید")}{" "}
</Link> </Link>
</div> </div>
<MaterialModal <MaterialModal
openComment={this.state.openComment} openComment={this.state.openComment}
handleOpenComment={this.handleOpenComment} handleOpenComment={this.handleOpenComment}
/> />
</> </>
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Loader /> <Loader />
</div> </div>
) )
) : null} ) : null}
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
info: state.book.info, info: state.book.info,
// status: state.user.status, // status: state.user.status,
loading: state.book.loading, loading: state.book.loading,
list: state.book.list, list: state.book.list,
id: state.user.status.id, id: state.user.status.id,
lang: state.publicApi.lang, lang: state.publicApi.lang,
}), }),
{ getInfo: book.info, getList: book.list, pushToCart: userProduct.add } { getInfo: book.info, getList: book.list, pushToCart: userProduct.add }
)(Product); )(Product);
Product.defaultProps = {}; Product.defaultProps = {};
const Identifier = (props) => { const Identifier = (props) => {
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<HomeScroll <HomeScroll
number={2.5} number={2.5}
// height={props.item.height} // height={props.item.height}
title={"محصولات مشابه"} title={"محصولات مشابه"}
data={props.item} data={props.item}
designType={"product"} designType={"product"}
moreText={"ّبیشتر"} moreText={"ّبیشتر"}
/> />
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<HomeSlider <HomeSlider
designType={"simple"} designType={"simple"}
number={"4"} number={"4"}
// height={props.item.height} // height={props.item.height}
title={"محصولات مشابه"} title={"محصولات مشابه"}
data={props.item} data={props.item}
/> />
) : null} ) : null}
</> </>
); );
}; };

@ -1,118 +1,118 @@
import React from "react"; import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox"; import Checkbox from "@material-ui/core/Checkbox";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank"; import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
import CheckBoxIcon from "@material-ui/icons/CheckBox"; import CheckBoxIcon from "@material-ui/icons/CheckBox";
import "./index.scss"; import "./index.scss";
export default class TypicalFilters extends React.Component { export default class TypicalFilters extends React.Component {
onChange = (name, data) => { onChange = (name, data) => {
if (name === "subject") { if (name === "subject") {
this.props.parent.setState((prevState) => ({ this.props.parent.setState((prevState) => ({
selectedFilters: { selectedFilters: {
...prevState.selectedFilters, ...prevState.selectedFilters,
subject: subject:
prevState.selectedFilters.subject.indexOf(data) !== -1 prevState.selectedFilters.subject.indexOf(data) !== -1
? prevState.selectedFilters.subject.filter( ? prevState.selectedFilters.subject.filter(
(item) => item !== data (item) => item !== data
) )
: [...new Set([...prevState.selectedFilters.subject, data])], : [...new Set([...prevState.selectedFilters.subject, data])],
}, },
})); }));
} else if (name === "level") { } else if (name === "level") {
this.props.parent.setState((prevState) => ({ this.props.parent.setState((prevState) => ({
selectedFilters: { selectedFilters: {
...prevState.selectedFilters, ...prevState.selectedFilters,
level: level:
prevState.selectedFilters.level.indexOf(data) !== -1 prevState.selectedFilters.level.indexOf(data) !== -1
? prevState.selectedFilters.level.filter((item) => item !== data) ? prevState.selectedFilters.level.filter((item) => item !== data)
: [...new Set([...prevState.selectedFilters.level, data])], : [...new Set([...prevState.selectedFilters.level, data])],
}, },
})); }));
} }
}; };
render() { render() {
const { data, title, theme } = this.props; const { data, title, theme } = this.props;
return ( return (
<div <div
className={`products-filters-typical d-flex flex-column ${ className={`products-filters-typical d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
style={{ style={{
width: "100%", width: "100%",
}} }}
> >
<header <header
className={`products-filters-typical__header d-flex align-items-center ${ className={`products-filters-typical__header d-flex align-items-center ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<span <span
style={{ style={{
background: theme, background: theme,
marginLeft: window.lang === "en" ? "" : 5, marginLeft: window.lang === "en" ? "" : 5,
marginRight: window.lang === "en" ? 5 : "", marginRight: window.lang === "en" ? 5 : "",
}} }}
></span> ></span>
<h2 style={{ fontSize: 15 }}>{title}</h2> <h2 style={{ fontSize: 15 }}>{title}</h2>
</header> </header>
<div <div
className={`products-filters-typical__items d-flex flex-column ${ className={`products-filters-typical__items d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
style={{ style={{
width: window.lang === "en" ? "90%" : "auto", width: window.lang === "en" ? "90%" : "auto",
}} }}
> >
{data.map((item, i) => ( {data.map((item, i) => (
<Item data={item} key={i} parent={this} /> <Item data={item} key={i} parent={this} />
))} ))}
</div> </div>
</div> </div>
); );
} }
} }
const Item = (props) => { const Item = (props) => {
const { data, parent } = props; const { data, parent } = props;
const checkHandler = (data, name) => { const checkHandler = (data, name) => {
var available; var available;
if (name === "subject") { if (name === "subject") {
available = available =
props.parent.props.parent.state.selectedFilters.subject.indexOf( props.parent.props.parent.state.selectedFilters.subject.indexOf(
data data
) !== -1 ) !== -1
? true ? true
: false; : false;
} else if (name === "level") { } else if (name === "level") {
available = available =
props.parent.props.parent.state.selectedFilters.level.indexOf(data) !== props.parent.props.parent.state.selectedFilters.level.indexOf(data) !==
-1 -1
? true ? true
: false; : false;
} }
return available; return available;
}; };
return ( return (
<div <div
className={`d-flex align-items-center mt-2 ${ className={`d-flex align-items-center mt-2 ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
icon={<CheckBoxOutlineBlankIcon style={{ color: "#EAEAEA" }} />} icon={<CheckBoxOutlineBlankIcon style={{ color: "#EAEAEA" }} />}
checkedIcon={<CheckBoxIcon style={{ color: "#00CC69" }} />} checkedIcon={<CheckBoxIcon style={{ color: "#00CC69" }} />}
name="checkedH" name="checkedH"
/> />
} }
checked={checkHandler(data, parent.props.name)} checked={checkHandler(data, parent.props.name)}
onChange={() => parent.onChange(parent.props.name, data)} onChange={() => parent.onChange(parent.props.name, data)}
/> />
<strong style={{ fontSize: 15, margin: "0px 10px" }}>{data}</strong> <strong style={{ fontSize: 15, margin: "0px 10px" }}>{data}</strong>
</div> </div>
); );
}; };

@ -1,89 +1,89 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "~/Redux/actions"; import { book } from "~/Redux/actions";
import Product from "../Product/index"; import Product from "../Product/index";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import "./index.scss"; import "./index.scss";
class List extends React.Component { class List extends React.Component {
componentDidMount() { componentDidMount() {
if (this.props.list?.length === 0) this.props.getList(); if (this.props.list?.length === 0) this.props.getList();
} }
componentDidUpdate() { componentDidUpdate() {
if (this.props.list?.length === 0 && !this.props.loading) if (this.props.list?.length === 0 && !this.props.loading)
this.props.getList(); this.props.getList();
} }
render() { render() {
let { filterResult, loading } = this.props; let { filterResult, loading } = this.props;
return window.innerWidth > 1000 ? ( return window.innerWidth > 1000 ? (
<div <div
className={`products-list d-flex flex-wrap ${ className={`products-list d-flex flex-wrap ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
{!loading ? ( {!loading ? (
filterResult?.length > 0 ? ( filterResult?.length > 0 ? (
(Array.isArray(filterResult) ? filterResult : []).map((item, i) => ( (Array.isArray(filterResult) ? filterResult : []).map((item, i) => (
<Product product={item} key={i} /> <Product product={item} key={i} />
)) ))
) : ( ) : (
<div>{window.t("محصولی با این مشخصات یافت نشد")}</div> <div>{window.t("محصولی با این مشخصات یافت نشد")}</div>
// (Array.isArray(list) ? list : []).map((item, i) => ( // (Array.isArray(list) ? list : []).map((item, i) => (
// <Product product={item} key={i} /> // <Product product={item} key={i} />
// )) // ))
) )
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Loader /> <Loader />
</div> </div>
)} )}
</div> </div>
) : ( ) : (
<> <>
<div <div
className="mobile-products-list d-flex flex-wrap" className="mobile-products-list d-flex flex-wrap"
style={{ marginBottom: 40 }} style={{ marginBottom: 40 }}
> >
{!loading ? ( {!loading ? (
filterResult.length > 0 ? ( filterResult.length > 0 ? (
filterResult.map((item, i) => <Product product={item} key={i} />) filterResult.map((item, i) => <Product product={item} key={i} />)
) : ( ) : (
//list.map((item, i) => <Product product={item} key={i} />) //list.map((item, i) => <Product product={item} key={i} />)
<div <div
align="center" align="center"
style={{ margin: "20px auto", color: "gray" }} style={{ margin: "20px auto", color: "gray" }}
> >
{window.t("محصولی با این مشخصات یافت نشد")}{" "} {window.t("محصولی با این مشخصات یافت نشد")}{" "}
</div> </div>
) )
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Loader /> <Loader />
</div> </div>
)} )}
</div> </div>
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
list: state.book.list, list: state.book.list,
searchResult: state.book.searchResult, searchResult: state.book.searchResult,
loading: state.book.loading, loading: state.book.loading,
filterResult: state.book.filterResult, filterResult: state.book.filterResult,
}), }),
{ getList: book.list } { getList: book.list }
)(List); )(List);

@ -1,208 +1,208 @@
/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react"; import React from "react";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import proxy from "~/Redux/proxy"; import proxy from "~/Redux/proxy";
// import basket from "../../../assets/icons/basket.png"; // import basket from "../../../assets/icons/basket.png";
import basket2 from "../../../assets/icons/basket2.png"; import basket2 from "../../../assets/icons/basket2.png";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userProduct } from "~/Redux/actions"; import { userProduct } from "~/Redux/actions";
import "./index.scss"; import "./index.scss";
function Product(props) { function Product(props) {
let history = useHistory(); let history = useHistory();
function Navigate({ path }) { function Navigate({ path }) {
history.push(path); history.push(path);
} }
const { product } = props; const { product } = props;
let productId = localStorage.getItem("pushToCart"); let productId = localStorage.getItem("pushToCart");
if (productId) { if (productId) {
localStorage.removeItem("pushToCart"); localStorage.removeItem("pushToCart");
props.pushToCart({ props.pushToCart({
productId, productId,
userId: props.id, userId: props.id,
count: 1, count: 1,
}); });
setTimeout(() => history.push("/cart"), 2000); setTimeout(() => history.push("/cart"), 2000);
} }
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-products-product d-flex flex-column "> <div className="mobile-products-product d-flex flex-column ">
<Link <Link
to={`/products/physical/${product.id}`} to={`/products/physical/${product.id}`}
className=" align-items-center d-flex flex-column " className=" align-items-center d-flex flex-column "
style={{ textDecoration: "none" }} style={{ textDecoration: "none" }}
> >
<img <img
className="pimg" className="pimg"
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`} src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
alt={window.t("عکس مجصول")} alt={window.t("عکس مجصول")}
/> />
<div className="mobile-products-product__info d-flex flex-column"> <div className="mobile-products-product__info d-flex flex-column">
<h1>{`${product.name} ${window.t("پایه")} ${ <h1>{`${product.name} ${window.t("پایه")} ${
grades[product.gradeId] grades[product.gradeId]
}`}</h1> }`}</h1>
</div> </div>
</Link> </Link>
<div className="mobile-products-product__links d-flex flex-column"> <div className="mobile-products-product__links d-flex flex-column">
<div className="d-flex" style={{ width: "100%" }}> <div className="d-flex" style={{ width: "100%" }}>
<Link <Link
to={`/products/physical/${product.id}`} to={`/products/physical/${product.id}`}
className="mobile-products-product__links--physical d-flex justify-content-between align-items-center" className="mobile-products-product__links--physical d-flex justify-content-between align-items-center"
> >
<h2> {window.t("نسخه چاپی")}</h2> <h2> {window.t("نسخه چاپی")}</h2>
<span> <span>
{window.tr(product.product[0].price)} {window.t("تومان")} {window.tr(product.product[0].price)} {window.t("تومان")}
</span> </span>
</Link> </Link>
<div <div
className="mobile-products-product__links--basket d-flex" className="mobile-products-product__links--basket d-flex"
style={{ backgroundColor: "#7fc75d" }} style={{ backgroundColor: "#7fc75d" }}
onClick={() => { onClick={() => {
if (proxy.status()) if (proxy.status())
props.pushToCart({ props.pushToCart({
productId: product.product[0].id, productId: product.product[0].id,
userId: props.id, userId: props.id,
count: 1, count: 1,
}); });
else { else {
localStorage.setItem( localStorage.setItem(
"afterLogin", "afterLogin",
window.location.pathname window.location.pathname
); );
localStorage.setItem("pushToCart", product.product[0].id); localStorage.setItem("pushToCart", product.product[0].id);
Navigate({ path: "/auth" }); Navigate({ path: "/auth" });
} }
}} }}
> >
<img src={basket2} alt="" width="20px" height="20px" /> <img src={basket2} alt="" width="20px" height="20px" />
</div> </div>
</div> </div>
{/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}> {/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}>
<span <span
to={`/products/digital/${product.id}`} to={`/products/digital/${product.id}`}
className="mobile-products-product__links--ar d-flex justify-content-between align-items-center" className="mobile-products-product__links--ar d-flex justify-content-between align-items-center"
> >
<h2> الکترونیکی")}</h2> <h2> الکترونیکی")}</h2>
{/* <span>{product.product[0].price} تومان")}</span> {/* <span>{product.product[0].price} تومان")}</span>
<span> به زودی")}</span> <span> به زودی")}</span>
</span> </span>
<div <div
className="mobile-products-product__links--basket d-flex" className="mobile-products-product__links--basket d-flex"
// onClick={() => { // onClick={() => {
// proxy.status() // proxy.status()
// ? this.props.pushToCart({ // ? this.props.pushToCart({
// productId: product.product[0].id, // productId: product.product[0].id,
// userId: this.props.id, // userId: this.props.id,
// count: 1, // count: 1,
// }) // })
// : toast.info("ابتدا وارد حساب کاربری خود شوید."); // : toast.info("ابتدا وارد حساب کاربری خود شوید.");
// }} // }}
> >
<img src={basket} alt="" width="20px" height="20px" /> <img src={basket} alt="" width="20px" height="20px" />
</div> </div>
</div> */} </div> */}
</div> </div>
</div> </div>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items-center"> <article className="products-product d-flex flex-column align-items-center">
<Link <Link
to={`/products/physical/${product.id}`} to={`/products/physical/${product.id}`}
style={{ textDecoration: "none" }} style={{ textDecoration: "none" }}
> >
<img <img
className="pimg" className="pimg"
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`} src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
alt={product.name} alt={product.name}
/> />
<h1 style={{ fontSize: 15 }}> <h1 style={{ fontSize: 15 }}>
{`${product.name} ${window.t("پایه")} ${grades[product.gradeId]}`} {`${product.name} ${window.t("پایه")} ${grades[product.gradeId]}`}
</h1> </h1>
</Link> </Link>
<div className="d-flex" style={{ width: "100%" }}> <div className="d-flex" style={{ width: "100%" }}>
<Link <Link
to={`/products/physical/${product.id}`} to={`/products/physical/${product.id}`}
style={{ fontSize: 12 }} style={{ fontSize: 12 }}
className="products-product--physical d-flex justify-content-between align-items-center" className="products-product--physical d-flex justify-content-between align-items-center"
> >
<h2 style={{ fontSize: 12 }}>{window.t("نسخه چاپی")}</h2> <h2 style={{ fontSize: 12 }}>{window.t("نسخه چاپی")}</h2>
<span style={{ fontSize: 12 }}> <span style={{ fontSize: 12 }}>
{window.tr(product.product[0].price)} {window.t("تومان")} {window.tr(product.product[0].price)} {window.t("تومان")}
</span> </span>
</Link> </Link>
<div <div
className="products-product--basket d-flex" className="products-product--basket d-flex"
style={{ backgroundColor: "#7fc75d", marginTop: 0 }} style={{ backgroundColor: "#7fc75d", marginTop: 0 }}
onClick={() => { onClick={() => {
if (proxy.status()) if (proxy.status())
props.pushToCart({ props.pushToCart({
productId: product.product[0].id, productId: product.product[0].id,
userId: props.id, userId: props.id,
count: 1, count: 1,
}); });
else { else {
toast.info( toast.info(
window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید") window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید")
); );
localStorage.setItem("afterLogin", window.location.pathname); localStorage.setItem("afterLogin", window.location.pathname);
localStorage.setItem("pushToCart", product.product[0].id); localStorage.setItem("pushToCart", product.product[0].id);
Navigate({ path: "/auth" }); Navigate({ path: "/auth" });
} }
}} }}
> >
<img src={basket2} alt="" width="20px" height="20px" /> <img src={basket2} alt="" width="20px" height="20px" />
</div> </div>
</div> </div>
{/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}> {/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}>
<div <div
to={`/products/digital/${product.id}`} to={`/products/digital/${product.id}`}
className="products-product--ar d-flex justify-content-between align-items-center" className="products-product--ar d-flex justify-content-between align-items-center"
> >
<span style={{ fontSize: 12 }}> <span style={{ fontSize: 12 }}>
{/* {product.product[0].price} تومان {/* {product.product[0].price} تومان
به زودی")} </span> به زودی")} </span>
</div> </div>
<div <div
className="products-product--basket d-flex" className="products-product--basket d-flex"
// onClick={() => { // onClick={() => {
// proxy.status() // proxy.status()
// ? this.props.pushToCart({ // ? this.props.pushToCart({
// productId: product.product[0].id, // productId: product.product[0].id,
// userId: this.props.id, // userId: this.props.id,
// count: 1, // count: 1,
// }) // })
// : toast.info("ابتدا وارد حساب کاربری خود شوید."); // : toast.info("ابتدا وارد حساب کاربری خود شوید.");
// }} // }}
> >
<img src={basket} alt="" width="20px" height="20px" /> <img src={basket} alt="" width="20px" height="20px" />
</div> </div>
</div> */} </div> */}
</article> </article>
) : null} ) : null}
</> </>
); );
} }
export default connect((state) => ({}), { export default connect((state) => ({}), {
pushToCart: userProduct.add, pushToCart: userProduct.add,
})(Product); })(Product);

@ -1,90 +1,90 @@
import React from "react"; import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles"; import { makeStyles, withStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@material-ui/core/FormControl";
import NativeSelect from "@material-ui/core/NativeSelect"; import NativeSelect from "@material-ui/core/NativeSelect";
import InputBase from "@material-ui/core/InputBase"; import InputBase from "@material-ui/core/InputBase";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
const BootstrapInput = withStyles((theme) => ({ const BootstrapInput = withStyles((theme) => ({
root: { root: {
"label + &": { "label + &": {
marginTop: theme.spacing(3), marginTop: theme.spacing(3),
}, },
}, },
input: { input: {
borderRadius: 4, borderRadius: 4,
position: "relative", position: "relative",
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
border: "1px solid #a5a5a5", border: "1px solid #a5a5a5",
fontSize: 15, fontSize: 15,
color: "#a5a5a5", color: "#a5a5a5",
// maxWidth : 70, // maxWidth : 70,
minWidth: window.innerWidth > 420 ? 90 : 80, minWidth: window.innerWidth > 420 ? 90 : 80,
height: "35px", height: "35px",
padding: "5px", padding: "5px",
transition: theme.transitions.create(["border-color", "box-shadow"]), transition: theme.transitions.create(["border-color", "box-shadow"]),
// Use the system font instead of the default Roboto font. // Use the system font instead of the default Roboto font.
fontFamily: "numeralLight", fontFamily: "numeralLight",
"&:focus": { "&:focus": {
borderRadius: 4, borderRadius: 4,
}, },
}, },
}))(InputBase); }))(InputBase);
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
marginLeft: { marginLeft: {
// margin: theme.spacing(1), // margin: theme.spacing(1),
marginLeft: 8, marginLeft: 8,
}, },
})); }));
export default function CustomizedSelects(props) { export default function CustomizedSelects(props) {
const classes = useStyles(); const classes = useStyles();
return ( return (
<div style={{ position: "relative" }}> <div style={{ position: "relative" }}>
<FormControl className={classes.marginLeft}> <FormControl className={classes.marginLeft}>
<NativeSelect <NativeSelect
id="demo-customized-select-native" id="demo-customized-select-native"
value={props.parent.state[props.name]} value={props.parent.state[props.name]}
onChange={(e) => onChange={(e) =>
e.target.value !== window.t("نام کتاب") && e.target.value !== window.t("نام کتاب") &&
e.target.value !== window.t("مرتب سازی") && e.target.value !== window.t("مرتب سازی") &&
e.target.value !== window.t("پایه تحصیلی") e.target.value !== window.t("پایه تحصیلی")
? props.parent.setState({ ? props.parent.setState({
selectedFilters: { selectedFilters: {
...props.parent.state.selectedFilters, ...props.parent.state.selectedFilters,
[props.name]: [props.name]:
props.name === "sort" props.name === "sort"
? e.target.value ? e.target.value
: new Array(e.target.value), : new Array(e.target.value),
}, },
}) })
: props.parent.setState({ : props.parent.setState({
selectedFilters: { selectedFilters: {
...props.parent.state.selectedFilters, ...props.parent.state.selectedFilters,
[props.name]: props.name === "sort" ? null : [], [props.name]: props.name === "sort" ? null : [],
}, },
}) })
} }
input={<BootstrapInput />} input={<BootstrapInput />}
> >
{props.options.map((item, i) => ( {props.options.map((item, i) => (
<option key={i} value={item}> <option key={i} value={item}>
{item} {item}
</option> </option>
))} ))}
</NativeSelect> </NativeSelect>
</FormControl> </FormControl>
<KeyboardArrowDownIcon <KeyboardArrowDownIcon
style={{ style={{
position: "absolute", position: "absolute",
left: 5, left: 5,
top: 6, top: 6,
fontSize: 25, fontSize: 25,
color: "#a5a5a5", color: "#a5a5a5",
}} }}
/> />
</div> </div>
); );
} }

@ -1,71 +1,71 @@
import React from "react"; import React from "react";
import SortIcon from "@material-ui/icons/Sort"; import SortIcon from "@material-ui/icons/Sort";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
}; };
export default class Sort extends React.Component { export default class Sort extends React.Component {
render() { render() {
const { parent, selectedSort } = this.props; const { parent, selectedSort } = this.props;
const sortItems = [window.t("پرفروش ترین"), window.t("جدیدترین")]; const sortItems = [window.t("پرفروش ترین"), window.t("جدیدترین")];
return ( return (
<div <div
className={`products-sort d-flex align-items-center ${ className={`products-sort d-flex align-items-center ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
style={{ style={{
width: window.lang === "en" ? "100%" : "", width: window.lang === "en" ? "100%" : "",
}} }}
> >
<SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} /> <SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} />
<span style={{ fontSize: fontSize.span }}> <span style={{ fontSize: fontSize.span }}>
{window.t("مرتب سازی بر اساس")} {window.t("مرتب سازی بر اساس")}
</span> </span>
<ul <ul
className={`d-flex align-items-center mr-2 ${ className={`d-flex align-items-center mr-2 ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
{sortItems.map((item, i) => ( {sortItems.map((item, i) => (
<Item <Item
data={item} data={item}
key={i} key={i}
parent={parent} parent={parent}
selectedSort={selectedSort} selectedSort={selectedSort}
/> />
))} ))}
</ul> </ul>
</div> </div>
); );
} }
} }
const Item = (props) => { const Item = (props) => {
return ( return (
<li <li
style={{ style={{
fontSize: fontSize.li, fontSize: fontSize.li,
backgroundColor: backgroundColor:
props.selectedSort === props.data ? "#4CE1BE73" : "white", props.selectedSort === props.data ? "#4CE1BE73" : "white",
}} }}
onClick={() => onClick={() =>
props.parent.setState({ props.parent.setState({
selectedFilters: { selectedFilters: {
...props.parent.state.selectedFilters, ...props.parent.state.selectedFilters,
sort: props.data, sort: props.data,
}, },
}) })
} }
> >
{props.data} {props.data}
</li> </li>
); );
}; };

@ -1,174 +1,174 @@
import React, { Component } from "react"; import React, { Component } from "react";
import FilterListIcon from "@material-ui/icons/FilterList"; import FilterListIcon from "@material-ui/icons/FilterList";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "~/Redux/actions"; import { book } from "~/Redux/actions";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Select from "./Select/index"; import Select from "./Select/index";
import Breadcrumbs from "./BreadCrumb/index"; import Breadcrumbs from "./BreadCrumb/index";
import List from "./List/index"; import List from "./List/index";
import Sort from "./Sort/index"; import Sort from "./Sort/index";
import Filters from "./Filters/index"; import Filters from "./Filters/index";
import navbarSearch from "../../assets/icons/navbarSearch.png"; import navbarSearch from "../../assets/icons/navbarSearch.png";
import "./index.scss"; import "./index.scss";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
class Products extends Component { class Products extends Component {
state = { state = {
search: null, search: null,
selectedFilters: { selectedFilters: {
level: [], level: [],
subject: [], subject: [],
sort: null, sort: null,
}, },
}; };
handleProductSearch = (val) => { handleProductSearch = (val) => {
this.setState({ this.setState({
search: val, search: val,
}); });
// this.props.searchBook(val); // this.props.searchBook(val);
}; };
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if ( if (
prevState.selectedFilters !== this.state.selectedFilters || prevState.selectedFilters !== this.state.selectedFilters ||
prevState.search !== this.state.search prevState.search !== this.state.search
) { ) {
this.props.filterBook({ this.props.filterBook({
...this.state.selectedFilters, ...this.state.selectedFilters,
search: this.state.search, search: this.state.search,
}); });
} }
} }
componentDidMount() { componentDidMount() {
window.scrollTo(0, 0); window.scrollTo(0, 0);
localStorage.removeItem("filter"); localStorage.removeItem("filter");
if ( if (
window.location.search.slice( window.location.search.slice(
window.location.search.lastIndexOf("?") + 1, window.location.search.lastIndexOf("?") + 1,
window.location.search.length window.location.search.length
) === "cart" ) === "cart"
) { ) {
toast.info(window.t("ابتدا یک محصول به سبد خریدتان اضافه کنید.")); toast.info(window.t("ابتدا یک محصول به سبد خریدتان اضافه کنید."));
} }
} }
render() { render() {
const { sortFilters, levels, subjects } = this.props; const { sortFilters, levels, subjects } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> <>
<div <div
className={`products d-flex flex-column ${ className={`products d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
> >
<Navbar page={"products"} /> <Navbar page={"products"} />
<Breadcrumbs /> <Breadcrumbs />
<div <div
className={`products__body d-flex ${ className={`products__body d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
{this.props.subjects.length > 0 ? ( {this.props.subjects.length > 0 ? (
<Filters parent={this} /> <Filters parent={this} />
) : null} ) : null}
<div <div
className={`products__body--left d-flex flex-column ${ className={`products__body--left d-flex flex-column ${
window.lang === "en" ? "align-items-end" : "" window.lang === "en" ? "align-items-end" : ""
}`} }`}
> >
<Sort <Sort
parent={this} parent={this}
selectedSort={this.state.selectedFilters.sort} selectedSort={this.state.selectedFilters.sort}
/> />
<List /> <List />
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer />
</> </>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<> <>
<div className="mobile-products d-flex flex-column"> <div className="mobile-products d-flex flex-column">
<Navbar page={"products"} /> <Navbar page={"products"} />
<div className="mobile-products__search d-flex"> <div className="mobile-products__search d-flex">
<input <input
type="search" type="search"
style={{ style={{
fontSize: 15, fontSize: 15,
textAlign: window.lang === "en" ? "left" : "", textAlign: window.lang === "en" ? "left" : "",
}} }}
placeholder={window.t("جستجو")} placeholder={window.t("جستجو")}
onChange={(e) => this.handleProductSearch(e.target.value)} onChange={(e) => this.handleProductSearch(e.target.value)}
/> />
<img src={navbarSearch} alt={window.t("جستجو")} /> <img src={navbarSearch} alt={window.t("جستجو")} />
</div> </div>
<div className="mobile-products__filters d-flex"> <div className="mobile-products__filters d-flex">
<div <div
className={`d-flex ${ className={`d-flex ${
window.lang === "en" ? "flex-row-reverse" : "" window.lang === "en" ? "flex-row-reverse" : ""
}`} }`}
> >
<Select name="sort" options={sortFilters} parent={this} /> <Select name="sort" options={sortFilters} parent={this} />
<Select name="subject" options={subjects} parent={this} /> <Select name="subject" options={subjects} parent={this} />
<Select name="level" options={levels} parent={this} /> <Select name="level" options={levels} parent={this} />
</div> </div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div> </div>
<List search={this.state.search} /> <List search={this.state.search} />
<div <div
className="d-flex" className="d-flex"
style={{ style={{
position: "fixed", position: "fixed",
bottom: 1, bottom: 1,
width: "100%", width: "100%",
height: "40px", height: "40px",
left: 0, left: 0,
}} }}
> >
<Link <Link
to={"/cart"} to={"/cart"}
style={{ style={{
width: "100%", width: "100%",
color: "white", color: "white",
backgroundColor: "#7fc75d", backgroundColor: "#7fc75d",
cursor: "pointer", cursor: "pointer",
borderRadius: 8, borderRadius: 8,
textDecoration: "none", textDecoration: "none",
padding: "5px 10px", padding: "5px 10px",
margin: "5px 10px 1px", margin: "5px 10px 1px",
textAlign: "center", textAlign: "center",
}} }}
> >
{window.t("سبد خرید")}{" "} {window.t("سبد خرید")}{" "}
</Link> </Link>
</div> </div>
</div> </div>
</> </>
) : null} ) : null}
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
subjects: state.book.subjects, subjects: state.book.subjects,
levels: state.book.levels, levels: state.book.levels,
sortFilters: state.book.sortFilters, sortFilters: state.book.sortFilters,
}), }),
{ {
searchBook: book.searchBook, searchBook: book.searchBook,
filterBook: book.filterBook, filterBook: book.filterBook,
} }
)(Products); )(Products);

@ -1,47 +1,47 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import "./index.scss"; import "./index.scss";
export default function LastQR(props) { export default function LastQR(props) {
const grades = [ const grades = [
"0", "0",
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
const { data } = props; const { data } = props;
return ( return (
<> <>
{window.innerWidth > 1000 ? <div className="last-qr"></div> : null} {window.innerWidth > 1000 ? <div className="last-qr"></div> : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<Link to={`/qr${data.link}`} className="mobile-last-qr d-flex"> <Link to={`/qr${data.link}`} className="mobile-last-qr d-flex">
<div className="mobile-last-qr__right d-flex"> <div className="mobile-last-qr__right d-flex">
<img <img
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
alt={data.name} alt={data.name}
/> />
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<strong>{data.name}</strong> <strong>{data.name}</strong>
<span>{grades[data.gradeId]}</span> <span>{grades[data.gradeId]}</span>
</div> </div>
</div> </div>
<div className="mobile-last-qr__left d-flex"> <div className="mobile-last-qr__left d-flex">
<button> <button>
{window.t("صفحه")} {data.pagesNum} {window.t("صفحه")} {data.pagesNum}
</button> </button>
</div> </div>
</Link> </Link>
) : null} ) : null}
</> </>
); );
} }

@ -1,49 +1,49 @@
import React, { Component } from "react"; import React, { Component } from "react";
import QrReader from "react-qr-reader"; import QrReader from "react-qr-reader";
const facingMode = ["environment", "user"]; const facingMode = ["environment", "user"];
export default class Scanner extends Component { export default class Scanner extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
delay: 100, delay: 100,
result: "", result: "",
}; };
this.handleScan = this.handleScan.bind(this); this.handleScan = this.handleScan.bind(this);
} }
handleScan(data) { handleScan(data) {
this.props.parent.setState({ this.props.parent.setState({
value: data, value: data,
}); });
} }
handleError(err) { handleError(err) {
console.error(err); console.error(err);
} }
render() { render() {
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<QrReader <QrReader
delay={300} delay={300}
onError={this.handleError} onError={this.handleError}
onScan={this.handleScan} onScan={this.handleScan}
style={{ width: "100%" }} style={{ width: "100%" }}
facingMode={facingMode[this.props.parent.state.facingMode]} facingMode={facingMode[this.props.parent.state.facingMode]}
/> />
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<QrReader <QrReader
delay={300} delay={300}
onError={this.handleError} onError={this.handleError}
onScan={this.handleScan} onScan={this.handleScan}
style={{ width: "100%" }} style={{ width: "100%" }}
facingMode={this.props.parent.state.facingMode} facingMode={this.props.parent.state.facingMode}
/> />
) : null} ) : null}
</> </>
); );
} }
} }

@ -1,179 +1,179 @@
import React, { Component } from "react"; import React, { Component } from "react";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Scanner from "./Scanner/index"; import Scanner from "./Scanner/index";
import LastQr from "./LastQr/index"; import LastQr from "./LastQr/index";
import Modal from "./Modal/index"; import Modal from "./Modal/index";
import ReplayIcon from "@material-ui/icons/Replay"; import ReplayIcon from "@material-ui/icons/Replay";
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { qr, userProduct } from "~/Redux/actions"; import { qr, userProduct } from "~/Redux/actions";
import sciense_6 from "../../assets/images/sciense-6.png"; import sciense_6 from "../../assets/images/sciense-6.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70,
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90,
}, },
}; };
class QRScan extends Component { class QRScan extends Component {
state = { state = {
value: null, value: null,
facingMode: 0, facingMode: 0,
tail: null, //"Zist10-146", tail: null, //"Zist10-146",
}; };
componentDidMount() { componentDidMount() {
console.log(this.props.myList); console.log(this.props.myList);
if (!this.props.myList) this.props.getMyList({}); if (!this.props.myList) this.props.getMyList({});
} }
async componentDidUpdate() { async componentDidUpdate() {
if (this.state.value) { if (this.state.value) {
let tail = this.state.value.slice( let tail = this.state.value.slice(
this.state.value.lastIndexOf("/") + 1, this.state.value.lastIndexOf("/") + 1,
this.state.value.length this.state.value.length
); );
// if (tail.length) this.props.info({ tail: tail }); // if (tail.length) this.props.info({ tail: tail });
this.setState({ value: null, tail: tail }); this.setState({ value: null, tail: tail });
} }
} }
render() { render() {
const { data } = this.props; const { data } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> <>
<div className="qr-scan d-flex flex-column align-items-center"> <div className="qr-scan d-flex flex-column align-items-center">
<Navbar /> <Navbar />
<div className="qr-scan__box d-flex flex-column"> <div className="qr-scan__box d-flex flex-column">
<header className="qr-scan__box--header d-flex flex-column"> <header className="qr-scan__box--header d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}> <h1 style={{ fontSize: fontSize.desktop.h1 }}>
{window.t("نکته")} {window.t("نکته")}
</h1> </h1>
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
{window.t( {window.t(
"لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار" "لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار"
)} )}
{window.t("دهید تا اسکن دوربین انجام شود")}{" "} {window.t("دهید تا اسکن دوربین انجام شود")}{" "}
</p> </p>
</header> </header>
<div className="qr-scan__box--select d-flex"> <div className="qr-scan__box--select d-flex">
<select <select
onChange={(e) => onChange={(e) =>
this.setState({ facingMode: e.target.value }) this.setState({ facingMode: e.target.value })
} }
> >
<option value="environment"> <option value="environment">
{window.t("دوربین عقب")} {window.t("دوربین عقب")}
</option> </option>
<option value="user">{window.t("دوربین جلو")}</option> <option value="user">{window.t("دوربین جلو")}</option>
</select> </select>
</div> </div>
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> <section className="qr-scan__box--camera d-flex justify-content-center align-items-center">
{this.state.value !== null ? ( {this.state.value !== null ? (
<div <div
style={{ zIndex: 1000 }} style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })} onClick={() => this.setState({ value: null })}
> >
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> <ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div> </div>
) : this.state.tail === null ? ( ) : this.state.tail === null ? (
<Scanner parent={this} /> <Scanner parent={this} />
) : null} ) : null}
</section> </section>
{this.state.tail === null ? null : ( {this.state.tail === null ? null : (
<Modal <Modal
tail={this.state.tail} tail={this.state.tail}
parent={this} parent={this}
myList={this.props.myList} myList={this.props.myList}
/> />
)} )}
</div> </div>
</div> </div>
<Footer /> <Footer />
</> </>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<> <>
<div className="mobile-qr-scan d-flex flex-column"> <div className="mobile-qr-scan d-flex flex-column">
<Navbar page="qr-scan" /> <Navbar page="qr-scan" />
<header className="mobile-qr-scan__header d-flex flex-column"></header> <header className="mobile-qr-scan__header d-flex flex-column"></header>
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> <section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
<FlipCameraIosIcon <FlipCameraIosIcon
style={{ style={{
fontSize: 35, fontSize: 35,
position: "absolute", position: "absolute",
left: 10, left: 10,
top: 10, top: 10,
zIndex: 100, zIndex: 100,
color: "white", color: "white",
}} }}
onClick={() => onClick={() =>
this.setState({ facingMode: this.state.facingMode ? 0 : 1 }) this.setState({ facingMode: this.state.facingMode ? 0 : 1 })
} }
/> />
{this.state.value !== null ? ( {this.state.value !== null ? (
<div <div
style={{ zIndex: 1000 }} style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })} onClick={() => this.setState({ value: null })}
> >
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> <ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div> </div>
) : ( ) : (
<Scanner parent={this} /> <Scanner parent={this} />
)} )}
</section> </section>
{this.state.tail === null ? null : ( {this.state.tail === null ? null : (
<Modal <Modal
parent={this} parent={this}
tail={this.state.tail} tail={this.state.tail}
myList={this.props.myList} myList={this.props.myList}
/> />
)} )}
{localStorage.getItem("latestQr") ? ( {localStorage.getItem("latestQr") ? (
<section className="mobile-qr-scan__lasts d-flex flex-column"> <section className="mobile-qr-scan__lasts d-flex flex-column">
<h2>{window.t("آخرین مشاهدات")}</h2> <h2>{window.t("آخرین مشاهدات")}</h2>
{data.map((item, i) => ( {data.map((item, i) => (
<LastQr <LastQr
data={JSON.parse(localStorage.getItem("latestQr"))} data={JSON.parse(localStorage.getItem("latestQr"))}
key={i} key={i}
/> />
))} ))}
</section> </section>
) : null} ) : null}
</div> </div>
</> </>
) : null} ) : null}
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ list: state.qr.list, myList: state.userProduct.myList }), (state) => ({ list: state.qr.list, myList: state.userProduct.myList }),
{ {
getMyList: userProduct.myList, getMyList: userProduct.myList,
info: qr.info, info: qr.info,
} }
)(QRScan); )(QRScan);
QRScan.defaultProps = { QRScan.defaultProps = {
data: [ data: [
{ {
title: "ریاضیات گسسته خیلی پیشرفته", title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "پایه هفتم ابتدایی", subTitle: "پایه هفتم ابتدایی",
page: 13, page: 13,
image: sciense_6, image: sciense_6,
}, },
], ],
}; };

@ -1,193 +1,193 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { userProduct, comment, file } from "~/Redux/actions"; import { userProduct, comment, file } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Input from "../Contact/Input/index"; import Input from "../Contact/Input/index";
import Select from "../Contact/Select/index"; import Select from "../Contact/Select/index";
import Upload from "./Upload"; import Upload from "./Upload";
import "./index.scss"; import "./index.scss";
import { connect } from "react-redux"; import { connect } from "react-redux";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
}, },
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16, h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34, p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32, span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32,
}, },
}; };
class Support extends Component { class Support extends Component {
state = { state = {
name: null, name: null,
cellphone: null, cellphone: null,
unit: null, unit: null,
bookId: null, bookId: null,
subject: null, subject: null,
text: null, text: null,
file: null, file: null,
fileId: null, fileId: null,
}; };
componentDidMount() { componentDidMount() {
if (!this.props.myProductList && this.props.status) if (!this.props.myProductList && this.props.status)
this.props.getUserProductList({}); this.props.getUserProductList({});
} }
onChange = (name, value, type) => { onChange = (name, value, type) => {
if (type === "file") { if (type === "file") {
this.props.upload({ file: value, target: name }); this.props.upload({ file: value, target: name });
} }
this.setState({ this.setState({
[name]: value, [name]: value,
}); });
}; };
async send() { async send() {
const { const {
submit, submit,
status: { userId }, status: { userId },
} = this.props; } = this.props;
const { text, fileId, name, cellphone, unit, bookId, subject } = this.state; const { text, fileId, name, cellphone, unit, bookId, subject } = this.state;
await submit({ await submit({
fileId, fileId,
text, text,
name, name,
cellphone, cellphone,
unit, unit,
bookId, bookId,
subject, subject,
userId, userId,
}); });
//todo redirectHome //todo redirectHome
} }
render() { render() {
const grades = [ const grades = [
window.t("پیش دبستان"), window.t("پیش دبستان"),
window.t("اول"), window.t("اول"),
window.t("دوم"), window.t("دوم"),
window.t("سوم"), window.t("سوم"),
window.t("چهارم"), window.t("چهارم"),
window.t("پنجم"), window.t("پنجم"),
window.t("ششم"), window.t("ششم"),
window.t("هفتم"), window.t("هفتم"),
window.t("هشتم"), window.t("هشتم"),
window.t("نهم"), window.t("نهم"),
window.t("دهم"), window.t("دهم"),
window.t("یازدهم"), window.t("یازدهم"),
window.t("دوازدهم"), window.t("دوازدهم"),
]; ];
let { status } = this.props; let { status } = this.props;
let opt = [ let opt = [
window.t("واحد مورد نظر"), window.t("واحد مورد نظر"),
window.t("واحد فروش"), window.t("واحد فروش"),
window.t("واحد فنی"), window.t("واحد فنی"),
window.t("واحد محتوایی"), window.t("واحد محتوایی"),
]; ];
opt = opt.map((e) => [e, e]); opt = opt.map((e) => [e, e]);
return ( return (
<> <>
<div className="mobile-support d-flex flex-column align-items-center"> <div className="mobile-support d-flex flex-column align-items-center">
<Navbar page={"support"} /> <Navbar page={"support"} />
<div <div
className={ className={
"mobile-support__form d-flex flex-column " + "mobile-support__form d-flex flex-column " +
(window.lang === "en" ? "ltr" : "") (window.lang === "en" ? "ltr" : "")
} }
> >
<h1 style={{ fontSize: fontSize.mobile.h1 }}> <h1 style={{ fontSize: fontSize.mobile.h1 }}>
{window.t("پشتیبانی")} {window.t("پشتیبانی")}
</h1> </h1>
<p> <p>
{window.t( {window.t(
"برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید." "برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید."
)}{" "} )}{" "}
</p> </p>
{status ? null : ( {status ? null : (
<> <>
<Input <Input
label={window.t("نام و نام خانوادگی")} label={window.t("نام و نام خانوادگی")}
name={"name"} name={"name"}
parent={this} parent={this}
/> />
<Input <Input
label={window.t("شماره تماس")} label={window.t("شماره تماس")}
name={"cellphone"} name={"cellphone"}
parent={this} parent={this}
/> />
</> </>
)} )}
<Select <Select
required required
name="unit" name="unit"
options={ options={
status && this.props.myProductList?.length status && this.props.myProductList?.length
? opt ? opt
: opt.slice(0, 3) : opt.slice(0, 3)
} }
parent={this} parent={this}
/> />
{this.state.unit === window.t("واحد محتوایی") ? ( {this.state.unit === window.t("واحد محتوایی") ? (
<Select <Select
required required
name="bookId" name="bookId"
options={[ options={[
...new Set( ...new Set(
this.props.myProductList?.map((item) => [ this.props.myProductList?.map((item) => [
item.product.book.id, item.product.book.id,
`${item.product.book.name} ${window.t("پایه")} ${ `${item.product.book.name} ${window.t("پایه")} ${
grades[item.product.book.gradeId] grades[item.product.book.gradeId]
}`, }`,
]) || [] ]) || []
), ),
]} ]}
parent={this} parent={this}
/> />
) : null} ) : null}
<Input <Input
label={window.t("موضوع")} label={window.t("موضوع")}
name={"subject"} name={"subject"}
parent={this} parent={this}
required required
/> />
<Input <Input
label={window.t("متن")} label={window.t("متن")}
name={"text"} name={"text"}
parent={this} parent={this}
multiline multiline
required required
/> />
{/* <textarea placeholder="متن " name="text" rows="8" o></textarea> */} {/* <textarea placeholder="متن " name="text" rows="8" o></textarea> */}
<Upload <Upload
type="file" type="file"
onChange={(e) => this.addFile(e)} onChange={(e) => this.addFile(e)}
parent={this} parent={this}
name="file" name="file"
/> />
<button onClick={() => this.send()}>{window.t("ارسال")}</button> <button onClick={() => this.send()}>{window.t("ارسال")}</button>
</div> </div>
</div> </div>
</> </>
); );
} }
} }
export default connect( export default connect(
(state) => ({ (state) => ({
myProductList: state.userProduct.myList, myProductList: state.userProduct.myList,
status: state.user.status, status: state.user.status,
uploadFileId: state.file.supportFileId, uploadFileId: state.file.supportFileId,
lang: state.publicApi.lang, lang: state.publicApi.lang,
}), }),
{ {
getUserProductList: userProduct.myList, getUserProductList: userProduct.myList,
submit: comment.add, submit: comment.add,
upload: file.upload, upload: file.upload,
} }
)(Support); )(Support);

Loading…
Cancel
Save