@faststore/components 2.0.6-alpha.0 → 2.0.9-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.9-alpha.0](https://github.com/vtex/faststore/compare/v2.0.8-alpha.0...v2.0.9-alpha.0) (2022-12-12)
+
+
+### Features
+
+* Create `Price` component ([#1548](https://github.com/vtex/faststore/issues/1548)) ([2d7418a](https://github.com/vtex/faststore/commit/2d7418ad45f42cdb0174d45d7c4de5b6d6e27f60))
+
+
+
+## [2.0.7-alpha.0](https://github.com/vtex/faststore/compare/v2.0.6-alpha.0...v2.0.7-alpha.0) (2022-12-09)
+
+
+### Features
+
+* Adds `DiscountBadge` component ([#1546](https://github.com/vtex/faststore/issues/1546)) ([9b2e279](https://github.com/vtex/faststore/commit/9b2e27940ffa9b52c9a62541a07e1f593a0bcfb7)), closes [#313](https://github.com/vtex/faststore/issues/313)
+
+
+
 ## [2.0.6-alpha.0](https://github.com/vtex/faststore/compare/v2.0.5-alpha.0...v2.0.6-alpha.0) (2022-12-08)
 
 

package/dist/atoms/Price/Price.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
+import React from 'react';
+export declare type PriceVariant = 'selling' | 'listing' | 'spot' | 'savings' | 'installment';
+export declare type PriceFormatter = (price: number, variant: PriceVariant) => ReactNode;
+export interface PriceProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * Set the HTML element tag of this component.
+     */
+    as?: ElementType;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * The raw price value.
+     */
+    value: number;
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter?: PriceFormatter;
+    /**
+     * The current use case variant for prices.
+     */
+    variant?: PriceVariant;
+}
+declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<Omit<HTMLSpanElement, "children">>>;
+export default Price;

package/dist/atoms/Price/Price.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+const Price = forwardRef(function Price({ value, as: Component = 'span', variant = 'selling', testId = 'fs-price', formatter = (price) => price, ...otherProps }, ref) {
+    const formattedPrice = formatter(value, variant);
+    return (React.createElement(Component, { ref: ref, "data-fs-price": true, "data-testid": testId, "data-fs-price-variant": variant, ...otherProps }, formattedPrice));
+});
+export default Price;
+//# sourceMappingURL=Price.js.map

package/dist/atoms/Price/Price.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Price.js","sourceRoot":"","sources":["../../../src/atoms/Price/Price.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAmCzC,MAAM,KAAK,GAAG,UAAU,CACtB,SAAS,KAAK,CACZ,EACE,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,UAAU,EACnB,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAC5B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,wCAEK,MAAM,2BACI,OAAO,KAC1B,UAAU,IAEb,cAAc,CACL,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/atoms/Price/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Price';
+export type { PriceProps } from './Price';

package/dist/atoms/Price/index.js

@@ -0,0 +1,2 @@
+export { default } from './Price';
+//# sourceMappingURL=index.js.map

package/dist/atoms/Price/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Price/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}

package/dist/index.d.ts

@@ -12,12 +12,16 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Overlay } from './atoms/Overlay';
 export type { OverlayProps } from './atoms/Overlay';
+export { default as Price } from './atoms/Price';
+export type { PriceProps } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
 export type { IconButtonProps } from './molecules/IconButton';
+export { default as DiscountBadge } from './molecules/DiscountBadge';
+export type { DiscountBadgeProps } from './molecules/DiscountBadge';
 export { default as InputField } from './molecules/InputField';
 export type { InputFieldProps } from './molecules/InputField';
 export { default as RadioField } from './molecules/RadioField';

package/dist/index.js

@@ -6,10 +6,12 @@ export { default as Icon } from './atoms/Icon';
 export { default as Input } from './atoms/Input';
 export { default as Label } from './atoms/Label';
 export { default as Overlay } from './atoms/Overlay';
+export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 // Molecules
 export { default as CheckboxField } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
+export { default as DiscountBadge } from './molecules/DiscountBadge';
 export { default as InputField } from './molecules/InputField';
 export { default as RadioField } from './molecules/RadioField';
 export { default as Tag } from './molecules/Tag';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAGhD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/molecules/DiscountBadge/DiscountBadge.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare type DiscountBadgeProps = {
+    /**
+     * Specifies price without discount applied.
+     */
+    listPrice: number;
+    /**
+     * Specifies current price with discount applied.
+     */
+    spotPrice: number;
+    /**
+     * Sets the component's size.
+     */
+    size?: 'small' | 'big';
+    /**
+     * Sets the limit percentage value to consider a low discount.
+     */
+    thresholdLow?: number;
+    /**
+     * Sets the limit percentage value to consider a high discount.
+     */
+    thresholdHigh?: number;
+};
+declare const DiscountBadge: ({ listPrice, spotPrice, size, thresholdLow, thresholdHigh, }: DiscountBadgeProps) => JSX.Element;
+export default DiscountBadge;

package/dist/molecules/DiscountBadge/DiscountBadge.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Badge } from '../..';
+import { useDiscountPercent } from '../DiscountBadge/useDiscountPercent';
+const DiscountBadge = ({ listPrice, spotPrice, size = 'small', thresholdLow = 15, thresholdHigh = 40, }) => {
+    const discountPercent = useDiscountPercent(listPrice, spotPrice);
+    if (discountPercent === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    const discountVariant = discountPercent <= thresholdLow
+        ? 'low'
+        : discountPercent <= thresholdHigh
+            ? 'medium'
+            : 'high';
+    return (React.createElement(Badge, { size: size, "data-fs-discount-badge": true, "data-fs-discount-badge-variant": discountVariant },
+        discountPercent,
+        "% off"));
+};
+export default DiscountBadge;
+//# sourceMappingURL=DiscountBadge.js.map

package/dist/molecules/DiscountBadge/DiscountBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscountBadge.js","sourceRoot":"","sources":["../../../src/molecules/DiscountBadge/DiscountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AAyBxE,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,SAAS,EACT,IAAI,GAAG,OAAO,EACd,YAAY,GAAG,EAAE,EACjB,aAAa,GAAG,EAAE,GACC,EAAE,EAAE;IACvB,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAEhE,IAAI,eAAe,KAAK,CAAC,EAAE;QACzB,OAAO,yCAAK,CAAA;KACb;IAED,MAAM,eAAe,GACnB,eAAe,IAAI,YAAY;QAC7B,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,eAAe,IAAI,aAAa;YAClC,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,MAAM,CAAA;IAEZ,OAAO,CACL,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,oEAEsB,eAAe;QAE9C,eAAe;gBACV,CACT,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/molecules/DiscountBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DiscountBadge';
+export type { DiscountBadgeProps } from './DiscountBadge';

package/dist/molecules/DiscountBadge/index.js

@@ -0,0 +1,2 @@
+export { default } from './DiscountBadge';
+//# sourceMappingURL=index.js.map

package/dist/molecules/DiscountBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/DiscountBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/molecules/DiscountBadge/useDiscountPercent.d.ts

@@ -0,0 +1 @@
+export declare const useDiscountPercent: (listPrice: number, spotPrice: number) => number;

package/dist/molecules/DiscountBadge/useDiscountPercent.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+export const useDiscountPercent = (listPrice, spotPrice) => {
+    return useMemo(() => {
+        const diff = listPrice - spotPrice;
+        const discount = (diff * 100) / listPrice;
+        return Math.round(discount);
+    }, [spotPrice, listPrice]);
+};
+//# sourceMappingURL=useDiscountPercent.js.map

package/dist/molecules/DiscountBadge/useDiscountPercent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDiscountPercent.js","sourceRoot":"","sources":["../../../src/molecules/DiscountBadge/useDiscountPercent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,SAAiB,EAAE,EAAE;IACzE,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,IAAI,GAAG,SAAS,GAAG,SAAS,CAAA;QAClC,MAAM,QAAQ,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,SAAS,CAAA;QAEzC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;AAC5B,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.6-alpha.0",
+  "version": "2.0.9-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -28,5 +28,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "ee9301dc7f42f9f5f6e8ccb5521078e8601fa728"
+  "gitHead": "df3ddd2d140bf19046a4753474bebee4298cd6ac"
 }

package/src/atoms/Price/Price.tsx

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ElementType, ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+
+export type PriceVariant =
+  | 'selling'
+  | 'listing'
+  | 'spot'
+  | 'savings'
+  | 'installment'
+
+export type PriceFormatter = (price: number, variant: PriceVariant) => ReactNode
+
+export interface PriceProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+  /**
+   * Set the HTML element tag of this component.
+   */
+  as?: ElementType
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * The raw price value.
+   */
+  value: number
+  /**
+   * Formatter function that transforms the raw price value and render the result.
+   */
+  formatter?: PriceFormatter
+  /**
+   * The current use case variant for prices.
+   */
+  variant?: PriceVariant
+}
+
+const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
+  function Price(
+    {
+      value,
+      as: Component = 'span',
+      variant = 'selling',
+      testId = 'fs-price',
+      formatter = (price) => price,
+      ...otherProps
+    },
+    ref
+  ) {
+    const formattedPrice = formatter(value, variant)
+
+    return (
+      <Component
+        ref={ref}
+        data-fs-price
+        data-testid={testId}
+        data-fs-price-variant={variant}
+        {...otherProps}
+      >
+        {formattedPrice}
+      </Component>
+    )
+  }
+)
+
+export default Price

package/src/atoms/Price/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Price'
+export type { PriceProps } from './Price'

package/src/index.ts

@@ -13,6 +13,8 @@ export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
 export { default as Overlay } from './atoms/Overlay'
 export type { OverlayProps } from './atoms/Overlay'
+export { default as Price } from './atoms/Price'
+export type { PriceProps } from './atoms/Price'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
 
@@ -21,6 +23,8 @@ export { default as CheckboxField } from './molecules/CheckboxField'
 export type { CheckboxFieldProps } from './molecules/CheckboxField'
 export { default as IconButton } from './molecules/IconButton'
 export type { IconButtonProps } from './molecules/IconButton'
+export { default as DiscountBadge } from './molecules/DiscountBadge'
+export type { DiscountBadgeProps } from './molecules/DiscountBadge'
 export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
 export { default as RadioField } from './molecules/RadioField'

package/src/molecules/DiscountBadge/DiscountBadge.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Badge } from '../..'
+
+import { useDiscountPercent } from '../DiscountBadge/useDiscountPercent'
+
+export type DiscountBadgeProps = {
+  /**
+   * Specifies price without discount applied.
+   */
+  listPrice: number
+  /**
+   * Specifies current price with discount applied.
+   */
+  spotPrice: number
+  /**
+   * Sets the component's size.
+   */
+  size?: 'small' | 'big'
+  /**
+   * Sets the limit percentage value to consider a low discount.
+   */
+  thresholdLow?: number
+  /**
+   * Sets the limit percentage value to consider a high discount.
+   */
+  thresholdHigh?: number
+}
+
+const DiscountBadge = ({
+  listPrice,
+  spotPrice,
+  size = 'small',
+  thresholdLow = 15,
+  thresholdHigh = 40,
+}: DiscountBadgeProps) => {
+  const discountPercent = useDiscountPercent(listPrice, spotPrice)
+
+  if (discountPercent === 0) {
+    return <></>
+  }
+
+  const discountVariant =
+    discountPercent <= thresholdLow
+      ? 'low'
+      : discountPercent <= thresholdHigh
+      ? 'medium'
+      : 'high'
+
+  return (
+    <Badge
+      size={size}
+      data-fs-discount-badge
+      data-fs-discount-badge-variant={discountVariant}
+    >
+      {discountPercent}% off
+    </Badge>
+  )
+}
+
+export default DiscountBadge

package/src/molecules/DiscountBadge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DiscountBadge'
+export type { DiscountBadgeProps } from './DiscountBadge'

package/src/molecules/DiscountBadge/useDiscountPercent.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react'
+
+export const useDiscountPercent = (listPrice: number, spotPrice: number) => {
+  return useMemo(() => {
+    const diff = listPrice - spotPrice
+    const discount = (diff * 100) / listPrice
+
+    return Math.round(discount)
+  }, [spotPrice, listPrice])
+}