From a6ea20283dc5cd483324b7e6e1a96cbd227c82bc 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: Tue, 13 Feb 2024 22:23:12 +0000
Subject: [PATCH] Preview/discount pages

---
 src/components/Modal/index.tsx                 |  4 +++-
 src/components/PaymentPage/results/index.tsx   |  1 -
 .../StripePage/ApplePayButton/index.tsx        | 18 +++++++++++-------
 .../components/PayPalButton/styles.module.css  | 14 ++++++++++++++
 .../components/PaymentModal/index.tsx          | 12 ++++++------
 src/components/pages/TrialPayment/index.tsx    |  2 +-
 .../pages/TrialPayment/styles.module.css       |  4 ++++
 .../PaymentDiscountTable/index.tsx             |  2 +-
 .../pages/TrialPaymentWithDiscount/index.tsx   |  2 +-
 9 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 1eff20c..3cd2014 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -5,6 +5,7 @@ interface ModalProps {
   children: ReactNode;
   open?: boolean;
   isCloseButtonVisible?: boolean;
+  containerClassName?: string;
   onClose?: () => void;
 }
 
@@ -12,6 +13,7 @@ function Modal({
   open,
   children,
   isCloseButtonVisible = true,
+  containerClassName = "",
   onClose,
 }: ModalProps): JSX.Element {
   const handleClose = (event: React.MouseEvent) => {
@@ -33,7 +35,7 @@ function Modal({
   if (!open) return <></>;
   return (
     <div className={styles.modal} onClick={handleClose}>
-      <div className={styles["modal-content"]}>
+      <div className={`${styles["modal-content"]} ${containerClassName}`}>
         {isCloseButtonVisible && (
           <button className={styles["modal-close-btn"]} onClick={handleClose} />
         )}
diff --git a/src/components/PaymentPage/results/index.tsx b/src/components/PaymentPage/results/index.tsx
index 1f77ee2..e0b3421 100644
--- a/src/components/PaymentPage/results/index.tsx
+++ b/src/components/PaymentPage/results/index.tsx
@@ -16,7 +16,6 @@ function PaymentResultPage(): JSX.Element {
   const dispatch = useDispatch();
   const [searchParams] = useSearchParams();
   const status = searchParams.get("redirect_status");
-  status;
   // const { id } = useParams();
   // const requestTimeOutRef = useRef<NodeJS.Timeout>();
   const [isLoading] = useState(true);
diff --git a/src/components/StripePage/ApplePayButton/index.tsx b/src/components/StripePage/ApplePayButton/index.tsx
index ce9c77a..afa89bf 100644
--- a/src/components/StripePage/ApplePayButton/index.tsx
+++ b/src/components/StripePage/ApplePayButton/index.tsx
@@ -60,13 +60,17 @@ function ApplePayButton({
     });
 
     pr.on("paymentmethod", async (e) => {
-      const { error: stripeError } = await stripe.confirmCardPayment(
-        client_secret,
-        {
-          payment_method: e.paymentMethod.id,
-        },
-        { handleActions: false }
-      );
+      const { error: stripeError, paymentIntent } =
+        await stripe.confirmCardPayment(
+          client_secret,
+          {
+            payment_method: e.paymentMethod.id,
+          },
+          { handleActions: false }
+        );
+
+      console.log("STRIPE APPLEPAY paymentIntent: ", paymentIntent);
+      console.log("STRIPE APPLEPAY ERROR: ", stripeError);
 
       if (stripeError) {
         // Show error to your customer (e.g., insufficient funds)
diff --git a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css b/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css
index 8addff6..2c6b967 100644
--- a/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css
+++ b/src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css
@@ -6,6 +6,20 @@
   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 {
diff --git a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx
index 646b839..4b4b265 100644
--- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx
+++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx
@@ -124,7 +124,7 @@ function PaymentModal() {
       return setErrors("Something went wrong. Please try again later.");
     }
     setIsLoadingPayPal(false);
-    window.location.href = link.href;
+    // window.location.href = link.href;
   };
 
   if (isLoading) {
@@ -177,17 +177,17 @@ function PaymentModal() {
           <Elements stripe={stripePromise} options={{ clientSecret }}>
             {selectedPaymentMethod === EPaymentMethod.PAYPAL_OR_APPLE_PAY && (
               <div className={styles["payment-method"]}>
-                <ApplePayButton
-                  activeSubPlan={activeSubPlan}
-                  client_secret={clientSecret}
-                  subscriptionReceiptId={subscriptionReceiptId}
-                />
                 {payPalSubPlan && (
                   <PayPalButton
                     isLoading={isLoadingPayPal}
                     handlePayPalButton={handlePayPalButton}
                   />
                 )}
+                <ApplePayButton
+                  activeSubPlan={activeSubPlan}
+                  client_secret={clientSecret}
+                  subscriptionReceiptId={subscriptionReceiptId}
+                />
                 {!!errors.length && <p className={styles.errors}>{errors}</p>}
               </div>
             )}
diff --git a/src/components/pages/TrialPayment/index.tsx b/src/components/pages/TrialPayment/index.tsx
index 8a841bf..05a86c4 100755
--- a/src/components/pages/TrialPayment/index.tsx
+++ b/src/components/pages/TrialPayment/index.tsx
@@ -119,7 +119,7 @@ function TrialPaymentPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <Modal open={isOpenPaymentModal} onClose={handleDiscount}>
+      <Modal containerClassName={styles.modal} open={isOpenPaymentModal} onClose={handleDiscount}>
         <PaymentModal />
       </Modal>
       <Header buttonClick={openStripeModal} />
diff --git a/src/components/pages/TrialPayment/styles.module.css b/src/components/pages/TrialPayment/styles.module.css
index 2abe954..d000005 100755
--- a/src/components/pages/TrialPayment/styles.module.css
+++ b/src/components/pages/TrialPayment/styles.module.css
@@ -14,3 +14,7 @@
   color: #333333;
   font-weight: 700;
 }
+
+.modal {
+  max-height: calc(100dvh - 40px);
+}
diff --git a/src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx b/src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx
index b62b2f7..ec14f2f 100644
--- a/src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx
+++ b/src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx
@@ -20,7 +20,7 @@ function PaymentDiscountTable() {
         </div>
         <div className={styles.side}>
           <span className={styles.discount}>-30%</span>
-          <strong>-65%</strong>
+          <strong>-50%</strong>
         </div>
       </div>
       <div className={styles["cost-container"]}>
diff --git a/src/components/pages/TrialPaymentWithDiscount/index.tsx b/src/components/pages/TrialPaymentWithDiscount/index.tsx
index 972cdd9..4122374 100644
--- a/src/components/pages/TrialPaymentWithDiscount/index.tsx
+++ b/src/components/pages/TrialPaymentWithDiscount/index.tsx
@@ -36,7 +36,7 @@ function TrialPaymentWithDiscount() {
       <p className={styles.policy}>
         By continuing you agree that if you don't cancel prior to the end of the
         3-days trial, you will automatically be charged $9 for the introductory
-        period of 30 days thereafter the standard rate of $9 every 30 days until
+        period of 14 days thereafter the standard rate of $9 every 14 days until
         you cancel in settings. Learn more about cancellation and refund policy
         in Subscription terms.
       </p>