@faststore/core 3.0.74 → 3.0.76

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -72,6 +72,10 @@ export interface CartSidebarProps {
   quantitySelector: {
     useUnitMultiplier?: boolean
   }
+  taxesConfiguration?: {
+    usePriceWithTaxes?: boolean
+    taxesLabel?: string
+  }
 }
 
 function CartSidebar({
@@ -86,9 +90,19 @@ function CartSidebar({
     icon: { icon: checkoutButtonIcon, alt: checkoutButtonIconAlt },
   },
   quantitySelector,
+  taxesConfiguration,
 }: CartSidebarProps) {
   const btnProps = useCheckoutButton()
-  const { items, gifts, totalItems, isValidating, subTotal, total } = useCart()
+  const {
+    items,
+    gifts,
+    totalItems,
+    isValidating,
+    subTotal,
+    total,
+    subTotalWithTaxes,
+    totalWithTaxes,
+  } = useCart({ useUnitMultiplier: quantitySelector?.useUnitMultiplier })
   const { cart: displayCart, closeCart } = useUI()
   const { fadeOut } = useFadeEffect()
   const { sendViewCartEvent } = useViewCartEvent()
@@ -126,6 +140,7 @@ function CartSidebar({
                     <li key={item.id}>
                       <CartItem
                         item={item}
+                        taxesConfiguration={taxesConfiguration}
                         useUnitMultiplier={
                           quantitySelector?.useUnitMultiplier ?? false
                         }
@@ -145,8 +160,18 @@ function CartSidebar({
 
                 <UICartSidebarFooter>
                   <OrderSummary
-                    subTotal={subTotal}
-                    total={total}
+                    subTotal={
+                      taxesConfiguration?.usePriceWithTaxes
+                        ? subTotalWithTaxes
+                        : subTotal
+                    }
+                    total={
+                      taxesConfiguration?.usePriceWithTaxes
+                        ? totalWithTaxes
+                        : total
+                    }
+                    includeTaxes={taxesConfiguration?.usePriceWithTaxes}
+                    includeTaxesLabel={taxesConfiguration?.taxesLabel}
                     numberOfItems={totalItems}
                     checkoutButton={
                       <UIButton

package/src/components/cart/OrderSummary/OrderSummary.tsx

@@ -1,9 +1,12 @@
-import { OrderSummary as UIOrderSummary } from '@faststore/ui'
+import {
+  OrderSummary as UIOrderSummary,
+  OrderSummaryProps as UIOrderSummaryProps,
+} from '@faststore/ui'
 import type { ReactNode } from 'react'
 
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 
-interface OrderSummaryProps {
+type OrderSummaryProps = UIOrderSummaryProps & {
   subTotal: number
   total: number
   numberOfItems: number
@@ -15,6 +18,7 @@ function OrderSummary({
   total,
   numberOfItems,
   checkoutButton,
+  ...otherProps
 }: OrderSummaryProps) {
   const discount = subTotal - total
   const formattedDiscount = useFormattedPrice(discount)
@@ -26,6 +30,7 @@ function OrderSummary({
         subtotalValue={useFormattedPrice(subTotal)}
         discountValue={discount > 0 ? `-${formattedDiscount}` : undefined}
         totalValue={useFormattedPrice(total)}
+        {...otherProps}
       />
       {checkoutButton}
     </>

package/src/components/product/ProductCard/ProductCard.tsx

@@ -50,6 +50,13 @@ export interface ProductCardProps {
    * Enables a DiscountBadge to the component.
    */
   showDiscountBadge?: boolean
+  /**
+   * Define taxes configuration, if taxes should be considered
+   */
+  taxesConfiguration?: {
+    usePriceWithTaxes?: boolean
+    taxesLabel?: string
+  }
 }
 
 function ProductCard({
@@ -63,6 +70,7 @@ function ProductCard({
   buttonLabel = 'Add',
   onButtonClick,
   showDiscountBadge = true,
+  taxesConfiguration,
   ...otherProps
 }: ProductCardProps) {
   const {
@@ -70,8 +78,9 @@ function ProductCard({
     isVariantOf: { name },
     image: [img],
     offers: {
-      lowPrice: spotPrice,
-      offers: [{ listPrice, availability }],
+      lowPrice,
+      lowPriceWithTaxes,
+      offers: [{ listPrice: listPriceBase, availability, listPriceWithTaxes }],
     },
   } = product
 
@@ -88,6 +97,13 @@ function ProductCard({
     [availability]
   )
 
+  const spotPrice = taxesConfiguration?.usePriceWithTaxes
+    ? lowPriceWithTaxes
+    : lowPrice
+  const listPrice = taxesConfiguration?.usePriceWithTaxes
+    ? listPriceWithTaxes
+    : listPriceBase
+
   const hasDiscount = spotPrice <= listPrice
 
   return (
@@ -120,6 +136,8 @@ function ProductCard({
         onButtonClick={onButtonClick}
         linkProps={linkProps}
         showDiscountBadge={hasDiscount && showDiscountBadge}
+        includeTaxes={taxesConfiguration?.usePriceWithTaxes}
+        includeTaxesLabel={taxesConfiguration?.taxesLabel}
       />
     </UIProductCard>
   )
@@ -152,10 +170,12 @@ export const fragment = gql(`
 
     offers {
       lowPrice
+      lowPriceWithTaxes
       offers {
         availability
         price
         listPrice
+        listPriceWithTaxes
         quantity
         seller {
           identifier

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -22,14 +22,17 @@ interface Props {
   /**
    * CMS defined data to be used in ProductCard component.
    */
-  productCard?: Pick<ProductCardProps, 'showDiscountBadge' | 'bordered'>
+  productCard?: Pick<
+    ProductCardProps,
+    'showDiscountBadge' | 'bordered' | 'taxesConfiguration'
+  >
 }
 
 function ProductGrid({
   products,
   page,
   pageSize,
-  productCard: { showDiscountBadge, bordered } = {},
+  productCard: { showDiscountBadge, bordered, taxesConfiguration } = {},
 }: Props) {
   const { __experimentalProductCard: ProductCard } =
     useOverrideComponents<'ProductGallery'>()
@@ -58,6 +61,7 @@ function ProductGrid({
               }
               product={product}
               index={pageSize * page + idx + 1}
+              taxesConfiguration={taxesConfiguration}
             />
           </UIProductGridItem>
         ))}

package/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx

@@ -13,12 +13,17 @@ interface Props {
   itemsPerPage?: number
   title: string
   kind: 'buy' | 'view'
+  taxesConfiguration?: {
+    usePriceWithTaxes?: boolean
+    taxesLabel?: string
+  }
 }
 const CrossSellingShelf = ({
   numberOfItems,
   itemsPerPage,
   title,
   kind,
+  taxesConfiguration,
 }: Props) => {
   const { ref, inView } = useInView()
   const context = usePDP()
@@ -40,6 +45,7 @@ const CrossSellingShelf = ({
         itemsPerPage={itemsPerPage}
         title={title}
         selectedFacets={selectedFacets}
+        taxesConfiguration={taxesConfiguration}
       />
     </Section>
   )

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -52,6 +52,10 @@ export interface ProductDetailsProps {
   quantitySelector: {
     useUnitMultiplier?: boolean
   }
+  taxesConfiguration?: {
+    usePriceWithTaxes?: boolean
+    taxesLabel?: string
+  }
 }
 
 function ProductDetails({
@@ -73,6 +77,7 @@ function ProductDetails({
   },
   notAvailableButton: { title: notAvailableButtonTitle },
   quantitySelector,
+  taxesConfiguration,
 }: ProductDetailsProps) {
   const {
     DiscountBadge,
@@ -103,8 +108,9 @@ function ProductDetails({
     isVariantOf: { name, productGroupID: productId },
     image: productImages,
     offers: {
-      offers: [{ availability, price, listPrice, seller }],
+      offers: [{ availability, price, listPrice, listPriceWithTaxes, seller }],
       lowPrice,
+      lowPriceWithTaxes,
     },
   } = product
 
@@ -164,8 +170,16 @@ function ProductDetails({
                     size={discountBadgeSize ?? DiscountBadge.props.size}
                     // Dynamic props shouldn't be overridable
                     // This decision can be reviewed later if needed
-                    listPrice={listPrice}
-                    spotPrice={lowPrice}
+                    listPrice={
+                      taxesConfiguration?.usePriceWithTaxes
+                        ? listPriceWithTaxes
+                        : listPrice
+                    }
+                    spotPrice={
+                      taxesConfiguration?.usePriceWithTaxes
+                        ? lowPriceWithTaxes
+                        : lowPrice
+                    }
                   />
                 )
               }
@@ -196,6 +210,7 @@ function ProductDetails({
                 setQuantity={setQuantity}
                 product={product}
                 isValidating={isValidating}
+                taxesConfiguration={taxesConfiguration}
               />
             </section>
 
@@ -279,10 +294,13 @@ export const fragment = gql(`
 
     offers {
       lowPrice
+      lowPriceWithTaxes
       offers {
         availability
         price
+        priceWithTaxes
         listPrice
+        listPriceWithTaxes
         seller {
           identifier
         }

package/src/components/sections/ProductDetails/section.module.scss

@@ -1,5 +1,10 @@
 @layer components {
   .section {
+    // Taxes label
+    --fs-product-details-taxes-label-color        : var(--fs-color-info-text);
+    --fs-product-details-taxes-text-size          : var(--fs-text-size-tiny);
+    --fs-product-details-taxes-text-weight        : var(--fs-text-weight-regular);
+
     margin-top: 0;
 
     @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
@@ -24,5 +29,11 @@
     @import "@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss";
     @import "@faststore/ui/src/components/organisms/ImageGallery/styles.scss";
     @import "@faststore/ui/src/components/organisms/ProductDetails/styles.scss";
+
+    [data-fs-product-details-taxes-label] {
+      font-size: var(--fs-product-details-taxes-text-size);
+      font-weight: var(--fs-product-details-taxes-text-weight);
+      color: var(--fs-product-details-taxes-label-color);
+    }
   }
 }

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -15,6 +15,10 @@ import styles from './section.module.scss'
 interface ProductTilesProps
   extends Partial<ClientManyProductsQueryQueryVariables> {
   title: string
+  taxesConfiguration?: {
+    usePriceWithTaxes?: boolean
+    taxesLabel?: string
+  }
 }
 
 const NUMBER_ITEMS_TO_EXPAND_FIRST = 3
@@ -54,7 +58,11 @@ const getSizes = (products: number, idx: number) => {
   }
 }
 
-const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
+const ProductTiles = ({
+  title,
+  taxesConfiguration,
+  ...variables
+}: ProductTilesProps) => {
   const viewedOnce = useRef(false)
   const { ref, inView } = useInView()
   const data = useProductsQuery(variables)
@@ -97,6 +105,7 @@ const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
                 variant="wide"
                 aspectRatio={getRatio(productEdges.length, idx)}
                 imgProps={getSizes(productEdges.length, idx)}
+                taxesConfiguration={taxesConfiguration}
               />
             </Tile>
           ))}

package/src/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -10,6 +10,7 @@ import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'
 
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { Label as UILabel } from '@faststore/ui'
 
 interface ProductDetailsSettingsProps {
   product: ProductDetailsFragment_ProductFragment
@@ -22,7 +23,11 @@ interface ProductDetailsSettingsProps {
   quantity: number
   setQuantity: Dispatch<SetStateAction<number>>
   notAvailableButtonTitle: string
-  useUnitMultiplier: boolean
+  useUnitMultiplier?: boolean
+  taxesConfiguration?: {
+    usePriceWithTaxes?: boolean
+    taxesLabel?: string
+  }
 }
 
 function ProductDetailsSettings({
@@ -33,7 +38,8 @@ function ProductDetailsSettings({
   setQuantity,
   buyButtonIcon: { icon: buyButtonIconName, alt: buyButtonIconAlt },
   notAvailableButtonTitle,
-  useUnitMultiplier,
+  useUnitMultiplier = false,
+  taxesConfiguration,
 }: ProductDetailsSettingsProps) {
   const {
     BuyButton,
@@ -55,14 +61,25 @@ function ProductDetailsSettings({
     image: productImages,
     additionalProperty,
     offers: {
-      offers: [{ availability, price, listPrice, seller }],
+      offers: [
+        {
+          availability,
+          price,
+          priceWithTaxes,
+          listPrice,
+          seller,
+          listPriceWithTaxes,
+        },
+      ],
     },
   } = product
 
   const buyProps = useBuyButton({
     id,
     price,
+    priceWithTaxes,
     listPrice,
+    listPriceWithTaxes,
     seller,
     quantity,
     itemOffered: {
@@ -109,13 +126,28 @@ function ProductDetailsSettings({
     <>
       {!outOfStock && (
         <section data-fs-product-details-values>
-          <ProductPrice.Component
-            data-fs-product-details-prices
-            value={price}
-            listPrice={listPrice}
-            formatter={useFormattedPrice}
-            {...ProductPrice.props}
-          />
+          <div data-fs-product-details-values-wrapper>
+            <ProductPrice.Component
+              data-fs-product-details-prices
+              value={
+                (taxesConfiguration?.usePriceWithTaxes
+                  ? priceWithTaxes
+                  : price) * (unitMultiplier ?? 1)
+              }
+              listPrice={
+                (taxesConfiguration?.usePriceWithTaxes
+                  ? listPriceWithTaxes
+                  : listPrice) * (unitMultiplier ?? 1)
+              }
+              formatter={useFormattedPrice}
+              {...ProductPrice.props}
+            />
+            {taxesConfiguration?.usePriceWithTaxes && (
+              <UILabel data-fs-product-details-taxes-label>
+                {taxesConfiguration?.taxesLabel}
+              </UILabel>
+            )}
+          </div>
           <QuantitySelector.Component
             min={1}
             max={10}

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -57,7 +57,10 @@ export interface ProductGalleryProps {
     label?: string
   }
   sortBySelector?: SortProps
-  productCard?: Pick<ProductCardProps, 'showDiscountBadge' | 'bordered'>
+  productCard?: Pick<
+    ProductCardProps,
+    'showDiscountBadge' | 'bordered' | 'taxesConfiguration'
+  >
 }
 
 function ProductGallery({

package/src/components/ui/ProductGallery/ProductGalleryPage.tsx

@@ -8,7 +8,10 @@ import { useGalleryPage } from 'src/sdk/product/usePageProductsQuery'
 interface Props {
   page: number
   title: string
-  productCard?: Pick<ProductCardProps, 'showDiscountBadge' | 'bordered'>
+  productCard?: Pick<
+    ProductCardProps,
+    'showDiscountBadge' | 'bordered' | 'taxesConfiguration'
+  >
   itemsPerPage: number
 }
 

package/src/components/ui/ProductShelf/ProductShelf.tsx

@@ -27,6 +27,10 @@ export type ProductShelfProps = {
     key: string
     value: string
   }[]
+  taxesConfiguration?: {
+    usePriceWithTaxes?: boolean
+    taxesLabel?: string
+  }
   productCardConfiguration?: {
     showDiscountBadge?: boolean
     bordered?: boolean
@@ -40,6 +44,7 @@ function ProductShelf({
   productCardConfiguration: { bordered, showDiscountBadge } = {},
   numberOfItems,
   itemsPerPage = 5,
+  taxesConfiguration = {},
   ...otherProps
 }: ProductShelfProps) {
   const {
@@ -101,6 +106,7 @@ function ProductShelf({
                 showDiscountBadge={
                   showDiscountBadge ?? ProductCard.props.showDiscountBadge
                 }
+                taxesConfiguration={taxesConfiguration}
                 // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 key={`${product.node.id}`}

package/src/pages/[slug]/p.tsx

@@ -181,6 +181,7 @@ const query = gql(`
       offers {
         lowPrice
         highPrice
+        lowPriceWithTaxes
         priceCurrency
         offers {
           availability

package/src/sdk/cart/index.ts

@@ -49,7 +49,9 @@ export const ValidateCartMutation = gql(`
     }
     quantity
     price
+    priceWithTaxes
     listPrice
+    listPriceWithTaxes
     itemOffered {
       ...CartProductItem
     }
@@ -115,18 +117,20 @@ const validateCart = async (cart: Cart): Promise<Cart | null> => {
             seller,
             quantity,
             itemOffered,
-          }): IStoreOffer => ({
-            price,
-            listPrice,
-            seller,
-            quantity,
-            itemOffered: {
-              sku: itemOffered.sku,
-              image: itemOffered.image,
-              name: itemOffered.name,
-              additionalProperty: itemOffered.additionalProperty,
-            },
-          })
+          }): IStoreOffer => {
+            return {
+              price,
+              listPrice,
+              seller,
+              quantity,
+              itemOffered: {
+                sku: itemOffered.sku,
+                image: itemOffered.image,
+                name: itemOffered.name,
+                additionalProperty: itemOffered.additionalProperty,
+              },
+            }
+          }
         ),
       },
     },
@@ -159,31 +163,45 @@ export const cartStore = {
   },
 }
 
-export const useCart = () => {
+export const useCart = (
+  { useUnitMultiplier } = { useUnitMultiplier: false }
+) => {
   const cart = useStore(cartStore)
   const isValidating = useStore(validationStore)
 
-  return useMemo(
-    () => ({
+  return useMemo(() => {
+    const cartTotals = cart.items.reduce(
+      (totals, curr) => {
+        totals.total += curr.price * curr.quantity
+        totals.totalWithTaxes += curr.priceWithTaxes * curr.quantity
+
+        const quantityMultiplier = useUnitMultiplier
+          ? curr.quantity * (curr?.itemOffered?.unitMultiplier ?? 1)
+          : curr.quantity
+
+        totals.totalItems += isGift(curr) ? 0 : quantityMultiplier
+        totals.subTotal += curr.listPrice * quantityMultiplier
+        totals.subTotalWithTaxes += curr.listPriceWithTaxes * quantityMultiplier
+
+        return totals
+      },
+      {
+        totalItems: 0,
+        total: 0,
+        subTotal: 0,
+        totalWithTaxes: 0,
+        subTotalWithTaxes: 0,
+      }
+    )
+
+    return {
       ...cart,
+      ...cartTotals,
       isValidating,
       messages: cart.messages,
       gifts: cart.items.filter((item) => isGift(item)),
       items: cart.items.filter((item) => !isGift(item)),
       totalUniqueItems: cart.items.length,
-      totalItems: cart.items.reduce(
-        (acc, curr) => acc + (isGift(curr) ? 0 : curr.quantity),
-        0
-      ),
-      total: cart.items.reduce(
-        (acc, curr) => acc + curr.price * curr.quantity,
-        0
-      ),
-      subTotal: cart.items.reduce(
-        (acc, curr) => acc + curr.listPrice * curr.quantity,
-        0
-      ),
-    }),
-    [cart, isValidating]
-  )
+    }
+  }, [cart, isValidating, useUnitMultiplier])
 }