pds-dev-kit-web 2.0.11 → 2.0.13-alpha.0

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 (51) hide show
  1. package/dist/src/common/assets/icons/line/Box.d.ts +4 -0
  2. package/dist/src/common/assets/icons/line/Box.js +30 -0
  3. package/dist/src/common/assets/icons/line/Cart.d.ts +4 -0
  4. package/dist/src/common/assets/icons/line/Cart.js +30 -0
  5. package/dist/src/common/assets/icons/line/Delivery.d.ts +4 -0
  6. package/dist/src/common/assets/icons/line/Delivery.js +30 -0
  7. package/dist/src/common/assets/icons/line/Receipt.d.ts +4 -0
  8. package/dist/src/common/assets/icons/line/Receipt.js +30 -0
  9. package/dist/src/common/assets/icons/line/Shop.d.ts +4 -0
  10. package/dist/src/common/assets/icons/line/Shop.js +30 -0
  11. package/dist/src/common/assets/icons/line/Shoppingbag.d.ts +4 -0
  12. package/dist/src/common/assets/icons/line/Shoppingbag.js +30 -0
  13. package/dist/src/common/assets/icons/line/index.d.ts +6 -0
  14. package/dist/src/common/assets/icons/line/index.js +12 -0
  15. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +1 -1
  16. package/dist/src/common/styles/colorSet/PaletteColor_light.json +1 -1
  17. package/dist/src/common/styles/colorSet/SemanticColor.json +3 -1
  18. package/dist/src/common/styles/colorSet/index.d.ts +4 -2
  19. package/dist/src/common/styles/colorSet/index.js +2 -2
  20. package/dist/src/sub/AdminList/ToolBar/ToolBar.js +1 -1
  21. package/dist/src/sub/DynamicLayout/mock_samplePage.js +3 -3
  22. package/dist/src/sub/DynamicLayout/mock_storybook.d.ts +4 -4
  23. package/dist/src/sub/DynamicLayout/mock_storybook.js +30 -26
  24. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js +7 -6
  25. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.js +5 -6
  26. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js +48 -13
  27. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js +1 -1
  28. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} +2 -2
  29. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} +4 -3
  30. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.js +1 -2
  31. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/SectionContents.js +1 -1
  32. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.d.ts +3 -5
  33. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.js +9 -7
  34. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipSheet.js +3 -3
  35. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js +1 -1
  36. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} +2 -2
  37. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} +4 -3
  38. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/M_TemplateB.js +4 -1
  39. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js +6 -26
  40. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipBenefitInfo.js +3 -3
  41. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipContents.js +1 -1
  42. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipSectionSheet.js +14 -27
  43. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/SectionContents.js +15 -4
  44. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.d.ts +3 -1
  45. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js +6 -3
  46. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts +3 -1
  47. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js +9 -3
  48. package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.d.ts +1 -0
  49. package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.js +2 -1
  50. package/package.json +1 -1
  51. package/release-note.md +5 -9
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js CHANGED
@@ -27,11 +27,12 @@ var components_2 = require("../../../../../../../../DynamicLayout/sections/Membe
27
27
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
28
28
  var formatCurrency_1 = __importDefault(require("../../../../../../../../DynamicLayout/utils/formatCurrency"));
29
29
  var styled_components_1 = __importDefault(require("styled-components"));
30
+ var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
30
31
  function MembershipPlanSheet(_a) {
31
32
  var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, sectionStyles = _a.sectionStyles;
32
33
  var t = (0, react_i18next_1.useTranslation)('translation').t;
33
34
  var subscriptionProduct = connectedSubscriptionProducts.subscriptionProduct;
34
- var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee;
35
+ var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee, isDeactivated = subscriptionProduct.isDeactivated;
35
36
  var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
36
37
  var productFeeText = (0, react_1.useMemo)(function () {
37
38
  var amount = fee.amount, currency = fee.currency;
@@ -64,11 +65,11 @@ function MembershipPlanSheet(_a) {
64
65
  return itemActionButtonTextType;
65
66
  }
66
67
  }, [programmedItemActionButtonTextType, type]);
67
- 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: {
68
- display: 'flex',
69
- cursor: 'pointer',
70
- backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
71
- } }, { 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));
68
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDeactivated ? ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: sectionStyles }, void 0)) : ((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: {
69
+ display: 'flex',
70
+ cursor: 'pointer',
71
+ backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
72
+ } }, { 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)) }, void 0));
72
73
  }
73
74
  var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
74
75
  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
@@ -44,10 +44,10 @@ var Section_1 = require("../../../../../../../../DynamicLayout/components/Sectio
44
44
  var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
45
45
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
46
46
  var styled_components_1 = __importStar(require("styled-components"));
47
- var EmptyMembershipPlanSheet_1 = __importDefault(require("./EmptyMembershipPlanSheet"));
48
47
  var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
49
48
  var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
50
49
  var NarrowMembershipListView_1 = __importDefault(require("./NarrowMembershipListView"));
50
+ var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
51
51
  var WideMembershipListView_1 = __importDefault(require("./WideMembershipListView"));
52
52
  function MembershipSheet(_a) {
53
53
  var connectedMemberships = _a.connectedMemberships, isWideView = _a.isWideView;
@@ -67,9 +67,8 @@ function MembershipSheet(_a) {
67
67
  display: 'flex',
68
68
  flex: '2',
69
69
  overflow: 'auto',
70
- padding: '56px',
71
- paddingRight: '0'
72
- }, 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));
70
+ padding: isOnlyMembership ? '56px 10%' : '56px 0 56px 56px'
71
+ }, width: "100%", height: "720px", shapeType: "round" }, { children: [membership.membershipCardTemplate && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membership.membershipCardTemplate }, void 0)), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isOnlyMembership: isOnlyMembership }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProducts: connectedSubscriptionProducts[0], sectionStyles: section.styles }, void 0)) : ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0) }), void 0)] }), void 0));
73
72
  }
74
73
  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) {
75
74
  var itemToneType = _a.itemToneType;
@@ -87,8 +86,8 @@ var S_MembershipDetailBox = styled_components_1.default.div(templateObject_4 ||
87
86
  var theme = _a.theme;
88
87
  return theme.spacing.spacingH;
89
88
  }, function (_a) {
90
- var theme = _a.theme;
91
- return theme.spacing.spacingH;
89
+ var isOnlyMembership = _a.isOnlyMembership, theme = _a.theme;
90
+ return (isOnlyMembership ? 0 : theme.spacing.spacingH);
92
91
  });
93
92
  exports.default = MembershipSheet;
94
93
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js CHANGED
@@ -42,14 +42,21 @@ var constants_1 = require("../../../../../../../../DynamicLayout/sections/Member
42
42
  var styled_components_1 = __importStar(require("styled-components"));
43
43
  function NarrowMembershipListView(_a) {
44
44
  var connectedMemberships = _a.connectedMemberships, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, itemToneType = _a.itemToneType, currentIndex = _a.currentIndex, handleMembershipClick = _a.handleMembershipClick;
45
+ var resizeTarget = (0, react_1.useRef)(null);
45
46
  var membershipListRef = (0, react_1.useRef)(null);
46
47
  var _b = (0, react_1.useState)(0), scrollValue = _b[0], setScrollValue = _b[1];
48
+ var _c = (0, react_1.useState)(0), targetWidth = _c[0], setTargetWidth = _c[1];
47
49
  var handleScroll = function () {
48
50
  if (membershipListRef === null || membershipListRef.current === null) {
49
51
  return;
50
52
  }
51
53
  setScrollValue(membershipListRef.current.scrollLeft);
52
54
  };
55
+ /**
56
+ * @when : 화면 진입 시
57
+ * @expected : 스크롤을 감지하는 이벤트 핸들러를 추가합니다.
58
+ * @clear : 스크롤을 감지하는 이벤트 핸들러를 제거합니다.
59
+ */
53
60
  (0, react_1.useEffect)(function () {
54
61
  if (!membershipListRef.current) {
55
62
  return;
@@ -62,11 +69,38 @@ function NarrowMembershipListView(_a) {
62
69
  membershipListRef.current.removeEventListener('scroll', handleScroll);
63
70
  };
64
71
  }, []);
72
+ /**
73
+ * @when : 화면 진입 시
74
+ * @expected : 콘텐츠 영역의 크기를 확인해서 observer를 추가합니다.
75
+ * @clear : observer를 제거합니다.
76
+ */
77
+ (0, react_1.useEffect)(function () {
78
+ var element = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current;
79
+ if (!element)
80
+ return;
81
+ var observer = new ResizeObserver(function (entries) {
82
+ entries.forEach(function (entry) {
83
+ setTargetWidth(entry.contentRect.width);
84
+ });
85
+ });
86
+ observer.observe(element);
87
+ return function () {
88
+ observer.disconnect();
89
+ };
90
+ }, []);
65
91
  var isLeftMaskingCoverShow = connectedMemberships.length > 2 && scrollValue > 0;
66
- var isRightMaskingCoverShow = connectedMemberships.length > 2 && membershipListRef.current
67
- ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
68
- membershipListRef.current.scrollWidth - 1
69
- : connectedMemberships.length > 2 && scrollValue === 0;
92
+ var isRightMaskingCoverShow = (0, react_1.useMemo)(function () {
93
+ if (connectedMemberships.length < 3) {
94
+ return false;
95
+ }
96
+ if (scrollValue === 0) {
97
+ return true;
98
+ }
99
+ return membershipListRef.current
100
+ ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
101
+ membershipListRef.current.scrollWidth - 1
102
+ : scrollValue === 0;
103
+ }, [connectedMemberships, membershipListRef.current, scrollValue, targetWidth]);
70
104
  var scrollPrev = function (x) {
71
105
  var scrollLeft = (membershipListRef.current || {}).scrollLeft;
72
106
  if (membershipListRef.current && typeof scrollLeft === 'number') {
@@ -81,7 +115,7 @@ function NarrowMembershipListView(_a) {
81
115
  setScrollValue(scrollLeft + x);
82
116
  }
83
117
  };
84
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: connectedMemberships.length > 0 && ((0, jsx_runtime_1.jsxs)(S_MembershipListBox, { children: [isLeftMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "left" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_left", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollPrev(500); } }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(S_ContentOperatorPanel, __assign({ ref: membershipListRef, isLeftMaskingCoverShow: isLeftMaskingCoverShow, isRightMaskingCoverShow: isRightMaskingCoverShow, centered: connectedMemberships.length <= 2 }, { children: connectedMemberships.map(function (_a, i) {
118
+ return ((0, jsx_runtime_1.jsx)(S_NarrowMembershipList, { children: connectedMemberships.length > 0 && ((0, jsx_runtime_1.jsxs)(S_MembershipListBox, { children: [isLeftMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "left" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_left", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollPrev(500); } }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(S_ContentOperatorPanel, __assign({ ref: membershipListRef, isLeftMaskingCoverShow: isLeftMaskingCoverShow, isRightMaskingCoverShow: isRightMaskingCoverShow, centered: connectedMemberships.length <= 2 }, { children: connectedMemberships.map(function (_a, i) {
85
119
  var id = _a.id, membership = _a.membership;
86
120
  return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
87
121
  backgroundColor: i === currentIndex
@@ -105,15 +139,16 @@ function NarrowMembershipListView(_a) {
105
139
  : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0) }), void 0) }, id));
106
140
  }) }), void 0), isRightMaskingCoverShow && ((0, jsx_runtime_1.jsx)(S_ArrowIconCover, __assign({ position: "right" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.IconButton, { iconButtonBorderColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBorderColor, iconName: "ic_arrow_right", iconButtonIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonIconColor, iconButtonDisabledIconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledIconColor, iconButtonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonBackgroundColor, iconButtonDisabledBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].iconButtonDisabledBackgroundColor, onClick: function () { return scrollNext(500); } }, void 0) }), void 0))] }, void 0)) }, void 0));
107
141
  }
108
- var S_MembershipListBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"], ["\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"])), function (_a) {
142
+ var S_NarrowMembershipList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
143
+ var S_MembershipListBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"], ["\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"])), function (_a) {
109
144
  var theme = _a.theme;
110
145
  return theme.spacing.spacingF;
111
146
  });
112
- var Centered = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
113
- var LeftMasking = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"], ["\n -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"])));
114
- var RightMasking = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"], ["\n -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"])));
115
- var BothMasking = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n -webkit-mask-image: linear-gradient(\n 90deg,\n transparent 0%,\n white 7.5%,\n white 92.5%,\n transparent 100%\n );\n"], ["\n -webkit-mask-image: linear-gradient(\n 90deg,\n transparent 0%,\n white 7.5%,\n white 92.5%,\n transparent 100%\n );\n"])));
116
- var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n overflow: scroll;\n\n ", ";\n ", "\n"], ["\n display: flex;\n overflow: scroll;\n\n ", ";\n ", "\n"])), function (_a) {
147
+ var Centered = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
148
+ var LeftMasking = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"], ["\n -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 7.5%);\n"])));
149
+ var RightMasking = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"], ["\n -webkit-mask-image: linear-gradient(90deg, white 92.5%, transparent 100%);\n"])));
150
+ var BothMasking = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n -webkit-mask-image: linear-gradient(\n 90deg,\n transparent 0%,\n white 7.5%,\n white 92.5%,\n transparent 100%\n );\n"], ["\n -webkit-mask-image: linear-gradient(\n 90deg,\n transparent 0%,\n white 7.5%,\n white 92.5%,\n transparent 100%\n );\n"])));
151
+ var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n overflow: scroll;\n\n ", ";\n ", "\n"], ["\n display: flex;\n overflow: scroll;\n\n ", ";\n ", "\n"])), function (_a) {
117
152
  var centered = _a.centered;
118
153
  return centered && Centered;
119
154
  }, function (_a) {
@@ -128,7 +163,7 @@ var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_6 ||
128
163
  return RightMasking;
129
164
  }
130
165
  });
131
- var S_ArrowIconCover = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 120px;\n justify-content: ", ";\n position: absolute;\n top: 0;\n width: 48px;\n z-index: 1;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n height: 120px;\n justify-content: ", ";\n position: absolute;\n top: 0;\n width: 48px;\n z-index: 1;\n\n ", "\n"])), function (_a) {
166
+ var S_ArrowIconCover = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 120px;\n justify-content: ", ";\n position: absolute;\n top: 0;\n width: 48px;\n z-index: 1;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n height: 120px;\n justify-content: ", ";\n position: absolute;\n top: 0;\n width: 48px;\n z-index: 1;\n\n ", "\n"])), function (_a) {
132
167
  var position = _a.position;
133
168
  return (position === 'left' ? 'flex-start' : 'flex-end');
134
169
  }, function (_a) {
@@ -136,4 +171,4 @@ var S_ArrowIconCover = styled_components_1.default.div(templateObject_7 || (temp
136
171
  return position && position + ":0";
137
172
  });
138
173
  exports.default = NarrowMembershipListView;
139
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
174
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js CHANGED
@@ -31,7 +31,7 @@ function SectionContents() {
31
31
  var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
32
32
  var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
33
33
  var isEmptySection = !title && !description && !buttonAlphaLabel;
34
- 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));
34
+ 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, customFontSize: "20px", fontWeight: "600" }, 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));
35
35
  }
36
36
  var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
37
37
  var isEmptySection = _a.isEmptySection;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} RENAMED
@@ -3,5 +3,5 @@ import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types
3
3
  declare type Props = {
4
4
  sectionStyles: ISectionStyles;
5
5
  };
6
- declare function EmptyMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
7
- export default EmptyMembershipPlanSheet;
6
+ declare function UnavailableMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
7
+ export default UnavailableMembershipPlanSheet;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} RENAMED
@@ -17,16 +17,17 @@ var panels_1 = require("../../../../../../../../../desktop/panels");
17
17
  var components_1 = require("../../../../../../../../../hybrid/components");
18
18
  var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
19
19
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
20
- function EmptyMembershipPlanSheet(_a) {
20
+ function UnavailableMembershipPlanSheet(_a) {
21
21
  var sectionStyles = _a.sectionStyles;
22
22
  var t = (0, react_i18next_1.useTranslation)('translation').t;
23
23
  var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
24
- 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: {
24
+ 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", overrideCSS: {
25
25
  display: 'flex',
26
26
  alignItems: 'center',
27
+ justifyContent: 'center',
27
28
  height: '112px',
28
29
  backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
29
30
  } }, { 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]
30
31
  .disabledProgrammedItemActionButtonBackgroundColor, "$paddingBottom": "56px" }, void 0)] }, void 0));
31
32
  }
32
- exports.default = EmptyMembershipPlanSheet;
33
+ exports.default = UnavailableMembershipPlanSheet;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.js CHANGED
@@ -29,8 +29,7 @@ function MembershipSheet() {
29
29
  backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
30
30
  display: 'flex',
31
31
  alignItems: 'center',
32
- justifyContent: 'center',
33
- marginBottom: '96px'
32
+ justifyContent: 'center'
34
33
  }, 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));
35
34
  }
36
35
  exports.default = MembershipSheet;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/SectionContents.js CHANGED
@@ -30,7 +30,7 @@ function SectionContents() {
30
30
  }
31
31
  var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
32
32
  var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
33
- 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));
33
+ 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, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, 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));
34
34
  }
35
35
  var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
36
36
  var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.d.ts CHANGED
@@ -1,10 +1,8 @@
1
1
  /// <reference types="react" />
2
- import type { IConnectedSubscriptionProducts, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../../../../../../DynamicLayout/types';
2
+ import type { IConnectedSubscriptionProducts, ISectionStyles } from '../../../../../../../../DynamicLayout/types';
3
3
  declare type Props = {
4
4
  connectedSubscriptionProduct: IConnectedSubscriptionProducts;
5
- itemToneType: TypeOfItemToneType;
6
- itemHighlightingColorInHex: string;
7
- programmedItemActionButtonTextType: TypeOfProgrammedItemActionButtonTextType;
5
+ sectionStyles: ISectionStyles;
8
6
  };
9
- declare function MembershipPlanSheet({ connectedSubscriptionProduct, itemToneType, itemHighlightingColorInHex, programmedItemActionButtonTextType }: Props): JSX.Element;
7
+ declare function MembershipPlanSheet({ connectedSubscriptionProduct, sectionStyles }: Props): JSX.Element;
10
8
  export default MembershipPlanSheet;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.js CHANGED
@@ -27,11 +27,13 @@ var components_2 = require("../../../../../../../../DynamicLayout/sections/Membe
27
27
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
28
28
  var formatCurrency_1 = __importDefault(require("../../../../../../../../DynamicLayout/utils/formatCurrency"));
29
29
  var styled_components_1 = __importDefault(require("styled-components"));
30
+ var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
30
31
  function MembershipPlanSheet(_a) {
31
- var connectedSubscriptionProduct = _a.connectedSubscriptionProduct, itemToneType = _a.itemToneType, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, programmedItemActionButtonTextType = _a.programmedItemActionButtonTextType;
32
+ var connectedSubscriptionProduct = _a.connectedSubscriptionProduct, sectionStyles = _a.sectionStyles;
32
33
  var t = (0, react_i18next_1.useTranslation)('translation').t;
33
34
  var subscriptionProduct = connectedSubscriptionProduct.subscriptionProduct;
34
- var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee;
35
+ var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee, isDeactivated = subscriptionProduct.isDeactivated;
36
+ var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
35
37
  var productFeeText = (0, react_1.useMemo)(function () {
36
38
  var amount = fee.amount, currency = fee.currency;
37
39
  var price = (0, formatCurrency_1.default)(amount, currency);
@@ -63,11 +65,11 @@ function MembershipPlanSheet(_a) {
63
65
  return itemActionButtonTextType;
64
66
  }
65
67
  }, [programmedItemActionButtonTextType, type]);
66
- 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", overrideCSS: {
67
- display: 'flex',
68
- cursor: 'pointer',
69
- backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
70
- } }, { 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", wordBreak: "break_all", lineLimit: 2, ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, styleTheme: "body2Bold", wordBreak: "break_all", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, iconName: "ic_arrow_down" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", buttonText: itemActionButtonText }, void 0)] }, void 0));
68
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDeactivated ? ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: sectionStyles }, void 0)) : ((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", overrideCSS: {
69
+ display: 'flex',
70
+ cursor: 'pointer',
71
+ backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
72
+ } }, { 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", wordBreak: "break_all", lineLimit: 2, ellipsisMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), alias && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: alias, styleTheme: "body2Bold", wordBreak: "break_all", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: productFeeText, customFontSize: "32px", customFontWeight: "bold", wordBreak: "break_all", color: itemHighlightingColorInHex }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.ColorOverrideIcon, { iconColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, iconName: "ic_arrow_down" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonBackgroundColor: itemHighlightingColorInHex, buttonTextColor: "#FDFDFDFF", buttonText: itemActionButtonText }, void 0)] }, void 0)) }, void 0));
71
73
  }
72
74
  var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
73
75
  var S_MembershipInfoBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipSheet.js CHANGED
@@ -27,10 +27,10 @@ var Section_1 = require("../../../../../../../../DynamicLayout/components/Sectio
27
27
  var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
28
28
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
29
29
  var styled_components_1 = __importDefault(require("styled-components"));
30
- var EmptyMembershipPlanSheet_1 = __importDefault(require("./EmptyMembershipPlanSheet"));
31
30
  var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
32
31
  var MembershipCard_1 = __importDefault(require("./MembershipCard"));
33
32
  var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
33
+ var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
34
34
  function MembershipSheet(_a) {
35
35
  var filteredMemberships = _a.filteredMemberships, isWideView = _a.isWideView;
36
36
  var _b = (0, react_1.useState)(0), currentIndex = _b[0], setCurrentIndex = _b[1];
@@ -38,7 +38,7 @@ function MembershipSheet(_a) {
38
38
  if (!section) {
39
39
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
40
40
  }
41
- var _c = section.styles, itemHighlightingColorInHex = _c.itemHighlightingColorInHex, itemToneType = _c.itemToneType, programmedItemActionButtonTextType = _c.programmedItemActionButtonTextType;
41
+ var itemToneType = section.styles.itemToneType;
42
42
  var currentMembership = filteredMemberships[currentIndex];
43
43
  var membership = currentMembership.membership, connectedSubscriptionProducts = currentMembership.connectedSubscriptionProducts;
44
44
  var handlePrevMembershipClick = function () {
@@ -64,7 +64,7 @@ function MembershipSheet(_a) {
64
64
  paddingLeft: isWideView ? '160px' : '64px',
65
65
  paddingRight: isWideView ? '160px' : '64px',
66
66
  paddingTop: '80px'
67
- }, width: "100%", height: "auto", shapeType: "round" }, { children: [(0, jsx_runtime_1.jsx)(MembershipCard_1.default, { membershipCardTemplate: membership.membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isWideView: isWideView }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, ellipsisMode: "use" }, 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, { connectedSubscriptionProduct: connectedSubscriptionProducts[0], itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex, programmedItemActionButtonTextType: programmedItemActionButtonTextType }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0)] }, void 0));
67
+ }, width: "100%", height: "auto", shapeType: "round" }, { children: [(0, jsx_runtime_1.jsx)(MembershipCard_1.default, { membershipCardTemplate: membership.membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isWideView: isWideView }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, ellipsisMode: "use" }, 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, { connectedSubscriptionProduct: connectedSubscriptionProducts[0], sectionStyles: section.styles }, void 0)) : ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0)] }, void 0));
68
68
  }
69
69
  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"])));
70
70
  var S_ArrowButtonBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: ", ";\n"], ["\n display: flex;\n justify-content: flex-end;\n margin-bottom: ", ";\n"])), function (_a) {
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js CHANGED
@@ -30,7 +30,7 @@ function SectionContents() {
30
30
  }
31
31
  var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
32
32
  var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
33
- return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { 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));
33
+ return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { 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, customFontSize: "20px", fontWeight: "600" }, 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));
34
34
  }
35
35
  var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
36
36
  var isEmptySectionData = _a.isEmptySectionData;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} RENAMED
@@ -3,5 +3,5 @@ import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types
3
3
  declare type Props = {
4
4
  sectionStyles: ISectionStyles;
5
5
  };
6
- declare function EmptyMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
7
- export default EmptyMembershipPlanSheet;
6
+ declare function UnavailableMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
7
+ export default UnavailableMembershipPlanSheet;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} RENAMED
@@ -17,16 +17,17 @@ var panels_1 = require("../../../../../../../../../desktop/panels");
17
17
  var components_1 = require("../../../../../../../../../hybrid/components");
18
18
  var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
19
19
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
20
- function EmptyMembershipPlanSheet(_a) {
20
+ function UnavailableMembershipPlanSheet(_a) {
21
21
  var sectionStyles = _a.sectionStyles;
22
22
  var t = (0, react_i18next_1.useTranslation)('translation').t;
23
23
  var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
24
- 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: {
24
+ 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", overrideCSS: {
25
25
  display: 'flex',
26
26
  alignItems: 'center',
27
+ justifyContent: 'center',
27
28
  height: '112px',
28
29
  backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
29
30
  } }, { 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]
30
31
  .disabledProgrammedItemActionButtonBackgroundColor }, void 0)] }, void 0));
31
32
  }
32
- exports.default = EmptyMembershipPlanSheet;
33
+ exports.default = UnavailableMembershipPlanSheet;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/M_TemplateB.js CHANGED
@@ -17,9 +17,12 @@ function TemplateB(_a) {
17
17
  var orderedConnectedMemberships = membershipDisplay.connectedMemberships.slice().sort(function (a, b) { return a.order - b.order; }) || [];
18
18
  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));
19
19
  }
20
- var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
20
+ 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) {
21
21
  var theme = _a.theme;
22
22
  return theme.spacing.spacingG;
23
+ }, function (_a) {
24
+ var theme = _a.theme;
25
+ return theme.spacing.spacingE;
23
26
  });
24
27
  exports.default = TemplateB;
25
28
  var templateObject_1;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js CHANGED
@@ -1,8 +1,4 @@
1
1
  "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
2
  var __assign = (this && this.__assign) || function () {
7
3
  __assign = Object.assign || function(t) {
8
4
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,9 +10,6 @@ var __assign = (this && this.__assign) || function () {
14
10
  };
15
11
  return __assign.apply(this, arguments);
16
12
  };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
13
  Object.defineProperty(exports, "__esModule", { value: true });
21
14
  var jsx_runtime_1 = require("react/jsx-runtime");
22
15
  var react_1 = require("react");
@@ -25,7 +18,6 @@ var panels_1 = require("../../../../../../../../../desktop/panels");
25
18
  var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
26
19
  var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
27
20
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
28
- var styled_components_1 = __importDefault(require("styled-components"));
29
21
  function MembershipSheet() {
30
22
  var t = (0, react_i18next_1.useTranslation)('translation').t;
31
23
  var section = (0, react_1.useContext)(Section_1.sectionContext);
@@ -33,23 +25,11 @@ function MembershipSheet() {
33
25
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
34
26
  }
35
27
  var itemToneType = section.styles.itemToneType;
36
- return ((0, jsx_runtime_1.jsx)(S_EmptyMembershipSheet, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
37
- backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
38
- display: 'flex',
39
- alignItems: 'center',
40
- justifyContent: 'center',
41
- marginBottom: '96px'
42
- }, 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) }, void 0));
28
+ return ((0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
29
+ backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
30
+ display: 'flex',
31
+ alignItems: 'center',
32
+ justifyContent: 'center'
33
+ }, 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));
43
34
  }
44
- var S_EmptyMembershipSheet = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n padding: 0 ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n padding: 0 ", ";\n"])), function (_a) {
45
- var theme = _a.theme;
46
- return theme.spacing.spacingG;
47
- }, function (_a) {
48
- var theme = _a.theme;
49
- return theme.spacing.spacingG;
50
- }, function (_a) {
51
- var theme = _a.theme;
52
- return theme.spacing.spacingE;
53
- });
54
35
  exports.default = MembershipSheet;
55
- var templateObject_1;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipBenefitInfo.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var jsx_runtime_1 = require("react/jsx-runtime");
4
- var pdsOriginal_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal");
5
- var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
4
+ var components_1 = require("../../../../../../../../DynamicLayout/components");
5
+ var mobile_1 = require("../../../../../../../../DynamicLayout/components/mobile");
6
6
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
7
7
  function MembershipBenefitInfo(_a) {
8
8
  var membershipBenefitInfo = _a.membershipBenefitInfo, itemToneType = _a.itemToneType;
9
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [membershipBenefitInfo.benefitAlpha && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitAlpha, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitBravo, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitCharlie, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitDelta, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(pdsOriginal_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitEcho, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0))] }, void 0));
9
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [membershipBenefitInfo.benefitAlpha && ((0, jsx_runtime_1.jsx)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitAlpha, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitBravo, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitCharlie, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitDelta, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, 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)(mobile_1.Item.Description, { text: membershipBenefitInfo.benefitEcho, styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" }, void 0)] }, void 0))] }, void 0));
10
10
  }
11
11
  exports.default = MembershipBenefitInfo;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipContents.js CHANGED
@@ -17,6 +17,6 @@ function MembershipContents(_a) {
17
17
  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));
18
18
  }) }, void 0));
19
19
  }
20
- 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 margin-bottom: 115px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-bottom: 115px;\n position: relative;\n"])));
20
+ 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"])));
21
21
  exports.default = MembershipContents;
22
22
  var templateObject_1;