parent
a50605c711
commit
ebdcf3c301
51 changed files with 9355 additions and 9329 deletions
@ -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,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,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} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
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,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, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
Loading…
Reference in new issue