pds-dev-kit-web 2.0.10-alpha.0 → 2.0.11-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 (35) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
  3. package/dist/src/common/styles/colorSet/UIColor.json +3 -1
  4. package/dist/src/common/styles/colorSet/index.d.ts +606 -602
  5. package/dist/src/common/styles/colorSet/index.js +4 -4
  6. package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
  7. package/dist/src/desktop/components/TextLabel/TextLabel.js +17 -7
  8. package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js +1 -1
  9. package/dist/src/sub/DynamicLayout/mock_samplePage.js +3 -3
  10. package/dist/src/sub/DynamicLayout/mock_storybook.d.ts +4 -4
  11. package/dist/src/sub/DynamicLayout/mock_storybook.js +30 -26
  12. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js +7 -6
  13. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.js +3 -4
  14. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js +27 -13
  15. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js +1 -1
  16. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} +2 -2
  17. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} +4 -3
  18. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.js +1 -2
  19. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/SectionContents.js +1 -1
  20. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.d.ts +3 -5
  21. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.js +9 -7
  22. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipSheet.js +3 -3
  23. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js +1 -1
  24. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} +2 -2
  25. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} +4 -3
  26. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js +3 -8
  27. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipContents.js +1 -1
  28. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipSectionSheet.js +81 -23
  29. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/SectionContents.js +1 -1
  30. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.d.ts +3 -1
  31. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js +6 -3
  32. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts +3 -1
  33. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js +9 -3
  34. package/package.json +1 -1
  35. package/release-note.md +9 -5
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
8
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
9
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
13
+ UIColor: UIColor_json_1.default,
14
14
  PaletteColor_light: PaletteColor_light_json_1.default,
15
- UIColor: UIColor_json_1.default
15
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -767,4 +767,6 @@ export interface UITheme {
767
767
  ui_cpnt_sheet_border_08: string;
768
768
  ui_cpnt_textlabel_sys_warning_2: string;
769
769
  ui_cpnt_sheet_base_20: string;
770
+ ui_cpnt_sheet_base_21: string;
771
+ ui_cpnt_sheet_base_22: string;
770
772
  }
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -44,7 +44,7 @@ function TextLabel(_a) {
44
44
  var handleTooltipToggle = function (value) {
45
45
  setIsTooltipOpen(value);
46
46
  };
47
- return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }, void 0) }, void 0) }), void 0)), tooltipText && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsxs)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }, void 0), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "" + tooltipText }), void 0)] }), void 0) }), void 0))] }), void 0));
47
+ return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }, void 0) }, void 0) }), void 0)), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "" + tooltipText }), void 0)] }), void 0))] }), void 0));
48
48
  }
49
49
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
50
50
  var theme = _a.theme;
@@ -285,12 +285,10 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (temp
285
285
  var colorOverride = _a.colorOverride, theme = _a.theme;
286
286
  return colorOverride && theme[colorOverride];
287
287
  });
288
- /* eslint-disable */
289
- var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
288
+ var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
290
289
  var lineLimit = _a.lineLimit;
291
290
  return lineLimit;
292
291
  });
293
- /* eslint-enable */
294
292
  var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
295
293
  var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
296
294
  var tooltipLeftTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n bottom: 20px;\n right: 0;\n"], ["\n bottom: 20px;\n right: 0;\n"])));
@@ -380,11 +378,23 @@ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (template
380
378
  var bulletPointMode = _a.bulletPointMode;
381
379
  return bulletPointMode === 'use' && bulletPointModeStyle;
382
380
  });
383
- var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n height: 100%;\n margin-left: ", ";\n position: relative;\n\n &::before {\n content: 'i';\n overflow: hidden;\n visibility: hidden;\n width: 0;\n }\n"], ["\n align-items: center;\n display: inline-flex;\n height: 100%;\n margin-left: ", ";\n position: relative;\n\n &::before {\n content: 'i';\n overflow: hidden;\n visibility: hidden;\n width: 0;\n }\n"])), function (_a) {
381
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
384
382
  var theme = _a.theme;
385
383
  return theme.spacing.spacingA;
386
- });
387
- var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n justify-content: center;\n position: relative;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n justify-content: center;\n position: relative;\n width: 16px;\n"])));
384
+ }, function (_a) {
385
+ var styleTheme = _a.styleTheme;
386
+ switch (styleTheme) {
387
+ case 'headingBold':
388
+ return;
389
+ case 'leadParaBold':
390
+ return;
391
+ case 'leadParaRegular':
392
+ return;
393
+ default:
394
+ return 'vertical-align: middle';
395
+ }
396
+ });
397
+ var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
388
398
  var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n\n ", ";\n"])), function (_a) {
389
399
  var theme = _a.theme;
390
400
  return theme.ui_cpnt_contextmenu_base;
package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js CHANGED
@@ -71,7 +71,7 @@ function MobileHeaderBar(_a) {
71
71
  return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0));
72
72
  }
73
73
  case 'image': {
74
- return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "cover", width: 160 }, void 0));
74
+ return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }, void 0));
75
75
  }
76
76
  }
77
77
  };
package/dist/src/sub/DynamicLayout/mock_samplePage.js CHANGED
@@ -1110,8 +1110,8 @@ exports.samplePageMembershipSection = {
1110
1110
  itemDescriptionColorInHex: '#68686BFF',
1111
1111
  itemTitleColorInHex: '#1E1E20FF',
1112
1112
  titleColorInHex: '#DEECFFFF',
1113
- itemHighlightingColorInHex: '#313131FF',
1114
- itemToneType: 'LIGHT',
1113
+ itemHighlightingColorInHex: '#FFCC00FF',
1114
+ itemToneType: 'DARK',
1115
1115
  programmedItemActionButtonTextType: 'A'
1116
1116
  },
1117
1117
  template: 'PRG_MEMBERSHIP_DISPLAY_B',
@@ -1184,7 +1184,7 @@ exports.samplePageMembershipSection = {
1184
1184
  },
1185
1185
  totalSubscriptionProducts: 3
1186
1186
  },
1187
- connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, i) {
1187
+ connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
1188
1188
  return {
1189
1189
  id: i + 1,
1190
1190
  order: i,
package/dist/src/sub/DynamicLayout/mock_storybook.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type DynamicLayout from './DynamicLayout';
3
3
  export declare const SampleSectionsMock: React.ComponentProps<typeof DynamicLayout>['sections'];
4
- export declare const MembershipSectionsMock: React.ComponentProps<typeof DynamicLayout>['sections'];
5
- export declare const MembershipSectionsMockWithoutMembership: React.ComponentProps<typeof DynamicLayout>['sections'];
6
- export declare const MembershipSectionsMockWithoutConnectedSubscriptionProducts: React.ComponentProps<typeof DynamicLayout>['sections'];
7
- export declare const MembershipSectionsMockOnlyOneConnectedSubscriptionProduct: React.ComponentProps<typeof DynamicLayout>['sections'];
4
+ export declare const MembershipSectionsMock: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];
5
+ export declare const MembershipSectionsMockWithoutMembership: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];
6
+ export declare const MembershipSectionsMockWithoutConnectedSubscriptionProducts: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];
7
+ export declare const MembershipSectionsMockOnlyOneConnectedSubscriptionProduct: (templateType: 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B') => React.ComponentProps<typeof DynamicLayout>['sections'];
package/dist/src/sub/DynamicLayout/mock_storybook.js CHANGED
@@ -1241,7 +1241,7 @@ exports.SampleSectionsMock = [
1241
1241
  updatedAt: '2023-01-06T09:05:45'
1242
1242
  }
1243
1243
  ];
1244
- exports.MembershipSectionsMock = [
1244
+ var MembershipSectionsMock = function (templateType) { return [
1245
1245
  {
1246
1246
  type: 'DESIGNED',
1247
1247
  display: true,
@@ -1432,7 +1432,7 @@ exports.MembershipSectionsMock = [
1432
1432
  itemToneType: 'LIGHT',
1433
1433
  programmedItemActionButtonTextType: 'A'
1434
1434
  },
1435
- template: 'PRG_MEMBERSHIP_DISPLAY_A',
1435
+ template: templateType,
1436
1436
  programData: {
1437
1437
  mdid: 'mdid',
1438
1438
  preview: {
@@ -1498,19 +1498,19 @@ exports.MembershipSectionsMock = [
1498
1498
  },
1499
1499
  totalSubscriptionProducts: 3
1500
1500
  },
1501
- connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, j) {
1501
+ connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
1502
1502
  return {
1503
- id: j + 1,
1504
- order: j,
1505
- connectedMembershipId: j + 1,
1506
- subscriptionProductId: j + 1,
1503
+ id: i + 1,
1504
+ order: i,
1505
+ connectedMembershipId: i + 1,
1506
+ subscriptionProductId: i + 1,
1507
1507
  subscriptionProduct: {
1508
- id: j + 1,
1508
+ id: i + 1,
1509
1509
  type: 'COUPON_ONCE_FINITE',
1510
1510
  title: '청춘이 황금시대를 우리의 같은 무엇을',
1511
1511
  alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
1512
1512
  expiryPeriodInDays: 7,
1513
- isDeactivated: j % 2 === 0,
1513
+ isDeactivated: i % 2 === 0,
1514
1514
  fee: {
1515
1515
  currency: 'KRW',
1516
1516
  amount: 10000
@@ -1530,8 +1530,9 @@ exports.MembershipSectionsMock = [
1530
1530
  insertedAt: '2023-01-30T10:24:35',
1531
1531
  updatedAt: '2023-01-30T10:24:35'
1532
1532
  }
1533
- ];
1534
- exports.MembershipSectionsMockWithoutMembership = [
1533
+ ]; };
1534
+ exports.MembershipSectionsMock = MembershipSectionsMock;
1535
+ var MembershipSectionsMockWithoutMembership = function (templateType) { return [
1535
1536
  {
1536
1537
  type: 'DESIGNED',
1537
1538
  display: true,
@@ -1722,7 +1723,7 @@ exports.MembershipSectionsMockWithoutMembership = [
1722
1723
  itemToneType: 'LIGHT',
1723
1724
  programmedItemActionButtonTextType: 'A'
1724
1725
  },
1725
- template: 'PRG_MEMBERSHIP_DISPLAY_A',
1726
+ template: templateType,
1726
1727
  programData: {
1727
1728
  mdid: 'mdid',
1728
1729
  preview: {
@@ -1744,8 +1745,9 @@ exports.MembershipSectionsMockWithoutMembership = [
1744
1745
  insertedAt: '2023-01-30T10:24:35',
1745
1746
  updatedAt: '2023-01-30T10:24:35'
1746
1747
  }
1747
- ];
1748
- exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = [
1748
+ ]; };
1749
+ exports.MembershipSectionsMockWithoutMembership = MembershipSectionsMockWithoutMembership;
1750
+ var MembershipSectionsMockWithoutConnectedSubscriptionProducts = function (templateType) { return [
1749
1751
  {
1750
1752
  type: 'DESIGNED',
1751
1753
  display: true,
@@ -1936,7 +1938,7 @@ exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = [
1936
1938
  itemToneType: 'LIGHT',
1937
1939
  programmedItemActionButtonTextType: 'A'
1938
1940
  },
1939
- template: 'PRG_MEMBERSHIP_DISPLAY_A',
1941
+ template: templateType,
1940
1942
  programData: {
1941
1943
  mdid: 'mdid',
1942
1944
  preview: {
@@ -2013,8 +2015,9 @@ exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = [
2013
2015
  insertedAt: '2023-01-30T10:24:35',
2014
2016
  updatedAt: '2023-01-30T10:24:35'
2015
2017
  }
2016
- ];
2017
- exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
2018
+ ]; };
2019
+ exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = MembershipSectionsMockWithoutConnectedSubscriptionProducts;
2020
+ var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templateType) { return [
2018
2021
  {
2019
2022
  type: 'DESIGNED',
2020
2023
  display: true,
@@ -2205,7 +2208,7 @@ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
2205
2208
  itemToneType: 'LIGHT',
2206
2209
  programmedItemActionButtonTextType: 'A'
2207
2210
  },
2208
- template: 'PRG_MEMBERSHIP_DISPLAY_A',
2211
+ template: templateType,
2209
2212
  programData: {
2210
2213
  mdid: 'mdid',
2211
2214
  preview: {
@@ -2271,19 +2274,19 @@ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
2271
2274
  },
2272
2275
  totalSubscriptionProducts: 3
2273
2276
  },
2274
- connectedSubscriptionProducts: Array.from({ length: 1 }, function (_, j) {
2277
+ connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
2275
2278
  return {
2276
- id: j + 1,
2277
- order: j,
2278
- connectedMembershipId: j + 1,
2279
- subscriptionProductId: j + 1,
2279
+ id: i + 1,
2280
+ order: i,
2281
+ connectedMembershipId: i + 1,
2282
+ subscriptionProductId: i + 1,
2280
2283
  subscriptionProduct: {
2281
- id: j + 1,
2284
+ id: i + 1,
2282
2285
  type: 'COUPON_ONCE_FINITE',
2283
2286
  title: '청춘이 황금시대를 우리의 같은 무엇을',
2284
2287
  alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
2285
2288
  expiryPeriodInDays: 7,
2286
- isDeactivated: j % 2 === 0,
2289
+ isDeactivated: i % 2 === 0,
2287
2290
  fee: {
2288
2291
  currency: 'KRW',
2289
2292
  amount: 10000
@@ -2303,4 +2306,5 @@ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
2303
2306
  insertedAt: '2023-01-30T10:24:35',
2304
2307
  updatedAt: '2023-01-30T10:24:35'
2305
2308
  }
2306
- ];
2309
+ ]; };
2310
+ exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = MembershipSectionsMockOnlyOneConnectedSubscriptionProduct;
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, { 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;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js CHANGED
@@ -50,6 +50,11 @@ function NarrowMembershipListView(_a) {
50
50
  }
51
51
  setScrollValue(membershipListRef.current.scrollLeft);
52
52
  };
53
+ /**
54
+ * @when : 화면 진입 시
55
+ * @expected : 스크롤을 감지하는 이벤트 핸들러를 추가합니다.
56
+ * @clear : 스크롤을 감지하는 이벤트 핸들러를 제거합니다.
57
+ */
53
58
  (0, react_1.useEffect)(function () {
54
59
  if (!membershipListRef.current) {
55
60
  return;
@@ -63,10 +68,18 @@ function NarrowMembershipListView(_a) {
63
68
  };
64
69
  }, []);
65
70
  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;
71
+ var isRightMaskingCoverShow = (0, react_1.useMemo)(function () {
72
+ if (connectedMemberships.length < 3) {
73
+ return false;
74
+ }
75
+ if (scrollValue === 0) {
76
+ return true;
77
+ }
78
+ return membershipListRef.current
79
+ ? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
80
+ membershipListRef.current.scrollWidth - 1
81
+ : scrollValue === 0;
82
+ }, [connectedMemberships, membershipListRef, scrollValue]);
70
83
  var scrollPrev = function (x) {
71
84
  var scrollLeft = (membershipListRef.current || {}).scrollLeft;
72
85
  if (membershipListRef.current && typeof scrollLeft === 'number') {
@@ -81,7 +94,7 @@ function NarrowMembershipListView(_a) {
81
94
  setScrollValue(scrollLeft + x);
82
95
  }
83
96
  };
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) {
97
+ 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
98
  var id = _a.id, membership = _a.membership;
86
99
  return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
87
100
  backgroundColor: i === currentIndex
@@ -105,15 +118,16 @@ function NarrowMembershipListView(_a) {
105
118
  : constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0) }), void 0) }, id));
106
119
  }) }), 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
120
  }
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) {
121
+ var S_NarrowMembershipList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
122
+ 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
123
  var theme = _a.theme;
110
124
  return theme.spacing.spacingF;
111
125
  });
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) {
126
+ var Centered = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
127
+ 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"])));
128
+ 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"])));
129
+ 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"])));
130
+ 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
131
  var centered = _a.centered;
118
132
  return centered && Centered;
119
133
  }, function (_a) {
@@ -128,7 +142,7 @@ var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_6 ||
128
142
  return RightMasking;
129
143
  }
130
144
  });
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) {
145
+ 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
146
  var position = _a.position;
133
147
  return (position === 'left' ? 'flex-start' : 'flex-end');
134
148
  }, function (_a) {
@@ -136,4 +150,4 @@ var S_ArrowIconCover = styled_components_1.default.div(templateObject_7 || (temp
136
150
  return position && position + ":0";
137
151
  });
138
152
  exports.default = NarrowMembershipListView;
139
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
153
+ 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"])));