@newskit-render/my-account 0.138.0 → 0.140.2

package/dist/esm/pages/Payment.js

@@ -0,0 +1,94 @@
+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 assign from 'lodash.assign';
+import Layout, { PaymentRenderer } from '../Components/Templates';
+import { ToastProvider } from 'newskit';
+import { BASE_URL } from '../constants';
+import { handleError, handleLoading, handleSuccess, } from '../helpers/toastFunctions';
+import { navigationPrimary } from '../context/baseContext';
+import { ContextName } from '../context/types';
+var pageTitle = 'Edit your payment method';
+export var paymentContext = {
+    baseUrl: BASE_URL,
+    head: {
+        pageTitle: pageTitle,
+    },
+    header: {
+        title: pageTitle,
+        showDivider: true,
+    },
+    cancelButton: {
+        secondaryCell: {
+            xs: 12,
+            sm: 4,
+            lg: 3,
+            smOffset: 5,
+            lgOffset: 9,
+            xsOrder: 1,
+            smOrder: 0,
+        },
+        secondaryButton: {
+            href: '[baseURL]/subscription-and-billing',
+            'aria-label': 'Cancel and go back to subscription and billing page',
+            spaceStack: {
+                xs: 'space080',
+                sm: 'space000',
+            },
+            overrides: {
+                stylePreset: {
+                    xs: 'buttonOutlinedSecondary',
+                    sm: 'buttonMinimalSecondary',
+                },
+                width: '100%',
+            },
+        },
+        secondaryText: 'Cancel',
+    },
+    zuoraCustomErrorMessages: {
+        creditCardHolderName: "Please enter the card holder's name.",
+        creditCardNumber: {
+            one: 'Please enter the card number.',
+            two: 'That doesn’t look like a valid card number. Please try again.',
+            three: 'Your card type is invalid. Please check the number',
+        },
+        cardSecurityCode: {
+            one: "Please enter the card's security code.",
+            four: "The card's security code looks incorrect. Please try again.",
+        },
+        creditCardExpiration: "Please enter the card's expiration date.",
+        creditCardPostalCode: 'Please enter the billing postcode.',
+        creditCardCountry: 'Please enter the Country.',
+    },
+    navigationPrimary: navigationPrimary,
+    genericErrorMessage: {
+        pending: 'Updating your Payment method',
+        error: "Sorry, we're unable to save your Payment method right now. Please try again or come back later.",
+        success: 'Your Payment method has been updated.',
+    },
+    errorMessages: {
+        paymentFailure: {
+            error: 'Unable to create payment',
+        },
+        payment: { error: 'error loading iFrame' },
+    },
+};
+export var Payment = function (_a) {
+    var paymentData = _a.paymentData, customTheme = _a.customTheme, setTheme = _a.setTheme, context = _a.context, validation = _a.validation, env = _a.env, paymentProvider = _a.paymentProvider;
+    var contextName = ContextName.payment;
+    var enhancedContext = __assign(__assign({}, assign({}, paymentContext, context)), { paymentData: paymentData, validation: validation, paymentProvider: paymentProvider, env: env, handleError: handleError, handleLoading: handleLoading, handleSuccess: handleSuccess });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Layout, { context: enhancedContext, customTheme: customTheme, setTheme: setTheme, contextName: contextName },
+            React.createElement(PaymentRenderer, null)),
+        React.createElement(ToastProvider, { position: 'bottom-center' })));
+};
+//# sourceMappingURL=Payment.js.map

package/dist/esm/pages/Payment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Payment.js","sourceRoot":"","sources":["../../../src/pages/Payment.tsx"],"names":[],"mappings":"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"}

package/dist/esm/pages/PersonalDetails.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PersonalDetailsProps } from './types';
+import { AccountLandingPageContextOptions } from '../context';
+export declare const personalDetailsContext: Partial<AccountLandingPageContextOptions>;
+export declare const PersonalDetails: React.FC<PersonalDetailsProps>;

package/dist/esm/pages/PersonalDetails.js

@@ -0,0 +1,163 @@
+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 assign from 'lodash.assign';
+import Layout, { DisplayRenderer } from '../Components/Templates';
+import { DISPLAY_NAME, BASE_URL } from '../constants';
+import { useSuccessToast } from '../hooks';
+import { footer, navigationPrimary, sideNav } from '../context/baseContext';
+import { ContextName } from '../context/types';
+import { pastDuebannerDefaultContext } from '../Components/Elements/PastDueBanner';
+var title = 'Personal Details';
+var clientHeaderImages = {
+    'The-Sun': 'display-personalDetails-header-sun.svg',
+    'Virgin-Radio': 'display-personalDetails-header-vr.svg',
+    'The-Times': 'display-personalDetails-header-times.svg',
+};
+export var personalDetailsContext = {
+    baseUrl: BASE_URL,
+    head: {
+        pageTitle: title,
+    },
+    pastDueBanner: pastDuebannerDefaultContext,
+    header: {
+        title: title,
+        description: 'Your basic account info, including your name, contact details and log-in credentials.',
+        descriptionOverrides: {
+            spaceStack: { xs: 'space050', sm: 'space070' },
+        },
+        image: {
+            src: '/MyAccount/personal-details-header.svg',
+            alt: '',
+        },
+    },
+    sideNavSelected: 'personal-details',
+    sections: [
+        {
+            type: 'list',
+            props: {
+                introductionProps: {
+                    title: 'Profile',
+                },
+                items: [
+                    {
+                        label: 'Name',
+                        default: 'Please enter your name',
+                        href: '[baseURL]/edit/name',
+                        type: 'name',
+                        ariaLabel: 'Edit your Name',
+                    },
+                    {
+                        label: 'Date of birth',
+                        default: 'Please call customer service on xxxx-xxx-xxxx',
+                        type: 'dob',
+                        ariaLabel: 'Edit your Date of birth',
+                    },
+                    {
+                        label: 'Display name',
+                        default: 'Please enter your display name',
+                        valueDescription: 'Your display name is used across our websites or apps when leaving comments on articles',
+                        href: '[baseURL]/edit/displayName',
+                        type: DISPLAY_NAME,
+                        ariaLabel: 'Edit your Display name',
+                    },
+                ],
+            },
+        },
+        {
+            type: 'list',
+            props: {
+                introductionProps: {
+                    title: 'Log in and Security',
+                },
+                items: [
+                    {
+                        label: 'Email',
+                        default: '[email@address]',
+                        href: '[baseURL]/edit/email',
+                        type: 'email',
+                        ariaLabel: 'Edit your Email Address',
+                    },
+                    {
+                        label: 'Password',
+                        default: '******************',
+                        href: '[baseURL]/edit/password',
+                        type: 'password',
+                        ariaLabel: 'Change your Password',
+                    },
+                ],
+            },
+        },
+        {
+            type: 'list',
+            props: {
+                introductionProps: {
+                    title: 'Contact details',
+                },
+                items: [
+                    {
+                        label: 'Mobile phone',
+                        default: 'Please enter your mobile telephone number',
+                        href: '[baseURL]/edit/mobile',
+                        type: 'mobile',
+                        ariaLabel: 'Edit your mobile number',
+                    },
+                    {
+                        label: 'Landline phone',
+                        default: 'Please enter your landline telephone number',
+                        href: '[baseURL]/edit/landline',
+                        type: 'landline',
+                        ariaLabel: 'Edit your landline number',
+                    },
+                    {
+                        label: 'Address',
+                        default: 'Please enter your address',
+                        href: '[baseURL]/edit/address',
+                        type: 'address',
+                        ariaLabel: 'Edit your address',
+                    },
+                ],
+            },
+        },
+    ],
+    footer: footer,
+    sideNav: sideNav,
+    navigationPrimary: navigationPrimary,
+    genericErrorMessage: {
+        pending: 'Updating your ${field}...',
+        error: "Sorry, we're unable to save your ${field} right now. Please try again or come back later.",
+        success: 'Your ${field} has been updated.',
+    },
+    errorMessages: {
+        password: { success: 'Email sent with a password reset link' },
+        email: { success: 'Your email address was successfully updated' },
+    },
+};
+var addSwitchImage = function (customTheme) {
+    return (customTheme === null || customTheme === void 0 ? void 0 : customTheme.name) && clientHeaderImages[customTheme.name]
+        ? {
+            image: {
+                src: "MyAccount/" + clientHeaderImages[customTheme.name],
+            },
+        }
+        : {};
+};
+export var PersonalDetails = function (_a) {
+    var user = _a.user, customTheme = _a.customTheme, setTheme = _a.setTheme, context = _a.context;
+    var contextName = ContextName.personalDetails;
+    var mergedContext = assign({}, personalDetailsContext, context);
+    var enhancedContext = __assign(__assign({}, mergedContext), { userData: user, header: __assign(__assign({}, mergedContext.header), addSwitchImage(customTheme)) });
+    useSuccessToast(enhancedContext);
+    return (React.createElement(Layout, { sidebar: true, footer: true, context: enhancedContext, customTheme: customTheme, setTheme: setTheme, contextName: contextName },
+        React.createElement(DisplayRenderer, { contextName: contextName })));
+};
+//# sourceMappingURL=PersonalDetails.js.map

package/dist/esm/pages/PersonalDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonalDetails.js","sourceRoot":"","sources":["../../../src/pages/PersonalDetails.tsx"],"names":[],"mappings":"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"}

package/dist/esm/pages/SubscriptionAndBilling.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SubscriptionAndBillingProps } from './types';
+import { SubscriptionAndBillingContextOptions } from '../context/types';
+export declare const SubscriptionAndBillingContext: Partial<SubscriptionAndBillingContextOptions>;
+export declare const SubscriptionAndBilling: React.FC<SubscriptionAndBillingProps>;

package/dist/esm/pages/SubscriptionAndBilling.js

@@ -0,0 +1,284 @@
+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 assign from 'lodash.assign';
+import { sharedTheme as accountTheme } from '@newskit-render/shared-components';
+import Layout, { SubscriptionAndBillingRender } from '../Components/Templates';
+import { pastDuebannerDefaultContext } from '../Components/Elements/PastDueBanner';
+import { useSuccessToast } from '../hooks';
+import { footer, navigationPrimary, sideNav } from '../context/baseContext';
+import { ContextName, } from '../context/types';
+var title = 'Subscription & Billing';
+export var SubscriptionAndBillingContext = {
+    head: {
+        pageTitle: title,
+    },
+    pastDueBanner: pastDuebannerDefaultContext,
+    header: {
+        title: title,
+        description: 'All your subscription details, including payment info and transactions.',
+        descriptionOverrides: {
+            spaceStack: { xs: 'space050', sm: 'space070' },
+        },
+        image: {
+            src: '/MyAccount/display-base-header.svg',
+            alt: '',
+        },
+    },
+    sideNavSelected: 'subscription-and-billing',
+    sections: [
+        {
+            type: 'list',
+            props: {
+                introductionProps: {
+                    title: 'Subscription details',
+                },
+                items: [
+                    {
+                        label: 'Type',
+                        default: '[User facing name of pack]',
+                        type: 'subscription',
+                        ariaLabel: 'Type',
+                    },
+                    {
+                        label: 'Price',
+                        default: '[Price, Billing cycle]',
+                        type: 'price',
+                        ariaLabel: 'Edit your price',
+                    },
+                    {
+                        label: 'Customer number',
+                        default: '[#### #### #### ####]',
+                        valueDescription: 'Your customer number is your unique identifier and may be asked when contacting us',
+                        type: 'customerNumber',
+                        ariaLabel: 'Customer number',
+                    },
+                    {
+                        label: 'Start date',
+                        default: '[DD/MM/YYY]',
+                        type: 'subDate',
+                        ariaLabel: 'Customer number',
+                    },
+                    {
+                        label: 'Benefits',
+                        default: [
+                            '[Short description of subscription type, including product access]',
+                            '',
+                            '•[Sub entitlement description]',
+                            '•[Sub entitlement description]',
+                            '•[Sub entitlement description]',
+                            '•[Sub entitlement description]',
+                            '•[Sub entitlement description]',
+                        ],
+                        type: 'benefits',
+                        ariaLabel: 'Customer number',
+                    },
+                ],
+                link: {
+                    props: {
+                        children: 'Cancel subscription',
+                        href: '[baseURL]/cancellation',
+                    },
+                },
+                infoPanel: {
+                    children: 'If you change your mind or cancelled by mistake, speak to one of our advisors on 0800 555 1234.',
+                    spaceStack: 'space080',
+                },
+            },
+        },
+        {
+            type: 'list',
+            props: {
+                introductionProps: {
+                    title: 'Billing details',
+                },
+                items: [
+                    {
+                        label: 'Payment method',
+                        default: '[Price, Billing cycle]',
+                        href: '[baseURL]/payment',
+                        type: 'payment',
+                        valueDescription: "expiry date",
+                        ariaLabel: 'Edit your payment',
+                    },
+                ],
+            },
+        },
+    ],
+    footer: footer,
+    sideNav: sideNav,
+    navigationPrimary: navigationPrimary,
+    genericErrorMessage: {
+        pending: 'Updating your ${field}...',
+        error: "Sorry, we're unable to save your ${field} right now. Please try again or come back later.",
+        success: 'Your ${field} has been updated.',
+    },
+    noSubscription: {
+        header: {
+            title: 'You don’t have a subscription',
+            titleOverrides: {
+                typographyPreset: { xs: 'utilityHeading040', sm: 'utilityHeading050' },
+                stylePreset: 'inkContrast',
+                spaceStack: {
+                    xs: 'space040',
+                    sm: 'space050',
+                },
+                as: 'h1',
+            },
+            description: 'Start a subscription and get access to all benefits.',
+            descriptionOverrides: {
+                typographyPreset: { xs: 'utilityBody020', sm: 'utilityBody030' },
+                stylePreset: 'inkBase',
+                spaceStack: {
+                    xs: 'space050',
+                    sm: 'space060',
+                },
+            },
+            image: {
+                src: '/MyAccount/no-subscription.svg',
+                spaceStack: { xs: 'space050', sm: 'space060', md: 'space080' },
+            },
+            introductionCell: {
+                xsOrder: 1,
+            },
+            imageCell: {
+                xsOrder: 0,
+            },
+            showDivider: false,
+        },
+        buttonGroupProps: {
+            keepFixed: false,
+            stylePreset: 'buttonGroupSm',
+            spaceStack: {
+                xs: 'space000',
+                sm: 'space100',
+            },
+            primaryText: 'View subscription options',
+            primaryButton: {
+                ariaLabel: 'View subscription options',
+                href: '/title-storefrount',
+                overrides: {
+                    stylePreset: 'buttonSolidPrimary',
+                    width: '100%',
+                },
+                spaceStack: {
+                    xs: 'space080',
+                    sm: 'space000',
+                },
+            },
+            primaryCell: {
+                xs: 12,
+                sm: 8,
+                smOffset: 4,
+                md: 7,
+                mdOffset: 5,
+                lg: 5,
+                lgOffset: 7,
+            },
+        },
+    },
+    previousSubscription: {
+        header: {
+            title: 'You’ve previously had a subscription that has now expired',
+            titleOverrides: {
+                typographyPreset: { xs: 'utilityHeading040', sm: 'utilityHeading050' },
+                stylePreset: 'inkContrast',
+                spaceStack: {
+                    xs: 'space040',
+                    sm: 'space050',
+                },
+                as: 'h1',
+            },
+            description: 'On ${serviceCancellationDate} your ${subscriptionName} subscription expired. You can can re-subscribe by confirming a few details or view other packages that are available.',
+            descriptionOverrides: {
+                typographyPreset: { xs: 'utilityBody020', sm: 'utilityBody030' },
+                stylePreset: 'inkBase',
+                spaceStack: {
+                    xs: 'space050',
+                    sm: 'space060',
+                },
+            },
+            image: {
+                src: '/MyAccount/previous-subscription.svg',
+                spaceStack: { xs: 'space050', sm: 'space060', md: 'space080' },
+            },
+            introductionCell: {
+                xsOrder: 1,
+            },
+            imageCell: {
+                xsOrder: 0,
+            },
+            showDivider: false,
+        },
+        buttonGroupProps: {
+            keepFixed: false,
+            breakPoint: 'md',
+            stylePreset: 'buttonGroupSm',
+            spaceStack: {
+                xs: 'space000',
+                md: 'space100',
+            },
+            secondaryText: 'View subscription options',
+            secondaryButton: {
+                ariaLabel: 'View subscription options',
+                href: '/title-subscription-options',
+                overrides: {
+                    stylePreset: 'buttonMinimalSecondary',
+                    width: '100%',
+                },
+                spaceStack: {
+                    xs: 'space080',
+                    md: 'space000',
+                },
+            },
+            secondaryCell: {
+                xs: 12,
+                md: 7,
+                lg: 5,
+                mdOffset: 1,
+                lgOffset: 4,
+                xsOrder: 1,
+                mdOrder: 0,
+            },
+            primaryText: 'Re-subscribe',
+            primaryButton: {
+                ariaLabel: 'Re-subscribe',
+                href: '/title-re-subscribe',
+                overrides: {
+                    stylePreset: 'buttonSolidPrimary',
+                    width: '100%',
+                },
+                spaceStack: {
+                    xs: 'space040',
+                    md: 'space000',
+                },
+            },
+            primaryCell: { xs: 12, md: 4, lg: 3, xsOrder: 0, mdOrder: 1 },
+            margin: {
+                xsMargin: 'space000',
+            },
+        },
+    },
+};
+export var SubscriptionAndBilling = function (_a) {
+    var customTheme = _a.customTheme, setTheme = _a.setTheme, context = _a.context, user = _a.user;
+    var contextName = ContextName.subscriptionAndBilling;
+    var enhancedContext = __assign(__assign({}, assign({}, SubscriptionAndBillingContext, context)), { userData: user });
+    useSuccessToast(enhancedContext);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Layout, { sidebar: true, footer: true, context: enhancedContext, customTheme: customTheme || accountTheme, setTheme: setTheme, toastProviderProps: {
+                verticalOffset: 'space040',
+                horizontalOffset: { xs: 'space000', lg: 'space040' },
+            }, contextName: contextName },
+            React.createElement(SubscriptionAndBillingRender, { contextName: contextName }))));
+};
+//# sourceMappingURL=SubscriptionAndBilling.js.map

package/dist/esm/pages/SubscriptionAndBilling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionAndBilling.js","sourceRoot":"","sources":["../../../src/pages/SubscriptionAndBilling.tsx"],"names":[],"mappings":"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"}