AW-47-duplicateSubscriptionPlans

src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { useMemo } from "react";
 import { useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
 import { selectors } from "@/store";
-import useSteps, { Step } from '@/hooks/palmistry/use-steps';
+import useSteps, { Step } from "@/hooks/palmistry/use-steps";
-import Button from '@/components/palmistry/button/button';
+import Button from "@/components/palmistry/button/button";
-import EmailHeader from '@/components/palmistry/email-header/email-header';
+import EmailHeader from "@/components/palmistry/email-header/email-header";
 import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
 import { actions } from "@/store";
 import { useApi } from "@/api";
 
-const bestPlanId = 'stripe.15';
+const bestPlanId = "stripe.15";
 
 const getFormattedPrice = (plan: ISubscriptionPlan) => {
   return (plan.trial!.price_cents / 100).toFixed(2);
-}
+};
 
 export default function StepSubscriptionPlan() {
   const steps = useSteps();
@@ -23,11 +23,14 @@ export default function StepSubscriptionPlan() {
   const api = useApi();
   const { i18n } = useTranslation();
   const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
+  const allowedPlans = useMemo(() => ["stripe.37"], []);
 
   const storedEmail = steps.getStoredValue(Step.Email);
 
-  const [subscriptionPlan, setSubscriptionPlan] = React.useState('');
+  const [subscriptionPlan, setSubscriptionPlan] = React.useState("");
-  const [subscriptionPlans, setSubscriptionPlans] = React.useState<ISubscriptionPlan[]>([]);
+  const [subscriptionPlans, setSubscriptionPlans] = React.useState<
+    ISubscriptionPlan[]
+  >([]);
   const [email, setEmail] = React.useState(steps.getStoredValue(Step.Email));
 
   const locale = i18n.language;
@@ -42,7 +45,10 @@ export default function StepSubscriptionPlan() {
     (async () => {
       const { sub_plans } = await api.getSubscriptionPlans({ locale });
       const plans = sub_plans
-        .filter((plan: ISubscriptionPlan) => plan.provider === "stripe")
+        .filter(
+          (plan: ISubscriptionPlan) =>
+            plan.provider === "stripe" && !plan.name.includes("(test)")
+        )
         .sort((a, b) => {
           if (!a.trial || !b.trial) {
             return 0;
@@ -55,13 +61,19 @@ export default function StepSubscriptionPlan() {
           }
           return 0;
         });
-        setSubscriptionPlans(plans.filter((plan) => plan.trial?.price_cents));
+      setSubscriptionPlans(
+        plans.filter(
+          (plan) => plan.trial?.price_cents || allowedPlans.includes(plan.id)
+        )
+      );
     })();
-  }, [api, locale]);
+  }, [allowedPlans, api, locale]);
 
   React.useEffect(() => {
     if (subscriptionPlan) {
-      const targetSubPlan = subscriptionPlans.find((sub_plan) => sub_plan.id === subscriptionPlan);
+      const targetSubPlan = subscriptionPlans.find(
+        (sub_plan) => sub_plan.id === subscriptionPlan
+      );
 
       if (targetSubPlan) {
         dispatch(actions.payment.update({ activeSubPlan: targetSubPlan }));
@@ -70,7 +82,7 @@ export default function StepSubscriptionPlan() {
   }, [subscriptionPlan]);
 
   React.useEffect(() => {
-    setEmail(storedEmail || '');
+    setEmail(storedEmail || "");
   }, [storedEmail]);
 
   const onNext = () => {
@@ -80,15 +92,21 @@ export default function StepSubscriptionPlan() {
 
   return (
     <>
-      <EmailHeader email={email}/>
+      <EmailHeader email={email} />
 
       <div className="palmistry-container__title">
-        We've helped millions of people to reveal the destiny of their love life and what the future holds for them and
+        We've helped millions of people to reveal the destiny of their love life
-        their families.
+        and what the future holds for them and their families.
       </div>
 
       <div className="palmistry-container__image">
-        <svg width="153" height="133" viewBox="0 0 153 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="153"
+          height="133"
+          viewBox="0 0 153 133"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g clipPath="url(#clip0_16903_24136)">
             <rect width="153" height="133" fill=""></rect>
             <path
@@ -131,7 +149,11 @@ export default function StepSubscriptionPlan() {
         {subscriptionPlans.map((plan) => (
           <div
             key={plan.id}
-            className={`palmistry-container__plan ${subscriptionPlan === plan.id ? 'palmistry-container__plan_active' : ''}`}
+            className={`palmistry-container__plan ${
+              subscriptionPlan === plan.id
+                ? "palmistry-container__plan_active"
+                : ""
+            }`}
             onClick={() => setSubscriptionPlan(plan.id)}
           >
             <h3>${getFormattedPrice(plan)}</h3>
@@ -139,11 +161,23 @@ export default function StepSubscriptionPlan() {
         ))}
       </div>
 
-      <span className={`palmistry-container__subscription-text ${subscriptionPlan === bestPlanId ? 'palmistry-container__subscription-text_active' : ''}`}>
+      <span
-        It costs us $13.21 to compensate our AURA employees for the trial, but please choose the amount you are comfortable with.
+        className={`palmistry-container__subscription-text ${
+          subscriptionPlan === bestPlanId
+            ? "palmistry-container__subscription-text_active"
+            : ""
+        }`}
+      >
+        It costs us $13.21 to compensate our AURA employees for the trial, but
+        please choose the amount you are comfortable with.
       </span>
 
-      <Button className="palmistry-container__button" type="button" onClick={onNext} active>
+      <Button
+        className="palmistry-container__button"
+        type="button"
+        onClick={onNext}
+        active
+      >
         Continue
       </Button>
     </>