Skip to content

Commit 27616d8

Browse files
jhoffman-msjhoffman-ms
committed
feat(checkout): show previous price in sticky summary
1 parent 8807e4c commit 27616d8

11 files changed

Lines changed: 107 additions & 42 deletions

File tree

‎src/components/BuyProcess/ConversationPlanSelection/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { getPromotionInformationMessage } from '../utils';
1515
import { SelectedConversationPlan } from './SelectedConversationPlan';
1616
import { PlanBenefits } from './PlanBenefits';
1717
import { useAddOnPlans } from '../../../hooks/useFetchAddOnPlans';
18+
import RedirectToExternalUrl from '../../RedirectToExternalUrl';
1819

1920
export const ConversationPlanSelection = InjectAppServices(
2021
({ dependencies: { dopplerAccountPlansApiClient, appSessionRef } }) => {
@@ -27,6 +28,13 @@ export const ConversationPlanSelection = InjectAppServices(
2728
const [item, setItem] = useState(null);
2829
const intl = useIntl();
2930
const _ = (id, values) => intl.formatMessage({ id: id }, values);
31+
const sessionPlan = appSessionRef.current.userData.user;
32+
const { isFreeAccount } = sessionPlan.plan;
33+
34+
if (isFreeAccount) {
35+
return <RedirectToExternalUrl to={sessionPlan.plan.buttonUrl} />;
36+
}
37+
3038
const [
3139
{
3240
addOnPlansValues,

‎src/components/BuyProcess/NewPlanSelection/ContactsPlan/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,13 +292,15 @@ export const ContactsPlan = InjectAppServices(
292292
displayPrice: displayedMonthlyPrice,
293293
isCustomPlan: isTailoredPlan,
294294
isDisabled: !shouldUseAdvisorCta && !canChoosePlan,
295+
previousPrice: selectedPlanFee,
295296
useAdvisorCta: shouldUseAdvisorCta,
296297
}),
297298
[
298299
canChoosePlan,
299300
checkoutUrl,
300301
displayedMonthlyPrice,
301302
isTailoredPlan,
303+
selectedPlanFee,
302304
shouldUseAdvisorCta,
303305
stickyContactsLabel,
304306
stickyDiscountSummary,

‎src/components/BuyProcess/NewPlanSelection/EmailsPlan/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,12 +191,14 @@ export const EmailsPlan = InjectAppServices(
191191
isCustomPlan: false,
192192
isDisabled: !shouldUseAdvisorCta && !canChoosePlan,
193193
planType: PLAN_TYPE.byEmail,
194+
previousPrice: selectedPlanFee,
194195
useAdvisorCta: shouldUseAdvisorCta,
195196
}),
196197
[
197198
canChoosePlan,
198199
checkoutUrl,
199200
displayedMonthlyPrice,
201+
selectedPlanFee,
200202
shouldUseAdvisorCta,
201203
stickyDiscountSummary,
202204
stickyEmailsLabel,

‎src/components/BuyProcess/NewPlanSelection/IncludedFeatures/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,12 @@ export const IncludedFeatures = () => {
7878
))}
7979
</div>
8080

81-
<div className="dp-new-plan-selection-see-more">
81+
{/* <div className="dp-new-plan-selection-see-more">
8282
<button type="button" onClick={() => setIsModalOpen(true)}>
8383
<FormattedMessage id="buy_process.new_plan_selection.included_features.see_more" />
8484
<span className="dpicon iconapp-arrow-right" />
8585
</button>
86-
</div>
86+
</div> */}
8787

8888
<Modal
8989
isOpen={isModalOpen}

‎src/components/BuyProcess/NewPlanSelection/StickyPlanSummary/index.js‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -74,39 +74,57 @@ export const StickyPlanSummary = ({ summary }) => {
7474
</div>
7575

7676
{!summary.isCustomPlan && summary.discountSummary && (
77-
<p className="dp-new-plan-selection-sticky-summary-discount">
78-
{summary.discountSummary.type === 'promocode' ? (
79-
<FormattedMessage
80-
id={
81-
Number(summary.discountSummary.months) > 0
82-
? 'buy_process.new_plan_selection.sticky_promocode_discount_text'
83-
: 'buy_process.new_plan_selection.sticky_promocode_discount_text_without_months'
84-
}
85-
values={{
86-
months: summary.discountSummary.months,
87-
percentage: summary.discountSummary.percentage,
88-
bold: (chunks) => <b>{chunks}</b>,
89-
}}
90-
/>
91-
) : (
92-
<FormattedMessage
93-
id="buy_process.new_plan_selection.sticky_frequency_discount_text"
94-
values={{
95-
currency: 'US$',
96-
percentage: summary.discountSummary.percentage,
97-
period: summary.discountSummary.period,
98-
periodCapitalized: capitalize(summary.discountSummary.period),
99-
total: (
100-
<FormattedNumber
101-
value={summary.discountSummary.total}
102-
{...getFormattedPriceOptions(summary.discountSummary.total)}
103-
/>
104-
),
105-
bold: (chunks) => <b>{chunks}</b>,
106-
}}
107-
/>
77+
<div className="dp-new-plan-selection-sticky-summary-discount">
78+
{summary.previousPrice != null && (
79+
<p className="dp-new-plan-selection-sticky-summary-old-price">
80+
<FormattedMessage id="buy_process.new_plan_selection.sticky_previous_price_label" />{' '}
81+
US$
82+
<span className="dp-new-plan-selection-old-price">
83+
<FormattedNumber
84+
value={summary.previousPrice}
85+
{...getFormattedPriceOptions(summary.previousPrice)}
86+
/>
87+
</span>
88+
/
89+
{intl.formatMessage({
90+
id: 'buy_process.new_plan_selection.month_period',
91+
})}
92+
</p>
10893
)}
109-
</p>
94+
<p className="dp-new-plan-selection-sticky-summary-discount-text">
95+
{summary.discountSummary.type === 'promocode' ? (
96+
<FormattedMessage
97+
id={
98+
Number(summary.discountSummary.months) > 0
99+
? 'buy_process.new_plan_selection.sticky_promocode_discount_text'
100+
: 'buy_process.new_plan_selection.sticky_promocode_discount_text_without_months'
101+
}
102+
values={{
103+
months: summary.discountSummary.months,
104+
percentage: summary.discountSummary.percentage,
105+
bold: (chunks) => <b>{chunks}</b>,
106+
}}
107+
/>
108+
) : (
109+
<FormattedMessage
110+
id="buy_process.new_plan_selection.sticky_frequency_discount_text"
111+
values={{
112+
currency: 'US$',
113+
percentage: summary.discountSummary.percentage,
114+
period: summary.discountSummary.period,
115+
periodCapitalized: capitalize(summary.discountSummary.period),
116+
total: (
117+
<FormattedNumber
118+
value={summary.discountSummary.total}
119+
{...getFormattedPriceOptions(summary.discountSummary.total)}
120+
/>
121+
),
122+
bold: (chunks) => <b>{chunks}</b>,
123+
}}
124+
/>
125+
)}
126+
</p>
127+
</div>
110128
)}
111129

112130
{summary.useAdvisorCta ? (

‎src/components/BuyProcess/NewPlanSelection/index.styles.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,8 @@ export const NewPlanSelectionStyled = styled.div`
9898
.dp-new-plan-selection-sticky-summary-price {
9999
}
100100
101-
.dp-new-plan-selection-sticky-summary-discount {
102-
color: #333;
103-
flex: 1 1 auto;
104-
font-size: 15px;
105-
font-weight: 500;
106-
line-height: 1.35;
101+
.dp-new-plan-selection-sticky-summary-discount-text {
107102
margin: 0;
108-
text-align: center;
109103
}
110104
111105
.dp-new-plan-selection-sticky-summary .dp-button {

‎src/components/BuyProcess/NewPlanSelection/index.test.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@ describe('NewPlanSelection component', () => {
540540
const user = userEvent.setup();
541541
await renderNewPlanSelection();
542542

543-
await user.click(screen.getByRole('button', { name: /Ver m[aá]s funcionalidades/i }));
543+
//await user.click(screen.getByRole('button', { name: /Ver m[aá]s funcionalidades/i }));
544544

545545
expect(screen.getByText(/Funcionalidades y Soluciones/i)).toBeInTheDocument();
546546
expect(screen.getByText(/Carrito Abandonado/i)).toBeInTheDocument();
@@ -1358,6 +1358,11 @@ describe('NewPlanSelection component', () => {
13581358

13591359
expect(screen.getAllByText(textContentIncludes('US$9/mes*')).length).toBeGreaterThan(0);
13601360
expect(screen.getAllByText(textContentIncludes('US$10/mes')).length).toBeGreaterThan(0);
1361+
expect(
1362+
screen
1363+
.getByTestId('dp-sticky-plan-summary')
1364+
.querySelector('.dp-new-plan-selection-sticky-summary-old-price'),
1365+
).toHaveTextContent(/Antes US\$10\/mes/);
13611366
expect(
13621367
within(screen.getByTestId('dp-sticky-plan-summary')).getAllByText(
13631368
textContentIncludes('Descuento 10% OFF por 3 meses'),
@@ -1532,4 +1537,22 @@ describe('NewPlanSelection component', () => {
15321537
});
15331538
}
15341539
});
1540+
1541+
it('should show previous price in sticky summary when contacts payment frequency has discount', async () => {
1542+
await renderNewPlanSelection();
1543+
1544+
fireEvent.click(within(getContactsPlanSection()).getByRole('button', { name: /Anual/i }));
1545+
await settleAsyncState();
1546+
1547+
expect(
1548+
screen
1549+
.getByTestId('dp-sticky-plan-summary')
1550+
.querySelector('.dp-new-plan-selection-sticky-summary-old-price'),
1551+
).toHaveTextContent(/Antes US\$10\/mes/);
1552+
expect(
1553+
within(screen.getByTestId('dp-sticky-plan-summary')).getAllByText(
1554+
textContentIncludes('Facturación Anual 25%OFF'),
1555+
).length,
1556+
).toBeGreaterThan(0);
1557+
});
15351558
});

‎src/components/BuyProcess/OnSitePlanSelection/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { BannerUpgrade } from '../BannerUpgrade';
1515
import { useAddOnPlans } from '../../../hooks/useFetchAddOnPlans';
1616
import { getPromotionInformationMessage } from '../utils';
1717
import { useIntl } from 'react-intl';
18+
import RedirectToExternalUrl from '../../RedirectToExternalUrl';
1819

1920
export const OnSitePlansSelection = InjectAppServices(
2021
({ dependencies: { dopplerAccountPlansApiClient, appSessionRef } }) => {
@@ -26,7 +27,15 @@ export const OnSitePlansSelection = InjectAppServices(
2627
const [showPromotionInformation, setShowPromotionInformation] = useState(false);
2728
const [item, setItem] = useState(null);
2829
const intl = useIntl();
30+
const sessionPlan = appSessionRef.current.userData.user;
31+
const { isFreeAccount } = sessionPlan.plan;
32+
2933
const _ = (id, values) => intl.formatMessage({ id: id }, values);
34+
35+
if (isFreeAccount) {
36+
return <RedirectToExternalUrl to={sessionPlan.plan.buttonUrl} />;
37+
}
38+
3039
const [
3140
{
3241
addOnPlansValues,

‎src/components/BuyProcess/PushNotificationPlanSelection/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { getMonthsByCycle, orderPaymentFrequencies } from '../../../utils';
1919
import { SelectedPushNotificationPlan } from './SelectedPushNotificationPlan';
2020
import { ShoppingCart } from '../ShoppingCart';
2121
import { getPromotionInformationMessage } from '../utils';
22+
import RedirectToExternalUrl from '../../RedirectToExternalUrl';
2223

2324
export const PushNotificationPlanSelection = InjectAppServices(
2425
({ dependencies: { dopplerAccountPlansApiClient, appSessionRef } }) => {
@@ -31,6 +32,12 @@ export const PushNotificationPlanSelection = InjectAppServices(
3132
const [item, setItem] = useState(null);
3233
const intl = useIntl();
3334
const _ = (id, values) => intl.formatMessage({ id: id }, values);
35+
const sessionPlan = appSessionRef.current.userData.user;
36+
const { isFreeAccount } = sessionPlan.plan;
37+
38+
if (isFreeAccount) {
39+
return <RedirectToExternalUrl to={sessionPlan.plan.buttonUrl} />;
40+
}
3441

3542
const [
3643
{

‎src/i18n/en.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ other {}}}}}}}}}}
237237
sticky_default_cta: 'Buy Now',
238238
sticky_emails_subtitle: 'Up to {emails} deliveries per month',
239239
sticky_frequency_discount_text: '<bold>Billing {periodCapitalized} {percentage}%OFF</bold> | 1 {period} payment of <bold>{currency}{total}</bold>',
240+
sticky_previous_price_label: 'Before',
240241
sticky_promocode_discount_text: '<bold>{percentage}% OFF</bold> for <bold>{months, plural, one {# month} other {# months}}</bold>',
241242
sticky_promocode_discount_text_without_months: '<bold>{percentage}% OFF</bold>',
242243
subscription_label: 'Subscription',

0 commit comments

Comments
 (0)