crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic

Browse Source
This commit is contained in:
cond0r 2021-02-22 09:14:22 +02:00
commit 005fe9d6c9
63 changed files with 900 additions and 884 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
README.md
View File

@ -42,57 +42,6 @@ Additionally, we need to ensure feature parity (not all providers have e.g. wish
People actively working on this project: @okbel & @lfades.
## Troubleshoot
<details>
<summary>I already own a BigCommerce store. What should I do?</summary>
<br>
First thing you do is: <b>set your environment variables</b>
<br>
<br>
.env.local
```sh
BIGCOMMERCE_STOREFRONT_API_URL=<>
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
BIGCOMMERCE_STORE_API_URL=<>
BIGCOMMERCE_STORE_API_TOKEN=<>
BIGCOMMERCE_STORE_API_CLIENT_ID=<>
```
If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.
1. Install Vercel CLI: `npm i -g vercel`
2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link`
3. Download your environment variables: `vercel env pull .env.local`
Next, you're free to customize the starter. More updates coming soon. Stay tuned.
</details>
<details>
<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
<br>
After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
<br>
<br>
BigCommerce team has been notified and they plan to add more detailed about this subject.
</details>
## Contribute
Our commitment to Open Source can be found [here](https://vercel.com/oss).
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
2. Create a new branch `git checkout -b MY_BRANCH_NAME`
3. Install yarn: `npm install -g yarn`
4. Install the dependencies: `yarn`
5. Duplicate `.env.template` and rename it to `.env.local`.
6. Add proper store values to `.env.local`.
7. Run `yarn dev` to build and watch for code changes
8. The development branch is `canary` (this is the branch pull requests should be made against).
On a release, `canary` branch is rebased into `master`.
## Framework
Framework is where the data comes from. It contains mostly hooks and functions.
@ -132,3 +81,70 @@ import { useUI } from '@components/ui'
import { useCustomer } from '@framework/customer'
import { useAddItem, useWishlist, useRemoveItem } from '@framework/wishlist'
```
## Config
### Features
In order to make the UI entirely functional, we need to specify which features certain providers do not **provide**.
**Disabling wishlist:**
```
{
"features": {
"wishlist": false
}
}
```
## Contribute
Our commitment to Open Source can be found [here](https://vercel.com/oss).
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
2. Create a new branch `git checkout -b MY_BRANCH_NAME`
3. Install yarn: `npm install -g yarn`
4. Install the dependencies: `yarn`
5. Duplicate `.env.template` and rename it to `.env.local`.
6. Add proper store values to `.env.local`.
7. Run `yarn dev` to build and watch for code changes
8. The development branch is `canary` (this is the branch pull requests should be made against).
On a release, `canary` branch is rebased into `master`.
## Troubleshoot
<details>
<summary>I already own a BigCommerce store. What should I do?</summary>
<br>
First thing you do is: <b>set your environment variables</b>
<br>
<br>
.env.local
```sh
BIGCOMMERCE_STOREFRONT_API_URL=<>
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
BIGCOMMERCE_STORE_API_URL=<>
BIGCOMMERCE_STORE_API_TOKEN=<>
BIGCOMMERCE_STORE_API_CLIENT_ID=<>
```
If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.
1. Install Vercel CLI: `npm i -g vercel`
2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link`
3. Download your environment variables: `vercel env pull .env.local`
Next, you're free to customize the starter. More updates coming soon. Stay tuned.
</details>
<details>
<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
<br>
After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
<br>
<br>
BigCommerce team has been notified and they plan to add more detailed about this subject.
</details>

2
components/cart/CartItem/CartItem.tsx
View File

@ -33,7 +33,7 @@ const CartItem = ({
currencyCode,
})
const updateItem = useUpdateItem(item)
const updateItem = useUpdateItem({ item })
const removeItem = useRemoveItem()
const [quantity, setQuantity] = useState(item.quantity)
const [removing, setRemoving] = useState(false)

4
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -9,7 +9,7 @@ import usePrice from '@framework/product/use-price'
import CartItem from '../CartItem'
import s from './CartSidebarView.module.css'
const CartSidebarView: FC = () => {
const CartSidebarView: FC<{ wishlist?: boolean }> = ({ wishlist }) => {
const { closeSidebar } = useUI()
const { data, isLoading, isEmpty } = useCart()
@ -48,7 +48,7 @@ const CartSidebarView: FC = () => {
</button>
</div>
<div className="space-y-1">
<UserNav className="" />
<UserNav wishlist={wishlist} />
</div>
</div>
</header>

12
components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
View File

@ -5,14 +5,21 @@ import { Grid } from '@components/ui'
import { ProductCard } from '@components/product'
import s from './HomeAllProductsGrid.module.css'
import { getCategoryPath, getDesignerPath } from '@lib/search'
import wishlist from '@framework/api/wishlist'
interface Props {
categories?: any
brands?: any
products?: Product[]
wishlist?: boolean
}
const Head: FC<Props> = ({ categories, brands, products = [] }) => {
const HomeAllProductsGrid: FC<Props> = ({
categories,
brands,
products = [],
wishlist = false,
}) => {
return (
<div className={s.root}>
<div className={s.asideWrapper}>
@ -44,6 +51,7 @@ const Head: FC<Props> = ({ categories, brands, products = [] }) => {
width: 480,
height: 480,
}}
wishlist={wishlist}
/>
))}
</Grid>
@ -52,4 +60,4 @@ const Head: FC<Props> = ({ categories, brands, products = [] }) => {
)
}
export default Head
export default HomeAllProductsGrid

12
components/common/Layout/Layout.tsx
View File

@ -41,10 +41,14 @@ const FeatureBar = dynamic(
interface Props {
pageProps: {
pages?: Page[]
commerceFeatures: Record<string, boolean>
}
}
const Layout: FC<Props> = ({ children, pageProps }) => {
const Layout: FC<Props> = ({
children,
pageProps: { commerceFeatures, ...pageProps },
}) => {
const {
displaySidebar,
displayModal,
@ -54,11 +58,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
} = useUI()
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
const { locale = 'en-US' } = useRouter()
const isWishlistEnabled = commerceFeatures.wishlist
return (
<CommerceProvider locale={locale}>
<div className={cn(s.root)}>
<Navbar />
<Navbar wishlist={isWishlistEnabled} />
<main className="fit">{children}</main>
<Footer pages={pageProps.pages} />
@ -69,7 +73,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
</Modal>
<Sidebar open={displaySidebar} onClose={closeSidebar}>
<CartSidebarView />
<CartSidebarView wishlist={isWishlistEnabled} />
</Sidebar>
<FeatureBar

4
components/common/Navbar/Navbar.tsx
View File

@ -5,7 +5,7 @@ import { Searchbar, UserNav } from '@components/common'
import NavbarRoot from './NavbarRoot'
import s from './Navbar.module.css'
const Navbar: FC = () => (
const Navbar: FC<{ wishlist?: boolean }> = ({ wishlist }) => (
<NavbarRoot>
<Container>
<div className="relative flex flex-row justify-between py-4 align-center md:py-6">
@ -36,7 +36,7 @@ const Navbar: FC = () => (
</div>
<div className="flex justify-end flex-1 space-x-8">
<UserNav />
<UserNav wishlist={wishlist} />
</div>
</div>

19
components/common/UserNav/UserNav.tsx
View File

@ -12,11 +12,12 @@ import { Avatar } from '@components/common'
interface Props {
className?: string
wishlist?: boolean
}
const countItem = (count: number, item: LineItem) => count + item.quantity
const UserNav: FC<Props> = ({ className }) => {
const UserNav: FC<Props> = ({ className, wishlist = false }) => {
const { data } = useCart()
const { data: customer } = useCustomer()
const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
@ -30,13 +31,15 @@ const UserNav: FC<Props> = ({ className }) => {
<Bag />
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
</li>
<li className={s.item}>
<Link href="/wishlist">
<a onClick={closeSidebarIfPresent} aria-label="Wishlist">
<Heart />
</a>
</Link>
</li>
{wishlist && (
<li className={s.item}>
<Link href="/wishlist">
<a onClick={closeSidebarIfPresent} aria-label="Wishlist">
<Heart />
</a>
</Link>
</li>
)}
<li className={s.item}>
{customer ? (
<DropdownMenu />

10
components/product/ProductCard/ProductCard.tsx
View File

@ -4,13 +4,14 @@ import Link from 'next/link'
import type { Product } from '@commerce/types'
import s from './ProductCard.module.css'
import Image, { ImageProps } from 'next/image'
// import WishlistButton from '@components/wishlist/WishlistButton'
import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
product: Product
variant?: 'slim' | 'simple'
imgProps?: Omit<ImageProps, 'src'>
wishlist?: boolean
}
const placeholderImg = '/product-img-placeholder.svg'
@ -20,6 +21,7 @@ const ProductCard: FC<Props> = ({
product,
variant,
imgProps,
wishlist = false,
...props
}) => (
<Link href={`/product/${product.slug}`} {...props}>
@ -57,11 +59,13 @@ const ProductCard: FC<Props> = ({
{product.price.currencyCode}
</span>
</div>
{/* <WishlistButton
{wishlist && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/> */}
/>
)}
</div>
<div className={s.imageContainer}>
{product?.images && (

10
components/product/ProductSlider/ProductSlider.tsx
View File

@ -50,10 +50,12 @@ const ProductSlider: FC = ({ children }) => {
)
return () => {
sliderContainerRef.current!.removeEventListener(
'touchstart',
preventNavigation
)
if (sliderContainerRef.current) {
sliderContainerRef.current!.removeEventListener(
'touchstart',
preventNavigation
)
}
}
}, [])

17
components/product/ProductView/ProductView.tsx
View File

@ -13,15 +13,16 @@ import usePrice from '@framework/product/use-price'
import { useAddItem } from '@framework/cart'
import { getVariant, SelectedOptions } from '../helpers'
// import WishlistButton from '@components/wishlist/WishlistButton'
import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
children?: any
product: Product
wishlist?: boolean
}
const ProductView: FC<Props> = ({ product }) => {
const ProductView: FC<Props> = ({ product, wishlist = false }) => {
const addItem = useAddItem()
const { price } = usePrice({
amount: product.price.value,
@ -151,11 +152,13 @@ const ProductView: FC<Props> = ({ product }) => {
</Button>
</div>
</div>
{/* <WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]!}
/> */}
{wishlist && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]!}
/>
)}
</div>
</Container>
)

1
components/wishlist/WishlistButton/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './WishlistButton'

2
components/wishlist/WishlistCard/WishlistCard.tsx
View File

@ -22,7 +22,7 @@ const WishlistCard: FC<Props> = ({ product }) => {
baseAmount: product.prices?.retailPrice?.value,
currencyCode: product.prices?.price?.currencyCode!,
})
const removeItem = useRemoveItem({ includeProducts: true })
const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
const [loading, setLoading] = useState(false)
const [removing, setRemoving] = useState(false)
const addItem = useAddItem()

1
components/wishlist/index.ts
View File

@ -1 +1,2 @@
export { default as WishlistCard } from './WishlistCard'
export { default as WishlistButton } from './WishlistButton'

62
framework/bigcommerce/auth/use-login.tsx
View File

@ -1,54 +1,40 @@
import { useCallback } from 'react'
import type { HookFetcher } from '@commerce/utils/types'
import type { MutationHook } from '@commerce/utils/types'
import { CommerceError } from '@commerce/utils/errors'
import useCommerceLogin from '@commerce/use-login'
import useLogin, { UseLogin } from '@commerce/use-login'
import type { LoginBody } from '../api/customers/login'
import useCustomer from '../customer/use-customer'
const defaultOpts = {
url: '/api/bigcommerce/customers/login',
method: 'POST',
}
export default useLogin as UseLogin<typeof handler>
export type LoginInput = LoginBody
export const handler: MutationHook<null, {}, LoginBody> = {
fetchOptions: {
url: '/api/bigcommerce/customers/login',
method: 'POST',
},
async fetcher({ input: { email, password }, options, fetch }) {
if (!(email && password)) {
throw new CommerceError({
message:
'A first name, last name, email and password are required to login',
})
}
export const fetcher: HookFetcher<null, LoginBody> = (
options,
{ email, password },
fetch
) => {
if (!(email && password)) {
throw new CommerceError({
message:
'A first name, last name, email and password are required to login',
return fetch({
...options,
body: { email, password },
})
}
return fetch({
...defaultOpts,
...options,
body: { email, password },
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useLogin = () => {
},
useHook: ({ fetch }) => () => {
const { revalidate } = useCustomer()
const fn = useCommerceLogin<null, LoginInput>(defaultOpts, customFetcher)
return useCallback(
async function login(input: LoginInput) {
const data = await fn(input)
async function login(input) {
const data = await fetch({ input })
await revalidate()
return data
},
[fn]
[fetch, revalidate]
)
}
useLogin.extend = extendHook
return useLogin
},
}
export default extendHook(fetcher)

39
framework/bigcommerce/auth/use-logout.tsx
View File

@ -1,38 +1,25 @@
import { useCallback } from 'react'
import type { HookFetcher } from '@commerce/utils/types'
import useCommerceLogout from '@commerce/use-logout'
import type { MutationHook } from '@commerce/utils/types'
import useLogout, { UseLogout } from '@commerce/use-logout'
import useCustomer from '../customer/use-customer'
const defaultOpts = {
url: '/api/bigcommerce/customers/logout',
method: 'GET',
}
export default useLogout as UseLogout<typeof handler>
export const fetcher: HookFetcher<null> = (options, _, fetch) => {
return fetch({
...defaultOpts,
...options,
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useLogout = () => {
export const handler: MutationHook<null> = {
fetchOptions: {
url: '/api/bigcommerce/customers/logout',
method: 'GET',
},
useHook: ({ fetch }) => () => {
const { mutate } = useCustomer()
const fn = useCommerceLogout<null>(defaultOpts, customFetcher)
return useCallback(
async function login() {
const data = await fn(null)
async function logout() {
const data = await fetch()
await mutate(null, false)
return data
},
[fn]
[fetch, mutate]
)
}
useLogout.extend = extendHook
return useLogout
},
}
export default extendHook(fetcher)

71
framework/bigcommerce/auth/use-signup.tsx
View File

@ -1,55 +1,44 @@
import { useCallback } from 'react'
import type { HookFetcher } from '@commerce/utils/types'
import type { MutationHook } from '@commerce/utils/types'
import { CommerceError } from '@commerce/utils/errors'
import useCommerceSignup from '@commerce/use-signup'
import useSignup, { UseSignup } from '@commerce/use-signup'
import type { SignupBody } from '../api/customers/signup'
import useCustomer from '../customer/use-customer'
import customerCreateMutation from '@framework/utils/mutations/customer-create'
import { CustomerCreateInput } from '@framework/schema'
const defaultOpts = {
query: customerCreateMutation,
}
export default useSignup as UseSignup<typeof handler>
export const fetcher: HookFetcher<null, CustomerCreateInput> = (
options,
{ firstName, lastName, email, password },
fetch
) => {
if (!(firstName && lastName && email && password)) {
throw new CommerceError({
message:
'A first name, last name, email and password are required to signup',
export const handler: MutationHook<null, {}, SignupBody, SignupBody> = {
fetchOptions: {
url: '/api/bigcommerce/customers/signup',
method: 'POST',
},
async fetcher({
input: { firstName, lastName, email, password },
options,
fetch,
}) {
if (!(firstName && lastName && email && password)) {
throw new CommerceError({
message:
'A first name, last name, email and password are required to signup',
})
}
return fetch({
...options,
body: { firstName, lastName, email, password },
})
}
return fetch({
...defaultOpts,
...options,
variables: { firstName, lastName, email, password },
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useSignup = () => {
},
useHook: ({ fetch }) => () => {
const { revalidate } = useCustomer()
const fn = useCommerceSignup<null, CustomerCreateInput>(
defaultOpts,
customFetcher
)
return useCallback(
async function signup(input: CustomerCreateInput) {
const data = await fn(input)
async function signup(input) {
const data = await fetch({ input })
await revalidate()
return data
},
[fn]
[fetch, revalidate]
)
}
useSignup.extend = extendHook
return useSignup
},
}
export default extendHook(fetcher)

3
framework/bigcommerce/cart/index.ts
View File

@ -1,5 +1,4 @@
export { default as useCart } from './use-cart'
export { default as useAddItem } from './use-add-item'
export { default as useRemoveItem } from './use-remove-item'
export { default as useWishlistActions } from './use-cart-actions'
export { default as useUpdateItem } from './use-cart-actions'
export { default as useUpdateItem } from './use-update-item'

35
framework/bigcommerce/cart/use-add-item.tsx
View File

@ -1,29 +1,24 @@
import type { MutationHandler } from '@commerce/utils/types'
import { useCallback } from 'react'
import type { MutationHook } from '@commerce/utils/types'
import { CommerceError } from '@commerce/utils/errors'
import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
import { normalizeCart } from '../lib/normalize'
import type {
AddCartItemBody,
Cart,
BigcommerceCart,
CartItemBody,
AddCartItemBody,
} from '../types'
import useCart from './use-cart'
import { BigcommerceProvider } from '..'
const defaultOpts = {
url: '/api/bigcommerce/cart',
method: 'POST',
}
export default useAddItem as UseAddItem<typeof handler>
export default useAddItem as UseAddItem<BigcommerceProvider, CartItemBody>
export const handler: MutationHandler<Cart, {}, AddCartItemBody> = {
export const handler: MutationHook<Cart, {}, CartItemBody> = {
fetchOptions: {
url: '/api/bigcommerce/cart',
method: 'GET',
method: 'POST',
},
async fetcher({ input: { item }, options, fetch }) {
async fetcher({ input: item, options, fetch }) {
if (
item.quantity &&
(!Number.isInteger(item.quantity) || item.quantity! < 1)
@ -34,20 +29,22 @@ export const handler: MutationHandler<Cart, {}, AddCartItemBody> = {
}
const data = await fetch<BigcommerceCart, AddCartItemBody>({
...defaultOpts,
...options,
body: { item },
})
return normalizeCart(data)
},
useHook() {
useHook: ({ fetch }) => () => {
const { mutate } = useCart()
return async function addItem({ input, fetch }) {
const data = await fetch({ input })
await mutate(data, false)
return data
}
return useCallback(
async function addItem(input) {
const data = await fetch({ input })
await mutate(data, false)
return data
},
[fetch, mutate]
)
},
}

13
framework/bigcommerce/cart/use-cart-actions.tsx
View File

@ -1,13 +0,0 @@
import useAddItem from './use-add-item'
import useRemoveItem from './use-remove-item'
import useUpdateItem from './use-update-item'
// This hook is probably not going to be used, but it's here
// to show how a commerce should be structuring it
export default function useCartActions() {
const addItem = useAddItem()
const updateItem = useUpdateItem()
const removeItem = useRemoveItem()
return { addItem, updateItem, removeItem }
}

11
framework/bigcommerce/cart/use-cart.tsx
View File

@ -1,13 +1,12 @@
import { useMemo } from 'react'
import { HookHandler } from '@commerce/utils/types'
import { SWRHook } from '@commerce/utils/types'
import useCart, { UseCart, FetchCartInput } from '@commerce/cart/use-cart'
import { normalizeCart } from '../lib/normalize'
import type { Cart } from '../types'
import type { BigcommerceProvider } from '..'
export default useCart as UseCart<BigcommerceProvider>
export default useCart as UseCart<typeof handler>
export const handler: HookHandler<
export const handler: SWRHook<
Cart | null,
{},
FetchCartInput,
@ -21,9 +20,9 @@ export const handler: HookHandler<
const data = cartId ? await fetch(options) : null
return data && normalizeCart(data)
},
useHook({ input, useData }) {
useHook: ({ useData }) => (input) => {
const response = useData({
swrOptions: { revalidateOnFocus: false, ...input.swrOptions },
swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
})
return useMemo(

74
framework/bigcommerce/cart/use-remove-item.tsx
View File

@ -1,8 +1,12 @@
import { useCallback } from 'react'
import { HookFetcher } from '@commerce/utils/types'
import type {
MutationHookContext,
HookFetcherContext,
} from '@commerce/utils/types'
import { ValidationError } from '@commerce/utils/errors'
import useCartRemoveItem, {
RemoveItemInput as UseRemoveItemInput,
import useRemoveItem, {
RemoveItemInput as RemoveItemInputBase,
UseRemoveItem,
} from '@commerce/cart/use-remove-item'
import { normalizeCart } from '../lib/normalize'
import type {
@ -13,41 +17,41 @@ import type {
} from '../types'
import useCart from './use-cart'
const defaultOpts = {
url: '/api/bigcommerce/cart',
method: 'DELETE',
}
export type RemoveItemFn<T = any> = T extends LineItem
? (input?: RemoveItemInput<T>) => Promise<Cart | null>
: (input: RemoveItemInput<T>) => Promise<Cart | null>
export type RemoveItemInput<T = any> = T extends LineItem
? Partial<UseRemoveItemInput>
: UseRemoveItemInput
? Partial<RemoveItemInputBase>
: RemoveItemInputBase
export const fetcher: HookFetcher<Cart | null, RemoveCartItemBody> = async (
options,
{ itemId },
fetch
) => {
const data = await fetch<BigcommerceCart>({
...defaultOpts,
...options,
body: { itemId },
})
return normalizeCart(data)
}
export default useRemoveItem as UseRemoveItem<typeof handler>
export function extendHook(customFetcher: typeof fetcher) {
const useRemoveItem = <T extends LineItem | undefined = undefined>(
item?: T
export const handler = {
fetchOptions: {
url: '/api/bigcommerce/cart',
method: 'DELETE',
},
async fetcher({
input: { itemId },
options,
fetch,
}: HookFetcherContext<RemoveCartItemBody>) {
const data = await fetch<BigcommerceCart>({
...options,
body: { itemId },
})
return normalizeCart(data)
},
useHook: ({
fetch,
}: MutationHookContext<Cart | null, RemoveCartItemBody>) => <
T extends LineItem | undefined = undefined
>(
ctx: { item?: T } = {}
) => {
const { item } = ctx
const { mutate } = useCart()
const fn = useCartRemoveItem<Cart | null, RemoveCartItemBody>(
defaultOpts,
customFetcher
)
const removeItem: RemoveItemFn<LineItem> = async (input) => {
const itemId = input?.id ?? item?.id
@ -57,17 +61,11 @@ export function extendHook(customFetcher: typeof fetcher) {
})
}
const data = await fn({ itemId })
const data = await fetch({ input: { itemId } })
await mutate(data, false)
return data
}
return useCallback(removeItem as RemoveItemFn<T>, [fn, mutate])
}
useRemoveItem.extend = extendHook
return useRemoveItem
return useCallback(removeItem as RemoveItemFn<T>, [fetch, mutate])
},
}
export default extendHook(fetcher)

113
framework/bigcommerce/cart/use-update-item.tsx
View File

@ -1,9 +1,13 @@
import { useCallback } from 'react'
import debounce from 'lodash.debounce'
import type { HookFetcher } from '@commerce/utils/types'
import type {
MutationHookContext,
HookFetcherContext,
} from '@commerce/utils/types'
import { ValidationError } from '@commerce/utils/errors'
import useCartUpdateItem, {
UpdateItemInput as UseUpdateItemInput,
import useUpdateItem, {
UpdateItemInput as UpdateItemInputBase,
UseUpdateItem,
} from '@commerce/cart/use-update-item'
import { normalizeCart } from '../lib/normalize'
import type {
@ -12,52 +16,59 @@ import type {
BigcommerceCart,
LineItem,
} from '../types'
import { fetcher as removeFetcher } from './use-remove-item'
import { handler as removeItemHandler } from './use-remove-item'
import useCart from './use-cart'
const defaultOpts = {
url: '/api/bigcommerce/cart',
method: 'PUT',
}
export type UpdateItemInput<T = any> = T extends LineItem
? Partial<UseUpdateItemInput<LineItem>>
: UseUpdateItemInput<LineItem>
? Partial<UpdateItemInputBase<LineItem>>
: UpdateItemInputBase<LineItem>
export const fetcher: HookFetcher<Cart | null, UpdateCartItemBody> = async (
options,
{ itemId, item },
fetch
) => {
if (Number.isInteger(item.quantity)) {
// Also allow the update hook to remove an item if the quantity is lower than 1
if (item.quantity! < 1) {
return removeFetcher(null, { itemId }, fetch)
export default useUpdateItem as UseUpdateItem<typeof handler>
export const handler = {
fetchOptions: {
url: '/api/bigcommerce/cart',
method: 'PUT',
},
async fetcher({
input: { itemId, item },
options,
fetch,
}: HookFetcherContext<UpdateCartItemBody>) {
if (Number.isInteger(item.quantity)) {
// Also allow the update hook to remove an item if the quantity is lower than 1
if (item.quantity! < 1) {
return removeItemHandler.fetcher({
options: removeItemHandler.fetchOptions,
input: { itemId },
fetch,
})
}
} else if (item.quantity) {
throw new ValidationError({
message: 'The item quantity has to be a valid integer',
})
}
} else if (item.quantity) {
throw new ValidationError({
message: 'The item quantity has to be a valid integer',
const data = await fetch<BigcommerceCart, UpdateCartItemBody>({
...options,
body: { itemId, item },
})
}
const data = await fetch<BigcommerceCart, UpdateCartItemBody>({
...defaultOpts,
...options,
body: { itemId, item },
})
return normalizeCart(data)
}
function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
const useUpdateItem = <T extends LineItem | undefined = undefined>(
item?: T
return normalizeCart(data)
},
useHook: ({
fetch,
}: MutationHookContext<Cart | null, UpdateCartItemBody>) => <
T extends LineItem | undefined = undefined
>(
ctx: {
item?: T
wait?: number
} = {}
) => {
const { mutate } = useCart()
const fn = useCartUpdateItem<Cart | null, UpdateCartItemBody>(
defaultOpts,
customFetcher
)
const { item } = ctx
const { mutate } = useCart() as any
return useCallback(
debounce(async (input: UpdateItemInput<T>) => {
@ -71,20 +82,16 @@ function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
})
}
const data = await fn({
itemId,
item: { productId, variantId, quantity: input.quantity },
const data = await fetch({
input: {
itemId,
item: { productId, variantId, quantity: input.quantity },
},
})
await mutate(data, false)
return data
}, cfg?.wait ?? 500),
[fn, mutate]
}, ctx.wait ?? 500),
[fetch, mutate]
)
}
useUpdateItem.extend = extendHook
return useUpdateItem
},
}
export default extendHook(fetcher)

5
framework/bigcommerce/config.json Normal file
View File

@ -0,0 +1,5 @@
{
"features": {
"wishlist": false
}
}

11
framework/bigcommerce/customer/use-customer.tsx
View File

@ -1,11 +1,10 @@
import { HookHandler } from '@commerce/utils/types'
import { SWRHook } from '@commerce/utils/types'
import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
import type { Customer, CustomerData } from '../api/customers'
import type { BigcommerceProvider } from '..'
export default useCustomer as UseCustomer<BigcommerceProvider>
export default useCustomer as UseCustomer<typeof handler>
export const handler: HookHandler<Customer | null> = {
export const handler: SWRHook<Customer | null> = {
fetchOptions: {
url: '/api/bigcommerce/customers',
method: 'GET',
@ -14,11 +13,11 @@ export const handler: HookHandler<Customer | null> = {
const data = await fetch<CustomerData | null>(options)
return data?.customer ?? null
},
useHook({ input, useData }) {
useHook: ({ useData }) => (input) => {
return useData({
swrOptions: {
revalidateOnFocus: false,
...input.swrOptions,
...input?.swrOptions,
},
})
},

11
framework/bigcommerce/product/use-search.tsx
View File

@ -1,9 +1,8 @@
import { HookHandler } from '@commerce/utils/types'
import useSearch, { UseSearch } from '@commerce/products/use-search'
import { SWRHook } from '@commerce/utils/types'
import useSearch, { UseSearch } from '@commerce/product/use-search'
import type { SearchProductsData } from '../api/catalog/products'
import type { BigcommerceProvider } from '..'
export default useSearch as UseSearch<BigcommerceProvider>
export default useSearch as UseSearch<typeof handler>
export type SearchProductsInput = {
search?: string
@ -12,7 +11,7 @@ export type SearchProductsInput = {
sort?: string
}
export const handler: HookHandler<
export const handler: SWRHook<
SearchProductsData,
SearchProductsInput,
SearchProductsInput
@ -37,7 +36,7 @@ export const handler: HookHandler<
method: options.method,
})
},
useHook({ input, useData }) {
useHook: ({ useData }) => (input = {}) => {
return useData({
input: [
['search', input.search],

20
framework/bigcommerce/provider.ts
View File

@ -1,18 +1,34 @@
import { handler as useCart } from './cart/use-cart'
import { handler as useAddItem } from './cart/use-add-item'
import { handler as useUpdateItem } from './cart/use-update-item'
import { handler as useRemoveItem } from './cart/use-remove-item'
import { handler as useWishlist } from './wishlist/use-wishlist'
import { handler as useWishlistAddItem } from './wishlist/use-add-item'
import { handler as useWishlistRemoveItem } from './wishlist/use-remove-item'
import { handler as useCustomer } from './customer/use-customer'
import { handler as useSearch } from './product/use-search'
import { handler as useLogin } from './auth/use-login'
import { handler as useLogout } from './auth/use-logout'
import { handler as useSignup } from './auth/use-signup'
import fetcher from './fetcher'
export const bigcommerceProvider = {
locale: 'en-us',
cartCookie: 'bc_cartId',
fetcher,
cart: { useCart, useAddItem },
wishlist: { useWishlist },
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
wishlist: {
useWishlist,
useAddItem: useWishlistAddItem,
useRemoveItem: useWishlistRemoveItem,
},
customer: { useCustomer },
products: { useSearch },
auth: { useLogin, useLogout, useSignup },
}
export type BigcommerceProvider = typeof bigcommerceProvider

3
framework/bigcommerce/types.ts
View File

@ -43,9 +43,6 @@ export type CartItemBody = Core.CartItemBody & {
optionSelections?: OptionSelections
}
type X = Core.CartItemBody extends CartItemBody ? any : never
type Y = CartItemBody extends Core.CartItemBody ? any : never
export type GetCartHandlerBody = Core.GetCartHandlerBody
export type AddCartItemBody = Core.AddCartItemBody<CartItemBody>

54
framework/bigcommerce/wishlist/use-add-item.tsx
View File

@ -1,43 +1,24 @@
import { useCallback } from 'react'
import { HookFetcher } from '@commerce/utils/types'
import type { MutationHook } from '@commerce/utils/types'
import { CommerceError } from '@commerce/utils/errors'
import useWishlistAddItem, {
AddItemInput,
} from '@commerce/wishlist/use-add-item'
import { UseWishlistInput } from '@commerce/wishlist/use-wishlist'
import useAddItem, { UseAddItem } from '@commerce/wishlist/use-add-item'
import type { ItemBody, AddItemBody } from '../api/wishlist'
import useCustomer from '../customer/use-customer'
import useWishlist from './use-wishlist'
import type { BigcommerceProvider } from '..'
const defaultOpts = {
url: '/api/bigcommerce/wishlist',
method: 'POST',
}
export default useAddItem as UseAddItem<typeof handler>
// export type AddItemInput = ItemBody
export const fetcher: HookFetcher<any, AddItemBody> = (
options,
{ item },
fetch
) => {
// TODO: add validations before doing the fetch
return fetch({
...defaultOpts,
...options,
body: { item },
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useAddItem = (opts?: UseWishlistInput<BigcommerceProvider>) => {
export const handler: MutationHook<any, {}, ItemBody, AddItemBody> = {
fetchOptions: {
url: '/api/bigcommerce/wishlist',
method: 'POST',
},
useHook: ({ fetch }) => () => {
const { data: customer } = useCustomer()
const { revalidate } = useWishlist(opts)
const fn = useWishlistAddItem(defaultOpts, customFetcher)
const { revalidate } = useWishlist()
return useCallback(
async function addItem(input: AddItemInput<any>) {
async function addItem(item) {
if (!customer) {
// A signed customer is required in order to have a wishlist
throw new CommerceError({
@ -45,17 +26,12 @@ export function extendHook(customFetcher: typeof fetcher) {
})
}
const data = await fn({ item: input })
// TODO: add validations before doing the fetch
const data = await fetch({ input: { item } })
await revalidate()
return data
},
[fn, revalidate, customer]
[fetch, revalidate, customer]
)
}
useAddItem.extend = extendHook
return useAddItem
},
}
export default extendHook(fetcher)

65
framework/bigcommerce/wishlist/use-remove-item.tsx
View File

@ -1,43 +1,32 @@
import { useCallback } from 'react'
import { HookFetcher } from '@commerce/utils/types'
import type { MutationHook } from '@commerce/utils/types'
import { CommerceError } from '@commerce/utils/errors'
import useWishlistRemoveItem from '@commerce/wishlist/use-remove-item'
import type { RemoveItemBody } from '../api/wishlist'
import useRemoveItem, {
RemoveItemInput,
UseRemoveItem,
} from '@commerce/wishlist/use-remove-item'
import type { RemoveItemBody, Wishlist } from '../api/wishlist'
import useCustomer from '../customer/use-customer'
import useWishlist from './use-wishlist'
import useWishlist, { UseWishlistInput } from './use-wishlist'
const defaultOpts = {
url: '/api/bigcommerce/wishlist',
method: 'DELETE',
}
export default useRemoveItem as UseRemoveItem<typeof handler>
export type RemoveItemInput = {
id: string | number
}
export const fetcher: HookFetcher<any | null, RemoveItemBody> = (
options,
{ itemId },
fetch
) => {
return fetch({
...defaultOpts,
...options,
body: { itemId },
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useRemoveItem = (opts?: any) => {
export const handler: MutationHook<
Wishlist | null,
{ wishlist?: UseWishlistInput },
RemoveItemInput,
RemoveItemBody
> = {
fetchOptions: {
url: '/api/bigcommerce/wishlist',
method: 'DELETE',
},
useHook: ({ fetch }) => ({ wishlist } = {}) => {
const { data: customer } = useCustomer()
const { revalidate } = useWishlist(opts)
const fn = useWishlistRemoveItem<any | null, RemoveItemBody>(
defaultOpts,
customFetcher
)
const { revalidate } = useWishlist(wishlist)
return useCallback(
async function removeItem(input: RemoveItemInput) {
async function removeItem(input) {
if (!customer) {
// A signed customer is required in order to have a wishlist
throw new CommerceError({
@ -45,17 +34,11 @@ export function extendHook(customFetcher: typeof fetcher) {
})
}
const data = await fn({ itemId: String(input.id) })
const data = await fetch({ input: { itemId: String(input.id) } })
await revalidate()
return data
},
[fn, revalidate, customer]
[fetch, revalidate, customer]
)
}
useRemoveItem.extend = extendHook
return useRemoveItem
},
}
export default extendHook(fetcher)

19
framework/bigcommerce/wishlist/use-wishlist.tsx
View File

@ -1,16 +1,17 @@
import { useMemo } from 'react'
import { HookHandler } from '@commerce/utils/types'
import { SWRHook } from '@commerce/utils/types'
import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
import type { Wishlist } from '../api/wishlist'
import useCustomer from '../customer/use-customer'
import type { BigcommerceProvider } from '..'
export default useWishlist as UseWishlist<BigcommerceProvider>
export type UseWishlistInput = { includeProducts?: boolean }
export const handler: HookHandler<
export default useWishlist as UseWishlist<typeof handler>
export const handler: SWRHook<
Wishlist | null,
{ includeProducts?: boolean },
{ customerId?: number; includeProducts: boolean },
UseWishlistInput,
{ customerId?: number } & UseWishlistInput,
{ isEmpty?: boolean }
> = {
fetchOptions: {
@ -30,16 +31,16 @@ export const handler: HookHandler<
method: options.method,
})
},
useHook({ input, useData }) {
useHook: ({ useData }) => (input) => {
const { data: customer } = useCustomer()
const response = useData({
input: [
['customerId', (customer as any)?.id],
['includeProducts', input.includeProducts],
['includeProducts', input?.includeProducts],
],
swrOptions: {
revalidateOnFocus: false,
...input.swrOptions,
...input?.swrOptions,
},
})

76
framework/commerce/cart/use-add-item.tsx
View File

@ -1,69 +1,23 @@
import { useCallback } from 'react'
import type {
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import { useHook, useMutationHook } from '../utils/use-hook'
import { mutationFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, MutationHook } from '../utils/types'
import type { Cart, CartItemBody, AddCartItemBody } from '../types'
import { Provider, useCommerce } from '..'
import { BigcommerceProvider } from '@framework'
import type { Provider } from '..'
export type UseAddItemHandler<P extends Provider> = Prop<
Prop<P, 'cart'>,
'useAddItem'
>
// Input expected by the action returned by the `useAddItem` hook
export type UseAddItemInput<P extends Provider> = UseHookInput<
UseAddItemHandler<P>
>
export type UseAddItemResult<P extends Provider> = ReturnType<
UseHookResponse<UseAddItemHandler<P>>
>
export type UseAddItem<P extends Provider, Input> = Partial<
UseAddItemInput<P>
> extends UseAddItemInput<P>
? (input?: UseAddItemInput<P>) => (input: Input) => UseAddItemResult<P>
: (input: UseAddItemInput<P>) => (input: Input) => UseAddItemResult<P>
export type UseAddItem<
H extends MutationHook<any, any, any> = MutationHook<Cart, {}, CartItemBody>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<
Cart,
AddCartItemBody<CartItemBody>
> = async ({ options, input, fetch }) => {
return fetch({ ...options, body: input })
> = mutationFetcher
const fn = (provider: Provider) => provider.cart?.useAddItem!
const useAddItem: UseAddItem = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
type X = UseAddItemResult<BigcommerceProvider>
export default function useAddItem<P extends Provider, Input>(
input: UseAddItemInput<P>
) {
const { providerRef, fetcherRef } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.cart?.useAddItem
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? (() => () => {})
const fetchFn = provider.fetcher ?? fetcherRef.current
const action = useHook({ input })
return useCallback(
function addItem(input: Input) {
return action({
input,
fetch({ input }) {
return fetcherFn({
input,
options: opts!.fetchOptions,
fetch: fetchFn,
})
},
})
},
[input, fetchFn, opts?.fetchOptions]
)
}
export default useAddItem

17
framework/commerce/cart/use-cart-actions.tsx
View File

@ -1,17 +0,0 @@
import type { HookFetcher, HookFetcherOptions } from '../utils/types'
import useAddItem from './use-add-item'
import useRemoveItem from './use-remove-item'
import useUpdateItem from './use-update-item'
// This hook is probably not going to be used, but it's here
// to show how a commerce should be structuring it
export default function useCartActions<T, Input>(
options: HookFetcherOptions,
fetcher: HookFetcher<T, Input>
) {
const addItem = useAddItem<T, Input>(options, fetcher)
const updateItem = useUpdateItem<T, Input>(options, fetcher)
const removeItem = useRemoveItem<T, Input>(options, fetcher)
return { addItem, updateItem, removeItem }
}

64
framework/commerce/cart/use-cart.tsx
View File

@ -1,34 +1,21 @@
import Cookies from 'js-cookie'
import { useHook, useSWRHook } from '../utils/use-hook'
import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Cart } from '../types'
import type {
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
export type FetchCartInput = {
cartId?: Cart['id']
}
export type UseCartHandler<P extends Provider> = Prop<
Prop<P, 'cart'>,
'useCart'
>
export type UseCartInput<P extends Provider> = UseHookInput<UseCartHandler<P>>
export type CartResponse<P extends Provider> = UseHookResponse<
UseCartHandler<P>
>
export type UseCart<P extends Provider> = Partial<
UseCartInput<P>
> extends UseCartInput<P>
? (input?: UseCartInput<P>) => CartResponse<P>
: (input: UseCartInput<P>) => CartResponse<P>
export type UseCart<
H extends SWRHook<any, any, any> = SWRHook<
Cart | null,
{},
FetchCartInput,
{ isEmpty?: boolean }
>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<Cart | null, FetchCartInput> = async ({
options,
@ -38,32 +25,17 @@ export const fetcher: HookFetcherFn<Cart | null, FetchCartInput> = async ({
return cartId ? await fetch({ ...options }) : null
}
export default function useCart<P extends Provider>(
input: UseCartInput<P> = {}
) {
const { providerRef, fetcherRef, cartCookie } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.cart?.useCart
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
const fn = (provider: Provider) => provider.cart?.useCart!
const useCart: UseCart = (input) => {
const hook = useHook(fn)
const { cartCookie } = useCommerce()
const fetcherFn = hook.fetcher ?? fetcher
const wrapper: typeof fetcher = (context) => {
context.input.cartId = Cookies.get(cartCookie)
return fetcherFn(context)
}
return useHook({
input,
useData(ctx) {
const response = useData(
{ ...opts!, fetcher: wrapper },
ctx?.input ?? [],
provider.fetcher ?? fetcherRef.current,
ctx?.swrOptions ?? input.swrOptions
)
return response
},
})
return useSWRHook({ ...hook, fetcher: wrapper })(input)
}
export default useCart

33
framework/commerce/cart/use-remove-item.tsx
View File

@ -1,10 +1,35 @@
import useAction from '../utils/use-action'
import { useHook, useMutationHook } from '../utils/use-hook'
import { mutationFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, MutationHook } from '../utils/types'
import type { Cart, LineItem, RemoveCartItemBody } from '../types'
import type { Provider } from '..'
// Input expected by the action returned by the `useRemoveItem` hook
export interface RemoveItemInput {
/**
* Input expected by the action returned by the `useRemoveItem` hook
*/
export type RemoveItemInput = {
id: string
}
const useRemoveItem = useAction
export type UseRemoveItem<
H extends MutationHook<any, any, any> = MutationHook<
Cart | null,
{ item?: LineItem },
RemoveItemInput,
RemoveCartItemBody
>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<
Cart | null,
RemoveCartItemBody
> = mutationFetcher
const fn = (provider: Provider) => provider.cart?.useRemoveItem!
const useRemoveItem: UseRemoveItem = (input) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(input)
}
export default useRemoveItem

35
framework/commerce/cart/use-update-item.tsx
View File

@ -1,11 +1,38 @@
import useAction from '../utils/use-action'
import type { CartItemBody } from '../types'
import { useHook, useMutationHook } from '../utils/use-hook'
import { mutationFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, MutationHook } from '../utils/types'
import type { Cart, CartItemBody, LineItem, UpdateCartItemBody } from '../types'
import type { Provider } from '..'
// Input expected by the action returned by the `useUpdateItem` hook
/**
* Input expected by the action returned by the `useUpdateItem` hook
*/
export type UpdateItemInput<T extends CartItemBody> = T & {
id: string
}
const useUpdateItem = useAction
export type UseUpdateItem<
H extends MutationHook<any, any, any> = MutationHook<
Cart | null,
{
item?: LineItem
wait?: number
},
UpdateItemInput<CartItemBody>,
UpdateCartItemBody<CartItemBody>
>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<
Cart | null,
UpdateCartItemBody<CartItemBody>
> = mutationFetcher
const fn = (provider: Provider) => provider.cart?.useUpdateItem!
const useUpdateItem: UseUpdateItem = (input) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(input)
}
export default useUpdateItem

5
framework/commerce/config.json Normal file
View File

@ -0,0 +1,5 @@
{
"features": {
"wishlist": true
}
}

64
framework/commerce/customer/use-customer.tsx
View File

@ -1,56 +1,20 @@
import { useHook, useSWRHook } from '../utils/use-hook'
import { SWRFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Customer } from '../types'
import type {
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import defaultFetcher from '../utils/default-fetcher'
import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
import { Provider } from '..'
export type UseCustomerHandler<P extends Provider> = Prop<
Prop<P, 'customer'>,
'useCustomer'
>
export type UseCustomer<
H extends SWRHook<any, any, any> = SWRHook<Customer | null>
> = ReturnType<H['useHook']>
export type UseCustomerInput<P extends Provider> = UseHookInput<
UseCustomerHandler<P>
>
export const fetcher: HookFetcherFn<Customer | null, any> = SWRFetcher
export type CustomerResponse<P extends Provider> = UseHookResponse<
UseCustomerHandler<P>
>
const fn = (provider: Provider) => provider.customer?.useCustomer!
export type UseCustomer<P extends Provider> = Partial<
UseCustomerInput<P>
> extends UseCustomerInput<P>
? (input?: UseCustomerInput<P>) => CustomerResponse<P>
: (input: UseCustomerInput<P>) => CustomerResponse<P>
export const fetcher = defaultFetcher as HookFetcherFn<Customer | null>
export default function useCustomer<P extends Provider>(
input: UseCustomerInput<P> = {}
) {
const { providerRef, fetcherRef } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.customer?.useCustomer
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
return useHook({
input,
useData(ctx) {
const response = useData(
{ ...opts!, fetcher: fetcherFn },
ctx?.input ?? [],
provider.fetcher ?? fetcherRef.current,
ctx?.swrOptions ?? input.swrOptions
)
return response
},
})
const useCustomer: UseCustomer = (input) => {
const hook = useHook(fn)
return useSWRHook({ fetcher, ...hook })(input)
}
export default useCustomer

25
framework/commerce/index.tsx
View File

@ -6,7 +6,7 @@ import {
useMemo,
useRef,
} from 'react'
import { Fetcher, HookHandler, MutationHandler } from './utils/types'
import { Fetcher, SWRHook, MutationHook } from './utils/types'
import type { FetchCartInput } from './cart/use-cart'
import type { Cart, Wishlist, Customer, SearchProductsData } from './types'
@ -15,17 +15,26 @@ const Commerce = createContext<CommerceContextValue<any> | {}>({})
export type Provider = CommerceConfig & {
fetcher: Fetcher
cart?: {
useCart?: HookHandler<Cart | null, any, FetchCartInput>
useAddItem?: MutationHandler<Cart, any, any>
useCart?: SWRHook<Cart | null, any, FetchCartInput>
useAddItem?: MutationHook<any, any, any>
useUpdateItem?: MutationHook<any, any, any>
useRemoveItem?: MutationHook<any, any, any>
}
wishlist?: {
useWishlist?: HookHandler<Wishlist | null, any, any>
useWishlist?: SWRHook<Wishlist | null, any, any>
useAddItem?: MutationHook<any, any, any>
useRemoveItem?: MutationHook<any, any, any>
}
customer: {
useCustomer?: HookHandler<Customer | null, any, any>
customer?: {
useCustomer?: SWRHook<Customer | null, any, any>
}
products: {
useSearch?: HookHandler<SearchProductsData, any, any>
products?: {
useSearch?: SWRHook<SearchProductsData, any, any>
}
auth?: {
useSignup?: MutationHook<any, any, any>
useLogin?: MutationHook<any, any, any>
useLogout?: MutationHook<any, any, any>
}
}

20
framework/commerce/product/use-search.tsx Normal file
View File

@ -0,0 +1,20 @@
import { useHook, useSWRHook } from '../utils/use-hook'
import { SWRFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { SearchProductsData } from '../types'
import { Provider } from '..'
export type UseSearch<
H extends SWRHook<any, any, any> = SWRHook<SearchProductsData>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<SearchProductsData, any> = SWRFetcher
const fn = (provider: Provider) => provider.products?.useSearch!
const useSearch: UseSearch = (input) => {
const hook = useHook(fn)
return useSWRHook({ fetcher, ...hook })(input)
}
export default useSearch

57
framework/commerce/products/use-search.tsx
View File

@ -1,57 +0,0 @@
import type { SearchProductsData } from '../types'
import type {
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import defaultFetcher from '../utils/default-fetcher'
import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
import { BigcommerceProvider } from '@framework'
export type UseSearchHandler<P extends Provider> = Prop<
Prop<P, 'products'>,
'useSearch'
>
export type UseSeachInput<P extends Provider> = UseHookInput<
UseSearchHandler<P>
>
export type SearchResponse<P extends Provider> = UseHookResponse<
UseSearchHandler<P>
>
export type UseSearch<P extends Provider> = Partial<
UseSeachInput<P>
> extends UseSeachInput<P>
? (input?: UseSeachInput<P>) => SearchResponse<P>
: (input: UseSeachInput<P>) => SearchResponse<P>
export const fetcher = defaultFetcher as HookFetcherFn<SearchProductsData>
export default function useSearch<P extends Provider>(
input: UseSeachInput<P> = {}
) {
const { providerRef, fetcherRef } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.products?.useSearch
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
return useHook({
input,
useData(ctx) {
const response = useData(
{ ...opts!, fetcher: fetcherFn },
ctx?.input ?? [],
provider.fetcher ?? fetcherRef.current,
ctx?.swrOptions ?? input.swrOptions
)
return response
},
})
}

4
framework/commerce/types.ts
View File

@ -2,6 +2,10 @@ import type { Wishlist as BCWishlist } from '@framework/api/wishlist'
import type { Customer as BCCustomer } from '@framework/api/customers'
import type { SearchProductsData as BCSearchProductsData } from '@framework/api/catalog/products'
export type CommerceProviderConfig = {
features: Record<string, boolean>
}
export type Discount = {
// The value of the discount, can be an amount or percentage
value: number

18
framework/commerce/use-login.tsx
View File

@ -1,5 +1,19 @@
import useAction from './utils/use-action'
import { useHook, useMutationHook } from './utils/use-hook'
import { mutationFetcher } from './utils/default-fetcher'
import type { MutationHook, HookFetcherFn } from './utils/types'
import type { Provider } from '.'
const useLogin = useAction
export type UseLogin<
H extends MutationHook<any, any, any> = MutationHook<null, {}, {}>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<null, {}> = mutationFetcher
const fn = (provider: Provider) => provider.auth?.useLogin!
const useLogin: UseLogin = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
export default useLogin

18
framework/commerce/use-logout.tsx
View File

@ -1,5 +1,19 @@
import useAction from './utils/use-action'
import { useHook, useMutationHook } from './utils/use-hook'
import { mutationFetcher } from './utils/default-fetcher'
import type { HookFetcherFn, MutationHook } from './utils/types'
import type { Provider } from '.'
const useLogout = useAction
export type UseLogout<
H extends MutationHook<any, any, any> = MutationHook<null>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<null> = mutationFetcher
const fn = (provider: Provider) => provider.auth?.useLogout!
const useLogout: UseLogout = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
export default useLogout

18
framework/commerce/use-signup.tsx
View File

@ -1,5 +1,19 @@
import useAction from './utils/use-action'
import { useHook, useMutationHook } from './utils/use-hook'
import { mutationFetcher } from './utils/default-fetcher'
import type { HookFetcherFn, MutationHook } from './utils/types'
import type { Provider } from '.'
const useSignup = useAction
export type UseSignup<
H extends MutationHook<any, any, any> = MutationHook<null>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<null> = mutationFetcher
const fn = (provider: Provider) => provider.auth?.useSignup!
const useSignup: UseSignup = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
export default useSignup

10
framework/commerce/utils/default-fetcher.ts
View File

@ -1,6 +1,12 @@
import type { HookFetcherFn } from './types'
const defaultFetcher: HookFetcherFn<any> = ({ options, fetch }) =>
export const SWRFetcher: HookFetcherFn<any, any> = ({ options, fetch }) =>
fetch(options)
export default defaultFetcher
export const mutationFetcher: HookFetcherFn<any, any> = ({
input,
options,
fetch,
}) => fetch({ ...options, body: input })
export default SWRFetcher

37
framework/commerce/utils/features.ts Normal file
View File

@ -0,0 +1,37 @@
import commerceProviderConfig from '@framework/config.json'
import type { CommerceProviderConfig } from '../types'
import memo from 'lodash.memoize'
type FeaturesAPI = {
isEnabled: (desideredFeature: string) => boolean
}
function isFeatureEnabled(config: CommerceProviderConfig) {
const features = config.features
return (desideredFeature: string) =>
Object.keys(features)
.filter((k) => features[k])
.includes(desideredFeature)
}
function boostrap(): FeaturesAPI {
const basis = {
isEnabled: () => false,
}
if (!commerceProviderConfig) {
console.log('No config.json found - Please add a config.json')
return basis
}
if (commerceProviderConfig.features) {
return {
...basis,
isEnabled: memo(isFeatureEnabled(commerceProviderConfig)),
}
}
return basis
}
export default boostrap()

103
framework/commerce/utils/types.ts
View File

@ -2,13 +2,18 @@ import type { ConfigInterface } from 'swr'
import type { CommerceError } from './errors'
import type { ResponseState } from './use-data'
/**
* Returns the properties in T with the properties in type K, overriding properties defined in T
*/
export type Override<T, K> = Omit<T, keyof K> & K
/**
* Returns the properties in T with the properties in type K changed from optional to required
*/
export type PickRequired<T, K extends keyof T> = Omit<T, K> &
Required<Pick<T, K>>
{
[P in K]-?: NonNullable<T[P]>
}
/**
* Core fetcher added by CommerceProvider
@ -31,16 +36,15 @@ export type HookFetcher<Data, Input = null, Result = any> = (
fetch: <T = Result, Body = any>(options: FetcherOptions<Body>) => Promise<T>
) => Data | Promise<Data>
export type HookFetcherFn<
Data,
Input = never,
Result = any,
Body = any
> = (context: {
export type HookFetcherFn<Data, Input = undefined, Result = any, Body = any> = (
context: HookFetcherContext<Input, Result, Body>
) => Data | Promise<Data>
export type HookFetcherContext<Input = undefined, Result = any, Body = any> = {
options: HookFetcherOptions
input: Input
fetch: <T = Result, B = Body>(options: FetcherOptions<B>) => Promise<T>
}) => Data | Promise<Data>
}
export type HookFetcherOptions = { method?: string } & (
| { query: string; url?: string }
@ -49,13 +53,20 @@ export type HookFetcherOptions = { method?: string } & (
export type HookInputValue = string | number | boolean | undefined
export type HookSwrInput = [string, HookInputValue][]
export type HookSWRInput = [string, HookInputValue][]
export type HookFetchInput = { [k: string]: HookInputValue }
export type HookInput = {}
export type HookFunction<
Input extends { [k: string]: unknown } | null,
T
> = keyof Input extends never
? () => T
: Partial<Input> extends Input
? (input?: Input) => T
: (input: Input) => T
export type HookHandler<
export type SWRHook<
// Data obj returned by the hook and fetch operation
Data,
// Input expected by the hook
@ -65,58 +76,56 @@ export type HookHandler<
// Custom state added to the response object of SWR
State = {}
> = {
useHook?(context: {
input: Input & { swrOptions?: SwrOptions<Data, FetchInput> }
useData(context?: {
input?: HookFetchInput | HookSwrInput
swrOptions?: SwrOptions<Data, FetchInput>
}): ResponseState<Data>
}): ResponseState<Data> & State
useHook(
context: SWRHookContext<Data, FetchInput>
): HookFunction<
Input & { swrOptions?: SwrOptions<Data, FetchInput> },
ResponseState<Data> & State
>
fetchOptions: HookFetcherOptions
fetcher?: HookFetcherFn<Data, FetchInput>
}
export type MutationHandler<
export type SWRHookContext<
Data,
FetchInput extends { [k: string]: unknown } = {}
> = {
useData(context?: {
input?: HookFetchInput | HookSWRInput
swrOptions?: SwrOptions<Data, FetchInput>
}): ResponseState<Data>
}
export type MutationHook<
// Data obj returned by the hook and fetch operation
Data,
// Input expected by the hook
Input extends { [k: string]: unknown } = {},
// Input expected by the action returned by the hook
ActionInput extends { [k: string]: unknown } = {},
// Input expected before doing a fetch operation
FetchInput extends { [k: string]: unknown } = {}
FetchInput extends { [k: string]: unknown } = ActionInput
> = {
useHook?(context: {
input: Input
}): (context: {
input: FetchInput
fetch: (context: { input: FetchInput }) => Data | Promise<Data>
}) => Data | Promise<Data>
useHook(
context: MutationHookContext<Data, FetchInput>
): HookFunction<Input, HookFunction<ActionInput, Data | Promise<Data>>>
fetchOptions: HookFetcherOptions
fetcher?: HookFetcherFn<Data, FetchInput>
}
export type MutationHookContext<
Data,
FetchInput extends { [k: string]: unknown } | null = {}
> = {
fetch: keyof FetchInput extends never
? () => Data | Promise<Data>
: Partial<FetchInput> extends FetchInput
? (context?: { input?: FetchInput }) => Data | Promise<Data>
: (context: { input: FetchInput }) => Data | Promise<Data>
}
export type SwrOptions<Data, Input = null, Result = any> = ConfigInterface<
Data,
CommerceError,
HookFetcher<Data, Input, Result>
>
/**
* Returns the property K from type T excluding nullables
*/
export type Prop<T, K extends keyof T> = NonNullable<T[K]>
export type HookHandlerType =
| HookHandler<any, any, any>
| MutationHandler<any, any, any>
export type UseHookParameters<H extends HookHandlerType> = Parameters<
Prop<H, 'useHook'>
>
export type UseHookResponse<H extends HookHandlerType> = ReturnType<
Prop<H, 'useHook'>
>
export type UseHookInput<
H extends HookHandlerType
> = UseHookParameters<H>[0]['input']

15
framework/commerce/utils/use-action.tsx
View File

@ -1,15 +0,0 @@
import { useCallback } from 'react'
import type { HookFetcher, HookFetcherOptions } from './types'
import { useCommerce } from '..'
export default function useAction<T, Input = null>(
options: HookFetcherOptions,
fetcher: HookFetcher<T, Input>
) {
const { fetcherRef } = useCommerce()
return useCallback(
(input: Input) => fetcher(options, input, fetcherRef.current),
[fetcher]
)
}

19
framework/commerce/utils/use-data.tsx
View File

@ -1,11 +1,11 @@
import useSWR, { responseInterface } from 'swr'
import type {
HookHandler,
HookSwrInput,
HookSWRInput,
HookFetchInput,
PickRequired,
Fetcher,
SwrOptions,
HookFetcherOptions,
HookFetcherFn,
} from './types'
import defineProperty from './define-property'
import { CommerceError } from './errors'
@ -14,13 +14,12 @@ export type ResponseState<Result> = responseInterface<Result, CommerceError> & {
isLoading: boolean
}
export type UseData = <
Data = any,
Input extends { [k: string]: unknown } = {},
FetchInput extends HookFetchInput = {}
>(
options: PickRequired<HookHandler<Data, Input, FetchInput>, 'fetcher'>,
input: HookFetchInput | HookSwrInput,
export type UseData = <Data = any, FetchInput extends HookFetchInput = {}>(
options: {
fetchOptions: HookFetcherOptions
fetcher: HookFetcherFn<Data, FetchInput>
},
input: HookFetchInput | HookSWRInput,
fetcherFn: Fetcher,
swrOptions?: SwrOptions<Data, FetchInput>
) => ResponseState<Data>

50
framework/commerce/utils/use-hook.ts Normal file
View File

@ -0,0 +1,50 @@
import { useCallback } from 'react'
import { Provider, useCommerce } from '..'
import type { MutationHook, PickRequired, SWRHook } from './types'
import useData from './use-data'
export function useFetcher() {
const { providerRef, fetcherRef } = useCommerce()
return providerRef.current.fetcher ?? fetcherRef.current
}
export function useHook<
P extends Provider,
H extends MutationHook<any, any, any> | SWRHook<any, any, any>
>(fn: (provider: P) => H) {
const { providerRef } = useCommerce<P>()
const provider = providerRef.current
return fn(provider)
}
export function useSWRHook<H extends SWRHook<any, any, any>>(
hook: PickRequired<H, 'fetcher'>
) {
const fetcher = useFetcher()
return hook.useHook({
useData(ctx) {
const response = useData(hook, ctx?.input ?? [], fetcher, ctx?.swrOptions)
return response
},
})
}
export function useMutationHook<H extends MutationHook<any, any, any>>(
hook: PickRequired<H, 'fetcher'>
) {
const fetcher = useFetcher()
return hook.useHook({
fetch: useCallback(
({ input } = {}) => {
return hook.fetcher({
input,
options: hook.fetchOptions,
fetch: fetcher,
})
},
[fetcher, hook.fetchOptions]
),
})
}

40
framework/commerce/utils/use-response.tsx
View File

@ -1,40 +0,0 @@
import { useMemo } from 'react'
import { responseInterface } from 'swr'
import { CommerceError } from './errors'
import { Override } from './types'
export type UseResponseOptions<
D,
R extends responseInterface<any, CommerceError>
> = {
descriptors?: PropertyDescriptorMap
normalizer?: (data: R['data']) => D
}
export type UseResponse = <D, R extends responseInterface<any, CommerceError>>(
response: R,
options: UseResponseOptions<D, R>
) => D extends object ? Override<R, { data?: D }> : R
const useResponse: UseResponse = (response, { descriptors, normalizer }) => {
const memoizedResponse = useMemo(
() =>
Object.create(response, {
...descriptors,
...(normalizer
? {
data: {
get() {
return response.data && normalizer(response.data)
},
enumerable: true,
},
}
: {}),
}),
[response]
)
return memoizedResponse
}
export default useResponse

23
framework/commerce/wishlist/use-add-item.tsx
View File

@ -1,12 +1,19 @@
import useAction from '../utils/use-action'
import type { CartItemBody } from '../types'
import { useHook, useMutationHook } from '../utils/use-hook'
import { mutationFetcher } from '../utils/default-fetcher'
import type { MutationHook } from '../utils/types'
import type { Provider } from '..'
// Input expected by the action returned by the `useAddItem` hook
// export interface AddItemInput {
// includeProducts?: boolean
// }
export type AddItemInput<T extends CartItemBody> = T
export type UseAddItem<
H extends MutationHook<any, any, any> = MutationHook<any, {}, {}>
> = ReturnType<H['useHook']>
const useAddItem = useAction
export const fetcher = mutationFetcher
const fn = (provider: Provider) => provider.wishlist?.useAddItem!
const useAddItem: UseAddItem = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
export default useAddItem

27
framework/commerce/wishlist/use-remove-item.tsx
View File

@ -1,5 +1,28 @@
import useAction from '../utils/use-action'
import { useHook, useMutationHook } from '../utils/use-hook'
import { mutationFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, MutationHook } from '../utils/types'
import type { Provider } from '..'
const useRemoveItem = useAction
export type RemoveItemInput = {
id: string | number
}
export type UseRemoveItem<
H extends MutationHook<any, any, any> = MutationHook<
any | null,
{ wishlist?: any },
RemoveItemInput,
{}
>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<any | null, {}> = mutationFetcher
const fn = (provider: Provider) => provider.wishlist?.useRemoveItem!
const useRemoveItem: UseRemoveItem = (input) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(input)
}
export default useRemoveItem

69
framework/commerce/wishlist/use-wishlist.tsx
View File

@ -1,56 +1,25 @@
import { useHook, useSWRHook } from '../utils/use-hook'
import { SWRFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Wishlist } from '../types'
import type {
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import defaultFetcher from '../utils/default-fetcher'
import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
import type { Provider } from '..'
export type UseWishlistHandler<P extends Provider> = Prop<
Prop<P, 'wishlist'>,
'useWishlist'
>
export type UseWishlist<
H extends SWRHook<any, any, any> = SWRHook<
Wishlist | null,
{ includeProducts?: boolean },
{ customerId?: number; includeProducts: boolean },
{ isEmpty?: boolean }
>
> = ReturnType<H['useHook']>
export type UseWishlistInput<P extends Provider> = UseHookInput<
UseWishlistHandler<P>
>
export const fetcher: HookFetcherFn<Wishlist | null, any> = SWRFetcher
export type WishlistResponse<P extends Provider> = UseHookResponse<
UseWishlistHandler<P>
>
const fn = (provider: Provider) => provider.wishlist?.useWishlist!
export type UseWishlist<P extends Provider> = Partial<
UseWishlistInput<P>
> extends UseWishlistInput<P>
? (input?: UseWishlistInput<P>) => WishlistResponse<P>
: (input: UseWishlistInput<P>) => WishlistResponse<P>
export const fetcher = defaultFetcher as HookFetcherFn<Wishlist | null>
export default function useWishlist<P extends Provider>(
input: UseWishlistInput<P> = {}
) {
const { providerRef, fetcherRef } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.wishlist?.useWishlist
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
return useHook({
input,
useData(ctx) {
const response = useData(
{ ...opts!, fetcher: fetcherFn },
ctx?.input ?? [],
provider.fetcher ?? fetcherRef.current,
ctx?.swrOptions ?? input.swrOptions
)
return response
},
})
const useWishlist: UseWishlist = (input) => {
const hook = useHook(fn)
return useSWRHook({ fetcher, ...hook })(input)
}
export default useWishlist

17
package.json
View File

@ -21,7 +21,7 @@
},
"dependencies": {
"@reach/portal": "^0.11.2",
"@tailwindcss/ui": "^0.6.2",
"@types/lodash.memoize": "^4.1.6",
"@vercel/fetch": "^6.1.0",
"body-scroll-lock": "^3.1.5",
"bowser": "^2.11.0",
@ -33,20 +33,21 @@
"js-cookie": "^2.2.1",
"keen-slider": "^5.2.4",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
"next": "^10.0.5",
"next": "^10.0.7-canary.3",
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"normalizr": "^3.6.1",
"postcss": "^8.2.4",
"postcss-nesting": "^7.0.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2",
"swr": "^0.4.0",
"tabbable": "^5.1.5",
"tailwindcss": "^1.9"
"tailwindcss": "^2.0.2"
},
"devDependencies": {
"@graphql-codegen/cli": "^1.20.0",
@ -56,8 +57,6 @@
"@manifoldco/swagger-to-ts": "^2.1.0",
"@next/bundle-analyzer": "^10.0.1",
"@types/body-scroll-lock": "^2.6.1",
"@types/bunyan": "^1.8.6",
"@types/bunyan-prettystream": "^0.1.31",
"@types/classnames": "^2.2.10",
"@types/cookie": "^0.4.0",
"@types/js-cookie": "^2.2.6",
@ -66,8 +65,6 @@
"@types/lodash.throttle": "^4.1.6",
"@types/node": "^14.14.16",
"@types/react": "^17.0.0",
"bunyan": "^1.8.14",
"bunyan-prettystream": "^0.1.3",
"graphql": "^15.4.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

5
pages/_app.tsx
View File

@ -1,12 +1,11 @@
import '@assets/main.css'
import 'keen-slider/keen-slider.min.css'
import '@assets/chrome-bug.css'
import 'keen-slider/keen-slider.min.css'
import { FC, useEffect } from 'react'
import type { AppProps } from 'next/app'
import { ManagedUIContext } from '@components/ui/context'
import { Head } from '@components/common'
import { ManagedUIContext } from '@components/ui/context'
const Noop: FC = ({ children }) => <>{children}</>

12
pages/index.tsx
View File

@ -1,13 +1,14 @@
import { Layout } from '@components/common'
import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { getConfig } from '@framework/api'
import getAllProducts from '@framework/product/get-all-products'
import getSiteInfo from '@framework/common/get-site-info'
import getAllPages from '@framework/common/get-all-pages'
import Features from '@commerce/utils/features'
export async function getStaticProps({
preview,
@ -23,6 +24,7 @@ export async function getStaticProps({
const { categories, brands } = await getSiteInfo({ config, preview })
const { pages } = await getAllPages({ config, preview })
const isWishlistEnabled = Features.isEnabled('wishlist')
return {
props: {
@ -30,6 +32,9 @@ export async function getStaticProps({
categories,
brands,
pages,
commerceFeatures: {
wishlist: isWishlistEnabled,
},
},
revalidate: 1440,
}
@ -39,6 +44,7 @@ export default function Home({
products,
brands,
categories,
commerceFeatures,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
@ -51,6 +57,7 @@ export default function Home({
width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540,
}}
wishlist={commerceFeatures.wishlist}
/>
))}
</Grid>
@ -64,6 +71,7 @@ export default function Home({
width: 320,
height: 320,
}}
wishlist={commerceFeatures.wishlist}
/>
))}
</Marquee>
@ -86,6 +94,7 @@ export default function Home({
width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540,
}}
wishlist={commerceFeatures.wishlist}
/>
))}
</Grid>
@ -99,6 +108,7 @@ export default function Home({
width: 320,
height: 320,
}}
wishlist={commerceFeatures.wishlist}
/>
))}
</Marquee>

6
pages/orders.tsx
View File

@ -1,9 +1,9 @@
import type { GetStaticPropsContext } from 'next'
import { getConfig } from '@framework/api'
import getAllPages from '@framework/common/get-all-pages'
import { Bag } from '@components/icons'
import { Layout } from '@components/common'
import { Container, Text } from '@components/ui'
import { Bag } from '@components/icons'
import { getConfig } from '@framework/api'
import getAllPages from '@framework/common/get-all-pages'
export async function getStaticProps({
preview,

17
pages/product/[slug].tsx
View File

@ -11,14 +11,15 @@ import { getConfig } from '@framework/api'
import getProduct from '@framework/product/get-product'
import getAllPages from '@framework/common/get-all-pages'
import getAllProductPaths from '@framework/product/get-all-product-paths'
import Features from '@commerce/utils/features'
export async function getStaticProps({
params,
locale,
preview,
}: GetStaticPropsContext<{ slug: string }>) {
const isWishlistEnabled = Features.isEnabled('wishlist')
const config = getConfig({ locale })
const { pages } = await getAllPages({ config, preview })
const { product } = await getProduct({
variables: { slug: params!.slug },
@ -31,7 +32,13 @@ export async function getStaticProps({
}
return {
props: { pages, product },
props: {
pages,
product,
commerceFeatures: {
wishlist: isWishlistEnabled,
},
},
revalidate: 200,
}
}
@ -55,13 +62,17 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
export default function Slug({
product,
commerceFeatures,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter()
return router.isFallback ? (
<h1>Loading...</h1> // TODO (BC) Add Skeleton Views
) : (
<ProductView product={product as any} />
<ProductView
product={product as any}
wishlist={commerceFeatures.wishlist}
/>
)
}

16
pages/search.tsx
View File

@ -26,6 +26,8 @@ const SORT = Object.entries({
'price-desc': 'Price: High to low',
})
import Features from '@commerce/utils/features'
import {
filterQuery,
getCategoryPath,
@ -40,14 +42,23 @@ export async function getStaticProps({
const config = getConfig({ locale })
const { pages } = await getAllPages({ config, preview })
const { categories, brands } = await getSiteInfo({ config, preview })
const isWishlistEnabled = Features.isEnabled('wishlist')
return {
props: { pages, categories, brands },
props: {
pages,
categories,
brands,
commerceFeatures: {
wishlist: isWishlistEnabled,
},
},
}
}
export default function Search({
categories,
brands,
commerceFeatures: { wishlist },
}: InferGetStaticPropsType<typeof getStaticProps>) {
const [activeFilter, setActiveFilter] = useState('')
const [toggleFilter, setToggleFilter] = useState(false)
@ -337,7 +348,7 @@ export default function Search({
{data ? (
<Grid layout="normal">
{data.products.map((product) => (
{data.products.map((product: Product) => (
<ProductCard
variant="simple"
key={product.path}
@ -347,6 +358,7 @@ export default function Search({
width: 480,
height: 480,
}}
wishlist={wishlist}
/>
))}
</Grid>

27
pages/wishlist.tsx
View File

@ -1,28 +1,43 @@
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import type { GetStaticPropsContext } from 'next'
import { getConfig } from '@framework/api'
import getAllPages from '@framework/common/get-all-pages'
import useWishlist from '@framework/wishlist/use-wishlist'
import { Layout } from '@components/common'
import { Heart } from '@components/icons'
import { Layout } from '@components/common'
import { Text, Container } from '@components/ui'
import { WishlistCard } from '@components/wishlist'
import { defaultPageProps } from '@lib/defaults'
import { getConfig } from '@framework/api'
import { useCustomer } from '@framework/customer'
import { WishlistCard } from '@components/wishlist'
import useWishlist from '@framework/wishlist/use-wishlist'
import getAllPages from '@framework/common/get-all-pages'
import Features from '@commerce/utils/features'
export async function getStaticProps({
preview,
locale,
}: GetStaticPropsContext) {
// Disabling page if Feature is not available
if (Features.isEnabled('wishlist')) {
return {
notFound: true,
}
}
const config = getConfig({ locale })
const { pages } = await getAllPages({ config, preview })
return {
props: { ...defaultPageProps, pages },
props: {
pages,
...defaultPageProps,
},
}
}
export default function Wishlist() {
const { data: customer } = useCustomer()
const { data, isLoading, isEmpty } = useWishlist()
const router = useRouter()
return (
<Container>

4
tsconfig.json
View File

@ -26,6 +26,6 @@
"@framework": ["framework/shopify"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
"exclude": ["node_modules", "components/wishlist"]
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
"exclude": ["node_modules"]
}

12
yarn.lock
View File

@ -1060,6 +1060,13 @@
dependencies:
"@types/lodash" "*"
"@types/lodash.memoize@^4.1.6":
version "4.1.6"
resolved "https://registry.yarnpkg.com/@types/lodash.memoize/-/lodash.memoize-4.1.6.tgz#3221f981790a415cab1a239f25c17efd8b604c23"
integrity sha512-mYxjKiKzRadRJVClLKxS4wb3Iy9kzwJ1CkbyKiadVxejnswnRByyofmPMscFKscmYpl36BEEhCMPuWhA1R/1ZQ==
dependencies:
"@types/lodash" "*"
"@types/lodash.random@^3.2.6":
version "3.2.6"
resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.6.tgz#64b08abad168dca39c778ed40cce75b2f9e168eb"
@ -4232,6 +4239,11 @@ lodash.isstring@^4.0.1:
resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
lodash.once@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"