Preview/discount pages

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} />
         )}

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

src/components/StripePage/ApplePayButton/index.tsx

@@ -60,13 +60,17 @@ function ApplePayButton({
     });
 
     pr.on("paymentmethod", async (e) => {
-      const { error: stripeError } = await stripe.confirmCardPayment(
+      const { error: stripeError, paymentIntent } =
-        client_secret,
+        await stripe.confirmCardPayment(
-        {
+          client_secret,
-          payment_method: e.paymentMethod.id,
+          {
-        },
+            payment_method: e.paymentMethod.id,
-        { handleActions: false }
+          },
-      );
+          { 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)

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 {

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

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

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

@@ -14,3 +14,7 @@
   color: #333333;
   font-weight: 700;
 }
+
+.modal {
+  max-height: calc(100dvh - 40px);
+}

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"]}>

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>