npm - @newskit-render/my-account - Versions diffs - 7.147.1 → 7.147.2-52fad9490.11 - Mend

@newskit-render/my-account 7.147.1 → 7.147.2-52fad9490.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/dist/esm/pages/CancellationStepper/CancellationStepperContext.js CHANGED Viewed

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import { footer, navigationPrimary, sideNav } from '../../context/baseContext';
-import { BASE_URL } from '../../constants';
+import { BASE_URL, CANCELLATION_EXPERIMENT } from '../../constants';
 import { DEFAULT_CONTENT_CONTAINER_WIDTH, getEmbeddedModeProperty, } from '@newskit-render/shared-components';
 import { EventTrigger, LinkInline, Stack, TextBlock } from 'newskit';
 var getPageTrackingEvent = function (pageName, variant, contractPhase, inEmbeddedMode) { return ({
@@ -34,569 +34,666 @@ var reasonSubtitleOverrides = {
     stylePreset: { xs: 'textAlignCenter', md: 'textAlignLeft' },
 };
 var downgradePageUrl = '[baseURL]/cancel?step=downgrade';
-export var CancellationStepperContext = function (variant, contractPhase, inEmbeddedMode) { return ({
-    baseUrl: BASE_URL,
-    head: {
-        pageTitle: 'Cancellation',
-    },
-    showBackButton: true,
-    header: {
-        backButton: {
-            text: 'Back',
-            'aria-label': 'back',
-            href: '[baseURL]/subscription-and-billing',
-            hasIcon: true,
-            eventContext: {
-                event_navigation_action: 'navigation',
-                event_navigation_name: 'button:back',
-                event_navigation_browsing_method: EventTrigger.Click,
-                page_name: 'cancellation reasons',
-                optimizely_feature_data: "cancellation_exp|".concat(variant),
-                contract_state: contractPhase,
-            },
-        },
-        backButtonOverrides: {
-            marginBlockEnd: 'space060',
+export var CancellationStepperContext = function (variant, contractPhase, inEmbeddedMode) {
+    var isVariantTwo = variant === CANCELLATION_EXPERIMENT.VARIANT_2_A;
+    var varTwoIntroduction = {
+        title: 'Your subscription has been cancelled',
+        description: 'We’ve processed your cancellation. You’ll continue to have access until the end of your current billing period.',
+        center: false,
+        titleOverrides: {},
+    };
+    return {
+        baseUrl: BASE_URL,
+        head: {
+            pageTitle: 'Cancellation',
         },
-    },
-    containerOverrides: {
-        rows: 'auto',
-        columns: '1fr 1fr',
-        rowGap: '8px',
-        columnGap: '8px',
-        justifyContent: 'space-between',
-        overrides: {
-            paddingBlock: 'space050',
-            paddingInline: 'space040',
-            minWidth: '100%',
+        showBackButton: true,
+        header: {
+            backButton: {
+                text: 'Back',
+                'aria-label': 'back',
+                href: '[baseURL]/subscription-and-billing',
+                hasIcon: true,
+                eventContext: {
+                    event_navigation_action: 'navigation',
+                    event_navigation_name: 'button:back',
+                    event_navigation_browsing_method: EventTrigger.Click,
+                    page_name: 'cancellation reasons',
+                    optimizely_feature_data: "cancellation_exp|".concat(variant),
+                    contract_state: contractPhase,
+                },
+            },
+            backButtonOverrides: {
+                marginBlockEnd: 'space060',
+            },
         },
-    },
-    layoutMainContentOverrides: {
-        fullWidth: true,
-        justifyContent: 'stretch',
-        width: {
-            xs: '100%',
-            md: '100%',
+        containerOverrides: {
+            rows: 'auto',
+            columns: '1fr 1fr',
+            rowGap: '8px',
+            columnGap: '8px',
+            justifyContent: 'space-between',
+            overrides: {
+                paddingBlock: 'space050',
+                paddingInline: 'space040',
+                minWidth: '100%',
+            },
         },
-        paddingInline: {
-            xs: 'space045',
-            md: 'space060',
+        layoutMainContentOverrides: {
+            fullWidth: true,
+            justifyContent: 'stretch',
+            width: {
+                xs: '100%',
+                md: '100%',
+            },
+            paddingInline: {
+                xs: 'space045',
+                md: 'space060',
+            },
+            paddingBlockStart: {
+                xs: 'space045',
+                md: 'space060',
+            },
         },
-        paddingBlockStart: {
-            xs: 'space045',
-            md: 'space060',
+        contentContainerOverrides: {
+            marginInline: 'auto',
+            paddingBlockStart: 'space000',
+            paddingInline: 'space000',
         },
-    },
-    contentContainerOverrides: {
-        marginInline: 'auto',
-        paddingBlockStart: 'space000',
-        paddingInline: 'space000',
-    },
-    components: {
-        reason: {
-            tealiumContext: getPageTrackingEvent('cancellation reasons', variant, contractPhase, inEmbeddedMode),
-            contentContainerOverrides: {
-                marginInline: 'auto',
-                paddingBlockStart: 'space000',
-                paddingInline: 'space000',
-                width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
-            },
-            layoutType: 'grid',
-            header: {
-                center: true,
-                title: 'Before you go, can you tell us why?',
-                description: 'Your feedback helps us improve and may allow us to offer you a better solution.',
-                fullWidthTitle: true,
-                titleOverrides: {
-                    marginBlockEnd: 'space060',
-                    typographyPreset: {
-                        xs: 'editorialHeadline040',
-                        md: 'editorialSubheadline050',
+        components: {
+            reason: {
+                tealiumContext: getPageTrackingEvent('cancellation reasons', variant, contractPhase, inEmbeddedMode),
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
+                },
+                layoutType: 'grid',
+                header: {
+                    center: true,
+                    title: 'Before you go, can you tell us why?',
+                    description: 'Your feedback helps us improve and may allow us to offer you a better solution.',
+                    fullWidthTitle: true,
+                    titleOverrides: {
+                        marginBlockEnd: 'space060',
+                        typographyPreset: {
+                            xs: 'editorialHeadline040',
+                            md: 'editorialSubheadline050',
+                        },
                     },
-                },
-                descriptionOverrides: {
-                    marginBlockEnd: 'space040',
-                    paddingInline: { xs: 'space000', md: 'space110' },
-                    typographyPreset: {
-                        xs: 'editorialParagraph010',
-                        md: 'editorialParagraph020',
+                    descriptionOverrides: {
+                        marginBlockEnd: 'space040',
+                        paddingInline: { xs: 'space000', md: 'space110' },
+                        typographyPreset: {
+                            xs: 'editorialParagraph010',
+                            md: 'editorialParagraph020',
+                        },
                     },
                 },
-            },
-            containerOverrides: {
-                rows: 'auto',
-                columns: '1fr 1fr',
-                rowGap: 'space040',
-                columnGap: 'space040',
-                justifyContent: 'space-between',
-                overrides: {
-                    paddingBlock: 'space045',
-                    minWidth: '100%',
-                },
-            },
-            itemContainerOverrides: {
-                rows: { xs: 'auto 1fr', md: 'auto' },
-                columns: '1fr',
-                rowGap: { xs: 'space040', md: 'space030' },
-                justifyContent: 'space-between',
-                overrides: {
-                    paddingBlock: { xs: 'space020', md: 'space045' },
-                    paddingInline: { xs: 'space020', md: 'space045' },
-                    paddingBlockEnd: { xs: 'space045', md: 'space045' },
-                    minWidth: '100%',
-                },
-            },
-            itemHeaderOverrides: {
-                flow: { xs: 'vertical-center', md: 'horizontal-top' },
-                flowReverse: { xs: true, md: false },
-                imageVisible: true,
-                height: 'auto',
-            },
-            itemImageOverrides: {
-                width: 45,
-                height: 36,
-            },
-            belowItemExtra: {
                 containerOverrides: {
-                    columns: 'repeat(2, auto)',
-                    justifyContent: 'center',
-                    justifyItems: 'center',
-                    alignItems: 'center',
+                    rows: 'auto',
+                    columns: '1fr 1fr',
+                    rowGap: 'space040',
+                    columnGap: 'space040',
+                    justifyContent: 'space-between',
                     overrides: {
-                        marginBlockStart: 'space050',
+                        paddingBlock: 'space045',
+                        minWidth: '100%',
                     },
                 },
-                label: 'or',
-                button: {
-                    text: 'None of the above',
-                    href: downgradePageUrl,
-                    id: 'none-of-the-above',
-                },
-                buttonOverrides: {
-                    stylePreset: 'baseInteractivePrimary030',
-                    typographyPreset: 'utilitySubheading020',
+                itemContainerOverrides: {
+                    rows: { xs: 'auto 1fr', md: 'auto' },
+                    columns: '1fr',
+                    rowGap: { xs: 'space040', md: 'space030' },
+                    justifyContent: 'space-between',
+                    overrides: {
+                        paddingBlock: { xs: 'space020', md: 'space045' },
+                        paddingInline: { xs: 'space020', md: 'space045' },
+                        paddingBlockEnd: { xs: 'space045', md: 'space045' },
+                        minWidth: '100%',
+                    },
                 },
-                iconOverrides: {
-                    size: 'iconSize020',
-                    stylePreset: 'baseInteractivePrimary030',
+                itemHeaderOverrides: {
+                    flow: { xs: 'vertical-center', md: 'horizontal-top' },
+                    flowReverse: { xs: true, md: false },
+                    imageVisible: true,
+                    height: 'auto',
                 },
-                marginInline: 'auto',
-                eventContext: {
-                    event_navigation_action: 'navigation',
-                    event_navigation_name: 'online cancellation : cancellation reason selection',
-                    event_navigation_browsing_method: EventTrigger.Click,
-                    page_name: 'cancellation reasons',
-                    article_parent_name: 'none of the above',
-                    optimizely_feature_data: "cancellation_exp|".concat(variant),
-                    contract_state: contractPhase,
+                itemImageOverrides: {
+                    width: 45,
+                    height: 36,
                 },
-            },
-            items: [
-                {
-                    id: 'tech-issues',
-                    label: "I'm having tech issues",
-                    labelOverrides: reasonLabelOverrides,
-                    subtitle: "I've experienced problems with the app or website",
-                    subtitleOverrides: reasonSubtitleOverrides,
-                    componentType: 'grid',
-                    image: '/assets/cancellation/placeholder.png',
-                    href: downgradePageUrl,
-                    eventContext: {
-                        event_navigation_action: 'navigation',
-                        event_navigation_name: 'online cancellation : cancellation reason selection',
-                        event_navigation_browsing_method: EventTrigger.Click,
-                        page_name: 'cancellation reasons',
-                        article_parent_name: 'tech issues',
-                        optimizely_feature_data: "cancellation_exp|".concat(variant),
-                        contract_state: contractPhase,
+                belowItemExtra: {
+                    containerOverrides: {
+                        columns: 'repeat(2, auto)',
+                        justifyContent: 'center',
+                        justifyItems: 'center',
+                        alignItems: 'center',
+                        overrides: {
+                            marginBlockStart: 'space050',
+                        },
                     },
-                },
-                {
-                    id: 'not-right-for-me',
-                    label: "The content isn't right for me",
-                    labelOverrides: reasonLabelOverrides,
-                    subtitle: "I'm not enjoying the content, or I'm taking a break from news",
-                    subtitleOverrides: reasonSubtitleOverrides,
-                    componentType: 'grid',
-                    image: '/assets/cancellation/placeholder.png',
-                    href: downgradePageUrl,
-                    eventContext: {
-                        event_navigation_action: 'navigation',
-                        event_navigation_name: 'online cancellation : cancellation reason selection',
-                        event_navigation_browsing_method: EventTrigger.Click,
-                        page_name: 'cancellation reasons',
-                        article_parent_name: 'not right for me',
-                        optimizely_feature_data: "cancellation_exp|".concat(variant),
-                        contract_state: contractPhase,
+                    label: 'or',
+                    button: {
+                        text: 'None of the above',
+                        href: downgradePageUrl,
+                        id: 'none-of-the-above',
                     },
-                },
-                {
-                    id: 'no-time',
-                    label: "I don't have time",
-                    labelOverrides: reasonLabelOverrides,
-                    subtitle: "I don't read the news enough to make it worthwhile",
-                    subtitleOverrides: reasonSubtitleOverrides,
-                    componentType: 'grid',
-                    image: '/assets/cancellation/placeholder.png',
-                    href: downgradePageUrl,
-                    eventContext: {
-                        event_navigation_action: 'navigation',
-                        event_navigation_name: 'online cancellation : cancellation reason selection',
-                        event_navigation_browsing_method: EventTrigger.Click,
-                        page_name: 'cancellation reasons',
-                        article_parent_name: 'no time',
-                        optimizely_feature_data: "cancellation_exp|".concat(variant),
-                        contract_state: contractPhase,
+                    buttonOverrides: {
+                        stylePreset: 'baseInteractivePrimary030',
+                        typographyPreset: 'utilitySubheading020',
                     },
-                },
-                {
-                    id: 'expensive',
-                    label: "It's too expensive",
-                    labelOverrides: reasonLabelOverrides,
-                    subtitle: "I can't justify the subscription cost",
-                    subtitleOverrides: reasonSubtitleOverrides,
-                    componentType: 'grid',
-                    image: '/assets/cancellation/placeholder.png',
-                    href: downgradePageUrl,
-                    eventContext: {
-                        event_navigation_action: 'navigation',
-                        event_navigation_name: 'online cancellation : cancellation reason selection',
-                        event_navigation_browsing_method: EventTrigger.Click,
-                        page_name: 'cancellation reasons',
-                        article_parent_name: 'expensive',
-                        optimizely_feature_data: "cancellation_exp|".concat(variant),
-                        contract_state: contractPhase,
+                    iconOverrides: {
+                        size: 'iconSize020',
+                        stylePreset: 'baseInteractivePrimary030',
                     },
-                },
-                {
-                    id: 'practical-issues',
-                    label: 'Practical issues',
-                    labelOverrides: reasonLabelOverrides,
-                    subtitle: 'I’m having delivery problems or can’t receive the paper any more',
-                    subtitleOverrides: reasonSubtitleOverrides,
-                    componentType: 'grid',
-                    image: '/assets/cancellation/placeholder.png',
-                    href: downgradePageUrl,
+                    marginInline: 'auto',
                     eventContext: {
                         event_navigation_action: 'navigation',
                         event_navigation_name: 'online cancellation : cancellation reason selection',
                         event_navigation_browsing_method: EventTrigger.Click,
                         page_name: 'cancellation reasons',
-                        article_parent_name: 'practical issues',
+                        article_parent_name: 'none of the above',
                         optimizely_feature_data: "cancellation_exp|".concat(variant),
                         contract_state: contractPhase,
                     },
                 },
-                {
-                    id: 'another-source',
-                    label: 'I prefer another source',
-                    labelOverrides: reasonLabelOverrides,
-                    subtitle: 'I now get my news from somewhere else',
-                    subtitleOverrides: reasonSubtitleOverrides,
-                    componentType: 'grid',
-                    image: '/assets/cancellation/placeholder.png',
-                    href: downgradePageUrl,
-                    eventContext: {
-                        event_navigation_action: 'navigation',
-                        event_navigation_name: 'online cancellation : cancellation reason selection',
-                        event_navigation_browsing_method: EventTrigger.Click,
-                        page_name: 'cancellation reasons',
-                        article_parent_name: 'another source',
-                        optimizely_feature_data: "cancellation_exp|".concat(variant),
-                        contract_state: contractPhase,
+                items: [
+                    {
+                        id: 'tech-issues',
+                        label: "I'm having tech issues",
+                        labelOverrides: reasonLabelOverrides,
+                        subtitle: "I've experienced problems with the app or website",
+                        subtitleOverrides: reasonSubtitleOverrides,
+                        componentType: 'grid',
+                        image: '/assets/cancellation/placeholder.png',
+                        href: downgradePageUrl,
+                        eventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'online cancellation : cancellation reason selection',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'cancellation reasons',
+                            article_parent_name: 'tech issues',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
+                        },
                     },
-                },
-            ],
-        },
-        downgrade: {
-            tealiumContext: getPageTrackingEvent('offer page', variant, contractPhase, inEmbeddedMode),
-            contentContainerOverrides: {
-                marginInline: 'auto',
-                paddingBlockStart: 'space000',
-                paddingInline: 'space000',
-                width: { xs: '100%' },
-                maxWidth: '1400px',
-            },
-            header: {
-                overline: 'Exclusive international offer:',
-                overlineOverrides: {
-                    paddingInline: { xs: 'space000', md: 'space050' },
-                    typographyPreset: 'utilityHeading050',
-                },
-                title: 'Stay informed for less',
-                description: 'Save on your subscription and continue to access trusted analysis and global reporting.',
-                fullWidthTitle: true,
-                titleOverrides: {
-                    marginBlockEnd: 'space060',
-                    paddingInline: { xs: 'space000', md: 'space050' },
-                    typographyPreset: {
-                        xs: 'editorialLightDisplay007',
-                        md: 'editorialLightDisplay008',
+                    {
+                        id: 'not-right-for-me',
+                        label: "The content isn't right for me",
+                        labelOverrides: reasonLabelOverrides,
+                        subtitle: "I'm not enjoying the content, or I'm taking a break from news",
+                        subtitleOverrides: reasonSubtitleOverrides,
+                        componentType: 'grid',
+                        image: '/assets/cancellation/placeholder.png',
+                        href: downgradePageUrl,
+                        eventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'online cancellation : cancellation reason selection',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'cancellation reasons',
+                            article_parent_name: 'not right for me',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
+                        },
                     },
-                },
-                descriptionOverrides: {
-                    paddingInline: { xs: 'space000', md: 'space050' },
-                    stylePreset: 'inkSubtle',
-                    typographyPreset: {
-                        xs: 'editorialLightHeadline020',
-                        md: 'editorialLightHeadline030',
+                    {
+                        id: 'no-time',
+                        label: "I don't have time",
+                        labelOverrides: reasonLabelOverrides,
+                        subtitle: "I don't read the news enough to make it worthwhile",
+                        subtitleOverrides: reasonSubtitleOverrides,
+                        componentType: 'grid',
+                        image: '/assets/cancellation/placeholder.png',
+                        href: downgradePageUrl,
+                        eventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'online cancellation : cancellation reason selection',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'cancellation reasons',
+                            article_parent_name: 'no time',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
+                        },
                     },
-                },
-            },
-            heroImage: {
-                width: 450,
-                height: 470,
-                src: '/assets/cancellation/cancellation-hero.png',
-                alt: 'Downgrade',
+                    {
+                        id: 'expensive',
+                        label: "It's too expensive",
+                        labelOverrides: reasonLabelOverrides,
+                        subtitle: "I can't justify the subscription cost",
+                        subtitleOverrides: reasonSubtitleOverrides,
+                        componentType: 'grid',
+                        image: '/assets/cancellation/placeholder.png',
+                        href: downgradePageUrl,
+                        eventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'online cancellation : cancellation reason selection',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'cancellation reasons',
+                            article_parent_name: 'expensive',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
+                        },
+                    },
+                    {
+                        id: 'practical-issues',
+                        label: 'Practical issues',
+                        labelOverrides: reasonLabelOverrides,
+                        subtitle: 'I’m having delivery problems or can’t receive the paper any more',
+                        subtitleOverrides: reasonSubtitleOverrides,
+                        componentType: 'grid',
+                        image: '/assets/cancellation/placeholder.png',
+                        href: downgradePageUrl,
+                        eventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'online cancellation : cancellation reason selection',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'cancellation reasons',
+                            article_parent_name: 'practical issues',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
+                        },
+                    },
+                    {
+                        id: 'another-source',
+                        label: 'I prefer another source',
+                        labelOverrides: reasonLabelOverrides,
+                        subtitle: 'I now get my news from somewhere else',
+                        subtitleOverrides: reasonSubtitleOverrides,
+                        componentType: 'grid',
+                        image: '/assets/cancellation/placeholder.png',
+                        href: downgradePageUrl,
+                        eventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'online cancellation : cancellation reason selection',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'cancellation reasons',
+                            article_parent_name: 'another source',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
+                        },
+                    },
+                ],
             },
-            offers: [
-                {
-                    id: 'offer-1',
-                    title: 'Save £80/year',
-                    offerLabel: (React.createElement(Stack, { spaceInline: "space010", flow: "horizontal-center" },
-                        React.createElement(TextBlock, { typographyPreset: "editorialLightHeadline040", stylePreset: "inkSubtle" },
-                            React.createElement("s", null, "\u00A3120")),
-                        React.createElement(TextBlock, { typographyPreset: "editorialLightHeadline050", stylePreset: "inkSection020" }, "\u00A340 for a whole year"))),
-                    description: 'Continue getting unrivalled international journalism from world-class reporters, dedicated to delivering unbiased, informative and entertaining analysis of the very latest global events.',
-                    newPrice: 'Then £10/month thereafter',
-                    buttonText: 'Save £80 for a year',
-                    containerOverrides: {
-                        overrides: { marginBlockEnd: 'space050', marginInline: '-8px' },
+            downgrade: {
+                tealiumContext: getPageTrackingEvent('offer page', variant, contractPhase, inEmbeddedMode),
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: { xs: '100%' },
+                    maxWidth: '1400px',
+                },
+                header: {
+                    overline: 'Exclusive international offer:',
+                    overlineOverrides: {
+                        paddingInline: { xs: 'space000', md: 'space050' },
+                        typographyPreset: 'utilityHeading050',
                     },
-                    buttonEventContext: {
-                        event_navigation_action: 'navigation',
-                        event_navigation_name: 'offer 1 cta selected',
-                        event_navigation_browsing_method: EventTrigger.Click,
-                        page_name: 'offer page',
-                        optimizely_feature_data: "cancellation_exp|".concat(variant),
-                        contract_state: contractPhase,
+                    title: 'Stay informed for less',
+                    description: 'Save on your subscription and continue to access trusted analysis and global reporting.',
+                    fullWidthTitle: true,
+                    titleOverrides: {
+                        marginBlockEnd: 'space060',
+                        paddingInline: { xs: 'space000', md: 'space050' },
+                        typographyPreset: {
+                            xs: 'editorialLightDisplay007',
+                            md: 'editorialLightDisplay008',
+                        },
+                    },
+                    descriptionOverrides: {
+                        paddingInline: { xs: 'space000', md: 'space050' },
+                        stylePreset: 'inkSubtle',
+                        typographyPreset: {
+                            xs: 'editorialLightHeadline020',
+                            md: 'editorialLightHeadline030',
+                        },
                     },
                 },
-                {
-                    id: 'offer-2',
-                    title: 'Your current subscription',
-                    offerLabel: 'International Digital',
-                    offerLabelOverrides: {
-                        typographyPreset: 'editorialLightHeadline050',
-                        stylePreset: 'inkSection020',
-                    },
-                    newPrice: '£10/month (£120/year)',
-                    buttonText: 'Keep your current subscription',
-                    baseUrl: '/account',
-                    buttonHref: '[baseUrl]/subscription-and-billing',
-                    buttonOverrides: {
-                        overrides: {
-                            stylePreset: 'buttonOutlinedSecondary',
+                heroImage: {
+                    width: 450,
+                    height: 470,
+                    src: '/assets/cancellation/cancellation-hero.png',
+                    alt: 'Downgrade',
+                },
+                offers: [
+                    {
+                        id: 'offer-1',
+                        title: 'Save £80/year',
+                        offerLabel: (React.createElement(Stack, { spaceInline: "space010", flow: "horizontal-center" },
+                            React.createElement(TextBlock, { typographyPreset: "editorialLightHeadline040", stylePreset: "inkSubtle" },
+                                React.createElement("s", null, "\u00A3120")),
+                            React.createElement(TextBlock, { typographyPreset: "editorialLightHeadline050", stylePreset: "inkSection020" }, "\u00A340 for a whole year"))),
+                        description: 'Continue getting unrivalled international journalism from world-class reporters, dedicated to delivering unbiased, informative and entertaining analysis of the very latest global events.',
+                        newPrice: 'Then £10/month thereafter',
+                        buttonText: 'Save £80 for a year',
+                        containerOverrides: {
+                            overrides: { marginBlockEnd: 'space050', marginInline: '-8px' },
+                        },
+                        buttonEventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'offer 1 cta selected',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'offer page',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
                         },
                     },
-                    buttonEventContext: {
+                    {
+                        id: 'offer-2',
+                        title: 'Your current subscription',
+                        offerLabel: 'International Digital',
+                        offerLabelOverrides: {
+                            typographyPreset: 'editorialLightHeadline050',
+                            stylePreset: 'inkSection020',
+                        },
+                        newPrice: '£10/month (£120/year)',
+                        buttonText: 'Keep your current subscription',
+                        baseUrl: '/account',
+                        buttonHref: '[baseUrl]/subscription-and-billing',
+                        buttonOverrides: {
+                            overrides: {
+                                stylePreset: 'buttonOutlinedSecondary',
+                            },
+                        },
+                        buttonEventContext: {
+                            event_navigation_action: 'navigation',
+                            event_navigation_name: 'online cancellation  - keep your current subscription',
+                            event_navigation_browsing_method: EventTrigger.Click,
+                            page_name: 'offer page',
+                            optimizely_feature_data: "cancellation_exp|".concat(variant),
+                            contract_state: contractPhase,
+                        },
+                        containerOverrides: {
+                            overrides: { marginBlockEnd: 'space050', marginInline: '-8px' },
+                        },
+                    },
+                ],
+                continueButton: {
+                    eventContext: {
                         event_navigation_action: 'navigation',
-                        event_navigation_name: 'online cancellation  - keep your current subscription',
+                        event_navigation_name: 'online cancellation  - proceed with cancellation',
                         event_navigation_browsing_method: EventTrigger.Click,
                         page_name: 'offer page',
                         optimizely_feature_data: "cancellation_exp|".concat(variant),
                         contract_state: contractPhase,
                     },
+                    label: 'or',
+                    baseUrl: '/account',
+                    button: {
+                        text: 'Proceed with cancellation',
+                        href: '[baseURL]/cancel?step=cancel',
+                    },
+                },
+            },
+            confirmCancel: {
+                tealiumContext: getPageTrackingEvent('cancellation page', variant, contractPhase, inEmbeddedMode),
+                showBackButton: false,
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }), (isVariantTwo
+                        ? { xs: '100%', sm: '100%', md: '440px', lg: '440px' }
+                        : {})),
+                },
+                image: {
+                    src: '/assets/cancellation/thank-you.png',
+                    alt: 'Cancellation confirmed',
+                    width: 220,
+                    height: 320,
+                },
+                introduction: __assign({ title: 'Subscription cancelled', description: 'Your subscription will expire on ##DATE##.', center: true }, (isVariantTwo ? varTwoIntroduction : {})),
+                subscriptionDetails: {
                     containerOverrides: {
-                        overrides: { marginBlockEnd: 'space050', marginInline: '-8px' },
+                        width: '100%',
+                        marginBlockEnd: 'space100',
+                    },
+                    subscriptionType: {
+                        label: 'Subscription type',
+                        overrides: {
+                            paddingBlock: 'space050',
+                            paddingInlineStart: 'space040',
+                            typographyPreset: 'utilityHeading010',
+                        },
+                    },
+                    endDate: {
+                        label: 'Subscription end date',
+                        overrides: {
+                            paddingBlock: 'space050',
+                            paddingInlineStart: 'space040',
+                            typographyPreset: 'utilityHeading010',
+                        },
                     },
                 },
-            ],
-            continueButton: {
-                eventContext: {
+                buttonText: isVariantTwo
+                    ? 'Go back to My Account'
+                    : 'Return to Homepage',
+                buttonUrl: '/account',
+                buttonEventContext: {
                     event_navigation_action: 'navigation',
-                    event_navigation_name: 'online cancellation  - proceed with cancellation',
+                    event_navigation_name: 'online cancellation  - return to homepage',
                     event_navigation_browsing_method: EventTrigger.Click,
-                    page_name: 'offer page',
+                    page_name: 'cancellation page',
                     optimizely_feature_data: "cancellation_exp|".concat(variant),
                     contract_state: contractPhase,
                 },
-                label: 'or',
-                baseUrl: '/account',
-                button: {
-                    text: 'Proceed with cancellation',
-                    href: '[baseURL]/cancel?step=cancel',
-                },
-            },
-        },
-        confirmCancel: {
-            tealiumContext: getPageTrackingEvent('cancellation page', variant, contractPhase, inEmbeddedMode),
-            showBackButton: false,
-            contentContainerOverrides: {
-                marginInline: 'auto',
-                paddingBlockStart: 'space000',
-                paddingInline: 'space000',
-                width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
-            },
-            image: {
-                src: '/assets/cancellation/thank-you.png',
-                alt: 'Cancellation confirmed',
-                width: 220,
-                height: 320,
-            },
-            introduction: {
-                title: 'Subscription cancelled',
-                description: 'Your subscription will expire on ##DATE##.',
-                center: true,
-            },
-            buttonText: 'Return to Homepage',
-            buttonUrl: '/account',
-            buttonEventContext: {
-                event_navigation_action: 'navigation',
-                event_navigation_name: 'online cancellation  - return to homepage',
-                event_navigation_browsing_method: EventTrigger.Click,
-                page_name: 'cancellation page',
-                optimizely_feature_data: "cancellation_exp|".concat(variant),
-                contract_state: contractPhase,
             },
-        },
-        preCancellation: {
-            tealiumContext: getPageTrackingEvent('pre-confirmation page', variant, contractPhase, inEmbeddedMode),
-            contentContainerOverrides: {
-                marginInline: 'auto',
-                paddingBlockStart: 'space000',
-                paddingInline: 'space000',
-                width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
-            },
-            header: {
-                title: 'Confirm your cancellation',
-                description: '##TIME_REMAINING## ##TIME_PERIOD## remaining',
-                fullWidthTitle: true,
-                titleOverrides: {
-                    textAlign: { xs: 'left', md: 'center' },
-                    marginBlockEnd: { xs: 'space050', md: 'space080' },
-                    typographyPreset: {
-                        xs: 'editorialHeadline040',
-                        md: 'editorialSubheadline050',
+            preCancellation: {
+                tealiumContext: getPageTrackingEvent('pre-confirmation page', variant, contractPhase, inEmbeddedMode),
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
+                },
+                header: {
+                    title: 'Confirm your cancellation',
+                    description: '##TIME_REMAINING## ##TIME_PERIOD## remaining',
+                    fullWidthTitle: true,
+                    titleOverrides: {
+                        textAlign: { xs: 'left', md: 'center' },
+                        marginBlockEnd: { xs: 'space050', md: 'space080' },
+                        typographyPreset: {
+                            xs: 'editorialHeadline040',
+                            md: 'editorialSubheadline050',
+                        },
+                    },
+                    descriptionOverrides: {
+                        textAlign: { xs: 'left', md: 'center' },
+                        marginBlockEnd: { xs: 'space070', md: 'space090' },
+                        typographyPreset: 'editorialLightDisplay004',
                     },
                 },
-                descriptionOverrides: {
-                    textAlign: { xs: 'left', md: 'center' },
-                    marginBlockEnd: { xs: 'space070', md: 'space090' },
-                    typographyPreset: 'editorialLightDisplay004',
+                subscriptionName: '##SUBSCRIPTION_NAME## subscription',
+                subscriptionEnd: {
+                    messages: {
+                        daysRemaining: 'Your subscription will end on ##DATE##. ',
+                        monthsRemaining: 'Your subscription will end in 1 month. ',
+                    },
+                    description: (React.createElement(React.Fragment, null,
+                        "After this date, your access to The Times and Sunday Times will stop. If you change your mind before then, just contact our",
+                        ' ',
+                        React.createElement(LinkInline, { external: false, overrides: {
+                                typographyPreset: 'utilityBody020',
+                                stylePreset: 'inkSubtle',
+                            }, href: "https://www.thetimes.com/help/articles/how-do-i-contact-customer-services", target: "_blank" }, "customer service team"),
+                        ' ',
+                        "- we\u2019ll be happy to help you keep your access.")),
+                },
+                continueButton: {
+                    eventContext: {
+                        event_navigation_action: 'navigation',
+                        event_navigation_name: 'online cancellation  - confirm cancellation',
+                        event_navigation_browsing_method: EventTrigger.Click,
+                        page_name: 'pre-confirmation page',
+                        optimizely_feature_data: "cancellation_exp|".concat(variant),
+                        contract_state: contractPhase,
+                    },
+                    label: '',
+                    button: {
+                        text: 'Confirm cancellation',
+                    },
                 },
-            },
-            subscriptionName: '##SUBSCRIPTION_NAME## subscription',
-            subscriptionEnd: {
-                messages: {
-                    daysRemaining: 'Your subscription will end on ##DATE##. ',
-                    monthsRemaining: 'Your subscription will end in 1 month. ',
+                defaultCancellationReason: 'no reason',
+                genericErrorMessage: {
+                    error: "Sorry, we're having trouble processing your cancellation request right now. Please try again later, or contact support.",
                 },
-                description: (React.createElement(React.Fragment, null,
-                    "After this date, your access to The Times and Sunday Times will stop. If you change your mind before then, just contact our",
-                    ' ',
-                    React.createElement(LinkInline, { external: false, overrides: {
-                            typographyPreset: 'utilityBody020',
-                            stylePreset: 'inkSubtle',
-                        }, href: "https://www.thetimes.com/help/articles/how-do-i-contact-customer-services", target: "_blank" }, "customer service team"),
-                    ' ',
-                    "- we\u2019ll be happy to help you keep your access.")),
             },
-            continueButton: {
-                eventContext: {
-                    event_navigation_action: 'navigation',
-                    event_navigation_name: 'online cancellation  - confirm cancellation',
-                    event_navigation_browsing_method: EventTrigger.Click,
-                    page_name: 'pre-confirmation page',
-                    optimizely_feature_data: "cancellation_exp|".concat(variant),
-                    contract_state: contractPhase,
-                },
-                label: '',
-                button: {
-                    text: 'Confirm cancellation',
+            offers: {
+                tealiumContext: getPageTrackingEvent('offer page', variant, contractPhase, inEmbeddedMode),
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
+                },
+                header: {
+                    title: "Don't cancel yet - here's a special offer",
+                    description: "We'd like you to stay. Choose an option below to keep access to The Times and The Sunday Times.",
+                    showDivider: true,
+                    marginBlockEnd: { xs: 'space050', md: 'space080' },
+                    titleOverrides: {
+                        marginBlockEnd: 'space060',
+                    },
+                    descriptionOverrides: {
+                        marginBlockEnd: 'space060',
+                    },
                 },
-            },
-            defaultCancellationReason: 'no reason',
-            genericErrorMessage: {
-                error: "Sorry, we're having trouble processing your cancellation request right now. Please try again later, or contact support.",
-            },
-        },
-        offers: {
-            tealiumContext: getPageTrackingEvent('offer page', variant, contractPhase, inEmbeddedMode),
-            contentContainerOverrides: {
-                marginInline: 'auto',
-                paddingBlockStart: 'space000',
-                paddingInline: 'space000',
-                width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
-            },
-            header: {
-                title: "Don't cancel yet - here's a special offer",
-                description: "We'd like you to stay. Choose an option below to keep access to The Times and The Sunday Times.",
-                showDivider: true,
-                marginBlockEnd: { xs: 'space050', md: 'space080' },
-                titleOverrides: {
-                    marginBlockEnd: 'space060',
+                offersSection: {
+                    title: 'Limited time deal',
+                    titleOverrides: {
+                        typographyPreset: 'editorialHeadline050',
+                        marginBlockEnd: 'space060',
+                    },
+                    items: [
+                        {
+                            id: 'DINCV-0039',
+                            title: 'Save 75% for 6 months',
+                            description: 'Stay subscribed for just £10/month for the next 6 months. After that, your price returns to £30/month. Cancel anytime.',
+                            discountedPrice: '£10/month for 6 months',
+                            regularPrice: '£30/month after',
+                            nextStep: 'discountPreview',
+                        },
+                        {
+                            id: 'cancel',
+                            title: 'Cancel subscription',
+                            description: 'If you still want to leave, you’ll be taken to the final confirmation step.',
+                            nextStep: 'reviewCancellation',
+                            overrides: {
+                                container: {
+                                    borderColor: 'interfaceInformative010',
+                                    backgroundColor: 'interfaceBackground',
+                                },
+                                title: {
+                                    marginBlockStart: 'space030',
+                                    typographyPreset: 'utilityHeading010',
+                                },
+                            },
+                        },
+                    ],
+                },
+                benefits: {
+                    showBenefits: true,
+                    title: 'Subscriber benefits',
+                    titleOverrides: {
+                        typographyPreset: 'editorialHeadline030',
+                        stylePreset: 'inkContrast',
+                        marginBlockEnd: 'space050',
+                    },
+                    items: [
+                        {
+                            code: 'FP-032',
+                            title: 'Unlimited digital access',
+                            description: 'Read without limits on your phone, tablet or on the web',
+                            link: {
+                                href: 'https://www.thetimes.com/',
+                                text: "Read today's stories",
+                            },
+                        },
+                        {
+                            code: 'share',
+                            title: 'Share articles',
+                            description: 'Forward articles to friends and family for free',
+                        },
+                    ],
                 },
-                descriptionOverrides: {
-                    marginBlockEnd: 'space060',
+                continueButton: {
+                    // TO DO: update with AIT spec
+                    eventContext: {
+                        event_navigation_action: 'navigation',
+                        event_navigation_name: 'online cancellation  - proceed with offer selection',
+                        event_navigation_browsing_method: EventTrigger.Click,
+                        page_name: 'offers page',
+                    },
+                    label: '',
+                    button: {
+                        text: 'Continue',
+                    },
                 },
             },
-            offersSection: {
-                title: 'Limited time deal',
-                titleOverrides: {
-                    typographyPreset: 'editorialHeadline050',
-                    marginBlockEnd: 'space060',
+            reviewCancellation: {
+                tealiumContext: getPageTrackingEvent('review cancellation', variant, contractPhase, inEmbeddedMode),
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
+                },
+                header: {
+                    title: 'Confirm your cancellation',
+                    fullWidthTitle: true,
+                    titleOverrides: {
+                        marginBlockEnd: { xs: 'space050', md: 'space060' },
+                        typographyPreset: {
+                            xs: 'editorialHeadline040',
+                            md: 'editorialHeadline050',
+                        },
+                    },
                 },
-                items: [
+                details: [
                     {
-                        id: 'DINCV-0039',
-                        title: 'Save 75% for 6 months',
-                        description: 'Stay subscribed for just £10/month for the next 6 months. After that, your price returns to £30/month. Cancel anytime.',
-                        discountedPrice: '£10/month for 6 months',
-                        regularPrice: '£30/month after',
-                        nextStep: 'discountPreview',
+                        label: 'Type',
+                        ariaLabel: 'Type',
+                        default: '[Digital]',
+                        valueDescription: (React.createElement(React.Fragment, null,
+                            "Cancelling now means your subscription will end at the close of your current billing period. After this, your access will stop.",
+                            React.createElement("br", null),
+                            React.createElement("br", null),
+                            "If you change your mind before then, our Customer Care team can help you keep your access.")),
+                        type: 'subscription',
                     },
                     {
-                        id: 'cancel',
-                        title: 'Cancel subscription',
-                        description: 'If you still want to leave, you’ll be taken to the final confirmation step.',
-                        nextStep: 'preCancellation',
-                        overrides: {
-                            container: {
-                                borderColor: 'interfaceInformative010',
-                                backgroundColor: 'interfaceBackground',
-                            },
-                            title: {
-                                marginBlockStart: 'space030',
-                                typographyPreset: 'utilityHeading010',
-                            },
-                        },
+                        label: 'Subscription end date',
+                        ariaLabel: 'Subscription end date',
+                        default: '[Date]',
+                        valueDescription: 'This will be your last day with full access to your subscription if you cancel today.',
+                        type: 'subDate',
                     },
                 ],
-            },
-            benefits: {
-                showBenefits: true,
-                title: 'Subscriber benefits',
-                titleOverrides: {
-                    typographyPreset: 'editorialHeadline030',
-                    stylePreset: 'inkContrast',
-                    marginBlockEnd: 'space050',
-                },
-            },
-            continueButton: {
-                // TO DO: update with AIT spec
-                eventContext: {
-                    event_navigation_action: 'navigation',
-                    event_navigation_name: 'online cancellation  - proceed with offer selection',
-                    event_navigation_browsing_method: EventTrigger.Click,
-                    page_name: 'offers page',
+                cancellationButtons: {
+                    marginBlockStart: { xs: 'space030', md: 'space060' },
+                    primaryButton: {
+                        text: 'Confirm cancellation',
+                    },
                 },
-                label: '',
-                button: {
-                    text: 'Continue',
+                genericErrorMessage: {
+                    error: "Sorry, we're having trouble processing your cancellation request right now. Please try again later, or contact support.",
                 },
+                defaultCancellationReason: 'no reason',
             },
         },
-    },
-    componentSequence: {
-        Digital: ['reason', 'downgrade', 'preCancellation', 'confirmCancel'],
-    },
-    navigationPrimary: navigationPrimary,
-    footer: footer,
-    sideNav: sideNav,
-    sideNavSelected: 'subscription-and-billing',
-    previousSubscription: {
-        disableBanner: true,
-    },
-}); };
+        componentSequence: {
+            Digital: ['reason', 'downgrade', 'reviewCancellation', 'confirmCancel'],
+        },
+        navigationPrimary: navigationPrimary,
+        footer: footer,
+        sideNav: sideNav,
+        sideNavSelected: 'subscription-and-billing',
+        previousSubscription: {
+            disableBanner: true,
+        },
+    };
+};
 //# sourceMappingURL=CancellationStepperContext.js.map