forked from crowetic/commerce
Adding customCheckout
This commit is contained in:
parent
42be44c7ee
commit
3acca7cc17
@ -2,6 +2,6 @@
|
|||||||
"provider": "bigcommerce",
|
"provider": "bigcommerce",
|
||||||
"features": {
|
"features": {
|
||||||
"wishlist": true,
|
"wishlist": true,
|
||||||
"customCheckout": true
|
"customCheckout": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
20
components/icons/CreditCard.tsx
Normal file
20
components/icons/CreditCard.tsx
Normal file
@ -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
|
20
components/icons/MapPin.tsx
Normal file
20
components/icons/MapPin.tsx
Normal file
@ -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
|
@ -14,3 +14,5 @@ export { default as RightArrow } from './RightArrow'
|
|||||||
export { default as Info } from './Info'
|
export { default as Info } from './Info'
|
||||||
export { default as ChevronUp } from './ChevronUp'
|
export { default as ChevronUp } from './ChevronUp'
|
||||||
export { default as Vercel } from './Vercel'
|
export { default as Vercel } from './Vercel'
|
||||||
|
export { default as MapPin } from './MapPin'
|
||||||
|
export { default as CreditCard } from './CreditCard'
|
||||||
|
@ -59,7 +59,12 @@ type Action =
|
|||||||
value: string
|
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
|
type ToastText = string
|
||||||
|
|
||||||
export const UIContext = React.createContext<State | any>(initialState)
|
export const UIContext = React.createContext<State | any>(initialState)
|
||||||
|
@ -5,7 +5,7 @@ import useCart from '@framework/cart/use-cart'
|
|||||||
import usePrice from '@framework/product/use-price'
|
import usePrice from '@framework/product/use-price'
|
||||||
import { Layout } from '@components/common'
|
import { Layout } from '@components/common'
|
||||||
import { Button, Text } from '@components/ui'
|
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'
|
import { CartItem } from '@components/cart'
|
||||||
|
|
||||||
export async function getStaticProps({
|
export async function getStaticProps({
|
||||||
@ -38,7 +38,7 @@ export default function Cart() {
|
|||||||
)
|
)
|
||||||
|
|
||||||
return (
|
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">
|
<div className="lg:col-span-8">
|
||||||
{isLoading || isEmpty ? (
|
{isLoading || isEmpty ? (
|
||||||
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
|
<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>
|
||||||
<div className="lg:col-span-4">
|
<div className="lg:col-span-4">
|
||||||
<div className="flex-shrink-0 px-4 py-24 sm:px-6">
|
<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">
|
<div className="border-t border-accents-2">
|
||||||
<ul className="py-3">
|
<ul className="py-3">
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user