#96 frontend

fdhhhdjd · Oct 26, 2022 · edc4b9b · edc4b9b
1 parent 32cf65a
commit edc4b9b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 47 deletions.
diff --git a/dump.rdb b/dump.rdb
diff --git a/frontend/src/v1/user_ui/components/Cart_Component/Vouchers/Voucher.js b/frontend/src/v1/user_ui/components/Cart_Component/Vouchers/Voucher.js
@@ -49,7 +49,7 @@ const Voucher = () => {
   return (
     <React.Fragment>
       <form className="total" onSubmit={handleSubmit}>
-        {loading ? "" : <span className="sub">Code Voucher:</span>}
+        <span className="sub">Code Voucher:</span>
         {clickFlag ? (
           <>
             {" "}
@@ -65,7 +65,13 @@ const Voucher = () => {
               className="b"
             />
             &nbsp;&nbsp;
-            <button className="btn btn-success btn-sm col-md-1">Send</button>
+            {loading ? (
+              <div className="spinner-border text-success" role="status">
+                <span className="sr-only">Loading...</span>
+              </div>
+            ) : (
+              <button className="btn btn-success btn-sm col-md-1">Send</button>
+            )}
           </>
         ) : (
           <span
@@ -80,32 +86,6 @@ const Voucher = () => {
           </span>
         )}
       </form>
-
-      {/* <div className="card mb-3">
-        <div className="card-body">
-          <form>
-            <div className="form-group">
-              {" "}
-              <label>Have coupon?</label>
-              <div className="input-group">
-                {" "}
-                <input
-                  type="text"
-                  className="form-control coupon"
-                  name
-                  placeholder="Coupon code"
-                />{" "}
-                <span className="input-group-append">
-                  {" "}
-                  <button className="btn btn-primary btn-apply coupon">
-                    Apply
-                  </button>{" "}
-                </span>{" "}
-              </div>
-            </div>
-          </form>
-        </div>
-      </div> */}
     </React.Fragment>
   );
 };

diff --git a/frontend/src/v1/user_ui/components/Cart_Component/totals/Total_Cart.js b/frontend/src/v1/user_ui/components/Cart_Component/totals/Total_Cart.js
@@ -1,32 +1,67 @@
-import React from "react";
-import { useSelector } from "react-redux";
+import React, { useLayoutEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Del_Voucher_Initial } from "../../../../redux/voucher_slice/Api_Redux_Thunk_Voucher";
+import STORAGES from "../../../../utils/storage";
 
 const Total_Cart = () => {
   const { total_user } = useSelector((state) => ({ ...state.payment_user }));
+  const { voucher } = useSelector((state) => ({
+    ...state.voucher_user,
+  }));
+  const voucher_end = useRef();
+  const dispatch = useDispatch();
+  const accessToken = STORAGES.getLocalStorage("accessToken");
+  const handleRemoveVoucher = () => {
+    dispatch(Del_Voucher_Initial(accessToken));
+  };
+  useLayoutEffect(() => {
+    if (total_user) {
+      return voucher_end.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [total_user]);
   return (
     <React.Fragment>
       {total_user && (
         <>
           {total_user.total_apply_voucher !== 0 && (
             <div className="total">
-              <span className="sub">Cost:</span>
+              <span className="sub">Total:</span>
               <del>
                 <span className="divider total-price" style={{ color: "red" }}>
                   ${total_user.total}
                 </span>
               </del>
             </div>
           )}
-          {/* {percent !== undefined && (
-        <div className="total">
-          <span className="sub">percent:</span>
+          <div className="total scrollingContainer">
+            <span className="sub">percent:</span>
+            <span
+              className="divider total-price"
+              style={
+                total_user.voucher && { color: "green", marginRight: ".5rem" }
+              }
+            >
+              {total_user.voucher ? `${total_user.voucher}% OFF` : "0% OFF"}
+            </span>
+            {total_user.voucher && (
+              <span
+                className="divider total-price "
+                style={{ color: "red" }}
+                onClick={handleRemoveVoucher}
+              >
+                <i className="fas fa-times"></i>
+              </span>
+            )}
+          </div>
+          {total_user.voucher && (
+            <div className="total">
+              <span className="total-price">
+                <img src="https://i.imgur.com/DC94rZe.png" width={100} />
+              </span>
+            </div>
+          )}
 
-          <span className="divider total-price" style={{ color: "green" }}>
-            {percent}%
-          </span>
-        </div>
-      )} */}
-          <div className="total">
+          <div className="total" ref={voucher_end}>
             <span className="sub">
               {total_user.total_apply_voucher !== 0
                 ? "Total Sell :"

diff --git a/frontend/src/v1/user_ui/components/Products/Detail_Product.js b/frontend/src/v1/user_ui/components/Products/Detail_Product.js
@@ -10,6 +10,7 @@ import {
   reset_change_cart,
   reset_change_error,
 } from "../../../redux/cart_slice/Cart_Slice";
+import { Get_Detail_User_Payment_Initial } from "../../../redux/payment_slice/Api_Redux_Thunk_Payment";
 import { Get_Detail_Product_Initial } from "../../../redux/product_slice/Api_Redux_Thunk_Products";
 import { reset_product_detail } from "../../../redux/product_slice/Product_Slice";
 import STORAGES from "../../../utils/storage";
@@ -56,13 +57,6 @@ const Detail_Product = () => {
       })
     );
   };
-  const handleCheckStock = (product_id) => {
-    return cart?.filter((rs) => {
-      if (rs.product_id[0]._id === product_id) {
-        return rs;
-      }
-    });
-  };
   useEffect(() => {
     if (id) {
       dispatch(Get_Detail_Product_Initial(id));
@@ -80,6 +74,7 @@ const Detail_Product = () => {
   useEffect(() => {
     if (change_cart) {
       dispatch(Get_Detail_User_Cart_Initial({ accessToken }));
+      dispatch(Get_Detail_User_Payment_Initial(accessToken));
       return SwaleMessage("Add To Cart Success !", "success");
     }
     return () => {