diff --git a/src/pages/checkout/Checkout.tsx b/src/pages/checkout/Checkout.tsx index 4839d79a..8997c27c 100644 --- 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 ( <> - - - - - {showMustpay && ( - - Please complete payment before submitting. - - )} -

Need help? Contact us at support@engresume.com

diff --git a/src/pages/checkout/FormComponent.tsx b/src/pages/checkout/FormComponent.tsx index ea899adc..5ccfd7f9 100644 --- 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 = () => { - - {showMustpay && ( -
- Please complete payment before submitting. -
- )} ); }; diff --git a/src/pages/checkout/formSlice.ts b/src/pages/checkout/formSlice.ts index f126527f..8f746090 100644 --- a/src/pages/checkout/formSlice.ts +++ b/src/pages/checkout/formSlice.ts @@ -5,8 +5,6 @@ interface FormState { resume: string; notes: string; paid: boolean; - paymentId: string; - showMustpay: boolean; } const initialState: FormState = { @@ -14,8 +12,6 @@ const initialState: FormState = { resume: '', notes: '', paid: false, - paymentId: '', - showMustpay: false }; export const formSlice = createSlice({ @@ -34,15 +30,9 @@ export const formSlice = createSlice({ setPaid: (state, action: PayloadAction) => { state.paid = action.payload; }, - setPaymentId: (state, action: PayloadAction) => { - state.paymentId = action.payload; - }, - setShowMustpay: (state, action: PayloadAction) => { - 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 index 931dfff3..2ee797fd 100644 --- 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 (