diff --git a/package.json b/package.json
index 1f8662d..2187fc3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-modern-drawer": "^1.0.1",
+ "react-qr-reader": "^2.2.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
diff --git a/src/assets/icons/express.svg b/src/assets/icons/express.svg
new file mode 100644
index 0000000..453faa3
--- /dev/null
+++ b/src/assets/icons/express.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/assets/icons/pishtaz.svg b/src/assets/icons/pishtaz.svg
new file mode 100644
index 0000000..5afc40a
--- /dev/null
+++ b/src/assets/icons/pishtaz.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/assets/images/laptop.svg b/src/assets/images/laptop.svg
new file mode 100644
index 0000000..aefcf12
--- /dev/null
+++ b/src/assets/images/laptop.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 5737dcb..4d3c6d4 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -47,14 +47,14 @@ export default function Input(props) {
return (
{
+ return (
+
+ );
+ };
+ return (
+
+ انتخاب آدرس
+
+ {addresses.map((address, index) => (
+
+ ))}
+
+
+
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({
+ isDark: state.publicApi.isDark,
+});
+
+export default connect(mapStateToProps)(Address);
diff --git a/src/views/DeliveryForm/PaymentMethod/index.js b/src/views/DeliveryForm/PaymentMethod/index.js
new file mode 100644
index 0000000..43961ee
--- /dev/null
+++ b/src/views/DeliveryForm/PaymentMethod/index.js
@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+function PaymentMethods({ paymentMethods, isDark }) {
+ const [activeMethod, setActiveMactiveMethod] = useState(paymentMethods[0]);
+ const Method = ({ method }) => {
+ return (
+
+ );
+ };
+ return (
+
+ انتخاب شیوه پرداخت
+
+ {paymentMethods.map((method, index) => (
+
+ ))}
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({
+ isDark: state.publicApi.isDark,
+});
+
+export default connect(mapStateToProps)(PaymentMethods);
diff --git a/src/views/DeliveryForm/TransportDate/index.js b/src/views/DeliveryForm/TransportDate/index.js
new file mode 100644
index 0000000..97046f0
--- /dev/null
+++ b/src/views/DeliveryForm/TransportDate/index.js
@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import Button from "../../../components/Button";
+import Radio from "../../../components/Radio";
+
+function TransportDate({ transportDate, isDark }) {
+ const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
+ const Time = ({ time }) => {
+ return (
+
+ );
+ };
+ return (
+
+ زمان ارسال را انتخاب کنید
+
+ {transportDate.times.map((time, index) => (
+
+ ))}
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({
+ isDark: state.publicApi.isDark,
+});
+
+export default connect(mapStateToProps)(TransportDate);
diff --git a/src/views/DeliveryForm/TransportMethod/index.js b/src/views/DeliveryForm/TransportMethod/index.js
new file mode 100644
index 0000000..552e65d
--- /dev/null
+++ b/src/views/DeliveryForm/TransportMethod/index.js
@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import Button from "../../../components/Button";
+import Radio from "../../../components/Radio";
+
+function TransportMethod({ transportMethods, isDark }) {
+ const [activeMethod, setActiveMethod] = useState(transportMethods[0]);
+ const Method = ({ method }) => {
+ return (
+
+ );
+ };
+ return (
+
+
+ لطفا یک روش ارسال انتخاب کنید
+
+
+ {transportMethods.map((method, index) => (
+
+ ))}
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({
+ isDark: state.publicApi.isDark,
+});
+
+export default connect(mapStateToProps)(TransportMethod);
diff --git a/src/views/DeliveryForm/index.js b/src/views/DeliveryForm/index.js
new file mode 100644
index 0000000..0633146
--- /dev/null
+++ b/src/views/DeliveryForm/index.js
@@ -0,0 +1,140 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { publicApi, userFactor } from "../../redux/actions";
+import Address from "./Address";
+import TransportMethod from "./TransportMethod";
+import TransportDate from "./TransportDate";
+import PaymentMethods from "./PaymentMethod";
+//assets
+import ExpressIcon from "../../assets/icons/express.svg";
+import PishtazIcon from "../../assets/icons/pishtaz.svg";
+
+const PriceStatus = ({ name, value, type, isDark }) => {
+ return (
+
+ {name}
+
+ {value + " " + "تومان"}
+
+
+ );
+};
+
+export const DeliveryForm = ({
+ setHeaderOptions,
+ headerOptions,
+ form,
+ factorInfo,
+ getFactorInfo,
+ userId,
+ isDark,
+}) => {
+ useEffect(() => {
+ setHeaderOptions(headerOptions);
+ getFactorInfo({ userId });
+ setHeaderOptions(headerOptions);
+ }, []);
+ return (
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ factorInfo: state.userFactor.info,
+ userId: state.user.status.id,
+ isDark: state.publicApi.isDark,
+});
+
+const mapDispatchToProps = {
+ setHeaderOptions: publicApi.setHeaderOptions,
+ getFactorInfo: userFactor.info,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(DeliveryForm);
+
+DeliveryForm.defaultProps = {
+ form: {
+ addresses: [
+ {
+ address:
+ " تهران میدان احمد آباد خیابان شریعتی بعد از میدان فجر بن بست شکوفه پلاک 4 زنگ 12",
+ receiver: "احمد نام آور",
+ postalCode: "54352432",
+ cellphone: "09123456789",
+ },
+ ],
+ transportMethods: [
+ {
+ name: "ارسال اکسپرس مخصوص شهر تهران",
+ cost: "25.000",
+ icon: ExpressIcon,
+ },
+ {
+ name: "ارسال با پست پیشتاز",
+ cost: "25.000",
+ icon: PishtazIcon,
+ },
+ ],
+ transportDate: {
+ day: new Date(),
+ times: [
+ {
+ time: "ساعت 9 تا 12",
+ status: "completed",
+ },
+ {
+ time: "ساعت 12 تا 15",
+ status: "free",
+ },
+ {
+ time: "ساعت 15 تا 18",
+ status: "free",
+ },
+ ],
+ },
+ paymentMethods: [
+ {
+ name: "پرداخت آنلاین با کلیه کارتهای عضو شبکه شتاب",
+ },
+ {
+ name: "پرداخت در محل",
+ },
+ ],
+ },
+};
diff --git a/src/views/QR/Content/index.js b/src/views/QR/Content/index.js
new file mode 100644
index 0000000..8018950
--- /dev/null
+++ b/src/views/QR/Content/index.js
@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { publicApi } from "../../../redux/actions";
+
+export const Content = ({ headerOptions, setHeaderOptions, setPage }) => {
+ useEffect(() => {
+ setHeaderOptions(headerOptions);
+ });
+ return ;
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+ setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Content);
diff --git a/src/views/QR/Scan/index.js b/src/views/QR/Scan/index.js
new file mode 100644
index 0000000..078ab2a
--- /dev/null
+++ b/src/views/QR/Scan/index.js
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { publicApi } from "../../../redux/actions";
+import { useNavigate } from "react-router-dom";
+import Scanner from "react-qr-reader";
+import laptopImage from "../../../assets/images/laptop.svg";
+
+const facingMode = ["environment", "user"];
+
+export const Scan = ({ headerOptions, setHeaderOptions, setPage }) => {
+ const navigation = useNavigate();
+ const [result, setResult] = useState("");
+
+ const handleScan = (data) => {
+ setResult(data);
+ };
+
+ const handleError = (err) => {
+ console.error(err);
+ };
+
+ useEffect(() => {
+ setHeaderOptions(headerOptions);
+ });
+
+ return (
+
+ {!result && (
+
+
+
+
+
+ اسکن کد QR فعالسازی کتاب
+
+
+ کد کیو آر روی کارت فعالسازی را با دوربین گوشی اسکن کنید تا محتوای
+ دیجیتال مربوط به کتاب برای شما فعال شود
+
+
+
+ )}
+
+ );
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+ setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Scan);
diff --git a/src/views/QR/index.js b/src/views/QR/index.js
new file mode 100644
index 0000000..53d597a
--- /dev/null
+++ b/src/views/QR/index.js
@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import Scan from "./Scan";
+import Content from "./Content";
+
+function QR({ headerOptions, page }) {
+ const [currentPage, setCurrentPage] = useState(page);
+ return (
+ <>
+ {page === "scan" && (
+
+ )}
+ {page === "content" && (
+
+ )}
+ >
+ );
+}
+
+export default QR;
diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js
index 43ee53a..5cbc114 100644
--- a/src/views/ShoppingCart/index.js
+++ b/src/views/ShoppingCart/index.js
@@ -15,7 +15,7 @@ const PriceStatus = ({ name, value, type, isDark }) => {
{name}
{
+ return (
+ <>>
+ );
+};
+
+const mapStateToProps = (state) => ({
+
+});
+
+const mapDispatchToProps = {
+
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Videos);
diff --git a/tailwind.config.js b/tailwind.config.js
index 306a9fc..ec38512 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
blueEB: "#2B8DEB",
blueFF: "#E8FCFF",
blueFF1: "#E9F0FF",
+ blueFD: "#F6F9FD",
redFF: "#FFE6E6",
redFF1: "#FF2020",
yellow2: "#FDFFDA",
@@ -18,9 +19,10 @@ module.exports = {
orange1: "#FF6600",
green1: "#00FF80",
gray20: "#202020",
- gray2077 : "#20202077",
+ gray2077: "#20202077",
gray2C: "#2C2C2C",
gray36: "#363636",
+ gray50: "#505050",
grayDB: "#DBDBDB",
grayE3: "#E3E3E3",
grayEE: "#EEEEEE",
@@ -33,27 +35,28 @@ module.exports = {
blueE8: "#2E81E8",
blue52: "#132F52",
blue5F: "#05335F",
- blueB9 : "#86A0B9",
+ blueB9: "#86A0B9",
green71: "#067182",
greenBA: "#06BACE",
red5F: "#5F1A05",
yellow1: "#5F5F05",
gray1: "#333333",
- gray70 : "#707070",
- grayDB : '#DBDBDB'
+ gray70: "#707070",
+ grayDB: "#DBDBDB",
}),
borderColor: (theme) => ({
...theme("colors"),
blueC0: "#196EC0",
blueFE: "#C1E0FE",
+ blueB9: '#86A0B9',
grayDB: "#DBDBDB",
- gray45 : '#454545'
+ gray45: "#454545",
}),
fill: (theme) => ({
...theme("colors"),
- blueC0 : '#196EC0',
- grayDF : '#DFDFDF',
- greenBA : '#06BACE'
+ blueC0: "#196EC0",
+ grayDF: "#DFDFDF",
+ greenBA: "#06BACE",
}),
extend: {
borderRadius: {
diff --git a/yarn.lock b/yarn.lock
index f0ca4ef..ab1f071 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7045,6 +7045,11 @@ jsonfile@^6.0.1:
optionalDependencies:
graceful-fs "^4.1.6"
+jsqr@^1.2.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.4.0.tgz#8efb8d0a7cc6863cb6d95116b9069123ce9eb2d1"
+ integrity sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==
+
"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
@@ -9427,6 +9432,15 @@ react-modern-drawer@^1.0.1:
resolved "https://registry.yarnpkg.com/react-modern-drawer/-/react-modern-drawer-1.0.1.tgz#a400c551216b3dffadf93e80f7cc313d30434d13"
integrity sha512-Stswd8ETIRTGLJl7aFtu92kXb+7UCPn2mzTvpGWsE1kMXco3dK+PZyw/4NGGwDpesZvwPsz3PFlO1BuVqBZpCg==
+react-qr-reader@^2.2.1:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/react-qr-reader/-/react-qr-reader-2.2.1.tgz#dc89046d1c1a1da837a683dd970de5926817d55b"
+ integrity sha512-EL5JEj53u2yAOgtpAKAVBzD/SiKWn0Bl7AZy6ZrSf1lub7xHwtaXe6XSx36Wbhl1VMGmvmrwYMRwO1aSCT2fwA==
+ dependencies:
+ jsqr "^1.2.0"
+ prop-types "^15.7.2"
+ webrtc-adapter "^7.2.1"
+
react-redux@^7.2.6:
version "7.2.6"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
@@ -9962,6 +9976,13 @@ rsvp@^4.8.4:
resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+rtcpeerconnection-shim@^1.2.15:
+ version "1.2.15"
+ resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243"
+ integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==
+ dependencies:
+ sdp "^2.6.0"
+
run-async@^2.4.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -10102,6 +10123,11 @@ screenfull@^5.0.0:
resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+sdp@^2.12.0, sdp@^2.6.0:
+ version "2.12.0"
+ resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"
+ integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==
+
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -11625,6 +11651,14 @@ webpack@4.44.2:
watchpack "^1.7.4"
webpack-sources "^1.4.1"
+webrtc-adapter@^7.2.1:
+ version "7.7.1"
+ resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz#b2c227a6144983b35057df67bd984a7d4bfd17f1"
+ integrity sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==
+ dependencies:
+ rtcpeerconnection-shim "^1.2.15"
+ sdp "^2.12.0"
+
websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
version "0.7.4"
resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"