Merge pull request #103 from fdhhhdjd/frontend-payment-#93

Frontend payment #93

README.md

@@ -237,9 +237,9 @@
 
 - Delete order flag: post --> http://localhost:5000/api/order/delete/:id
 
-- History orders: --> http://localhost:5000/api/order/history
+- History orders: get --> http://localhost:5000/api/order/history
 
-- Get Detail orders: -->http://localhost:5000/api/order/:id
+- Get Detail orders: get -->http://localhost:5000/api/order/:id
 
 ## Payments
 

frontend/src/v1/configs/Apis/Payment_Api/Api_Payment.js

@@ -1,5 +1,14 @@
 const API_PAYMENT = {
   //* TOTAL PAYMENT
   API_TOTAL_PAYMENT: "/api/payment/total",
+
+  //* CHECK STOCK PRODUCT
+  API_CHECK_STOCK_PRODUCT: "/api/payment/check/stock",
+
+  // * TRANSACTION PAYPAL
+  API_TRANSACTION_PAYMENT: "/api/payment/paypal",
+
+  //* CHECK TOTAL PAYMENT
+  API_TOTAL_PAYMENT: "/api/payment/total"
 };
 export default API_PAYMENT;

frontend/src/v1/redux/payment_slice/Api_Redux_Thunk_Payment.js

@@ -24,3 +24,73 @@ export const Get_Detail_User_Payment_Initial = createAsyncThunk(
     }
   }
 );
+
+export const Check_Stock_Product_Initial = createAsyncThunk(
+  "Payment/Check/Stock",
+  async (accessToken, { rejectWithValue }) => {
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+    try {
+      const response = await axios.get(
+        `${API_PAYMENT.API_CHECK_STOCK_PRODUCT}`,
+        config
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const Check_Total_Cart_Initial = createAsyncThunk(
+  "Payment/Check/total",
+  async (accessToken, { rejectWithValue }) => {
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+    try {
+      const response = await axios.get(
+        `${API_PAYMENT.API_TOTAL_PAYMENT}`,
+        config
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const Transaction_Payment_Initial = createAsyncThunk(
+  "Payment/Transaction",
+  async ({ accessToken, paymentID, address }, { rejectWithValue }) => {
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+    try {
+      const response = await axios.post(
+        `${API_PAYMENT.API_TRANSACTION_PAYMENT}`,
+        { paymentID, address },
+        config
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);

frontend/src/v1/redux/payment_slice/payment_slice.js

@@ -1,17 +1,30 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { Get_Detail_User_Payment_Initial } from "./Api_Redux_Thunk_Payment";
+import { Get_Detail_User_Payment_Initial, Check_Stock_Product_Initial, Check_Total_Cart_Initial, Transaction_Payment_Initial } from "./Api_Redux_Thunk_Payment";
 const initialState = {
   loading: false,
   error: null,
   total_user: null,
+  total_payment: null,
+  transaction: null,
+  stock_transaction: null
 };
 const Payments = createSlice({
   name: "payments",
   initialState,
   reducers: {
     reset_total: (state) => {
-      state.total_user = null;
+      state.total_user = null
     },
+    reset_payment: (state) => {
+      state.total_user = null
+      state.total_payment = null
+      state.transaction = null
+      state.stock_transaction = null
+    },
+    reset_stock_transaction: (state) => {
+      state.stock_transaction = null
+      state.total_payment = null
+    }
   },
   extraReducers: {
     //* Payment UserId
@@ -26,8 +39,44 @@ const Payments = createSlice({
       state.loading = false;
       state.error = action.payload;
     },
+    //* Payment CheckStock
+    [Check_Stock_Product_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Check_Stock_Product_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.stock_transaction = action.payload.element;
+    },
+    [Check_Stock_Product_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Payment Check Total
+    [Check_Total_Cart_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Check_Total_Cart_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.total_payment = action.payload.element;
+    },
+    [Check_Total_Cart_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Transaction Payment
+    [Transaction_Payment_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Transaction_Payment_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.transaction = action.payload.element;
+    },
+    [Transaction_Payment_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
   },
 });
 const Payment_Slice = Payments.reducer;
-export const { reset_total } = Payments.actions;
+export const { reset_payment, reset_stock_transaction, reset_total } = Payments.actions;
 export default Payment_Slice;

frontend/src/v1/router/index.js

@@ -15,6 +15,7 @@ import {
 } from "../user_ui/imports/Page_Layout_Main_Import";
 import User_Private_Router from "../private/user_private_router/User_Private_Router";
 import User_Private_Router_Layout_Main from "../private/user_private_router/User_Private_Router_Layout_Main";
+import Transaction_Success from "../user_ui/components/Cart_Component/totals/components/Transaction_Success";
 const RoutesDataUser = [
   //* Authentication Users
   {
@@ -75,5 +76,11 @@ const RoutesDataUser = [
     private: <User_Private_Router_Layout_Main />,
     main: <Order_Screen />,
   },
+  //* Transaction Success
+  {
+    path: "transaction/success",
+    private: <User_Private_Router_Layout_Main />,
+    main: <Transaction_Success />,
+  },
 ];
 export default RoutesDataUser;

frontend/src/v1/styles/Transaction_Style/CartBuySuccessStyle.js

@@ -0,0 +1,95 @@
+import { createGlobalStyle } from "styled-components";
+
+export const CartBuySuccessStyle = createGlobalStyle`
+.success-wrapper, .cancel-wrapper{
+    background-color: white;
+    min-height: 60vh;
+
+  }
+  .success, .cancel{
+    width: 1000px;
+  margin: auto;
+  margin-top: 100px;
+    background-color: #dcdcdc;
+    padding: 50px;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom:2rem;
+  }
+
+  .success .icon {
+     color: green;
+     font-size: 40px;
+  }
+  .success h2{
+    text-transform: capitalize;
+    margin-top: 15px 0px;
+    font-weight: 900;
+    font-size: 40px;
+    color:#324d67;
+  }
+  .success .email-msg{
+     font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+  }
+  .cancel p{
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .success .description{
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    margin: 10px;
+    margin-top: 30px;
+  }
+  .success .description .email{
+    margin-left: 5px;
+    color: #f02d34;
+  }
+
+  .btn{
+    width: 100%;
+    max-width: 400px;
+    padding: 10px 12px;
+    border-radius: 15px;
+    border: none;
+    font-size: 20px;
+    margin-top: 10px;
+    margin-top: 40px;
+    text-transform: uppercase;
+    background-color: #f02d34;
+    color: #fff;
+    cursor: pointer;
+      transform: scale(1, 1);
+    transition: transform 0.5s ease;
+  }
+  .btn:hover{
+    transform: scale(1.1,1.1);
+    color: #fff;
+  }
+  @media screen and (max-width:800px) {
+  .success-wrapper, .cancel-wrapper{
+
+    min-height: 69vh;
+  }
+  .success, .cancel {
+     width: 370px;
+    margin-top: 100px;
+    padding: 20px;
+  }
+  .success{
+    height: 350px;
+  }
+  .success h2{
+    font-size: 17px;
+  }
+  .btn-container{
+    width: 300px;
+    margin: auto;
+  }
+`;

frontend/src/v1/user_ui/components/Cart_Component/totals/Total_Cart.js

@@ -2,15 +2,16 @@ 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";
+import { TransactionPaypal } from "../../../imports/General_Global_Import";
 
 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));
   };
@@ -74,8 +75,11 @@ const Total_Cart = () => {
                 : total_user.total}
             </span>
           </div>
-
           <hr />
+
+          {/* Transaction Paypal */}
+          <TransactionPaypal />
+
         </>
       )}
     </React.Fragment>

frontend/src/v1/user_ui/components/Cart_Component/totals/components/Check_Stock.js

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react'
+import { useDispatch, useSelector } from "react-redux"
+import { Check_Stock_Product_Initial, Check_Total_Cart_Initial } from '../../../../../redux/payment_slice/Api_Redux_Thunk_Payment';
+import STORAGES from '../../../../../utils/storage';
+const Check_Stock = () => {
+    const { total_user, stock_transaction } = useSelector((state) => ({ ...state.payment_user }));
+
+    const dispatch = useDispatch();
+    const accessToken = STORAGES.getLocalStorage("accessToken");
+
+    const checkCountInStock = async () => {
+        dispatch(Check_Stock_Product_Initial(accessToken))
+    };
+    return (
+        <React.Fragment>
+            <button className="paypal" onClick={checkCountInStock}>
+                Check Count In Stock
+            </button>
+        </React.Fragment>
+    )
+}
+
+export default Check_Stock