pds-dev-kit-web 2.0.11-alpha.0 → 2.0.12
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.
- package/dist/src/common/assets/icons/line/Box.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Box.js +30 -0
- package/dist/src/common/assets/icons/line/Cart.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Cart.js +30 -0
- package/dist/src/common/assets/icons/line/Delivery.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Delivery.js +30 -0
- package/dist/src/common/assets/icons/line/Receipt.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Receipt.js +30 -0
- package/dist/src/common/assets/icons/line/Shop.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Shop.js +30 -0
- package/dist/src/common/assets/icons/line/Shoppingbag.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Shoppingbag.js +30 -0
- package/dist/src/common/assets/icons/line/index.d.ts +6 -0
- package/dist/src/common/assets/icons/line/index.js +12 -0
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +1 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +1 -1
- package/dist/src/common/styles/colorSet/SemanticColor.json +3 -1
- package/dist/src/common/styles/colorSet/index.d.ts +776 -774
- package/dist/src/common/styles/colorSet/index.js +4 -4
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTA.js +1 -1
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTK.js +1 -1
- package/dist/src/sub/AdminList/ToolBar/ToolBar.js +1 -1
- package/dist/src/sub/DynamicLayout/mock_samplePage.js +3 -3
- package/dist/src/sub/DynamicLayout/mock_storybook.d.ts +4 -4
- package/dist/src/sub/DynamicLayout/mock_storybook.js +26 -30
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{UnavailableMembershipPlanSheet.d.ts → EmptyMembershipPlanSheet.d.ts} +2 -2
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/{UnavailableMembershipPlanSheet.js → EmptyMembershipPlanSheet.js} +3 -4
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js +6 -7
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.js +4 -3
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js +13 -27
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/EmptyMembershipSheet.js +2 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/mobile/components/SectionContents.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{UnavailableMembershipPlanSheet.d.ts → EmptyMembershipPlanSheet.d.ts} +2 -2
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{UnavailableMembershipPlanSheet.js → EmptyMembershipPlanSheet.js} +3 -4
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.d.ts +5 -3
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.js +7 -9
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipSheet.js +3 -3
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js +8 -3
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipContents.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipSectionSheet.js +23 -81
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/SectionContents.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.d.ts +1 -3
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js +3 -6
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts +1 -3
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js +3 -9
- package/package.json +1 -1
- package/release-note.md +15 -7
|
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
|
-
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
9
|
-
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
10
8
|
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
9
|
+
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
10
|
+
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
12
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
|
-
|
|
13
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
14
14
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
15
|
-
|
|
15
|
+
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -39,7 +39,7 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
39
39
|
var components_1 = require("../../../../../../common/components");
|
|
40
40
|
var WTA = function (_a) {
|
|
41
41
|
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
|
|
42
|
-
return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA" }, { children: content1 }), void 0) }), void 0)) }), void 0));
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA" }, { children: content1 }), void 0) }), void 0)) }), void 0));
|
|
43
43
|
};
|
|
44
44
|
var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
45
45
|
var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
|
|
@@ -39,7 +39,7 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
39
39
|
var components_1 = require("../../../../../../common/components");
|
|
40
40
|
var WTK = function (_a) {
|
|
41
41
|
var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, container1Ref = _a.container1Ref;
|
|
42
|
-
return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTK", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, ref: container1Ref }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTK", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTK", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0));
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTK", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, ref: container1Ref }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTK", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTK", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0));
|
|
43
43
|
};
|
|
44
44
|
var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
45
45
|
var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
|
|
@@ -73,7 +73,7 @@ function ToolBar(_a) {
|
|
|
73
73
|
onClickIBtn3();
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_e", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(components_1.Form, __assign({ onSubmit: handleSubmit(onSubmit) }, { children: (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" }, void 0) }), void 0) }), void 0)] }, void 0)) }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(S_SearchIconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }, void 0) }, void 0)] }, void 0)), chipMode === 'use' && chipTextArray && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size:
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_e", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(components_1.Form, __assign({ onSubmit: handleSubmit(onSubmit) }, { children: (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" }, void 0) }), void 0) }), void 0)] }, void 0)) }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(S_SearchIconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }, void 0) }, void 0)] }, void 0)), chipMode === 'use' && chipTextArray && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: searchMode === 'use' ? 'spacing_d' : 'spacing_e', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(ChipList_1.default, { textArray: chipTextArray, value: chipValue, onClickChip: handleChipClick }, void 0)] }, void 0))] }, void 0)) }, void 0), (0, jsx_runtime_1.jsx)(S_IconButtonBox, { children: iBtnMode !== 'none' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iBtnMode === 'iBtn_amount3' && iBtn3IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn3IconName, iconFillType: iBtn3IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn3Click }, void 0)), (iBtnMode === 'iBtn_amount2' || iBtnMode === 'iBtn_amount3') && iBtn2IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click }, void 0)), iBtn1IconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }, void 0), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0)] }, void 0))] }, void 0)) }, void 0)] }, void 0) }, void 0));
|
|
77
77
|
}
|
|
78
78
|
var S_ToolBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n min-height: 40px;\n"], ["\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n min-height: 40px;\n"])));
|
|
79
79
|
var S_FilterBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -1110,8 +1110,8 @@ exports.samplePageMembershipSection = {
|
|
|
1110
1110
|
itemDescriptionColorInHex: '#68686BFF',
|
|
1111
1111
|
itemTitleColorInHex: '#1E1E20FF',
|
|
1112
1112
|
titleColorInHex: '#DEECFFFF',
|
|
1113
|
-
itemHighlightingColorInHex: '#
|
|
1114
|
-
itemToneType: '
|
|
1113
|
+
itemHighlightingColorInHex: '#313131FF',
|
|
1114
|
+
itemToneType: 'LIGHT',
|
|
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:
|
|
1187
|
+
connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, i) {
|
|
1188
1188
|
return {
|
|
1189
1189
|
id: i + 1,
|
|
1190
1190
|
order: i,
|
|
@@ -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:
|
|
5
|
-
export declare const MembershipSectionsMockWithoutMembership:
|
|
6
|
-
export declare const MembershipSectionsMockWithoutConnectedSubscriptionProducts:
|
|
7
|
-
export declare const MembershipSectionsMockOnlyOneConnectedSubscriptionProduct:
|
|
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'];
|
|
@@ -1241,7 +1241,7 @@ exports.SampleSectionsMock = [
|
|
|
1241
1241
|
updatedAt: '2023-01-06T09:05:45'
|
|
1242
1242
|
}
|
|
1243
1243
|
];
|
|
1244
|
-
|
|
1244
|
+
exports.MembershipSectionsMock = [
|
|
1245
1245
|
{
|
|
1246
1246
|
type: 'DESIGNED',
|
|
1247
1247
|
display: true,
|
|
@@ -1432,7 +1432,7 @@ var MembershipSectionsMock = function (templateType) { return [
|
|
|
1432
1432
|
itemToneType: 'LIGHT',
|
|
1433
1433
|
programmedItemActionButtonTextType: 'A'
|
|
1434
1434
|
},
|
|
1435
|
-
template:
|
|
1435
|
+
template: 'PRG_MEMBERSHIP_DISPLAY_A',
|
|
1436
1436
|
programData: {
|
|
1437
1437
|
mdid: 'mdid',
|
|
1438
1438
|
preview: {
|
|
@@ -1498,19 +1498,19 @@ var MembershipSectionsMock = function (templateType) { return [
|
|
|
1498
1498
|
},
|
|
1499
1499
|
totalSubscriptionProducts: 3
|
|
1500
1500
|
},
|
|
1501
|
-
connectedSubscriptionProducts: Array.from({ length:
|
|
1501
|
+
connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, j) {
|
|
1502
1502
|
return {
|
|
1503
|
-
id:
|
|
1504
|
-
order:
|
|
1505
|
-
connectedMembershipId:
|
|
1506
|
-
subscriptionProductId:
|
|
1503
|
+
id: j + 1,
|
|
1504
|
+
order: j,
|
|
1505
|
+
connectedMembershipId: j + 1,
|
|
1506
|
+
subscriptionProductId: j + 1,
|
|
1507
1507
|
subscriptionProduct: {
|
|
1508
|
-
id:
|
|
1508
|
+
id: j + 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:
|
|
1513
|
+
isDeactivated: j % 2 === 0,
|
|
1514
1514
|
fee: {
|
|
1515
1515
|
currency: 'KRW',
|
|
1516
1516
|
amount: 10000
|
|
@@ -1530,9 +1530,8 @@ var MembershipSectionsMock = function (templateType) { return [
|
|
|
1530
1530
|
insertedAt: '2023-01-30T10:24:35',
|
|
1531
1531
|
updatedAt: '2023-01-30T10:24:35'
|
|
1532
1532
|
}
|
|
1533
|
-
];
|
|
1534
|
-
exports.
|
|
1535
|
-
var MembershipSectionsMockWithoutMembership = function (templateType) { return [
|
|
1533
|
+
];
|
|
1534
|
+
exports.MembershipSectionsMockWithoutMembership = [
|
|
1536
1535
|
{
|
|
1537
1536
|
type: 'DESIGNED',
|
|
1538
1537
|
display: true,
|
|
@@ -1723,7 +1722,7 @@ var MembershipSectionsMockWithoutMembership = function (templateType) { return [
|
|
|
1723
1722
|
itemToneType: 'LIGHT',
|
|
1724
1723
|
programmedItemActionButtonTextType: 'A'
|
|
1725
1724
|
},
|
|
1726
|
-
template:
|
|
1725
|
+
template: 'PRG_MEMBERSHIP_DISPLAY_A',
|
|
1727
1726
|
programData: {
|
|
1728
1727
|
mdid: 'mdid',
|
|
1729
1728
|
preview: {
|
|
@@ -1745,9 +1744,8 @@ var MembershipSectionsMockWithoutMembership = function (templateType) { return [
|
|
|
1745
1744
|
insertedAt: '2023-01-30T10:24:35',
|
|
1746
1745
|
updatedAt: '2023-01-30T10:24:35'
|
|
1747
1746
|
}
|
|
1748
|
-
];
|
|
1749
|
-
exports.
|
|
1750
|
-
var MembershipSectionsMockWithoutConnectedSubscriptionProducts = function (templateType) { return [
|
|
1747
|
+
];
|
|
1748
|
+
exports.MembershipSectionsMockWithoutConnectedSubscriptionProducts = [
|
|
1751
1749
|
{
|
|
1752
1750
|
type: 'DESIGNED',
|
|
1753
1751
|
display: true,
|
|
@@ -1938,7 +1936,7 @@ var MembershipSectionsMockWithoutConnectedSubscriptionProducts = function (templ
|
|
|
1938
1936
|
itemToneType: 'LIGHT',
|
|
1939
1937
|
programmedItemActionButtonTextType: 'A'
|
|
1940
1938
|
},
|
|
1941
|
-
template:
|
|
1939
|
+
template: 'PRG_MEMBERSHIP_DISPLAY_A',
|
|
1942
1940
|
programData: {
|
|
1943
1941
|
mdid: 'mdid',
|
|
1944
1942
|
preview: {
|
|
@@ -2015,9 +2013,8 @@ var MembershipSectionsMockWithoutConnectedSubscriptionProducts = function (templ
|
|
|
2015
2013
|
insertedAt: '2023-01-30T10:24:35',
|
|
2016
2014
|
updatedAt: '2023-01-30T10:24:35'
|
|
2017
2015
|
}
|
|
2018
|
-
];
|
|
2019
|
-
exports.
|
|
2020
|
-
var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templateType) { return [
|
|
2016
|
+
];
|
|
2017
|
+
exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = [
|
|
2021
2018
|
{
|
|
2022
2019
|
type: 'DESIGNED',
|
|
2023
2020
|
display: true,
|
|
@@ -2208,7 +2205,7 @@ var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templa
|
|
|
2208
2205
|
itemToneType: 'LIGHT',
|
|
2209
2206
|
programmedItemActionButtonTextType: 'A'
|
|
2210
2207
|
},
|
|
2211
|
-
template:
|
|
2208
|
+
template: 'PRG_MEMBERSHIP_DISPLAY_A',
|
|
2212
2209
|
programData: {
|
|
2213
2210
|
mdid: 'mdid',
|
|
2214
2211
|
preview: {
|
|
@@ -2274,19 +2271,19 @@ var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templa
|
|
|
2274
2271
|
},
|
|
2275
2272
|
totalSubscriptionProducts: 3
|
|
2276
2273
|
},
|
|
2277
|
-
connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
|
|
2274
|
+
connectedSubscriptionProducts: Array.from({ length: 1 }, function (_, j) {
|
|
2278
2275
|
return {
|
|
2279
|
-
id:
|
|
2280
|
-
order:
|
|
2281
|
-
connectedMembershipId:
|
|
2282
|
-
subscriptionProductId:
|
|
2276
|
+
id: j + 1,
|
|
2277
|
+
order: j,
|
|
2278
|
+
connectedMembershipId: j + 1,
|
|
2279
|
+
subscriptionProductId: j + 1,
|
|
2283
2280
|
subscriptionProduct: {
|
|
2284
|
-
id:
|
|
2281
|
+
id: j + 1,
|
|
2285
2282
|
type: 'COUPON_ONCE_FINITE',
|
|
2286
2283
|
title: '청춘이 황금시대를 우리의 같은 무엇을',
|
|
2287
2284
|
alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
|
|
2288
2285
|
expiryPeriodInDays: 7,
|
|
2289
|
-
isDeactivated:
|
|
2286
|
+
isDeactivated: j % 2 === 0,
|
|
2290
2287
|
fee: {
|
|
2291
2288
|
currency: 'KRW',
|
|
2292
2289
|
amount: 10000
|
|
@@ -2306,5 +2303,4 @@ var MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = function (templa
|
|
|
2306
2303
|
insertedAt: '2023-01-30T10:24:35',
|
|
2307
2304
|
updatedAt: '2023-01-30T10:24:35'
|
|
2308
2305
|
}
|
|
2309
|
-
];
|
|
2310
|
-
exports.MembershipSectionsMockOnlyOneConnectedSubscriptionProduct = MembershipSectionsMockOnlyOneConnectedSubscriptionProduct;
|
|
2306
|
+
];
|
|
@@ -3,5 +3,5 @@ import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types
|
|
|
3
3
|
declare type Props = {
|
|
4
4
|
sectionStyles: ISectionStyles;
|
|
5
5
|
};
|
|
6
|
-
declare function
|
|
7
|
-
export default
|
|
6
|
+
declare function EmptyMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
|
|
7
|
+
export default EmptyMembershipPlanSheet;
|
|
@@ -17,17 +17,16 @@ 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
|
|
20
|
+
function EmptyMembershipPlanSheet(_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", 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", paddingBottom: "spacing_d", overrideCSS: {
|
|
25
25
|
display: 'flex',
|
|
26
26
|
alignItems: 'center',
|
|
27
|
-
justifyContent: 'center',
|
|
28
27
|
height: '112px',
|
|
29
28
|
backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
|
|
30
29
|
} }, { 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]
|
|
31
30
|
.disabledProgrammedItemActionButtonBackgroundColor, "$paddingBottom": "56px" }, void 0)] }, void 0));
|
|
32
31
|
}
|
|
33
|
-
exports.default =
|
|
32
|
+
exports.default = EmptyMembershipPlanSheet;
|
|
@@ -27,12 +27,11 @@ 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"));
|
|
31
30
|
function MembershipPlanSheet(_a) {
|
|
32
31
|
var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, sectionStyles = _a.sectionStyles;
|
|
33
32
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
34
33
|
var subscriptionProduct = connectedSubscriptionProducts.subscriptionProduct;
|
|
35
|
-
var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee
|
|
34
|
+
var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee;
|
|
36
35
|
var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
|
|
37
36
|
var productFeeText = (0, react_1.useMemo)(function () {
|
|
38
37
|
var amount = fee.amount, currency = fee.currency;
|
|
@@ -65,11 +64,11 @@ function MembershipPlanSheet(_a) {
|
|
|
65
64
|
return itemActionButtonTextType;
|
|
66
65
|
}
|
|
67
66
|
}, [programmedItemActionButtonTextType, type]);
|
|
68
|
-
return ((0, jsx_runtime_1.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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));
|
|
73
72
|
}
|
|
74
73
|
var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
75
74
|
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"])));
|
|
@@ -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"));
|
|
47
48
|
var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
|
|
48
49
|
var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
|
|
49
50
|
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,8 +67,9 @@ function MembershipSheet(_a) {
|
|
|
67
67
|
display: 'flex',
|
|
68
68
|
flex: '2',
|
|
69
69
|
overflow: 'auto',
|
|
70
|
-
padding:
|
|
71
|
-
|
|
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));
|
|
72
73
|
}
|
|
73
74
|
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) {
|
|
74
75
|
var itemToneType = _a.itemToneType;
|
|
@@ -50,11 +50,6 @@ function NarrowMembershipListView(_a) {
|
|
|
50
50
|
}
|
|
51
51
|
setScrollValue(membershipListRef.current.scrollLeft);
|
|
52
52
|
};
|
|
53
|
-
/**
|
|
54
|
-
* @when : 화면 진입 시
|
|
55
|
-
* @expected : 스크롤을 감지하는 이벤트 핸들러를 추가합니다.
|
|
56
|
-
* @clear : 스크롤을 감지하는 이벤트 핸들러를 제거합니다.
|
|
57
|
-
*/
|
|
58
53
|
(0, react_1.useEffect)(function () {
|
|
59
54
|
if (!membershipListRef.current) {
|
|
60
55
|
return;
|
|
@@ -68,18 +63,10 @@ function NarrowMembershipListView(_a) {
|
|
|
68
63
|
};
|
|
69
64
|
}, []);
|
|
70
65
|
var isLeftMaskingCoverShow = connectedMemberships.length > 2 && scrollValue > 0;
|
|
71
|
-
var isRightMaskingCoverShow =
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
if (scrollValue === 0) {
|
|
76
|
-
return true;
|
|
77
|
-
}
|
|
78
|
-
return membershipListRef.current
|
|
79
|
-
? membershipListRef.current.scrollLeft + membershipListRef.current.clientWidth <
|
|
80
|
-
membershipListRef.current.scrollWidth - 1
|
|
81
|
-
: scrollValue === 0;
|
|
82
|
-
}, [connectedMemberships, membershipListRef, scrollValue]);
|
|
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;
|
|
83
70
|
var scrollPrev = function (x) {
|
|
84
71
|
var scrollLeft = (membershipListRef.current || {}).scrollLeft;
|
|
85
72
|
if (membershipListRef.current && typeof scrollLeft === 'number') {
|
|
@@ -94,7 +81,7 @@ function NarrowMembershipListView(_a) {
|
|
|
94
81
|
setScrollValue(scrollLeft + x);
|
|
95
82
|
}
|
|
96
83
|
};
|
|
97
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
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) {
|
|
98
85
|
var id = _a.id, membership = _a.membership;
|
|
99
86
|
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ overrideCSS: {
|
|
100
87
|
backgroundColor: i === currentIndex
|
|
@@ -118,16 +105,15 @@ function NarrowMembershipListView(_a) {
|
|
|
118
105
|
: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left" }, void 0) }), void 0) }, id));
|
|
119
106
|
}) }), 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));
|
|
120
107
|
}
|
|
121
|
-
var
|
|
122
|
-
var S_MembershipListBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"], ["\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"])), function (_a) {
|
|
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) {
|
|
123
109
|
var theme = _a.theme;
|
|
124
110
|
return theme.spacing.spacingF;
|
|
125
111
|
});
|
|
126
|
-
var Centered = (0, styled_components_1.css)(
|
|
127
|
-
var LeftMasking = (0, styled_components_1.css)(
|
|
128
|
-
var RightMasking = (0, styled_components_1.css)(
|
|
129
|
-
var BothMasking = (0, styled_components_1.css)(
|
|
130
|
-
var S_ContentOperatorPanel = styled_components_1.default.div(
|
|
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) {
|
|
131
117
|
var centered = _a.centered;
|
|
132
118
|
return centered && Centered;
|
|
133
119
|
}, function (_a) {
|
|
@@ -142,7 +128,7 @@ var S_ContentOperatorPanel = styled_components_1.default.div(templateObject_7 ||
|
|
|
142
128
|
return RightMasking;
|
|
143
129
|
}
|
|
144
130
|
});
|
|
145
|
-
var S_ArrowIconCover = styled_components_1.default.div(
|
|
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) {
|
|
146
132
|
var position = _a.position;
|
|
147
133
|
return (position === 'left' ? 'flex-start' : 'flex-end');
|
|
148
134
|
}, function (_a) {
|
|
@@ -150,4 +136,4 @@ var S_ArrowIconCover = styled_components_1.default.div(templateObject_8 || (temp
|
|
|
150
136
|
return position && position + ":0";
|
|
151
137
|
});
|
|
152
138
|
exports.default = NarrowMembershipListView;
|
|
153
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7
|
|
139
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -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,
|
|
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));
|
|
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;
|
|
@@ -29,7 +29,8 @@ function MembershipSheet() {
|
|
|
29
29
|
backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
|
|
30
30
|
display: 'flex',
|
|
31
31
|
alignItems: 'center',
|
|
32
|
-
justifyContent: 'center'
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
marginBottom: '96px'
|
|
33
34
|
}, 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));
|
|
34
35
|
}
|
|
35
36
|
exports.default = MembershipSheet;
|
|
@@ -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,
|
|
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));
|
|
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;
|
|
@@ -3,5 +3,5 @@ import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types
|
|
|
3
3
|
declare type Props = {
|
|
4
4
|
sectionStyles: ISectionStyles;
|
|
5
5
|
};
|
|
6
|
-
declare function
|
|
7
|
-
export default
|
|
6
|
+
declare function EmptyMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
|
|
7
|
+
export default EmptyMembershipPlanSheet;
|
|
@@ -17,17 +17,16 @@ 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
|
|
20
|
+
function EmptyMembershipPlanSheet(_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", 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", paddingBottom: "spacing_d", overrideCSS: {
|
|
25
25
|
display: 'flex',
|
|
26
26
|
alignItems: 'center',
|
|
27
|
-
justifyContent: 'center',
|
|
28
27
|
height: '112px',
|
|
29
28
|
backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
|
|
30
29
|
} }, { 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]
|
|
31
30
|
.disabledProgrammedItemActionButtonBackgroundColor }, void 0)] }, void 0));
|
|
32
31
|
}
|
|
33
|
-
exports.default =
|
|
32
|
+
exports.default = EmptyMembershipPlanSheet;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { IConnectedSubscriptionProducts,
|
|
2
|
+
import type { IConnectedSubscriptionProducts, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../../../../../../DynamicLayout/types';
|
|
3
3
|
declare type Props = {
|
|
4
4
|
connectedSubscriptionProduct: IConnectedSubscriptionProducts;
|
|
5
|
-
|
|
5
|
+
itemToneType: TypeOfItemToneType;
|
|
6
|
+
itemHighlightingColorInHex: string;
|
|
7
|
+
programmedItemActionButtonTextType: TypeOfProgrammedItemActionButtonTextType;
|
|
6
8
|
};
|
|
7
|
-
declare function MembershipPlanSheet({ connectedSubscriptionProduct,
|
|
9
|
+
declare function MembershipPlanSheet({ connectedSubscriptionProduct, itemToneType, itemHighlightingColorInHex, programmedItemActionButtonTextType }: Props): JSX.Element;
|
|
8
10
|
export default MembershipPlanSheet;
|
|
@@ -27,13 +27,11 @@ 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"));
|
|
31
30
|
function MembershipPlanSheet(_a) {
|
|
32
|
-
var connectedSubscriptionProduct = _a.connectedSubscriptionProduct,
|
|
31
|
+
var connectedSubscriptionProduct = _a.connectedSubscriptionProduct, itemToneType = _a.itemToneType, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, programmedItemActionButtonTextType = _a.programmedItemActionButtonTextType;
|
|
33
32
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
34
33
|
var subscriptionProduct = connectedSubscriptionProduct.subscriptionProduct;
|
|
35
|
-
var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee
|
|
36
|
-
var itemToneType = sectionStyles.itemToneType, itemHighlightingColorInHex = sectionStyles.itemHighlightingColorInHex, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
|
|
34
|
+
var type = subscriptionProduct.type, alias = subscriptionProduct.alias, fee = subscriptionProduct.fee;
|
|
37
35
|
var productFeeText = (0, react_1.useMemo)(function () {
|
|
38
36
|
var amount = fee.amount, currency = fee.currency;
|
|
39
37
|
var price = (0, formatCurrency_1.default)(amount, currency);
|
|
@@ -65,11 +63,11 @@ function MembershipPlanSheet(_a) {
|
|
|
65
63
|
return itemActionButtonTextType;
|
|
66
64
|
}
|
|
67
65
|
}, [programmedItemActionButtonTextType, type]);
|
|
68
|
-
return ((0, jsx_runtime_1.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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));
|
|
73
71
|
}
|
|
74
72
|
var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
75
73
|
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"])));
|