From 0b973829ec28eccf348fb210e093528513ff648b Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <reza@Rezas-MacBook-Pro.local>
Date: Tue, 28 Dec 2021 13:02:29 +0330
Subject: [PATCH] reza added Shopping Cart

---
 src/assets/icons/alert.svg              | 10 +++
 src/assets/icons/exit.svg               |  8 +++
 src/components/Progress/index.js        |  2 +-
 src/redux/reducers/public.js            |  2 +-
 src/router.js                           |  2 +
 src/views/ShoppingCart/Code/index.js    | 14 +++++
 src/views/ShoppingCart/Product/index.js | 43 +++++++++++++
 src/views/ShoppingCart/index.js         | 82 +++++++++++++++++++++++++
 tailwind.config.js                      |  3 +-
 9 files changed, 163 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/alert.svg
 create mode 100644 src/assets/icons/exit.svg
 create mode 100644 src/views/ShoppingCart/Code/index.js
 create mode 100644 src/views/ShoppingCart/Product/index.js
 create mode 100644 src/views/ShoppingCart/index.js

diff --git a/src/assets/icons/alert.svg b/src/assets/icons/alert.svg
new file mode 100644
index 0000000..c9bbfca
--- /dev/null
+++ b/src/assets/icons/alert.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
+  <g id="vuesax_linear_info-circle" data-name="vuesax/linear/info-circle" transform="translate(-364 -252)">
+    <g id="info-circle" transform="translate(364 252)">
+      <path id="Vector" d="M7.917,15.833A7.917,7.917,0,1,0,0,7.917,7.94,7.94,0,0,0,7.917,15.833Z" transform="translate(1.583 1.583)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0V3.958" transform="translate(9.5 6.333)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H.007" transform="translate(9.496 12.667)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H19V19H0Z" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/icons/exit.svg b/src/assets/icons/exit.svg
new file mode 100644
index 0000000..007b98d
--- /dev/null
+++ b/src/assets/icons/exit.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.044" height="15.044" viewBox="0 0 15.044 15.044">
+  <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+    <g id="card-remove" transform="translate(253.309 512.31)">
+      <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+      <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/Progress/index.js b/src/components/Progress/index.js
index b6c0c7d..82103a4 100644
--- a/src/components/Progress/index.js
+++ b/src/components/Progress/index.js
@@ -10,7 +10,7 @@ function Progress({ percent }) {
   return (
     <div className="flex-1 h-1.5 rounded-full overflow-hidden my-3" style={{ backgroundColor: '#D3E9FF' }}>
       <div
-        className="h-full bg-blueEB transition-all duration-500"
+        className="h-full bg-blueEB transition-all duration-500 rounded-full"
         style={{ width: delayPercent + "%" }}
       ></div>
     </div>
diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js
index 0430a39..c615a03 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 32de240..791bbe0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -8,6 +8,7 @@ import _ from "lodash";
 import Home from "./views/Home";
 import Products from "./views/Products";
 import Product from "./views/Product";
+import ShoppingCart from "./views/ShoppingCart";
 // import VideoTube from "./views/Home/VideoTube";
 
 function Router({ isDark }) {
@@ -28,6 +29,7 @@ function Router({ isDark }) {
           <Routes>
             <Route path="/" exact element={<Home />} />
             <Route path="/products" exact element={<Products />} />
+            <Route path="/cart" exact element={<ShoppingCart />} />
             <Route path="/products/:id" exact element={<Product />} />
             <Route
               path="*"
diff --git a/src/views/ShoppingCart/Code/index.js b/src/views/ShoppingCart/Code/index.js
new file mode 100644
index 0000000..69385fe
--- /dev/null
+++ b/src/views/ShoppingCart/Code/index.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function Code({}) {
+  return (
+    <form className="flex w-full flex-row border border-blueC0 border-solid rounded-md mt-3 overflow-hidden">
+      <input
+        type="text"
+        className="border-0 flex-1 text-right pr-3 font-medium text-xs dark:bg-gray2077 placeholder:text-blue5F"
+        placeholder={"کد تخفیف دارید ؟"}
+      />
+      <button className={"py-3 px-4 text-xs bg-blueC0 text-white border border-blueC0 border-solid"}>ثبت کد</button>
+    </form>
+  );
+}
diff --git a/src/views/ShoppingCart/Product/index.js b/src/views/ShoppingCart/Product/index.js
new file mode 100644
index 0000000..75d11e1
--- /dev/null
+++ b/src/views/ShoppingCart/Product/index.js
@@ -0,0 +1,43 @@
+import React from "react";
+
+// assets
+import bookImage from "../../../assets/images/zist-11.svg";
+import exitIcon from "../../../assets/icons/exit.svg";
+
+export default function Product({ product }) {
+  return (
+    <div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
+      <div className="flex flex-row">
+        <img src={bookImage} className="rounded-md w-20" />
+        <div className="flex flex-col pr-2">
+          <strong className="text-sm text-blue5F mb-1 dark:text-white">
+            علوم اجتماعی
+          </strong>
+          <span className="text-gray70 text-xs mb-1 dark:text-greenBA">
+            پایه دوم
+          </span>
+          <span className="text-gray70 text-xs mb-1 dark:text-greenBA">
+            نسخه فیزیکی
+          </span>
+        </div>
+      </div>
+      <div className={"flex flex-col justify-between items-end"}>
+        <img src={exitIcon} className="w-4" alt="" />
+        <div className="flex flex-col items-center">
+          <div className="flex flex-row items-center mb-3">
+            <button className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0">
+              +
+            </button>
+            <span className="mx-2.5 font-semibold text-md text-blueC0">1</span>
+            <button className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0">
+              -
+            </button>
+          </div>
+          <strong className="font-bold text-md text-blue5F dark:text-white">
+            145.000
+          </strong>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js
new file mode 100644
index 0000000..0ed77dd
--- /dev/null
+++ b/src/views/ShoppingCart/index.js
@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import Product from "./Product";
+import Code from "./Code";
+import Button from "../../components/Button";
+import alertIcon from "../../assets/icons/alert.svg";
+
+import { connect } from "react-redux";
+
+const PriceStatus = ({ name, value, type, isDark }) => {
+  return (
+    <div className="w-full flex flex-row justify-between py-2">
+      <strong className="font-light text-sm dark:text-white">{name}</strong>
+      <span
+        className="font-normal text-xs dark:text-white"
+        style={{
+          color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+        }}
+      >
+        {value}
+      </span>
+    </div>
+  );
+};
+
+function ShoppingCart({ isDark }) {
+  return (
+    <div className="w-full flex flex-col px-4">
+      {[0, 1].map((product, index) => (
+        <Product key={index} product={product} />
+      ))}
+      <Code />
+      <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
+        <PriceStatus
+          name="مبلغ سبد خرید"
+          value="265000 تومان"
+          type="normal"
+          isDark={isDark}
+        />
+        <PriceStatus
+          name="میزان تخفیف"
+          value="0 تومان"
+          type="error"
+          isDark={isDark}
+        />
+        <PriceStatus
+          name="مالیات بر ارزش افزوده"
+          value="0 تومان"
+          type="error"
+          isDark={isDark}
+        />
+      </div>
+      <div className="flex flex-row justify-between items-center w-full py-3">
+        <strong className="font-medium text-sm dark:text-white">جمع کل سبد خرید</strong>
+        <p className="font-medium text-greenBA text-xs dark:text-white">235.000 تومان</p>
+      </div>
+      <div
+        className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 my-5"
+        style={{ backgroundColor: "#196EC01a" }}
+      >
+        <img src={alertIcon} className="w-5 ml-2" />
+        <p className="text-xs text-blueC0 dark:text-white">
+          هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
+        </p>
+      </div>
+      <Button
+        title="ادامه فرایند خرید"
+        backgroundColor="bg-blueC0"
+        border={{ color: "#196EC055", width: "1px" }}
+        width="100%"
+        color="text-white"
+      />
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  isDark: state.publicApi.isDark,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);
diff --git a/tailwind.config.js b/tailwind.config.js
index f8e63f0..50fda77 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,7 +38,8 @@ module.exports = {
       red5F: "#5F1A05",
       yellow1: "#5F5F05",
       gray1: "#333333",
-      gray70 : "#707070"
+      gray70 : "#707070",
+      grayDB : '#DBDBDB'
     }),
     borderColor: (theme) => ({
       ...theme("colors"),