Added name and price of the cart item

components/cart/CartItem/CartItem.tsx

@@ -1,11 +1,29 @@
 import { Trash } from '@components/icon'
+import { useCommerce } from '@lib/bigcommerce'
+import formatVariantPrice from 'utils/format-item-price'
+
+const CartItem = ({
+  item,
+  currencyCode,
+}: {
+  item: any
+  currencyCode: string
+}) => {
+  const { locale } = useCommerce()
+  const { price } = formatVariantPrice({
+    listPrice: item.extended_list_price,
+    salePrice: item.extended_sale_price,
+    currencyCode,
+    locale,
+  })
+
+  console.log('ITEM', item)
 
-const CartItem = () => {
   return (
     <li className="flex flex-row space-x-6">
       <div className="h-12 w-12 bg-violet"></div>
       <div className="flex-1 flex flex-col">
-        <span>T-Shirt</span>
+        <span>{item.name}</span>
         <div className="py-2">
           <span>-</span>
           <input
@@ -16,7 +34,7 @@ const CartItem = () => {
         </div>
       </div>
       <div className="flex flex-col space-y-2">
-        <span>$50.00</span>
+        <span>{price}</span>
         <span className="flex justify-end">
           <Trash />
         </span>

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -50,7 +50,11 @@ const CartSidebarView: FC = () => {
           <div className="px-4 sm:px-6 py-4 flex-1">
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
               {items.map((item) => (
-                <CartItem key={item.id} />
+                <CartItem
+                  key={item.id}
+                  item={item}
+                  currencyCode={data?.currency.code!}
+                />
               ))}
             </ul>
           </div>

components/ui/context.tsx

@@ -43,7 +43,6 @@ export const useUI = () => {
 }
 
 function uiReducer(state: State, action: Action) {
-  console.log(action)
   switch (action.type) {
     case 'OPEN_SIDEBAR': {
       return {

utils/format-item-price.ts

@@ -0,0 +1,41 @@
+function formatPrice({
+  amount,
+  currencyCode,
+  locale,
+}: {
+  amount: number
+  currencyCode: string
+  locale: string
+}) {
+  const formatCurrency = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currencyCode,
+  })
+
+  return formatCurrency.format(amount)
+}
+
+export default function formatVariantPrice({
+  listPrice,
+  salePrice,
+  currencyCode,
+  locale,
+}: {
+  listPrice: number
+  salePrice: number
+  currencyCode: string
+  locale: string
+}) {
+  const hasDiscount = listPrice > salePrice
+  const formatDiscount = new Intl.NumberFormat(locale, { style: 'percent' })
+  const discount = hasDiscount
+    ? formatDiscount.format((listPrice - salePrice) / listPrice)
+    : null
+
+  const price = formatPrice({ amount: salePrice, currencyCode, locale })
+  const compareAtPrice = hasDiscount
+    ? formatPrice({ amount: listPrice, currencyCode, locale })
+    : null
+
+  return { price, compareAtPrice, discount }
+}