From 2030255c5ed4355fc6725bd9e89d1ece33ff267f Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Fri, 9 Oct 2020 22:40:12 -0500
Subject: [PATCH] Add checkout button

---
 components/cart/CartSidebarView/CartSidebarView.tsx | 10 ++++++++--
 components/ui/Button/Button.tsx                     |  3 +--
 lib/bigcommerce/cart/use-open-checkout.tsx          | 12 ++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 lib/bigcommerce/cart/use-open-checkout.tsx

diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 98c9fee0f..d9b276435 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -6,10 +6,11 @@ import { ArrowLeft, Bag, Cross, Check } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import CartItem from '../CartItem'
-import Link from '@components/ui/Link'
+import useOpenCheckout from '@lib/bigcommerce/cart/use-open-checkout'
 
 const CartSidebarView: FC = () => {
   const { data, isEmpty } = useCart()
+  const openCheckout = useOpenCheckout()
   const { closeSidebar } = useUI()
   const items = data?.line_items.physical_items ?? []
   const handleClose = () => closeSidebar()
@@ -90,7 +91,12 @@ const CartSidebarView: FC = () => {
             </ul>
           </div>
           <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-            <Button href="/checkout" Component={Link} width="100%">
+            <Button
+              width="100%"
+              onClick={() => {
+                openCheckout()
+              }}
+            >
               Proceed to Checkout
             </Button>
           </div>
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index fbcaf0dac..c5046a3fd 100644
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@@ -35,7 +35,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const ref = useRef<typeof Component>(null)
   const { buttonProps, isPressed } = useButton(
     {
-      ...props,
+      ...rest,
       // @ts-ignore onClick === onPress for our purposes
       onPress: onClick,
       isDisabled: disabled,
@@ -59,7 +59,6 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
-      {...rest}
       {...buttonProps}
       style={{
         width,
diff --git a/lib/bigcommerce/cart/use-open-checkout.tsx b/lib/bigcommerce/cart/use-open-checkout.tsx
new file mode 100644
index 000000000..638e6fe22
--- /dev/null
+++ b/lib/bigcommerce/cart/use-open-checkout.tsx
@@ -0,0 +1,12 @@
+import useCart from './use-cart'
+
+export default function useOpenCheckout() {
+  const { data, mutate } = useCart()
+
+  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()
+  }
+}