Two step banner configurable (#14937)

* Two step banner configurable

* SDC bump version to 3.8.1

Author: AnastasiiaBalenko

dotcom-rendering/package.json

@@ -43,7 +43,7 @@
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "11.3.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "8.2.0",
+		"@guardian/support-dotcom-components": "8.3.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.56.1",
 		"@sentry/browser": "10.24.0",

dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx

@@ -94,6 +94,7 @@ const withBannerData =
 			bannerChannel,
 			abandonedBasket,
 			promoCodes,
+			isCollapsible,
 		} = bannerProps;
 
 		const [hasBeenSeen, setNode] = useIsInView({
@@ -347,6 +348,7 @@ const withBannerData =
 					submitComponentEvent,
 					design,
 					promoCodes,
+					isCollapsible,
 				};
 
 				return (

dotcom-rendering/src/components/marketing/banners/common/types.tsx

@@ -81,4 +81,5 @@ export interface BannerRenderProps {
 	submitComponentEvent?: (componentEvent: ComponentEvent) => void;
 	design?: ConfigurableDesign;
 	promoCodes?: string[];
+	isCollapsible?: boolean;
 }

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -145,6 +145,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 	design,
 	countryCode,
 	promoCodes,
+	isCollapsible,
 }: BannerRenderProps): JSX.Element => {
 	const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));
 
@@ -163,15 +164,16 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 		ChoiceCard | undefined
 	>(defaultChoiceCard);
 
-	const isCollapsableBanner =
-		tracking.abTestVariant.includes('COLLAPSABLE_V1') ||
-		tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER');
+	const isCollapsableBanner: boolean =
+		isCollapsible ??
+		(tracking.abTestVariant.includes('COLLAPSABLE_V1') ||
+			tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER'));
 
-	const contextClassName = tracking.abTestVariant.includes(
-		'COLLAPSABLE_V2_MAYBE_LATER',
-	)
-		? 'maybe-later'
-		: '';
+	const contextClassName =
+		isCollapsible ||
+		tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER')
+			? 'maybe-later'
+			: '';
 
 	const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
 

dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx

@@ -323,16 +323,14 @@ export const CollapsableWithThreeTierChoiceCards: Story = {
 				buttonColour: stringToHexColour('F1F8FC'),
 			},
 		},
-		tracking: {
-			...tracking,
-			abTestVariant: 'COLLAPSABLE_V1',
-		},
+		tracking,
 		choiceCardAmounts: regularChoiceCardAmounts,
 		choiceCardsSettings,
 		tickerSettings,
 		separateArticleCountSettings: {
 			type: 'above',
 		},
+		isCollapsible: true,
 	},
 };
 
@@ -344,10 +342,8 @@ export const CollapsableWithMainImage: Story = {
 			...design,
 			visual: regularImage,
 		},
-		tracking: {
-			...tracking,
-			abTestVariant: 'COLLAPSABLE_V1',
-		},
+		tracking,
+		isCollapsible: true,
 	},
 };
 
@@ -359,10 +355,8 @@ export const CollapsableMaybeLaterVariant: Story = {
 			...design,
 			visual: regularImage,
 		},
-		tracking: {
-			...tracking,
-			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
-		},
+		tracking,
+		isCollapsible: true,
 	},
 };
 
@@ -377,15 +371,13 @@ export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
 				buttonColour: stringToHexColour('F1F8FC'),
 			},
 		},
-		tracking: {
-			...tracking,
-			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
-		},
+		tracking,
 		choiceCardAmounts: regularChoiceCardAmounts,
 		choiceCardsSettings,
 		tickerSettings,
 		separateArticleCountSettings: {
 			type: 'above',
 		},
+		isCollapsible: true,
 	},
 };