Add checkout button

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>

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,

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()
+  }
+}