krl-alfred 2.20.1 → 2.20.3
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/ActionButton/ActionButton.d.ts +1 -1
- package/dist/components/ActionButton/ActionButton.js +6 -6
- package/dist/components/ActionButton/ActionButton.styled.d.ts +2 -0
- package/dist/components/ActionButton/ActionButton.styled.js +15 -13
- package/dist/components/ActionButton/props.d.ts +5 -1
- package/dist/components/ActionButton/props.js +2 -0
- package/dist/components/ActionButton/stories/ActionButton.stories.d.ts +16 -1
- package/dist/components/ActionButton/stories/ActionButton.stories.js +38 -1
- package/dist/components/AddressCard/AddressCard.styled.js +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.d.ts +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +4 -6
- package/dist/components/DescriptionCard/DescriptionCard.styled.d.ts +11 -0
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +20 -13
- package/dist/components/DescriptionCard/props.d.ts +12 -0
- package/dist/components/DescriptionCard/props.js +8 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +93 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +43 -1
- package/dist/components/InfoBox/InfoBox.js +1 -1
- package/dist/components/InfoBox/props.d.ts +2 -2
- package/dist/components/InfoBox/stories/InfoBox.stories.d.ts +15 -8
- package/dist/components/InfoBox/stories/InfoBox.stories.js +7 -4
- package/dist/components/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/RadioGroup/props.d.ts +14 -3
- package/dist/components/RadioGroup/props.js +1 -1
- package/dist/components/RadioGroup/stories/RadioGroup.stories.d.ts +73 -0
- package/dist/components/RadioGroup/stories/RadioGroup.stories.js +110 -2
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.d.ts +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +6 -3
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts +9 -0
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +12 -3
- package/dist/components/ShoppingCartProduct/props.d.ts +10 -1
- package/dist/components/ShoppingCartProduct/props.js +8 -0
- package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.d.ts +165 -0
- package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js +25 -2
- package/dist/components/Tabs/Tabs.d.ts +1 -1
- package/dist/components/Tabs/Tabs.js +4 -4
- package/dist/components/Tabs/Tabs.styled.js +1 -1
- package/dist/components/Tabs/props.d.ts +3 -0
- package/dist/components/Tabs/stories/Tabs.stories.d.ts +12 -1
- package/dist/components/Tabs/stories/Tabs.stories.js +12 -1
- package/package.json +1 -1
|
@@ -23,8 +23,9 @@ var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
|
23
23
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
24
24
|
var QuantitySelector_1 = __importDefault(require("../QuantitySelector"));
|
|
25
25
|
var QuantitySelector_styled_1 = require("../QuantitySelector/QuantitySelector.styled");
|
|
26
|
+
var Badges_1 = __importDefault(require("../Badges"));
|
|
26
27
|
var ShoppingCartProduct = function (_a) {
|
|
27
|
-
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.
|
|
28
|
+
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.upfrontAddonTitle, upfrontAddonTitle = _4 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonTitle : _4, _5 = _a.upfrontAddonChecked, upfrontAddonChecked = _5 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonChecked : _5, _6 = _a.onUpfrontAddonChange, onUpfrontAddonChange = _6 === void 0 ? props_1.ShoppingCartProductDefault.onUpfrontAddonChange : _6, _7 = _a.upfrontAddonDiscountBadge, upfrontAddonDiscountBadge = _7 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonDiscountBadge : _7, _8 = _a.upfrontAddonSummaryText, upfrontAddonSummaryText = _8 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonSummaryText : _8, _9 = _a.upfrontAddonOldPrice, upfrontAddonOldPrice = _9 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonOldPrice : _9, _10 = _a.upfrontAddonPrice, upfrontAddonPrice = _10 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonPrice : _10, _11 = _a.hasUpfrontAddonPriceLoading, hasUpfrontAddonPriceLoading = _11 === void 0 ? props_1.ShoppingCartProductDefault.hasUpfrontAddonPriceLoading : _11, _12 = _a.deliveryText, deliveryText = _12 === void 0 ? props_1.ShoppingCartProductDefault.deliveryText : _12, _13 = _a.quantity, quantity = _13 === void 0 ? props_1.ShoppingCartProductDefault.quantity : _13, _14 = _a.hasLoading, hasLoading = _14 === void 0 ? props_1.ShoppingCartProductDefault.hasLoading : _14, _15 = _a.deliveryDangerText, deliveryDangerText = _15 === void 0 ? props_1.ShoppingCartProductDefault.deliveryDangerText : _15, _16 = _a.hasError, hasError = _16 === void 0 ? props_1.ShoppingCartProductDefault.hasError : _16, _17 = _a.errorText, errorText = _17 === void 0 ? props_1.ShoppingCartProductDefault.errorText : _17, _18 = _a.hasInsuranceActions, hasInsuranceActions = _18 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceActions : _18, _19 = _a.hasInsuranceTooltip, hasInsuranceTooltip = _19 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltip : _19, _20 = _a.hasDisableActions, hasDisableActions = _20 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableActions : _20, _21 = _a.hasInsuranceTooltipClickAction, hasInsuranceTooltipClickAction = _21 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltipClickAction : _21, _22 = _a.insuranceTooltipText, insuranceTooltipText = _22 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipText : _22, _23 = _a.insuranceTooltipWidth, insuranceTooltipWidth = _23 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipWidth : _23, _24 = _a.onRemove, onRemove = _24 === void 0 ? props_1.ShoppingCartProductDefault.onRemove : _24, _25 = _a.onIncrement, onIncrement = _25 === void 0 ? props_1.ShoppingCartProductDefault.onIncrement : _25, _26 = _a.onDecrement, onDecrement = _26 === void 0 ? props_1.ShoppingCartProductDefault.onDecrement : _26, _27 = _a.toggleInsurance, toggleInsurance = _27 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsurance : _27, _28 = _a.toggleInsuranceLogo, toggleInsuranceLogo = _28 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsuranceLogo : _28, _29 = _a.hasInsurancePriceAdded, hasInsurancePriceAdded = _29 === void 0 ? props_1.ShoppingCartProductDefault.hasInsurancePriceAdded : _29, _30 = _a.hasInsuranceLoading, hasInsuranceLoading = _30 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceLoading : _30, _31 = _a.hasDisableIncrement, hasDisableIncrement = _31 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableIncrement : _31, _32 = _a.insuranceOption1TooltipTitle, insuranceOption1TooltipTitle = _32 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipTitle : _32;
|
|
28
29
|
var tooltipWrapperRef = (0, react_1.useRef)(null);
|
|
29
30
|
var getScrollableParent = function (element) {
|
|
30
31
|
if (!element)
|
|
@@ -50,7 +51,9 @@ var ShoppingCartProduct = function (_a) {
|
|
|
50
51
|
var item = _a.item, children = _a.children;
|
|
51
52
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
52
53
|
};
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
var showUpfrontProductPriceLoading = insuranceType === 3 && upfrontAddonChecked && hasUpfrontAddonPriceLoading;
|
|
55
|
+
var hasUpfrontAddonDiscount = Boolean(upfrontAddonOldPrice);
|
|
56
|
+
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.jsx)("div", { children: showUpfrontProductPriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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 &&
|
|
57
|
+
(0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsx)(QuantitySelector_1.default, { orientation: "vertical", quantity: quantity, onIncrement: onIncrement, onDecrement: onDecrement, onRemove: onRemove, hasRemove: hasRemove, hasLoading: hasLoading, hasError: hasError, errorText: errorText, hasDisableActions: hasDisableActions, hasDisableIncrement: hasDisableIncrement })] })), 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)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { 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: "302px", 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 }) })] }))] })), hasInsurance && insuranceType === 3 && !hasLoading && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonWrapper, { children: (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonCard, __assign({ htmlFor: "upfront-addon" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "upfront-addon", checked: upfrontAddonChecked, onChange: onUpfrontAddonChange }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonHeader, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonIndicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonTitle, { children: upfrontAddonTitle }), upfrontAddonDiscountBadge && ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: upfrontAddonDiscountBadge }))] }), (upfrontAddonSummaryText || upfrontAddonPrice) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonPriceBlock, { children: hasUpfrontAddonDiscount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonOldPrice, { children: upfrontAddonOldPrice })] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: ["yerine \u015Fimdi", " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] })] })) : ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, upfrontAddonPrice && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] }))] })) }))] })) }))] })));
|
|
55
58
|
};
|
|
56
59
|
exports.default = ShoppingCartProduct;
|
|
@@ -14,4 +14,13 @@ export declare const InsuranceType2Card: import("styled-components/dist/types").
|
|
|
14
14
|
$selected?: boolean;
|
|
15
15
|
}, never>>> & string;
|
|
16
16
|
export declare const InsuranceType2Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
17
|
+
export declare const UpfrontAddonIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
18
|
+
export declare const UpfrontAddonTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
19
|
+
export declare const UpfrontAddonHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
20
|
+
export declare const UpfrontAddonPriceBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
21
|
+
export declare const UpfrontAddonPriceLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
|
|
22
|
+
export declare const UpfrontAddonOldPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
23
|
+
export declare const UpfrontAddonDiscountedPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
24
|
+
export declare const UpfrontAddonCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
25
|
+
export declare const UpfrontAddonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
17
26
|
export declare const ShoppingCartProductStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never>>> & string;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.ShoppingCartProductStyled = exports.InsuranceType2Wrapper = exports.InsuranceType2Card = exports.InsuranceType2PricePeriod = exports.InsuranceType2PriceValue = exports.InsuranceType2Price = exports.InsuranceType2Description = exports.InsuranceType2Content = exports.InsuranceType2Title = exports.InsuranceType2Indicator = exports.InsuranceType2Header = void 0;
|
|
10
|
+
exports.ShoppingCartProductStyled = exports.UpfrontAddonWrapper = exports.UpfrontAddonCard = exports.UpfrontAddonDiscountedPrice = exports.UpfrontAddonOldPrice = exports.UpfrontAddonPriceLine = exports.UpfrontAddonPriceBlock = exports.UpfrontAddonHeader = exports.UpfrontAddonTitle = exports.UpfrontAddonIndicator = exports.InsuranceType2Wrapper = exports.InsuranceType2Card = exports.InsuranceType2PricePeriod = exports.InsuranceType2PriceValue = exports.InsuranceType2Price = exports.InsuranceType2Description = exports.InsuranceType2Content = exports.InsuranceType2Title = exports.InsuranceType2Indicator = exports.InsuranceType2Header = void 0;
|
|
11
11
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var devices_1 = require("../../constants/devices");
|
|
@@ -23,5 +23,14 @@ exports.InsuranceType2PriceValue = styled_components_1.default.span(templateObje
|
|
|
23
23
|
exports.InsuranceType2PricePeriod = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font: var(--caption-regular-12-15);\n color: var(--dark);\n"], ["\n font: var(--caption-regular-12-15);\n color: var(--dark);\n"])));
|
|
24
24
|
exports.InsuranceType2Card = styled_components_1.default.label(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background: var(--primary-opacity-5);\n border-radius: 0.5rem;\n cursor: pointer;\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n\n &:checked ~ ", " ", " {\n background-image: url('", "');\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background: var(--primary-opacity-5);\n border-radius: 0.5rem;\n cursor: pointer;\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n\n &:checked ~ ", " ", " {\n background-image: url('", "');\n }\n }\n"])), exports.InsuranceType2Header, exports.InsuranceType2Indicator, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "RadioButtonElementChecked" })));
|
|
25
25
|
exports.InsuranceType2Wrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: relative;\n margin-top: 1.5rem;\n padding: 1.5rem;\n border: 1px solid var(--grey-10);\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n"], ["\n position: relative;\n margin-top: 1.5rem;\n padding: 1.5rem;\n border: 1px solid var(--grey-10);\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n"])));
|
|
26
|
-
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media only screen and ", " {\n &:hover {\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n }\n\n &:active {\n button {\n color: white;\n background-color: var(--primary);\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media only screen and ", " {\n &:hover {\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n }\n\n &:active {\n button {\n color: white;\n background-color: var(--primary);\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; }, devices_1.devices.mdUp);
|
|
27
|
-
|
|
26
|
+
exports.UpfrontAddonIndicator = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n background-image: url('", "');\n background-size: 100% 100%;\n"], ["\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n background-image: url('", "');\n background-size: 100% 100%;\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "CheckboxElementUncheck" })));
|
|
27
|
+
exports.UpfrontAddonTitle = styled_components_1.default.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font: var(--body-extra-bold-13-16);\n color: var(--dark);\n flex: 1;\n min-width: 0;\n"], ["\n font: var(--body-extra-bold-13-16);\n color: var(--dark);\n flex: 1;\n min-width: 0;\n"])));
|
|
28
|
+
exports.UpfrontAddonHeader = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"])));
|
|
29
|
+
exports.UpfrontAddonPriceBlock = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n margin-top: auto;\n padding-left: 2.5rem;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n margin-top: auto;\n padding-left: 2.5rem;\n"])));
|
|
30
|
+
exports.UpfrontAddonPriceLine = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n margin: 0;\n font: var(--caption-regular-11-13);\n color: var(--grey-50);\n"], ["\n margin: 0;\n font: var(--caption-regular-11-13);\n color: var(--grey-50);\n"])));
|
|
31
|
+
exports.UpfrontAddonOldPrice = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n text-decoration: line-through;\n color: var(--dark-opacity-25);\n font: var(--caption-semi-bold-12-15);\n"], ["\n text-decoration: line-through;\n color: var(--dark-opacity-25);\n font: var(--caption-semi-bold-12-15);\n"])));
|
|
32
|
+
exports.UpfrontAddonDiscountedPrice = styled_components_1.default.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font: var(--body-extra-bold-13-16);\n color: var(--dark);\n"], ["\n font: var(--body-extra-bold-13-16);\n color: var(--dark);\n"])));
|
|
33
|
+
exports.UpfrontAddonCard = styled_components_1.default.label(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 1rem;\n background: var(--primary-opacity-5);\n border-radius: 0.5rem;\n cursor: pointer;\n\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n\n &:checked ~ ", " ", " {\n background-image: url('", "');\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 1rem;\n background: var(--primary-opacity-5);\n border-radius: 0.5rem;\n cursor: pointer;\n\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n\n &:checked ~ ", " ", " {\n background-image: url('", "');\n }\n }\n"])), exports.UpfrontAddonHeader, exports.UpfrontAddonIndicator, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "CheckboxElementChecked" })));
|
|
34
|
+
exports.UpfrontAddonWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n position: relative;\n margin-top: 1.5rem;\n padding: 1rem;\n border: 1px solid var(--grey-10);\n border-radius: 0.5rem;\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n"], ["\n position: relative;\n margin-top: 1.5rem;\n padding: 1rem;\n border: 1px solid var(--grey-10);\n border-radius: 0.5rem;\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n"])));
|
|
35
|
+
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media only screen and ", " {\n &:hover {\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n }\n\n &:active {\n button {\n color: white;\n background-color: var(--primary);\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media only screen and ", " {\n &:hover {\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n }\n\n &:active {\n button {\n color: white;\n background-color: var(--primary);\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; }, devices_1.devices.mdUp);
|
|
36
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export type InsuranceType = 1 | 2;
|
|
2
|
+
export type InsuranceType = 1 | 2 | 3;
|
|
3
3
|
export interface ShoppingCartProduct {
|
|
4
4
|
title?: string;
|
|
5
5
|
priceSm?: string;
|
|
@@ -32,6 +32,15 @@ export interface ShoppingCartProduct {
|
|
|
32
32
|
/** Type 2: Selected option (1 or 2) */
|
|
33
33
|
selectedInsuranceOption?: 1 | 2;
|
|
34
34
|
onInsuranceOptionSelect?: (option: 1 | 2) => void;
|
|
35
|
+
/** Type 3: Pay upfront addon */
|
|
36
|
+
upfrontAddonTitle?: string;
|
|
37
|
+
upfrontAddonChecked?: boolean;
|
|
38
|
+
onUpfrontAddonChange?: () => void;
|
|
39
|
+
upfrontAddonDiscountBadge?: string;
|
|
40
|
+
upfrontAddonSummaryText?: string;
|
|
41
|
+
upfrontAddonOldPrice?: string;
|
|
42
|
+
upfrontAddonPrice?: string;
|
|
43
|
+
hasUpfrontAddonPriceLoading?: boolean;
|
|
35
44
|
deliveryText?: string;
|
|
36
45
|
quantity?: string;
|
|
37
46
|
hasLoading?: boolean;
|
|
@@ -29,6 +29,14 @@ exports.ShoppingCartProductDefault = {
|
|
|
29
29
|
insuranceOption2Description: "Hasar güvencesi eklemediğinde yalnızca 5.000 TL'ye kadar olan hasarlar için %100 hasar güvencesi bulunur.",
|
|
30
30
|
selectedInsuranceOption: 1,
|
|
31
31
|
onInsuranceOptionSelect: null,
|
|
32
|
+
upfrontAddonTitle: "Tek seferde öde",
|
|
33
|
+
upfrontAddonChecked: false,
|
|
34
|
+
onUpfrontAddonChange: null,
|
|
35
|
+
upfrontAddonDiscountBadge: null,
|
|
36
|
+
upfrontAddonSummaryText: null,
|
|
37
|
+
upfrontAddonOldPrice: null,
|
|
38
|
+
upfrontAddonPrice: null,
|
|
39
|
+
hasUpfrontAddonPriceLoading: false,
|
|
32
40
|
deliveryText: null,
|
|
33
41
|
quantity: null,
|
|
34
42
|
hasLoading: false,
|
|
@@ -416,3 +416,168 @@ export declare const InsuranceType2PriceLoading: {
|
|
|
416
416
|
insuranceTooltipWidth: string;
|
|
417
417
|
};
|
|
418
418
|
};
|
|
419
|
+
export declare const UpfrontAddonWithDiscount: {
|
|
420
|
+
render: (args: any) => React.JSX.Element;
|
|
421
|
+
args: {
|
|
422
|
+
image: React.JSX.Element;
|
|
423
|
+
upfrontAddonDiscountBadge: string;
|
|
424
|
+
upfrontAddonOldPrice: string;
|
|
425
|
+
title: string;
|
|
426
|
+
price: string;
|
|
427
|
+
priceSm: string;
|
|
428
|
+
period: string;
|
|
429
|
+
deliveryText: string;
|
|
430
|
+
deliveryDangerText: any;
|
|
431
|
+
discountRate: number;
|
|
432
|
+
oldPrice: any;
|
|
433
|
+
oldPriceSm: any;
|
|
434
|
+
oldPricePeriod: any;
|
|
435
|
+
hasInsurance: boolean;
|
|
436
|
+
insuranceType: number;
|
|
437
|
+
upfrontAddonTitle: string;
|
|
438
|
+
upfrontAddonSummaryText: string;
|
|
439
|
+
upfrontAddonPrice: string;
|
|
440
|
+
component: ({ children }: any) => React.JSX.Element;
|
|
441
|
+
hasRemove: boolean;
|
|
442
|
+
hasInsuranceTooltipClickAction: boolean;
|
|
443
|
+
quantity: string;
|
|
444
|
+
onRemove: () => void;
|
|
445
|
+
onIncrement: () => void;
|
|
446
|
+
onDecrement: () => void;
|
|
447
|
+
toggleInsurance: () => void;
|
|
448
|
+
hasError: boolean;
|
|
449
|
+
hasLoading: boolean;
|
|
450
|
+
errorText: string;
|
|
451
|
+
insuranceText: string;
|
|
452
|
+
insurancePrice: string;
|
|
453
|
+
insuranceQuantity: string;
|
|
454
|
+
hasInsuranceTooltip: boolean;
|
|
455
|
+
hasDisableActions: boolean;
|
|
456
|
+
insuranceTooltipText: React.JSX.Element;
|
|
457
|
+
insuranceTooltipWidth: string;
|
|
458
|
+
};
|
|
459
|
+
};
|
|
460
|
+
export declare const UpfrontAddonSimple: {
|
|
461
|
+
render: (args: any) => React.JSX.Element;
|
|
462
|
+
args: {
|
|
463
|
+
image: React.JSX.Element;
|
|
464
|
+
title: string;
|
|
465
|
+
price: string;
|
|
466
|
+
priceSm: string;
|
|
467
|
+
period: string;
|
|
468
|
+
deliveryText: string;
|
|
469
|
+
deliveryDangerText: any;
|
|
470
|
+
discountRate: number;
|
|
471
|
+
oldPrice: any;
|
|
472
|
+
oldPriceSm: any;
|
|
473
|
+
oldPricePeriod: any;
|
|
474
|
+
hasInsurance: boolean;
|
|
475
|
+
insuranceType: number;
|
|
476
|
+
upfrontAddonTitle: string;
|
|
477
|
+
upfrontAddonSummaryText: string;
|
|
478
|
+
upfrontAddonPrice: string;
|
|
479
|
+
component: ({ children }: any) => React.JSX.Element;
|
|
480
|
+
hasRemove: boolean;
|
|
481
|
+
hasInsuranceTooltipClickAction: boolean;
|
|
482
|
+
quantity: string;
|
|
483
|
+
onRemove: () => void;
|
|
484
|
+
onIncrement: () => void;
|
|
485
|
+
onDecrement: () => void;
|
|
486
|
+
toggleInsurance: () => void;
|
|
487
|
+
hasError: boolean;
|
|
488
|
+
hasLoading: boolean;
|
|
489
|
+
errorText: string;
|
|
490
|
+
insuranceText: string;
|
|
491
|
+
insurancePrice: string;
|
|
492
|
+
insuranceQuantity: string;
|
|
493
|
+
hasInsuranceTooltip: boolean;
|
|
494
|
+
hasDisableActions: boolean;
|
|
495
|
+
insuranceTooltipText: React.JSX.Element;
|
|
496
|
+
insuranceTooltipWidth: string;
|
|
497
|
+
};
|
|
498
|
+
};
|
|
499
|
+
export declare const UpfrontAddonChecked: {
|
|
500
|
+
render: (args: any) => React.JSX.Element;
|
|
501
|
+
args: {
|
|
502
|
+
image: React.JSX.Element;
|
|
503
|
+
upfrontAddonChecked: boolean;
|
|
504
|
+
upfrontAddonDiscountBadge: string;
|
|
505
|
+
upfrontAddonOldPrice: string;
|
|
506
|
+
title: string;
|
|
507
|
+
price: string;
|
|
508
|
+
priceSm: string;
|
|
509
|
+
period: string;
|
|
510
|
+
deliveryText: string;
|
|
511
|
+
deliveryDangerText: any;
|
|
512
|
+
discountRate: number;
|
|
513
|
+
oldPrice: any;
|
|
514
|
+
oldPriceSm: any;
|
|
515
|
+
oldPricePeriod: any;
|
|
516
|
+
hasInsurance: boolean;
|
|
517
|
+
insuranceType: number;
|
|
518
|
+
upfrontAddonTitle: string;
|
|
519
|
+
upfrontAddonSummaryText: string;
|
|
520
|
+
upfrontAddonPrice: string;
|
|
521
|
+
component: ({ children }: any) => React.JSX.Element;
|
|
522
|
+
hasRemove: boolean;
|
|
523
|
+
hasInsuranceTooltipClickAction: boolean;
|
|
524
|
+
quantity: string;
|
|
525
|
+
onRemove: () => void;
|
|
526
|
+
onIncrement: () => void;
|
|
527
|
+
onDecrement: () => void;
|
|
528
|
+
toggleInsurance: () => void;
|
|
529
|
+
hasError: boolean;
|
|
530
|
+
hasLoading: boolean;
|
|
531
|
+
errorText: string;
|
|
532
|
+
insuranceText: string;
|
|
533
|
+
insurancePrice: string;
|
|
534
|
+
insuranceQuantity: string;
|
|
535
|
+
hasInsuranceTooltip: boolean;
|
|
536
|
+
hasDisableActions: boolean;
|
|
537
|
+
insuranceTooltipText: React.JSX.Element;
|
|
538
|
+
insuranceTooltipWidth: string;
|
|
539
|
+
};
|
|
540
|
+
};
|
|
541
|
+
export declare const UpfrontAddonCheckedLoading: {
|
|
542
|
+
render: (args: any) => React.JSX.Element;
|
|
543
|
+
args: {
|
|
544
|
+
image: React.JSX.Element;
|
|
545
|
+
upfrontAddonChecked: boolean;
|
|
546
|
+
upfrontAddonDiscountBadge: string;
|
|
547
|
+
upfrontAddonOldPrice: string;
|
|
548
|
+
hasUpfrontAddonPriceLoading: boolean;
|
|
549
|
+
title: string;
|
|
550
|
+
price: string;
|
|
551
|
+
priceSm: string;
|
|
552
|
+
period: string;
|
|
553
|
+
deliveryText: string;
|
|
554
|
+
deliveryDangerText: any;
|
|
555
|
+
discountRate: number;
|
|
556
|
+
oldPrice: any;
|
|
557
|
+
oldPriceSm: any;
|
|
558
|
+
oldPricePeriod: any;
|
|
559
|
+
hasInsurance: boolean;
|
|
560
|
+
insuranceType: number;
|
|
561
|
+
upfrontAddonTitle: string;
|
|
562
|
+
upfrontAddonSummaryText: string;
|
|
563
|
+
upfrontAddonPrice: string;
|
|
564
|
+
component: ({ children }: any) => React.JSX.Element;
|
|
565
|
+
hasRemove: boolean;
|
|
566
|
+
hasInsuranceTooltipClickAction: boolean;
|
|
567
|
+
quantity: string;
|
|
568
|
+
onRemove: () => void;
|
|
569
|
+
onIncrement: () => void;
|
|
570
|
+
onDecrement: () => void;
|
|
571
|
+
toggleInsurance: () => void;
|
|
572
|
+
hasError: boolean;
|
|
573
|
+
hasLoading: boolean;
|
|
574
|
+
errorText: string;
|
|
575
|
+
insuranceText: string;
|
|
576
|
+
insurancePrice: string;
|
|
577
|
+
insuranceQuantity: string;
|
|
578
|
+
hasInsuranceTooltip: boolean;
|
|
579
|
+
hasDisableActions: boolean;
|
|
580
|
+
insuranceTooltipText: React.JSX.Element;
|
|
581
|
+
insuranceTooltipWidth: string;
|
|
582
|
+
};
|
|
583
|
+
};
|
|
@@ -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.InsuranceType2PriceLoading = exports.InsuranceType2 = exports.Minimal = exports.WithInsurancePrice = exports.DisabledActions = exports.WithoutDiscount = exports.WithError = exports.Loading = exports.WithoutInsurance = exports.WithRemove = exports.Default = void 0;
|
|
17
|
+
exports.UpfrontAddonCheckedLoading = exports.UpfrontAddonChecked = exports.UpfrontAddonSimple = exports.UpfrontAddonWithDiscount = 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"));
|
|
@@ -61,7 +61,7 @@ exports.default = {
|
|
|
61
61
|
argTypes: {
|
|
62
62
|
hasRemove: { control: 'boolean' },
|
|
63
63
|
hasInsurance: { control: 'boolean' },
|
|
64
|
-
insuranceType: { control: 'radio', options: [1, 2] },
|
|
64
|
+
insuranceType: { control: 'radio', options: [1, 2, 3] },
|
|
65
65
|
hasLoading: { control: 'boolean' },
|
|
66
66
|
hasError: { control: 'boolean' },
|
|
67
67
|
hasDisableActions: { control: 'boolean' },
|
|
@@ -106,3 +106,26 @@ exports.InsuranceType2PriceLoading = {
|
|
|
106
106
|
render: InsuranceType2WithState,
|
|
107
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
108
|
};
|
|
109
|
+
var coffeeImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", height: "64px", alt: "\u00C7ekirdek kahve" });
|
|
110
|
+
var upfrontAddonBaseArgs = __assign(__assign({}, defaultArgs), { title: "Çekirdek kahve", price: "520", priceSm: " TL", period: "İki ayda bir - 12 ay boyunca", deliveryText: "Tahmini kargoya teslim: 1-2 gün", deliveryDangerText: null, discountRate: 0, oldPrice: null, oldPriceSm: null, oldPricePeriod: null, hasInsurance: true, insuranceType: 3, upfrontAddonTitle: "Tek seferde öde", upfrontAddonSummaryText: "6 sipariş toplamı", upfrontAddonPrice: "2.800 TL" });
|
|
111
|
+
var UpfrontAddonWithState = function (args) {
|
|
112
|
+
var _a;
|
|
113
|
+
var _b = (0, react_1.useState)((_a = args.upfrontAddonChecked) !== null && _a !== void 0 ? _a : false), checked = _b[0], setChecked = _b[1];
|
|
114
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '368px' } }, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_1.default, __assign({}, args, { upfrontAddonChecked: checked, onUpfrontAddonChange: function () { return setChecked(!checked); } })) })));
|
|
115
|
+
};
|
|
116
|
+
exports.UpfrontAddonWithDiscount = {
|
|
117
|
+
render: UpfrontAddonWithState,
|
|
118
|
+
args: __assign(__assign({}, upfrontAddonBaseArgs), { image: coffeeImage, upfrontAddonDiscountBadge: "%10 indirim", upfrontAddonOldPrice: "3.120 TL" }),
|
|
119
|
+
};
|
|
120
|
+
exports.UpfrontAddonSimple = {
|
|
121
|
+
render: UpfrontAddonWithState,
|
|
122
|
+
args: __assign(__assign({}, upfrontAddonBaseArgs), { image: coffeeImage }),
|
|
123
|
+
};
|
|
124
|
+
exports.UpfrontAddonChecked = {
|
|
125
|
+
render: UpfrontAddonWithState,
|
|
126
|
+
args: __assign(__assign({}, upfrontAddonBaseArgs), { image: coffeeImage, upfrontAddonChecked: true, upfrontAddonDiscountBadge: "%10 indirim", upfrontAddonOldPrice: "3.120 TL" }),
|
|
127
|
+
};
|
|
128
|
+
exports.UpfrontAddonCheckedLoading = {
|
|
129
|
+
render: UpfrontAddonWithState,
|
|
130
|
+
args: __assign(__assign({}, upfrontAddonBaseArgs), { image: coffeeImage, upfrontAddonChecked: true, upfrontAddonDiscountBadge: "%10 indirim", upfrontAddonOldPrice: "3.120 TL", hasUpfrontAddonPriceLoading: true }),
|
|
131
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TabsProps } from "./props";
|
|
3
|
-
declare const Tabs: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, onChange, }: TabsProps) => React.JSX.Element;
|
|
3
|
+
declare const Tabs: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, tabButtonWidth, onChange, }: TabsProps) => React.JSX.Element;
|
|
4
4
|
export default Tabs;
|
|
@@ -17,15 +17,15 @@ var props_1 = require("./props");
|
|
|
17
17
|
var Tabs_styled_1 = require("./Tabs.styled");
|
|
18
18
|
var Tabs = function (_a) {
|
|
19
19
|
var _b;
|
|
20
|
-
var _c = _a.tabs, tabs = _c === void 0 ? props_1.TabsDefault.tabs : _c, activeTab = _a.activeTab, defaultTab = _a.defaultTab, _d = _a.size, size = _d === void 0 ? props_1.TabsDefault.size : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e, _f = _a.isHideTabHeaderOnMobile, isHideTabHeaderOnMobile = _f === void 0 ? props_1.TabsDefault.isHideTabHeaderOnMobile : _f, onChange = _a.onChange;
|
|
21
|
-
var
|
|
20
|
+
var _c = _a.tabs, tabs = _c === void 0 ? props_1.TabsDefault.tabs : _c, activeTab = _a.activeTab, defaultTab = _a.defaultTab, _d = _a.size, size = _d === void 0 ? props_1.TabsDefault.size : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e, _f = _a.isHideTabHeaderOnMobile, isHideTabHeaderOnMobile = _f === void 0 ? props_1.TabsDefault.isHideTabHeaderOnMobile : _f, _g = _a.tabButtonWidth, tabButtonWidth = _g === void 0 ? props_1.TabsDefault.tabButtonWidth : _g, onChange = _a.onChange;
|
|
21
|
+
var _h = (0, react_1.useState)(function () {
|
|
22
22
|
var _a;
|
|
23
23
|
if (activeTab)
|
|
24
24
|
return activeTab;
|
|
25
25
|
if (defaultTab)
|
|
26
26
|
return defaultTab;
|
|
27
27
|
return ((_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key) || '';
|
|
28
|
-
}), currentTab =
|
|
28
|
+
}), currentTab = _h[0], setCurrentTab = _h[1];
|
|
29
29
|
var headerRef = (0, react_1.useRef)(null);
|
|
30
30
|
// Sync with controlled activeTab prop
|
|
31
31
|
(0, react_1.useEffect)(function () {
|
|
@@ -60,6 +60,6 @@ var Tabs = function (_a) {
|
|
|
60
60
|
setCurrentTab(key);
|
|
61
61
|
};
|
|
62
62
|
var activeTabContent = (_b = tabs.find(function (tab) { return tab.key === currentTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ ref: headerRef, "$size": size, "$hasAutoFlex": hasAutoFlex, "$isHideTabHeaderOnMobile": isHideTabHeaderOnMobile }, { children: tabs.map(function (tab) { return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "data-key": tab.key, "$size": size, "$isActive": currentTab === tab.key, "$isDisabled": tab.isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$size": size, "$isActive": currentTab === tab.key, "$hasAutoFlex": hasAutoFlex, onClick: function () { return !tab.isDisabled && handleTabChange(tab.key); } }, { children: tab.title })) }), tab.key)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ "$size": size }, { children: activeTabContent }))] }));
|
|
63
|
+
return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ ref: headerRef, "$size": size, "$hasAutoFlex": hasAutoFlex, "$isHideTabHeaderOnMobile": isHideTabHeaderOnMobile, "$tabButtonWidth": tabButtonWidth }, { children: tabs.map(function (tab) { return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "data-key": tab.key, "$size": size, "$isActive": currentTab === tab.key, "$isDisabled": tab.isDisabled, "$hasAutoFlex": hasAutoFlex, "$tabButtonWidth": tabButtonWidth }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$size": size, "$isActive": currentTab === tab.key, "$hasAutoFlex": hasAutoFlex, "$tabButtonWidth": tabButtonWidth, onClick: function () { return !tab.isDisabled && handleTabChange(tab.key); } }, { children: tab.title })) }), tab.key)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ "$size": size }, { children: activeTabContent }))] }));
|
|
64
64
|
};
|
|
65
65
|
exports.default = Tabs;
|
|
@@ -41,7 +41,7 @@ var getTabSize = function ($size) {
|
|
|
41
41
|
};
|
|
42
42
|
exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
43
43
|
exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: ", ";\n ", "\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: ", ";\n ", "\n ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return getTabSize(props.$size).columnGap; }, function (props) { return !props.$hasAutoFlex && "\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem;\n margin: -2rem;\n @media only screen and (".concat(devices_1.devices.xl, ") {\n padding: 2rem 1rem;\n margin: -2rem -1rem;\n column-gap: ").concat(getTabSize(props.$size).columnGapSm, ";\n }\n "); }, function (props) { return props.$isHideTabHeaderOnMobile ? "\n @media only screen and (".concat(devices_1.devices.lg, ") {\n display: none;\n }\n ") : ""; });
|
|
44
|
-
exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: ", ";\n ", "\n"], ["\n flex: ", ";\n ", "\n"])), function (props) { return props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$isDisabled ? "\n cursor: no-drop;\n pointer-events: none;\n user-select: none;\n " : ""; });
|
|
44
|
+
exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: ", ";\n width: ", ";\n ", "\n"], ["\n flex: ", ";\n width: ", ";\n ", "\n"])), function (props) { return props.$tabButtonWidth ? "0 0 ".concat(props.$tabButtonWidth, "px") : props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$tabButtonWidth ? "".concat(props.$tabButtonWidth, "px") : "auto"; }, function (props) { return props.$isDisabled ? "\n cursor: no-drop;\n pointer-events: none;\n user-select: none;\n " : ""; });
|
|
45
45
|
exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: transparent;\n color: ", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: ", ";\n height: ", ";\n cursor: pointer;\n font: var(--body-semi-bold-14-17);\n white-space: ", ";\n outline: none !important;\n &:hover {\n color: var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"], ["\n background: transparent;\n color: ", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: ", ";\n height: ", ";\n cursor: pointer;\n font: var(--body-semi-bold-14-17);\n white-space: ", ";\n outline: none !important;\n &:hover {\n color: var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; }, function (props) { return props.$hasAutoFlex ? "0" : getTabSize(props.$size).padding; }, function (props) { return getTabSize(props.$size).height; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
|
|
46
46
|
exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: ", ";\n @media only screen and (", ") {\n padding-top: ", ";\n }\n"], ["\n padding-top: ", ";\n @media only screen and (", ") {\n padding-top: ", ";\n }\n"])), function (props) { return getTabSize(props.$size).paddingTop; }, devices_1.devices.lg, function (props) { return getTabSize(props.$size).paddingTop; });
|
|
47
47
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -14,17 +14,20 @@ export interface TabsProps {
|
|
|
14
14
|
size?: SIZES;
|
|
15
15
|
hasAutoFlex?: boolean;
|
|
16
16
|
isHideTabHeaderOnMobile?: boolean;
|
|
17
|
+
tabButtonWidth?: number;
|
|
17
18
|
onChange?: (key: string) => void;
|
|
18
19
|
}
|
|
19
20
|
export interface TabStyledProps {
|
|
20
21
|
$hasAutoFlex?: boolean;
|
|
21
22
|
$isHideTabHeaderOnMobile?: boolean;
|
|
23
|
+
$tabButtonWidth?: number;
|
|
22
24
|
$size?: SIZES;
|
|
23
25
|
}
|
|
24
26
|
export interface TabItemStyledProps {
|
|
25
27
|
$isActive?: boolean;
|
|
26
28
|
$isDisabled?: boolean;
|
|
27
29
|
$hasAutoFlex?: boolean;
|
|
30
|
+
$tabButtonWidth?: number;
|
|
28
31
|
$size?: SIZES;
|
|
29
32
|
}
|
|
30
33
|
export declare const TabsDefault: TabsProps;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, onChange, }: import("..").TabsProps) => React.JSX.Element;
|
|
4
|
+
component: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, tabButtonWidth, onChange, }: import("..").TabsProps) => React.JSX.Element;
|
|
5
5
|
parameters: {
|
|
6
6
|
layout: string;
|
|
7
7
|
};
|
|
@@ -76,3 +76,14 @@ export declare const LargeSize: {
|
|
|
76
76
|
size: string;
|
|
77
77
|
};
|
|
78
78
|
};
|
|
79
|
+
export declare const WithFixedTabWidth: {
|
|
80
|
+
args: {
|
|
81
|
+
tabs: {
|
|
82
|
+
key: string;
|
|
83
|
+
title: string;
|
|
84
|
+
content: React.JSX.Element;
|
|
85
|
+
}[];
|
|
86
|
+
tabButtonWidth: number;
|
|
87
|
+
size: string;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
@@ -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.LargeSize = exports.SmallSize = exports.WithAutoFlex = exports.WithDisabledTab = exports.WithDefaultTab = exports.Default = void 0;
|
|
17
|
+
exports.WithFixedTabWidth = exports.LargeSize = exports.SmallSize = exports.WithAutoFlex = exports.WithDisabledTab = exports.WithDefaultTab = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var Tabs_1 = __importDefault(require("../Tabs"));
|
|
20
20
|
var meta = {
|
|
@@ -92,3 +92,14 @@ exports.LargeSize = {
|
|
|
92
92
|
size: "lg",
|
|
93
93
|
},
|
|
94
94
|
};
|
|
95
|
+
exports.WithFixedTabWidth = {
|
|
96
|
+
args: {
|
|
97
|
+
tabs: [
|
|
98
|
+
{ key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
|
|
99
|
+
{ key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
|
|
100
|
+
{ key: "tab3", title: "Uzun Tab Başlığı", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
|
|
101
|
+
],
|
|
102
|
+
tabButtonWidth: 160,
|
|
103
|
+
size: "md",
|
|
104
|
+
},
|
|
105
|
+
};
|