@telia/teddy 0.7.38 → 0.7.39

package/dist/components/shopping-cart/shopping-cart-item.cjs

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("../../assets/sprite.6511e521-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const components_text_text = require("../text/text.cjs");
+const components_link_link = require("../link/link.cjs");
+const components_button_button = require("../button/button.cjs");
+const components_badge_badge = require("../badge/badge.cjs");
+require("../badge/alert-badge.cjs");
+require("../badge/counter-badge.cjs");
+const components_tooltip_index = require("../tooltip/index.cjs");
+const components_shoppingCart_types = require("./types.cjs");
+const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
+const components_shoppingCart_utils = require("./utils.cjs");
+const item = "_item_kjt5a_1";
+const breakageFeeInfo = "_breakageFeeInfo_kjt5a_7";
+const nameWrapper = "_nameWrapper_kjt5a_26";
+const link = "_link_kjt5a_33";
+const discountDescription = "_discountDescription_kjt5a_51";
+const name = "_name_kjt5a_26";
+const nameContainer = "_nameContainer_kjt5a_64";
+const subtitle = "_subtitle_kjt5a_68";
+const quantityPickerWrapper = "_quantityPickerWrapper_kjt5a_76";
+const pricePer = "_pricePer_kjt5a_83";
+const quantityPicker = "_quantityPicker_kjt5a_76";
+const priceContainer = "_priceContainer_kjt5a_95";
+const priceCost = "_priceCost_kjt5a_101";
+const priceLabel = "_priceLabel_kjt5a_109";
+const priceLinethrough = "_priceLinethrough_kjt5a_114";
+const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_kjt5a_124";
+const imageContainer = "_imageContainer_kjt5a_133";
+const noImageContainer = "_noImageContainer_kjt5a_145";
+const image = "_image_kjt5a_133";
+const iconImage = "_iconImage_kjt5a_158";
+const deleteButtonContainer = "_deleteButtonContainer_kjt5a_164";
+const uniqueDiscount = "_uniqueDiscount_kjt5a_191";
+const uniqueDiscountLabel = "_uniqueDiscountLabel_kjt5a_198";
+const uniqueDiscountPrice = "_uniqueDiscountPrice_kjt5a_204";
+const onlyInShops = "_onlyInShops_kjt5a_209";
+const onlyInShopsLabel = "_onlyInShopsLabel_kjt5a_216";
+const tooltipTrigger = "_tooltipTrigger_kjt5a_235";
+const priceWithTooltip = "_priceWithTooltip_kjt5a_243";
+const cartLink = "_cartLink_kjt5a_248";
+const styles = {
+  item,
+  breakageFeeInfo,
+  nameWrapper,
+  link,
+  discountDescription,
+  name,
+  nameContainer,
+  subtitle,
+  quantityPickerWrapper,
+  pricePer,
+  quantityPicker,
+  priceContainer,
+  priceCost,
+  priceLabel,
+  priceLinethrough,
+  priceLinethroughDisclaimer,
+  imageContainer,
+  noImageContainer,
+  image,
+  iconImage,
+  deleteButtonContainer,
+  uniqueDiscount,
+  uniqueDiscountLabel,
+  uniqueDiscountPrice,
+  onlyInShops,
+  onlyInShopsLabel,
+  tooltipTrigger,
+  priceWithTooltip,
+  cartLink
+};
+const QuantityPicker = ({
+  quantity,
+  onChangeQuantity,
+  cartItem,
+  shouldShowPricePerUnit,
+  isQuantityModifiable,
+  price,
+  discountValueUpfront,
+  discountValueMonthly,
+  hasPaid
+}) => {
+  const minQuantity = 1;
+  const maxQuantity = 10;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.quantityPickerWrapper, children: [
+    !hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.quantityPicker, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_button_button.Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          iconOnly: true,
+          "aria-label": "Reduser antall",
+          disabled: quantity <= minQuantity,
+          onClick: () => onChangeQuantity(cartItem, quantity - 1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "minus" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", children: quantity }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_button_button.Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          iconOnly: true,
+          "aria-label": "Øk antall",
+          disabled: quantity >= maxQuantity,
+          onClick: () => onChangeQuantity(cartItem, quantity + 1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "plus" })
+        }
+      )
+    ] }),
+    shouldShowPricePerUnit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.pricePer, children: [
+      quantity > 1 && !isQuantityModifiable && `${quantity} x `,
+      `${components_shoppingCart_utils.getPrice(components_shoppingCart_utils.defaultFormatPrice, price, discountValueUpfront, discountValueMonthly, 1)}/stk`
+    ] })
+  ] });
+};
+const CartItemImage = ({ cartItem }) => {
+  if (!cartItem.image) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.noImageContainer });
+  }
+  const renderImage = () => {
+    var _a, _b;
+    if ((_a = cartItem.image) == null ? void 0 : _a.url) {
+      return /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles.image, src: `${cartItem.image.url}?w=44&h=75`, alt: "" });
+    }
+    if ((_b = cartItem.image) == null ? void 0 : _b.icon) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { className: styles.iconImage, name: cartItem.image.icon });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.imageContainer, children: cartItem.href ? /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { href: cartItem.href, variant: "navigation", className: styles.cartLink, children: renderImage() }) : renderImage() });
+};
+const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { formatPrice } = components_shoppingCart_shoppingCartContext.useShoppingCart();
+  const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
+  const isQuantityModifiable = !!((_b = cartItem.quantity) == null ? void 0 : _b.modifiable);
+  const shouldShowPricePerUnit = (!!cartItem.price.upfront || !!cartItem.price.firstInvoice) && quantity > 1;
+  const isManualDiscount = (_c = cartItem.discount) == null ? void 0 : _c.isManualDiscount;
+  const discountValueUpfront = isManualDiscount ? 0 : ((_e = (_d = cartItem.discount) == null ? void 0 : _d.value) == null ? void 0 : _e.upfront) || 0;
+  const isLease = cartItem.leaseMonths === 0 || !!cartItem.leaseMonths;
+  const hasSubscription = !!((_f = cartItem.items) == null ? void 0 : _f.find((item2) => item2.type.includes("SUBSCRIPTION")));
+  const discountValueMonthly = ((_h = (_g = cartItem.discount) == null ? void 0 : _g.value) == null ? void 0 : _h.monthly) || 0;
+  const discountPrice = components_shoppingCart_utils.getDiscountPrice(cartItem.price, quantity) || "";
+  const price = components_shoppingCart_utils.getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
+  const discountPriceText = ((_i = cartItem.discount) == null ? void 0 : _i.handsetDiscountText) || "";
+  const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(
+    Boolean
+  );
+  const suppressSubtitles = cartItem.type === components_shoppingCart_types.CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.price, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.subtitle, children: [
+        subtitles.length > 0 ? subtitles.map((sub) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-hj-suppress": suppressSubtitles,
+            className: "paragraph",
+            dangerouslySetInnerHTML: { __html: sub }
+          },
+          `${cartItem.bundleId}-${cartItem.id}-${sub}`
+        )) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${quantity} stk` }),
+        isQuantityModifiable && /* @__PURE__ */ jsxRuntime.jsx(
+          QuantityPicker,
+          {
+            quantity,
+            onChangeQuantity,
+            cartItem,
+            shouldShowPricePerUnit,
+            isQuantityModifiable,
+            price: cartItem.price,
+            discountValueUpfront,
+            discountValueMonthly,
+            hasPaid
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceCost, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceWithTooltip, children: [
+          discountPriceText && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { defaultOpen: true, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: styles.tooltipTrigger }),
+            /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: isLease && !hasSubscription && "fra " }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: price }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
+          ] })
+        ] }),
+        discountPrice && formatPrice(discountPrice) !== price && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
+        ] })
+      ] }) })
+    ] }),
+    cartItem.onlyAvailableInShops && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.onlyInShops, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.onlyInShopsLabel, children: "Hentes i butikk" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: styles.tooltipTrigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", children: "Varen må hentes i butikk. Kan ikke kombineres med varer som ikke finnes i samme butikk." }) })
+      ] })
+    ] }),
+    ((_j = cartItem.discount) == null ? void 0 : _j.isManualDiscount) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.uniqueDiscount, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.uniqueDiscountLabel, children: cartItem.discount.name }),
+      (cartItem.discount.value.upfront || 0) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.uniqueDiscountPrice, children: [
+        "-",
+        formatPrice(cartItem.discount.value.upfront)
+      ] })
+    ] })
+  ] });
+};
+const CartItemDiscountBadges = ({ cartItem }) => {
+  var _a;
+  const discounts = ((_a = cartItem.discount) == null ? void 0 : _a.types) || [];
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: discounts.map((discount, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    components_badge_badge.Badge,
+    {
+      className: styles.discountDescription,
+      variant: discount.badgeVariant ?? "neutral",
+      hideIcon: true,
+      children: discount.text
+    },
+    `${discount.id}-${index}`
+  )) });
+};
+const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nameWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.link, children: [
+      cartItem.lineThrough && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethrough, children: cartItem.lineThrough }),
+      cartItem.href ? /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { href: cartItem.href, variant: "navigation", className: styles.cartLink, children: cartItem.name }) : cartItem.name,
+      cartItem.type === "BREAKAGE_FEE" && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: styles.tooltipTrigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: styles.breakageFeeInfo, children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", children: "Bruddgebyret er lik totalrabatten du får i kampanjen. Bruddgebyret reduseres månedlig ut avtaletiden, regnet fra når avtalen er inngått. Beløpet kommer på neste faktura." }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CartItemDiscountBadges, { cartItem })
+  ] }),
+  cartItem.color && /* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { variant: "paragraph-100", mb: "200", children: [
+    cartItem.color,
+    cartItem.modelSize ? ", " + cartItem.modelSize : ""
+  ] })
+] });
+const Item = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
+  var _a;
+  const { hasPaid, isAllowedToDelete } = components_shoppingCart_shoppingCartContext.useShoppingCart();
+  const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.item, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nameContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CartItemImage, { cartItem }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.name, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CartItemName, { cartItem }),
+        /* @__PURE__ */ jsxRuntime.jsx(CartItemPriceDisplay, { cartItem, onChangeQuantity, hasPaid })
+      ] })
+    ] }),
+    isRemovable && isAllowedToDelete && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onRemoveItem(cartItem), className: styles.deleteButtonContainer, children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "remove" }) })
+  ] });
+};
+Item.displayName = "Item";
+exports.Item = Item;

package/dist/components/shopping-cart/shopping-cart-item.d.ts

@@ -0,0 +1,11 @@
+import { CartItem } from './types';
+
+export interface ItemProps {
+    cartItem: CartItem;
+    onChangeQuantity: (cartItem: CartItem, quantity: number) => void;
+    onRemoveItem: (cartItem: CartItem) => void;
+}
+export declare const Item: {
+    ({ cartItem, onChangeQuantity, onRemoveItem }: ItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/shopping-cart/shopping-cart-item.js

@@ -0,0 +1,268 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "../../assets/sprite.6511e521-teddy.svg";
+import { Icon } from "../icon/icon.js";
+import { Text } from "../text/text.js";
+import { Link } from "../link/link.js";
+import { Button } from "../button/button.js";
+import { Badge } from "../badge/badge.js";
+import "../badge/alert-badge.js";
+import "../badge/counter-badge.js";
+import { Tooltip } from "../tooltip/index.js";
+import { CART_ITEM_TYPE } from "./types.js";
+import { useShoppingCart } from "./shopping-cart-context.js";
+import { getDiscountPrice, getPrice, defaultFormatPrice } from "./utils.js";
+const item = "_item_kjt5a_1";
+const breakageFeeInfo = "_breakageFeeInfo_kjt5a_7";
+const nameWrapper = "_nameWrapper_kjt5a_26";
+const link = "_link_kjt5a_33";
+const discountDescription = "_discountDescription_kjt5a_51";
+const name = "_name_kjt5a_26";
+const nameContainer = "_nameContainer_kjt5a_64";
+const subtitle = "_subtitle_kjt5a_68";
+const quantityPickerWrapper = "_quantityPickerWrapper_kjt5a_76";
+const pricePer = "_pricePer_kjt5a_83";
+const quantityPicker = "_quantityPicker_kjt5a_76";
+const priceContainer = "_priceContainer_kjt5a_95";
+const priceCost = "_priceCost_kjt5a_101";
+const priceLabel = "_priceLabel_kjt5a_109";
+const priceLinethrough = "_priceLinethrough_kjt5a_114";
+const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_kjt5a_124";
+const imageContainer = "_imageContainer_kjt5a_133";
+const noImageContainer = "_noImageContainer_kjt5a_145";
+const image = "_image_kjt5a_133";
+const iconImage = "_iconImage_kjt5a_158";
+const deleteButtonContainer = "_deleteButtonContainer_kjt5a_164";
+const uniqueDiscount = "_uniqueDiscount_kjt5a_191";
+const uniqueDiscountLabel = "_uniqueDiscountLabel_kjt5a_198";
+const uniqueDiscountPrice = "_uniqueDiscountPrice_kjt5a_204";
+const onlyInShops = "_onlyInShops_kjt5a_209";
+const onlyInShopsLabel = "_onlyInShopsLabel_kjt5a_216";
+const tooltipTrigger = "_tooltipTrigger_kjt5a_235";
+const priceWithTooltip = "_priceWithTooltip_kjt5a_243";
+const cartLink = "_cartLink_kjt5a_248";
+const styles = {
+  item,
+  breakageFeeInfo,
+  nameWrapper,
+  link,
+  discountDescription,
+  name,
+  nameContainer,
+  subtitle,
+  quantityPickerWrapper,
+  pricePer,
+  quantityPicker,
+  priceContainer,
+  priceCost,
+  priceLabel,
+  priceLinethrough,
+  priceLinethroughDisclaimer,
+  imageContainer,
+  noImageContainer,
+  image,
+  iconImage,
+  deleteButtonContainer,
+  uniqueDiscount,
+  uniqueDiscountLabel,
+  uniqueDiscountPrice,
+  onlyInShops,
+  onlyInShopsLabel,
+  tooltipTrigger,
+  priceWithTooltip,
+  cartLink
+};
+const QuantityPicker = ({
+  quantity,
+  onChangeQuantity,
+  cartItem,
+  shouldShowPricePerUnit,
+  isQuantityModifiable,
+  price,
+  discountValueUpfront,
+  discountValueMonthly,
+  hasPaid
+}) => {
+  const minQuantity = 1;
+  const maxQuantity = 10;
+  return /* @__PURE__ */ jsxs("div", { className: styles.quantityPickerWrapper, children: [
+    !hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.quantityPicker, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          iconOnly: true,
+          "aria-label": "Reduser antall",
+          disabled: quantity <= minQuantity,
+          onClick: () => onChangeQuantity(cartItem, quantity - 1),
+          children: /* @__PURE__ */ jsx(Icon, { name: "minus" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", children: quantity }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          iconOnly: true,
+          "aria-label": "Øk antall",
+          disabled: quantity >= maxQuantity,
+          onClick: () => onChangeQuantity(cartItem, quantity + 1),
+          children: /* @__PURE__ */ jsx(Icon, { name: "plus" })
+        }
+      )
+    ] }),
+    shouldShowPricePerUnit && /* @__PURE__ */ jsxs("span", { className: styles.pricePer, children: [
+      quantity > 1 && !isQuantityModifiable && `${quantity} x `,
+      `${getPrice(defaultFormatPrice, price, discountValueUpfront, discountValueMonthly, 1)}/stk`
+    ] })
+  ] });
+};
+const CartItemImage = ({ cartItem }) => {
+  if (!cartItem.image) {
+    return /* @__PURE__ */ jsx("div", { className: styles.noImageContainer });
+  }
+  const renderImage = () => {
+    var _a, _b;
+    if ((_a = cartItem.image) == null ? void 0 : _a.url) {
+      return /* @__PURE__ */ jsx("img", { className: styles.image, src: `${cartItem.image.url}?w=44&h=75`, alt: "" });
+    }
+    if ((_b = cartItem.image) == null ? void 0 : _b.icon) {
+      return /* @__PURE__ */ jsx(Icon, { className: styles.iconImage, name: cartItem.image.icon });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("div", { className: styles.imageContainer, children: cartItem.href ? /* @__PURE__ */ jsx(Link, { href: cartItem.href, variant: "navigation", className: styles.cartLink, children: renderImage() }) : renderImage() });
+};
+const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { formatPrice } = useShoppingCart();
+  const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
+  const isQuantityModifiable = !!((_b = cartItem.quantity) == null ? void 0 : _b.modifiable);
+  const shouldShowPricePerUnit = (!!cartItem.price.upfront || !!cartItem.price.firstInvoice) && quantity > 1;
+  const isManualDiscount = (_c = cartItem.discount) == null ? void 0 : _c.isManualDiscount;
+  const discountValueUpfront = isManualDiscount ? 0 : ((_e = (_d = cartItem.discount) == null ? void 0 : _d.value) == null ? void 0 : _e.upfront) || 0;
+  const isLease = cartItem.leaseMonths === 0 || !!cartItem.leaseMonths;
+  const hasSubscription = !!((_f = cartItem.items) == null ? void 0 : _f.find((item2) => item2.type.includes("SUBSCRIPTION")));
+  const discountValueMonthly = ((_h = (_g = cartItem.discount) == null ? void 0 : _g.value) == null ? void 0 : _h.monthly) || 0;
+  const discountPrice = getDiscountPrice(cartItem.price, quantity) || "";
+  const price = getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
+  const discountPriceText = ((_i = cartItem.discount) == null ? void 0 : _i.handsetDiscountText) || "";
+  const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(
+    Boolean
+  );
+  const suppressSubtitles = cartItem.type === CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: styles.price, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.priceContainer, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.subtitle, children: [
+        subtitles.length > 0 ? subtitles.map((sub) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-hj-suppress": suppressSubtitles,
+            className: "paragraph",
+            dangerouslySetInnerHTML: { __html: sub }
+          },
+          `${cartItem.bundleId}-${cartItem.id}-${sub}`
+        )) : /* @__PURE__ */ jsx("span", {}),
+        quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsx("span", { children: `${quantity} stk` }),
+        isQuantityModifiable && /* @__PURE__ */ jsx(
+          QuantityPicker,
+          {
+            quantity,
+            onChangeQuantity,
+            cartItem,
+            shouldShowPricePerUnit,
+            isQuantityModifiable,
+            price: cartItem.price,
+            discountValueUpfront,
+            discountValueMonthly,
+            hasPaid
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxs("span", { className: styles.priceCost, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.priceWithTooltip, children: [
+          discountPriceText && /* @__PURE__ */ jsxs(Tooltip, { defaultOpen: true, children: [
+            /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
+            /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: styles.priceLabel, children: [
+            /* @__PURE__ */ jsx("span", { children: isLease && !hasSubscription && "fra " }),
+            /* @__PURE__ */ jsx("span", { children: price }),
+            /* @__PURE__ */ jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
+          ] })
+        ] }),
+        discountPrice && formatPrice(discountPrice) !== price && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
+          /* @__PURE__ */ jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
+        ] })
+      ] }) })
+    ] }),
+    cartItem.onlyAvailableInShops && /* @__PURE__ */ jsxs("div", { className: styles.onlyInShops, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.onlyInShopsLabel, children: "Hentes i butikk" }),
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
+        /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", children: "Varen må hentes i butikk. Kan ikke kombineres med varer som ikke finnes i samme butikk." }) })
+      ] })
+    ] }),
+    ((_j = cartItem.discount) == null ? void 0 : _j.isManualDiscount) && /* @__PURE__ */ jsxs("div", { className: styles.uniqueDiscount, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.uniqueDiscountLabel, children: cartItem.discount.name }),
+      (cartItem.discount.value.upfront || 0) > 0 && /* @__PURE__ */ jsxs("span", { className: styles.uniqueDiscountPrice, children: [
+        "-",
+        formatPrice(cartItem.discount.value.upfront)
+      ] })
+    ] })
+  ] });
+};
+const CartItemDiscountBadges = ({ cartItem }) => {
+  var _a;
+  const discounts = ((_a = cartItem.discount) == null ? void 0 : _a.types) || [];
+  return /* @__PURE__ */ jsx(Fragment, { children: discounts.map((discount, index) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: styles.discountDescription,
+      variant: discount.badgeVariant ?? "neutral",
+      hideIcon: true,
+      children: discount.text
+    },
+    `${discount.id}-${index}`
+  )) });
+};
+const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsxs("div", { className: styles.nameWrapper, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.link, children: [
+      cartItem.lineThrough && /* @__PURE__ */ jsx("span", { className: styles.priceLinethrough, children: cartItem.lineThrough }),
+      cartItem.href ? /* @__PURE__ */ jsx(Link, { href: cartItem.href, variant: "navigation", className: styles.cartLink, children: cartItem.name }) : cartItem.name,
+      cartItem.type === "BREAKAGE_FEE" && /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
+        /* @__PURE__ */ jsx(Tooltip.Content, { className: styles.breakageFeeInfo, children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", children: "Bruddgebyret er lik totalrabatten du får i kampanjen. Bruddgebyret reduseres månedlig ut avtaletiden, regnet fra når avtalen er inngått. Beløpet kommer på neste faktura." }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CartItemDiscountBadges, { cartItem })
+  ] }),
+  cartItem.color && /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100", mb: "200", children: [
+    cartItem.color,
+    cartItem.modelSize ? ", " + cartItem.modelSize : ""
+  ] })
+] });
+const Item = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
+  var _a;
+  const { hasPaid, isAllowedToDelete } = useShoppingCart();
+  const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
+  return /* @__PURE__ */ jsxs("div", { className: styles.item, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.nameContainer, children: [
+      /* @__PURE__ */ jsx(CartItemImage, { cartItem }),
+      /* @__PURE__ */ jsxs("div", { className: styles.name, children: [
+        /* @__PURE__ */ jsx(CartItemName, { cartItem }),
+        /* @__PURE__ */ jsx(CartItemPriceDisplay, { cartItem, onChangeQuantity, hasPaid })
+      ] })
+    ] }),
+    isRemovable && isAllowedToDelete && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onRemoveItem(cartItem), className: styles.deleteButtonContainer, children: /* @__PURE__ */ jsx(Icon, { name: "remove" }) })
+  ] });
+};
+Item.displayName = "Item";
+export {
+  Item
+};

package/dist/components/shopping-cart/shopping-cart-items.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_shoppingCart_shoppingCartItem = require("./shopping-cart-item.cjs");
+const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
+const components_shoppingCart_utils = require("./utils.cjs");
+const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
+  const renderCartItem = (item) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_shoppingCart_shoppingCartItem.Item, { cartItem: item, onChangeQuantity, onRemoveItem }),
+    item.items && item.items.length > 0 && components_shoppingCart_utils.sortByType(item.items).map((subItem) => renderCartItem(subItem))
+  ] }, item.id);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.sectionBody, children: renderCartItem(cartItem) });
+};
+const Items = ({ cartItems, onChangeQuantity, onRemoveItem }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { children: components_shoppingCart_utils.sortByType(cartItems).map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ItemGroup, { cartItem: item, onChangeQuantity, onRemoveItem }) }, `${item.id}-${item.bundleId}`)) });
+};
+Items.displayName = "Items";
+exports.Items = Items;

package/dist/components/shopping-cart/shopping-cart-items.d.ts

@@ -0,0 +1,11 @@
+import { CartItem } from './types';
+
+export interface ItemsProps {
+    cartItems: CartItem[];
+    onChangeQuantity: (item: CartItem, quantity: number) => void;
+    onRemoveItem: (item: CartItem) => void;
+}
+export declare const Items: {
+    ({ cartItems, onChangeQuantity, onRemoveItem }: ItemsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/shopping-cart/shopping-cart-items.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { Item } from "./shopping-cart-item.js";
+import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
+import { sortByType } from "./utils.js";
+const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
+  const renderCartItem = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Item, { cartItem: item, onChangeQuantity, onRemoveItem }),
+    item.items && item.items.length > 0 && sortByType(item.items).map((subItem) => renderCartItem(subItem))
+  ] }, item.id);
+  return /* @__PURE__ */ jsx("div", { className: styles.sectionBody, children: renderCartItem(cartItem) });
+};
+const Items = ({ cartItems, onChangeQuantity, onRemoveItem }) => {
+  return /* @__PURE__ */ jsx("section", { children: sortByType(cartItems).map((item) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ItemGroup, { cartItem: item, onChangeQuantity, onRemoveItem }) }, `${item.id}-${item.bundleId}`)) });
+};
+Items.displayName = "Items";
+export {
+  Items
+};