Add totals to cart

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -4,17 +4,35 @@ 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 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 openCheckout = useOpenCheckout()
   const { closeSidebar } = useUI()
-  const items = data?.line_items.physical_items ?? []
   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)
 
   // This should come from the API via hook I guess
@@ -96,11 +114,11 @@ const CartSidebarView: FC = () => {
               <ul className="py-3">
                 <li className="flex justify-between py-1">
                   <span>Subtotal</span>
-                  <span>$100</span>
+                  <span>{subTotal}</span>
                 </li>
                 <li className="flex justify-between py-1">
                   <span>Taxes</span>
-                  <span>$9.99</span>
+                  <span>Calculated at checkout</span>
                 </li>
                 <li className="flex justify-between py-1">
                   <span>Estimated Shipping</span>
@@ -109,7 +127,7 @@ const CartSidebarView: FC = () => {
               </ul>
               <div className="flex justify-between border-t border-gray-300 py-3 font-bold mb-10">
                 <span>Total</span>
-                <span>$1320.23</span>
+                <span>{total}</span>
               </div>
             </div>
             <Button width="100%" onClick={() => openCheckout()}>

lib/bigcommerce/cart/use-open-checkout.tsx

@@ -5,7 +5,6 @@ export default function useOpenCheckout() {
 
   return async function openCheckout() {
     window.open(data?.redirect_urls.checkout_url)
-    console.log('URL1', data?.redirect_urls.checkout_url)
     // Get new redirect urls
     await mutate()
   }

utils/format-item-price.ts

@@ -1,19 +1,4 @@
-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)
-}
+import formatPrice from './format-price'
 
 export default function formatVariantPrice({
   listPrice,

utils/format-price.ts

@@ -0,0 +1,16 @@
+export default 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)
+}