krl-alfred 1.71.7 → 1.71.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionButton/ActionButton.styled.js +1 -1
- package/dist/components/Icon/Bag3.js +1 -1
- package/dist/components/Icon/TimeCircle.js +1 -1
- package/dist/components/InfoBox/InfoBox.styled.js +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +2 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
- package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js +1 -0
- package/package.json +1 -1
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButtonStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-5);\n padding: 1rem 1.5rem;\n width: ", ";\n align-items: center;\n justify-content: space-between;\n color: var(--dark);\n box-sizing: border-box;\n cursor: pointer;\n .top ,.bottom{\n display: grid;\n grid-template-columns: 61px 1fr;\n align-content: center;\n align-items: center;\n }\n .top{\n .icon{\n svg{\n display: block;\n path {\n stroke : var(--primary);\n }\n }\n margin-right: 1rem;\n }\n .title{\n display: block;\n }\n }\n .bottom{\n margin-top: 0.5rem;\n > div{\n display: grid;\n grid-template-columns: 1fr auto;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n .timer{\n display: grid;\n grid-template-columns: repeat(5,auto);\n align-items:center;\n justify-content: start;\n .box{\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 4px;\n text-align: center;\n display: grid;\n align-items: center;\n align-content: center;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n .dots{ \n margin: 0 4px;\n width: 4px;\n }\n }\n }\n } \n"], ["\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-5);\n padding: 1rem 1.5rem;\n width: ", ";\n align-items: center;\n justify-content: space-between;\n color: var(--dark);\n box-sizing: border-box;\n cursor: pointer;\n .top ,.bottom{\n display: grid;\n grid-template-columns: 61px 1fr;\n align-content: center;\n align-items: center;\n }\n .top{\n .icon{\n svg{\n display: block;\n path {\n stroke : var(--primary);\n }\n }\n margin-right: 1rem;\n }\n .title{\n display: block;\n }\n }\n .bottom{\n margin-top: 0.5rem;\n > div{\n display: grid;\n grid-template-columns: 1fr auto;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n .timer{\n display: grid;\n grid-template-columns: repeat(5,auto);\n align-items:center;\n justify-content: start;\n .box{\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 4px;\n text-align: center;\n display: grid;\n align-items: center;\n align-content: center;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n .dots{ \n margin: 0 4px;\n width: 4px;\n }\n }\n }\n } \n"])), function (props) { return props.width; });
|
|
12
|
+
exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-5);\n padding: 1rem 1.5rem;\n width: ", ";\n align-items: center;\n justify-content: space-between;\n color: var(--dark);\n box-sizing: border-box;\n cursor: pointer;\n .top ,.bottom{\n display: grid;\n grid-template-columns: 61px 1fr;\n align-content: center;\n align-items: center;\n }\n .top{\n .icon{\n svg{\n display: block;\n path {\n &:is([stroke]){\n stroke : var(--primary);\n stroke-width: 2;\n }\n &:is([fill]){\n fill : var(--primary);\n }\n }\n }\n margin-right: 1rem;\n }\n .title{\n display: block;\n }\n }\n .bottom{\n margin-top: 0.5rem;\n > div{\n display: grid;\n grid-template-columns: 1fr auto;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n .timer{\n display: grid;\n grid-template-columns: repeat(5,auto);\n align-items:center;\n justify-content: start;\n .box{\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 4px;\n text-align: center;\n display: grid;\n align-items: center;\n align-content: center;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n .dots{ \n margin: 0 4px;\n width: 4px;\n }\n }\n }\n } \n"], ["\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-5);\n padding: 1rem 1.5rem;\n width: ", ";\n align-items: center;\n justify-content: space-between;\n color: var(--dark);\n box-sizing: border-box;\n cursor: pointer;\n .top ,.bottom{\n display: grid;\n grid-template-columns: 61px 1fr;\n align-content: center;\n align-items: center;\n }\n .top{\n .icon{\n svg{\n display: block;\n path {\n &:is([stroke]){\n stroke : var(--primary);\n stroke-width: 2;\n }\n &:is([fill]){\n fill : var(--primary);\n }\n }\n }\n margin-right: 1rem;\n }\n .title{\n display: block;\n }\n }\n .bottom{\n margin-top: 0.5rem;\n > div{\n display: grid;\n grid-template-columns: 1fr auto;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n .timer{\n display: grid;\n grid-template-columns: repeat(5,auto);\n align-items:center;\n justify-content: start;\n .box{\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 4px;\n text-align: center;\n display: grid;\n align-items: center;\n align-content: center;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n .dots{ \n margin: 0 4px;\n width: 4px;\n }\n }\n }\n } \n"])), function (props) { return props.width; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgBag3 = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({
|
|
39
|
+
var SvgBag3 = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5393 9.92031C11.878 9.8013 12.248 9.83157 12.561 9.99874L12.9105 10.271C12.9947 10.3636 13.0646 10.4672 13.1187 10.5778L13.1261 10.5933L13.8016 12.0372L15.2863 12.2651C15.3844 12.2796 15.4784 12.3051 15.5672 12.3401L16.139 12.7854C16.5082 13.2963 16.4617 14.0117 16.0106 14.4676L14.9057 15.6028L15.1736 17.2248C15.175 17.233 15.1763 17.2413 15.1774 17.2496C15.2673 17.8936 14.8586 18.5876 14.1221 18.7146L14.113 18.7162C13.8321 18.762 13.5481 18.7133 13.3017 18.5841C13.2943 18.5802 13.287 18.5762 13.2797 18.5721L11.9689 17.842L10.6357 18.5832C9.97356 18.9413 9.20416 18.6483 8.88618 18.0411L8.87585 18.0209C8.7538 17.7743 8.71366 17.4988 8.75455 17.2335L8.75619 17.2229L9.02392 15.6024L7.91016 14.4644L7.89885 14.4527C7.43343 13.9614 7.42134 13.1897 7.86806 12.6842C7.88815 12.6609 7.90932 12.6386 7.9315 12.6172C8.11217 12.4434 8.34309 12.3191 8.60229 12.2702C8.61348 12.2681 8.6247 12.2662 8.63595 12.2645L10.1245 12.036L10.7989 10.5945C10.939 10.2935 11.1974 10.0402 11.5393 9.92031ZM11.7775 13.2224L11.9628 12.8264L12.1476 13.2215L12.1484 13.223C12.3219 13.5953 12.673 13.8866 13.1172 13.9555L13.6399 14.0358L13.2305 14.4565C12.9293 14.7621 12.8068 15.1894 12.8771 15.5937L12.9617 16.1057L12.5938 15.9007C12.2057 15.6809 11.7334 15.6808 11.3453 15.9004L10.9671 16.1107L11.0536 15.5865C11.1197 15.187 10.9991 14.7648 10.7045 14.4602L10.7003 14.4559L10.2878 14.0344L10.8073 13.9547L10.8215 13.9524C11.2538 13.8797 11.6007 13.5964 11.7759 13.2259L11.7775 13.2224Z", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.5672 12.3401C15.7997 12.4319 15.9972 12.5893 16.139 12.7854L15.5672 12.3401Z", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.9105 10.271L12.561 9.99874C12.6951 10.0702 12.8125 10.1631 12.9105 10.271Z", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.004 1.01762C9.37128 1.00661 7.34081 3.22293 7.22377 5.85717C4.27169 5.88246 2.01758 8.45634 2.01758 11.4589V17.4246C2.01758 20.4421 4.29406 23.0266 7.26767 23.0266H16.7349C19.7086 23.0266 21.985 20.4421 21.985 17.4246V11.4589C21.985 8.45044 19.7221 5.87234 16.7614 5.85705C16.6444 3.23292 14.6284 1.01894 12.004 1.01762ZM7.21847 9.37745V7.8574C5.5166 7.88632 4.01758 9.41282 4.01758 11.4589V17.4246C4.01758 19.4904 5.54559 21.0266 7.26767 21.0266H16.7349C18.457 21.0266 19.985 19.4904 19.985 17.4246V11.4589C19.985 9.40587 18.4758 7.87595 16.7668 7.85716V9.37745C16.7668 9.92973 16.3191 10.3774 15.7668 10.3774C15.2145 10.3774 14.7668 9.92973 14.7668 9.37745V7.85698H9.21847V9.37745C9.21847 9.92973 8.77075 10.3774 8.21847 10.3774C7.66618 10.3774 7.21847 9.92973 7.21847 9.37745ZM9.22657 5.85698H14.7587C14.6463 4.20294 13.3879 3.01762 12.0016 3.01762H11.9969C10.6054 3.01111 9.33922 4.1968 9.22657 5.85698Z", fill: "#0A103D" })] }))); };
|
|
40
40
|
exports.default = SvgBag3;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgTimeCircle = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width:
|
|
39
|
+
var SvgTimeCircle = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.25 12.0005C21.25 17.1095 17.109 21.2505 12 21.2505C6.891 21.2505 2.75 17.1095 2.75 12.0005C2.75 6.89149 6.891 2.75049 12 2.75049C17.109 2.75049 21.25 6.89149 21.25 12.0005Z", stroke: "#0A103D", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.4321 14.9429L11.6621 12.6939V7.84689", stroke: "#0A103D", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
40
|
exports.default = SvgTimeCircle;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.Description = exports.Title = exports.IconWrapper = exports.InfoBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ", ";\n background: var(--primary-opacity-10);\n padding: 1rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ", ";\n background: var(--primary-opacity-10);\n padding: 1rem;\n"])), function (props) { return props.radius ? props.radius : "8px"; });
|
|
13
|
-
exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-right: 1rem;\n"], ["\n display: block;\n margin-right: 1rem;\n"])));
|
|
13
|
+
exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-right: 1rem;\n svg{\n display: block;\n path[stroke]{\n stroke-width: 1.5;\n }\n }\n"], ["\n display: block;\n margin-right: 1rem;\n svg{\n display: block;\n path[stroke]{\n stroke-width: 1.5;\n }\n }\n"])));
|
|
14
14
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin: 0;\n"], ["\n display: block;\n margin: 0;\n"])));
|
|
15
15
|
exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n margin: 0;\n"], ["\n display: block;\n margin: 0;\n"])));
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -25,13 +25,14 @@ var ShoppingCartProduct = function (props) {
|
|
|
25
25
|
var item = _a.item, children = _a.children;
|
|
26
26
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
27
27
|
};
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsxs)("p", { className: "productCardDeliveryText body-medium-13-16", children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", { className: "productCardDeliveryDanger", children: props.deliveryDangerText }), props.deliveryText] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { className: "quantity body-extra-bold-13-16", children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity }), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))] })] }), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "64.51px", height: "7.37px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", { className: "price caption-extra-bold-12-15", children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", { className: "quantity", children: props.insuranceQuantity })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupRight: "-
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsxs)("p", { className: "productCardDeliveryText body-medium-13-16", children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", { className: "productCardDeliveryDanger", children: props.deliveryDangerText }), props.deliveryText] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { className: "quantity body-extra-bold-13-16", children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity }), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))] })] }), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "64.51px", height: "7.37px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", { className: "price caption-extra-bold-12-15", children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", { className: "quantity", children: props.insuranceQuantity })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight", children: props.insuranceTooltipText })) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) }))) })] }))] })));
|
|
29
29
|
};
|
|
30
30
|
ShoppingCartProduct.defaultProps = {
|
|
31
31
|
insuranceText: "Tamamlayıcı ek güvence ekle",
|
|
32
32
|
insurancePrice: "",
|
|
33
33
|
hasInsurance: false,
|
|
34
34
|
hasInsuranceTooltip: false,
|
|
35
|
+
hasInsuranceTooltipClickAction: false,
|
|
35
36
|
hasError: false,
|
|
36
37
|
errorText: "Bu üründen daha fazla sepetinize ekleyemezsiniz.",
|
|
37
38
|
insuranceTooltipWidth: "178px"
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\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 .text{\n padding-right: 0.5rem;\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 &:hover{\n color: var(--primary-hover);\n }\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 .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: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\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 .text{\n padding-right: 0.5rem;\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 &:hover{\n color: var(--primary-hover);\n }\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 .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: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n }\n }\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
|
|
12
|
+
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\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 .text{\n padding-right: 0.5rem;\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 &:hover{\n color: var(--primary-hover);\n }\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 .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: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\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 .text{\n padding-right: 0.5rem;\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 &:hover{\n color: var(--primary-hover);\n }\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 .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: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
|
|
13
13
|
exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n svg{\n display: block;\n path, rect{\n stroke : var(--primary);\n transition: all .1s ease;\n }\n }\n &:hover{\n background-color : var(--primary);\n svg{\n path, rect{\n stroke : white;\n }\n }\n }\n"], ["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n svg{\n display: block;\n path, rect{\n stroke : var(--primary);\n transition: all .1s ease;\n }\n }\n &:hover{\n background-color : var(--primary);\n svg{\n path, rect{\n stroke : white;\n }\n }\n }\n"])));
|
|
14
14
|
var templateObject_1, templateObject_2;
|