From 0f3e376484c1bc504da870afe872ab9976aacbda 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?= <itkataev@gmail.com>
Date: Thu, 21 Dec 2023 04:06:33 +0000
Subject: [PATCH] fix: paymentRequest

---
 .../StripePage/ApplePayButton/index.tsx       | 22 +++----------------
 src/components/StripePage/index.tsx           | 16 ++++++++------
 src/components/SubPlanInformation/index.tsx   |  8 ++++++-
 src/routes.ts                                 |  5 +++--
 4 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/components/StripePage/ApplePayButton/index.tsx b/src/components/StripePage/ApplePayButton/index.tsx
index 2771df8..acf9c2d 100644
--- a/src/components/StripePage/ApplePayButton/index.tsx
+++ b/src/components/StripePage/ApplePayButton/index.tsx
@@ -6,19 +6,16 @@ import {
 } from "@stripe/react-stripe-js";
 import { PaymentRequest } from "@stripe/stripe-js";
 import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
-import { useAuth } from "@/auth";
-import { useApi } from "@/api";
 import styles from "./styles.module.css";
 
 interface ApplePayButtonProps {
   activeSubPlan: ISubscriptionPlan | null;
+  client_secret: string;
 }
 
-function ApplePayButton({ activeSubPlan }: ApplePayButtonProps) {
+function ApplePayButton({ activeSubPlan, client_secret }: ApplePayButtonProps) {
   const stripe = useStripe();
   const elements = useElements();
-  const api = useApi();
-  const { token } = useAuth();
   const [paymentRequest, setPaymentRequest] = useState<PaymentRequest | null>(
     null
   );
@@ -53,19 +50,6 @@ function ApplePayButton({ activeSubPlan }: ApplePayButtonProps) {
     });
 
     pr.on("paymentmethod", async (e) => {
-      const { subscription_receipt } = await api.createSubscriptionReceipt({
-        token,
-        way: "stripe",
-        subscription_receipt: {
-          sub_plan_id: activeSubPlan?.id || "stripe.7",
-        },
-      });
-      const { client_secret } = subscription_receipt.data;
-
-      if (!subscription_receipt) {
-        return;
-      }
-
       const { error: stripeError } = await stripe.confirmCardPayment(
         client_secret,
         {
@@ -85,7 +69,7 @@ function ApplePayButton({ activeSubPlan }: ApplePayButtonProps) {
       // payment_intent.succeeded event that handles any business critical
       // post-payment actions.
     });
-  }, [stripe, elements, activeSubPlan, api, token]);
+  }, [activeSubPlan, client_secret, elements, stripe]);
 
   return (
     <>
diff --git a/src/components/StripePage/index.tsx b/src/components/StripePage/index.tsx
index 5ebc6f6..b4046a2 100644
--- a/src/components/StripePage/index.tsx
+++ b/src/components/StripePage/index.tsx
@@ -23,7 +23,7 @@ export function StripePage(): JSX.Element {
   const locale = i18n.language;
   const navigate = useNavigate();
   const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
-  const email = useSelector(selectors.selectEmail);
+  const email = useSelector(selectors.selectUser).email;
   const [stripePromise, setStripePromise] =
     useState<Promise<Stripe | null> | null>(null);
   const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
@@ -111,12 +111,14 @@ export function StripePage(): JSX.Element {
       )}
       {stripePromise && clientSecret && (
         <Elements stripe={stripePromise} options={{ clientSecret }}>
-          <ApplePayButton activeSubPlan={activeSubPlan} />
-          <CheckoutForm>
-            {activeSubPlan && (
-              <SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
-            )}
-          </CheckoutForm>
+          <ApplePayButton
+            activeSubPlan={activeSubPlan}
+            client_secret={clientSecret}
+          />
+          {activeSubPlan && (
+            <SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
+          )}
+          <CheckoutForm></CheckoutForm>
         </Elements>
       )}
     </div>
diff --git a/src/components/SubPlanInformation/index.tsx b/src/components/SubPlanInformation/index.tsx
index 05e83b2..3e42867 100644
--- a/src/components/SubPlanInformation/index.tsx
+++ b/src/components/SubPlanInformation/index.tsx
@@ -8,10 +8,12 @@ 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;
 }
 
 const getPrice = (plan: ISubscriptionPlan): string => {
@@ -23,6 +25,7 @@ const getPrice = (plan: ISubscriptionPlan): string => {
 function SubPlanInformation({
   subPlan,
   subPlans,
+  client_secret,
 }: ISubPlanInformationProps): JSX.Element {
   const { t } = useTranslation();
   const api = useApi();
@@ -77,6 +80,9 @@ function SubPlanInformation({
   return (
     <div className={styles.container}>
       <TotalToday total={getPrice(subPlan)} />
+      {client_secret && (
+        <ApplePayButton activeSubPlan={subPlan} client_secret={client_secret} />
+      )}
       {payPalSubPlan && (
         <MainButton
           type="button"
@@ -89,7 +95,7 @@ function SubPlanInformation({
       )}
       {/* <ApplePayButton activeSubPlan={subPlan} /> */}
       <p className={styles.description}>
-        {t("auweb.pay.information").replaceAll("%@", getPrice(subPlan))}
+        {t("auweb.pay.information").replaceAll("%@", getPrice(subPlan))}.
       </p>
       {!!errors.length && <p className={styles.errors}>{errors}</p>}
     </div>
diff --git a/src/routes.ts b/src/routes.ts
index 1b3dfa0..9abed4a 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -194,8 +194,9 @@ export const withoutHeaderRoutes = [
   routes.client.energyVampirismResult(),
   routes.client.nameHoroscopeResult(),
 ];
-export const hasNoHeader = (path: string) =>
-  !withoutHeaderRoutes.includes(path);
+export const hasNoHeader = (path: string) => {
+  return !withoutHeaderRoutes.includes(`/${path.split("/")[1]}`);
+};
 
 export const getRouteBy = (status: UserStatus): string => {
   switch (status) {