From 32a2a7e0c96d6088e31dfc560a5b27307ab34201 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi
Date: Wed, 9 Feb 2022 00:04:35 +0330
Subject: [PATCH] reza added something
---
src/components/Button/index.js | 9 +-
src/components/Dialog/index.js | 49 ++++
src/components/Input/index.js | 17 +-
src/components/Loading/index.js | 43 ++++
src/components/Loading/index.scss | 12 +
src/components/ProductStatusCard/index.js | 2 +
src/components/Radio/index.js | 2 +-
src/components/ReverseMap/index.js | 49 ++++
src/components/Select/index.js | 1 +
src/components/VodProduct/index.js | 18 +-
src/views/404/index.js | 4 +-
src/views/Address/index.js | 227 +++++++++++++++++-
src/views/DeliveryForm/Address/index.js | 33 ++-
.../DeliveryForm/TransportMethod/index.js | 6 +-
src/views/Home/Desktop/index.js | 2 +-
.../Product/Desktop/ProductOverAll/index.js | 4 +-
src/views/Products/index.js | 2 +-
src/views/ShoppingCart/Product/index.js | 90 ++++---
src/views/ShoppingCart/index.js | 46 ++--
src/views/Video/index.js | 2 +-
tailwind.config.js | 86 ++++---
21 files changed, 556 insertions(+), 148 deletions(-)
create mode 100644 src/components/Dialog/index.js
create mode 100644 src/components/Loading/index.js
create mode 100644 src/components/Loading/index.scss
create mode 100644 src/components/ReverseMap/index.js
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index f205980..bab8788 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -1,4 +1,5 @@
import React from "react";
+import Loading from "../Loading";
export default function Button({
title,
@@ -11,13 +12,11 @@ export default function Button({
selectable,
active,
borderType,
- twPaddings,
- customStyle,
- radius
+ loading,
}) {
return (
onClick()}
>
- {title}
+ {loading ? : title}
);
}
diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js
new file mode 100644
index 0000000..c5b5ce3
--- /dev/null
+++ b/src/components/Dialog/index.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { connect } from "react-redux";
+
+export const Dialog = ({ dialog }) => {
+ const { text, type, setOpen, accept, bg, color } = dialog;
+ return (
+ setOpen(false)}
+ >
+
+ {/* {type === "confirm" && (
+
exit
+ )} */}
+
{text}
+ {type === "confirm" && (
+
+ accept()}
+ >
+ باشه
+
+ setOpen(false)}
+ >
+ بیخیال
+
+
+ )}
+ {type === "alert" && (
+
+ setOpen(false)}
+ >
+ باشه
+
+
+ )}
+
+
+ );
+};
+
+const mapStateToProps = (state) => ({});
+
+export default connect(mapStateToProps)(Dialog);
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 9201d8f..f768b79 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -19,14 +19,13 @@ const inputStatusHandler = (value, focus, status, primary, success, danger) => {
if (status) {
return success;
} else {
- return danger;
+ return;
}
}
}
};
export default function Input(props) {
- const [value, setValue] = useState("");
const [focusToggle, setFocusToggle] = useState(false);
const {
@@ -44,6 +43,7 @@ export default function Input(props) {
regex,
direction,
width,
+ value,
} = props;
return (
@@ -93,6 +93,7 @@ export default function Input(props) {
],
" "
)}
+ value={value}
style={{ direction: direction }}
onChange={(e) =>
onChange(name, (e.target.value = regex(e.target.value)))
@@ -101,7 +102,7 @@ export default function Input(props) {
onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
maxLength={maxLength}
/>
- {!status && value && (
+ {/* {!status && value && (
- )}
- {status && value && (
+ )} */}
+ {/* {status && value && (
- )}
+ )} */}
{value && !status && (
)}
- {value && (
+ {/* {value && (
{value.length + "/" + maxLength}
- )}
+ )} */}
);
}
diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
new file mode 100644
index 0000000..5c26ce7
--- /dev/null
+++ b/src/components/Loading/index.js
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import "./index.scss";
+
+function Loading({ size, color }) {
+ const [dots, setDots] = useState({});
+
+ useEffect(() => {
+ setTimeout(() => {
+ setDots({ ...dots, one: true });
+ }, 50);
+ setTimeout(() => {
+ setDots({ ...dots, one : true, two: true });
+ }, 500);
+ setTimeout(() => {
+ setDots({ ...dots, one : true, two: true, three: true });
+ }, 950);
+ }, []);
+ return (
+
+
+
+
+
+ );
+}
+
+export default Loading;
+
+Loading.defaultProps = {
+ size: 2,
+};
diff --git a/src/components/Loading/index.scss b/src/components/Loading/index.scss
new file mode 100644
index 0000000..f5765e4
--- /dev/null
+++ b/src/components/Loading/index.scss
@@ -0,0 +1,12 @@
+.loading-animation{
+ animation: loading 0.6s infinite;
+}
+
+@keyframes loading{
+ 0%{
+ opacity: 0.5;
+ }
+ 100%{
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/ProductStatusCard/index.js b/src/components/ProductStatusCard/index.js
index 0a3cdd9..9963b13 100644
--- a/src/components/ProductStatusCard/index.js
+++ b/src/components/ProductStatusCard/index.js
@@ -22,6 +22,7 @@ const ProductStatusCard = ({
userId,
isLogin,
pushToCart,
+ loading,
}) => {
return (
@@ -69,6 +70,7 @@ const ProductStatusCard = ({
width="100%"
color={"text-white"}
selectable={true}
+ loading={loading}
onClick={() =>
isLogin
? pushToCart({
diff --git a/src/components/Radio/index.js b/src/components/Radio/index.js
index bc65e2a..fa8b60f 100644
--- a/src/components/Radio/index.js
+++ b/src/components/Radio/index.js
@@ -4,7 +4,7 @@ import "./index.scss";
export default function Radio(props) {
return (
-
+
{/* {props.label} */}
diff --git a/src/components/ReverseMap/index.js b/src/components/ReverseMap/index.js
new file mode 100644
index 0000000..10ba755
--- /dev/null
+++ b/src/components/ReverseMap/index.js
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import Mapir from "mapir-react-component";
+
+
+
+const X_API_KEY = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIn0.eyJhdWQiOiIxNjk2MSIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIiwiaWF0IjoxNjQ0MzE3MDA5LCJuYmYiOjE2NDQzMTcwMDksImV4cCI6MTY0NjgyMjYwOSwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Gckmd77Vw-wmsaztsmVmjYmfp4zXRSy2f0tXS-1p7IY8VJmvCCrk64y7WvCLbH0YfGZI9rG9ZUi5hRJDDGXu70l1ZafCYq2-EkMzcbx-PGTTq2bHGNZujF4ur1xtGoXd2kwGuldiR_6SJdqYLHcupbscFI7hHaQnkN1xWJ-L8476ZOKzUgiBvwH9uElGZXwD6SwfXoGW_R38_isrnfTXKfW9PPixyLaN3404tcjOU1r02HIurrplXlIKRKG9CVXxKsESfJJ8trwtZw6O4erxrnisxfL0VwAR7l69P6KcFb57vvM4j4hKFqxUDr4YvSq1qOTt3urYbAKehhvoiLhZxw";
+
+
+const Map = Mapir.setToken({
+ transformRequest: (url) => {
+ return {
+ url: url,
+ headers: {
+ "x-api-key":X_API_KEY,
+ "Mapir-SDK": "reactjs",
+ },
+ };
+ },
+});
+
+const ReverseMap = ({ setAddress }) => {
+ const [markerArray, setMarkerArray] = useState([]);
+ const [coord, setCoord] = useState([51.42, 35.72]);
+ function reverseFunction(map, e) {
+ let url = `https://map.ir/reverse/no?lat=${e.lngLat.lat}&lon=${e.lngLat.lng}`;
+ fetch(url, {
+ headers: {
+ "Content-Type": "application/json",
+ "x-api-key": X_API_KEY,
+ },
+ })
+ .then((response) => response.json())
+ .then((data) => setAddress(data.address));
+ const array = [];
+ array.push(
+
+ );
+ setMarkerArray(array);
+ }
+ return (
+
+ {markerArray}
+
+ );
+};
+export default ReverseMap;
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index a392a68..ca73792 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -41,4 +41,5 @@ export default Select;
Select.defaultProps = {
options: ["Really", "Option 2", "Option 3"],
+ borderColor : 'border-gray-300'
};
diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js
index d81bce8..6b6c93d 100644
--- a/src/components/VodProduct/index.js
+++ b/src/components/VodProduct/index.js
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
-import {Link} from 'react-router-dom';
-import separate from '../../utils/separate';
+import { Link } from "react-router-dom";
+import separate from "../../utils/separate";
import StarRating from "../StarRating";
import ReactTooltip from "react-tooltip";
@@ -68,7 +68,7 @@ const VodProduct = ({
<>
{/* product UI Design */}
@@ -146,7 +146,7 @@ const VodProduct = ({
{console.log(video?.gradeId)}
- { 'پایه' + ' ' + grades[video?.gradeId]}
+ {"پایه" + " " + grades[video?.gradeId]}
{productContent && (
@@ -175,9 +175,7 @@ const VodProduct = ({
: "flex"
}`}
>
-
-
-
+
{/* {discountPrice && (
@@ -185,12 +183,12 @@ const VodProduct = ({
)} */}
- {/*
- {separate(video?.price) + ' '}
+ {separate(video?.product[2]?.price) + ' '}
تومان
-
*/}
+
{/* add to cart */}
{addToCartHolder && (
diff --git a/src/views/404/index.js b/src/views/404/index.js
index 28989a5..16e4c6b 100644
--- a/src/views/404/index.js
+++ b/src/views/404/index.js
@@ -19,9 +19,9 @@ function NotFound({ headerOptions, setHeaderOptions }) {
- وای!!
+ اوه!!
- صفحه ای که بدنبال آن بودهاید دیگر وجود ندارد :(
+ دوست من، اشتباه اومدی
);
diff --git a/src/views/Address/index.js b/src/views/Address/index.js
index 8d85a89..dae5302 100644
--- a/src/views/Address/index.js
+++ b/src/views/Address/index.js
@@ -1,12 +1,37 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
-import { publicApi } from "../../redux/actions";
+import { publicApi, userAddress } from "../../redux/actions";
import onInput from "../../utils/onInput";
import Input from "../../components/Input";
import Select from "../../components/Select";
+import Button from "../../components/Button";
+import ReverseMap from "../../components/ReverseMap";
+import Dialog from "../../components/Dialog";
-export const Address = ({ city, province, getCity, getProvince }) => {
+//assets
+import dropdownIcon from "../../assets/icons/dropdown-blue.svg";
+
+export const Address = ({
+ city,
+ province,
+ getCity,
+ getProvince,
+ provinces,
+ cities,
+ createAddress,
+ loading,
+ setPhase,
+}) => {
const [addressFields, setAddressFields] = useState({});
+ const [mapAddress, setMapAddress] = useState(null);
+ const [dialog, setDialog] = useState({
+ text: null,
+ type: null,
+ setOpen: null,
+ accept: null,
+ color: null,
+ open: null,
+ });
useEffect(() => {
if (province.length <= 1) {
@@ -16,11 +41,144 @@ export const Address = ({ city, province, getCity, getProvince }) => {
useEffect(() => {
if (addressFields?.provinceId) {
- getCity({ provinceId: addressFields?.provinceId });
+ getCity({
+ provinceId: provinces.filter(
+ (province) => province.name === addressFields?.provinceId
+ )[0].id,
+ });
}
}, [addressFields]);
- const onChange = (name, value) => {};
+ const onChange = (name, value) => {
+ console.log("1");
+ setAddressFields({ ...addressFields, [name]: value });
+ };
+
+ const submit = () => {
+ const {
+ firstName,
+ lastName,
+ cellphone,
+ phone,
+ address,
+ provinceId,
+ cityId,
+ postalCode,
+ } = addressFields;
+
+ if (!firstName) {
+ setDialog({
+ text: "نام خود را وارد کنید.",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+ if (!lastName) {
+ setDialog({
+ text: "نام خانوادگی خود را وارد کنید.",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+ if (!cellphone) {
+ setDialog({
+ text: "شماره موبایل خود را وارد کنید.",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+ if (!phone) {
+ setDialog({
+ text: "شماره تلفن خود را وارد کنید.",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+ if (!provinceId) {
+ setDialog({
+ text: "نام استان خود را وارد کنید.",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+ if (!cityId) {
+ setDialog({
+ text: "نام شهرستان خود را وارد کنید.",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+ if (!postalCode) {
+ setDialog({
+ text: "کد پستی خود را وارد کنید.",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+ if (!mapAddress) {
+ setDialog({
+ text: "آدرس خود را از روی نقشه انتخاب کن",
+ type: "alert",
+ setOpen: (val) => setDialog({ ...dialog, open: val }),
+ accept: () => {},
+ bg: "bg-black bg-opacity-60",
+ color: "text-white",
+ open: true,
+ });
+ return;
+ }
+
+ createAddress({
+ firstName,
+ lastName,
+ cellphone,
+ phone,
+ address: mapAddress,
+ provinceId: provinces.filter(
+ (province) => province.name === provinceId
+ )[0].id,
+ cityId: cities.filter((city) => city.name === cityId)[0]?.id,
+ postalCode,
+ location: null,
+ });
+
+ setPhase("deliveryForm");
+ };
const Header = ({ title, text }) => {
return (
@@ -33,9 +191,26 @@ export const Address = ({ city, province, getCity, getProvince }) => {
return (
-
+
+
+ setMapAddress(val)} />
+
+
onInput.numberOnly(val)}
+ name="address"
+ onChange={(name, value) => setMapAddress(value)}
+ value={mapAddress}
+ align="text-right"
+ direction="rtl"
+ />
+
@@ -116,13 +293,39 @@ export const Address = ({ city, province, getCity, getProvince }) => {
width="50%"
label={"کد پستی"}
regex={(val) => onInput.numberOnly(val)}
- name="tellphone"
+ name="postalCode"
onChange={(name, value) => onChange(name, value)}
- value={addressFields?.lastName}
+ value={addressFields?.postalCode}
align="text-right"
direction="ltr"
+ maxLength={10}
/>
+
+
+
submit()}
+ />
+ setPhase("deliveryForm")}
+ >
+ بازگشت
+
+
+
+
+ {dialog.open && }
);
};
@@ -130,11 +333,15 @@ export const Address = ({ city, province, getCity, getProvince }) => {
const mapStateToProps = (state) => ({
province: state.publicApi.province,
city: state.publicApi.city,
+ provinces: state.publicApi.provinces,
+ cities: state.publicApi.cities,
+ loading: state.userAddress.loading,
});
const mapDispatchToProps = {
getProvince: publicApi.getProvince,
getCity: publicApi.getCity,
+ createAddress: userAddress.add,
};
export default connect(mapStateToProps, mapDispatchToProps)(Address);
diff --git a/src/views/DeliveryForm/Address/index.js b/src/views/DeliveryForm/Address/index.js
index 31a125b..2ddb8fb 100644
--- a/src/views/DeliveryForm/Address/index.js
+++ b/src/views/DeliveryForm/Address/index.js
@@ -1,11 +1,19 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import Button from "../../../components/Button";
import Radio from "../../../components/Radio";
function Address({ addresses, isDark, isMobile, setPhase }) {
- const [activeAddress, setActiveAddress] = useState(addresses[0]);
- const Location = ({ address }) => {
+ const [activeAddress, setActiveAddress] = useState([]);
+
+ useEffect(() => {
+ if(addresses?.length > 0){
+ setActiveAddress(addresses[0]);
+ }
+
+ },[addresses]);
+
+ const Location = ({ address, active }) => {
return isMobile ? (
setActiveAddress(address)}
>
-
-
+
+
آدرس: {address.address}
@@ -50,9 +59,9 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
-
+
- نام تحویل گیرنده: {address.receiver}
+ نام تحویل گیرنده: {address.firstName + ' ' + address.lastName}
شماره تماس: {address.cellphone}
@@ -63,7 +72,9 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
};
return isMobile ? (
- انتخاب آدرس
+
+ انتخاب آدرس
+
{addresses.map((address, index) => (
@@ -86,7 +97,11 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
انتخاب آدرس
{addresses.map((address, index) => (
-
+
))}
diff --git a/src/views/DeliveryForm/TransportMethod/index.js b/src/views/DeliveryForm/TransportMethod/index.js
index adfa618..05376ee 100644
--- a/src/views/DeliveryForm/TransportMethod/index.js
+++ b/src/views/DeliveryForm/TransportMethod/index.js
@@ -41,7 +41,7 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
) : (
setActiveMethod(method)}
>
{
];
useEffect(() => {
- getBooks();
+ getBooks({vod : true});
},[]);
return (
diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js
index f7573b1..9800559 100644
--- a/src/views/Product/Desktop/ProductOverAll/index.js
+++ b/src/views/Product/Desktop/ProductOverAll/index.js
@@ -27,6 +27,7 @@ export const ProductOverAll = ({
pushToCart,
headerOptions,
setHeaderOptions,
+ loading,
}) => {
const [type, setType] = useState("1");
return (
@@ -116,7 +117,7 @@ export const ProductOverAll = ({
@@ -128,6 +129,7 @@ const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
isDark: state.publicApi.isDark,
userId: state.user.status.id,
+ loading : state.userProduct.loading
});
const mapDispatchToProps = {
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index 190d561..eaf6ba9 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -34,7 +34,7 @@ export const Products = ({
};
useEffect(() => {
- getList();
+ getList({vod : true});
setHeaderOptions(headerOptions);
}, []);
diff --git a/src/views/ShoppingCart/Product/index.js b/src/views/ShoppingCart/Product/index.js
index b199f6d..f813602 100644
--- a/src/views/ShoppingCart/Product/index.js
+++ b/src/views/ShoppingCart/Product/index.js
@@ -1,13 +1,15 @@
import React from "react";
import { connect } from "react-redux";
import { userProduct } from "../../../redux/actions";
+import separate from "../../../utils/separate";
+import Loading from "../../../components/Loading";
// assets
import bookImage from "../../../assets/images/zist-11.svg";
import exitIcon from "../../../assets/icons/exit.svg";
import deleteIcon from "../../../assets/icons/delete.svg";
-function Product({ product, grades, pushToCart, isMobile }) {
+function Product({ product, grades, pushToCart, isMobile, loading }) {
return isMobile ? (
@@ -60,7 +62,11 @@ function Product({ product, grades, pushToCart, isMobile }) {
+
- {product.count}
+ {loading ? (
+
+ ) : (
+ product.count
+ )}
) : (
-
+
+
+
+ {separate(product?.product?.price * product.count)}
+ تومان
+
+
@@ -118,42 +130,44 @@ function Product({ product, grades, pushToCart, isMobile }) {
>
+
-
- {product.count}
+
+ {loading ? : product.count}
-
- pushToCart({
- productId: product?.productId,
- userId: product?.userId,
- count: -1,
- })
- }
- >
- -
-
-
-
-
- {product?.product?.price} تومان
-
-
- pushToCart(
- {
- productId: product?.productId,
- userId: product?.userId,
- count: product?.productType === 1 ? -1 : -product?.count,
- },
- {},
- { id: product?.factorId }
- )
- }
- src={deleteIcon}
- alt="delete"
- className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4 cursor-pointer"
- />
+ {
+ <>
+ {product.count === 1 ? (
+
+ pushToCart(
+ {
+ productId: product?.productId,
+ userId: product?.userId,
+ count: product?.productType === 1 ? -1 : -product?.count,
+ },
+ {},
+ { id: product?.factorId }
+ )
+ }
+ src={deleteIcon}
+ alt="delete"
+ className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md cursor-pointer"
+ />
+ ) : (
+
+ pushToCart({
+ productId: product?.productId,
+ userId: product?.userId,
+ count: -1,
+ })
+ }
+ >
+ -
+
+ )}
+ >
+ }
);
diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js
index bbb3ef1..c579569 100644
--- a/src/views/ShoppingCart/index.js
+++ b/src/views/ShoppingCart/index.js
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { userProduct, userFactor, publicApi } from "../../redux/actions";
-
+import separate from '../../utils/separate';
+import { toast } from "react-toastify";
import DeliveryForm from "../DeliveryForm";
import Product from "./Product";
import Address from "../Address";
@@ -28,6 +29,8 @@ function ShoppingCart({
headerOptions,
setHeaderOptions,
desktopContentTransform,
+ userProducts,
+ loading,
}) {
const [phase, setPhase] = useState("products");
@@ -37,8 +40,15 @@ function ShoppingCart({
setHeaderOptions(headerOptions);
}, []);
+ const productsLength = userProducts?.filter(
+ (product) => product.condition < 2
+ )?.length;
+
const next = {
- products: () => setPhase("deliveryForm"),
+ products: () =>
+ productsLength
+ ? setPhase("deliveryForm")
+ : toast.info("ابتدا یک محصول را به سبد خرید خود اضافه کنید."),
deliveryForm: () => console.log("Go to shaparak"),
profile: () => {
console.log("Set profile");
@@ -50,20 +60,19 @@ function ShoppingCart({
return (
-
+
کالاهای انتخابی{" "}
تعداد سفارش
-
- مبلغ
-
{list.map(
(product, index) =>
- product.condition < 2 &&
+ product.condition < 2 && (
+
+ )
)}
@@ -94,7 +103,7 @@ function ShoppingCart({
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
- {value}
+ {separate(value)}
,
+ products: productsLength ? (
+
+ ) : (
+
سبد خرید شما خالی است.
+ ),
deliveryForm:
,
address:
,
};
@@ -173,22 +186,24 @@ function ShoppingCart({
{phase !== "address" && (
@@ -197,7 +212,7 @@ function ShoppingCart({
جمع کل سبد خرید
- {factorInfo?.payPrice}
+ {separate(productsLength ? factorInfo?.payPrice : 0)}
تومان
@@ -247,6 +262,7 @@ function ShoppingCart({
width="100%"
color="text-white"
onClick={next[phase]}
+ // loading={loading}
/>
{phase === "deliveryForm" && (
({
user: state.user.status,
hasPhysical: state.userProduct.hasPhysical,
desktopContentTransform: state.publicApi.desktopContentTransform,
+ userProducts: state.userProduct.list,
+ loading: state.userProduct.loading
});
const mapDispatchToProps = {
diff --git a/src/views/Video/index.js b/src/views/Video/index.js
index 1a2c5f1..707f7bc 100644
--- a/src/views/Video/index.js
+++ b/src/views/Video/index.js
@@ -143,7 +143,7 @@ function Video({
- {book?.name}
+ {'دوره ویدئویی' + ' ' + book?.name}
{"پایه" + " " + grades[book?.gradeId]}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0c6284b..525e999 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,54 +4,52 @@ module.exports = {
theme: {
backgroundColor: (theme) => ({
...theme("colors"),
- blueC0: "#196EC0",
- blueB0: "#517AB0",
- blue90: "#235A90",
- blueCB: "#98B2CB",
- blueEB: "#2B8DEB",
- blueFF: "#E8FCFF",
- blueFF1: "#E9F0FF",
- blueFD: "#F6F9FD",
- blueFD1 : "#F4F8FD",
- blueFFOP : "rgba(6, 146, 255, 0.36)",
- redFF: "#FFE6E6",
- redFF1: "#FF2020",
- red19: "#C01919",
- yellow2: "#FDFFDA",
- yellow3: "#EFFF00",
- gray36: "#363636",
- orange1: "#FF6600",
- greenBA: "#06BACE",
- green1: "#00FF80",
- gray20: "#202020",
- gray2077: "#20202077",
- gray2C: "#2C2C2C",
- gray36: "#363636",
- gray50: "#505050",
- grayDB: "#DBDBDB",
- grayE3: "#E3E3E3",
- grayEE: "#EEEEEE",
- grayF9: "#F9F9F9",
- grayF4: "#EBF0F4",
- grayF7: "#F7F7F7"
+ blueC0: "#196EC0", //در سبد خرید - دکمه ادامه فرآیند
+ blueB0: "#517AB0", // صفحه هوم دسکتاپ - زیر اسلایدر متن لیست محصولات
+ blue90: "#235A90", // نقطه های مشخص کننده صفحه در دسکتاپ انیمیشن حالت خاموش
+ blueCB: "#98B2CB", // صفحه فعال سازی کتاب دیجیتال دکمه فعال سازی با کد QR
+ blueEB: "#2B8DEB", // نوار پروگرس مقدار داخلی که داره پر میشه
+ blueFF: "#E8FCFF", // در موبایل صفحه ویديو رنگ پس زمینه لیست فصل ها
+ blueFF1: "#E9F0FF", // در صفحه نمایش ویديو پس زمینه پلی لیست
+ blueFD: "#F6F9FD", // در صفحه فعال سازی کتاب پس زمینه هشدار
+ blueFD1 : "#F4F8FD", // در صفحه فعال سازی هدر بالای سایت
+ blueFFOP : "rgba(6, 146, 255, 0.36)", // در صفحه محصولات دکمه پاک کردن فیلترها در سایدبار
+ redFF: "#FFE6E6", // در انیمیشن موبایل که میاد کد رو اسکن کنه نتیجه اسکن پس زمینه پی دی اف
+ redFF1: "#FF2020", // در آیکن همبرگری نقطه نوتیف
+ red19: "#C01919", // در صفحه محصول رنگ متن مشاهده نمونه
+ yellow2: "#FDFFDA", // در انیمیشن موبایل که برای اسکن کد میاد نتیجه اسکن پس زمینه لینک ها
+ yellow3: "#EFFF00", // خط زیر متن یادگیری در دیزاین موبایل پابلیک صفحه هوم
+ gray36: "#363636", // در حالت دارک صفحه موبایل پس زمینه دکمه های کیو آر و ای آز در هدر
+ orange1: "#FF6600", // خط زیر متن کنارتونیم در دیزاین موبایل پابلیک صفحه هوم
+ greenBA: "#06BACE", // در سرچ اصلی سایت رنگ تکست تایتل محصولات و صفحات
+ green1: "#00FF80", // خط زیر متن یادگیری جذاب در دیزاین موبایل پابلیک صفحه هوم
+ gray20: "#202020", // هیچ جا
+ gray2077: "#20202077", // در صفحه محصولات حالت دارک صفحه محصولات پس زمینه سرچ
+ gray2C: "#2C2C2C", // هیچ جا
+ gray50: "#505050", // در صفحه اسکن کیو آر رنگ پس زمینه ی روی عکس
+ grayE3: "#E3E3E3", // رنگ پس زمینه لپ تاپ در صفحه هوم موبایل که نشون دهنده ریسپانسیو بودن سایت ماست
+ grayEE: "#EEEEEE", // رنگ پس زمینه موبایل در صفحه هوم موبایل که نشون دهنده ریسپانسیو بودن سایت ماس
+ grayF9: "#F9F9F9", // رنگ پس زمینه قیمت محصول و گارنتی و فلان در سبد خرید
+ grayF4: "#EBF0F4", // در صفحه محصولات رنگ پس زمینه عکس کتاب
+ grayF7: "#F7F7F7" // رنگ پس زمینه باکس اضافه کردن به سبد خرید در صفحه محصول
}),
textColor: (theme) => ({
...theme("colors"),
primary: "#235A90",
- blueC0: "#196EC0",
- blueC01: "#1999C0",
- blueE8: "#2E81E8",
- blue52: "#132F52",
- blue5F: "#05335F",
- blueB9: "#86A0B9",
- green71: "#067182",
- greenBA: "#06BACE",
- red5F: "#5F1A05",
- red19: "#C01919",
- yellow1: "#5F5F05",
- gray1: "#333333",
- gray70: "#707070",
- grayDB: "#DBDBDB",
+ blueC0: "#196EC0", //در سبد خرید - دکمه ادامه فرآیند
+ blueC01: "#1999C0", // هیچ جا
+ blueE8: "#2E81E8", // در صفحه محصول متن به من کمک کن انتخاب کنم
+ blue52: "#132F52", // در باکس اضافه کردن به سبد خرید رنگ متن با خرید این محصول فلان تومن سود کن
+ blue5F: "#05335F", // رنگ لینکها در هدر بالای سایت
+ blueB9: "#86A0B9", // در موبایل تب پایین صفحه رنگ متن صفحات
+ green71: "#067182", // در دسکتاپ انیمیشن قسمت برگزاری آزمون تکست زمان بافیمانده
+ greenBA: "#06BACE", // در سرچ اصلی سایت رنگ تکست تایتل محصولات و صفحات
+ red5F: "#5F1A05", // در انیمیشن موبایل که میاد کد رو اسکن کنه نتیجه اسکن متن پی دی اف
+ red19: "#C01919", // در صفحه محصول رنگ متن مشاهده نمونه
+ yellow1: "#5F5F05", // در انیمیشن موبایل که برای اسکن کد میاد نتیجه اسکن رنگ متن لینک ه
+ gray1: "#333333", // رنگ متن سرچ در صفحه محصولات موبایل
+ gray70: "#707070", // رنگ متن تایتل لیست لینک ها در فوتر سایت
+ grayDB: "#DBDBDB", // در دراور موبایل رنگ متن شماره موبایل کاربر در حالت دارک
}),
// height: (theme) =>( {
// sm: '8px',