pds-dev-kit-web-test 0.1.10 → 0.2.0

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -0,0 +1,72 @@
+import type React from 'react';
+export declare const ComponentNames: {
+    TEXT: string;
+    IMAGE: string;
+    BUTTON: string;
+    RICH_TEXT: string;
+    DIVIDER: string;
+    YOUTUBE: string;
+    TWITTER: string;
+    INSTAGRAM: string;
+};
+export declare type BlockComponents = typeof ComponentNames;
+export declare type BlockNames = keyof BlockComponents;
+export declare type BlockId = string;
+export declare type LinkTypes = 'INTERNAL' | 'EXTERNAL';
+export declare type LinkContentType = {
+    type: LinkTypes;
+    url: string;
+};
+export declare type TextComponentDataType = {
+    type: BlockComponents['TEXT'];
+    value: {
+        text: string;
+    };
+};
+export declare type ImageComponentDataType = {
+    type: BlockComponents['IMAGE'];
+    value: {
+        src: string;
+        alt: string;
+    };
+};
+export declare type RichTextComponentDataType = {
+    type: BlockComponents['RICH_TEXT'];
+    value: {
+        text: string;
+    };
+};
+export declare type ButtonComponentDataType = {
+    type: BlockComponents['BUTTON'];
+    value: {
+        text: string;
+    };
+};
+export declare type DividerComponentDataType = {
+    type: BlockComponents['DIVIDER'];
+    value: {
+        size: number;
+    };
+};
+export declare type TwitterComponentDataType = {
+    type: BlockComponents['TWITTER'];
+    value: {
+        accountId: string;
+    };
+};
+export declare type YoutubeComponentDataType = {
+    type: BlockComponents['YOUTUBE'];
+    value: {
+        src: string;
+        startAt: number;
+        endAt: number;
+    };
+};
+export declare type ComponentDataPairType = TextComponentDataType | ImageComponentDataType | TwitterComponentDataType | RichTextComponentDataType | ButtonComponentDataType | DividerComponentDataType | YoutubeComponentDataType;
+export declare type ContentType = {
+    data: ComponentDataPairType;
+    link?: LinkContentType;
+};
+export declare type StyleType = React.CSSProperties;
+export declare type LayoutType = React.CSSProperties;
+export declare type AnimationType = React.CSSProperties;

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentNames = void 0;
+exports.ComponentNames = {
+    TEXT: 'TEXT',
+    IMAGE: 'IMAGE',
+    BUTTON: 'BUTTON',
+    RICH_TEXT: 'RICH_TEXT',
+    DIVIDER: 'DIVIDER',
+    YOUTUBE: 'YOUTUBE',
+    TWITTER: 'TWITTER',
+    INSTAGRAM: 'INSTAGRAM'
+};

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/MembershipSection.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ISection } from '../../../../DynamicLayout/types';
+declare function EditTypeMembershipSection({ ...props }: ISection): JSX.Element;
+export default EditTypeMembershipSection;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/MembershipSection.js

@@ -0,0 +1,79 @@
+"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 __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 react_1 = require("react");
+var components_1 = require("../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var templates_1 = require("./templates");
+function EditTypeMembershipSection(_a) {
+    var props = __rest(_a, []);
+    var template = props.template;
+    var resizeTarget = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(true), isWideView = _b[0], setIsWideView = _b[1];
+    var handleCheckIsWideView = function (value) {
+        setIsWideView(value);
+    };
+    /**
+     * @when : 화면 진입 시
+     * @expected : 콘텐츠 영역의 크기를 확인해서 wideView인지 확인하고, observer를 추가합니다.
+     * @clear : observer를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        var element = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current;
+        if (!element)
+            return;
+        var observer = new ResizeObserver(function (entries) {
+            entries.forEach(function (entry) {
+                handleCheckIsWideView(entry.contentRect.width > 1500);
+            });
+        });
+        observer.observe(element);
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Membership", ref: resizeTarget }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: template, isWideView: isWideView }, void 0) }), void 0) }), void 0));
+}
+var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+function TemplateMather(_a) {
+    var styleTemplate = _a.styleTemplate, isWideView = _a.isWideView;
+    switch (styleTemplate) {
+        case 'PRG_MEMBERSHIP_DISPLAY_A':
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, { isWideView: isWideView }, void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY_B':
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, { isWideView: isWideView }, void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}
+exports.default = EditTypeMembershipSection;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/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.EditTypeMembershipSection = void 0;
+var MembershipSection_1 = require("./MembershipSection");
+Object.defineProperty(exports, "EditTypeMembershipSection", { enumerable: true, get: function () { return __importDefault(MembershipSection_1).default; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/TemplateA.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare function TemplateA({ isWideView }: {
+    isWideView: boolean;
+}): JSX.Element;
+export default TemplateA;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/TemplateA.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Section_1 = require("../../../../../../DynamicLayout/components/Section");
+var dynamicLayoutContext_1 = require("../../../../../../DynamicLayout/dynamicLayoutContext");
+var desktop_1 = require("./desktop");
+var mobile_1 = require("./mobile");
+function TemplateA(_a) {
+    var isWideView = _a.isWideView;
+    var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var programData = section.programData;
+    if (!programData || !programData.preview.resources.real.membershipDisplay) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
+            MOBILE: ((0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, { membershipDisplay: programData.preview.resources.real.membershipDisplay }, void 0)),
+            DESKTOP: ((0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, { membershipDisplay: programData.preview.resources.real.membershipDisplay, isWideView: isWideView }, void 0))
+        }[device] }, void 0));
+}
+exports.default = TemplateA;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/D_TemplateA.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { IMembershipDisplay } from '../../../../../../../DynamicLayout/types';
+declare type Props = {
+    membershipDisplay: IMembershipDisplay;
+    isWideView: boolean;
+};
+declare function TemplateA({ membershipDisplay, isWideView }: Props): JSX.Element;
+export default TemplateA;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/D_TemplateA.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 styled_components_1 = __importDefault(require("styled-components"));
+var EmptyMembershipSheet_1 = __importDefault(require("./components/EmptyMembershipSheet"));
+var MembershipSheet_1 = __importDefault(require("./components/MembershipSheet"));
+var SectionContents_1 = __importDefault(require("./components/SectionContents"));
+function TemplateA(_a) {
+    var membershipDisplay = _a.membershipDisplay, isWideView = _a.isWideView;
+    var orderedMemberships = membershipDisplay.connectedMemberships
+        .slice()
+        .sort(function (a, b) { return a.order - b.order; });
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), orderedMemberships.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipSheet_1.default, { connectedMemberships: orderedMemberships, isWideView: isWideView }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipSheet_1.default, {}, void 0))] }, void 0));
+}
+var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: ", " auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n"], ["\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  margin: ", " auto;\n  max-width: var(--max-width-px);\n  min-width: var(--min-width-px);\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingK;
+});
+exports.default = TemplateA;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/EmptyMembershipSheet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function EmptyMembershipSheet(): JSX.Element;
+export default EmptyMembershipSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/EmptyMembershipSheet.js

@@ -0,0 +1,35 @@
+"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);
+};
+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 panels_1 = require("../../../../../../../../../desktop/panels");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+function EmptyMembershipSheet() {
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var itemToneType = section.styles.itemToneType;
+    return ((0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
+            backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "leadParaRegular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0));
+}
+exports.default = EmptyMembershipSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipBenefitInfo.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { IMembershipBenefitInfo } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    membershipBenefitInfo: IMembershipBenefitInfo;
+    itemToneTextLabelColor: string;
+};
+declare function MembershipBenefitInfo({ membershipBenefitInfo, itemToneTextLabelColor }: Props): JSX.Element;
+export default MembershipBenefitInfo;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipBenefitInfo.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../../../../../../DynamicLayout/components");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+function MembershipBenefitInfo(_a) {
+    var membershipBenefitInfo = _a.membershipBenefitInfo, itemToneTextLabelColor = _a.itemToneTextLabelColor;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), membershipBenefitInfo.benefitAlpha && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitAlpha, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)), membershipBenefitInfo.benefitBravo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitBravo, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitCharlie && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitCharlie, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitDelta && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitDelta, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0)), membershipBenefitInfo.benefitEcho && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitEcho, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0))] }, void 0));
+}
+exports.default = MembershipBenefitInfo;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.d.ts

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js

@@ -0,0 +1,85 @@
+"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 panels_1 = require("../../../../../../../../../desktop/panels");
+var components_1 = require("../../../../../../../../../hybrid/components");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var formatCurrency_1 = __importDefault(require("../../../../../../../../DynamicLayout/utils/formatCurrency"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function MembershipPlanSheet(_a) {
+    var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, sectionStyles = _a.sectionStyles;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var subscriptionProduct = connectedSubscriptionProducts.subscriptionProduct;
+    var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee, isDeactivated = subscriptionProduct.isDeactivated;
+    var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
+    var productFeeText = (0, react_1.useMemo)(function () {
+        var amount = fee.amount, currency = fee.currency;
+        var price = (0, formatCurrency_1.default)(amount, currency);
+        switch (type) {
+            case 'COUPON_FREE_FINITE':
+            case 'COUPON_FREE_INFINITE':
+            case 'FREE_FINITE':
+            case 'FREE_INFINITE':
+                return t('str_free');
+        }
+        switch (currency) {
+            case 'KRW':
+                return t('str_5339', { price: price });
+            case 'USD':
+                return t('str_5831', { price: price });
+            default:
+                return '';
+        }
+    }, [subscriptionProduct]);
+    var itemActionButtonText = (0, react_1.useMemo)(function () {
+        var itemActionButtonTextType = {
+            A: 'str_5350',
+            B: 'str_5351',
+            C: 'str_5352',
+            D: 'str_5353',
+            E: 'str_5354'
+        }[programmedItemActionButtonTextType];
+        if (isDeactivated) {
+            return t('str_5300');
+        }
+        switch (type) {
+            case 'COUPON_FREE_FINITE':
+            case 'COUPON_FREE_INFINITE':
+            case 'FREE_FINITE':
+            case 'FREE_INFINITE':
+                return t('str_start');
+            default:
+                return t(itemActionButtonTextType);
+        }
+    }, [programmedItemActionButtonTextType, type]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", paddingBottom: "spacing_d", overrideCSS: {
+                    display: 'flex',
+                    cursor: 'pointer',
+                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
+                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t(constants_1.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT[type]), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, wordBreak: "break_all", ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, 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.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconName: "ic_arrow_down", iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: isDeactivated ? undefined : itemHighlightingColorInHex, buttonText: itemActionButtonText, buttonTextColor: isDeactivated ? undefined : '#FDFDFDFF', state: isDeactivated ? 'disabled' : 'normal', "$paddingBottom": "56px" }, void 0)] }, void 0));
+}
+var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_MembershipInfoBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
+exports.default = MembershipPlanSheet;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.d.ts

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.js

@@ -0,0 +1,93 @@
+"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 __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;
+};
+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 panels_1 = require("../../../../../../../../../desktop/panels");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var styled_components_1 = __importStar(require("styled-components"));
+var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
+var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
+var NarrowMembershipListView_1 = __importDefault(require("./NarrowMembershipListView"));
+var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
+var WideMembershipListView_1 = __importDefault(require("./WideMembershipListView"));
+function MembershipSheet(_a) {
+    var connectedMemberships = _a.connectedMemberships, isWideView = _a.isWideView;
+    var _b = (0, react_1.useState)(0), currentIndex = _b[0], setCurrentIndex = _b[1];
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var _c = connectedMemberships[currentIndex], membership = _c.membership, connectedSubscriptionProducts = _c.connectedSubscriptionProducts;
+    var _d = section.styles, itemHighlightingColorInHex = _d.itemHighlightingColorInHex, itemToneType = _d.itemToneType;
+    var handleMembershipClick = function (currentIndex) {
+        setCurrentIndex(currentIndex);
+    };
+    var isOnlyMembership = connectedMemberships.length === 1;
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipBox, __assign({ isWideView: isWideView }, { children: [isWideView ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isOnlyMembership && ((0, jsx_runtime_1.jsx)(WideMembershipListView_1.default, { connectedMemberships: connectedMemberships, currentIndex: currentIndex, handleMembershipClick: handleMembershipClick, itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex }, void 0)) }, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isOnlyMembership && ((0, jsx_runtime_1.jsx)(NarrowMembershipListView_1.default, { connectedMemberships: connectedMemberships, currentIndex: currentIndex, handleMembershipClick: handleMembershipClick, itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex }, void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(S_ScrollBarVisible, __assign({ isWideView: isWideView, itemToneType: itemToneType, isOnlyMembership: isOnlyMembership }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ overrideCSS: {
+                        backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+                        display: 'flex',
+                        flex: '2',
+                        overflow: 'auto',
+                        padding: isOnlyMembership ? '56px 10%' : '56px 0 56px 56px'
+                    }, width: "100%", height: "720px", shapeType: "round" }, { children: [membership.membershipCardTemplate && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membership.membershipCardTemplate }, void 0)), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isOnlyMembership: isOnlyMembership }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProducts: connectedSubscriptionProducts[0], sectionStyles: section.styles }, void 0)) : ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0) }), void 0)] }), void 0));
+}
+var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ", ";\n    border: 8px solid transparent;\n    border-radius: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    height: 10px;\n    width: 24px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ", ";\n    border: 8px solid transparent;\n    border-radius: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    height: 10px;\n    width: 24px;\n  }\n"])), function (_a) {
+    var itemToneType = _a.itemToneType;
+    return constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].scrollbarColor;
+});
+var S_ScrollBarVisible = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n\n  & > div {\n    ", "\n  }\n"], ["\n  width: ", ";\n\n  & > div {\n    ", "\n  }\n"])), function (_a) {
+    var isWideView = _a.isWideView, isOnlyMembership = _a.isOnlyMembership;
+    return isWideView && !isOnlyMembership ? 'calc(67% - 48px)' : '100%';
+}, scrollVisible);
+var S_MembershipBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  position: relative;\n"])), function (_a) {
+    var isWideView = _a.isWideView;
+    return (isWideView ? 'row' : 'column');
+});
+var S_MembershipDetailBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  width: 100%;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  width: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingH;
+}, function (_a) {
+    var isOnlyMembership = _a.isOnlyMembership, theme = _a.theme;
+    return (isOnlyMembership ? 0 : theme.spacing.spacingH);
+});
+exports.default = MembershipSheet;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { IConnectedMembership, TypeOfItemToneType } from '../../../../../../../../DynamicLayout/types';
+declare type Props = {
+    connectedMemberships: IConnectedMembership[];
+    itemHighlightingColorInHex: string;
+    itemToneType: TypeOfItemToneType;
+    currentIndex: number;
+    handleMembershipClick: (currentIndex: number) => void;
+};
+declare function NarrowMembershipListView({ connectedMemberships, itemHighlightingColorInHex, itemToneType, currentIndex, handleMembershipClick }: Props): JSX.Element;
+export default NarrowMembershipListView;