pds-dev-kit-web 2.0.12 → 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 (31) hide show
  1. package/dist/src/sub/DynamicLayout/mock_samplePage.js +3 -3
  2. package/dist/src/sub/DynamicLayout/mock_storybook.d.ts +4 -4
  3. package/dist/src/sub/DynamicLayout/mock_storybook.js +30 -26
  4. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js +7 -6
  5. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.js +5 -6
  6. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js +48 -13
  7. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js +1 -1
  8. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} +2 -2
  9. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} +4 -3
  10. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.js +1 -2
  11. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/SectionContents.js +1 -1
  12. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.d.ts +3 -5
  13. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.js +9 -7
  14. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipSheet.js +3 -3
  15. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js +1 -1
  16. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts} +2 -2
  17. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js} +4 -3
  18. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/M_TemplateB.js +4 -1
  19. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js +6 -26
  20. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipBenefitInfo.js +3 -3
  21. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipContents.js +1 -1
  22. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipSectionSheet.js +14 -27
  23. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/SectionContents.js +15 -4
  24. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.d.ts +3 -1
  25. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js +6 -3
  26. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts +3 -1
  27. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js +9 -3
  28. package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.d.ts +1 -0
  29. package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.js +2 -1
  30. package/package.json +1 -1
  31. package/release-note.md +4 -16
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, __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;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipSectionSheet.js CHANGED
@@ -20,9 +20,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var react_1 = require("react");
23
- var pdsOriginal_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal");
23
+ var components_1 = require("../../../../../../../../../hybrid/components");
24
+ var panels_1 = require("../../../../../../../../../mobile/panels");
24
25
  var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
25
- var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
26
+ var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
26
27
  var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
27
28
  var styled_components_1 = __importDefault(require("styled-components"));
28
29
  var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
@@ -32,33 +33,19 @@ function MembershipSectionSheet(_a) {
32
33
  if (!section) {
33
34
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
34
35
  }
35
- var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
36
36
  var itemToneType = section.styles.itemToneType;
37
- return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(S_ImageWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsxs)(S_ContentBox, { children: [(0, jsx_runtime_1.jsx)(S_TopGradient, { contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipDetailBox, __assign({ contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, { children: (0, jsx_runtime_1.jsxs)(S_MembershipDetailContents, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: membership.title || '', color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, customFontSize: "28px", customFontWeight: "bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_f" }, void 0), membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0)), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_BottomGradient, { contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, void 0)] }, void 0)] }, void 0));
37
+ var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
38
+ return ((0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ overrideCSS: {
39
+ backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
40
+ display: 'flex',
41
+ flexDirection: 'column',
42
+ justifyContent: 'center',
43
+ marginBottom: '48px'
44
+ }, width: "100%", height: "100%", shapeType: "round", paddingBottom: "spacing_f" }, { children: [(0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.Title, { text: membership.title || '', color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, customFontSize: "28px", customFontWeight: "bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipDetailBox, { children: membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0)) }, void 0)] }), void 0));
38
45
  }
39
- var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n position: sticky;\n top: 0px;\n z-index: 1;\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n position: sticky;\n top: 0px;\n z-index: 1;\n"])), function (_a) {
40
- var theme = _a.theme;
41
- return theme.spacing.spacingG;
42
- }, function (_a) {
43
- var theme = _a.theme;
44
- return theme.spacing.spacingG;
45
- }, function (_a) {
46
+ var S_MembershipDetailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-top: ", ";\n position: relative;\n width: 100%;\n"], ["\n padding-top: ", ";\n position: relative;\n width: 100%;\n"])), function (_a) {
46
47
  var theme = _a.theme;
47
- return theme.spacing.spacingG;
48
- });
49
- var S_ContentBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
50
- var S_TopGradient = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n height: 80px;\n position: relative;\n width: 100%;\n z-index: 2;\n"], ["\n background: ", ";\n height: 80px;\n position: relative;\n width: 100%;\n z-index: 2;\n"])), function (_a) {
51
- var contentBackgroundDimColor = _a.contentBackgroundDimColor;
52
- return "linear-gradient(transparent, " + contentBackgroundDimColor + ")";
53
- });
54
- var S_BottomGradient = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: ", ";\n height: 80px;\n position: relative;\n width: 100%;\n z-index: 2;\n"], ["\n background: ", ";\n height: 80px;\n position: relative;\n width: 100%;\n z-index: 2;\n"])), function (_a) {
55
- var contentBackgroundDimColor = _a.contentBackgroundDimColor;
56
- return "linear-gradient(" + contentBackgroundDimColor + ", transparent)";
57
- });
58
- var S_MembershipDetailBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n display: flex;\n min-height: 446px;\n position: sticky;\n width: 100%;\n z-index: 2;\n"], ["\n background: ", ";\n display: flex;\n min-height: 446px;\n position: sticky;\n width: 100%;\n z-index: 2;\n"])), function (_a) {
59
- var contentBackgroundDimColor = _a.contentBackgroundDimColor;
60
- return contentBackgroundDimColor;
48
+ return theme.spacing.spacingF;
61
49
  });
62
- var S_MembershipDetailContents = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0 72px;\n position: relative;\n width: 100%;\n"], ["\n margin: 0 72px;\n position: relative;\n width: 100%;\n"])));
63
50
  exports.default = MembershipSectionSheet;
64
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
51
+ var templateObject_1;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/SectionContents.js CHANGED
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
6
17
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
19
  };
@@ -19,11 +30,11 @@ function SectionContents() {
19
30
  }
20
31
  var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
21
32
  var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
22
- return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "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));
23
34
  }
24
- var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 ", ";\n"], ["\n padding: 0 ", ";\n"])), function (_a) {
25
- var theme = _a.theme;
26
- return theme.spacing.spacingE;
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
+ var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;
37
+ return isEmptySectionData ? 0 : theme.spacing.spacingG;
27
38
  });
28
39
  var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-top: ", ";\n"], ["\n padding-top: ", ";\n"])), function (_a) {
29
40
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.d.ts CHANGED
@@ -7,7 +7,9 @@ declare namespace MembershipSectionItem {
7
7
  var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
8
8
  lineHeight?: number | undefined;
9
9
  }) => JSX.Element;
10
- var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
10
+ var Description: ({ text, color, fontWeight, ...textLabelProps }: IItemDescription & TextLabelProps & {
11
+ fontWeight?: string | undefined;
12
+ }) => JSX.Element;
11
13
  var DesignedSectionButton: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
12
14
  var IconButton: ({ iconButtonIconColor, iconButtonDisabledIconColor, iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
13
15
  var MembershipCard: ({ membershipCardTemplate }: MembershipCardProps) => JSX.Element;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js CHANGED
@@ -70,12 +70,15 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
70
70
  return lineHeight;
71
71
  });
72
72
  function Description(_a) {
73
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
74
- return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
73
+ var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
74
+ return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
75
75
  }
76
- var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n & > div {\n color: ", ";\n width: 100%;\n }\n"], ["\n & > div {\n color: ", ";\n width: 100%;\n }\n"])), function (_a) {
76
+ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n & > div {\n color: ", ";\n width: 100%;\n\n ", ";\n }\n"], ["\n & > div {\n color: ", ";\n width: 100%;\n\n ", ";\n }\n"])), function (_a) {
77
77
  var color = _a.color;
78
78
  return color;
79
+ }, function (_a) {
80
+ var fontWeight = _a.fontWeight;
81
+ return fontWeight && "font-weight : " + fontWeight + ";";
79
82
  });
80
83
  function DesignedSectionButton(_a) {
81
84
  var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts CHANGED
@@ -7,7 +7,9 @@ declare namespace MembershipSectionItem {
7
7
  var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
8
8
  lineHeight?: number | undefined;
9
9
  }) => JSX.Element;
10
- var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
10
+ var Description: ({ text, color, fontWeight, ...textLabelProps }: IItemDescription & TextLabelProps & {
11
+ fontWeight?: string | undefined;
12
+ }) => JSX.Element;
11
13
  var DesignedSectionButton: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
12
14
  var IconButton: ({ iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor, iconButtonIconColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
13
15
  var MembershipCard: ({ membershipCardTemplate, cardWidth }: MembershipCardProps) => JSX.Element;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js CHANGED
@@ -70,12 +70,18 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
70
70
  return lineHeight;
71
71
  });
72
72
  function Description(_a) {
73
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
74
- return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
73
+ var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
74
+ return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight, isBulletPointMode: textLabelProps.bulletPointMode === 'use' }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
75
75
  }
76
- var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n & > div {\n color: ", ";\n width: 100%;\n }\n"], ["\n & > div {\n color: ", ";\n width: 100%;\n }\n"])), function (_a) {
76
+ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n\n & > div {\n color: ", ";\n width: 100%;\n\n ", ";\n }\n"], ["\n ", ";\n\n & > div {\n color: ", ";\n width: 100%;\n\n ", ";\n }\n"])), function (_a) {
77
+ var isBulletPointMode = _a.isBulletPointMode;
78
+ return isBulletPointMode && 'position: relative';
79
+ }, function (_a) {
77
80
  var color = _a.color;
78
81
  return color;
82
+ }, function (_a) {
83
+ var fontWeight = _a.fontWeight;
84
+ return fontWeight && "font-weight : " + fontWeight + ";";
79
85
  });
80
86
  function DesignedSectionButton(_a) {
81
87
  var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { TypeOfMembershipSectionToneColor } from './type';
2
2
  import type { SubscriptionProductType, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../DynamicLayout/types';
3
+ export declare const MEMBERSHIP_SECTION_PREVIEW_WIDTH = 375;
3
4
  export declare const COMMON_OVERLAY_IMAGE_SRC = "https://static.publ.site/membership_card_deco.png";
4
5
  export declare const MEMBERSHIP_SECTION_TONE_COLOR: {
5
6
  [key in TypeOfItemToneType]: TypeOfMembershipSectionToneColor;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = exports.MEMBERSHIP_SECTION_TONE_COLOR = exports.COMMON_OVERLAY_IMAGE_SRC = void 0;
3
+ exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = exports.MEMBERSHIP_SECTION_TONE_COLOR = exports.COMMON_OVERLAY_IMAGE_SRC = exports.MEMBERSHIP_SECTION_PREVIEW_WIDTH = void 0;
4
+ exports.MEMBERSHIP_SECTION_PREVIEW_WIDTH = 375;
4
5
  exports.COMMON_OVERLAY_IMAGE_SRC = 'https://static.publ.site/membership_card_deco.png';
5
6
  exports.MEMBERSHIP_SECTION_TONE_COLOR = {
6
7
  LIGHT: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.0.12",
3
+ "version": "2.0.13-alpha.0",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,20 +1,8 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.0.12]
2
+ ## [v2.0.13-alpha.0]
3
3
 
4
- ## daily|https://design.storybook.publ.biz/
4
+ ## alpha|https://storybook-pds-alpha.test.publ.biz
5
5
 
6
- ### Component
7
- * Icon
8
- * 커머스 관련 line icon 추가
9
- * ic_box
10
- * ic_cart
11
- * ic_delivery
12
- * ic_receipt
13
- * ic_shop
14
- * ic_shoppingbag
15
6
  ### sub
16
- * AdminList
17
- * ToolBar
18
- * chip들의 왼쪽 간격이 searchMode에 따라 변경되도록 조치
19
- ### Color
20
- * 컬러 키 값 23.05.11 17시 01분 기준 싱크
7
+ * DynamicLayout
8
+ * membership section M_Template_B 디자인 변경