@citygross/components 0.8.100 → 0.8.102

package/build/@types/components/CgButton/CgButton.d.ts

@@ -12,6 +12,7 @@ export declare enum EButtonVariant {
     'ghost' = 4
 }
 export declare type TCgButton = {
+    ariaLabel?: string;
     buttonRef?: React.Ref<HTMLButtonElement>;
     children?: React.ReactNode;
     disabled?: boolean;
@@ -26,4 +27,4 @@ export declare type TCgButton = {
     size?: ECgButtonSize;
     variant?: EButtonVariant;
 };
-export declare const CgButton: ({ buttonRef, children, disabled, flexReverse, fullWidth, icon, id, loading, onClick, round, shouldPreventDefault, size, variant }: TCgButton) => JSX.Element;
+export declare const CgButton: ({ ariaLabel, buttonRef, children, disabled, flexReverse, fullWidth, icon, id, loading, onClick, round, shouldPreventDefault, size, variant }: TCgButton) => JSX.Element;

package/build/@types/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/CartCard/CartCard';
 export * from './components/CartCardLabel/CartCardLabel';
 export * from './components/CartItemSummary/CartItemSummary';
 export * from './components/CartSubTotal/CartSubTotal';
+export * from './components/CartSummary/CartSummary';
 export * from './components/CgButton/CgButton';
 export * from './components/Chips/Chip';
 export * from './components/Collapsable/Collapsable';

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js

@@ -24,6 +24,8 @@ require('@citygross/utils');
 require('react-loading-skeleton');
 require('../CartItemSummary/CartItemSummary.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
+require('../Divider/Divider.styles.js');
+require('../CartSummary/CartSummary.styles.js');
 require('../Chips/Chip.styles.js');
 require('../Spinner/Spinner.styles.js');
 require('../Collapsable/Collapsable.styles.js');
@@ -32,7 +34,6 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
 require('../DateBox/DateBox.styles.js');
 require('../DeliverySlotItem/DeliverySlotItem.styles.js');
 require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
-require('../Divider/Divider.styles.js');
 require('../DotIndicator/DotIndicator.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../Form/Form.styles.js');

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/CartSummary/CartSummary.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var utils = require('@citygross/utils');
+var React = require('react');
+var Divider = require('../Divider/Divider.js');
+var CartSummary_styles = require('./CartSummary.styles.js');
+var typography = require('@citygross/typography');
+var index = require('../../../../design-tokens/build/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var calculateSummaryLine = function (items) {
+    var sumOfItems = items === null || items === void 0 ? void 0 : items.reduce(function (prev, curr) {
+        var _a, _b, _c;
+        return {
+            cancelledQuantity: prev.cancelledQuantity + ((_a = curr === null || curr === void 0 ? void 0 : curr.cancelledQuantity) !== null && _a !== void 0 ? _a : 0),
+            quantity: prev.quantity + curr.quantity,
+            amount: prev.amount + ((_b = curr === null || curr === void 0 ? void 0 : curr.amount) !== null && _b !== void 0 ? _b : 0),
+            cancelledAmount: prev.cancelledAmount + ((_c = curr === null || curr === void 0 ? void 0 : curr.cancelledAmount) !== null && _c !== void 0 ? _c : 0)
+        };
+    }, {
+        cancelledQuantity: 0,
+        quantity: 0,
+        amount: 0,
+        cancelledAmount: 0
+    });
+    return sumOfItems;
+};
+function CartSummary(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _s = _a.saveLabel, saveLabel = _s === void 0 ? 'rabatter' : _s, _t = _a.shippingLabel, shippingLabel = _t === void 0 ? 'frakt' : _t, _u = _a.totalLabel, totalLabel = _u === void 0 ? 'totalt' : _u, _v = _a.taxLabel, taxLabel = _v === void 0 ? 'varav moms' : _v, cartSummary = _tslib.__rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel"]);
+    var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
+    var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
+    var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
+    var cateredMeals = (_e = cartSummary === null || cartSummary === void 0 ? void 0 : cartSummary.cateredMeals) !== null && _e !== void 0 ? _e : [];
+    var sumOfBags = calculateSummaryLine(bags);
+    var sumOfGroceries = calculateSummaryLine(groceries);
+    var sumOfCateredMeals = calculateSummaryLine(cateredMeals);
+    return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, null,
+        React__default["default"].createElement(CartSummary_styles.CartPaymentContainer, null,
+            cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
+                React__default["default"].createElement(typography.H3, null, cartSummary.title),
+                React__default["default"].createElement(typography.BodyText, null, cartSummary.subTitle))),
+            React__default["default"].createElement(CartSummary_styles.CartSummaryHeader, { title: cartSummary.title },
+                ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null,
+                        "varor",
+                        ' ',
+                        ((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
+                            ((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
+                        ' ',
+                        "st"),
+                    React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
+                        (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_h = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _h === void 0 ? void 0 : _h.dark }, utils.formatPrice(((_j = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _j !== void 0 ? _j : 0) +
+                            ((_k = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _k !== void 0 ? _k : 0)))),
+                        React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
+                bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null,
+                        "matkassar ",
+                        sumOfBags.quantity,
+                        " st"),
+                    React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
+                        sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_l = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _l === void 0 ? void 0 : _l.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
+                        React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfBags.amount))))),
+                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default["default"].createElement(Divider.Divider, { xsSpacing: (_m = index.theme.spacings) === null || _m === void 0 ? void 0 : _m.xs, lgSpacing: (_o = index.theme.spacings) === null || _o === void 0 ? void 0 : _o.xs })), charges === null || charges === void 0 ? void 0 :
+                charges.map(function (charge) {
+                    var _a, _b;
+                    return (React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name },
+                        React__default["default"].createElement(typography.BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
+                        React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
+                            charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, utils.formatPrice(charge.cancelledAmount))),
+                            React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
+                }),
+                cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, { color: (_p = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _p === void 0 ? void 0 : _p.alertRed }, saveLabel),
+                    React__default["default"].createElement(typography.BodyText, { color: (_q = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _q === void 0 ? void 0 : _q.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
+            React__default["default"].createElement(CartSummary_styles.CartSummaryFooter, null,
+                ((_r = cartSummary.deliveryFee) === null || _r === void 0 ? void 0 : _r.amount) &&
+                    cartSummary.deliveryFee.amount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null, shippingLabel),
+                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.deliveryFee.amount)))),
+                React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, totalLabel),
+                    React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(cartSummary.totalAmount))),
+                React__default["default"].createElement(CartSummary_styles.CartLine, null,
+                    React__default["default"].createElement(typography.BodyText, null, taxLabel),
+                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.totalTaxAmount)))))));
+}
+
+exports.CartSummary = CartSummary;
+//# sourceMappingURL=CartSummary.js.map

package/build/cjs/components/src/components/CartSummary/CartSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/CartSummary/CartSummary.styles.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var CartSummaryContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject([""], [""])));
+var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLighter; });
+var CartSummaryHeader = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartSummaryFooter = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLight; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartLine = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
+var AmountWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartSummaryTitle = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+exports.AmountWrapper = AmountWrapper;
+exports.CartLine = CartLine;
+exports.CartPaymentContainer = CartPaymentContainer;
+exports.CartSummaryContainer = CartSummaryContainer;
+exports.CartSummaryFooter = CartSummaryFooter;
+exports.CartSummaryHeader = CartSummaryHeader;
+exports.CartSummaryTitle = CartSummaryTitle;
+//# sourceMappingURL=CartSummary.styles.js.map

package/build/cjs/components/src/components/CartSummary/CartSummary.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartSummary.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/CgButton/CgButton.js

@@ -25,8 +25,8 @@ exports.EButtonVariant = void 0;
     EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
 })(exports.EButtonVariant || (exports.EButtonVariant = {}));
 var CgButton = function (_a) {
-    var buttonRef = _a.buttonRef, children = _a.children, disabled = _a.disabled, flexReverse = _a.flexReverse, fullWidth = _a.fullWidth, icon = _a.icon, _b = _a.id, id = _b === void 0 ? 'cg-button' : _b, loading = _a.loading, onClick = _a.onClick, round = _a.round, _c = _a.shouldPreventDefault, shouldPreventDefault = _c === void 0 ? true : _c, size = _a.size, variant = _a.variant;
-    return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { disabled: disabled || loading, flexReverse: flexReverse, fullWidth: fullWidth, isIconOnly: !children, id: id, loading: loading, onClick: function (e) {
+    var ariaLabel = _a.ariaLabel, buttonRef = _a.buttonRef, children = _a.children, disabled = _a.disabled, flexReverse = _a.flexReverse, fullWidth = _a.fullWidth, icon = _a.icon, _b = _a.id, id = _b === void 0 ? 'cg-button' : _b, loading = _a.loading, onClick = _a.onClick, round = _a.round, _c = _a.shouldPreventDefault, shouldPreventDefault = _c === void 0 ? true : _c, size = _a.size, variant = _a.variant;
+    return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { "aria-label": ariaLabel, disabled: disabled || loading, flexReverse: flexReverse, fullWidth: fullWidth, isIconOnly: !children, id: id, loading: loading, onClick: function (e) {
             shouldPreventDefault && e.preventDefault();
             onClick && onClick();
         }, ref: buttonRef, round: round, size: size, variant: variant },

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js

@@ -24,6 +24,8 @@ require('@citygross/utils');
 require('react-loading-skeleton');
 require('../CartItemSummary/CartItemSummary.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
+require('../Divider/Divider.styles.js');
+require('../CartSummary/CartSummary.styles.js');
 require('../Chips/Chip.styles.js');
 require('../Spinner/Spinner.styles.js');
 require('../Collapsable/Collapsable.styles.js');
@@ -32,7 +34,6 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
 require('../DateBox/DateBox.styles.js');
 require('../DeliverySlotItem/DeliverySlotItem.styles.js');
 require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
-require('../Divider/Divider.styles.js');
 require('../DotIndicator/DotIndicator.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../Form/Form.styles.js');

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/index.js

@@ -17,6 +17,7 @@ var CartCard = require('./components/CartCard/CartCard.js');
 var CartCardLabel = require('./components/CartCardLabel/CartCardLabel.js');
 var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js');
 var CartSubTotal = require('./components/CartSubTotal/CartSubTotal.js');
+var CartSummary = require('./components/CartSummary/CartSummary.js');
 var CgButton = require('./components/CgButton/CgButton.js');
 var Chip = require('./components/Chips/Chip.js');
 var Collapsable = require('./components/Collapsable/Collapsable.js');
@@ -122,6 +123,7 @@ Object.defineProperty(exports, 'ECartSubTotalTypes', {
 	enumerable: true,
 	get: function () { return CartSubTotal.ECartSubTotalTypes; }
 });
+exports.CartSummary = CartSummary.CartSummary;
 exports.CgButton = CgButton.CgButton;
 Object.defineProperty(exports, 'EButtonVariant', {
 	enumerable: true,

package/build/cjs/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/AddressBlock/AddressBlock.js

@@ -20,6 +20,8 @@ import '@citygross/utils';
 import 'react-loading-skeleton';
 import '../CartItemSummary/CartItemSummary.styles.js';
 import '../CartSubTotal/CartSubTotal.js';
+import '../Divider/Divider.styles.js';
+import '../CartSummary/CartSummary.styles.js';
 import '../Chips/Chip.styles.js';
 import '../Spinner/Spinner.styles.js';
 import '../Collapsable/Collapsable.styles.js';
@@ -28,7 +30,6 @@ import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
 import '../DateBox/DateBox.styles.js';
 import '../DeliverySlotItem/DeliverySlotItem.styles.js';
 import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
-import '../Divider/Divider.styles.js';
 import '../DotIndicator/DotIndicator.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../Form/Form.styles.js';

package/build/es/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/CartSummary/CartSummary.js

@@ -0,0 +1,88 @@
+import { __rest } from '../../../../_virtual/_tslib.js';
+import { formatPrice } from '@citygross/utils';
+import React from 'react';
+import { Divider } from '../Divider/Divider.js';
+import { CartSummaryContainer, CartPaymentContainer, CartSummaryTitle, CartSummaryHeader, CartLine, AmountWrapper, CartSummaryFooter } from './CartSummary.styles.js';
+import { H3, BodyText } from '@citygross/typography';
+import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
+
+var calculateSummaryLine = function (items) {
+    var sumOfItems = items === null || items === void 0 ? void 0 : items.reduce(function (prev, curr) {
+        var _a, _b, _c;
+        return {
+            cancelledQuantity: prev.cancelledQuantity + ((_a = curr === null || curr === void 0 ? void 0 : curr.cancelledQuantity) !== null && _a !== void 0 ? _a : 0),
+            quantity: prev.quantity + curr.quantity,
+            amount: prev.amount + ((_b = curr === null || curr === void 0 ? void 0 : curr.amount) !== null && _b !== void 0 ? _b : 0),
+            cancelledAmount: prev.cancelledAmount + ((_c = curr === null || curr === void 0 ? void 0 : curr.cancelledAmount) !== null && _c !== void 0 ? _c : 0)
+        };
+    }, {
+        cancelledQuantity: 0,
+        quantity: 0,
+        amount: 0,
+        cancelledAmount: 0
+    });
+    return sumOfItems;
+};
+function CartSummary(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _s = _a.saveLabel, saveLabel = _s === void 0 ? 'rabatter' : _s, _t = _a.shippingLabel, shippingLabel = _t === void 0 ? 'frakt' : _t, _u = _a.totalLabel, totalLabel = _u === void 0 ? 'totalt' : _u, _v = _a.taxLabel, taxLabel = _v === void 0 ? 'varav moms' : _v, cartSummary = __rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel"]);
+    var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
+    var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
+    var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
+    var cateredMeals = (_e = cartSummary === null || cartSummary === void 0 ? void 0 : cartSummary.cateredMeals) !== null && _e !== void 0 ? _e : [];
+    var sumOfBags = calculateSummaryLine(bags);
+    var sumOfGroceries = calculateSummaryLine(groceries);
+    var sumOfCateredMeals = calculateSummaryLine(cateredMeals);
+    return (React.createElement(CartSummaryContainer, null,
+        React.createElement(CartPaymentContainer, null,
+            cartSummary.title && (React.createElement(CartSummaryTitle, null,
+                React.createElement(H3, null, cartSummary.title),
+                React.createElement(BodyText, null, cartSummary.subTitle))),
+            React.createElement(CartSummaryHeader, { title: cartSummary.title },
+                ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React.createElement(CartLine, null,
+                    React.createElement(BodyText, null,
+                        "varor",
+                        ' ',
+                        ((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
+                            ((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
+                        ' ',
+                        "st"),
+                    React.createElement(AmountWrapper, null,
+                        (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_h = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _h === void 0 ? void 0 : _h.dark }, formatPrice(((_j = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _j !== void 0 ? _j : 0) +
+                            ((_k = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _k !== void 0 ? _k : 0)))),
+                        React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
+                bags.length > 0 && (React.createElement(CartLine, null,
+                    React.createElement(BodyText, null,
+                        "matkassar ",
+                        sumOfBags.quantity,
+                        " st"),
+                    React.createElement(AmountWrapper, null,
+                        sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_l = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _l === void 0 ? void 0 : _l.dark }, formatPrice(sumOfBags.cancelledAmount))),
+                        React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(sumOfBags.amount))))),
+                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React.createElement(Divider, { xsSpacing: (_m = theme_1.spacings) === null || _m === void 0 ? void 0 : _m.xs, lgSpacing: (_o = theme_1.spacings) === null || _o === void 0 ? void 0 : _o.xs })), charges === null || charges === void 0 ? void 0 :
+                charges.map(function (charge) {
+                    var _a, _b;
+                    return (React.createElement(CartLine, { key: charge.name },
+                        React.createElement(BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
+                        React.createElement(AmountWrapper, null,
+                            charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_b = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _b === void 0 ? void 0 : _b.dark }, formatPrice(charge.cancelledAmount))),
+                            React.createElement(BodyText, null, formatPrice(charge.amount)))));
+                }),
+                cartSummary.totalDiscount > 0 && (React.createElement(CartLine, null,
+                    React.createElement(BodyText, { color: (_p = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _p === void 0 ? void 0 : _p.alertRed }, saveLabel),
+                    React.createElement(BodyText, { color: (_q = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _q === void 0 ? void 0 : _q.alertRed }, formatPrice(cartSummary.totalDiscount))))),
+            React.createElement(CartSummaryFooter, null,
+                ((_r = cartSummary.deliveryFee) === null || _r === void 0 ? void 0 : _r.amount) &&
+                    cartSummary.deliveryFee.amount > 0 && (React.createElement(CartLine, null,
+                    React.createElement(BodyText, null, shippingLabel),
+                    React.createElement(BodyText, null, formatPrice(cartSummary.deliveryFee.amount)))),
+                React.createElement(CartLine, null,
+                    React.createElement(H3, { fontWeight: 'semiBold' }, totalLabel),
+                    React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(cartSummary.totalAmount))),
+                React.createElement(CartLine, null,
+                    React.createElement(BodyText, null, taxLabel),
+                    React.createElement(BodyText, null, formatPrice(cartSummary.totalTaxAmount)))))));
+}
+
+export { CartSummary };
+//# sourceMappingURL=CartSummary.js.map

package/build/es/components/src/components/CartSummary/CartSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/CartSummary/CartSummary.styles.js

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var CartSummaryContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var CartPaymentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLighter; });
+var CartSummaryHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartSummaryFooter = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLight; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartLine = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
+var AmountWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var CartSummaryTitle = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { AmountWrapper, CartLine, CartPaymentContainer, CartSummaryContainer, CartSummaryFooter, CartSummaryHeader, CartSummaryTitle };
+//# sourceMappingURL=CartSummary.styles.js.map

package/build/es/components/src/components/CartSummary/CartSummary.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartSummary.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/build/es/components/src/components/CgButton/CgButton.js

@@ -17,8 +17,8 @@ var EButtonVariant;
     EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
 })(EButtonVariant || (EButtonVariant = {}));
 var CgButton = function (_a) {
-    var buttonRef = _a.buttonRef, children = _a.children, disabled = _a.disabled, flexReverse = _a.flexReverse, fullWidth = _a.fullWidth, icon = _a.icon, _b = _a.id, id = _b === void 0 ? 'cg-button' : _b, loading = _a.loading, onClick = _a.onClick, round = _a.round, _c = _a.shouldPreventDefault, shouldPreventDefault = _c === void 0 ? true : _c, size = _a.size, variant = _a.variant;
-    return (React.createElement(CgButtonContainer, { disabled: disabled || loading, flexReverse: flexReverse, fullWidth: fullWidth, isIconOnly: !children, id: id, loading: loading, onClick: function (e) {
+    var ariaLabel = _a.ariaLabel, buttonRef = _a.buttonRef, children = _a.children, disabled = _a.disabled, flexReverse = _a.flexReverse, fullWidth = _a.fullWidth, icon = _a.icon, _b = _a.id, id = _b === void 0 ? 'cg-button' : _b, loading = _a.loading, onClick = _a.onClick, round = _a.round, _c = _a.shouldPreventDefault, shouldPreventDefault = _c === void 0 ? true : _c, size = _a.size, variant = _a.variant;
+    return (React.createElement(CgButtonContainer, { "aria-label": ariaLabel, disabled: disabled || loading, flexReverse: flexReverse, fullWidth: fullWidth, isIconOnly: !children, id: id, loading: loading, onClick: function (e) {
             shouldPreventDefault && e.preventDefault();
             onClick && onClick();
         }, ref: buttonRef, round: round, size: size, variant: variant },

package/build/es/components/src/components/WarningLabel/WarningLabel.js

@@ -20,6 +20,8 @@ import '@citygross/utils';
 import 'react-loading-skeleton';
 import '../CartItemSummary/CartItemSummary.styles.js';
 import '../CartSubTotal/CartSubTotal.js';
+import '../Divider/Divider.styles.js';
+import '../CartSummary/CartSummary.styles.js';
 import '../Chips/Chip.styles.js';
 import '../Spinner/Spinner.styles.js';
 import '../Collapsable/Collapsable.styles.js';
@@ -28,7 +30,6 @@ import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
 import '../DateBox/DateBox.styles.js';
 import '../DeliverySlotItem/DeliverySlotItem.styles.js';
 import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
-import '../Divider/Divider.styles.js';
 import '../DotIndicator/DotIndicator.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../Form/Form.styles.js';

package/build/es/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/index.js

@@ -13,6 +13,7 @@ export { CartCard } from './components/CartCard/CartCard.js';
 export { CartCardLabel } from './components/CartCardLabel/CartCardLabel.js';
 export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
 export { CartSubTotal, ECartSubTotalTypes } from './components/CartSubTotal/CartSubTotal.js';
+export { CartSummary } from './components/CartSummary/CartSummary.js';
 export { CgButton, EButtonVariant, ECgButtonSize } from './components/CgButton/CgButton.js';
 export { Chip } from './components/Chips/Chip.js';
 export { Collapsable } from './components/Collapsable/Collapsable.js';

package/build/es/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.8.100",
+  "version": "0.8.102",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "954d6019a5e3a6f9ea0e7b4bfdc4f46aec12d035"
+  "gitHead": "5cdaba7c831afaebd3590745ebc224cf2d03406b"
 }