@trafilea/afrodita-components 6.5.2 → 6.5.4

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 (6) hide show
  1. package/build/index.d.ts +2 -2
  2. package/build/index.esm.js +29 -26
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +29 -26
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -2045,19 +2045,19 @@ interface PriceLabelProps {
2045
2045
  testId?: string;
2046
2046
  clubStyle?: boolean;
2047
2047
  bordersRounded?: boolean;
2048
- hasPricePerItem?: boolean;
2049
- quantity?: number;
2050
2048
  }
2051
2049
  declare const PriceLabel: React__default.FC<PriceLabelProps>;
2052
2050
 
2053
2051
  declare type Props$1 = PriceLabelProps & {
2054
2052
  savingsDisplay?: boolean;
2053
+ pricePerItem?: string;
2055
2054
  };
2056
2055
  declare const PriceLabelV2: React__default.FC<Props$1>;
2057
2056
 
2058
2057
  declare type Props = PriceLabelProps & {
2059
2058
  savingsDisplay?: boolean;
2060
2059
  itemsQuantity?: number;
2060
+ packUnitPrice?: string;
2061
2061
  };
2062
2062
  declare const PriceLabelV3: React__default.FC<Props>;
2063
2063
 
package/build/index.esm.js CHANGED
@@ -5454,31 +5454,26 @@ var templateObject_1$1A, templateObject_2$10, templateObject_3$Q;
5454
5454
  var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5455
5455
  var PriceLabelV2 = function (_a) {
5456
5456
  var _b;
5457
- var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, hasPricePerItem = _a.hasPricePerItem, _h = _a.quantity, quantity = _h === void 0 ? 0 : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "hasPricePerItem", "quantity"]);
5457
+ var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
5458
5458
  var theme = useTheme();
5459
- var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
5459
+ var productFinalPrice = pricePerItem ? pricePerItem : finalPrice;
5460
+ var isDiffFinalAndOriginalPrice = originalPrice !== productFinalPrice;
5460
5461
  var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
5461
5462
  var isDiscount = discount && isDiffFinalAndOriginalPrice;
5462
5463
  var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
5463
5464
  var supportedCurrencies = ['A$', 'CA$', '£'];
5464
5465
  var currencySymbol = '$';
5465
- if (typeof finalPrice === 'string') {
5466
+ if (typeof productFinalPrice === 'string') {
5466
5467
  supportedCurrencies.forEach(function (availableCurrency) {
5467
- if (finalPrice.includes(availableCurrency)) {
5468
+ if (productFinalPrice.includes(availableCurrency)) {
5468
5469
  currencySymbol = availableCurrency;
5469
5470
  }
5470
5471
  });
5471
5472
  }
5472
- var priceSymbolRemoved = typeof finalPrice === 'string' && finalPrice.includes(currencySymbol)
5473
- ? finalPrice.split(currencySymbol)[1]
5474
- : finalPrice;
5475
- var finalPricePerQuantity = hasPricePerItem
5476
- ? "".concat(currencySymbol).concat((Number(priceSymbolRemoved) / quantity).toFixed(2))
5477
- : finalPrice;
5478
- var finalPriceArray = typeof finalPricePerQuantity === 'string' &&
5479
- finalPricePerQuantity.includes('.') &&
5480
- finalPricePerQuantity.includes(currencySymbol)
5481
- ? finalPricePerQuantity.split(currencySymbol)[1].split('.')
5473
+ var finalPriceArray = typeof productFinalPrice === 'string' &&
5474
+ productFinalPrice.includes('.') &&
5475
+ productFinalPrice.includes(currencySymbol)
5476
+ ? productFinalPrice.split(currencySymbol)[1].split('.')
5482
5477
  : ['', ''];
5483
5478
  var priceCommonProps = {
5484
5479
  size: ComponentSize.Small,
@@ -5488,13 +5483,13 @@ var PriceLabelV2 = function (_a) {
5488
5483
  weight: 700,
5489
5484
  };
5490
5485
  var originalPriceNum, finalPriceNum;
5491
- if (typeof originalPrice === 'string' && typeof finalPrice === 'string') {
5486
+ if (typeof originalPrice === 'string' && typeof productFinalPrice === 'string') {
5492
5487
  originalPriceNum = Number(originalPrice.replace(currencySymbol, ''));
5493
- finalPriceNum = Number(finalPrice.replace(currencySymbol, ''));
5488
+ finalPriceNum = Number(productFinalPrice.replace(currencySymbol, ''));
5494
5489
  }
5495
5490
  else {
5496
5491
  originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
5497
- finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
5492
+ finalPriceNum = typeof productFinalPrice === 'number' ? productFinalPrice : 0;
5498
5493
  }
5499
5494
  var saveto = originalPriceNum - finalPriceNum;
5500
5495
  var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
@@ -5509,9 +5504,11 @@ var PriceLabelV2 = function (_a) {
5509
5504
  theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
5510
5505
  return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
5511
5506
  marginTop: '-5px',
5512
- } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
5507
+ } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
5508
+ ? finalPriceArray[0]
5509
+ : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
5513
5510
  marginTop: '-6px',
5514
- } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), hasPricePerItem && (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
5511
+ } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
5515
5512
  letterSpacing: '-0.05rem',
5516
5513
  }, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
5517
5514
  borderRadius: '8px',
@@ -5530,7 +5527,7 @@ var ContainerDirectionColumn = newStyled.div(templateObject_2$$ || (templateObje
5530
5527
  var DiscountEachOneContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
5531
5528
  var PriceLabelV3 = function (_a) {
5532
5529
  var _b;
5533
- var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity"]);
5530
+ var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
5534
5531
  var theme = useTheme();
5535
5532
  var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
5536
5533
  var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
@@ -5578,17 +5575,15 @@ var PriceLabelV3 = function (_a) {
5578
5575
  var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
5579
5576
  theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
5580
5577
  var DiscountedPriceOfEach = function () {
5581
- var priceEachOne;
5582
5578
  if (!itemsQuantity || itemsQuantity < 2)
5583
5579
  return null;
5584
- priceEachOne = (finalPriceNum / itemsQuantity).toFixed(2);
5585
- return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", currencySymbol, priceEachOne] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
5580
+ return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
5586
5581
  };
5587
5582
  return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$Z, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
5588
5583
  marginTop: '-5px',
5589
5584
  } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
5590
5585
  marginTop: '-6px',
5591
- } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), itemsQuantity ? jsx$1(DiscountedPriceOfEach, {}, void 0) : null, isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
5586
+ } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsx$1(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
5592
5587
  letterSpacing: '-0.05rem',
5593
5588
  }, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
5594
5589
  borderRadius: '8px',
@@ -18870,14 +18865,22 @@ var ButtonsContainer = newStyled.div(templateObject_1$c || (templateObject_1$c =
18870
18865
  var Row = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
18871
18866
  var templateObject_1$c, templateObject_2$8;
18872
18867
 
18868
+ var getPreLabel = function (sizeLabel) {
18869
+ if (sizeLabel === '3XL' || sizeLabel === '4XL') {
18870
+ return 'Runs big - ';
18871
+ }
18872
+ if (sizeLabel === 'M' || sizeLabel === 'L' || sizeLabel === 'M / L') {
18873
+ return 'Runs small - ';
18874
+ }
18875
+ return '';
18876
+ };
18873
18877
  var SizeSelector = function (_a) {
18874
18878
  var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, onClickSizeTip = _a.onClickSizeTip, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width, _c = _a.hasSizeGuide, hasSizeGuide = _c === void 0 ? false : _c;
18875
- var isLarge = selectedValue.label === '3XL' || selectedValue.label === '4XL';
18876
18879
  return (jsxs("div", __assign$1({ css: {
18877
18880
  display: 'flex',
18878
18881
  flexDirection: inline ? 'row' : 'column',
18879
18882
  alignItems: inline ? 'center' : 'start',
18880
- } }, { children: [jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$8, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), isLarge && (jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Runs big -" }), void 0)), jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Refer to our" }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { title: "Size and Fit Guide", onClick: onClickSizeTip, hideIcon: true }, void 0))] }, void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
18883
+ } }, { children: [jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$8, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [getPreLabel(selectedValue.label), "Refer to our"] }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { title: "Size and Fit Guide", onClick: onClickSizeTip, hideIcon: true }, void 0))] }, void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
18881
18884
  var active = !size.disabled && size.label === selectedValue.label;
18882
18885
  return (jsx(SelectorSecondary, { css: {
18883
18886
  padding: '0.75rem 1rem 0.625rem',