@newskit-render/my-account 7.151.1-99c829b9f.0 → 7.151.1-cd5c2d6b0.4

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

@@ -0,0 +1,884 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { footer, navigationPrimary, sideNav } from '../../context/baseContext';
+import { BASE_URL, CANCELLATION_EXPERIMENT } from '../../constants';
+import { DEFAULT_CONTENT_CONTAINER_WIDTH, getEmbeddedModeProperty, } from '@newskit-render/shared-components';
+import { Button, EventTrigger, LinkInline, Stack, TextBlock, toNewsKitIcon, } from 'newskit';
+import { Lock } from '@emotion-icons/material-outlined/Lock';
+var IconLock = toNewsKitIcon(Lock);
+var getPageTrackingEvent = function (pageName, variant, contractPhase, inEmbeddedMode) { return ({
+    originator: 'page view',
+    context: __assign({ page_site_name: 'the times', page_section: 'my account', page_type: 'my account', page_restrictions: 'restricted', page_name: pageName, page_section_2: 'my account:online cancellation', page_section_hierarchy: 'my account|online cancellation', optimizely_feature_data: "cancellation_exp|".concat(variant), contract_state: contractPhase }, getEmbeddedModeProperty(inEmbeddedMode)),
+}); };
+var reasonLabelOverrides = {
+    typographyPreset: {
+        xs: 'editorialHeadline010',
+        md: 'editorialSubheadline020',
+    },
+    stylePreset: { xs: 'textAlignCenter', md: 'textAlignLeft' },
+    marginBlockStart: { xs: 'space030', md: 'space000' },
+    textWrap: 'balance',
+    width: 'clamp(5ch, 95%, 20ch)',
+};
+var reasonSubtitleOverrides = {
+    typographyPreset: 'utilityBody010',
+    paddingInlineEnd: { xs: 'space000', md: 'space020' },
+    stylePreset: { xs: 'textAlignCenter', md: 'textAlignLeft' },
+};
+var offersPageUrl = '[baseURL]/cancel?step=offers';
+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',
+        },
+        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',
+            },
+        },
+        containerOverrides: {
+            rows: 'auto',
+            columns: '1fr 1fr',
+            rowGap: '8px',
+            columnGap: '8px',
+            justifyContent: 'space-between',
+            overrides: {
+                paddingBlock: 'space050',
+                paddingInline: 'space040',
+                minWidth: '100%',
+            },
+        },
+        layoutMainContentOverrides: {
+            fullWidth: true,
+            justifyContent: 'stretch',
+            width: {
+                xs: '100%',
+                md: '100%',
+            },
+            paddingInline: {
+                xs: 'space045',
+                md: 'space060',
+            },
+            paddingBlockStart: {
+                xs: 'space045',
+                md: 'space060',
+            },
+        },
+        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',
+                        },
+                    },
+                    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',
+                        overrides: {
+                            marginBlockStart: 'space050',
+                        },
+                    },
+                    label: 'or',
+                    button: {
+                        text: 'None of the above',
+                        href: offersPageUrl,
+                        id: 'none-of-the-above',
+                    },
+                    buttonOverrides: {
+                        stylePreset: 'baseInteractivePrimary030',
+                        typographyPreset: 'utilitySubheading020',
+                    },
+                    iconOverrides: {
+                        size: 'iconSize020',
+                        stylePreset: 'baseInteractivePrimary030',
+                    },
+                    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,
+                    },
+                },
+                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: offersPageUrl,
+                        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,
+                        },
+                    },
+                    {
+                        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: offersPageUrl,
+                        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,
+                        },
+                    },
+                    {
+                        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: offersPageUrl,
+                        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,
+                        },
+                    },
+                    {
+                        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: offersPageUrl,
+                        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: offersPageUrl,
+                        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: offersPageUrl,
+                        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,
+                        },
+                    },
+                ],
+            },
+            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',
+                        },
+                    },
+                    descriptionOverrides: {
+                        paddingInline: { xs: 'space000', md: 'space050' },
+                        stylePreset: 'inkSubtle',
+                        typographyPreset: {
+                            xs: 'editorialLightHeadline020',
+                            md: 'editorialLightHeadline030',
+                        },
+                    },
+                },
+                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,
+                        },
+                    },
+                    {
+                        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  - 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: {
+                        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',
+                        },
+                    },
+                },
+                buttonText: isVariantTwo
+                    ? 'Go back to My Account'
+                    : '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',
+                        },
+                    },
+                    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',
+                    },
+                },
+                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',
+                    },
+                    descriptionOverrides: {
+                        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: 'offerPreview',
+                        },
+                        {
+                            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',
+                        },
+                    ],
+                },
+                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',
+                    },
+                },
+            },
+            offerConfirmation: {
+                tealiumContext: getPageTrackingEvent('offer confirmation', variant, contractPhase),
+                showBackButton: false,
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
+                },
+                header: {
+                    title: 'Your subscription has been updated and your discount will start from ##DATE##',
+                    description: "You'll shortly receive a confirmation email. View your subscription details in My Account.",
+                    showDivider: true,
+                    marginBlockEnd: { xs: 'space050', md: 'space070' },
+                    titleOverrides: {
+                        marginBlockEnd: 'space060',
+                    },
+                    descriptionOverrides: {
+                        marginBlockEnd: 'space000',
+                    },
+                },
+                subscriptionDetails: {
+                    subscriptionType: {
+                        label: 'Your subscription',
+                    },
+                    offerStartDate: {
+                        label: 'Offer start date',
+                    },
+                    initialPrice: {
+                        label: 'Initial price',
+                    },
+                    regularPrice: {
+                        label: 'Regular price',
+                    },
+                },
+                buttonText: 'Go back to My Account',
+                buttonUrl: '/account',
+            },
+            contactSupport: {
+                tealiumContext: getPageTrackingEvent('contact support', variant, contractPhase),
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
+                },
+                header: {
+                    title: "Let's talk before you go",
+                    description: 'Our team may have an offer or solution for you.',
+                    titleOverrides: {
+                        marginBlockEnd: 'space060',
+                    },
+                    descriptionOverrides: {
+                        marginBlockEnd: 'space060',
+                    },
+                },
+                contactMethods: [
+                    {
+                        label: 'Call us',
+                        ariaLabel: 'Call us',
+                        type: 'contactMethod',
+                        default: (React.createElement(Button, { as: "a", href: "tel:1800949687", overrides: {
+                                typographyPreset: 'utilityHeading030',
+                                stylePreset: 'inkDark010',
+                                paddingBlock: 'space000',
+                                paddingInline: 'space000',
+                                minHeight: 'auto',
+                                minWidth: 'auto',
+                            } }, "1800 949 687")),
+                        valueDescription: 'Lines are open 8-7pm Mon-Fri UK time and 8-4pm weekends & bank holidays.',
+                    },
+                    {
+                        label: 'Chat online',
+                        ariaLabel: 'Chat online',
+                        type: 'contactMethod',
+                        default: (React.createElement(Button, { overrides: {
+                                stylePreset: 'buttonMinimalPrimary',
+                                paddingBlock: 'space000',
+                                paddingInline: 'space000',
+                                minHeight: 'auto',
+                                minWidth: 'auto',
+                                typographyPreset: 'utilityLabel020',
+                            } }, "Live chat")),
+                    },
+                    {
+                        label: 'WhatsApp',
+                        ariaLabel: 'WhatsApp',
+                        type: 'contactMethod',
+                        default: (React.createElement(Button, { as: "a", target: "_blank", href: "https://wa.me/447782386977", overrides: {
+                                typographyPreset: 'utilityLabel020',
+                                stylePreset: 'inkBrand020',
+                                paddingBlock: 'space000',
+                                paddingInline: 'space000',
+                                minHeight: 'auto',
+                                minWidth: 'auto',
+                            } }, "Message us on WhatsApp")),
+                    },
+                ],
+                continueButton: {
+                    eventContext: {
+                        event_navigation_action: 'navigation',
+                        event_navigation_name: 'online cancellation  - continue with cancellation',
+                        event_navigation_browsing_method: EventTrigger.Click,
+                        page_name: 'contact support',
+                    },
+                    text: 'Continue with cancellation',
+                },
+            },
+            reviewCancellation: {
+                tealiumContext: getPageTrackingEvent('review cancellation', variant, contractPhase, inEmbeddedMode),
+                header: {
+                    title: 'Confirm your cancellation',
+                    fullWidthTitle: true,
+                    titleOverrides: {
+                        marginBlockEnd: { xs: 'space050', md: 'space060' },
+                        typographyPreset: {
+                            xs: 'editorialHeadline040',
+                            md: 'editorialHeadline050',
+                        },
+                    },
+                },
+                details: [
+                    {
+                        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',
+                    },
+                    {
+                        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',
+                    },
+                ],
+                cancellationButtons: {
+                    marginBlockStart: { xs: 'space030', md: 'space060' },
+                    primaryButton: {
+                        text: 'Confirm cancellation',
+                    },
+                },
+                genericErrorMessage: {
+                    error: "Sorry, we're having trouble processing your cancellation request right now. Please try again later, or contact support.",
+                },
+                defaultCancellationReason: 'no reason',
+            },
+            offerPreview: {
+                tealiumContext: getPageTrackingEvent('offer preview page', variant, contractPhase), // TO DO: update with AIT spec
+                contentContainerOverrides: {
+                    marginInline: 'auto',
+                    paddingBlockStart: 'space000',
+                    paddingInline: 'space000',
+                    width: __assign(__assign({}, DEFAULT_CONTENT_CONTAINER_WIDTH), { xs: '100%', sm: '100%' }),
+                },
+                header: {
+                    title: 'Activate your limited time offer',
+                    marginBlockEnd: { xs: 'space050', md: 'space080' },
+                    titleOverrides: {
+                        marginBlockEnd: 'space060',
+                    },
+                },
+                subscriptionSummary: {
+                    sectionTitle: 'Your new subscription',
+                    offerTitle: '##OFFER_TITLE##',
+                    discountName: '##OFFER_DESCRIPTION##',
+                    discountPercentage: 75,
+                    discountStartDate: 'Starting ##DISCOUNT_START_DATE##',
+                    // the term is hardcoded because we do not have clear requirements on how term longer then month will work
+                    fullPriceSubscriptionPrice: 'Then ##SUBSCRIPTION_PRICE##/Month',
+                    fullPriceSubscriptionStartDate: 'From ##SUBSCRIPTION_START_DATE##',
+                    paymentBreakdown: {
+                        title: '##PAYMENT_DATE## payment breakdown',
+                        accountCreditRow: {
+                            label: 'Account credit',
+                            value: '##ACCOUNT_CREDIT_AMOUNT##',
+                        },
+                        discountedSubscriptionRow: {
+                            label: 'Discounted subscription cost',
+                            value: '##DISCOUNTED_SUBSCRIPTION_COST##',
+                        },
+                        offerSubscriptionRow: {
+                            label: 'Offer subscription cost',
+                            value: '##OFFER_SUBSCRIPTION_COST##',
+                        },
+                    },
+                    nextPaymentRow: {
+                        label: 'Next payment',
+                        value: '##TOTAL_PAYMENT_AMOUNT##',
+                    },
+                    remainingCredit: {
+                        label: 'Remaining credit',
+                        value: '##REMAINING_CREDIT_AMOUNT##',
+                    },
+                },
+                paymentSummary: {
+                    sectionTitle: 'Payment method',
+                },
+                note: {
+                    title: 'Things to note',
+                    description: 'This temporary discount will apply throughout the promotional period. If you need to, you can cancel [two days before your next billing date/14 days before the end of your voucher booklet] with ease using our online process or by contacting our customer services team.',
+                },
+                continueButton: {
+                    label: (React.createElement(Stack, { flow: "horizontal-center" },
+                        React.createElement(IconLock, { overrides: {
+                                stylePreset: 'inkSubtle',
+                                size: 'iconSize020',
+                            } }),
+                        React.createElement(TextBlock, { stylePreset: "inkSubtle" }, "Secure Payments"))),
+                    eventContext: {
+                        event_navigation_action: 'navigation',
+                        event_navigation_name: 'online cancellation - proceed with offer confirmation',
+                        event_navigation_browsing_method: EventTrigger.Click,
+                        page_name: 'discount preview page',
+                    },
+                    nextStep: 'offerConfirmation',
+                    button: {
+                        text: 'Continue',
+                    },
+                },
+            },
+        },
+        componentSequence: {
+            Digital: [
+                'contactSupport',
+                'reason',
+                'offers',
+                'preCancellation',
+                'confirmCancel',
+                'offerConfirmation',
+            ],
+        },
+        navigationPrimary: navigationPrimary,
+        footer: footer,
+        sideNav: sideNav,
+        sideNavSelected: 'subscription-and-billing',
+        previousSubscription: {
+            disableBanner: true,
+        },
+    };
+};
+//# sourceMappingURL=CancellationStepperContext.js.map