Merge branch 'clone' into 'main'

fix: paymentRequest

See merge request witapp/aura-webapp!17

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 (
     <>

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} />
+          <ApplePayButton
-          <CheckoutForm>
+            activeSubPlan={activeSubPlan}
-            {activeSubPlan && (
+            client_secret={clientSecret}
-              <SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
+          />
-            )}
+          {activeSubPlan && (
-          </CheckoutForm>
+            <SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
+          )}
+          <CheckoutForm></CheckoutForm>
         </Elements>
       )}
     </div>

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>

src/routes.ts

@@ -194,8 +194,9 @@ export const withoutHeaderRoutes = [
   routes.client.energyVampirismResult(),
   routes.client.nameHoroscopeResult(),
 ];
-export const hasNoHeader = (path: string) =>
+export const hasNoHeader = (path: string) => {
-  !withoutHeaderRoutes.includes(path);
+  return !withoutHeaderRoutes.includes(`/${path.split("/")[1]}`);
+};
 
 export const getRouteBy = (status: UserStatus): string => {
   switch (status) {