usePrice hook

components/cart/CartItem/CartItem.tsx

@@ -1,9 +1,8 @@
 import { Trash, Plus, Minus } from '@components/icon'
-import { useCommerce } from '@lib/bigcommerce'
+import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
 import { ChangeEvent, useEffect, useState } from 'react'
-import formatVariantPrice from 'utils/format-item-price'
 import styles from './CartItem.module.css'
 
 const CartItem = ({
@@ -13,16 +12,14 @@ const CartItem = ({
   item: any
   currencyCode: string
 }) => {
-  const { locale } = useCommerce()
+  const { price } = usePrice({
+    amount: item.extended_sale_price,
+    baseAmount: item.extended_list_price,
+    currencyCode,
+  })
   const updateItem = useUpdateItem(item)
   const removeItem = useRemoveItem()
   const [quantity, setQuantity] = useState(item.quantity)
-  const { price } = formatVariantPrice({
-    listPrice: item.extended_list_price,
-    salePrice: item.extended_sale_price,
-    currencyCode,
-    locale,
-  })
   const updateQuantity = async (val: number) => {
     const data = await updateItem({ quantity: val })
   }

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -4,34 +4,26 @@ import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
 import { ArrowLeft, Bag, Cross, Check } from '@components/icon'
 import { useUI } from '@components/ui/context'
-import { useCommerce } from '@lib/bigcommerce'
 import useCart from '@lib/bigcommerce/cart/use-cart'
+import usePrice from '@lib/bigcommerce/use-price'
 import CartItem from '../CartItem'
 import useOpenCheckout from '@lib/bigcommerce/cart/use-open-checkout'
-import formatPrice from 'utils/format-price'
 
 const CartSidebarView: FC = () => {
-  const { locale } = useCommerce()
   const { data, isEmpty } = useCart()
+  const { price: subTotal } = usePrice(data && {
+    amount: data.base_amount,
+    currencyCode: data.currency.code,
+  })
+  const { price: total } = usePrice(data && {
+    amount: data.cart_amount,
+    currencyCode: data.currency.code,
+  })
   const openCheckout = useOpenCheckout()
   const { closeSidebar } = useUI()
   const handleClose = () => closeSidebar()
 
   const items = data?.line_items.physical_items ?? []
-  const subTotal = data
-    ? formatPrice({
-        amount: data.base_amount,
-        currencyCode: data.currency.code,
-        locale,
-      })
-    : 0
-  const total = data
-    ? formatPrice({
-        amount: data.cart_amount,
-        currencyCode: data.currency.code,
-        locale,
-      })
-    : 0
 
   console.log('CART', data, isEmpty)