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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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/index.d.ts

@@ -18,6 +18,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/dist/index.js

@@ -10,6 +10,7 @@ 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;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.7-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": "f740d9f405309548f33c81d061131de9905c95bf"
 }

package/src/index.ts

@@ -21,6 +21,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])
+}