@telia/teddy 0.7.71 → 0.7.73

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

@@ -12,38 +12,39 @@ 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_1xnov_1";
-const breakageFeeInfo = "_breakageFeeInfo_1xnov_7";
-const nameWrapper = "_nameWrapper_1xnov_26";
-const link = "_link_1xnov_33";
-const cartLink = "_cartLink_1xnov_51";
-const discountDescription = "_discountDescription_1xnov_59";
-const name = "_name_1xnov_26";
-const nameContainer = "_nameContainer_1xnov_72";
-const subtitle = "_subtitle_1xnov_76";
-const subtitleRow = "_subtitleRow_1xnov_84";
-const subtitlePriceInfo = "_subtitlePriceInfo_1xnov_91";
-const quantityPickerWrapper = "_quantityPickerWrapper_1xnov_97";
-const pricePer = "_pricePer_1xnov_104";
-const quantityPicker = "_quantityPicker_1xnov_97";
-const priceContainer = "_priceContainer_1xnov_116";
-const priceRow = "_priceRow_1xnov_123";
-const priceCost = "_priceCost_1xnov_129";
-const priceLabel = "_priceLabel_1xnov_137";
-const priceLinethrough = "_priceLinethrough_1xnov_142";
-const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1xnov_152";
-const imageContainer = "_imageContainer_1xnov_161";
-const noImageContainer = "_noImageContainer_1xnov_173";
-const image = "_image_1xnov_161";
-const iconImage = "_iconImage_1xnov_186";
-const deleteButtonContainer = "_deleteButtonContainer_1xnov_192";
-const uniqueDiscount = "_uniqueDiscount_1xnov_219";
-const uniqueDiscountLabel = "_uniqueDiscountLabel_1xnov_226";
-const uniqueDiscountPrice = "_uniqueDiscountPrice_1xnov_232";
-const onlyInShops = "_onlyInShops_1xnov_237";
-const onlyInShopsLabel = "_onlyInShopsLabel_1xnov_244";
-const tooltipTrigger = "_tooltipTrigger_1xnov_263";
-const priceWrapper = "_priceWrapper_1xnov_271";
+const item = "_item_15muv_1";
+const breakageFeeInfo = "_breakageFeeInfo_15muv_7";
+const nameWrapper = "_nameWrapper_15muv_26";
+const link = "_link_15muv_33";
+const cartLink = "_cartLink_15muv_51";
+const discountDescription = "_discountDescription_15muv_59";
+const name = "_name_15muv_26";
+const nameContainer = "_nameContainer_15muv_72";
+const quantityWrapper = "_quantityWrapper_15muv_76";
+const subtitleRow = "_subtitleRow_15muv_84";
+const subtitlePriceInfo = "_subtitlePriceInfo_15muv_91";
+const quantityPickerWrapper = "_quantityPickerWrapper_15muv_97";
+const pricePer = "_pricePer_15muv_104";
+const quantityPicker = "_quantityPicker_15muv_97";
+const characteristics = "_characteristics_15muv_116";
+const price = "_price_15muv_104";
+const quantityContainer = "_quantityContainer_15muv_126";
+const priceCost = "_priceCost_15muv_133";
+const priceLabel = "_priceLabel_15muv_141";
+const priceLinethrough = "_priceLinethrough_15muv_146";
+const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_15muv_156";
+const imageContainer = "_imageContainer_15muv_165";
+const noImageContainer = "_noImageContainer_15muv_177";
+const image = "_image_15muv_165";
+const iconImage = "_iconImage_15muv_190";
+const deleteButtonContainer = "_deleteButtonContainer_15muv_196";
+const uniqueDiscount = "_uniqueDiscount_15muv_223";
+const uniqueDiscountLabel = "_uniqueDiscountLabel_15muv_230";
+const uniqueDiscountPrice = "_uniqueDiscountPrice_15muv_236";
+const onlyInShops = "_onlyInShops_15muv_241";
+const onlyInShopsLabel = "_onlyInShopsLabel_15muv_248";
+const tooltipTrigger = "_tooltipTrigger_15muv_267";
+const priceWrapper = "_priceWrapper_15muv_275";
 const styles = {
   item,
   breakageFeeInfo,
@@ -53,14 +54,15 @@ const styles = {
   discountDescription,
   name,
   nameContainer,
-  subtitle,
+  quantityWrapper,
   subtitleRow,
   subtitlePriceInfo,
   quantityPickerWrapper,
   pricePer,
   quantityPicker,
-  priceContainer,
-  priceRow,
+  characteristics,
+  price,
+  quantityContainer,
   priceCost,
   priceLabel,
   priceLinethrough,
@@ -84,7 +86,7 @@ const QuantityPicker = ({
   cartItem,
   shouldShowPricePerUnit,
   isQuantityModifiable,
-  price,
+  price: price2,
   discountValueUpfront,
   discountValueMonthly,
   hasPaid
@@ -123,7 +125,7 @@ const QuantityPicker = ({
     ] }),
     shouldShowPricePerUnit && /* @__PURE__ */ jsxs("span", { className: styles.pricePer, children: [
       quantity > 1 && !isQuantityModifiable && `${quantity} x `,
-      `${getPrice(defaultFormatPrice, price, discountValueUpfront, discountValueMonthly, 1)}/stk`
+      `${getPrice(defaultFormatPrice, price2, discountValueUpfront, discountValueMonthly, 1)}/stk`
     ] })
   ] });
 };
@@ -143,69 +145,35 @@ const CartItemImage = ({ cartItem }) => {
   };
   return /* @__PURE__ */ jsx("div", { className: styles.imageContainer, children: cartItem.href ? /* @__PURE__ */ jsx(Link, { href: cartItem.href, "aria-label": cartItem.name, 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 CartItemDetails = ({ cartItem, hasPaid, onChangeQuantity }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { formatPrice, readonly } = 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 discountValueMonthly = ((_g = (_f = cartItem.discount) == null ? void 0 : _f.value) == null ? void 0 : _g.monthly) || 0;
   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.priceRow, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.subtitle, children: [
-          subtitles.length > 0 ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-hj-suppress": suppressSubtitles,
-              className: "paragraph",
-              dangerouslySetInnerHTML: {
-                __html: typeof subtitles[0] === "string" ? subtitles[0] : subtitles[0].description
-              }
-            }
-          ) : /* @__PURE__ */ jsx("span", {}),
-          quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsx("span", { children: `${quantity} stk` }),
-          isQuantityModifiable && !readonly && /* @__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.priceWrapper, 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) })
-          ] })
-        ] }) })
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.quantityContainer, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.quantityWrapper, children: [
+        quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsx("span", { children: `${quantity} stk` }),
+        isQuantityModifiable && !readonly && /* @__PURE__ */ jsx(
+          QuantityPicker,
+          {
+            quantity,
+            onChangeQuantity,
+            cartItem,
+            shouldShowPricePerUnit,
+            isQuantityModifiable,
+            price: cartItem.price,
+            discountValueUpfront,
+            discountValueMonthly,
+            hasPaid
+          }
+        )
       ] }),
       subtitles.slice(1).map((sub, index) => {
         const description = typeof sub === "string" ? sub : sub.description;
@@ -231,7 +199,7 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
         /* @__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: [
+    ((_h = cartItem.discount) == null ? void 0 : _h.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: [
         "-",
@@ -254,8 +222,8 @@ const CartItemDiscountBadges = ({ cartItem }) => {
     `${discount.id}-${index}`
   )) });
 };
-const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs("div", { className: styles.nameWrapper, children: [
+const CartItemName = ({ cartItem }) => {
+  return /* @__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,
@@ -265,22 +233,36 @@ const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxs(Fragment, { children
       ] })
     ] }),
     /* @__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, className }) => {
   var _a;
   const { hasPaid, isAllowedToDelete, readonly } = useShoppingCart();
   const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
+  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: clsx(styles.item, className), 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 })
+        /* @__PURE__ */ jsxs("div", { className: styles.characteristics, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Characteristics, { cartItem }),
+            subtitles.length > 0 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hj-suppress": suppressSubtitles,
+                className: styles.subtitle,
+                dangerouslySetInnerHTML: {
+                  __html: typeof subtitles[0] === "string" ? subtitles[0] : subtitles[0].description
+                }
+              }
+            ) : /* @__PURE__ */ jsx("span", {})
+          ] }),
+          /* @__PURE__ */ jsx(Price, { cartItem })
+        ] }),
+        /* @__PURE__ */ jsx(CartItemDetails, { cartItem, onChangeQuantity, hasPaid })
       ] })
     ] }),
     isRemovable && isAllowedToDelete && !readonly && /* @__PURE__ */ jsx(
@@ -295,6 +277,43 @@ const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
     )
   ] });
 };
+const Price = ({ cartItem }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { formatPrice } = useShoppingCart();
+  const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
+  const isLease = cartItem.leaseMonths === 0 || !!cartItem.leaseMonths;
+  const hasSubscription = !!((_b = cartItem.items) == null ? void 0 : _b.find((item2) => item2.type.includes("SUBSCRIPTION")));
+  const isManualDiscount = (_c = cartItem.discount) == null ? void 0 : _c.isManualDiscount;
+  const discountValueMonthly = ((_e = (_d = cartItem.discount) == null ? void 0 : _d.value) == null ? void 0 : _e.monthly) || 0;
+  const discountValueUpfront = isManualDiscount ? 0 : ((_g = (_f = cartItem.discount) == null ? void 0 : _f.value) == null ? void 0 : _g.upfront) || 0;
+  const discountPrice = getDiscountPrice(cartItem.price, quantity) || "";
+  const price2 = getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
+  const discountPriceText = ((_h = cartItem.discount) == null ? void 0 : _h.handsetDiscountText) || "";
+  return /* @__PURE__ */ jsx("div", { className: styles.price, children: /* @__PURE__ */ jsxs("span", { className: styles.priceCost, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.priceWrapper, 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: price2 }),
+        /* @__PURE__ */ jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
+      ] })
+    ] }),
+    discountPrice && formatPrice(discountPrice) !== price2 && /* @__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) })
+    ] })
+  ] }) });
+};
+const Characteristics = ({ cartItem }) => {
+  if (!cartItem.color) return null;
+  return /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100", mb: "100", children: [
+    cartItem.color,
+    cartItem.modelSize ? ", " + cartItem.modelSize : ""
+  ] });
+};
 Item.displayName = "Item";
 export {
   Item