npm - pds-dev-kit-web - Versions diffs - 2.0.9-alpha.3 → 2.0.9-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/D_TemplateA.js CHANGED Viewed

@@ -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 };
 };
@@ -10,26 +21,45 @@ 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)(window.innerWidth > 1300), isWideView = _b[0], setIsWideView = _b[1];
-    var orderedMemberships = membershipDisplay.connectedMemberships.sort(function (a, b) { return a.order - b.order; }) || [];
+    var _b = (0, react_1.useState)(true), isWideView = _b[0], setIsWideView = _b[1];
+    var targetRef = (0, react_1.useRef)(null);
+    var orderedMemberships = membershipDisplay.connectedMemberships
+        .slice()
+        .sort(function (a, b) { return a.order - b.order; });
     var handleSize = function () {
-        setIsWideView(window.innerWidth > 1300);
+        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, { 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))] }, void 0));
+    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));
 }
 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;
+    return theme.spacing.spacingK;
 });
 exports.default = TemplateA;
 var templateObject_1;

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

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/EmptyMembershipPlanSheet.js ADDED Viewed

@@ -0,0 +1,32 @@
+"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_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");
+function EmptyMembershipPlanSheet(_a) {
+    var sectionStyles = _a.sectionStyles;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
+    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.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", paddingBottom: "spacing_d", overrideCSS: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: '112px',
+                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
+                } }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5300'), color: 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]), state: "disabled", buttonTextColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].disabledProgrammedItemActionButtonTextColor, buttonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
+                    .disabledProgrammedItemActionButtonBackgroundColor, "$paddingBottom": "56px" }, void 0)] }, void 0));
+}
+exports.default = EmptyMembershipPlanSheet;

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

@@ -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 ADDED Viewed

@@ -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.js CHANGED Viewed

@@ -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: "leadParaRegular", 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: "leadParaRegular", 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: "leadParaRegular", 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: "leadParaRegular", 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: "leadParaRegular", 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: "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));
 }
 exports.default = MembershipBenefitInfo;

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

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-import type { IConnectedSubscriptionProducts, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../../../../../../DynamicLayout/types';
+import type { IConnectedSubscriptionProducts, ISectionStyles } from '../../../../../../../../DynamicLayout/types';
 declare type Props = {
     connectedSubscriptionProducts: IConnectedSubscriptionProducts;
-    itemToneType: TypeOfItemToneType;
-    itemHighlightingColorInHex: string;
-    programmedItemActionButtonTextType: TypeOfProgrammedItemActionButtonTextType;
+    sectionStyles: ISectionStyles;
 };
-declare function MembershipPlanSheet({ connectedSubscriptionProducts, itemToneType, itemHighlightingColorInHex, programmedItemActionButtonTextType }: Props): JSX.Element;
+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 CHANGED Viewed

@@ -26,14 +26,16 @@ var components_2 = require("../../../../../../../../DynamicLayout/sections/Membe
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 var styled_components_1 = __importDefault(require("styled-components"));
 function MembershipPlanSheet(_a) {
-    var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, itemToneType = _a.itemToneType, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, programmedItemActionButtonTextType = _a.programmedItemActionButtonTextType;
+    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;
+    var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
     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: [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));
+                } }, { 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));
 }
 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/MembershipSheet.js CHANGED Viewed

@@ -44,6 +44,7 @@ var Section_1 = require("../../../../../../../../DynamicLayout/components/Sectio
 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 EmptyMembershipPlanSheet_1 = __importDefault(require("./EmptyMembershipPlanSheet"));
 var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
 var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
 var NarrowMembershipListView_1 = __importDefault(require("./NarrowMembershipListView"));
@@ -56,26 +57,27 @@ function MembershipSheet(_a) {
         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, programmedItemActionButtonTextType = _d.programmedItemActionButtonTextType;
+    var _d = section.styles, itemHighlightingColorInHex = _d.itemHighlightingColorInHex, itemToneType = _d.itemToneType;
     var handleMembershipClick = function (currentIndex) {
         setCurrentIndex(currentIndex);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_MembershipBox, __assign({ isWideView: isWideView }, { children: [isWideView ? ((0, jsx_runtime_1.jsx)(WideMembershipListView_1.default, { connectedMemberships: connectedMemberships, currentIndex: currentIndex, handleMembershipClick: handleMembershipClick, itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex }, void 0)) : ((0, jsx_runtime_1.jsx)(NarrowMembershipListView_1.default, { connectedMemberships: connectedMemberships, currentIndex: currentIndex, handleMembershipClick: handleMembershipClick, itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex }, void 0)), (0, jsx_runtime_1.jsx)(S_ScrollBarVisible, __assign({ isWideView: isWideView, itemToneType: itemToneType }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ overrideCSS: {
+    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: '56px',
                         paddingRight: '0'
-                    }, 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, { 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], itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex, programmedItemActionButtonTextType: programmedItemActionButtonTextType }, void 0))] }, void 0)] }), void 0) }), void 0)] }), void 0));
+                    }, 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, { 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)(EmptyMembershipPlanSheet_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  max-width: ", ";\n\n  & > div {\n    ", "\n  }\n"], ["\n  max-width: ", ";\n\n  & > div {\n    ", "\n  }\n"])), function (_a) {
-    var isWideView = _a.isWideView;
-    return (isWideView ? '66%' : '100%');
+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;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js CHANGED Viewed

@@ -66,7 +66,7 @@ function NarrowMembershipListView(_a) {
     var isRightMaskingCoverShow = connectedMemberships.length > 2 && membershipListRef.current
         ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
             membershipListRef.current.scrollWidth - 1
-        : true;
+        : connectedMemberships.length > 2 && scrollValue === 0;
     var scrollPrev = function (x) {
         var scrollLeft = (membershipListRef.current || {}).scrollLeft;
         if (membershipListRef.current && typeof scrollLeft === 'number') {
@@ -93,6 +93,8 @@ function NarrowMembershipListView(_a) {
                                     height: '120px',
                                     justifyContent: 'center',
                                     marginRight: '24px',
+                                    width: '384px',
+                                    maxWidth: '384px',
                                     minWidth: '384px',
                                     paddingLeft: '40px',
                                     paddingRight: '40px'

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

@@ -21,10 +21,7 @@ function SectionContents() {
     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 S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 80px;\n  margin-top: ", ";\n"], ["\n  margin-bottom: 80px;\n  margin-top: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingK;
-});
+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_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/desktop/components/WideMembershipListView.js CHANGED Viewed

@@ -83,9 +83,6 @@ var S_MembershipListMaskingBox = styled_components_1.default.div(templateObject_
         return 'linear-gradient(white 92.5%, transparent 100%)';
     }
 });
-var S_MembershipList = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  margin-right: ", ";\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"], ["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  margin-right: ", ";\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
+var S_MembershipList = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"], ["\n  flex: 1;\n  flex-direction: column;\n  height: 720px;\n  min-width: 33%;\n  overflow: auto;\n  position: relative;\n"])));
 exports.default = WideMembershipListView;
 var templateObject_1, templateObject_2;

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

@@ -9,14 +9,15 @@ var __importDefault = (this && this.__importDefault) || function (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 MembershipContents_1 = __importDefault(require("./components/MembershipContents"));
 var SectionContents_1 = __importDefault(require("./components/SectionContents"));
 function TemplateB(_a) {
     var membershipDisplay = _a.membershipDisplay;
-    var orderedConnectedMemberships = membershipDisplay.connectedMemberships.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))] }, void 0));
+    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));
 }
-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 S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " auto;\n  padding: 0 ", ";\n"], ["\n  margin: ", " auto;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

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

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

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

@@ -0,0 +1,37 @@
+"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 components_1 = require("../../../../../../../../DynamicLayout/components");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+function MembershipSheet() {
+    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.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));
+}
+exports.default = MembershipSheet;

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

@@ -18,9 +18,6 @@ function MembershipContents(_a) {
                     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));
 }
-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  padding-top: ", ";\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding-top: ", ";\n  position: relative;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
+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;
 var templateObject_1;

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

@@ -19,15 +19,16 @@ 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)(jsx_runtime_1.Fragment, { 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, { 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));
 }
-var S_DescriptionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+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_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;
 });
-var S_ButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"])), function (_a) {
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
 exports.default = SectionContents;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/D_TemplateB.js CHANGED Viewed

@@ -10,26 +10,43 @@ 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 TemplateB(_a) {
     var membershipDisplay = _a.membershipDisplay;
-    var _b = (0, react_1.useState)(window.innerWidth > 1300), isWideView = _b[0], setIsWideView = _b[1];
-    var orderedMemberships = membershipDisplay.connectedMemberships.sort(function (a, b) { return a.order - b.order; }) || [];
+    var _b = (0, react_1.useState)(true), isWideView = _b[0], setIsWideView = _b[1];
+    var targetRef = (0, react_1.useRef)(null);
+    var orderedMemberships = membershipDisplay.connectedMemberships.slice().sort(function (a, b) { return a.order - b.order; }) || [];
     var handleSize = function () {
-        setIsWideView(window.innerWidth > 1300);
+        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, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), orderedMemberships.length > 0 && ((0, jsx_runtime_1.jsx)(MembershipSheet_1.default, { filteredMemberships: orderedMemberships, isWideView: isWideView }, 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, { filteredMemberships: 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.spacingH;
+    return theme.spacing.spacingK;
 });
 exports.default = TemplateB;
 var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/EmptyMembershipPlanSheet.d.ts ADDED Viewed

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/EmptyMembershipPlanSheet.js ADDED Viewed

@@ -0,0 +1,32 @@
+"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_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");
+function EmptyMembershipPlanSheet(_a) {
+    var sectionStyles = _a.sectionStyles;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
+    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.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", paddingBottom: "spacing_d", overrideCSS: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: '112px',
+                    backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
+                } }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5300'), color: 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]), state: "disabled", buttonTextColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].disabledProgrammedItemActionButtonTextColor, buttonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
+                    .disabledProgrammedItemActionButtonBackgroundColor }, void 0)] }, void 0));
+}
+exports.default = EmptyMembershipPlanSheet;

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

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

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/EmptyMembershipSheet.js ADDED Viewed

@@ -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/TemplateB/desktop/components/MembershipBenefitInfo.js CHANGED Viewed

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