Preview/discount pages

src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx

@@ -4,10 +4,30 @@ import ReservedTimer from "./components/ReservedTimer";
 import MainButton from "@/components/MainButton";
 import Modal from "@/components/Modal";
 import PaymentModal from "../../TrialPayment/components/PaymentModal";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
+import { useApi } from "@/api";
+import { useTranslation } from "react-i18next";
 
 function MarketingTrialPayment() {
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
+  const api = useApi();
   const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
+  const [freeTrialPlan, setFreeTrialPlan] = useState<
+    ISubscriptionPlan | undefined
+  >();
+
+  // get free trial plan
+  useEffect(() => {
+    (async () => {
+      const { sub_plans } = await api.getSubscriptionPlans({ locale });
+      const _freeTrialPlan = sub_plans.find(
+        (subPlan) => subPlan.trial?.is_free
+      );
+      setFreeTrialPlan(_freeTrialPlan);
+    })();
+  }, [api, locale]);
 
   const openStripeModal = () => {
     setIsOpenPaymentModal(true);
@@ -24,7 +44,7 @@ function MarketingTrialPayment() {
         open={isOpenPaymentModal}
         onClose={handleCloseModal}
       >
-        <PaymentModal />
+        <PaymentModal activeSubscriptionPlan={freeTrialPlan} />
       </Modal>
       <section className={`${styles.page} page`}>
         <div className={styles.wrapper}>

src/components/pages/TrialChoice/index.tsx

@@ -11,6 +11,10 @@ import routes from "@/routes";
 import EmailsList from "@/components/EmailsList";
 import MainButton from "@/components/MainButton";
 
+interface IPlanKey {
+  [key: string]: number;
+}
+
 function TrialChoicePage() {
   const { i18n } = useTranslation();
   const locale = i18n.language;
@@ -25,20 +29,36 @@ function TrialChoicePage() {
   useEffect(() => {
     (async () => {
       const { sub_plans } = await api.getSubscriptionPlans({ locale });
-      const plans = sub_plans
+      const plansWithoutTest = sub_plans.filter(
-        .filter((plan: ISubscriptionPlan) => plan.provider === "stripe")
+        (plan: ISubscriptionPlan) => !plan.name.includes("(test)")
-        .sort((a, b) => {
+      );
-          if (!a.trial || !b.trial) {
+      const plansKeys: IPlanKey = {};
-            return 0;
+      const plans: ISubscriptionPlan[] = [];
-          }
+      for (const plan of plansWithoutTest) {
-          if (a.trial?.price_cents < b.trial?.price_cents) {
+        plansKeys[plan.name] = plansKeys[plan.name]
-            return -1;
+          ? plansKeys[plan.name] + 1
-          }
+          : 1;
-          if (a.trial?.price_cents > b.trial?.price_cents) {
+        if (plansKeys[plan.name] > 1 && !plan.trial?.is_free) {
-            return 1;
+          const targetPlan = plansWithoutTest.find(
-          }
+            (item) => item.name === plan.name && item.id.includes("stripe")
+          );
+          plans.push(targetPlan as ISubscriptionPlan);
+        }
+      }
+
+      plans.sort((a, b) => {
+        if (!a.trial || !b.trial) {
           return 0;
-        });
+        }
+        if (a.trial?.price_cents < b.trial?.price_cents) {
+          return -1;
+        }
+        if (a.trial?.price_cents > b.trial?.price_cents) {
+          return 1;
+        }
+        return 0;
+      });
+
       setSubPlans(plans);
     })();
   }, [api, locale]);

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

@@ -20,13 +20,20 @@ import { getPriceFromTrial } from "@/services/price";
 import SecurityPayments from "../SecurityPayments";
 import PayPalButton from "./components/PayPalButton";
 
-function PaymentModal() {
+interface IPaymentModalProps {
+  activeSubscriptionPlan?: ISubscriptionPlan;
+}
+
+function PaymentModal({ activeSubscriptionPlan }: IPaymentModalProps) {
   const { i18n } = useTranslation();
   const locale = i18n.language;
   const api = useApi();
   const { token } = useAuth();
   const navigate = useNavigate();
-  const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
+  const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
+  const activeSubPlan = activeSubscriptionPlan
+    ? activeSubscriptionPlan
+    : activeSubPlanFromStore;
   const [payPalSubPlan, setPayPalSubPlan] = useState<ISubscriptionPlan>();
   const [stripePromise, setStripePromise] =
     useState<Promise<Stripe | null> | null>(null);
@@ -40,7 +47,7 @@ function PaymentModal() {
   const [isError, setIsError] = useState<boolean>(false);
 
   const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(
-    EPaymentMethod.CREDIT_CARD
+    EPaymentMethod.PAYPAL_OR_APPLE_PAY
   );
 
   const onSelectPaymentMethod = (method: EPaymentMethod) => {
@@ -125,6 +132,7 @@ function PaymentModal() {
     }
     setIsLoadingPayPal(false);
     window.location.href = link.href;
+    // window.open(link.href, '_blank');
   };
 
   if (isLoading) {