pds-dev-kit-web 2.0.13-alpha.0 → 2.0.13-alpha.2
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/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js +16 -8
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipPlanSheet.js +16 -8
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/mobile/M_TemplateB.js +4 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/mobile/components/SectionContents.js +15 -4
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -27,7 +27,6 @@ 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;
|
|
@@ -54,7 +53,16 @@ function MembershipPlanSheet(_a) {
|
|
|
54
53
|
}
|
|
55
54
|
}, [subscriptionProduct]);
|
|
56
55
|
var itemActionButtonText = (0, react_1.useMemo)(function () {
|
|
57
|
-
var itemActionButtonTextType =
|
|
56
|
+
var itemActionButtonTextType = {
|
|
57
|
+
A: 'str_5350',
|
|
58
|
+
B: 'str_5351',
|
|
59
|
+
C: 'str_5352',
|
|
60
|
+
D: 'str_5353',
|
|
61
|
+
E: 'str_5354'
|
|
62
|
+
}[programmedItemActionButtonTextType];
|
|
63
|
+
if (isDeactivated) {
|
|
64
|
+
return t('str_5300');
|
|
65
|
+
}
|
|
58
66
|
switch (type) {
|
|
59
67
|
case 'COUPON_FREE_FINITE':
|
|
60
68
|
case 'COUPON_FREE_INFINITE':
|
|
@@ -62,14 +70,14 @@ function MembershipPlanSheet(_a) {
|
|
|
62
70
|
case 'FREE_INFINITE':
|
|
63
71
|
return t('str_start');
|
|
64
72
|
default:
|
|
65
|
-
return itemActionButtonTextType;
|
|
73
|
+
return t(itemActionButtonTextType);
|
|
66
74
|
}
|
|
67
75
|
}, [programmedItemActionButtonTextType, type]);
|
|
68
|
-
return ((0, jsx_runtime_1.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
76
|
+
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: {
|
|
77
|
+
display: 'flex',
|
|
78
|
+
cursor: 'pointer',
|
|
79
|
+
backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
|
|
80
|
+
} }, { 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, { buttonBackgroundColor: isDeactivated ? undefined : itemHighlightingColorInHex, buttonText: itemActionButtonText, buttonTextColor: isDeactivated ? undefined : '#FDFDFDFF', state: isDeactivated ? 'disabled' : 'normal', "$paddingBottom": "56px" }, void 0)] }, void 0));
|
|
73
81
|
}
|
|
74
82
|
var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
75
83
|
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"])));
|
|
@@ -27,7 +27,6 @@ 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 connectedSubscriptionProduct = _a.connectedSubscriptionProduct, sectionStyles = _a.sectionStyles;
|
|
33
32
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
@@ -54,7 +53,16 @@ function MembershipPlanSheet(_a) {
|
|
|
54
53
|
}
|
|
55
54
|
}, [subscriptionProduct]);
|
|
56
55
|
var itemActionButtonText = (0, react_1.useMemo)(function () {
|
|
57
|
-
var itemActionButtonTextType =
|
|
56
|
+
var itemActionButtonTextType = {
|
|
57
|
+
A: 'str_5350',
|
|
58
|
+
B: 'str_5351',
|
|
59
|
+
C: 'str_5352',
|
|
60
|
+
D: 'str_5353',
|
|
61
|
+
E: 'str_5354'
|
|
62
|
+
}[programmedItemActionButtonTextType];
|
|
63
|
+
if (isDeactivated) {
|
|
64
|
+
return t('str_5300');
|
|
65
|
+
}
|
|
58
66
|
switch (type) {
|
|
59
67
|
case 'COUPON_FREE_FINITE':
|
|
60
68
|
case 'COUPON_FREE_INFINITE':
|
|
@@ -62,14 +70,14 @@ function MembershipPlanSheet(_a) {
|
|
|
62
70
|
case 'FREE_INFINITE':
|
|
63
71
|
return t('str_start');
|
|
64
72
|
default:
|
|
65
|
-
return itemActionButtonTextType;
|
|
73
|
+
return t(itemActionButtonTextType);
|
|
66
74
|
}
|
|
67
75
|
}, [programmedItemActionButtonTextType, type]);
|
|
68
|
-
return ((0, jsx_runtime_1.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
76
|
+
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: {
|
|
77
|
+
display: 'flex',
|
|
78
|
+
cursor: 'pointer',
|
|
79
|
+
backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
|
|
80
|
+
} }, { 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: isDeactivated ? undefined : itemHighlightingColorInHex, buttonText: itemActionButtonText, buttonTextColor: isDeactivated ? undefined : '#FDFDFDFF', state: isDeactivated ? 'disabled' : 'normal' }, void 0)] }, void 0));
|
|
73
81
|
}
|
|
74
82
|
var S_MembershipInfoTitle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
75
83
|
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"])));
|
|
@@ -15,9 +15,12 @@ var SectionContents_1 = __importDefault(require("./components/SectionContents"))
|
|
|
15
15
|
function TemplateB() {
|
|
16
16
|
return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsx)(SectionContents_1.default, {}, void 0), (0, jsx_runtime_1.jsx)(MembershipSection, {}, void 0)] }, void 0));
|
|
17
17
|
}
|
|
18
|
-
var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin
|
|
18
|
+
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) {
|
|
19
19
|
var theme = _a.theme;
|
|
20
20
|
return theme.spacing.spacingG;
|
|
21
|
+
}, function (_a) {
|
|
22
|
+
var theme = _a.theme;
|
|
23
|
+
return theme.spacing.spacingE;
|
|
21
24
|
});
|
|
22
25
|
function MembershipSection() {
|
|
23
26
|
var programmedSectionComponents = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).programmedSectionComponents;
|
|
@@ -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: "headingBold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Regular" }, void 0) }, void 0)), 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, textAlign: "center", color: titleColorInHex, styleTheme: "headingBold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Regular" }, void 0) }, void 0)), 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
|
|
25
|
-
var theme = _a.theme;
|
|
26
|
-
return theme.spacing.
|
|
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/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v2.0.13-alpha.
|
|
2
|
+
## [v2.0.13-alpha.2]
|
|
3
3
|
|
|
4
4
|
## alpha|https://storybook-pds-alpha.test.publ.biz
|
|
5
5
|
|
|
6
6
|
### sub
|
|
7
7
|
* DynamicLayout
|
|
8
|
-
* membership section
|
|
8
|
+
* membership section의 멤버십과 요금제 간의 상태에 따른 ItemActionButton의 문구 표시 조건 업데이트
|