forked from crowetic/commerce
Adding customCheckout
This commit is contained in:
parent
42be44c7ee
commit
3acca7cc17
@ -2,6 +2,6 @@
|
||||
"provider": "bigcommerce",
|
||||
"features": {
|
||||
"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 ChevronUp } from './ChevronUp'
|
||||
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
|
||||
}
|
||||
|
||||
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)
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user