From 5c7046df040c434cd8d9803507c490d36c9fa07b Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sun, 6 Feb 2022 15:59:35 +0330 Subject: [PATCH] reza added something --- src/components/Input/index.js | 2 +- src/components/VodProduct/index.js | 15 +- src/redux/actions/index.js | 1 + src/redux/actions/user.js | 4 +- src/redux/actions/userAddress.js | 33 ++++ src/redux/reducers/index.js | 1 + src/redux/reducers/user.js | 2 +- src/redux/reducers/userAddress.js | 35 ++++ src/utils/onInput.js | 30 ++-- src/views/Address/index.js | 61 +++++++ src/views/Auth/Profile/index.js | 15 +- src/views/Auth/SignUp/index.js | 26 +-- src/views/DeliveryForm/Address/index.js | 4 +- src/views/DeliveryForm/index.js | 12 +- src/views/Home/Desktop/index.js | 15 +- src/views/Products/index.js | 25 +-- src/views/Products/layouts/Main.js | 21 +-- src/views/ShoppingCart/index.js | 205 ++++++++++++++---------- src/views/Video/index.js | 8 +- src/views/VideoDisplay/index.js | 2 +- 20 files changed, 349 insertions(+), 168 deletions(-) create mode 100644 src/redux/actions/userAddress.js create mode 100644 src/redux/reducers/userAddress.js create mode 100644 src/views/Address/index.js diff --git a/src/components/Input/index.js b/src/components/Input/index.js index 7c3e46e..f8be420 100644 --- a/src/components/Input/index.js +++ b/src/components/Input/index.js @@ -49,7 +49,7 @@ export default function Input(props) { return (
diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js index 6303f76..fcbe2f1 100644 --- a/src/components/VodProduct/index.js +++ b/src/components/VodProduct/index.js @@ -1,5 +1,6 @@ import React, { useEffect, useState } from "react"; import {Link} from 'react-router-dom'; +import separate from '../../utils/separate'; import StarRating from "../StarRating"; import ReactTooltip from "react-tooltip"; @@ -67,7 +68,7 @@ const VodProduct = ({ <> {/* product UI Design */} @@ -144,9 +145,9 @@ const VodProduct = ({ {"دوره ویدیویی" + " " + video?.name} {console.log(video?.gradeId)} - + {/* { 'پایه' + ' ' + grades[video?.gradeId]} - + */}
{productContent && (

)} */} - {/*

- {video?.price} + {separate(video?.price) + ' '} تومان -

*/} +

{/* add to cart */} {addToCartHolder && ( diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js index cc0da2a..d6f4ab0 100644 --- a/src/redux/actions/index.js +++ b/src/redux/actions/index.js @@ -6,6 +6,7 @@ export { default as blog } from "./blog"; export { default as product } from "./product"; export { default as userFactor } from "./userFactor"; export { default as userProduct } from "./userProduct"; +export { default as userAddress } from "./userAddress"; export { default as content } from "./content"; export { default as faq } from "./faq"; export { default as file } from "./file"; diff --git a/src/redux/actions/user.js b/src/redux/actions/user.js index 31fe949..b470f8f 100644 --- a/src/redux/actions/user.js +++ b/src/redux/actions/user.js @@ -1,11 +1,11 @@ import proxy from "../proxy"; const user = { - otp: (data) => async (dispatch) => + otp: (data = {}) => async (dispatch) => await proxy.post("public/sendOTP", data, { dispatch }), otp_login: (data) => async (dispatch) => - await proxy.login("user/otp/login", data, { dispatch }), + await proxy.login("user/otp/login", data, { dispatch }), //{cellphone, otp} login: (data) => async (dispatch) => await proxy.login("user/login", data, { dispatch }), diff --git a/src/redux/actions/userAddress.js b/src/redux/actions/userAddress.js new file mode 100644 index 0000000..fc5e4cb --- /dev/null +++ b/src/redux/actions/userAddress.js @@ -0,0 +1,33 @@ +import proxy from "../proxy"; +const userAddress = { + list: + (data = {}) => + async (dispatch) => { + await proxy.get("userAddress/list", data, { dispatch }); + }, + info: + (data = {}) => + async (dispatch) => { + await dispatch({ type: "userAddress/info", data }); + }, + update: + (data = {}, data2 = {}) => + async (dispatch) => { + await proxy.put("userAddress/update", data); + await proxy.get("userAddress/list", data2, { dispatch }); + }, + add: + (data = {}, data2 = {}, data3 = {}) => + async (dispatch) => { + await proxy.post("userAddress/add", data, { dispatch }); + await proxy.get("userAddress/list", data2, { dispatch }); + }, + del: + (data = {}, data2 = {}) => + async (dispatch) => { + await proxy.delete("userAddress/delete", data); + await proxy.get("userAddress/list", data2, { dispatch }); + }, +}; + +export default userAddress; diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 584b6eb..c84ef6b 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -4,6 +4,7 @@ export { default as user } from "./user"; export { default as book } from "./book"; export { default as blog } from "./blog"; export { default as product } from "./product"; +export { default as userAddress } from "./userAddress"; export { default as faq } from "./faq"; export { default as file } from "./file"; export { default as userFactor } from "./userFactor"; diff --git a/src/redux/reducers/user.js b/src/redux/reducers/user.js index 3b6ff71..dc1b4b8 100644 --- a/src/redux/reducers/user.js +++ b/src/redux/reducers/user.js @@ -19,7 +19,7 @@ export default function user(state = initialState, action) { // case "user/register": // case "user/switchRole": case "public/sendOTP": - return { ...state, loading: false, status: data.profile, error: null }; + return { ...state, loading: false, error: null }; case "user/login": case "user/otp/login": return { diff --git a/src/redux/reducers/userAddress.js b/src/redux/reducers/userAddress.js new file mode 100644 index 0000000..f866776 --- /dev/null +++ b/src/redux/reducers/userAddress.js @@ -0,0 +1,35 @@ +import { toast } from "react-toastify"; + +const initialState = { + loading: false, + error: null, + list: [], + info : null, +}; +export default function userAddress(state = initialState, action) { + let { type, data } = action; + switch (type) { + case "userAddress/list": + return { + ...state, + loading: false, + list: data, + error: null, + }; + case "userAddress/info": + return { ...state, loading: false, info: data, error: null }; + case "userAddress/update": + return { ...state, loading: false, error: null }; + case "userAddress/add": + return { ...state, loading: false, error: null, sum: data.payPrice }; + case "userAddress/delete": + return { ...state, loading: false, error: null }; + case "userAddress/loading": + return { ...state, loading: true }; + case "userAddress/error": + toast.error(data.message); + return { ...state, loading: false, error: data.message }; + default: + return state; + } +} diff --git a/src/utils/onInput.js b/src/utils/onInput.js index 0a45958..c9867d3 100644 --- a/src/utils/onInput.js +++ b/src/utils/onInput.js @@ -80,16 +80,16 @@ class onInput { englishAndNumberWithoutSpace = (txt) => { let newText = txt; newText = newText.replace(/`/g, ""); - newText = newText.replace(/0/g, "0"); - newText = newText.replace(/1/g, "1"); - newText = newText.replace(/2/g, "2"); - newText = newText.replace(/3/g, "3"); - newText = newText.replace(/4/g, "4"); - newText = newText.replace(/5/g, "5"); - newText = newText.replace(/6/g, "6"); - newText = newText.replace(/7/g, "7"); - newText = newText.replace(/8/g, "8"); - newText = newText.replace(/9/g, "9"); + newText = newText.replace(/۰/g, "0"); + newText = newText.replace(/۱/g, "1"); + newText = newText.replace(/۲/g, "2"); + newText = newText.replace(/۳/g, "3"); + newText = newText.replace(/۴/g, "4"); + newText = newText.replace(/۵/g, "5"); + newText = newText.replace(/۶/g, "6"); + newText = newText.replace(/۷/g, "7"); + newText = newText.replace(/۸/g, "8"); + newText = newText.replace(/۹/g, "9"); newText = newText.replace(/ا/g, ""); newText = newText.replace(/ب/g, ""); newText = newText.replace(/پ/g, ""); @@ -149,6 +149,16 @@ class onInput { newText = newText.replace(/7/g, "7"); newText = newText.replace(/8/g, "8"); newText = newText.replace(/9/g, "9"); + newText = newText.replace(/۰/g, "0"); + newText = newText.replace(/۱/g, "1"); + newText = newText.replace(/۲/g, "2"); + newText = newText.replace(/۳/g, "3"); + newText = newText.replace(/۴/g, "4"); + newText = newText.replace(/۵/g, "5"); + newText = newText.replace(/۶/g, "6"); + newText = newText.replace(/۷/g, "7"); + newText = newText.replace(/۸/g, "8"); + newText = newText.replace(/۹/g, "9"); newText = newText.replace(/ا/g, ""); newText = newText.replace(/ب/g, ""); newText = newText.replace(/پ/g, ""); diff --git a/src/views/Address/index.js b/src/views/Address/index.js new file mode 100644 index 0000000..d24dcae --- /dev/null +++ b/src/views/Address/index.js @@ -0,0 +1,61 @@ +import React, {useState} from "react"; +import { connect } from "react-redux"; + +import Input from "../../components/Input"; + +export const Address = ({}) => { + const [addressFields, setAddressFields] = useState({}); + const onChange = (name, value) => { + + } + + const Header = ({ title, text }) => { + return ( +
+ {title} +

{text}

+
+ ); + }; + return ( +
+
+
+
+
+ val} + name="firstName" + onChange={(name, value) => onChange(name, value)} + value={addressFields?.firstName} + align="text-right" + direction="rtl" + /> + val} + name="lastName" + onChange={(name, value) => onChange(name, value)} + value={addressFields?.lastName} + align="text-right" + direction="rtl" + /> +
+
+
+ ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Address); diff --git a/src/views/Auth/Profile/index.js b/src/views/Auth/Profile/index.js index 5123ebb..062a843 100644 --- a/src/views/Auth/Profile/index.js +++ b/src/views/Auth/Profile/index.js @@ -13,8 +13,8 @@ import Birthdate from "./Birthdate"; import MultipleSelector from "./MultipleSelector"; import Document from "./Document"; - function Profile({ + isMobile, profile, uploads, getProvince, @@ -187,7 +187,7 @@ function Profile({ // if (setDone) return ; - return ( + return isMobile ? (
@@ -419,6 +419,16 @@ function Profile({
+ ) : ( + ); } @@ -431,6 +441,7 @@ export default connect( uploads: state.file.uploads, provinceList: state.publicApi.province, cityList: state.publicApi.city, + isMobile: state.publicApi.isMobile, }), { getProfile: user.getProfile, diff --git a/src/views/Auth/SignUp/index.js b/src/views/Auth/SignUp/index.js index 8e6ae30..a47d664 100644 --- a/src/views/Auth/SignUp/index.js +++ b/src/views/Auth/SignUp/index.js @@ -21,7 +21,7 @@ function SignUp({ setHeaderOptions, }) { const [level, setLevel] = useState("phonenumber"); - const [signUpFields, setSignUpFiels] = useState({}); + const [signUpFields, setSignUpFiels] = useState({}); const [error, setError] = useState(""); const [resend, setResend] = useState(false); const navigate = useNavigate(); @@ -152,7 +152,7 @@ function SignUp({ onChange(name, value)} value={signUpFields?.cellphone} align="text-center" @@ -241,7 +241,7 @@ function SignUp({ onChange={(e) => onChange( e.target.name, - (e.target.value = onInput.numberOnly(e.target.value)) + (e.target.value = onInput.englishAndNumberWithoutSpace(e.target.value)) ) } maxlength="1" @@ -276,13 +276,17 @@ function SignUp({ ); } +const mapStateToProps = (state) => ({ + loginFlag : state.user.status, +}); + +const mapDispatchToProps = { + sendOtp: user.otp_login, + sendPhoneNumber: user.otp, + setHeaderOptions: publicApi.setHeaderOptions, +}; + export default connect( - (state) => ({ - loginFlag: state.user.status, - }), - { - sendOtp: user.otp_login, - sendPhoneNumber: user.otp, - setHeaderOptions: publicApi.setHeaderOptions, - } + mapStateToProps, + mapDispatchToProps )(SignUp); diff --git a/src/views/DeliveryForm/Address/index.js b/src/views/DeliveryForm/Address/index.js index f24c52f..31a125b 100644 --- a/src/views/DeliveryForm/Address/index.js +++ b/src/views/DeliveryForm/Address/index.js @@ -3,7 +3,7 @@ import { connect } from "react-redux"; import Button from "../../../components/Button"; import Radio from "../../../components/Radio"; -function Address({ addresses, isDark, isMobile }) { +function Address({ addresses, isDark, isMobile, setPhase }) { const [activeAddress, setActiveAddress] = useState(addresses[0]); const Location = ({ address }) => { return isMobile ? ( @@ -97,7 +97,7 @@ function Address({ addresses, isDark, isMobile }) { bgOpacity="bg-opacity-100" width="100%" color={isDark ? "text-white" : "text-gray70"} - onClick={() => {}} + onClick={() => setPhase("address")} /> diff --git a/src/views/DeliveryForm/index.js b/src/views/DeliveryForm/index.js index a30dfb5..bccbf96 100644 --- a/src/views/DeliveryForm/index.js +++ b/src/views/DeliveryForm/index.js @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { connect } from "react-redux"; -import { publicApi, userFactor } from "../../redux/actions"; +import { publicApi, userFactor, userAddress } from "../../redux/actions"; import Address from "./Address"; import TransportMethod from "./TransportMethod"; import TransportDate from "./TransportDate"; @@ -10,6 +10,8 @@ import ExpressIcon from "../../assets/icons/express.svg"; import PishtazIcon from "../../assets/icons/pishtaz.svg"; export const DeliveryForm = ({ + getList, + list, setHeaderOptions, headerOptions, form, @@ -18,13 +20,14 @@ export const DeliveryForm = ({ userId, isDark, isMobile, + setPhase, }) => { useEffect(() => { if (isMobile) { setHeaderOptions(headerOptions); } - getFactorInfo({ userId }); + getList(); }, []); const PriceStatus = ({ name, value, type }) => { @@ -82,7 +85,7 @@ export const DeliveryForm = ({ 1 -
+
@@ -105,11 +108,14 @@ const mapStateToProps = (state) => ({ userId: state.user.status.id, isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, + list : state.userAddress.list + }); const mapDispatchToProps = { setHeaderOptions: publicApi.setHeaderOptions, getFactorInfo: userFactor.info, + getList: userAddress.list }; export default connect(mapStateToProps, mapDispatchToProps)(DeliveryForm); diff --git a/src/views/Home/Desktop/index.js b/src/views/Home/Desktop/index.js index 62ce890..fc08c4c 100644 --- a/src/views/Home/Desktop/index.js +++ b/src/views/Home/Desktop/index.js @@ -5,14 +5,14 @@ import filterIcon from "../../../assets/images/vuesax-linear-filter-tick.svg"; import Banners from "../../../components/Banners"; import SalesContainer from "./SalesContainer"; -import { book, publicApi } from "../../../redux/actions"; +import { book, publicApi, product } from "../../../redux/actions"; import Part2 from "./Part2"; import HomeImg from "../../../assets/images/HomeImg.png"; import Part4 from "./Part4"; import Design2D from "../../../components/Design2D"; import { get } from "lodash"; -const DesktopHome = ({ grades, getList, books }) => { +const DesktopHome = ({ grades, getBooks, books, getVODs, listVOD }) => { const banners = [ { flex: 4, @@ -56,7 +56,8 @@ const DesktopHome = ({ grades, getList, books }) => { ]; useEffect(() => { - getList(); + getBooks(); + getVODs(); },[]); return ( @@ -75,7 +76,7 @@ const DesktopHome = ({ grades, getList, books }) => {
- +
); }; @@ -86,11 +87,13 @@ const mapStateToProps = (state) => ({ books: state.book.list, gradeFilterBooks: state.book.gradeFilterBooks, selectedGrade: state.book.selectedGrade, - grades: state.publicApi.grades + grades: state.publicApi.grades, + listVOD: state.product.listVOD }); const mapDispatchToProps = { - getList: book.list, + getBooks: book.list, + getVODs: product.listVOD, gradeFilter: book.gradeFilter, setHeaderOptions: publicApi.setHeaderOptions, }; diff --git a/src/views/Products/index.js b/src/views/Products/index.js index 8c448e6..4ec5831 100644 --- a/src/views/Products/index.js +++ b/src/views/Products/index.js @@ -5,12 +5,14 @@ import Search from "../../components/Search"; import Select from "../../components/Select"; import Sidebar from "./layouts/Sidebar"; import Main from "./layouts/Main"; -import { book, publicApi } from "../../redux/actions"; +import { book, publicApi, product } from "../../redux/actions"; //assets import searchLight from "../../assets/icons/search-light.svg"; export const Products = ({ + getVODs, + listVOD, isDark, isMobile, books, @@ -23,21 +25,19 @@ export const Products = ({ headerOptions, desktopContentTransform, }) => { - - const [filter, setFilter] = useState({ search: "", grade: "", productsType: "کتاب", }); - const onChange = (name, value) => { setFilter({ ...filter, [name]: value }); }; useEffect(() => { getList(); + getVODs(); setHeaderOptions(headerOptions); }, []); @@ -45,8 +45,6 @@ export const Products = ({ gradeFilter(filter.grade); }, [filter]); - - const Product = ({ productsType, product, index }) => { return ( <> @@ -80,7 +78,7 @@ export const Products = ({ {product?.name} @@ -149,7 +147,6 @@ export const Products = ({ /> )) : books?.map((product, index) => ( -
- -
+ +
)} @@ -178,6 +181,7 @@ const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, books: state.book.list, + listVOD: state.product.listVOD, grades: state.publicApi.grades, gradeFilterBooks: state.book.gradeFilterBooks, selectedGrade: state.book.selectedGrade, @@ -188,6 +192,7 @@ const mapDispatchToProps = { getList: book.list, gradeFilter: book.gradeFilter, setHeaderOptions: publicApi.setHeaderOptions, + getVODs: product.listVOD, }; export default connect(mapStateToProps, mapDispatchToProps)(Products); diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Main.js index 7ee9b89..c5fb540 100644 --- a/src/views/Products/layouts/Main.js +++ b/src/views/Products/layouts/Main.js @@ -6,11 +6,12 @@ import { Carousel } from "@trendyol-js/react-carousel"; import filterIcon from "../../../assets/images/vuesax-linear-filter-tick.svg"; import Product from "../../../components/Product"; import VodProduct from "../../../components/VodProduct"; -import { book, publicApi } from "../../../redux/actions"; +import { book, publicApi, product } from "../../../redux/actions"; import posterImage from "../../../assets/images/poster.svg"; import arrow from "../../../assets/icons/slider-arrow.svg"; export const Main = ({ + listVOD, books, grades, gradeFilter, @@ -61,7 +62,7 @@ export const Main = ({ ))} - {books?.length > 0 && ( + {listVOD?.length > 0 && (
} > - {books?.map((video, index) => ( + {listVOD?.map((video, index) => ( ( )) @@ -145,14 +135,13 @@ Main.defaultProps = { const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, - books: state.book.list, - grades: state.publicApi.grades, }); const mapDispatchToProps = { getList: book.list, gradeFilter: book.gradeFilter, setHeaderOptions: publicApi.setHeaderOptions, + getVODs: product.listVOD, }; export default connect(mapStateToProps, mapDispatchToProps)(Main); diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js index 2b1f66b..b1e15d4 100644 --- a/src/views/ShoppingCart/index.js +++ b/src/views/ShoppingCart/index.js @@ -3,10 +3,12 @@ import { userProduct, userFactor, publicApi } from "../../redux/actions"; import DeliveryForm from "../DeliveryForm"; import Product from "./Product"; +import Address from "../Address"; import Code from "./Code"; import Button from "../../components/Button"; //assets +import dropdownIcon from "../../assets/icons/dropdown-blue.svg"; import alertIcon from "../../assets/icons/alert.svg"; import { connect } from "react-redux"; @@ -17,7 +19,7 @@ function ShoppingCart({ list, payPrice, factorInfo, - userId, + user, hasPhysical, getList, getInfo, @@ -31,10 +33,19 @@ function ShoppingCart({ useEffect(() => { getList(); - getFactorInfo({ userId }); + getFactorInfo({ userId: user?.id }); setHeaderOptions(headerOptions); }, []); + const next = { + products: () => setPhase("deliveryForm"), + deliveryForm: () => console.log("Go to shaparak"), + profile: () => { + console.log("Set profile"); + console.log("Go to shaparak"); + }, + }; + const Table = () => { return (
@@ -50,9 +61,10 @@ function ShoppingCart({
    - {list.map((product, index) => product.condition < 2 && ( - - ))} + {list.map( + (product, index) => + product.condition < 2 && + )}
); @@ -96,6 +108,12 @@ function ShoppingCart({ ); }; + const layouts = { + products: , + deliveryForm: , + address:
, + }; + return isMobile ? (
{list.map((product, index) => ( @@ -147,95 +165,104 @@ function ShoppingCart({
) : (
-
- {phase === "products" &&
} - {phase === "delivery-form" && } - -
-
- - - -
-
- - جمع کل سبد خرید - -

- {factorInfo?.payPrice} - تومان -

-
- {phase === "products" && ( -
- -

- هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود -

-
- )} - {phase === "delivery-form" && ( -
- - انتخاب شیوه پرداخت - -
- )} - -
+
+ + جمع کل سبد خرید + +

+ {factorInfo?.payPrice} + + تومان + +

+
+ {phase === "products" && ( +
+ +

+ هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود +

+
+ )} + {phase === "deliveryForm" && ( +
+ + انتخاب شیوه پرداخت + +
+ )} + + )} + + )} ); } @@ -246,7 +273,7 @@ const mapStateToProps = (state) => ({ list: state.userProduct.list, payPrice: state.userProduct.sum, factorInfo: state.userFactor.info, - userId: state.user.status.id, + user: state.user.status, hasPhysical: state.userProduct.hasPhysical, desktopContentTransform: state.publicApi.desktopContentTransform, }); diff --git a/src/views/Video/index.js b/src/views/Video/index.js index 8c6e6e8..1335e04 100644 --- a/src/views/Video/index.js +++ b/src/views/Video/index.js @@ -68,15 +68,9 @@ function Video({ const [type, setType] = useState(0); useEffect(() => { - getBook({ bookId: Number(location.getId()) }); + getBook({ bookId: location.getId() }); setHeaderOptions(headerOptions); }, []); - - useEffect(() => { - if (book) { - // console.log(book); - } - }, [book]); return isMobile ? (
diff --git a/src/views/VideoDisplay/index.js b/src/views/VideoDisplay/index.js index 8d2d199..31a3e39 100644 --- a/src/views/VideoDisplay/index.js +++ b/src/views/VideoDisplay/index.js @@ -103,7 +103,7 @@ function VideoDisplay({
) : (
-
+