From 38e1779cf60a9382386276a312309d1c0ffea24b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Wed, 24 Apr 2024 14:53:38 +0000 Subject: [PATCH 1/7] AW-45-deletePayPal --- src/api/resources/UserSubscriptionReceipts.ts | 23 ----- .../PaymentPage/methods/PayPal/Button.tsx | 15 --- .../PaymentPage/methods/Stripe/Modal.tsx | 6 +- .../StripePage/ApplePayButton/index.tsx | 7 +- src/components/StripePage/index.tsx | 6 +- src/components/SubPlanInformation/index.tsx | 67 ------------- .../components/PaymentMethodsChoice/index.tsx | 4 +- .../PaymentMethodsChoice/styles.module.css | 2 +- .../components/PayPalButton/index.tsx | 28 ------ .../components/PayPalButton/styles.module.css | 36 ------- .../components/PaymentModal/index.tsx | 97 ++++++------------- .../index.tsx | 5 +- .../styles.module.css | 0 src/data/paymentMethods.tsx | 10 +- 14 files changed, 51 insertions(+), 255 deletions(-) delete mode 100644 src/components/PaymentPage/methods/PayPal/Button.tsx delete mode 100644 src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx delete mode 100644 src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css rename src/components/ui/PaymentMethodsButtons/{PayPayOrApplePay => PaymentButtons}/index.tsx (58%) rename src/components/ui/PaymentMethodsButtons/{PayPayOrApplePay => PaymentButtons}/styles.module.css (100%) diff --git a/src/api/resources/UserSubscriptionReceipts.ts b/src/api/resources/UserSubscriptionReceipts.ts index 906a9b1..1bddd7b 100644 --- a/src/api/resources/UserSubscriptionReceipts.ts +++ b/src/api/resources/UserSubscriptionReceipts.ts @@ -19,17 +19,9 @@ export interface StripeReceiptPayload extends AuthPayload { }; } -export interface PayPalReceiptPayload extends AuthPayload { - subscription_receipt: { - sub_plan_id: string; - }; - way: "paypal"; -} - export type Payload = | AppleReceiptPayload | StripeReceiptPayload - | PayPalReceiptPayload; export interface Response { subscription_receipt: SubscriptionReceipt; @@ -58,19 +50,12 @@ export interface SubscriptionReceipt { app_bundle_id: string; autorenewable: boolean; error: string; - links?: IPayPalLink[]; stripe_status?: string; checkout_url?: string; checkout_session?: unknown; }; } -interface IPayPalLink { - href: string; - rel: "approve" | "edit" | "self"; - method: "GET" | "PATCH"; -} - function createRequest({ token, receiptData, @@ -101,14 +86,6 @@ function getDataPayload(payload: Payload) { }, }; } - if ("way" in payload && payload.way === "paypal") { - return { - way: "paypal", - subscription_receipt: { - sub_plan_id: payload.subscription_receipt.sub_plan_id, - }, - }; - } if ("way" in payload && payload.way === "stripe") { return { way: "stripe", diff --git a/src/components/PaymentPage/methods/PayPal/Button.tsx b/src/components/PaymentPage/methods/PayPal/Button.tsx deleted file mode 100644 index 78e32a5..0000000 --- a/src/components/PaymentPage/methods/PayPal/Button.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useTranslation } from "react-i18next"; -import MainButton from "@/components/MainButton"; - -interface IPayPalButtonProps { - onClick: () => void; -} - -export function PayPalButton({ onClick }: IPayPalButtonProps): JSX.Element { - const { t } = useTranslation(); - return ( - - {t("payPal")} - - ); -} diff --git a/src/components/PaymentPage/methods/Stripe/Modal.tsx b/src/components/PaymentPage/methods/Stripe/Modal.tsx index b37d61c..cea4896 100644 --- a/src/components/PaymentPage/methods/Stripe/Modal.tsx +++ b/src/components/PaymentPage/methods/Stripe/Modal.tsx @@ -14,7 +14,6 @@ import ApplePayButton from "@/components/StripePage/ApplePayButton"; import SubPlanInformation from "@/components/SubPlanInformation"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; -import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import routes from "@/routes"; interface StripeModalProps { @@ -39,7 +38,6 @@ StripeModalProps): JSX.Element { const email = useSelector(selectors.selectUser).email; const [stripePromise, setStripePromise] = useState | null>(null); - const [subPlans, setSubPlans] = useState(null); const [clientSecret, setClientSecret] = useState(""); const [subscriptionReceiptId, setSubscriptionReceiptId] = useState(""); @@ -53,7 +51,6 @@ StripeModalProps): JSX.Element { const siteConfig = await api.getAppConfig({ bundleId: "auraweb" }); setStripePromise(loadStripe(siteConfig.data.stripe_public_key)); const { sub_plans } = await api.getSubscriptionPlans({ locale }); - setSubPlans(sub_plans); const isActiveSubPlan = sub_plans.find( (subPlan) => subPlan.id === activeSubPlan?.id ); @@ -78,6 +75,7 @@ StripeModalProps): JSX.Element { setClientSecret(client_secret); setIsLoading(false); })(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [api, token]); const handleClose = () => { @@ -107,7 +105,7 @@ StripeModalProps): JSX.Element { subscriptionReceiptId={subscriptionReceiptId} /> {activeSubPlan && ( - + )} diff --git a/src/components/StripePage/ApplePayButton/index.tsx b/src/components/StripePage/ApplePayButton/index.tsx index 82ba844..02b1828 100644 --- a/src/components/StripePage/ApplePayButton/index.tsx +++ b/src/components/StripePage/ApplePayButton/index.tsx @@ -16,6 +16,7 @@ interface ApplePayButtonProps { client_secret: string; subscriptionReceiptId?: string; returnUrl?: string; + setCanMakePayment?: (isCanMakePayment: boolean) => void; } function ApplePayButton({ @@ -23,6 +24,7 @@ function ApplePayButton({ client_secret, subscriptionReceiptId, returnUrl, + setCanMakePayment, }: ApplePayButtonProps) { const stripe = useStripe(); const elements = useElements(); @@ -58,6 +60,7 @@ function ApplePayButton({ pr.canMakePayment().then((result) => { if (result) { setPaymentRequest(pr); + setCanMakePayment?.(true); } }); @@ -80,7 +83,8 @@ function ApplePayButton({ return e.complete("fail"); } navigate( - returnUrl || `${routes.client.paymentResult()}/${subscriptionReceiptId}/?redirect_status=succeeded` + returnUrl || + `${routes.client.paymentResult()}/${subscriptionReceiptId}/?redirect_status=succeeded` ); e.complete("success"); // Show a success message to your customer @@ -89,6 +93,7 @@ function ApplePayButton({ // payment_intent.succeeded event that handles any business critical // post-payment actions. }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ activeSubPlan, client_secret, diff --git a/src/components/StripePage/index.tsx b/src/components/StripePage/index.tsx index 012fc84..5b6336e 100644 --- a/src/components/StripePage/index.tsx +++ b/src/components/StripePage/index.tsx @@ -13,7 +13,6 @@ import routes from "@/routes"; import SubPlanInformation from "../SubPlanInformation"; import Title from "../Title"; import { useTranslation } from "react-i18next"; -import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import ApplePayButton from "./ApplePayButton"; export function StripePage(): JSX.Element { @@ -26,7 +25,6 @@ export function StripePage(): JSX.Element { const email = useSelector(selectors.selectUser).email; const [stripePromise, setStripePromise] = useState | null>(null); - const [subPlans, setSubPlans] = useState(null); const [clientSecret, setClientSecret] = useState(""); const [subscriptionReceiptId, setSubscriptionReceiptId] = useState(""); @@ -40,7 +38,6 @@ export function StripePage(): JSX.Element { const siteConfig = await api.getAppConfig({ bundleId: "auraweb" }); setStripePromise(loadStripe(siteConfig.data.stripe_public_key)); const { sub_plans } = await api.getSubscriptionPlans({ locale }); - setSubPlans(sub_plans); const isActiveSubPlan = sub_plans.find( (subPlan) => subPlan.id === activeSubPlan?.id ); @@ -65,6 +62,7 @@ export function StripePage(): JSX.Element { setClientSecret(client_secret); setIsLoading(false); })(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [api, token]); return ( @@ -90,7 +88,7 @@ export function StripePage(): JSX.Element { subscriptionReceiptId={subscriptionReceiptId} /> {activeSubPlan && ( - + )} diff --git a/src/components/SubPlanInformation/index.tsx b/src/components/SubPlanInformation/index.tsx index 7e1f270..5d991fa 100644 --- a/src/components/SubPlanInformation/index.tsx +++ b/src/components/SubPlanInformation/index.tsx @@ -2,16 +2,10 @@ import { useTranslation } from "react-i18next"; import styles from "./styles.module.css"; import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import TotalToday from "./TotalToday"; -import MainButton from "../MainButton"; -import { useApi } from "@/api"; -import { useAuth } from "@/auth"; -import { useEffect, useState } from "react"; -import Loader from "../Loader"; import ApplePayButton from "../StripePage/ApplePayButton"; interface ISubPlanInformationProps { subPlan: ISubscriptionPlan; - subPlans: ISubscriptionPlan[] | null; client_secret?: string; } @@ -23,58 +17,9 @@ const getPrice = (plan: ISubscriptionPlan): string => { function SubPlanInformation({ subPlan, - subPlans, client_secret, }: ISubPlanInformationProps): JSX.Element { const { t } = useTranslation(); - const api = useApi(); - const { token } = useAuth(); - const [payPalSubPlan, setPayPalSubPlan] = useState(); - const [errors, setErrors] = useState(""); - const [isLoading, setIsLoading] = useState(false); - - useEffect(() => { - if (!subPlans) return; - const paypalPlan = subPlans - .filter((plan: ISubscriptionPlan) => plan.provider === "paypal") - .filter((plan: ISubscriptionPlan) => { - if (subPlan?.trial && plan?.trial) return true; - if (!subPlan?.trial && !plan?.trial) return true; - return false; - }) - .find((plan: ISubscriptionPlan) => { - if (subPlan?.trial && plan?.trial) { - return plan?.trial?.price_cents === subPlan?.trial?.price_cents; - } - if (!subPlan?.trial && !plan?.trial) { - return plan?.name === subPlan?.name; - } - return false; - }); - setPayPalSubPlan(paypalPlan); - }, [subPlan?.name, subPlan?.trial, subPlans]); - - const handlePayPalButton = async () => { - setIsLoading(true); - const { - subscription_receipt: { data }, - } = await api.createSubscriptionReceipt({ - token, - way: "paypal", - subscription_receipt: { - sub_plan_id: payPalSubPlan?.id || "paypal.6", - }, - }); - if (!data?.links) { - return setErrors("Something went wrong. Please try again later."); - } - const link = data.links.find((link) => link.rel === "approve"); - if (!link) { - return setErrors("Something went wrong. Please try again later."); - } - setIsLoading(false); - window.location.href = link.href; - }; return (
@@ -82,21 +27,9 @@ function SubPlanInformation({ {client_secret && ( )} - {payPalSubPlan && ( - - {!isLoading && PayPal Button} - {isLoading && } - - )} - {/* */}

{t("auweb.pay.information").replaceAll("%@", getPrice(subPlan))}.

- {!!errors.length &&

{errors}

}
); } diff --git a/src/components/pages/TrialPayment/components/PaymentMethodsChoice/index.tsx b/src/components/pages/TrialPayment/components/PaymentMethodsChoice/index.tsx index 950eea6..a340ef9 100644 --- a/src/components/pages/TrialPayment/components/PaymentMethodsChoice/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentMethodsChoice/index.tsx @@ -1,13 +1,15 @@ -import { EPaymentMethod, paymentMethods } from "@/data/paymentMethods"; +import { EPaymentMethod, IPaymentMethod } from "@/data/paymentMethods"; import styles from "./styles.module.css"; interface IPaymentMethodsChoiceProps { selectedPaymentMethod: EPaymentMethod; onSelectPaymentMethod: (method: EPaymentMethod) => void; + paymentMethods: IPaymentMethod[]; } function PaymentMethodsChoice({ selectedPaymentMethod, + paymentMethods, onSelectPaymentMethod, }: IPaymentMethodsChoiceProps) { return ( diff --git a/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css b/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css index bcdd5ae..cf0a832 100644 --- a/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css +++ b/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css @@ -1,7 +1,7 @@ .payment-methods { width: 100%; display: flex; - justify-content: space-between; + justify-content: space-around; gap: 8px; } diff --git a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx deleted file mode 100644 index 9351966..0000000 --- a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import MainButton from "@/components/MainButton"; -import styles from "./styles.module.css"; -import Loader from "@/components/Loader"; - -interface IPayPalButton { - isLoading: boolean; - handlePayPalButton: () => void; -} - -function PayPalButton({ isLoading, handlePayPalButton }: IPayPalButton) { - return ( - - {!isLoading && ( -
- PayPal Button -

Buy Now

-
- )} - {isLoading && } - - ); -} - -export default PayPalButton; 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 deleted file mode 100644 index 2c6b967..0000000 --- a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.pay-pal-button { - width: 100%; - height: 50px; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffc43a; - border-radius: 7px; - max-width: 300px; -} - -.content { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; -} - -.content > p { - margin-top: 6px; - font-size: 18px; - color: #2f2e37; -} - -.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 43f70ef..36aea09 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx @@ -1,8 +1,8 @@ import Title from "@/components/Title"; import styles from "./styles.module.css"; import PaymentMethodsChoice from "../PaymentMethodsChoice"; -import { useEffect, useState } from "react"; -import { EPaymentMethod } from "@/data/paymentMethods"; +import { useEffect, useMemo, useState } from "react"; +import { EPaymentMethod, paymentMethods } from "@/data/paymentMethods"; import { Elements } from "@stripe/react-stripe-js"; import ApplePayButton from "@/components/StripePage/ApplePayButton"; import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm"; @@ -18,7 +18,6 @@ import { useAuth } from "@/auth"; import Loader from "@/components/Loader"; import { getPriceFromTrial } from "@/services/price"; import SecurityPayments from "../SecurityPayments"; -import PayPalButton from "./components/PayPalButton"; interface IPaymentModalProps { activeSubscriptionPlan?: ISubscriptionPlan; @@ -26,7 +25,11 @@ interface IPaymentModalProps { returnUrl?: string; } -function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentModalProps) { +function PaymentModal({ + activeSubscriptionPlan, + noTrial, + returnUrl, +}: IPaymentModalProps) { const { i18n } = useTranslation(); const locale = i18n.language; const api = useApi(); @@ -36,20 +39,29 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo const activeSubPlan = activeSubscriptionPlan ? activeSubscriptionPlan : activeSubPlanFromStore; - const [payPalSubPlan, setPayPalSubPlan] = useState(); const [stripePromise, setStripePromise] = useState | null>(null); const [clientSecret, setClientSecret] = useState(""); const [subscriptionReceiptId, setSubscriptionReceiptId] = useState(""); - const [subPlans, setSubPlans] = useState(null); const [isLoading, setIsLoading] = useState(true); - const [isLoadingPayPal, setIsLoadingPayPal] = useState(false); - const [errors, setErrors] = useState(""); const [isError, setIsError] = useState(false); + const [isStripePaymentButtonEnabled, setIsStripePaymentButtonEnabled] = + useState(false); + + const paymentMethodsButtons = useMemo(() => { + if (!isStripePaymentButtonEnabled) { + return paymentMethods.filter( + (method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS + ); + } + return paymentMethods; + }, [isStripePaymentButtonEnabled]); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState( - EPaymentMethod.PAYPAL_OR_APPLE_PAY + isStripePaymentButtonEnabled + ? EPaymentMethod.PAYMENT_BUTTONS + : EPaymentMethod.CREDIT_CARD ); const onSelectPaymentMethod = (method: EPaymentMethod) => { @@ -59,12 +71,8 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo useEffect(() => { (async () => { const siteConfig = await api.getAppConfig({ bundleId: "auraweb" }); - // const isProduction = import.meta.env.MODE === "production"; - // const stripePublicKey = isProduction ? siteConfig.data.stripe_public_key : "pk_test_51Ndqf4IlX4lgwUxrlLWqfYWpo0Ic0BV7DfiZxfMYy838IZP8NLrwwZ5i0HhhbOQBGoQZe4Rrel1ziEk8mhQ2TE3500ETWZPBva"; - // setStripePromise(loadStripe(stripePublicKey)); setStripePromise(loadStripe(siteConfig.data.stripe_public_key)); const { sub_plans } = await api.getSubscriptionPlans({ locale }); - setSubPlans(sub_plans); const isActiveSubPlan = sub_plans.find( (subPlan) => subPlan.id === activeSubPlan?.id ); @@ -100,50 +108,6 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo })(); }, [activeSubPlan?.id, api, token]); - useEffect(() => { - if (!subPlans) return; - const paypalPlan = subPlans - .filter((plan: ISubscriptionPlan) => plan.provider === "paypal") - .filter((plan: ISubscriptionPlan) => { - if (activeSubPlan?.trial && plan?.trial) return true; - if (!activeSubPlan?.trial && !plan?.trial) return true; - return false; - }) - .find((plan: ISubscriptionPlan) => { - if (activeSubPlan?.trial && plan?.trial) { - return plan?.trial?.price_cents === activeSubPlan?.trial?.price_cents; - } - if (!activeSubPlan?.trial && !plan?.trial) { - return plan?.name === activeSubPlan?.name; - } - return false; - }); - setPayPalSubPlan(paypalPlan); - }, [activeSubPlan?.name, activeSubPlan?.trial, subPlans]); - - const handlePayPalButton = async () => { - setIsLoadingPayPal(true); - const { - subscription_receipt: { data }, - } = await api.createSubscriptionReceipt({ - token, - way: "paypal", - subscription_receipt: { - sub_plan_id: payPalSubPlan?.id || "paypal.6", - }, - }); - if (!data?.links) { - return setErrors("Something went wrong. Please try again later."); - } - const link = data.links.find((link) => link.rel === "approve"); - if (!link) { - return setErrors("Something went wrong. Please try again later."); - } - setIsLoadingPayPal(false); - window.location.href = link.href; - // window.open(link.href, '_blank'); - }; - if (isLoading) { return (
@@ -170,6 +134,7 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo Choose payment method @@ -180,7 +145,8 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo

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

@@ -197,26 +163,23 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo

{stripePromise && clientSecret && ( - {selectedPaymentMethod === EPaymentMethod.PAYPAL_OR_APPLE_PAY && ( + {selectedPaymentMethod === EPaymentMethod.PAYMENT_BUTTONS && (
- {payPalSubPlan && ( - - )} - {!!errors.length &&

{errors}

}
)} {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && ( - + )} )} diff --git a/src/components/ui/PaymentMethodsButtons/PayPayOrApplePay/index.tsx b/src/components/ui/PaymentMethodsButtons/PaymentButtons/index.tsx similarity index 58% rename from src/components/ui/PaymentMethodsButtons/PayPayOrApplePay/index.tsx rename to src/components/ui/PaymentMethodsButtons/PaymentButtons/index.tsx index 9b9b4b1..dd1721a 100644 --- a/src/components/ui/PaymentMethodsButtons/PayPayOrApplePay/index.tsx +++ b/src/components/ui/PaymentMethodsButtons/PaymentButtons/index.tsx @@ -1,10 +1,9 @@ import styles from "./styles.module.css"; -function PayPalOrApplePay() { +function PaymentButtons() { return
- PayPal ApplePay
; } -export default PayPalOrApplePay; +export default PaymentButtons; diff --git a/src/components/ui/PaymentMethodsButtons/PayPayOrApplePay/styles.module.css b/src/components/ui/PaymentMethodsButtons/PaymentButtons/styles.module.css similarity index 100% rename from src/components/ui/PaymentMethodsButtons/PayPayOrApplePay/styles.module.css rename to src/components/ui/PaymentMethodsButtons/PaymentButtons/styles.module.css diff --git a/src/data/paymentMethods.tsx b/src/data/paymentMethods.tsx index bafe93a..5428dc2 100644 --- a/src/data/paymentMethods.tsx +++ b/src/data/paymentMethods.tsx @@ -1,20 +1,20 @@ import CreditCard from "@/components/ui/PaymentMethodsButtons/CreditCard"; -import PayPalOrApplePay from "@/components/ui/PaymentMethodsButtons/PayPayOrApplePay"; +import PaymentButtons from "@/components/ui/PaymentMethodsButtons/PaymentButtons"; export enum EPaymentMethod { CREDIT_CARD = "card", - PAYPAL_OR_APPLE_PAY = "payPalOrApplePay", + PAYMENT_BUTTONS = "paymentButtons", } -interface IPaymentMethod { +export interface IPaymentMethod { id: EPaymentMethod; component: JSX.Element; } export const paymentMethods: IPaymentMethod[] = [ { - id: EPaymentMethod.PAYPAL_OR_APPLE_PAY, - component: , + id: EPaymentMethod.PAYMENT_BUTTONS, + component: , }, { id: EPaymentMethod.CREDIT_CARD, From b51fc34b7f4d86cdee2fe5c9b3c7dbc75ed05b36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Thu, 25 Apr 2024 14:35:13 +0000 Subject: [PATCH 2/7] AW-46-changePaymentForm --- .../components/PaymentModal/index.tsx | 17 +++++------------ .../components/PaymentModal/styles.module.css | 5 ++++- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx index 36aea09..603f7ee 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx @@ -46,22 +46,16 @@ function PaymentModal({ useState(""); const [isLoading, setIsLoading] = useState(true); const [isError, setIsError] = useState(false); - const [isStripePaymentButtonEnabled, setIsStripePaymentButtonEnabled] = - useState(false); const paymentMethodsButtons = useMemo(() => { - if (!isStripePaymentButtonEnabled) { - return paymentMethods.filter( - (method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS - ); - } + // return paymentMethods.filter( + // (method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS + // ); return paymentMethods; - }, [isStripePaymentButtonEnabled]); + }, []); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState( - isStripePaymentButtonEnabled - ? EPaymentMethod.PAYMENT_BUTTONS - : EPaymentMethod.CREDIT_CARD + EPaymentMethod.PAYMENT_BUTTONS ); const onSelectPaymentMethod = (method: EPaymentMethod) => { @@ -170,7 +164,6 @@ function PaymentModal({ client_secret={clientSecret} subscriptionReceiptId={subscriptionReceiptId} returnUrl={window.location.href} - setCanMakePayment={setIsStripePaymentButtonEnabled} />
)} diff --git a/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css b/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css index 8cf491b..db76c7b 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css +++ b/src/components/pages/TrialPayment/components/PaymentModal/styles.module.css @@ -24,6 +24,9 @@ .payment-method-container { width: 100%; + display: flex; + flex-direction: column; + gap: 24px; } .address { @@ -41,4 +44,4 @@ .address { color: gray; font-size: 10px; -} \ No newline at end of file +} From 0920d848433bd414930d46bed4e52f6170ceb971 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Thu, 25 Apr 2024 14:35:22 +0000 Subject: [PATCH 3/7] AW-47-duplicateSubscriptionPlans --- .../step-subscription-plan.tsx | 76 ++++++++++++++----- 1 file changed, 55 insertions(+), 21 deletions(-) diff --git a/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx b/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx index b8c99c1..d1f4de5 100644 --- a/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx +++ b/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx @@ -1,21 +1,21 @@ -import React from 'react'; +import React, { useMemo } from "react"; import { useDispatch } from "react-redux"; import { useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; import { selectors } from "@/store"; -import useSteps, { Step } from '@/hooks/palmistry/use-steps'; -import Button from '@/components/palmistry/button/button'; -import EmailHeader from '@/components/palmistry/email-header/email-header'; +import useSteps, { Step } from "@/hooks/palmistry/use-steps"; +import Button from "@/components/palmistry/button/button"; +import EmailHeader from "@/components/palmistry/email-header/email-header"; import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import { actions } from "@/store"; import { useApi } from "@/api"; -const bestPlanId = 'stripe.15'; +const bestPlanId = "stripe.15"; const getFormattedPrice = (plan: ISubscriptionPlan) => { return (plan.trial!.price_cents / 100).toFixed(2); -} +}; export default function StepSubscriptionPlan() { const steps = useSteps(); @@ -23,11 +23,14 @@ export default function StepSubscriptionPlan() { const api = useApi(); const { i18n } = useTranslation(); const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); + const allowedPlans = useMemo(() => ["stripe.37"], []); const storedEmail = steps.getStoredValue(Step.Email); - const [subscriptionPlan, setSubscriptionPlan] = React.useState(''); - const [subscriptionPlans, setSubscriptionPlans] = React.useState([]); + const [subscriptionPlan, setSubscriptionPlan] = React.useState(""); + const [subscriptionPlans, setSubscriptionPlans] = React.useState< + ISubscriptionPlan[] + >([]); const [email, setEmail] = React.useState(steps.getStoredValue(Step.Email)); const locale = i18n.language; @@ -42,7 +45,10 @@ export default function StepSubscriptionPlan() { (async () => { const { sub_plans } = await api.getSubscriptionPlans({ locale }); const plans = sub_plans - .filter((plan: ISubscriptionPlan) => plan.provider === "stripe") + .filter( + (plan: ISubscriptionPlan) => + plan.provider === "stripe" && !plan.name.includes("(test)") + ) .sort((a, b) => { if (!a.trial || !b.trial) { return 0; @@ -55,13 +61,19 @@ export default function StepSubscriptionPlan() { } return 0; }); - setSubscriptionPlans(plans.filter((plan) => plan.trial?.price_cents)); + setSubscriptionPlans( + plans.filter( + (plan) => plan.trial?.price_cents || allowedPlans.includes(plan.id) + ) + ); })(); - }, [api, locale]); + }, [allowedPlans, api, locale]); React.useEffect(() => { if (subscriptionPlan) { - const targetSubPlan = subscriptionPlans.find((sub_plan) => sub_plan.id === subscriptionPlan); + const targetSubPlan = subscriptionPlans.find( + (sub_plan) => sub_plan.id === subscriptionPlan + ); if (targetSubPlan) { dispatch(actions.payment.update({ activeSubPlan: targetSubPlan })); @@ -70,7 +82,7 @@ export default function StepSubscriptionPlan() { }, [subscriptionPlan]); React.useEffect(() => { - setEmail(storedEmail || ''); + setEmail(storedEmail || ""); }, [storedEmail]); const onNext = () => { @@ -80,15 +92,21 @@ export default function StepSubscriptionPlan() { return ( <> - +
- We've helped millions of people to reveal the destiny of their love life and what the future holds for them and - their families. + We've helped millions of people to reveal the destiny of their love life + and what the future holds for them and their families.
- + (
setSubscriptionPlan(plan.id)} >

${getFormattedPrice(plan)}

@@ -139,11 +161,23 @@ export default function StepSubscriptionPlan() { ))}
- - It costs us $13.21 to compensate our AURA employees for the trial, but please choose the amount you are comfortable with. + + It costs us $13.21 to compensate our AURA employees for the trial, but + please choose the amount you are comfortable with. - From 2d7be6a578f160382dd3f427c4e3c32de8e26b36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Sat, 4 May 2024 20:11:24 +0000 Subject: [PATCH 4/7] AW-51-newAuthentication --- package-lock.json | 14 ++ package.json | 1 + src/api/api.ts | 2 + src/api/resources/User.ts | 56 ++++++- src/components/App/index.tsx | 7 + src/components/EmailEnterPage/index.tsx | 110 ++++---------- .../palmistry/step-email/step-email.tsx | 110 +++++--------- .../palmistry/step-gender/step-gender.tsx | 13 +- .../authentication/use-authentication.ts | 140 ++++++++++++++++++ src/routes.ts | 1 + src/services/filter-object/index.ts | 22 +++ 11 files changed, 317 insertions(+), 159 deletions(-) create mode 100644 src/hooks/authentication/use-authentication.ts create mode 100644 src/services/filter-object/index.ts diff --git a/package-lock.json b/package-lock.json index 7dc0036..47ee7fe 100755 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "html-react-parser": "^3.0.16", "i18next": "^22.5.0", "i18next-react-postprocessor": "^3.1.0", + "moment": "^2.30.1", "react": "^18.2.0", "react-circular-progressbar": "^2.1.0", "react-dom": "^18.2.0", @@ -2665,6 +2666,14 @@ "node": "*" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -5381,6 +5390,11 @@ "brace-expansion": "^1.1.7" } }, + "moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 965f5b4..f5b2c41 100755 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "html-react-parser": "^3.0.16", "i18next": "^22.5.0", "i18next-react-postprocessor": "^3.1.0", + "moment": "^2.30.1", "react": "^18.2.0", "react-circular-progressbar": "^2.1.0", "react-dom": "^18.2.0", diff --git a/src/api/api.ts b/src/api/api.ts index ca2c811..43783e7 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -72,6 +72,8 @@ const api = { createSinglePayment: createMethod(SinglePayment.createRequestPost), checkProductPurchased: createMethod(Products.createRequest), getPalmistryLines: createMethod(Palmistry.createRequest), + // New Authorization + authorization: createMethod(User.createAuthorizeRequest), } export type ApiContextValue = typeof api diff --git a/src/api/resources/User.ts b/src/api/resources/User.ts index 2bab6eb..34e5e88 100644 --- a/src/api/resources/User.ts +++ b/src/api/resources/User.ts @@ -1,6 +1,6 @@ import routes from "@/routes"; import { AuthPayload } from "../types"; -import { getAuthHeaders } from "../utils"; +import { getAuthHeaders, getBaseHeaders } from "../utils"; export type GetPayload = AuthPayload; @@ -130,3 +130,57 @@ export const createPatchRequest = ({ token, user }: PatchPayload): Request => { body, }); }; + +export enum ESourceAuthorization { + "aura.main" = "aura.main", + "aura.palmistry" = "aura.palmistry", + "aura.chat" = "aura.chat", + "aura.moons" = "aura.moons" +} + +export enum EGender { + "male" = "male", + "female" = "female", + "other" = "other" +} + +enum ERelationshipStatus { + "single", + "relationship", + "married", + "complicated", + "other" +} + +interface ICreateAuthorizeUser { + name: string; + birthdate: string | null; + gender: EGender; + birthplace: { + address?: string; + coords?: string; + } + relationship_status: ERelationshipStatus; +} + +export interface ICreateAuthorizePayload { + email: string; + locale: string; + timezone: string; + source: ESourceAuthorization; + profile?: Partial; + partner?: Partial>; +} + +export interface ICreateAuthorizeResponse { + token: string; +} + +export const createAuthorizeRequest = (data: ICreateAuthorizePayload): Request => { + const body = JSON.stringify(data); + return new Request(routes.server.dApiAuth(), { + method: "POST", + headers: getBaseHeaders(), + body, + }); +} \ No newline at end of file diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index f834438..dd06500 100755 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -318,6 +318,9 @@ function App(): JSX.Element { no: routes.client.epeGender(), force: routes.client.epeBirthdate(), }, + purchasedProduct: { + no: routes.client.epePayment(), + }, }} requiredParameters={[birthdate, isForceShortPath || gender]} /> @@ -487,6 +490,9 @@ function App(): JSX.Element { no: routes.client.advisorChatGender(), force: routes.client.advisorChatBirthdate(), }, + purchasedProduct: { + no: routes.client.advisorChatPayment(), + }, }} requiredParameters={[ birthdate, @@ -1075,6 +1081,7 @@ interface IShortPathOutletProps { function ShortPathOutlet(props: IShortPathOutletProps): JSX.Element { const { productKey, requiredParameters, redirectUrls, isProductPage } = props; const { user, token } = useAuth(); + const api = useApi(); const isForce = useSelector(selectors.selectIsForceShortPath); diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx index 13d7228..8ee524c 100755 --- a/src/components/EmailEnterPage/index.tsx +++ b/src/components/EmailEnterPage/index.tsx @@ -4,18 +4,17 @@ import { useNavigate, useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { useDispatch, useSelector } from "react-redux"; import { actions, selectors } from "@/store"; -import { getClientTimezone } from "@/locales"; -import { useAuth } from "@/auth"; -import { useApi, ApiError, extractErrorMessage } from "@/api"; +import { useApi } from "@/api"; import Title from "../Title"; import Policy from "../Policy"; import EmailInput from "./EmailInput"; import MainButton from "../MainButton"; import Loader, { LoaderColor } from "../Loader"; -import ErrorText from "../ErrorText"; import routes from "@/routes"; import NameInput from "./NameInput"; import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; +import { useAuthentication } from "@/hooks/authentication/use-authentication"; +import { ESourceAuthorization } from "@/api/resources/User"; interface IEmailEnterPage { redirectUrl?: string; @@ -27,33 +26,23 @@ function EmailEnterPage({ isRequiredName = false, }: IEmailEnterPage): JSX.Element { const api = useApi(); - const { signUp } = useAuth(); const { t, i18n } = useTranslation(); const dispatch = useDispatch(); const navigate = useNavigate(); const [email, setEmail] = useState(""); const [name, setName] = useState(""); - const birthday = useSelector(selectors.selectBirthday); const [isDisabled, setIsDisabled] = useState(true); const [isValidEmail, setIsValidEmail] = useState(false); const [isValidName, setIsValidName] = useState(!isRequiredName); - const [isLoading, setIsLoading] = useState(false); const [isAuth, setIsAuth] = useState(false); - const [apiError, setApiError] = useState(null); - const [error, setError] = useState(false); const [subPlans, setSubPlans] = useState([]); const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); const [activeSubPlan, setActiveSubPlan] = useState( activeSubPlanFromStore ); - const timezone = getClientTimezone(); const locale = i18n.language; const { subPlan } = useParams(); - const { - gender, - birthPlace, - // flowChoice - } = useSelector(selectors.selectQuestionnaire); + const { error, isLoading, authorization } = useAuthentication(); useEffect(() => { if (subPlan) { @@ -99,6 +88,13 @@ function EmailEnterPage({ }; const handleValidName = (name: string) => { + if (name) { + dispatch( + actions.user.update({ + username: name, + }) + ); + } setName(name); setIsValidName(true); }; @@ -112,62 +108,27 @@ function EmailEnterPage({ }, [isValidEmail, isValidName, email, name]); const handleClick = () => { - authorization(); + authorize(); }; - const authorization = async () => { - try { - setIsLoading(true); - const auth = await api.auth({ email, timezone, locale }); - const { - auth: { token, user }, - } = auth; - signUp(token, user); - const payload = { - user: { - profile_attributes: { - birthday, - gender: gender.length ? gender : "male", - full_name: name, - // relationship_status: !!flowChoice.length ? flowChoice : null, - }, - birthplace_attributes: { address: birthPlace }, - }, - token, - }; - const updatedUser = await api.updateUser(payload).catch((error) => { - console.log("Error: ", error); - }); - if (updatedUser?.user) { - dispatch(actions.user.update(updatedUser.user)); - } - if (name) { - dispatch( - actions.user.update({ - username: name, - }) - ); - } - dispatch(actions.status.update("registred")); - dispatch( - actions.payment.update({ - activeSubPlan, - }) - ); - setIsLoading(false); - setIsAuth(true); - setTimeout(() => { - navigate(redirectUrl); - }, 1000); - } catch (error) { - console.error(error); - if (error instanceof ApiError) { - setApiError(error as ApiError); - } else { - setError(true); - } - setIsLoading(false); + const authorize = async () => { + let source = ESourceAuthorization["aura.main"]; + if (window.location.pathname.includes("advisor-chat")) { + source = ESourceAuthorization["aura.chat"]; } + if (window.location.pathname.includes("/epe/")) { + source = ESourceAuthorization["aura.moons"]; + } + await authorization(email, source); + dispatch( + actions.payment.update({ + activeSubPlan, + }) + ); + setIsAuth(true); + setTimeout(() => { + navigate(redirectUrl); + }, 1000); }; return ( @@ -220,9 +181,9 @@ function EmailEnterPage({ > {isLoading && } {!isLoading && - !(!apiError && !error && !isLoading && isAuth) && + !(!error?.length && !isLoading && isAuth) && t("_continue")} - {!apiError && !error && !isLoading && isAuth && ( + {!error?.length && !isLoading && isAuth && ( )} - {(error || apiError) && ( + {!!error?.length && ( Something went wrong )} - {apiError && ( - - )} ); } diff --git a/src/components/palmistry/step-email/step-email.tsx b/src/components/palmistry/step-email/step-email.tsx index 0a4cee3..86c397e 100644 --- a/src/components/palmistry/step-email/step-email.tsx +++ b/src/components/palmistry/step-email/step-email.tsx @@ -1,38 +1,27 @@ -import React from 'react'; +import React from "react"; import { useTranslation } from "react-i18next"; import { useDispatch } from "react-redux"; - -import { PatchPayload } from "@/api/resources/User"; -import { Step } from '@/hooks/palmistry/use-steps'; -import { useAuth } from "@/auth"; -import { useApi, ApiError, extractErrorMessage } from "@/api"; -import useSteps from '@/hooks/palmistry/use-steps'; -import Button from '@/components/palmistry/button/button'; -import Input from '@/components/palmistry/input/input'; -import { getClientTimezone } from "@/locales"; +import useSteps from "@/hooks/palmistry/use-steps"; +import Button from "@/components/palmistry/button/button"; +import Input from "@/components/palmistry/input/input"; import { actions } from "@/store"; import Title from "@/components/Title"; -import ErrorText from "@/components/ErrorText"; import Loader, { LoaderColor } from "@/components/Loader"; +import { useAuthentication } from "@/hooks/authentication/use-authentication"; +import { ESourceAuthorization } from "@/api/resources/User"; const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; export default function StepEmail() { - const api = useApi(); - const { signUp } = useAuth(); - const { t, i18n } = useTranslation(); + const { t } = useTranslation(); const dispatch = useDispatch(); const steps = useSteps(); const [email, setEmail] = React.useState(steps.storedValue); const [emailIsValid, setEmailIsValid] = React.useState(false); - const [isLoading, setIsLoading] = React.useState(false); const [isAuth, setIsAuth] = React.useState(false); - const [apiError, setApiError] = React.useState(null); - const [error, setError] = React.useState(false); - const timezone = getClientTimezone(); - const locale = i18n.language; + const { error, isLoading, authorization } = useAuthentication(); const onChangeEmail = (value: string) => { setEmail(value); @@ -49,51 +38,16 @@ export default function StepEmail() { if (emailIsValid) { dispatch(actions.form.addEmail(email)); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [email]); - const authorization = async () => { - try { - setIsLoading(true); - const auth = await api.auth({ email, timezone, locale }); - const { auth: { token, user } } = auth; - - signUp(token, user); - const payload: PatchPayload = { - user: { - profile_attributes: { - birthday: steps.getStoredValue(Step.Birthdate), - gender: steps.getStoredValue(Step.Gender), - }, - }, - token, - }; - - const relationshipStatus = steps.getStoredValue(Step.RelationshipStatus); - if (relationshipStatus) { - payload.user.profile_attributes!.relationship_status = relationshipStatus; - } - - const updatedUser = await api.updateUser(payload).catch((error) => console.log("Error: ", error)); - - if (updatedUser?.user) dispatch(actions.user.update(updatedUser.user)); - - dispatch(actions.status.update("registred")); - - setIsLoading(false); - setIsAuth(true); - } catch (error) { - console.error(error); - if (error instanceof ApiError) { - setApiError(error as ApiError); - } else { - setError(true); - } - setIsLoading(false); - } + const authorize = async () => { + await authorization(email, ESourceAuthorization["aura.palmistry"]); + setIsAuth(true); }; const onNext = async () => { - await authorization(); + await authorize(); steps.saveCurrent(email); steps.goNext(); }; @@ -101,7 +55,9 @@ export default function StepEmail() { return ( <>
-

Enter your email to get your advanced Palmistry reading with AURA

+

+ Enter your email to get your advanced Palmistry reading with AURA +

- By clicking "Continue" below you agree to AURA{' '} - + By clicking "Continue" below you agree to AURA{" "} + EULA - {' '} - and{' '} - + {" "} + and{" "} + Privacy Policy . @@ -140,9 +104,11 @@ export default function StepEmail() { > {isLoading && } - {!isLoading && !(!apiError && !error && !isLoading && isAuth) && t("_continue")} + {!isLoading && + !(!error?.length && !isLoading && isAuth) && + t("_continue")} - {!apiError && !error && !isLoading && isAuth && ( + {!error?.length && !isLoading && isAuth && ( } - {(error || apiError) && ( + {error?.length && ( Something went wrong )} - - {apiError && ( - - )} ); } diff --git a/src/components/palmistry/step-gender/step-gender.tsx b/src/components/palmistry/step-gender/step-gender.tsx index fb5809e..00dafd1 100644 --- a/src/components/palmistry/step-gender/step-gender.tsx +++ b/src/components/palmistry/step-gender/step-gender.tsx @@ -1,10 +1,14 @@ -import Button from '../button/button'; -import useSteps, { GenderChoice } from '../../../hooks/palmistry/use-steps'; +import Button from "../button/button"; +import useSteps, { GenderChoice } from "../../../hooks/palmistry/use-steps"; +import { useDispatch } from "react-redux"; +import { actions } from "@/store"; export default function StepGender() { const steps = useSteps(); + const dispatch = useDispatch(); const onNext = (choice: GenderChoice) => { + dispatch(actions.questionnaire.update({ gender: choice })); steps.saveCurrent(choice); steps.goNext(choice); }; @@ -14,9 +18,10 @@ export default function StepGender() {

What’s your gender?

- In Palmistry, everyone is a blend of masculine and feminine, so it helps to know yours. + In Palmistry, everyone is a blend of masculine and feminine, so it helps + to know yours.

- +