Make flow simply a checkout button

OpenRedSoftware · Jul 13, 2023 · 11e145f · 11e145f
1 parent 0bb2289
commit 11e145f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 76 deletions.
diff --git a/src/pages/checkout/Checkout.tsx b/src/pages/checkout/Checkout.tsx
@@ -1,59 +1,13 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useEffect } from "react";
+import React from "react";
 import Button from "react-bootstrap/Button";
-import { logevent } from "../../firebase/firebaseapp";
-import { Alert } from "react-bootstrap";
 import FormComponent from "./FormComponent";
-import { useSelector, useDispatch } from 'react-redux';
-import { RootState } from './store';
-import { setPaymentId, setPaid } from "./formSlice";
 
 function Checkout() {
-  const dev = window.location.hostname === "localhost";
-
-  const { paid, showMustpay } = useSelector((state: RootState) => state.form);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const id = urlParams.get("id");
-    if (id) {
-      dispatch(setPaid(true));
-      dispatch(setPaymentId(id));
-    }
-
-    logevent("view", { name: window.location.pathname });
-  }, [dispatch]);
 
   return (
     <>
       <FormComponent />
 
-      <a
-        href={
-          paid
-            ? "#"
-            : dev
-            ? "https://buy.stripe.com/test_dR62bE7Py3ks75e7ss"
-            : "https://buy.stripe.com/28og1KgbZ3ZG7aE9AA"
-        }
-        rel="noreferrer"
-      >
-        <Button
-          className={
-            !paid ? "btn btn-primary" : "btn btn-secondary"
-          }
-        >
-          {paid ? "Payment Complete" : "Complete Payment"}
-        </Button>
-      </a>
-
-      {showMustpay && (
-        <Alert variant="danger" className="mt-3">
-          Please complete payment before submitting.
-        </Alert>
-      )}
-
       <p className="text-muted mt-3">
         Need help? Contact us at [email protected]
       </p>

diff --git a/src/pages/checkout/FormComponent.tsx b/src/pages/checkout/FormComponent.tsx
@@ -3,15 +3,21 @@ import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "./store";
-import { setShowMustpay, setEmail, setResume, setNotes } from "./formSlice";
+import { setEmail, setResume, setNotes } from "./formSlice";
 
 const FormComponent: React.FC = () => {
   const [triedSubmit, setTriedSubmit] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const { email, resume, notes, paid, paymentId, showMustpay } = useSelector(
+  const { email, resume, notes } = useSelector(
     (state: RootState) => state.form
   );
+
+  const stripeLink =
+    window.location.hostname === "localhost"
+      ? "https://buy.stripe.com/test_dR62bE7Py3ks75e7ss"
+      : "https://buy.stripe.com/28og1KgbZ3ZG7aE9AA";
+
   const dispatch = useDispatch();
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -22,11 +28,6 @@ const FormComponent: React.FC = () => {
       return;
     }
 
-    if (!paid) {
-      dispatch(setShowMustpay(true));
-      return;
-    }
-
     const fileInput = document.getElementById(
       "formBasicResume"
     ) as HTMLInputElement;
@@ -54,7 +55,6 @@ const FormComponent: React.FC = () => {
     formData.append("resume", resumeFile);
     formData.append("email", email);
     formData.append("notes", notes);
-    formData.append("paymentId", paymentId);
 
     setIsSubmitting(true);
 
@@ -63,8 +63,8 @@ const FormComponent: React.FC = () => {
       body: formData,
     })
       .then((res) => {
-        // Redirect the user to /success page
-        window.location.href = "/success";
+        // Redirect the user to Stripe Checkout
+        window.location.href = stripeLink;
       })
       .catch((err) => {
         alert(
@@ -132,14 +132,8 @@ const FormComponent: React.FC = () => {
       </Form.Group>
 
       <Button variant="primary" type="submit" disabled={isSubmitting}>
-        {!isSubmitting ? "Submit" : "Submitting..."}
+        Continue to Checkout
       </Button>
-
-      {showMustpay && (
-        <div className="alert alert-danger mt-3">
-          Please complete payment before submitting.
-        </div>
-      )}
     </Form>
   );
 };

diff --git a/src/pages/checkout/formSlice.ts b/src/pages/checkout/formSlice.ts
@@ -5,17 +5,13 @@ interface FormState {
   resume: string;
   notes: string;
   paid: boolean;
-  paymentId: string;
-  showMustpay: boolean;
 }
 
 const initialState: FormState = {
   email: '',
   resume: '',
   notes: '',
   paid: false,
-  paymentId: '',
-  showMustpay: false
 };
 
 export const formSlice = createSlice({
@@ -34,15 +30,9 @@ export const formSlice = createSlice({
     setPaid: (state, action: PayloadAction<boolean>) => {
       state.paid = action.payload;
     },
-    setPaymentId: (state, action: PayloadAction<string>) => {
-      state.paymentId = action.payload;
-    },
-    setShowMustpay: (state, action: PayloadAction<boolean>) => {
-      state.showMustpay = action.payload;
-    },
   },
 });
 
-export const { setEmail, setResume, setNotes, setPaid, setPaymentId, setShowMustpay } = formSlice.actions;
+export const { setEmail, setResume, setNotes, setPaid } = formSlice.actions;
 
 export default formSlice.reducer;
diff --git a/src/pages/checkout/index.tsx b/src/pages/checkout/index.tsx
@@ -1,10 +1,15 @@
 import { Provider } from "react-redux";
 import store from "./store";
 import SEO from "../../components/SEO";
-import React from "react";
+import React, { useEffect } from "react";
 import Checkout from "./Checkout";
+import { logevent } from "../../firebase/firebaseapp";
 
 function CheckoutWrapper() {
+  useEffect(() => {
+    logevent("view", { name: window.location.pathname });
+  });
+
   return (
     <Provider store={store}>
       <SEO