From 4c3ddcebeac300a8d0ccc1e80d5e773535c977c1 Mon Sep 17 00:00:00 2001
From: Samil Abud <samilabud@gmail.com>
Date: Sat, 11 Nov 2023 18:07:42 -0400
Subject: [PATCH] Fixing comments and unused code

---
 .../payment-form/payment-form.component.jsx   | 72 -------------------
 .../payment-form/payment-form.styles.jsx      | 21 ------
 .../stripe-button/stripe-button-component.jsx |  3 +-
 .../src/pages/checkout/checkout.component.jsx |  2 -
 4 files changed, 2 insertions(+), 96 deletions(-)
 delete mode 100644 client/src/components/payment-form/payment-form.component.jsx
 delete mode 100644 client/src/components/payment-form/payment-form.styles.jsx

diff --git a/client/src/components/payment-form/payment-form.component.jsx b/client/src/components/payment-form/payment-form.component.jsx
deleted file mode 100644
index 978489c..0000000
--- a/client/src/components/payment-form/payment-form.component.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useState } from 'react';
-import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
-import { useSelector } from 'react-redux';
-
-import { selectCartTotal } from '../../redux/cart/cart.selector';
-import { selectCurrentUser } from '../../redux/user/user.selectors';
-
-import { BUTTON_TYPE_CLASSES } from '../button/button.component';
-
-import { PaymentButton, PaymentFormContainer, FormContainer} from './payment-form.styles';
-
-const PaymentForm = () => {
-  const stripe = useStripe();
-  const elements = useElements();
-  const amount = useSelector(selectCartTotal);
-  const currentUser = useSelector(selectCurrentUser);
-  const [isProcessingPayment, setIsProcessingPayment] = useState(false);
-
-  const paymentHandler = async (e) => {
-    e.preventDefault();
-    if (!stripe || !elements) {
-      return;
-    }
-    setIsProcessingPayment(true);
-    const response = await fetch('/.netlify/functions/create-payment-intent', {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ amount: amount * 100 }),
-    }).then((res) => {
-      return res.json();
-    });
-
-    const clientSecret = response.paymentIntent.client_secret;
-
-    const paymentResult = await stripe.confirmCardPayment(clientSecret, {
-      payment_method: {
-        card: elements.getElement(CardElement),
-        billing_details: {
-          name: currentUser ? currentUser.displayName : 'Yihua Zhang',
-        },
-      },
-    });
-
-    setIsProcessingPayment(false);
-
-    if (paymentResult.error) {
-      alert(paymentResult.error.message);
-    } else {
-      if (paymentResult.paymentIntent.status === 'succeeded') {
-        alert('Payment Successful!');
-      }
-    }
-  };
-
-  return (
-    <PaymentFormContainer>
-      <FormContainer onSubmit={paymentHandler}>
-        <h2>Credit Card Payment:</h2>
-        <CardElement />
-        <PaymentButton
-          buttonType={BUTTON_TYPE_CLASSES.inverted}
-          isLoading={isProcessingPayment}
-        >
-          Pay Now
-        </PaymentButton>
-      </FormContainer>
-    </PaymentFormContainer>
-  );
-};
-export default PaymentForm;
\ No newline at end of file
diff --git a/client/src/components/payment-form/payment-form.styles.jsx b/client/src/components/payment-form/payment-form.styles.jsx
deleted file mode 100644
index 93b383d..0000000
--- a/client/src/components/payment-form/payment-form.styles.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-import Button from '../button/button.component';
-
-export const PaymentFormContainer = styled.div`
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const FormContainer = styled.form`
-  height: 100px;
-  min-width: 500px;
-`;
-
-export const PaymentButton = styled(Button)`
-  margin-left: auto;
-  margin-top: 30px;
-`;
\ No newline at end of file
diff --git a/client/src/components/stripe-button/stripe-button-component.jsx b/client/src/components/stripe-button/stripe-button-component.jsx
index fa8caeb..6348f33 100644
--- a/client/src/components/stripe-button/stripe-button-component.jsx
+++ b/client/src/components/stripe-button/stripe-button-component.jsx
@@ -3,12 +3,13 @@ import StripeCheckout from 'react-stripe-checkout';
 import axios from 'axios';
 
 const StripeCheckoutButton = ({price}) => {
+    const backendURL = process.env.BACKEND_URL ? process.env.BACKEND_URL : '';
     const priceForStripe = price * 100;
     const publishablekey = 'pk_test_51IfAwgF7VDSpoZmOV8VtWIwE4hJOLce3ch0DPT5DkwR8Gm0g8DWhqqxGmI3qkSywYrnGEbdIbhaNNXpbTTpzWgGO00J2aOGAhi';
     //const secretkey = 'sk_test_51IfAwgF7VDSpoZmO90Kbmy03DFqIOQxE6r6niC190Z79kp94GJIILU8bGTjlFlOIN9TD4LTxdaoFCeQ3HzkPLXiw00sifdGSKj';
     const onToken = () => {
         axios({
-            url: 'payment',
+            url: `${backendURL}payment`,
             method: 'post',
             data:{
                 amount: priceForStripe,
diff --git a/client/src/pages/checkout/checkout.component.jsx b/client/src/pages/checkout/checkout.component.jsx
index 7c17e52..eaf7e1e 100644
--- a/client/src/pages/checkout/checkout.component.jsx
+++ b/client/src/pages/checkout/checkout.component.jsx
@@ -5,7 +5,6 @@ import { createStructuredSelector } from 'reselect'
 import { selectCartItems, selectCartTotal } from '../../redux/cart/cart.selector';
 
 import CheckoutItem from '../../components/checkout-item/checkout-item.component';
-// import PaymentForm from "../../components/payment-form/payment-form.component";
 import StripeCheckoutButton from '../../components/stripe-button/stripe-button-component';
 
 import './checkout.styles.scss';
@@ -43,7 +42,6 @@ const CheckoutPage = ({cartItems, cartTotal}) => (
             4242 4242 4242 4242 - Exp: 01/25 - CVV: 123
         </div>
         <StripeCheckoutButton price={cartTotal} />
-        {/* <PaymentForm /> */}
     </div>
 )
 const mapStateToProps = createStructuredSelector({