parent
a50605c711
commit
ebdcf3c301
51 changed files with 9355 additions and 9329 deletions
@ -1,78 +1,78 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<meta charset="utf-8" /> |
<meta charset="utf-8" /> |
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> |
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> |
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" /> |
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" /> |
||||||
<meta name="theme-color" content="#000000" /> |
<meta name="theme-color" content="#000000" /> |
||||||
<meta name="description" content="دانوین" /> |
<meta name="description" content="دانوین" /> |
||||||
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" /> |
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" /> |
||||||
<meta name="mobile-web-app-capable" content="yes" /> |
<meta name="mobile-web-app-capable" content="yes" /> |
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> |
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> |
||||||
<meta name="apple-mobile-web-app-capable" content="yes" /> |
<meta name="apple-mobile-web-app-capable" content="yes" /> |
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> |
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> |
||||||
|
|
||||||
<title>دانوین</title> |
<title>دانوین</title> |
||||||
<!-- Google Tag Manager --> |
<!-- Google Tag Manager --> |
||||||
<script src="https://dnvn.ir/ar.js"></script> |
<script src="https://dnvn.ir/ar.js"></script> |
||||||
<script src="https://dnvn.ir/en.js"></script> |
<script src="https://dnvn.ir/en.js"></script> |
||||||
<script> |
<script> |
||||||
const lang = localStorage.getItem("language"); |
const lang = localStorage.getItem("language"); |
||||||
window.lang = lang; |
window.lang = lang; |
||||||
window.ar = ar; |
window.ar = ar; |
||||||
window.en = en; |
window.en = en; |
||||||
|
|
||||||
window.ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1 |
window.ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1 |
||||||
window.tr = (price) => Math.round(window.ratio * price * 100) / 100 |
window.tr = (price) => Math.round(window.ratio * price * 100) / 100 |
||||||
function t(val) { |
function t(val) { |
||||||
const lang_ = window[window.lang]; |
const lang_ = window[window.lang]; |
||||||
if (!lang_) return val; |
if (!lang_) return val; |
||||||
if (!lang_[val]) console.error(val); |
if (!lang_[val]) console.error(val); |
||||||
return lang_[val] || "*" + val; |
return lang_[val] || "*" + val; |
||||||
} |
} |
||||||
|
|
||||||
(function (w, d, s, l, i) { |
(function (w, d, s, l, i) { |
||||||
w[l] = w[l] || []; |
w[l] = w[l] || []; |
||||||
w[l].push({ |
w[l].push({ |
||||||
"gtm.start": new Date().getTime(), |
"gtm.start": new Date().getTime(), |
||||||
event: "gtm.js", |
event: "gtm.js", |
||||||
}); |
}); |
||||||
var f = d.getElementsByTagName(s)[0], |
var f = d.getElementsByTagName(s)[0], |
||||||
j = d.createElement(s), |
j = d.createElement(s), |
||||||
dl = l != "dataLayer" ? "&l=" + l : ""; |
dl = l != "dataLayer" ? "&l=" + l : ""; |
||||||
j.async = true; |
j.async = true; |
||||||
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; |
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; |
||||||
f.parentNode.insertBefore(j, f); |
f.parentNode.insertBefore(j, f); |
||||||
})(window, document, "script", "dataLayer", "GTM-WVV8H9L"); |
})(window, document, "script", "dataLayer", "GTM-WVV8H9L"); |
||||||
</script> |
</script> |
||||||
<!-- End Google Tag Manager --> |
<!-- End Google Tag Manager --> |
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<!-- Google Tag Manager (noscript) --> |
<!-- Google Tag Manager (noscript) --> |
||||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVV8H9L" height="0" width="0" |
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVV8H9L" height="0" width="0" |
||||||
style="display: none; visibility: hidden"></iframe></noscript> |
style="display: none; visibility: hidden"></iframe></noscript> |
||||||
<!-- End Google Tag Manager (noscript) --> |
<!-- End Google Tag Manager (noscript) --> |
||||||
<div id="root"></div> |
<div id="root"></div> |
||||||
<script> |
<script> |
||||||
if ("serviceWorker" in navigator) { |
if ("serviceWorker" in navigator) { |
||||||
window.addEventListener("load", function () { |
window.addEventListener("load", function () { |
||||||
navigator.serviceWorker |
navigator.serviceWorker |
||||||
.register("./serviceworker.js") |
.register("./serviceworker.js") |
||||||
.then((registration) => { |
.then((registration) => { |
||||||
// Registration was successful |
// Registration was successful |
||||||
console.log( |
console.log( |
||||||
"ServiceWorker registration successful with scope: ", |
"ServiceWorker registration successful with scope: ", |
||||||
registration.scope |
registration.scope |
||||||
); |
); |
||||||
}) |
}) |
||||||
.catch((err) => { |
.catch((err) => { |
||||||
console.log(err); |
console.log(err); |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
||||||
@ -1,41 +1,41 @@ |
|||||||
const CACHE_NAME = "version-26-6-19aimmi"; |
const CACHE_NAME = "version-26-6-34aimmi"; |
||||||
const urlsToCache = ["index.html", "offline.html"]; |
const urlsToCache = ["index.html", "offline.html"]; |
||||||
|
|
||||||
const self = this; |
const self = this; |
||||||
|
|
||||||
//Install SW
|
//Install SW
|
||||||
self.addEventListener("install", (event) => { |
self.addEventListener("install", (event) => { |
||||||
event.waitUntil( |
event.waitUntil( |
||||||
caches.open(CACHE_NAME).then((cache) => { |
caches.open(CACHE_NAME).then((cache) => { |
||||||
console.log("Opened cache"); |
console.log("Opened cache"); |
||||||
|
|
||||||
return cache.addAll(urlsToCache); |
return cache.addAll(urlsToCache); |
||||||
}) |
}) |
||||||
); |
); |
||||||
}); |
}); |
||||||
|
|
||||||
//Listen for requests
|
//Listen for requests
|
||||||
self.addEventListener("fetch", (event) => { |
self.addEventListener("fetch", (event) => { |
||||||
event.respondWith( |
event.respondWith( |
||||||
caches.match(event.request).then(() => { |
caches.match(event.request).then(() => { |
||||||
return fetch(event.request).catch(() => caches.match("offline.html")); |
return fetch(event.request).catch(() => caches.match("offline.html")); |
||||||
}) |
}) |
||||||
); |
); |
||||||
}); |
}); |
||||||
//Activate the SW
|
//Activate the SW
|
||||||
self.addEventListener("activate", (event) => { |
self.addEventListener("activate", (event) => { |
||||||
const cacheWhiteList = []; |
const cacheWhiteList = []; |
||||||
cacheWhiteList.push(CACHE_NAME); |
cacheWhiteList.push(CACHE_NAME); |
||||||
|
|
||||||
event.waitUntil( |
event.waitUntil( |
||||||
caches.keys().then((cacheNames) => |
caches.keys().then((cacheNames) => |
||||||
Promise.all( |
Promise.all( |
||||||
cacheNames.map((cacheName) => { |
cacheNames.map((cacheName) => { |
||||||
if (!cacheWhiteList.includes(cacheName)) { |
if (!cacheWhiteList.includes(cacheName)) { |
||||||
return caches.delete(cacheName); |
return caches.delete(cacheName); |
||||||
} |
} |
||||||
}) |
}) |
||||||
) |
) |
||||||
) |
) |
||||||
); |
); |
||||||
}); |
}); |
||||||
|
|||||||
@ -1,212 +1,212 @@ |
|||||||
'use strict'; |
'use strict'; |
||||||
|
|
||||||
// Do this as the first thing so that any code reading it knows the right env.
|
// Do this as the first thing so that any code reading it knows the right env.
|
||||||
process.env.BABEL_ENV = 'production'; |
process.env.BABEL_ENV = 'production'; |
||||||
process.env.NODE_ENV = 'production'; |
process.env.NODE_ENV = 'production'; |
||||||
|
|
||||||
// Makes the script crash on unhandled rejections instead of silently
|
// Makes the script crash on unhandled rejections instead of silently
|
||||||
// ignoring them. In the future, promise rejections that are not handled will
|
// ignoring them. In the future, promise rejections that are not handled will
|
||||||
// terminate the Node.js process with a non-zero exit code.
|
// terminate the Node.js process with a non-zero exit code.
|
||||||
process.on('unhandledRejection', err => { |
process.on('unhandledRejection', err => { |
||||||
throw err; |
throw err; |
||||||
}); |
}); |
||||||
|
|
||||||
// Ensure environment variables are read.
|
// Ensure environment variables are read.
|
||||||
require('../config/env'); |
require('../config/env'); |
||||||
|
|
||||||
|
|
||||||
const path = require('path'); |
const path = require('path'); |
||||||
const chalk = require('react-dev-utils/chalk'); |
const chalk = require('react-dev-utils/chalk'); |
||||||
const fs = require('fs-extra'); |
const fs = require('fs-extra'); |
||||||
const bfj = require('bfj'); |
const bfj = require('bfj'); |
||||||
const webpack = require('webpack'); |
const webpack = require('webpack'); |
||||||
const configFactory = require('../config/webpack.config'); |
const configFactory = require('../config/webpack.config'); |
||||||
const paths = require('../config/paths'); |
const paths = require('../config/paths'); |
||||||
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); |
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); |
||||||
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); |
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); |
||||||
const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); |
const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); |
||||||
const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); |
const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); |
||||||
const printBuildError = require('react-dev-utils/printBuildError'); |
const printBuildError = require('react-dev-utils/printBuildError'); |
||||||
|
|
||||||
const measureFileSizesBeforeBuild = |
const measureFileSizesBeforeBuild = |
||||||
FileSizeReporter.measureFileSizesBeforeBuild; |
FileSizeReporter.measureFileSizesBeforeBuild; |
||||||
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; |
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; |
||||||
const useYarn = fs.existsSync(paths.yarnLockFile); |
const useYarn = fs.existsSync(paths.yarnLockFile); |
||||||
|
|
||||||
// These sizes are pretty large. We'll warn for bundles exceeding them.
|
// These sizes are pretty large. We'll warn for bundles exceeding them.
|
||||||
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; |
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; |
||||||
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; |
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; |
||||||
|
|
||||||
const isInteractive = process.stdout.isTTY; |
const isInteractive = process.stdout.isTTY; |
||||||
|
|
||||||
// Warn and crash if required files are missing
|
// Warn and crash if required files are missing
|
||||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { |
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { |
||||||
process.exit(1); |
process.exit(1); |
||||||
} |
} |
||||||
|
|
||||||
const argv = process.argv.slice(2); |
const argv = process.argv.slice(2); |
||||||
const writeStatsJson = argv.indexOf('--stats') !== -1; |
const writeStatsJson = argv.indexOf('--stats') !== -1; |
||||||
|
|
||||||
// Generate configuration
|
// Generate configuration
|
||||||
const config = configFactory('production'); |
const config = configFactory('production'); |
||||||
|
|
||||||
// We require that you explicitly set browsers and do not fall back to
|
// We require that you explicitly set browsers and do not fall back to
|
||||||
// browserslist defaults.
|
// browserslist defaults.
|
||||||
const { checkBrowsers } = require('react-dev-utils/browsersHelper'); |
const { checkBrowsers } = require('react-dev-utils/browsersHelper'); |
||||||
checkBrowsers(paths.appPath, isInteractive) |
checkBrowsers(paths.appPath, isInteractive) |
||||||
.then(() => { |
.then(() => { |
||||||
// First, read the current file sizes in build directory.
|
// First, read the current file sizes in build directory.
|
||||||
// This lets us display how much they changed later.
|
// This lets us display how much they changed later.
|
||||||
return measureFileSizesBeforeBuild(paths.appBuild); |
return measureFileSizesBeforeBuild(paths.appBuild); |
||||||
}) |
}) |
||||||
.then(previousFileSizes => { |
.then(previousFileSizes => { |
||||||
// Remove all content but keep the directory so that
|
// Remove all content but keep the directory so that
|
||||||
// if you're in it, you don't end up in Trash
|
// if you're in it, you don't end up in Trash
|
||||||
fs.emptyDirSync(paths.appBuild); |
fs.emptyDirSync(paths.appBuild); |
||||||
// Merge with the public folder
|
// Merge with the public folder
|
||||||
copyPublicFolder(); |
copyPublicFolder(); |
||||||
// Start the webpack build
|
// Start the webpack build
|
||||||
return build(previousFileSizes); |
return build(previousFileSizes); |
||||||
}) |
}) |
||||||
.then( |
.then( |
||||||
({ stats, previousFileSizes, warnings }) => { |
({ stats, previousFileSizes, warnings }) => { |
||||||
if (warnings.length) { |
if (warnings.length) { |
||||||
console.log(chalk.yellow('Compiled with warnings.\n')); |
console.log(chalk.yellow('Compiled with warnings.\n')); |
||||||
console.log(warnings.join('\n\n')); |
console.log(warnings.join('\n\n')); |
||||||
console.log( |
console.log( |
||||||
'\nSearch for the ' + |
'\nSearch for the ' + |
||||||
chalk.underline(chalk.yellow('keywords')) + |
chalk.underline(chalk.yellow('keywords')) + |
||||||
' to learn more about each warning.' |
' to learn more about each warning.' |
||||||
); |
); |
||||||
console.log( |
console.log( |
||||||
'To ignore, add ' + |
'To ignore, add ' + |
||||||
chalk.cyan('// eslint-disable-next-line') + |
chalk.cyan('// eslint-disable-next-line') + |
||||||
' to the line before.\n' |
' to the line before.\n' |
||||||
); |
); |
||||||
} else { |
} else { |
||||||
console.log(chalk.green('Compiled successfully.\n')); |
console.log(chalk.green('Compiled successfully.\n')); |
||||||
} |
} |
||||||
|
|
||||||
console.log('File sizes after gzip:\n'); |
console.log('File sizes after gzip:\n'); |
||||||
printFileSizesAfterBuild( |
printFileSizesAfterBuild( |
||||||
stats, |
stats, |
||||||
previousFileSizes, |
previousFileSizes, |
||||||
paths.appBuild, |
paths.appBuild, |
||||||
WARN_AFTER_BUNDLE_GZIP_SIZE, |
WARN_AFTER_BUNDLE_GZIP_SIZE, |
||||||
WARN_AFTER_CHUNK_GZIP_SIZE |
WARN_AFTER_CHUNK_GZIP_SIZE |
||||||
); |
); |
||||||
console.log(); |
console.log(); |
||||||
|
|
||||||
const appPackage = require(paths.appPackageJson); |
const appPackage = require(paths.appPackageJson); |
||||||
const publicUrl = paths.publicUrlOrPath; |
const publicUrl = paths.publicUrlOrPath; |
||||||
const publicPath = config.output.publicPath; |
const publicPath = config.output.publicPath; |
||||||
const buildFolder = path.relative(process.cwd(), paths.appBuild); |
const buildFolder = path.relative(process.cwd(), paths.appBuild); |
||||||
printHostingInstructions( |
printHostingInstructions( |
||||||
appPackage, |
appPackage, |
||||||
publicUrl, |
publicUrl, |
||||||
publicPath, |
publicPath, |
||||||
buildFolder, |
buildFolder, |
||||||
useYarn |
useYarn |
||||||
); |
); |
||||||
}, |
}, |
||||||
err => { |
err => { |
||||||
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; |
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; |
||||||
if (tscCompileOnError) { |
if (tscCompileOnError) { |
||||||
console.log( |
console.log( |
||||||
chalk.yellow( |
chalk.yellow( |
||||||
'Compiled with the following type errors (you may want to check these before deploying your app):\n' |
'Compiled with the following type errors (you may want to check these before deploying your app):\n' |
||||||
) |
) |
||||||
); |
); |
||||||
printBuildError(err); |
printBuildError(err); |
||||||
} else { |
} else { |
||||||
console.log(chalk.red('Failed to compile.\n')); |
console.log(chalk.red('Failed to compile.\n')); |
||||||
printBuildError(err); |
printBuildError(err); |
||||||
process.exit(1); |
process.exit(1); |
||||||
} |
} |
||||||
} |
} |
||||||
) |
) |
||||||
.catch(err => { |
.catch(err => { |
||||||
if (err && err.message) { |
if (err && err.message) { |
||||||
console.log(err.message); |
console.log(err.message); |
||||||
} |
} |
||||||
process.exit(1); |
process.exit(1); |
||||||
}); |
}); |
||||||
|
|
||||||
// Create the production build and print the deployment instructions.
|
// Create the production build and print the deployment instructions.
|
||||||
function build(previousFileSizes) { |
function build(previousFileSizes) { |
||||||
console.log('Creating an optimized production build...'); |
console.log('Creating an optimized production build...'); |
||||||
|
|
||||||
const compiler = webpack(config); |
const compiler = webpack(config); |
||||||
return new Promise((resolve, reject) => { |
return new Promise((resolve, reject) => { |
||||||
compiler.run((err, stats) => { |
compiler.run((err, stats) => { |
||||||
let messages; |
let messages; |
||||||
if (err) { |
if (err) { |
||||||
if (!err.message) { |
if (!err.message) { |
||||||
return reject(err); |
return reject(err); |
||||||
} |
} |
||||||
|
|
||||||
let errMessage = err.message; |
let errMessage = err.message; |
||||||
|
|
||||||
// Add additional information for postcss errors
|
// Add additional information for postcss errors
|
||||||
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) { |
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) { |
||||||
errMessage += |
errMessage += |
||||||
'\nCompileError: Begins at CSS selector ' + |
'\nCompileError: Begins at CSS selector ' + |
||||||
err['postcssNode'].selector; |
err['postcssNode'].selector; |
||||||
} |
} |
||||||
|
|
||||||
messages = formatWebpackMessages({ |
messages = formatWebpackMessages({ |
||||||
errors: [errMessage], |
errors: [errMessage], |
||||||
warnings: [], |
warnings: [], |
||||||
}); |
}); |
||||||
} else { |
} else { |
||||||
messages = formatWebpackMessages( |
messages = formatWebpackMessages( |
||||||
stats.toJson({ all: false, warnings: true, errors: true }) |
stats.toJson({ all: false, warnings: true, errors: true }) |
||||||
); |
); |
||||||
} |
} |
||||||
if (messages.errors.length) { |
if (messages.errors.length) { |
||||||
// Only keep the first error. Others are often indicative
|
// Only keep the first error. Others are often indicative
|
||||||
// of the same problem, but confuse the reader with noise.
|
// of the same problem, but confuse the reader with noise.
|
||||||
if (messages.errors.length > 1) { |
if (messages.errors.length > 1) { |
||||||
messages.errors.length = 1; |
messages.errors.length = 1; |
||||||
} |
} |
||||||
return reject(new Error(messages.errors.join('\n\n'))); |
return reject(new Error(messages.errors.join('\n\n'))); |
||||||
} |
} |
||||||
if ( |
if ( |
||||||
process.env.CI && |
process.env.CI && |
||||||
(typeof process.env.CI !== 'string' || |
(typeof process.env.CI !== 'string' || |
||||||
process.env.CI.toLowerCase() !== 'false') && |
process.env.CI.toLowerCase() !== 'false') && |
||||||
messages.warnings.length |
messages.warnings.length |
||||||
) { |
) { |
||||||
console.log( |
console.log( |
||||||
chalk.yellow( |
chalk.yellow( |
||||||
'\nTreating warnings as errors because process.env.CI = true.\n' + |
'\nTreating warnings as errors because process.env.CI = true.\n' + |
||||||
'Most CI servers set it automatically.\n' |
'Most CI servers set it automatically.\n' |
||||||
) |
) |
||||||
); |
); |
||||||
return reject(new Error(messages.warnings.join('\n\n'))); |
return reject(new Error(messages.warnings.join('\n\n'))); |
||||||
} |
} |
||||||
|
|
||||||
const resolveArgs = { |
const resolveArgs = { |
||||||
stats, |
stats, |
||||||
previousFileSizes, |
previousFileSizes, |
||||||
warnings: messages.warnings, |
warnings: messages.warnings, |
||||||
}; |
}; |
||||||
|
|
||||||
if (writeStatsJson) { |
if (writeStatsJson) { |
||||||
return bfj |
return bfj |
||||||
.write(paths.appBuild + '/bundle-stats.json', stats.toJson()) |
.write(paths.appBuild + '/bundle-stats.json', stats.toJson()) |
||||||
.then(() => resolve(resolveArgs)) |
.then(() => resolve(resolveArgs)) |
||||||
.catch(error => reject(new Error(error))); |
.catch(error => reject(new Error(error))); |
||||||
} |
} |
||||||
|
|
||||||
return resolve(resolveArgs); |
return resolve(resolveArgs); |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
function copyPublicFolder() { |
function copyPublicFolder() { |
||||||
fs.copySync(paths.appPublic, paths.appBuild, { |
fs.copySync(paths.appPublic, paths.appBuild, { |
||||||
dereference: true, |
dereference: true, |
||||||
filter: file => file !== paths.appHtml, |
filter: file => file !== paths.appHtml, |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|||||||
@ -1,165 +1,165 @@ |
|||||||
"use strict"; |
"use strict"; |
||||||
|
|
||||||
// Do this as the first thing so that any code reading it knows the right env.
|
// Do this as the first thing so that any code reading it knows the right env.
|
||||||
process.env.BABEL_ENV = "development"; |
process.env.BABEL_ENV = "development"; |
||||||
process.env.NODE_ENV = "development"; |
process.env.NODE_ENV = "development"; |
||||||
|
|
||||||
// Makes the script crash on unhandled rejections instead of silently
|
// Makes the script crash on unhandled rejections instead of silently
|
||||||
// ignoring them. In the future, promise rejections that are not handled will
|
// ignoring them. In the future, promise rejections that are not handled will
|
||||||
// terminate the Node.js process with a non-zero exit code.
|
// terminate the Node.js process with a non-zero exit code.
|
||||||
process.on("unhandledRejection", (err) => { |
process.on("unhandledRejection", (err) => { |
||||||
throw err; |
throw err; |
||||||
}); |
}); |
||||||
|
|
||||||
// Ensure environment variables are read.
|
// Ensure environment variables are read.
|
||||||
require("../config/env"); |
require("../config/env"); |
||||||
|
|
||||||
const fs = require("fs"); |
const fs = require("fs"); |
||||||
const chalk = require("react-dev-utils/chalk"); |
const chalk = require("react-dev-utils/chalk"); |
||||||
const webpack = require("webpack"); |
const webpack = require("webpack"); |
||||||
const WebpackDevServer = require("webpack-dev-server"); |
const WebpackDevServer = require("webpack-dev-server"); |
||||||
const clearConsole = require("react-dev-utils/clearConsole"); |
const clearConsole = require("react-dev-utils/clearConsole"); |
||||||
const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles"); |
const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles"); |
||||||
const { |
const { |
||||||
choosePort, |
choosePort, |
||||||
createCompiler, |
createCompiler, |
||||||
prepareProxy, |
prepareProxy, |
||||||
prepareUrls, |
prepareUrls, |
||||||
} = require("react-dev-utils/WebpackDevServerUtils"); |
} = require("react-dev-utils/WebpackDevServerUtils"); |
||||||
const openBrowser = require("react-dev-utils/openBrowser"); |
const openBrowser = require("react-dev-utils/openBrowser"); |
||||||
const semver = require("semver"); |
const semver = require("semver"); |
||||||
const paths = require("../config/paths"); |
const paths = require("../config/paths"); |
||||||
const configFactory = require("../config/webpack.config"); |
const configFactory = require("../config/webpack.config"); |
||||||
const createDevServerConfig = require("../config/webpackDevServer.config"); |
const createDevServerConfig = require("../config/webpackDevServer.config"); |
||||||
const getClientEnvironment = require("../config/env"); |
const getClientEnvironment = require("../config/env"); |
||||||
const react = require(require.resolve("react", { paths: [paths.appPath] })); |
const react = require(require.resolve("react", { paths: [paths.appPath] })); |
||||||
|
|
||||||
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); |
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); |
||||||
const useYarn = fs.existsSync(paths.yarnLockFile); |
const useYarn = fs.existsSync(paths.yarnLockFile); |
||||||
const isInteractive = process.stdout.isTTY; |
const isInteractive = process.stdout.isTTY; |
||||||
|
|
||||||
// Warn and crash if required files are missing
|
// Warn and crash if required files are missing
|
||||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { |
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { |
||||||
process.exit(1); |
process.exit(1); |
||||||
} |
} |
||||||
|
|
||||||
// Tools like Cloud9 rely on this.
|
// Tools like Cloud9 rely on this.
|
||||||
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; |
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; |
||||||
const HOST = process.env.HOST || "0.0.0.0"; |
const HOST = process.env.HOST || "0.0.0.0"; |
||||||
|
|
||||||
if (process.env.HOST) { |
if (process.env.HOST) { |
||||||
console.log( |
console.log( |
||||||
chalk.cyan( |
chalk.cyan( |
||||||
`Attempting to bind to HOST environment variable: ${chalk.yellow( |
`Attempting to bind to HOST environment variable: ${chalk.yellow( |
||||||
chalk.bold(process.env.HOST) |
chalk.bold(process.env.HOST) |
||||||
)}` |
)}` |
||||||
) |
) |
||||||
); |
); |
||||||
console.log( |
console.log( |
||||||
`If this was unintentional, check that you haven't mistakenly set it in your shell.` |
`If this was unintentional, check that you haven't mistakenly set it in your shell.` |
||||||
); |
); |
||||||
console.log( |
console.log( |
||||||
`Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}` |
`Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}` |
||||||
); |
); |
||||||
console.log(); |
console.log(); |
||||||
} |
} |
||||||
|
|
||||||
// We require that you explicitly set browsers and do not fall back to
|
// We require that you explicitly set browsers and do not fall back to
|
||||||
// browserslist defaults.
|
// browserslist defaults.
|
||||||
const { checkBrowsers } = require("react-dev-utils/browsersHelper"); |
const { checkBrowsers } = require("react-dev-utils/browsersHelper"); |
||||||
checkBrowsers(paths.appPath, isInteractive) |
checkBrowsers(paths.appPath, isInteractive) |
||||||
.then(() => { |
.then(() => { |
||||||
// We attempt to use the default port but if it is busy, we offer the user to
|
// We attempt to use the default port but if it is busy, we offer the user to
|
||||||
// run on a different port. `choosePort()` Promise resolves to the next free port.
|
// run on a different port. `choosePort()` Promise resolves to the next free port.
|
||||||
return choosePort(HOST, DEFAULT_PORT); |
return choosePort(HOST, DEFAULT_PORT); |
||||||
}) |
}) |
||||||
.then((port) => { |
.then((port) => { |
||||||
if (port == null) { |
if (port == null) { |
||||||
// We have not found a port.
|
// We have not found a port.
|
||||||
return; |
return; |
||||||
} |
} |
||||||
|
|
||||||
const config = configFactory("development"); |
const config = configFactory("development"); |
||||||
const protocol = process.env.HTTPS === "true" ? "https" : "http"; |
const protocol = process.env.HTTPS === "true" ? "https" : "http"; |
||||||
const appName = require(paths.appPackageJson).name; |
const appName = require(paths.appPackageJson).name; |
||||||
|
|
||||||
const useTypeScript = fs.existsSync(paths.appTsConfig); |
const useTypeScript = fs.existsSync(paths.appTsConfig); |
||||||
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true"; |
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true"; |
||||||
const urls = prepareUrls( |
const urls = prepareUrls( |
||||||
protocol, |
protocol, |
||||||
HOST, |
HOST, |
||||||
port, |
port, |
||||||
paths.publicUrlOrPath.slice(0, -1) |
paths.publicUrlOrPath.slice(0, -1) |
||||||
); |
); |
||||||
const devSocket = { |
const devSocket = { |
||||||
warnings: (warnings) => |
warnings: (warnings) => |
||||||
devServer.sockWrite(devServer.sockets, "warnings", warnings), |
devServer.sockWrite(devServer.sockets, "warnings", warnings), |
||||||
errors: (errors) => |
errors: (errors) => |
||||||
devServer.sockWrite(devServer.sockets, "errors", errors), |
devServer.sockWrite(devServer.sockets, "errors", errors), |
||||||
}; |
}; |
||||||
// Create a webpack compiler that is configured with custom messages.
|
// Create a webpack compiler that is configured with custom messages.
|
||||||
const compiler = createCompiler({ |
const compiler = createCompiler({ |
||||||
appName, |
appName, |
||||||
config, |
config, |
||||||
devSocket, |
devSocket, |
||||||
urls, |
urls, |
||||||
useYarn, |
useYarn, |
||||||
useTypeScript, |
useTypeScript, |
||||||
tscCompileOnError, |
tscCompileOnError, |
||||||
webpack, |
webpack, |
||||||
}); |
}); |
||||||
// Load proxy config
|
// Load proxy config
|
||||||
const proxySetting = require(paths.appPackageJson).proxy; |
const proxySetting = require(paths.appPackageJson).proxy; |
||||||
const proxyConfig = prepareProxy( |
const proxyConfig = prepareProxy( |
||||||
proxySetting, |
proxySetting, |
||||||
paths.appPublic, |
paths.appPublic, |
||||||
paths.publicUrlOrPath |
paths.publicUrlOrPath |
||||||
); |
); |
||||||
// Serve webpack assets generated by the compiler over a web server.
|
// Serve webpack assets generated by the compiler over a web server.
|
||||||
const serverConfig = createDevServerConfig( |
const serverConfig = createDevServerConfig( |
||||||
proxyConfig, |
proxyConfig, |
||||||
urls.lanUrlForConfig |
urls.lanUrlForConfig |
||||||
); |
); |
||||||
const devServer = new WebpackDevServer(compiler, serverConfig); |
const devServer = new WebpackDevServer(compiler, serverConfig); |
||||||
// Launch WebpackDevServer.
|
// Launch WebpackDevServer.
|
||||||
devServer.listen(port, HOST, (err) => { |
devServer.listen(port, HOST, (err) => { |
||||||
if (err) { |
if (err) { |
||||||
return console.log(err); |
return console.log(err); |
||||||
} |
} |
||||||
if (isInteractive) { |
if (isInteractive) { |
||||||
clearConsole(); |
clearConsole(); |
||||||
} |
} |
||||||
|
|
||||||
if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) { |
if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) { |
||||||
console.log( |
console.log( |
||||||
chalk.yellow( |
chalk.yellow( |
||||||
`Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.` |
`Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.` |
||||||
) |
) |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
console.log(chalk.cyan("Starting the development server...\n")); |
console.log(chalk.cyan("Starting the development server...\n")); |
||||||
openBrowser(urls.localUrlForBrowser); |
openBrowser(urls.localUrlForBrowser); |
||||||
}); |
}); |
||||||
|
|
||||||
["SIGINT", "SIGTERM"].forEach(function (sig) { |
["SIGINT", "SIGTERM"].forEach(function (sig) { |
||||||
process.on(sig, function () { |
process.on(sig, function () { |
||||||
devServer.close(); |
devServer.close(); |
||||||
process.exit(); |
process.exit(); |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
|
|
||||||
if (process.env.CI !== "true") { |
if (process.env.CI !== "true") { |
||||||
// Gracefully exit when stdin ends
|
// Gracefully exit when stdin ends
|
||||||
process.stdin.on("end", function () { |
process.stdin.on("end", function () { |
||||||
devServer.close(); |
devServer.close(); |
||||||
process.exit(); |
process.exit(); |
||||||
}); |
}); |
||||||
} |
} |
||||||
}) |
}) |
||||||
.catch((err) => { |
.catch((err) => { |
||||||
if (err && err.message) { |
if (err && err.message) { |
||||||
console.log(err.message); |
console.log(err.message); |
||||||
} |
} |
||||||
process.exit(1); |
process.exit(1); |
||||||
}); |
}); |
||||||
|
|||||||
@ -1,36 +1,36 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { ToastContainer } from "react-toastify"; |
import { ToastContainer } from "react-toastify"; |
||||||
import AppRouter from "./AppRouter"; |
import AppRouter from "./AppRouter"; |
||||||
import store from "./Redux/store"; |
import store from "./Redux/store"; |
||||||
import { Provider } from "react-redux"; |
import { Provider } from "react-redux"; |
||||||
import "bootstrap/dist/css/bootstrap.min.css"; |
import "bootstrap/dist/css/bootstrap.min.css"; |
||||||
import "react-toastify/dist/ReactToastify.css"; |
import "react-toastify/dist/ReactToastify.css"; |
||||||
|
|
||||||
class App extends Component { |
class App extends Component { |
||||||
state = { lang: window.lang }; |
state = { lang: window.lang }; |
||||||
componentDidMount() { |
componentDidMount() { |
||||||
window.forceUpdate = () => { |
window.forceUpdate = () => { |
||||||
this.setState({ lang: window.lang }); |
this.setState({ lang: window.lang }); |
||||||
}; |
}; |
||||||
} |
} |
||||||
render() { |
render() { |
||||||
return ( |
return ( |
||||||
<Provider store={store}> |
<Provider store={store}> |
||||||
<AppRouter lang={this.state.lang} /> |
<AppRouter lang={this.state.lang} /> |
||||||
<ToastContainer |
<ToastContainer |
||||||
position="top-right" |
position="top-right" |
||||||
autoClose={2000} |
autoClose={2000} |
||||||
hideProgressBar={true} |
hideProgressBar={true} |
||||||
newestOnTop={true} |
newestOnTop={true} |
||||||
closeOnClick |
closeOnClick |
||||||
rtl={true} |
rtl={true} |
||||||
pauseOnFocusLoss |
pauseOnFocusLoss |
||||||
draggable |
draggable |
||||||
pauseOnHover |
pauseOnHover |
||||||
/> |
/> |
||||||
</Provider> |
</Provider> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default App; |
export default App; |
||||||
|
|||||||
@ -1,420 +1,420 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import "./App.css"; |
import "./App.css"; |
||||||
import { |
import { |
||||||
BrowserRouter as Router, |
BrowserRouter as Router, |
||||||
Route, |
Route, |
||||||
Switch, |
Switch, |
||||||
Redirect, |
Redirect, |
||||||
} from "react-router-dom"; |
} from "react-router-dom"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { user } from "~/Redux/actions"; |
import { user } from "~/Redux/actions"; |
||||||
import { userProduct } from "~/Redux/actions"; |
import { userProduct } from "~/Redux/actions"; |
||||||
import proxy from "./Redux/proxy"; |
import proxy from "./Redux/proxy"; |
||||||
import Home from "./views/Home/index"; |
import Home from "./views/Home/index"; |
||||||
import Faq from "./views/Faq/index"; |
import Faq from "./views/Faq/index"; |
||||||
import Arabickar from "./views/Arabickar/index"; |
import Arabickar from "./views/Arabickar/index"; |
||||||
import Contact from "./views/Contact/index"; |
import Contact from "./views/Contact/index"; |
||||||
import About from "./views/About/index"; |
import About from "./views/About/index"; |
||||||
import Products from "./views/Products/index"; |
import Products from "./views/Products/index"; |
||||||
import Product from "./views/Product/index"; |
import Product from "./views/Product/index"; |
||||||
import QR from "./views/QR/index"; |
import QR from "./views/QR/index"; |
||||||
import Reset from "./views/Reset"; |
import Reset from "./views/Reset"; |
||||||
import Auth from "./views/Auth/index"; |
import Auth from "./views/Auth/index"; |
||||||
import QRScan from "./views/QRScan/index"; |
import QRScan from "./views/QRScan/index"; |
||||||
import Activation from "./views/Activation/index"; |
import Activation from "./views/Activation/index"; |
||||||
import ChatList from "./views/ChatList/index"; |
import ChatList from "./views/ChatList/index"; |
||||||
import Chatroom from "./views/ChatRoom/index"; |
import Chatroom from "./views/ChatRoom/index"; |
||||||
import Cart from "./views/Cart/index"; |
import Cart from "./views/Cart/index"; |
||||||
import Checkout from "./views/Checkout/index"; |
import Checkout from "./views/Checkout/index"; |
||||||
import MyBooks from "./views/MyBooks/index"; |
import MyBooks from "./views/MyBooks/index"; |
||||||
import AR from "./views/AR/index"; |
import AR from "./views/AR/index"; |
||||||
import Download from "./views/Download/index"; |
import Download from "./views/Download/index"; |
||||||
import Support from "./views/Support/index"; |
import Support from "./views/Support/index"; |
||||||
import NewProfile from "./views/NewProfile/index"; |
import NewProfile from "./views/NewProfile/index"; |
||||||
import Blogs from "./views/Blogs/index"; |
import Blogs from "./views/Blogs/index"; |
||||||
import Blog from "./views/Blog/index"; |
import Blog from "./views/Blog/index"; |
||||||
// import Sample from "./views/Sample/index";
|
// import Sample from "./views/Sample/index";
|
||||||
import PDF from "./views/PDF/index"; |
import PDF from "./views/PDF/index"; |
||||||
import Orders from "./views/Orders"; |
import Orders from "./views/Orders"; |
||||||
// import MyBooks2 from "./views/MyBook2";
|
// import MyBooks2 from "./views/MyBook2";
|
||||||
class AppRouter extends Component { |
class AppRouter extends Component { |
||||||
constructor(props) { |
constructor(props) { |
||||||
super(props); |
super(props); |
||||||
window.router = this; |
window.router = this; |
||||||
this.state = { |
this.state = { |
||||||
cartControll: false, |
cartControll: false, |
||||||
}; |
}; |
||||||
} |
} |
||||||
|
|
||||||
state = {}; |
state = {}; |
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) { |
componentDidUpdate(prevProps, prevState) { |
||||||
if (this.props.userProductList > 0) { |
if (this.props.userProductList > 0) { |
||||||
if (!this.state.cartControll) { |
if (!this.state.cartControll) { |
||||||
this.setState({ |
this.setState({ |
||||||
cartControll: true, |
cartControll: true, |
||||||
}); |
}); |
||||||
} |
} |
||||||
} else { |
} else { |
||||||
if (!this.state.cartControll) { |
if (!this.state.cartControll) { |
||||||
this.setState({ |
this.setState({ |
||||||
cartControll: true, |
cartControll: true, |
||||||
}); |
}); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
componentDidMount() { |
componentDidMount() { |
||||||
// if (proxy.status() && this.props.userProductList == null)
|
// if (proxy.status() && this.props.userProductList == null)
|
||||||
// this.props.getUserProductList();
|
// this.props.getUserProductList();
|
||||||
} |
} |
||||||
|
|
||||||
render() { |
render() { |
||||||
const mobile = window.innerWidth < 1000 ? true : false; |
const mobile = window.innerWidth < 1000 ? true : false; |
||||||
let status = proxy.status(); |
let status = proxy.status(); |
||||||
const afterLogin = localStorage.getItem("afterLogin"); |
const afterLogin = localStorage.getItem("afterLogin"); |
||||||
|
|
||||||
let home = ( |
let home = ( |
||||||
<Route exact path={"/"}> |
<Route exact path={"/"}> |
||||||
{status && status.status === 0 ? ( |
{status && status.status === 0 ? ( |
||||||
<Auth page={"profile"} lang={this.props.lang} /> |
<Auth page={"profile"} lang={this.props.lang} /> |
||||||
) : afterLogin ? ( |
) : afterLogin ? ( |
||||||
<> |
<> |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: afterLogin, |
pathname: afterLogin, |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
</> |
</> |
||||||
) : ( |
) : ( |
||||||
<Home status={status} lang={this.props.lang} /> |
<Home status={status} lang={this.props.lang} /> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
); |
); |
||||||
const pathname = window.location.pathname; |
const pathname = window.location.pathname; |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className={` ${ |
className={` ${ |
||||||
localStorage.getItem("language") === "en" ? "ltr" : "rtl" |
localStorage.getItem("language") === "en" ? "ltr" : "rtl" |
||||||
}`}
|
}`}
|
||||||
style={{ height: "100%" }} |
style={{ height: "100%" }} |
||||||
> |
> |
||||||
<Router> |
<Router> |
||||||
<Switch> |
<Switch> |
||||||
{home} |
{home} |
||||||
<Route path={"/Arabickar"}> |
<Route path={"/Arabickar"}> |
||||||
<Arabickar lang={this.props.lang} /> |
<Arabickar lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/reset"}> |
<Route exact path={"/reset"}> |
||||||
<Reset lang={this.props.lang} /> |
<Reset lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/faq"}> |
<Route exact path={"/faq"}> |
||||||
<Faq lang={this.props.lang} /> |
<Faq lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/contact"}> |
<Route exact path={"/contact"}> |
||||||
<Contact lang={this.props.lang} /> |
<Contact lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/download"}> |
<Route exact path={"/download"}> |
||||||
<Download lang={this.props.lang} /> |
<Download lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/blogs"}> |
<Route exact path={"/blogs"}> |
||||||
<Blogs lang={this.props.lang} /> |
<Blogs lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/blogs/:id"}> |
<Route exact path={"/blogs/:id"}> |
||||||
<Blog lang={this.props.lang} /> |
<Blog lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/page/:name"}> |
<Route exact path={"/page/:name"}> |
||||||
<Blog lang={this.props.lang} /> |
<Blog lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/about"}> |
<Route exact path={"/about"}> |
||||||
<About lang={this.props.lang} /> |
<About lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/products"}> |
<Route exact path={"/products"}> |
||||||
<Products lang={this.props.lang} /> |
<Products lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path="/orders"> |
<Route exact path="/orders"> |
||||||
<Orders lang={this.props.lang} /> |
<Orders lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path="/mybooks"> |
<Route exact path="/mybooks"> |
||||||
<MyBooks lang={this.props.lang} /> |
<MyBooks lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
{/* <Route path={"/sample"}> |
{/* <Route path={"/sample"}> |
||||||
<Sample /> |
<Sample /> |
||||||
</Route> */} |
</Route> */} |
||||||
<Route path={"/pdf"}> |
<Route path={"/pdf"}> |
||||||
<PDF lang={this.props.lang} /> |
<PDF lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/newProfile"}> |
<Route exact path={"/newProfile"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<NewProfile lang={this.props.lang} /> |
<NewProfile lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : ( |
) : ( |
||||||
<NewProfile /> |
<NewProfile /> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/support"}> |
<Route exact path={"/support"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<Support lang={this.props.lang} /> |
<Support lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : ( |
) : ( |
||||||
<Support /> |
<Support /> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/products/digital/:id"}> |
<Route exact path={"/products/digital/:id"}> |
||||||
<Product page="digital" lang={this.props.lang} /> |
<Product page="digital" lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/products/physical/:id"}> |
<Route exact path={"/products/physical/:id"}> |
||||||
<Product page="physical" lang={this.props.lang} /> |
<Product page="physical" lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/qr"}> |
<Route exact path={"/qr"}> |
||||||
<QR lang={this.props.lang} /> |
<QR lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/auth"}> |
<Route exact path={"/auth"}> |
||||||
{proxy.status() ? ( |
{proxy.status() ? ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) : ( |
) : ( |
||||||
<Auth lang={this.props.lang} /> |
<Auth lang={this.props.lang} /> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/support"}> |
<Route exact path={"/support"}> |
||||||
<Support lang={this.props.lang} /> |
<Support lang={this.props.lang} /> |
||||||
{/* {mobile ? ( |
{/* {mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<Support /> |
<Support /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/auth", |
pathname: "/auth", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : ( |
) : ( |
||||||
<Support /> |
<Support /> |
||||||
)} */} |
)} */} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/products/digital/:id"}> |
<Route exact path={"/products/digital/:id"}> |
||||||
<Product page="digital" lang={this.props.lang} /> |
<Product page="digital" lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/products/physical/:id"}> |
<Route exact path={"/products/physical/:id"}> |
||||||
<Product page="physical" lang={this.props.lang} /> |
<Product page="physical" lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/qr"}> |
<Route exact path={"/qr"}> |
||||||
<QR lang={this.props.lang} /> |
<QR lang={this.props.lang} /> |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/auth"}> |
<Route exact path={"/auth"}> |
||||||
{proxy.status() ? ( |
{proxy.status() ? ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) : ( |
) : ( |
||||||
<Auth lang={this.props.lang} /> |
<Auth lang={this.props.lang} /> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/profile"}> |
<Route exact path={"/profile"}> |
||||||
{status ? <Auth page={"profile"} lang={this.props.lang} /> : null} |
{status ? <Auth page={"profile"} lang={this.props.lang} /> : null} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/qr-scan"}> |
<Route exact path={"/qr-scan"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<QRScan lang={this.props.lang} /> |
<QRScan lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : status ? ( |
) : status ? ( |
||||||
<QRScan lang={this.props.lang} /> |
<QRScan lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/auth", |
pathname: "/auth", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/activation"}> |
<Route exact path={"/activation"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<Activation lang={this.props.lang} /> |
<Activation lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : status ? ( |
) : status ? ( |
||||||
<Activation lang={this.props.lang} /> |
<Activation lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/auth", |
pathname: "/auth", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/chatroom"}> |
<Route exact path={"/chatroom"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<ChatList lang={this.props.lang} /> |
<ChatList lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : status ? ( |
) : status ? ( |
||||||
<ChatList lang={this.props.lang} /> |
<ChatList lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/auth", |
pathname: "/auth", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
|
|
||||||
<Route exact path={"/cart"}> |
<Route exact path={"/cart"}> |
||||||
<Cart lang={this.props.lang} /> |
<Cart lang={this.props.lang} /> |
||||||
{/* {status ? ( |
{/* {status ? ( |
||||||
<Cart /> |
<Cart /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} */} |
)} */} |
||||||
</Route> |
</Route> |
||||||
<Route exact path={"/checkout"}> |
<Route exact path={"/checkout"}> |
||||||
{status ? ( |
{status ? ( |
||||||
<Checkout lang={this.props.lang} /> |
<Checkout lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
{/* <Route exact path={"/mybooks"}> |
{/* <Route exact path={"/mybooks"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<MyBooks /> |
<MyBooks /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : status ? ( |
) : status ? ( |
||||||
<MyBooks /> |
<MyBooks /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/auth", |
pathname: "/auth", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</Route> */} |
</Route> */} |
||||||
<Route exact path={"/ar"}> |
<Route exact path={"/ar"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<AR lang={this.props.lang} /> |
<AR lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : status ? ( |
) : status ? ( |
||||||
<AR lang={this.props.lang} /> |
<AR lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/auth", |
pathname: "/auth", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
|
|
||||||
<Route exact path={"/chatroom/:id"}> |
<Route exact path={"/chatroom/:id"}> |
||||||
{mobile ? ( |
{mobile ? ( |
||||||
status ? ( |
status ? ( |
||||||
<Chatroom lang={this.props.lang} /> |
<Chatroom lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/", |
pathname: "/", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
) |
) |
||||||
) : status ? ( |
) : status ? ( |
||||||
<Chatroom lang={this.props.lang} /> |
<Chatroom lang={this.props.lang} /> |
||||||
) : ( |
) : ( |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/auth", |
pathname: "/auth", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</Route> |
</Route> |
||||||
<Route path={""}> |
<Route path={""}> |
||||||
{/* {pathname.split("/").slice(-1)[0] == "origami" ? ( |
{/* {pathname.split("/").slice(-1)[0] == "origami" ? ( |
||||||
<Origami /> |
<Origami /> |
||||||
) : ( */} |
) : ( */} |
||||||
<Redirect |
<Redirect |
||||||
to={{ |
to={{ |
||||||
pathname: "/qr", |
pathname: "/qr", |
||||||
search: |
search: |
||||||
"?id=" + |
"?id=" + |
||||||
window.location.pathname.slice( |
window.location.pathname.slice( |
||||||
window.location.pathname.lastIndexOf("/") + 1, |
window.location.pathname.lastIndexOf("/") + 1, |
||||||
window.location.pathname.length |
window.location.pathname.length |
||||||
), |
), |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
{/* )} */} |
{/* )} */} |
||||||
</Route> |
</Route> |
||||||
</Switch> |
</Switch> |
||||||
</Router> |
</Router> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
profile: state.user.status, |
profile: state.user.status, |
||||||
userProductList: state.userProduct.list, |
userProductList: state.userProduct.list, |
||||||
config: state.publicApi.config, |
config: state.publicApi.config, |
||||||
lang: state.publicApi.lang, |
lang: state.publicApi.lang, |
||||||
// status: state.user.status,
|
// status: state.user.status,
|
||||||
}), |
}), |
||||||
{ getProfile: user.getProfile, getUserProductList: userProduct.list } |
{ getProfile: user.getProfile, getUserProductList: userProduct.list } |
||||||
)(AppRouter); |
)(AppRouter); |
||||||
|
|||||||
@ -1,57 +1,57 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
//import QrReader from "react-camera-qr";
|
//import QrReader from "react-camera-qr";
|
||||||
import QrReader from "react-qr-reader"; |
import QrReader from "react-qr-reader"; |
||||||
|
|
||||||
export default class Scanner extends Component { |
export default class Scanner extends Component { |
||||||
constructor(props) { |
constructor(props) { |
||||||
super(props); |
super(props); |
||||||
this.state = { |
this.state = { |
||||||
delay: 100, |
delay: 100, |
||||||
result: "", |
result: "", |
||||||
}; |
}; |
||||||
|
|
||||||
this.handleScan = this.handleScan.bind(this); |
this.handleScan = this.handleScan.bind(this); |
||||||
} |
} |
||||||
|
|
||||||
handleScan(data) { |
handleScan(data) { |
||||||
this.props.parent.setState({ |
this.props.parent.setState({ |
||||||
value: data, |
value: data, |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
handleError(err) { |
handleError(err) { |
||||||
console.error(err); |
console.error(err); |
||||||
} |
} |
||||||
|
|
||||||
render() { |
render() { |
||||||
let cam = this.props.parent.state.cameraId; |
let cam = this.props.parent.state.cameraId; |
||||||
|
|
||||||
let facingMode = this.props.parent.state.cameraId; |
let facingMode = this.props.parent.state.cameraId; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<QrReader |
<QrReader |
||||||
delay={800 + Math.random() * 10} |
delay={800 + Math.random() * 10} |
||||||
onError={this.handleError} |
onError={this.handleError} |
||||||
onScan={this.handleScan} |
onScan={this.handleScan} |
||||||
style={{ width: "100%" }} |
style={{ width: "100%" }} |
||||||
cameraId={cam} |
cameraId={cam} |
||||||
facingMode={facingMode} |
facingMode={facingMode} |
||||||
/> |
/> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<QrReader |
<QrReader |
||||||
delay={800 + Math.random() * 10} |
delay={800 + Math.random() * 10} |
||||||
onError={this.handleError} |
onError={this.handleError} |
||||||
onScan={this.handleScan} |
onScan={this.handleScan} |
||||||
style={{ width: "100%" }} |
style={{ width: "100%" }} |
||||||
cameraId={cam} |
cameraId={cam} |
||||||
facingMode={facingMode} |
facingMode={facingMode} |
||||||
/> |
/> |
||||||
) : null} |
) : null} |
||||||
{/* <div>{facingMode[this.props.parent.state.facingMode]}</div> |
{/* <div>{facingMode[this.props.parent.state.facingMode]}</div> |
||||||
<div>{(this.state?.devices || []).join(",")}</div> */} |
<div>{(this.state?.devices || []).join(",")}</div> */} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,244 +1,244 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
import Footer from "../Home/Footer/index"; |
import Footer from "../Home/Footer/index"; |
||||||
|
|
||||||
import Scanner from "./Scanner/index"; |
import Scanner from "./Scanner/index"; |
||||||
import LastQr from "./LastQr/index"; |
import LastQr from "./LastQr/index"; |
||||||
import Modal from "./Modal/index"; |
import Modal from "./Modal/index"; |
||||||
import ReplayIcon from "@material-ui/icons/Replay"; |
import ReplayIcon from "@material-ui/icons/Replay"; |
||||||
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; |
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; |
||||||
|
|
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { qr } from "~/Redux/actions"; |
import { qr } from "~/Redux/actions"; |
||||||
|
|
||||||
import sciense_6 from "../../assets/images/sciense-6.png"; |
import sciense_6 from "../../assets/images/sciense-6.png"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, |
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, |
||||||
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, |
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
class QRScan extends Component { |
class QRScan extends Component { |
||||||
state = { |
state = { |
||||||
value: null, |
value: null, |
||||||
facingMode: 0, |
facingMode: 0, |
||||||
tail: null, |
tail: null, |
||||||
cameraIds: [], |
cameraIds: [], |
||||||
cameraId: "rare", |
cameraId: "rare", |
||||||
}; |
}; |
||||||
componentDidMount() { |
componentDidMount() { |
||||||
navigator.mediaDevices.enumerateDevices().then((devices) => { |
navigator.mediaDevices.enumerateDevices().then((devices) => { |
||||||
console.log({ devices }); |
console.log({ devices }); |
||||||
var cameraIds = devices |
var cameraIds = devices |
||||||
.filter(function (device) { |
.filter(function (device) { |
||||||
return device.kind === "videoinput"; |
return device.kind === "videoinput"; |
||||||
}) |
}) |
||||||
.map((e) => [e.label, e.deviceId]); |
.map((e) => [e.label, e.deviceId]); |
||||||
|
|
||||||
var environmentPattern = /rear|back|environment/gi; |
var environmentPattern = /rear|back|environment/gi; |
||||||
var userPattern = /front|user|face/gi; |
var userPattern = /front|user|face/gi; |
||||||
var backs = cameraIds.filter((label) => environmentPattern.test(label)); |
var backs = cameraIds.filter((label) => environmentPattern.test(label)); |
||||||
var notFronts = cameraIds.filter((label) => !userPattern.test(label)); |
var notFronts = cameraIds.filter((label) => !userPattern.test(label)); |
||||||
let cameraId = backs[0] || notFronts[0] || cameraIds[0]; |
let cameraId = backs[0] || notFronts[0] || cameraIds[0]; |
||||||
let cameraIdx = cameraIds.findIndex((cam) => cam[1] === cameraId[1]); |
let cameraIdx = cameraIds.findIndex((cam) => cam[1] === cameraId[1]); |
||||||
console.log({ |
console.log({ |
||||||
cameraIds, |
cameraIds, |
||||||
cameraId: cameraId[0], |
cameraId: cameraId[0], |
||||||
cameraIdx, |
cameraIdx, |
||||||
}); |
}); |
||||||
this.setState({ |
this.setState({ |
||||||
cameraIds, |
cameraIds, |
||||||
cameraId, |
cameraId, |
||||||
cameraIdx, |
cameraIdx, |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
} |
} |
||||||
async componentDidUpdate() { |
async componentDidUpdate() { |
||||||
if (this.state.value) { |
if (this.state.value) { |
||||||
let tail = this.state.value.slice( |
let tail = this.state.value.slice( |
||||||
this.state.value.lastIndexOf("/") + 1, |
this.state.value.lastIndexOf("/") + 1, |
||||||
this.state.value.length |
this.state.value.length |
||||||
); |
); |
||||||
this.props.info({ tail: tail }); |
this.props.info({ tail: tail }); |
||||||
this.setState({ value: null, tail: tail }); |
this.setState({ value: null, tail: tail }); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { data } = this.props; |
const { data } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 100 ? ( |
{window.innerWidth > 100 ? ( |
||||||
<> |
<> |
||||||
<div className="qr-scan d-flex flex-column align-items-center"> |
<div className="qr-scan d-flex flex-column align-items-center"> |
||||||
<Navbar /> |
<Navbar /> |
||||||
<div className="qr-scan__box d-flex flex-column"> |
<div className="qr-scan__box d-flex flex-column"> |
||||||
<header className="qr-scan__box--header d-flex flex-column"> |
<header className="qr-scan__box--header d-flex flex-column"> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
||||||
{window.t("نکته")} |
{window.t("نکته")} |
||||||
</h1> |
</h1> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}> |
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
{window.t( |
{window.t( |
||||||
"لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار" |
"لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار" |
||||||
)} |
)} |
||||||
{window.t("دهید تا اسکن دوربین انجام شود")}{" "} |
{window.t("دهید تا اسکن دوربین انجام شود")}{" "} |
||||||
</p> |
</p> |
||||||
</header> |
</header> |
||||||
{this.state.cameraIds.length > 1 ? ( |
{this.state.cameraIds.length > 1 ? ( |
||||||
<div className="qr-scan__box--select d-flex"> |
<div className="qr-scan__box--select d-flex"> |
||||||
<select |
<select |
||||||
value={this.state.cameraId} |
value={this.state.cameraId} |
||||||
onChange={(e) => |
onChange={(e) => |
||||||
this.setState({ |
this.setState({ |
||||||
facingMode: Math.round() * 3, |
facingMode: Math.round() * 3, |
||||||
cameraId: e.target.value, |
cameraId: e.target.value, |
||||||
}) |
}) |
||||||
} |
} |
||||||
> |
> |
||||||
{this.state.cameraIds.map((e) => ( |
{this.state.cameraIds.map((e) => ( |
||||||
<option value={e[1]}>{e[0] || e[1]}</option> |
<option value={e[1]}>{e[0] || e[1]}</option> |
||||||
))} |
))} |
||||||
</select> |
</select> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> |
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> |
||||||
<FlipCameraIosIcon |
<FlipCameraIosIcon |
||||||
style={{ |
style={{ |
||||||
fontSize: 35, |
fontSize: 35, |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: 10, |
left: 10, |
||||||
top: 10, |
top: 10, |
||||||
zIndex: 100, |
zIndex: 100, |
||||||
color: "white", |
color: "white", |
||||||
}} |
}} |
||||||
onClick={() => |
onClick={() => |
||||||
this.setState({ |
this.setState({ |
||||||
facingMode: (this.state.facingMode + 1) % 2, |
facingMode: (this.state.facingMode + 1) % 2, |
||||||
}) |
}) |
||||||
} |
} |
||||||
/> |
/> |
||||||
{this.state.value !== null ? ( |
{this.state.value !== null ? ( |
||||||
<div |
<div |
||||||
style={{ zIndex: 1000 }} |
style={{ zIndex: 1000 }} |
||||||
onClick={() => this.setState({ value: null })} |
onClick={() => this.setState({ value: null })} |
||||||
> |
> |
||||||
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<Scanner parent={this} cameraId={this.state.cameraId} /> |
<Scanner parent={this} cameraId={this.state.cameraId} /> |
||||||
)} |
)} |
||||||
</section> |
</section> |
||||||
{this.state.tail === null ? null : ( |
{this.state.tail === null ? null : ( |
||||||
<Modal tail={this.state.tail} /> |
<Modal tail={this.state.tail} /> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer /> |
<Footer /> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 100 ? ( |
{window.innerWidth < 100 ? ( |
||||||
<> |
<> |
||||||
<div className="mobile-qr-scan d-flex flex-column"> |
<div className="mobile-qr-scan d-flex flex-column"> |
||||||
<Navbar page="qr-scan" /> |
<Navbar page="qr-scan" /> |
||||||
|
|
||||||
<header className="mobile-qr-scan__header d-flex flex-column"></header> |
<header className="mobile-qr-scan__header d-flex flex-column"></header> |
||||||
|
|
||||||
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> |
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> |
||||||
{this.state.cameraIds.length > 1 ? ( |
{this.state.cameraIds.length > 1 ? ( |
||||||
<> |
<> |
||||||
<div |
<div |
||||||
className="qr-scan__box--select d-flex" |
className="qr-scan__box--select d-flex" |
||||||
style={{ position: "absolute", zIndex: 500 }} |
style={{ position: "absolute", zIndex: 500 }} |
||||||
> |
> |
||||||
<select |
<select |
||||||
value={this.state.cameraId} |
value={this.state.cameraId} |
||||||
onChange={(e) => |
onChange={(e) => |
||||||
this.setState({ |
this.setState({ |
||||||
facingMode: Math.round() * 3, |
facingMode: Math.round() * 3, |
||||||
cameraId: e.target.value, |
cameraId: e.target.value, |
||||||
}) |
}) |
||||||
} |
} |
||||||
> |
> |
||||||
{this.state.cameraIds.map((e) => ( |
{this.state.cameraIds.map((e) => ( |
||||||
<option value={e[1]}> |
<option value={e[1]}> |
||||||
{e[0]} |
{e[0]} |
||||||
{e[1]} |
{e[1]} |
||||||
</option> |
</option> |
||||||
))} |
))} |
||||||
</select> |
</select> |
||||||
</div> |
</div> |
||||||
<FlipCameraIosIcon |
<FlipCameraIosIcon |
||||||
style={{ |
style={{ |
||||||
fontSize: 35, |
fontSize: 35, |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: 10, |
left: 10, |
||||||
top: 10, |
top: 10, |
||||||
zIndex: 100, |
zIndex: 100, |
||||||
color: "white", |
color: "white", |
||||||
}} |
}} |
||||||
onClick={() => { |
onClick={() => { |
||||||
let cameraIdx = |
let cameraIdx = |
||||||
(this.state.cameraIdx + 1) % |
(this.state.cameraIdx + 1) % |
||||||
this.state.cameraIds.length; |
this.state.cameraIds.length; |
||||||
|
|
||||||
this.setState({ |
this.setState({ |
||||||
cameraIdx, |
cameraIdx, |
||||||
cameraId: this.state.cameraIds[cameraIdx], |
cameraId: this.state.cameraIds[cameraIdx], |
||||||
}); |
}); |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
{false && this.state.cameraId === "" ? ( |
{false && this.state.cameraId === "" ? ( |
||||||
<div |
<div |
||||||
style={{ zIndex: 1000 }} |
style={{ zIndex: 1000 }} |
||||||
onClick={() => this.setState({ value: null })} |
onClick={() => this.setState({ value: null })} |
||||||
> |
> |
||||||
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<Scanner parent={this} cameraId={this.state.cameraId} /> |
<Scanner parent={this} cameraId={this.state.cameraId} /> |
||||||
)} |
)} |
||||||
</section> |
</section> |
||||||
{this.state.tail === null ? null : ( |
{this.state.tail === null ? null : ( |
||||||
<Modal parent={this} tail={this.state.tail} /> |
<Modal parent={this} tail={this.state.tail} /> |
||||||
)} |
)} |
||||||
{localStorage.getItem("latestQr") ? ( |
{localStorage.getItem("latestQr") ? ( |
||||||
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
||||||
<h2>{window.t("آخرین مشاهدات")}</h2> |
<h2>{window.t("آخرین مشاهدات")}</h2> |
||||||
{data.map((item, i) => ( |
{data.map((item, i) => ( |
||||||
<LastQr |
<LastQr |
||||||
data={JSON.parse(localStorage.getItem("latestQr"))} |
data={JSON.parse(localStorage.getItem("latestQr"))} |
||||||
key={i} |
key={i} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</section> |
</section> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect((state) => ({ list: state.qr.list }), { info: qr.info })( |
export default connect((state) => ({ list: state.qr.list }), { info: qr.info })( |
||||||
QRScan |
QRScan |
||||||
); |
); |
||||||
|
|
||||||
QRScan.defaultProps = { |
QRScan.defaultProps = { |
||||||
data: [ |
data: [ |
||||||
{ |
{ |
||||||
title: "ریاضیات گسسته خیلی پیشرفته", |
title: "ریاضیات گسسته خیلی پیشرفته", |
||||||
subTitle: "پایه هفتم ابتدایی", |
subTitle: "پایه هفتم ابتدایی", |
||||||
page: 13, |
page: 13, |
||||||
image: sciense_6, |
image: sciense_6, |
||||||
}, |
}, |
||||||
], |
], |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,28 +1,28 @@ |
|||||||
import { toast } from "react-toastify"; |
import { toast } from "react-toastify"; |
||||||
|
|
||||||
const initialState = { |
const initialState = { |
||||||
loading: false, |
loading: false, |
||||||
error: null, |
error: null, |
||||||
list: [], |
list: [], |
||||||
}; |
}; |
||||||
export default function blog(state = initialState, action) { |
export default function blog(state = initialState, action) { |
||||||
let { type, data } = action; |
let { type, data } = action; |
||||||
switch (type) { |
switch (type) { |
||||||
case "blog/list": |
case "blog/list": |
||||||
return { ...state, loading: false, list: data, error: null }; |
return { ...state, loading: false, list: data, error: null }; |
||||||
case "blog/update": |
case "blog/update": |
||||||
return { ...state, loading: false, error: null }; |
return { ...state, loading: false, error: null }; |
||||||
case "blog/add": |
case "blog/add": |
||||||
return { ...state, loading: false, error: null }; |
return { ...state, loading: false, error: null }; |
||||||
case "blog/delete": |
case "blog/delete": |
||||||
return { ...state, loading: false, error: null }; |
return { ...state, loading: false, error: null }; |
||||||
/////////////
|
/////////////
|
||||||
case "blog/loading": |
case "blog/loading": |
||||||
return { ...state, loading: true }; |
return { ...state, loading: true }; |
||||||
case "blog/error": |
case "blog/error": |
||||||
toast.error(data.message); |
toast.error(data.message); |
||||||
return { ...state, loading: false, error: data.message }; |
return { ...state, loading: false, error: data.message }; |
||||||
default: |
default: |
||||||
return state; |
return state; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,281 +1,281 @@ |
|||||||
import React, { Component, Fragment } from "react"; |
import React, { Component, Fragment } from "react"; |
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
import Footer from "../Home/Footer/index"; |
import Footer from "../Home/Footer/index"; |
||||||
|
|
||||||
import pic from "../../assets/images/pic.png"; |
import pic from "../../assets/images/pic.png"; |
||||||
import aboutLg from "../../assets/images/about-lg.png"; |
import aboutLg from "../../assets/images/about-lg.png"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
const maxMobileSize = 650; |
const maxMobileSize = 650; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
||||||
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, |
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, |
||||||
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
}, |
}, |
||||||
mobile: { |
mobile: { |
||||||
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18, |
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18, |
||||||
p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28, |
p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28, |
||||||
h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23, |
h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23, |
||||||
li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28, |
li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
export default class About extends Component { |
export default class About extends Component { |
||||||
render() { |
render() { |
||||||
const state = { |
const state = { |
||||||
first: { |
first: { |
||||||
title: window.t("درباره ما"), |
title: window.t("درباره ما"), |
||||||
text: window.t( |
text: window.t( |
||||||
"ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است." |
"ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است." |
||||||
), |
), |
||||||
}, |
}, |
||||||
fury: { |
fury: { |
||||||
title: window.t("ماموریت ما در دانوین چیست ؟"), |
title: window.t("ماموریت ما در دانوین چیست ؟"), |
||||||
text: window.t( |
text: window.t( |
||||||
"ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول" |
"ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول" |
||||||
), |
), |
||||||
}, |
}, |
||||||
|
|
||||||
keywords: { |
keywords: { |
||||||
title: window.t("کیفیت آموزش را بالا میبریم"), |
title: window.t("کیفیت آموزش را بالا میبریم"), |
||||||
list: [ |
list: [ |
||||||
window.t( |
window.t( |
||||||
"شایستگی در ایجاد فهم علمی در موضوع هدف و در موضوعات وابسته به آن" |
"شایستگی در ایجاد فهم علمی در موضوع هدف و در موضوعات وابسته به آن" |
||||||
), |
), |
||||||
window.t( |
window.t( |
||||||
"شایستگی در ایجاد زمینه ی معرفتی- ارزشی موثر برای محتواهای آموزشی" |
"شایستگی در ایجاد زمینه ی معرفتی- ارزشی موثر برای محتواهای آموزشی" |
||||||
), |
), |
||||||
], |
], |
||||||
}, |
}, |
||||||
keywords2: { |
keywords2: { |
||||||
title: window.t("جذابیت کلید بهبود یادگیری"), |
title: window.t("جذابیت کلید بهبود یادگیری"), |
||||||
list: [ |
list: [ |
||||||
window.t( |
window.t( |
||||||
"بکارگیری عوامل متنوع سازگار با ارزشها برای علاقمندی دانش آموز و معلم به استفاده از محتوای دانوین" |
"بکارگیری عوامل متنوع سازگار با ارزشها برای علاقمندی دانش آموز و معلم به استفاده از محتوای دانوین" |
||||||
), |
), |
||||||
window.t( |
window.t( |
||||||
"سازگار با نظام آ.پ : بطوریکه بتواند در مدارس فعلی مورد استفاده قرار گرفته و با نظام رسمی فعلی در تضاد نباشد" |
"سازگار با نظام آ.پ : بطوریکه بتواند در مدارس فعلی مورد استفاده قرار گرفته و با نظام رسمی فعلی در تضاد نباشد" |
||||||
), |
), |
||||||
window.t( |
window.t( |
||||||
"در راستای نیل به سند تحول : تلاش برای نزدیکی گام به گام به آرمانها و اهداف سند تحول" |
"در راستای نیل به سند تحول : تلاش برای نزدیکی گام به گام به آرمانها و اهداف سند تحول" |
||||||
), |
), |
||||||
], |
], |
||||||
}, |
}, |
||||||
advantages: { |
advantages: { |
||||||
title: window.t("مزیت رقابتی دانوین"), |
title: window.t("مزیت رقابتی دانوین"), |
||||||
list: [ |
list: [ |
||||||
window.t( |
window.t( |
||||||
"بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)" |
"بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)" |
||||||
), |
), |
||||||
window.t("دارای رویکرد آموزش سرگرم کننده"), |
window.t("دارای رویکرد آموزش سرگرم کننده"), |
||||||
window.t("بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی"), |
window.t("بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی"), |
||||||
window.t("رویکرد معرفتی-ارزشی"), |
window.t("رویکرد معرفتی-ارزشی"), |
||||||
window.t("ویدئو های منحصر بفرد"), |
window.t("ویدئو های منحصر بفرد"), |
||||||
window.t("متن گفتگو محور ، روایی ، قابل فهم ،جذاب و سرگرم کننده"), |
window.t("متن گفتگو محور ، روایی ، قابل فهم ،جذاب و سرگرم کننده"), |
||||||
], |
], |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
const { fury, advantages, keywords, keywords2, first } = state; |
const { fury, advantages, keywords, keywords2, first } = state; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<> |
<> |
||||||
<div className={"about d-flex flex-column align-items-center "}> |
<div className={"about d-flex flex-column align-items-center "}> |
||||||
<Navbar page={"about"} /> |
<Navbar page={"about"} /> |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
"about__first d-flex " + (window.lang == "en" ? "ltr" : "") |
"about__first d-flex " + (window.lang == "en" ? "ltr" : "") |
||||||
} |
} |
||||||
> |
> |
||||||
<div className={"top align-self-start"}> |
<div className={"top align-self-start"}> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
||||||
{first.title} |
{first.title} |
||||||
</h1> |
</h1> |
||||||
<p |
<p |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.desktop.p + 2, |
fontSize: fontSize.desktop.p + 2, |
||||||
lineHeight: 2, |
lineHeight: 2, |
||||||
}} |
}} |
||||||
> |
> |
||||||
{first.text} |
{first.text} |
||||||
</p> |
</p> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className="linegr" |
className="linegr" |
||||||
style={{ width: "100%", height: "4px" }} |
style={{ width: "100%", height: "4px" }} |
||||||
></div> |
></div> |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
"about__fury d-flex " + (window.lang == "en" ? "ltr" : "") |
"about__fury d-flex " + (window.lang == "en" ? "ltr" : "") |
||||||
} |
} |
||||||
> |
> |
||||||
<div className="about__fury--right d-flex flex-column justify-content-center"> |
<div className="about__fury--right d-flex flex-column justify-content-center"> |
||||||
<div className="right-top align-self-start"> |
<div className="right-top align-self-start"> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
||||||
{fury.title} |
{fury.title} |
||||||
</h1> |
</h1> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p> |
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p> |
||||||
</div> |
</div> |
||||||
<div className="right-bottom align-self-start"> |
<div className="right-bottom align-self-start"> |
||||||
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
||||||
{keywords.title} |
{keywords.title} |
||||||
</h2> |
</h2> |
||||||
<ul> |
<ul> |
||||||
{keywords.list.map((item, i) => ( |
{keywords.list.map((item, i) => ( |
||||||
<Fragment key={i}> |
<Fragment key={i}> |
||||||
<li |
<li |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.desktop.li, |
fontSize: fontSize.desktop.li, |
||||||
padding: 5, |
padding: 5, |
||||||
}} |
}} |
||||||
> |
> |
||||||
{item} |
{item} |
||||||
</li> |
</li> |
||||||
</Fragment> |
</Fragment> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
<div className="right-bottom align-self-start"> |
<div className="right-bottom align-self-start"> |
||||||
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
||||||
{keywords2.title} |
{keywords2.title} |
||||||
</h2> |
</h2> |
||||||
<ul> |
<ul> |
||||||
{keywords2.list.map((item, i) => ( |
{keywords2.list.map((item, i) => ( |
||||||
<Fragment key={i}> |
<Fragment key={i}> |
||||||
<li |
<li |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.desktop.li, |
fontSize: fontSize.desktop.li, |
||||||
padding: 5, |
padding: 5, |
||||||
}} |
}} |
||||||
> |
> |
||||||
{item} |
{item} |
||||||
</li> |
</li> |
||||||
</Fragment> |
</Fragment> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className="about__fury--left d-flex align-items-center"> |
<div className="about__fury--left d-flex align-items-center"> |
||||||
<img className="about__fury--left__1" src={aboutLg} alt="" /> |
<img className="about__fury--left__1" src={aboutLg} alt="" /> |
||||||
{/* {this.props.absoluteImages.map((item, i) => ( |
{/* {this.props.absoluteImages.map((item, i) => ( |
||||||
<img src={item.imageUrl} className={item.class} /> |
<img src={item.imageUrl} className={item.class} /> |
||||||
))} */} |
))} */} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
"about__advantages d-flex " + |
"about__advantages d-flex " + |
||||||
(window.lang == "en" ? "ltr" : "") |
(window.lang == "en" ? "ltr" : "") |
||||||
} |
} |
||||||
> |
> |
||||||
<div className="about__advantages--right d-flex"> |
<div className="about__advantages--right d-flex"> |
||||||
<img src={pic} alt="" /> |
<img src={pic} alt="" /> |
||||||
</div> |
</div> |
||||||
<div className="about__advantages--left"> |
<div className="about__advantages--left"> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
||||||
{advantages.title} |
{advantages.title} |
||||||
</h1> |
</h1> |
||||||
<ul> |
<ul> |
||||||
{advantages.list.map((item, i) => ( |
{advantages.list.map((item, i) => ( |
||||||
<Fragment key={i}> |
<Fragment key={i}> |
||||||
<li |
<li |
||||||
style={{ fontSize: fontSize.desktop.li, padding: 5 }} |
style={{ fontSize: fontSize.desktop.li, padding: 5 }} |
||||||
> |
> |
||||||
{item} |
{item} |
||||||
</li> |
</li> |
||||||
</Fragment> |
</Fragment> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer /> |
<Footer /> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div className="mobile-about d-flex flex-column"> |
<div className="mobile-about d-flex flex-column"> |
||||||
<Navbar page={"about"} /> |
<Navbar page={"about"} /> |
||||||
<div className="about__first d-flex" style={{ width: "100%" }}> |
<div className="about__first d-flex" style={{ width: "100%" }}> |
||||||
<div className="top align-self-start"> |
<div className="top align-self-start"> |
||||||
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{first.title}</h1> |
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{first.title}</h1> |
||||||
<p |
<p |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.mobile.p + 2, |
fontSize: fontSize.mobile.p + 2, |
||||||
lineHeight: 2, |
lineHeight: 2, |
||||||
}} |
}} |
||||||
> |
> |
||||||
{first.text} |
{first.text} |
||||||
</p> |
</p> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className="linegr" |
className="linegr" |
||||||
style={{ width: "100%", height: "4px", marginBottom: 15 }} |
style={{ width: "100%", height: "4px", marginBottom: 15 }} |
||||||
></div> |
></div> |
||||||
<div className="mobile-about__fury d-flex flex-column"> |
<div className="mobile-about__fury d-flex flex-column"> |
||||||
<div> |
<div> |
||||||
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{fury.title}</h1> |
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{fury.title}</h1> |
||||||
</div> |
</div> |
||||||
<p style={{ fontSize: fontSize.mobile.p }}>{fury.text}</p> |
<p style={{ fontSize: fontSize.mobile.p }}>{fury.text}</p> |
||||||
</div> |
</div> |
||||||
<div className="mobile-about__images d-flex"> |
<div className="mobile-about__images d-flex"> |
||||||
{this.props.absoluteImages.map((item, i) => ( |
{this.props.absoluteImages.map((item, i) => ( |
||||||
<img src={item.imageUrl} className={item.class} alt="" /> |
<img src={item.imageUrl} className={item.class} alt="" /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
<div className="mobile-about__keys align-self-end"> |
<div className="mobile-about__keys align-self-end"> |
||||||
<div> |
<div> |
||||||
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
||||||
{keywords.title} |
{keywords.title} |
||||||
</h2> |
</h2> |
||||||
</div> |
</div> |
||||||
<ul> |
<ul> |
||||||
{keywords.list.map((item, i) => ( |
{keywords.list.map((item, i) => ( |
||||||
<Fragment key={i}> |
<Fragment key={i}> |
||||||
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li> |
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li> |
||||||
</Fragment> |
</Fragment> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div className="mobile-about__video d-flex"> |
<div className="mobile-about__video d-flex"> |
||||||
<img src={pic} alt="" /> |
<img src={pic} alt="" /> |
||||||
</div> |
</div> |
||||||
<div className="mobile-about__advantages d-flex flex-column"> |
<div className="mobile-about__advantages d-flex flex-column"> |
||||||
<div> |
<div> |
||||||
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
||||||
{advantages.title} |
{advantages.title} |
||||||
</h1> |
</h1> |
||||||
</div> |
</div> |
||||||
<ul> |
<ul> |
||||||
{advantages.list.map((item, i) => ( |
{advantages.list.map((item, i) => ( |
||||||
<Fragment key={i}> |
<Fragment key={i}> |
||||||
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li> |
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li> |
||||||
</Fragment> |
</Fragment> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
About.defaultProps = { |
About.defaultProps = { |
||||||
absoluteImages: [ |
absoluteImages: [ |
||||||
{ |
{ |
||||||
class: |
class: |
||||||
window.innerWidth > 1000 |
window.innerWidth > 1000 |
||||||
? "about__fury--left__1" |
? "about__fury--left__1" |
||||||
: "mobile-about__images--1", |
: "mobile-about__images--1", |
||||||
imageUrl: aboutLg, |
imageUrl: aboutLg, |
||||||
}, |
}, |
||||||
], |
], |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,48 +1,48 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import ArabickarImg from "../../assets/images/origami.jpg"; |
import ArabickarImg from "../../assets/images/origami.jpg"; |
||||||
|
|
||||||
class Arabickar extends Component { |
class Arabickar extends Component { |
||||||
render() { |
render() { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
style={{ |
style={{ |
||||||
display: "flex", |
display: "flex", |
||||||
flexDirection: "column", |
flexDirection: "column", |
||||||
width: "100%", |
width: "100%", |
||||||
textAlign: "center", |
textAlign: "center", |
||||||
height: "100vh", |
height: "100vh", |
||||||
}} |
}} |
||||||
> |
> |
||||||
<img |
<img |
||||||
src={ArabickarImg} |
src={ArabickarImg} |
||||||
alt={"حرفة ورقية"} |
alt={"حرفة ورقية"} |
||||||
style={{ |
style={{ |
||||||
padding: "5px", |
padding: "5px", |
||||||
maxHheight: "70vh", |
maxHheight: "70vh", |
||||||
maxWidth: "80vw", |
maxWidth: "80vw", |
||||||
margin: "auto", |
margin: "auto", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
<a |
<a |
||||||
style={{ |
style={{ |
||||||
display: "flex", |
display: "flex", |
||||||
backgroundColor: "#0099ff", |
backgroundColor: "#0099ff", |
||||||
color: "#fff", |
color: "#fff", |
||||||
textDecoration: "none", |
textDecoration: "none", |
||||||
textAlign: "center", |
textAlign: "center", |
||||||
margin: "30px auto", |
margin: "30px auto", |
||||||
fontSize: "20px", |
fontSize: "20px", |
||||||
fontWeight: "bold", |
fontWeight: "bold", |
||||||
padding: "5px 80px", |
padding: "5px 80px", |
||||||
borderRadius: "5px", |
borderRadius: "5px", |
||||||
}} |
}} |
||||||
href="https://zil.ink/arabickar" |
href="https://zil.ink/arabickar" |
||||||
> |
> |
||||||
حرفة ورقية |
حرفة ورقية |
||||||
</a> |
</a> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default Arabickar; |
export default Arabickar; |
||||||
|
|||||||
@ -1,55 +1,55 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
|
|
||||||
import Cellphone from "./Cellphone/index"; |
import Cellphone from "./Cellphone/index"; |
||||||
import Code from "./Code/index"; |
import Code from "./Code/index"; |
||||||
import Splash from "../Splash/index"; |
import Splash from "../Splash/index"; |
||||||
|
|
||||||
import { user } from "../../../Redux/actions"; |
import { user } from "../../../Redux/actions"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
|
|
||||||
class Login extends Component { |
class Login extends Component { |
||||||
constructor(props) { |
constructor(props) { |
||||||
super(props); |
super(props); |
||||||
this.state = { |
this.state = { |
||||||
page: 0, |
page: 0, |
||||||
splash: false, |
splash: false, |
||||||
}; |
}; |
||||||
} |
} |
||||||
|
|
||||||
async componentDidUpdate() { |
async componentDidUpdate() { |
||||||
const { cellphone, otp, page } = this.state; |
const { cellphone, otp, page } = this.state; |
||||||
if (cellphone && !otp) this.props.otp({ cellphone }); |
if (cellphone && !otp) this.props.otp({ cellphone }); |
||||||
if (page && cellphone && otp) |
if (page && cellphone && otp) |
||||||
this.props.otp_login({ |
this.props.otp_login({ |
||||||
cellphone, |
cellphone, |
||||||
otp, |
otp, |
||||||
userToken: "2", |
userToken: "2", |
||||||
applicationToken: "22", |
applicationToken: "22", |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
resend = () => { |
resend = () => { |
||||||
const { cellphone } = this.state; |
const { cellphone } = this.state; |
||||||
this.props.otp({ cellphone }); |
this.props.otp({ cellphone }); |
||||||
}; |
}; |
||||||
|
|
||||||
render() { |
render() { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{this.state.page === 0 ? ( |
{this.state.page === 0 ? ( |
||||||
!this.state.splash ? ( |
!this.state.splash ? ( |
||||||
<Cellphone parent={this} /> |
<Cellphone parent={this} /> |
||||||
) : null |
) : null |
||||||
) : ( |
) : ( |
||||||
<Code parent={this} /> |
<Code parent={this} /> |
||||||
)} |
)} |
||||||
{this.state.splash ? <Splash /> : null} |
{this.state.splash ? <Splash /> : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect((state) => ({ isLogin: state.user.isLogin }), { |
export default connect((state) => ({ isLogin: state.user.isLogin }), { |
||||||
otp: user.otp, |
otp: user.otp, |
||||||
otp_login: user.otp_login, |
otp_login: user.otp_login, |
||||||
})(Login); |
})(Login); |
||||||
|
|||||||
@ -1,107 +1,107 @@ |
|||||||
import React, { useState } from "react"; |
import React, { useState } from "react"; |
||||||
import onInput from "~/util/onInput"; |
import onInput from "~/util/onInput"; |
||||||
import Input from "../Input/index"; |
import Input from "../Input/index"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
import moment from "jalali-moment"; |
import moment from "jalali-moment"; |
||||||
|
|
||||||
export default function Birthdate(props) { |
export default function Birthdate(props) { |
||||||
const { defaultValue, parent, name } = props; |
const { defaultValue, parent, name } = props; |
||||||
console.log({ defaultValue }); |
console.log({ defaultValue }); |
||||||
let momentDate = moment((defaultValue || {})[name]); |
let momentDate = moment((defaultValue || {})[name]); |
||||||
let isvalid = momentDate?.isValid(); |
let isvalid = momentDate?.isValid(); |
||||||
const day = isvalid ? momentDate?.format("jDD") : null, |
const day = isvalid ? momentDate?.format("jDD") : null, |
||||||
month = isvalid ? momentDate?.format("jMM") : null, |
month = isvalid ? momentDate?.format("jMM") : null, |
||||||
year = isvalid ? momentDate?.format("jYYYY") : null; |
year = isvalid ? momentDate?.format("jYYYY") : null; |
||||||
const [state, setState] = useState({ day, month, year }); |
const [state, setState] = useState({ day, month, year }); |
||||||
const onChange = (_name, value) => { |
const onChange = (_name, value) => { |
||||||
let _state = { ...state, [_name]: value }; |
let _state = { ...state, [_name]: value }; |
||||||
setState(_state); |
setState(_state); |
||||||
|
|
||||||
parent.onChange( |
parent.onChange( |
||||||
name, |
name, |
||||||
moment |
moment |
||||||
.from( |
.from( |
||||||
`${_state?.year}/${_state?.month}/${_state?.day}`, |
`${_state?.year}/${_state?.month}/${_state?.day}`, |
||||||
"fa", |
"fa", |
||||||
"YYYY/M/D" |
"YYYY/M/D" |
||||||
) |
) |
||||||
.locale("en") |
.locale("en") |
||||||
); |
); |
||||||
}; |
}; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div className="mobile-birthdate d-flex justify-content-between align-items-center"> |
<div className="mobile-birthdate d-flex justify-content-between align-items-center"> |
||||||
<label>{window.t("تاریخ تولد")}</label> |
<label>{window.t("تاریخ تولد")}</label> |
||||||
<div className="mobile-birthdate__date d-flex align-items-center"> |
<div className="mobile-birthdate__date d-flex align-items-center"> |
||||||
<Input |
<Input |
||||||
variant="standard" |
variant="standard" |
||||||
name="day" |
name="day" |
||||||
placeholder={window.t("روز")} |
placeholder={window.t("روز")} |
||||||
maxLength={2} |
maxLength={2} |
||||||
onInput={onInput.dayHandler} |
onInput={onInput.dayHandler} |
||||||
parent={{ onChange }} |
parent={{ onChange }} |
||||||
defaultValue={state} |
defaultValue={state} |
||||||
/> |
/> |
||||||
<span>/</span> |
<span>/</span> |
||||||
<Input |
<Input |
||||||
variant="standard" |
variant="standard" |
||||||
name="month" |
name="month" |
||||||
placeholder={window.t("ماه")} |
placeholder={window.t("ماه")} |
||||||
maxLength={2} |
maxLength={2} |
||||||
onInput={onInput.monthHandler} |
onInput={onInput.monthHandler} |
||||||
parent={{ onChange }} |
parent={{ onChange }} |
||||||
defaultValue={state} |
defaultValue={state} |
||||||
/> |
/> |
||||||
<span>/</span> |
<span>/</span> |
||||||
<Input |
<Input |
||||||
variant="standard" |
variant="standard" |
||||||
name="year" |
name="year" |
||||||
placeholder={window.t("سال")} |
placeholder={window.t("سال")} |
||||||
maxLength={4} |
maxLength={4} |
||||||
onInput={onInput.yearHandler} |
onInput={onInput.yearHandler} |
||||||
parent={{ onChange }} |
parent={{ onChange }} |
||||||
defaultValue={state} |
defaultValue={state} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div className="birthdate d-flex justify-content-between align-items-center"> |
<div className="birthdate d-flex justify-content-between align-items-center"> |
||||||
<label>{window.t("تاریخ تولد")}</label> |
<label>{window.t("تاریخ تولد")}</label> |
||||||
<div className="birthdate__date d-flex align-items-center"> |
<div className="birthdate__date d-flex align-items-center"> |
||||||
<Input |
<Input |
||||||
variant="standard" |
variant="standard" |
||||||
name="day" |
name="day" |
||||||
placeholder={window.t("روز")} |
placeholder={window.t("روز")} |
||||||
maxLength={2} |
maxLength={2} |
||||||
onInput={onInput.dayHandler} |
onInput={onInput.dayHandler} |
||||||
parent={{ onChange }} |
parent={{ onChange }} |
||||||
defaultValue={state} |
defaultValue={state} |
||||||
/> |
/> |
||||||
<span>/</span> |
<span>/</span> |
||||||
<Input |
<Input |
||||||
variant="standard" |
variant="standard" |
||||||
name="month" |
name="month" |
||||||
placeholder={window.t("ماه")} |
placeholder={window.t("ماه")} |
||||||
maxLength={2} |
maxLength={2} |
||||||
onInput={onInput.monthHandler} |
onInput={onInput.monthHandler} |
||||||
parent={{ onChange }} |
parent={{ onChange }} |
||||||
defaultValue={state} |
defaultValue={state} |
||||||
/> |
/> |
||||||
<span>/</span> |
<span>/</span> |
||||||
<Input |
<Input |
||||||
variant="standard" |
variant="standard" |
||||||
name="year" |
name="year" |
||||||
placeholder={window.t("سال")} |
placeholder={window.t("سال")} |
||||||
maxLength={4} |
maxLength={4} |
||||||
onInput={onInput.yearHandler} |
onInput={onInput.yearHandler} |
||||||
parent={{ onChange }} |
parent={{ onChange }} |
||||||
defaultValue={state} |
defaultValue={state} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,165 +1,165 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { userFactor } from "~/Redux/actions"; |
import { userFactor } from "~/Redux/actions"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
const maxMobileSize = 550; |
const maxMobileSize = 550; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
||||||
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, |
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, |
||||||
button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
||||||
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
||||||
}, |
}, |
||||||
mobile: { |
mobile: { |
||||||
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
||||||
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
||||||
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
||||||
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, |
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
const DiscoutCode = ({ |
const DiscoutCode = ({ |
||||||
codeId, |
codeId, |
||||||
setCodeId, |
setCodeId, |
||||||
delCodeId, |
delCodeId, |
||||||
userId, |
userId, |
||||||
factorId, |
factorId, |
||||||
code, |
code, |
||||||
}) => { |
}) => { |
||||||
const [value, setValue] = React.useState(code || ""); |
const [value, setValue] = React.useState(code || ""); |
||||||
function setOff() { |
function setOff() { |
||||||
setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); |
setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); |
||||||
} |
} |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div className="discount-code d-flex flex-column"> |
<div className="discount-code d-flex flex-column"> |
||||||
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
||||||
{window.t("کد تخفیف")} |
{window.t("کد تخفیف")} |
||||||
</h2> |
</h2> |
||||||
{!code ? ( |
{!code ? ( |
||||||
<> |
<> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}> |
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
||||||
</p> |
</p> |
||||||
<div className="discount-code__box d-flex align-items-center"> |
<div className="discount-code__box d-flex align-items-center"> |
||||||
<input |
<input |
||||||
style={{ fontSize: fontSize.desktop.input }} |
style={{ fontSize: fontSize.desktop.input }} |
||||||
type="text" |
type="text" |
||||||
defaultValue={codeId} |
defaultValue={codeId} |
||||||
onChange={(e) => setValue(e.target.value)} |
onChange={(e) => setValue(e.target.value)} |
||||||
/> |
/> |
||||||
<button |
<button |
||||||
style={{ fontSize: fontSize.desktop.button }} |
style={{ fontSize: fontSize.desktop.button }} |
||||||
onClick={setOff} |
onClick={setOff} |
||||||
> |
> |
||||||
{window.t("ثبت کد")}{" "} |
{window.t("ثبت کد")}{" "} |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
) : ( |
) : ( |
||||||
<> |
<> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}> |
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
{window.t("کد تخفیف برای شما ثبت شده است")}{" "} |
{window.t("کد تخفیف برای شما ثبت شده است")}{" "} |
||||||
</p> |
</p> |
||||||
<div |
<div |
||||||
className="discount-code__box d-flex align-items-center" |
className="discount-code__box d-flex align-items-center" |
||||||
style={{ backgroundColor: "#eee" }} |
style={{ backgroundColor: "#eee" }} |
||||||
> |
> |
||||||
<input |
<input |
||||||
disabled |
disabled |
||||||
style={{ fontSize: 13, color: "gray" }} |
style={{ fontSize: 13, color: "gray" }} |
||||||
type="text" |
type="text" |
||||||
defaultValue={code} |
defaultValue={code} |
||||||
/> |
/> |
||||||
<button |
<button |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.mobile.button, |
fontSize: fontSize.mobile.button, |
||||||
backgroundColor: "orange", |
backgroundColor: "orange", |
||||||
width: 40, |
width: 40, |
||||||
}} |
}} |
||||||
onClick={() => delCodeId({})} |
onClick={() => delCodeId({})} |
||||||
> |
> |
||||||
x{" "} |
x{" "} |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div className="mobile-discount-code d-flex flex-column"> |
<div className="mobile-discount-code d-flex flex-column"> |
||||||
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
||||||
{window.t("کد تخفیف")} |
{window.t("کد تخفیف")} |
||||||
</h2> |
</h2> |
||||||
{!code ? ( |
{!code ? ( |
||||||
<> |
<> |
||||||
{" "} |
{" "} |
||||||
<p style={{ fontSize: fontSize.mobile.p }}> |
<p style={{ fontSize: fontSize.mobile.p }}> |
||||||
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
||||||
</p> |
</p> |
||||||
<div className="mobile-discount-code__box d-flex align-items-center"> |
<div className="mobile-discount-code__box d-flex align-items-center"> |
||||||
<input |
<input |
||||||
style={{ fontSize: fontSize.mobile.input }} |
style={{ fontSize: fontSize.mobile.input }} |
||||||
type="text" |
type="text" |
||||||
onChange={(e) => setValue(e.target.value)} |
onChange={(e) => setValue(e.target.value)} |
||||||
/> |
/> |
||||||
<button |
<button |
||||||
style={{ fontSize: fontSize.mobile.button }} |
style={{ fontSize: fontSize.mobile.button }} |
||||||
onClick={setOff} |
onClick={setOff} |
||||||
> |
> |
||||||
{window.t("ثبت کد")}{" "} |
{window.t("ثبت کد")}{" "} |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
) : ( |
) : ( |
||||||
<> |
<> |
||||||
{" "} |
{" "} |
||||||
<p style={{ fontSize: fontSize.mobile.p }}> |
<p style={{ fontSize: fontSize.mobile.p }}> |
||||||
{window.t("کد تخفیف برای شما ثبت شده است")}{" "} |
{window.t("کد تخفیف برای شما ثبت شده است")}{" "} |
||||||
</p> |
</p> |
||||||
<div |
<div |
||||||
className="discount-code__box d-flex align-items-center" |
className="discount-code__box d-flex align-items-center" |
||||||
style={{ backgroundColor: "#eee" }} |
style={{ backgroundColor: "#eee" }} |
||||||
> |
> |
||||||
<input |
<input |
||||||
disabled |
disabled |
||||||
style={{ fontSize: 13, color: "gray" }} |
style={{ fontSize: 13, color: "gray" }} |
||||||
type="text" |
type="text" |
||||||
defaultValue={code} |
defaultValue={code} |
||||||
/> |
/> |
||||||
<button |
<button |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.mobile.button, |
fontSize: fontSize.mobile.button, |
||||||
backgroundColor: "orange", |
backgroundColor: "orange", |
||||||
width: 40, |
width: 40, |
||||||
}} |
}} |
||||||
onClick={() => delCodeId({})} |
onClick={() => delCodeId({})} |
||||||
> |
> |
||||||
x{" "} |
x{" "} |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
codeId: state.userFactor.info?.codeId, |
codeId: state.userFactor.info?.codeId, |
||||||
code: state.userFactor.info?.offCode?.code, |
code: state.userFactor.info?.offCode?.code, |
||||||
userId: state.user.status.id, |
userId: state.user.status.id, |
||||||
factorId: state.userFactor.info?.id, |
factorId: state.userFactor.info?.id, |
||||||
lang: state.publicApi.lang, |
lang: state.publicApi.lang, |
||||||
}), |
}), |
||||||
{ |
{ |
||||||
setCodeId: userFactor.update, |
setCodeId: userFactor.update, |
||||||
delCodeId: userFactor.deleteUserOffCode, |
delCodeId: userFactor.deleteUserOffCode, |
||||||
} |
} |
||||||
)(DiscoutCode); |
)(DiscoutCode); |
||||||
|
|||||||
@ -1,463 +1,463 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { userProduct } from "~/Redux/actions"; |
import { userProduct } from "~/Redux/actions"; |
||||||
|
|
||||||
import { makeStyles } from "@material-ui/core/styles"; |
import { makeStyles } from "@material-ui/core/styles"; |
||||||
import Table from "@material-ui/core/Table"; |
import Table from "@material-ui/core/Table"; |
||||||
import TableBody from "@material-ui/core/TableBody"; |
import TableBody from "@material-ui/core/TableBody"; |
||||||
import TableCell from "@material-ui/core/TableCell"; |
import TableCell from "@material-ui/core/TableCell"; |
||||||
import TableContainer from "@material-ui/core/TableContainer"; |
import TableContainer from "@material-ui/core/TableContainer"; |
||||||
import TableHead from "@material-ui/core/TableHead"; |
import TableHead from "@material-ui/core/TableHead"; |
||||||
import TableRow from "@material-ui/core/TableRow"; |
import TableRow from "@material-ui/core/TableRow"; |
||||||
import Paper from "@material-ui/core/Paper"; |
import Paper from "@material-ui/core/Paper"; |
||||||
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; |
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
const useStyles = makeStyles({ |
const useStyles = makeStyles({ |
||||||
table: {}, |
table: {}, |
||||||
}); |
}); |
||||||
|
|
||||||
const maxMobileSize = 550; |
const maxMobileSize = 550; |
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
mobile: { |
mobile: { |
||||||
info: { |
info: { |
||||||
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, |
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, |
||||||
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
||||||
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
||||||
}, |
}, |
||||||
price: { |
price: { |
||||||
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, |
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, |
||||||
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, |
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, |
||||||
}, |
}, |
||||||
counter: { |
counter: { |
||||||
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, |
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, |
||||||
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, |
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, |
||||||
}, |
}, |
||||||
delete: { |
delete: { |
||||||
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, |
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
desktop: { |
desktop: { |
||||||
info: { |
info: { |
||||||
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
||||||
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
||||||
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
||||||
}, |
}, |
||||||
price: { |
price: { |
||||||
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, |
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, |
||||||
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
||||||
}, |
}, |
||||||
counter: { |
counter: { |
||||||
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, |
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, |
||||||
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, |
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, |
||||||
}, |
}, |
||||||
delete: { |
delete: { |
||||||
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
function BasicTable(props) { |
function BasicTable(props) { |
||||||
const classes = useStyles(); |
const classes = useStyles(); |
||||||
const { list, handleDelete, route, factorInfo } = props; |
const { list, handleDelete, route, factorInfo } = props; |
||||||
const sum = () => { |
const sum = () => { |
||||||
let total = 0; |
let total = 0; |
||||||
for (let i = 0; i < list.length; i++) { |
for (let i = 0; i < list.length; i++) { |
||||||
total += list[i].count * 1; |
total += list[i].count * 1; |
||||||
} |
} |
||||||
return total; |
return total; |
||||||
}; |
}; |
||||||
|
|
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<TableContainer component={Paper}> |
<TableContainer component={Paper}> |
||||||
<Table className={classes.table} aria-label="simple table"> |
<Table className={classes.table} aria-label="simple table"> |
||||||
<TableHead> |
<TableHead> |
||||||
<TableRow> |
<TableRow> |
||||||
<TableCell align="right">{window.t("محصولات")}</TableCell> |
<TableCell align="right">{window.t("محصولات")}</TableCell> |
||||||
<TableCell align="center">{window.t("قیمت")}</TableCell> |
<TableCell align="center">{window.t("قیمت")}</TableCell> |
||||||
|
|
||||||
{route === "callback" ? ( |
{route === "callback" ? ( |
||||||
<TableCell align="center">{window.t("تعداد")}</TableCell> |
<TableCell align="center">{window.t("تعداد")}</TableCell> |
||||||
) : null} |
) : null} |
||||||
</TableRow> |
</TableRow> |
||||||
</TableHead> |
</TableHead> |
||||||
<TableBody> |
<TableBody> |
||||||
{list.map((row, i) => ( |
{list.map((row, i) => ( |
||||||
<Item |
<Item |
||||||
data={row} |
data={row} |
||||||
key={i} |
key={i} |
||||||
// handleCounter={handleCounter}
|
// handleCounter={handleCounter}
|
||||||
pushToCart={props.pushToCart} |
pushToCart={props.pushToCart} |
||||||
info={props.info} |
info={props.info} |
||||||
id={props.id} |
id={props.id} |
||||||
handleDelete={handleDelete} |
handleDelete={handleDelete} |
||||||
route={route} |
route={route} |
||||||
factorInfo={factorInfo} |
factorInfo={factorInfo} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
{route === "cart" && factorInfo ? ( |
{route === "cart" && factorInfo ? ( |
||||||
<TableRow> |
<TableRow> |
||||||
<TableCell align="center"> |
<TableCell align="center"> |
||||||
<span style={{ color: "grey" }}> |
<span style={{ color: "grey" }}> |
||||||
{window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)} |
{window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)} |
||||||
</span> |
</span> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell align="right" component="th" scope="row"> |
<TableCell align="right" component="th" scope="row"> |
||||||
<span style={{ color: "grey" }}> |
<span style={{ color: "grey" }}> |
||||||
{sum()} {window.t("محصول")} |
{sum()} {window.t("محصول")} |
||||||
</span> |
</span> |
||||||
</TableCell> |
</TableCell> |
||||||
</TableRow> |
</TableRow> |
||||||
) : null} |
) : null} |
||||||
</TableBody> |
</TableBody> |
||||||
</Table> |
</Table> |
||||||
</TableContainer> |
</TableContainer> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<TableContainer component={Paper}> |
<TableContainer component={Paper}> |
||||||
<Table className={classes.table} aria-label="simple table"> |
<Table className={classes.table} aria-label="simple table"> |
||||||
<TableHead> |
<TableHead> |
||||||
<TableRow> |
<TableRow> |
||||||
<TableCell align="right">{window.t("محصولات")}</TableCell> |
<TableCell align="right">{window.t("محصولات")}</TableCell> |
||||||
<TableCell align="center">{window.t("قیمت")}</TableCell> |
<TableCell align="center">{window.t("قیمت")}</TableCell> |
||||||
<TableCell align="center">{window.t("تعداد")}</TableCell> |
<TableCell align="center">{window.t("تعداد")}</TableCell> |
||||||
<TableCell align="center"></TableCell> |
<TableCell align="center"></TableCell> |
||||||
</TableRow> |
</TableRow> |
||||||
</TableHead> |
</TableHead> |
||||||
<TableBody> |
<TableBody> |
||||||
{list.map((row, i) => ( |
{list.map((row, i) => ( |
||||||
<Item |
<Item |
||||||
data={row} |
data={row} |
||||||
key={i} |
key={i} |
||||||
// handleCounter={handleCounter}
|
// handleCounter={handleCounter}
|
||||||
pushToCart={props.pushToCart} |
pushToCart={props.pushToCart} |
||||||
info={props.info} |
info={props.info} |
||||||
id={props.id} |
id={props.id} |
||||||
handleDelete={handleDelete} |
handleDelete={handleDelete} |
||||||
route={route} |
route={route} |
||||||
factorInfo={factorInfo} |
factorInfo={factorInfo} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
{factorInfo ? ( |
{factorInfo ? ( |
||||||
<TableRow> |
<TableRow> |
||||||
<TableCell align="right" component="th" scope="row"> |
<TableCell align="right" component="th" scope="row"> |
||||||
<span style={{ color: "grey" }}></span> |
<span style={{ color: "grey" }}></span> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell align="center"> |
<TableCell align="center"> |
||||||
<span style={{ color: "grey" }}> |
<span style={{ color: "grey" }}> |
||||||
{window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)} |
{window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)} |
||||||
</span> |
</span> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell align="center" component="th" scope="row"> |
<TableCell align="center" component="th" scope="row"> |
||||||
<span style={{ color: "grey" }}> |
<span style={{ color: "grey" }}> |
||||||
{sum()} {window.t("محصول")} |
{sum()} {window.t("محصول")} |
||||||
</span> |
</span> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell align="center" component="th" scope="row"> |
<TableCell align="center" component="th" scope="row"> |
||||||
<span style={{ color: "grey" }}></span> |
<span style={{ color: "grey" }}></span> |
||||||
</TableCell> |
</TableCell> |
||||||
</TableRow> |
</TableRow> |
||||||
) : null} |
) : null} |
||||||
</TableBody> |
</TableBody> |
||||||
</Table> |
</Table> |
||||||
</TableContainer> |
</TableContainer> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
const grades = [ |
const grades = [ |
||||||
window.t("پیش دبستان"), |
window.t("پیش دبستان"), |
||||||
window.t("اول"), |
window.t("اول"), |
||||||
window.t("دوم"), |
window.t("دوم"), |
||||||
window.t("سوم"), |
window.t("سوم"), |
||||||
window.t("چهارم"), |
window.t("چهارم"), |
||||||
window.t("پنجم"), |
window.t("پنجم"), |
||||||
window.t("ششم"), |
window.t("ششم"), |
||||||
window.t("هفتم"), |
window.t("هفتم"), |
||||||
window.t("هشتم"), |
window.t("هشتم"), |
||||||
window.t("نهم"), |
window.t("نهم"), |
||||||
window.t("دهم"), |
window.t("دهم"), |
||||||
window.t("یازدهم"), |
window.t("یازدهم"), |
||||||
window.t("دوازدهم"), |
window.t("دوازدهم"), |
||||||
]; |
]; |
||||||
const { data, pushToCart, id, route } = props; |
const { data, pushToCart, id, route } = props; |
||||||
if (!data.product) return null; |
if (!data.product) return null; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<TableRow key={data.product.book.name}> |
<TableRow key={data.product.book.name}> |
||||||
<TableCell align="right" component="th" scope="row"> |
<TableCell align="right" component="th" scope="row"> |
||||||
<div className="mobile-cart-table-product d-flex align-items-center"> |
<div className="mobile-cart-table-product d-flex align-items-center"> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
||||||
alt={data.product.book.name} |
alt={data.product.book.name} |
||||||
/> |
/> |
||||||
<div |
<div |
||||||
className={`mobile-cart-table-product__info d-flex flex-column p-1 ${ |
className={`mobile-cart-table-product__info d-flex flex-column p-1 ${ |
||||||
window.lang === "en" ? "align-items-start" : "" |
window.lang === "en" ? "align-items-start" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<strong style={{ fontSize: fontSize.mobile.info.strong }}> |
<strong style={{ fontSize: fontSize.mobile.info.strong }}> |
||||||
{window.t("نسخه") + |
{window.t("نسخه") + |
||||||
` ${ |
` ${ |
||||||
+data.product.productType === 1 |
+data.product.productType === 1 |
||||||
? window.t("الکترونیکی") |
? window.t("الکترونیکی") |
||||||
: window.t("چاپی") |
: window.t("چاپی") |
||||||
} ${data.product.book.name} `}
|
} ${data.product.book.name} `}
|
||||||
</strong> |
</strong> |
||||||
<p style={{ fontSize: 12 }}> |
<p style={{ fontSize: 12 }}> |
||||||
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
||||||
</p> |
</p> |
||||||
<span style={{ fontSize: 10 }}> |
<span style={{ fontSize: 10 }}> |
||||||
{window.t("همراه با:")} |
{window.t("همراه با:")} |
||||||
{data.product.book.items || |
{data.product.book.items || |
||||||
window.t("کد فعالسازی محتوای الکترونیک")} |
window.t("کد فعالسازی محتوای الکترونیک")} |
||||||
</span> |
</span> |
||||||
{route !== "callback" ? ( |
{route !== "callback" ? ( |
||||||
<div |
<div |
||||||
className={`mobile-cart-table-product__info--delete d-flex align-items-center ${ |
className={`mobile-cart-table-product__info--delete d-flex align-items-center ${ |
||||||
window.lang === "en" |
window.lang === "en" |
||||||
? "align-self-start" |
? "align-self-start" |
||||||
: "align-self-end" |
: "align-self-end" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<DeleteOutlineOutlinedIcon |
<DeleteOutlineOutlinedIcon |
||||||
style={{ |
style={{ |
||||||
color: "#FC120A", |
color: "#FC120A", |
||||||
fontSize: 25, |
fontSize: 25, |
||||||
marginLeft: 0, |
marginLeft: 0, |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
onClick={() => |
onClick={() => |
||||||
pushToCart({ |
pushToCart({ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: -data.count, |
count: -data.count, |
||||||
}) |
}) |
||||||
} |
} |
||||||
/> |
/> |
||||||
<span |
<span |
||||||
onClick={() => |
onClick={() => |
||||||
pushToCart({ |
pushToCart({ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: -data.count, |
count: -data.count, |
||||||
}) |
}) |
||||||
} |
} |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.mobile.delete.span, |
fontSize: fontSize.mobile.delete.span, |
||||||
color: "#FC120A", |
color: "#FC120A", |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{window.t("حذف")} |
{window.t("حذف")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell> |
<TableCell> |
||||||
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> |
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> |
||||||
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> |
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> |
||||||
<strong style={{ fontSize: fontSize.mobile.price.strong }}> |
<strong style={{ fontSize: fontSize.mobile.price.strong }}> |
||||||
{window.tr(data.product.price * data.count || 1000)} |
{window.tr(data.product.price * data.count || 1000)} |
||||||
</strong> |
</strong> |
||||||
{route !== "callback" ? ( |
{route !== "callback" ? ( |
||||||
<span style={{ fontSize: fontSize.mobile.price.span }}> |
<span style={{ fontSize: fontSize.mobile.price.span }}> |
||||||
{window.tr(data.product.price || "100")}{" "} |
{window.tr(data.product.price || "100")}{" "} |
||||||
{window.t("قیمت هر واحد")}{" "} |
{window.t("قیمت هر واحد")}{" "} |
||||||
</span> |
</span> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
{route === "cart" ? ( |
{route === "cart" ? ( |
||||||
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> |
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> |
||||||
<button |
<button |
||||||
onClick={() => |
onClick={() => |
||||||
pushToCart( |
pushToCart( |
||||||
{ |
{ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: 1, |
count: 1, |
||||||
}, |
}, |
||||||
{}, |
{}, |
||||||
{ id: data.factorId } |
{ id: data.factorId } |
||||||
) |
) |
||||||
} |
} |
||||||
style={{ fontSize: fontSize.mobile.counter.button }} |
style={{ fontSize: fontSize.mobile.counter.button }} |
||||||
> |
> |
||||||
+ |
+ |
||||||
</button> |
</button> |
||||||
<span style={{ fontSize: fontSize.mobile.counter.span }}> |
<span style={{ fontSize: fontSize.mobile.counter.span }}> |
||||||
{data.count} |
{data.count} |
||||||
</span> |
</span> |
||||||
<button |
<button |
||||||
onClick={() => |
onClick={() => |
||||||
data.count > 0 |
data.count > 0 |
||||||
? pushToCart( |
? pushToCart( |
||||||
{ |
{ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: -1, |
count: -1, |
||||||
}, |
}, |
||||||
{}, |
{}, |
||||||
{ id: data.factorId } |
{ id: data.factorId } |
||||||
) |
) |
||||||
: null |
: null |
||||||
} |
} |
||||||
style={{ fontSize: fontSize.mobile.counter.button }} |
style={{ fontSize: fontSize.mobile.counter.button }} |
||||||
> |
> |
||||||
- |
- |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
{route === "callback" ? ( |
{route === "callback" ? ( |
||||||
<TableCell> |
<TableCell> |
||||||
<strong className="d-flex justify-content-center align-items-center"> |
<strong className="d-flex justify-content-center align-items-center"> |
||||||
{data.count} |
{data.count} |
||||||
</strong> |
</strong> |
||||||
</TableCell> |
</TableCell> |
||||||
) : null} |
) : null} |
||||||
</TableRow> |
</TableRow> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<TableRow key={data.product.book?.name}> |
<TableRow key={data.product.book?.name}> |
||||||
<TableCell align="right" component="th" scope="row"> |
<TableCell align="right" component="th" scope="row"> |
||||||
<div className="cart-item__info d-flex"> |
<div className="cart-item__info d-flex"> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${data.product?.book?.fileIds}`} |
src={`https://dnvn.ir/api/v1/file/${data.product?.book?.fileIds}`} |
||||||
alt={data.product?.book?.name} |
alt={data.product?.book?.name} |
||||||
/> |
/> |
||||||
<div className="d-flex flex-column justify-content-center"> |
<div className="d-flex flex-column justify-content-center"> |
||||||
<strong style={{ fontSize: fontSize.desktop.info.strong }}> |
<strong style={{ fontSize: fontSize.desktop.info.strong }}> |
||||||
{`${window.t("نسخه")} ${ |
{`${window.t("نسخه")} ${ |
||||||
+data.product?.productType === 1 |
+data.product?.productType === 1 |
||||||
? window.t("الکترونیکی") |
? window.t("الکترونیکی") |
||||||
: window.t("چاپی") |
: window.t("چاپی") |
||||||
} ${data.product?.book?.name} `}
|
} ${data.product?.book?.name} `}
|
||||||
</strong> |
</strong> |
||||||
<p style={{ fontSize: fontSize?.desktop?.info.p }}> |
<p style={{ fontSize: fontSize?.desktop?.info.p }}> |
||||||
{window.t("پایه") + ` ${grades[data.product?.book?.gradeId]}`} |
{window.t("پایه") + ` ${grades[data.product?.book?.gradeId]}`} |
||||||
</p> |
</p> |
||||||
<span style={{ fontSize: fontSize.desktop.info.span }}> |
<span style={{ fontSize: fontSize.desktop.info.span }}> |
||||||
{window.t("همراه با:")} |
{window.t("همراه با:")} |
||||||
{data.product?.book?.items || |
{data.product?.book?.items || |
||||||
window.t("کد فعالسازی محتوای الکترونیک")} |
window.t("کد فعالسازی محتوای الکترونیک")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell> |
<TableCell> |
||||||
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
||||||
<strong style={{ fontSize: fontSize.desktop.price.strong }}> |
<strong style={{ fontSize: fontSize.desktop.price.strong }}> |
||||||
{window.tr(data.product.price * data.count || "1000")}{" "} |
{window.tr(data.product.price * data.count || "1000")}{" "} |
||||||
{window.t("تومان")} |
{window.t("تومان")} |
||||||
</strong> |
</strong> |
||||||
<span style={{ fontSize: fontSize.desktop.price.span }}> |
<span style={{ fontSize: fontSize.desktop.price.span }}> |
||||||
{window.t("قیمت هر عدد")}{" "} |
{window.t("قیمت هر عدد")}{" "} |
||||||
{window.tr(data.product.price) || "100"} |
{window.tr(data.product.price) || "100"} |
||||||
{window.t("تومان")} |
{window.t("تومان")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell> |
<TableCell> |
||||||
<div className="cart-item__counter d-flex align-items-center"> |
<div className="cart-item__counter d-flex align-items-center"> |
||||||
<div className="cart-item__counter--box d-flex justify-content-around align-items-center"> |
<div className="cart-item__counter--box d-flex justify-content-around align-items-center"> |
||||||
<button |
<button |
||||||
onClick={() => |
onClick={() => |
||||||
pushToCart( |
pushToCart( |
||||||
{ |
{ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: 1, |
count: 1, |
||||||
}, |
}, |
||||||
{}, |
{}, |
||||||
{ id: data.factorId } |
{ id: data.factorId } |
||||||
) |
) |
||||||
} |
} |
||||||
style={{ fontSize: fontSize.desktop.counter.button }} |
style={{ fontSize: fontSize.desktop.counter.button }} |
||||||
> |
> |
||||||
+ |
+ |
||||||
</button> |
</button> |
||||||
<span style={{ fontSize: fontSize.desktop.counter.span }}> |
<span style={{ fontSize: fontSize.desktop.counter.span }}> |
||||||
{data.count} |
{data.count} |
||||||
</span> |
</span> |
||||||
<button |
<button |
||||||
onClick={() => |
onClick={() => |
||||||
pushToCart( |
pushToCart( |
||||||
{ |
{ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: -1, |
count: -1, |
||||||
}, |
}, |
||||||
{}, |
{}, |
||||||
{ id: data.factorId } |
{ id: data.factorId } |
||||||
) |
) |
||||||
} |
} |
||||||
style={{ fontSize: fontSize.desktop.counter.button }} |
style={{ fontSize: fontSize.desktop.counter.button }} |
||||||
> |
> |
||||||
- |
- |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell> |
<TableCell> |
||||||
<div className="cart-item__delete d-flex align-items-center justify-content-center"> |
<div className="cart-item__delete d-flex align-items-center justify-content-center"> |
||||||
<DeleteOutlineOutlinedIcon |
<DeleteOutlineOutlinedIcon |
||||||
style={{ |
style={{ |
||||||
color: "#FC120A", |
color: "#FC120A", |
||||||
fontSize: 30, |
fontSize: 30, |
||||||
marginLeft: 5, |
marginLeft: 5, |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
// onClick={() => handleDelete(data.id)}
|
// onClick={() => handleDelete(data.id)}
|
||||||
onClick={() => |
onClick={() => |
||||||
pushToCart({ |
pushToCart({ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: -data.count, |
count: -data.count, |
||||||
}) |
}) |
||||||
} |
} |
||||||
/> |
/> |
||||||
<span |
<span |
||||||
// onClick={() => handleDelete(data.id)}
|
// onClick={() => handleDelete(data.id)}
|
||||||
onClick={() => |
onClick={() => |
||||||
pushToCart({ |
pushToCart({ |
||||||
productId: data.productId, |
productId: data.productId, |
||||||
userId: id, |
userId: id, |
||||||
count: -data.count, |
count: -data.count, |
||||||
}) |
}) |
||||||
} |
} |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.desktop.delete.span, |
fontSize: fontSize.desktop.delete.span, |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{window.t("حذف")} |
{window.t("حذف")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
</TableRow> |
</TableRow> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
loading: state.userProduct.loading, |
loading: state.userProduct.loading, |
||||||
info: state.book.info, |
info: state.book.info, |
||||||
id: state.user.status.id, |
id: state.user.status.id, |
||||||
factorInfo: state.userFactor.info, |
factorInfo: state.userFactor.info, |
||||||
lang: state.publicApi.lang, |
lang: state.publicApi.lang, |
||||||
}), |
}), |
||||||
{ pushToCart: userProduct.add } |
{ pushToCart: userProduct.add } |
||||||
)(BasicTable); |
)(BasicTable); |
||||||
|
|||||||
@ -1,432 +1,432 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { transport, userFactor } from "~/Redux/actions"; |
import { transport, userFactor } from "~/Redux/actions"; |
||||||
|
|
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
import Footer from "../Home/Footer/index"; |
import Footer from "../Home/Footer/index"; |
||||||
import Table from "./Table/index"; |
import Table from "./Table/index"; |
||||||
import DiscoutCode from "./Discount/index"; |
import DiscoutCode from "./Discount/index"; |
||||||
import DeliveryMethod from "./DeliveryMethod/index"; |
import DeliveryMethod from "./DeliveryMethod/index"; |
||||||
import Factor from "./Factor/index"; |
import Factor from "./Factor/index"; |
||||||
import Loader from "~/components/Loader/index"; |
import Loader from "~/components/Loader/index"; |
||||||
import { Link, useHistory } from "react-router-dom"; |
import { Link, useHistory } from "react-router-dom"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
function Navigate({ path }) { |
function Navigate({ path }) { |
||||||
let history = useHistory(); |
let history = useHistory(); |
||||||
return <>{history.push(path)}</>; |
return <>{history.push(path)}</>; |
||||||
} |
} |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
const maxMobileSize = 550; |
const maxMobileSize = 550; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
||||||
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, |
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, |
||||||
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
||||||
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
||||||
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
||||||
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, |
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, |
||||||
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90, |
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90, |
||||||
}, |
}, |
||||||
mobile: { |
mobile: { |
||||||
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, |
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, |
||||||
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
||||||
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
||||||
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
||||||
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, |
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, |
||||||
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
||||||
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
class Cart extends Component { |
class Cart extends Component { |
||||||
state = { |
state = { |
||||||
selectedDelivery: { name: "", price: 0 }, |
selectedDelivery: { name: "", price: 0 }, |
||||||
discount: 0, |
discount: 0, |
||||||
totalPrice: null, |
totalPrice: null, |
||||||
list: this.props.list, |
list: this.props.list, |
||||||
controlFactorInfoRepeat: true, |
controlFactorInfoRepeat: true, |
||||||
}; |
}; |
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) { |
componentDidUpdate(prevProps, prevState) { |
||||||
// if (this.props.factorInfo === null && !this.props.loading) {
|
// if (this.props.factorInfo === null && !this.props.loading) {
|
||||||
// this.props.getFactorInfo({});
|
// this.props.getFactorInfo({});
|
||||||
// }
|
// }
|
||||||
|
|
||||||
if (window.location.search) |
if (window.location.search) |
||||||
if (!window.location.search.includes("NOK") && !window.location.hash) { |
if (!window.location.search.includes("NOK") && !window.location.hash) { |
||||||
let Authority = window.location.search |
let Authority = window.location.search |
||||||
.slice(1) |
.slice(1) |
||||||
.split("&")[0] |
.split("&")[0] |
||||||
.split("=")[1]; |
.split("=")[1]; |
||||||
this.props.getVerify({ Authority }); |
this.props.getVerify({ Authority }); |
||||||
window.location.hash = "verified"; |
window.location.hash = "verified"; |
||||||
} |
} |
||||||
|
|
||||||
// if (this.props.factorInfo === null && !this.controlFactorInfoRepeat) {
|
// if (this.props.factorInfo === null && !this.controlFactorInfoRepeat) {
|
||||||
// this.props.getFactorInfo({});
|
// this.props.getFactorInfo({});
|
||||||
// this.controlFactorInfoRepeat = true;
|
// this.controlFactorInfoRepeat = true;
|
||||||
// }
|
// }
|
||||||
// if (this.props.list.length > 0) {
|
// if (this.props.list.length > 0) {
|
||||||
// let wantedId; //should be zero
|
// let wantedId; //should be zero
|
||||||
// for (let item of this.props.list) {
|
// for (let item of this.props.list) {
|
||||||
// if (item.condition === 2) {
|
// if (item.condition === 2) {
|
||||||
// wantedId = item.id;
|
// wantedId = item.id;
|
||||||
// break;
|
// break;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// if (this.props.list.length !== 1) {
|
// if (this.props.list.length !== 1) {
|
||||||
// // this.props.getInfo({ id: wantedId });
|
// // this.props.getInfo({ id: wantedId });
|
||||||
// }
|
// }
|
||||||
// } else {
|
// } else {
|
||||||
// // this.props.getFactorInfo({});
|
// // this.props.getFactorInfo({});
|
||||||
// }
|
// }
|
||||||
} |
} |
||||||
|
|
||||||
componentDidMount() { |
componentDidMount() { |
||||||
localStorage.removeItem("afterLogin"); |
localStorage.removeItem("afterLogin"); |
||||||
|
|
||||||
window.scrollTo(0, 0); |
window.scrollTo(0, 0); |
||||||
this.props.getTransportList(); |
this.props.getTransportList(); |
||||||
this.props.getFactorInfo({}); |
this.props.getFactorInfo({}); |
||||||
} |
} |
||||||
|
|
||||||
handleCounter = (type, id) => { |
handleCounter = (type, id) => { |
||||||
if (type === "increase") { |
if (type === "increase") { |
||||||
this.setState((prevState) => ({ |
this.setState((prevState) => ({ |
||||||
list: prevState.list.map((item) => |
list: prevState.list.map((item) => |
||||||
item.id === id ? { ...item, number: item.number + 1 } : item |
item.id === id ? { ...item, number: item.number + 1 } : item |
||||||
), |
), |
||||||
})); |
})); |
||||||
} else { |
} else { |
||||||
this.setState((prevState) => ({ |
this.setState((prevState) => ({ |
||||||
list: prevState.list.map((item) => |
list: prevState.list.map((item) => |
||||||
item.id === id ? { ...item, number: item.number - 1 } : item |
item.id === id ? { ...item, number: item.number - 1 } : item |
||||||
), |
), |
||||||
})); |
})); |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
handleDelete = (id) => { |
handleDelete = (id) => { |
||||||
let list = this.state.list.filter((item) => item.id !== id); |
let list = this.state.list.filter((item) => item.id !== id); |
||||||
this.setState({ |
this.setState({ |
||||||
list: list, |
list: list, |
||||||
}); |
}); |
||||||
}; |
}; |
||||||
|
|
||||||
totalPrice = () => { |
totalPrice = () => { |
||||||
let total = 0; |
let total = 0; |
||||||
for (let i = 0; i < this.state.list.length; i++) { |
for (let i = 0; i < this.state.list.length; i++) { |
||||||
total += this.state.list[i].price * this.state.list[i].number; |
total += this.state.list[i].price * this.state.list[i].number; |
||||||
} |
} |
||||||
return total - this.state.discount + this.state.selectedDelivery.price; |
return total - this.state.discount + this.state.selectedDelivery.price; |
||||||
}; |
}; |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { list, payPrice, payMethods, factorInfo } = this.props; |
const { list, payPrice, payMethods, factorInfo } = this.props; |
||||||
if (!factorInfo || list.length === 0) |
if (!factorInfo || list.length === 0) |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
align="center" |
align="center" |
||||||
className={window.innerWidth < 1000 ? "mobile-cart" : "cart "} |
className={window.innerWidth < 1000 ? "mobile-cart" : "cart "} |
||||||
> |
> |
||||||
<Navbar /> |
<Navbar /> |
||||||
<div align="center" style={{ marginTop: 50 }}> |
<div align="center" style={{ marginTop: 50 }}> |
||||||
{window.t("هیچ محصولی در سبد خرید شما وجود ندارد")}{" "} |
{window.t("هیچ محصولی در سبد خرید شما وجود ندارد")}{" "} |
||||||
</div> |
</div> |
||||||
<br /> |
<br /> |
||||||
<Link |
<Link |
||||||
to="/products" |
to="/products" |
||||||
style={{ |
style={{ |
||||||
textDecoration: "none", |
textDecoration: "none", |
||||||
width: "80%", |
width: "80%", |
||||||
textAlign: "center", |
textAlign: "center", |
||||||
backgroundColor: "green", |
backgroundColor: "green", |
||||||
color: "white", |
color: "white", |
||||||
borderRadius: "10px", |
borderRadius: "10px", |
||||||
padding: "5px 10px", |
padding: "5px 10px", |
||||||
margin: "10 auto", |
margin: "10 auto", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{window.t("فروشگاه")}{" "} |
{window.t("فروشگاه")}{" "} |
||||||
</Link> |
</Link> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
list.length > 0 ? ( |
list.length > 0 ? ( |
||||||
<> |
<> |
||||||
<div className="cart d-flex flex-column"> |
<div className="cart d-flex flex-column"> |
||||||
<Navbar /> |
<Navbar /> |
||||||
{window.location.search.includes("NOK") || |
{window.location.search.includes("NOK") || |
||||||
this.props.isVerified === false ? ( |
this.props.isVerified === false ? ( |
||||||
<div> |
<div> |
||||||
{window.t( |
{window.t( |
||||||
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" |
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" |
||||||
)}{" "} |
)}{" "} |
||||||
</div> |
</div> |
||||||
) : window.location.search.includes("OK") ? ( |
) : window.location.search.includes("OK") ? ( |
||||||
<Navigate path="/orders" /> |
<Navigate path="/orders" /> |
||||||
) : null} |
) : null} |
||||||
<div |
<div |
||||||
className="d-flex" |
className="d-flex" |
||||||
style={{ width: "100%", flex: 1, marginBottom: 10 }} |
style={{ width: "100%", flex: 1, marginBottom: 10 }} |
||||||
> |
> |
||||||
<section className="cart__right d-flex flex-column"> |
<section className="cart__right d-flex flex-column"> |
||||||
<header> |
<header> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
||||||
{window.t("سبد پیش خرید")}{" "} |
{window.t("سبد پیش خرید")}{" "} |
||||||
</h1> |
</h1> |
||||||
</header> |
</header> |
||||||
<Table |
<Table |
||||||
list={list} |
list={list} |
||||||
handleCounter={this.handleCounter} |
handleCounter={this.handleCounter} |
||||||
handleDelete={this.handleDelete} |
handleDelete={this.handleDelete} |
||||||
payPrice={payPrice} |
payPrice={payPrice} |
||||||
route={"cart"} |
route={"cart"} |
||||||
/> |
/> |
||||||
</section> |
</section> |
||||||
<section className="cart__left d-flex flex-column p-3"> |
<section className="cart__left d-flex flex-column p-3"> |
||||||
{false && factorInfo.transportId ? ( |
{false && factorInfo.transportId ? ( |
||||||
<header className="cart__left--header d-flex flex-column"> |
<header className="cart__left--header d-flex flex-column"> |
||||||
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
||||||
{window.t("روشهای ارسال")} |
{window.t("روشهای ارسال")} |
||||||
</h2> |
</h2> |
||||||
<div className="d-flex justify-content-between"> |
<div className="d-flex justify-content-between"> |
||||||
{payMethods.map((item, i) => ( |
{payMethods.map((item, i) => ( |
||||||
<DeliveryMethod |
<DeliveryMethod |
||||||
data={item} |
data={item} |
||||||
key={i} |
key={i} |
||||||
parent={this} |
parent={this} |
||||||
transportId={ |
transportId={ |
||||||
factorInfo ? factorInfo.transportId : null |
factorInfo ? factorInfo.transportId : null |
||||||
} |
} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
</header> |
</header> |
||||||
) : null} |
) : null} |
||||||
{factorInfo ? <DiscoutCode /> : null} |
{factorInfo ? <DiscoutCode /> : null} |
||||||
{factorInfo ? <Factor parent={this} list={list} /> : null} |
{factorInfo ? <Factor parent={this} list={list} /> : null} |
||||||
{factorInfo ? ( |
{factorInfo ? ( |
||||||
<div className="cart__totalPrice d-flex align-items-center justify-content-center"> |
<div className="cart__totalPrice d-flex align-items-center justify-content-center"> |
||||||
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
||||||
{window.t("جمع کل")} |
{window.t("جمع کل")} |
||||||
<br /> |
<br /> |
||||||
{window.t("سبد خرید")}{" "} |
{window.t("سبد خرید")}{" "} |
||||||
</h3> |
</h3> |
||||||
<div className="d-flex align-items-center"> |
<div className="d-flex align-items-center"> |
||||||
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
||||||
{window.tr( |
{window.tr( |
||||||
factorInfo.payPrice - factorInfo.transportPrice |
factorInfo.payPrice - factorInfo.transportPrice |
||||||
)} |
)} |
||||||
</strong> |
</strong> |
||||||
<span style={{ fontSize: fontSize.mobile.h3 }}> |
<span style={{ fontSize: fontSize.mobile.h3 }}> |
||||||
{window.t("تومان")} |
{window.t("تومان")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
|
|
||||||
{/* <div className="cart__left--header d-flex flex-column mt-3"> |
{/* <div className="cart__left--header d-flex flex-column mt-3"> |
||||||
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
||||||
{window.t("روشهای ارسال")} |
{window.t("روشهای ارسال")} |
||||||
</h2> |
</h2> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}> |
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
{window.t("با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> |
{window.t("با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> |
||||||
<div className="d-flex justify-content-between"> |
<div className="d-flex justify-content-between"> |
||||||
{payMethods.map((item, i) => ( |
{payMethods.map((item, i) => ( |
||||||
<DeliveryMethod data={item} key={i} parent={this} /> |
<DeliveryMethod data={item} key={i} parent={this} /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
</div> */} |
</div> */} |
||||||
|
|
||||||
<Link |
<Link |
||||||
disabled={window.lang == "ar" || window.lang == "en"} |
disabled={window.lang == "ar" || window.lang == "en"} |
||||||
to={ |
to={ |
||||||
window.lang == "ar" || window.lang == "en" |
window.lang == "ar" || window.lang == "en" |
||||||
? "/cart" |
? "/cart" |
||||||
: "/checkout" |
: "/checkout" |
||||||
} |
} |
||||||
className="cart__left--submit" |
className="cart__left--submit" |
||||||
style={{ textDecoration: "none", textAlign: "center" }} |
style={{ textDecoration: "none", textAlign: "center" }} |
||||||
//onClick={() => this.props.payFactor({ userId: userId })}
|
//onClick={() => this.props.payFactor({ userId: userId })}
|
||||||
> |
> |
||||||
{window.t("ادامه")}{" "} |
{window.t("ادامه")}{" "} |
||||||
</Link> |
</Link> |
||||||
</section> |
</section> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer /> |
<Footer /> |
||||||
</> |
</> |
||||||
) : ( |
) : ( |
||||||
<div |
<div |
||||||
className="d-flex justify-content-center align-items-center" |
className="d-flex justify-content-center align-items-center" |
||||||
style={{ height: "100vh", width: "100vw" }} |
style={{ height: "100vh", width: "100vw" }} |
||||||
> |
> |
||||||
<Loader /> |
<Loader /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
list.length > 0 ? ( |
list.length > 0 ? ( |
||||||
<div className="mobile-cart d-flex flex-column"> |
<div className="mobile-cart d-flex flex-column"> |
||||||
<Navbar /> |
<Navbar /> |
||||||
{window.location.search.includes("NOK") ? ( |
{window.location.search.includes("NOK") ? ( |
||||||
<div> |
<div> |
||||||
{window.t( |
{window.t( |
||||||
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" |
"پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید" |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
||||||
{window.t("سبد پیش خرید")} |
{window.t("سبد پیش خرید")} |
||||||
</h1> |
</h1> |
||||||
<div |
<div |
||||||
className={`d-flex ${ |
className={`d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<Table |
<Table |
||||||
list={list} |
list={list} |
||||||
handleCounter={this.handleCounter} |
handleCounter={this.handleCounter} |
||||||
handleDelete={this.handleDelete} |
handleDelete={this.handleDelete} |
||||||
payPrice={payPrice} |
payPrice={payPrice} |
||||||
route={"cart"} |
route={"cart"} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
{false && factorInfo.transportId ? ( |
{false && factorInfo.transportId ? ( |
||||||
<div className="mobile-cart__payMethods d-flex flex-column"> |
<div className="mobile-cart__payMethods d-flex flex-column"> |
||||||
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
||||||
{window.t("روشهای ارسال")} |
{window.t("روشهای ارسال")} |
||||||
</h2> |
</h2> |
||||||
<p style={{ fontSize: fontSize.mobile.p }}> |
<p style={{ fontSize: fontSize.mobile.p }}> |
||||||
{window.t( |
{window.t( |
||||||
"با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید" |
"با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید" |
||||||
)}{" "} |
)}{" "} |
||||||
</p> |
</p> |
||||||
|
|
||||||
<div className="d-flex justify-content-between"> |
<div className="d-flex justify-content-between"> |
||||||
{this.props.payMethods.map((item, i) => ( |
{this.props.payMethods.map((item, i) => ( |
||||||
<DeliveryMethod |
<DeliveryMethod |
||||||
data={item} |
data={item} |
||||||
key={i} |
key={i} |
||||||
parent={this} |
parent={this} |
||||||
transportId={factorInfo ? factorInfo.transportId : null} |
transportId={factorInfo ? factorInfo.transportId : null} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
<DiscoutCode parent={this} /> |
<DiscoutCode parent={this} /> |
||||||
{factorInfo ? <Factor parent={this} list={list} /> : null} |
{factorInfo ? <Factor parent={this} list={list} /> : null} |
||||||
|
|
||||||
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2"> |
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2"> |
||||||
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
<h3 style={{ fontSize: fontSize.mobile.h2 }}> |
||||||
{window.t("جمع کل")} <br /> |
{window.t("جمع کل")} <br /> |
||||||
{window.t("سبد خرید")}{" "} |
{window.t("سبد خرید")}{" "} |
||||||
</h3> |
</h3> |
||||||
{factorInfo ? ( |
{factorInfo ? ( |
||||||
<div className="d-flex align-items-center"> |
<div className="d-flex align-items-center"> |
||||||
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
<strong style={{ fontSize: fontSize.mobile.h1 }}> |
||||||
{window.tr( |
{window.tr( |
||||||
factorInfo.payPrice - factorInfo.transportPrice |
factorInfo.payPrice - factorInfo.transportPrice |
||||||
)} |
)} |
||||||
{/* // factorInfo.transportPrice - // factorInfo.offPrice} */} |
{/* // factorInfo.transportPrice - // factorInfo.offPrice} */} |
||||||
</strong> |
</strong> |
||||||
<span style={{ fontSize: fontSize.mobile.h3 }}> |
<span style={{ fontSize: fontSize.mobile.h3 }}> |
||||||
{window.t("تومان")} |
{window.t("تومان")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
{/* <div className="mobile-cart__payMethods d-flex flex-column"> |
{/* <div className="mobile-cart__payMethods d-flex flex-column"> |
||||||
<h2 style={{ fontSize: fontSize.mobile.h2 }}>{window.t("روشهای ارسال")}</h2> |
<h2 style={{ fontSize: fontSize.mobile.h2 }}>{window.t("روشهای ارسال")}</h2> |
||||||
<p style={{ fontSize: fontSize.mobile.p }}> |
<p style={{ fontSize: fontSize.mobile.p }}> |
||||||
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> |
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید")} </p> |
||||||
|
|
||||||
<div className="d-flex justify-content-between"> |
<div className="d-flex justify-content-between"> |
||||||
{this.props.payMethods.map((item, i) => ( |
{this.props.payMethods.map((item, i) => ( |
||||||
<DeliveryMethod data={item} key={i} parent={this} /> |
<DeliveryMethod data={item} key={i} parent={this} /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
</div> */} |
</div> */} |
||||||
{/* <button |
{/* <button |
||||||
className="mobile-cart__submit" |
className="mobile-cart__submit" |
||||||
onClick={() => this.props.payFactor({ userId: userId })} |
onClick={() => this.props.payFactor({ userId: userId })} |
||||||
> |
> |
||||||
پرداخت")} |
پرداخت")} |
||||||
</button> */} |
</button> */} |
||||||
|
|
||||||
<br /> |
<br /> |
||||||
<div className="product-addtocart__box--accept d-flex"> |
<div className="product-addtocart__box--accept d-flex"> |
||||||
<input type="checkbox" checked={true} /> |
<input type="checkbox" checked={true} /> |
||||||
<Link |
<Link |
||||||
to="/page/privacy" |
to="/page/privacy" |
||||||
style={{ fontSize: "13px", margin: 0, padding: 0 }} |
style={{ fontSize: "13px", margin: 0, padding: 0 }} |
||||||
> |
> |
||||||
{window.t( |
{window.t( |
||||||
"شرایط استفاده از دانوین و حریم خصوصی را مطالعه کرده ام" |
"شرایط استفاده از دانوین و حریم خصوصی را مطالعه کرده ام" |
||||||
)} |
)} |
||||||
</Link> |
</Link> |
||||||
</div> |
</div> |
||||||
<div className="product-addtocart__box--accept d-flex"> |
<div className="product-addtocart__box--accept d-flex"> |
||||||
<input type="checkbox" checked={true} /> |
<input type="checkbox" checked={true} /> |
||||||
<Link |
<Link |
||||||
to="/page/returning" |
to="/page/returning" |
||||||
style={{ fontSize: "13px", margin: 0, padding: 0 }} |
style={{ fontSize: "13px", margin: 0, padding: 0 }} |
||||||
> |
> |
||||||
{window.t("شرایط مرجوع کردن کالا در دانوین")} |
{window.t("شرایط مرجوع کردن کالا در دانوین")} |
||||||
</Link> |
</Link> |
||||||
</div> |
</div> |
||||||
<Link |
<Link |
||||||
disabled={window.lang == "ar" || window.lang == "en"} |
disabled={window.lang == "ar" || window.lang == "en"} |
||||||
to={ |
to={ |
||||||
window.lang == "ar" || window.lang == "en" |
window.lang == "ar" || window.lang == "en" |
||||||
? "/cart" |
? "/cart" |
||||||
: "/checkout" |
: "/checkout" |
||||||
} |
} |
||||||
className="mobile-cart__submit" |
className="mobile-cart__submit" |
||||||
style={{ textAlign: "center", textDecoration: "none" }} |
style={{ textAlign: "center", textDecoration: "none" }} |
||||||
// onClick={() => this.props.payFactor({ userId: userId })}
|
// onClick={() => this.props.payFactor({ userId: userId })}
|
||||||
> |
> |
||||||
{window.t("ادامه")}{" "} |
{window.t("ادامه")}{" "} |
||||||
</Link> |
</Link> |
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<div |
<div |
||||||
className="d-flex justify-content-center align-items-center" |
className="d-flex justify-content-center align-items-center" |
||||||
style={{ height: "100vh", width: "100vw" }} |
style={{ height: "100vh", width: "100vw" }} |
||||||
> |
> |
||||||
<Loader /> |
<Loader /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
list: |
list: |
||||||
state.userFactor.info?.products?.filter((item) => +item.condition < 2) || |
state.userFactor.info?.products?.filter((item) => +item.condition < 2) || |
||||||
[], |
[], |
||||||
payPrice: state.userProduct.sum, |
payPrice: state.userProduct.sum, |
||||||
payMethods: state.transport.list, |
payMethods: state.transport.list, |
||||||
factorInfo: state.userFactor.info, |
factorInfo: state.userFactor.info, |
||||||
loading: state.userFactor.loading, |
loading: state.userFactor.loading, |
||||||
userId: state.user.status.id, |
userId: state.user.status.id, |
||||||
lang: state.publicApi.lang, |
lang: state.publicApi.lang, |
||||||
isVerified: state.userFactor.isVerified, |
isVerified: state.userFactor.isVerified, |
||||||
}), |
}), |
||||||
{ |
{ |
||||||
// getList: userProduct.list,
|
// getList: userProduct.list,
|
||||||
// getInfo: userProduct.info,
|
// getInfo: userProduct.info,
|
||||||
getTransportList: transport.list, |
getTransportList: transport.list, |
||||||
getFactorInfo: userFactor.info, |
getFactorInfo: userFactor.info, |
||||||
payFactor: userFactor.payment, |
payFactor: userFactor.payment, |
||||||
getVerify: userFactor.verify, |
getVerify: userFactor.verify, |
||||||
} |
} |
||||||
)(Cart); |
)(Cart); |
||||||
|
|||||||
@ -1,73 +1,73 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
||||||
import { toast } from "react-toastify"; |
import { toast } from "react-toastify"; |
||||||
|
|
||||||
export default class RadioMessage extends Component { |
export default class RadioMessage extends Component { |
||||||
constructor(props) { |
constructor(props) { |
||||||
super(props); |
super(props); |
||||||
this.state = { |
this.state = { |
||||||
value: this.props.message.value, |
value: this.props.message.value, |
||||||
}; |
}; |
||||||
} |
} |
||||||
|
|
||||||
handleRadioChange = (newValue) => { |
handleRadioChange = (newValue) => { |
||||||
if (this.props.isActive) |
if (this.props.isActive) |
||||||
this.setState({ |
this.setState({ |
||||||
value: newValue, |
value: newValue, |
||||||
}); |
}); |
||||||
}; |
}; |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { message, isActive } = this.props; |
const { message, isActive } = this.props; |
||||||
return ( |
return ( |
||||||
<div className="message-2d d-flex flex-column d-flex"> |
<div className="message-2d d-flex flex-column d-flex"> |
||||||
<div className="message-2d__options d-flex flex-wrap justify-content-center"> |
<div className="message-2d__options d-flex flex-wrap justify-content-center"> |
||||||
{message.options.map((row) => ( |
{message.options.map((row) => ( |
||||||
<Row |
<Row |
||||||
list={row} |
list={row} |
||||||
handleRadioChange={this.handleRadioChange} |
handleRadioChange={this.handleRadioChange} |
||||||
value={this.state.value} |
value={this.state.value} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
{isActive && ( |
{isActive && ( |
||||||
<button |
<button |
||||||
className="message-2d__submit" |
className="message-2d__submit" |
||||||
onClick={() => toast.success(window.t("ثبت شد"))} |
onClick={() => toast.success(window.t("ثبت شد"))} |
||||||
> |
> |
||||||
<ArrowRightAltIcon |
<ArrowRightAltIcon |
||||||
style={{ color: "white", width: 32, height: 32, marginLeft: 10 }} |
style={{ color: "white", width: 32, height: 32, marginLeft: 10 }} |
||||||
/> |
/> |
||||||
</button> |
</button> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const Row = (props) => { |
const Row = (props) => { |
||||||
return ( |
return ( |
||||||
<div className="message-2d__options--row d-flex"> |
<div className="message-2d__options--row d-flex"> |
||||||
{props.list.map((item) => ( |
{props.list.map((item) => ( |
||||||
<Item item={item} {...props} /> |
<Item item={item} {...props} /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
onClick={() => props.handleRadioChange(props.item.name)} |
onClick={() => props.handleRadioChange(props.item.name)} |
||||||
style={{ |
style={{ |
||||||
backgroundColor: |
backgroundColor: |
||||||
props.item.name === props.value |
props.item.name === props.value |
||||||
? "#6f42c1" |
? "#6f42c1" |
||||||
: "rgb(181 224 252 / 47%)", |
: "rgb(181 224 252 / 47%)", |
||||||
color: props.item.name === props.value ? "white" : "black", |
color: props.item.name === props.value ? "white" : "black", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{props.item.name} |
{props.item.name} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,64 +1,64 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
||||||
|
|
||||||
export default class RadioMessage extends Component { |
export default class RadioMessage extends Component { |
||||||
state = { |
state = { |
||||||
value: this.props.message.value, |
value: this.props.message.value, |
||||||
}; |
}; |
||||||
handleRadioChange = (value) => { |
handleRadioChange = (value) => { |
||||||
if (this.props.isActive) this.setState({ value }); |
if (this.props.isActive) this.setState({ value }); |
||||||
}; |
}; |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { message, isActive, action } = this.props; |
const { message, isActive, action } = this.props; |
||||||
const { value } = this.state; |
const { value } = this.state; |
||||||
return ( |
return ( |
||||||
<div className="message-2d d-flex flex-column d-flex"> |
<div className="message-2d d-flex flex-column d-flex"> |
||||||
<div className="message-2d__options d-flex flex-wrap justify-content-center"> |
<div className="message-2d__options d-flex flex-wrap justify-content-center"> |
||||||
{message.options.map((row) => ( |
{message.options.map((row) => ( |
||||||
<Row |
<Row |
||||||
list={row} |
list={row} |
||||||
handleRadioChange={this.handleRadioChange} |
handleRadioChange={this.handleRadioChange} |
||||||
value={value} |
value={value} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
{isActive && ( |
{isActive && ( |
||||||
<button |
<button |
||||||
className="message-2d__submit" |
className="message-2d__submit" |
||||||
onClick={() => action({ value })} |
onClick={() => action({ value })} |
||||||
> |
> |
||||||
<ArrowRightAltIcon /> |
<ArrowRightAltIcon /> |
||||||
</button> |
</button> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const Row = (props) => { |
const Row = (props) => { |
||||||
return ( |
return ( |
||||||
<div className="message-2d__options--row d-flex"> |
<div className="message-2d__options--row d-flex"> |
||||||
{props.list.map((item) => ( |
{props.list.map((item) => ( |
||||||
<Item item={item} {...props} /> |
<Item item={item} {...props} /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
onClick={() => props.handleRadioChange(props.item.name)} |
onClick={() => props.handleRadioChange(props.item.name)} |
||||||
style={{ |
style={{ |
||||||
backgroundColor: |
backgroundColor: |
||||||
props.item.name === props.value |
props.item.name === props.value |
||||||
? "rgb(100, 205, 130)" |
? "rgb(100, 205, 130)" |
||||||
: "rgba(255, 255, 255, 0.4)", |
: "rgba(255, 255, 255, 0.4)", |
||||||
color: props.item.name === props.value ? "white" : "black", |
color: props.item.name === props.value ? "white" : "black", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{props.item.name} |
{props.item.name} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,60 +1,60 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import Grid from "@material-ui/core/Grid"; |
import Grid from "@material-ui/core/Grid"; |
||||||
import Slider from "@material-ui/core/Slider"; |
import Slider from "@material-ui/core/Slider"; |
||||||
import Input from "@material-ui/core/Input"; |
import Input from "@material-ui/core/Input"; |
||||||
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
||||||
|
|
||||||
export default class SliderMessage extends Component { |
export default class SliderMessage extends Component { |
||||||
state = { |
state = { |
||||||
value: this.props.message.value || 0, |
value: this.props.message.value || 0, |
||||||
}; |
}; |
||||||
onChange = (value) => { |
onChange = (value) => { |
||||||
if (!this.props.isActive || !value) return; |
if (!this.props.isActive || !value) return; |
||||||
const [min, max] = this.props.message.options[0] || [0, 100, 1]; |
const [min, max] = this.props.message.options[0] || [0, 100, 1]; |
||||||
this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) }); |
this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) }); |
||||||
}; |
}; |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { message, isActive, action } = this.props; |
const { message, isActive, action } = this.props; |
||||||
const [min, max, step] = message.options[0] || [0, 100, 1]; |
const [min, max, step] = message.options[0] || [0, 100, 1]; |
||||||
const { value } = this.state; |
const { value } = this.state; |
||||||
return ( |
return ( |
||||||
<div className="message-2d d-flex flex-column d-flex sliderBox"> |
<div className="message-2d d-flex flex-column d-flex sliderBox"> |
||||||
<Grid container spacing={2} alignItems="center"> |
<Grid container spacing={2} alignItems="center"> |
||||||
<Grid item xs> |
<Grid item xs> |
||||||
<Slider |
<Slider |
||||||
className="slider" |
className="slider" |
||||||
value={value} |
value={value} |
||||||
onChange={(e, value) => this.onChange(value)} |
onChange={(e, value) => this.onChange(value)} |
||||||
aria-labelledby="input-slider" |
aria-labelledby="input-slider" |
||||||
min={min} |
min={min} |
||||||
max={max} |
max={max} |
||||||
step={step} |
step={step} |
||||||
/> |
/> |
||||||
</Grid> |
</Grid> |
||||||
<Grid item> |
<Grid item> |
||||||
<Input |
<Input |
||||||
className="input" |
className="input" |
||||||
disabled={!isActive} |
disabled={!isActive} |
||||||
value={this.state.value} |
value={this.state.value} |
||||||
onChange={(e) => this.onChange(e.target.value)} |
onChange={(e) => this.onChange(e.target.value)} |
||||||
onBlur={() => this.onChange(value)} |
onBlur={() => this.onChange(value)} |
||||||
inputProps={{ |
inputProps={{ |
||||||
step: step, |
step: step, |
||||||
min: min, |
min: min, |
||||||
max: max, |
max: max, |
||||||
type: "number", |
type: "number", |
||||||
"aria-labelledby": "input-slider", |
"aria-labelledby": "input-slider", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
</Grid> |
</Grid> |
||||||
</Grid> |
</Grid> |
||||||
{isActive && ( |
{isActive && ( |
||||||
<button className="message-2d__submit" onClick={() => action()}> |
<button className="message-2d__submit" onClick={() => action()}> |
||||||
<ArrowRightAltIcon /> |
<ArrowRightAltIcon /> |
||||||
</button> |
</button> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,59 +1,59 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { SortableContainer, SortableElement } from "react-sortable-hoc"; |
import { SortableContainer, SortableElement } from "react-sortable-hoc"; |
||||||
import arrayMove from "array-move"; |
import arrayMove from "array-move"; |
||||||
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; |
||||||
|
|
||||||
export default class DraggableMessage extends Component { |
export default class DraggableMessage extends Component { |
||||||
constructor(props) { |
constructor(props) { |
||||||
super(props); |
super(props); |
||||||
this.state = this.props.message; |
this.state = this.props.message; |
||||||
} |
} |
||||||
onSortEnd = ({ oldIndex, newIndex }) => { |
onSortEnd = ({ oldIndex, newIndex }) => { |
||||||
if (this.props.isActive) |
if (this.props.isActive) |
||||||
this.setState(({ options }) => ({ |
this.setState(({ options }) => ({ |
||||||
options: arrayMove(options, oldIndex, newIndex), |
options: arrayMove(options, oldIndex, newIndex), |
||||||
})); |
})); |
||||||
}; |
}; |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { isActive, action } = this.props; |
const { isActive, action } = this.props; |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div className="message-2d d-flex flex-column d-flex"> |
<div className="message-2d d-flex flex-column d-flex"> |
||||||
<SortableList |
<SortableList |
||||||
items={this.state.options} |
items={this.state.options} |
||||||
onSortEnd={this.onSortEnd} |
onSortEnd={this.onSortEnd} |
||||||
disabled={!isActive} |
disabled={!isActive} |
||||||
/> |
/> |
||||||
{isActive && ( |
{isActive && ( |
||||||
<button className="message-2d__submit" onClick={() => action()}> |
<button className="message-2d__submit" onClick={() => action()}> |
||||||
<ArrowRightAltIcon /> |
<ArrowRightAltIcon /> |
||||||
</button> |
</button> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const SortableList = SortableContainer(({ items, disabled }) => { |
const SortableList = SortableContainer(({ items, disabled }) => { |
||||||
return ( |
return ( |
||||||
<div className="message-2d__options d-flex flex-column"> |
<div className="message-2d__options d-flex flex-column"> |
||||||
{items.map((row, index) => ( |
{items.map((row, index) => ( |
||||||
<SortableItem |
<SortableItem |
||||||
key={`item-${index}`} |
key={`item-${index}`} |
||||||
index={index} |
index={index} |
||||||
value={row} |
value={row} |
||||||
disabled={disabled} |
disabled={disabled} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}); |
}); |
||||||
|
|
||||||
const SortableItem = SortableElement(({ value }) => ( |
const SortableItem = SortableElement(({ value }) => ( |
||||||
<div className="message-2d__options--row d-flex"> |
<div className="message-2d__options--row d-flex"> |
||||||
{value.map((item) => ( |
{value.map((item) => ( |
||||||
<div>{item.name}</div> |
<div>{item.name}</div> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
)); |
)); |
||||||
|
|||||||
@ -1,30 +1,30 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import arrayMove from "array-move"; |
import arrayMove from "array-move"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
export default class DraggableMessage extends Component { |
export default class DraggableMessage extends Component { |
||||||
constructor(props) { |
constructor(props) { |
||||||
super(props); |
super(props); |
||||||
this.state = this.props.message; |
this.state = this.props.message; |
||||||
} |
} |
||||||
onSortEnd = ({ oldIndex, newIndex }) => { |
onSortEnd = ({ oldIndex, newIndex }) => { |
||||||
if (this.props.isActive) |
if (this.props.isActive) |
||||||
this.setState(({ options }) => ({ |
this.setState(({ options }) => ({ |
||||||
options: arrayMove(options, oldIndex, newIndex), |
options: arrayMove(options, oldIndex, newIndex), |
||||||
})); |
})); |
||||||
}; |
}; |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { isActive } = this.props; |
const { isActive } = this.props; |
||||||
if (!isActive) return null; |
if (!isActive) return null; |
||||||
return <div className="ptapbox"></div>; |
return <div className="ptapbox"></div>; |
||||||
} |
} |
||||||
a = ( |
a = ( |
||||||
<button |
<button |
||||||
className="message-2d__submit" |
className="message-2d__submit" |
||||||
onClick={(e) => this.props.action({ value: e.target.value })} |
onClick={(e) => this.props.action({ value: e.target.value })} |
||||||
> |
> |
||||||
ثبت{" "} |
ثبت{" "} |
||||||
</button> |
</button> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,92 +1,92 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { userFactor } from "~/Redux/actions"; |
import { userFactor } from "~/Redux/actions"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
const maxMobileSize = 550; |
const maxMobileSize = 550; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
||||||
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, |
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, |
||||||
button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
||||||
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
||||||
}, |
}, |
||||||
mobile: { |
mobile: { |
||||||
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
||||||
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
||||||
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
||||||
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, |
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
const DiscoutCode = ({ codeId, setCodeId, userId, factorId }) => { |
const DiscoutCode = ({ codeId, setCodeId, userId, factorId }) => { |
||||||
const [value, setValue] = React.useState(codeId || ""); |
const [value, setValue] = React.useState(codeId || ""); |
||||||
function setOff() { |
function setOff() { |
||||||
setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); |
setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); |
||||||
} |
} |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div className="discount-code d-flex flex-column"> |
<div className="discount-code d-flex flex-column"> |
||||||
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
||||||
{window.t("کد تخفیف")} |
{window.t("کد تخفیف")} |
||||||
</h2> |
</h2> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}> |
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
||||||
</p> |
</p> |
||||||
<div className="discount-code__box d-flex align-items-center"> |
<div className="discount-code__box d-flex align-items-center"> |
||||||
<input |
<input |
||||||
style={{ fontSize: fontSize.desktop.input }} |
style={{ fontSize: fontSize.desktop.input }} |
||||||
type="text" |
type="text" |
||||||
defaultValue={codeId} |
defaultValue={codeId} |
||||||
onChange={(e) => setValue(e.target.value)} |
onChange={(e) => setValue(e.target.value)} |
||||||
/> |
/> |
||||||
<button |
<button |
||||||
style={{ fontSize: fontSize.desktop.button }} |
style={{ fontSize: fontSize.desktop.button }} |
||||||
onClick={setOff} |
onClick={setOff} |
||||||
> |
> |
||||||
{window.t("ثبت کد")}{" "} |
{window.t("ثبت کد")}{" "} |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div className="mobile-discount-code d-flex flex-column"> |
<div className="mobile-discount-code d-flex flex-column"> |
||||||
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
||||||
{window.t("کد تخفیف")} |
{window.t("کد تخفیف")} |
||||||
</h2> |
</h2> |
||||||
<p style={{ fontSize: fontSize.mobile.p }}> |
<p style={{ fontSize: fontSize.mobile.p }}> |
||||||
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
{window.t("اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید")}{" "} |
||||||
</p> |
</p> |
||||||
<div className="mobile-discount-code__box d-flex align-items-center"> |
<div className="mobile-discount-code__box d-flex align-items-center"> |
||||||
<input |
<input |
||||||
style={{ fontSize: fontSize.mobile.input }} |
style={{ fontSize: fontSize.mobile.input }} |
||||||
type="text" |
type="text" |
||||||
onChange={(e) => setValue(e.target.value)} |
onChange={(e) => setValue(e.target.value)} |
||||||
/> |
/> |
||||||
<button |
<button |
||||||
style={{ fontSize: fontSize.mobile.button }} |
style={{ fontSize: fontSize.mobile.button }} |
||||||
onClick={setOff} |
onClick={setOff} |
||||||
> |
> |
||||||
{window.t("ثبت کد")}{" "} |
{window.t("ثبت کد")}{" "} |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
codeId: state.userFactor.info?.codeId, |
codeId: state.userFactor.info?.codeId, |
||||||
userId: state.user.status.id, |
userId: state.user.status.id, |
||||||
factorId: state.userFactor.info?.id, |
factorId: state.userFactor.info?.id, |
||||||
lang: state.publicApi.lang, |
lang: state.publicApi.lang, |
||||||
}), |
}), |
||||||
{ |
{ |
||||||
setCodeId: userFactor.update, |
setCodeId: userFactor.update, |
||||||
} |
} |
||||||
)(DiscoutCode); |
)(DiscoutCode); |
||||||
|
|||||||
@ -1,255 +1,255 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { userProduct } from "~/Redux/actions"; |
import { userProduct } from "~/Redux/actions"; |
||||||
|
|
||||||
import { makeStyles } from "@material-ui/core/styles"; |
import { makeStyles } from "@material-ui/core/styles"; |
||||||
import Table from "@material-ui/core/Table"; |
import Table from "@material-ui/core/Table"; |
||||||
import TableBody from "@material-ui/core/TableBody"; |
import TableBody from "@material-ui/core/TableBody"; |
||||||
import TableCell from "@material-ui/core/TableCell"; |
import TableCell from "@material-ui/core/TableCell"; |
||||||
import TableContainer from "@material-ui/core/TableContainer"; |
import TableContainer from "@material-ui/core/TableContainer"; |
||||||
import TableHead from "@material-ui/core/TableHead"; |
import TableHead from "@material-ui/core/TableHead"; |
||||||
import TableRow from "@material-ui/core/TableRow"; |
import TableRow from "@material-ui/core/TableRow"; |
||||||
import Paper from "@material-ui/core/Paper"; |
import Paper from "@material-ui/core/Paper"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
const useStyles = makeStyles({ |
const useStyles = makeStyles({ |
||||||
table: {}, |
table: {}, |
||||||
}); |
}); |
||||||
const grades = [ |
const grades = [ |
||||||
window.t("پیش دبستان"), |
window.t("پیش دبستان"), |
||||||
window.t("اول"), |
window.t("اول"), |
||||||
window.t("دوم"), |
window.t("دوم"), |
||||||
window.t("سوم"), |
window.t("سوم"), |
||||||
window.t("چهارم"), |
window.t("چهارم"), |
||||||
window.t("پنجم"), |
window.t("پنجم"), |
||||||
window.t("ششم"), |
window.t("ششم"), |
||||||
window.t("هفتم"), |
window.t("هفتم"), |
||||||
window.t("هشتم"), |
window.t("هشتم"), |
||||||
window.t("نهم"), |
window.t("نهم"), |
||||||
window.t("دهم"), |
window.t("دهم"), |
||||||
window.t("یازدهم"), |
window.t("یازدهم"), |
||||||
window.t("دوازدهم"), |
window.t("دوازدهم"), |
||||||
]; |
]; |
||||||
const maxMobileSize = 550; |
const maxMobileSize = 550; |
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
mobile: { |
mobile: { |
||||||
info: { |
info: { |
||||||
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, |
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, |
||||||
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
||||||
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
||||||
}, |
}, |
||||||
price: { |
price: { |
||||||
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, |
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, |
||||||
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, |
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, |
||||||
}, |
}, |
||||||
counter: { |
counter: { |
||||||
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, |
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, |
||||||
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, |
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, |
||||||
}, |
}, |
||||||
delete: { |
delete: { |
||||||
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, |
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
desktop: { |
desktop: { |
||||||
info: { |
info: { |
||||||
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
||||||
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
||||||
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
||||||
}, |
}, |
||||||
price: { |
price: { |
||||||
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, |
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, |
||||||
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
||||||
}, |
}, |
||||||
counter: { |
counter: { |
||||||
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, |
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, |
||||||
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, |
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, |
||||||
}, |
}, |
||||||
delete: { |
delete: { |
||||||
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
function BasicTable(props) { |
function BasicTable(props) { |
||||||
const classes = useStyles(); |
const classes = useStyles(); |
||||||
const { list, handleDelete, route, factorInfo } = props; |
const { list, handleDelete, route, factorInfo } = props; |
||||||
|
|
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<TableContainer component={Paper}> |
<TableContainer component={Paper}> |
||||||
<Table className={classes.table} aria-label="simple table"> |
<Table className={classes.table} aria-label="simple table"> |
||||||
<TableHead> |
<TableHead> |
||||||
<TableRow> |
<TableRow> |
||||||
<TableCell align="right">{window.t("محصولات")}</TableCell> |
<TableCell align="right">{window.t("محصولات")}</TableCell> |
||||||
<TableCell align="center">{window.t("قیمت")}</TableCell> |
<TableCell align="center">{window.t("قیمت")}</TableCell> |
||||||
|
|
||||||
{route === "callback" ? ( |
{route === "callback" ? ( |
||||||
<TableCell align="center">{window.t("تعداد")}</TableCell> |
<TableCell align="center">{window.t("تعداد")}</TableCell> |
||||||
) : null} |
) : null} |
||||||
</TableRow> |
</TableRow> |
||||||
</TableHead> |
</TableHead> |
||||||
<TableBody> |
<TableBody> |
||||||
{list.map((row, i) => ( |
{list.map((row, i) => ( |
||||||
<Item |
<Item |
||||||
data={row} |
data={row} |
||||||
key={i} |
key={i} |
||||||
// handleCounter={handleCounter}
|
// handleCounter={handleCounter}
|
||||||
pushToCart={props.pushToCart} |
pushToCart={props.pushToCart} |
||||||
info={props.info} |
info={props.info} |
||||||
id={props.id} |
id={props.id} |
||||||
handleDelete={handleDelete} |
handleDelete={handleDelete} |
||||||
route={route} |
route={route} |
||||||
factorInfo={factorInfo} |
factorInfo={factorInfo} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</TableBody> |
</TableBody> |
||||||
</Table> |
</Table> |
||||||
</TableContainer> |
</TableContainer> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<TableContainer component={Paper}> |
<TableContainer component={Paper}> |
||||||
<Table className={classes.table} aria-label="simple table"> |
<Table className={classes.table} aria-label="simple table"> |
||||||
<TableHead> |
<TableHead> |
||||||
<TableRow> |
<TableRow> |
||||||
<TableCell align="right">{window.t("محصولات")}</TableCell> |
<TableCell align="right">{window.t("محصولات")}</TableCell> |
||||||
<TableCell align="center">{window.t("تعداد")}</TableCell> |
<TableCell align="center">{window.t("تعداد")}</TableCell> |
||||||
<TableCell align="center">{window.t("قیمت")}</TableCell> |
<TableCell align="center">{window.t("قیمت")}</TableCell> |
||||||
</TableRow> |
</TableRow> |
||||||
</TableHead> |
</TableHead> |
||||||
<TableBody> |
<TableBody> |
||||||
{list.map((row, i) => ( |
{list.map((row, i) => ( |
||||||
<Item |
<Item |
||||||
data={row} |
data={row} |
||||||
key={i} |
key={i} |
||||||
// handleCounter={handleCounter}
|
// handleCounter={handleCounter}
|
||||||
pushToCart={props.pushToCart} |
pushToCart={props.pushToCart} |
||||||
info={props.info} |
info={props.info} |
||||||
id={props.id} |
id={props.id} |
||||||
handleDelete={handleDelete} |
handleDelete={handleDelete} |
||||||
route={route} |
route={route} |
||||||
factorInfo={factorInfo} |
factorInfo={factorInfo} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</TableBody> |
</TableBody> |
||||||
</Table> |
</Table> |
||||||
</TableContainer> |
</TableContainer> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
const { data, route } = props; |
const { data, route } = props; |
||||||
if (!data.product) return null; |
if (!data.product) return null; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<TableRow key={data.product.book.name}> |
<TableRow key={data.product.book.name}> |
||||||
<TableCell align="right" component="th" scope="row"> |
<TableCell align="right" component="th" scope="row"> |
||||||
<div className="mobile-cart-table-product d-flex align-items-center"> |
<div className="mobile-cart-table-product d-flex align-items-center"> |
||||||
<img |
<img |
||||||
style={{ height: 60 }} |
style={{ height: 60 }} |
||||||
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
||||||
alt={data.product.book.name} |
alt={data.product.book.name} |
||||||
/> |
/> |
||||||
<div className="mobile-cart-table-product__info d-flex flex-column p-1"> |
<div className="mobile-cart-table-product__info d-flex flex-column p-1"> |
||||||
<strong style={{ fontSize: fontSize.mobile.info.strong }}> |
<strong style={{ fontSize: fontSize.mobile.info.strong }}> |
||||||
{`${window.t("نسخه")} ${ |
{`${window.t("نسخه")} ${ |
||||||
+data.product.productType === 1 |
+data.product.productType === 1 |
||||||
? window.t("الکترونیکی") |
? window.t("الکترونیکی") |
||||||
: window.t("چاپی") |
: window.t("چاپی") |
||||||
} ${data.product.book.name} `}
|
} ${data.product.book.name} `}
|
||||||
</strong> |
</strong> |
||||||
<p style={{ fontSize: 12 }}> |
<p style={{ fontSize: 12 }}> |
||||||
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
||||||
</p> |
</p> |
||||||
<span style={{ fontSize: 10 }}> |
<span style={{ fontSize: 10 }}> |
||||||
{window.t("همراه با")} : |
{window.t("همراه با")} : |
||||||
{data.product.book.items || |
{data.product.book.items || |
||||||
window.t("کد فعالسازی محتوای الکترونیک")} |
window.t("کد فعالسازی محتوای الکترونیک")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell> |
<TableCell> |
||||||
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> |
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> |
||||||
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> |
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> |
||||||
<strong style={{ fontSize: 14 }}> |
<strong style={{ fontSize: 14 }}> |
||||||
{window.tr(data.product.price * data.count) || "1000"}{" "} |
{window.tr(data.product.price * data.count) || "1000"}{" "} |
||||||
{window.t("تومان")} |
{window.t("تومان")} |
||||||
</strong> |
</strong> |
||||||
</div> |
</div> |
||||||
{route === "cart" ? ( |
{route === "cart" ? ( |
||||||
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> |
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> |
||||||
<span style={{ fontSize: 12 }}> |
<span style={{ fontSize: 12 }}> |
||||||
{data.count} {window.t("عدد")} |
{data.count} {window.t("عدد")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
{route === "callback" ? ( |
{route === "callback" ? ( |
||||||
<TableCell> |
<TableCell> |
||||||
<strong className="d-flex justify-content-center align-items-center"> |
<strong className="d-flex justify-content-center align-items-center"> |
||||||
{data.count} {window.t("عدد")}{" "} |
{data.count} {window.t("عدد")}{" "} |
||||||
</strong> |
</strong> |
||||||
</TableCell> |
</TableCell> |
||||||
) : null} |
) : null} |
||||||
</TableRow> |
</TableRow> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<TableRow key={data.product.book.name}> |
<TableRow key={data.product.book.name}> |
||||||
<TableCell align="right" component="th" scope="row"> |
<TableCell align="right" component="th" scope="row"> |
||||||
<div className="cart-item__info d-flex"> |
<div className="cart-item__info d-flex"> |
||||||
<img |
<img |
||||||
style={{ height: "60px" }} |
style={{ height: "60px" }} |
||||||
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
||||||
alt={data.product.book.name} |
alt={data.product.book.name} |
||||||
/> |
/> |
||||||
<div className="d-flex flex-column justify-content-center"> |
<div className="d-flex flex-column justify-content-center"> |
||||||
<strong style={{ fontSize: 13 }}> |
<strong style={{ fontSize: 13 }}> |
||||||
{`${data.product.book.name} `} |
{`${data.product.book.name} `} |
||||||
</strong> |
</strong> |
||||||
<span style={{ fontSize: 12 }}> |
<span style={{ fontSize: 12 }}> |
||||||
{" "} |
{" "} |
||||||
{`${window.t("نسخه")} ${ |
{`${window.t("نسخه")} ${ |
||||||
+data.product.productType === 1 |
+data.product.productType === 1 |
||||||
? window.t("الکترونیکی") |
? window.t("الکترونیکی") |
||||||
: window.t("چاپی") |
: window.t("چاپی") |
||||||
}`}
|
}`}
|
||||||
</span> |
</span> |
||||||
|
|
||||||
<p style={{ fontSize: fontSize.desktop.info.p }}> |
<p style={{ fontSize: fontSize.desktop.info.p }}> |
||||||
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
||||||
</p> |
</p> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell align="center"> |
<TableCell align="center"> |
||||||
<span style={{ fontSize: 12 }}>{data.count}</span> |
<span style={{ fontSize: 12 }}>{data.count}</span> |
||||||
</TableCell> |
</TableCell> |
||||||
<TableCell> |
<TableCell> |
||||||
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
||||||
<strong style={{ fontSize: 12 }}> |
<strong style={{ fontSize: 12 }}> |
||||||
{data.product.price * data.count || "1000"} |
{data.product.price * data.count || "1000"} |
||||||
</strong> |
</strong> |
||||||
</div> |
</div> |
||||||
</TableCell> |
</TableCell> |
||||||
</TableRow> |
</TableRow> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
loading: state.userProduct.loading, |
loading: state.userProduct.loading, |
||||||
info: state.book.info, |
info: state.book.info, |
||||||
id: state.user.status.id, |
id: state.user.status.id, |
||||||
factorInfo: state.userFactor.info, |
factorInfo: state.userFactor.info, |
||||||
}), |
}), |
||||||
{ pushToCart: userProduct.add } |
{ pushToCart: userProduct.add } |
||||||
)(BasicTable); |
)(BasicTable); |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,172 +1,172 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { publicApi } from "~/Redux/actions"; |
import { publicApi } from "~/Redux/actions"; |
||||||
|
|
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
import Footer from "../Home/Footer/index"; |
import Footer from "../Home/Footer/index"; |
||||||
|
|
||||||
import location from "../../assets/icons/location.png"; |
import location from "../../assets/icons/location.png"; |
||||||
import home from "../../assets/icons/home.png"; |
import home from "../../assets/icons/home.png"; |
||||||
import contact from "../../assets/icons/contact.png"; |
import contact from "../../assets/icons/contact.png"; |
||||||
import Location from "./Location/Location"; |
import Location from "./Location/Location"; |
||||||
import Loader from "~/components/Loader/index"; |
import Loader from "~/components/Loader/index"; |
||||||
import Support from "../Support"; |
import Support from "../Support"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
const maxMobileSize = 550; |
const maxMobileSize = 550; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
||||||
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, |
span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, |
||||||
}, |
}, |
||||||
mobile: { |
mobile: { |
||||||
h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16, |
h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16, |
||||||
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34, |
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34, |
||||||
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32, |
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
class Contact extends Component { |
class Contact extends Component { |
||||||
state = { |
state = { |
||||||
name: null, |
name: null, |
||||||
cellphone: null, |
cellphone: null, |
||||||
unit: null, |
unit: null, |
||||||
book: null, |
book: null, |
||||||
subject: null, |
subject: null, |
||||||
text: null, |
text: null, |
||||||
}; |
}; |
||||||
|
|
||||||
componentDidUpdate() { |
componentDidUpdate() { |
||||||
if (!this.props.contactData?.address && !this.props.loading) |
if (!this.props.contactData?.address && !this.props.loading) |
||||||
this.props.getContactData(); |
this.props.getContactData(); |
||||||
} |
} |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { contactData, loading } = this.props; |
const { contactData, loading } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
!loading ? ( |
!loading ? ( |
||||||
<> |
<> |
||||||
<div className="contact d-flex flex-column align-items-center"> |
<div className="contact d-flex flex-column align-items-center"> |
||||||
<Navbar page={"contact"} /> |
<Navbar page={"contact"} /> |
||||||
<div className="contact__forms d-flex"> |
<div className="contact__forms d-flex"> |
||||||
<div className="contact__forms--right d-flex flex-column"> |
<div className="contact__forms--right d-flex flex-column"> |
||||||
<Support /> |
<Support /> |
||||||
</div> |
</div> |
||||||
<div className="contact__forms--left d-flex flex-column"> |
<div className="contact__forms--left d-flex flex-column"> |
||||||
<div className="contact__location d-flex align-items-center"> |
<div className="contact__location d-flex align-items-center"> |
||||||
<img |
<img |
||||||
src={location} |
src={location} |
||||||
alt={window.t("آدرس")} |
alt={window.t("آدرس")} |
||||||
className="m-1" |
className="m-1" |
||||||
/> |
/> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}> |
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
{contactData?.address || ""} |
{contactData?.address || ""} |
||||||
</p> |
</p> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className="d-flex align-items-center mt-1" |
className="d-flex align-items-center mt-1" |
||||||
style={{ width: "55%", justifyContent: "space-between" }} |
style={{ width: "55%", justifyContent: "space-between" }} |
||||||
> |
> |
||||||
<div className="d-flex align-items-center"> |
<div className="d-flex align-items-center"> |
||||||
<span style={{ fontSize: fontSize.desktop.span }}> |
<span style={{ fontSize: fontSize.desktop.span }}> |
||||||
{contactData?.cellphone || ""} |
{contactData?.cellphone || ""} |
||||||
</span> |
</span> |
||||||
<img |
<img |
||||||
src={contact} |
src={contact} |
||||||
alt={window.t("تماس")} |
alt={window.t("تماس")} |
||||||
className="m-1" |
className="m-1" |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
<div className="d-flex align-items-center"> |
<div className="d-flex align-items-center"> |
||||||
<span style={{ fontSize: fontSize.desktop.span }}> |
<span style={{ fontSize: fontSize.desktop.span }}> |
||||||
{contactData?.email || ""} |
{contactData?.email || ""} |
||||||
</span> |
</span> |
||||||
<img |
<img |
||||||
src={home} |
src={home} |
||||||
alt={window.t("خانه")} |
alt={window.t("خانه")} |
||||||
className="m-1" |
className="m-1" |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className="contact__map d-flex align-items-center mt-3"> |
<div className="contact__map d-flex align-items-center mt-3"> |
||||||
<Location /> |
<Location /> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer /> |
<Footer /> |
||||||
</> |
</> |
||||||
) : ( |
) : ( |
||||||
<div |
<div |
||||||
className="d-flex justify-content-center align-items-center" |
className="d-flex justify-content-center align-items-center" |
||||||
style={{ height: "100vh", width: "100vw" }} |
style={{ height: "100vh", width: "100vw" }} |
||||||
> |
> |
||||||
<Navbar page={"contact"} /> |
<Navbar page={"contact"} /> |
||||||
<Loader /> |
<Loader /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
!loading ? ( |
!loading ? ( |
||||||
<div className="mobile-contact d-flex flex-column align-items-center"> |
<div className="mobile-contact d-flex flex-column align-items-center"> |
||||||
<Navbar page={"contact"} /> |
<Navbar page={"contact"} /> |
||||||
|
|
||||||
<Support /> |
<Support /> |
||||||
<div className="mobile-contact__address d-flex flex-column"> |
<div className="mobile-contact__address d-flex flex-column"> |
||||||
<div className="mobile-contact__address--location d-flex align-items-center"> |
<div className="mobile-contact__address--location d-flex align-items-center"> |
||||||
<img src={location} alt={window.t("آدرس")} className="m-1" /> |
<img src={location} alt={window.t("آدرس")} className="m-1" /> |
||||||
<p style={{ fontSize: fontSize.mobile.p }}> |
<p style={{ fontSize: fontSize.mobile.p }}> |
||||||
{contactData?.address || ""}{" "} |
{contactData?.address || ""}{" "} |
||||||
</p> |
</p> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className="d-flex align-items-center mt-1" |
className="d-flex align-items-center mt-1" |
||||||
style={{ width: "55%", justifyContent: "space-between" }} |
style={{ width: "55%", justifyContent: "space-between" }} |
||||||
> |
> |
||||||
<div className="d-flex align-items-center"> |
<div className="d-flex align-items-center"> |
||||||
<span style={{ fontSize: fontSize.mobile.span }}> |
<span style={{ fontSize: fontSize.mobile.span }}> |
||||||
{contactData?.cellphone || ""}{" "} |
{contactData?.cellphone || ""}{" "} |
||||||
</span> |
</span> |
||||||
<img src={contact} alt={window.t("تماس")} className="m-1" /> |
<img src={contact} alt={window.t("تماس")} className="m-1" /> |
||||||
</div> |
</div> |
||||||
<div className="d-flex align-items-center"> |
<div className="d-flex align-items-center"> |
||||||
<span style={{ fontSize: fontSize.mobile.span }}> |
<span style={{ fontSize: fontSize.mobile.span }}> |
||||||
{contactData?.email || ""} |
{contactData?.email || ""} |
||||||
</span> |
</span> |
||||||
<img src={home} alt={window.t("خانه")} className="m-1" /> |
<img src={home} alt={window.t("خانه")} className="m-1" /> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className="mobile-contact__address--map d-flex align-items-center mt-3"> |
<div className="mobile-contact__address--map d-flex align-items-center mt-3"> |
||||||
<Location /> |
<Location /> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<div |
<div |
||||||
className="d-flex justify-content-center align-items-center" |
className="d-flex justify-content-center align-items-center" |
||||||
style={{ height: "100vh", width: "100vw" }} |
style={{ height: "100vh", width: "100vw" }} |
||||||
> |
> |
||||||
<Navbar page={"contact"} /> |
<Navbar page={"contact"} /> |
||||||
<Loader /> |
<Loader /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
loading: state.publicApi.loading, |
loading: state.publicApi.loading, |
||||||
contactData: state.publicApi.contactData, |
contactData: state.publicApi.contactData, |
||||||
list: state.userProduct.mylist || [], |
list: state.userProduct.mylist || [], |
||||||
// loading: state.publicApi.loading,
|
// loading: state.publicApi.loading,
|
||||||
}), |
}), |
||||||
{ getContactData: publicApi.getContactData } |
{ getContactData: publicApi.getContactData } |
||||||
)(Contact); |
)(Contact); |
||||||
|
|||||||
@ -1,64 +1,64 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
|
|
||||||
const maxMobileSize = 550; |
const maxMobileSize = 550; |
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
mobile: { |
mobile: { |
||||||
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26, |
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26, |
||||||
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34, |
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34, |
||||||
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32, |
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32, |
||||||
}, |
}, |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, |
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, |
||||||
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, |
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, |
||||||
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120, |
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
export default class Item extends Component { |
export default class Item extends Component { |
||||||
render() { |
render() { |
||||||
const grades = [ |
const grades = [ |
||||||
window.t("پیش دبستان"), |
window.t("پیش دبستان"), |
||||||
window.t("اول"), |
window.t("اول"), |
||||||
window.t("دوم"), |
window.t("دوم"), |
||||||
window.t("سوم"), |
window.t("سوم"), |
||||||
window.t("چهارم"), |
window.t("چهارم"), |
||||||
window.t("پنجم"), |
window.t("پنجم"), |
||||||
window.t("ششم"), |
window.t("ششم"), |
||||||
window.t("هفتم"), |
window.t("هفتم"), |
||||||
window.t("هشتم"), |
window.t("هشتم"), |
||||||
window.t("نهم"), |
window.t("نهم"), |
||||||
window.t("دهم"), |
window.t("دهم"), |
||||||
window.t("یازدهم"), |
window.t("یازدهم"), |
||||||
window.t("دوازدهم"), |
window.t("دوازدهم"), |
||||||
]; |
]; |
||||||
const { data } = this.props; |
const { data } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<a |
<a |
||||||
rel="noreferrer" |
rel="noreferrer" |
||||||
href={`https://ar.dnvn.ir/lunch?id=${data.id}`} |
href={`https://ar.dnvn.ir/lunch?id=${data.id}`} |
||||||
target="_blank" |
target="_blank" |
||||||
className="mobile-products-product d-flex flex-column" |
className="mobile-products-product d-flex flex-column" |
||||||
> |
> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`} |
src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`} |
||||||
alt={data.title} |
alt={data.title} |
||||||
/> |
/> |
||||||
<div className="mobile-products-product__info d-flex flex-column"> |
<div className="mobile-products-product__info d-flex flex-column"> |
||||||
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
||||||
{data["product.book.name"]}{" "} |
{data["product.book.name"]}{" "} |
||||||
{grades[+data["product.book.gradeId"]]} |
{grades[+data["product.book.gradeId"]]} |
||||||
</h1> |
</h1> |
||||||
</div> |
</div> |
||||||
</a> |
</a> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<article className="products-product d-flex flex-column align-items"></article> |
<article className="products-product d-flex flex-column align-items"></article> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,242 +1,268 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { Link } from "react-router-dom"; |
import { Link } from "react-router-dom"; |
||||||
import location from "../../../assets/icons/location.png"; |
import location from "../../../assets/icons/location.png"; |
||||||
import home from "../../../assets/icons/home.png"; |
import home from "../../../assets/icons/home.png"; |
||||||
import contact from "../../../assets/icons/contact.png"; |
import contact from "../../../assets/icons/contact.png"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
export default class Footer extends Component { |
export default class Footer extends Component { |
||||||
render() { |
render() { |
||||||
const fastAccess = [ |
const fastAccess = [ |
||||||
{ name: window.t("صفحه اصلی"), link: "/" }, |
{ name: window.t("صفحه اصلی"), link: "/" }, |
||||||
{ name: window.t("فروشگاه"), link: "/shop" }, |
{ name: window.t("فروشگاه"), link: "/shop" }, |
||||||
{ name: window.t("سوالات متداول"), link: "/faq" }, |
{ name: window.t("سوالات متداول"), link: "/faq" }, |
||||||
{ name: window.t("درباره ما"), link: "/about" }, |
{ name: window.t("درباره ما"), link: "/about" }, |
||||||
{ name: window.t("تماس با ما"), link: "/call" }, |
{ name: window.t("تماس با ما"), link: "/call" }, |
||||||
]; |
]; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<footer |
<footer |
||||||
className={`footer d-flex flex-column ${ |
className={`footer d-flex flex-column ${ |
||||||
window.lang === "en" ? "ltr" : "" |
window.lang === "en" ? "ltr" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<div |
<div |
||||||
className={`footer-container d-flex ${ |
className={`footer-container d-flex ${ |
||||||
window.lang === "en" ? "ltr" : "" |
window.lang === "en" ? "ltr" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<div |
<div |
||||||
className={`footer-container__content d-flex ${ |
className={`footer-container__content d-flex ${ |
||||||
window.lang === "en" ? "ltr" : "" |
window.lang === "en" ? "ltr" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<div |
<div |
||||||
className={`footer-container__content--box first d-flex flex-column ${ |
className={`footer-container__content--box first d-flex flex-column ${ |
||||||
window.lang === "en" ? "ltr" : "" |
window.lang === "en" ? "ltr" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<h1 |
<h1 |
||||||
style={{ |
style={{ |
||||||
textAlign: window.lang == "en" ? "left" : "right", |
textAlign: window.lang == "en" ? "left" : "right", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{window.t("دانوین کجاست؟")} |
{window.t("دانوین کجاست؟")} |
||||||
</h1> |
</h1> |
||||||
<p |
<p |
||||||
className="mt-2" |
className="mt-2" |
||||||
style={{ |
style={{ |
||||||
textAlign: window.lang == "en" ? "left" : "right", |
textAlign: window.lang == "en" ? "left" : "right", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{window.t( |
{window.t( |
||||||
"ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولیدمحتوایی جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش کشور ایجاد کنیم." |
"ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولیدمحتوایی جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش کشور ایجاد کنیم." |
||||||
)} |
)} |
||||||
</p> |
</p> |
||||||
<div className="footer__location d-flex align-items-center mt-2"> |
<div className="footer__location d-flex align-items-center mt-2"> |
||||||
<img |
<img |
||||||
src={location} |
src={location} |
||||||
alt={window.t("آدرس")} |
alt={window.t("آدرس")} |
||||||
className="m-1" |
className="m-1" |
||||||
/> |
/> |
||||||
<p> |
<p> |
||||||
{window.t( |
{window.t( |
||||||
"آدرس: تهران، میدان فردوسی، خیابان موسوی، پلاک ۳۰" |
"آدرس: تهران، میدان فردوسی، خیابان موسوی، پلاک ۳۰" |
||||||
)} |
)} |
||||||
</p> |
</p> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
"d-flex align-items-center mt-1 " + window.lang == "en" |
"d-flex align-items-center mt-1 " + window.lang == "en" |
||||||
? "ltr" |
? "ltr" |
||||||
: "" |
: "" |
||||||
} |
} |
||||||
style={{ |
style={{ |
||||||
width: "55%", |
width: "55%", |
||||||
justifyContent: "space-between", |
justifyContent: "space-between", |
||||||
textAlign: window.lang == "en" ? "left" : "right", |
textAlign: window.lang == "en" ? "left" : "right", |
||||||
}} |
}} |
||||||
> |
> |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
"d-flex align-items-center " + window.lang === "en" |
"d-flex align-items-center " + window.lang === "en" |
||||||
? "ltr" |
? "ltr" |
||||||
: "" |
: "" |
||||||
} |
} |
||||||
> |
> |
||||||
<img |
<img |
||||||
src={contact} |
src={contact} |
||||||
alt={window.t("تماس")} |
alt={window.t("تماس")} |
||||||
className="m-1" |
className="m-1" |
||||||
/>{" "} |
/>{" "} |
||||||
<a |
<a |
||||||
href="tel:58795" |
href="tel:58795" |
||||||
style={{ |
style={{ |
||||||
textDecoration: "none", |
textDecoration: "none", |
||||||
color: "white", |
color: "white", |
||||||
fontFamily: window.lang == "en" ? "Arial" : "", |
fontFamily: window.lang == "en" ? "Arial" : "", |
||||||
}} |
}} |
||||||
> |
> |
||||||
58795 |
58795 |
||||||
</a> |
</a> |
||||||
</div> |
</div> |
||||||
{/* <div |
{/* <div |
||||||
className="d-flex align-items-center" |
className="d-flex align-items-center" |
||||||
style={{ |
style={{ |
||||||
fontName: "IRANSansNumeralLight", |
fontName: "IRANSansNumeralLight", |
||||||
}} |
}} |
||||||
> |
> |
||||||
<a |
<a |
||||||
href="tel:02188814673" |
href="tel:02188814673" |
||||||
style={{ textDecoration: "none", color: "white" }} |
style={{ textDecoration: "none", color: "white" }} |
||||||
> |
> |
||||||
021-88814673 |
021-88814673 |
||||||
</a> |
</a> |
||||||
<img src={contact} alt={window.t("تماس") className="m-1" /> |
<img src={contact} alt={window.t("تماس") className="m-1" /> |
||||||
</div> */} |
</div> */} |
||||||
<div className="d-flex align-items-center"> |
<div className="d-flex align-items-center"> |
||||||
<span>Info@Danovin.ir</span> |
<span>Info@Danovin.ir</span> |
||||||
<img src={home} alt={window.t("خانه")} className="m-1" /> |
<img src={home} alt={window.t("خانه")} className="m-1" /> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className={`footer-container__content--box second d-flex flex-column ${ |
className={`footer-container__content--box second d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-start" : "" |
window.lang === "en" ? "align-items-start" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<h1 className={`${window.lang === "en" ? "text-start" : ""}`}> |
<h1 className={`${window.lang === "en" ? "text-start" : ""}`}> |
||||||
{window.t("دسترسی سریع")} |
{window.t("دسترسی سریع")} |
||||||
</h1> |
</h1> |
||||||
<ul |
<ul |
||||||
className={`d-flex flex-column ${ |
className={`d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-start" : "" |
window.lang === "en" ? "align-items-start" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
{fastAccess.map((item, i) => ( |
{fastAccess.map((item, i) => ( |
||||||
<li key={i}> |
<li key={i}> |
||||||
<Link to={item.link}>{item.name}</Link> |
<Link to={item.link}>{item.name}</Link> |
||||||
</li> |
</li> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className={`footer-container__content--box second d-flex flex-column ${ |
className={`footer-container__content--box second d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-start" : "" |
window.lang === "en" ? "align-items-start" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<h1>{window.t("لینک های کاربردی")}</h1> |
<h1>{window.t("لینک های کاربردی")}</h1> |
||||||
<ul |
<ul |
||||||
className={`d-flex flex-column ${ |
className={`d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-start" : "" |
window.lang === "en" ? "align-items-start" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
{fastAccess.map((item, i) => ( |
{fastAccess.map((item, i) => ( |
||||||
<li key={i}> |
<li key={i}> |
||||||
<Link to={item.link}>{item.name}</Link> |
<Link to={item.link}>{item.name}</Link> |
||||||
</li> |
</li> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
</div> |
<div |
||||||
</div> |
style={{ |
||||||
<div className="footer__privacy d-flex align-items-center"> |
margin: "auto", |
||||||
<p> |
backgroundColor: "#ffffff22", |
||||||
{window.t( |
align: "center", |
||||||
"تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400" |
textAlign: "center", |
||||||
)} |
borderRadius: "4px", |
||||||
</p> |
}} |
||||||
</div> |
> |
||||||
</footer> |
<div class="namad" style={{ margin: "auto" }}> |
||||||
) : null} |
<a |
||||||
{window.innerWidth < 1000 ? ( |
rel="noreferrer" |
||||||
<footer className="mobile-footer d-flex flex-column"> |
referrerpolicy="origin" |
||||||
<div className="mobile-footer-container d-flex"> |
target="_blank" |
||||||
<div className="mobile-footer-container__content d-flex flex-column"> |
href="https://trustseal.enamad.ir/?id=224965&Code=x8oNSO7tTnqAniyPpPyN" |
||||||
<div className="mobile-footer-container__content--box first d-flex flex-column"> |
> |
||||||
<h1>{window.t("دانوین کجاست؟")}</h1> |
<img |
||||||
<p className="mt-2"></p> |
referrerpolicy="origin" |
||||||
<div className="mobile-footer__location d-flex align-items-center mt-2"> |
src="https://trustseal.enamad.ir/logo.aspx?id=224965&Code=x8oNSO7tTnqAniyPpPyN" |
||||||
<img |
alt="" |
||||||
src={location} |
style={{ cursor: "pointer" }} |
||||||
alt={window.t("آدرس")} |
code="x8oNSO7tTnqAniyPpPyN" |
||||||
className="m-1" |
/> |
||||||
/> |
</a> |
||||||
<p></p> |
</div> |
||||||
</div> |
</div> |
||||||
<div |
</div> |
||||||
className="d-flex align-items-center mt-1" |
</div> |
||||||
style={{ width: "55%", justifyContent: "space-between" }} |
<div className="footer__privacy d-flex align-items-center"> |
||||||
> |
<p> |
||||||
<div className="d-flex align-items-center"> |
{window.t( |
||||||
<span></span> |
"تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400" |
||||||
<img |
)} |
||||||
src={contact} |
</p> |
||||||
alt={window.t("تماس")} |
</div> |
||||||
className="m-1" |
</footer> |
||||||
/> |
) : null} |
||||||
</div> |
{window.innerWidth < 1000 ? ( |
||||||
<div className="d-flex align-items-center"> |
<footer className="mobile-footer d-flex flex-column"> |
||||||
<span>Info@Danovin.ir</span> |
<div className="mobile-footer-container d-flex"> |
||||||
<img src={home} alt={window.t("خانه")} className="m-1" /> |
<div className="mobile-footer-container__content d-flex flex-column"> |
||||||
</div> |
<div className="mobile-footer-container__content--box first d-flex flex-column"> |
||||||
</div> |
<h1>{window.t("دانوین کجاست؟")}</h1> |
||||||
</div> |
<p className="mt-2"></p> |
||||||
<div className="mobile-footer-container__content--box second d-flex flex-column"> |
<div className="mobile-footer__location d-flex align-items-center mt-2"> |
||||||
<h1>{window.t("دسترسی سریع")}</h1> |
<img |
||||||
<ul> |
src={location} |
||||||
{fastAccess.map((item) => ( |
alt={window.t("آدرس")} |
||||||
<li> |
className="m-1" |
||||||
<Link to={item.link}>{item.name}</Link> |
/> |
||||||
</li> |
<p></p> |
||||||
))} |
</div> |
||||||
</ul> |
<div |
||||||
</div> |
className="d-flex align-items-center mt-1" |
||||||
<div className="mobile-footer-container__content--box second d-flex flex-column"> |
style={{ width: "55%", justifyContent: "space-between" }} |
||||||
<h1>{window.t("دسترسی سریع")}</h1> |
> |
||||||
<ul> |
<div className="d-flex align-items-center"> |
||||||
{fastAccess.map((item) => ( |
<span></span> |
||||||
<li> |
<img |
||||||
<Link to={item.link}>{item.name}</Link> |
src={contact} |
||||||
</li> |
alt={window.t("تماس")} |
||||||
))} |
className="m-1" |
||||||
</ul> |
/> |
||||||
</div> |
</div> |
||||||
</div> |
<div className="d-flex align-items-center"> |
||||||
</div> |
<span>Info@Danovin.ir</span> |
||||||
<div className="mobile-footer__privacy d-flex align-items-center"> |
<img src={home} alt={window.t("خانه")} className="m-1" /> |
||||||
<p> |
</div> |
||||||
{window.t( |
</div> |
||||||
"تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400" |
</div> |
||||||
)} |
<div className="mobile-footer-container__content--box second d-flex flex-column"> |
||||||
</p> |
<h1>{window.t("دسترسی سریع")}</h1> |
||||||
</div> |
<ul> |
||||||
</footer> |
{fastAccess.map((item) => ( |
||||||
) : null} |
<li> |
||||||
</> |
<Link to={item.link}>{item.name}</Link> |
||||||
); |
</li> |
||||||
} |
))} |
||||||
} |
</ul> |
||||||
|
</div> |
||||||
Footer.defaultProps = {}; |
<div className="mobile-footer-container__content--box second d-flex flex-column"> |
||||||
|
<h1>{window.t("دسترسی سریع")}</h1> |
||||||
|
<ul> |
||||||
|
{fastAccess.map((item) => ( |
||||||
|
<li> |
||||||
|
<Link to={item.link}>{item.name}</Link> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mobile-footer__privacy d-flex align-items-center"> |
||||||
|
<p> |
||||||
|
{window.t( |
||||||
|
"تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400" |
||||||
|
)} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
Footer.defaultProps = {}; |
||||||
|
|||||||
@ -1,75 +1,75 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { Link } from "react-router-dom"; |
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
export default class Header extends Component { |
export default class Header extends Component { |
||||||
render() { |
render() { |
||||||
const { height, data } = this.props; |
const { height, data } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div |
<div |
||||||
style={{ |
style={{ |
||||||
minWidth: `${data.width}`, |
minWidth: `${data.width}`, |
||||||
height: height, |
height: height, |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
className={`slider-header d-flex ${window.lang === "en" ? "" : ""}`} |
className={`slider-header d-flex ${window.lang === "en" ? "" : ""}`} |
||||||
onClick={() => data.link && window.open(data.link, "_blank")} |
onClick={() => data.link && window.open(data.link, "_blank")} |
||||||
> |
> |
||||||
<div |
<div |
||||||
className="slider-header__right d-flex" |
className="slider-header__right d-flex" |
||||||
style={{ backgroundColor: data.backgroundColor }} |
style={{ backgroundColor: data.backgroundColor }} |
||||||
> |
> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} |
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} |
||||||
alt={data.title} |
alt={data.title} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
style={{ backgroundColor: data.backgroundColor }} |
style={{ backgroundColor: data.backgroundColor }} |
||||||
className="slider-header__left d-flex flex-column" |
className="slider-header__left d-flex flex-column" |
||||||
> |
> |
||||||
<h1>{data.title}</h1> |
<h1>{data.title}</h1> |
||||||
<h2>{data.subTitle}</h2> |
<h2>{data.subTitle}</h2> |
||||||
{data.buttonText && ( |
{data.buttonText && ( |
||||||
<Link to={data.link || "/"}>{data.buttonText}</Link> |
<Link to={data.link || "/"}>{data.buttonText}</Link> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div |
<div |
||||||
style={{ |
style={{ |
||||||
minWidth: `${data.width}`, |
minWidth: `${data.width}`, |
||||||
height: height, |
height: height, |
||||||
}} |
}} |
||||||
className="mobile-slider-header d-flex" |
className="mobile-slider-header d-flex" |
||||||
> |
> |
||||||
<div |
<div |
||||||
className="mobile-slider-header__right d-flex" |
className="mobile-slider-header__right d-flex" |
||||||
style={{ |
style={{ |
||||||
backgroundColor: data.backgroundColor, |
backgroundColor: data.backgroundColor, |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
onClick={() => data.link && window.open(data.link, "_blank")} |
onClick={() => data.link && window.open(data.link, "_blank")} |
||||||
> |
> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} |
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} |
||||||
alt={data.title} |
alt={data.title} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
style={{ backgroundColor: data.backgroundColor }} |
style={{ backgroundColor: data.backgroundColor }} |
||||||
className="mobile-slider-header__left d-flex flex-column" |
className="mobile-slider-header__left d-flex flex-column" |
||||||
> |
> |
||||||
<h1>{data.title}</h1> |
<h1>{data.title}</h1> |
||||||
<h2>{data.subTitle}</h2> |
<h2>{data.subTitle}</h2> |
||||||
<Link to={data.link || "/"}>{data.buttonText}</Link> |
<Link to={data.link || "/"}>{data.buttonText}</Link> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,201 +1,201 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { Link } from "react-router-dom"; |
import { Link } from "react-router-dom"; |
||||||
import Carousel from "react-elastic-carousel"; |
import Carousel from "react-elastic-carousel"; |
||||||
import Simple from "./Simple/index"; |
import Simple from "./Simple/index"; |
||||||
import Header from "./Header/index"; |
import Header from "./Header/index"; |
||||||
import Blog from "./Blog/index"; |
import Blog from "./Blog/index"; |
||||||
|
|
||||||
import dropdown from "../../../assets/icons/dropdown.png"; |
import dropdown from "../../../assets/icons/dropdown.png"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, |
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, |
||||||
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, |
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
const SimpleHeader = (props) => { |
const SimpleHeader = (props) => { |
||||||
console.log("Simple Header", props.link); |
console.log("Simple Header", props.link); |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div |
<div |
||||||
className={`home-scroll__header d-flex ${ |
className={`home-scroll__header d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<div className="home-scroll__header--right d-flex"> |
<div className="home-scroll__header--right d-flex"> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1> |
||||||
<span></span> |
<span></span> |
||||||
</div> |
</div> |
||||||
{props.more ? ( |
{props.more ? ( |
||||||
<Link |
<Link |
||||||
to={props.link} |
to={props.link} |
||||||
className={`home-scroll__header--more d-flex align-items-center ${ |
className={`home-scroll__header--more d-flex align-items-center ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<span style={{ fontSize: fontSize.desktop.h1 }}> |
<span style={{ fontSize: fontSize.desktop.h1 }}> |
||||||
{window.t("بیشتر")} |
{window.t("بیشتر")} |
||||||
</span> |
</span> |
||||||
<img |
<img |
||||||
src={dropdown} |
src={dropdown} |
||||||
style={{ |
style={{ |
||||||
transform: window.lang === "en" ? "rotate(-90deg)" : "", |
transform: window.lang === "en" ? "rotate(-90deg)" : "", |
||||||
margin: "0px 5px", |
margin: "0px 5px", |
||||||
}} |
}} |
||||||
alt={window.t("فلش")} |
alt={window.t("فلش")} |
||||||
/> |
/> |
||||||
</Link> |
</Link> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div |
<div |
||||||
className={`mobile-home-scroll__header d-flex ${ |
className={`mobile-home-scroll__header d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<div |
<div |
||||||
className={`mobile-home-scroll__header--right d-flex ${ |
className={`mobile-home-scroll__header--right d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<h1>{props.title}</h1> |
<h1>{props.title}</h1> |
||||||
<span></span> |
<span></span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
const TabHeader = (props) => { |
const TabHeader = (props) => { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div |
<div |
||||||
className={`home-scroll__header d-flex ${ |
className={`home-scroll__header d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<div className="home-scroll__header--right d-flex"> |
<div className="home-scroll__header--right d-flex"> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1> |
||||||
<span></span> |
<span></span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div |
<div |
||||||
className={`mobile-home-scroll__header d-flex ${ |
className={`mobile-home-scroll__header d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<div |
<div |
||||||
className={`mobile-home-scroll__header--right d-flex ${ |
className={`mobile-home-scroll__header--right d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<h1>{props.title}</h1> |
<h1>{props.title}</h1> |
||||||
<span></span> |
<span></span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default class HomeSlider extends Component { |
export default class HomeSlider extends Component { |
||||||
render() { |
render() { |
||||||
const { data, title, height, designType, number, link } = this.props; |
const { data, title, height, designType, number, link } = this.props; |
||||||
let header; |
let header; |
||||||
if (title) { |
if (title) { |
||||||
if (designType === "simple" || designType === "blog") { |
if (designType === "simple" || designType === "blog") { |
||||||
header = ( |
header = ( |
||||||
<SimpleHeader title={title} link={link} more={data.length > number} /> |
<SimpleHeader title={title} link={link} more={data.length > number} /> |
||||||
); |
); |
||||||
} else if (designType === "tab") { |
} else if (designType === "tab") { |
||||||
header = <TabHeader title={title} link={link} />; |
header = <TabHeader title={title} link={link} />; |
||||||
} |
} |
||||||
} |
} |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
title ? "home-slider d-flex flex-column" : "home-slider d-flex" |
title ? "home-slider d-flex flex-column" : "home-slider d-flex" |
||||||
} |
} |
||||||
> |
> |
||||||
{header} |
{header} |
||||||
|
|
||||||
<Carousel |
<Carousel |
||||||
itemsToShow={number} |
itemsToShow={number} |
||||||
isRTL={true} |
isRTL={true} |
||||||
enableTilt={false} |
enableTilt={false} |
||||||
showArrows={true} |
showArrows={true} |
||||||
pagination={false} |
pagination={false} |
||||||
> |
> |
||||||
{data.map((item, i) => ( |
{data.map((item, i) => ( |
||||||
<Item |
<Item |
||||||
height={height} |
height={height} |
||||||
designType={designType} |
designType={designType} |
||||||
data={item} |
data={item} |
||||||
key={i} |
key={i} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</Carousel> |
</Carousel> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
title |
title |
||||||
? "mobile-home-slider d-flex flex-column" |
? "mobile-home-slider d-flex flex-column" |
||||||
: "mobile-home-slider d-flex" |
: "mobile-home-slider d-flex" |
||||||
} |
} |
||||||
> |
> |
||||||
{header} |
{header} |
||||||
|
|
||||||
<Carousel |
<Carousel |
||||||
itemsToShow={number} |
itemsToShow={number} |
||||||
isRTL={true} |
isRTL={true} |
||||||
enableTilt={false} |
enableTilt={false} |
||||||
showArrows={false} |
showArrows={false} |
||||||
pagination={false} |
pagination={false} |
||||||
> |
> |
||||||
{data.map((item, i) => ( |
{data.map((item, i) => ( |
||||||
<Item |
<Item |
||||||
height={height} |
height={height} |
||||||
designType={designType} |
designType={designType} |
||||||
data={item} |
data={item} |
||||||
key={i} |
key={i} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</Carousel> |
</Carousel> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{props.designType === "header" ? ( |
{props.designType === "header" ? ( |
||||||
<Header height={props.height} data={props.data} /> |
<Header height={props.height} data={props.data} /> |
||||||
) : null} |
) : null} |
||||||
{props.designType === "simple" || props.designType === "tab" ? ( |
{props.designType === "simple" || props.designType === "tab" ? ( |
||||||
<Simple height={props.height} data={props.data} /> |
<Simple height={props.height} data={props.data} /> |
||||||
) : null} |
) : null} |
||||||
{props.designType === "blog" ? ( |
{props.designType === "blog" ? ( |
||||||
<Blog height={props.height} data={props.data} /> |
<Blog height={props.height} data={props.data} /> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
//
|
//
|
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,139 +1,139 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; |
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; |
||||||
import Identifier from "./Identifier/index"; |
import Identifier from "./Identifier/index"; |
||||||
import proxy from "~/Redux/proxy"; |
import proxy from "~/Redux/proxy"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, |
h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
export default class HomeStatic extends Component { |
export default class HomeStatic extends Component { |
||||||
render() { |
render() { |
||||||
const status = proxy.status(); |
const status = proxy.status(); |
||||||
const { data, height, title } = this.props; |
const { data, height, title } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<section |
<section |
||||||
className={ |
className={ |
||||||
title ? "home-static d-flex flex-column" : "home-static d-flex" |
title ? "home-static d-flex flex-column" : "home-static d-flex" |
||||||
} |
} |
||||||
> |
> |
||||||
{title ? ( |
{title ? ( |
||||||
<div className="home-scroll__header d-flex"> |
<div className="home-scroll__header d-flex"> |
||||||
<h1>{title}</h1> |
<h1>{title}</h1> |
||||||
<div className="home-scroll__header--more d-flex"> |
<div className="home-scroll__header--more d-flex"> |
||||||
<span>{window.t("موارد بیشتر")}</span> |
<span>{window.t("موارد بیشتر")}</span> |
||||||
<ChevronLeftIcon |
<ChevronLeftIcon |
||||||
style={{ |
style={{ |
||||||
width: 20, |
width: 20, |
||||||
height: 20, |
height: 20, |
||||||
color: "black", |
color: "black", |
||||||
marginRight: 1, |
marginRight: 1, |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
<div className="home-static__list d-flex"> |
<div className="home-static__list d-flex"> |
||||||
{data.map((item, i) => ( |
{data.map((item, i) => ( |
||||||
<Item data={item} height={height} key={i} /> |
<Item data={item} height={height} key={i} /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
</section> |
</section> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<section |
<section |
||||||
className="mobile-home-static d-flex" |
className="mobile-home-static d-flex" |
||||||
style={{ height: height }} |
style={{ height: height }} |
||||||
> |
> |
||||||
{data.map((item, i) => |
{data.map((item, i) => |
||||||
proxy.status() ? ( |
proxy.status() ? ( |
||||||
<Identifier data={item} key={i} status={status} /> |
<Identifier data={item} key={i} status={status} /> |
||||||
) : ( |
) : ( |
||||||
<Item data={item} height={height} key={i} /> |
<Item data={item} height={height} key={i} /> |
||||||
) |
) |
||||||
)} |
)} |
||||||
</section> |
</section> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<div |
<div |
||||||
style={{ |
style={{ |
||||||
width: `${props.data.width}%`, |
width: `${props.data.width}%`, |
||||||
height: props.height, |
height: props.height, |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
className={`home-static__list--item d-flex ${ |
className={`home-static__list--item d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
onClick={() => |
onClick={() => |
||||||
props.data.link && window.open(props.data.link, "_blank") |
props.data.link && window.open(props.data.link, "_blank") |
||||||
} |
} |
||||||
> |
> |
||||||
<div |
<div |
||||||
className={`d-flex flex-column ${ |
className={`d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-end" : "" |
window.lang === "en" ? "align-items-end" : "" |
||||||
}`}
|
}`}
|
||||||
style={{}} |
style={{}} |
||||||
> |
> |
||||||
<h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}> |
||||||
{props.data.topText} |
{props.data.topText} |
||||||
</h2> |
</h2> |
||||||
<h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}> |
<h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}> |
||||||
{props.data.bottomText} |
{props.data.bottomText} |
||||||
</h2> |
</h2> |
||||||
</div> |
</div> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`} |
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`} |
||||||
alt={window.t("عکس")} |
alt={window.t("عکس")} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<div |
<div |
||||||
onClick={() => |
onClick={() => |
||||||
props.data.link && window.open(props.data.link, "_blank") |
props.data.link && window.open(props.data.link, "_blank") |
||||||
} |
} |
||||||
style={{ |
style={{ |
||||||
width: `${props.data.width}%`, |
width: `${props.data.width}%`, |
||||||
height: props.height, |
height: props.height, |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
}} |
}} |
||||||
className={`home-static__list2--item ${ |
className={`home-static__list2--item ${ |
||||||
window.lang === "en" ? "d-flex" : "" |
window.lang === "en" ? "d-flex" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`} |
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`} |
||||||
alt={window.t("عکس")} |
alt={window.t("عکس")} |
||||||
style={{ float: "left" }} |
style={{ float: "left" }} |
||||||
/> |
/> |
||||||
<div |
<div |
||||||
className={`d-flex flex-column ${ |
className={`d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-end" : "" |
window.lang === "en" ? "align-items-end" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<h2 style={{ color: "#02733c", fontSize: 12 }}> |
<h2 style={{ color: "#02733c", fontSize: 12 }}> |
||||||
{props.data.topText} |
{props.data.topText} |
||||||
</h2> |
</h2> |
||||||
<h2 style={{ color: "#7dc241", fontSize: 12 }}> |
<h2 style={{ color: "#7dc241", fontSize: 12 }}> |
||||||
{props.data.bottomText} |
{props.data.bottomText} |
||||||
</h2> |
</h2> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
)} |
)} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,174 +1,174 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { publicApi } from "~/Redux/actions"; |
import { publicApi } from "~/Redux/actions"; |
||||||
|
|
||||||
import Navbar from "./Navbar"; |
import Navbar from "./Navbar"; |
||||||
import HomeHeader from "./HomeHeader/index"; |
import HomeHeader from "./HomeHeader/index"; |
||||||
import HomeStatic from "./HomeStatic/index"; |
import HomeStatic from "./HomeStatic/index"; |
||||||
import HomeScroll from "./HomeScroll/index"; |
import HomeScroll from "./HomeScroll/index"; |
||||||
import Footer from "./Footer/index"; |
import Footer from "./Footer/index"; |
||||||
import HomeSlider from "./HomeSlider/index"; |
import HomeSlider from "./HomeSlider/index"; |
||||||
import HomeSearch from "./HomeSearch/index"; |
import HomeSearch from "./HomeSearch/index"; |
||||||
import Membership from "./Membership/index"; |
import Membership from "./Membership/index"; |
||||||
import SingleBlog from "./SingleBlog/index"; |
import SingleBlog from "./SingleBlog/index"; |
||||||
import Loader from "~/components/Loader/index"; |
import Loader from "~/components/Loader/index"; |
||||||
import Download from "./Download/index"; |
import Download from "./Download/index"; |
||||||
|
|
||||||
// import pic1 from "~/assets/images/pic1.png";
|
// import pic1 from "~/assets/images/pic1.png";
|
||||||
// import pic from "~/assets/images/pic.png";
|
// import pic from "~/assets/images/pic.png";
|
||||||
// import online from "~/assets/icons/online-education.png";
|
// import online from "~/assets/icons/online-education.png";
|
||||||
// import chemistry from "~/assets/icons/chemistry.png";
|
// import chemistry from "~/assets/icons/chemistry.png";
|
||||||
// import calculator from "~/assets/icons/calculator.png";
|
// import calculator from "~/assets/icons/calculator.png";
|
||||||
// import homework from "~/assets/icons/homework.png";
|
// import homework from "~/assets/icons/homework.png";
|
||||||
// import sciense_6 from "~/assets/images/sciense-6.png";
|
// import sciense_6 from "~/assets/images/sciense-6.png";
|
||||||
// import chemistry_10 from "~/assets/images/chemistry-10.png";
|
// import chemistry_10 from "~/assets/images/chemistry-10.png";
|
||||||
// import sciense_8 from "~/assets/images/sciense-8.png";
|
// import sciense_8 from "~/assets/images/sciense-8.png";
|
||||||
// import sciense_9 from "~/assets/images/sciense-9.png";
|
// import sciense_9 from "~/assets/images/sciense-9.png";
|
||||||
// import zist_10 from "~/assets/images/zist-10.png";
|
// import zist_10 from "~/assets/images/zist-10.png";
|
||||||
// import blog1 from "~/assets/images/blog1.png";
|
// import blog1 from "~/assets/images/blog1.png";
|
||||||
// import blog2 from "~/assets/images/blog2.png";
|
// import blog2 from "~/assets/images/blog2.png";
|
||||||
// import blog3 from "~/assets/images/blog3.png";
|
// import blog3 from "~/assets/images/blog3.png";
|
||||||
// import ar from "~/assets/icons/qr.svg";
|
// import ar from "~/assets/icons/qr.svg";
|
||||||
// import qr from "~/assets/icons/qr.svg";
|
// import qr from "~/assets/icons/qr.svg";
|
||||||
// import myBook from "~/assets/images/myBook.png";
|
// import myBook from "~/assets/images/myBook.png";
|
||||||
// import homeBlog from "~/assets/images/homeBlog.png";
|
// import homeBlog from "~/assets/images/homeBlog.png";
|
||||||
// import bookActivation from "~/assets/images/bookActivating.png";
|
// import bookActivation from "~/assets/images/bookActivating.png";
|
||||||
// import home_chat from "~/assets/icons/home_chat.png";
|
// import home_chat from "~/assets/icons/home_chat.png";
|
||||||
// import home_ar from "~/assets/icons/home_ar(2).png";
|
// import home_ar from "~/assets/icons/home_ar(2).png";
|
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
class Home extends Component { |
class Home extends Component { |
||||||
componentDidMount() { |
componentDidMount() { |
||||||
const mobile = window.innerWidth < 1000; |
const mobile = window.innerWidth < 1000; |
||||||
window.scrollTo(0, 0); |
window.scrollTo(0, 0); |
||||||
|
|
||||||
// if (this.props.homeData.length == 0) {
|
// if (this.props.homeData.length == 0) {
|
||||||
if (mobile && this.props.userStatus) { |
if (mobile && this.props.userStatus) { |
||||||
this.props.getHomeData({ device: 2 }); |
this.props.getHomeData({ device: 2 }); |
||||||
} else { |
} else { |
||||||
this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 }); |
this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 }); |
||||||
} |
} |
||||||
return null; |
return null; |
||||||
// }
|
// }
|
||||||
} |
} |
||||||
//componentDidupdate = this.componentDidMount();
|
//componentDidupdate = this.componentDidMount();
|
||||||
render() { |
render() { |
||||||
const { homeData, loading } = this.props; |
const { homeData, loading } = this.props; |
||||||
if (!loading && this.props.homeData?.length === 0) |
if (!loading && this.props.homeData?.length === 0) |
||||||
return this.componentDidMount(); |
return this.componentDidMount(); |
||||||
const mobile = window.innerWidth < 1000; |
const mobile = window.innerWidth < 1000; |
||||||
if (loading && this.props.homeData?.length === 0) |
if (loading && this.props.homeData?.length === 0) |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className="d-flex justify-content-center align-items-center" |
className="d-flex justify-content-center align-items-center" |
||||||
style={{ height: "100vh", width: "100vw" }} |
style={{ height: "100vh", width: "100vw" }} |
||||||
> |
> |
||||||
<Navbar page={"home"} /> |
<Navbar page={"home"} /> |
||||||
<Loader /> |
<Loader /> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
let scale = Math.max( |
let scale = Math.max( |
||||||
1, |
1, |
||||||
mobile ? Math.min(800, window.innerWidth) / 540 : 1 |
mobile ? Math.min(800, window.innerWidth) / 540 : 1 |
||||||
); |
); |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<> |
<> |
||||||
<div |
<div |
||||||
className={ |
className={ |
||||||
(this.props.status && mobile ? "mobile-home" : "home") + |
(this.props.status && mobile ? "mobile-home" : "home") + |
||||||
" d-flex flex-column" |
" d-flex flex-column" |
||||||
} |
} |
||||||
style={ |
style={ |
||||||
this.props.status && mobile |
this.props.status && mobile |
||||||
? { |
? { |
||||||
transformStyle: "flat", |
transformStyle: "flat", |
||||||
transformOrigin: "top", |
transformOrigin: "top", |
||||||
transform: `scale(${scale})`, |
transform: `scale(${scale})`, |
||||||
} |
} |
||||||
: null |
: null |
||||||
} |
} |
||||||
> |
> |
||||||
<Navbar page={"home"} /> |
<Navbar page={"home"} /> |
||||||
|
|
||||||
{homeData?.map((item, i) => ( |
{homeData?.map((item, i) => ( |
||||||
<Identifier item={item} key={i} /> |
<Identifier item={item} key={i} /> |
||||||
))} |
))} |
||||||
{window.location.host.indexOf("app") > -1 ? null : <Download />} |
{window.location.host.indexOf("app") > -1 ? null : <Download />} |
||||||
</div> |
</div> |
||||||
|
|
||||||
{window.innerWidth > 1000 ? <Footer /> : null} |
{window.innerWidth > 1000 ? <Footer /> : null} |
||||||
</> |
</> |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
homeData: state.publicApi.homeData, |
homeData: state.publicApi.homeData, |
||||||
loading: state.publicApi.loading, |
loading: state.publicApi.loading, |
||||||
userStatus: state.user.status, |
userStatus: state.user.status, |
||||||
}), |
}), |
||||||
{ getHomeData: publicApi.getHomeData } |
{ getHomeData: publicApi.getHomeData } |
||||||
)(Home); |
)(Home); |
||||||
|
|
||||||
const Identifier = (props) => { |
const Identifier = (props) => { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{props.item.type === "header" ? ( |
{props.item.type === "header" ? ( |
||||||
<HomeHeader |
<HomeHeader |
||||||
height={props.item.height} |
height={props.item.height} |
||||||
title={props.item.title} |
title={props.item.title} |
||||||
data={props.item.data} |
data={props.item.data} |
||||||
/> |
/> |
||||||
) : null} |
) : null} |
||||||
{props.item.type === "static" ? ( |
{props.item.type === "static" ? ( |
||||||
<HomeStatic |
<HomeStatic |
||||||
height={props.item.height} |
height={props.item.height} |
||||||
title={props.item.title} |
title={props.item.title} |
||||||
data={props.item.data} |
data={props.item.data} |
||||||
designType={props.item.design} |
designType={props.item.design} |
||||||
/> |
/> |
||||||
) : null} |
) : null} |
||||||
{props.item.type === "scroll" ? ( |
{props.item.type === "scroll" ? ( |
||||||
props.item.data.length > 0 ? ( |
props.item.data.length > 0 ? ( |
||||||
<HomeScroll |
<HomeScroll |
||||||
number={props.item.number} |
number={props.item.number} |
||||||
height={props.item.height} |
height={props.item.height} |
||||||
title={props.item.title} |
title={props.item.title} |
||||||
data={props.item.data} |
data={props.item.data} |
||||||
designType={props.item.design} |
designType={props.item.design} |
||||||
moreText={props.item.moreText} |
moreText={props.item.moreText} |
||||||
/> |
/> |
||||||
) : null |
) : null |
||||||
) : null} |
) : null} |
||||||
{props.item.type === "slider" ? ( |
{props.item.type === "slider" ? ( |
||||||
props.item.data.length > 0 ? ( |
props.item.data.length > 0 ? ( |
||||||
<HomeSlider |
<HomeSlider |
||||||
designType={props.item.design} |
designType={props.item.design} |
||||||
number={props.item.number} |
number={props.item.number} |
||||||
height={props.item.height} |
height={props.item.height} |
||||||
title={props.item.title} |
title={props.item.title} |
||||||
data={props.item.data} |
data={props.item.data} |
||||||
link={props.item.link} |
link={props.item.link} |
||||||
/> |
/> |
||||||
) : null |
) : null |
||||||
) : null} |
) : null} |
||||||
{props.item.type === "search" ? ( |
{props.item.type === "search" ? ( |
||||||
<HomeSearch height={props.item.height} data={props.item.data} /> |
<HomeSearch height={props.item.height} data={props.item.data} /> |
||||||
) : null} |
) : null} |
||||||
{props.item.type === "membership" && window.innerWidth > 1000 ? ( |
{props.item.type === "membership" && window.innerWidth > 1000 ? ( |
||||||
<Membership /> |
<Membership /> |
||||||
) : null} |
) : null} |
||||||
{props.item.type === "singleBlog" && window.innerWidth > 1000 ? ( |
{props.item.type === "singleBlog" && window.innerWidth > 1000 ? ( |
||||||
<SingleBlog |
<SingleBlog |
||||||
height={props.item.height} |
height={props.item.height} |
||||||
data={props.item.data} |
data={props.item.data} |
||||||
direction={props.item.direction} |
direction={props.item.direction} |
||||||
/> |
/> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,145 +1,145 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import Navbar from "../Home/Navbar"; |
import Navbar from "../Home/Navbar"; |
||||||
import { userFactor } from "~/Redux/actions"; |
import { userFactor } from "~/Redux/actions"; |
||||||
import "./index.css"; |
import "./index.css"; |
||||||
import moment from "jalali-moment"; |
import moment from "jalali-moment"; |
||||||
|
|
||||||
class Orders extends Component { |
class Orders extends Component { |
||||||
componentDidMount() { |
componentDidMount() { |
||||||
if (!this.props.list) this.props.getList(); |
if (!this.props.list) this.props.getList(); |
||||||
} |
} |
||||||
render() { |
render() { |
||||||
const grades = [ |
const grades = [ |
||||||
window.t("پیش دبستان"), |
window.t("پیش دبستان"), |
||||||
window.t("اول"), |
window.t("اول"), |
||||||
window.t("دوم"), |
window.t("دوم"), |
||||||
window.t("سوم"), |
window.t("سوم"), |
||||||
window.t("چهارم"), |
window.t("چهارم"), |
||||||
window.t("پنجم"), |
window.t("پنجم"), |
||||||
window.t("ششم"), |
window.t("ششم"), |
||||||
window.t("هفتم"), |
window.t("هفتم"), |
||||||
window.t("هشتم"), |
window.t("هشتم"), |
||||||
window.t("نهم"), |
window.t("نهم"), |
||||||
window.t("دهم"), |
window.t("دهم"), |
||||||
window.t("یازدهم"), |
window.t("یازدهم"), |
||||||
window.t("دوازدهم"), |
window.t("دوازدهم"), |
||||||
]; |
]; |
||||||
// props.getList();
|
// props.getList();
|
||||||
let data = this.props.list; |
let data = this.props.list; |
||||||
return ( |
return ( |
||||||
<div className="order"> |
<div className="order"> |
||||||
<Navbar /> |
<Navbar /> |
||||||
<div className="order-title" align="center"> |
<div className="order-title" align="center"> |
||||||
{window.t("سفارشات من")} |
{window.t("سفارشات من")} |
||||||
</div> |
</div> |
||||||
<div className="order-data-container"> |
<div className="order-data-container"> |
||||||
{data != null && |
{data != null && |
||||||
data.map((item, i) => ( |
data.map((item, i) => ( |
||||||
<div key={i} className="order-data-container-item"> |
<div key={i} className="order-data-container-item"> |
||||||
<div className="order-data-container-item-row1"> |
<div className="order-data-container-item-row1"> |
||||||
<div className="order-data-container-item-row1-order-id"> |
<div className="order-data-container-item-row1-order-id"> |
||||||
{window.t("شناسه سفارش")}: <span>{item.id}</span> |
{window.t("شناسه سفارش")}: <span>{item.id}</span> |
||||||
</div> |
</div> |
||||||
<div className="order-data-container-item-row1-order-status"> |
<div className="order-data-container-item-row1-order-status"> |
||||||
<div |
<div |
||||||
style={{ |
style={{ |
||||||
backgroundColor: [0, "#11FA2F", "#11FADB", "#FA3011"][ |
backgroundColor: [0, "#11FA2F", "#11FADB", "#FA3011"][ |
||||||
item.condition |
item.condition |
||||||
], |
], |
||||||
}} |
}} |
||||||
className="order-data-container-item-row1-order-status-circle" |
className="order-data-container-item-row1-order-status-circle" |
||||||
></div> |
></div> |
||||||
<div |
<div |
||||||
style={{ |
style={{ |
||||||
color: [0, "#0F9420", "#30C2BD", "#FA4C0D"][ |
color: [0, "#0F9420", "#30C2BD", "#FA4C0D"][ |
||||||
item.condition |
item.condition |
||||||
], |
], |
||||||
backgroundColor: [0, "#B0F8B5", "#B5FFFD", "#FDC9B6"][ |
backgroundColor: [0, "#B0F8B5", "#B5FFFD", "#FDC9B6"][ |
||||||
item.condition |
item.condition |
||||||
], |
], |
||||||
}} |
}} |
||||||
className="order-data-container-item-row1-order-status-text" |
className="order-data-container-item-row1-order-status-text" |
||||||
> |
> |
||||||
{ |
{ |
||||||
[ |
[ |
||||||
window.t("پرداخت نشده"), |
window.t("پرداخت نشده"), |
||||||
window.t("در حال پردازش"), |
window.t("در حال پردازش"), |
||||||
window.t("ارسال شد"), |
window.t("ارسال شد"), |
||||||
window.t("لغو شد"), |
window.t("لغو شد"), |
||||||
][item.condition] |
][item.condition] |
||||||
} |
} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className="order-data-container-item-row2"> |
<div className="order-data-container-item-row2"> |
||||||
<div className="order-data-container-item-row2-transactionId"> |
<div className="order-data-container-item-row2-transactionId"> |
||||||
{window.t("شناسه پرداخت")} :{" "} |
{window.t("شناسه پرداخت")} :{" "} |
||||||
<span>{item.transactionId}</span> |
<span>{item.transactionId}</span> |
||||||
</div> |
</div> |
||||||
<div className="order-data-container-item-row2-order-date"> |
<div className="order-data-container-item-row2-order-date"> |
||||||
<span> |
<span> |
||||||
{moment(item.payedAt).format("jYYYY/jMM/jDD hh:mm")} |
{moment(item.payedAt).format("jYYYY/jMM/jDD hh:mm")} |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div className="order-data-container-item-row3 d-flex"> |
<div className="order-data-container-item-row3 d-flex"> |
||||||
<div className="order-data-container-item-row3-order-price "> |
<div className="order-data-container-item-row3-order-price "> |
||||||
{window.t("مبلغ")} : <span>{window.tr(item.payPrice)}</span>{" "} |
{window.t("مبلغ")} : <span>{window.tr(item.payPrice)}</span>{" "} |
||||||
<span className="odcir2op-unit">{window.t("تومان")}</span> |
<span className="odcir2op-unit">{window.t("تومان")}</span> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div className="order-data-container-item-row3-order-offcodeprice"> |
<div className="order-data-container-item-row3-order-offcodeprice"> |
||||||
{window.t("تخفیف")} :{" "} |
{window.t("تخفیف")} :{" "} |
||||||
<span>{window.tr(item.offPrice)}</span>{" "} |
<span>{window.tr(item.offPrice)}</span>{" "} |
||||||
<span className="odcir2oo-unit">{window.t("تومان")}</span> |
<span className="odcir2oo-unit">{window.t("تومان")}</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className="order-data-container-item-row4"> |
<div className="order-data-container-item-row4"> |
||||||
<div className="order-data-container-item-row4-imgs"> |
<div className="order-data-container-item-row4-imgs"> |
||||||
{item.products.map((item, i) => ( |
{item.products.map((item, i) => ( |
||||||
<div |
<div |
||||||
key={i} |
key={i} |
||||||
className="order-data-container-item-row4-imgs-container" |
className="order-data-container-item-row4-imgs-container" |
||||||
> |
> |
||||||
<img |
<img |
||||||
className="order-data-container-item-row4-imgs-img" |
className="order-data-container-item-row4-imgs-img" |
||||||
src={`https://dnvn.ir/api/v1/file/${ |
src={`https://dnvn.ir/api/v1/file/${ |
||||||
item.book.fileIds.split(",")[0] |
item.book.fileIds.split(",")[0] |
||||||
}`}
|
}`}
|
||||||
alt="" |
alt="" |
||||||
/> |
/> |
||||||
<div style={{ height: 0 }}> |
<div style={{ height: 0 }}> |
||||||
<div className="order-data-container-item-row4-imgs-img-count"> |
<div className="order-data-container-item-row4-imgs-img-count"> |
||||||
{item.count}{" "} |
{item.count}{" "} |
||||||
<span style={{ fontSize: "12px" }}>×</span> |
<span style={{ fontSize: "12px" }}>×</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div style={{ fontSize: "10px" }} align="center"> |
<div style={{ fontSize: "10px" }} align="center"> |
||||||
{`${item.book.name} ${grades[item.book.gradeId]}`} |
{`${item.book.name} ${grades[item.book.gradeId]}`} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
))} |
))} |
||||||
{data == null && ( |
{data == null && ( |
||||||
<div className="order-message"> |
<div className="order-message"> |
||||||
{window.t("سفارشی برای نماش وجود ندارد")} |
{window.t("سفارشی برای نماش وجود ندارد")} |
||||||
</div> |
</div> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
list: state.userFactor.list, |
list: state.userFactor.list, |
||||||
}), |
}), |
||||||
{ |
{ |
||||||
getList: userFactor.list, |
getList: userFactor.list, |
||||||
} |
} |
||||||
)(Orders); |
)(Orders); |
||||||
|
|||||||
@ -1,25 +1,25 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import Iframe from "react-iframe"; |
import Iframe from "react-iframe"; |
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
|
|
||||||
export default class Test extends Component { |
export default class Test extends Component { |
||||||
render() { |
render() { |
||||||
const id = +window.location.pathname.split("/").slice(-1)[0]; |
const id = +window.location.pathname.split("/").slice(-1)[0]; |
||||||
console.log(1); |
console.log(1); |
||||||
return ( |
return ( |
||||||
<div style={{ height: "100%" }}> |
<div style={{ height: "100%" }}> |
||||||
<Navbar /> |
<Navbar /> |
||||||
|
|
||||||
<br /> |
<br /> |
||||||
<br /> |
<br /> |
||||||
|
|
||||||
<Iframe |
<Iframe |
||||||
url={"https://dnvn.ir/xpdf/" + id} |
url={"https://dnvn.ir/xpdf/" + id} |
||||||
width="100%" |
width="100%" |
||||||
height="100%" |
height="100%" |
||||||
style={{ position: "relative", top: 80 }} |
style={{ position: "relative", top: 80 }} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,31 +1,31 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55, |
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55, |
||||||
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
export default function Info(props) { |
export default function Info(props) { |
||||||
const { title, subTitle, description } = props; |
const { title, subTitle, description } = props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<section |
<section |
||||||
className={`product-info d-flex flex-column ${ |
className={`product-info d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-end" : "" |
window.lang === "en" ? "align-items-end" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1> |
||||||
<span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span> |
<span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}>{description}</p> |
<p style={{ fontSize: fontSize.desktop.p }}>{description}</p> |
||||||
</section> |
</section> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,118 +1,118 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import FormControlLabel from "@material-ui/core/FormControlLabel"; |
import FormControlLabel from "@material-ui/core/FormControlLabel"; |
||||||
import Checkbox from "@material-ui/core/Checkbox"; |
import Checkbox from "@material-ui/core/Checkbox"; |
||||||
|
|
||||||
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank"; |
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank"; |
||||||
import CheckBoxIcon from "@material-ui/icons/CheckBox"; |
import CheckBoxIcon from "@material-ui/icons/CheckBox"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
export default class TypicalFilters extends React.Component { |
export default class TypicalFilters extends React.Component { |
||||||
onChange = (name, data) => { |
onChange = (name, data) => { |
||||||
if (name === "subject") { |
if (name === "subject") { |
||||||
this.props.parent.setState((prevState) => ({ |
this.props.parent.setState((prevState) => ({ |
||||||
selectedFilters: { |
selectedFilters: { |
||||||
...prevState.selectedFilters, |
...prevState.selectedFilters, |
||||||
subject: |
subject: |
||||||
prevState.selectedFilters.subject.indexOf(data) !== -1 |
prevState.selectedFilters.subject.indexOf(data) !== -1 |
||||||
? prevState.selectedFilters.subject.filter( |
? prevState.selectedFilters.subject.filter( |
||||||
(item) => item !== data |
(item) => item !== data |
||||||
) |
) |
||||||
: [...new Set([...prevState.selectedFilters.subject, data])], |
: [...new Set([...prevState.selectedFilters.subject, data])], |
||||||
}, |
}, |
||||||
})); |
})); |
||||||
} else if (name === "level") { |
} else if (name === "level") { |
||||||
this.props.parent.setState((prevState) => ({ |
this.props.parent.setState((prevState) => ({ |
||||||
selectedFilters: { |
selectedFilters: { |
||||||
...prevState.selectedFilters, |
...prevState.selectedFilters, |
||||||
level: |
level: |
||||||
prevState.selectedFilters.level.indexOf(data) !== -1 |
prevState.selectedFilters.level.indexOf(data) !== -1 |
||||||
? prevState.selectedFilters.level.filter((item) => item !== data) |
? prevState.selectedFilters.level.filter((item) => item !== data) |
||||||
: [...new Set([...prevState.selectedFilters.level, data])], |
: [...new Set([...prevState.selectedFilters.level, data])], |
||||||
}, |
}, |
||||||
})); |
})); |
||||||
} |
} |
||||||
}; |
}; |
||||||
render() { |
render() { |
||||||
const { data, title, theme } = this.props; |
const { data, title, theme } = this.props; |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className={`products-filters-typical d-flex flex-column ${ |
className={`products-filters-typical d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-end" : "" |
window.lang === "en" ? "align-items-end" : "" |
||||||
}`}
|
}`}
|
||||||
style={{ |
style={{ |
||||||
width: "100%", |
width: "100%", |
||||||
}} |
}} |
||||||
> |
> |
||||||
<header |
<header |
||||||
className={`products-filters-typical__header d-flex align-items-center ${ |
className={`products-filters-typical__header d-flex align-items-center ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<span |
<span |
||||||
style={{ |
style={{ |
||||||
background: theme, |
background: theme, |
||||||
marginLeft: window.lang === "en" ? "" : 5, |
marginLeft: window.lang === "en" ? "" : 5, |
||||||
marginRight: window.lang === "en" ? 5 : "", |
marginRight: window.lang === "en" ? 5 : "", |
||||||
}} |
}} |
||||||
></span> |
></span> |
||||||
<h2 style={{ fontSize: 15 }}>{title}</h2> |
<h2 style={{ fontSize: 15 }}>{title}</h2> |
||||||
</header> |
</header> |
||||||
<div |
<div |
||||||
className={`products-filters-typical__items d-flex flex-column ${ |
className={`products-filters-typical__items d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-end" : "" |
window.lang === "en" ? "align-items-end" : "" |
||||||
}`}
|
}`}
|
||||||
style={{ |
style={{ |
||||||
width: window.lang === "en" ? "90%" : "auto", |
width: window.lang === "en" ? "90%" : "auto", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{data.map((item, i) => ( |
{data.map((item, i) => ( |
||||||
<Item data={item} key={i} parent={this} /> |
<Item data={item} key={i} parent={this} /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
const { data, parent } = props; |
const { data, parent } = props; |
||||||
const checkHandler = (data, name) => { |
const checkHandler = (data, name) => { |
||||||
var available; |
var available; |
||||||
if (name === "subject") { |
if (name === "subject") { |
||||||
available = |
available = |
||||||
props.parent.props.parent.state.selectedFilters.subject.indexOf( |
props.parent.props.parent.state.selectedFilters.subject.indexOf( |
||||||
data |
data |
||||||
) !== -1 |
) !== -1 |
||||||
? true |
? true |
||||||
: false; |
: false; |
||||||
} else if (name === "level") { |
} else if (name === "level") { |
||||||
available = |
available = |
||||||
props.parent.props.parent.state.selectedFilters.level.indexOf(data) !== |
props.parent.props.parent.state.selectedFilters.level.indexOf(data) !== |
||||||
-1 |
-1 |
||||||
? true |
? true |
||||||
: false; |
: false; |
||||||
} |
} |
||||||
return available; |
return available; |
||||||
}; |
}; |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className={`d-flex align-items-center mt-2 ${ |
className={`d-flex align-items-center mt-2 ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<FormControlLabel |
<FormControlLabel |
||||||
control={ |
control={ |
||||||
<Checkbox |
<Checkbox |
||||||
icon={<CheckBoxOutlineBlankIcon style={{ color: "#EAEAEA" }} />} |
icon={<CheckBoxOutlineBlankIcon style={{ color: "#EAEAEA" }} />} |
||||||
checkedIcon={<CheckBoxIcon style={{ color: "#00CC69" }} />} |
checkedIcon={<CheckBoxIcon style={{ color: "#00CC69" }} />} |
||||||
name="checkedH" |
name="checkedH" |
||||||
/> |
/> |
||||||
} |
} |
||||||
checked={checkHandler(data, parent.props.name)} |
checked={checkHandler(data, parent.props.name)} |
||||||
onChange={() => parent.onChange(parent.props.name, data)} |
onChange={() => parent.onChange(parent.props.name, data)} |
||||||
/> |
/> |
||||||
<strong style={{ fontSize: 15, margin: "0px 10px" }}>{data}</strong> |
<strong style={{ fontSize: 15, margin: "0px 10px" }}>{data}</strong> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,89 +1,89 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { book } from "~/Redux/actions"; |
import { book } from "~/Redux/actions"; |
||||||
|
|
||||||
import Product from "../Product/index"; |
import Product from "../Product/index"; |
||||||
import Loader from "~/components/Loader/index"; |
import Loader from "~/components/Loader/index"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
class List extends React.Component { |
class List extends React.Component { |
||||||
componentDidMount() { |
componentDidMount() { |
||||||
if (this.props.list?.length === 0) this.props.getList(); |
if (this.props.list?.length === 0) this.props.getList(); |
||||||
} |
} |
||||||
componentDidUpdate() { |
componentDidUpdate() { |
||||||
if (this.props.list?.length === 0 && !this.props.loading) |
if (this.props.list?.length === 0 && !this.props.loading) |
||||||
this.props.getList(); |
this.props.getList(); |
||||||
} |
} |
||||||
|
|
||||||
render() { |
render() { |
||||||
let { filterResult, loading } = this.props; |
let { filterResult, loading } = this.props; |
||||||
|
|
||||||
return window.innerWidth > 1000 ? ( |
return window.innerWidth > 1000 ? ( |
||||||
<div |
<div |
||||||
className={`products-list d-flex flex-wrap ${ |
className={`products-list d-flex flex-wrap ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
{!loading ? ( |
{!loading ? ( |
||||||
filterResult?.length > 0 ? ( |
filterResult?.length > 0 ? ( |
||||||
(Array.isArray(filterResult) ? filterResult : []).map((item, i) => ( |
(Array.isArray(filterResult) ? filterResult : []).map((item, i) => ( |
||||||
<Product product={item} key={i} /> |
<Product product={item} key={i} /> |
||||||
)) |
)) |
||||||
) : ( |
) : ( |
||||||
<div>{window.t("محصولی با این مشخصات یافت نشد")}</div> |
<div>{window.t("محصولی با این مشخصات یافت نشد")}</div> |
||||||
|
|
||||||
// (Array.isArray(list) ? list : []).map((item, i) => (
|
// (Array.isArray(list) ? list : []).map((item, i) => (
|
||||||
// <Product product={item} key={i} />
|
// <Product product={item} key={i} />
|
||||||
// ))
|
// ))
|
||||||
) |
) |
||||||
) : ( |
) : ( |
||||||
<div |
<div |
||||||
className="d-flex justify-content-center align-items-center" |
className="d-flex justify-content-center align-items-center" |
||||||
style={{ height: "100vh", width: "100vw" }} |
style={{ height: "100vh", width: "100vw" }} |
||||||
> |
> |
||||||
<Loader /> |
<Loader /> |
||||||
</div> |
</div> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<> |
<> |
||||||
<div |
<div |
||||||
className="mobile-products-list d-flex flex-wrap" |
className="mobile-products-list d-flex flex-wrap" |
||||||
style={{ marginBottom: 40 }} |
style={{ marginBottom: 40 }} |
||||||
> |
> |
||||||
{!loading ? ( |
{!loading ? ( |
||||||
filterResult.length > 0 ? ( |
filterResult.length > 0 ? ( |
||||||
filterResult.map((item, i) => <Product product={item} key={i} />) |
filterResult.map((item, i) => <Product product={item} key={i} />) |
||||||
) : ( |
) : ( |
||||||
//list.map((item, i) => <Product product={item} key={i} />)
|
//list.map((item, i) => <Product product={item} key={i} />)
|
||||||
<div |
<div |
||||||
align="center" |
align="center" |
||||||
style={{ margin: "20px auto", color: "gray" }} |
style={{ margin: "20px auto", color: "gray" }} |
||||||
> |
> |
||||||
{window.t("محصولی با این مشخصات یافت نشد")}{" "} |
{window.t("محصولی با این مشخصات یافت نشد")}{" "} |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
) : ( |
) : ( |
||||||
<div |
<div |
||||||
className="d-flex justify-content-center align-items-center" |
className="d-flex justify-content-center align-items-center" |
||||||
style={{ height: "100vh", width: "100vw" }} |
style={{ height: "100vh", width: "100vw" }} |
||||||
> |
> |
||||||
<Loader /> |
<Loader /> |
||||||
</div> |
</div> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
list: state.book.list, |
list: state.book.list, |
||||||
searchResult: state.book.searchResult, |
searchResult: state.book.searchResult, |
||||||
loading: state.book.loading, |
loading: state.book.loading, |
||||||
filterResult: state.book.filterResult, |
filterResult: state.book.filterResult, |
||||||
}), |
}), |
||||||
{ getList: book.list } |
{ getList: book.list } |
||||||
)(List); |
)(List); |
||||||
|
|||||||
@ -1,208 +1,208 @@ |
|||||||
/* eslint-disable jsx-a11y/anchor-is-valid */ |
/* eslint-disable jsx-a11y/anchor-is-valid */ |
||||||
import React from "react"; |
import React from "react"; |
||||||
import { Link, useHistory } from "react-router-dom"; |
import { Link, useHistory } from "react-router-dom"; |
||||||
import { toast } from "react-toastify"; |
import { toast } from "react-toastify"; |
||||||
import proxy from "~/Redux/proxy"; |
import proxy from "~/Redux/proxy"; |
||||||
// import basket from "../../../assets/icons/basket.png";
|
// import basket from "../../../assets/icons/basket.png";
|
||||||
import basket2 from "../../../assets/icons/basket2.png"; |
import basket2 from "../../../assets/icons/basket2.png"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
|
|
||||||
import { userProduct } from "~/Redux/actions"; |
import { userProduct } from "~/Redux/actions"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
function Product(props) { |
function Product(props) { |
||||||
let history = useHistory(); |
let history = useHistory(); |
||||||
function Navigate({ path }) { |
function Navigate({ path }) { |
||||||
history.push(path); |
history.push(path); |
||||||
} |
} |
||||||
const { product } = props; |
const { product } = props; |
||||||
let productId = localStorage.getItem("pushToCart"); |
let productId = localStorage.getItem("pushToCart"); |
||||||
if (productId) { |
if (productId) { |
||||||
localStorage.removeItem("pushToCart"); |
localStorage.removeItem("pushToCart"); |
||||||
props.pushToCart({ |
props.pushToCart({ |
||||||
productId, |
productId, |
||||||
userId: props.id, |
userId: props.id, |
||||||
count: 1, |
count: 1, |
||||||
}); |
}); |
||||||
setTimeout(() => history.push("/cart"), 2000); |
setTimeout(() => history.push("/cart"), 2000); |
||||||
} |
} |
||||||
const grades = [ |
const grades = [ |
||||||
window.t("پیش دبستان"), |
window.t("پیش دبستان"), |
||||||
window.t("اول"), |
window.t("اول"), |
||||||
window.t("دوم"), |
window.t("دوم"), |
||||||
window.t("سوم"), |
window.t("سوم"), |
||||||
window.t("چهارم"), |
window.t("چهارم"), |
||||||
window.t("پنجم"), |
window.t("پنجم"), |
||||||
window.t("ششم"), |
window.t("ششم"), |
||||||
window.t("هفتم"), |
window.t("هفتم"), |
||||||
window.t("هشتم"), |
window.t("هشتم"), |
||||||
window.t("نهم"), |
window.t("نهم"), |
||||||
window.t("دهم"), |
window.t("دهم"), |
||||||
window.t("یازدهم"), |
window.t("یازدهم"), |
||||||
window.t("دوازدهم"), |
window.t("دوازدهم"), |
||||||
]; |
]; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<div className="mobile-products-product d-flex flex-column "> |
<div className="mobile-products-product d-flex flex-column "> |
||||||
<Link |
<Link |
||||||
to={`/products/physical/${product.id}`} |
to={`/products/physical/${product.id}`} |
||||||
className=" align-items-center d-flex flex-column " |
className=" align-items-center d-flex flex-column " |
||||||
style={{ textDecoration: "none" }} |
style={{ textDecoration: "none" }} |
||||||
> |
> |
||||||
<img |
<img |
||||||
className="pimg" |
className="pimg" |
||||||
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`} |
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`} |
||||||
alt={window.t("عکس مجصول")} |
alt={window.t("عکس مجصول")} |
||||||
/> |
/> |
||||||
<div className="mobile-products-product__info d-flex flex-column"> |
<div className="mobile-products-product__info d-flex flex-column"> |
||||||
<h1>{`${product.name} ${window.t("پایه")} ${ |
<h1>{`${product.name} ${window.t("پایه")} ${ |
||||||
grades[product.gradeId] |
grades[product.gradeId] |
||||||
}`}</h1>
|
}`}</h1>
|
||||||
</div> |
</div> |
||||||
</Link> |
</Link> |
||||||
|
|
||||||
<div className="mobile-products-product__links d-flex flex-column"> |
<div className="mobile-products-product__links d-flex flex-column"> |
||||||
<div className="d-flex" style={{ width: "100%" }}> |
<div className="d-flex" style={{ width: "100%" }}> |
||||||
<Link |
<Link |
||||||
to={`/products/physical/${product.id}`} |
to={`/products/physical/${product.id}`} |
||||||
className="mobile-products-product__links--physical d-flex justify-content-between align-items-center" |
className="mobile-products-product__links--physical d-flex justify-content-between align-items-center" |
||||||
> |
> |
||||||
<h2> {window.t("نسخه چاپی")}</h2> |
<h2> {window.t("نسخه چاپی")}</h2> |
||||||
<span> |
<span> |
||||||
{window.tr(product.product[0].price)} {window.t("تومان")} |
{window.tr(product.product[0].price)} {window.t("تومان")} |
||||||
</span> |
</span> |
||||||
</Link> |
</Link> |
||||||
<div |
<div |
||||||
className="mobile-products-product__links--basket d-flex" |
className="mobile-products-product__links--basket d-flex" |
||||||
style={{ backgroundColor: "#7fc75d" }} |
style={{ backgroundColor: "#7fc75d" }} |
||||||
onClick={() => { |
onClick={() => { |
||||||
if (proxy.status()) |
if (proxy.status()) |
||||||
props.pushToCart({ |
props.pushToCart({ |
||||||
productId: product.product[0].id, |
productId: product.product[0].id, |
||||||
userId: props.id, |
userId: props.id, |
||||||
count: 1, |
count: 1, |
||||||
}); |
}); |
||||||
else { |
else { |
||||||
localStorage.setItem( |
localStorage.setItem( |
||||||
"afterLogin", |
"afterLogin", |
||||||
window.location.pathname |
window.location.pathname |
||||||
); |
); |
||||||
localStorage.setItem("pushToCart", product.product[0].id); |
localStorage.setItem("pushToCart", product.product[0].id); |
||||||
Navigate({ path: "/auth" }); |
Navigate({ path: "/auth" }); |
||||||
} |
} |
||||||
}} |
}} |
||||||
> |
> |
||||||
<img src={basket2} alt="" width="20px" height="20px" /> |
<img src={basket2} alt="" width="20px" height="20px" /> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
{/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}> |
{/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}> |
||||||
<span |
<span |
||||||
to={`/products/digital/${product.id}`} |
to={`/products/digital/${product.id}`} |
||||||
className="mobile-products-product__links--ar d-flex justify-content-between align-items-center" |
className="mobile-products-product__links--ar d-flex justify-content-between align-items-center" |
||||||
> |
> |
||||||
<h2> الکترونیکی")}</h2> |
<h2> الکترونیکی")}</h2> |
||||||
{/* <span>{product.product[0].price} تومان")}</span> |
{/* <span>{product.product[0].price} تومان")}</span> |
||||||
|
|
||||||
<span> به زودی")}</span> |
<span> به زودی")}</span> |
||||||
</span> |
</span> |
||||||
<div |
<div |
||||||
className="mobile-products-product__links--basket d-flex" |
className="mobile-products-product__links--basket d-flex" |
||||||
// onClick={() => {
|
// onClick={() => {
|
||||||
// proxy.status()
|
// proxy.status()
|
||||||
// ? this.props.pushToCart({
|
// ? this.props.pushToCart({
|
||||||
// productId: product.product[0].id,
|
// productId: product.product[0].id,
|
||||||
// userId: this.props.id,
|
// userId: this.props.id,
|
||||||
// count: 1,
|
// count: 1,
|
||||||
// })
|
// })
|
||||||
// : toast.info("ابتدا وارد حساب کاربری خود شوید.");
|
// : toast.info("ابتدا وارد حساب کاربری خود شوید.");
|
||||||
// }}
|
// }}
|
||||||
> |
> |
||||||
<img src={basket} alt="" width="20px" height="20px" /> |
<img src={basket} alt="" width="20px" height="20px" /> |
||||||
</div> |
</div> |
||||||
</div> */} |
</div> */} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<article className="products-product d-flex flex-column align-items-center"> |
<article className="products-product d-flex flex-column align-items-center"> |
||||||
<Link |
<Link |
||||||
to={`/products/physical/${product.id}`} |
to={`/products/physical/${product.id}`} |
||||||
style={{ textDecoration: "none" }} |
style={{ textDecoration: "none" }} |
||||||
> |
> |
||||||
<img |
<img |
||||||
className="pimg" |
className="pimg" |
||||||
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`} |
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`} |
||||||
alt={product.name} |
alt={product.name} |
||||||
/> |
/> |
||||||
<h1 style={{ fontSize: 15 }}> |
<h1 style={{ fontSize: 15 }}> |
||||||
{`${product.name} ${window.t("پایه")} ${grades[product.gradeId]}`} |
{`${product.name} ${window.t("پایه")} ${grades[product.gradeId]}`} |
||||||
</h1> |
</h1> |
||||||
</Link> |
</Link> |
||||||
<div className="d-flex" style={{ width: "100%" }}> |
<div className="d-flex" style={{ width: "100%" }}> |
||||||
<Link |
<Link |
||||||
to={`/products/physical/${product.id}`} |
to={`/products/physical/${product.id}`} |
||||||
style={{ fontSize: 12 }} |
style={{ fontSize: 12 }} |
||||||
className="products-product--physical d-flex justify-content-between align-items-center" |
className="products-product--physical d-flex justify-content-between align-items-center" |
||||||
> |
> |
||||||
<h2 style={{ fontSize: 12 }}>{window.t("نسخه چاپی")}</h2> |
<h2 style={{ fontSize: 12 }}>{window.t("نسخه چاپی")}</h2> |
||||||
<span style={{ fontSize: 12 }}> |
<span style={{ fontSize: 12 }}> |
||||||
{window.tr(product.product[0].price)} {window.t("تومان")} |
{window.tr(product.product[0].price)} {window.t("تومان")} |
||||||
</span> |
</span> |
||||||
</Link> |
</Link> |
||||||
<div |
<div |
||||||
className="products-product--basket d-flex" |
className="products-product--basket d-flex" |
||||||
style={{ backgroundColor: "#7fc75d", marginTop: 0 }} |
style={{ backgroundColor: "#7fc75d", marginTop: 0 }} |
||||||
onClick={() => { |
onClick={() => { |
||||||
if (proxy.status()) |
if (proxy.status()) |
||||||
props.pushToCart({ |
props.pushToCart({ |
||||||
productId: product.product[0].id, |
productId: product.product[0].id, |
||||||
userId: props.id, |
userId: props.id, |
||||||
count: 1, |
count: 1, |
||||||
}); |
}); |
||||||
else { |
else { |
||||||
toast.info( |
toast.info( |
||||||
window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید") |
window.t("جهت ادامه فرآیند خرید وارد حساب خود شوید") |
||||||
); |
); |
||||||
localStorage.setItem("afterLogin", window.location.pathname); |
localStorage.setItem("afterLogin", window.location.pathname); |
||||||
localStorage.setItem("pushToCart", product.product[0].id); |
localStorage.setItem("pushToCart", product.product[0].id); |
||||||
Navigate({ path: "/auth" }); |
Navigate({ path: "/auth" }); |
||||||
} |
} |
||||||
}} |
}} |
||||||
> |
> |
||||||
<img src={basket2} alt="" width="20px" height="20px" /> |
<img src={basket2} alt="" width="20px" height="20px" /> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
{/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}> |
{/* <div className="d-flex" style={{ width: "100%", opacity: 0.3 }}> |
||||||
<div |
<div |
||||||
to={`/products/digital/${product.id}`} |
to={`/products/digital/${product.id}`} |
||||||
className="products-product--ar d-flex justify-content-between align-items-center" |
className="products-product--ar d-flex justify-content-between align-items-center" |
||||||
> |
> |
||||||
<span style={{ fontSize: 12 }}> |
<span style={{ fontSize: 12 }}> |
||||||
{/* {product.product[0].price} تومان |
{/* {product.product[0].price} تومان |
||||||
به زودی")} </span> |
به زودی")} </span> |
||||||
</div> |
</div> |
||||||
<div |
<div |
||||||
className="products-product--basket d-flex" |
className="products-product--basket d-flex" |
||||||
// onClick={() => {
|
// onClick={() => {
|
||||||
// proxy.status()
|
// proxy.status()
|
||||||
// ? this.props.pushToCart({
|
// ? this.props.pushToCart({
|
||||||
// productId: product.product[0].id,
|
// productId: product.product[0].id,
|
||||||
// userId: this.props.id,
|
// userId: this.props.id,
|
||||||
// count: 1,
|
// count: 1,
|
||||||
// })
|
// })
|
||||||
// : toast.info("ابتدا وارد حساب کاربری خود شوید.");
|
// : toast.info("ابتدا وارد حساب کاربری خود شوید.");
|
||||||
// }}
|
// }}
|
||||||
> |
> |
||||||
<img src={basket} alt="" width="20px" height="20px" /> |
<img src={basket} alt="" width="20px" height="20px" /> |
||||||
</div> |
</div> |
||||||
</div> */} |
</div> */} |
||||||
</article> |
</article> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
export default connect((state) => ({}), { |
export default connect((state) => ({}), { |
||||||
pushToCart: userProduct.add, |
pushToCart: userProduct.add, |
||||||
})(Product); |
})(Product); |
||||||
|
|||||||
@ -1,90 +1,90 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import { makeStyles, withStyles } from "@material-ui/core/styles"; |
import { makeStyles, withStyles } from "@material-ui/core/styles"; |
||||||
import FormControl from "@material-ui/core/FormControl"; |
import FormControl from "@material-ui/core/FormControl"; |
||||||
import NativeSelect from "@material-ui/core/NativeSelect"; |
import NativeSelect from "@material-ui/core/NativeSelect"; |
||||||
import InputBase from "@material-ui/core/InputBase"; |
import InputBase from "@material-ui/core/InputBase"; |
||||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
||||||
|
|
||||||
const BootstrapInput = withStyles((theme) => ({ |
const BootstrapInput = withStyles((theme) => ({ |
||||||
root: { |
root: { |
||||||
"label + &": { |
"label + &": { |
||||||
marginTop: theme.spacing(3), |
marginTop: theme.spacing(3), |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
input: { |
input: { |
||||||
borderRadius: 4, |
borderRadius: 4, |
||||||
position: "relative", |
position: "relative", |
||||||
backgroundColor: theme.palette.background.paper, |
backgroundColor: theme.palette.background.paper, |
||||||
border: "1px solid #a5a5a5", |
border: "1px solid #a5a5a5", |
||||||
fontSize: 15, |
fontSize: 15, |
||||||
color: "#a5a5a5", |
color: "#a5a5a5", |
||||||
// maxWidth : 70,
|
// maxWidth : 70,
|
||||||
minWidth: window.innerWidth > 420 ? 90 : 80, |
minWidth: window.innerWidth > 420 ? 90 : 80, |
||||||
height: "35px", |
height: "35px", |
||||||
padding: "5px", |
padding: "5px", |
||||||
transition: theme.transitions.create(["border-color", "box-shadow"]), |
transition: theme.transitions.create(["border-color", "box-shadow"]), |
||||||
// Use the system font instead of the default Roboto font.
|
// Use the system font instead of the default Roboto font.
|
||||||
fontFamily: "numeralLight", |
fontFamily: "numeralLight", |
||||||
"&:focus": { |
"&:focus": { |
||||||
borderRadius: 4, |
borderRadius: 4, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
}))(InputBase); |
}))(InputBase); |
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({ |
const useStyles = makeStyles((theme) => ({ |
||||||
marginLeft: { |
marginLeft: { |
||||||
// margin: theme.spacing(1),
|
// margin: theme.spacing(1),
|
||||||
marginLeft: 8, |
marginLeft: 8, |
||||||
}, |
}, |
||||||
})); |
})); |
||||||
|
|
||||||
export default function CustomizedSelects(props) { |
export default function CustomizedSelects(props) { |
||||||
const classes = useStyles(); |
const classes = useStyles(); |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div style={{ position: "relative" }}> |
<div style={{ position: "relative" }}> |
||||||
<FormControl className={classes.marginLeft}> |
<FormControl className={classes.marginLeft}> |
||||||
<NativeSelect |
<NativeSelect |
||||||
id="demo-customized-select-native" |
id="demo-customized-select-native" |
||||||
value={props.parent.state[props.name]} |
value={props.parent.state[props.name]} |
||||||
onChange={(e) => |
onChange={(e) => |
||||||
e.target.value !== window.t("نام کتاب") && |
e.target.value !== window.t("نام کتاب") && |
||||||
e.target.value !== window.t("مرتب سازی") && |
e.target.value !== window.t("مرتب سازی") && |
||||||
e.target.value !== window.t("پایه تحصیلی") |
e.target.value !== window.t("پایه تحصیلی") |
||||||
? props.parent.setState({ |
? props.parent.setState({ |
||||||
selectedFilters: { |
selectedFilters: { |
||||||
...props.parent.state.selectedFilters, |
...props.parent.state.selectedFilters, |
||||||
[props.name]: |
[props.name]: |
||||||
props.name === "sort" |
props.name === "sort" |
||||||
? e.target.value |
? e.target.value |
||||||
: new Array(e.target.value), |
: new Array(e.target.value), |
||||||
}, |
}, |
||||||
}) |
}) |
||||||
: props.parent.setState({ |
: props.parent.setState({ |
||||||
selectedFilters: { |
selectedFilters: { |
||||||
...props.parent.state.selectedFilters, |
...props.parent.state.selectedFilters, |
||||||
[props.name]: props.name === "sort" ? null : [], |
[props.name]: props.name === "sort" ? null : [], |
||||||
}, |
}, |
||||||
}) |
}) |
||||||
} |
} |
||||||
input={<BootstrapInput />} |
input={<BootstrapInput />} |
||||||
> |
> |
||||||
{props.options.map((item, i) => ( |
{props.options.map((item, i) => ( |
||||||
<option key={i} value={item}> |
<option key={i} value={item}> |
||||||
{item} |
{item} |
||||||
</option> |
</option> |
||||||
))} |
))} |
||||||
</NativeSelect> |
</NativeSelect> |
||||||
</FormControl> |
</FormControl> |
||||||
<KeyboardArrowDownIcon |
<KeyboardArrowDownIcon |
||||||
style={{ |
style={{ |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: 5, |
left: 5, |
||||||
top: 6, |
top: 6, |
||||||
fontSize: 25, |
fontSize: 25, |
||||||
color: "#a5a5a5", |
color: "#a5a5a5", |
||||||
}} |
}} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,71 +1,71 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import SortIcon from "@material-ui/icons/Sort"; |
import SortIcon from "@material-ui/icons/Sort"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, |
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, |
||||||
li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
||||||
}; |
}; |
||||||
|
|
||||||
export default class Sort extends React.Component { |
export default class Sort extends React.Component { |
||||||
render() { |
render() { |
||||||
const { parent, selectedSort } = this.props; |
const { parent, selectedSort } = this.props; |
||||||
|
|
||||||
const sortItems = [window.t("پرفروش ترین"), window.t("جدیدترین")]; |
const sortItems = [window.t("پرفروش ترین"), window.t("جدیدترین")]; |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className={`products-sort d-flex align-items-center ${ |
className={`products-sort d-flex align-items-center ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
style={{ |
style={{ |
||||||
width: window.lang === "en" ? "100%" : "", |
width: window.lang === "en" ? "100%" : "", |
||||||
}} |
}} |
||||||
> |
> |
||||||
<SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} /> |
<SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} /> |
||||||
<span style={{ fontSize: fontSize.span }}> |
<span style={{ fontSize: fontSize.span }}> |
||||||
{window.t("مرتب سازی بر اساس")} |
{window.t("مرتب سازی بر اساس")} |
||||||
</span> |
</span> |
||||||
<ul |
<ul |
||||||
className={`d-flex align-items-center mr-2 ${ |
className={`d-flex align-items-center mr-2 ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
{sortItems.map((item, i) => ( |
{sortItems.map((item, i) => ( |
||||||
<Item |
<Item |
||||||
data={item} |
data={item} |
||||||
key={i} |
key={i} |
||||||
parent={parent} |
parent={parent} |
||||||
selectedSort={selectedSort} |
selectedSort={selectedSort} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
return ( |
return ( |
||||||
<li |
<li |
||||||
style={{ |
style={{ |
||||||
fontSize: fontSize.li, |
fontSize: fontSize.li, |
||||||
backgroundColor: |
backgroundColor: |
||||||
props.selectedSort === props.data ? "#4CE1BE73" : "white", |
props.selectedSort === props.data ? "#4CE1BE73" : "white", |
||||||
}} |
}} |
||||||
onClick={() => |
onClick={() => |
||||||
props.parent.setState({ |
props.parent.setState({ |
||||||
selectedFilters: { |
selectedFilters: { |
||||||
...props.parent.state.selectedFilters, |
...props.parent.state.selectedFilters, |
||||||
sort: props.data, |
sort: props.data, |
||||||
}, |
}, |
||||||
}) |
}) |
||||||
} |
} |
||||||
> |
> |
||||||
{props.data} |
{props.data} |
||||||
</li> |
</li> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|||||||
@ -1,174 +1,174 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import FilterListIcon from "@material-ui/icons/FilterList"; |
import FilterListIcon from "@material-ui/icons/FilterList"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { book } from "~/Redux/actions"; |
import { book } from "~/Redux/actions"; |
||||||
import { Link } from "react-router-dom"; |
import { Link } from "react-router-dom"; |
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
import Footer from "../Home/Footer/index"; |
import Footer from "../Home/Footer/index"; |
||||||
import Select from "./Select/index"; |
import Select from "./Select/index"; |
||||||
import Breadcrumbs from "./BreadCrumb/index"; |
import Breadcrumbs from "./BreadCrumb/index"; |
||||||
import List from "./List/index"; |
import List from "./List/index"; |
||||||
import Sort from "./Sort/index"; |
import Sort from "./Sort/index"; |
||||||
import Filters from "./Filters/index"; |
import Filters from "./Filters/index"; |
||||||
|
|
||||||
import navbarSearch from "../../assets/icons/navbarSearch.png"; |
import navbarSearch from "../../assets/icons/navbarSearch.png"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
import { toast } from "react-toastify"; |
import { toast } from "react-toastify"; |
||||||
|
|
||||||
class Products extends Component { |
class Products extends Component { |
||||||
state = { |
state = { |
||||||
search: null, |
search: null, |
||||||
selectedFilters: { |
selectedFilters: { |
||||||
level: [], |
level: [], |
||||||
subject: [], |
subject: [], |
||||||
sort: null, |
sort: null, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
handleProductSearch = (val) => { |
handleProductSearch = (val) => { |
||||||
this.setState({ |
this.setState({ |
||||||
search: val, |
search: val, |
||||||
}); |
}); |
||||||
// this.props.searchBook(val);
|
// this.props.searchBook(val);
|
||||||
}; |
}; |
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) { |
componentDidUpdate(prevProps, prevState) { |
||||||
if ( |
if ( |
||||||
prevState.selectedFilters !== this.state.selectedFilters || |
prevState.selectedFilters !== this.state.selectedFilters || |
||||||
prevState.search !== this.state.search |
prevState.search !== this.state.search |
||||||
) { |
) { |
||||||
this.props.filterBook({ |
this.props.filterBook({ |
||||||
...this.state.selectedFilters, |
...this.state.selectedFilters, |
||||||
search: this.state.search, |
search: this.state.search, |
||||||
}); |
}); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
componentDidMount() { |
componentDidMount() { |
||||||
window.scrollTo(0, 0); |
window.scrollTo(0, 0); |
||||||
localStorage.removeItem("filter"); |
localStorage.removeItem("filter"); |
||||||
if ( |
if ( |
||||||
window.location.search.slice( |
window.location.search.slice( |
||||||
window.location.search.lastIndexOf("?") + 1, |
window.location.search.lastIndexOf("?") + 1, |
||||||
window.location.search.length |
window.location.search.length |
||||||
) === "cart" |
) === "cart" |
||||||
) { |
) { |
||||||
toast.info(window.t("ابتدا یک محصول به سبد خریدتان اضافه کنید.")); |
toast.info(window.t("ابتدا یک محصول به سبد خریدتان اضافه کنید.")); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { sortFilters, levels, subjects } = this.props; |
const { sortFilters, levels, subjects } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<> |
<> |
||||||
<div |
<div |
||||||
className={`products d-flex flex-column ${ |
className={`products d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-end" : "" |
window.lang === "en" ? "align-items-end" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<Navbar page={"products"} /> |
<Navbar page={"products"} /> |
||||||
<Breadcrumbs /> |
<Breadcrumbs /> |
||||||
<div |
<div |
||||||
className={`products__body d-flex ${ |
className={`products__body d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
{this.props.subjects.length > 0 ? ( |
{this.props.subjects.length > 0 ? ( |
||||||
<Filters parent={this} /> |
<Filters parent={this} /> |
||||||
) : null} |
) : null} |
||||||
<div |
<div |
||||||
className={`products__body--left d-flex flex-column ${ |
className={`products__body--left d-flex flex-column ${ |
||||||
window.lang === "en" ? "align-items-end" : "" |
window.lang === "en" ? "align-items-end" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<Sort |
<Sort |
||||||
parent={this} |
parent={this} |
||||||
selectedSort={this.state.selectedFilters.sort} |
selectedSort={this.state.selectedFilters.sort} |
||||||
/> |
/> |
||||||
<List /> |
<List /> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer /> |
<Footer /> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<> |
<> |
||||||
<div className="mobile-products d-flex flex-column"> |
<div className="mobile-products d-flex flex-column"> |
||||||
<Navbar page={"products"} /> |
<Navbar page={"products"} /> |
||||||
|
|
||||||
<div className="mobile-products__search d-flex"> |
<div className="mobile-products__search d-flex"> |
||||||
<input |
<input |
||||||
type="search" |
type="search" |
||||||
style={{ |
style={{ |
||||||
fontSize: 15, |
fontSize: 15, |
||||||
textAlign: window.lang === "en" ? "left" : "", |
textAlign: window.lang === "en" ? "left" : "", |
||||||
}} |
}} |
||||||
placeholder={window.t("جستجو")} |
placeholder={window.t("جستجو")} |
||||||
onChange={(e) => this.handleProductSearch(e.target.value)} |
onChange={(e) => this.handleProductSearch(e.target.value)} |
||||||
/> |
/> |
||||||
<img src={navbarSearch} alt={window.t("جستجو")} /> |
<img src={navbarSearch} alt={window.t("جستجو")} /> |
||||||
</div> |
</div> |
||||||
<div className="mobile-products__filters d-flex"> |
<div className="mobile-products__filters d-flex"> |
||||||
<div |
<div |
||||||
className={`d-flex ${ |
className={`d-flex ${ |
||||||
window.lang === "en" ? "flex-row-reverse" : "" |
window.lang === "en" ? "flex-row-reverse" : "" |
||||||
}`}
|
}`}
|
||||||
> |
> |
||||||
<Select name="sort" options={sortFilters} parent={this} /> |
<Select name="sort" options={sortFilters} parent={this} /> |
||||||
<Select name="subject" options={subjects} parent={this} /> |
<Select name="subject" options={subjects} parent={this} /> |
||||||
<Select name="level" options={levels} parent={this} /> |
<Select name="level" options={levels} parent={this} /> |
||||||
</div> |
</div> |
||||||
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> |
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> |
||||||
</div> |
</div> |
||||||
<List search={this.state.search} /> |
<List search={this.state.search} /> |
||||||
<div |
<div |
||||||
className="d-flex" |
className="d-flex" |
||||||
style={{ |
style={{ |
||||||
position: "fixed", |
position: "fixed", |
||||||
bottom: 1, |
bottom: 1, |
||||||
|
|
||||||
width: "100%", |
width: "100%", |
||||||
height: "40px", |
height: "40px", |
||||||
left: 0, |
left: 0, |
||||||
}} |
}} |
||||||
> |
> |
||||||
<Link |
<Link |
||||||
to={"/cart"} |
to={"/cart"} |
||||||
style={{ |
style={{ |
||||||
width: "100%", |
width: "100%", |
||||||
color: "white", |
color: "white", |
||||||
backgroundColor: "#7fc75d", |
backgroundColor: "#7fc75d", |
||||||
cursor: "pointer", |
cursor: "pointer", |
||||||
borderRadius: 8, |
borderRadius: 8, |
||||||
textDecoration: "none", |
textDecoration: "none", |
||||||
padding: "5px 10px", |
padding: "5px 10px", |
||||||
margin: "5px 10px 1px", |
margin: "5px 10px 1px", |
||||||
textAlign: "center", |
textAlign: "center", |
||||||
}} |
}} |
||||||
> |
> |
||||||
{window.t("سبد خرید")}{" "} |
{window.t("سبد خرید")}{" "} |
||||||
</Link> |
</Link> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ |
(state) => ({ |
||||||
subjects: state.book.subjects, |
subjects: state.book.subjects, |
||||||
levels: state.book.levels, |
levels: state.book.levels, |
||||||
sortFilters: state.book.sortFilters, |
sortFilters: state.book.sortFilters, |
||||||
}), |
}), |
||||||
{ |
{ |
||||||
searchBook: book.searchBook, |
searchBook: book.searchBook, |
||||||
filterBook: book.filterBook, |
filterBook: book.filterBook, |
||||||
} |
} |
||||||
)(Products); |
)(Products); |
||||||
|
|||||||
@ -1,47 +1,47 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import { Link } from "react-router-dom"; |
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
export default function LastQR(props) { |
export default function LastQR(props) { |
||||||
const grades = [ |
const grades = [ |
||||||
"0", |
"0", |
||||||
window.t("اول"), |
window.t("اول"), |
||||||
window.t("دوم"), |
window.t("دوم"), |
||||||
window.t("سوم"), |
window.t("سوم"), |
||||||
window.t("چهارم"), |
window.t("چهارم"), |
||||||
window.t("پنجم"), |
window.t("پنجم"), |
||||||
window.t("ششم"), |
window.t("ششم"), |
||||||
window.t("هفتم"), |
window.t("هفتم"), |
||||||
window.t("هشتم"), |
window.t("هشتم"), |
||||||
window.t("نهم"), |
window.t("نهم"), |
||||||
window.t("دهم"), |
window.t("دهم"), |
||||||
window.t("یازدهم"), |
window.t("یازدهم"), |
||||||
window.t("دوازدهم"), |
window.t("دوازدهم"), |
||||||
]; |
]; |
||||||
const { data } = props; |
const { data } = props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? <div className="last-qr"></div> : null} |
{window.innerWidth > 1000 ? <div className="last-qr"></div> : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<Link to={`/qr${data.link}`} className="mobile-last-qr d-flex"> |
<Link to={`/qr${data.link}`} className="mobile-last-qr d-flex"> |
||||||
<div className="mobile-last-qr__right d-flex"> |
<div className="mobile-last-qr__right d-flex"> |
||||||
<img |
<img |
||||||
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} |
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} |
||||||
alt={data.name} |
alt={data.name} |
||||||
/> |
/> |
||||||
<div className="d-flex flex-column"> |
<div className="d-flex flex-column"> |
||||||
<strong>{data.name}</strong> |
<strong>{data.name}</strong> |
||||||
<span>{grades[data.gradeId]}</span> |
<span>{grades[data.gradeId]}</span> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className="mobile-last-qr__left d-flex"> |
<div className="mobile-last-qr__left d-flex"> |
||||||
<button> |
<button> |
||||||
{window.t("صفحه")} {data.pagesNum} |
{window.t("صفحه")} {data.pagesNum} |
||||||
</button> |
</button> |
||||||
</div> |
</div> |
||||||
</Link> |
</Link> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,49 +1,49 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import QrReader from "react-qr-reader"; |
import QrReader from "react-qr-reader"; |
||||||
|
|
||||||
const facingMode = ["environment", "user"]; |
const facingMode = ["environment", "user"]; |
||||||
|
|
||||||
export default class Scanner extends Component { |
export default class Scanner extends Component { |
||||||
constructor(props) { |
constructor(props) { |
||||||
super(props); |
super(props); |
||||||
this.state = { |
this.state = { |
||||||
delay: 100, |
delay: 100, |
||||||
result: "", |
result: "", |
||||||
}; |
}; |
||||||
|
|
||||||
this.handleScan = this.handleScan.bind(this); |
this.handleScan = this.handleScan.bind(this); |
||||||
} |
} |
||||||
handleScan(data) { |
handleScan(data) { |
||||||
this.props.parent.setState({ |
this.props.parent.setState({ |
||||||
value: data, |
value: data, |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
handleError(err) { |
handleError(err) { |
||||||
console.error(err); |
console.error(err); |
||||||
} |
} |
||||||
render() { |
render() { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<QrReader |
<QrReader |
||||||
delay={300} |
delay={300} |
||||||
onError={this.handleError} |
onError={this.handleError} |
||||||
onScan={this.handleScan} |
onScan={this.handleScan} |
||||||
style={{ width: "100%" }} |
style={{ width: "100%" }} |
||||||
facingMode={facingMode[this.props.parent.state.facingMode]} |
facingMode={facingMode[this.props.parent.state.facingMode]} |
||||||
/> |
/> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<QrReader |
<QrReader |
||||||
delay={300} |
delay={300} |
||||||
onError={this.handleError} |
onError={this.handleError} |
||||||
onScan={this.handleScan} |
onScan={this.handleScan} |
||||||
style={{ width: "100%" }} |
style={{ width: "100%" }} |
||||||
facingMode={this.props.parent.state.facingMode} |
facingMode={this.props.parent.state.facingMode} |
||||||
/> |
/> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,179 +1,179 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
import Footer from "../Home/Footer/index"; |
import Footer from "../Home/Footer/index"; |
||||||
|
|
||||||
import Scanner from "./Scanner/index"; |
import Scanner from "./Scanner/index"; |
||||||
import LastQr from "./LastQr/index"; |
import LastQr from "./LastQr/index"; |
||||||
import Modal from "./Modal/index"; |
import Modal from "./Modal/index"; |
||||||
import ReplayIcon from "@material-ui/icons/Replay"; |
import ReplayIcon from "@material-ui/icons/Replay"; |
||||||
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; |
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; |
||||||
|
|
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { qr, userProduct } from "~/Redux/actions"; |
import { qr, userProduct } from "~/Redux/actions"; |
||||||
|
|
||||||
import sciense_6 from "../../assets/images/sciense-6.png"; |
import sciense_6 from "../../assets/images/sciense-6.png"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
const maxDesktopSize = 1250; |
const maxDesktopSize = 1250; |
||||||
|
|
||||||
const fontSize = { |
const fontSize = { |
||||||
desktop: { |
desktop: { |
||||||
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, |
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, |
||||||
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, |
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
class QRScan extends Component { |
class QRScan extends Component { |
||||||
state = { |
state = { |
||||||
value: null, |
value: null, |
||||||
facingMode: 0, |
facingMode: 0, |
||||||
tail: null, //"Zist10-146",
|
tail: null, //"Zist10-146",
|
||||||
}; |
}; |
||||||
componentDidMount() { |
componentDidMount() { |
||||||
console.log(this.props.myList); |
console.log(this.props.myList); |
||||||
if (!this.props.myList) this.props.getMyList({}); |
if (!this.props.myList) this.props.getMyList({}); |
||||||
} |
} |
||||||
async componentDidUpdate() { |
async componentDidUpdate() { |
||||||
if (this.state.value) { |
if (this.state.value) { |
||||||
let tail = this.state.value.slice( |
let tail = this.state.value.slice( |
||||||
this.state.value.lastIndexOf("/") + 1, |
this.state.value.lastIndexOf("/") + 1, |
||||||
this.state.value.length |
this.state.value.length |
||||||
); |
); |
||||||
// if (tail.length) this.props.info({ tail: tail });
|
// if (tail.length) this.props.info({ tail: tail });
|
||||||
this.setState({ value: null, tail: tail }); |
this.setState({ value: null, tail: tail }); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
render() { |
render() { |
||||||
const { data } = this.props; |
const { data } = this.props; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{window.innerWidth > 1000 ? ( |
{window.innerWidth > 1000 ? ( |
||||||
<> |
<> |
||||||
<div className="qr-scan d-flex flex-column align-items-center"> |
<div className="qr-scan d-flex flex-column align-items-center"> |
||||||
<Navbar /> |
<Navbar /> |
||||||
<div className="qr-scan__box d-flex flex-column"> |
<div className="qr-scan__box d-flex flex-column"> |
||||||
<header className="qr-scan__box--header d-flex flex-column"> |
<header className="qr-scan__box--header d-flex flex-column"> |
||||||
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
||||||
{window.t("نکته")} |
{window.t("نکته")} |
||||||
</h1> |
</h1> |
||||||
<p style={{ fontSize: fontSize.desktop.p }}> |
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
{window.t( |
{window.t( |
||||||
"لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار" |
"لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار" |
||||||
)} |
)} |
||||||
{window.t("دهید تا اسکن دوربین انجام شود")}{" "} |
{window.t("دهید تا اسکن دوربین انجام شود")}{" "} |
||||||
</p> |
</p> |
||||||
</header> |
</header> |
||||||
<div className="qr-scan__box--select d-flex"> |
<div className="qr-scan__box--select d-flex"> |
||||||
<select |
<select |
||||||
onChange={(e) => |
onChange={(e) => |
||||||
this.setState({ facingMode: e.target.value }) |
this.setState({ facingMode: e.target.value }) |
||||||
} |
} |
||||||
> |
> |
||||||
<option value="environment"> |
<option value="environment"> |
||||||
{window.t("دوربین عقب")} |
{window.t("دوربین عقب")} |
||||||
</option> |
</option> |
||||||
<option value="user">{window.t("دوربین جلو")}</option> |
<option value="user">{window.t("دوربین جلو")}</option> |
||||||
</select> |
</select> |
||||||
</div> |
</div> |
||||||
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> |
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> |
||||||
{this.state.value !== null ? ( |
{this.state.value !== null ? ( |
||||||
<div |
<div |
||||||
style={{ zIndex: 1000 }} |
style={{ zIndex: 1000 }} |
||||||
onClick={() => this.setState({ value: null })} |
onClick={() => this.setState({ value: null })} |
||||||
> |
> |
||||||
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||||
</div> |
</div> |
||||||
) : this.state.tail === null ? ( |
) : this.state.tail === null ? ( |
||||||
<Scanner parent={this} /> |
<Scanner parent={this} /> |
||||||
) : null} |
) : null} |
||||||
</section> |
</section> |
||||||
{this.state.tail === null ? null : ( |
{this.state.tail === null ? null : ( |
||||||
<Modal |
<Modal |
||||||
tail={this.state.tail} |
tail={this.state.tail} |
||||||
parent={this} |
parent={this} |
||||||
myList={this.props.myList} |
myList={this.props.myList} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer /> |
<Footer /> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
{window.innerWidth < 1000 ? ( |
{window.innerWidth < 1000 ? ( |
||||||
<> |
<> |
||||||
<div className="mobile-qr-scan d-flex flex-column"> |
<div className="mobile-qr-scan d-flex flex-column"> |
||||||
<Navbar page="qr-scan" /> |
<Navbar page="qr-scan" /> |
||||||
|
|
||||||
<header className="mobile-qr-scan__header d-flex flex-column"></header> |
<header className="mobile-qr-scan__header d-flex flex-column"></header> |
||||||
|
|
||||||
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> |
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> |
||||||
<FlipCameraIosIcon |
<FlipCameraIosIcon |
||||||
style={{ |
style={{ |
||||||
fontSize: 35, |
fontSize: 35, |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: 10, |
left: 10, |
||||||
top: 10, |
top: 10, |
||||||
zIndex: 100, |
zIndex: 100, |
||||||
color: "white", |
color: "white", |
||||||
}} |
}} |
||||||
onClick={() => |
onClick={() => |
||||||
this.setState({ facingMode: this.state.facingMode ? 0 : 1 }) |
this.setState({ facingMode: this.state.facingMode ? 0 : 1 }) |
||||||
} |
} |
||||||
/> |
/> |
||||||
{this.state.value !== null ? ( |
{this.state.value !== null ? ( |
||||||
<div |
<div |
||||||
style={{ zIndex: 1000 }} |
style={{ zIndex: 1000 }} |
||||||
onClick={() => this.setState({ value: null })} |
onClick={() => this.setState({ value: null })} |
||||||
> |
> |
||||||
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<Scanner parent={this} /> |
<Scanner parent={this} /> |
||||||
)} |
)} |
||||||
</section> |
</section> |
||||||
{this.state.tail === null ? null : ( |
{this.state.tail === null ? null : ( |
||||||
<Modal |
<Modal |
||||||
parent={this} |
parent={this} |
||||||
tail={this.state.tail} |
tail={this.state.tail} |
||||||
myList={this.props.myList} |
myList={this.props.myList} |
||||||
/> |
/> |
||||||
)} |
)} |
||||||
{localStorage.getItem("latestQr") ? ( |
{localStorage.getItem("latestQr") ? ( |
||||||
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
||||||
<h2>{window.t("آخرین مشاهدات")}</h2> |
<h2>{window.t("آخرین مشاهدات")}</h2> |
||||||
{data.map((item, i) => ( |
{data.map((item, i) => ( |
||||||
<LastQr |
<LastQr |
||||||
data={JSON.parse(localStorage.getItem("latestQr"))} |
data={JSON.parse(localStorage.getItem("latestQr"))} |
||||||
key={i} |
key={i} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</section> |
</section> |
||||||
) : null} |
) : null} |
||||||
</div> |
</div> |
||||||
</> |
</> |
||||||
) : null} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
export default connect( |
export default connect( |
||||||
(state) => ({ list: state.qr.list, myList: state.userProduct.myList }), |
(state) => ({ list: state.qr.list, myList: state.userProduct.myList }), |
||||||
{ |
{ |
||||||
getMyList: userProduct.myList, |
getMyList: userProduct.myList, |
||||||
info: qr.info, |
info: qr.info, |
||||||
} |
} |
||||||
)(QRScan); |
)(QRScan); |
||||||
|
|
||||||
QRScan.defaultProps = { |
QRScan.defaultProps = { |
||||||
data: [ |
data: [ |
||||||
{ |
{ |
||||||
title: "ریاضیات گسسته خیلی پیشرفته", |
title: "ریاضیات گسسته خیلی پیشرفته", |
||||||
subTitle: "پایه هفتم ابتدایی", |
subTitle: "پایه هفتم ابتدایی", |
||||||
page: 13, |
page: 13, |
||||||
image: sciense_6, |
image: sciense_6, |
||||||
}, |
}, |
||||||
], |
], |
||||||
}; |
}; |
||||||
|
|||||||
Loading…
Reference in new issue