#93 frontend

fdhhhdjd · Nov 5, 2022 · 9b3d3c9 · 9b3d3c9
1 parent 19a5f7c
commit 9b3d3c9
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 18 deletions.
diff --git a/dump.rdb b/dump.rdb
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -21,6 +21,9 @@ textarea:focus,
 .stripe {
   background-color: rgb(99, 91, 255) !important;
 }
+.stripe:hover{
+  font-size: 1rem;
+}
 .stripe1 {
   background-color: white !important;
 }

diff --git a/frontend/src/v1/configs/Apis/Payment_Api/Api_Payment.js b/frontend/src/v1/configs/Apis/Payment_Api/Api_Payment.js
@@ -8,6 +8,9 @@ const API_PAYMENT = {
   // * TRANSACTION PAYPAL
   API_TRANSACTION_PAYMENT: "/api/payment/paypal",
 
+  // * TRANSACTION TRIPE
+  API_TRANSACTION_PAYMENT_STRIPE: "/api/payment/stripe",
+
   //* CHECK TOTAL PAYMENT
   API_TOTAL_PAYMENT: "/api/payment/total"
 };

diff --git a/frontend/src/v1/redux/payment_slice/Api_Redux_Thunk_Payment.js b/frontend/src/v1/redux/payment_slice/Api_Redux_Thunk_Payment.js
@@ -94,3 +94,26 @@ export const Transaction_Payment_Initial = createAsyncThunk(
     }
   }
 );
+
+export const Transaction_Payment_Stripe_Initial = createAsyncThunk(
+  "Payment/Transaction/Stripe",
+  async (accessToken, { rejectWithValue }) => {
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+    try {
+      const response = await axios.get(
+        `${API_PAYMENT.API_TRANSACTION_PAYMENT_STRIPE}`,
+        config
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
diff --git a/frontend/src/v1/redux/payment_slice/payment_slice.js b/frontend/src/v1/redux/payment_slice/payment_slice.js
@@ -1,5 +1,8 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { Get_Detail_User_Payment_Initial, Check_Stock_Product_Initial, Check_Total_Cart_Initial, Transaction_Payment_Initial } from "./Api_Redux_Thunk_Payment";
+import {
+  Get_Detail_User_Payment_Initial, Check_Stock_Product_Initial, Check_Total_Cart_Initial,
+  Transaction_Payment_Initial, Transaction_Payment_Stripe_Initial
+} from "./Api_Redux_Thunk_Payment";
 const initialState = {
   loading: false,
   error: null,
@@ -63,7 +66,7 @@ const Payments = createSlice({
       state.loading = false;
       state.error = action.payload;
     },
-    //* Transaction Payment
+    //* Transaction Payment Paypal
     [Transaction_Payment_Initial.pending]: (state, action) => {
       state.loading = true;
     },
@@ -75,6 +78,18 @@ const Payments = createSlice({
       state.loading = false;
       state.error = action.payload;
     },
+    //* Transaction Payment Paypal
+    [Transaction_Payment_Stripe_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Transaction_Payment_Stripe_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.transaction = action.payload.element;
+    },
+    [Transaction_Payment_Stripe_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
   },
 });
 const Payment_Slice = Payments.reducer;

diff --git a/frontend/src/v1/user_ui/components/Cart_Component/totals/components/Transaction_Paypal.js b/frontend/src/v1/user_ui/components/Cart_Component/totals/components/Transaction_Paypal.js
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom'
 import { Transaction_Payment_Initial } from '../../../../../redux/payment_slice/Api_Redux_Thunk_Payment';
 import STORAGES from '../../../../../utils/storage';
-import { Paypal, Check_Stock } from '../../../../imports/General_Global_Import'
+import { Paypal, Check_Stock, TransactionStripe } from '../../../../imports/General_Global_Import'
 const Transaction_Paypal = () => {
   const { stock_transaction, total_payment, transaction } = useSelector((state) => ({ ...state.payment_user }));
 
@@ -24,21 +24,29 @@ const Transaction_Paypal = () => {
   return (
     <React.Fragment>
       <div className="cart-buttons d-flex align-items-center row">
-        <Link to="/" className="col-md-6 ">
-          <button>Continue To Shopping.</button>
-        </Link>
-        <div className="col-md-6 d-flex justify-content-md-end mt-3 mt-md-0">
-          {stock_transaction && total_payment ? (
-            <button className="paypal">
-              <Paypal total={total_payment.total} tranSuccess={tranSuccess} />
-            </button>
-          ) : (
-            <Check_Stock />
-          )}
-        </div>
-
-      </div>
-    </React.Fragment>
+        {stock_transaction && total_payment ? (
+          <React.Fragment>
+            <div className="col-md-6 ">
+              <TransactionStripe />
+            </div>
+            <div className="col-md-6 d-flex justify-content-md-end mt-3 mt-md-0">
+              <button className="paypal">
+                <Paypal total={total_payment.total} tranSuccess={tranSuccess} />
+              </button>
+            </div>
+          </React.Fragment>
+        ) :
+          <React.Fragment>
+            <Link to="/" className="col-md-6 ">
+              <button>Continue To Shopping.</button>
+            </Link>
+            <div className="col-md-6 d-flex justify-content-md-end mt-3 mt-md-0">
+              <Check_Stock />
+            </div>
+          </React.Fragment>
+        }
+      </div >
+    </React.Fragment >
   )
 }
 

diff --git a/frontend/src/v1/user_ui/components/Cart_Component/totals/components/Transaction_Stripe.js b/frontend/src/v1/user_ui/components/Cart_Component/totals/components/Transaction_Stripe.js
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { Transaction_Payment_Stripe_Initial } from '../../../../../redux/payment_slice/Api_Redux_Thunk_Payment';
+import STORAGES from '../../../../../utils/storage';
+
+const Transaction_Stripe = () => {
+    const dispatch = useDispatch();
+    const { transaction } = useSelector((state) => ({ ...state.payment_user }));
+
+    const accessToken = STORAGES.getLocalStorage("accessToken");
+
+    const handlePaymentStripe = () => {
+        if (accessToken) {
+            dispatch(Transaction_Payment_Stripe_Initial(accessToken))
+        }
+    }
+    useEffect(() => {
+        if (transaction) {
+            window.location.href = `${transaction.payment_url}`;
+        }
+    }, [transaction])
+    return (
+        <button className="stripe" onClick={handlePaymentStripe}>
+            Transaction_Stripe
+        </button>
+    )
+}
+
+export default Transaction_Stripe
diff --git a/frontend/src/v1/user_ui/imports/General_Global_Import.js b/frontend/src/v1/user_ui/imports/General_Global_Import.js
@@ -76,6 +76,9 @@ export { default as Paypal } from "../components/Paypal/Paypal"
 //* Transaction Paypal
 export { default as TransactionPaypal } from "../components/Cart_Component/totals/components/Transaction_Paypal"
 
+//* Transaction Stripe
+export { default as TransactionStripe } from "../components/Cart_Component/totals/components/Transaction_Stripe"
+
 //* Transaction check Stock
 export { default as Check_Stock } from "../components/Cart_Component/totals/components/Check_Stock"