Merge branch 'AW-45-deletePayPal' into 'develop'

AW-45-deletePayPal

See merge request witapp/aura-webapp!106

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,29 @@ 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 [isStripePaymentButtonEnabled, setIsStripePaymentButtonEnabled] =
+    useState<boolean>(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 (
       <div className={styles["payment-modal"]}>
@@ -170,6 +134,7 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
         Choose payment method
       </Title>
       <PaymentMethodsChoice
+        paymentMethods={paymentMethodsButtons}
         selectedPaymentMethod={selectedPaymentMethod}
         onSelectPaymentMethod={onSelectPaymentMethod}
       />
@@ -180,7 +145,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 +163,23 @@ 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}
+                  setCanMakePayment={setIsStripePaymentButtonEnabled}
                 />
-                {!!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/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,