Merge pull request #2519 from FromDoppler/dat-2136-fix-issue-stepper

[DAT-2136] - Fix issue with the stepper

src/App.js

@@ -350,7 +350,9 @@ const App = ({ locale, window, dependencies: { appSessionRef, sessionManager } }
               path="/landing-packages"
               element={
                 <PrivateRoute>
-                  <LandingPacksSelection />
+                  <BuyProcessLayout>
+                    <LandingPacksSelection />
+                  </BuyProcessLayout>
                 </PrivateRoute>
               }
             />

src/components/BuyProcess/BuyProcessLayout/index.js

@@ -1,43 +1,62 @@
+import { BUY_CHAT_PLAN, BUY_LANDING_PACK, BUY_MARKETING_PLAN } from '../../../doppler-types';
+import { useQueryParams } from '../../../hooks/useQueryParams';
 import { InjectAppServices } from '../../../services/pure-di';
 import { Stepper } from '../Stepper';
 
-export const defaultSteps = [
-  {
-    id: 1,
-    label: 'buy_process.stepper.email_marketing_plan_step',
-    icon: 'dpicon iconapp-email-alert',
-    pathname: '/plan-selection/premium',
-  },
-  {
-    id: 2,
-    label: 'buy_process.stepper.conversation_plan_step',
-    icon: 'dpicon iconapp-chatting',
-    pathname: '/plan-chat',
-  },
-  {
-    id: 3,
-    label: 'buy_process.stepper.finalize_purchase_step',
-    icon: 'dpicon iconapp-fast-money',
-    pathname: '/checkout/premium',
-  },
-  {
-    id: 4,
-    label: 'buy_process.stepper.enjoy_doppler_step',
-    icon: 'dpicon iconapp-launch',
-    pathname: '/checkout-summary',
-  },
-];
+export const getSteps = (buyType, user) => {
+  const chat = user.chat;
+
+  const steps = [
+    {
+      id: 1,
+      label: 'buy_process.stepper.email_marketing_plan_step',
+      icon: 'dpicon iconapp-email-alert',
+      pathname: '/plan-selection/premium',
+      visible: buyType === BUY_MARKETING_PLAN.toString(),
+    },
+    {
+      id: 2,
+      label: 'buy_process.stepper.conversation_plan_step',
+      icon: 'dpicon iconapp-chatting',
+      pathname: '/plan-chat',
+      visible:
+        (buyType === BUY_MARKETING_PLAN.toString() || buyType === BUY_CHAT_PLAN.toString()) &&
+        chat &&
+        chat.active,
+    },
+    {
+      id: 3,
+      label: 'buy_process.stepper.landings_plan_step',
+      icon: 'dpicon iconapp-chatting',
+      pathname: '/landing-packages',
+      visible: buyType === BUY_LANDING_PACK.toString(),
+    },
+    {
+      id: 4,
+      label: 'buy_process.stepper.finalize_purchase_step',
+      icon: 'dpicon iconapp-fast-money',
+      pathname: '/checkout/premium',
+      visible: true,
+    },
+    {
+      id: 5,
+      label: 'buy_process.stepper.enjoy_doppler_step',
+      icon: 'dpicon iconapp-launch',
+      pathname: '/checkout-summary',
+      visible: true,
+    },
+  ];
+
+  return steps;
+};
 
 export const BuyProcessLayout = InjectAppServices(
   ({ children, dependencies: { appSessionRef } }) => {
-    const chat = appSessionRef.current.userData.user.chat;
-
-    let steps;
-    if (chat && !chat.active) {
-      steps = defaultSteps.filter((s) => s.id !== 2);
-    } else {
-      steps = defaultSteps;
-    }
+    const query = useQueryParams();
+    const buyType = query.get('buyType') ?? '';
+    let steps = getSteps(buyType, appSessionRef.current.userData.user).filter(
+      (s) => s.visible === true,
+    );
 
     return (
       <div className="dp-container">

src/components/BuyProcess/LandingPacksSelection/index.js

@@ -4,7 +4,7 @@ import { InjectAppServices } from '../../../services/pure-di';
 import { Loading } from '../../Loading/Loading';
 import HeaderSection from '../../shared/HeaderSection/HeaderSection';
 import { GoBackButton } from '../PlanSelection/GoBackButton';
-import { BUY_LANDING_PACK, ShoppingCart } from '../ShoppingCart';
+import { ShoppingCart } from '../ShoppingCart';
 import { UnexpectedError } from '../UnexpectedError';
 import { LandingPacks, filterPackagesEqualOrGreatherToZero } from './LandingPacks';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -16,6 +16,7 @@ import {
 } from './reducers/deleteLandingPagesReducer';
 import { LandingPacksMessages } from './LandingPacksMessages';
 import { ACCOUNT_TYPE, FREE_ACCOUNT } from '../../../utils';
+import { BUY_LANDING_PACK } from '../../../doppler-types';
 
 export const paymentFrequenciesListForLandingPacks = [
   {

src/components/BuyProcess/PlanChat/index.js

@@ -8,8 +8,8 @@ import { Loading } from '../../Loading/Loading';
 import { UnexpectedError } from '../UnexpectedError';
 import { SelectedPlanChat } from './SelectedPlanChat';
 import { PlanChatInfo } from './PlanChatInfo';
-import { BUY_CHAT_PLAN, ShoppingCart } from '../ShoppingCart';
-import { PLAN_TYPE, PaymentMethodType } from '../../../doppler-types';
+import { ShoppingCart } from '../ShoppingCart';
+import { BUY_CHAT_PLAN, PLAN_TYPE, PaymentMethodType } from '../../../doppler-types';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { PlanBenefits } from './PlanBenefits';
 import { GoBackButton } from '../PlanSelection/GoBackButton';

src/components/BuyProcess/PlanTypes/index.js

@@ -1,7 +1,7 @@
 import { Helmet } from 'react-helmet';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link, Navigate, useLocation } from 'react-router-dom';
-import { PLAN_TYPE, URL_PLAN_TYPE } from '../../../doppler-types';
+import { BUY_MARKETING_PLAN, PLAN_TYPE, URL_PLAN_TYPE } from '../../../doppler-types';
 import { PlanTypeCard } from './PlanTypeCard';
 import { InjectAppServices } from '../../../services/pure-di';
 import { useFetchPlanTypes } from '../../../hooks/useFetchPlanTypes';
@@ -102,7 +102,9 @@ export const PlanTypes = InjectAppServices(
     if (!isFreeAccount) {
       return (
         <Navigate
-          to={`/plan-selection/premium/${URL_PLAN_TYPE[PLAN_TYPE.byContact]}?${queryParams}`}
+          to={`/plan-selection/premium/${
+            URL_PLAN_TYPE[PLAN_TYPE.byContact]
+          }?${queryParams}&buyType=${BUY_MARKETING_PLAN}`}
         />
       );
     }
@@ -144,8 +146,8 @@ export const PlanTypes = InjectAppServices(
                         {...item}
                         queryParams={`${
                           isArgentina
-                            ? `${queryParams}&promo-code=${process.env.REACT_APP_PROMOCODE_ARGENTINA}`
-                            : queryParams
+                            ? `${queryParams}&promo-code=${process.env.REACT_APP_PROMOCODE_ARGENTINA}&buyType=${BUY_MARKETING_PLAN}`
+                            : `${queryParams}&buyType=${BUY_MARKETING_PLAN}`
                         }`}
                       />
                     ))}

src/components/BuyProcess/ShoppingCart/CheckoutButton/LandingPackCheckoutButton.js

@@ -6,8 +6,8 @@ import useTimeout from '../../../../hooks/useTimeout';
 import { InjectAppServices } from '../../../../services/pure-di';
 import { ACCOUNT_TYPE } from '../../../../hooks/useUserTypeAsQueryParam';
 import { getCheckoutErrorMesage } from '../utils';
-import { BUY_LANDING_PACK } from '..';
 import { FREE_ACCOUNT, PAID_ACCOUNT } from '../../../../utils';
+import { BUY_LANDING_PACK } from '../../../../doppler-types';
 
 export const DELAY_BEFORE_REDIRECT_TO_SUMMARY = 3000;
 const HAS_ERROR = 'HAS_ERROR';

src/components/BuyProcess/ShoppingCart/CheckoutButton/LandingPackCheckoutButton.test.js

@@ -3,11 +3,11 @@ import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter as Router } from 'react-router-dom';
 import { DELAY_BEFORE_REDIRECT_TO_SUMMARY } from '.';
-import { BUY_LANDING_PACK } from '..';
 import { ACCOUNT_TYPE } from '../../../../hooks/useUserTypeAsQueryParam';
 import IntlProvider from '../../../../i18n/DopplerIntlProvider.double-with-ids-as-values';
 import { AppServicesProvider } from '../../../../services/pure-di';
 import { LandingPackCheckoutButton } from './LandingPackCheckoutButton';
+import { BUY_LANDING_PACK } from '../../../../doppler-types';
 
 const getFakePurchase = (success) => {
   const purchaseMock = jest.fn(async () => ({

src/components/BuyProcess/ShoppingCart/CheckoutButton/index.js

@@ -4,10 +4,9 @@ import { useIntl } from 'react-intl';
 import { useQueryParams } from '../../../../hooks/useQueryParams';
 import useTimeout from '../../../../hooks/useTimeout';
 import { InjectAppServices } from '../../../../services/pure-di';
-import { PaymentMethodType } from '../../../../doppler-types';
+import { BUY_MARKETING_PLAN, PaymentMethodType } from '../../../../doppler-types';
 import { ACCOUNT_TYPE } from '../../../../hooks/useUserTypeAsQueryParam';
 import { getCheckoutErrorMesage } from '../utils';
-import { BUY_MARKETING_PLAN } from '..';
 
 export const DELAY_BEFORE_REDIRECT_TO_SUMMARY = 3000;
 const HAS_ERROR = 'HAS_ERROR';

src/components/BuyProcess/ShoppingCart/CheckoutButton/index.test.js

@@ -7,7 +7,7 @@ import { AppServicesProvider } from '../../../../services/pure-di';
 import { MemoryRouter as Router } from 'react-router-dom';
 import { ACCOUNT_TYPE } from '../../../../hooks/useUserTypeAsQueryParam';
 import { paymentType } from '../../../Plans/Checkout/PaymentMethod/PaymentMethod';
-import { BUY_MARKETING_PLAN } from '..';
+import { BUY_MARKETING_PLAN } from '../../../../doppler-types';
 
 const getFakePurchase = (success) => {
   const purchaseMock = jest.fn(async () => ({

src/components/BuyProcess/ShoppingCart/CheckoutLink/LandingPackCheckoutLink.js

@@ -2,7 +2,6 @@ import { FormattedMessage } from 'react-intl';
 import { TooltipContainer } from '../../../TooltipContainer/TooltipContainer';
 import { useLocation } from 'react-router-dom';
 import { CheckoutLinkStyled } from './index.style';
-import { BUY_LANDING_PACK } from '..';
 
 export const LandingPackCheckoutLink = ({
   showTooltip,
@@ -45,7 +44,7 @@ export const getNewCheckoutPurchaseUrl = ({
   currentQueryParams,
 }) => {
   return (
-    `/checkout/premium/${planType}?landing-ids=${landingIds}&landing-packs=${landingPacks}&buyType=${BUY_LANDING_PACK}` +
+    `/checkout/premium/${planType}?landing-ids=${landingIds}&landing-packs=${landingPacks}` +
     `${monthPlan ? `&monthPlan=${monthPlan}` : ''}` +
     `${currentQueryParams}`
   );

src/components/BuyProcess/ShoppingCart/CheckoutLink/LandingPackCheckoutLink.test.js

@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom/extend-expect';
-import { BUY_LANDING_PACK } from '..';
-import { PLAN_TYPE } from '../../../../doppler-types';
+import { BUY_LANDING_PACK, PLAN_TYPE } from '../../../../doppler-types';
 import { getNewCheckoutPurchaseUrl } from './LandingPackCheckoutLink';
 
 describe('LandingPackCheckoutLink', () => {
@@ -11,7 +10,7 @@ describe('LandingPackCheckoutLink', () => {
       const landingIds = '1,2,3';
       const landingPacks = '5,2,1';
       const monthPlan = 1;
-      const currentQueryParams = '&accountType=FREE';
+      const currentQueryParams = `&accountType=FREE&buyType=${BUY_LANDING_PACK}`;
 
       // Act
       const checkoutUrl = getNewCheckoutPurchaseUrl({
@@ -24,7 +23,7 @@ describe('LandingPackCheckoutLink', () => {
 
       // Assert
       expect(checkoutUrl).toBe(
-        `/checkout/premium/${planType}?landing-ids=${landingIds}&landing-packs=${landingPacks}&buyType=${BUY_LANDING_PACK}&monthPlan=${monthPlan}${currentQueryParams}`,
+        `/checkout/premium/${planType}?landing-ids=${landingIds}&landing-packs=${landingPacks}&monthPlan=${monthPlan}${currentQueryParams}`,
       );
     });
   });

src/components/BuyProcess/ShoppingCart/index.js

@@ -14,6 +14,9 @@ import {
   mapItemFromPlanChat,
 } from './utils';
 import {
+  BUY_CHAT_PLAN,
+  BUY_LANDING_PACK,
+  BUY_MARKETING_PLAN,
   PLAN_TYPE,
   PaymentMethodType,
   SUBSCRIBERS_LIMIT_EXCLUSIVE_DISCOUNT_ARGENTINA,
@@ -27,10 +30,6 @@ const numberFormatOptions = {
   maximumFractionDigits: 2,
 };
 
-export const BUY_MARKETING_PLAN = 1;
-export const BUY_LANDING_PACK = 2;
-export const BUY_CHAT_PLAN = 3;
-
 export const ShoppingCart = InjectAppServices(
   ({
     discountConfig,

src/components/BuyProcess/ShoppingCart/utils.js

@@ -1,6 +1,8 @@
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { amountByPlanType, thousandSeparatorNumber } from '../../../utils';
 import {
+  BUY_LANDING_PACK,
+  BUY_MARKETING_PLAN,
   CloverError,
   FirstDataError,
   MercadoPagoError,
@@ -9,7 +11,6 @@ import {
 } from '../../../doppler-types';
 import { CheckoutLink } from './CheckoutLink';
 import { CheckoutButton } from './CheckoutButton';
-import { BUY_LANDING_PACK, BUY_MARKETING_PLAN } from '.';
 import { LandingPackCheckoutLink } from './CheckoutLink/LandingPackCheckoutLink';
 import { LandingPackCheckoutButton } from './CheckoutButton/LandingPackCheckoutButton';
 

src/components/Plans/Checkout/Checkout.js

@@ -6,13 +6,18 @@ import { BillingInformation } from './BillingInformation/BillingInformation';
 import { PaymentMethod } from './PaymentMethod/PaymentMethod';
 import { Step } from './Step/Step';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { PLAN_TYPE, PaymentMethodType, URL_PLAN_TYPE } from '../../../doppler-types';
+import {
+  BUY_LANDING_PACK,
+  PLAN_TYPE,
+  PaymentMethodType,
+  URL_PLAN_TYPE,
+} from '../../../doppler-types';
 import {
   getMonthsByCycle,
   getQueryParamsWithAccountType,
   orderPaymentFrequencies,
 } from '../../../utils';
-import { BUY_LANDING_PACK, ShoppingCart } from '../../BuyProcess/ShoppingCart';
+import { ShoppingCart } from '../../BuyProcess/ShoppingCart';
 import { useQueryParams } from '../../../hooks/useQueryParams';
 import { useFetchLandingPacks } from '../../../hooks/useFetchtLandingPacks';
 import { paymentFrequenciesListForLandingPacks } from '../../BuyProcess/LandingPacksSelection';
@@ -327,7 +332,7 @@ const Checkout = InjectAppServices(
               <hr className="dp-h-divider" />
               {isBuyLandingPacks ? (
                 <Link
-                  to={`/landing-packages`}
+                  to={`/landing-packages?buyType=${BUY_LANDING_PACK}`}
                   className="dp-button button-medium primary-grey m-t-30 m-r-24"
                 >
                   {_('checkoutProcessForm.button_back')}

src/components/Plans/Checkout/CheckoutSummary/CheckoutSummary.js

@@ -20,14 +20,13 @@ import { TransferInformation } from './TransferInformation/index';
 import { CheckoutSummaryButton } from './CheckoutSummaryButton';
 import { CheckoutSummaryTitle } from './CheckoutSummaryTitle/index';
 import { MercadoPagoInformation } from './MercadoPagoInformation';
-import { PLAN_TYPE } from '../../../../doppler-types';
+import { BUY_LANDING_PACK, PLAN_TYPE } from '../../../../doppler-types';
 import { Link } from 'react-router-dom';
 import { AddOn } from '../../../shared/AddOn';
 import { useFetchLandingPacks } from '../../../../hooks/useFetchtLandingPacks';
 import useTimeout from '../../../../hooks/useTimeout';
 import { Carousel } from '../../../Dashboard/LearnWithDoppler/Carousel/Carousel';
 import { Slide } from '../../../Dashboard/LearnWithDoppler/Carousel/Slide/Slide';
-import { BUY_LANDING_PACK } from '../../../BuyProcess/ShoppingCart';
 import { PlanChatInformation } from './PlanChatInformation';
 
 export const AddOnLandingPack = InjectAppServices(
@@ -44,11 +43,19 @@ export const AddOnLandingPack = InjectAppServices(
         titleIconName="dpicon iconapp-landing-page"
         description={_('landing_selection.modal.description')}
         link1={{
-          pathname: `/landing-packages${accountType ? `?${ACCOUNT_TYPE}=${accountType}` : ''}`,
+          pathname: `/landing-packages${
+            accountType
+              ? `?${ACCOUNT_TYPE}=${accountType}&buyType=${BUY_LANDING_PACK}`
+              : `?buyType=${BUY_LANDING_PACK}`
+          }`,
           label: 'Mas información',
         }}
         link2={{
-          pathname: `/landing-packages${accountType ? `?${ACCOUNT_TYPE}=${accountType}` : ''}`,
+          pathname: `/landing-packages${
+            accountType
+              ? `?${ACCOUNT_TYPE}=${accountType}&buyType=${BUY_LANDING_PACK}`
+              : `?buyType=${BUY_LANDING_PACK}`
+          }`,
           label: 'Comprar ahora',
         }}
         priceComponent={
@@ -654,7 +661,11 @@ export const ModalPromoLandingPacks = () => {
           <p>{_('landing_selection.modal.description')}</p>
 
           <Link
-            to={`/landing-packages${accountType ? `?${ACCOUNT_TYPE}=${accountType}` : ''}`}
+            to={`/landing-packages${
+              accountType
+                ? `?${ACCOUNT_TYPE}=${accountType}&buyType=${BUY_LANDING_PACK}`
+                : `?buyType=${BUY_LANDING_PACK}`
+            }`}
             className="dp-button button-medium primary-green"
           >
             {_('landing_selection.modal.link_to_buy')}

src/doppler-types.ts

@@ -205,4 +205,8 @@ export const paymentFrequenciesListFake = [
     subscriptionType: 'monthly',
     discountPercentage: 0,
   },
-];
+];
+
+export const BUY_MARKETING_PLAN = 1;
+export const BUY_LANDING_PACK = 3;
+export const BUY_CHAT_PLAN = 2;

src/i18n/en.js

@@ -157,6 +157,7 @@ const messages_en = {
       email_marketing_plan_step: 'Plan Marketing',
       enjoy_doppler_step: 'Enjoy Doppler',
       finalize_purchase_step: 'Finalize your purchase',
+      landings_plan_step: 'Plan Landings',
     },
     subscriptions_title: `Subscriptions`,
     upcoming_bills: {