From 21af7fb36373227d03ce2a562bf3e23363ec7ce3 Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Tue, 2 Jul 2024 16:00:10 +0100 Subject: [PATCH 1/2] If you have a supporter plus at an old price that is below the new minumum, the update amount form should reflect that in the copy re the new minimum amount you can change it to --- .../SupporterPlusUpdateAmountForm.tsx | 23 ++++++-- .../fixtures/productBuilder/testProducts.ts | 8 +++ .../parallel-1/updateContributionAmount.cy.ts | 58 ++++++++++++++++++- 3 files changed, 82 insertions(+), 7 deletions(-) diff --git a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx index 178ef8f0c..cac2debf2 100644 --- a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx +++ b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx @@ -80,7 +80,13 @@ function validateChoice( } else if (!chosenAmount || isNaN(chosenOptionNum)) { return 'There is a problem with the amount you have selected, please make sure it is a valid amount'; } else if (!isNaN(chosenOptionNum) && chosenOptionNum < minAmount) { - return `${mainPlan.currency}${minAmount} per ${mainPlan.billingPeriod} is the minimum payment to receive this subscription. Please call our customer service team to lower your ${monthlyOrAnnual} amount below ${mainPlan.currency}${minAmount} via the Help Centre`; + return `${mainPlan.currency}${minAmount} per ${ + mainPlan.billingPeriod + } is the ${ + currentAmount < minAmount ? 'new ' : '' + }minimum payment to receive this subscription. Please call our customer service team to lower your ${monthlyOrAnnual} amount below ${ + mainPlan.currency + }${minAmount} via the Help Centre`; } else if (!isNaN(chosenOptionNum) && chosenOptionNum > maxAmount) { return `There is a maximum ${mainPlan.billingPeriod}ly amount of ${mainPlan.currency}${maxAmount} ${mainPlan.currencyISO}`; } @@ -104,6 +110,8 @@ export const SupporterPlusUpdateAmountForm = ( ] || supporterPlusPriceConfigByCountryGroup.international)[ props.mainPlan.billingPeriod ]; + const currentAmountIsBelowNewMin = + props.currentAmount < priceConfig.minAmount; const minPriceDisplay = `${props.mainPlan.currency}${priceConfig.minAmount}`; const monthlyOrAnnual = getBillingPeriodAdjective( @@ -304,6 +312,7 @@ export const SupporterPlusUpdateAmountForm = ( >

- If you would like to lower your{' '} - {monthlyOrAnnual.toLowerCase()} amount below{' '} - {minPriceDisplay} please call us via the{' '} + If you would like to{' '} + {currentAmountIsBelowNewMin + ? 'change' + : 'lower'}{' '} + your {monthlyOrAnnual.toLowerCase()} amount + below {minPriceDisplay} please call us via the{' '} Help Centre @@ -365,7 +377,8 @@ export const SupporterPlusUpdateAmountForm = (

{minPriceDisplay} per {props.mainPlan.billingPeriod}{' '} - is the minimum payment to receive this subscription. + is the {currentAmountIsBelowNewMin ? 'new ' : ''} + minimum payment to receive this subscription.

diff --git a/client/fixtures/productBuilder/testProducts.ts b/client/fixtures/productBuilder/testProducts.ts index a23c66d4b..6c44a4063 100644 --- a/client/fixtures/productBuilder/testProducts.ts +++ b/client/fixtures/productBuilder/testProducts.ts @@ -212,6 +212,14 @@ export function supporterPlusMonthlyAllAccessDigital() { .getProductDetailObject(); } +export function supporterPlusMonthlyAllAccessDigitalBeforePriceRise() { + return new ProductBuilder(baseSupporterPlus()) + .payByCard() + .withPrice(1000) + .withBillingPeriod('month') + .getProductDetailObject(); +} + export function supporterPlusAnnual() { return new ProductBuilder(baseSupporterPlus()) .payByCard() diff --git a/cypress/tests/mocked/parallel-1/updateContributionAmount.cy.ts b/cypress/tests/mocked/parallel-1/updateContributionAmount.cy.ts index 90cfdf7ed..cae00be9b 100644 --- a/cypress/tests/mocked/parallel-1/updateContributionAmount.cy.ts +++ b/cypress/tests/mocked/parallel-1/updateContributionAmount.cy.ts @@ -1,6 +1,7 @@ import { contributionPaidByCard, - supporterPlus, + supporterPlusMonthlyAllAccessDigital, + supporterPlusMonthlyAllAccessDigitalBeforePriceRise, } from '../../../../client/fixtures/productBuilder/testProducts'; import { toMembersDataApiResponse } from '../../../../client/fixtures/mdapiResponse'; import { signInAndAcceptCookies } from '../../../lib/signInAndAcceptCookies'; @@ -87,7 +88,9 @@ describe('Update contribution amount', () => { it('Updates supporter plus amount', () => { cy.intercept('GET', '/api/me/mma', { statusCode: 200, - body: toMembersDataApiResponse(supporterPlus()), + body: toMembersDataApiResponse( + supporterPlusMonthlyAllAccessDigital(), + ), }); cy.visit('/?withFeature=supporterPlusUpdateAmount'); @@ -98,6 +101,10 @@ describe('Update contribution amount', () => { cy.findByText('Change amount').click(); + cy.contains( + /£\d{2,3} per month is the minimum payment to receive this subscription./, + ).should('exist'); + cy.get( '[data-cy="supporter-plus-amount-choices"] label:first-of-type', ).click(); @@ -110,4 +117,51 @@ describe('Update contribution amount', () => { 'We have successfully updated the amount of your support.', ).should('exist'); }); + + it('Updates supporter plus amount (for user on old lower min amount)', () => { + cy.intercept('GET', '/api/me/mma', { + statusCode: 200, + body: toMembersDataApiResponse( + supporterPlusMonthlyAllAccessDigitalBeforePriceRise(), + ), + }); + cy.visit('/?withFeature=supporterPlusUpdateAmount'); + + setSignInStatus(); + + cy.findByText('Manage subscription').click(); + cy.wait('@cancelled'); + + cy.findByText('Change amount').click(); + + cy.get( + '[data-cy="supporter-plus-amount-choices"] label:last-of-type', + ).click(); + + cy.get('[data-cy="supporter-plus-other-amount-input"]').clear(); + cy.get('[data-cy="supporter-plus-other-amount-input"]').type('11'); + + cy.contains( + /If you would like to change your monthly amount below £\d{2,3} please call us via the/, + ).should('exist'); + + cy.contains( + /£\d{2,3} per month is the new minimum payment to receive this subscription. Please call our customer service team to lower your monthly amount below £\d{2,3} via the Help Centre/, + ).should('exist'); + + cy.contains( + /£\d{2,3} per month is the new minimum payment to receive this subscription.$/, + ).should('exist'); + + cy.get('[data-cy="supporter-plus-other-amount-input"]').clear(); + cy.get('[data-cy="supporter-plus-other-amount-input"]').type('16'); + + cy.findByText('Change amount').click(); + + cy.wait('@supporter_plus_update_amount'); + + cy.contains( + 'We have successfully updated the amount of your support.', + ).should('exist'); + }); }); From 5ccd939023c3d9fc61da515b51816608c8384560 Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Wed, 3 Jul 2024 11:58:48 +0100 Subject: [PATCH 2/2] remove cy test attribute and rely on the other amount input label as a selector in the cypress test --- .../updateAmount/SupporterPlusUpdateAmountForm.tsx | 1 - .../parallel-1/updateContributionAmount.cy.ts | 14 ++++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx index cac2debf2..132406fed 100644 --- a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx +++ b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx @@ -312,7 +312,6 @@ export const SupporterPlusUpdateAmountForm = ( > { '[data-cy="supporter-plus-amount-choices"] label:last-of-type', ).click(); - cy.get('[data-cy="supporter-plus-other-amount-input"]').clear(); - cy.get('[data-cy="supporter-plus-other-amount-input"]').type('11'); + cy.contains('label', 'Other amount (£)').parent().find('input').clear(); + cy.contains('label', 'Other amount (£)') + .parent() + .find('input') + .type('11'); cy.contains( /If you would like to change your monthly amount below £\d{2,3} please call us via the/, @@ -153,8 +156,11 @@ describe('Update contribution amount', () => { /£\d{2,3} per month is the new minimum payment to receive this subscription.$/, ).should('exist'); - cy.get('[data-cy="supporter-plus-other-amount-input"]').clear(); - cy.get('[data-cy="supporter-plus-other-amount-input"]').type('16'); + cy.contains('label', 'Other amount (£)').parent().find('input').clear(); + cy.contains('label', 'Other amount (£)') + .parent() + .find('input') + .type('16'); cy.findByText('Change amount').click();