diff --git a/src/components/BuyProcess/NewPlanSelection/ContactsPlan/index.js b/src/components/BuyProcess/NewPlanSelection/ContactsPlan/index.js index 381c7d811..8af358889 100644 --- a/src/components/BuyProcess/NewPlanSelection/ContactsPlan/index.js +++ b/src/components/BuyProcess/NewPlanSelection/ContactsPlan/index.js @@ -24,6 +24,15 @@ const getFormattedPriceOptions = (value) => ({ const MORE_THAN_100K_OPTION_VALUE = 'more-than-100000'; const getSessionPromocodeApplied = (sessionPlan) => { + const isFreeAccount = Boolean(sessionPlan?.plan?.isFreeAccount); + const planSubscription = Number(sessionPlan?.plan?.planSubscription); + const hasNonMonthlySubscription = !Number.isNaN(planSubscription) && planSubscription !== 1; + + // For paid users with non-monthly subscription we should not prepopulate promocode. + if (!isFreeAccount && hasNonMonthlySubscription) { + return null; + } + const promotion = sessionPlan?.plan?.promotion; const sanitizeCode = (value) => value === undefined || value === null ? '' : String(value).trim(); @@ -227,7 +236,7 @@ export const ContactsPlan = InjectAppServices( const shouldShowLosePromotionWarning = !isTailoredPlan && isUpgradePlan && isAppliedPromocodeSameAsSaved; const shouldUseAdvisorCta = isTailoredPlan || shouldShowDowngradeWarning; - const shouldDisablePaymentFrequency = !keepControlsEnabled; + const shouldDisablePaymentFrequency = !isFreeAccount && !keepControlsEnabled; const stickyDiscountSummary = useMemo(() => { if (isTailoredPlan) { diff --git a/src/components/BuyProcess/NewPlanSelection/EmailsPlan/index.js b/src/components/BuyProcess/NewPlanSelection/EmailsPlan/index.js new file mode 100644 index 000000000..fe82a5736 --- /dev/null +++ b/src/components/BuyProcess/NewPlanSelection/EmailsPlan/index.js @@ -0,0 +1,413 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; +import { PLAN_TYPE } from '../../../../doppler-types'; +import { InjectAppServices } from '../../../../services/pure-di'; +import { amountByPlanType, thousandSeparatorNumber, unitPriceDecimals } from '../../../../utils'; +import { Promocode } from '../Promocode'; + +const numberFormatOptions = { + maximumFractionDigits: 2, + minimumFractionDigits: 0, +}; + +const getFormattedPriceOptions = (value) => ({ + ...numberFormatOptions, + minimumFractionDigits: Number.isInteger(value) ? 0 : 2, +}); + +const getSessionPromocodeApplied = (sessionPlan) => { + const promotion = sessionPlan?.plan?.promotion; + const sanitizeCode = (value) => + value === undefined || value === null ? '' : String(value).trim(); + const promocode = + sanitizeCode(promotion?.code) || + sanitizeCode(promotion?.promocode) || + sanitizeCode(promotion?.promoCode) || + sanitizeCode(sessionPlan?.plan?.promotionCode) || + sanitizeCode(sessionPlan?.plan?.promocode); + + if (!promocode) { + return null; + } + + return { + canApply: true, + promocode, + promotionApplied: { + discountPercentage: promotion?.discount ?? 0, + duration: promotion?.duration ?? 0, + }, + }; +}; + +const getCheckoutUrl = ({ search, selectedPlan, promocodeApplied }) => { + const params = new URLSearchParams(search); + params.set('selected-plan', selectedPlan.id); + params.delete('promo-code'); + params.delete('Promo-code'); + params.delete('PromoCode'); + params.delete('discountId'); + params.delete('monthPlan'); + + if (promocodeApplied?.canApply && promocodeApplied.promocode) { + params.set('PromoCode', promocodeApplied.promocode); + } + + return `/checkout/premium/${PLAN_TYPE.byEmail}?${params.toString()}&buyType=1`; +}; + +export const EmailsPlan = InjectAppServices( + ({ + plans, + selectedPlanIndex, + isLessThan100kSelected, + isMoreThan10mSelected, + onPlanChange, + onStickySummaryChange, + sessionPlan, + selectedPlan, + search, + dependencies: { dopplerAccountPlansApiClient }, + }) => { + const intl = useIntl(); + const _ = (id, values) => intl.formatMessage({ id }, values); + const isFreeAccount = sessionPlan?.plan?.isFreeAccount; + const isEqualPlan = sessionPlan?.plan?.idPlan === selectedPlan?.id; + const [amountDetailsData, setAmountDetailsData] = useState(null); + const [promocodeApplied, setPromocodeApplied] = useState(null); + const [defaultPromocodeDismissed, setDefaultPromocodeDismissed] = useState(false); + const clearPromocodeInputRef = useRef(null); + const sessionPromocodeApplied = useMemo( + () => getSessionPromocodeApplied(sessionPlan), + [sessionPlan], + ); + const effectivePromocodeApplied = + promocodeApplied ?? (!defaultPromocodeDismissed ? sessionPromocodeApplied : null); + + useEffect(() => { + const fetchAmountDetails = async () => { + try { + const amountDetails = await dopplerAccountPlansApiClient.getPlanBillingDetailsData( + selectedPlan.id, + 'Marketing', + 0, + effectivePromocodeApplied?.canApply ? effectivePromocodeApplied.promocode : '', + ); + setAmountDetailsData(amountDetails); + } catch (error) { + setAmountDetailsData(null); + } + }; + + if (selectedPlan?.id) { + fetchAmountDetails(); + } + }, [dopplerAccountPlansApiClient, effectivePromocodeApplied, selectedPlan]); + + const handlePromocodeApplied = useCallback((promotion) => { + setPromocodeApplied(promotion && typeof promotion === 'object' ? promotion : null); + }, []); + + const handleRemovePromocodeApplied = useCallback(() => { + clearPromocodeInputRef.current?.(); + setDefaultPromocodeDismissed(true); + setPromocodeApplied(null); + }, []); + + const handleManualPromocodeIntervention = useCallback(() => { + setDefaultPromocodeDismissed(true); + }, []); + + const registerClearPromocodeInput = useCallback((clearPromocodeInput) => { + clearPromocodeInputRef.current = clearPromocodeInput; + }, []); + + const promocodeDiscount = amountDetailsData?.value?.discountPromocode ?? null; + const promocodeDiscountPercentage = promocodeDiscount?.discountPercentage ?? 0; + const selectedPlanFee = selectedPlan?.fee ?? 0; + const hasPromocodeDiscount = Boolean( + effectivePromocodeApplied?.canApply && + promocodeDiscountPercentage > 0 && + !isLessThan100kSelected && + !isMoreThan10mSelected, + ); + const displayedMonthlyPrice = + hasPromocodeDiscount && typeof amountDetailsData?.value?.nextMonthTotal === 'number' + ? amountDetailsData.value.nextMonthTotal + : selectedPlanFee; + const canChoosePlan = selectedPlan && !isEqualPlan; + const checkoutUrl = selectedPlan + ? getCheckoutUrl({ + search, + selectedPlan, + promocodeApplied: effectivePromocodeApplied, + }) + : '#'; + const stickyEmailsLabel = selectedPlan + ? thousandSeparatorNumber(intl.defaultLocale, amountByPlanType(selectedPlan)) + : ''; + const currentSessionEmailPlan = + plans.find((plan) => plan.id === sessionPlan?.plan?.idPlan) ?? null; + const currentSessionEmailCapacity = amountByPlanType(currentSessionEmailPlan ?? {}); + const selectedEmailCapacity = amountByPlanType(selectedPlan ?? {}); + const shouldShowDowngradeWarning = + !isMoreThan10mSelected && + (isLessThan100kSelected || + (!isFreeAccount && + sessionPlan?.plan?.planType === PLAN_TYPE.byEmail && + currentSessionEmailCapacity > 0 && + selectedEmailCapacity > 0 && + selectedEmailCapacity < currentSessionEmailCapacity)); + const shouldShowHighVolumeMessage = isMoreThan10mSelected; + const shouldUseAdvisorCta = shouldShowDowngradeWarning || shouldShowHighVolumeMessage; + const shouldShowPromocode = !shouldUseAdvisorCta; + const extraEmailPrice = selectedPlan?.extraEmailPrice ?? 0; + + const stickyDiscountSummary = useMemo(() => { + if (!shouldShowPromocode || !hasPromocodeDiscount) { + return null; + } + + return { + type: 'promocode', + percentage: promocodeDiscountPercentage, + months: 0, + }; + }, [hasPromocodeDiscount, promocodeDiscountPercentage, shouldShowPromocode]); + + const stickySummaryData = useMemo( + () => ({ + amountLabel: stickyEmailsLabel, + ctaHref: shouldUseAdvisorCta ? '/upgrade-suggestion-form' : checkoutUrl, + discountSummary: stickyDiscountSummary, + displayPrice: displayedMonthlyPrice, + isCustomPlan: false, + isDisabled: !shouldUseAdvisorCta && !canChoosePlan, + planType: PLAN_TYPE.byEmail, + useAdvisorCta: shouldUseAdvisorCta, + }), + [ + canChoosePlan, + checkoutUrl, + displayedMonthlyPrice, + shouldUseAdvisorCta, + stickyDiscountSummary, + stickyEmailsLabel, + ], + ); + + useEffect(() => { + onStickySummaryChange?.(stickySummaryData); + }, [onStickySummaryChange, stickySummaryData]); + + return ( +
+
+
+
+

+ +

+
+

+ }} + /> +

+
+
+ +
+
+
+
+

+ +

+ + +
+ + {shouldShowPromocode && ( +
+ +
+ )} + + {shouldShowHighVolumeMessage && ( +
+ +
+

+ , bold: (chunks) => {chunks} }} + /> +

+ + + +
+
+ )} + + {shouldShowDowngradeWarning && ( +
+ +
+

+ , bold: (chunks) => {chunks} }} + /> +

+ + + +
+
+ )} +
+
+ + +
+
+ ); + }, +); diff --git a/src/components/BuyProcess/NewPlanSelection/StickyPlanSummary/index.js b/src/components/BuyProcess/NewPlanSelection/StickyPlanSummary/index.js index b30650459..60aac0f0f 100644 --- a/src/components/BuyProcess/NewPlanSelection/StickyPlanSummary/index.js +++ b/src/components/BuyProcess/NewPlanSelection/StickyPlanSummary/index.js @@ -1,5 +1,6 @@ import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; +import { PLAN_TYPE } from '../../../../doppler-types'; const numberFormatOptions = { maximumFractionDigits: 2, @@ -21,6 +22,17 @@ export const StickyPlanSummary = ({ summary }) => { return null; } + const planType = summary.planType || PLAN_TYPE.byContact; + const planTitleMessageId = + planType === PLAN_TYPE.byEmail + ? 'buy_process.new_plan_selection.emails_plan_title' + : 'buy_process.new_plan_selection.contacts_plan_title'; + const subtitleMessageId = + planType === PLAN_TYPE.byEmail + ? 'buy_process.new_plan_selection.sticky_emails_subtitle' + : 'buy_process.new_plan_selection.sticky_contacts_subtitle'; + const amountLabel = summary.amountLabel ?? summary.contactsLabel; + return (
@@ -30,7 +42,7 @@ export const StickyPlanSummary = ({ summary }) => { ) : ( <> - {' '} + {' '} US$ { ) : ( )}

diff --git a/src/components/BuyProcess/NewPlanSelection/index.js b/src/components/BuyProcess/NewPlanSelection/index.js index 5afbe6d70..4c81a3c4f 100644 --- a/src/components/BuyProcess/NewPlanSelection/index.js +++ b/src/components/BuyProcess/NewPlanSelection/index.js @@ -8,6 +8,7 @@ import { GoBackButton } from './GoBackButton'; import { UnexpectedError } from '../UnexpectedError'; import { ContactsPlan } from './ContactsPlan'; import { CreditsPlan } from './CreditsPlan'; +import { EmailsPlan } from './EmailsPlan'; import { IncludedFeatures } from './IncludedFeatures'; import { StickyPlanSummary } from './StickyPlanSummary'; import { AddOnsSection } from './AddOnsSection'; @@ -15,6 +16,8 @@ import { FAQSection } from './FAQSection'; import { NewPlanSelectionStyled } from './index.styles'; const MORE_THAN_100K_OPTION_VALUE = 'more-than-100000'; +const LESS_THAN_100K_EMAILS_OPTION_VALUE = 'less-than-100000'; +const MORE_THAN_10M_EMAILS_OPTION_VALUE = 'more-than-10000000'; const getContactsPromocode = () => { const rawValue = process.env.REACT_APP_PROMOCODE_CONTACTS?.trim() || ''; if (!rawValue || rawValue === 'undefined' || rawValue === 'null') { @@ -34,15 +37,50 @@ const getPlanIndexByQueryOrSession = ({ plans, search, sessionPlan, planType }) const query = new URLSearchParams(search); const selectedPlanId = parseInt(query.get('selected-plan'), 10); const selectedPlanIndex = plans.findIndex((plan) => plan.id === selectedPlanId); + const isCurrentPlanType = sessionPlan?.plan?.planType === planType; if (selectedPlanIndex >= 0) { return selectedPlanIndex; } const currentPlanIndex = plans.findIndex( - (plan) => sessionPlan?.plan?.planType === planType && plan.id === sessionPlan.plan.idPlan, + (plan) => isCurrentPlanType && plan.id === sessionPlan.plan.idPlan, ); + if (planType === PLAN_TYPE.byContact && isCurrentPlanType) { + const subscribersCount = Number(sessionPlan?.plan?.subscribersCount); + const currentPlanCapacity = + currentPlanIndex >= 0 ? (plans[currentPlanIndex]?.subscriberLimit ?? 0) : 0; + + if (!Number.isNaN(subscribersCount)) { + if (currentPlanIndex >= 0 && subscribersCount <= currentPlanCapacity) { + return currentPlanIndex + 1 < plans.length ? currentPlanIndex + 1 : currentPlanIndex; + } + + const firstPlanWithMoreCapacityIndex = plans.findIndex( + (plan) => (plan.subscriberLimit ?? 0) > subscribersCount, + ); + + if (firstPlanWithMoreCapacityIndex >= 0) { + if (currentPlanIndex >= 0 && firstPlanWithMoreCapacityIndex <= currentPlanIndex) { + return currentPlanIndex + 1 < plans.length ? currentPlanIndex + 1 : currentPlanIndex; + } + + return firstPlanWithMoreCapacityIndex; + } + } + } + + if (planType === PLAN_TYPE.byEmail && currentPlanIndex >= 0) { + const currentEmails = + plans[currentPlanIndex]?.emailsByMonth ?? plans[currentPlanIndex]?.emailQty ?? 0; + const nextPlanIndex = plans.findIndex( + (plan) => (plan.emailsByMonth ?? plan.emailQty ?? 0) > currentEmails, + ); + + return nextPlanIndex >= 0 ? nextPlanIndex : currentPlanIndex; + } + return currentPlanIndex >= 0 ? currentPlanIndex : 0; }; @@ -54,11 +92,15 @@ export const NewPlanSelection = InjectAppServices( const { isFreeAccount } = sessionPlan.plan; const [plansByContact, setPlansByContact] = useState([]); const [plansByCredit, setPlansByCredit] = useState([]); + const [plansByEmail, setPlansByEmail] = useState([]); const [selectedContactPlanIndex, setSelectedContactPlanIndex] = useState(0); const [selectedCreditPlanIndex, setSelectedCreditPlanIndex] = useState(0); + const [selectedEmailPlanIndex, setSelectedEmailPlanIndex] = useState(0); const [loading, setLoading] = useState(true); const [hasError, setHasError] = useState(false); const [isMoreThan100kSelected, setIsMoreThan100kSelected] = useState(false); + const [isLessThan100kEmailsSelected, setIsLessThan100kEmailsSelected] = useState(false); + const [isMoreThan10mEmailsSelected, setIsMoreThan10mEmailsSelected] = useState(false); const [stickySummaryData, setStickySummaryData] = useState(null); useEffect(() => { @@ -87,12 +129,15 @@ export const NewPlanSelection = InjectAppServices( const fetchPlans = async () => { try { setLoading(true); - const [fetchedPlansByContact, fetchedPlansByCredit] = await Promise.all([ - planService.getPlansByType(PLAN_TYPE.byContact, { includeDowngrades: true }), - planService.getPlansByType(PLAN_TYPE.byCredit), - ]); + const [fetchedPlansByContact, fetchedPlansByCredit, fetchedPlansByEmail] = + await Promise.all([ + planService.getPlansByType(PLAN_TYPE.byContact, { includeDowngrades: true }), + planService.getPlansByType(PLAN_TYPE.byCredit), + planService.getPlansByType(PLAN_TYPE.byEmail, { includeDowngrades: true }), + ]); setPlansByContact(fetchedPlansByContact); setPlansByCredit(fetchedPlansByCredit); + setPlansByEmail(fetchedPlansByEmail); setSelectedContactPlanIndex( fetchedPlansByContact.length ? getPlanIndexByQueryOrSession({ @@ -113,7 +158,19 @@ export const NewPlanSelection = InjectAppServices( }) : 0, ); + setSelectedEmailPlanIndex( + fetchedPlansByEmail.length + ? getPlanIndexByQueryOrSession({ + plans: fetchedPlansByEmail, + search, + sessionPlan, + planType: PLAN_TYPE.byEmail, + }) + : 0, + ); setIsMoreThan100kSelected(false); + setIsLessThan100kEmailsSelected(false); + setIsMoreThan10mEmailsSelected(false); setHasError(false); } catch (error) { setHasError(true); @@ -127,7 +184,10 @@ export const NewPlanSelection = InjectAppServices( const selectedContactPlan = plansByContact[selectedContactPlanIndex] ?? null; const selectedCreditPlan = plansByCredit[selectedCreditPlanIndex] ?? null; + const selectedEmailPlan = plansByEmail[selectedEmailPlanIndex] ?? null; const isCurrentPlanByCredit = sessionPlan?.plan?.planType === PLAN_TYPE.byCredit; + const isCurrentPlanByEmail = + sessionPlan?.plan?.planType === PLAN_TYPE.byEmail && !sessionPlan?.plan?.isFreeAccount; const handlePlanChange = (event) => { const { value } = event.target; @@ -148,6 +208,28 @@ export const NewPlanSelection = InjectAppServices( setSelectedCreditPlanIndex(parseInt(event.target.value, 10)); }; + const handleEmailsPlanChange = (event) => { + const { value } = event.target; + + if (value === LESS_THAN_100K_EMAILS_OPTION_VALUE) { + setIsLessThan100kEmailsSelected(true); + setIsMoreThan10mEmailsSelected(false); + setSelectedEmailPlanIndex(0); + return; + } + + if (value === MORE_THAN_10M_EMAILS_OPTION_VALUE) { + setIsLessThan100kEmailsSelected(false); + setIsMoreThan10mEmailsSelected(true); + setSelectedEmailPlanIndex(Math.max(0, plansByEmail.length - 1)); + return; + } + + setIsLessThan100kEmailsSelected(false); + setIsMoreThan10mEmailsSelected(false); + setSelectedEmailPlanIndex(parseInt(value, 10)); + }; + if (loading) { return ; } @@ -156,7 +238,10 @@ export const NewPlanSelection = InjectAppServices( return ; } - if (plansByContact.length === 0 && plansByCredit.length === 0) { + if ( + (!isCurrentPlanByEmail && plansByContact.length === 0 && plansByCredit.length === 0) || + (isCurrentPlanByEmail && plansByEmail.length === 0) + ) { return (
@@ -172,7 +257,13 @@ export const NewPlanSelection = InjectAppServices(
- +
@@ -212,22 +303,36 @@ export const NewPlanSelection = InjectAppServices(
- + {isCurrentPlanByEmail ? ( + + ) : ( + + )}
- {!isCurrentPlanByCredit && creditsPlanSection} + {!isCurrentPlanByCredit && !isCurrentPlanByEmail && creditsPlanSection}
diff --git a/src/components/BuyProcess/NewPlanSelection/index.styles.js b/src/components/BuyProcess/NewPlanSelection/index.styles.js index b22fa5875..04b0098f6 100644 --- a/src/components/BuyProcess/NewPlanSelection/index.styles.js +++ b/src/components/BuyProcess/NewPlanSelection/index.styles.js @@ -118,7 +118,7 @@ export const NewPlanSelectionStyled = styled.div` border: 1px solid #eaeaea; border-radius: 3px; margin-bottom: 24px; - margin-top: 6px; + margin-top: 24px; padding: 30px 114px; } diff --git a/src/components/BuyProcess/NewPlanSelection/index.test.js b/src/components/BuyProcess/NewPlanSelection/index.test.js index 77352827f..21ac9561d 100644 --- a/src/components/BuyProcess/NewPlanSelection/index.test.js +++ b/src/components/BuyProcess/NewPlanSelection/index.test.js @@ -45,6 +45,25 @@ const contactPlans = [ }, ]; +const emailPlans = [ + { + type: PLAN_TYPE.byEmail, + id: 30222, + name: '300000-EMAILS', + emailsByMonth: 300000, + fee: 367, + extraEmailPrice: 0.0015, + }, + { + type: PLAN_TYPE.byEmail, + id: 30223, + name: '1500000-EMAILS', + emailsByMonth: 1500000, + fee: 920, + extraEmailPrice: 0.0012, + }, +]; + const creditPlans = [ { type: PLAN_TYPE.byCredit, @@ -179,10 +198,12 @@ let consoleErrorSpy; let previousCanBuyPushNotificationPlan; const getContactsPlanSection = () => screen.getByTestId('dp-contacts-plan'); +const getEmailsPlanSection = () => screen.getByTestId('dp-emails-plan'); const getCreditsPlanSection = () => screen.getByTestId('dp-credits-plan'); const getAddOnsSection = () => screen.getByTestId('dp-addons-section'); const getFaqSection = () => screen.getByTestId('dp-faq-section'); const getContactsSelect = () => within(getContactsPlanSection()).getByRole('combobox'); +const getEmailsSelect = () => within(getEmailsPlanSection()).getByRole('combobox'); const getCreditsSelect = () => within(getCreditsPlanSection()).getByRole('combobox'); const hasPriceInBold = (priceRegex) => (_content, node) => node?.tagName === 'B' && priceRegex.test(node?.textContent || ''); @@ -191,6 +212,7 @@ const createForcedServices = ({ features = {}, dopplerAccountPlansApiClient = {}, appSessionUser = {}, + planService = {}, } = {}) => ({ appSessionRef: { current: { @@ -246,8 +268,13 @@ const createForcedServices = ({ return creditPlans; } + if (planType === PLAN_TYPE.byEmail) { + return emailPlans; + } + return []; }), + ...planService, }, }); @@ -315,7 +342,7 @@ describe('NewPlanSelection component', () => { expect(screen.getAllByText(/C[oó]digo de descuento/i).length).toBeGreaterThan(0); expect(screen.getByRole('link', { name: /Elegir Plan/i })).toBeInTheDocument(); expect(screen.queryByText(/tipo de plan/i)).not.toBeInTheDocument(); - expect(screen.getByTestId('dp-sticky-plan-summary')).toBeInTheDocument(); + await waitFor(() => expect(screen.getByTestId('dp-sticky-plan-summary')).toBeInTheDocument()); expect(screen.getByText(/Comprar Ahora/i)).toBeInTheDocument(); expect(screen.getByRole('button', { name: /Ver m[aá]s funcionalidades/i })).toBeInTheDocument(); @@ -578,6 +605,29 @@ describe('NewPlanSelection component', () => { }); }); + it('should not prepopulate contacts promocode for paid users with non-monthly subscription', async () => { + await renderNewPlanSelection(['/new-plan-selection'], { + appSessionUser: { + plan: { + idPlan: 10222, + planType: PLAN_TYPE.byContact, + isFreeAccount: false, + planSubscription: 12, + promotion: { + idUserTypePlan: 10222, + code: 'PROMOCODE_ANNUAL', + discount: 20, + duration: 12, + }, + }, + }, + }); + + const promocodeInput = within(getContactsPlanSection()).getByRole('textbox'); + expect(promocodeInput).toHaveValue(''); + expect(screen.queryByRole('link', { name: /Elegir Plan/i })).not.toBeInTheDocument(); + }); + it('should update selected contacts plan in checkout URL when contacts dropdown changes', async () => { await renderNewPlanSelection(); @@ -594,6 +644,303 @@ describe('NewPlanSelection component', () => { expect(screen.getByText(/Hasta 1\.500 Contactos \+ Envios ilimitados/i)).toBeInTheDocument(); }); + it('should render emails plan variant for paid byEmail users', async () => { + await renderNewPlanSelection( + ['/new-plan-selection'], + { + appSessionUser: { + plan: { + idPlan: 30222, + planType: PLAN_TYPE.byEmail, + isFreeAccount: false, + planSubscription: 1, + }, + }, + }, + { useI18nKeysAsValues: true }, + ); + + expect(getEmailsPlanSection()).toBeInTheDocument(); + expect(getEmailsSelect()).toBeInTheDocument(); + expect(screen.queryByTestId('dp-contacts-plan')).not.toBeInTheDocument(); + expect(screen.queryByTestId('dp-credits-plan')).not.toBeInTheDocument(); + }); + + it('should preselect the next byEmail plan based on current emails quantity', async () => { + await renderNewPlanSelection( + ['/new-plan-selection'], + { + appSessionUser: { + plan: { + idPlan: 30222, + planType: PLAN_TYPE.byEmail, + isFreeAccount: false, + planSubscription: 1, + }, + }, + }, + { useI18nKeysAsValues: true }, + ); + + expect(getEmailsSelect()).toHaveValue('1'); + expect( + screen.getByText('buy_process.new_plan_selection.sticky_emails_subtitle'), + ).toBeInTheDocument(); + expect( + screen.getByRole('link', { + name: 'buy_process.new_plan_selection.choose_plan', + }), + ).toHaveAttribute('href', '/checkout/premium/monthly-deliveries?selected-plan=30223&buyType=1'); + }); + + it('should preselect the next contact plan when subscribers count is lower than current plan capacity and a higher plan exists', async () => { + const contactPlansWithExtraLevel = [ + { + type: PLAN_TYPE.byContact, + id: 10222, + name: '500-SUBSCRIBERS', + subscriberLimit: 500, + fee: 10, + billingCycleDetails: contactPlans[0].billingCycleDetails, + }, + { + type: PLAN_TYPE.byContact, + id: 10223, + name: '1500-SUBSCRIBERS', + subscriberLimit: 1500, + fee: 20, + billingCycleDetails: contactPlans[1].billingCycleDetails, + }, + { + type: PLAN_TYPE.byContact, + id: 10224, + name: '3000-SUBSCRIBERS', + subscriberLimit: 3000, + fee: 30, + billingCycleDetails: contactPlans[1].billingCycleDetails, + }, + ]; + + await renderNewPlanSelection(['/new-plan-selection'], { + appSessionUser: { + plan: { + idPlan: 10223, + planType: PLAN_TYPE.byContact, + isFreeAccount: false, + planSubscription: 1, + subscribersCount: 1300, + }, + }, + planService: { + getPlansByType: jest.fn(async (planType) => { + if (planType === PLAN_TYPE.byContact) { + return contactPlansWithExtraLevel; + } + + if (planType === PLAN_TYPE.byCredit) { + return creditPlans; + } + + if (planType === PLAN_TYPE.byEmail) { + return emailPlans; + } + + return []; + }), + }, + }); + + expect(getContactsSelect()).toHaveValue('2'); + expect(screen.getByRole('link', { name: 'Elegir Plan' }).getAttribute('href')).toContain( + 'selected-plan=10224', + ); + }); + + it('should not preselect a smaller contact plan when subscribers count is lower than current plan capacity and there is no higher plan', async () => { + await renderNewPlanSelection(['/new-plan-selection'], { + appSessionUser: { + plan: { + idPlan: 10223, + planType: PLAN_TYPE.byContact, + isFreeAccount: false, + planSubscription: 1, + subscribersCount: 1300, + }, + }, + }); + + expect(getContactsSelect()).toHaveValue('1'); + expect( + within(screen.getByTestId('dp-sticky-plan-summary')).queryByRole('link', { + name: 'Comprar Ahora', + }), + ).not.toBeInTheDocument(); + expect( + within(screen.getByTestId('dp-sticky-plan-summary')).getByRole('button', { + name: 'Comprar Ahora', + }), + ).toBeDisabled(); + expect( + within(getContactsPlanSection()).queryByRole('link', { + name: 'Elegir Plan', + }), + ).not.toBeInTheDocument(); + expect( + within(getContactsPlanSection()).getByRole('button', { + name: 'Elegir Plan', + }), + ).toBeDisabled(); + }); + + it('should preselect a higher contact plan when subscribers count is greater than current plan capacity', async () => { + await renderNewPlanSelection(['/new-plan-selection'], { + appSessionUser: { + plan: { + idPlan: 10222, + planType: PLAN_TYPE.byContact, + isFreeAccount: false, + planSubscription: 1, + subscribersCount: 700, + }, + }, + }); + + expect(getContactsSelect()).toHaveValue('1'); + expect(screen.getByRole('link', { name: 'Elegir Plan' }).getAttribute('href')).toContain( + 'selected-plan=10223', + ); + }); + + it('should render less-than-100k as the first option in emails dropdown', async () => { + await renderNewPlanSelection( + ['/new-plan-selection'], + { + appSessionUser: { + plan: { + idPlan: 30222, + planType: PLAN_TYPE.byEmail, + isFreeAccount: false, + planSubscription: 1, + }, + }, + }, + { useI18nKeysAsValues: true }, + ); + + const emailOptions = within(getEmailsSelect()).getAllByRole('option'); + expect(emailOptions[0]).toHaveTextContent( + 'buy_process.new_plan_selection.emails_option_less_than_100k', + ); + }); + + it('should show downgrade message and use advisor CTA when selecting less than 100k emails', async () => { + await renderNewPlanSelection( + ['/new-plan-selection'], + { + appSessionUser: { + plan: { + idPlan: 30223, + planType: PLAN_TYPE.byEmail, + isFreeAccount: false, + planSubscription: 1, + }, + }, + }, + { useI18nKeysAsValues: true }, + ); + + fireEvent.change(getEmailsSelect(), { + target: { value: 'less-than-100000' }, + }); + await settleAsyncState(); + + await waitFor(() => + expect(screen.getByTestId('dp-emails-downgrade-message')).toBeInTheDocument(), + ); + expect( + screen.getByText('buy_process.new_plan_selection.emails_downgrade_warning_message'), + ).toBeInTheDocument(); + expect( + screen.getByRole('link', { + name: 'buy_process.new_plan_selection.contact_advisor_cta', + }), + ).toHaveAttribute('href', '/upgrade-suggestion-form'); + expect( + screen.getByRole('link', { + name: 'buy_process.new_plan_selection.sticky_custom_cta', + }), + ).toHaveAttribute('href', '/upgrade-suggestion-form'); + }); + + it('should prioritize more than 10m message and hide downgrade warning in emails plan', async () => { + await renderNewPlanSelection( + ['/new-plan-selection'], + { + appSessionUser: { + plan: { + idPlan: 30223, + planType: PLAN_TYPE.byEmail, + isFreeAccount: false, + planSubscription: 1, + }, + }, + }, + { useI18nKeysAsValues: true }, + ); + + fireEvent.change(getEmailsSelect(), { + target: { value: 'less-than-100000' }, + }); + await settleAsyncState(); + await waitFor(() => + expect(screen.getByTestId('dp-emails-downgrade-message')).toBeInTheDocument(), + ); + + fireEvent.change(getEmailsSelect(), { + target: { value: 'more-than-10000000' }, + }); + await settleAsyncState(); + + await waitFor(() => + expect(screen.getByTestId('dp-emails-more-than-10m-message')).toBeInTheDocument(), + ); + expect(screen.queryByTestId('dp-emails-downgrade-message')).not.toBeInTheDocument(); + expect( + screen.getByRole('link', { + name: 'buy_process.new_plan_selection.contact_advisor_cta', + }), + ).toHaveAttribute('href', '/upgrade-suggestion-form'); + expect( + screen.getByRole('link', { + name: 'buy_process.new_plan_selection.sticky_custom_cta', + }), + ).toHaveAttribute('href', '/upgrade-suggestion-form'); + }); + + it('should build checkout URL for selected byEmail plan when no commercial scenario is active', async () => { + await renderNewPlanSelection(['/new-plan-selection'], { + appSessionUser: { + plan: { + idPlan: 30222, + planType: PLAN_TYPE.byEmail, + isFreeAccount: false, + planSubscription: 1, + }, + }, + }); + + fireEvent.change(getEmailsSelect(), { + target: { value: '1' }, + }); + await settleAsyncState(); + + await waitFor(() => + expect(screen.getByRole('link', { name: 'Elegir Plan' }).getAttribute('href')).toBe( + '/checkout/premium/monthly-deliveries?selected-plan=30223&buyType=1', + ), + ); + }); + it('should show downgrade warning when paid user selects a smaller contacts plan and hide it when returns to current size', async () => { await renderNewPlanSelection( ['/new-plan-selection'], @@ -759,13 +1106,13 @@ describe('NewPlanSelection component', () => { ); }); - it('should keep user subscription frequency selected and disable payment frequency controls', async () => { + it('should keep user subscription frequency selected and keep payment frequency enabled for free users', async () => { await renderNewPlanSelection(); const annualFrequencyButton = within(getContactsPlanSection()).getByRole('button', { name: /Anual/i, }); - expect(annualFrequencyButton).toBeDisabled(); + expect(annualFrequencyButton).not.toBeDisabled(); await waitFor(() => expect(screen.getByRole('link', { name: 'Elegir Plan' }).getAttribute('href')).toBe( @@ -776,6 +1123,24 @@ describe('NewPlanSelection component', () => { expect(screen.queryByText(/Facturación Anual/i)).not.toBeInTheDocument(); }); + it('should keep contacts payment frequency disabled for users with current contact plan', async () => { + await renderNewPlanSelection(['/new-plan-selection'], { + appSessionUser: { + plan: { + idPlan: 10222, + planType: PLAN_TYPE.byContact, + isFreeAccount: false, + planSubscription: 1, + }, + }, + }); + + const annualFrequencyButton = within(getContactsPlanSection()).getByRole('button', { + name: /Anual/i, + }); + expect(annualFrequencyButton).toBeDisabled(); + }); + it('should render credits plan before contacts plan for users with current credit plan', async () => { await renderNewPlanSelection( ['/new-plan-selection'], diff --git a/src/components/MyPlan/SubscriptionDetails/EmailMarketingPlan/index.js b/src/components/MyPlan/SubscriptionDetails/EmailMarketingPlan/index.js index 08773f708..6082ea0c2 100644 --- a/src/components/MyPlan/SubscriptionDetails/EmailMarketingPlan/index.js +++ b/src/components/MyPlan/SubscriptionDetails/EmailMarketingPlan/index.js @@ -20,11 +20,9 @@ export const EmailMarketingPlan = ({ user, plan, features }) => { }; const cancelAccount = () => setStartCancellationFlow(false); - const isContactPlan = plan.planType === PLAN_TYPE.byContact; const newPlanSelectionFlag = features?.newPlanSelectionEnabled ?? user?.features?.newPlanSelectionEnabled; - const shouldGoToPlanSelection = !plan.isFreeAccount && (!isContactPlan || !newPlanSelectionFlag); - const changePlanUrl = shouldGoToPlanSelection ? plan.buttonUrl : '/new-plan-selection?buyType=1'; + const changePlanUrl = !newPlanSelectionFlag ? plan.buttonUrl : '/new-plan-selection?buyType=1'; return (
diff --git a/src/i18n/en.js b/src/i18n/en.js index ff7cc44a5..45a691bfa 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -187,6 +187,16 @@ other {}}}}}}}}}} credits_price_per_credit: `Price per Credit: US$${formattedNumberPlaceholder}`, credits_promocode_savings_text: 'You save {percentage}% on this purchase', custom_price_value: 'Tailored*', + emails_downgrade_warning_message: 'Need to reduce deliveries?{br}If you need to reduce your Plan deliveries, contact our team so we can help you with the change.', + emails_extra_email_price: 'Extra email cost US$ {price}', + emails_label: 'How many Deliveries do you need?', + emails_more_than_10m_info_message: 'Need more Deliveries?{br}Contact our team so we can offer you a custom Plan that fits your business needs.', + emails_option: '{emails}', + emails_option_less_than_100k: 'Less than 100,000', + emails_option_more_than_10m: 'More than 10,000,000', + emails_plan_description: 'Send more and pay less. Unlimited Contacts with a lower unit cost per delivery.{br}Ideal for companies with large databases.', + emails_plan_title: 'Email Plan', + empty_emails_message: 'There are no Delivery plans available right now.', empty_message: 'There are no Contacts plans available at the moment.', included_features: { item_1_description: 'Automate customer journeys, recover opportunities, and improve relationships with smart sendings.', @@ -223,6 +233,7 @@ other {}}}}}}}}}} sticky_custom_subtitle: 'Unlimited contacts + Emails with tailored pricing', sticky_custom_title: 'Customized Email Plan', sticky_default_cta: 'Buy Now', + sticky_emails_subtitle: 'Up to {emails} deliveries per month', sticky_frequency_discount_text: 'Billing {periodCapitalized} {percentage}%OFF | 1 {period} payment of {currency}{total}', sticky_promocode_discount_text: '{percentage}% OFF for {months, plural, one {# month} other {# months}}', sticky_promocode_discount_text_without_months: '{percentage}% OFF', diff --git a/src/i18n/es.js b/src/i18n/es.js index 268403948..83d8d8411 100644 --- a/src/i18n/es.js +++ b/src/i18n/es.js @@ -188,6 +188,16 @@ other {}}}}}}}}}} credits_price_per_credit: `Precio por Credito: US$${formattedNumberPlaceholder}`, credits_promocode_savings_text: 'Ahorras {percentage}% en esta compra', custom_price_value: 'A medida*', + emails_downgrade_warning_message: 'Necesitas disminuir los Envios?{br}Si necesitas reducir la cantidad de Envios de tu Plan, contacta a nuestro equipo para poder realizar el cambio.', + emails_extra_email_price: 'Costo por email excedente US$ {price}', + emails_label: 'Cuantos Envios necesitas?', + emails_more_than_10m_info_message: 'Necesitas mas Envios?{br}Contacta a nuestro equipo para poder ofrecerte un Plan personalizado que se adecue con las necesidades de tu negocio.', + emails_option: '{emails}', + emails_option_less_than_100k: 'Menos de 100.000', + emails_option_more_than_10m: 'Mas de 10.000.000', + emails_plan_description: 'Envia mas y paga menos. Contactos ilimitados con un costo por envio unitario mas bajo.{br}Ideal para empresas con grandes bases de datos.', + emails_plan_title: 'Plan Envios', + empty_emails_message: 'No hay planes por Envios disponibles en este momento.', empty_message: 'No hay planes por Contactos disponibles en este momento.', included_features: { item_1_description: 'Automatiza recorridos, recupera oportunidades y mejora la relación con tus Contactos con envíos inteligentes.', @@ -224,6 +234,7 @@ other {}}}}}}}}}} sticky_custom_subtitle: 'Contactos ilimitados + Envios con precios a medida', sticky_custom_title: 'Plan Envios Personalizado', sticky_default_cta: 'Comprar Ahora', + sticky_emails_subtitle: 'Hasta {emails} Envios por mes', sticky_frequency_discount_text: 'Facturación {periodCapitalized} {percentage}%OFF | 1 Pago {period} de {currency}{total}', sticky_promocode_discount_text: 'Descuento {percentage}% OFF por {months, plural, one {# mes} other {# meses}}', sticky_promocode_discount_text_without_months: 'Descuento {percentage}% OFF',