From f355ff391c1a67bedf24961249b0da397bd64414 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Thu, 16 Nov 2023 05:00:46 +0400 Subject: [PATCH] feat: add information of subscription plan on stripe page, fix private bug --- src/components/App/index.tsx | 34 ++++++------- src/components/PaymentPage/index.tsx | 48 +++++++++---------- .../methods/Stripe/CheckoutForm.tsx | 7 ++- src/components/StripePage/index.tsx | 5 +- .../SubPlanInformation/TotalToday/index.tsx | 17 +++++++ .../TotalToday/styles.module.css | 17 +++++++ src/components/SubPlanInformation/index.tsx | 28 +++++++++++ .../SubPlanInformation/styles.module.css | 16 +++++++ 8 files changed, 129 insertions(+), 43 deletions(-) create mode 100644 src/components/SubPlanInformation/TotalToday/index.tsx create mode 100644 src/components/SubPlanInformation/TotalToday/styles.module.css create mode 100644 src/components/SubPlanInformation/index.tsx create mode 100644 src/components/SubPlanInformation/styles.module.css diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 7cd075d..fa03aa3 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -124,6 +124,18 @@ function App(): JSX.Element { return ( }> + } + /> + } + /> + } + /> }> } /> } /> @@ -162,32 +174,20 @@ function App(): JSX.Element { } /> } /> {/* } - /> */} + path={routes.client.wallpaper()} + element={} + /> */} + }> + }> } /> - }> - }> } /> - } - /> - } - /> - } - /> } diff --git a/src/components/PaymentPage/index.tsx b/src/components/PaymentPage/index.tsx index bd146cd..04e1a62 100644 --- a/src/components/PaymentPage/index.tsx +++ b/src/components/PaymentPage/index.tsx @@ -14,10 +14,10 @@ import routes from "@/routes"; import "./styles.css"; import Header from "../Header"; import { StripeButton } from "./methods/Stripe"; -import { PayPalButton } from "./methods/PayPal/Button"; -import { useAuth } from "@/auth"; -import { useApi } from "@/api"; -import { PayPalReceiptPayload } from "@/api/resources/UserSubscriptionReceipts"; +// import { PayPalButton } from "./methods/PayPal/Button"; +// import { useAuth } from "@/auth"; +// import { useApi } from "@/api"; +// import { PayPalReceiptPayload } from "@/api/resources/UserSubscriptionReceipts"; import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; const getPrice = (activeSubPlan: ISubscriptionPlan | null) => { @@ -32,8 +32,8 @@ const getPrice = (activeSubPlan: ISubscriptionPlan | null) => { function PaymentPage(): JSX.Element { const { t } = useTranslation(); const { applePay } = usePayment(); - const api = useApi(); - const { token } = useAuth(); + // const api = useApi(); + // const { token } = useAuth(); const [openErrorModal, setOpenErrorModal] = useState(false); const navigate = useNavigate(); const isLoading = applePay === null; @@ -46,23 +46,23 @@ function PaymentPage(): JSX.Element { navigate(routes.client.paymentStripe()); }; - const navigateToPayPal = async () => { - const { subscription_receipt } = await api.createSubscriptionReceipt({ - token, - itemInterval: "year", - way: "paypal", - subscription_receipt: { - sub_plan_id: activeSubPlan?.id || "", - }, - } as PayPalReceiptPayload); - const url = subscription_receipt.data.links?.find( - (link) => link.rel === "approve" - )?.href; - if (!url?.length) { - return setOpenErrorModal(true); - } - window.location.href = url; - }; + // const navigateToPayPal = async () => { + // const { subscription_receipt } = await api.createSubscriptionReceipt({ + // token, + // itemInterval: "year", + // way: "paypal", + // subscription_receipt: { + // sub_plan_id: activeSubPlan?.id || "", + // }, + // } as PayPalReceiptPayload); + // const url = subscription_receipt.data.links?.find( + // (link) => link.rel === "approve" + // )?.href; + // if (!url?.length) { + // return setOpenErrorModal(true); + // } + // window.location.href = url; + // }; return ( <> @@ -84,7 +84,7 @@ function PaymentPage(): JSX.Element { {t("choose_payment")}
- + {/* */}

diff --git a/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx b/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx index 244fc4e..656aec7 100644 --- a/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx +++ b/src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx @@ -9,7 +9,11 @@ import { import { useState } from "react"; import { useDispatch } from "react-redux"; -export default function CheckoutForm() { +interface ICheckoutFormProps { + children?: JSX.Element | null; +} + +export default function CheckoutForm({ children }: ICheckoutFormProps) { const stripe = useStripe(); const elements = useElements(); const dispatch = useDispatch(); @@ -46,6 +50,7 @@ export default function CheckoutForm() { id="payment-form" onSubmit={handleSubmit} > + {children ? children : null} diff --git a/src/components/StripePage/index.tsx b/src/components/StripePage/index.tsx index dfa1ec4..86f00db 100644 --- a/src/components/StripePage/index.tsx +++ b/src/components/StripePage/index.tsx @@ -10,6 +10,7 @@ import { useSelector } from "react-redux"; import { selectors } from "@/store"; import { useNavigate } from "react-router-dom"; import routes from "@/routes"; +import SubPlanInformation from "../SubPlanInformation"; export function StripePage(): JSX.Element { const api = useApi(); @@ -55,7 +56,9 @@ export function StripePage(): JSX.Element { ) : null} {stripePromise && clientSecret && ( - + + {activeSubPlan && } + )} diff --git a/src/components/SubPlanInformation/TotalToday/index.tsx b/src/components/SubPlanInformation/TotalToday/index.tsx new file mode 100644 index 0000000..d36b3c4 --- /dev/null +++ b/src/components/SubPlanInformation/TotalToday/index.tsx @@ -0,0 +1,17 @@ +import styles from "./styles.module.css"; +import Title from "@/components/Title"; + +interface ITotalTodayProps { + total: string; +} + +function TotalToday({ total }: ITotalTodayProps): JSX.Element { + return ( +

+ {"Total today:"} + {total} +
+ ); +} + +export default TotalToday; diff --git a/src/components/SubPlanInformation/TotalToday/styles.module.css b/src/components/SubPlanInformation/TotalToday/styles.module.css new file mode 100644 index 0000000..fe619d9 --- /dev/null +++ b/src/components/SubPlanInformation/TotalToday/styles.module.css @@ -0,0 +1,17 @@ +.container { + width: 100%; + padding: 16px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background-color: #e7f5ee; + border-radius: 7px; +} + +.text { + font-size: 16px; + font-weight: 700; + color: #000; + margin: 0; +} diff --git a/src/components/SubPlanInformation/index.tsx b/src/components/SubPlanInformation/index.tsx new file mode 100644 index 0000000..e45bbca --- /dev/null +++ b/src/components/SubPlanInformation/index.tsx @@ -0,0 +1,28 @@ +import { useTranslation } from "react-i18next"; +import styles from "./styles.module.css"; +import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; +import TotalToday from "./TotalToday"; + +interface ISubPlanInformationProps { + subPlan: ISubscriptionPlan; +} + +const getPrice = (plan: ISubscriptionPlan): string => { + return `$${(plan.trial?.price_cents || 0) / 100}`; +}; + +function SubPlanInformation({ + subPlan, +}: ISubPlanInformationProps): JSX.Element { + const { t } = useTranslation(); + return ( +
+ +

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

+
+ ); +} + +export default SubPlanInformation; diff --git a/src/components/SubPlanInformation/styles.module.css b/src/components/SubPlanInformation/styles.module.css new file mode 100644 index 0000000..4404a0e --- /dev/null +++ b/src/components/SubPlanInformation/styles.module.css @@ -0,0 +1,16 @@ +.container { + width: 100%; + max-width: 300px; + display: flex; + flex-direction: column; + gap: 20px; +} + +.description { + font-size: 13px; + color: #666666; + text-align: left; + font-weight: 400; + line-height: 16px; + padding-bottom: 16px; +}