krl-alfred 2.20.2 → 2.20.4

package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts

@@ -7,7 +7,7 @@ import type { ProductCardVerticalProps } from "../props";
 export declare const allProductCardArgs: ProductCardVerticalProps;
 declare const _default: {
     title: string;
-    component: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, component, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, hasButton, buttonOnClick, buttonText, }: import("../props").ProductCardVertical) => React.JSX.Element>;
+    component: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, component, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasSquareFillImage, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, hasSingleLineDescription, hasButton, buttonOnClick, buttonText, }: import("../props").ProductCardVertical) => React.JSX.Element>;
     tags: string[];
     argTypes: {
         title: {
@@ -61,6 +61,10 @@ declare const _default: {
         hasNewImageType: {
             control: string;
         };
+        hasSquareFillImage: {
+            control: string;
+            description: string;
+        };
         hasOutOfStock: {
             control: string;
         };
@@ -90,6 +94,10 @@ declare const _default: {
         hasImageOffset: {
             control: string;
         };
+        hasSingleLineDescription: {
+            control: string;
+            description: string;
+        };
         hasButton: {
             control: string;
         };
@@ -121,6 +129,7 @@ export declare const Default: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         isShowOldPrice?: boolean;
@@ -130,6 +139,7 @@ export declare const Default: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -153,6 +163,7 @@ export declare const NoDiscount: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         beltBadgeVariant?: string;
@@ -161,6 +172,7 @@ export declare const NoDiscount: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -185,6 +197,7 @@ export declare const OutOfStock: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         isShowOldPrice?: boolean;
         beltBadgeVariant?: string;
         beltBadgeTitle?: string;
@@ -192,6 +205,7 @@ export declare const OutOfStock: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -215,6 +229,7 @@ export declare const WithCustomBadge: {
         isResponsive?: boolean;
         image?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         isShowOldPrice?: boolean;
         beltBadgeVariant?: string;
@@ -223,6 +238,7 @@ export declare const WithCustomBadge: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -246,6 +262,7 @@ export declare const ResponsiveWithNewImageType: {
         discountRate?: number;
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         isShowOldPrice?: boolean;
@@ -254,6 +271,7 @@ export declare const ResponsiveWithNewImageType: {
         imageInfoText?: string;
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -278,6 +296,7 @@ export declare const DarkImageInfoText: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         isShowOldPrice?: boolean;
@@ -285,6 +304,7 @@ export declare const DarkImageInfoText: {
         beltBadgeTitle?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -308,6 +328,7 @@ export declare const WithoutBeltBadge: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         isShowOldPrice?: boolean;
         beltBadgeVariant?: string;
@@ -316,6 +337,7 @@ export declare const WithoutBeltBadge: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -339,6 +361,7 @@ export declare const WithoutImageInfoText: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         isShowOldPrice?: boolean;
@@ -347,6 +370,7 @@ export declare const WithoutImageInfoText: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -372,12 +396,14 @@ export declare const Minimal: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         beltBadgeVariant?: string;
         beltBadgeTitle?: string;
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -401,6 +427,40 @@ export declare const WithoutImageOffset: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasSingleLineDescription?: boolean;
+        hasButton?: boolean;
+        buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+        buttonText?: string;
+    };
+};
+export declare const SingleLineDescription: {
+    args: {
+        hasSingleLineDescription: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         isShowOldPrice?: boolean;
@@ -409,6 +469,40 @@ export declare const WithoutImageOffset: {
         imageInfoText?: string;
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
+        hasButton?: boolean;
+        buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+        buttonText?: string;
+    };
+};
+export declare const SquareFillImage: {
+    args: {
+        hasSquareFillImage: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -432,6 +526,7 @@ export declare const WithoutOldPrice: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         beltBadgeVariant?: string;
@@ -440,6 +535,7 @@ export declare const WithoutOldPrice: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -463,6 +559,7 @@ export declare const WithoutOldPriceUnderline: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         isShowOldPrice?: boolean;
@@ -471,6 +568,7 @@ export declare const WithoutOldPriceUnderline: {
         imageInfoText?: string;
         imageInfoTextVariant?: string;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         hasButton?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
         buttonText?: string;
@@ -499,6 +597,7 @@ export declare const WithButton: {
         image?: React.ReactNode;
         customBadge?: React.ReactNode;
         hasNewImageType?: boolean;
+        hasSquareFillImage?: boolean;
         hasOutOfStock?: boolean;
         hasBeltBadge?: boolean;
         isShowOldPrice?: boolean;
@@ -508,6 +607,7 @@ export declare const WithButton: {
         imageInfoTextVariant?: string;
         isOldPricePeriodUnderline?: boolean;
         hasImageOffset?: boolean;
+        hasSingleLineDescription?: boolean;
         buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
     };
 };

package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithButton = exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = exports.allProductCardArgs = void 0;
+exports.WithButton = exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.SquareFillImage = exports.SingleLineDescription = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = exports.allProductCardArgs = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardVertical_1 = __importDefault(require("../ProductCardVertical"));
 var props_1 = require("../props");
@@ -88,6 +88,10 @@ exports.default = {
         hasCustomBadge: { control: "boolean" },
         customBadge: { control: false },
         hasNewImageType: { control: "boolean" },
+        hasSquareFillImage: {
+            control: "boolean",
+            description: "Görseli 1/1 oranında wrapper'ı tamamen doldurur",
+        },
         hasOutOfStock: { control: "boolean" },
         hasBeltBadge: { control: "boolean" },
         beltBadgeVariant: {
@@ -103,6 +107,10 @@ exports.default = {
         isShowOldPrice: { control: "boolean" },
         isOldPricePeriodUnderline: { control: "boolean" },
         hasImageOffset: { control: "boolean" },
+        hasSingleLineDescription: {
+            control: "boolean",
+            description: "Açıklamayı tek satırda gösterir; alt boşluk 1rem olur",
+        },
         hasButton: { control: "boolean" },
         buttonText: { control: "text" },
         buttonOnClick: { action: "buttonOnClick" },
@@ -140,6 +148,12 @@ exports.Minimal = {
 exports.WithoutImageOffset = {
     args: __assign(__assign({}, exports.allProductCardArgs), { hasImageOffset: false }),
 };
+exports.SingleLineDescription = {
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasSingleLineDescription: true }),
+};
+exports.SquareFillImage = {
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasSquareFillImage: true }),
+};
 exports.WithoutOldPrice = {
     args: __assign(__assign({}, exports.allProductCardArgs), { isShowOldPrice: false, oldPrice: null }),
 };

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ShoppingCartProductProps } from "./props";
-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;
+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;
 export default ShoppingCartProduct;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -23,8 +23,9 @@ var Tooltip_1 = __importDefault(require("../Tooltip"));
 var Loader_1 = __importDefault(require("../Loader"));
 var QuantitySelector_1 = __importDefault(require("../QuantitySelector"));
 var QuantitySelector_styled_1 = require("../QuantitySelector/QuantitySelector.styled");
+var Badges_1 = __importDefault(require("../Badges"));
 var ShoppingCartProduct = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.ShoppingCartProductDefault.title : _b, _c = _a.priceSm, priceSm = _c === void 0 ? props_1.ShoppingCartProductDefault.priceSm : _c, _d = _a.price, price = _d === void 0 ? props_1.ShoppingCartProductDefault.price : _d, _e = _a.period, period = _e === void 0 ? props_1.ShoppingCartProductDefault.period : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ShoppingCartProductDefault.oldPrice : _f, _g = _a.oldPriceSm, oldPriceSm = _g === void 0 ? props_1.ShoppingCartProductDefault.oldPriceSm : _g, _h = _a.oldPricePeriod, oldPricePeriod = _h === void 0 ? props_1.ShoppingCartProductDefault.oldPricePeriod : _h, _j = _a.discountRate, discountRate = _j === void 0 ? props_1.ShoppingCartProductDefault.discountRate : _j, _k = _a.slug, slug = _k === void 0 ? props_1.ShoppingCartProductDefault.slug : _k, _l = _a.image, image = _l === void 0 ? props_1.ShoppingCartProductDefault.image : _l, _m = _a.component, component = _m === void 0 ? props_1.ShoppingCartProductDefault.component : _m, _o = _a.hasRemove, hasRemove = _o === void 0 ? props_1.ShoppingCartProductDefault.hasRemove : _o, _p = _a.hasInsurance, hasInsurance = _p === void 0 ? props_1.ShoppingCartProductDefault.hasInsurance : _p, _q = _a.insuranceType, insuranceType = _q === void 0 ? props_1.ShoppingCartProductDefault.insuranceType : _q, _r = _a.insuranceText, insuranceText = _r === void 0 ? props_1.ShoppingCartProductDefault.insuranceText : _r, _s = _a.insurancePrice, insurancePrice = _s === void 0 ? props_1.ShoppingCartProductDefault.insurancePrice : _s, _t = _a.insuranceQuantity, insuranceQuantity = _t === void 0 ? props_1.ShoppingCartProductDefault.insuranceQuantity : _t, _u = _a.insuranceOption1Title, insuranceOption1Title = _u === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Title : _u, _v = _a.insuranceOption1Description, insuranceOption1Description = _v === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Description : _v, _w = _a.insuranceOption1Price, insuranceOption1Price = _w === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Price : _w, _x = _a.insuranceOption1PricePeriod, insuranceOption1PricePeriod = _x === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1PricePeriod : _x, _y = _a.hasInsuranceOption1PriceLoading, hasInsuranceOption1PriceLoading = _y === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceOption1PriceLoading : _y, _z = _a.insuranceOption1TooltipText, insuranceOption1TooltipText = _z === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipText : _z, _0 = _a.insuranceOption2Title, insuranceOption2Title = _0 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Title : _0, _1 = _a.insuranceOption2Description, insuranceOption2Description = _1 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Description : _1, _2 = _a.selectedInsuranceOption, selectedInsuranceOption = _2 === void 0 ? props_1.ShoppingCartProductDefault.selectedInsuranceOption : _2, _3 = _a.onInsuranceOptionSelect, onInsuranceOptionSelect = _3 === void 0 ? props_1.ShoppingCartProductDefault.onInsuranceOptionSelect : _3, _4 = _a.deliveryText, deliveryText = _4 === void 0 ? props_1.ShoppingCartProductDefault.deliveryText : _4, _5 = _a.quantity, quantity = _5 === void 0 ? props_1.ShoppingCartProductDefault.quantity : _5, _6 = _a.hasLoading, hasLoading = _6 === void 0 ? props_1.ShoppingCartProductDefault.hasLoading : _6, _7 = _a.deliveryDangerText, deliveryDangerText = _7 === void 0 ? props_1.ShoppingCartProductDefault.deliveryDangerText : _7, _8 = _a.hasError, hasError = _8 === void 0 ? props_1.ShoppingCartProductDefault.hasError : _8, _9 = _a.errorText, errorText = _9 === void 0 ? props_1.ShoppingCartProductDefault.errorText : _9, _10 = _a.hasInsuranceActions, hasInsuranceActions = _10 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceActions : _10, _11 = _a.hasInsuranceTooltip, hasInsuranceTooltip = _11 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltip : _11, _12 = _a.hasDisableActions, hasDisableActions = _12 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableActions : _12, _13 = _a.hasInsuranceTooltipClickAction, hasInsuranceTooltipClickAction = _13 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltipClickAction : _13, _14 = _a.insuranceTooltipText, insuranceTooltipText = _14 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipText : _14, _15 = _a.insuranceTooltipWidth, insuranceTooltipWidth = _15 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipWidth : _15, _16 = _a.onRemove, onRemove = _16 === void 0 ? props_1.ShoppingCartProductDefault.onRemove : _16, _17 = _a.onIncrement, onIncrement = _17 === void 0 ? props_1.ShoppingCartProductDefault.onIncrement : _17, _18 = _a.onDecrement, onDecrement = _18 === void 0 ? props_1.ShoppingCartProductDefault.onDecrement : _18, _19 = _a.toggleInsurance, toggleInsurance = _19 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsurance : _19, _20 = _a.toggleInsuranceLogo, toggleInsuranceLogo = _20 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsuranceLogo : _20, _21 = _a.hasInsurancePriceAdded, hasInsurancePriceAdded = _21 === void 0 ? props_1.ShoppingCartProductDefault.hasInsurancePriceAdded : _21, _22 = _a.hasInsuranceLoading, hasInsuranceLoading = _22 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceLoading : _22, _23 = _a.hasDisableIncrement, hasDisableIncrement = _23 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableIncrement : _23, _24 = _a.insuranceOption1TooltipTitle, insuranceOption1TooltipTitle = _24 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipTitle : _24;
+    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;
     var tooltipWrapperRef = (0, react_1.useRef)(null);
     var getScrollableParent = function (element) {
         if (!element)
@@ -50,7 +51,9 @@ var ShoppingCartProduct = function (_a) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
     };
-    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": discountRate, "$hasDisableActions": hasDisableActions, "$hasInsurance": !hasLoading && insuranceType === 1 && toggleInsurance, "$insuranceType": insuranceType }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)("small", { children: oldPriceSm })] })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [deliveryDangerText &&
-                                            (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 }) })] }))] }))] })));
+    var showUpfrontProductPriceLoading = insuranceType === 3 && upfrontAddonChecked && hasUpfrontAddonPriceLoading;
+    var hasUpfrontAddonDiscount = Boolean(upfrontAddonOldPrice);
+    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 &&
+                                            (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 })] }))] })) }))] })) }))] })));
 };
 exports.default = ShoppingCartProduct;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts

@@ -14,4 +14,13 @@ export declare const InsuranceType2Card: import("styled-components/dist/types").
     $selected?: boolean;
 }, never>>> & string;
 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;
+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;
+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;
+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;
+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;
+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;
+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;
+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;
+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;
+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;
 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;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShoppingCartProductStyled = exports.InsuranceType2Wrapper = exports.InsuranceType2Card = exports.InsuranceType2PricePeriod = exports.InsuranceType2PriceValue = exports.InsuranceType2Price = exports.InsuranceType2Description = exports.InsuranceType2Content = exports.InsuranceType2Title = exports.InsuranceType2Indicator = exports.InsuranceType2Header = void 0;
+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;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
@@ -23,5 +23,14 @@ exports.InsuranceType2PriceValue = styled_components_1.default.span(templateObje
 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"])));
 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" })));
 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"])));
-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);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+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" })));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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" })));
+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"])));
+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);
+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;

package/dist/components/ShoppingCartProduct/props.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type InsuranceType = 1 | 2;
+export type InsuranceType = 1 | 2 | 3;
 export interface ShoppingCartProduct {
     title?: string;
     priceSm?: string;
@@ -32,6 +32,15 @@ export interface ShoppingCartProduct {
     /** Type 2: Selected option (1 or 2) */
     selectedInsuranceOption?: 1 | 2;
     onInsuranceOptionSelect?: (option: 1 | 2) => void;
+    /** Type 3: Pay upfront addon */
+    upfrontAddonTitle?: string;
+    upfrontAddonChecked?: boolean;
+    onUpfrontAddonChange?: () => void;
+    upfrontAddonDiscountBadge?: string;
+    upfrontAddonSummaryText?: string;
+    upfrontAddonOldPrice?: string;
+    upfrontAddonPrice?: string;
+    hasUpfrontAddonPriceLoading?: boolean;
     deliveryText?: string;
     quantity?: string;
     hasLoading?: boolean;

package/dist/components/ShoppingCartProduct/props.js

@@ -29,6 +29,14 @@ exports.ShoppingCartProductDefault = {
     insuranceOption2Description: "Hasar güvencesi eklemediğinde yalnızca 5.000 TL'ye kadar olan hasarlar için %100 hasar güvencesi bulunur.",
     selectedInsuranceOption: 1,
     onInsuranceOptionSelect: null,
+    upfrontAddonTitle: "Tek seferde öde",
+    upfrontAddonChecked: false,
+    onUpfrontAddonChange: null,
+    upfrontAddonDiscountBadge: null,
+    upfrontAddonSummaryText: null,
+    upfrontAddonOldPrice: null,
+    upfrontAddonPrice: null,
+    hasUpfrontAddonPriceLoading: false,
     deliveryText: null,
     quantity: null,
     hasLoading: false,