@newskit-render/checkout 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.14.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/checkout@0.13.0...@newskit-render/checkout@0.14.0) (2022-01-13)
+
+
+### Features
+
+* **PPDSR-511:** Payment Details page - Build page ([#555](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/555)) ([6082ca1](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/6082ca1a4d1b0bf29d93aeb69277679b07abf660))
+
+
+
+
+
 # [0.13.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/checkout@0.12.0...@newskit-render/checkout@0.13.0) (2022-01-13)
 
 

package/dist/Components/Icons/Paypal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const IconPayPal: React.FC<import("newskit").NewsKitIconProps & {
+    theme?: import("newskit").Theme | undefined;
+}>;

package/dist/Components/Icons/Paypal/index.js

@@ -0,0 +1,25 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconPayPal = void 0;
+var react_1 = __importDefault(require("react"));
+var newskit_1 = require("newskit");
+exports.IconPayPal = (0, newskit_1.customToNewsKitIcon)('IconPayPal', function (props) { return (react_1.default.createElement(newskit_1.Svg, __assign({}, props, { viewBox: "0 0 24 25" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.69286 20.2717L9.95867 18.4004L9.36655 18.3851H6.53906L8.50406 4.57582C8.51019 4.534 8.52998 4.49518 8.55888 4.46757C8.58792 4.43995 8.62494 4.4248 8.66366 4.4248H13.4312C15.0141 4.4248 16.1064 4.78979 16.6766 5.51029C16.9439 5.84829 17.1142 6.20159 17.1967 6.59025C17.2831 6.99815 17.2845 7.48542 17.2002 8.07984L17.1941 8.12308V8.504L17.4615 8.6719C17.6866 8.80429 17.8655 8.95577 18.0028 9.12919C18.2314 9.41827 18.3793 9.78562 18.4418 10.221C18.5065 10.6688 18.4851 11.2018 18.3793 11.8053C18.2573 12.4992 18.0601 13.1038 17.7938 13.5983C17.5489 14.054 17.2368 14.4321 16.8662 14.725C16.5124 15.0033 16.0921 15.2146 15.6169 15.3498C15.1563 15.4827 14.6313 15.5498 14.0554 15.5498H13.6844C13.4191 15.5498 13.1614 15.6557 12.9591 15.8455C12.7563 16.0393 12.6221 16.304 12.581 16.5936L12.5529 16.7621L12.0833 20.0605L12.0621 20.1816C12.0564 20.2199 12.0467 20.239 12.0324 20.2519C12.0198 20.2638 12.0015 20.2717 11.9837 20.2717H9.69286Z", fill: "#28356A" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.7148 8.16724C17.7007 8.26807 17.6843 8.37111 17.6661 8.47699C17.0374 12.0549 14.8863 13.2909 12.1391 13.2909H10.7403C10.4043 13.2909 10.1212 13.5612 10.0689 13.9285L9.14991 20.3895C9.11588 20.6308 9.28359 20.8481 9.50313 20.8481H11.9841C12.2778 20.8481 12.5274 20.6115 12.5736 20.2904L12.598 20.1508L13.0651 16.8653L13.0951 16.6851C13.1408 16.3629 13.391 16.1262 13.6847 16.1262H14.0557C16.4594 16.1262 18.3411 15.0446 18.8911 11.9146C19.1207 10.6071 19.0018 9.51529 18.3939 8.74745C18.21 8.51597 17.9817 8.32377 17.7148 8.16724Z", fill: "#298FC2" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.0566 7.87657C16.9605 7.84549 16.8614 7.8174 16.7598 7.79199C16.6576 7.76722 16.5529 7.74529 16.4451 7.72603C16.068 7.6585 15.6547 7.62646 15.2121 7.62646H11.4753C11.3832 7.62646 11.2957 7.6495 11.2176 7.69116C11.0452 7.783 10.9172 7.96383 10.8861 8.18522L10.0911 13.7658L10.0684 13.9285C10.1206 13.5612 10.4038 13.2909 10.7398 13.2909H12.1386C14.8858 13.2909 17.0368 12.0542 17.6656 8.47699C17.6843 8.37111 17.7001 8.26806 17.7142 8.16723C17.5552 8.07366 17.3829 7.99366 17.1974 7.92549C17.1516 7.9086 17.1043 7.89235 17.0566 7.87657Z", fill: "#22284F" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.8866 8.18521C10.9176 7.96383 11.0456 7.78299 11.218 7.69178C11.2967 7.64997 11.3836 7.62693 11.4757 7.62693H15.2125C15.6551 7.62693 16.0684 7.65912 16.4456 7.72666C16.5533 7.74575 16.658 7.76784 16.7602 7.79262C16.8619 7.81786 16.9609 7.84611 17.057 7.87704C17.1047 7.89282 17.152 7.90923 17.1983 7.92548C17.3838 7.99365 17.5562 8.07428 17.7152 8.16723C17.9023 6.84505 17.7137 5.94482 17.0687 5.12964C16.3576 4.2321 15.0742 3.84802 13.432 3.84802H8.66428C8.32886 3.84802 8.04269 4.11833 7.99087 4.48631L6.00508 18.4376C5.96593 18.7135 6.15799 18.9626 6.40913 18.9626H9.3525L10.8866 8.18521Z", fill: "#28356A" }))); });
+//# sourceMappingURL=index.js.map

package/dist/Components/Icons/Paypal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Components/Icons/Paypal/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,mCAAkD;AAErC,QAAA,UAAU,GAAG,IAAA,6BAAmB,EAAC,YAAY,EAAE,UAAC,KAAK,IAAK,OAAA,CACrE,8BAAC,aAAG,eAAK,KAAK,IAAE,OAAO,EAAC,WAAW;IACjC,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,66BAA66B,EAC/6B,IAAI,EAAC,SAAS,GACd;IACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uhBAAuhB,EACzhB,IAAI,EAAC,SAAS,GACd;IACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4hBAA4hB,EAC9hB,IAAI,EAAC,SAAS,GACd;IACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,olBAAolB,EACtlB,IAAI,EAAC,SAAS,GACd,CACE,CACP,EA3BsE,CA2BtE,CAAC,CAAA"}

package/dist/Components/Templates/LayoutTemplate.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { LayoutTemplateProps } from './types';
-export declare const LayoutTemplate: React.FC<LayoutTemplateProps>;
+export declare const BaseLayoutTemplate: React.FC<LayoutTemplateProps>;
+export declare const LayoutTemplate: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;

package/dist/Components/Templates/LayoutTemplate.js

@@ -10,29 +10,55 @@ var __assign = (this && this.__assign) || function () {
     };
     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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutTemplate = void 0;
+exports.LayoutTemplate = exports.BaseLayoutTemplate = void 0;
 var react_1 = __importDefault(require("react"));
 var shared_components_1 = require("@newskit-render/shared-components");
 var newskit_1 = require("newskit");
 var context_1 = require("../../context");
 var router_1 = require("next/router");
+var withMediaQueryProvider = function (Component) {
+    return function (_a) {
+        var props = __rest(_a, []);
+        return (react_1.default.createElement(newskit_1.MediaQueryProvider, null,
+            react_1.default.createElement(Component, __assign({}, props, { children: props.children, context: props.context }))));
+    };
+};
 var NavigationPrimaryWrapper = function (_a) {
     var customTheme = _a.customTheme, setTheme = _a.setTheme;
     var navigationPrimary = (0, context_1.useCheckoutContext)().navigationPrimary;
     return (react_1.default.createElement(shared_components_1.NavigationPrimary, __assign({}, navigationPrimary, { customTheme: customTheme, setTheme: setTheme })));
 };
-var LayoutTemplate = function (_a) {
-    var children = _a.children, customTheme = _a.customTheme, context = _a.context, setTheme = _a.setTheme;
+var SubscriptionDetailsWrapper = function () {
+    var _a, _b, _c, _d;
+    var paymentDetailsPage = (0, context_1.useCheckoutContext)().paymentDetailsPage;
+    /* istanbul ignore next */
+    return ((_a = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails) === null || _a === void 0 ? void 0 : _a.banner) ? (react_1.default.createElement(shared_components_1.SubscriptionDetails, __assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails, { banner: __assign(__assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner), { buttonText: ((_b = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner) === null || _b === void 0 ? void 0 : _b.buttonText) || '', message: ((_c = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner) === null || _c === void 0 ? void 0 : _c.message) || '', title: ((_d = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner) === null || _d === void 0 ? void 0 : _d.title) || '', onClick: paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawerControl }) }))) : null;
+};
+var BaseLayoutTemplate = function (_a) {
+    var children = _a.children, customTheme = _a.customTheme, context = _a.context, setTheme = _a.setTheme, fullWidth = _a.fullWidth;
     var router = (0, router_1.useRouter)();
+    var bp = (0, newskit_1.useBreakpointKey)();
     return (react_1.default.createElement(context_1.CheckoutContextProvider, { context: context },
         react_1.default.createElement(shared_components_1.SEOComponent, { title: context.siteTitle || '', description: context.siteDescription || '', url: "" + context.url + router.pathname, siteHost: context.url || context.siteHost || '', fbType: context.fbType || '', fbImageUrl: context.fbImageUrl || '' }),
         react_1.default.createElement(newskit_1.ThemeProvider, { theme: customTheme || shared_components_1.sharedTheme },
             react_1.default.createElement(NavigationPrimaryWrapper, { customTheme: customTheme, setTheme: setTheme }),
-            react_1.default.createElement(shared_components_1.LayoutGrid, { hasSidebar: false, 
+            bp !== 'lg' && bp !== 'xl' && react_1.default.createElement(SubscriptionDetailsWrapper, null),
+            react_1.default.createElement(shared_components_1.LayoutGrid, { hasSidebar: false, fullWidth: fullWidth, 
                 // different margins can be passed based on the variant
                 margin: {
                     xsMargin: 'space050',
@@ -43,5 +69,6 @@ var LayoutTemplate = function (_a) {
                     smColumnGutter: 'space040',
                 } }, children))));
 };
-exports.LayoutTemplate = LayoutTemplate;
+exports.BaseLayoutTemplate = BaseLayoutTemplate;
+exports.LayoutTemplate = withMediaQueryProvider(exports.BaseLayoutTemplate);
 //# sourceMappingURL=LayoutTemplate.js.map

package/dist/Components/Templates/LayoutTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutTemplate.js","sourceRoot":"","sources":["../../../src/Components/Templates/LayoutTemplate.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AAEzB,uEAM0C;AAC1C,mCAAuC;AACvC,yCAA2E;AAC3E,sCAAuC;AAEvC,IAAM,wBAAwB,GAA0C,UAAC,EAGxE;QAFC,WAAW,iBAAA,EACX,QAAQ,cAAA;IAEA,IAAA,iBAAiB,GAAK,IAAA,4BAAkB,GAAE,kBAAzB,CAAyB;IAClD,OAAO,CACL,8BAAC,qCAAiB,eACZ,iBAAiB,IACrB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAA;AAEM,IAAM,cAAc,GAAkC,UAAC,EAK7D;QAJC,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,QAAQ,cAAA;IAER,IAAM,MAAM,GAAG,IAAA,kBAAS,GAAE,CAAA;IAC1B,OAAO,CACL,8BAAC,iCAAuB,IAAC,OAAO,EAAE,OAAO;QACvC,8BAAC,gCAAY,IACX,KAAK,EAAE,OAAO,CAAC,SAAS,IAAI,EAAE,EAC9B,WAAW,EAAE,OAAO,CAAC,eAAe,IAAI,EAAE,EAC1C,GAAG,EAAE,KAAG,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC,QAAU,EACvC,QAAQ,EAAE,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,QAAQ,IAAI,EAAE,EAC/C,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE,EAC5B,UAAU,EAAE,OAAO,CAAC,UAAU,IAAI,EAAE,GACpC;QACF,8BAAC,uBAAa,IAAC,KAAK,EAAE,WAAW,IAAI,+BAAW;YAC9C,8BAAC,wBAAwB,IACvB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB;YACF,8BAAC,8BAAU,IACT,UAAU,EAAE,KAAK;gBACjB,uDAAuD;gBACvD,MAAM,EAAE;oBACN,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,UAAU;iBACrB,EACD,MAAM,EAAE;oBACN,cAAc,EAAE,UAAU;oBAC1B,cAAc,EAAE,UAAU;iBAC3B,IAEA,QAAQ,CACE,CACC,CACQ,CAC3B,CAAA;AACH,CAAC,CAAA;AAxCY,QAAA,cAAc,kBAwC1B"}
+{"version":3,"file":"LayoutTemplate.js","sourceRoot":"","sources":["../../../src/Components/Templates/LayoutTemplate.tsx"],"names":[],"mappings":"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"}

package/dist/Components/Templates/PaymentDetailsRender.js

@@ -1,4 +1,8 @@
 "use strict";
+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++) {
@@ -18,11 +22,54 @@ exports.PaymentDetailsRender = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("../../context");
 var shared_components_1 = require("@newskit-render/shared-components");
+var newskit_1 = require("newskit");
+var ButtonGroupWrapp = newskit_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 200px;\n  ", " {\n    padding-bottom: 0;\n  }\n"], ["\n  padding-bottom: 200px;\n  ", " {\n    padding-bottom: 0;\n  }\n"])), (0, newskit_1.getMediaQueryFromTheme)('sm'));
 var PaymentDetailsRender = function () {
-    var header = (0, context_1.useCheckoutContext)().header;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(shared_components_1.Header, __assign({}, header)),
-        react_1.default.createElement("h2", null, "Page content here")));
+    var _a, _b, _c, _d, _e;
+    var bp = (0, newskit_1.useBreakpointKey)();
+    var _f = (0, context_1.useCheckoutContext)(), header = _f.header, paymentDetailsPage = _f.paymentDetailsPage, buttonGroupProps = _f.buttonGroupProps;
+    return (react_1.default.createElement(newskit_1.Grid, { xsMargin: "space000", xsColumnGutter: "space000", xsRowGutter: "space000", lgColumnGutter: "space050", lgMargin: "space050" },
+        react_1.default.createElement(newskit_1.Cell, { xs: 12, lg: 6 },
+            react_1.default.createElement(shared_components_1.Header, __assign({}, header)),
+            ((_a = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.infoPanel) === null || _a === void 0 ? void 0 : _a.children) && (react_1.default.createElement(newskit_1.Block, { spaceStack: paymentDetailsPage.infoPanel.spaceStack },
+                react_1.default.createElement(newskit_1.InlineMessage, { icon: paymentDetailsPage.infoPanel.icon, title: paymentDetailsPage.infoPanel.title, children: paymentDetailsPage.infoPanel.children, overrides: paymentDetailsPage.infoPanel.overrides || {} }))),
+            react_1.default.createElement(newskit_1.Tabs, { distribution: newskit_1.TabsDistribution.Equal },
+                react_1.default.createElement(newskit_1.Tab, __assign({}, (_b = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _b === void 0 ? void 0 : _b.tab1, { label: (_c = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _c === void 0 ? void 0 : _c.tab1.label, key: 'tab-1' }),
+                    react_1.default.createElement("h2", null, "Page content here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here"),
+                    react_1.default.createElement("h3", null, "Payment method here")),
+                react_1.default.createElement(newskit_1.Tab, __assign({}, (_d = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _d === void 0 ? void 0 : _d.tab2, { label: (_e = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _e === void 0 ? void 0 : _e.tab2.label, key: 'tab-2' }),
+                    react_1.default.createElement("h2", null, "Page content here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"),
+                    react_1.default.createElement("h3", null, "Paypal here"))),
+            (paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionMessage) && (react_1.default.createElement(newskit_1.Block, { spaceStack: paymentDetailsPage.subscriptionMessage.spaceStack },
+                react_1.default.createElement(newskit_1.TextBlock, { stylePreset: "inkBase", typographyPreset: "utilityBody020" }, paymentDetailsPage.subscriptionMessage.text))),
+            react_1.default.createElement(ButtonGroupWrapp, null,
+                react_1.default.createElement(shared_components_1.ButtonGroup, __assign({}, buttonGroupProps, { hasError: false }))),
+            bp !== 'lg' && bp !== 'xl' && (react_1.default.createElement(shared_components_1.SubscriptionDrawer, __assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawer, { open: paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawerState, onDismiss: paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawerControl })))),
+        /* istanbul ignore next */ (bp === 'lg' || bp === 'xl') && (react_1.default.createElement(newskit_1.Cell, { xs: 12, lg: 6 },
+            react_1.default.createElement(shared_components_1.CorePackageContent, __assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.corePackageContent))))));
 };
 exports.PaymentDetailsRender = PaymentDetailsRender;
+var templateObject_1;
 //# sourceMappingURL=PaymentDetailsRender.js.map

package/dist/Components/Templates/PaymentDetailsRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentDetailsRender.js","sourceRoot":"","sources":["../../../src/Components/Templates/PaymentDetailsRender.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,yCAAkD;AAClD,uEAA0D;AAEnD,IAAM,oBAAoB,GAAa;IACpC,IAAA,MAAM,GAAK,IAAA,4BAAkB,GAAE,OAAzB,CAAyB;IACvC,OAAO,CACL;QACE,8BAAC,0BAAM,eAAK,MAAM,EAAI;QACtB,8DAA0B,CACzB,CACJ,CAAA;AACH,CAAC,CAAA;AARY,QAAA,oBAAoB,wBAQhC"}
+{"version":3,"file":"PaymentDetailsRender.js","sourceRoot":"","sources":["../../../src/Components/Templates/PaymentDetailsRender.tsx"],"names":[],"mappings":"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"}

package/dist/Components/Templates/types.d.ts

@@ -6,4 +6,5 @@ export declare type LayoutTemplateProps = {
     customTheme?: UncompiledTheme;
     setTheme?: (theme: UncompiledTheme) => void;
     context: ContextOptions;
+    fullWidth?: boolean;
 };

package/dist/context/baseContext.js

@@ -35,5 +35,168 @@ exports.baseContext = {
         spaceStack: { xs: 'space050', sm: 'space080' },
         showDivider: false,
     },
+    paymentDetailsPage: {
+        subscriptionDetails: {
+            bannerOverrides: {
+                stylePreset: { xs: 'subscribtionDetails' },
+                spaceInset: { xs: 'spaceInset000' },
+                maxWidth: '100%',
+                minHeight: 'sizing000',
+                content: {
+                    title: {
+                        stylePreset: 'inkBase',
+                    },
+                    message: {
+                        typographyPreset: 'utilityMeta010',
+                        stylePreset: 'inkSubtle',
+                    },
+                },
+            },
+            containerOverrides: {
+                stylePreset: { xs: 'headerSubscriptionContainer' },
+                spaceStack: { xs: 'space040' },
+            },
+            margin: {
+                xsMargin: 'space050',
+                smMargin: 'space060',
+                mdMargin: 'space000',
+            },
+            gutter: {
+                xsColumnGutter: 'space020',
+                smColumnGutter: 'space040',
+            },
+        },
+        corePackageContent: {
+            titleBar: {
+                text: '',
+                spaceStack: 'space040',
+                overrides: {
+                    heading: {
+                        typographyPreset: {
+                            xs: 'utilityHeading010',
+                            md: 'utilityHeading020',
+                        },
+                    },
+                    spaceInset: 'spaceInset000',
+                },
+                linkOverriders: {
+                    iconSize: 'iconSize010',
+                },
+            },
+            benifitList: {
+                spaceStack: 'space020',
+                markerAlign: 'start',
+                overrides: {
+                    spaceStack: { xs: 'space040' },
+                    content: {
+                        stylePreset: 'inkBase',
+                        typographyPreset: 'utilityBody020',
+                    },
+                    marker: {
+                        size: 'iconSize005',
+                    },
+                },
+            },
+            divider: {
+                spaceStack: 'space050',
+            },
+            promo: '',
+            promoOverrides: {
+                spaceStack: 'space020',
+                typographyPreset: 'utilityBody010',
+                stylePreset: 'inkPositive',
+            },
+            paymentKey: '',
+            paymentValue: '',
+            paymentOverrides: {
+                spaceStack: 'space040',
+                typographyPreset: { xs: 'utilityHeading020', lg: 'utilityHeading040' },
+                stylePreset: 'iinkContrast',
+            },
+            description: '',
+            descriptionOverrides: {
+                spaceStack: 'space060',
+                typographyPreset: 'utilityMeta010',
+                stylePreset: 'inkSubtle',
+            },
+            billingDetails: '',
+            billingDetailsOverrides: {
+                spaceStack: 'space040',
+                typographyPreset: 'utilityMeta010',
+                stylePreset: 'inkSubtle',
+            },
+        },
+        subscriptionDrawer: {
+            open: false,
+            closePosition: 'left',
+            size: '80%',
+            overrides: {
+                header: {
+                    spaceInset: 'spaceInset000',
+                },
+                content: {
+                    spaceInset: 'spaceInsetStretch050',
+                },
+            },
+            titleBar: {
+                text: '',
+                spaceStack: 'space040',
+                overrides: {
+                    heading: {
+                        typographyPreset: {
+                            xs: 'utilityHeading010',
+                            md: 'utilityHeading020',
+                        },
+                    },
+                    spaceInset: 'spaceInset000',
+                },
+                linkOverriders: {
+                    iconSize: 'iconSize010',
+                },
+            },
+            benifitList: {
+                spaceStack: 'space020',
+                markerAlign: 'start',
+                overrides: {
+                    spaceStack: { xs: 'space040' },
+                    content: {
+                        stylePreset: 'inkBase',
+                        typographyPreset: 'utilityBody020',
+                    },
+                    marker: {
+                        size: 'iconSize005',
+                    },
+                },
+            },
+            divider: {
+                spaceStack: 'space050',
+            },
+            promo: '',
+            promoOverrides: {
+                spaceStack: 'space020',
+                typographyPreset: 'utilityBody010',
+                stylePreset: 'inkPositive',
+            },
+            paymentKey: '',
+            paymentValue: '',
+            paymentOverrides: {
+                spaceStack: 'space040',
+                typographyPreset: { xs: 'utilityHeading020', lg: 'utilityHeading040' },
+                stylePreset: 'iinkContrast',
+            },
+            description: '',
+            descriptionOverrides: {
+                spaceStack: 'space060',
+                typographyPreset: 'utilityMeta010',
+                stylePreset: 'inkSubtle',
+            },
+            billingDetails: '',
+            billingDetailsOverrides: {
+                spaceStack: 'space040',
+                typographyPreset: 'utilityMeta010',
+                stylePreset: 'inkSubtle',
+            },
+        },
+    },
 };
 //# sourceMappingURL=baseContext.js.map

package/dist/context/baseContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"baseContext.js","sourceRoot":"","sources":["../../src/context/baseContext.tsx"],"names":[],"mappings":";;;AACA,0CAAuC;AACvC,0BAA0B;AACb,QAAA,WAAW,GAAmB;IACzC,OAAO,EAAE,oBAAQ;IACjB,MAAM,EAAE;QACN,iBAAiB,EAAE;YACjB,gBAAgB,EAAE;gBAChB,EAAE,EAAE,iBAAiB;gBACrB,EAAE,EAAE,iBAAiB;aACtB;YACD,WAAW,EAAE,aAAa;SAC3B;QACD,KAAK,EAAE,EAAE;QACT,cAAc,EAAE;YACd,gBAAgB,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,EAAE,EAAE,mBAAmB,EAAE;YACtE,WAAW,EAAE,aAAa;YAC1B,UAAU,EAAE;gBACV,EAAE,EAAE,UAAU;gBACd,EAAE,EAAE,UAAU;aACf;YACD,EAAE,EAAE,IAAI;SACT;QACD,WAAW,EAAE,EAAE;QACf,oBAAoB,EAAE;YACpB,gBAAgB,EAAE,EAAE,EAAE,EAAE,gBAAgB,EAAE,EAAE,EAAE,gBAAgB,EAAE;YAChE,WAAW,EAAE,SAAS;YACtB,UAAU,EAAE;gBACV,EAAE,EAAE,UAAU;gBACd,EAAE,EAAE,UAAU;aACf;SACF;QACD,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE;QAC9C,WAAW,EAAE,KAAK;KACnB;CACF,CAAA"}
+{"version":3,"file":"baseContext.js","sourceRoot":"","sources":["../../src/context/baseContext.tsx"],"names":[],"mappings":"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"}

package/dist/context/types.d.ts

@@ -1,5 +1,26 @@
-import { ReactNode } from 'react';
-import { HeaderProps, NavigationPrimaryProps } from '@newskit-render/shared-components';
+import React, { ReactNode } from 'react';
+import { HeaderProps, NavigationPrimaryProps, SubscriptionDetailsProps, CorePackageContentProps, SubscriptionDrawerProps, ButtonGroupProps } from '@newskit-render/shared-components';
+import { MQ, InlineMessageProps, TabProps } from 'newskit';
+interface InfoPanel extends InlineMessageProps {
+    spaceStack?: MQ<string>;
+}
+interface SubscriptionMessage {
+    text: string | React.ReactElement;
+    spaceStack?: MQ<string>;
+}
+interface PaymentDetailsPage {
+    infoPanel?: InfoPanel;
+    subscriptionDetails?: SubscriptionDetailsProps;
+    corePackageContent?: CorePackageContentProps;
+    subscriptionDrawer?: Partial<SubscriptionDrawerProps>;
+    subscriptionDrawerControl?: () => void;
+    subscriptionDrawerState?: boolean;
+    subscriptionMessage?: SubscriptionMessage;
+    subscriptionTabs?: {
+        tab1: Omit<TabProps, 'children'>;
+        tab2: Omit<TabProps, 'children'>;
+    };
+}
 export interface ContextOptions {
     baseUrl?: string;
     env?: Record<string, unknown>;
@@ -10,10 +31,13 @@ export interface ContextOptions {
     siteHost?: string;
     fbType?: string;
     fbImageUrl?: string;
-    header?: HeaderProps;
     navigationPrimary?: NavigationPrimaryProps;
+    header?: HeaderProps;
+    paymentDetailsPage?: PaymentDetailsPage;
+    buttonGroupProps?: Partial<ButtonGroupProps>;
 }
 export interface ContextProviderProps {
     children: ReactNode;
     context: ContextOptions;
 }
+export {};

package/dist/helpers/testHelpers.js

@@ -16,6 +16,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderWithContextTsl = exports.renderWithThemeTsl = void 0;
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types */
+/** Added as described in Jest docs: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+ *  Needed because at least one component uses <MediaQueryProvider> from newskit, which uses window.matchmedia
+ */
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(function (query) { return ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    }); }),
+});
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
 var newskit_1 = require("newskit");

package/dist/helpers/testHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"testHelpers.js","sourceRoot":"","sources":["../../src/helpers/testHelpers.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,oGAAoG;AACpG,gDAAyB;AACzB,gDAA2E;AAC3E,mCAA2E;AAC3E,sCAAoE;AAE7D,IAAM,kBAAkB,GAAG,UAChC,SAAiC,EACjC,KAA0C,EAC1C,KAA0C,EAC1C,OAAwC;IADxC,sBAAA,EAAA,QAAyB,2BAAiB;IAG1C,OAAA,IAAA,cAAS,EAAC,8BAAC,SAAS,eAAM,KAAW,EAAI,wBACpC,OAAO,KACV,OAAO,EAAE,UAAC,EAAY;gBAAV,QAAQ,cAAA;YAAO,OAAA,CACzB,8BAAC,uBAAa,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAiB,CACxD;QAF0B,CAE1B,IACD;AALF,CAKE,CAAA;AAXS,QAAA,kBAAkB,sBAW3B;AAEG,IAAM,oBAAoB,GAAG,UAClC,SAAiC,EACjC,KAA0C,EAC1C,OAA4B,EAC5B,OAAwC;IADxC,wBAAA,EAAA,YAA4B;IAG5B,OAAA,IAAA,cAAS,EAAC,8BAAC,SAAS,eAAM,KAAW,EAAI,wBACpC,OAAO,KACV,OAAO,EAAE,UAAC,EAAY;gBAAV,QAAQ,cAAA;YAAO,OAAA,CACzB,8BAAC,iCAAuB,IAAC,OAAO,EAAE,OAAO;gBACvC,8BAAC,uBAAa,IAAC,KAAK,EAAE,2BAAiB,IAAG,QAAQ,CAAiB,CAC3C,CAC3B;QAJ0B,CAI1B,IACD;AAPF,CAOE,CAAA;AAbS,QAAA,oBAAoB,wBAa7B"}
+{"version":3,"file":"testHelpers.js","sourceRoot":"","sources":["../../src/helpers/testHelpers.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,oGAAoG;AACpG;;GAEG;AACH,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE;IAC1C,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC;QAC9C,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;QACtB,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE;QACzB,gBAAgB,EAAE,IAAI,CAAC,EAAE,EAAE;QAC3B,mBAAmB,EAAE,IAAI,CAAC,EAAE,EAAE;QAC9B,aAAa,EAAE,IAAI,CAAC,EAAE,EAAE;KACzB,CAAC,EAT6C,CAS7C,CAAC;CACJ,CAAC,CAAA;AAEF,gDAAyB;AACzB,gDAA2E;AAC3E,mCAA2E;AAC3E,sCAAoE;AAE7D,IAAM,kBAAkB,GAAG,UAChC,SAAiC,EACjC,KAA0C,EAC1C,KAA0C,EAC1C,OAAwC;IADxC,sBAAA,EAAA,QAAyB,2BAAiB;IAG1C,OAAA,IAAA,cAAS,EAAC,8BAAC,SAAS,eAAM,KAAW,EAAI,wBACpC,OAAO,KACV,OAAO,EAAE,UAAC,EAAY;gBAAV,QAAQ,cAAA;YAAO,OAAA,CACzB,8BAAC,uBAAa,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAiB,CACxD;QAF0B,CAE1B,IACD;AALF,CAKE,CAAA;AAXS,QAAA,kBAAkB,sBAW3B;AAEG,IAAM,oBAAoB,GAAG,UAClC,SAAiC,EACjC,KAA0C,EAC1C,OAA4B,EAC5B,OAAwC;IADxC,wBAAA,EAAA,YAA4B;IAG5B,OAAA,IAAA,cAAS,EAAC,8BAAC,SAAS,eAAM,KAAW,EAAI,wBACpC,OAAO,KACV,OAAO,EAAE,UAAC,EAAY;gBAAV,QAAQ,cAAA;YAAO,OAAA,CACzB,8BAAC,iCAAuB,IAAC,OAAO,EAAE,OAAO;gBACvC,8BAAC,uBAAa,IAAC,KAAK,EAAE,2BAAiB,IAAG,QAAQ,CAAiB,CAC3C,CAC3B;QAJ0B,CAI1B,IACD;AAPF,CAOE,CAAA;AAbS,QAAA,oBAAoB,wBAa7B"}

package/dist/pages/PaymentDetails.js

@@ -10,26 +10,183 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaymentDetails = exports.paymentDetailsContext = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var Templates_1 = require("../Components/Templates");
 var PaymentDetailsRender_1 = require("../Components/Templates/PaymentDetailsRender");
+// import { IconFilledInfo, IconFilledCreditCard } from 'newskit'
+var newskit_1 = require("newskit");
+var shared_components_1 = require("@newskit-render/shared-components");
+var Paypal_1 = require("../Components/Icons/Paypal");
 var title = 'Payment details';
 exports.paymentDetailsContext = {
     siteTitle: title,
     header: {
         overline: 'Step 2 of 2',
         title: title,
+        spaceStack: { xs: 'space050', sm: 'space060' },
+    },
+    paymentDetailsPage: {
+        // infoPanel: {
+        //   icon: <IconFilledInfo overrides={{ size: 'iconSize020' }} />,
+        //   title: 'Why do we need your payment details?',
+        //   children:
+        //     'This is so your payment can be processed at the end of your trial if you choose to subscribe. You can cancel up to 48 hours before your free trial ends.',
+        //   spaceStack: 'space070',
+        // },
+        subscriptionDetails: {
+            banner: {
+                buttonText: 'View more',
+                message: "You'll pay £0 today and £0.50 per day after your 2 month trial",
+                title: '<Subscription name>',
+            },
+        },
+        corePackageContent: {
+            titleBar: {
+                text: 'Basic Digital',
+                link: {
+                    text: 'Change',
+                    href: '#',
+                    'aria-label': 'Change subscription',
+                },
+            },
+            image: {
+                src: '/MyAccount/display-base-header.svg',
+                alt: '',
+                spaceStack: 'space050',
+            },
+            benifitItems: [
+                'Instant unlimited access on your smartphone',
+                'A depth of content from Politics & Business to Sports & Life',
+            ],
+            promo: '1 month free',
+            paymentKey: 'Pay Today',
+            paymentValue: '£0.00',
+            description: '£0.50 per day thereafter',
+            billingDetails: 'Billed monthly after trial - 31/11/2021. Cancel anytime.',
+            backgroundColor: 'interface020',
+            padding: 'sizing050',
+        },
+        subscriptionDrawer: {
+            open: false,
+            titleBar: {
+                text: 'Basic Digital',
+                link: {
+                    text: 'Change',
+                    href: '#',
+                    'aria-label': 'Change subscription',
+                },
+            },
+            image: {
+                src: '/MyAccount/display-base-header.svg',
+                alt: '',
+                spaceStack: 'space050',
+            },
+            benifitItems: [
+                'Instant unlimited access on your smartphone',
+                'A depth of content from Politics & Business to Sports & Life',
+            ],
+            promo: '1 month free',
+            paymentKey: 'Pay Today',
+            paymentValue: '£0.00',
+            description: '£0.50 per day thereafter',
+            billingDetails: 'Billed monthly after trial - 31/11/2021. Cancel anytime.',
+        },
+        subscriptionMessage: {
+            text: (react_1.default.createElement(react_1.default.Fragment, null,
+                "By subscribing you confirm you have read and agreed to the",
+                react_1.default.createElement(shared_components_1.NextLink, { href: "#", type: "standalone" }, "Subscription & Cancellation Terms"),
+                ' ',
+                "and you acknowledge that your information will be used in accordance to our",
+                ' ',
+                react_1.default.createElement(shared_components_1.NextLink, { href: "#", type: "standalone" }, "Privacy and Cookie Policy"),
+                ".")),
+            spaceStack: 'space070',
+        },
+        subscriptionTabs: {
+            tab1: {
+                label: (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(newskit_1.IconFilledCreditCard, null),
+                    " Pay by card")),
+            },
+            tab2: {
+                label: (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Paypal_1.IconPayPal, null),
+                    " Paypal")),
+            },
+        },
+    },
+    buttonGroupProps: {
+        primaryText: 'Agree and Subscribe',
+        primaryButton: {
+            ariaLabel: 'Agree and Subscribe',
+            overrides: {
+                stylePreset: 'buttonSolidPositive',
+                width: '100%',
+            },
+            spaceStack: {
+                xs: 'space080',
+                sm: 'space000',
+            },
+        },
+        primaryCell: {
+            xs: 12,
+            sm: 6,
+            smOffset: 1,
+            md: 5,
+            mdOffset: 3,
+            xsOrder: 0,
+            smOrder: 1,
+        },
+        secureFlag: {
+            overrides: {
+                stylePreset: 'inkSubtle',
+                typographyPreset: 'utilityLabel010',
+                spaceInset: 'spaceInset000',
+            },
+            iconOverrides: {
+                size: 'iconSize020',
+                stylePreset: 'inkSubtle',
+                spaceInset: 'spaceInset000',
+                spaceInline: 'space020',
+            },
+            spaceStack: {
+                xs: 'space080',
+                sm: 'space000',
+            },
+        },
+        secureFlagCell: { xs: 12, sm: 5, md: 4, xsOrder: 1, smOrder: 0 },
     },
 };
 var PaymentDetails = function (_a) {
+    var _b, _c;
     var customTheme = _a.customTheme, setTheme = _a.setTheme, context = _a.context, url = _a.url, data = _a.data;
-    var enhancedContext = __assign(__assign({}, (context || exports.paymentDetailsContext)), { url: url, data: data });
-    return (react_1.default.createElement(Templates_1.LayoutTemplate, { context: enhancedContext, customTheme: customTheme, setTheme: setTheme },
+    var _d = (0, react_1.useState)((_c = (_b = (context || exports.paymentDetailsContext).paymentDetailsPage) === null || _b === void 0 ? void 0 : _b.subscriptionDrawer) === null || _c === void 0 ? void 0 : _c.open), openDraw = _d[0], setOpenDraw = _d[1];
+    var subscriptionDrawerControl = function () {
+        setOpenDraw(!openDraw);
+    };
+    var enhancedContext = __assign(__assign({}, (context || exports.paymentDetailsContext)), { paymentDetailsPage: __assign({ subscriptionDrawerControl: subscriptionDrawerControl, subscriptionDrawerState: openDraw }, (context || exports.paymentDetailsContext).paymentDetailsPage), url: url, data: data });
+    return (react_1.default.createElement(Templates_1.LayoutTemplate, { context: enhancedContext, customTheme: customTheme, setTheme: setTheme, fullWidth: true },
         react_1.default.createElement(PaymentDetailsRender_1.PaymentDetailsRender, null)));
 };
 exports.PaymentDetails = PaymentDetails;

package/dist/pages/PaymentDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentDetails.js","sourceRoot":"","sources":["../../src/pages/PaymentDetails.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,qDAAwD;AAGxD,qFAAmF;AAEnF,IAAM,KAAK,GAAG,iBAAiB,CAAA;AAElB,QAAA,qBAAqB,GAAmB;IACnD,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE;QACN,QAAQ,EAAE,aAAa;QACvB,KAAK,OAAA;KACN;CACF,CAAA;AAEM,IAAM,cAAc,GAA4B,UAAC,EAMvD;QALC,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,GAAG,SAAA,EACH,IAAI,UAAA;IAEJ,IAAM,eAAe,yBAChB,CAAC,OAAO,IAAI,6BAAqB,CAAC,KACrC,GAAG,KAAA,EACH,IAAI,MAAA,GACL,CAAA;IACD,OAAO,CACL,8BAAC,0BAAc,IACb,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ;QAElB,8BAAC,2CAAoB,OAAG,CACT,CAClB,CAAA;AACH,CAAC,CAAA;AArBY,QAAA,cAAc,kBAqB1B"}
+{"version":3,"file":"PaymentDetails.js","sourceRoot":"","sources":["../../src/pages/PaymentDetails.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/checkout",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Newskit Render - Checkout package",
   "author": "",
   "license": "UNLICENSED",
@@ -56,7 +56,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@newskit-render/shared-components": "^0.23.0",
+    "@newskit-render/shared-components": "^0.24.0",
     "newskit": "^4.2.0"
   }
 }