From ab9250f5c32dfa04891c70bf2fac732b521570f8 Mon Sep 17 00:00:00 2001
From: Daniil Chemerkin <dev.daminik00@gmail.com>
Date: Sun, 16 Jun 2024 22:51:39 +0000
Subject: [PATCH] Develop

---
 .../methods/CheckoutForm/index.tsx            | 12 +++++-
 .../methods/CheckoutForm/styles.module.css    |  5 +++
 .../methods/ExpressCheckoutStripe/index.tsx   |  9 ++++-
 .../components/PaymentModal/index.tsx         | 37 ++++++++++---------
 .../components/PaymentModal/index.tsx         | 37 ++++++++++---------
 5 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/src/components/PaymentPage/methods/CheckoutForm/index.tsx b/src/components/PaymentPage/methods/CheckoutForm/index.tsx
index 308cf27..fa0242a 100644
--- a/src/components/PaymentPage/methods/CheckoutForm/index.tsx
+++ b/src/components/PaymentPage/methods/CheckoutForm/index.tsx
@@ -17,6 +17,7 @@ interface ICheckoutFormProps {
   subscriptionReceiptId?: string;
   returnUrl?: string;
   confirmType?: "payment" | "setup";
+  isHide?: boolean;
 }
 
 export default function CheckoutForm({
@@ -24,6 +25,7 @@ export default function CheckoutForm({
   subscriptionReceiptId,
   returnUrl,
   confirmType = "payment",
+  isHide = false,
 }: ICheckoutFormProps) {
   const stripe = useStripe();
   const elements = useElements();
@@ -70,13 +72,19 @@ export default function CheckoutForm({
 
   return (
     <form
-      className="payment-form-stripe"
+      className={`payment-form-stripe  ${isHide ? styles.hide : ""}`}
       id="payment-form"
       onSubmit={handleSubmit}
     >
       {children ? children : null}
       <PaymentElement
-        options={{ terms: { card: "never" } }}
+        options={{
+          terms: { card: "never" },
+          wallets: {
+            googlePay: "never",
+            applePay: "never",
+          },
+        }}
         onReady={() => setFormReady(true)}
       />
       <MainButton
diff --git a/src/components/PaymentPage/methods/CheckoutForm/styles.module.css b/src/components/PaymentPage/methods/CheckoutForm/styles.module.css
index 9e23107..a262532 100644
--- a/src/components/PaymentPage/methods/CheckoutForm/styles.module.css
+++ b/src/components/PaymentPage/methods/CheckoutForm/styles.module.css
@@ -9,6 +9,11 @@
   gap: 16px;
 }
 
+.hide {
+  height: 0;
+  visibility: hidden;
+}
+
 .payment-loader {
   display: flex;
   justify-content: center;
diff --git a/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx b/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx
index 092c6c9..cbb6972 100644
--- a/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx
+++ b/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx
@@ -94,7 +94,10 @@ function ExpressCheckoutStripe({
     <div className={`${styles.container} ${isHideForm ? styles.hide : ""}`}>
       <ExpressCheckoutElement
         onReady={onReady}
-        onLoadError={() => onChangeLoading && onChangeLoading(false)}
+        onLoadError={(e) => {
+          console.log("Error: ", e);
+          onChangeLoading && onChangeLoading(false);
+        }}
         onConfirm={onConfirm}
         options={{
           layout: {
@@ -102,6 +105,10 @@ function ExpressCheckoutStripe({
             overflow: "never",
           },
           paymentMethodOrder: ["apple_pay", "google_pay", "amazon_pay", "link"],
+          wallets: {
+            googlePay: "always",
+            applePay: "always",
+          },
         }}
       />
       {errorMessage && <p className={styles.error}>{errorMessage}</p>}
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx
index bcddde0..61e21db 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx
@@ -160,28 +160,31 @@ function PaymentModal({
         )}
         <div className={styles["payment-method-container"]}>
           {stripePromise && clientSecret && (
-            <Elements stripe={stripePromise} options={{ clientSecret }}>
-              <ExpressCheckoutStripe
-                clientSecret={clientSecret}
-                returnUrl={returnUrl}
-                isHide={
-                  selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
-                }
-                onAvailable={(_isAvailable, _availableMethods) =>
-                  onAvailableExpressCheckout(_isAvailable, _availableMethods)
-                }
-                onChangeLoading={(isLoading) =>
-                  setIsLoadingExpressCheckout(isLoading)
-                }
-              />
-              {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
+            <>
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
+                <ExpressCheckoutStripe
+                  clientSecret={clientSecret}
+                  returnUrl={returnUrl}
+                  isHide={
+                    selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
+                  }
+                  onAvailable={(_isAvailable, _availableMethods) =>
+                    onAvailableExpressCheckout(_isAvailable, _availableMethods)
+                  }
+                  onChangeLoading={(isLoading) =>
+                    setIsLoadingExpressCheckout(isLoading)
+                  }
+                />
+              </Elements>
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
                 <CheckoutForm
                   confirmType={paymentType}
                   subscriptionReceiptId={paymentIntentId}
                   returnUrl={returnUrl}
+                  isHide={selectedPaymentMethod !== EPaymentMethod.CREDIT_CARD}
                 />
-              )}
-            </Elements>
+              </Elements>
+            </>
           )}
         </div>
         <SecurityPayments />
diff --git a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx
index eb64b55..a5f53d5 100644
--- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx
+++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx
@@ -165,28 +165,31 @@ function PaymentModal({
         )}
         <div className={styles["payment-method-container"]}>
           {stripePromise && clientSecret && (
-            <Elements stripe={stripePromise} options={{ clientSecret }}>
-              <ExpressCheckoutStripe
-                clientSecret={clientSecret}
-                returnUrl={returnUrl}
-                isHide={
-                  selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
-                }
-                onAvailable={(_isAvailable, _availableMethods) =>
-                  onAvailableExpressCheckout(_isAvailable, _availableMethods)
-                }
-                onChangeLoading={(isLoading) =>
-                  setIsLoadingExpressCheckout(isLoading)
-                }
-              />
-              {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
+            <>
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
+                <ExpressCheckoutStripe
+                  clientSecret={clientSecret}
+                  returnUrl={returnUrl}
+                  isHide={
+                    selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
+                  }
+                  onAvailable={(_isAvailable, _availableMethods) =>
+                    onAvailableExpressCheckout(_isAvailable, _availableMethods)
+                  }
+                  onChangeLoading={(isLoading) =>
+                    setIsLoadingExpressCheckout(isLoading)
+                  }
+                />
+              </Elements>
+              <Elements stripe={stripePromise} options={{ clientSecret }}>
                 <CheckoutForm
                   confirmType={paymentType}
                   subscriptionReceiptId={paymentIntentId}
                   returnUrl={returnUrl}
+                  isHide={selectedPaymentMethod !== EPaymentMethod.CREDIT_CARD}
                 />
-              )}
-            </Elements>
+              </Elements>
+            </>
           )}
         </div>
         <SecurityPayments />