pds-dev-kit-web 2.0.8 → 2.0.9-alpha.0

package/dist/index.d.ts

@@ -25,6 +25,6 @@ export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_
 export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
 import { DynamicLayout } from './src/sub';
 export { DynamicLayout };
-import type { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfSectionAction } from './src/sub/DynamicLayout/types';
-export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, TypeOfSectionAction, ISection, ISectionProperties, ISectionStyles, IItem };
+import type { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfSectionAction, TypeOfProgrammedItemActionButtonTextType, TypeOfItemToneType, IProgrammedSectionComponents, IProgrammedSectionPreviewData } from './src/sub/DynamicLayout/types';
+export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, TypeOfSectionAction, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfProgrammedItemActionButtonTextType, TypeOfItemToneType, IProgrammedSectionComponents, IProgrammedSectionPreviewData };
 export { AdminList, AdminListHeader, AdminListItem, BulkActionBar, ToolBar } from './src/sub';

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, programmedSectionPreviewData }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -25,11 +25,19 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, programmedSectionPreviewData = _a.programmedSectionPreviewData;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
-    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler, sectionActionHandler: sectionActionHandler } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), mode !== 'EDIT' &&
+    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+            device: device,
+            mode: mode,
+            isPreview: isPreview,
+            navigationHandler: navigationHandler,
+            sectionActionHandler: sectionActionHandler,
+            programmedSectionComponents: programmedSectionComponents,
+            programmedSectionPreviewData: programmedSectionPreviewData
+        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] }), void 0));
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -10,16 +10,50 @@ 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 });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var SectionMatcher_1 = require("../SectionMatcher");
+var sections_1 = require("../../../DynamicLayout/sections");
+var GlobalFixedOverlay_1 = __importDefault(require("./components/GlobalFixedOverlay/GlobalFixedOverlay"));
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
     var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id) }), section.id)); })) }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, iframeSection), void 0) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, section), void 0) }), section.id)); })), (0, jsx_runtime_1.jsx)(GlobalFixedOverlay_1.default, { filteredSortedSection: filteredSortedSection }, void 0)] }, void 0));
 }
 exports.default = EditModeSectionMatcher;
+function Matcher(_a) {
+    var props = __rest(_a, []);
+    var schema = props.manifest.schema;
+    switch (schema) {
+        case 'BASE_INTRO':
+            return (0, jsx_runtime_1.jsx)(sections_1.IntroSection, __assign({}, props), void 0);
+        case 'BASE_CONTENTS':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsSection, __assign({}, props), void 0);
+        case 'BASE_CONTENTS_CAROUSEL':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsCarouselSection, __assign({}, props), void 0);
+        case 'BASE_FOOTER':
+            return (0, jsx_runtime_1.jsx)(sections_1.FooterSection, __assign({}, props), void 0);
+        case 'BASE_INFO_BOX':
+            return (0, jsx_runtime_1.jsx)(sections_1.InfoBoxSection, __assign({}, props), void 0);
+        case 'EXP_IFRAME':
+            return (0, jsx_runtime_1.jsx)(sections_1.FullscreenIframeSection, __assign({}, props), void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY':
+            return (0, jsx_runtime_1.jsx)(sections_1.EditTypeMembershipSection, __assign({}, props), void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/GlobalFixedOverlay.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ISection } from '../../../../../DynamicLayout/types';
+declare type Props = {
+    filteredSortedSection: ISection[];
+};
+declare function GlobalFixedOverlay({ filteredSortedSection }: Props): JSX.Element;
+export default GlobalFixedOverlay;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/GlobalFixedOverlay.js

@@ -0,0 +1,47 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var dynamicLayoutContext_1 = require("../../../../../DynamicLayout/dynamicLayoutContext");
+var styled_components_1 = __importDefault(require("styled-components"));
+var MembershipSectionGlobalFixedOverlay_1 = require("./MembershipSectionGlobalFixedOverlay");
+function GlobalFixedOverlay(_a) {
+    var filteredSortedSection = _a.filteredSortedSection;
+    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, programmedSectionPreviewData = _b.programmedSectionPreviewData;
+    if (!programmedSectionPreviewData) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var showMembershipFixedOverlay = getShowMembershipFixedOverlay({
+        filteredSortedSection: filteredSortedSection,
+        programmedSectionPreviewData: programmedSectionPreviewData,
+        device: device
+    });
+    return ((0, jsx_runtime_1.jsx)(S_GlobalFixedOverlay, { children: showMembershipFixedOverlay && ((0, jsx_runtime_1.jsx)(MembershipSectionGlobalFixedOverlay_1.MembershipSectionGlobalFixedOverlay, { orderedConnectedMemberships: showMembershipFixedOverlay.orderedConnectedMemberships, membershipSectionStyle: showMembershipFixedOverlay.membershipSectionStyle }, void 0)) }, void 0));
+}
+var S_GlobalFixedOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+function getShowMembershipFixedOverlay(_a) {
+    var filteredSortedSection = _a.filteredSortedSection, programmedSectionPreviewData = _a.programmedSectionPreviewData, device = _a.device;
+    var membershipSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'PRG_MEMBERSHIP_DISPLAY'; });
+    if (!programmedSectionPreviewData.MEMBERSHIP_DISPLAY ||
+        !membershipSection ||
+        device !== 'MOBILE') {
+        return null;
+    }
+    var connectedMemberships = programmedSectionPreviewData.MEMBERSHIP_DISPLAY.connectedMemberships;
+    var styles = membershipSection.styles;
+    var orderedConnectedMemberships = connectedMemberships.sort(function (a, b) { return a.order - b.order; });
+    var showMembershipFixedOverlay = {
+        orderedConnectedMemberships: orderedConnectedMemberships,
+        membershipSectionStyle: styles
+    };
+    return showMembershipFixedOverlay;
+}
+exports.default = GlobalFixedOverlay;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/MembershipSectionGlobalFixedOverlay.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { IConnectedMembership, ISectionStyles } from '../../../../../../DynamicLayout/types';
+declare type Props = {
+    orderedConnectedMemberships: IConnectedMembership[];
+    membershipSectionStyle: ISectionStyles;
+};
+declare function MembershipSectionGlobalFixedOverlay({ orderedConnectedMemberships, membershipSectionStyle }: Props): JSX.Element;
+export default MembershipSectionGlobalFixedOverlay;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/MembershipSectionGlobalFixedOverlay.js

@@ -0,0 +1,80 @@
+"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++) {
+            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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var SectionSheet_1 = require("../../../../../../../mobile/panels/SectionSheet");
+var components_1 = require("../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var styled_components_1 = __importDefault(require("styled-components"));
+var MembershipSectionGlobalFixedOverlayMembershipList_1 = __importDefault(require("./MembershipSectionGlobalFixedOverlayMembershipList"));
+function MembershipSectionGlobalFixedOverlay(_a) {
+    var orderedConnectedMemberships = _a.orderedConnectedMemberships, membershipSectionStyle = _a.membershipSectionStyle;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _b = (0, react_1.useState)(false), isBottomSheetOpen = _b[0], setIsBottomSheetOpen = _b[1];
+    var _c = (0, react_1.useState)(0), currentIndex = _c[0], setCurrentIndex = _c[1];
+    var connectedSubscriptionProducts = orderedConnectedMemberships[currentIndex].connectedSubscriptionProducts;
+    var itemHighlightingColorInHex = membershipSectionStyle.itemHighlightingColorInHex, itemToneType = membershipSectionStyle.itemToneType, programmedItemActionButtonTextType = membershipSectionStyle.programmedItemActionButtonTextType;
+    var handlePrevMembershipClick = function () {
+        if (currentIndex === 0) {
+            return;
+        }
+        setCurrentIndex(currentIndex - 1);
+    };
+    var handleNextMembershipClick = function () {
+        if (currentIndex === orderedConnectedMemberships.length - 1) {
+            return;
+        }
+        setCurrentIndex(currentIndex + 1);
+    };
+    var handleBottomSheetOpen = function () {
+        setIsBottomSheetOpen(true);
+    };
+    var handleBottomSheetClose = function () {
+        setIsBottomSheetOpen(false);
+    };
+    var bottomSheetButtonText = (0, react_1.useMemo)(function () {
+        if (!isBottomSheetOpen) {
+            return { A: 'str_5350', B: 'str_5351', C: 'str_5352', D: 'str_5353', E: 'str_5354' }[programmedItemActionButtonTextType];
+        }
+        return connectedSubscriptionProducts.length > 0
+            ? t('str_5339', {
+                price: connectedSubscriptionProducts[0].subscriptionProduct.fee
+            })
+            : t('str_5300');
+    }, [isBottomSheetOpen, programmedItemActionButtonTextType, connectedSubscriptionProducts]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(SectionSheet_1.SectionSheet, __assign({ width: "100%", height: "auto", overrideCSS: {
+                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+                    borderTopLeftRadius: '24px',
+                    borderTopRightRadius: '24px',
+                    bottom: '0',
+                    left: '0',
+                    position: 'fixed',
+                    boxShadow: '0 0 14px rgba(0,0,0,0.2)',
+                    zIndex: 100
+                } }, { children: [(0, jsx_runtime_1.jsx)("div", { children: isBottomSheetOpen && orderedConnectedMemberships.length > 0 && ((0, jsx_runtime_1.jsx)(MembershipSectionGlobalFixedOverlayMembershipList_1.default, { currentMembership: orderedConnectedMemberships[currentIndex], isFirstItem: currentIndex === 0, isLastItem: currentIndex === orderedConnectedMemberships.length - 1, itemToneType: itemToneType, handlePrevMembershipClick: handlePrevMembershipClick, handleNextMembershipClick: handleNextMembershipClick }, void 0)) }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", buttonText: bottomSheetButtonText, onClick: handleBottomSheetOpen }, void 0)] }), void 0), isBottomSheetOpen && (0, jsx_runtime_1.jsx)(S_DimCover, { onClick: handleBottomSheetClose }, void 0)] }, void 0));
+}
+var S_DimCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 11;\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 11;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_pages_section_dimmed;
+});
+exports.default = MembershipSectionGlobalFixedOverlay;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/MembershipSectionGlobalFixedOverlayMembershipList.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { IConnectedMembership, TypeOfItemToneType } from '../../../../../../DynamicLayout/types';
+declare type Props = {
+    currentMembership: IConnectedMembership;
+    isFirstItem: boolean;
+    isLastItem: boolean;
+    itemToneType: TypeOfItemToneType;
+    handlePrevMembershipClick: () => void;
+    handleNextMembershipClick: () => void;
+};
+declare function MembershipSectionGlobalFixedOverlayMembershipList({ currentMembership, isFirstItem, isLastItem, itemToneType, handlePrevMembershipClick, handleNextMembershipClick }: Props): JSX.Element;
+export default MembershipSectionGlobalFixedOverlayMembershipList;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/MembershipSectionGlobalFixedOverlayMembershipList.js

@@ -0,0 +1,27 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var pdsOriginal_1 = require("../../../../../../DynamicLayout/components/pdsOriginal");
+var components_1 = require("../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var styled_components_1 = __importDefault(require("styled-components"));
+var MembershipSectionGlobalFixedOverlayPlanSheet_1 = __importDefault(require("./MembershipSectionGlobalFixedOverlayPlanSheet"));
+function MembershipSectionGlobalFixedOverlayMembershipList(_a) {
+    var currentMembership = _a.currentMembership, isFirstItem = _a.isFirstItem, isLastItem = _a.isLastItem, itemToneType = _a.itemToneType, handlePrevMembershipClick = _a.handlePrevMembershipClick, handleNextMembershipClick = _a.handleNextMembershipClick;
+    var membership = currentMembership.membership, connectedSubscriptionProducts = currentMembership.connectedSubscriptionProducts;
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipList, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipCard, { children: [(0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconName: "ic_arrow_left", isDisabled: isFirstItem, onClick: handlePrevMembershipClick, state: isFirstItem ? 'disabled' : 'normal' }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membership.membershipCardTemplate, cardWidth: 120 }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconName: "ic_arrow_right", isDisabled: isLastItem, onClick: handleNextMembershipClick, state: isLastItem ? 'disabled' : 'normal' }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: membership.title, textAlign: "center", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, styleTheme: "leadParaBold" }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(MembershipSectionGlobalFixedOverlayPlanSheet_1.default, { connectedSubscriptionProducts: connectedSubscriptionProducts, itemToneType: itemToneType }, void 0)] }, void 0));
+}
+var S_MembershipList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  position: relative;\n  width: 100%;\n"], ["\n  margin-bottom: ", ";\n  position: relative;\n  width: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_MembershipCard = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n"])));
+exports.default = MembershipSectionGlobalFixedOverlayMembershipList;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/MembershipSectionGlobalFixedOverlayPlanSheet.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { IConnectedSubscriptionProducts, TypeOfItemToneType } from '../../../../../../DynamicLayout/types';
+declare type Props = {
+    connectedSubscriptionProducts: IConnectedSubscriptionProducts[];
+    itemToneType: TypeOfItemToneType;
+};
+declare function MembershipPlanSheet({ connectedSubscriptionProducts, itemToneType }: Props): JSX.Element;
+export default MembershipPlanSheet;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/MembershipSectionGlobalFixedOverlayPlanSheet.js

@@ -0,0 +1,39 @@
+"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++) {
+            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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var panels_1 = require("../../../../../../../desktop/panels");
+var pdsOriginal_1 = require("../../../../../../DynamicLayout/components/pdsOriginal");
+var components_1 = require("../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var styled_components_1 = __importDefault(require("styled-components"));
+function MembershipPlanSheet(_a) {
+    var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, itemToneType = _a.itemToneType;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    return ((0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", overrideCSS: {
+            backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor,
+            display: 'flex'
+        } }, { children: connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: connectedSubscriptionProducts[0].subscriptionProduct.type || '', styleTheme: "body2Regular", textAlign: "left", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, lineLimit: 2, wordBreak: "break_all", ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: connectedSubscriptionProducts[0].subscriptionProduct.title || '', styleTheme: "body2Bold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, wordBreak: "break_all", textAlign: "left" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.ColorOverrideIcon, { iconName: "ic_arrow_down", iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(S_ListEmptyMessageWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: t('str_5300'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, ellipsisMode: "use" }, void 0) }, void 0)) }), void 0));
+}
+var S_MembershipInfoBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var S_ListEmptyMessageWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 49px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 49px;\n"])));
+exports.default = MembershipPlanSheet;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/index.d.ts

@@ -0,0 +1 @@
+export { default as MembershipSectionGlobalFixedOverlay } from './MembershipSectionGlobalFixedOverlay';

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MembershipSectionGlobalFixedOverlay = void 0;
+var MembershipSectionGlobalFixedOverlay_1 = require("./MembershipSectionGlobalFixedOverlay");
+Object.defineProperty(exports, "MembershipSectionGlobalFixedOverlay", { enumerable: true, get: function () { return __importDefault(MembershipSectionGlobalFixedOverlay_1).default; } });

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/index.d.ts

@@ -0,0 +1 @@
+export { default as GlobalFixedOverlay } from './GlobalFixedOverlay';

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalFixedOverlay = void 0;
+var GlobalFixedOverlay_1 = require("./GlobalFixedOverlay");
+Object.defineProperty(exports, "GlobalFixedOverlay", { enumerable: true, get: function () { return __importDefault(GlobalFixedOverlay_1).default; } });

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/index.d.ts

@@ -0,0 +1 @@
+export { GlobalFixedOverlay } from './GlobalFixedOverlay';

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalFixedOverlay = void 0;
+var GlobalFixedOverlay_1 = require("./GlobalFixedOverlay");
+Object.defineProperty(exports, "GlobalFixedOverlay", { enumerable: true, get: function () { return GlobalFixedOverlay_1.GlobalFixedOverlay; } });

package/dist/src/sub/DynamicLayout/components/SectionMatcher/SectionMatcher.js

@@ -40,6 +40,8 @@ function SectionMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(sections_1.InfoBoxSection, __assign({}, props), void 0);
         case 'EXP_IFRAME':
             return (0, jsx_runtime_1.jsx)(sections_1.FullscreenIframeSection, __assign({}, props), void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY':
+            return (0, jsx_runtime_1.jsx)(sections_1.NormalTypeMembershipSection, __assign({}, props), void 0);
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }

package/dist/src/sub/DynamicLayout/mock_samplePage.d.ts

@@ -1,4 +1,4 @@
-import type { ISection } from './types';
+import type { IMembershipDisplay, ISection } from './types';
 export declare const samplePageIntroSection: ISection;
 export declare const samplePageContentsCarouselSection: ISection;
 export declare const samplePageIntroSection2: ISection;
@@ -7,4 +7,6 @@ export declare const samplePageInfoBoxSection: ISection;
 export declare const samplePageIntroSection3: ISection;
 export declare const samplePageFooterSection: ISection;
 export declare const samplePageFullscreenIframeSection: ISection;
+export declare const samplePageMembershipSection: ISection;
+export declare const samplePageMemberships: IMembershipDisplay;
 export declare const samplePage: ISection[];