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

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

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

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

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

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

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

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

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

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

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

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

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

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

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

File diff suppressed because it is too large Load Diff

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

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

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save