From d4d22a3ce76a1a4acd268b6891ea64deead5a242 Mon Sep 17 00:00:00 2001
From: Florian Cargouet <20863963+Florian-crg@users.noreply.github.com>
Date: Tue, 23 Nov 2021 20:48:41 +0100
Subject: [PATCH] Replace button custom checkout enabled on /cart (#535)

Co-authored-by: Gonzalo Pozzo <gonzalo.pozzo4@gmail.com>
---
 pages/cart.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/pages/cart.tsx b/pages/cart.tsx
index 3279301da..09a2227a2 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -6,6 +6,7 @@ import { Layout } from '@components/common'
 import { Button, Text } from '@components/ui'
 import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
+import { useUI } from '@components/ui/context'
 
 export async function getStaticProps({
   preview,
@@ -26,6 +27,7 @@ export default function Cart() {
   const error = null
   const success = null
   const { data, isLoading, isEmpty } = useCart()
+  const { openSidebar, setSidebarView } = useUI()
 
   const { price: subTotal } = usePrice(
     data && {
@@ -40,6 +42,11 @@ export default function Cart() {
     }
   )
 
+  const goToCheckout = () => {
+    openSidebar()
+    setSidebarView('CHECKOUT_VIEW')
+  }
+
   return (
     <div className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
       <div className="lg:col-span-8">
@@ -162,9 +169,17 @@ export default function Cart() {
                   Continue Shopping
                 </Button>
               ) : (
-                <Button href="/checkout" Component="a" width="100%">
-                  Proceed to Checkout
-                </Button>
+                <>
+                  {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? (
+                    <Button Component="a" width="100%" onClick={goToCheckout}>
+                      Proceed to Checkout ({total})
+                    </Button>
+                  ) : (
+                    <Button href="/checkout" Component="a" width="100%">
+                      Proceed to Checkout
+                    </Button>
+                  )}
+                </>
               )}
             </div>
           </div>