@newskit-render/my-account 7.147.1 → 7.147.2-644022a50.12

package/dist/cjs/pages/CancellationStepper/CancellationStepperContext.js

@@ -40,570 +40,667 @@ var reasonSubtitleOverrides = {
     stylePreset: { xs: 'textAlignCenter', md: 'textAlignLeft' },
 };
 var downgradePageUrl = '[baseURL]/cancel?step=downgrade';
-var CancellationStepperContext = function (variant, contractPhase, inEmbeddedMode) { return ({
-    baseUrl: constants_1.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: newskit_1.EventTrigger.Click,
-                page_name: 'cancellation reasons',
-                optimizely_feature_data: "cancellation_exp|".concat(variant),
-                contract_state: contractPhase,
-            },
-        },
-        backButtonOverrides: {
-            marginBlockEnd: 'space060',
+var CancellationStepperContext = function (variant, contractPhase, inEmbeddedMode) {
+    var isVariantTwo = variant === constants_1.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: constants_1.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: newskit_1.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({}, shared_components_1.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({}, shared_components_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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_1.default.createElement(newskit_1.Stack, { spaceInline: "space010", flow: "horizontal-center" },
-                        react_1.default.createElement(newskit_1.TextBlock, { typographyPreset: "editorialLightHeadline040", stylePreset: "inkSubtle" },
-                            react_1.default.createElement("s", null, "\u00A3120")),
-                        react_1.default.createElement(newskit_1.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: newskit_1.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_1.default.createElement(newskit_1.Stack, { spaceInline: "space010", flow: "horizontal-center" },
+                            react_1.default.createElement(newskit_1.TextBlock, { typographyPreset: "editorialLightHeadline040", stylePreset: "inkSubtle" },
+                                react_1.default.createElement("s", null, "\u00A3120")),
+                            react_1.default.createElement(newskit_1.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: newskit_1.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: newskit_1.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: newskit_1.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({}, shared_components_1.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: newskit_1.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({}, shared_components_1.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: newskit_1.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({}, shared_components_1.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({}, shared_components_1.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_1.default.createElement(react_1.default.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_1.default.createElement(newskit_1.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: newskit_1.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_1.default.createElement(react_1.default.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_1.default.createElement(newskit_1.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: newskit_1.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({}, shared_components_1.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({}, shared_components_1.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: newskit_1.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({}, shared_components_1.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_1.default.createElement(react_1.default.Fragment, null,
+                            "Cancelling now means your subscription will end at the close of your current billing period. After this, your access will stop.",
+                            react_1.default.createElement("br", null),
+                            react_1.default.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: newskit_1.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: baseContext_1.navigationPrimary,
-    footer: baseContext_1.footer,
-    sideNav: baseContext_1.sideNav,
-    sideNavSelected: 'subscription-and-billing',
-    previousSubscription: {
-        disableBanner: true,
-    },
-}); };
+        componentSequence: {
+            Digital: ['reason', 'downgrade', 'reviewCancellation', 'confirmCancel'],
+        },
+        navigationPrimary: baseContext_1.navigationPrimary,
+        footer: baseContext_1.footer,
+        sideNav: baseContext_1.sideNav,
+        sideNavSelected: 'subscription-and-billing',
+        previousSubscription: {
+            disableBanner: true,
+        },
+    };
+};
 exports.CancellationStepperContext = CancellationStepperContext;
 //# sourceMappingURL=CancellationStepperContext.js.map