krl-alfred 1.81.7 → 1.81.9
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.js +6 -6
- package/dist/components/ActionButton/props.js +2 -1
- package/dist/components/ActionButton/stories/ActionButton.stories.js +1 -0
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +2 -2
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +2 -2
- package/dist/components/ShoppingCartProduct/props.js +3 -0
- package/package.json +1 -1
|
@@ -33,12 +33,12 @@ var Button_1 = __importDefault(require("../Button"));
|
|
|
33
33
|
var date_fns_1 = require("date-fns");
|
|
34
34
|
var react_i18next_1 = require("react-i18next");
|
|
35
35
|
var ActionButton = function (_a) {
|
|
36
|
-
var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.img, img = _e === void 0 ? props_1.ActionButtonDefault.img : _e, _f = _a.isMonthVisible, isMonthVisible = _f === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _f, _g = _a.hasTimer, hasTimer = _g === void 0 ? props_1.ActionButtonDefault.hasTimer : _g, other = __rest(_a, ["width", "title", "date", "img", "isMonthVisible", "hasTimer"]);
|
|
36
|
+
var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.img, img = _e === void 0 ? props_1.ActionButtonDefault.img : _e, _f = _a.isMonthVisible, isMonthVisible = _f === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _f, _g = _a.hasTimer, hasTimer = _g === void 0 ? props_1.ActionButtonDefault.hasTimer : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.ActionButtonDefault.isLoading : _h, other = __rest(_a, ["width", "title", "date", "img", "isMonthVisible", "hasTimer", "isLoading"]);
|
|
37
37
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
38
|
+
var _j = (0, react_1.useState)(0), months = _j[0], setMonths = _j[1];
|
|
39
|
+
var _k = (0, react_1.useState)(0), days = _k[0], setDays = _k[1];
|
|
40
|
+
var _l = (0, react_1.useState)(0), minutes = _l[0], setMinutes = _l[1];
|
|
41
|
+
var _m = (0, react_1.useState)(0), hours = _m[0], setHours = _m[1];
|
|
42
42
|
//const [secounds,setSecounds] = useState(0);
|
|
43
43
|
var deadline = new Date(date).getTime();
|
|
44
44
|
var count = function () {
|
|
@@ -59,6 +59,6 @@ var ActionButton = function (_a) {
|
|
|
59
59
|
(0, react_1.useEffect)(function () {
|
|
60
60
|
count();
|
|
61
61
|
}, [date]);
|
|
62
|
-
return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: img })), (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" }))] })), hasTimer && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" })] })] })))] })));
|
|
62
|
+
return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: img })), (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" }))] })), hasTimer && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading })] })] })))] })));
|
|
63
63
|
};
|
|
64
64
|
exports.default = ActionButton;
|
|
@@ -28,5 +28,6 @@ exports.Default = {
|
|
|
28
28
|
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/actionTimeCircle.svg", height: "45px", width: "45px", alt: "test" }),
|
|
29
29
|
onClick: function (e) { return console.log(e); },
|
|
30
30
|
isMonthVisible: false,
|
|
31
|
+
isLoading: false,
|
|
31
32
|
},
|
|
32
33
|
};
|
|
@@ -38,6 +38,6 @@ var Children = function (props) {
|
|
|
38
38
|
};
|
|
39
39
|
var Button = (0, react_1.forwardRef)(function (props, ref) {
|
|
40
40
|
var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, children = props.children, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconSize", "tooltip"]);
|
|
41
|
-
return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: "
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
|
|
42
42
|
});
|
|
43
43
|
exports.default = Button;
|
|
@@ -21,12 +21,12 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
21
21
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
22
22
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
23
23
|
var ShoppingCartProduct = function (_a) {
|
|
24
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ShoppingCartProductDefault.title : _b, _c = _a.priceSm, priceSm = _c === void 0 ? props_1.ShoppingCartProductDefault.priceSm : _c, _d = _a.price, price = _d === void 0 ? props_1.ShoppingCartProductDefault.price : _d, _e = _a.period, period = _e === void 0 ? props_1.ShoppingCartProductDefault.period : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ShoppingCartProductDefault.oldPrice : _f, _g = _a.oldPriceSm, oldPriceSm = _g === void 0 ? props_1.ShoppingCartProductDefault.oldPriceSm : _g, _h = _a.oldPricePeriod, oldPricePeriod = _h === void 0 ? props_1.ShoppingCartProductDefault.oldPricePeriod : _h, _j = _a.discountRate, discountRate = _j === void 0 ? props_1.ShoppingCartProductDefault.discountRate : _j, _k = _a.slug, slug = _k === void 0 ? props_1.ShoppingCartProductDefault.slug : _k, _l = _a.image, image = _l === void 0 ? props_1.ShoppingCartProductDefault.image : _l, _m = _a.component, component = _m === void 0 ? props_1.ShoppingCartProductDefault.component : _m, _o = _a.hasRemove, hasRemove = _o === void 0 ? props_1.ShoppingCartProductDefault.hasRemove : _o, _p = _a.hasInsurance, hasInsurance = _p === void 0 ? props_1.ShoppingCartProductDefault.hasInsurance : _p, _q = _a.insuranceText, insuranceText = _q === void 0 ? props_1.ShoppingCartProductDefault.insuranceText : _q, _r = _a.insurancePrice, insurancePrice = _r === void 0 ? props_1.ShoppingCartProductDefault.insurancePrice : _r, _s = _a.insuranceQuantity, insuranceQuantity = _s === void 0 ? props_1.ShoppingCartProductDefault.insuranceQuantity : _s, _t = _a.deliveryText, deliveryText = _t === void 0 ? props_1.ShoppingCartProductDefault.deliveryText : _t, _u = _a.quantity, quantity = _u === void 0 ? props_1.ShoppingCartProductDefault.quantity : _u, _v = _a.hasLoading, hasLoading = _v === void 0 ? props_1.ShoppingCartProductDefault.hasLoading : _v, _w = _a.deliveryDangerText, deliveryDangerText = _w === void 0 ? props_1.ShoppingCartProductDefault.deliveryDangerText : _w, _x = _a.hasError, hasError = _x === void 0 ? props_1.ShoppingCartProductDefault.hasError : _x, _y = _a.errorText, errorText = _y === void 0 ? props_1.ShoppingCartProductDefault.errorText : _y, _z = _a.hasInsuranceActions, hasInsuranceActions = _z === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceActions : _z, _0 = _a.hasInsuranceTooltip, hasInsuranceTooltip = _0 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltip : _0, _1 = _a.hasDisableActions, hasDisableActions = _1 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableActions : _1, _2 = _a.hasInsuranceTooltipClickAction, hasInsuranceTooltipClickAction = _2 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltipClickAction : _2, _3 = _a.insuranceTooltipText, insuranceTooltipText = _3 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipText : _3, _4 = _a.insuranceTooltipWidth, insuranceTooltipWidth = _4 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipWidth : _4, _5 = _a.onRemove, onRemove = _5 === void 0 ? props_1.ShoppingCartProductDefault.onRemove : _5, _6 = _a.onIncrement, onIncrement = _6 === void 0 ? props_1.ShoppingCartProductDefault.onIncrement : _6, _7 = _a.onDecrement, onDecrement = _7 === void 0 ? props_1.ShoppingCartProductDefault.onDecrement : _7, _8 = _a.toggleInsurance, toggleInsurance = _8 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsurance : _8;
|
|
24
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ShoppingCartProductDefault.title : _b, _c = _a.priceSm, priceSm = _c === void 0 ? props_1.ShoppingCartProductDefault.priceSm : _c, _d = _a.price, price = _d === void 0 ? props_1.ShoppingCartProductDefault.price : _d, _e = _a.period, period = _e === void 0 ? props_1.ShoppingCartProductDefault.period : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ShoppingCartProductDefault.oldPrice : _f, _g = _a.oldPriceSm, oldPriceSm = _g === void 0 ? props_1.ShoppingCartProductDefault.oldPriceSm : _g, _h = _a.oldPricePeriod, oldPricePeriod = _h === void 0 ? props_1.ShoppingCartProductDefault.oldPricePeriod : _h, _j = _a.discountRate, discountRate = _j === void 0 ? props_1.ShoppingCartProductDefault.discountRate : _j, _k = _a.slug, slug = _k === void 0 ? props_1.ShoppingCartProductDefault.slug : _k, _l = _a.image, image = _l === void 0 ? props_1.ShoppingCartProductDefault.image : _l, _m = _a.component, component = _m === void 0 ? props_1.ShoppingCartProductDefault.component : _m, _o = _a.hasRemove, hasRemove = _o === void 0 ? props_1.ShoppingCartProductDefault.hasRemove : _o, _p = _a.hasInsurance, hasInsurance = _p === void 0 ? props_1.ShoppingCartProductDefault.hasInsurance : _p, _q = _a.insuranceText, insuranceText = _q === void 0 ? props_1.ShoppingCartProductDefault.insuranceText : _q, _r = _a.insurancePrice, insurancePrice = _r === void 0 ? props_1.ShoppingCartProductDefault.insurancePrice : _r, _s = _a.insuranceQuantity, insuranceQuantity = _s === void 0 ? props_1.ShoppingCartProductDefault.insuranceQuantity : _s, _t = _a.deliveryText, deliveryText = _t === void 0 ? props_1.ShoppingCartProductDefault.deliveryText : _t, _u = _a.quantity, quantity = _u === void 0 ? props_1.ShoppingCartProductDefault.quantity : _u, _v = _a.hasLoading, hasLoading = _v === void 0 ? props_1.ShoppingCartProductDefault.hasLoading : _v, _w = _a.deliveryDangerText, deliveryDangerText = _w === void 0 ? props_1.ShoppingCartProductDefault.deliveryDangerText : _w, _x = _a.hasError, hasError = _x === void 0 ? props_1.ShoppingCartProductDefault.hasError : _x, _y = _a.errorText, errorText = _y === void 0 ? props_1.ShoppingCartProductDefault.errorText : _y, _z = _a.hasInsuranceActions, hasInsuranceActions = _z === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceActions : _z, _0 = _a.hasInsuranceTooltip, hasInsuranceTooltip = _0 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltip : _0, _1 = _a.hasDisableActions, hasDisableActions = _1 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableActions : _1, _2 = _a.hasInsuranceTooltipClickAction, hasInsuranceTooltipClickAction = _2 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltipClickAction : _2, _3 = _a.insuranceTooltipText, insuranceTooltipText = _3 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipText : _3, _4 = _a.insuranceTooltipWidth, insuranceTooltipWidth = _4 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipWidth : _4, _5 = _a.onRemove, onRemove = _5 === void 0 ? props_1.ShoppingCartProductDefault.onRemove : _5, _6 = _a.onIncrement, onIncrement = _6 === void 0 ? props_1.ShoppingCartProductDefault.onIncrement : _6, _7 = _a.onDecrement, onDecrement = _7 === void 0 ? props_1.ShoppingCartProductDefault.onDecrement : _7, _8 = _a.toggleInsurance, toggleInsurance = _8 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsurance : _8, _9 = _a.toggleInsuranceLogo, toggleInsuranceLogo = _9 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsuranceLogo : _9, _10 = _a.hasInsurancePriceAdded, hasInsurancePriceAdded = _10 === void 0 ? props_1.ShoppingCartProductDefault.hasInsurancePriceAdded : _10, _11 = _a.hasInsuranceLoading, hasInsuranceLoading = _11 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceLoading : _11;
|
|
25
25
|
var LinkComponent = function (_a) {
|
|
26
26
|
var item = _a.item, children = _a.children;
|
|
27
27
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
28
28
|
};
|
|
29
29
|
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": discountRate, "$hasDisableActions": hasDisableActions, "$hasInsurance": !hasLoading && toggleInsurance }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)("small", { children: oldPriceSm })] })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [deliveryDangerText &&
|
|
30
|
-
(0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading || hasError, onClick: onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && (hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) }))))] }))] })), hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({
|
|
30
|
+
(0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading || hasError, onClick: onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && (hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) }))))] }))] })), hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg", onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !hasLoading ? toggleInsurance : undefined, className: "insuranceContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [insuranceText, insurancePrice && (0, jsx_runtime_1.jsx)("p", __assign({ className: "price" }, { children: hasInsuranceLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: insuranceQuantity }))] }) }))] })), hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) })))] }))] })))] })));
|
|
31
31
|
};
|
|
32
32
|
exports.default = ShoppingCartProduct;
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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 .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 &:hover{\n ~ .text{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n }\n .text{\n padding-right: 0.5rem;\n a{\n &:hover{\n .productCardTitle{\n color: var(--primary-hover);\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 .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 .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 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 small {\n font: var(--caption-bold-12-15);\n }\n }\n .period {\n font:var(--caption-regular-12-15);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\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 &: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 .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 .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n b{\n span{\n font-weight: 400;\n }\n }\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\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 .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 &:hover{\n ~ .text{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n }\n .text{\n padding-right: 0.5rem;\n a{\n &:hover{\n .productCardTitle{\n color: var(--primary-hover);\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 .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 .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 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 small {\n font: var(--caption-bold-12-15);\n }\n }\n .period {\n font:var(--caption-regular-12-15);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\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 &: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 .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 .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n b{\n span{\n font-weight: 400;\n }\n }\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
|
|
13
|
-
exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
12
|
+
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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 .actions {\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n\n .quantity {\n color: ", ";\n font: var(--body-extra-bold-13-16);\n\n > div {\n margin: 0 auto;\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 &:hover{\n button{\n background-color: var(--primary);\n color: white;\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 .actions {\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n\n .quantity {\n color: ", ";\n font: var(--body-extra-bold-13-16);\n\n > div {\n margin: 0 auto;\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 &:hover{\n button{\n background-color: var(--primary);\n color: white;\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.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
|
|
13
|
+
exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color: var(--primary);\n\n ", "\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled {\n cursor: no-drop;\n }\n\n .popup {\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font: var(--caption-semi-bold-12-15);\n\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n"], ["\n border: 0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color: var(--primary);\n\n ", "\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled {\n cursor: no-drop;\n }\n\n .popup {\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font: var(--caption-semi-bold-12-15);\n\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n"])), function (props) { return props.$hasShadow ? "\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n " : ""; });
|
|
14
14
|
var templateObject_1, templateObject_2;
|