krl-alfred 2.24.10 → 2.24.12

package/dist/components/AddressCard/AddressCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { AddressCardProps } from "./props";
-declare const AddressCard: ({ title, description, content, handleUpdate, onChange, checked, isShowEditBtn, id, minHeight, name, value, disabled, hasBlockDescription }: AddressCardProps) => React.JSX.Element;
+declare const AddressCard: ({ title, description, content, handleUpdate, onChange, checked, isShowEditBtn, id, minHeight, name, value, disabled, hasBlockDescription, notice }: AddressCardProps) => React.JSX.Element;
 export default AddressCard;

package/dist/components/AddressCard/AddressCard.js

@@ -21,8 +21,8 @@ var RadioButton_1 = __importDefault(require("../RadioButton"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var react_i18next_1 = require("react-i18next");
 var AddressCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.AddressCardDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.AddressCardDefault.description : _c, _d = _a.content, content = _d === void 0 ? props_1.AddressCardDefault.content : _d, _e = _a.handleUpdate, handleUpdate = _e === void 0 ? props_1.AddressCardDefault.handleUpdate : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.AddressCardDefault.onChange : _f, _g = _a.checked, checked = _g === void 0 ? props_1.AddressCardDefault.checked : _g, _h = _a.isShowEditBtn, isShowEditBtn = _h === void 0 ? props_1.AddressCardDefault.isShowEditBtn : _h, _j = _a.id, id = _j === void 0 ? props_1.AddressCardDefault.id : _j, _k = _a.minHeight, minHeight = _k === void 0 ? props_1.AddressCardDefault.minHeight : _k, _l = _a.name, name = _l === void 0 ? props_1.AddressCardDefault.name : _l, _m = _a.value, value = _m === void 0 ? props_1.AddressCardDefault.value : _m, _o = _a.disabled, disabled = _o === void 0 ? props_1.AddressCardDefault.disabled : _o, _p = _a.hasBlockDescription, hasBlockDescription = _p === void 0 ? props_1.AddressCardDefault.hasBlockDescription : _p;
+    var _b = _a.title, title = _b === void 0 ? props_1.AddressCardDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.AddressCardDefault.description : _c, _d = _a.content, content = _d === void 0 ? props_1.AddressCardDefault.content : _d, _e = _a.handleUpdate, handleUpdate = _e === void 0 ? props_1.AddressCardDefault.handleUpdate : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.AddressCardDefault.onChange : _f, _g = _a.checked, checked = _g === void 0 ? props_1.AddressCardDefault.checked : _g, _h = _a.isShowEditBtn, isShowEditBtn = _h === void 0 ? props_1.AddressCardDefault.isShowEditBtn : _h, _j = _a.id, id = _j === void 0 ? props_1.AddressCardDefault.id : _j, _k = _a.minHeight, minHeight = _k === void 0 ? props_1.AddressCardDefault.minHeight : _k, _l = _a.name, name = _l === void 0 ? props_1.AddressCardDefault.name : _l, _m = _a.value, value = _m === void 0 ? props_1.AddressCardDefault.value : _m, _o = _a.disabled, disabled = _o === void 0 ? props_1.AddressCardDefault.disabled : _o, _p = _a.hasBlockDescription, hasBlockDescription = _p === void 0 ? props_1.AddressCardDefault.hasBlockDescription : _p, _q = _a.notice, notice = _q === void 0 ? props_1.AddressCardDefault.notice : _q;
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: id, checked: checked, "$minHeight": minHeight, "$hasBlockDescription": hasBlockDescription }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: id, onChange: onChange, checked: checked, isWrapText: false, layout: "basic", size: "small", label: title, name: name, value: value, disabled: disabled, textSize: "large" }), isShowEditBtn && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleUpdate }, { children: t("edit") })) })))] })), description && (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: description })), checked && content != null && ((0, jsx_runtime_1.jsx)(AddressCard_styled_1.Content, { children: content }))] })));
+    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: id, checked: checked, "$minHeight": minHeight, "$hasBlockDescription": hasBlockDescription, "$disabled": disabled, "$hasNotice": Boolean(notice) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: id, onChange: onChange, checked: checked, isWrapText: false, layout: "basic", size: "small", label: title, name: name, value: value, disabled: disabled, textSize: "large" }), isShowEditBtn && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleUpdate }, { children: t("edit") })) })))] })), (description || notice) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "description" }, { children: [description, notice ? (0, jsx_runtime_1.jsx)(AddressCard_styled_1.Notice, { children: notice }) : null] }))), checked && content != null && ((0, jsx_runtime_1.jsx)(AddressCard_styled_1.Content, { children: content }))] })));
 };
 exports.default = AddressCard;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { AddressCardStyledProps } from "./props";
 export declare const AddressCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof AddressCardStyledProps> & AddressCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof AddressCardStyledProps> & AddressCardStyledProps, never>>> & string;
+export declare const Notice: 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 Content: 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;

package/dist/components/AddressCard/AddressCard.styled.js

@@ -7,9 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = exports.AddressCardStyled = void 0;
+exports.Content = exports.Notice = exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--text);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--text);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
-exports.Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
-var templateObject_1, templateObject_2;
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: ", ";\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: ", ";\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n        ", "\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: ", ";\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: ", ";\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n        ", "\n    }\n"])), function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.checked ? '1' : '0'; }, function (props) { return props.$disabled && "\n        .head > label:first-child,\n        .head > label:first-child * {\n            color: var(--text-disabled);\n        }\n    "; }, function (props) { return !props.checked && !props.$disabled && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$disabled ? 'var(--text-disabled)' : 'var(--text)'; }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'unset' : 'middle'; }, function (props) { return props.$hasNotice && "\n            height: auto;\n            overflow: visible;\n        "; });
+exports.Notice = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    margin-top: 0.25rem;\n    font: var(--body-medium-13-16);\n    color: var(--text-soft);\n"], ["\n    display: block;\n    margin-top: 0.25rem;\n    font: var(--body-medium-13-16);\n    color: var(--text-soft);\n"])));
+exports.Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/AddressCard/AddressCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AddressCard/AddressCard.test.js

@@ -0,0 +1,148 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var AddressCard_1 = __importDefault(require("./AddressCard"));
+var props_1 = require("./props");
+jest.mock('react-i18next', function () { return ({
+    useTranslation: function () { return ({
+        t: function (key) { return key; },
+    }); },
+}); });
+var renderCard = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, props_1.AddressCardDefault, { id: "address-1", name: "address", value: "home", title: "Ev", description: "Ba\u011Fdat Cad. No:12", onChange: jest.fn(), handleUpdate: jest.fn() }, props)));
+};
+describe('AddressCard', function () {
+    it('renders title and description', function () {
+        renderCard();
+        expect(react_1.screen.getByText('Ev')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Bağdat Cad. No:12')).toBeInTheDocument();
+    });
+    it('calls onChange when the radio is selected', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    renderCard({ onChange: onChange });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('radio'))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls handleUpdate when edit is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handleUpdate;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handleUpdate = jest.fn();
+                    renderCard({ handleUpdate: handleUpdate });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByText('edit'))];
+                case 1:
+                    _a.sent();
+                    expect(handleUpdate).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('shows extra content only when checked', function () {
+        var rerender = renderCard({ checked: false, content: (0, jsx_runtime_1.jsx)("span", { children: "Ek i\u00E7erik" }) }).rerender;
+        expect(react_1.screen.queryByText('Ek içerik')).not.toBeInTheDocument();
+        rerender((0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, props_1.AddressCardDefault, { id: "address-1", title: "Ev", checked: true, content: (0, jsx_runtime_1.jsx)("span", { children: "Ek i\u00E7erik" }) })));
+        expect(react_1.screen.getByText('Ek içerik')).toBeInTheDocument();
+    });
+    it('does not call onChange when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    renderCard({ disabled: true, onChange: onChange });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('radio'))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('dims the title and address when disabled', function () {
+        renderCard({ disabled: true });
+        expect(react_1.screen.getByText('Ev')).toHaveStyle({ color: 'var(--text-disabled)' });
+        expect(react_1.screen.getByText('Bağdat Cad. No:12')).toHaveStyle({ color: 'var(--text-disabled)' });
+    });
+    it('renders the unavailable notice under the address', function () {
+        var container = renderCard({
+            disabled: true,
+            notice: 'Bu bölgeye teslimat yapılmıyor',
+        }).container;
+        var notice = react_1.screen.getByText('Bu bölgeye teslimat yapılmıyor');
+        expect(notice).toHaveStyle({ color: 'var(--text-soft)' });
+        expect(container.firstChild).toHaveStyle({ cursor: 'not-allowed' });
+    });
+    it('renders unsafe title, description and notice as text', function () {
+        var payload = '<script>alert(1)</script>';
+        var container = renderCard({
+            title: payload,
+            description: payload,
+            notice: payload,
+        }).container;
+        expect(container.querySelector('script')).not.toBeInTheDocument();
+        expect(container.textContent).toContain(payload);
+    });
+});

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

@@ -13,11 +13,15 @@ export interface AddressCard {
     value?: string;
     disabled?: boolean;
     hasBlockDescription?: boolean;
+    /** Adres satırının altında, örn. teslimat yapılamayan bölge notu. */
+    notice?: string;
 }
 export interface AddressCardStyledProps {
     checked?: boolean;
     $minHeight?: string;
     $hasBlockDescription?: boolean;
+    $disabled?: boolean;
+    $hasNotice?: boolean;
 }
 export declare const AddressCardDefault: AddressCard;
 export type AddressCardProps = typeof AddressCardDefault;

package/dist/components/AddressCard/props.js

@@ -15,4 +15,5 @@ exports.AddressCardDefault = {
     isShowEditBtn: true,
     minHeight: "68px",
     hasBlockDescription: false,
+    notice: null,
 };

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

@@ -23,6 +23,9 @@ declare const _default: {
         hasBlockDescription: {
             control: string;
         };
+        notice: {
+            control: string;
+        };
         minHeight: {
             control: string;
         };
@@ -134,6 +137,24 @@ export declare const Disabled: {
         content: any;
     };
 };
+export declare const Unavailable: {
+    args: {
+        title: string;
+        description: string;
+        id: string;
+        value: string;
+        disabled: boolean;
+        isShowEditBtn: boolean;
+        minHeight: string;
+        notice: string;
+        handleUpdate: () => void;
+        onChange: () => void;
+        name: string;
+        checked: boolean;
+        hasBlockDescription: boolean;
+        content: any;
+    };
+};
 export declare const DisabledChecked: {
     args: {
         title: string;

package/dist/components/AddressCard/stories/AddressCard.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.Complete = exports.AddressList = exports.BlockDescriptionChecked = exports.BlockDescription = exports.WithContentAndEdit = exports.WithContentOpen = exports.WithContent = exports.CustomMinHeight = exports.LongDescription = exports.ShortDescription = exports.DisabledWithoutEditButton = exports.DisabledChecked = exports.Disabled = exports.WithoutDescription = exports.WithoutEditButtonChecked = exports.WithoutEditButton = exports.Checked = exports.Default = void 0;
+exports.Complete = exports.AddressList = exports.BlockDescriptionChecked = exports.BlockDescription = exports.WithContentAndEdit = exports.WithContentOpen = exports.WithContent = exports.CustomMinHeight = exports.LongDescription = exports.ShortDescription = exports.DisabledWithoutEditButton = exports.DisabledChecked = exports.Unavailable = exports.Disabled = exports.WithoutDescription = exports.WithoutEditButtonChecked = exports.WithoutEditButton = exports.Checked = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var AddressCard_1 = __importDefault(require("../AddressCard"));
@@ -86,6 +86,7 @@ exports.default = {
         disabled: { control: "boolean" },
         isShowEditBtn: { control: "boolean" },
         hasBlockDescription: { control: "boolean" },
+        notice: { control: "text" },
         minHeight: { control: "text" },
         content: { control: false },
     },
@@ -108,6 +109,9 @@ exports.WithoutDescription = {
 exports.Disabled = {
     args: __assign(__assign({}, baseArgs), { title: "Disabled Address", id: "addressCard_5", value: "address_5", disabled: true }),
 };
+exports.Unavailable = {
+    args: __assign(__assign({}, baseArgs), { title: "Ev", description: "Bağdat Cad. No:12, Kadıköy / İstanbul", id: "addressCard_unavailable", value: "address_unavailable", disabled: true, isShowEditBtn: false, minHeight: "auto", notice: "Bu bölgeye teslimat yapılmıyor" }),
+};
 exports.DisabledChecked = {
     args: __assign(__assign({}, baseArgs), { title: "Disabled Selected Address", id: "addressCard_6", value: "address_6", checked: true, disabled: true }),
 };

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

@@ -268,6 +268,43 @@ export declare const DateWithMinMax: {
         onChange: (e: any) => void;
     };
 };
+export declare const Time: {
+    args: {
+        label: string;
+        placeholder: string;
+        format: string;
+        mask: string;
+        allowEmptyFormatting: boolean;
+        id: string;
+        hasError: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        isClearable: boolean;
+        type: string;
+        infoText: any;
+        tooltipText: any;
+        onChange: (e: any) => void;
+    };
+};
+export declare const TimeWithValue: {
+    args: {
+        label: string;
+        placeholder: string;
+        format: string;
+        mask: string;
+        allowEmptyFormatting: boolean;
+        value: string;
+        id: string;
+        hasError: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        isClearable: boolean;
+        type: string;
+        infoText: any;
+        tooltipText: any;
+        onChange: (e: any) => void;
+    };
+};
 export declare const WithCopyButton: {
     args: {
         placeholder: string;

package/dist/components/Input/stories/Input.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.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.PriceFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
+exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.PriceFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.TimeWithValue = exports.Time = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("../Input"));
@@ -244,6 +244,12 @@ exports.DateWithMinMax = {
         }
     },
 };
+exports.Time = {
+    args: __assign(__assign({}, baseArgs), { label: "Saat", placeholder: "Örn: 07:00", format: "##:##", mask: "_", allowEmptyFormatting: false, id: "input_time" }),
+};
+exports.TimeWithValue = {
+    args: __assign(__assign({}, baseArgs), { label: "Saat", placeholder: "Örn: 10:30", format: "##:##", mask: "_", allowEmptyFormatting: false, value: "14:30", id: "input_time_value" }),
+};
 exports.WithCopyButton = {
     args: {
         placeholder: "Copy this text",

package/dist/components/QuantitySelector/QuantitySelector.js

@@ -26,6 +26,8 @@ var QuantitySelector = function (_a) {
         $hasDisableActions: hasDisableActions,
     };
     var decrementButton = hasRemove ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading, onClick: onRemove }, styledProps, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading, onClick: onDecrement }, styledProps, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) })));
-    return ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Container, { children: [label && (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.Label, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Controls, __assign({}, styledProps, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement }, styledProps, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && ((0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } }))] }))), (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.QuantityValue, __assign({}, styledProps, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && decrementButton] }))] }));
+    var incrementButton = ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement }, styledProps, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && ((0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } }))] })));
+    var isHorizontal = orientation === 'horizontal';
+    return ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Container, { children: [label && (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.Label, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Controls, __assign({}, styledProps, { children: [!hasDisableActions && (isHorizontal ? decrementButton : incrementButton), (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.QuantityValue, __assign({}, styledProps, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && (isHorizontal ? incrementButton : decrementButton)] }))] }));
 };
 exports.default = QuantitySelector;

package/dist/components/QuantitySelector/QuantitySelector.test.js

@@ -84,6 +84,27 @@ describe('QuantitySelector', function () {
             }
         });
     }); });
+    it('places decrement before increment when horizontal', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onIncrement, onDecrement, _a, first, second;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    onIncrement = jest.fn();
+                    onDecrement = jest.fn();
+                    renderSelector({ orientation: 'horizontal', onIncrement: onIncrement, onDecrement: onDecrement });
+                    _a = react_1.screen.getAllByRole('button'), first = _a[0], second = _a[1];
+                    return [4 /*yield*/, user_event_1.default.click(first)];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, user_event_1.default.click(second)];
+                case 2:
+                    _b.sent();
+                    expect(onDecrement).toHaveBeenCalledTimes(1);
+                    expect(onIncrement).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('does not call onIncrement when increment is disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
         var onIncrement;
         return __generator(this, function (_a) {

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -63,6 +63,6 @@ var ShoppingCartProduct = function (_a) {
                                             e.preventDefault();
                                             e.stopPropagation();
                                             onCampaignCountClick === null || onCampaignCountClick === void 0 ? void 0 : onCampaignCountClick();
-                                        } }, { children: ["+", extraCampaignCount] })))] }))] }), (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)(ShoppingCartProduct_styled_1.InsuranceSection, __assign({ "$hasInsurance": hasInsurancePointer }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceImage, __assign({ 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)(ShoppingCartProduct_styled_1.InsuranceContent, __assign({ onClick: !hasLoading ? toggleInsurance : undefined }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceText, { children: [insuranceText, insurancePrice && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePrice, { 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)(ShoppingCartProduct_styled_1.InsurancePriceValue, { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceQuantity, { children: insuranceQuantity })] })) }))] }), hasInsuranceActions && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceActions, { 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)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { 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)(ShoppingCartProduct_styled_1.InsuranceType2TooltipWrapper, __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)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { 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 && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonWrapper, { children: (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonCard, __assign({ htmlFor: upfrontAddonId }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonHeader, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonCheckboxWrapper, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: upfrontAddonId, size: "medium", checked: upfrontAddonChecked, onChange: onUpfrontAddonChange }) }), (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 })] }))] })) }))] })) }))] }));
+                                        } }, { children: ["+", extraCampaignCount] })))] }))] }), (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)(ShoppingCartProduct_styled_1.InsuranceSection, __assign({ "$hasInsurance": hasInsurancePointer }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceImage, __assign({ 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)(ShoppingCartProduct_styled_1.InsuranceContent, __assign({ onClick: !hasLoading ? toggleInsurance : undefined }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceText, { children: [insuranceText, insurancePrice && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePrice, { 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)(ShoppingCartProduct_styled_1.InsurancePriceValue, { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceQuantity, { children: insuranceQuantity })] })) }))] }), hasInsuranceActions && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceActions, { 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)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { 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)(ShoppingCartProduct_styled_1.InsuranceType2TooltipWrapper, __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)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { 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 && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonWrapper, { children: (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonCard, __assign({ htmlFor: upfrontAddonId }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonHeader, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonCheckboxWrapper, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: upfrontAddonId, size: "medium", checked: upfrontAddonChecked, onChange: onUpfrontAddonChange }) }), (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.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice }))] })) }))] })) }))] }));
 };
 exports.default = ShoppingCartProduct;

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

@@ -59,7 +59,7 @@ exports.UpfrontAddonCheckboxWrapper = styled_components_1.default.div(templateOb
 exports.UpfrontAddonTitle = styled_components_1.default.span(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--text);\n    flex: 1;\n    min-width: 0;\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--text);\n    flex: 1;\n    min-width: 0;\n"])));
 exports.UpfrontAddonHeader = styled_components_1.default.div(templateObject_44 || (templateObject_44 = __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_45 || (templateObject_45 = __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_46 || (templateObject_46 = __makeTemplateObject(["\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--text-soft);\n"], ["\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--text-soft);\n"])));
+exports.UpfrontAddonPriceLine = styled_components_1.default.p(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--text-soft);\n"], ["\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--text-soft);\n"])));
 exports.UpfrontAddonOldPrice = styled_components_1.default.span(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n    text-decoration: line-through;\n    color: var(--text-disabled);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    text-decoration: line-through;\n    color: var(--text-disabled);\n    font: var(--caption-semi-bold-12-15);\n"])));
 exports.UpfrontAddonDiscountedPrice = styled_components_1.default.span(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--text);\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--text);\n"])));
 exports.UpfrontAddonCard = styled_components_1.default.label(templateObject_49 || (templateObject_49 = __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    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"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.24.10",
+  "version": "2.24.12",
   "files": [
     "dist"
   ],