From 835298ac920f66c107003e1f81b19e30efdc819c Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Tue, 6 Oct 2020 17:16:06 -0500
Subject: [PATCH] Added name and price of the cart item

---
 components/cart/CartItem/CartItem.tsx         | 24 +++++++++--
 .../cart/CartSidebarView/CartSidebarView.tsx  |  6 ++-
 components/ui/context.tsx                     |  1 -
 utils/format-item-price.ts                    | 41 +++++++++++++++++++
 4 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 utils/format-item-price.ts

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index d668c31bf..692217979 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/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>
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index c918cf67a..5fa3c04d5 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/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>
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 0c29063f9..f9014c194 100644
--- a/components/ui/context.tsx
+++ b/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 {
diff --git a/utils/format-item-price.ts b/utils/format-item-price.ts
new file mode 100644
index 000000000..180f12182
--- /dev/null
+++ b/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 }
+}