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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MembershipPreviewDataMock = exports.MembershipSectionsMock = exports.SampleSectionsMock = void 0;
+exports.MembershipSectionsMock = exports.SampleSectionsMock = void 0;
 exports.SampleSectionsMock = [
     {
         type: 'DESIGNED',
@@ -1344,21 +1344,18 @@ exports.MembershipSectionsMock = [
         updatedAt: '2023-01-12T08:03:48'
     },
     {
+        display: true,
         type: 'PROGRAMMED',
         program: 'MEMBERSHIP_DISPLAY',
-        display: true,
-        dynamicLayoutSectionItems: null,
+        dynamicLayoutSectionItems: [],
         id: 6010,
-        insertedAt: '2023-01-06T09:05:45',
         manifest: {
             availableProperties: [
                 'title',
                 'description',
                 'button_alpha_label',
                 'button_alpha_link_type',
-                'button_alpha_link_src',
-                'section_content_media_type',
-                'section_content_media_src'
+                'button_alpha_link_src'
             ],
             availableStyles: [
                 'title_color_in_hex',
@@ -1377,7 +1374,7 @@ exports.MembershipSectionsMock = [
             availableTemplates: ['PRG_MEMBERSHIP_DISPLAY_A', 'PRG_MEMBERSHIP_DISPLAY_B'],
             schema: 'PRG_MEMBERSHIP_DISPLAY'
         },
-        order: 10,
+        order: 8,
         properties: {
             buttonAlphaLabel: 'Lorem Ipsum',
             buttonAlphaLinkSrc: 'https://team.publ.space',
@@ -1398,126 +1395,139 @@ exports.MembershipSectionsMock = [
             carouselAutoplayTime: 3,
             carouselInfiniteLoopMode: 'NO_USE',
             description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
-            itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
             sectionContentMediaSrc: '',
             sectionContentMediaType: 'IMAGE',
             title: 'Lorem Ipsum',
-            multiPurposeUrl: 'https://app.publr.co/'
+            multiPurposeUrl: 'https://app.publr.co/',
+            itemLinkMethod: 'NONE'
         },
         styles: {
-            backgroundColorInHex: '#FF1D973B',
+            backgroundColorInHex: '#4A5D78AB',
             backgroundMediaSrc: '',
             backgroundMediaType: 'IMAGE',
             backgroundOverlayColorInHex: '#FFFFFF00',
-            buttonAlphaBackgroundColorInHex: '#FFC0CBFF',
+            buttonAlphaBackgroundColorInHex: '#313131FF',
             buttonAlphaDesignType: 'C',
             buttonAlphaLabelColorInHex: '#f5efd9FF',
-            buttonBravoBackgroundColorInHex: '#FFC0CBFF',
+            buttonBravoBackgroundColorInHex: '#313131FF',
             buttonBravoDesignType: 'E',
             buttonBravoLabelColorInHex: '#FFFFFFFF',
             buttonCharlieBackgroundColorInHex: '#465FF000',
             buttonCharlieDesignType: 'E',
             buttonCharlieLabelColorInHex: '#FFFFFFFF',
-            buttonDeltaBackgroundColorInHex: '#FFC0CBFF',
+            buttonDeltaBackgroundColorInHex: '#313131FF',
             buttonDeltaDesignType: 'A',
             buttonDeltaLabelColorInHex: '#FFFFFFFF',
-            buttonEchoBackgroundColorInHex: '#FFC0CBFF',
+            buttonEchoBackgroundColorInHex: '#313131FF',
             buttonEchoDesignType: 'A',
             buttonEchoLabelColorInHex: '#FFFFFFFF',
-            descriptionColorInHex: '#FEECD8FF',
-            itemButtonBackgroundColorInHex: '#FFC0CBFF',
+            descriptionColorInHex: '#DEECFFA6',
+            itemButtonBackgroundColorInHex: '#313131FF',
             itemButtonDesignType: 'A',
             itemButtonLabelColorInHex: '#FFFFFFFF',
             itemDescriptionColorInHex: '#68686BFF',
             itemTitleColorInHex: '#1E1E20FF',
-            itemHighlightingColorInHex: '#FF1D97FF',
+            titleColorInHex: '#DEECFFFF',
+            itemHighlightingColorInHex: '#313131FF',
             itemToneType: 'LIGHT',
-            titleColorInHex: '#F8FFACFF',
             programmedItemActionButtonTextType: 'A'
         },
-        template: 'PRG_MEMBERSHIP_DISPLAY_B',
-        updatedAt: '2023-01-06T09:05:45'
-    }
-];
-exports.MembershipPreviewDataMock = {
-    MEMBERSHIP_DISPLAY: {
-        id: 1,
-        mdid: "MEMBERSHIP_DISPLAY_MD_ID",
-        title: "MEMBERSHIP_DISPLAY_MD_TITLE",
-        isDefault: true,
-        connectedMemberships: Array.from({ length: 6 }, function (_, i) {
-            var alphabet = ['A', 'B', 'C', 'D', 'E', 'F'];
-            var cardImage = [
-                'https://cdn.dev.publishingkit.net/7f3f7a31-023b-4852-9a11-cbac31d25d93',
-                'https://cdn.dev.publishingkit.net/c8973261-6c2a-4833-9b9f-20ee355647e4',
-                'https://cdn.dev.publishingkit.net/8e585c93-9591-4300-ad93-d002560cbeae',
-                'https://cdn.dev.publishingkit.net/4aaa2811-b3ff-435c-b50a-9486376ab230',
-                'https://cdn.dev.publishingkit.net/5111c33c-07ba-4b91-8eb6-9975f4cd906a',
-                'https://cdn.dev.publishingkit.net/16ac0a8a-acb1-465b-960c-6be66f2a04e8.jpg'
-            ];
-            var getOverlayType = function () {
-                if (i % 3 === 1)
-                    return 'SOLID';
-                if (i % 3 === 2)
-                    return 'GRADIENT';
-                return 'NONE';
-            };
-            var getDesignSchema = function () {
-                if (i % 3 === 1)
-                    return 'B';
-                if (i % 3 === 2)
-                    return 'C';
-                return 'A';
-            };
-            return {
-                id: i + 1,
-                order: i,
-                mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
-                mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
-                membership: {
-                    id: i + 1,
-                    type: 'GENERAL',
-                    mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
-                    title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
-                    insertedAt: '2023-01-06T09:05:45',
-                    updatedAt: '2023-01-06T09:05:45',
-                    membershipCardTemplate: {
-                        backgroundImageSrc: cardImage[i],
-                        logoImageSrc: 'https://publ-upload-local.s3.ap-northeast-2.amazonaws.com/e11d1a92-a1c0-4faa-b341-13a32f21828d_image',
-                        overlayType: getOverlayType(),
-                        overlayColorPrimary: '#FFC0CB',
-                        overlayColorSecondary: '#313131',
-                        designSchema: getDesignSchema()
-                    },
-                    membershipBenefitInfo: {
-                        benefitAlpha: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
-                        benefitBravo: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
-                        benefitCharlie: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
-                        benefitDelta: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
-                        benefitEcho: 'Lorem ipsum dolor sit amet. Et magnam molestiae.'
-                    },
-                    totalSubscriptionProducts: 3
-                },
-                connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, i) {
-                    return {
-                        id: i + 1,
-                        order: i,
-                        connectedMembershipId: i + 1,
-                        subscriptionProductId: i + 1,
-                        subscriptionProduct: {
-                            id: i + 1,
-                            type: 'COUPON_ONCE_FINITE',
-                            title: '청춘이 황금시대를 우리의 같은 무엇을',
-                            alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
-                            expiryPeriodInDays: 7,
-                            isDeactivated: i % 2 === 0,
-                            fee: 5000,
-                            insertedAt: '2023-01-06T09:05:45',
-                            updatedAt: '2023-01-06T09:05:45'
+        template: 'PRG_MEMBERSHIP_DISPLAY_A',
+        programData: {
+            mdid: 'mdid',
+            preview: {
+                availableResources: ['REAL.MEMBERSHIP_DISPLAY'],
+                resource: {
+                    mock: {},
+                    real: {
+                        membershipDisplay: {
+                            id: 1,
+                            mdid: "MEMBERSHIP_DISPLAY_MD_ID",
+                            title: "MEMBERSHIP_DISPLAY_MD_TITLE",
+                            isDefault: true,
+                            connectedMemberships: Array.from({ length: 6 }, function (_, i) {
+                                var alphabet = ['A', 'B', 'C', 'D', 'E', 'F'];
+                                var cardImage = [
+                                    'https://cdn.dev.publishingkit.net/7f3f7a31-023b-4852-9a11-cbac31d25d93',
+                                    'https://cdn.dev.publishingkit.net/c8973261-6c2a-4833-9b9f-20ee355647e4',
+                                    'https://cdn.dev.publishingkit.net/8e585c93-9591-4300-ad93-d002560cbeae',
+                                    'https://cdn.dev.publishingkit.net/4aaa2811-b3ff-435c-b50a-9486376ab230',
+                                    'https://cdn.dev.publishingkit.net/5111c33c-07ba-4b91-8eb6-9975f4cd906a',
+                                    'https://cdn.dev.publishingkit.net/16ac0a8a-acb1-465b-960c-6be66f2a04e8.jpg'
+                                ];
+                                var getOverlayType = function () {
+                                    if (i % 3 === 1)
+                                        return 'SOLID';
+                                    if (i % 3 === 2)
+                                        return 'GRADIENT';
+                                    return 'NONE';
+                                };
+                                var getDesignSchema = function () {
+                                    if (i % 3 === 1)
+                                        return 'B';
+                                    if (i % 3 === 2)
+                                        return 'C';
+                                    return 'A';
+                                };
+                                return {
+                                    id: i + 1,
+                                    order: i,
+                                    mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
+                                    mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
+                                    membership: {
+                                        id: i + 1,
+                                        type: 'GENERAL',
+                                        mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
+                                        title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                        insertedAt: '2023-01-06T09:05:45',
+                                        updatedAt: '2023-01-06T09:05:45',
+                                        membershipCardTemplate: {
+                                            backgroundImageSrc: cardImage[i],
+                                            logoImageSrc: 'https://publ-upload-local.s3.ap-northeast-2.amazonaws.com/e11d1a92-a1c0-4faa-b341-13a32f21828d_image',
+                                            overlayType: getOverlayType(),
+                                            overlayColorPrimary: '#FFC0CB',
+                                            overlayColorSecondary: '#313131',
+                                            designSchema: getDesignSchema()
+                                        },
+                                        membershipBenefitInfo: {
+                                            benefitAlpha: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                            benefitBravo: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
+                                            benefitCharlie: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                            benefitDelta: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
+                                            benefitEcho: 'Lorem ipsum dolor sit amet. Et magnam molestiae.'
+                                        },
+                                        totalSubscriptionProducts: 3
+                                    },
+                                    connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, i) {
+                                        return {
+                                            id: i + 1,
+                                            order: i,
+                                            connectedMembershipId: i + 1,
+                                            subscriptionProductId: i + 1,
+                                            subscriptionProduct: {
+                                                id: i + 1,
+                                                type: 'COUPON_ONCE_FINITE',
+                                                title: '청춘이 황금시대를 우리의 같은 무엇을',
+                                                alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
+                                                expiryPeriodInDays: 7,
+                                                isDeactivated: i % 2 === 0,
+                                                fee: {
+                                                    currency: 'KRW',
+                                                    amount: '10,000'
+                                                },
+                                                insertedAt: '2023-01-06T09:05:45',
+                                                updatedAt: '2023-01-06T09:05:45'
+                                            }
+                                        };
+                                    })
+                                };
+                            })
                         }
-                    };
-                })
-            };
-        })
+                    }
+                }
+            }
+        },
+        insertedAt: '2023-01-30T10:24:35',
+        updatedAt: '2023-01-30T10:24:35'
     }
-};
+];

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

@@ -30,34 +30,25 @@ var __importDefault = (this && this.__importDefault) || function (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 dynamicLayoutContext_1 = require("../../../../DynamicLayout/dynamicLayoutContext");
 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 programmedSectionPreviewData = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionPreviewData;
-    if (!programmedSectionPreviewData) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
-    }
-    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Membership" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: template, programmedSectionPreviewData: programmedSectionPreviewData }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Membership" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: template }, 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, programmedSectionPreviewData = _a.programmedSectionPreviewData;
-    if (programmedSectionPreviewData.MEMBERSHIP_DISPLAY) {
-        switch (styleTemplate) {
-            case 'PRG_MEMBERSHIP_DISPLAY_A':
-                return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, { membershipDisplay: programmedSectionPreviewData.MEMBERSHIP_DISPLAY }, void 0);
-            case 'PRG_MEMBERSHIP_DISPLAY_B':
-                return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, { membershipDisplay: programmedSectionPreviewData.MEMBERSHIP_DISPLAY }, void 0);
-            default:
-                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
-        }
+    var styleTemplate = _a.styleTemplate;
+    switch (styleTemplate) {
+        case 'PRG_MEMBERSHIP_DISPLAY_A':
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY_B':
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
-    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/templates/TemplateA/TemplateA.d.ts

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

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

@@ -2,15 +2,23 @@
 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 membershipDisplay = _a.membershipDisplay;
+function TemplateA() {
     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.resource.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: membershipDisplay }, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, { membershipDisplay: membershipDisplay }, void 0)
+            MOBILE: ((0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, { membershipDisplay: programData.preview.resource.real.membershipDisplay }, void 0)),
+            DESKTOP: ((0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, { membershipDisplay: programData.preview.resource.real.membershipDisplay }, void 0))
         }[device] }, void 0));
 }
 exports.default = TemplateA;

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

@@ -33,7 +33,7 @@ function MembershipPlanSheet(_a) {
                     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: [subscriptionProduct.type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: subscriptionProduct.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)), subscriptionProduct.title && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: 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.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5339', { price: subscriptionProduct.fee }), 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: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", programmedItemActionButtonTextType: programmedItemActionButtonTextType }, void 0)] }, void 0));
+                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [subscriptionProduct.type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: subscriptionProduct.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)), subscriptionProduct.title && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: 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.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5339', { price: subscriptionProduct.fee.amount }), 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: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", programmedItemActionButtonTextType: programmedItemActionButtonTextType }, 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"])));

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

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

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

@@ -2,15 +2,23 @@
 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 TemplateB(_a) {
-    var membershipDisplay = _a.membershipDisplay;
+function TemplateB() {
     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.resource.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_TemplateB, { membershipDisplay: membershipDisplay }, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, { membershipDisplay: membershipDisplay }, void 0)
+            MOBILE: ((0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, { membershipDisplay: programData.preview.resource.real.membershipDisplay }, void 0)),
+            DESKTOP: ((0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, { membershipDisplay: programData.preview.resource.real.membershipDisplay }, void 0))
         }[device] }, void 0));
 }
 exports.default = TemplateB;

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

@@ -33,7 +33,7 @@ function MembershipPlanSheet(_a) {
                     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: [subscriptionProduct.type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: subscriptionProduct.type, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", lineLimit: 2, ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), subscriptionProduct.title && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: subscriptionProduct.title, styleTheme: "body2Bold", wordBreak: "break_all", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5339', { price: subscriptionProduct.fee }), customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, iconName: "ic_arrow_down" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", programmedItemActionButtonTextType: programmedItemActionButtonTextType }, void 0)] }, void 0));
+                } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipInfoTitle, { children: [subscriptionProduct.type && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: subscriptionProduct.type, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", lineLimit: 2, ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), subscriptionProduct.title && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: subscriptionProduct.title, styleTheme: "body2Bold", wordBreak: "break_all", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5339', { price: subscriptionProduct.fee.amount }), customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, iconName: "ic_arrow_down" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", programmedItemActionButtonTextType: programmedItemActionButtonTextType }, 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"])));

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

@@ -30,25 +30,22 @@ var __importDefault = (this && this.__importDefault) || function (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 dynamicLayoutContext_1 = require("../../../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
 var templates_1 = require("./templates");
 function NormalTypeMembershipSection(_a) {
     var props = __rest(_a, []);
     var template = props.template;
-    var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;
-    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Membership" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: template, programmedSectionComponents: programmedSectionComponents }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Membership" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(TemplateMather, { styleTemplate: template }, 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, programmedSectionComponents = _a.programmedSectionComponents;
+    var styleTemplate = _a.styleTemplate;
     switch (styleTemplate) {
         case 'PRG_MEMBERSHIP_DISPLAY_A':
-            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, { programmedSectionComponents: programmedSectionComponents }, void 0);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
         case 'PRG_MEMBERSHIP_DISPLAY_B':
-            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, { programmedSectionComponents: programmedSectionComponents }, void 0);
+            return (0, jsx_runtime_1.jsx)(templates_1.TemplateB, {}, void 0);
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }

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

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-declare type Props = {
-    programmedSectionComponents?: React.ReactNode;
-};
-declare function TemplateA({ programmedSectionComponents }: Props): JSX.Element;
+declare function TemplateA(): JSX.Element;
 export default TemplateA;

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

@@ -5,12 +5,11 @@ var react_1 = require("react");
 var dynamicLayoutContext_1 = require("../../../../../../DynamicLayout/dynamicLayoutContext");
 var desktop_1 = require("./desktop");
 var mobile_1 = require("./mobile");
-function TemplateA(_a) {
-    var programmedSectionComponents = _a.programmedSectionComponents;
+function TemplateA() {
     var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
-            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, { programmedSectionComponents: programmedSectionComponents }, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, { programmedSectionComponents: programmedSectionComponents }, void 0)
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateA, {}, void 0),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateA, {}, void 0)
         }[device] }, void 0));
 }
 exports.default = TemplateA;

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

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-declare type Props = {
-    programmedSectionComponents?: React.ReactNode;
-};
-declare function TemplateA({ programmedSectionComponents }: Props): JSX.Element;
+declare function TemplateA(): JSX.Element;
 export default TemplateA;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/desktop/D_TemplateA.js

@@ -8,15 +8,23 @@ var __importDefault = (this && this.__importDefault) || function (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 SectionContents_1 = __importDefault(require("./components/SectionContents"));
-function TemplateA(_a) {
-    var programmedSectionComponents = _a.programmedSectionComponents;
-    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), programmedSectionComponents && programmedSectionComponents] }, void 0));
+function TemplateA() {
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), (0, jsx_runtime_1.jsx)(MembershipSection, {}, 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.spacingH;
 });
+function MembershipSection() {
+    var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;
+    if (!programmedSectionComponents) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    return programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY ? (programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0));
+}
 exports.default = TemplateA;
 var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/mobile/M_TemplateA.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-declare type Props = {
-    programmedSectionComponents?: React.ReactNode;
-};
-declare function TemplateB({ programmedSectionComponents }: Props): JSX.Element;
+declare function TemplateB(): JSX.Element;
 export default TemplateB;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/mobile/M_TemplateA.js

@@ -8,11 +8,12 @@ var __importDefault = (this && this.__importDefault) || function (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 SectionContents_1 = __importDefault(require("./components/SectionContents"));
-function TemplateB(_a) {
-    var programmedSectionComponents = _a.programmedSectionComponents;
-    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), programmedSectionComponents && programmedSectionComponents] }, void 0));
+function TemplateB() {
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), (0, jsx_runtime_1.jsx)(MembershipSection, {}, void 0)] }, void 0));
 }
 var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  padding: 0 ", ";\n"], ["\n  margin-top: ", ";\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -21,5 +22,12 @@ var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (t
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
+function MembershipSection() {
+    var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;
+    if (!programmedSectionComponents) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    return programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY ? (programmedSectionComponents.PRG_MEMBERSHIP_DISPLAY) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0));
+}
 exports.default = TemplateB;
 var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/TemplateB.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-declare type Props = {
-    programmedSectionComponents?: React.ReactNode;
-};
-declare function TemplateB({ programmedSectionComponents }: Props): JSX.Element;
+declare function TemplateB(): JSX.Element;
 export default TemplateB;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/TemplateB.js

@@ -5,12 +5,11 @@ var react_1 = require("react");
 var dynamicLayoutContext_1 = require("../../../../../../DynamicLayout/dynamicLayoutContext");
 var desktop_1 = require("./desktop");
 var mobile_1 = require("./mobile");
-function TemplateB(_a) {
-    var programmedSectionComponents = _a.programmedSectionComponents;
+function TemplateB() {
     var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
-            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, { programmedSectionComponents: programmedSectionComponents }, void 0),
-            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, { programmedSectionComponents: programmedSectionComponents }, void 0)
+            MOBILE: (0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, {}, void 0),
+            DESKTOP: (0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, {}, void 0)
         }[device] }, void 0));
 }
 exports.default = TemplateB;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/desktop/D_TemplateB.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-declare type Props = {
-    programmedSectionComponents?: React.ReactNode;
-};
-declare function TemplateB({ programmedSectionComponents }: Props): JSX.Element;
+declare function TemplateB(): JSX.Element;
 export default TemplateB;