@newskit-render/my-account 7.144.0 → 7.145.1-08530b643.4

package/dist/esm/Components/Elements/SunArticleGrid/index.js

@@ -0,0 +1,2 @@
+export { SunArticleGrid } from './SunArticleGrid';
+//# sourceMappingURL=index.js.map

package/dist/esm/Components/Elements/SunArticleGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Components/Elements/SunArticleGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAA"}

package/dist/esm/Components/Elements/SunOfferCard/SunOfferCard.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface SunOffer {
+    id: string;
+    headline: string;
+    url: string;
+    imageUrl?: string;
+    eventContext?: Record<string, unknown>;
+}
+export interface SunOfferCardProps {
+    offer: SunOffer;
+    onClick?: (url: string, headline: string) => void;
+    overrides?: {
+        container?: Record<string, unknown>;
+        imageContainer?: Record<string, unknown>;
+        image?: Record<string, unknown>;
+        placeholder?: Record<string, unknown>;
+        headline?: Record<string, unknown>;
+    };
+}
+export declare const SunOfferCard: React.FC<SunOfferCardProps>;
+export default SunOfferCard;

package/dist/esm/Components/Elements/SunOfferCard/SunOfferCard.js

@@ -0,0 +1,31 @@
+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 { Block, TextBlock } from 'newskit';
+export var SunOfferCard = function (_a) {
+    var offer = _a.offer, onClick = _a.onClick, overrides = _a.overrides;
+    var handleClick = function () {
+        if (onClick) {
+            onClick(offer.url, offer.headline);
+        }
+        else {
+            window.open(offer.url, '_blank', 'noopener,noreferrer');
+        }
+    };
+    return (React.createElement(Block, __assign({ "data-testid": "sun-offer-card-".concat(offer.id), onClick: handleClick, stylePreset: "cardContainer" }, overrides === null || overrides === void 0 ? void 0 : overrides.container),
+        React.createElement(Block, __assign({ stylePreset: "imageContainer" }, overrides === null || overrides === void 0 ? void 0 : overrides.imageContainer), offer.imageUrl ? (React.createElement("img", __assign({ src: offer.imageUrl, alt: offer.headline, style: { width: '100%', display: 'block' } }, overrides === null || overrides === void 0 ? void 0 : overrides.image))) : (React.createElement(Block, __assign({ stylePreset: "placeholderContainer" }, overrides === null || overrides === void 0 ? void 0 : overrides.placeholder),
+            React.createElement(TextBlock, { typographyPreset: "utilityBody020", stylePreset: "inkSubtle" }, "No image available")))),
+        React.createElement(Block, { paddingBlock: "space030", paddingInline: "space030" },
+            React.createElement(TextBlock, __assign({ typographyPreset: "utilityBody020", stylePreset: "inkContrast", as: "h3" }, overrides === null || overrides === void 0 ? void 0 : overrides.headline), offer.headline))));
+};
+export default SunOfferCard;
+//# sourceMappingURL=SunOfferCard.js.map

package/dist/esm/Components/Elements/SunOfferCard/SunOfferCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SunOfferCard.js","sourceRoot":"","sources":["../../../../../src/Components/Elements/SunOfferCard/SunOfferCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAsB1C,MAAM,CAAC,IAAM,YAAY,GAAgC,UAAC,EAIzD;QAHC,KAAK,WAAA,EACL,OAAO,aAAA,EACP,SAAS,eAAA;IAET,IAAM,WAAW,GAAG;QAClB,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAA;QACzD,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,4BACS,yBAAkB,KAAK,CAAC,EAAE,CAAE,EACzC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAC,eAAe,IACvB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS;QAExB,oBAAC,KAAK,aAAC,WAAW,EAAC,gBAAgB,IAAK,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,GAC9D,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,sCACE,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,IACtC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EACpB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,aAAC,WAAW,EAAC,sBAAsB,IAAK,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW;YAClE,oBAAC,SAAS,IACR,gBAAgB,EAAC,gBAAgB,EACjC,WAAW,EAAC,WAAW,yBAGb,CACN,CACT,CACK;QACR,oBAAC,KAAK,IAAC,YAAY,EAAC,UAAU,EAAC,aAAa,EAAC,UAAU;YACrD,oBAAC,SAAS,aACR,gBAAgB,EAAC,gBAAgB,EACjC,WAAW,EAAC,aAAa,EACzB,EAAE,EAAC,IAAI,IACH,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,GAEtB,KAAK,CAAC,QAAQ,CACL,CACN,CACF,CACT,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/Components/Elements/SunOfferCard/index.d.ts

@@ -0,0 +1 @@
+export { SunOfferCard, type SunOfferCardProps, type SunOffer, } from './SunOfferCard';

package/dist/esm/Components/Elements/SunOfferCard/index.js

@@ -0,0 +1,2 @@
+export { SunOfferCard, } from './SunOfferCard';
+//# sourceMappingURL=index.js.map

package/dist/esm/Components/Elements/SunOfferCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Components/Elements/SunOfferCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,GAGb,MAAM,gBAAgB,CAAA"}

package/dist/esm/Components/Elements/SunOfferGrid/SunOfferGrid.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SunOffer } from '../SunOfferCard';
+export interface SunOfferGridProps {
+    offers: SunOffer[];
+    onOfferClick?: (url: string, headline: string) => void;
+    overrides?: {
+        grid?: Record<string, unknown>;
+        card?: Record<string, unknown>;
+    };
+}
+export declare const SunOfferGrid: React.FC<SunOfferGridProps>;
+export default SunOfferGrid;

package/dist/esm/Components/Elements/SunOfferGrid/SunOfferGrid.js

@@ -0,0 +1,20 @@
+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 { GridLayout } from 'newskit';
+import { SunOfferCard } from '../SunOfferCard';
+export var SunOfferGrid = function (_a) {
+    var offers = _a.offers, onOfferClick = _a.onOfferClick, overrides = _a.overrides;
+    return (offers === null || offers === void 0 ? void 0 : offers.length) ? (React.createElement(GridLayout, __assign({ columns: { xs: '1fr', sm: '1fr 1fr' }, rowGap: "space040", columnGap: "space040", "data-testid": "sun-offer-grid" }, overrides === null || overrides === void 0 ? void 0 : overrides.grid), offers.map(function (offer) { return (React.createElement(SunOfferCard, { key: offer.id, offer: offer, onClick: onOfferClick, overrides: overrides === null || overrides === void 0 ? void 0 : overrides.card })); }))) : null;
+};
+export default SunOfferGrid;
+//# sourceMappingURL=SunOfferGrid.js.map

package/dist/esm/Components/Elements/SunOfferGrid/SunOfferGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SunOfferGrid.js","sourceRoot":"","sources":["../../../../../src/Components/Elements/SunOfferGrid/SunOfferGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,YAAY,EAAY,MAAM,iBAAiB,CAAA;AAWxD,MAAM,CAAC,IAAM,YAAY,GAAgC,UAAC,EAIzD;QAHC,MAAM,YAAA,EACN,YAAY,kBAAA,EACZ,SAAS,eAAA;IAET,OAAA,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAC,CAAC,CAAC,CACf,oBAAC,UAAU,aACT,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,EACrC,MAAM,EAAC,UAAU,EACjB,SAAS,EAAC,UAAU,iBACR,gBAAgB,IACxB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,GAElB,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CACrB,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,GAC1B,CACH,EAPsB,CAOtB,CAAC,CACS,CACd,CAAC,CAAC,CAAC,IAAI;AAjBR,CAiBQ,CAAA;AAEV,eAAe,YAAY,CAAA"}

package/dist/esm/Components/Elements/SunOfferGrid/index.d.ts

@@ -0,0 +1 @@
+export { SunOfferGrid, type SunOfferGridProps } from './SunOfferGrid';

package/dist/esm/Components/Elements/SunOfferGrid/index.js

@@ -0,0 +1,2 @@
+export { SunOfferGrid } from './SunOfferGrid';
+//# sourceMappingURL=index.js.map

package/dist/esm/Components/Elements/SunOfferGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Components/Elements/SunOfferGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAA"}

package/dist/esm/Components/Sections/ConfirmCancellation/ConfirmCancellation.d.ts

@@ -1,19 +1,2 @@
-import { EventContext, IntroductionProps } from '@newskit-render/shared-components';
-import { ButtonProps } from 'newskit';
-export interface ConfirmCancellationStepProps {
-    image: {
-        src: string;
-        alt?: string;
-        loading?: 'eager' | 'lazy';
-        width?: string | number;
-        height?: string | number;
-    };
-    introduction: IntroductionProps;
-    buttonText: string;
-    buttonUrl: string;
-    buttonOverrides?: ButtonProps;
-    buttonEventContext?: EventContext;
-    baseUrl?: string;
-    serviceCancellationDate?: string | null;
-}
+import { ConfirmCancellationStepProps } from './index';
 export declare const ConfirmCancellation: ({ image, buttonOverrides, buttonText, introduction, buttonEventContext, buttonUrl, baseUrl, serviceCancellationDate, }: ConfirmCancellationStepProps) => JSX.Element;

package/dist/esm/Components/Sections/ConfirmCancellation/ConfirmCancellation.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { Image, Introduction, } from '@newskit-render/shared-components';
+import { Image, Introduction } from '@newskit-render/shared-components';
 import { replaceBaseURL } from '../../../helpers';
 import { Button, Stack } from 'newskit';
 import React from 'react';

package/dist/esm/Components/Sections/ConfirmCancellation/ConfirmCancellation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmCancellation.js","sourceRoot":"","sources":["../../../../../src/Components/Sections/ConfirmCancellation/ConfirmCancellation.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAEL,KAAK,EACL,YAAY,GAEb,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAe,KAAK,EAAE,MAAM,SAAS,CAAA;AACpD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAmBxD,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EASL;QAR7B,KAAK,WAAA,EACL,eAAe,qBAAA,EACf,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,kBAAkB,wBAAA,EAClB,SAAS,eAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,uBAAuB,6BAAA;IAEvB,IAAM,mBAAmB,GACvB,OAAO,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,CAAA,KAAK,QAAQ,IAAI,uBAAuB;QACtE,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,WAAW,EAAE,uBAAuB,CAAC;QAChE,CAAC,CAAC,EAAE,CAAA;IAER,IAAM,iBAAiB,yBAClB,YAAY,KACf,WAAW,EAAE,mBAAmB,GACjC,CAAA;IACD,OAAO,CACL,oBAAC,KAAK,IAAC,IAAI,EAAC,iBAAiB;QAC3B,oBAAC,KAAK,aAAC,GAAG,EAAC,EAAE,IAAK,KAAK,EAAI;QAC3B,oBAAC,YAAY,eACP,iBAAiB,IACrB,oBAAoB,sBAClB,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE;oBAChB,EAAE,EAAE,uBAAuB;oBAC3B,EAAE,EAAE,uBAAuB;iBAC5B,IACE,YAAY,CAAC,oBAAoB,KACpC,YAAY,EAAE,UAAU,KAE1B,cAAc,aACZ,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,aAAa,EAC1B,gBAAgB,EAAE;oBAChB,EAAE,EAAE,2BAA2B;oBAC/B,EAAE,EAAE,2BAA2B;iBAChC,EACD,iBAAiB,EAAE,UAAU,IAE1B,YAAY,CAAC,cAAc,KAEhC;QACF,oBAAC,MAAM,aACL,SAAS,EAAE;gBACT,gBAAgB,EAAE,UAAU;aAC7B,EACD,YAAY,EAAE,kBAAkB,IAC5B,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/D,eAAe,GAElB,UAAU,CACJ,CACH,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ConfirmCancellation.js","sourceRoot":"","sources":["../../../../../src/Components/Sections/ConfirmCancellation/ConfirmCancellation.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAGxD,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EASL;QAR7B,KAAK,WAAA,EACL,eAAe,qBAAA,EACf,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,kBAAkB,wBAAA,EAClB,SAAS,eAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,uBAAuB,6BAAA;IAEvB,IAAM,mBAAmB,GACvB,OAAO,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,CAAA,KAAK,QAAQ,IAAI,uBAAuB;QACtE,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,WAAW,EAAE,uBAAuB,CAAC;QAChE,CAAC,CAAC,EAAE,CAAA;IAER,IAAM,iBAAiB,yBAClB,YAAY,KACf,WAAW,EAAE,mBAAmB,GACjC,CAAA;IACD,OAAO,CACL,oBAAC,KAAK,IAAC,IAAI,EAAC,iBAAiB;QAC3B,oBAAC,KAAK,aAAC,GAAG,EAAC,EAAE,IAAK,KAAK,EAAI;QAC3B,oBAAC,YAAY,eACP,iBAAiB,IACrB,oBAAoB,sBAClB,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE;oBAChB,EAAE,EAAE,uBAAuB;oBAC3B,EAAE,EAAE,uBAAuB;iBAC5B,IACE,YAAY,CAAC,oBAAoB,KACpC,YAAY,EAAE,UAAU,KAE1B,cAAc,aACZ,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,aAAa,EAC1B,gBAAgB,EAAE;oBAChB,EAAE,EAAE,2BAA2B;oBAC/B,EAAE,EAAE,2BAA2B;iBAChC,EACD,iBAAiB,EAAE,UAAU,IAE1B,YAAY,CAAC,cAAc,KAEhC;QACF,oBAAC,MAAM,aACL,SAAS,EAAE;gBACT,gBAAgB,EAAE,UAAU;aAC7B,EACD,YAAY,EAAE,kBAAkB,IAC5B,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/D,eAAe,GAElB,UAAU,CACJ,CACH,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/Components/Sections/ConfirmCancellation/ConfirmCancellationExp2.d.ts

@@ -0,0 +1,2 @@
+import { ConfirmCancellationStepProps } from './index';
+export declare const ConfirmCancellationExp2: ({ image, buttonOverrides, buttonText, introduction, buttonEventContext, buttonUrl, baseUrl, serviceCancellationDate, subType, subscriptionDetails, }: ConfirmCancellationStepProps) => JSX.Element;

package/dist/esm/Components/Sections/ConfirmCancellation/ConfirmCancellationExp2.js

@@ -0,0 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { Image, Introduction } from '@newskit-render/shared-components';
+import { replaceBaseURL } from '../../../helpers';
+import { Button, GridLayoutItem, Stack, StackChild, styled, getColorCssFromTheme, TextBlock, GridLayout, Divider, getSizingCssFromTheme, } from 'newskit';
+import React from 'react';
+import { formatDate } from '../../../helpers/dateUtils';
+var StyledGridLayout = styled(GridLayout)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid;\n  ", "\n"], ["\n  border: 1px solid;\n  ", "\n"])), getColorCssFromTheme('borderColor', 'neutral040'));
+var StyledTextBlock = styled(TextBlock)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getSizingCssFromTheme('line-height', 'sizing050'));
+export var ConfirmCancellationExp2 = function (_a) {
+    var image = _a.image, buttonOverrides = _a.buttonOverrides, buttonText = _a.buttonText, introduction = _a.introduction, buttonEventContext = _a.buttonEventContext, buttonUrl = _a.buttonUrl, _b = _a.baseUrl, baseUrl = _b === void 0 ? '' : _b, serviceCancellationDate = _a.serviceCancellationDate, subType = _a.subType, subscriptionDetails = _a.subscriptionDetails;
+    var cancellationDate = serviceCancellationDate
+        ? formatDate(serviceCancellationDate)
+        : '';
+    return (React.createElement(Stack, { flow: "vertical-center" },
+        React.createElement(Stack, null,
+            React.createElement(Introduction, __assign({}, introduction, { descriptionOverrides: __assign(__assign({ stylePreset: 'inkSubtle', typographyPreset: {
+                        xs: 'editorialParagraph010',
+                        md: 'editorialParagraph020',
+                    } }, introduction === null || introduction === void 0 ? void 0 : introduction.descriptionOverrides), { paddingBlock: 'space020', marginBlockEnd: 'space070' }), titleOverrides: __assign({ typographyPreset: {
+                        xs: 'editorialHeadline040',
+                        md: 'editorialHeadline050',
+                    }, paddingBlockStart: 'space090', marginBlockEnd: 'space060', textAlign: 'start' }, introduction === null || introduction === void 0 ? void 0 : introduction.titleOverrides) }))),
+        React.createElement(StackChild, { marginBlockEnd: 'space080' },
+            React.createElement(Image, __assign({ alt: "" }, image))),
+        React.createElement(StyledGridLayout, { columns: "4fr 5fr", columnGap: '16px', overrides: __assign({ width: '100%', marginBlockEnd: 'space100' }, subscriptionDetails === null || subscriptionDetails === void 0 ? void 0 : subscriptionDetails.containerOverrides) },
+            React.createElement(StyledTextBlock, __assign({}, subscriptionDetails === null || subscriptionDetails === void 0 ? void 0 : subscriptionDetails.subscriptionType.overrides), subscriptionDetails === null || subscriptionDetails === void 0 ? void 0 : subscriptionDetails.subscriptionType.label),
+            React.createElement(TextBlock, { paddingBlock: 'space050', paddingInlineEnd: 'space040' }, subType),
+            React.createElement(GridLayoutItem, { column: '1 / 3' },
+                React.createElement(Divider, null)),
+            React.createElement(StyledTextBlock, __assign({}, subscriptionDetails === null || subscriptionDetails === void 0 ? void 0 : subscriptionDetails.endDate.overrides), subscriptionDetails === null || subscriptionDetails === void 0 ? void 0 : subscriptionDetails.endDate.label),
+            React.createElement(TextBlock, { paddingBlock: 'space050', paddingInlineEnd: 'space040' }, cancellationDate)),
+        React.createElement(StackChild, { alignSelf: "flex-end" },
+            React.createElement(Button, __assign({ overrides: {
+                    marginBlockStart: 'space020',
+                }, eventContext: buttonEventContext }, (buttonUrl ? { href: replaceBaseURL(baseUrl, buttonUrl) } : {}), buttonOverrides), buttonText))));
+};
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=ConfirmCancellationExp2.js.map

package/dist/esm/Components/Sections/ConfirmCancellation/ConfirmCancellationExp2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmCancellationExp2.js","sourceRoot":"","sources":["../../../../../src/Components/Sections/ConfirmCancellation/ConfirmCancellationExp2.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EACL,MAAM,EACN,cAAc,EACd,KAAK,EACL,UAAU,EACV,MAAM,EACN,oBAAoB,EACpB,SAAS,EACT,UAAU,EACV,OAAO,EACP,qBAAqB,GACtB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAGvD,IAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,qGAAA,4BAEvC,EAAiD,IACpD,KADG,oBAAoB,CAAC,aAAa,EAAE,YAAY,CAAC,CACpD,CAAA;AAED,IAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,+EAAA,MACrC,EAAiD,IACpD,KADG,qBAAqB,CAAC,aAAa,EAAE,WAAW,CAAC,CACpD,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAWT;QAV7B,KAAK,WAAA,EACL,eAAe,qBAAA,EACf,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,kBAAkB,wBAAA,EAClB,SAAS,eAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,uBAAuB,6BAAA,EACvB,OAAO,aAAA,EACP,mBAAmB,yBAAA;IAEnB,IAAM,gBAAgB,GAAG,uBAAuB;QAC9C,CAAC,CAAC,UAAU,CAAC,uBAAuB,CAAC;QACrC,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO,CACL,oBAAC,KAAK,IAAC,IAAI,EAAC,iBAAiB;QAC3B,oBAAC,KAAK;YACJ,oBAAC,YAAY,eACP,YAAY,IAChB,oBAAoB,sBAClB,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE;wBAChB,EAAE,EAAE,uBAAuB;wBAC3B,EAAE,EAAE,uBAAuB;qBAC5B,IACE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,oBAAoB,KACrC,YAAY,EAAE,UAAU,EACxB,cAAc,EAAE,UAAU,KAE5B,cAAc,aACZ,gBAAgB,EAAE;wBAChB,EAAE,EAAE,sBAAsB;wBAC1B,EAAE,EAAE,sBAAsB;qBAC3B,EACD,iBAAiB,EAAE,UAAU,EAC7B,cAAc,EAAE,UAAU,EAC1B,SAAS,EAAE,OAAO,IACf,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,cAAc,KAEjC,CACI;QACR,oBAAC,UAAU,IAAC,cAAc,EAAE,UAAU;YACpC,oBAAC,KAAK,aAAC,GAAG,EAAC,EAAE,IAAK,KAAK,EAAI,CAChB;QACb,oBAAC,gBAAgB,IACf,OAAO,EAAC,SAAS,EACjB,SAAS,EAAE,MAAM,EACjB,SAAS,aACP,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,UAAU,IACvB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,kBAAkB;YAG5C,oBAAC,eAAe,eAAK,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,gBAAgB,CAAC,SAAS,GACjE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,gBAAgB,CAAC,KAAK,CAC5B;YAClB,oBAAC,SAAS,IAAC,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,IAC9D,OAAO,CACE;YAEZ,oBAAC,cAAc,IAAC,MAAM,EAAE,OAAO;gBAC7B,oBAAC,OAAO,OAAG,CACI;YAEjB,oBAAC,eAAe,eAAK,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,SAAS,GACxD,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,KAAK,CACnB;YAClB,oBAAC,SAAS,IAAC,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,IAC9D,gBAAgB,CACP,CACK;QAEnB,oBAAC,UAAU,IAAC,SAAS,EAAC,UAAU;YAC9B,oBAAC,MAAM,aACL,SAAS,EAAE;oBACT,gBAAgB,EAAE,UAAU;iBAC7B,EACD,YAAY,EAAE,kBAAkB,IAC5B,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/D,eAAe,GAElB,UAAU,CACJ,CACE,CACP,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/Components/Sections/ConfirmCancellation/index.d.ts

@@ -0,0 +1,89 @@
+import { DetailedFlags } from '@newskit-render/feature-flags';
+import { EventContext, IntroductionProps } from '@newskit-render/shared-components';
+import { GridLayoutProps } from 'Components/SharedTypes/GridLayoutProps';
+import { ButtonProps, TextBlockProps } from 'newskit';
+import React from 'react';
+export interface ConfirmCancellationStepProps {
+    image: {
+        src: string;
+        alt?: string;
+        loading?: 'eager' | 'lazy';
+        width?: string | number;
+        height?: string | number;
+    };
+    introduction: IntroductionProps;
+    buttonText: string;
+    buttonUrl: string;
+    buttonOverrides?: ButtonProps;
+    buttonEventContext?: EventContext;
+    baseUrl?: string;
+    serviceCancellationDate?: string | null;
+    subType?: string;
+    featureFlags?: DetailedFlags;
+    subscriptionDetails?: {
+        containerOverrides?: GridLayoutProps['overrides'];
+        subscriptionType: {
+            label: string;
+            overrides?: TextBlockProps;
+        };
+        endDate: {
+            label: string;
+            overrides?: TextBlockProps;
+        };
+    };
+}
+export declare const ConfirmCancellationRender: ({ featureFlags, ...rest }: ConfirmCancellationStepProps) => React.CElement<{
+    image: {
+        src: string;
+        alt?: string;
+        loading?: "eager" | "lazy";
+        width?: string | number;
+        height?: string | number;
+    };
+    introduction: IntroductionProps;
+    buttonText: string;
+    buttonUrl: string;
+    buttonOverrides?: ButtonProps;
+    buttonEventContext?: EventContext;
+    baseUrl?: string;
+    serviceCancellationDate?: string | null;
+    subType?: string;
+    subscriptionDetails?: {
+        containerOverrides?: GridLayoutProps["overrides"];
+        subscriptionType: {
+            label: string;
+            overrides?: TextBlockProps;
+        };
+        endDate: {
+            label: string;
+            overrides?: TextBlockProps;
+        };
+    };
+}, React.Component<{
+    image: {
+        src: string;
+        alt?: string;
+        loading?: "eager" | "lazy";
+        width?: string | number;
+        height?: string | number;
+    };
+    introduction: IntroductionProps;
+    buttonText: string;
+    buttonUrl: string;
+    buttonOverrides?: ButtonProps;
+    buttonEventContext?: EventContext;
+    baseUrl?: string;
+    serviceCancellationDate?: string | null;
+    subType?: string;
+    subscriptionDetails?: {
+        containerOverrides?: GridLayoutProps["overrides"];
+        subscriptionType: {
+            label: string;
+            overrides?: TextBlockProps;
+        };
+        endDate: {
+            label: string;
+            overrides?: TextBlockProps;
+        };
+    };
+}, any, any>>;

package/dist/esm/Components/Sections/ConfirmCancellation/index.js

@@ -0,0 +1,40 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var _a;
+import React from 'react';
+import { CANCELLATION_EXPERIMENT } from '../../../constants';
+import { ConfirmCancellation } from './ConfirmCancellation';
+import { ConfirmCancellationExp2 } from './ConfirmCancellationExp2';
+var componentMap = (_a = {},
+    _a[CANCELLATION_EXPERIMENT.VARIANT_1_ON] = ConfirmCancellation,
+    _a[CANCELLATION_EXPERIMENT.VARIANT_2_A] = ConfirmCancellationExp2,
+    _a.default = ConfirmCancellation,
+    _a);
+export var ConfirmCancellationRender = function (_a) {
+    var _b;
+    var featureFlags = _a.featureFlags, rest = __rest(_a, ["featureFlags"]);
+    var experimentFlag = ((_b = featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.enable_cancel_subscription) === null || _b === void 0 ? void 0 : _b.variationKey) || '';
+    var componentToRender = componentMap[experimentFlag] || componentMap.default;
+    return React.createElement(componentToRender, __assign({}, rest));
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/Components/Sections/ConfirmCancellation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Components/Sections/ConfirmCancellation/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AAgCnE,IAAM,YAAY;IAChB,GAAC,uBAAuB,CAAC,YAAY,IAAG,mBAAmB;IAC3D,GAAC,uBAAuB,CAAC,WAAW,IAAG,uBAAuB;IAC9D,UAAO,GAAE,mBAAmB;OAC7B,CAAA;AAED,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,EAGX;;IAF7B,IAAA,YAAY,kBAAA,EACT,IAAI,cAFiC,gBAGzC,CADQ;IAEP,IAAM,cAAc,GAClB,CAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,0BAA0B,0CAAE,YAAY,KAAI,EAAE,CAAA;IAC9D,IAAM,iBAAiB,GAAG,YAAY,CAAC,cAAc,CAAC,IAAI,YAAY,CAAC,OAAO,CAAA;IAE9E,OAAO,KAAK,CAAC,aAAa,CAAC,iBAAiB,eAAO,IAAI,EAAG,CAAA;AAC5D,CAAC,CAAA"}

package/dist/esm/Components/Sections/UserHub/BaseSection.d.ts

@@ -1,4 +1,7 @@
 import { UserHubSection } from '../../../context';
+export declare const StyledStructuredList: import("@emotion/styled").StyledComponent<import("newskit").StructuredListProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
 export interface BaseSectionProps extends UserHubSection {
     baseUrl: string;
 }

package/dist/esm/Components/Sections/UserHub/BaseSection.js

@@ -31,7 +31,7 @@ import React from 'react';
 import { useAccountContext } from '../../../context';
 import { ContextName } from '../../../context/types';
 import { SectionListItem } from '../../Elements/SectionListItem';
-var StyledStructuredList = styled(StructuredList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid;\n  ", "\n"], ["\n  border: 1px solid;\n  ", "\n"])), getColorCssFromTheme('borderColor', 'interface030'));
+export var StyledStructuredList = styled(StructuredList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid;\n  ", "\n"], ["\n  border: 1px solid;\n  ", "\n"])), getColorCssFromTheme('borderColor', 'interface030'));
 export var BaseSection = function (_a) {
     var dataTestId = _a.dataTestId, header = _a.header, items = _a.items, containerOverrides = _a.containerOverrides, baseUrl = _a.baseUrl;
     var contextName = ContextName.userHubPage;

package/dist/esm/Components/Sections/UserHub/BaseSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSection.js","sourceRoot":"","sources":["../../../../../src/Components/Sections/UserHub/BaseSection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAyB,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,IAAM,oBAAoB,GAAG,MAAM,CAAC,cAAc,CAAC,qGAAA,4BAE/C,EAAmD,IACtD,KADG,oBAAoB,CAAC,aAAa,EAAE,cAAc,CAAC,CACtD,CAAA;AAMD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAMT;QALjB,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,KAAK,WAAA,EACL,kBAAkB,wBAAA,EAClB,OAAO,aAAA;IAEP,IAAM,WAAW,GAAG,WAAW,CAAC,WAAW,CAAA;IAE7B,IAAA,gBAAgB,GAC1B,iBAAiB,CAAC,WAAW,CAA0B,0BAD7B,CAC6B;IACrD,IAAA,KAAuC,gBAAgB,IAAI,EAAE,EAA3D,gBAAgB,sBAAA,EAAE,cAAc,oBAA2B,CAAA;IAEnE,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,UAAC,EAAM;YAAJ,EAAE,QAAA;QACtC,IAAM,wBAAwB,GAC5B,EAAE,KAAK,sBAAsB,IAAI,CAAC,CAAC,cAAc,IAAI,gBAAgB,CAAC,CAAA;QAExE,OAAO,CAAC,wBAAwB,CAAA;IAClC,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,IAAI,EAAC,kBAAkB,iBAAc,UAAU;QACpD,oBAAC,MAAM,eAAK,MAAM,EAAI;QAEtB,oBAAC,oBAAoB,IAAC,OAAO,EAAE,IAAI,IAChC,aAAa,CAAC,GAAG,CAAC,UAAC,EAAkB;YAAhB,IAAA,IAAI,UAAA,EAAK,KAAK,cAAhB,QAAkB,CAAF;YAAO,OAAA,CACzC,oBAAC,eAAe,aACd,GAAG,EAAE,KAAK,CAAC,EAAE,IACT,KAAK,IACT,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,IACnC,CACH,CAAA;SAAA,CAAC,CACmB,CACjB,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"BaseSection.js","sourceRoot":"","sources":["../../../../../src/Components/Sections/UserHub/BaseSection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAyB,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,cAAc,CAAC,qGAAA,4BAEtD,EAAmD,IACtD,KADG,oBAAoB,CAAC,aAAa,EAAE,cAAc,CAAC,CACtD,CAAA;AAMD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAMT;QALjB,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,KAAK,WAAA,EACL,kBAAkB,wBAAA,EAClB,OAAO,aAAA;IAEP,IAAM,WAAW,GAAG,WAAW,CAAC,WAAW,CAAA;IAE7B,IAAA,gBAAgB,GAC1B,iBAAiB,CAAC,WAAW,CAA0B,0BAD7B,CAC6B;IACrD,IAAA,KAAuC,gBAAgB,IAAI,EAAE,EAA3D,gBAAgB,sBAAA,EAAE,cAAc,oBAA2B,CAAA;IAEnE,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,UAAC,EAAM;YAAJ,EAAE,QAAA;QACtC,IAAM,wBAAwB,GAC5B,EAAE,KAAK,sBAAsB,IAAI,CAAC,CAAC,cAAc,IAAI,gBAAgB,CAAC,CAAA;QAExE,OAAO,CAAC,wBAAwB,CAAA;IAClC,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,IAAI,EAAC,kBAAkB,iBAAc,UAAU;QACpD,oBAAC,MAAM,eAAK,MAAM,EAAI;QAEtB,oBAAC,oBAAoB,IAAC,OAAO,EAAE,IAAI,IAChC,aAAa,CAAC,GAAG,CAAC,UAAC,EAAkB;YAAhB,IAAA,IAAI,UAAA,EAAK,KAAK,cAAhB,QAAkB,CAAF;YAAO,OAAA,CACzC,oBAAC,eAAe,aACd,GAAG,EAAE,KAAK,CAAC,EAAE,IACT,KAAK,IACT,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,IACnC,CACH,CAAA;SAAA,CAAC,CACmB,CACjB,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/Components/Sections/UserHub/SubscriptionDetailsSection.d.ts

@@ -0,0 +1,6 @@
+import { UserHubSubscriptionDetailsSection } from '../../../context/types';
+import { UserData } from '../../../pages/types';
+export interface SubscriptionDetailsSectionProps extends UserHubSubscriptionDetailsSection {
+    user?: UserData;
+}
+export declare const SubscriptionDetailsSection: ({ header, containerOverrides, benefits, cancelSubscription, cancelSubscriptionModal, user, }: SubscriptionDetailsSectionProps) => JSX.Element;

package/dist/esm/Components/Sections/UserHub/SubscriptionDetailsSection.js

@@ -0,0 +1,64 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { Stack, Block, styled, getColorCssFromTheme, useInstrumentation, } from 'newskit';
+import { Header, createClickEvent } from '@newskit-render/shared-components';
+import { SectionListItem } from '../../Elements/SectionListItem';
+import { StyledStructuredList } from './BaseSection';
+import { BenefitsListItem } from '@newskit-render/shared-components';
+import { useCancelSubscriptionModal } from '../../../hooks';
+import { CancelSubscriptionModal } from '../../Elements/CancelSubscriptionModal';
+import { CURRENCY_MAP } from '../../../constants';
+var StyledSectionListItem = styled(SectionListItem)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &:hover,\n  &:focus,\n  &:active {\n    ", "\n    cursor: pointer;\n  }\n"], ["\n  &:hover,\n  &:focus,\n  &:active {\n    ", "\n    cursor: pointer;\n  }\n"])), getColorCssFromTheme('backgroundColor', 'interface020'));
+export var SubscriptionDetailsSection = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var header = _a.header, containerOverrides = _a.containerOverrides, benefits = _a.benefits, cancelSubscription = _a.cancelSubscription, cancelSubscriptionModal = _a.cancelSubscriptionModal, user = _a.user;
+    var _j = useCancelSubscriptionModal((_b = cancelSubscriptionModal === null || cancelSubscriptionModal === void 0 ? void 0 : cancelSubscriptionModal.closeButton) === null || _b === void 0 ? void 0 : _b.eventContext), modalOpen = _j.modalOpen, setModalOpen = _j.setModalOpen, onDismissModal = _j.onDismissModal;
+    var fireEvent = useInstrumentation().fireEvent;
+    var handleCancelSubscriptionClick = function () {
+        setModalOpen(true);
+        if (cancelSubscription === null || cancelSubscription === void 0 ? void 0 : cancelSubscription.eventContext) {
+            fireEvent(createClickEvent(__assign({ originator: 'button', text: cancelSubscription.eventContext.event_navigation_name, page_name: cancelSubscription.eventContext.page_name }, cancelSubscription.eventContext)));
+        }
+    };
+    var price = (_d = (_c = user === null || user === void 0 ? void 0 : user.subscriptions) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.price;
+    var currency = (_f = (_e = user === null || user === void 0 ? void 0 : user.subscriptions) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.currency;
+    var itemsToRender = [
+        React.createElement(SectionListItem, { key: "type", title: "Type", subtitle: ((_h = (_g = user === null || user === void 0 ? void 0 : user.subscriptions) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.type) || '', containerOverrides: containerOverrides }),
+        React.createElement(SectionListItem, { key: "price", title: "Price", subtitle: price && currency ? "".concat(CURRENCY_MAP[currency]).concat(price) : '', containerOverrides: containerOverrides }),
+    ];
+    if ((benefits === null || benefits === void 0 ? void 0 : benefits.showBenefits) && (benefits === null || benefits === void 0 ? void 0 : benefits.items) && benefits.items.length > 0) {
+        itemsToRender.push(React.createElement(SectionListItem, { key: "benefits", title: benefits.title, containerOverrides: containerOverrides, itemOverrides: {
+                column: '1/-1',
+            } },
+            React.createElement(Block, null, benefits.items.map(function (benefit, index) {
+                var _a;
+                var isLastItem = index === ((_a = benefits.items) === null || _a === void 0 ? void 0 : _a.length) - 1;
+                return (React.createElement(BenefitsListItem, __assign({ key: benefit.code }, benefit, { containerOverrides: {
+                        paddingBlockEnd: isLastItem ? 'space000' : 'space050',
+                    } })));
+            }))));
+    }
+    if (cancelSubscription) {
+        itemsToRender.push(React.createElement(StyledSectionListItem, __assign({ key: "cancel-subscription" }, cancelSubscription, { containerOverrides: containerOverrides, onClick: handleCancelSubscriptionClick })));
+    }
+    return (React.createElement(Stack, { flow: "vertical-stretch", "data-testid": "subscription-details-section" },
+        React.createElement(Header, __assign({}, header)),
+        React.createElement(StyledStructuredList, { divider: true }, itemsToRender),
+        cancelSubscriptionModal && (React.createElement(CancelSubscriptionModal, { isOpen: modalOpen, onDismissModal: onDismissModal, modal: cancelSubscriptionModal, cpn: user === null || user === void 0 ? void 0 : user.cpn, subscriptions: user === null || user === void 0 ? void 0 : user.subscriptions }))));
+};
+var templateObject_1;
+//# sourceMappingURL=SubscriptionDetailsSection.js.map

package/dist/esm/Components/Sections/UserHub/SubscriptionDetailsSection.js.map

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

package/dist/esm/Components/Templates/CancellationStepperRender.d.ts

@@ -4,7 +4,61 @@ export declare const componentMap: {
     reason: ({ belowItemExtra, onNextStep, handleCardClick, ...props }: import("../Sections/SectionContainer").GridSectionProps) => JSX.Element;
     downgrade: React.FC<import("../Sections/CancelSubscriptionDowngrade/CancelSubscriptionDowngrade").CancelSubscriptionDowngradeProps>;
     preCancellation: ({ header, containerOverrides, user, subscriptionName, subscriptionEnd, selectedReason, defaultCancellationReason, dividerOverrides, continueButton, genericErrorMessage, setServiceCancellationDate, handleError, onNextStep, }: import("../Sections/CancellationDetails").CancellationDetailsProps) => JSX.Element;
-    confirmCancel: ({ image, buttonOverrides, buttonText, introduction, buttonEventContext, buttonUrl, baseUrl, serviceCancellationDate, }: import("../Sections/ConfirmCancellation/ConfirmCancellation").ConfirmCancellationStepProps) => JSX.Element;
+    confirmCancel: ({ featureFlags, ...rest }: import("../Sections/ConfirmCancellation").ConfirmCancellationStepProps) => React.CElement<{
+        image: {
+            src: string;
+            alt?: string;
+            loading?: "eager" | "lazy";
+            width?: string | number;
+            height?: string | number;
+        };
+        introduction: import("@newskit-render/shared-components").IntroductionProps;
+        buttonText: string;
+        buttonUrl: string;
+        buttonOverrides?: import("newskit").ButtonProps;
+        buttonEventContext?: EventContext;
+        baseUrl?: string;
+        serviceCancellationDate?: string | null;
+        subType?: string;
+        subscriptionDetails?: {
+            containerOverrides?: import("../SharedTypes/GridLayoutProps").GridLayoutProps["overrides"];
+            subscriptionType: {
+                label: string;
+                overrides?: import("newskit").TextBlockProps;
+            };
+            endDate: {
+                label: string;
+                overrides?: import("newskit").TextBlockProps;
+            };
+        };
+    }, React.Component<{
+        image: {
+            src: string;
+            alt?: string;
+            loading?: "eager" | "lazy";
+            width?: string | number;
+            height?: string | number;
+        };
+        introduction: import("@newskit-render/shared-components").IntroductionProps;
+        buttonText: string;
+        buttonUrl: string;
+        buttonOverrides?: import("newskit").ButtonProps;
+        buttonEventContext?: EventContext;
+        baseUrl?: string;
+        serviceCancellationDate?: string | null;
+        subType?: string;
+        subscriptionDetails?: {
+            containerOverrides?: import("../SharedTypes/GridLayoutProps").GridLayoutProps["overrides"];
+            subscriptionType: {
+                label: string;
+                overrides?: import("newskit").TextBlockProps;
+            };
+            endDate: {
+                label: string;
+                overrides?: import("newskit").TextBlockProps;
+            };
+        };
+    }, any, any>>;
     offers: ({ baseUrl, header, offersSection, benefits, continueButton, continueButtonContainerOverrides, selectedOffer, onSelectOffer, onNextStep, }: import("../Sections/CancellationOffers").CancellationOffersProps) => JSX.Element;
     discountPreview: React.FC<import("../Sections/SectionContainer").GridSectionProps>;
 };

package/dist/esm/Components/Templates/CancellationStepperRender.js

@@ -18,22 +18,22 @@ import { CancellationReasons } from '../Sections/CancellationReasons';
 import { CancellationDetails } from '../Sections/CancellationDetails';
 import { replaceBaseURL, trackEvent } from '../../helpers';
 import { CancelSubscriptionDowngrade } from '../Sections/CancelSubscriptionDowngrade';
-import { ConfirmCancellation } from '../Sections/ConfirmCancellation/ConfirmCancellation';
 import { CancellationOffers } from '../Sections/CancellationOffers';
 import { EventTrigger, useInstrumentation } from 'newskit';
 import { GridSection } from '../Sections/SectionContainer';
+import { ConfirmCancellationRender } from '../Sections/ConfirmCancellation';
 export var componentMap = {
     reason: CancellationReasons,
     downgrade: CancelSubscriptionDowngrade,
     preCancellation: CancellationDetails,
-    confirmCancel: ConfirmCancellation,
+    confirmCancel: ConfirmCancellationRender,
     offers: CancellationOffers,
     discountPreview: GridSection,
 };
 var CancellationStepperRender = function () {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var contextName = ContextName.CancellationStepper;
-    var _f = useAccountContext(contextName), header = _f.header, components = _f.components, componentSequence = _f.componentSequence, showBackButton = _f.showBackButton, userData = _f.userData, baseUrl = _f.baseUrl, handleError = _f.handleError;
+    var _k = useAccountContext(contextName), header = _k.header, components = _k.components, componentSequence = _k.componentSequence, showBackButton = _k.showBackButton, userData = _k.userData, baseUrl = _k.baseUrl, handleError = _k.handleError, featureFlags = _k.featureFlags;
     var backButtonHref = (_a = header === null || header === void 0 ? void 0 : header.backButton) === null || _a === void 0 ? void 0 : _a.href;
     var hederBackButtonProps = header === null || header === void 0 ? void 0 : header.backButton;
     var router = useRouter();
@@ -41,12 +41,12 @@ var CancellationStepperRender = function () {
     var type = (_c = (_b = userData === null || userData === void 0 ? void 0 : userData.subscriptions) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.type;
     if (!type || !componentSequence[type])
         return null;
-    var _g = useState(null), selections = _g[0], setSelections = _g[1];
+    var _l = useState(null), selections = _l[0], setSelections = _l[1];
     var pagesInOrder = componentSequence[type];
-    var _h = useState(null), overrideComponent = _h[0], setOverrideComponent = _h[1];
-    var _j = useState([]), filteredPages = _j[0], setFilteredPages = _j[1];
-    var _k = useState(null), serviceCancellationDate = _k[0], setServiceCancellationDate = _k[1];
-    var _l = useState(), selectedOffer = _l[0], setSelectedOffer = _l[1];
+    var _m = useState(null), overrideComponent = _m[0], setOverrideComponent = _m[1];
+    var _o = useState([]), filteredPages = _o[0], setFilteredPages = _o[1];
+    var _p = useState(((_e = (_d = userData === null || userData === void 0 ? void 0 : userData.subscriptions) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.serviceCancellationDate) || null), serviceCancellationDate = _p[0], setServiceCancellationDate = _p[1];
+    var _q = useState(), selectedOffer = _q[0], setSelectedOffer = _q[1];
     var stepFromUrl = searchParams.get('step');
     var currentStepComponent = overrideComponent || stepFromUrl || pagesInOrder[0];
     var activePages = filteredPages.length > 0 ? filteredPages : pagesInOrder;
@@ -133,10 +133,10 @@ var CancellationStepperRender = function () {
     if (!currentStepComponent || !SectionComponent) {
         return null;
     }
-    var shouldShowBackButton = (_d = componentProps === null || componentProps === void 0 ? void 0 : componentProps.showBackButton) !== null && _d !== void 0 ? _d : showBackButton;
+    var shouldShowBackButton = (_f = componentProps === null || componentProps === void 0 ? void 0 : componentProps.showBackButton) !== null && _f !== void 0 ? _f : showBackButton;
     return (React.createElement(ContentContainer, __assign({ "data-testid": "section-container" }, componentProps === null || componentProps === void 0 ? void 0 : componentProps.contentContainerOverrides),
-        shouldShowBackButton && hederBackButtonProps && (React.createElement(BackButton, { backButton: __assign(__assign({}, hederBackButtonProps), { href: '' }), backButtonOverrides: header.backButtonOverrides, eventContext: __assign(__assign({}, hederBackButtonProps === null || hederBackButtonProps === void 0 ? void 0 : hederBackButtonProps.eventContext), { page_name: (_e = componentProps === null || componentProps === void 0 ? void 0 : componentProps.tealiumContext) === null || _e === void 0 ? void 0 : _e.context.page_name }), onClick: handleBackBtn })),
-        React.createElement(SectionComponent, __assign({}, componentProps, { baseUrl: baseUrl, onNextStep: stepController, handleCardClick: handleCardClick, user: userData, selectedReason: selections, handleError: handleError, serviceCancellationDate: serviceCancellationDate, setServiceCancellationDate: setServiceCancellationDate, selectedOffer: selectedOffer, onSelectOffer: setSelectedOffer }))));
+        shouldShowBackButton && hederBackButtonProps && (React.createElement(BackButton, { backButton: __assign(__assign({}, hederBackButtonProps), { href: '' }), backButtonOverrides: header.backButtonOverrides, eventContext: __assign(__assign({}, hederBackButtonProps === null || hederBackButtonProps === void 0 ? void 0 : hederBackButtonProps.eventContext), { page_name: (_g = componentProps === null || componentProps === void 0 ? void 0 : componentProps.tealiumContext) === null || _g === void 0 ? void 0 : _g.context.page_name }), onClick: handleBackBtn })),
+        React.createElement(SectionComponent, __assign({}, componentProps, { baseUrl: baseUrl, onNextStep: stepController, handleCardClick: handleCardClick, user: userData, selectedReason: selections, handleError: handleError, serviceCancellationDate: serviceCancellationDate, setServiceCancellationDate: setServiceCancellationDate, subType: ((_j = (_h = userData === null || userData === void 0 ? void 0 : userData.subscriptions) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.type) || '', selectedOffer: selectedOffer, onSelectOffer: setSelectedOffer, featureFlags: featureFlags }))));
 };
 export default CancellationStepperRender;
 //# sourceMappingURL=CancellationStepperRender.js.map