Merge pull request #1231 from guardian/ahe/block-delivery-address-nat…

…del-issue National Delivery - Block Delivery Issues page from allowing you to change address
guardian · Oct 25, 2023 · 3583ab3 · 3583ab3
2 parents c06a0d0 + 8443c16
commit 3583ab3
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 66 deletions.
diff --git a/client/components/mma/delivery/address/DeliveryAddressForm.tsx b/client/components/mma/delivery/address/DeliveryAddressForm.tsx
@@ -27,6 +27,7 @@ import { Input } from '../../../shared/Input';
 import { NAV_LINKS } from '../../../shared/nav/NavConfig';
 import { COUNTRIES } from '../../identity/models';
 import { InfoIconDark } from '../../shared/assets/InfoIconDark';
+import { CallCentrePrompt } from '../../shared/CallCentrePrompt';
 import { InfoSection } from '../../shared/InfoSection';
 import type { ProductDescriptionListKeyValue } from '../../shared/ProductDescriptionListTable';
 import { ProductDescriptionListTable } from '../../shared/ProductDescriptionListTable';
@@ -420,8 +421,6 @@ export const DeliveryAddressUpdate = (props: WithProductType<ProductType>) => {
 	const [formErrors, setFormErrors] = useState({ isValid: false });
 	const contactIdToArrayOfProductDetailAndProductType =
 		useContext(ContactIdContext);
-	const [showTopCallCentreNumbers, setTopCallCentreNumbersVisibility] =
-		useState<boolean>(false);
 
 	const subHeadingCss = `
 		border-top: 1px solid ${palette.neutral['86']};
@@ -439,59 +438,22 @@ export const DeliveryAddressUpdate = (props: WithProductType<ProductType>) => {
 	)
 		.flatMap(flattenEquivalent)
 		.some(({ productDetail }) => {
-			return GROUPED_PRODUCT_TYPES.subscriptions
-				.mapGroupedToSpecific(productDetail)
-				.productType === 'nationaldelivery';
+			return (
+				GROUPED_PRODUCT_TYPES.subscriptions.mapGroupedToSpecific(
+					productDetail,
+				).productType === 'nationaldelivery'
+			);
 		});
 
 	if (hasNationalDelivery) {
 		return (
-			<>
-				<p
-					css={css`
-						display: block;
-						${textSans.medium()};
-						border: 4px solid ${palette.brand['500']};
-						padding: ${space[5]}px ${space[5]}px ${space[5]}px 49px;
-						margin-top: 12px;
-						position: relative;
-						${from.tablet} {
-							display: inline-block;
-							vertical-align: top;
-							width: calc(100% - (30ch + ${space[3]}px + 2px));
-						}
-					`}
-				>
-					<i
-						css={css`
-							width: 17px;
-							height: 17px;
-							position: absolute;
-							top: ${space[5]}px;
-							left: ${space[5]}px;
-						`}
-					>
-						<InfoIconDark fillColor={palette.brand[500]} />
-					</i>
-					Changed address? Please{' '}
-					<span
-						css={css`
-							cursor: pointer;
-							color: ${palette.brand[500]};
-							text-decoration: underline;
-						`}
-						onClick={() =>
-							setTopCallCentreNumbersVisibility(
-								!showTopCallCentreNumbers,
-							)
-						}
-					>
-						call our customer support team
-					</span>{' '}
-					to update your delivery details.
-				</p>
-				{showTopCallCentreNumbers && <CallCentreEmailAndNumbers />}
-			</>
+			<div
+				css={css`
+					margin-top: ${space[3]}px;
+				`}
+			>
+				<CallCentrePrompt />
+			</div>
 		);
 	}
 

diff --git a/client/components/mma/delivery/records/DeliveryAddressStep.tsx b/client/components/mma/delivery/records/DeliveryAddressStep.tsx
@@ -24,7 +24,10 @@ import {
 	isProduct,
 	MembersDataApiAsyncLoader,
 } from '../../../../../shared/productResponse';
-import { GROUPED_PRODUCT_TYPES } from '../../../../../shared/productTypes';
+import {
+	GROUPED_PRODUCT_TYPES,
+	PRODUCT_TYPES,
+} from '../../../../../shared/productTypes';
 import {
 	addressChangeAffectedInfo,
 	getValidDeliveryAddressChangeEffectiveDates,
@@ -36,6 +39,7 @@ import { Input } from '../../../shared/Input';
 import { COUNTRIES } from '../../identity/models';
 import { InfoIconDark } from '../../shared/assets/InfoIconDark';
 import { AsyncLoader } from '../../shared/AsyncLoader';
+import { CallCentrePrompt } from '../../shared/CallCentrePrompt';
 import { InfoSection } from '../../shared/InfoSection';
 import { ProductDescriptionListTable } from '../../shared/ProductDescriptionListTable';
 import type { ProductDescriptionListKeyValue } from '../../shared/ProductDescriptionListTable';
@@ -83,6 +87,15 @@ export const DeliveryAddressStep = (props: DeliveryAddressStepProps) => {
 		isValid: false,
 	});
 
+	const groupedProductType =
+		GROUPED_PRODUCT_TYPES[props.productDetail.mmaCategory];
+	const specificProductType = groupedProductType.mapGroupedToSpecific(
+		props.productDetail,
+	);
+
+	const isNationalDelivery =
+		specificProductType === PRODUCT_TYPES.nationaldelivery;
+
 	const [showCallCentreNumbers, setCallCentreNumbersVisibility] =
 		useState<boolean>(false);
 
@@ -174,6 +187,30 @@ export const DeliveryAddressStep = (props: DeliveryAddressStepProps) => {
 				return `${friendlyProductName}`;
 			});
 
+		const hasNationalDelivery = Object.values(
+			contactIdToArrayOfProductDetailAndProductType,
+		)
+			.flatMap(flattenEquivalent)
+			.some(({ productDetail }) => {
+				return (
+					GROUPED_PRODUCT_TYPES.subscriptions.mapGroupedToSpecific(
+						productDetail,
+					).productType === 'nationaldelivery'
+				);
+			});
+
+		if (hasNationalDelivery) {
+			return (
+				<div
+					css={css`
+						margin-top: ${space[3]}px;
+					`}
+				>
+					<CallCentrePrompt />
+				</div>
+			);
+		}
+
 		return (
 			<>
 				{productsAffected.length > 1 && (
@@ -599,18 +636,29 @@ export const DeliveryAddressStep = (props: DeliveryAddressStepProps) => {
 		);
 	}
 	return (
-		<ReadOnlyAddressDisplay
-			showEditButton
-			editButtonCallback={() => {
-				props.setAddressValidationState(false);
-				setStatus(Status.Edit);
-			}}
-			address={newAddress}
-			instructions={
-				(props.enableDeliveryInstructions &&
-					deliveryAddressContext.address?.instructions) ||
-				undefined
-			}
-		/>
+		<>
+			<ReadOnlyAddressDisplay
+				showEditButton={!isNationalDelivery}
+				editButtonCallback={() => {
+					props.setAddressValidationState(false);
+					setStatus(Status.Edit);
+				}}
+				address={newAddress}
+				instructions={
+					(props.enableDeliveryInstructions &&
+						deliveryAddressContext.address?.instructions) ||
+					undefined
+				}
+			/>
+			{isNationalDelivery && (
+				<div
+					css={css`
+						padding: ${space[2]}px;
+					`}
+				>
+					<CallCentrePrompt />
+				</div>
+			)}
+		</>
 	);
 };
diff --git a/client/components/mma/delivery/records/ReadOnlyAddressDisplay.tsx b/client/components/mma/delivery/records/ReadOnlyAddressDisplay.tsx
@@ -6,7 +6,7 @@ import type { DeliveryAddress } from '../../../../../shared/productResponse';
 import { DeliveryAddressDisplay } from '../address/DeliveryAddressDisplay';
 
 interface ReadOnlyAddressDisplayProps {
-	showEditButton?: true;
+	showEditButton?: boolean;
 	editButtonCallback?: () => void;
 	address: DeliveryAddress;
 	instructions?: string;

diff --git a/client/components/mma/shared/CallCentrePrompt.stories.tsx b/client/components/mma/shared/CallCentrePrompt.stories.tsx
@@ -0,0 +1,11 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { CallCentrePrompt } from './CallCentrePrompt';
+
+export default {
+	component: CallCentrePrompt,
+	title: 'Components/CallCentrePrompt',
+} as Meta<typeof CallCentrePrompt>;
+
+export const Default: StoryFn<typeof CallCentrePrompt> = () => {
+	return <CallCentrePrompt />;
+};
diff --git a/client/components/mma/shared/CallCentrePrompt.tsx b/client/components/mma/shared/CallCentrePrompt.tsx
@@ -0,0 +1,33 @@
+import { ButtonLink, Stack } from '@guardian/source-react-components';
+import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
+import { useState } from 'react';
+import { CallCentreEmailAndNumbers } from '@/client/components/shared/CallCenterEmailAndNumbers';
+
+export const CallCentrePrompt = () => {
+	const [showCallCentreNumbers, setCallCentreNumbersVisibility] =
+		useState<boolean>(false);
+
+	return (
+		<Stack space={3}>
+			<InfoSummary
+				message="Changed address?"
+				context={
+					<>
+						Please{' '}
+						<ButtonLink
+							onClick={() =>
+								setCallCentreNumbersVisibility(
+									!showCallCentreNumbers,
+								)
+							}
+						>
+							call our customer support team
+						</ButtonLink>{' '}
+						to update your delivery details.
+					</>
+				}
+			/>
+			{showCallCentreNumbers && <CallCentreEmailAndNumbers />}
+		</Stack>
+	);
+};