From 7e551c5a50a5314016a389da80932b9dcd5628a8 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Wed, 12 Jan 2022 17:04:26 +0330 Subject: [PATCH] reza added (Delivery mothods && QR) --- package.json | 1 + src/assets/icons/express.svg | 13 ++ src/assets/icons/pishtaz.svg | 8 + src/assets/images/laptop.svg | 3 + src/components/Input/index.js | 6 +- src/components/Radio/index.js | 13 ++ src/components/Radio/index.scss | 58 ++++++++ src/redux/reducers/public.js | 2 +- src/router.js | 59 +++++++- src/views/DeliveryForm/Address/index.js | 61 ++++++++ src/views/DeliveryForm/PaymentMethod/index.js | 36 +++++ src/views/DeliveryForm/TransportDate/index.js | 53 +++++++ .../DeliveryForm/TransportMethod/index.js | 62 ++++++++ src/views/DeliveryForm/index.js | 140 ++++++++++++++++++ src/views/QR/Content/index.js | 18 +++ src/views/QR/Scan/index.js | 67 +++++++++ src/views/QR/index.js | 19 +++ src/views/ShoppingCart/index.js | 2 +- src/views/Videos/index.js | 21 +++ tailwind.config.js | 19 ++- yarn.lock | 34 +++++ 21 files changed, 675 insertions(+), 20 deletions(-) create mode 100644 src/assets/icons/express.svg create mode 100644 src/assets/icons/pishtaz.svg create mode 100644 src/assets/images/laptop.svg create mode 100644 src/components/Radio/index.js create mode 100644 src/components/Radio/index.scss create mode 100644 src/views/DeliveryForm/Address/index.js create mode 100644 src/views/DeliveryForm/PaymentMethod/index.js create mode 100644 src/views/DeliveryForm/TransportDate/index.js create mode 100644 src/views/DeliveryForm/TransportMethod/index.js create mode 100644 src/views/DeliveryForm/index.js create mode 100644 src/views/QR/Content/index.js create mode 100644 src/views/QR/Scan/index.js create mode 100644 src/views/QR/index.js create mode 100644 src/views/Videos/index.js 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 (
+ ); +} diff --git a/src/components/Radio/index.scss b/src/components/Radio/index.scss new file mode 100644 index 0000000..de5fa7d --- /dev/null +++ b/src/components/Radio/index.scss @@ -0,0 +1,58 @@ +$color1: #f4f4f4; +$color2: #3197EE; + +.radio { + input[type="radio"] { + position: absolute; + opacity: 0; + + .radio-label { + &:before { + content: ''; + background: $color1; + border-radius: 100%; + border: 1px solid darken($color1, 25%); + display: inline-block; + width: 1.4em; + height: 1.4em; + position: relative; + vertical-align: top; + margin-left: 0.5em; + cursor: pointer; + text-align: center; + transition: all 250ms ease; + } + } + &:checked { + + .radio-label { + &:before { + background-color: $color2; + box-shadow: inset 0 0 0 4px $color1; + } + } + } + &:focus { + + .radio-label { + &:before { + outline: none; + border-color: $color2; + } + } + } + &:disabled { + + .radio-label { + &:before { + box-shadow: inset 0 0 0 4px $color1; + border-color: darken($color1, 25%); + background: darken($color1, 25%); + } + } + } + + .radio-label { + &:empty { + &:before { + margin-right: 0; + } + } + } + } + } \ No newline at end of file diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index fc44f00..529f38e 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -1,7 +1,7 @@ import location from "../../utils/location"; const initialState = { - isDark: localStorage.getItem("isDark") || true, + isDark: localStorage.getItem("isDark") || false, homeData: [], newProducts: [], levels: [], diff --git a/src/router.js b/src/router.js index 4d7bd76..d60c620 100644 --- a/src/router.js +++ b/src/router.js @@ -11,6 +11,9 @@ import Auth from "./views/Auth"; import Products from "./views/Products"; import Product from "./views/Product"; import ShoppingCart from "./views/ShoppingCart"; +import DeliveryForm from "./views/DeliveryForm"; +import Videos from "./views/Videos"; +import QR from "./views/QR"; // import VideoTube from "./views/Home/VideoTube"; function Router({ isDark, isLogin, headerOptions }) { @@ -73,6 +76,23 @@ function Router({ isDark, isLogin, headerOptions }) { exact element={} /> + + } + /> } /> + + } + /> + + } + /> { + 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"