Merge branch 'develop' into 'main'

Develop

See merge request witapp/aura-webapp!109

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",

src/components/PaymentPage/methods/PayPal/Button.tsx

@@ -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 (
-    <MainButton color="blue" onClick={onClick}>
-      {t("payPal")}
-    </MainButton>
-  );
-}

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<Promise<Stripe | null> | null>(null);
-  const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
   const [clientSecret, setClientSecret] = useState<string>("");
   const [subscriptionReceiptId, setSubscriptionReceiptId] =
     useState<string>("");
@@ -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 && (
-            <SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
+            <SubPlanInformation subPlan={activeSubPlan} />
           )}
           <CheckoutForm subscriptionReceiptId={subscriptionReceiptId} />
         </Elements>

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,

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<Promise<Stripe | null> | null>(null);
-  const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
   const [clientSecret, setClientSecret] = useState<string>("");
   const [subscriptionReceiptId, setSubscriptionReceiptId] =
     useState<string>("");
@@ -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 && (
-            <SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
+            <SubPlanInformation subPlan={activeSubPlan} />
           )}
           <CheckoutForm subscriptionReceiptId={subscriptionReceiptId} />
         </Elements>

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<ISubscriptionPlan>();
-  const [errors, setErrors] = useState<string>("");
-  const [isLoading, setIsLoading] = useState<boolean>(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 (
     <div className={styles.container}>
@@ -82,21 +27,9 @@ function SubPlanInformation({
       {client_secret && (
         <ApplePayButton activeSubPlan={subPlan} client_secret={client_secret} />
       )}
-      {payPalSubPlan && (
-        <MainButton
-          type="button"
-          className={styles["pay-pal-button"]}
-          onClick={handlePayPalButton}
-        >
-          {!isLoading && <img src="/paypal-logo.svg" alt="PayPal Button" />}
-          {isLoading && <Loader />}
-        </MainButton>
-      )}
-      {/* <ApplePayButton activeSubPlan={subPlan} /> */}
       <p className={styles.description}>
         {t("auweb.pay.information").replaceAll("%@", getPrice(subPlan))}.
       </p>
-      {!!errors.length && <p className={styles.errors}>{errors}</p>}
     </div>
   );
 }

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 (

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;
 }
 

src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx

@@ -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 (
-    <MainButton
-      type="button"
-      className={styles["pay-pal-button"]}
-      onClick={handlePayPalButton}
-    >
-      {!isLoading && (
-        <div className={styles.content}>
-          <img src="/paypal-logo.svg" alt="PayPal Button" />
-          <p>Buy Now</p>
-        </div>
-      )}
-      {isLoading && <Loader />}
-    </MainButton>
-  );
-}
-
-export default PayPalButton;

src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css

@@ -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;
-}

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 { useEffect, useMemo, useState } from "react";
-import { EPaymentMethod } from "@/data/paymentMethods";
+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,23 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
   const activeSubPlan = activeSubscriptionPlan
     ? activeSubscriptionPlan
     : activeSubPlanFromStore;
-  const [payPalSubPlan, setPayPalSubPlan] = useState<ISubscriptionPlan>();
   const [stripePromise, setStripePromise] =
     useState<Promise<Stripe | null> | null>(null);
   const [clientSecret, setClientSecret] = useState<string>("");
   const [subscriptionReceiptId, setSubscriptionReceiptId] =
     useState<string>("");
-  const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [isLoadingPayPal, setIsLoadingPayPal] = useState(false);
-  const [errors, setErrors] = useState<string>("");
   const [isError, setIsError] = useState<boolean>(false);
 
+  const paymentMethodsButtons = useMemo(() => {
+    // return paymentMethods.filter(
+    //   (method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS
+    // );
+    return paymentMethods;
+  }, []);
+
   const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(
-    EPaymentMethod.PAYPAL_OR_APPLE_PAY
+    EPaymentMethod.PAYMENT_BUTTONS
   );
 
   const onSelectPaymentMethod = (method: EPaymentMethod) => {
@@ -59,12 +65,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 +102,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 (
       <div className={styles["payment-modal"]}>
@@ -170,6 +128,7 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
         Choose payment method
       </Title>
       <PaymentMethodsChoice
+        paymentMethods={paymentMethodsButtons}
         selectedPaymentMethod={selectedPaymentMethod}
         onSelectPaymentMethod={onSelectPaymentMethod}
       />
@@ -180,7 +139,8 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
               <p className={styles["sub-plan-description"]}>
                 You will be charged only{" "}
                 <b>
-                  ${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day trial.
+                  ${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day
+                  trial.
                 </b>
               </p>
               <p className={styles["sub-plan-description"]}>
@@ -197,26 +157,22 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
       <div className={styles["payment-method-container"]}>
         {stripePromise && clientSecret && (
           <Elements stripe={stripePromise} options={{ clientSecret }}>
-            {selectedPaymentMethod === EPaymentMethod.PAYPAL_OR_APPLE_PAY && (
+            {selectedPaymentMethod === EPaymentMethod.PAYMENT_BUTTONS && (
               <div className={styles["payment-method"]}>
-                {payPalSubPlan && (
-                  <PayPalButton
-                    isLoading={isLoadingPayPal}
-                    handlePayPalButton={handlePayPalButton}
-                  />
-                )}
                 <ApplePayButton
                   activeSubPlan={activeSubPlan}
                   client_secret={clientSecret}
                   subscriptionReceiptId={subscriptionReceiptId}
                   returnUrl={window.location.href}
                 />
-                {!!errors.length && <p className={styles.errors}>{errors}</p>}
               </div>
             )}
 
             {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
-              <CheckoutForm subscriptionReceiptId={subscriptionReceiptId} returnUrl={returnUrl} />
+              <CheckoutForm
+                subscriptionReceiptId={subscriptionReceiptId}
+                returnUrl={returnUrl}
+              />
             )}
           </Elements>
         )}

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 {

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 useSteps, { Step } from "@/hooks/palmistry/use-steps";
-import Button from '@/components/palmistry/button/button';
+import Button from "@/components/palmistry/button/button";
-import EmailHeader from '@/components/palmistry/email-header/email-header';
+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 [subscriptionPlan, setSubscriptionPlan] = React.useState("");
-  const [subscriptionPlans, setSubscriptionPlans] = React.useState<ISubscriptionPlan[]>([]);
+  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 (
     <>
-      <EmailHeader email={email}/>
+      <EmailHeader email={email} />
 
       <div className="palmistry-container__title">
-        We've helped millions of people to reveal the destiny of their love life and what the future holds for them and
+        We've helped millions of people to reveal the destiny of their love life
-        their families.
+        and what the future holds for them and their families.
       </div>
 
       <div className="palmistry-container__image">
-        <svg width="153" height="133" viewBox="0 0 153 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="153"
+          height="133"
+          viewBox="0 0 153 133"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g clipPath="url(#clip0_16903_24136)">
             <rect width="153" height="133" fill=""></rect>
             <path
@@ -131,7 +149,11 @@ export default function StepSubscriptionPlan() {
         {subscriptionPlans.map((plan) => (
           <div
             key={plan.id}
-            className={`palmistry-container__plan ${subscriptionPlan === plan.id ? 'palmistry-container__plan_active' : ''}`}
+            className={`palmistry-container__plan ${
+              subscriptionPlan === plan.id
+                ? "palmistry-container__plan_active"
+                : ""
+            }`}
             onClick={() => setSubscriptionPlan(plan.id)}
           >
             <h3>${getFormattedPrice(plan)}</h3>
@@ -139,11 +161,23 @@ export default function StepSubscriptionPlan() {
         ))}
       </div>
 
-      <span className={`palmistry-container__subscription-text ${subscriptionPlan === bestPlanId ? 'palmistry-container__subscription-text_active' : ''}`}>
+      <span
-        It costs us $13.21 to compensate our AURA employees for the trial, but please choose the amount you are comfortable with.
+        className={`palmistry-container__subscription-text ${
+          subscriptionPlan === bestPlanId
+            ? "palmistry-container__subscription-text_active"
+            : ""
+        }`}
+      >
+        It costs us $13.21 to compensate our AURA employees for the trial, but
+        please choose the amount you are comfortable with.
       </span>
 
-      <Button className="palmistry-container__button" type="button" onClick={onNext} active>
+      <Button
+        className="palmistry-container__button"
+        type="button"
+        onClick={onNext}
+        active
+      >
         Continue
       </Button>
     </>

src/components/ui/PaymentMethodsButtons/PaymentButtons/index.tsx

@@ -1,10 +1,9 @@
 import styles from "./styles.module.css";
 
-function PayPalOrApplePay() {
+function PaymentButtons() {
   return <div className={styles.container}>
-    <img src="/paypal.webp" alt="PayPal" />
     <img src="/applepay.webp" alt="ApplePay" />
   </div>;
 }
 
-export default PayPalOrApplePay;
+export default PaymentButtons;

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,
+    id: EPaymentMethod.PAYMENT_BUTTONS,
-    component: <PayPalOrApplePay />,
+    component: <PaymentButtons />,
   },
   {
     id: EPaymentMethod.CREDIT_CARD,