krl-alfred 2.20.2 → 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/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/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ShoppingCartProductProps } from "./props";
|
|
3
|
-
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) => React.JSX.Element;
|
|
3
|
+
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, upfrontAddonTitle, upfrontAddonChecked, onUpfrontAddonChange, upfrontAddonDiscountBadge, upfrontAddonSummaryText, upfrontAddonOldPrice, upfrontAddonPrice, hasUpfrontAddonPriceLoading, deliveryText, quantity, hasLoading, deliveryDangerText, hasError, errorText, hasInsuranceActions, hasInsuranceTooltip, hasDisableActions, hasInsuranceTooltipClickAction, insuranceTooltipText, insuranceTooltipWidth, onRemove, onIncrement, onDecrement, toggleInsurance, toggleInsuranceLogo, hasInsurancePriceAdded, hasInsuranceLoading, hasDisableIncrement, insuranceOption1TooltipTitle, }: ShoppingCartProductProps) => React.JSX.Element;
|
|
4
4
|
export default ShoppingCartProduct;
|
|
@@ -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
|
+
};
|