@telia/teddy 0.7.70 → 0.7.72

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.
Files changed (14) hide show
  1. package/dist/components/card/card-button.cjs +2 -2
  2. package/dist/components/card/card-button.d.ts +1 -0
  3. package/dist/components/card/card-button.js +2 -2
  4. package/dist/components/card/card-price.cjs +61 -16
  5. package/dist/components/card/card-price.d.ts +2 -0
  6. package/dist/components/card/card-price.js +61 -16
  7. package/dist/components/card/card.cjs +53 -52
  8. package/dist/components/card/card.js +53 -52
  9. package/dist/components/input/input-group.cjs +10 -10
  10. package/dist/components/input/input-group.js +10 -10
  11. package/dist/components/shopping-cart/shopping-cart-item.cjs +121 -102
  12. package/dist/components/shopping-cart/shopping-cart-item.js +121 -102
  13. package/dist/teddy.css +1 -1
  14. package/package.json +1 -1
package/dist/components/shopping-cart/shopping-cart-item.cjs CHANGED
@@ -14,38 +14,39 @@ 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_1xnov_1";
18
- const breakageFeeInfo = "_breakageFeeInfo_1xnov_7";
19
- const nameWrapper = "_nameWrapper_1xnov_26";
20
- const link = "_link_1xnov_33";
21
- const cartLink = "_cartLink_1xnov_51";
22
- const discountDescription = "_discountDescription_1xnov_59";
23
- const name = "_name_1xnov_26";
24
- const nameContainer = "_nameContainer_1xnov_72";
25
- const subtitle = "_subtitle_1xnov_76";
26
- const subtitleRow = "_subtitleRow_1xnov_84";
27
- const subtitlePriceInfo = "_subtitlePriceInfo_1xnov_91";
28
- const quantityPickerWrapper = "_quantityPickerWrapper_1xnov_97";
29
- const pricePer = "_pricePer_1xnov_104";
30
- const quantityPicker = "_quantityPicker_1xnov_97";
31
- const priceContainer = "_priceContainer_1xnov_116";
32
- const priceRow = "_priceRow_1xnov_123";
33
- const priceCost = "_priceCost_1xnov_129";
34
- const priceLabel = "_priceLabel_1xnov_137";
35
- const priceLinethrough = "_priceLinethrough_1xnov_142";
36
- const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1xnov_152";
37
- const imageContainer = "_imageContainer_1xnov_161";
38
- const noImageContainer = "_noImageContainer_1xnov_173";
39
- const image = "_image_1xnov_161";
40
- const iconImage = "_iconImage_1xnov_186";
41
- const deleteButtonContainer = "_deleteButtonContainer_1xnov_192";
42
- const uniqueDiscount = "_uniqueDiscount_1xnov_219";
43
- const uniqueDiscountLabel = "_uniqueDiscountLabel_1xnov_226";
44
- const uniqueDiscountPrice = "_uniqueDiscountPrice_1xnov_232";
45
- const onlyInShops = "_onlyInShops_1xnov_237";
46
- const onlyInShopsLabel = "_onlyInShopsLabel_1xnov_244";
47
- const tooltipTrigger = "_tooltipTrigger_1xnov_263";
48
- const priceWrapper = "_priceWrapper_1xnov_271";
17
+ const item = "_item_15muv_1";
18
+ const breakageFeeInfo = "_breakageFeeInfo_15muv_7";
19
+ const nameWrapper = "_nameWrapper_15muv_26";
20
+ const link = "_link_15muv_33";
21
+ const cartLink = "_cartLink_15muv_51";
22
+ const discountDescription = "_discountDescription_15muv_59";
23
+ const name = "_name_15muv_26";
24
+ const nameContainer = "_nameContainer_15muv_72";
25
+ const quantityWrapper = "_quantityWrapper_15muv_76";
26
+ const subtitleRow = "_subtitleRow_15muv_84";
27
+ const subtitlePriceInfo = "_subtitlePriceInfo_15muv_91";
28
+ const quantityPickerWrapper = "_quantityPickerWrapper_15muv_97";
29
+ const pricePer = "_pricePer_15muv_104";
30
+ const quantityPicker = "_quantityPicker_15muv_97";
31
+ const characteristics = "_characteristics_15muv_116";
32
+ const price = "_price_15muv_104";
33
+ const quantityContainer = "_quantityContainer_15muv_126";
34
+ const priceCost = "_priceCost_15muv_133";
35
+ const priceLabel = "_priceLabel_15muv_141";
36
+ const priceLinethrough = "_priceLinethrough_15muv_146";
37
+ const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_15muv_156";
38
+ const imageContainer = "_imageContainer_15muv_165";
39
+ const noImageContainer = "_noImageContainer_15muv_177";
40
+ const image = "_image_15muv_165";
41
+ const iconImage = "_iconImage_15muv_190";
42
+ const deleteButtonContainer = "_deleteButtonContainer_15muv_196";
43
+ const uniqueDiscount = "_uniqueDiscount_15muv_223";
44
+ const uniqueDiscountLabel = "_uniqueDiscountLabel_15muv_230";
45
+ const uniqueDiscountPrice = "_uniqueDiscountPrice_15muv_236";
46
+ const onlyInShops = "_onlyInShops_15muv_241";
47
+ const onlyInShopsLabel = "_onlyInShopsLabel_15muv_248";
48
+ const tooltipTrigger = "_tooltipTrigger_15muv_267";
49
+ const priceWrapper = "_priceWrapper_15muv_275";
49
50
  const styles = {
50
51
  item,
51
52
  breakageFeeInfo,
@@ -55,14 +56,15 @@ const styles = {
55
56
  discountDescription,
56
57
  name,
57
58
  nameContainer,
58
- subtitle,
59
+ quantityWrapper,
59
60
  subtitleRow,
60
61
  subtitlePriceInfo,
61
62
  quantityPickerWrapper,
62
63
  pricePer,
63
64
  quantityPicker,
64
- priceContainer,
65
- priceRow,
65
+ characteristics,
66
+ price,
67
+ quantityContainer,
66
68
  priceCost,
67
69
  priceLabel,
68
70
  priceLinethrough,
@@ -86,7 +88,7 @@ const QuantityPicker = ({
86
88
  cartItem,
87
89
  shouldShowPricePerUnit,
88
90
  isQuantityModifiable,
89
- price,
91
+ price: price2,
90
92
  discountValueUpfront,
91
93
  discountValueMonthly,
92
94
  hasPaid
@@ -125,7 +127,7 @@ const QuantityPicker = ({
125
127
  ] }),
126
128
  shouldShowPricePerUnit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.pricePer, children: [
127
129
  quantity > 1 && !isQuantityModifiable && `${quantity} x `,
128
- `${components_shoppingCart_utils.getPrice(components_shoppingCart_utils.defaultFormatPrice, price, discountValueUpfront, discountValueMonthly, 1)}/stk`
130
+ `${components_shoppingCart_utils.getPrice(components_shoppingCart_utils.defaultFormatPrice, price2, discountValueUpfront, discountValueMonthly, 1)}/stk`
129
131
  ] })
130
132
  ] });
131
133
  };
@@ -145,69 +147,35 @@ const CartItemImage = ({ cartItem }) => {
145
147
  };
146
148
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.imageContainer, children: cartItem.href ? /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { href: cartItem.href, "aria-label": cartItem.name, variant: "navigation", className: styles.cartLink, children: renderImage() }) : renderImage() });
147
149
  };
148
- const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
149
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
150
+ const CartItemDetails = ({ cartItem, hasPaid, onChangeQuantity }) => {
151
+ var _a, _b, _c, _d, _e, _f, _g, _h;
150
152
  const { formatPrice, readonly } = components_shoppingCart_shoppingCartContext.useShoppingCart();
151
153
  const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
152
154
  const isQuantityModifiable = !!((_b = cartItem.quantity) == null ? void 0 : _b.modifiable);
153
155
  const shouldShowPricePerUnit = (!!cartItem.price.upfront || !!cartItem.price.firstInvoice) && quantity > 1;
154
156
  const isManualDiscount = (_c = cartItem.discount) == null ? void 0 : _c.isManualDiscount;
155
157
  const discountValueUpfront = isManualDiscount ? 0 : ((_e = (_d = cartItem.discount) == null ? void 0 : _d.value) == null ? void 0 : _e.upfront) || 0;
156
- const isLease = cartItem.leaseMonths === 0 || !!cartItem.leaseMonths;
157
- const hasSubscription = !!((_f = cartItem.items) == null ? void 0 : _f.find((item2) => item2.type.includes("SUBSCRIPTION")));
158
- const discountValueMonthly = ((_h = (_g = cartItem.discount) == null ? void 0 : _g.value) == null ? void 0 : _h.monthly) || 0;
159
- const discountPrice = components_shoppingCart_utils.getDiscountPrice(cartItem.price, quantity) || "";
160
- const price = components_shoppingCart_utils.getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
161
- const discountPriceText = ((_i = cartItem.discount) == null ? void 0 : _i.handsetDiscountText) || "";
158
+ const discountValueMonthly = ((_g = (_f = cartItem.discount) == null ? void 0 : _f.value) == null ? void 0 : _g.monthly) || 0;
162
159
  const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(Boolean);
163
160
  const suppressSubtitles = cartItem.type === components_shoppingCart_types.CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
164
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.price, children: [
165
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceContainer, children: [
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
- ] }) })
161
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
162
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.quantityContainer, children: [
163
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.quantityWrapper, children: [
164
+ quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${quantity} stk` }),
165
+ isQuantityModifiable && !readonly && /* @__PURE__ */ jsxRuntime.jsx(
166
+ QuantityPicker,
167
+ {
168
+ quantity,
169
+ onChangeQuantity,
170
+ cartItem,
171
+ shouldShowPricePerUnit,
172
+ isQuantityModifiable,
173
+ price: cartItem.price,
174
+ discountValueUpfront,
175
+ discountValueMonthly,
176
+ hasPaid
177
+ }
178
+ )
211
179
  ] }),
212
180
  subtitles.slice(1).map((sub, index) => {
213
181
  const description = typeof sub === "string" ? sub : sub.description;
@@ -233,7 +201,7 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
233
201
  /* @__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." }) })
234
202
  ] })
235
203
  ] }),
236
- ((_j = cartItem.discount) == null ? void 0 : _j.isManualDiscount) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.uniqueDiscount, children: [
204
+ ((_h = cartItem.discount) == null ? void 0 : _h.isManualDiscount) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.uniqueDiscount, children: [
237
205
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.uniqueDiscountLabel, children: cartItem.discount.name }),
238
206
  (cartItem.discount.value.upfront || 0) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.uniqueDiscountPrice, children: [
239
207
  "-",
@@ -256,8 +224,8 @@ const CartItemDiscountBadges = ({ cartItem }) => {
256
224
  `${discount.id}-${index}`
257
225
  )) });
258
226
  };
259
- const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
260
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nameWrapper, children: [
227
+ const CartItemName = ({ cartItem }) => {
228
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nameWrapper, children: [
261
229
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.link, children: [
262
230
  cartItem.lineThrough && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethrough, children: cartItem.lineThrough }),
263
231
  cartItem.href ? /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { href: cartItem.href, variant: "navigation", className: styles.cartLink, children: cartItem.name }) : cartItem.name,
@@ -267,22 +235,36 @@ const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntim
267
235
  ] })
268
236
  ] }),
269
237
  /* @__PURE__ */ jsxRuntime.jsx(CartItemDiscountBadges, { cartItem })
270
- ] }),
271
- cartItem.color && /* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { variant: "paragraph-100", mb: "200", children: [
272
- cartItem.color,
273
- cartItem.modelSize ? ", " + cartItem.modelSize : ""
274
- ] })
275
- ] });
238
+ ] });
239
+ };
276
240
  const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
277
241
  var _a;
278
242
  const { hasPaid, isAllowedToDelete, readonly } = components_shoppingCart_shoppingCartContext.useShoppingCart();
279
243
  const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
244
+ const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(Boolean);
245
+ const suppressSubtitles = cartItem.type === components_shoppingCart_types.CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
280
246
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.item, className), children: [
281
247
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nameContainer, children: [
282
248
  /* @__PURE__ */ jsxRuntime.jsx(CartItemImage, { cartItem }),
283
249
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.name, children: [
284
250
  /* @__PURE__ */ jsxRuntime.jsx(CartItemName, { cartItem }),
285
- /* @__PURE__ */ jsxRuntime.jsx(CartItemPriceDisplay, { cartItem, onChangeQuantity, hasPaid })
251
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.characteristics, children: [
252
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
253
+ /* @__PURE__ */ jsxRuntime.jsx(Characteristics, { cartItem }),
254
+ subtitles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
255
+ "div",
256
+ {
257
+ "data-hj-suppress": suppressSubtitles,
258
+ className: styles.subtitle,
259
+ dangerouslySetInnerHTML: {
260
+ __html: typeof subtitles[0] === "string" ? subtitles[0] : subtitles[0].description
261
+ }
262
+ }
263
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
264
+ ] }),
265
+ /* @__PURE__ */ jsxRuntime.jsx(Price, { cartItem })
266
+ ] }),
267
+ /* @__PURE__ */ jsxRuntime.jsx(CartItemDetails, { cartItem, onChangeQuantity, hasPaid })
286
268
  ] })
287
269
  ] }),
288
270
  isRemovable && isAllowedToDelete && !readonly && /* @__PURE__ */ jsxRuntime.jsx(
@@ -297,5 +279,42 @@ const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
297
279
  )
298
280
  ] });
299
281
  };
282
+ const Price = ({ cartItem }) => {
283
+ var _a, _b, _c, _d, _e, _f, _g, _h;
284
+ const { formatPrice } = components_shoppingCart_shoppingCartContext.useShoppingCart();
285
+ const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
286
+ const isLease = cartItem.leaseMonths === 0 || !!cartItem.leaseMonths;
287
+ const hasSubscription = !!((_b = cartItem.items) == null ? void 0 : _b.find((item2) => item2.type.includes("SUBSCRIPTION")));
288
+ const isManualDiscount = (_c = cartItem.discount) == null ? void 0 : _c.isManualDiscount;
289
+ const discountValueMonthly = ((_e = (_d = cartItem.discount) == null ? void 0 : _d.value) == null ? void 0 : _e.monthly) || 0;
290
+ const discountValueUpfront = isManualDiscount ? 0 : ((_g = (_f = cartItem.discount) == null ? void 0 : _f.value) == null ? void 0 : _g.upfront) || 0;
291
+ const discountPrice = components_shoppingCart_utils.getDiscountPrice(cartItem.price, quantity) || "";
292
+ const price2 = components_shoppingCart_utils.getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
293
+ const discountPriceText = ((_h = cartItem.discount) == null ? void 0 : _h.handsetDiscountText) || "";
294
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.price, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceCost, children: [
295
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceWrapper, children: [
296
+ discountPriceText && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { defaultOpen: true, children: [
297
+ /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: styles.tooltipTrigger }),
298
+ /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
299
+ ] }),
300
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceLabel, children: [
301
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: isLease && !hasSubscription && "fra " }),
302
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: price2 }),
303
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
304
+ ] })
305
+ ] }),
306
+ discountPrice && formatPrice(discountPrice) !== price2 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
307
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
308
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
309
+ ] })
310
+ ] }) });
311
+ };
312
+ const Characteristics = ({ cartItem }) => {
313
+ if (!cartItem.color) return null;
314
+ return /* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { variant: "paragraph-100", mb: "100", children: [
315
+ cartItem.color,
316
+ cartItem.modelSize ? ", " + cartItem.modelSize : ""
317
+ ] });
318
+ };
300
319
  Item.displayName = "Item";
301
320
  exports.Item = Item;
package/dist/components/shopping-cart/shopping-cart-item.js CHANGED
@@ -12,38 +12,39 @@ 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_1xnov_1";
16
- const breakageFeeInfo = "_breakageFeeInfo_1xnov_7";
17
- const nameWrapper = "_nameWrapper_1xnov_26";
18
- const link = "_link_1xnov_33";
19
- const cartLink = "_cartLink_1xnov_51";
20
- const discountDescription = "_discountDescription_1xnov_59";
21
- const name = "_name_1xnov_26";
22
- const nameContainer = "_nameContainer_1xnov_72";
23
- const subtitle = "_subtitle_1xnov_76";
24
- const subtitleRow = "_subtitleRow_1xnov_84";
25
- const subtitlePriceInfo = "_subtitlePriceInfo_1xnov_91";
26
- const quantityPickerWrapper = "_quantityPickerWrapper_1xnov_97";
27
- const pricePer = "_pricePer_1xnov_104";
28
- const quantityPicker = "_quantityPicker_1xnov_97";
29
- const priceContainer = "_priceContainer_1xnov_116";
30
- const priceRow = "_priceRow_1xnov_123";
31
- const priceCost = "_priceCost_1xnov_129";
32
- const priceLabel = "_priceLabel_1xnov_137";
33
- const priceLinethrough = "_priceLinethrough_1xnov_142";
34
- const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_1xnov_152";
35
- const imageContainer = "_imageContainer_1xnov_161";
36
- const noImageContainer = "_noImageContainer_1xnov_173";
37
- const image = "_image_1xnov_161";
38
- const iconImage = "_iconImage_1xnov_186";
39
- const deleteButtonContainer = "_deleteButtonContainer_1xnov_192";
40
- const uniqueDiscount = "_uniqueDiscount_1xnov_219";
41
- const uniqueDiscountLabel = "_uniqueDiscountLabel_1xnov_226";
42
- const uniqueDiscountPrice = "_uniqueDiscountPrice_1xnov_232";
43
- const onlyInShops = "_onlyInShops_1xnov_237";
44
- const onlyInShopsLabel = "_onlyInShopsLabel_1xnov_244";
45
- const tooltipTrigger = "_tooltipTrigger_1xnov_263";
46
- const priceWrapper = "_priceWrapper_1xnov_271";
15
+ const item = "_item_15muv_1";
16
+ const breakageFeeInfo = "_breakageFeeInfo_15muv_7";
17
+ const nameWrapper = "_nameWrapper_15muv_26";
18
+ const link = "_link_15muv_33";
19
+ const cartLink = "_cartLink_15muv_51";
20
+ const discountDescription = "_discountDescription_15muv_59";
21
+ const name = "_name_15muv_26";
22
+ const nameContainer = "_nameContainer_15muv_72";
23
+ const quantityWrapper = "_quantityWrapper_15muv_76";
24
+ const subtitleRow = "_subtitleRow_15muv_84";
25
+ const subtitlePriceInfo = "_subtitlePriceInfo_15muv_91";
26
+ const quantityPickerWrapper = "_quantityPickerWrapper_15muv_97";
27
+ const pricePer = "_pricePer_15muv_104";
28
+ const quantityPicker = "_quantityPicker_15muv_97";
29
+ const characteristics = "_characteristics_15muv_116";
30
+ const price = "_price_15muv_104";
31
+ const quantityContainer = "_quantityContainer_15muv_126";
32
+ const priceCost = "_priceCost_15muv_133";
33
+ const priceLabel = "_priceLabel_15muv_141";
34
+ const priceLinethrough = "_priceLinethrough_15muv_146";
35
+ const priceLinethroughDisclaimer = "_priceLinethroughDisclaimer_15muv_156";
36
+ const imageContainer = "_imageContainer_15muv_165";
37
+ const noImageContainer = "_noImageContainer_15muv_177";
38
+ const image = "_image_15muv_165";
39
+ const iconImage = "_iconImage_15muv_190";
40
+ const deleteButtonContainer = "_deleteButtonContainer_15muv_196";
41
+ const uniqueDiscount = "_uniqueDiscount_15muv_223";
42
+ const uniqueDiscountLabel = "_uniqueDiscountLabel_15muv_230";
43
+ const uniqueDiscountPrice = "_uniqueDiscountPrice_15muv_236";
44
+ const onlyInShops = "_onlyInShops_15muv_241";
45
+ const onlyInShopsLabel = "_onlyInShopsLabel_15muv_248";
46
+ const tooltipTrigger = "_tooltipTrigger_15muv_267";
47
+ const priceWrapper = "_priceWrapper_15muv_275";
47
48
  const styles = {
48
49
  item,
49
50
  breakageFeeInfo,
@@ -53,14 +54,15 @@ const styles = {
53
54
  discountDescription,
54
55
  name,
55
56
  nameContainer,
56
- subtitle,
57
+ quantityWrapper,
57
58
  subtitleRow,
58
59
  subtitlePriceInfo,
59
60
  quantityPickerWrapper,
60
61
  pricePer,
61
62
  quantityPicker,
62
- priceContainer,
63
- priceRow,
63
+ characteristics,
64
+ price,
65
+ quantityContainer,
64
66
  priceCost,
65
67
  priceLabel,
66
68
  priceLinethrough,
@@ -84,7 +86,7 @@ const QuantityPicker = ({
84
86
  cartItem,
85
87
  shouldShowPricePerUnit,
86
88
  isQuantityModifiable,
87
- price,
89
+ price: price2,
88
90
  discountValueUpfront,
89
91
  discountValueMonthly,
90
92
  hasPaid
@@ -123,7 +125,7 @@ const QuantityPicker = ({
123
125
  ] }),
124
126
  shouldShowPricePerUnit && /* @__PURE__ */ jsxs("span", { className: styles.pricePer, children: [
125
127
  quantity > 1 && !isQuantityModifiable && `${quantity} x `,
126
- `${getPrice(defaultFormatPrice, price, discountValueUpfront, discountValueMonthly, 1)}/stk`
128
+ `${getPrice(defaultFormatPrice, price2, discountValueUpfront, discountValueMonthly, 1)}/stk`
127
129
  ] })
128
130
  ] });
129
131
  };
@@ -143,69 +145,35 @@ const CartItemImage = ({ cartItem }) => {
143
145
  };
144
146
  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() });
145
147
  };
146
- const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
147
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
148
+ const CartItemDetails = ({ cartItem, hasPaid, onChangeQuantity }) => {
149
+ var _a, _b, _c, _d, _e, _f, _g, _h;
148
150
  const { formatPrice, readonly } = useShoppingCart();
149
151
  const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
150
152
  const isQuantityModifiable = !!((_b = cartItem.quantity) == null ? void 0 : _b.modifiable);
151
153
  const shouldShowPricePerUnit = (!!cartItem.price.upfront || !!cartItem.price.firstInvoice) && quantity > 1;
152
154
  const isManualDiscount = (_c = cartItem.discount) == null ? void 0 : _c.isManualDiscount;
153
155
  const discountValueUpfront = isManualDiscount ? 0 : ((_e = (_d = cartItem.discount) == null ? void 0 : _d.value) == null ? void 0 : _e.upfront) || 0;
154
- const isLease = cartItem.leaseMonths === 0 || !!cartItem.leaseMonths;
155
- const hasSubscription = !!((_f = cartItem.items) == null ? void 0 : _f.find((item2) => item2.type.includes("SUBSCRIPTION")));
156
- const discountValueMonthly = ((_h = (_g = cartItem.discount) == null ? void 0 : _g.value) == null ? void 0 : _h.monthly) || 0;
157
- const discountPrice = getDiscountPrice(cartItem.price, quantity) || "";
158
- const price = getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
159
- const discountPriceText = ((_i = cartItem.discount) == null ? void 0 : _i.handsetDiscountText) || "";
156
+ const discountValueMonthly = ((_g = (_f = cartItem.discount) == null ? void 0 : _f.value) == null ? void 0 : _g.monthly) || 0;
160
157
  const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(Boolean);
161
158
  const suppressSubtitles = cartItem.type === CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
162
- return /* @__PURE__ */ jsxs("div", { className: styles.price, children: [
163
- /* @__PURE__ */ jsxs("div", { className: styles.priceContainer, children: [
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
- ] }) })
159
+ return /* @__PURE__ */ jsxs("div", { children: [
160
+ /* @__PURE__ */ jsxs("div", { className: styles.quantityContainer, children: [
161
+ /* @__PURE__ */ jsxs("div", { className: styles.quantityWrapper, children: [
162
+ quantity > 1 && !shouldShowPricePerUnit && /* @__PURE__ */ jsx("span", { children: `${quantity} stk` }),
163
+ isQuantityModifiable && !readonly && /* @__PURE__ */ jsx(
164
+ QuantityPicker,
165
+ {
166
+ quantity,
167
+ onChangeQuantity,
168
+ cartItem,
169
+ shouldShowPricePerUnit,
170
+ isQuantityModifiable,
171
+ price: cartItem.price,
172
+ discountValueUpfront,
173
+ discountValueMonthly,
174
+ hasPaid
175
+ }
176
+ )
209
177
  ] }),
210
178
  subtitles.slice(1).map((sub, index) => {
211
179
  const description = typeof sub === "string" ? sub : sub.description;
@@ -231,7 +199,7 @@ const CartItemPriceDisplay = ({ cartItem, hasPaid, onChangeQuantity }) => {
231
199
  /* @__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." }) })
232
200
  ] })
233
201
  ] }),
234
- ((_j = cartItem.discount) == null ? void 0 : _j.isManualDiscount) && /* @__PURE__ */ jsxs("div", { className: styles.uniqueDiscount, children: [
202
+ ((_h = cartItem.discount) == null ? void 0 : _h.isManualDiscount) && /* @__PURE__ */ jsxs("div", { className: styles.uniqueDiscount, children: [
235
203
  /* @__PURE__ */ jsx("span", { className: styles.uniqueDiscountLabel, children: cartItem.discount.name }),
236
204
  (cartItem.discount.value.upfront || 0) > 0 && /* @__PURE__ */ jsxs("span", { className: styles.uniqueDiscountPrice, children: [
237
205
  "-",
@@ -254,8 +222,8 @@ const CartItemDiscountBadges = ({ cartItem }) => {
254
222
  `${discount.id}-${index}`
255
223
  )) });
256
224
  };
257
- const CartItemName = ({ cartItem }) => /* @__PURE__ */ jsxs(Fragment, { children: [
258
- /* @__PURE__ */ jsxs("div", { className: styles.nameWrapper, children: [
225
+ const CartItemName = ({ cartItem }) => {
226
+ return /* @__PURE__ */ jsxs("div", { className: styles.nameWrapper, children: [
259
227
  /* @__PURE__ */ jsxs("div", { className: styles.link, children: [
260
228
  cartItem.lineThrough && /* @__PURE__ */ jsx("span", { className: styles.priceLinethrough, children: cartItem.lineThrough }),
261
229
  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
265
233
  ] })
266
234
  ] }),
267
235
  /* @__PURE__ */ jsx(CartItemDiscountBadges, { cartItem })
268
- ] }),
269
- cartItem.color && /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100", mb: "200", children: [
270
- cartItem.color,
271
- cartItem.modelSize ? ", " + cartItem.modelSize : ""
272
- ] })
273
- ] });
236
+ ] });
237
+ };
274
238
  const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
275
239
  var _a;
276
240
  const { hasPaid, isAllowedToDelete, readonly } = useShoppingCart();
277
241
  const isRemovable = !!((_a = cartItem.quantity) == null ? void 0 : _a.removable);
242
+ const subtitles = (Array.isArray(cartItem.subtitle) ? cartItem.subtitle : [cartItem.subtitle]).filter(Boolean);
243
+ const suppressSubtitles = cartItem.type === CART_ITEM_TYPE.SUBSCRIPTION ? true : void 0;
278
244
  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.item, className), children: [
279
245
  /* @__PURE__ */ jsxs("div", { className: styles.nameContainer, children: [
280
246
  /* @__PURE__ */ jsx(CartItemImage, { cartItem }),
281
247
  /* @__PURE__ */ jsxs("div", { className: styles.name, children: [
282
248
  /* @__PURE__ */ jsx(CartItemName, { cartItem }),
283
- /* @__PURE__ */ jsx(CartItemPriceDisplay, { cartItem, onChangeQuantity, hasPaid })
249
+ /* @__PURE__ */ jsxs("div", { className: styles.characteristics, children: [
250
+ /* @__PURE__ */ jsxs("div", { children: [
251
+ /* @__PURE__ */ jsx(Characteristics, { cartItem }),
252
+ subtitles.length > 0 ? /* @__PURE__ */ jsx(
253
+ "div",
254
+ {
255
+ "data-hj-suppress": suppressSubtitles,
256
+ className: styles.subtitle,
257
+ dangerouslySetInnerHTML: {
258
+ __html: typeof subtitles[0] === "string" ? subtitles[0] : subtitles[0].description
259
+ }
260
+ }
261
+ ) : /* @__PURE__ */ jsx("span", {})
262
+ ] }),
263
+ /* @__PURE__ */ jsx(Price, { cartItem })
264
+ ] }),
265
+ /* @__PURE__ */ jsx(CartItemDetails, { cartItem, onChangeQuantity, hasPaid })
284
266
  ] })
285
267
  ] }),
286
268
  isRemovable && isAllowedToDelete && !readonly && /* @__PURE__ */ jsx(
@@ -295,6 +277,43 @@ const Item = ({ cartItem, onChangeQuantity, onRemoveItem, className }) => {
295
277
  )
296
278
  ] });
297
279
  };
280
+ const Price = ({ cartItem }) => {
281
+ var _a, _b, _c, _d, _e, _f, _g, _h;
282
+ const { formatPrice } = useShoppingCart();
283
+ const quantity = ((_a = cartItem.quantity) == null ? void 0 : _a.value) ?? 1;
284
+ const isLease = cartItem.leaseMonths === 0 || !!cartItem.leaseMonths;
285
+ const hasSubscription = !!((_b = cartItem.items) == null ? void 0 : _b.find((item2) => item2.type.includes("SUBSCRIPTION")));
286
+ const isManualDiscount = (_c = cartItem.discount) == null ? void 0 : _c.isManualDiscount;
287
+ const discountValueMonthly = ((_e = (_d = cartItem.discount) == null ? void 0 : _d.value) == null ? void 0 : _e.monthly) || 0;
288
+ const discountValueUpfront = isManualDiscount ? 0 : ((_g = (_f = cartItem.discount) == null ? void 0 : _f.value) == null ? void 0 : _g.upfront) || 0;
289
+ const discountPrice = getDiscountPrice(cartItem.price, quantity) || "";
290
+ const price2 = getPrice(formatPrice, cartItem.price, discountValueUpfront, discountValueMonthly, quantity);
291
+ const discountPriceText = ((_h = cartItem.discount) == null ? void 0 : _h.handsetDiscountText) || "";
292
+ return /* @__PURE__ */ jsx("div", { className: styles.price, children: /* @__PURE__ */ jsxs("span", { className: styles.priceCost, children: [
293
+ /* @__PURE__ */ jsxs("div", { className: styles.priceWrapper, children: [
294
+ discountPriceText && /* @__PURE__ */ jsxs(Tooltip, { defaultOpen: true, children: [
295
+ /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
296
+ /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Text, { variant: "paragraph-100", dangerouslySetInnerHTML: { __html: discountPriceText } }) })
297
+ ] }),
298
+ /* @__PURE__ */ jsxs("span", { className: styles.priceLabel, children: [
299
+ /* @__PURE__ */ jsx("span", { children: isLease && !hasSubscription && "fra " }),
300
+ /* @__PURE__ */ jsx("span", { children: price2 }),
301
+ /* @__PURE__ */ jsx("span", { children: cartItem.price.monthly ? "/md." : "" })
302
+ ] })
303
+ ] }),
304
+ discountPrice && formatPrice(discountPrice) !== price2 && /* @__PURE__ */ jsxs(Fragment, { children: [
305
+ /* @__PURE__ */ jsx("span", { className: styles.priceLinethroughDisclaimer, children: "ord. pris:" }),
306
+ /* @__PURE__ */ jsx("span", { className: styles.priceLinethrough, children: cartItem.price.monthly ? formatPrice(discountPrice) + "/md." : formatPrice(discountPrice) })
307
+ ] })
308
+ ] }) });
309
+ };
310
+ const Characteristics = ({ cartItem }) => {
311
+ if (!cartItem.color) return null;
312
+ return /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100", mb: "100", children: [
313
+ cartItem.color,
314
+ cartItem.modelSize ? ", " + cartItem.modelSize : ""
315
+ ] });
316
+ };
298
317
  Item.displayName = "Item";
299
318
  export {
300
319
  Item