#93 frontend

fdhhhdjd · Oct 25, 2022 · ee821ba · ee821ba
1 parent 6fcb5b2
commit ee821ba
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 7 deletions.
diff --git a/dump.rdb b/dump.rdb
diff --git a/frontend/src/v1/redux/payment_slice/payment_slice.js b/frontend/src/v1/redux/payment_slice/payment_slice.js
@@ -3,14 +3,14 @@ import { Get_Detail_User_Payment_Initial } from "./Api_Redux_Thunk_Payment";
 const initialState = {
   loading: false,
   error: null,
-  total_user: 0,
+  total_user: null,
 };
 const Payments = createSlice({
   name: "payments",
   initialState,
   reducers: {
     reset_total: (state) => {
-      state.total_user = 0;
+      state.total_user = null;
     },
   },
   extraReducers: {

diff --git a/frontend/src/v1/user_ui/components/Cart_Component/Cart_User.js b/frontend/src/v1/user_ui/components/Cart_Component/Cart_User.js
@@ -11,10 +11,12 @@ 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 STORAGES from "../../../utils/storage";
 import {
   Lazy_Loading_Image,
   SwaleMessage,
+  Total_Cart,
   Voucher,
 } from "../../imports/General_Global_Import";
 
@@ -59,6 +61,7 @@ const Cart_User = () => {
   useEffect(() => {
     if (change_cart) {
       dispatch(Get_Detail_User_Cart_Initial({ accessToken }));
+      dispatch(Get_Detail_User_Payment_Initial(accessToken));
       dispatch(reset_change_cart());
     }
   }, [change_cart]);
@@ -138,7 +141,10 @@ const Cart_User = () => {
             </div>
           );
         })}
+      {/* Voucher */}
       <Voucher />
+      {/* Total */}
+      <Total_Cart />
     </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
@@ -0,0 +1,42 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+const Total_Cart = () => {
+  const { total_user } = useSelector((state) => ({ ...state.payment_user }));
+  return (
+    <React.Fragment>
+      {total_user.total_apply_voucher !== 0 && (
+        <div className="total">
+          <span className="sub">Cost:</span>
+          <del>
+            <span className="divider total-price" style={{ color: "red" }}>
+              ${total_user.total_apply_voucher}
+            </span>
+          </del>
+        </div>
+      )}
+      {/* {percent !== undefined && (
+        <div className="total">
+          <span className="sub">percent:</span>
+
+          <span className="divider total-price" style={{ color: "green" }}>
+            {percent}%
+          </span>
+        </div>
+      )} */}
+      <div className="total">
+        <span className="sub">Total</span>
+        <span className="total-price">
+          $
+          {total_user.total_apply_voucher !== 0
+            ? total_user.total_apply_voucher
+            : total_user.total}
+        </span>
+      </div>
+
+      <hr />
+    </React.Fragment>
+  );
+};
+
+export default Total_Cart;
diff --git a/frontend/src/v1/user_ui/contexts/Payment_Context/Payment_Context.js b/frontend/src/v1/user_ui/contexts/Payment_Context/Payment_Context.js
@@ -6,15 +6,12 @@ const Payment_Context = () => {
   const { accessToken } = useSelector((state) => ({
     ...state.auth_user,
   }));
-  const { change_cart } = useSelector((state) => ({
-    ...state.Cart_user,
-  }));
   const dispatch = useDispatch();
   useEffect(() => {
-    if (accessToken || change_cart) {
+    if (accessToken) {
       dispatch(Get_Detail_User_Payment_Initial(accessToken));
     }
-  }, [accessToken, change_cart]);
+  }, [accessToken]);
   return {};
 };
 export default Payment_Context;
diff --git a/frontend/src/v1/user_ui/imports/General_Global_Import.js b/frontend/src/v1/user_ui/imports/General_Global_Import.js
@@ -54,3 +54,6 @@ export { default as CartEmpty } from "../components/Cart_Component/Cart_Empty";
 
 //* Voucher
 export { default as Voucher } from "../components/Cart_Component/Vouchers/Voucher";
+
+//* Total
+export { default as Total_Cart } from "../components/Cart_Component/totals/Total_Cart";