Adding customCheckout

commerce.config.json

@@ -2,6 +2,6 @@
   "provider": "bigcommerce",
   "features": {
     "wishlist": true,
-    "customCheckout": true
+    "customCheckout": false
   }
 }

components/icons/CreditCard.tsx

@@ -0,0 +1,20 @@
+const CreditCard = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+      <path d="M1 10h22" />
+    </svg>
+  )
+}
+
+export default CreditCard

components/icons/MapPin.tsx

@@ -0,0 +1,20 @@
+const MapPin = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  )
+}
+
+export default MapPin

components/icons/index.ts

@@ -14,3 +14,5 @@ export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
 export { default as ChevronUp } from './ChevronUp'
 export { default as Vercel } from './Vercel'
+export { default as MapPin } from './MapPin'
+export { default as CreditCard } from './CreditCard'

components/ui/context.tsx

@@ -59,7 +59,12 @@ type Action =
       value: string
     }
 
-type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
+type MODAL_VIEWS =
+  | 'SIGNUP_VIEW'
+  | 'LOGIN_VIEW'
+  | 'FORGOT_VIEW'
+  | 'NEW_SHIPPING_ADDRESS'
+  | 'NEW_PAYMENT_METHOD'
 type ToastText = string
 
 export const UIContext = React.createContext<State | any>(initialState)

pages/cart.tsx

@@ -5,7 +5,7 @@ import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
 import { Layout } from '@components/common'
 import { Button, Text } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
+import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
 
 export async function getStaticProps({
@@ -38,7 +38,7 @@ export default function Cart() {
   )
 
   return (
-    <div className="grid lg:grid-cols-12">
+    <div className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
       <div className="lg:col-span-8">
         {isLoading || isEmpty ? (
           <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
@@ -103,6 +103,35 @@ export default function Cart() {
       </div>
       <div className="lg:col-span-4">
         <div className="flex-shrink-0 px-4 py-24 sm:px-6">
+          {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
+            <>
+              {/* Shipping Address */}
+              {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+              <div className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4">
+                <div className="mr-5">
+                  <MapPin />
+                </div>
+                <div className="text-sm text-center font-medium">
+                  <span className="uppercase">+ Add Shipping Address</span>
+                  {/* <span>
+                    1046 Kearny Street.<br/>
+                    San Franssisco, California
+                  </span> */}
+                </div>
+              </div>
+              {/* Payment Method */}
+              {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+              <div className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4">
+                <div className="mr-5">
+                  <CreditCard />
+                </div>
+                <div className="text-sm text-center font-medium">
+                  <span className="uppercase">+ Add Payment Method</span>
+                  {/* <span>VISA #### #### #### 2345</span> */}
+                </div>
+              </div>
+            </>
+          )}
           <div className="border-t border-accents-2">
             <ul className="py-3">
               <li className="flex justify-between py-1">