Merge pull request #2013 from jcamposmk/DAT-995-message-for-trimestra…

…l-accounts

feat: add message for trimestral/semestral/year accounts

src/components/Plans/PlanCalculator/SubscriptionType/index.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { FormattedMessageMarkdown } from '../../../../i18n/FormattedMessageMarkdown';
+
+export const SubscriptionType = ({ period, discountPercentage }) => {
+  return (
+    <div className="dp-align--center p-t-30">
+      <div className="p-b-6">
+        <FormattedMessageMarkdown id="plan_calculator.current_subscription" values={{ period }} />
+      </div>
+      <FormattedMessageMarkdown
+        id="plan_calculator.subscription_discount"
+        values={{ discountPercentage }}
+      />
+    </div>
+  );
+};
+
+SubscriptionType.propTypes = {
+  period: PropTypes.oneOf([1, 3, 6, 12]),
+  discountPercentage: PropTypes.number,
+};

src/components/Plans/PlanCalculator/SubscriptionType/index.test.js

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import { SubscriptionType } from '.';
+import IntlProvider from '../../../../i18n/DopplerIntlProvider.double-with-ids-as-values';
+
+describe('SuscriptionType', () => {
+  it(`should render SuscriptionType`, async () => {
+    // Act
+    render(
+      <IntlProvider>
+        <SubscriptionType period={3} discountPercentage={5} />
+      </IntlProvider>,
+    );
+
+    // Assert
+    screen.getByText('plan_calculator.current_subscription');
+    screen.getByText('plan_calculator.subscription_discount');
+  });
+});

src/components/Plans/PlanCalculator/index.js

@@ -31,6 +31,7 @@ import {
   PROMOCODE_ACTIONS,
 } from './reducers/promocodeReducer';
 import { Slider } from './Slider';
+import { SubscriptionType } from './SubscriptionType';
 import { UnexpectedError } from './UnexpectedError';
 
 export const PlanCalculator = InjectAppServices(
@@ -173,6 +174,8 @@ export const PlanCalculator = InjectAppServices(
     const promocode = query.get('promo-code') ?? query.get('PromoCode') ?? '';
     const hasPromocode = !!promocode;
 
+    const isMonthlySubscription = sessionPlan.plan.planSubscription === 1;
+
     return (
       <>
         <section className="dp-gray-page p-t-54 p-b-54">
@@ -204,14 +207,24 @@ export const PlanCalculator = InjectAppServices(
                                 currentPlanList={plansByType}
                                 planTypes={planTypes}
                               />
-                              {discounts.length > 0 && (
+                              {isMonthlySubscription ? (
+                                discounts.length > 0 && (
+                                  <>
+                                    <hr />
+                                    <Discounts
+                                      discounts={discounts}
+                                      selectedDiscount={selectedDiscount}
+                                      onSelectDiscount={handleDiscountChange}
+                                      disabled={promotion.isValid}
+                                    />
+                                  </>
+                                )
+                              ) : (
                                 <>
                                   <hr />
-                                  <Discounts
-                                    discounts={discounts}
-                                    selectedDiscount={selectedDiscount}
-                                    onSelectDiscount={handleDiscountChange}
-                                    disabled={promotion.isValid}
+                                  <SubscriptionType
+                                    period={selectedDiscount?.numberMonths}
+                                    discountPercentage={selectedDiscount?.discountPercentage}
                                   />
                                 </>
                               )}

src/components/Plans/PlanCalculator/index.test.js

@@ -378,6 +378,58 @@ describe('PlanCalculator component', () => {
     expect(byEmailsTab).not.toBeInTheDocument();
   });
 
+  it('should be visible current description type', async () => {
+    // Arrange
+    const planTypes = [PLAN_TYPE.byContact];
+    const forcedServices = {
+      appSessionRef: {
+        current: {
+          userData: {
+            user: {
+              plan: {
+                idPlan: 3,
+                planType: PLAN_TYPE.byContact,
+                planSubscription: 3,
+              },
+            },
+          },
+        },
+      },
+      planService: {
+        getPlanTypes: async () => planTypes,
+        getPlansByType: async () => plansByContacts,
+      },
+      experimentalFeatures: {
+        getFeature: () => false,
+      },
+      ipinfoClient: {
+        getCountryCode: () => 'CL',
+      },
+    };
+
+    // Act
+    render(
+      <AppServicesProvider forcedServices={forcedServices}>
+        <IntlProvider>
+          <Router
+            initialEntries={[`/plan-selection/premium/${URL_PLAN_TYPE[PLAN_TYPE.byContact]}`]}
+          >
+            <Route path="/plan-selection/premium/:planType?">
+              <PlanCalculator />
+            </Route>
+          </Router>
+        </IntlProvider>
+      </AppServicesProvider>,
+    );
+
+    // Assert
+    const loader = screen.getByTestId('wrapper-loading');
+    await waitForElementToBeRemoved(loader);
+
+    screen.getByText('plan_calculator.current_subscription');
+    expect(screen.queryByText('plan_calculator.discount_title')).not.toBeInTheDocument();
+  });
+
   describe('Redirections when the type of plan is by email', () => {
     [
       {

src/i18n/en.js

@@ -745,6 +745,7 @@ You'll find an Email with steps to follow.`,
     button_purchase: 'Continue',
     button_purchase_tooltip: 'This is your current Plan! Change it to continue.',
     cost_per_email: 'Cost per email',
+    current_subscription: 'You currently have a subscription for {period} months',
     discount_clarification: `The renewal is automatic and you can cancel it whenever you want. Plan price doesn’t include taxes.`,
     discount_clarification_prepaid: 'Plan price doesn’t include taxes.',
     discount_half_yearly: '6 months',
@@ -774,6 +775,7 @@ You'll find an Email with steps to follow.`,
 We couldn't apply the discount.
 
 Promo code isn’t valid.`,
+    subscription_discount: 'You save {discountPercentage}% on the value of the Plan',
     suggestion_for_monthly_deliveries: '¿Do you have more than 10.000.000 schedules? <Link>Contact us.</Link>',
     suggestion_for_prepaid: ' ',
     suggestion_for_subscribers: '¿Do you have more than de 100.000 contacts? We recommend our <Bold>SHIPPING PLANS</Bold>, <Link>contact us.</Link>',

src/i18n/es.js

@@ -745,6 +745,7 @@ Encontrarás un Email con los pasos a seguir.`,
     button_purchase: 'Continuar',
     button_purchase_tooltip: '¡Este es el Plan que tienes actualmente! Modifícalo para continuar.',
     cost_per_email: 'Costo por email',
+    current_subscription: 'Actualmente tienes una **suscripción por {period} meses**',
     discount_clarification: 'La renovación es automática y puedes cancelarla cuando quieras. El precio del Plan no incluye impuestos.',
     discount_clarification_prepaid: 'El precio del Plan no incluye impuestos.',
     discount_half_yearly: '6 meses',
@@ -774,6 +775,7 @@ Encontrarás un Email con los pasos a seguir.`,
 No pudimos aplicar el descuento.
 
 El código es inválido.`,
+    subscription_discount: 'Ahorras {discountPercentage}% sobre el valor del Plan',
     suggestion_for_monthly_deliveries: '¿Realizas más de 10.000.000 de envíos? <Link>Contáctanos y te asesoraremos.</Link>',
     suggestion_for_prepaid: ' ',
     suggestion_for_subscribers: '¿Tienes más de 100.000 contactos? Te recomendamos nuestros <Bold>PLANES POR ENVÍOS</Bold>, <Link>contáctanos y te asesoraremos.</Link>',