pds-dev-kit-web 2.0.9-alpha.5 → 2.0.9-alpha.7

package/dist/src/common/services/i18n/resources/en.json

@@ -20,6 +20,9 @@
         "str_payment_option_subs_temporary_free": "Free Trial",
         "str_payment_option_unlimited_free": "Free Access",
         "str_payment_option_one_time": "One-time Payment",
-        "str_payment_option_subs_regularly": "Regular Payment"
+        "str_payment_option_subs_regularly": "Regular Payment",
+        "str_5831": "{{price}} USD",
+        "str_start": "Start",
+        "str_free": "FREE"
     }
 }

package/dist/src/common/services/i18n/resources/es.json

@@ -20,6 +20,9 @@
         "str_payment_option_subs_temporary_free": "Free Trial",
         "str_payment_option_unlimited_free": "Free Access",
         "str_payment_option_one_time": "One-time Payment",
-        "str_payment_option_subs_regularly": "Regular Payment"
+        "str_payment_option_subs_regularly": "Regular Payment",
+        "str_5831": "{{price}} USD",
+        "str_start": "Start",
+        "str_free": "FREE"
     }
 }

package/dist/src/common/services/i18n/resources/fil.json

@@ -20,6 +20,9 @@
         "str_payment_option_subs_temporary_free": "Libreng subok",
         "str_payment_option_unlimited_free": "Free Access",
         "str_payment_option_one_time": "Isang beses na pagbayad",
-        "str_payment_option_subs_regularly": "Regular na Pagbabayad"
+        "str_payment_option_subs_regularly": "Regular na Pagbabayad",
+        "str_5831": "{{price}} USD",
+        "str_start": "Start",
+        "str_free": "FREE"
     }
 }

package/dist/src/common/services/i18n/resources/index.d.ts

@@ -22,6 +22,9 @@ declare const locale: {
             str_payment_option_unlimited_free: string;
             str_payment_option_one_time: string;
             str_payment_option_subs_regularly: string;
+            str_5831: string;
+            str_start: string;
+            str_free: string;
         };
     };
     readonly en: {
@@ -47,6 +50,9 @@ declare const locale: {
             str_payment_option_unlimited_free: string;
             str_payment_option_one_time: string;
             str_payment_option_subs_regularly: string;
+            str_5831: string;
+            str_start: string;
+            str_free: string;
         };
     };
     readonly ja: {
@@ -72,6 +78,9 @@ declare const locale: {
             str_payment_option_unlimited_free: string;
             str_payment_option_one_time: string;
             str_payment_option_subs_regularly: string;
+            str_5831: string;
+            str_start: string;
+            str_free: string;
         };
     };
     readonly es: {
@@ -97,6 +106,9 @@ declare const locale: {
             str_payment_option_unlimited_free: string;
             str_payment_option_one_time: string;
             str_payment_option_subs_regularly: string;
+            str_5831: string;
+            str_start: string;
+            str_free: string;
         };
     };
     readonly 'zh-cn': {
@@ -122,6 +134,9 @@ declare const locale: {
             str_payment_option_unlimited_free: string;
             str_payment_option_one_time: string;
             str_payment_option_subs_regularly: string;
+            str_5831: string;
+            str_start: string;
+            str_free: string;
         };
     };
     readonly 'zh-tw': {
@@ -147,6 +162,9 @@ declare const locale: {
             str_payment_option_unlimited_free: string;
             str_payment_option_one_time: string;
             str_payment_option_subs_regularly: string;
+            str_5831: string;
+            str_start: string;
+            str_free: string;
         };
     };
     readonly fil: {
@@ -172,6 +190,9 @@ declare const locale: {
             str_payment_option_unlimited_free: string;
             str_payment_option_one_time: string;
             str_payment_option_subs_regularly: string;
+            str_5831: string;
+            str_start: string;
+            str_free: string;
         };
     };
 };

package/dist/src/common/services/i18n/resources/ja.json

@@ -20,6 +20,9 @@
         "str_payment_option_subs_temporary_free": "免费体验",
         "str_payment_option_unlimited_free": "Free Access",
         "str_payment_option_one_time": "One-time Payment",
-        "str_payment_option_subs_regularly": "Regular Payment"
+        "str_payment_option_subs_regularly": "Regular Payment",
+        "str_5831": "{{price}} USD",
+        "str_start": "Start",
+        "str_free": "FREE"
     }
 }

package/dist/src/common/services/i18n/resources/ko.json

@@ -20,6 +20,9 @@
         "str_payment_option_subs_temporary_free": "무료 체험",
         "str_payment_option_unlimited_free": "무료",
         "str_payment_option_one_time": "1회 결제",
-        "str_payment_option_subs_regularly": "정기 결제"
+        "str_payment_option_subs_regularly": "정기 결제",
+        "str_5831": "{{price}} USD",
+        "str_start": "시작하기",
+        "str_free": "무료"
     }
 }

package/dist/src/common/services/i18n/resources/zh-cn.json

@@ -20,6 +20,9 @@
         "str_payment_option_subs_temporary_free": "免费体验",
         "str_payment_option_unlimited_free": "Free Access",
         "str_payment_option_one_time": "一次性付款",
-        "str_payment_option_subs_regularly": "定期付款"
+        "str_payment_option_subs_regularly": "定期付款",
+        "str_5831": "{{price}} USD",
+        "str_start": "Start",
+        "str_free": "FREE"
     }
 }

package/dist/src/common/services/i18n/resources/zh-tw.json

@@ -20,6 +20,9 @@
         "str_payment_option_subs_temporary_free": "期限內免費",
         "str_payment_option_unlimited_free": "Free Access",
         "str_payment_option_one_time": "結算一次",
-        "str_payment_option_subs_regularly": "定期結算"
+        "str_payment_option_subs_regularly": "定期結算",
+        "str_5831": "{{price}} USD",
+        "str_start": "Start",
+        "str_free": "FREE"
     }
 }

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

@@ -1192,7 +1192,7 @@ exports.samplePageMembershipSection = {
                                         subscriptionProductId: i + 1,
                                         subscriptionProduct: {
                                             id: i + 1,
-                                            type: 'COUPON_ONCE_FINITE',
+                                            type: 'COUPON_FREE_FINITE',
                                             title: i % 2 ? '청춘이 황금시대를 우리의 같은 무엇을' : '짧은 제목',
                                             alias: i % 2
                                                 ? "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS"
@@ -1201,7 +1201,7 @@ exports.samplePageMembershipSection = {
                                             isDeactivated: i % 2 === 0,
                                             fee: {
                                                 currency: 'KRW',
-                                                amount: '10,000'
+                                                amount: 10000
                                             },
                                             insertedAt: '2023-01-06T09:05:45',
                                             updatedAt: '2023-01-06T09:05:45'

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

@@ -1513,7 +1513,7 @@ exports.MembershipSectionsMock = [
                                                 isDeactivated: j % 2 === 0,
                                                 fee: {
                                                     currency: 'KRW',
-                                                    amount: '10,000'
+                                                    amount: 10000
                                                 },
                                                 insertedAt: '2023-01-06T09:05:45',
                                                 updatedAt: '2023-01-06T09:05:45'
@@ -2286,7 +2286,7 @@ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
                                                 isDeactivated: j % 2 === 0,
                                                 fee: {
                                                     currency: 'KRW',
-                                                    amount: '10,000'
+                                                    amount: 10000
                                                 },
                                                 insertedAt: '2023-01-06T09:05:45',
                                                 updatedAt: '2023-01-06T09:05:45'

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

@@ -30,22 +30,47 @@ 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 styled_components_1 = __importDefault(require("styled-components"));
 var templates_1 = require("./templates");
 function EditTypeMembershipSection(_a) {
     var props = __rest(_a, []);
     var template = props.template;
-    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 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;
+    var styleTemplate = _a.styleTemplate, isWideView = _a.isWideView;
     switch (styleTemplate) {
         case 'PRG_MEMBERSHIP_DISPLAY_A':
-            return (0, jsx_runtime_1.jsx)(templates_1.TemplateA, {}, void 0);
+            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, {}, void 0);
+            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);
     }

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

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

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

@@ -6,7 +6,8 @@ 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() {
+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) {
@@ -18,7 +19,7 @@ function TemplateA() {
     }
     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 }, 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

@@ -2,6 +2,7 @@
 import type { IMembershipDisplay } from '../../../../../../../DynamicLayout/types';
 declare type Props = {
     membershipDisplay: IMembershipDisplay;
+    isWideView: boolean;
 };
-declare function TemplateA({ membershipDisplay }: Props): JSX.Element;
+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

@@ -3,59 +3,21 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 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;
-    var _b = (0, react_1.useState)(true), isWideView = _b[0], setIsWideView = _b[1];
-    var targetRef = (0, react_1.useRef)(null);
+    var membershipDisplay = _a.membershipDisplay, isWideView = _a.isWideView;
     var orderedMemberships = membershipDisplay.connectedMemberships
         .slice()
         .sort(function (a, b) { return a.order - b.order; });
-    var handleSize = function () {
-        if (!targetRef.current) {
-            return;
-        }
-        setIsWideView(targetRef.current.clientWidth > 1300);
-    };
-    /**
-     * @when : 화면 진입 시
-     * @expected : 콘텐츠 영역의 크기를 확인해서 wideView인지 확인하고, 윈도우창 크기를 조절하는 이벤트 핸들러를 추가합니다.
-     * @clear : 윈도우창 크기를 조절하는 이벤트 핸들러를 제거합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        if (!targetRef.current) {
-            return;
-        }
-        window.addEventListener('resize', handleSize);
-        setIsWideView(targetRef.current.clientWidth > 1300);
-        return function () {
-            if (!targetRef.current) {
-                return;
-            }
-            window.removeEventListener('resize', handleSize);
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, __assign({ ref: targetRef }, { 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));
+    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;

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

@@ -5,6 +5,6 @@ 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: "subTitleBold", 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: "subTitleBold", 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: "subTitleBold", 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: "subTitleBold", 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: "subTitleBold", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0))] }, void 0));
+    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.js

@@ -19,11 +19,13 @@ 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 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;
@@ -31,11 +33,42 @@ function MembershipPlanSheet(_a) {
     var subscriptionProduct = connectedSubscriptionProducts.subscriptionProduct;
     var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee;
     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 = t({ A: 'str_5350', B: 'str_5351', C: 'str_5352', D: 'str_5353', E: 'str_5354' }[programmedItemActionButtonTextType]);
+        switch (type) {
+            case 'COUPON_FREE_FINITE':
+            case 'COUPON_FREE_INFINITE':
+            case 'FREE_FINITE':
+            case 'FREE_INFINITE':
+                return t('str_start');
+            default:
+                return 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: t('str_5339', { price: 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, { buttonText: t(constants_1.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT[programmedItemActionButtonTextType]), buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", "$paddingBottom": "56px" }, void 0)] }, void 0));
+                } }, { 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, { buttonText: itemActionButtonText, buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", "$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"])));

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 };
 };
@@ -19,9 +30,13 @@ function SectionContents() {
     }
     var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
     var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "headingBold" }, void 0) }, void 0)), buttonAlphaLabel && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }, void 0));
+    var isEmptySection = !title && !description && !buttonAlphaLabel;
+    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySection: isEmptySection }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "headingBold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
-var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 80px;\n"], ["\n  margin-bottom: 80px;\n"])));
+var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
+    var isEmptySection = _a.isEmptySection;
+    return (isEmptySection ? 0 : '80px');
+});
 var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;

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

@@ -3,5 +3,5 @@ import type { IMembershipDisplay } from '../../../../../../../DynamicLayout/type
 declare type Props = {
     membershipDisplay: IMembershipDisplay;
 };
-declare function TemplateB({ membershipDisplay }: Props): JSX.Element;
-export default TemplateB;
+declare function TemplateA({ membershipDisplay }: Props): JSX.Element;
+export default TemplateA;

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

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var EmptyMembershipSheet_1 = __importDefault(require("./components/EmptyMembershipSheet"));
 var MembershipContents_1 = __importDefault(require("./components/MembershipContents"));
 var SectionContents_1 = __importDefault(require("./components/SectionContents"));
-function TemplateB(_a) {
+function TemplateA(_a) {
     var membershipDisplay = _a.membershipDisplay;
     var orderedConnectedMemberships = 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), orderedConnectedMemberships.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipContents_1.default, { orderedConnectedMemberships: orderedConnectedMemberships }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipSheet_1.default, {}, void 0))] }, void 0));
@@ -24,5 +24,5 @@ var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (t
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-exports.default = TemplateB;
+exports.default = TemplateA;
 var templateObject_1;

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

@@ -15,9 +15,8 @@ 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("../../../../../../../../DynamicLayout/components");
 var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
-var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 function MembershipSheet() {
     var t = (0, react_i18next_1.useTranslation)('translation').t;
@@ -26,12 +25,12 @@ function MembershipSheet() {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
     var itemToneType = section.styles.itemToneType;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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',
-                    marginBottom: '96px'
-                }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_h" }, void 0)] }, void 0));
+    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',
+            marginBottom: '96px'
+        }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0));
 }
 exports.default = MembershipSheet;

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

@@ -9,14 +9,13 @@ 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 pdsOriginal_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal");
 var styled_components_1 = __importDefault(require("styled-components"));
 var MembershipSectionSheet_1 = __importDefault(require("./MembershipSectionSheet"));
 function MembershipContents(_a) {
     var orderedConnectedMemberships = _a.orderedConnectedMemberships;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_MembershipBox, { children: orderedConnectedMemberships.map(function (connectedMembership) {
-                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MembershipSectionSheet_1.default, { membership: connectedMembership.membership }, void 0) }, connectedMembership.id));
-                }) }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_h" }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsx)(S_MembershipBox, { children: orderedConnectedMemberships.map(function (connectedMembership) {
+            return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MembershipSectionSheet_1.default, { membership: connectedMembership.membership }, void 0) }, connectedMembership.id));
+        }) }, void 0));
 }
 var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"])));
 exports.default = MembershipContents;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 };
 };
@@ -19,9 +30,12 @@ function SectionContents() {
     }
     var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
     var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "headingBold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Regular" }, void 0) }, void 0)), buttonAlphaLabel && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "displayBold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Bold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
-var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 80px 0;\n"], ["\n  margin: 80px 0;\n"])));
+var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
+    var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;
+    return isEmptySectionData ? 0 : theme.spacing.spacingG;
+});
 var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;

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

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

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

@@ -6,7 +6,8 @@ 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() {
+function TemplateB(_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) {
@@ -18,7 +19,7 @@ function TemplateB() {
     }
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
             MOBILE: ((0, jsx_runtime_1.jsx)(mobile_1.M_TemplateB, { membershipDisplay: programData.preview.resources.real.membershipDisplay }, void 0)),
-            DESKTOP: ((0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, { membershipDisplay: programData.preview.resources.real.membershipDisplay }, void 0))
+            DESKTOP: ((0, jsx_runtime_1.jsx)(desktop_1.D_TemplateB, { membershipDisplay: programData.preview.resources.real.membershipDisplay, isWideView: isWideView }, void 0))
         }[device] }, void 0));
 }
 exports.default = TemplateB;