diff --git a/public/address.svg b/public/address.svg new file mode 100644 index 0000000..ee6b1e8 --- /dev/null +++ b/public/address.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/public/lock.svg b/public/lock.svg new file mode 100644 index 0000000..47f24c4 --- /dev/null +++ b/public/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Modal/close.svg b/src/components/Modal/close.svg index 125967e..5d7c9ba 100644 --- a/src/components/Modal/close.svg +++ b/src/components/Modal/close.svg @@ -1,4 +1,7 @@ - - - - + + cross + + + \ No newline at end of file diff --git a/src/components/Modal/styles.module.css b/src/components/Modal/styles.module.css index 245e4c5..88003bc 100644 --- a/src/components/Modal/styles.module.css +++ b/src/components/Modal/styles.module.css @@ -1,5 +1,5 @@ .modal { - background: rgba(85,84,85,.8); + background: rgba(85, 84, 85, 0.8); height: 100dvh; position: fixed; left: 0; @@ -24,7 +24,7 @@ z-index: 3; border-radius: 16px; padding: 64px 24px 16px; - transform: translate(-50%,-50%); + transform: translate(-50%, -50%); } .modal-content::-webkit-scrollbar { @@ -38,16 +38,16 @@ align-items: center; border: none; border-radius: 20px; - height: 32px; + height: 20px; + aspect-ratio: 1 / 1; padding: 0; - right: 20px; + left: 15px; top: 16px; - width: 32px; cursor: pointer; - background-color: #eff2fd; - background-image: url(./close.svg); background-repeat: no-repeat; background-position: center; + background-color: transparent; + background-image: url(./close.svg); } .modal .main-btn { diff --git a/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx b/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx index 637ff8f..59340d1 100644 --- a/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx +++ b/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx @@ -10,6 +10,7 @@ import { import { useState } from "react"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; +import styles from "./styles.module.css"; interface ICheckoutFormProps { children?: JSX.Element | null; @@ -71,14 +72,18 @@ export default function CheckoutForm({ color="blue" disabled={isProcessing || !formReady} id="submit" + className={styles.button} > + Secure - {isProcessing ? "Processing..." : "Pay now"} + {isProcessing ? "Processing..." : "Start"} - - {message} - + {!!message.length && ( + + {message} + + )} ); } diff --git a/src/components/PaymentPage/methods/Stripe/styles.module.css b/src/components/PaymentPage/methods/Stripe/styles.module.css index 1a43dab..9e23107 100644 --- a/src/components/PaymentPage/methods/Stripe/styles.module.css +++ b/src/components/PaymentPage/methods/Stripe/styles.module.css @@ -36,3 +36,18 @@ font-weight: 500; margin: 0; } + +.button { + min-height: 0; + height: 50px; + text-transform: uppercase; + background-color: #4caf50; + border-radius: 25px; + font-size: 16px; + gap: 8px; +} + +.button > img { + height: 18px; + margin-top: -5px; +} \ No newline at end of file diff --git a/src/components/StripePage/ApplePayButton/index.tsx b/src/components/StripePage/ApplePayButton/index.tsx index ba3e47d..ce9c77a 100644 --- a/src/components/StripePage/ApplePayButton/index.tsx +++ b/src/components/StripePage/ApplePayButton/index.tsx @@ -70,9 +70,14 @@ function ApplePayButton({ if (stripeError) { // Show error to your customer (e.g., insufficient funds) + navigate( + `${routes.client.paymentResult()}/${subscriptionReceiptId}/?redirect_status=failed` + ); return e.complete("fail"); } - navigate(`${routes.client.paymentResult()}/${subscriptionReceiptId}/`); + navigate( + `${routes.client.paymentResult()}/${subscriptionReceiptId}/?redirect_status=succeeded` + ); e.complete("success"); // Show a success message to your customer // There's a risk of the customer closing the window before callback diff --git a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx index 5fb253f..9351966 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx @@ -14,7 +14,12 @@ function PayPalButton({ isLoading, handlePayPalButton }: IPayPalButton) { className={styles["pay-pal-button"]} onClick={handlePayPalButton} > - {!isLoading && PayPal Button} + {!isLoading && ( +
+ PayPal Button +

Buy Now

+
+ )} {isLoading && } ); diff --git a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css b/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css index b75606d..8addff6 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css +++ b/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css @@ -1,9 +1,22 @@ .pay-pal-button { width: 100%; - height: 60px; + height: 50px; display: flex; align-items: center; justify-content: center; background-color: #ffc43a; border-radius: 7px; } + +.content { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.content > p { + margin-top: 6px; + font-size: 18px; + color: #2f2e37; +} diff --git a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx index 472a63b..646b839 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx @@ -7,8 +7,8 @@ import { Elements } from "@stripe/react-stripe-js"; import ApplePayButton from "@/components/StripePage/ApplePayButton"; import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm"; import { Stripe, loadStripe } from "@stripe/stripe-js"; -import { useDispatch, useSelector } from "react-redux"; -import { actions, selectors } from "@/store"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import { useApi } from "@/api"; import { useNavigate } from "react-router-dom"; @@ -26,12 +26,8 @@ function PaymentModal() { const api = useApi(); const { token } = useAuth(); const navigate = useNavigate(); - const dispatch = useDispatch(); const activeSubPlan = useSelector(selectors.selectActiveSubPlan); const [payPalSubPlan, setPayPalSubPlan] = useState(); - const subscriptionReceiptFromStore = useSelector( - selectors.selectSubscriptionReceipt - ); const [stripePromise, setStripePromise] = useState | null>(null); const [clientSecret, setClientSecret] = useState(""); @@ -40,11 +36,11 @@ function PaymentModal() { const [subPlans, setSubPlans] = useState(null); const [isLoading, setIsLoading] = useState(true); const [isLoadingPayPal, setIsLoadingPayPal] = useState(false); - const [isError, setIsError] = useState(false); const [errors, setErrors] = useState(""); + const [isError, setIsError] = useState(false); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState( - EPaymentMethod.CREDIT_CARD + EPaymentMethod.PAYPAL_OR_APPLE_PAY ); const onSelectPaymentMethod = (method: EPaymentMethod) => { @@ -76,47 +72,17 @@ function PaymentModal() { sub_plan_id: activeSubPlan?.id || "stripe.7", }, }); - - if (!subscription_receipt && !subscriptionReceiptFromStore) { - setIsError(true); - setIsLoading(false); - } else if (!subscription_receipt && subscriptionReceiptFromStore) { - const { id } = subscriptionReceiptFromStore; - const { client_secret } = subscriptionReceiptFromStore.data; - setSubscriptionReceiptId(id); - setClientSecret(client_secret); - setIsLoading(false); - } else if (subscription_receipt) { - dispatch( - actions.payment.update({ - subscriptionReceipt: subscription_receipt, - }) - ); - const { id } = subscription_receipt; - const { client_secret } = subscription_receipt.data; - setSubscriptionReceiptId(id); - setClientSecret(client_secret); - setIsLoading(false); - } - console.log(subscription_receipt); + const { id } = subscription_receipt; + const { client_secret } = subscription_receipt.data; + setSubscriptionReceiptId(id); + setClientSecret(client_secret); + setIsLoading(false); } catch (error) { - if (subscriptionReceiptFromStore) { - console.log(1); - - const { id } = subscriptionReceiptFromStore; - const { client_secret } = subscriptionReceiptFromStore.data; - setSubscriptionReceiptId(id); - setClientSecret(client_secret); - setIsLoading(false); - return; - } else { - setIsError(true); - setIsLoading(false); - } - console.log(error); + console.error(error); + setIsError(true); } })(); - }, [activeSubPlan?.id, api, dispatch, subscriptionReceiptFromStore, token]); + }, [activeSubPlan?.id, api, token]); useEffect(() => { if (!subPlans) return; @@ -191,18 +157,26 @@ function PaymentModal() { onSelectPaymentMethod={onSelectPaymentMethod} /> {activeSubPlan && ( -

- You will be charged only{" "} - - ${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day trial. - -

+
+

+ You will be charged only{" "} + + ${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day trial. + +

+

+ We`ll email you a reminder before your trial period ends. +

+

+ Cancel anytime. The charge will appear on your bill as witapps. +

+
)}
{stripePromise && clientSecret && subscriptionReceiptId && ( {selectedPaymentMethod === EPaymentMethod.PAYPAL_OR_APPLE_PAY && ( - <> +
)} {!!errors.length &&

{errors}

} - +
)} {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && ( @@ -225,6 +199,7 @@ function PaymentModal() { )}
+

500 N RAINBOW BLVD LAS VEGAS, NV 89107

); } diff --git a/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css b/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css index 900e309..8cf491b 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css +++ b/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css @@ -5,10 +5,11 @@ justify-content: center; min-height: 250px; gap: 25px; + color: #2f2e37; } .title { - font-weight: 800; + font-weight: 700; font-size: 20px; line-height: 20px; text-align: center; @@ -18,8 +19,26 @@ .sub-plan-description { font-size: 12px; text-align: center; + line-height: 150%; } .payment-method-container { width: 100%; } + +.address { + margin-bottom: 24px; +} + +.payment-method { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; +} + +.address { + color: gray; + font-size: 10px; +} \ No newline at end of file