diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index cb932247f..326390327 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -1,14 +1,14 @@
import { FC } from 'react'
import cn from 'classnames'
-import { UserNav } from '@components/common'
-import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/product/use-price'
+import Link from 'next/link'
import CartItem from '../CartItem'
import s from './CartSidebarView.module.css'
-import { LineItem } from '@commerce/types'
+import { Button } from '@components/ui'
+import { UserNav } from '@components/common'
+import { useUI } from '@components/ui/context'
+import { Bag, Cross, Check } from '@components/icons'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
const CartSidebarView: FC = () => {
const { closeSidebar } = useUI()
@@ -88,9 +88,14 @@ const CartSidebarView: FC = () => {
) : (
<>
<div className="px-4 sm:px-6 flex-1">
- <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
- My Cart
- </h2>
+ <Link href="/cart">
+ <h2
+ className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide cursor-pointer inline-block"
+ onClick={handleClose}
+ >
+ My Cart
+ </h2>
+ </Link>
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
{data!.lineItems.map((item: any) => (
<CartItem
diff --git a/components/icons/CreditCard.tsx b/components/icons/CreditCard.tsx
new file mode 100644
index 000000000..85504d8ba
--- /dev/null
+++ b/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
diff --git a/components/icons/MapPin.tsx b/components/icons/MapPin.tsx
new file mode 100644
index 000000000..6323b9c1c
--- /dev/null
+++ b/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
diff --git a/components/icons/index.ts b/components/icons/index.ts
index 6e57ab0e8..1f2089085 100644
--- a/components/icons/index.ts
+++ b/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'
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 13992a736..f66adb9d7 100644
--- a/components/ui/context.tsx
+++ b/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)
diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx
index 290f7f9ec..6dc59b900 100644
--- a/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/components/wishlist/WishlistButton/WishlistButton.tsx
@@ -30,7 +30,8 @@ const WishlistButton: FC<Props> = ({
const itemInWishlist = data?.items?.find(
// @ts-ignore Wishlist is not always enabled
(item) =>
- item.product_id === productId && (item.variant_id as any) === variant.id
+ item.product_id === Number(productId) &&
+ (item.variant_id as any) === Number(variant.id)
)
const handleWishlistChange = async (e: any) => {
diff --git a/framework/bigcommerce/api/utils/parse-item.ts b/framework/bigcommerce/api/utils/parse-item.ts
index dcc716c23..7c8cd4728 100644
--- a/framework/bigcommerce/api/utils/parse-item.ts
+++ b/framework/bigcommerce/api/utils/parse-item.ts
@@ -1,6 +1,11 @@
import type { ItemBody as WishlistItemBody } from '../wishlist'
import type { CartItemBody, OptionSelections } from '../../types'
+type BCWishlistItemBody = {
+ product_id: number
+ variant_id: number
+}
+
type BCCartItemBody = {
product_id: number
variant_id: number
@@ -8,9 +13,11 @@ type BCCartItemBody = {
option_selections?: OptionSelections
}
-export const parseWishlistItem = (item: WishlistItemBody) => ({
- product_id: item.productId,
- variant_id: item.variantId,
+export const parseWishlistItem = (
+ item: WishlistItemBody
+): BCWishlistItemBody => ({
+ product_id: Number(item.productId),
+ variant_id: Number(item.variantId),
})
export const parseCartItem = (item: CartItemBody): BCCartItemBody => ({
diff --git a/framework/bigcommerce/customer/get-customer-wishlist.ts b/framework/bigcommerce/customer/get-customer-wishlist.ts
index e854ff933..97e5654a9 100644
--- a/framework/bigcommerce/customer/get-customer-wishlist.ts
+++ b/framework/bigcommerce/customer/get-customer-wishlist.ts
@@ -68,14 +68,15 @@ async function getCustomerWishlist({
const productsById = graphqlData.products.reduce<{
[k: number]: ProductEdge
}>((prods, p) => {
- prods[Number(p.node.entityId)] = p as any
+ prods[Number(p.id)] = p as any
return prods
}, {})
// Populate the wishlist items with the graphql products
wishlist.items.forEach((item) => {
const product = item && productsById[item.product_id!]
if (item && product) {
- item.product = product.node
+ // @ts-ignore Fix this type when the wishlist type is properly defined
+ item.product = product
}
})
}
diff --git a/framework/bigcommerce/wishlist/use-wishlist.tsx b/framework/bigcommerce/wishlist/use-wishlist.tsx
index 3efba7ffd..4850d1cd9 100644
--- a/framework/bigcommerce/wishlist/use-wishlist.tsx
+++ b/framework/bigcommerce/wishlist/use-wishlist.tsx
@@ -18,7 +18,7 @@ export const handler: SWRHook<
url: '/api/bigcommerce/wishlist',
method: 'GET',
},
- fetcher({ input: { customerId, includeProducts }, options, fetch }) {
+ async fetcher({ input: { customerId, includeProducts }, options, fetch }) {
if (!customerId) return null
// Use a dummy base as we only care about the relative path
@@ -35,7 +35,7 @@ export const handler: SWRHook<
const { data: customer } = useCustomer()
const response = useData({
input: [
- ['customerId', (customer as any)?.id],
+ ['customerId', customer?.entityId],
['includeProducts', input?.includeProducts],
],
swrOptions: {
diff --git a/framework/shopify/api/index.ts b/framework/shopify/api/index.ts
index 0fe58f2df..4e23ce99c 100644
--- a/framework/shopify/api/index.ts
+++ b/framework/shopify/api/index.ts
@@ -8,7 +8,6 @@ import {
} from '../const'
if (!API_URL) {
- console.log(process.env)
throw new Error(
`The environment variable NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN is missing and it's required to access your store`
)
diff --git a/package.json b/package.json
index 491071e55..906d950dc 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
"analyze": "BUNDLE_ANALYZE=both yarn build",
"prettier-fix": "prettier --write .",
"find:unused": "next-unused",
- "commerce": "node scripts/commerce.js",
"generate": "graphql-codegen",
"generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
},
diff --git a/pages/cart.tsx b/pages/cart.tsx
index 8b2dbb57b..cd5bedacc 100644
--- a/pages/cart.tsx
+++ b/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">
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index 9938698d4..0dddaf23d 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -1,7 +1,4 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
import type { GetStaticPropsContext } from 'next'
-
import { Heart } from '@components/icons'
import { Layout } from '@components/common'
import { Text, Container } from '@components/ui'
@@ -36,8 +33,7 @@ export async function getStaticProps({
export default function Wishlist() {
const { data: customer } = useCustomer()
// @ts-ignore Shopify - Fix this types
- const { data, isLoading, isEmpty } = useWishlist()
- const router = useRouter()
+ const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
return (
<Container>
@@ -60,7 +56,7 @@ export default function Wishlist() {
data &&
// @ts-ignore Shopify - Fix this types
data.items?.map((item) => (
- <WishlistCard key={item.id} product={item as any} />
+ <WishlistCard key={item.id} product={item.product! as any} />
))
)}
</div>
diff --git a/scripts/commerce.js b/scripts/commerce.js
deleted file mode 100644
index e6eefa224..000000000
--- a/scripts/commerce.js
+++ /dev/null
@@ -1 +0,0 @@
-console.log('Hello')