Merge pull request #1352 from guardian/sp-update-amount-validation

copy update for update amount SP form (with old min amount)

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(
@@ -355,17 +363,21 @@ export const SupporterPlusUpdateAmountForm = (
 								size="medium"
 							/>
 							<p>
-								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{' '}
 								<Link href="/help-centre#call-us">
 									Help Centre
 								</Link>
 							</p>
 						</div>
 						<p css={smallPrintCss}>
 							{minPriceDisplay} per {props.mainPlan.billingPeriod}{' '}
-							is the minimum payment to receive this subscription.
+							is the {currentAmountIsBelowNewMin ? 'new ' : ''}
+							minimum payment to receive this subscription.
 						</p>
 					</div>
 				</div>

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()

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,57 @@ 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.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/,
+		).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.contains('label', 'Other amount (£)').parent().find('input').clear();
+		cy.contains('label', 'Other amount (£)')
+			.parent()
+			.find('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');
+	});
 });