krl-alfred 2.18.0 → 2.18.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/components/Modal/Modal.d.ts +1 -1
- package/dist/components/Modal/Modal.js +3 -3
- package/dist/components/Modal/Modal.styled.js +2 -2
- package/dist/components/Modal/props.d.ts +2 -0
- package/dist/components/Modal/props.js +1 -0
- package/dist/components/Modal/stories/Modal.stories.d.ts +1 -1
- package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.styled.js +11 -2
- package/dist/components/RadioGroup/RadioGroup.styled.js +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.d.ts +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +24 -2
- package/dist/components/ShoppingCartProduct/props.d.ts +1 -0
- package/dist/components/ShoppingCartProduct/props.js +1 -0
- package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.d.ts +41 -0
- package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js +5 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ModalProps } from "./props";
|
|
2
|
-
declare const Modal: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, ...other }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Modal: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, hasHeaderMinHeight, ...other }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Modal;
|
|
@@ -37,10 +37,10 @@ var TextLink_1 = __importDefault(require("../TextLink"));
|
|
|
37
37
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
38
38
|
var react_i18next_1 = require("react-i18next");
|
|
39
39
|
var Modal = function (_a) {
|
|
40
|
-
var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showSkipButton, showSkipButton = _d === void 0 ? props_1.ModalDefault.showSkipButton : _d, _e = _a.skipButtonText, skipButtonText = _e === void 0 ? props_1.ModalDefault.skipButtonText : _e, _f = _a.onSkip, onSkip = _f === void 0 ? props_1.ModalDefault.onSkip : _f, _g = _a.showBackIcon, showBackIcon = _g === void 0 ? props_1.ModalDefault.showBackIcon : _g, _h = _a.backIconType, backIconType = _h === void 0 ? props_1.ModalDefault.backIconType : _h, _j = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _j === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _j, _k = _a.onClose, onClose = _k === void 0 ? props_1.ModalDefault.onClose : _k, _l = _a.onBack, onBack = _l === void 0 ? props_1.ModalDefault.onBack : _l, _m = _a.show, show = _m === void 0 ? props_1.ModalDefault.show : _m, _o = _a.showDivider, showDivider = _o === void 0 ? props_1.ModalDefault.showDivider : _o, _p = _a.title, title = _p === void 0 ? props_1.ModalDefault.title : _p, _q = _a.children, children = _q === void 0 ? props_1.ModalDefault.children : _q, _r = _a.modalFooter, modalFooter = _r === void 0 ? props_1.ModalDefault.modalFooter : _r, _s = _a.showPrimaryButton, showPrimaryButton = _s === void 0 ? props_1.ModalDefault.showPrimaryButton : _s, _t = _a.showSecondaryButton, showSecondaryButton = _t === void 0 ? props_1.ModalDefault.showSecondaryButton : _t, _u = _a.onPrimaryAction, onPrimaryAction = _u === void 0 ? props_1.ModalDefault.onPrimaryAction : _u, _v = _a.onSecondaryAction, onSecondaryAction = _v === void 0 ? props_1.ModalDefault.onSecondaryAction : _v, _w = _a.buttonsAlignment, buttonsAlignment = _w === void 0 ? props_1.ModalDefault.buttonsAlignment : _w, _x = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _x === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _x, _y = _a.primaryButtonText, primaryButtonText = _y === void 0 ? props_1.ModalDefault.primaryButtonText : _y, _z = _a.secondaryButtonText, secondaryButtonText = _z === void 0 ? props_1.ModalDefault.secondaryButtonText : _z, _0 = _a.showHeaderBorder, showHeaderBorder = _0 === void 0 ? props_1.ModalDefault.showHeaderBorder : _0, _1 = _a.showFooterBorder, showFooterBorder = _1 === void 0 ? props_1.ModalDefault.showFooterBorder : _1, _2 = _a.autoHeight, autoHeight = _2 === void 0 ? props_1.ModalDefault.autoHeight : _2, _3 = _a.titleAlignment, titleAlignment = _3 === void 0 ? props_1.ModalDefault.titleAlignment : _3, _4 = _a.titleDescription, titleDescription = _4 === void 0 ? props_1.ModalDefault.titleDescription : _4, _5 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _5, _6 = _a.primaryButtonIcon, primaryButtonIcon = _6 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _6, _7 = _a.secondaryButtonIcon, secondaryButtonIcon = _7 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _7, _8 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _8 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _8, _9 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _9 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _9, _10 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _10 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _10, _11 = _a.primaryButtonWidth, primaryButtonWidth = _11 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _11, _12 = _a.secondaryButtonWidth, secondaryButtonWidth = _12 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _12, _13 = _a.customContent, customContent = _13 === void 0 ? props_1.ModalDefault.customContent : _13, _14 = _a.showHeader, showHeader = _14 === void 0 ? props_1.ModalDefault.showHeader : _14, _15 = _a.id, id = _15 === void 0 ? props_1.ModalDefault.id : _15, _16 = _a.renderInDOM, renderInDOM = _16 === void 0 ? props_1.ModalDefault.renderInDOM : _16, other = __rest(_a, ["size", "showCloseIcon", "showSkipButton", "skipButtonText", "onSkip", "showBackIcon", "backIconType", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "showHeader", "id", "renderInDOM"]);
|
|
40
|
+
var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showSkipButton, showSkipButton = _d === void 0 ? props_1.ModalDefault.showSkipButton : _d, _e = _a.skipButtonText, skipButtonText = _e === void 0 ? props_1.ModalDefault.skipButtonText : _e, _f = _a.onSkip, onSkip = _f === void 0 ? props_1.ModalDefault.onSkip : _f, _g = _a.showBackIcon, showBackIcon = _g === void 0 ? props_1.ModalDefault.showBackIcon : _g, _h = _a.backIconType, backIconType = _h === void 0 ? props_1.ModalDefault.backIconType : _h, _j = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _j === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _j, _k = _a.onClose, onClose = _k === void 0 ? props_1.ModalDefault.onClose : _k, _l = _a.onBack, onBack = _l === void 0 ? props_1.ModalDefault.onBack : _l, _m = _a.show, show = _m === void 0 ? props_1.ModalDefault.show : _m, _o = _a.showDivider, showDivider = _o === void 0 ? props_1.ModalDefault.showDivider : _o, _p = _a.title, title = _p === void 0 ? props_1.ModalDefault.title : _p, _q = _a.children, children = _q === void 0 ? props_1.ModalDefault.children : _q, _r = _a.modalFooter, modalFooter = _r === void 0 ? props_1.ModalDefault.modalFooter : _r, _s = _a.showPrimaryButton, showPrimaryButton = _s === void 0 ? props_1.ModalDefault.showPrimaryButton : _s, _t = _a.showSecondaryButton, showSecondaryButton = _t === void 0 ? props_1.ModalDefault.showSecondaryButton : _t, _u = _a.onPrimaryAction, onPrimaryAction = _u === void 0 ? props_1.ModalDefault.onPrimaryAction : _u, _v = _a.onSecondaryAction, onSecondaryAction = _v === void 0 ? props_1.ModalDefault.onSecondaryAction : _v, _w = _a.buttonsAlignment, buttonsAlignment = _w === void 0 ? props_1.ModalDefault.buttonsAlignment : _w, _x = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _x === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _x, _y = _a.primaryButtonText, primaryButtonText = _y === void 0 ? props_1.ModalDefault.primaryButtonText : _y, _z = _a.secondaryButtonText, secondaryButtonText = _z === void 0 ? props_1.ModalDefault.secondaryButtonText : _z, _0 = _a.showHeaderBorder, showHeaderBorder = _0 === void 0 ? props_1.ModalDefault.showHeaderBorder : _0, _1 = _a.showFooterBorder, showFooterBorder = _1 === void 0 ? props_1.ModalDefault.showFooterBorder : _1, _2 = _a.autoHeight, autoHeight = _2 === void 0 ? props_1.ModalDefault.autoHeight : _2, _3 = _a.titleAlignment, titleAlignment = _3 === void 0 ? props_1.ModalDefault.titleAlignment : _3, _4 = _a.titleDescription, titleDescription = _4 === void 0 ? props_1.ModalDefault.titleDescription : _4, _5 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _5, _6 = _a.primaryButtonIcon, primaryButtonIcon = _6 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _6, _7 = _a.secondaryButtonIcon, secondaryButtonIcon = _7 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _7, _8 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _8 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _8, _9 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _9 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _9, _10 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _10 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _10, _11 = _a.primaryButtonWidth, primaryButtonWidth = _11 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _11, _12 = _a.secondaryButtonWidth, secondaryButtonWidth = _12 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _12, _13 = _a.customContent, customContent = _13 === void 0 ? props_1.ModalDefault.customContent : _13, _14 = _a.showHeader, showHeader = _14 === void 0 ? props_1.ModalDefault.showHeader : _14, _15 = _a.id, id = _15 === void 0 ? props_1.ModalDefault.id : _15, _16 = _a.renderInDOM, renderInDOM = _16 === void 0 ? props_1.ModalDefault.renderInDOM : _16, _17 = _a.hasHeaderMinHeight, hasHeaderMinHeight = _17 === void 0 ? props_1.ModalDefault.hasHeaderMinHeight : _17, other = __rest(_a, ["size", "showCloseIcon", "showSkipButton", "skipButtonText", "onSkip", "showBackIcon", "backIconType", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "showHeader", "id", "renderInDOM", "hasHeaderMinHeight"]);
|
|
41
41
|
var uniqueId = (0, react_1.useId)();
|
|
42
42
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
43
|
-
var
|
|
43
|
+
var _18 = (0, react_1.useState)(show), showModal = _18[0], setShowModal = _18[1];
|
|
44
44
|
(0, react_1.useEffect)(function () {
|
|
45
45
|
setShowModal(show);
|
|
46
46
|
if (!show) {
|
|
@@ -70,7 +70,7 @@ var Modal = function (_a) {
|
|
|
70
70
|
};
|
|
71
71
|
var modalRef = (0, react_1.useRef)();
|
|
72
72
|
(0, useOnClickOutside_1.default)(modalRef, onClose, hasCloseOnOutsideClick);
|
|
73
|
-
var modalContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id), "$show": renderInDOM ? showModal : true }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": size, "$autoHeight": autoHeight, "$showHeaderBorder": showHeaderBorder, "$titleAlignment": titleAlignment, "$customContent": customContent, "$showFooterBorder": showFooterBorder, "$buttonsAlignment": buttonsAlignment, "$showSecondaryButton": showSecondaryButton, "$showDivider": showDivider, "$showHeader": showHeader, "$buttonsAlignmentOnMobile": buttonsAlignmentOnMobile, id: id }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [showBackIcon ? (backIconType === 2 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onBack, icon: "ArrowSmallLeft" }, { children: t("back") })) }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig" }) })))) : (titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [title && ((0, jsx_runtime_1.jsx)("h5", { children: title })), titleDescription && (0, jsx_runtime_1.jsx)("p", { children: titleDescription })] })), showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) }))) : showSkipButton ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper skipButton" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleSkip }, { children: skipButtonText })) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: children })) })), modalFooter ? modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (showPrimaryButton || showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, width: primaryButtonWidth, icon: primaryButtonIcon }, { children: primaryButtonText }))), showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttonsAlignment === "vertical" && showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: isSecondaryButtonLoading, disabled: isSecondaryButtonDisabled, width: secondaryButtonWidth, icon: secondaryButtonIcon }, { children: secondaryButtonText }))] }))] })) })] })) })) }));
|
|
73
|
+
var modalContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id), "$show": renderInDOM ? showModal : true }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": size, "$autoHeight": autoHeight, "$showHeaderBorder": showHeaderBorder, "$titleAlignment": titleAlignment, "$customContent": customContent, "$showFooterBorder": showFooterBorder, "$buttonsAlignment": buttonsAlignment, "$showSecondaryButton": showSecondaryButton, "$showDivider": showDivider, "$showHeader": showHeader, "$buttonsAlignmentOnMobile": buttonsAlignmentOnMobile, id: id, "$hasHeaderMinHeight": hasHeaderMinHeight }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [showBackIcon ? (backIconType === 2 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onBack, icon: "ArrowSmallLeft" }, { children: t("back") })) }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig" }) })))) : (titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [title && ((0, jsx_runtime_1.jsx)("h5", { children: title })), titleDescription && (0, jsx_runtime_1.jsx)("p", { children: titleDescription })] })), showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) }))) : showSkipButton ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper skipButton" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleSkip }, { children: skipButtonText })) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: children })) })), modalFooter ? modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (showPrimaryButton || showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, width: primaryButtonWidth, icon: primaryButtonIcon }, { children: primaryButtonText }))), showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttonsAlignment === "vertical" && showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: isSecondaryButtonLoading, disabled: isSecondaryButtonDisabled, width: secondaryButtonWidth, icon: secondaryButtonIcon }, { children: secondaryButtonText }))] }))] })) })] })) })) }));
|
|
74
74
|
if (renderInDOM) {
|
|
75
75
|
return modalContent;
|
|
76
76
|
}
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-height: min(calc(100dvh - 50px), 720px);\n min-height: 300px;\n display: grid;\n grid-template-rows: ", ";\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: ", ";\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n
|
|
13
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-height: min(calc(100dvh - 50px), 720px);\n min-height: 300px;\n display: grid;\n grid-template-rows: ", ";\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: ", ";\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n min-height: ", ";\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.modalTextLinkWrapper{\n font:var(--body-bold-14-17);\n &:is(.skipButton){\n * {\n color: var(--grey-50) !important;\n }\n }\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 1.5rem 1.5rem ", " 1.5rem;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-height: min(calc(100dvh - 50px), 720px);\n min-height: 300px;\n display: grid;\n grid-template-rows: ", ";\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: ", ";\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n min-height: ", ";\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.modalTextLinkWrapper{\n font:var(--body-bold-14-17);\n &:is(.skipButton){\n * {\n color: var(--grey-50) !important;\n }\n }\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 1.5rem 1.5rem ", " 1.5rem;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) { return props.$showHeader === false ? '1fr auto' : 'auto 1fr auto'; }, function (props) {
|
|
14
14
|
switch (props.$size) {
|
|
15
15
|
case 'xxsmall':
|
|
16
16
|
return "311px";
|
|
@@ -25,7 +25,7 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
25
25
|
default:
|
|
26
26
|
return "462px";
|
|
27
27
|
}
|
|
28
|
-
}, function (props) { return !props.$autoHeight ? "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n ") : ""; }, function (props) { return props.$showHeader === false ? 'none' : 'flex'; }, function (props) { return props.$showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.$customContent ? '0' : '0 24px'; }, function (props) { return !props.$autoHeight ? "calc(1.5rem + env(safe-area-inset-bottom))" : "1.5rem"; }, function (props) { return props.$showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
|
|
28
|
+
}, function (props) { return !props.$autoHeight ? "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n ") : ""; }, function (props) { return props.$showHeader === false ? 'none' : 'flex'; }, function (props) { return props.$showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasHeaderMinHeight ? '72px' : 'auto'; }, function (props) { return props.$titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.$customContent ? '0' : '0 24px'; }, function (props) { return !props.$autoHeight ? "calc(1.5rem + env(safe-area-inset-bottom))" : "1.5rem"; }, function (props) { return props.$showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
|
|
29
29
|
switch (props.$buttonsAlignment) {
|
|
30
30
|
case 'horizontal':
|
|
31
31
|
return "\n justify-content: flex-start;\n flex-direction: row-reverse;\n gap: 0;\n button {\n + button{\n margin-right: ".concat((props.$size === 'small' ? '16px' : '24px'), ";\n @media only screen and ").concat(devices_1.devices.sm, " {\n margin-right: 16px;\n }\n }\n }\n @media only screen and ").concat(devices_1.devices.sm, " {\n button {\n flex: 1 1 0;\n &:is(:nth-child(1)) {\n min-width: ").concat((props.$showSecondaryButton ? 'initial' : 'calc(100% - 3rem)'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n margin-right: 1rem;\n }\n }\n }\n ");
|
|
@@ -48,6 +48,7 @@ export interface Modal {
|
|
|
48
48
|
showSkipButton?: boolean;
|
|
49
49
|
skipButtonText?: string;
|
|
50
50
|
onSkip?: () => void;
|
|
51
|
+
hasHeaderMinHeight?: boolean;
|
|
51
52
|
}
|
|
52
53
|
export type ModalStyledProps = {
|
|
53
54
|
$size: SIZES;
|
|
@@ -61,6 +62,7 @@ export type ModalStyledProps = {
|
|
|
61
62
|
$showDivider: boolean;
|
|
62
63
|
$showHeader?: boolean;
|
|
63
64
|
$buttonsAlignmentOnMobile?: ALIGNMENT;
|
|
65
|
+
$hasHeaderMinHeight?: boolean;
|
|
64
66
|
};
|
|
65
67
|
export declare const ModalDefault: Modal;
|
|
66
68
|
export type ModalProps = typeof ModalDefault;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
declare const _default: {
|
|
2
2
|
title: string;
|
|
3
|
-
component: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, ...other }: import("../props").Modal) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
component: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, hasHeaderMinHeight, ...other }: import("../props").Modal) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
tags: string[];
|
|
5
5
|
argTypes: {
|
|
6
6
|
showDivider: {
|
|
@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
|
-
exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: ", ";\n padding: calc(0.75rem - 0.5px) 1rem;\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image:url('", "');\n }\n\n &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n
|
|
15
|
+
exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: ", ";\n padding: calc(0.75rem - 0.5px) 1rem;\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image:url('", "');\n }\n\n &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0 0 0 1.5rem;\n display: grid;\n\n label.label {\n display: block;\n margin: 0;\n vertical-align: middle;\n cursor: pointer;\n font: ", ";\n }\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: ", ";\n padding: calc(0.75rem - 0.5px) 1rem;\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image:url('", "');\n }\n\n &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0 0 0 1.5rem;\n display: grid;\n\n label.label {\n display: block;\n margin: 0;\n vertical-align: middle;\n cursor: pointer;\n font: ", ";\n }\n }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); }, function (props) { return !props.$readOnly && " , &:hover"; }, function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.$size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
16
16
|
switch (props.$size) {
|
|
17
17
|
case 'small':
|
|
18
18
|
return "16px";
|
|
@@ -30,5 +30,14 @@ exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (t
|
|
|
30
30
|
default:
|
|
31
31
|
return "16px";
|
|
32
32
|
}
|
|
33
|
-
}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; })
|
|
33
|
+
}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) {
|
|
34
|
+
switch (props.$textSize) {
|
|
35
|
+
case 'small':
|
|
36
|
+
return "var(--caption-semi-bold-12-15)";
|
|
37
|
+
case 'medium':
|
|
38
|
+
return "var(--body-semi-bold-14-17)";
|
|
39
|
+
default:
|
|
40
|
+
return "var(--body-semi-bold-14-17)";
|
|
41
|
+
}
|
|
42
|
+
});
|
|
34
43
|
var templateObject_1;
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.RadioGroupStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.RadioGroupStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .radioButtonsWrapper {\n display: flex;\n flex-direction: ", ";\n gap: ", ";\n flex-wrap: ", ";\n ", "\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .radioButtonsWrapper {\n display: flex;\n flex-direction: ", ";\n gap: ", ";\n flex-wrap: ", ";\n ", "\n }\n"])), function (props) { return props.$layout === "horizontal" ? "row" : "column"; }, function (props) { return props.$gap || "
|
|
12
|
+
exports.RadioGroupStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .radioButtonsWrapper {\n display: flex;\n flex-direction: ", ";\n gap: ", ";\n flex-wrap: ", ";\n ", "\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .radioButtonsWrapper {\n display: flex;\n flex-direction: ", ";\n gap: ", ";\n flex-wrap: ", ";\n ", "\n }\n"])), function (props) { return props.$layout === "horizontal" ? "row" : "column"; }, function (props) { return props.$gap || "0.5rem"; }, function (props) { return props.$layout === "horizontal" ? "wrap" : "nowrap"; }, function (props) { return props.$isFilled && "\n > * {\n flex: 1 1 0;\n }\n "; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ShoppingCartProductProps } from "./props";
|
|
2
|
-
declare const ShoppingCartProduct: ({ title, priceSm, price, period, oldPrice, oldPriceSm, oldPricePeriod, discountRate, slug, image, component, hasRemove, hasInsurance, insuranceType, insuranceText, insurancePrice, insuranceQuantity, insuranceOption1Title, insuranceOption1Description, insuranceOption1Price, insuranceOption1PricePeriod, insuranceOption1TooltipText, insuranceOption2Title, insuranceOption2Description, selectedInsuranceOption, onInsuranceOptionSelect, deliveryText, quantity, hasLoading, deliveryDangerText, hasError, errorText, hasInsuranceActions, hasInsuranceTooltip, hasDisableActions, hasInsuranceTooltipClickAction, insuranceTooltipText, insuranceTooltipWidth, onRemove, onIncrement, onDecrement, toggleInsurance, toggleInsuranceLogo, hasInsurancePriceAdded, hasInsuranceLoading, hasDisableIncrement, insuranceOption1TooltipTitle, }: ShoppingCartProductProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const ShoppingCartProduct: ({ title, priceSm, price, period, oldPrice, oldPriceSm, oldPricePeriod, discountRate, slug, image, component, hasRemove, hasInsurance, insuranceType, insuranceText, insurancePrice, insuranceQuantity, insuranceOption1Title, insuranceOption1Description, insuranceOption1Price, insuranceOption1PricePeriod, hasInsuranceOption1PriceLoading, insuranceOption1TooltipText, insuranceOption2Title, insuranceOption2Description, selectedInsuranceOption, onInsuranceOptionSelect, deliveryText, quantity, hasLoading, deliveryDangerText, hasError, errorText, hasInsuranceActions, hasInsuranceTooltip, hasDisableActions, hasInsuranceTooltipClickAction, insuranceTooltipText, insuranceTooltipWidth, onRemove, onIncrement, onDecrement, toggleInsurance, toggleInsuranceLogo, hasInsurancePriceAdded, hasInsuranceLoading, hasDisableIncrement, insuranceOption1TooltipTitle, }: ShoppingCartProductProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ShoppingCartProduct;
|
|
@@ -15,18 +15,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("react");
|
|
18
19
|
var props_1 = require("./props");
|
|
19
20
|
var ShoppingCartProduct_styled_1 = require("./ShoppingCartProduct.styled");
|
|
20
21
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
22
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
22
23
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
23
24
|
var ShoppingCartProduct = function (_a) {
|
|
24
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ShoppingCartProductDefault.title : _b, _c = _a.priceSm, priceSm = _c === void 0 ? props_1.ShoppingCartProductDefault.priceSm : _c, _d = _a.price, price = _d === void 0 ? props_1.ShoppingCartProductDefault.price : _d, _e = _a.period, period = _e === void 0 ? props_1.ShoppingCartProductDefault.period : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ShoppingCartProductDefault.oldPrice : _f, _g = _a.oldPriceSm, oldPriceSm = _g === void 0 ? props_1.ShoppingCartProductDefault.oldPriceSm : _g, _h = _a.oldPricePeriod, oldPricePeriod = _h === void 0 ? props_1.ShoppingCartProductDefault.oldPricePeriod : _h, _j = _a.discountRate, discountRate = _j === void 0 ? props_1.ShoppingCartProductDefault.discountRate : _j, _k = _a.slug, slug = _k === void 0 ? props_1.ShoppingCartProductDefault.slug : _k, _l = _a.image, image = _l === void 0 ? props_1.ShoppingCartProductDefault.image : _l, _m = _a.component, component = _m === void 0 ? props_1.ShoppingCartProductDefault.component : _m, _o = _a.hasRemove, hasRemove = _o === void 0 ? props_1.ShoppingCartProductDefault.hasRemove : _o, _p = _a.hasInsurance, hasInsurance = _p === void 0 ? props_1.ShoppingCartProductDefault.hasInsurance : _p, _q = _a.insuranceType, insuranceType = _q === void 0 ? props_1.ShoppingCartProductDefault.insuranceType : _q, _r = _a.insuranceText, insuranceText = _r === void 0 ? props_1.ShoppingCartProductDefault.insuranceText : _r, _s = _a.insurancePrice, insurancePrice = _s === void 0 ? props_1.ShoppingCartProductDefault.insurancePrice : _s, _t = _a.insuranceQuantity, insuranceQuantity = _t === void 0 ? props_1.ShoppingCartProductDefault.insuranceQuantity : _t, _u = _a.insuranceOption1Title, insuranceOption1Title = _u === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Title : _u, _v = _a.insuranceOption1Description, insuranceOption1Description = _v === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Description : _v, _w = _a.insuranceOption1Price, insuranceOption1Price = _w === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Price : _w, _x = _a.insuranceOption1PricePeriod, insuranceOption1PricePeriod = _x === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1PricePeriod : _x, _y = _a.
|
|
25
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ShoppingCartProductDefault.title : _b, _c = _a.priceSm, priceSm = _c === void 0 ? props_1.ShoppingCartProductDefault.priceSm : _c, _d = _a.price, price = _d === void 0 ? props_1.ShoppingCartProductDefault.price : _d, _e = _a.period, period = _e === void 0 ? props_1.ShoppingCartProductDefault.period : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ShoppingCartProductDefault.oldPrice : _f, _g = _a.oldPriceSm, oldPriceSm = _g === void 0 ? props_1.ShoppingCartProductDefault.oldPriceSm : _g, _h = _a.oldPricePeriod, oldPricePeriod = _h === void 0 ? props_1.ShoppingCartProductDefault.oldPricePeriod : _h, _j = _a.discountRate, discountRate = _j === void 0 ? props_1.ShoppingCartProductDefault.discountRate : _j, _k = _a.slug, slug = _k === void 0 ? props_1.ShoppingCartProductDefault.slug : _k, _l = _a.image, image = _l === void 0 ? props_1.ShoppingCartProductDefault.image : _l, _m = _a.component, component = _m === void 0 ? props_1.ShoppingCartProductDefault.component : _m, _o = _a.hasRemove, hasRemove = _o === void 0 ? props_1.ShoppingCartProductDefault.hasRemove : _o, _p = _a.hasInsurance, hasInsurance = _p === void 0 ? props_1.ShoppingCartProductDefault.hasInsurance : _p, _q = _a.insuranceType, insuranceType = _q === void 0 ? props_1.ShoppingCartProductDefault.insuranceType : _q, _r = _a.insuranceText, insuranceText = _r === void 0 ? props_1.ShoppingCartProductDefault.insuranceText : _r, _s = _a.insurancePrice, insurancePrice = _s === void 0 ? props_1.ShoppingCartProductDefault.insurancePrice : _s, _t = _a.insuranceQuantity, insuranceQuantity = _t === void 0 ? props_1.ShoppingCartProductDefault.insuranceQuantity : _t, _u = _a.insuranceOption1Title, insuranceOption1Title = _u === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Title : _u, _v = _a.insuranceOption1Description, insuranceOption1Description = _v === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Description : _v, _w = _a.insuranceOption1Price, insuranceOption1Price = _w === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Price : _w, _x = _a.insuranceOption1PricePeriod, insuranceOption1PricePeriod = _x === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1PricePeriod : _x, _y = _a.hasInsuranceOption1PriceLoading, hasInsuranceOption1PriceLoading = _y === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceOption1PriceLoading : _y, _z = _a.insuranceOption1TooltipText, insuranceOption1TooltipText = _z === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipText : _z, _0 = _a.insuranceOption2Title, insuranceOption2Title = _0 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Title : _0, _1 = _a.insuranceOption2Description, insuranceOption2Description = _1 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Description : _1, _2 = _a.selectedInsuranceOption, selectedInsuranceOption = _2 === void 0 ? props_1.ShoppingCartProductDefault.selectedInsuranceOption : _2, _3 = _a.onInsuranceOptionSelect, onInsuranceOptionSelect = _3 === void 0 ? props_1.ShoppingCartProductDefault.onInsuranceOptionSelect : _3, _4 = _a.deliveryText, deliveryText = _4 === void 0 ? props_1.ShoppingCartProductDefault.deliveryText : _4, _5 = _a.quantity, quantity = _5 === void 0 ? props_1.ShoppingCartProductDefault.quantity : _5, _6 = _a.hasLoading, hasLoading = _6 === void 0 ? props_1.ShoppingCartProductDefault.hasLoading : _6, _7 = _a.deliveryDangerText, deliveryDangerText = _7 === void 0 ? props_1.ShoppingCartProductDefault.deliveryDangerText : _7, _8 = _a.hasError, hasError = _8 === void 0 ? props_1.ShoppingCartProductDefault.hasError : _8, _9 = _a.errorText, errorText = _9 === void 0 ? props_1.ShoppingCartProductDefault.errorText : _9, _10 = _a.hasInsuranceActions, hasInsuranceActions = _10 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceActions : _10, _11 = _a.hasInsuranceTooltip, hasInsuranceTooltip = _11 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltip : _11, _12 = _a.hasDisableActions, hasDisableActions = _12 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableActions : _12, _13 = _a.hasInsuranceTooltipClickAction, hasInsuranceTooltipClickAction = _13 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltipClickAction : _13, _14 = _a.insuranceTooltipText, insuranceTooltipText = _14 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipText : _14, _15 = _a.insuranceTooltipWidth, insuranceTooltipWidth = _15 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipWidth : _15, _16 = _a.onRemove, onRemove = _16 === void 0 ? props_1.ShoppingCartProductDefault.onRemove : _16, _17 = _a.onIncrement, onIncrement = _17 === void 0 ? props_1.ShoppingCartProductDefault.onIncrement : _17, _18 = _a.onDecrement, onDecrement = _18 === void 0 ? props_1.ShoppingCartProductDefault.onDecrement : _18, _19 = _a.toggleInsurance, toggleInsurance = _19 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsurance : _19, _20 = _a.toggleInsuranceLogo, toggleInsuranceLogo = _20 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsuranceLogo : _20, _21 = _a.hasInsurancePriceAdded, hasInsurancePriceAdded = _21 === void 0 ? props_1.ShoppingCartProductDefault.hasInsurancePriceAdded : _21, _22 = _a.hasInsuranceLoading, hasInsuranceLoading = _22 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceLoading : _22, _23 = _a.hasDisableIncrement, hasDisableIncrement = _23 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableIncrement : _23, _24 = _a.insuranceOption1TooltipTitle, insuranceOption1TooltipTitle = _24 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipTitle : _24;
|
|
26
|
+
var tooltipWrapperRef = (0, react_1.useRef)(null);
|
|
27
|
+
var getScrollableParent = function (element) {
|
|
28
|
+
if (!element)
|
|
29
|
+
return null;
|
|
30
|
+
var parent = element.parentElement;
|
|
31
|
+
while (parent) {
|
|
32
|
+
var _a = getComputedStyle(parent), overflowY = _a.overflowY, overflow = _a.overflow;
|
|
33
|
+
if (overflowY === "auto" || overflowY === "scroll" || overflow === "auto" || overflow === "scroll") {
|
|
34
|
+
return parent;
|
|
35
|
+
}
|
|
36
|
+
parent = parent.parentElement;
|
|
37
|
+
}
|
|
38
|
+
return null;
|
|
39
|
+
};
|
|
40
|
+
var handleTooltipWrapperClick = (0, react_1.useCallback)(function (e) {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
var scrollableParent = getScrollableParent(tooltipWrapperRef.current);
|
|
43
|
+
if (scrollableParent) {
|
|
44
|
+
scrollableParent.scrollBy({ top: 200, behavior: "smooth" });
|
|
45
|
+
}
|
|
46
|
+
}, []);
|
|
25
47
|
var LinkComponent = function (_a) {
|
|
26
48
|
var item = _a.item, children = _a.children;
|
|
27
49
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
28
50
|
};
|
|
29
51
|
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": discountRate, "$hasDisableActions": hasDisableActions, "$hasInsurance": !hasLoading && insuranceType === 1 && toggleInsurance, "$insuranceType": insuranceType }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)("small", { children: oldPriceSm })] })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [deliveryDangerText &&
|
|
30
|
-
(0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && (0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } })] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && (hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) }))))] }))] })), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg", onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !hasLoading ? toggleInsurance : undefined, className: "insuranceContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [insuranceText, insurancePrice && (0, jsx_runtime_1.jsx)("p", __assign({ className: "price" }, { children: hasInsuranceLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: insuranceQuantity }))] }) }))] })), hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) })))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "insurance-option-1-tooltip", onClick:
|
|
52
|
+
(0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && (0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } })] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && (hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) }))))] }))] })), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg", onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !hasLoading ? toggleInsurance : undefined, className: "insuranceContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [insuranceText, insurancePrice && (0, jsx_runtime_1.jsx)("p", __assign({ className: "price" }, { children: hasInsuranceLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: insuranceQuantity }))] }) }))] })), hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) })))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)("label", __assign({ ref: tooltipWrapperRef, htmlFor: "insurance-option-1-tooltip", onClick: handleTooltipWrapperClick, onMouseDown: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", popupWidth: "280px", position: "bottomRight", iconWidth: "24px", iconHeight: "24px", title: insuranceOption1TooltipTitle, popupSize: "medium", hasClickAction: hasInsuranceTooltipClickAction }, { children: insuranceOption1TooltipText })) })))] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption1Description }), (insuranceOption1Price || hasInsuranceOption1PriceLoading) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Price, { children: hasInsuranceOption1PriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2PriceValue, { children: insuranceOption1Price }), insuranceOption1PricePeriod && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2PricePeriod, { children: [" ", insuranceOption1PricePeriod] }))] })) }))] })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 2 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 2, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(2); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption2Title })] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption2Description }) })] }))] }))] })));
|
|
31
53
|
};
|
|
32
54
|
exports.default = ShoppingCartProduct;
|
|
@@ -24,6 +24,7 @@ export interface ShoppingCartProduct {
|
|
|
24
24
|
insuranceOption1Description?: string;
|
|
25
25
|
insuranceOption1Price?: string;
|
|
26
26
|
insuranceOption1PricePeriod?: string;
|
|
27
|
+
hasInsuranceOption1PriceLoading?: boolean;
|
|
27
28
|
insuranceOption1TooltipText?: React.ReactNode;
|
|
28
29
|
/** Type 2: Option 2 - Don't want damage protection */
|
|
29
30
|
insuranceOption2Title?: string;
|
|
@@ -23,6 +23,7 @@ exports.ShoppingCartProductDefault = {
|
|
|
23
23
|
insuranceOption1Description: "Troy Artı servislerinde 1 kez ücretsiz cam kırılması onarımı, tüm servis sürecinde ikame cihaz ve öncelikli servis desteği. Unutma, kılcal çizikler hasardan sayılmaz.",
|
|
24
24
|
insuranceOption1Price: "500 TL",
|
|
25
25
|
insuranceOption1PricePeriod: "/ay 12 ay boyunca",
|
|
26
|
+
hasInsuranceOption1PriceLoading: false,
|
|
26
27
|
insuranceOption1TooltipText: null,
|
|
27
28
|
insuranceOption2Title: "Hasar güvencesi istemiyorum",
|
|
28
29
|
insuranceOption2Description: "Hasar güvencesi eklemediğinde yalnızca 5.000 TL'ye kadar olan hasarlar için %100 hasar güvencesi bulunur.",
|
|
@@ -374,3 +374,44 @@ export declare const InsuranceType2: {
|
|
|
374
374
|
insuranceTooltipWidth: string;
|
|
375
375
|
};
|
|
376
376
|
};
|
|
377
|
+
export declare const InsuranceType2PriceLoading: {
|
|
378
|
+
render: (args: any) => import("react/jsx-runtime").JSX.Element;
|
|
379
|
+
args: {
|
|
380
|
+
title: string;
|
|
381
|
+
price: string;
|
|
382
|
+
priceSm: string;
|
|
383
|
+
period: string;
|
|
384
|
+
hasInsurance: boolean;
|
|
385
|
+
insuranceType: number;
|
|
386
|
+
hasInsuranceOption1PriceLoading: boolean;
|
|
387
|
+
insuranceOption1Title: string;
|
|
388
|
+
insuranceOption1Description: string;
|
|
389
|
+
insuranceOption2Title: string;
|
|
390
|
+
insuranceOption2Description: string;
|
|
391
|
+
deliveryText: string;
|
|
392
|
+
oldPrice: string;
|
|
393
|
+
oldPriceSm: string;
|
|
394
|
+
component: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
|
|
395
|
+
discountRate: number;
|
|
396
|
+
hasRemove: boolean;
|
|
397
|
+
hasInsuranceTooltipClickAction: boolean;
|
|
398
|
+
oldPricePeriod: string;
|
|
399
|
+
quantity: string;
|
|
400
|
+
deliveryDangerText: string;
|
|
401
|
+
onRemove: () => void;
|
|
402
|
+
onIncrement: () => void;
|
|
403
|
+
onDecrement: () => void;
|
|
404
|
+
toggleInsurance: () => void;
|
|
405
|
+
image: import("react/jsx-runtime").JSX.Element;
|
|
406
|
+
hasError: boolean;
|
|
407
|
+
hasLoading: boolean;
|
|
408
|
+
errorText: string;
|
|
409
|
+
insuranceText: string;
|
|
410
|
+
insurancePrice: string;
|
|
411
|
+
insuranceQuantity: string;
|
|
412
|
+
hasInsuranceTooltip: boolean;
|
|
413
|
+
hasDisableActions: boolean;
|
|
414
|
+
insuranceTooltipText: import("react/jsx-runtime").JSX.Element;
|
|
415
|
+
insuranceTooltipWidth: string;
|
|
416
|
+
};
|
|
417
|
+
};
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.InsuranceType2 = exports.Minimal = exports.WithInsurancePrice = exports.DisabledActions = exports.WithoutDiscount = exports.WithError = exports.Loading = exports.WithoutInsurance = exports.WithRemove = exports.Default = void 0;
|
|
17
|
+
exports.InsuranceType2PriceLoading = exports.InsuranceType2 = exports.Minimal = exports.WithInsurancePrice = exports.DisabledActions = exports.WithoutDiscount = exports.WithError = exports.Loading = exports.WithoutInsurance = exports.WithRemove = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var react_1 = require("react");
|
|
20
20
|
var ShoppingCartProduct_1 = __importDefault(require("../ShoppingCartProduct"));
|
|
@@ -102,3 +102,7 @@ exports.InsuranceType2 = {
|
|
|
102
102
|
render: InsuranceType2WithState,
|
|
103
103
|
args: __assign(__assign({}, defaultArgs), { title: "Phone 17 Pro Max - Abis", price: "7.000", priceSm: " TL", period: "ay 12 ay boyunca", hasInsurance: true, insuranceType: 2, insuranceOption1Title: "Hasar güvencesi ekle", insuranceOption1Description: "Troy Artı servislerinde 1 kez ücretsiz cam kırılması onarımı, tüm servis sürecinde ikame cihaz ve öncelikli servis desteği. Unutma, kılcal çizikler hasardan sayılmaz.", insuranceOption1Price: "500 TL", insuranceOption1PricePeriod: "/ay 12 ay boyunca", insuranceOption1TooltipText: "Ek bilgi için tıklayın", insuranceOption2Title: "Hasar güvencesi istemiyorum", insuranceOption2Description: "Hasar güvencesi eklemediğinde yalnızca 5.000 TL'ye kadar olan hasarlar için %100 hasar güvencesi bulunur." }),
|
|
104
104
|
};
|
|
105
|
+
exports.InsuranceType2PriceLoading = {
|
|
106
|
+
render: InsuranceType2WithState,
|
|
107
|
+
args: __assign(__assign({}, defaultArgs), { title: "Phone 17 Pro Max - Abis", price: "7.000", priceSm: " TL", period: "ay 12 ay boyunca", hasInsurance: true, insuranceType: 2, hasInsuranceOption1PriceLoading: true, insuranceOption1Title: "Hasar güvencesi ekle", insuranceOption1Description: "Troy Artı servislerinde 1 kez ücretsiz cam kırılması onarımı, tüm servis sürecinde ikame cihaz ve öncelikli servis desteği. Unutma, kılcal çizikler hasardan sayılmaz.", insuranceOption2Title: "Hasar güvencesi istemiyorum", insuranceOption2Description: "Hasar güvencesi eklemediğinde yalnızca 5.000 TL'ye kadar olan hasarlar için %100 hasar güvencesi bulunur." }),
|
|
108
|
+
};
|