@telia/teddy 0.7.57 → 0.7.58

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.
@@ -14,35 +14,38 @@ const components_tooltip_index = require("../tooltip/index.cjs");
14
14
  const components_shoppingCart_types = require("./types.cjs");
15
15
  const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
16
16
  const components_shoppingCart_utils = require("./utils.cjs");
17
- const item = "_item_1rldv_1";
18
- const breakageFeeInfo = "_breakageFeeInfo_1rldv_7";
19
- const nameWrapper = "_nameWrapper_1rldv_26";
20
- const link = "_link_1rldv_33";
21
- const cartLink = "_cartLink_1rldv_51";
22
- const discountDescription = "_discountDescription_1rldv_59";
23
- const name = "_name_1rldv_26";
24
- const nameContainer = "_nameContainer_1rldv_72";
25
- const subtitle = "_subtitle_1rldv_76";
26
- const quantityPickerWrapper = "_quantityPickerWrapper_1rldv_84";
27
- const pricePer = "_pricePer_1rldv_91";
28
- const quantityPicker = "_quantityPicker_1rldv_84";
29
- const priceContainer = "_priceContainer_1rldv_103";
30
- const priceCost = "_priceCost_1rldv_110";
31
- const priceLabel = "_priceLabel_1rldv_118";
32
- const priceLinethrough = "_priceLinethrough_1rldv_123";
33
- const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1rldv_133";
34
- const imageContainer = "_imageContainer_1rldv_142";
35
- const noImageContainer = "_noImageContainer_1rldv_154";
36
- const image = "_image_1rldv_142";
37
- const iconImage = "_iconImage_1rldv_167";
38
- const deleteButtonContainer = "_deleteButtonContainer_1rldv_173";
39
- const uniqueDiscount = "_uniqueDiscount_1rldv_200";
40
- const uniqueDiscountLabel = "_uniqueDiscountLabel_1rldv_207";
41
- const uniqueDiscountPrice = "_uniqueDiscountPrice_1rldv_213";
42
- const onlyInShops = "_onlyInShops_1rldv_218";
43
- const onlyInShopsLabel = "_onlyInShopsLabel_1rldv_225";
44
- const tooltipTrigger = "_tooltipTrigger_1rldv_244";
45
- const priceWrapper = "_priceWrapper_1rldv_252";
17
+ const item = "_item_1rxjf_1";
18
+ const breakageFeeInfo = "_breakageFeeInfo_1rxjf_7";
19
+ const nameWrapper = "_nameWrapper_1rxjf_26";
20
+ const link = "_link_1rxjf_33";
21
+ const cartLink = "_cartLink_1rxjf_51";
22
+ const discountDescription = "_discountDescription_1rxjf_59";
23
+ const name = "_name_1rxjf_26";
24
+ const nameContainer = "_nameContainer_1rxjf_72";
25
+ const subtitle = "_subtitle_1rxjf_76";
26
+ const subtitleRow = "_subtitleRow_1rxjf_84";
27
+ const subtitlePriceInfo = "_subtitlePriceInfo_1rxjf_91";
28
+ const quantityPickerWrapper = "_quantityPickerWrapper_1rxjf_97";
29
+ const pricePer = "_pricePer_1rxjf_104";
30
+ const quantityPicker = "_quantityPicker_1rxjf_97";
31
+ const priceContainer = "_priceContainer_1rxjf_116";
32
+ const priceRow = "_priceRow_1rxjf_123";
33
+ const priceCost = "_priceCost_1rxjf_129";
34
+ const priceLabel = "_priceLabel_1rxjf_137";
35
+ const priceLinethrough = "_priceLinethrough_1rxjf_142";
36
+ const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1rxjf_152";
37
+ const imageContainer = "_imageContainer_1rxjf_161";
38
+ const noImageContainer = "_noImageContainer_1rxjf_173";
39
+ const image = "_image_1rxjf_161";
40
+ const iconImage = "_iconImage_1rxjf_186";
41
+ const deleteButtonContainer = "_deleteButtonContainer_1rxjf_192";
42
+ const uniqueDiscount = "_uniqueDiscount_1rxjf_219";
43
+ const uniqueDiscountLabel = "_uniqueDiscountLabel_1rxjf_226";
44
+ const uniqueDiscountPrice = "_uniqueDiscountPrice_1rxjf_232";
45
+ const onlyInShops = "_onlyInShops_1rxjf_237";
46
+ const onlyInShopsLabel = "_onlyInShopsLabel_1rxjf_244";
47
+ const tooltipTrigger = "_tooltipTrigger_1rxjf_263";
48
+ const priceWrapper = "_priceWrapper_1rxjf_271";
46
49
  const styles = {
47
50
  item,
48
51
  breakageFeeInfo,
@@ -53,10 +56,13 @@ const styles = {
53
56
  name,
54
57
  nameContainer,
55
58
  subtitle,
59
+ subtitleRow,
60
+ subtitlePriceInfo,
56
61
  quantityPickerWrapper,
57
62
  pricePer,
58
63
  quantityPicker,
59
64
  priceContainer,
65
+ priceRow,
60
66
  priceCost,
61
67
  priceLabel,
62
68
  priceLinethrough,
@@ -153,55 +159,72 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
153
159
  const discountPrice = components_shoppingCart_utils.getDiscountPrice(cartItem.price, quantity) || "";
154
160
  const price = components_shoppingCart_utils.getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
155
161
  const discountPriceText = ((_i = cartItem.discount) == null ? void 0 : _i.handsetDiscountText) || "";
156
- const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(
157
- Boolean
158
- );
162
+ const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(Boolean);
159
163
  const suppressSubtitles = cartItem.type === components_shoppingCart_types.CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
160
164
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.price, children: [
161
165
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceContainer, children: [
162
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.subtitle, children: [
163
- subtitles.length > 0 ? subtitles.map((sub) => /* @__PURE__ */ jsxRuntime.jsx(
166
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceRow, children: [
167
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.subtitle, children: [
168
+ subtitles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
169
+ "div",
170
+ {
171
+ "data-hj-suppress": suppressSubtitles,
172
+ className: "paragraph",
173
+ dangerouslySetInnerHTML: {
174
+ __html: typeof subtitles[0] === "string" ? subtitles[0] : subtitles[0].description
175
+ }
176
+ }
177
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
178
+ quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${quantity} stk` }),
179
+ isQuantityModifiable && !readonly && /* @__PURE__ */ jsxRuntime.jsx(
180
+ QuantityPicker,
181
+ {
182
+ quantity,
183
+ onChangeQuantity,
184
+ cartItem,
185
+ shouldShowPricePerUnit,
186
+ isQuantityModifiable,
187
+ price: cartItem.price,
188
+ discountValueUpfront,
189
+ discountValueMonthly,
190
+ hasPaid
191
+ }
192
+ )
193
+ ] }),
194
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceCost, children: [
195
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceWrapper, children: [
196
+ discountPriceText && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { defaultOpen: true, children: [
197
+ /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: styles.tooltipTrigger }),
198
+ /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
199
+ ] }),
200
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceLabel, children: [
201
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: isLease && !hasSubscription && "fra " }),
202
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: price }),
203
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
204
+ ] })
205
+ ] }),
206
+ discountPrice && formatPrice(discountPrice) !== price && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
207
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
208
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
209
+ ] })
210
+ ] }) })
211
+ ] }),
212
+ subtitles.slice(1).map((sub, index) => {
213
+ const description = typeof sub === "string" ? sub : sub.description;
214
+ const priceInfo = typeof sub === "string" ? void 0 : sub.priceInfo;
215
+ return /* @__PURE__ */ jsxRuntime.jsxs(
164
216
  "div",
165
217
  {
166
218
  "data-hj-suppress": suppressSubtitles,
167
- className: "paragraph",
168
- dangerouslySetInnerHTML: { __html: sub }
219
+ className: styles.subtitleRow,
220
+ children: [
221
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "paragraph", dangerouslySetInnerHTML: { __html: description } }),
222
+ priceInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.subtitlePriceInfo, children: priceInfo })
223
+ ]
169
224
  },
170
- `${cartItem.bundleId}-${cartItem.id}-${sub}`
171
- )) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
172
- quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${quantity} stk` }),
173
- isQuantityModifiable && !readonly && /* @__PURE__ */ jsxRuntime.jsx(
174
- QuantityPicker,
175
- {
176
- quantity,
177
- onChangeQuantity,
178
- cartItem,
179
- shouldShowPricePerUnit,
180
- isQuantityModifiable,
181
- price: cartItem.price,
182
- discountValueUpfront,
183
- discountValueMonthly,
184
- hasPaid
185
- }
186
- )
187
- ] }),
188
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceCost, children: [
189
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceWrapper, children: [
190
- discountPriceText && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { defaultOpen: true, children: [
191
- /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: styles.tooltipTrigger }),
192
- /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
193
- ] }),
194
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceLabel, children: [
195
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: isLease && !hasSubscription && "fra " }),
196
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: price }),
197
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
198
- ] })
199
- ] }),
200
- discountPrice && formatPrice(discountPrice) !== price && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
201
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
202
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
203
- ] })
204
- ] }) })
225
+ `${cartItem.bundleId}-${cartItem.id}-${index + 1}`
226
+ );
227
+ })
205
228
  ] }),
206
229
  cartItem.onlyAvailableInShops && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.onlyInShops, children: [
207
230
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.onlyInShopsLabel, children: "Hentes i butikk" }),
@@ -12,35 +12,38 @@ import { Tooltip } from "../tooltip/index.js";
12
12
  import { CART_ITEM_TYPE } from "./types.js";
13
13
  import { useShoppingCart } from "./shopping-cart-context.js";
14
14
  import { getDiscountPrice, getPrice, defaultFormatPrice } from "./utils.js";
15
- const item = "_item_1rldv_1";
16
- const breakageFeeInfo = "_breakageFeeInfo_1rldv_7";
17
- const nameWrapper = "_nameWrapper_1rldv_26";
18
- const link = "_link_1rldv_33";
19
- const cartLink = "_cartLink_1rldv_51";
20
- const discountDescription = "_discountDescription_1rldv_59";
21
- const name = "_name_1rldv_26";
22
- const nameContainer = "_nameContainer_1rldv_72";
23
- const subtitle = "_subtitle_1rldv_76";
24
- const quantityPickerWrapper = "_quantityPickerWrapper_1rldv_84";
25
- const pricePer = "_pricePer_1rldv_91";
26
- const quantityPicker = "_quantityPicker_1rldv_84";
27
- const priceContainer = "_priceContainer_1rldv_103";
28
- const priceCost = "_priceCost_1rldv_110";
29
- const priceLabel = "_priceLabel_1rldv_118";
30
- const priceLinethrough = "_priceLinethrough_1rldv_123";
31
- const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1rldv_133";
32
- const imageContainer = "_imageContainer_1rldv_142";
33
- const noImageContainer = "_noImageContainer_1rldv_154";
34
- const image = "_image_1rldv_142";
35
- const iconImage = "_iconImage_1rldv_167";
36
- const deleteButtonContainer = "_deleteButtonContainer_1rldv_173";
37
- const uniqueDiscount = "_uniqueDiscount_1rldv_200";
38
- const uniqueDiscountLabel = "_uniqueDiscountLabel_1rldv_207";
39
- const uniqueDiscountPrice = "_uniqueDiscountPrice_1rldv_213";
40
- const onlyInShops = "_onlyInShops_1rldv_218";
41
- const onlyInShopsLabel = "_onlyInShopsLabel_1rldv_225";
42
- const tooltipTrigger = "_tooltipTrigger_1rldv_244";
43
- const priceWrapper = "_priceWrapper_1rldv_252";
15
+ const item = "_item_1rxjf_1";
16
+ const breakageFeeInfo = "_breakageFeeInfo_1rxjf_7";
17
+ const nameWrapper = "_nameWrapper_1rxjf_26";
18
+ const link = "_link_1rxjf_33";
19
+ const cartLink = "_cartLink_1rxjf_51";
20
+ const discountDescription = "_discountDescription_1rxjf_59";
21
+ const name = "_name_1rxjf_26";
22
+ const nameContainer = "_nameContainer_1rxjf_72";
23
+ const subtitle = "_subtitle_1rxjf_76";
24
+ const subtitleRow = "_subtitleRow_1rxjf_84";
25
+ const subtitlePriceInfo = "_subtitlePriceInfo_1rxjf_91";
26
+ const quantityPickerWrapper = "_quantityPickerWrapper_1rxjf_97";
27
+ const pricePer = "_pricePer_1rxjf_104";
28
+ const quantityPicker = "_quantityPicker_1rxjf_97";
29
+ const priceContainer = "_priceContainer_1rxjf_116";
30
+ const priceRow = "_priceRow_1rxjf_123";
31
+ const priceCost = "_priceCost_1rxjf_129";
32
+ const priceLabel = "_priceLabel_1rxjf_137";
33
+ const priceLinethrough = "_priceLinethrough_1rxjf_142";
34
+ const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1rxjf_152";
35
+ const imageContainer = "_imageContainer_1rxjf_161";
36
+ const noImageContainer = "_noImageContainer_1rxjf_173";
37
+ const image = "_image_1rxjf_161";
38
+ const iconImage = "_iconImage_1rxjf_186";
39
+ const deleteButtonContainer = "_deleteButtonContainer_1rxjf_192";
40
+ const uniqueDiscount = "_uniqueDiscount_1rxjf_219";
41
+ const uniqueDiscountLabel = "_uniqueDiscountLabel_1rxjf_226";
42
+ const uniqueDiscountPrice = "_uniqueDiscountPrice_1rxjf_232";
43
+ const onlyInShops = "_onlyInShops_1rxjf_237";
44
+ const onlyInShopsLabel = "_onlyInShopsLabel_1rxjf_244";
45
+ const tooltipTrigger = "_tooltipTrigger_1rxjf_263";
46
+ const priceWrapper = "_priceWrapper_1rxjf_271";
44
47
  const styles = {
45
48
  item,
46
49
  breakageFeeInfo,
@@ -51,10 +54,13 @@ const styles = {
51
54
  name,
52
55
  nameContainer,
53
56
  subtitle,
57
+ subtitleRow,
58
+ subtitlePriceInfo,
54
59
  quantityPickerWrapper,
55
60
  pricePer,
56
61
  quantityPicker,
57
62
  priceContainer,
63
+ priceRow,
58
64
  priceCost,
59
65
  priceLabel,
60
66
  priceLinethrough,
@@ -151,55 +157,72 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
151
157
  const discountPrice = getDiscountPrice(cartItem.price, quantity) || "";
152
158
  const price = getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
153
159
  const discountPriceText = ((_i = cartItem.discount) == null ? void 0 : _i.handsetDiscountText) || "";
154
- const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(
155
- Boolean
156
- );
160
+ const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(Boolean);
157
161
  const suppressSubtitles = cartItem.type === CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
158
162
  return /* @__PURE__ */ jsxs("div", { className: styles.price, children: [
159
163
  /* @__PURE__ */ jsxs("div", { className: styles.priceContainer, children: [
160
- /* @__PURE__ */ jsxs("div", { className: styles.subtitle, children: [
161
- subtitles.length > 0 ? subtitles.map((sub) => /* @__PURE__ */ jsx(
164
+ /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
165
+ /* @__PURE__ */ jsxs("div", { className: styles.subtitle, children: [
166
+ subtitles.length > 0 ? /* @__PURE__ */ jsx(
167
+ "div",
168
+ {
169
+ "data-hj-suppress": suppressSubtitles,
170
+ className: "paragraph",
171
+ dangerouslySetInnerHTML: {
172
+ __html: typeof subtitles[0] === "string" ? subtitles[0] : subtitles[0].description
173
+ }
174
+ }
175
+ ) : /* @__PURE__ */ jsx("span", {}),
176
+ quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsx("span", { children: `${quantity} stk` }),
177
+ isQuantityModifiable && !readonly && /* @__PURE__ */ jsx(
178
+ QuantityPicker,
179
+ {
180
+ quantity,
181
+ onChangeQuantity,
182
+ cartItem,
183
+ shouldShowPricePerUnit,
184
+ isQuantityModifiable,
185
+ price: cartItem.price,
186
+ discountValueUpfront,
187
+ discountValueMonthly,
188
+ hasPaid
189
+ }
190
+ )
191
+ ] }),
192
+ /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxs("span", { className: styles.priceCost, children: [
193
+ /* @__PURE__ */ jsxs("div", { className: styles.priceWrapper, children: [
194
+ discountPriceText && /* @__PURE__ */ jsxs(Tooltip, { defaultOpen: true, children: [
195
+ /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
196
+ /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
197
+ ] }),
198
+ /* @__PURE__ */ jsxs("span", { className: styles.priceLabel, children: [
199
+ /* @__PURE__ */ jsx("span", { children: isLease && !hasSubscription && "fra " }),
200
+ /* @__PURE__ */ jsx("span", { children: price }),
201
+ /* @__PURE__ */ jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
202
+ ] })
203
+ ] }),
204
+ discountPrice && formatPrice(discountPrice) !== price && /* @__PURE__ */ jsxs(Fragment, { children: [
205
+ /* @__PURE__ */ jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
206
+ /* @__PURE__ */ jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
207
+ ] })
208
+ ] }) })
209
+ ] }),
210
+ subtitles.slice(1).map((sub, index) => {
211
+ const description = typeof sub === "string" ? sub : sub.description;
212
+ const priceInfo = typeof sub === "string" ? void 0 : sub.priceInfo;
213
+ return /* @__PURE__ */ jsxs(
162
214
  "div",
163
215
  {
164
216
  "data-hj-suppress": suppressSubtitles,
165
- className: "paragraph",
166
- dangerouslySetInnerHTML: { __html: sub }
217
+ className: styles.subtitleRow,
218
+ children: [
219
+ /* @__PURE__ */ jsx("span", { className: "paragraph", dangerouslySetInnerHTML: { __html: description } }),
220
+ priceInfo && /* @__PURE__ */ jsx("span", { className: styles.subtitlePriceInfo, children: priceInfo })
221
+ ]
167
222
  },
168
- `${cartItem.bundleId}-${cartItem.id}-${sub}`
169
- )) : /* @__PURE__ */ jsx("span", {}),
170
- quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsx("span", { children: `${quantity} stk` }),
171
- isQuantityModifiable && !readonly && /* @__PURE__ */ jsx(
172
- QuantityPicker,
173
- {
174
- quantity,
175
- onChangeQuantity,
176
- cartItem,
177
- shouldShowPricePerUnit,
178
- isQuantityModifiable,
179
- price: cartItem.price,
180
- discountValueUpfront,
181
- discountValueMonthly,
182
- hasPaid
183
- }
184
- )
185
- ] }),
186
- /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxs("span", { className: styles.priceCost, children: [
187
- /* @__PURE__ */ jsxs("div", { className: styles.priceWrapper, children: [
188
- discountPriceText && /* @__PURE__ */ jsxs(Tooltip, { defaultOpen: true, children: [
189
- /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
190
- /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
191
- ] }),
192
- /* @__PURE__ */ jsxs("span", { className: styles.priceLabel, children: [
193
- /* @__PURE__ */ jsx("span", { children: isLease && !hasSubscription && "fra " }),
194
- /* @__PURE__ */ jsx("span", { children: price }),
195
- /* @__PURE__ */ jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
196
- ] })
197
- ] }),
198
- discountPrice && formatPrice(discountPrice) !== price && /* @__PURE__ */ jsxs(Fragment, { children: [
199
- /* @__PURE__ */ jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
200
- /* @__PURE__ */ jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
201
- ] })
202
- ] }) })
223
+ `${cartItem.bundleId}-${cartItem.id}-${index + 1}`
224
+ );
225
+ })
203
226
  ] }),
204
227
  cartItem.onlyAvailableInShops && /* @__PURE__ */ jsxs("div", { className: styles.onlyInShops, children: [
205
228
  /* @__PURE__ */ jsx("span", { className: styles.onlyInShopsLabel, children: "Hentes i butikk" }),
@@ -147,6 +147,10 @@ export interface CartItemImage {
147
147
  url?: string;
148
148
  icon?: string;
149
149
  }
150
+ export interface CartSubtitleItem {
151
+ description: string;
152
+ priceInfo?: string;
153
+ }
150
154
  export interface CartItem {
151
155
  type: CartType;
152
156
  subtype?: string;
@@ -157,7 +161,7 @@ export interface CartItem {
157
161
  name: string;
158
162
  href?: string;
159
163
  lineThrough?: string;
160
- subtitle?: string | string[];
164
+ subtitle?: string | CartSubtitleItem | (string | CartSubtitleItem)[];
161
165
  brand?: string;
162
166
  brandSlug?: string;
163
167
  model?: string;
package/dist/style.css CHANGED
@@ -1408,13 +1408,13 @@
1408
1408
  opacity: 1;
1409
1409
  transform: translateX(0);
1410
1410
  }
1411
- }._item_1rldv_1 {
1411
+ }._item_1rxjf_1 {
1412
1412
  position: relative;
1413
1413
  background-color: var(--teddy-color-functional-white);
1414
1414
  border-radius: var(--teddy-border-radius-md);
1415
1415
  }
1416
1416
 
1417
- ._breakageFeeInfo_1rldv_7 {
1417
+ ._breakageFeeInfo_1rxjf_7 {
1418
1418
  position: relative;
1419
1419
  font-family: var(--teddy-typography-family-default);
1420
1420
  font-weight: var(--teddy-typography-weight-normal);
@@ -1422,7 +1422,7 @@
1422
1422
  font-size: var(--teddy-typography-scale-100);
1423
1423
  }
1424
1424
 
1425
- ._itemIcon_1rldv_15 {
1425
+ ._itemIcon_1rxjf_15 {
1426
1426
  display: flex;
1427
1427
  height: 2rem;
1428
1428
  width: 2rem;
@@ -1433,14 +1433,14 @@
1433
1433
  color: var(--teddy-color-purple-700);
1434
1434
  }
1435
1435
 
1436
- ._nameWrapper_1rldv_26 {
1436
+ ._nameWrapper_1rxjf_26 {
1437
1437
  max-width: 18rem;
1438
1438
  display: flex;
1439
1439
  align-items: flex-start;
1440
1440
  flex-direction: column;
1441
1441
  }
1442
1442
 
1443
- ._link_1rldv_33 {
1443
+ ._link_1rxjf_33 {
1444
1444
  display: flex;
1445
1445
  align-items: center;
1446
1446
  padding-right: var(--teddy-spacing-400);
@@ -1451,78 +1451,97 @@
1451
1451
  }
1452
1452
 
1453
1453
  @media all and (min-width: 600px) {
1454
- ._link_1rldv_33 {
1454
+ ._link_1rxjf_33 {
1455
1455
  padding-right: 0;
1456
1456
  }
1457
1457
  }
1458
1458
 
1459
- ._link_1rldv_33 span {
1459
+ ._link_1rxjf_33 span {
1460
1460
  margin-right: var(--teddy-spacing-100);
1461
1461
  }
1462
1462
 
1463
- ._cartLink_1rldv_51 {
1463
+ ._cartLink_1rxjf_51 {
1464
1464
  font-weight: var(--teddy-typography-weight-bold);
1465
1465
  color: var(--teddy-color-functional-black);
1466
1466
  }
1467
1467
 
1468
- ._cartLink_1rldv_51:hover, ._cartLink_1rldv_51:active, ._cartLink_1rldv_51:focus {
1468
+ ._cartLink_1rxjf_51:hover, ._cartLink_1rxjf_51:active, ._cartLink_1rxjf_51:focus {
1469
1469
  color: var(--teddy-color-text-interactive-primary);
1470
1470
  }
1471
1471
 
1472
- ._discountDescription_1rldv_59 {
1472
+ ._discountDescription_1rxjf_59 {
1473
1473
  margin-right: var(--teddy-spacing-600);
1474
1474
  overflow: visible;
1475
1475
  margin-top: var(--teddy-spacing-50);
1476
1476
  }
1477
1477
 
1478
- ._name_1rldv_26 {
1478
+ ._name_1rxjf_26 {
1479
1479
  box-sizing: border-box;
1480
1480
  width: 100%;
1481
1481
  padding: var(--teddy-spacing-200) var(--teddy-spacing-200) 0 0;
1482
1482
  font-size: var(--teddy-typography-scale-100);
1483
1483
  }
1484
1484
 
1485
- ._nameContainer_1rldv_72 {
1485
+ ._nameContainer_1rxjf_72 {
1486
1486
  display: flex;
1487
1487
  }
1488
1488
 
1489
- ._subtitle_1rldv_76 {
1489
+ ._subtitle_1rxjf_76 {
1490
1490
  display: flex;
1491
1491
  flex-direction: column;
1492
1492
  }
1493
1493
 
1494
- ._subtitle_1rldv_76 p {
1494
+ ._subtitle_1rxjf_76 p {
1495
1495
  margin: 0;
1496
1496
  }
1497
1497
 
1498
- ._quantityPickerWrapper_1rldv_84 {
1498
+ ._subtitleRow_1rxjf_84 {
1499
+ display: flex;
1500
+ justify-content: space-between;
1501
+ align-items: flex-start;
1502
+ gap: var(--teddy-spacing-100);
1503
+ }
1504
+
1505
+ ._subtitlePriceInfo_1rxjf_91 {
1506
+ font-family: var(--teddy-typography-family-default);
1507
+ font-weight: var(--teddy-typography-weight-bold);
1508
+ white-space: nowrap;
1509
+ }
1510
+
1511
+ ._quantityPickerWrapper_1rxjf_97 {
1499
1512
  display: flex;
1500
1513
  justify-content: flex-start;
1501
1514
  align-items: center;
1502
1515
  flex-wrap: wrap;
1503
1516
  }
1504
1517
 
1505
- ._pricePer_1rldv_91 {
1518
+ ._pricePer_1rxjf_104 {
1506
1519
  margin-left: var(--teddy-spacing-200);
1507
1520
  }
1508
1521
 
1509
- ._quantityPicker_1rldv_84 {
1522
+ ._quantityPicker_1rxjf_97 {
1510
1523
  display: flex;
1511
1524
  align-items: center;
1512
1525
  }
1513
1526
 
1514
- ._quantityPicker_1rldv_84 p {
1527
+ ._quantityPicker_1rxjf_97 p {
1515
1528
  margin: 0 var(--teddy-spacing-100);
1516
1529
  }
1517
1530
 
1518
- ._priceContainer_1rldv_103 {
1531
+ ._priceContainer_1rxjf_116 {
1519
1532
  display: flex;
1520
- justify-content: space-between;
1533
+ flex-direction: column;
1521
1534
  margin-bottom: var(--teddy-spacing-100);
1522
1535
  gap: var(--teddy-spacing-100);
1523
1536
  }
1524
1537
 
1525
- ._priceCost_1rldv_110 {
1538
+ ._priceRow_1rxjf_123 {
1539
+ display: flex;
1540
+ justify-content: space-between;
1541
+ gap: var(--teddy-spacing-100);
1542
+ }
1543
+
1544
+ ._priceCost_1rxjf_129 {
1526
1545
  display: flex;
1527
1546
  flex-direction: column;
1528
1547
  font-family: var(--teddy-typography-family-default);
@@ -1530,12 +1549,12 @@
1530
1549
  margin-bottom: 0;
1531
1550
  }
1532
1551
 
1533
- ._priceLabel_1rldv_118 {
1552
+ ._priceLabel_1rxjf_137 {
1534
1553
  text-align: right;
1535
1554
  margin-bottom: 0;
1536
1555
  }
1537
1556
 
1538
- ._priceLinethrough_1rldv_123 {
1557
+ ._priceLinethrough_1rxjf_142 {
1539
1558
  font-size: var(--teddy-typography-scale-100);
1540
1559
  font-family: var(--teddy-typography-family-default);
1541
1560
  font-weight: var(--teddy-typography-weight-normal);
@@ -1545,7 +1564,7 @@
1545
1564
  color: var(--teddy-color-gray-500);
1546
1565
  }
1547
1566
 
1548
- ._priceLinethroughDisclaimer_1rldv_133 {
1567
+ ._priceLinethroughDisclaimer_1rxjf_152 {
1549
1568
  font-size: var(--teddy-typography-scale-100);
1550
1569
  font-family: var(--teddy-typography-family-default);
1551
1570
  font-weight: var(--teddy-typography-weight-normal);
@@ -1554,39 +1573,39 @@
1554
1573
  color: var(--teddy-color-gray-500);
1555
1574
  }
1556
1575
 
1557
- ._imageContainer_1rldv_142 {
1576
+ ._imageContainer_1rxjf_161 {
1558
1577
  max-width: 2.5rem;
1559
1578
  width: 2.5rem;
1560
1579
  margin: var(--teddy-spacing-200) var(--teddy-spacing-200) 0 var(--teddy-spacing-200);
1561
1580
  }
1562
1581
 
1563
- ._imageContainer_1rldv_142 a:hover,
1564
- ._imageContainer_1rldv_142 a:active,
1565
- ._imageContainer_1rldv_142 a:focus,
1566
- ._imageContainer_1rldv_142 a:focus-within {
1582
+ ._imageContainer_1rxjf_161 a:hover,
1583
+ ._imageContainer_1rxjf_161 a:active,
1584
+ ._imageContainer_1rxjf_161 a:focus,
1585
+ ._imageContainer_1rxjf_161 a:focus-within {
1567
1586
  color: var(--teddy-color-text-interactive-primary);
1568
1587
  }
1569
1588
 
1570
- ._noImageContainer_1rldv_154 {
1589
+ ._noImageContainer_1rxjf_173 {
1571
1590
  max-width: 2.5rem;
1572
1591
  width: 2.5rem;
1573
1592
  margin: var(--teddy-spacing-200) var(--teddy-spacing-200) 0 var(--teddy-spacing-200);
1574
1593
  }
1575
1594
 
1576
- ._image_1rldv_142 {
1595
+ ._image_1rxjf_161 {
1577
1596
  display: block;
1578
1597
  height: auto;
1579
1598
  max-width: 2.5rem;
1580
1599
  width: 2.5rem;
1581
1600
  }
1582
1601
 
1583
- ._iconImage_1rldv_167 {
1602
+ ._iconImage_1rxjf_186 {
1584
1603
  display: block;
1585
1604
  width: 2.5rem;
1586
1605
  height: 2.5rem;
1587
1606
  }
1588
1607
 
1589
- ._deleteButtonContainer_1rldv_173 {
1608
+ ._deleteButtonContainer_1rxjf_192 {
1590
1609
  box-sizing: border-box;
1591
1610
  display: flex;
1592
1611
  justify-content: center;
@@ -1604,71 +1623,71 @@
1604
1623
  padding: var(--teddy-spacing-50) var(--teddy-spacing-100);
1605
1624
  }
1606
1625
 
1607
- ._deleteButtonContainer_1rldv_173:active, ._deleteButtonContainer_1rldv_173:hover, ._deleteButtonContainer_1rldv_173:focus {
1626
+ ._deleteButtonContainer_1rxjf_192:active, ._deleteButtonContainer_1rxjf_192:hover, ._deleteButtonContainer_1rxjf_192:focus {
1608
1627
  background-color: var(--teddy-color-purple-700);
1609
1628
  color: var(--teddy-color-functional-white);
1610
1629
  }
1611
1630
 
1612
- ._deleteButtonContainer_1rldv_173 svg {
1631
+ ._deleteButtonContainer_1rxjf_192 svg {
1613
1632
  width: 1.06rem;
1614
1633
  height: 1.1rem;
1615
1634
  margin-bottom: 1px;
1616
1635
  }
1617
1636
 
1618
- ._uniqueDiscount_1rldv_200 {
1637
+ ._uniqueDiscount_1rxjf_219 {
1619
1638
  display: flex;
1620
1639
  justify-content: space-between;
1621
1640
  margin-top: var(--teddy-spacing-100);
1622
1641
  margin-bottom: var(--teddy-spacing-100);
1623
1642
  }
1624
1643
 
1625
- ._uniqueDiscountLabel_1rldv_207 {
1644
+ ._uniqueDiscountLabel_1rxjf_226 {
1626
1645
  font-family: var(--teddy-typography-family-default);
1627
1646
  font-weight: var(--teddy-typography-weight-normal);
1628
1647
  font-style: italic;
1629
1648
  }
1630
1649
 
1631
- ._uniqueDiscountPrice_1rldv_213 {
1650
+ ._uniqueDiscountPrice_1rxjf_232 {
1632
1651
  font-family: var(--teddy-typography-family-default);
1633
1652
  font-weight: var(--teddy-typography-weight-bold);
1634
1653
  }
1635
1654
 
1636
- ._onlyInShops_1rldv_218 {
1655
+ ._onlyInShops_1rxjf_237 {
1637
1656
  display: flex;
1638
1657
  align-items: center;
1639
1658
  margin-top: var(--teddy-spacing-100);
1640
1659
  margin-bottom: var(--teddy-spacing-100);
1641
1660
  }
1642
1661
 
1643
- ._onlyInShopsLabel_1rldv_225 {
1662
+ ._onlyInShopsLabel_1rxjf_244 {
1644
1663
  font-style: italic;
1645
1664
  font-family: var(--teddy-typography-family-default);
1646
1665
  font-weight: var(--teddy-typography-weight-normal);
1647
1666
  }
1648
1667
 
1649
- ._onlyInShopsTooltipWrapper_1rldv_231 {
1668
+ ._onlyInShopsTooltipWrapper_1rxjf_250 {
1650
1669
  margin-left: var(--teddy-spacing-100);
1651
1670
  display: flex;
1652
1671
  align-items: center;
1653
1672
  }
1654
1673
 
1655
- ._onlyInShopsTooltipIcon_1rldv_237 {
1674
+ ._onlyInShopsTooltipIcon_1rxjf_256 {
1656
1675
  cursor: pointer;
1657
1676
  width: 1.2rem;
1658
1677
  height: 1.2rem;
1659
1678
  color: var(--teddy-color-functional-black);
1660
1679
  }
1661
1680
 
1662
- ._tooltipTrigger_1rldv_244 {
1681
+ ._tooltipTrigger_1rxjf_263 {
1663
1682
  padding: var(--teddy-spacing-100);
1664
1683
  }
1665
1684
 
1666
- ._tooltipTrigger_1rldv_244 svg {
1685
+ ._tooltipTrigger_1rxjf_263 svg {
1667
1686
  width: 1.25rem;
1668
1687
  height: 1.25rem;
1669
1688
  }
1670
1689
 
1671
- ._priceWrapper_1rldv_252 {
1690
+ ._priceWrapper_1rxjf_271 {
1672
1691
  display: flex;
1673
1692
  align-items: center;
1674
1693
  justify-content: flex-end;
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=10"
21
21
  },
22
22
  "private": false,
23
- "version": "0.7.57",
23
+ "version": "0.7.58",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"