forked from crowetic/commerce
Merge branch 'master' of github.com:vercel/commerce
This commit is contained in:
okbel
commit
12d9a7569b
@ -1,3 +1,6 @@
|
|||||||
|
# Available providers: bigcommerce, shopify
|
||||||
|
COMMERCE_PROVIDER=bigcommerce
|
||||||
|
|
||||||
BIGCOMMERCE_STOREFRONT_API_URL=
|
BIGCOMMERCE_STOREFRONT_API_URL=
|
||||||
BIGCOMMERCE_STOREFRONT_API_TOKEN=
|
BIGCOMMERCE_STOREFRONT_API_TOKEN=
|
||||||
BIGCOMMERCE_STORE_API_URL=
|
BIGCOMMERCE_STORE_API_URL=
|
||||||
|
|||||||
80
README.md
80
README.md
@ -29,67 +29,16 @@ Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan
|
|||||||
## Considerations
|
## Considerations
|
||||||
|
|
||||||
- `framework/commerce` contains all types, helpers and functions to be used as base to build a new **provider**.
|
- `framework/commerce` contains all types, helpers and functions to be used as base to build a new **provider**.
|
||||||
- **Providers** live under `framework`'s root folder and they will extend Next.js Commerce types and functionality.
|
- **Providers** live under `framework`'s root folder and they will extend Next.js Commerce types and functionality (`framework/commerce`).
|
||||||
- **Features API** is to ensure feature parity between the UI and the Provider. The UI should update accordingly and no extra code should be bundled. All extra configuration for features will live under `features` in `commerce.config.json` and if needed it can also be accessed programatically.
|
- We have a **Features API** to ensure feature parity between the UI and the Provider. The UI should update accordingly and no extra code should be bundled. All extra configuration for features will live under `features` in `commerce.config.json` and if needed it can also be accessed programatically.
|
||||||
- Each **provider** should add its corresponding `next.config.js` and `commerce.config.json` adding specific data related to the provider. For example in case of BigCommerce, the images CDN and additional API routes.
|
- Each **provider** should add its corresponding `next.config.js` and `commerce.config.json` adding specific data related to the provider. For example in case of BigCommerce, the images CDN and additional API routes.
|
||||||
- **Providers don't depend on anything that's specific to the application they're used in**. They only depend on `framework/commerce`, on their own framework folder and on some dependencies included in `package.json`
|
- **Providers don't depend on anything that's specific to the application they're used in**. They only depend on `framework/commerce`, on their own framework folder and on some dependencies included in `package.json`
|
||||||
- We recommend that each **provider** ships with an `env.template` file and a `[readme.md](http://readme.md)` file.
|
|
||||||
|
|
||||||
## Provider Structure
|
|
||||||
|
|
||||||
Next.js Commerce provides a set of utilities and functions to create new providers. This is how a provider structure looks like.
|
|
||||||
|
|
||||||
- `product`
|
|
||||||
- usePrice
|
|
||||||
- useSearch
|
|
||||||
- getProduct
|
|
||||||
- getAllProducts
|
|
||||||
- `wishlist`
|
|
||||||
- useWishlist
|
|
||||||
- useAddItem
|
|
||||||
- useRemoveItem
|
|
||||||
- `auth`
|
|
||||||
- useLogin
|
|
||||||
- useLogout
|
|
||||||
- useSignup
|
|
||||||
- `customer`
|
|
||||||
- useCustomer
|
|
||||||
- getCustomerId
|
|
||||||
- getCustomerWistlist
|
|
||||||
- `cart`
|
|
||||||
- useCart
|
|
||||||
- useAddItem
|
|
||||||
- useRemoveItem
|
|
||||||
- useUpdateItem
|
|
||||||
- `env.template`
|
|
||||||
- `provider.ts`
|
|
||||||
- `commerce.config.json`
|
|
||||||
- `next.config.js`
|
|
||||||
- `README.md`
|
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### How to change providers
|
### How to change providers
|
||||||
|
|
||||||
First, update the provider selected in `commerce.config.json`:
|
Open `.env.local` and change the value of `COMMERCE_PROVIDER` to the provider you would like to use, then set the environment variables for that provider (use `.env.template` as the base).
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"provider": "bigcommerce",
|
|
||||||
"features": {
|
|
||||||
"wishlist": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Then, change the paths defined in `tsconfig.json` and update the `@framework` paths to point to the right folder provider:
|
|
||||||
|
|
||||||
```json
|
|
||||||
"@framework": ["framework/bigcommerce"],
|
|
||||||
"@framework/*": ["framework/bigcommerce/*"]
|
|
||||||
```
|
|
||||||
|
|
||||||
Make sure to add the environment variables required by the new provider.
|
|
||||||
|
|
||||||
### Features
|
### Features
|
||||||
|
|
||||||
@ -103,7 +52,6 @@ Every provider defines the features that it supports under `framework/{provider}
|
|||||||
- You'll see a config file like this:
|
- You'll see a config file like this:
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"provider": "bigcommerce",
|
|
||||||
"features": {
|
"features": {
|
||||||
"wishlist": false
|
"wishlist": false
|
||||||
}
|
}
|
||||||
@ -114,15 +62,9 @@ Every provider defines the features that it supports under `framework/{provider}
|
|||||||
|
|
||||||
### How to create a new provider
|
### How to create a new provider
|
||||||
|
|
||||||
We'd recommend to duplicate a provider folder and push your providers SDK.
|
Follow our docs for [Adding a new Commerce Provider](framework/commerce/new-provider.md).
|
||||||
|
|
||||||
If you succeeded building a provider, submit a PR so we can all enjoy it.
|
If you succeeded building a provider, submit a PR with a valid demo and we'll review it asap.
|
||||||
|
|
||||||
## Work in progress
|
|
||||||
|
|
||||||
We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
|
|
||||||
|
|
||||||
People actively working on this project: @okbel & @lfades.
|
|
||||||
|
|
||||||
## Contribute
|
## Contribute
|
||||||
|
|
||||||
@ -132,11 +74,15 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
|
|||||||
2. Create a new branch `git checkout -b MY_BRANCH_NAME`
|
2. Create a new branch `git checkout -b MY_BRANCH_NAME`
|
||||||
3. Install yarn: `npm install -g yarn`
|
3. Install yarn: `npm install -g yarn`
|
||||||
4. Install the dependencies: `yarn`
|
4. Install the dependencies: `yarn`
|
||||||
5. Duplicate `.env.template` and rename it to `.env.local`.
|
5. Duplicate `.env.template` and rename it to `.env.local`
|
||||||
6. Add proper store values to `.env.local`.
|
6. Add proper store values to `.env.local`
|
||||||
7. Run `yarn dev` to build and watch for code changes
|
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`.
|
## Work in progress
|
||||||
|
|
||||||
|
We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
|
||||||
|
|
||||||
|
People actively working on this project: @okbel & @lfades.
|
||||||
|
|
||||||
## Troubleshoot
|
## Troubleshoot
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
{
|
{
|
||||||
"provider": "bigcommerce",
|
|
||||||
"features": {
|
"features": {
|
||||||
"wishlist": true,
|
"wishlist": true,
|
||||||
"customCheckout": false
|
"customCheckout": false
|
||||||
|
|||||||
@ -1,23 +1,20 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import { NextSeo } from 'next-seo'
|
import { NextSeo } from 'next-seo'
|
||||||
import { FC, useState } from 'react'
|
import { FC, useEffect, useState } from 'react'
|
||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
|
|
||||||
import { Swatch, ProductSlider } from '@components/product'
|
import { Swatch, ProductSlider } from '@components/product'
|
||||||
import { Button, Container, Text, useUI } from '@components/ui'
|
import { Button, Container, Text, useUI } from '@components/ui'
|
||||||
|
|
||||||
import type { Product } from '@commerce/types'
|
import type { Product } from '@commerce/types'
|
||||||
import usePrice from '@framework/product/use-price'
|
import usePrice from '@framework/product/use-price'
|
||||||
import { useAddItem } from '@framework/cart'
|
import { useAddItem } from '@framework/cart'
|
||||||
|
|
||||||
import { getVariant, SelectedOptions } from '../helpers'
|
import { getVariant, SelectedOptions } from '../helpers'
|
||||||
import WishlistButton from '@components/wishlist/WishlistButton'
|
import WishlistButton from '@components/wishlist/WishlistButton'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
|
||||||
children?: any
|
children?: any
|
||||||
product: Product
|
product: Product
|
||||||
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductView: FC<Props> = ({ product }) => {
|
const ProductView: FC<Props> = ({ product }) => {
|
||||||
@ -29,12 +26,18 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
})
|
})
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [choices, setChoices] = useState<SelectedOptions>({
|
const [choices, setChoices] = useState<SelectedOptions>({})
|
||||||
size: null,
|
|
||||||
color: null,
|
useEffect(() => {
|
||||||
})
|
// Selects the default option
|
||||||
|
product.variants[0].options?.forEach((v) => {
|
||||||
|
setChoices((choices) => ({
|
||||||
|
...choices,
|
||||||
|
[v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
// Select the correct variant based on choices
|
|
||||||
const variant = getVariant(product, choices)
|
const variant = getVariant(product, choices)
|
||||||
|
|
||||||
const addToCart = async () => {
|
const addToCart = async () => {
|
||||||
@ -133,7 +136,7 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
))}
|
))}
|
||||||
|
|
||||||
<div className="pb-14 break-words w-full max-w-xl">
|
<div className="pb-14 break-words w-full max-w-xl">
|
||||||
<Text html={product.description} />
|
<Text html={product.descriptionHtml || product.description} />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div>
|
<div>
|
||||||
@ -143,7 +146,6 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
className={s.button}
|
className={s.button}
|
||||||
onClick={addToCart}
|
onClick={addToCart}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={!variant && product.options.length > 0}
|
|
||||||
>
|
>
|
||||||
Add to Cart
|
Add to Cart
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -1,9 +1,5 @@
|
|||||||
import type { Product } from '@commerce/types'
|
import type { Product } from '@commerce/types'
|
||||||
|
export type SelectedOptions = Record<string, string | null>
|
||||||
export type SelectedOptions = {
|
|
||||||
size: string | null
|
|
||||||
color: string | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getVariant(product: Product, opts: SelectedOptions) {
|
export function getVariant(product: Product, opts: SelectedOptions) {
|
||||||
const variant = product.variants.find((variant) => {
|
const variant = product.variants.find((variant) => {
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
# Roadmap
|
|
||||||
@ -1,3 +1,5 @@
|
|||||||
|
COMMERCE_PROVIDER=bigcommerce
|
||||||
|
|
||||||
BIGCOMMERCE_STOREFRONT_API_URL=
|
BIGCOMMERCE_STOREFRONT_API_URL=
|
||||||
BIGCOMMERCE_STOREFRONT_API_TOKEN=
|
BIGCOMMERCE_STOREFRONT_API_TOKEN=
|
||||||
BIGCOMMERCE_STORE_API_URL=
|
BIGCOMMERCE_STORE_API_URL=
|
||||||
|
|||||||
@ -1,45 +1,34 @@
|
|||||||
# Table of Contents
|
# Bigcommerce Provider
|
||||||
|
|
||||||
- [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)
|
**Demo:** https://bigcommerce.demo.vercel.store/
|
||||||
- [Installation](#installation)
|
|
||||||
- [General Usage](#general-usage)
|
|
||||||
- [CommerceProvider](#commerceprovider)
|
|
||||||
- [useLogin hook](#uselogin-hook)
|
|
||||||
- [useLogout](#uselogout)
|
|
||||||
- [useCustomer](#usecustomer)
|
|
||||||
- [useSignup](#usesignup)
|
|
||||||
- [usePrice](#useprice)
|
|
||||||
- [Cart Hooks](#cart-hooks)
|
|
||||||
- [useCart](#usecart)
|
|
||||||
- [useAddItem](#useadditem)
|
|
||||||
- [useUpdateItem](#useupdateitem)
|
|
||||||
- [useRemoveItem](#useremoveitem)
|
|
||||||
- [Wishlist Hooks](#wishlist-hooks)
|
|
||||||
- [Product Hooks and API](#product-hooks-and-api)
|
|
||||||
- [useSearch](#usesearch)
|
|
||||||
- [getAllProducts](#getallproducts)
|
|
||||||
- [getProduct](#getproduct)
|
|
||||||
- [More](#more)
|
|
||||||
|
|
||||||
# BigCommerce Storefront Data Hooks
|
With the deploy button below you'll be able to have a [BigCommerce](https://www.bigcommerce.com/) account and a store that works with this starter:
|
||||||
|
|
||||||
> This project is under active development, new features and updates will be continuously added over time
|
[](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT)
|
||||||
|
|
||||||
UI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:
|
If you already have a BigCommerce account and want to use your current store, then copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):
|
||||||
|
|
||||||
- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions
|
```bash
|
||||||
- Code splitted data fetching methods for initial data population and static generation of content
|
cp framework/bigcommerce/.env.template .env.local
|
||||||
- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
To install:
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn add storefront-data-hooks
|
|
||||||
```
|
```
|
||||||
|
|
||||||
After install, the first thing you do is: <b>set your environment variables</b> in `.env.local`
|
Then, set the environment variables in `.env.local` to match the ones from your store.
|
||||||
|
|
||||||
|
## Contribute
|
||||||
|
|
||||||
|
Our commitment to Open Source can be found [here](https://vercel.com/oss).
|
||||||
|
|
||||||
|
If you find an issue with the provider or want a new feature, feel free to open a PR or [create a new issue](https://github.com/vercel/commerce/issues).
|
||||||
|
|
||||||
|
## 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
|
```sh
|
||||||
BIGCOMMERCE_STOREFRONT_API_URL=<>
|
BIGCOMMERCE_STOREFRONT_API_URL=<>
|
||||||
@ -50,331 +39,21 @@ BIGCOMMERCE_STORE_API_CLIENT_ID=<>
|
|||||||
BIGCOMMERCE_CHANNEL_ID=<>
|
BIGCOMMERCE_CHANNEL_ID=<>
|
||||||
```
|
```
|
||||||
|
|
||||||
## General Usage
|
If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.
|
||||||
|
|
||||||
### CommerceProvider
|
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`
|
||||||
|
|
||||||
This component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.
|
Next, you're free to customize the starter. More updates coming soon. Stay tuned.
|
||||||
|
|
||||||
```jsx
|
</details>
|
||||||
...
|
|
||||||
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
|
||||||
|
|
||||||
const App = ({ locale = 'en-US', children }) => {
|
<details>
|
||||||
return (
|
<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
|
||||||
<CommerceProvider locale={locale}>
|
<br>
|
||||||
{children}
|
After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
|
||||||
</CommerceProvider>
|
<br>
|
||||||
)
|
<br>
|
||||||
}
|
BigCommerce team has been notified and they plan to add more detailed about this subject.
|
||||||
...
|
</details>
|
||||||
```
|
|
||||||
|
|
||||||
### useLogin hook
|
|
||||||
|
|
||||||
Hook for bigcommerce user login functionality, returns `login` function to handle user login.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useLogin from '@bigcommerce/storefront-data-hooks/use-login'
|
|
||||||
|
|
||||||
const LoginView = () => {
|
|
||||||
const login = useLogin()
|
|
||||||
|
|
||||||
const handleLogin = async () => {
|
|
||||||
await login({
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleLogin}>
|
|
||||||
{children}
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
### useLogout
|
|
||||||
|
|
||||||
Hook to logout user.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
|
|
||||||
|
|
||||||
const LogoutLink = () => {
|
|
||||||
const logout = useLogout()
|
|
||||||
return (
|
|
||||||
<a onClick={() => logout()}>
|
|
||||||
Logout
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### useCustomer
|
|
||||||
|
|
||||||
Hook for getting logged in customer data, and fetching customer info.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
|
|
||||||
...
|
|
||||||
|
|
||||||
const Profile = () => {
|
|
||||||
const { data } = useCustomer()
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>Hello, {data.firstName}</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### useSignup
|
|
||||||
|
|
||||||
Hook for bigcommerce user signup, returns `signup` function to handle user signups.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useSignup from '@bigcommerce/storefront-data-hooks/use-login'
|
|
||||||
|
|
||||||
const SignupView = () => {
|
|
||||||
const signup = useSignup()
|
|
||||||
|
|
||||||
const handleSignup = async () => {
|
|
||||||
await signup({
|
|
||||||
email,
|
|
||||||
firstName,
|
|
||||||
lastName,
|
|
||||||
password,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSignup}>
|
|
||||||
{children}
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
### usePrice
|
|
||||||
|
|
||||||
Helper hook to format price according to commerce locale, and return discount if available.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
|
|
||||||
...
|
|
||||||
const { price, discount, basePrice } = usePrice(
|
|
||||||
data && {
|
|
||||||
amount: data.cart_amount,
|
|
||||||
currencyCode: data.currency.code,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
## Cart Hooks
|
|
||||||
|
|
||||||
### useCart
|
|
||||||
|
|
||||||
Returns the current cart data for use
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
|
|
||||||
|
|
||||||
const countItem = (count: number, item: LineItem) => count + item.quantity
|
|
||||||
|
|
||||||
const CartNumber = () => {
|
|
||||||
const { data } = useCart()
|
|
||||||
const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
|
|
||||||
|
|
||||||
return itemsCount > 0 ? <span>{itemsCount}</span> : null
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### useAddItem
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
|
|
||||||
|
|
||||||
const AddToCartButton = ({ productId, variantId }) => {
|
|
||||||
const addItem = useAddItem()
|
|
||||||
|
|
||||||
const addToCart = async () => {
|
|
||||||
await addItem({
|
|
||||||
productId,
|
|
||||||
variantId,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return <button onClick={addToCart}>Add To Cart</button>
|
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
### useUpdateItem
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'
|
|
||||||
|
|
||||||
const CartItem = ({ item }) => {
|
|
||||||
const [quantity, setQuantity] = useState(item.quantity)
|
|
||||||
const updateItem = useUpdateItem(item)
|
|
||||||
|
|
||||||
const updateQuantity = async (e) => {
|
|
||||||
const val = e.target.value
|
|
||||||
await updateItem({ quantity: val })
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
max={99}
|
|
||||||
min={0}
|
|
||||||
value={quantity}
|
|
||||||
onChange={updateQuantity}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
### useRemoveItem
|
|
||||||
|
|
||||||
Provided with a cartItemId, will remove an item from the cart:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'
|
|
||||||
|
|
||||||
const RemoveButton = ({ item }) => {
|
|
||||||
const removeItem = useRemoveItem()
|
|
||||||
|
|
||||||
const handleRemove = async () => {
|
|
||||||
await removeItem({ id: item.id })
|
|
||||||
}
|
|
||||||
|
|
||||||
return <button onClick={handleRemove}>Remove</button>
|
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
## Wishlist Hooks
|
|
||||||
|
|
||||||
Wishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'
|
|
||||||
import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
|
|
||||||
import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
|
|
||||||
|
|
||||||
const WishlistButton = ({ productId, variant }) => {
|
|
||||||
const addItem = useAddItem()
|
|
||||||
const removeItem = useRemoveItem()
|
|
||||||
const { data } = useWishlist()
|
|
||||||
const { data: customer } = useCustomer()
|
|
||||||
const itemInWishlist = data?.items?.find(
|
|
||||||
(item) =>
|
|
||||||
item.product_id === productId &&
|
|
||||||
item.variant_id === variant?.node.entityId
|
|
||||||
)
|
|
||||||
|
|
||||||
const handleWishlistChange = async (e) => {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
if (!customer) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (itemInWishlist) {
|
|
||||||
await removeItem({ id: itemInWishlist.id! })
|
|
||||||
} else {
|
|
||||||
await addItem({
|
|
||||||
productId,
|
|
||||||
variantId: variant?.node.entityId!,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button onClick={handleWishlistChange}>
|
|
||||||
<Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Product Hooks and API
|
|
||||||
|
|
||||||
### useSearch
|
|
||||||
|
|
||||||
`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
...
|
|
||||||
import useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'
|
|
||||||
|
|
||||||
const SearchPage = ({ searchString, category, brand, sortStr }) => {
|
|
||||||
const { data } = useSearch({
|
|
||||||
search: searchString || '',
|
|
||||||
categoryId: category?.entityId,
|
|
||||||
brandId: brand?.entityId,
|
|
||||||
sort: sortStr || '',
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Grid layout="normal">
|
|
||||||
{data.products.map(({ node }) => (
|
|
||||||
<ProductCard key={node.path} product={node} />
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### getAllProducts
|
|
||||||
|
|
||||||
API function to retrieve a product list.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
|
|
||||||
import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
|
|
||||||
|
|
||||||
const { products } = await getAllProducts({
|
|
||||||
variables: { field: 'featuredProducts', first: 6 },
|
|
||||||
config,
|
|
||||||
preview,
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### getProduct
|
|
||||||
|
|
||||||
API product to retrieve a single product when provided with the product
|
|
||||||
slug string.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
|
|
||||||
import getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
|
|
||||||
|
|
||||||
const { product } = await getProduct({
|
|
||||||
variables: { slug },
|
|
||||||
config,
|
|
||||||
preview,
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## More
|
|
||||||
|
|
||||||
Feel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))
|
|
||||||
|
|||||||
334
framework/commerce/README.md
Normal file
334
framework/commerce/README.md
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
# Commerce Framework
|
||||||
|
|
||||||
|
- [Commerce Framework](#commerce-framework)
|
||||||
|
- [Commerce Hooks](#commerce-hooks)
|
||||||
|
- [CommerceProvider](#commerceprovider)
|
||||||
|
- [Authentication Hooks](#authentication-hooks)
|
||||||
|
- [useSignup](#usesignup)
|
||||||
|
- [useLogin](#uselogin)
|
||||||
|
- [useLogout](#uselogout)
|
||||||
|
- [Customer Hooks](#customer-hooks)
|
||||||
|
- [useCustomer](#usecustomer)
|
||||||
|
- [Product Hooks](#product-hooks)
|
||||||
|
- [usePrice](#useprice)
|
||||||
|
- [useSearch](#usesearch)
|
||||||
|
- [Cart Hooks](#cart-hooks)
|
||||||
|
- [useCart](#usecart)
|
||||||
|
- [useAddItem](#useadditem)
|
||||||
|
- [useUpdateItem](#useupdateitem)
|
||||||
|
- [useRemoveItem](#useremoveitem)
|
||||||
|
- [Wishlist Hooks](#wishlist-hooks)
|
||||||
|
- [Commerce API](#commerce-api)
|
||||||
|
- [More](#more)
|
||||||
|
|
||||||
|
The commerce framework ships multiple hooks and a Node.js API, both using an underlying headless e-commerce platform, which we call commerce providers.
|
||||||
|
|
||||||
|
The core features are:
|
||||||
|
|
||||||
|
- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions
|
||||||
|
- A Node.js API for initial data population, static generation of content and for creating the API endpoints that connect to the hooks, if required.
|
||||||
|
|
||||||
|
> 👩🔬 If you would like to contribute a new provider, check the docs for [Adding a new Commerce Provider](./new-provider.md).
|
||||||
|
|
||||||
|
> 🚧 The core commerce framework is under active development, new features and updates will be continuously added over time. Breaking changes are expected while we finish the API.
|
||||||
|
|
||||||
|
## Commerce Hooks
|
||||||
|
|
||||||
|
A commerce hook is a [React hook](https://reactjs.org/docs/hooks-intro.html) that's connected to a commerce provider. They focus on user actions and data fetching of data that wasn't statically generated.
|
||||||
|
|
||||||
|
Data fetching hooks use [SWR](https://swr.vercel.app/) underneath and you're welcome to use any of its [return values](https://swr.vercel.app/docs/options#return-values) and [options](https://swr.vercel.app/docs/options#options). For example, using the `useCustomer` hook:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const { data, isLoading, error } = useCustomer({
|
||||||
|
swrOptions: {
|
||||||
|
revalidateOnFocus: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### CommerceProvider
|
||||||
|
|
||||||
|
This component adds the provider config and handlers to the context of your React tree for it's children. You can optionally pass the `locale` to it:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { CommerceProvider } from '@framework'
|
||||||
|
|
||||||
|
const App = ({ locale = 'en-US', children }) => {
|
||||||
|
return <CommerceProvider locale={locale}>{children}</CommerceProvider>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Authentication Hooks
|
||||||
|
|
||||||
|
### useSignup
|
||||||
|
|
||||||
|
Returns a _signup_ function that can be used to sign up the current visitor:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import useSignup from '@framework/auth/use-signup'
|
||||||
|
|
||||||
|
const SignupView = () => {
|
||||||
|
const signup = useSignup()
|
||||||
|
|
||||||
|
const handleSignup = async () => {
|
||||||
|
await signup({
|
||||||
|
email,
|
||||||
|
firstName,
|
||||||
|
lastName,
|
||||||
|
password,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return <form onSubmit={handleSignup}>{children}</form>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### useLogin
|
||||||
|
|
||||||
|
Returns a _login_ function that can be used to sign in the current visitor into an existing customer:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import useLogin from '@framework/auth/use-login'
|
||||||
|
|
||||||
|
const LoginView = () => {
|
||||||
|
const login = useLogin()
|
||||||
|
const handleLogin = async () => {
|
||||||
|
await login({
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return <form onSubmit={handleLogin}>{children}</form>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### useLogout
|
||||||
|
|
||||||
|
Returns a _logout_ function that signs out the current customer when called.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import useLogout from '@framework/auth/use-logout'
|
||||||
|
|
||||||
|
const LogoutButton = () => {
|
||||||
|
const logout = useLogout()
|
||||||
|
return (
|
||||||
|
<button type="button" onClick={() => logout()}>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customer Hooks
|
||||||
|
|
||||||
|
### useCustomer
|
||||||
|
|
||||||
|
Fetches and returns the data of the signed in customer:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import useCustomer from '@framework/customer/use-customer'
|
||||||
|
|
||||||
|
const Profile = () => {
|
||||||
|
const { data, isLoading, error } = useCustomer()
|
||||||
|
|
||||||
|
if (isLoading) return <p>Loading...</p>
|
||||||
|
if (error) return <p>{error.message}</p>
|
||||||
|
if (!data) return null
|
||||||
|
|
||||||
|
return <div>Hello, {data.firstName}</div>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Product Hooks
|
||||||
|
|
||||||
|
### usePrice
|
||||||
|
|
||||||
|
Helper hook to format price according to the commerce locale and currency code. It also handles discounts:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import useCart from '@framework/cart/use-cart'
|
||||||
|
import usePrice from '@framework/product/use-price'
|
||||||
|
|
||||||
|
// ...
|
||||||
|
const { data } = useCart()
|
||||||
|
const { price, discount, basePrice } = usePrice(
|
||||||
|
data && {
|
||||||
|
amount: data.subtotalPrice,
|
||||||
|
currencyCode: data.currency.code,
|
||||||
|
// If `baseAmount` is used, a discount will be calculated
|
||||||
|
// baseAmount: number,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
// ...
|
||||||
|
```
|
||||||
|
|
||||||
|
### useSearch
|
||||||
|
|
||||||
|
Fetches and returns the products that match a set of filters:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import useSearch from '@framework/product/use-search'
|
||||||
|
|
||||||
|
const SearchPage = ({ searchString, category, brand, sortStr }) => {
|
||||||
|
const { data } = useSearch({
|
||||||
|
search: searchString || '',
|
||||||
|
categoryId: category?.entityId,
|
||||||
|
brandId: brand?.entityId,
|
||||||
|
sort: sortStr,
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid layout="normal">
|
||||||
|
{data.products.map((product) => (
|
||||||
|
<ProductCard key={product.path} product={product} />
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Cart Hooks
|
||||||
|
|
||||||
|
### useCart
|
||||||
|
|
||||||
|
Fetches and returns the data of the current cart:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import useCart from '@framework/cart/use-cart'
|
||||||
|
|
||||||
|
const CartTotal = () => {
|
||||||
|
const { data, isLoading, isEmpty, error } = useCart()
|
||||||
|
|
||||||
|
if (isLoading) return <p>Loading...</p>
|
||||||
|
if (error) return <p>{error.message}</p>
|
||||||
|
if (isEmpty) return <p>The cart is empty</p>
|
||||||
|
|
||||||
|
return <p>The cart total is {data.totalPrice}</p>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### useAddItem
|
||||||
|
|
||||||
|
Returns a function that adds a new item to the cart when called, if this is the first item it will create the cart:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { useAddItem } from '@framework/cart'
|
||||||
|
|
||||||
|
const AddToCartButton = ({ productId, variantId }) => {
|
||||||
|
const addItem = useAddItem()
|
||||||
|
|
||||||
|
const addToCart = async () => {
|
||||||
|
await addItem({
|
||||||
|
productId,
|
||||||
|
variantId,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return <button onClick={addToCart}>Add To Cart</button>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### useUpdateItem
|
||||||
|
|
||||||
|
Returns a function that updates a current item in the cart when called, usually the quantity.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { useUpdateItem } from '@framework/cart'
|
||||||
|
|
||||||
|
const CartItemQuantity = ({ item }) => {
|
||||||
|
const [quantity, setQuantity] = useState(item.quantity)
|
||||||
|
const updateItem = useUpdateItem({ item })
|
||||||
|
|
||||||
|
const updateQuantity = async (e) => {
|
||||||
|
const val = e.target.value
|
||||||
|
|
||||||
|
setQuantity(val)
|
||||||
|
await updateItem({ quantity: val })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
max={99}
|
||||||
|
min={0}
|
||||||
|
value={quantity}
|
||||||
|
onChange={updateQuantity}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
If the `quantity` is lower than 1 the item will be removed from the cart.
|
||||||
|
|
||||||
|
### useRemoveItem
|
||||||
|
|
||||||
|
Returns a function that removes an item in the cart when called:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { useRemoveItem } from '@framework/cart'
|
||||||
|
|
||||||
|
const RemoveButton = ({ item }) => {
|
||||||
|
const removeItem = useRemoveItem()
|
||||||
|
const handleRemove = async () => {
|
||||||
|
await removeItem(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
return <button onClick={handleRemove}>Remove</button>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Wishlist Hooks
|
||||||
|
|
||||||
|
Wishlist hooks work just like [cart hooks](#cart-hooks). Feel free to check how those work first.
|
||||||
|
|
||||||
|
The example below shows how to use the `useWishlist`, `useAddItem` and `useRemoveItem` hooks:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { useWishlist, useAddItem, useRemoveItem } from '@framework/wishlist'
|
||||||
|
|
||||||
|
const WishlistButton = ({ productId, variant }) => {
|
||||||
|
const addItem = useAddItem()
|
||||||
|
const removeItem = useRemoveItem()
|
||||||
|
const { data, isLoading, isEmpty, error } = useWishlist()
|
||||||
|
|
||||||
|
if (isLoading) return <p>Loading...</p>
|
||||||
|
if (error) return <p>{error.message}</p>
|
||||||
|
if (isEmpty) return <p>The wihslist is empty</p>
|
||||||
|
|
||||||
|
const { data: customer } = useCustomer()
|
||||||
|
const itemInWishlist = data?.items?.find(
|
||||||
|
(item) => item.product_id === productId && item.variant_id === variant.id
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleWishlistChange = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!customer) return
|
||||||
|
|
||||||
|
if (itemInWishlist) {
|
||||||
|
await removeItem({ id: itemInWishlist.id })
|
||||||
|
} else {
|
||||||
|
await addItem({
|
||||||
|
productId,
|
||||||
|
variantId: variant.id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={handleWishlistChange}>
|
||||||
|
<Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Commerce API
|
||||||
|
|
||||||
|
While commerce hooks focus on client side data fetching and interactions, the commerce API focuses on static content generation for pages and API endpoints in a Node.js context.
|
||||||
|
|
||||||
|
> The commerce API is currently going through a refactor in https://github.com/vercel/commerce/pull/252 - We'll update the docs once the API is released.
|
||||||
|
|
||||||
|
## More
|
||||||
|
|
||||||
|
Feel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))
|
||||||
66
framework/commerce/config.js
Normal file
66
framework/commerce/config.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
/**
|
||||||
|
* This file is expected to be used in next.config.js only
|
||||||
|
*/
|
||||||
|
|
||||||
|
const path = require('path')
|
||||||
|
const fs = require('fs')
|
||||||
|
const merge = require('deepmerge')
|
||||||
|
const prettier = require('prettier')
|
||||||
|
|
||||||
|
const PROVIDERS = ['bigcommerce', 'shopify']
|
||||||
|
|
||||||
|
function getProviderName() {
|
||||||
|
return (
|
||||||
|
process.env.COMMERCE_PROVIDER ||
|
||||||
|
(process.env.BIGCOMMERCE_STOREFRONT_API_URL
|
||||||
|
? 'bigcommerce'
|
||||||
|
: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
|
||||||
|
? 'shopify'
|
||||||
|
: null)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function withCommerceConfig(nextConfig = {}) {
|
||||||
|
const commerce = nextConfig.commerce || {}
|
||||||
|
const name = commerce.provider || getProviderName()
|
||||||
|
|
||||||
|
if (!name) {
|
||||||
|
throw new Error(
|
||||||
|
`The commerce provider is missing, please add a valid provider name or its environment variables`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (!PROVIDERS.includes(name)) {
|
||||||
|
throw new Error(
|
||||||
|
`The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
|
||||||
|
', '
|
||||||
|
)}"`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const commerceNextConfig = require(path.join('../', name, 'next.config'))
|
||||||
|
const config = merge(commerceNextConfig, nextConfig)
|
||||||
|
|
||||||
|
config.env = config.env || {}
|
||||||
|
|
||||||
|
Object.entries(config.commerce.features).forEach(([k, v]) => {
|
||||||
|
if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
|
||||||
|
})
|
||||||
|
|
||||||
|
// Update paths in `tsconfig.json` to point to the selected provider
|
||||||
|
if (config.commerce.updateTSConfig !== false) {
|
||||||
|
const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
|
||||||
|
const tsconfig = require(tsconfigPath)
|
||||||
|
|
||||||
|
tsconfig.compilerOptions.paths['@framework'] = [`framework/${name}`]
|
||||||
|
tsconfig.compilerOptions.paths['@framework/*'] = [`framework/${name}/*`]
|
||||||
|
|
||||||
|
fs.writeFileSync(
|
||||||
|
tsconfigPath,
|
||||||
|
prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return config
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { withCommerceConfig, getProviderName }
|
||||||
239
framework/commerce/new-provider.md
Normal file
239
framework/commerce/new-provider.md
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
# Adding a new Commerce Provider
|
||||||
|
|
||||||
|
A commerce provider is a headless e-commerce platform that integrates with the [Commerce Framework](./README.md). Right now we have the following providers:
|
||||||
|
|
||||||
|
- BigCommerce ([framework/bigcommerce](../bigcommerce))
|
||||||
|
- Shopify ([framework/shopify](../shopify))
|
||||||
|
|
||||||
|
Adding a commerce provider means adding a new folder in `framework` with a folder structure like the next one:
|
||||||
|
|
||||||
|
- `api`
|
||||||
|
- index.ts
|
||||||
|
- `product`
|
||||||
|
- usePrice
|
||||||
|
- useSearch
|
||||||
|
- getProduct
|
||||||
|
- getAllProducts
|
||||||
|
- `wishlist`
|
||||||
|
- useWishlist
|
||||||
|
- useAddItem
|
||||||
|
- useRemoveItem
|
||||||
|
- `auth`
|
||||||
|
- useLogin
|
||||||
|
- useLogout
|
||||||
|
- useSignup
|
||||||
|
- `customer`
|
||||||
|
- useCustomer
|
||||||
|
- getCustomerId
|
||||||
|
- getCustomerWistlist
|
||||||
|
- `cart`
|
||||||
|
- useCart
|
||||||
|
- useAddItem
|
||||||
|
- useRemoveItem
|
||||||
|
- useUpdateItem
|
||||||
|
- `env.template`
|
||||||
|
- `index.ts`
|
||||||
|
- `provider.ts`
|
||||||
|
- `commerce.config.json`
|
||||||
|
- `next.config.js`
|
||||||
|
- `README.md`
|
||||||
|
|
||||||
|
`provider.ts` exports a provider object with handlers for the [Commerce Hooks](./README.md#commerce-hooks) and `api/index.ts` exports a Node.js provider for the [Commerce API](./README.md#commerce-api)
|
||||||
|
|
||||||
|
> **Important:** We use TypeScript for every provider and expect its usage for every new one.
|
||||||
|
|
||||||
|
The app imports from the provider directly instead of the core commerce folder (`framework/commerce`), but all providers are interchangeable and to achieve it every provider always has to implement the core types and helpers.
|
||||||
|
|
||||||
|
The provider folder should only depend on `framework/commerce` and dependencies in the main `package.json`. In the future we'll move the `framework` folder to a package that can be shared easily for multiple apps.
|
||||||
|
|
||||||
|
## Adding the provider hooks
|
||||||
|
|
||||||
|
Using BigCommerce as an example. The first thing to do is export a `CommerceProvider` component that includes a `provider` object with all the handlers that can be used for hooks:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import type { ReactNode } from 'react'
|
||||||
|
import {
|
||||||
|
CommerceConfig,
|
||||||
|
CommerceProvider as CoreCommerceProvider,
|
||||||
|
useCommerce as useCoreCommerce,
|
||||||
|
} from '@commerce'
|
||||||
|
import { bigcommerceProvider, BigcommerceProvider } from './provider'
|
||||||
|
|
||||||
|
export { bigcommerceProvider }
|
||||||
|
export type { BigcommerceProvider }
|
||||||
|
|
||||||
|
export const bigcommerceConfig: CommerceConfig = {
|
||||||
|
locale: 'en-us',
|
||||||
|
cartCookie: 'bc_cartId',
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BigcommerceConfig = Partial<CommerceConfig>
|
||||||
|
|
||||||
|
export type BigcommerceProps = {
|
||||||
|
children?: ReactNode
|
||||||
|
locale: string
|
||||||
|
} & BigcommerceConfig
|
||||||
|
|
||||||
|
export function CommerceProvider({ children, ...config }: BigcommerceProps) {
|
||||||
|
return (
|
||||||
|
<CoreCommerceProvider
|
||||||
|
provider={bigcommerceProvider}
|
||||||
|
config={{ ...bigcommerceConfig, ...config }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</CoreCommerceProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useCommerce = () => useCoreCommerce<BigcommerceProvider>()
|
||||||
|
```
|
||||||
|
|
||||||
|
The exported types and components extend from the core ones exported by `@commerce`, which refers to `framework/commerce`.
|
||||||
|
|
||||||
|
The `bigcommerceProvider` object looks like this:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
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, useUpdateItem, useRemoveItem },
|
||||||
|
wishlist: {
|
||||||
|
useWishlist,
|
||||||
|
useAddItem: useWishlistAddItem,
|
||||||
|
useRemoveItem: useWishlistRemoveItem,
|
||||||
|
},
|
||||||
|
customer: { useCustomer },
|
||||||
|
products: { useSearch },
|
||||||
|
auth: { useLogin, useLogout, useSignup },
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BigcommerceProvider = typeof bigcommerceProvider
|
||||||
|
```
|
||||||
|
|
||||||
|
The provider object, in this case `bigcommerceProvider`, has to match the `Provider` type defined in [framework/commerce](./index.ts).
|
||||||
|
|
||||||
|
A hook handler, like `useCart`, looks like this:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useMemo } from 'react'
|
||||||
|
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'
|
||||||
|
|
||||||
|
export default useCart as UseCart<typeof handler>
|
||||||
|
|
||||||
|
export const handler: SWRHook<
|
||||||
|
Cart | null,
|
||||||
|
{},
|
||||||
|
FetchCartInput,
|
||||||
|
{ isEmpty?: boolean }
|
||||||
|
> = {
|
||||||
|
fetchOptions: {
|
||||||
|
url: '/api/bigcommerce/cart',
|
||||||
|
method: 'GET',
|
||||||
|
},
|
||||||
|
async fetcher({ input: { cartId }, options, fetch }) {
|
||||||
|
const data = cartId ? await fetch(options) : null
|
||||||
|
return data && normalizeCart(data)
|
||||||
|
},
|
||||||
|
useHook: ({ useData }) => (input) => {
|
||||||
|
const response = useData({
|
||||||
|
swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
|
||||||
|
})
|
||||||
|
|
||||||
|
return useMemo(
|
||||||
|
() =>
|
||||||
|
Object.create(response, {
|
||||||
|
isEmpty: {
|
||||||
|
get() {
|
||||||
|
return (response.data?.lineItems.length ?? 0) <= 0
|
||||||
|
},
|
||||||
|
enumerable: true,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[response]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
In the case of data fetching hooks like `useCart` each handler has to implement the `SWRHook` type that's defined in the core types. For mutations it's the `MutationHook`, e.g for `useAddItem`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
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 {
|
||||||
|
Cart,
|
||||||
|
BigcommerceCart,
|
||||||
|
CartItemBody,
|
||||||
|
AddCartItemBody,
|
||||||
|
} from '../types'
|
||||||
|
import useCart from './use-cart'
|
||||||
|
|
||||||
|
export default useAddItem as UseAddItem<typeof handler>
|
||||||
|
|
||||||
|
export const handler: MutationHook<Cart, {}, CartItemBody> = {
|
||||||
|
fetchOptions: {
|
||||||
|
url: '/api/bigcommerce/cart',
|
||||||
|
method: 'POST',
|
||||||
|
},
|
||||||
|
async fetcher({ input: item, options, fetch }) {
|
||||||
|
if (
|
||||||
|
item.quantity &&
|
||||||
|
(!Number.isInteger(item.quantity) || item.quantity! < 1)
|
||||||
|
) {
|
||||||
|
throw new CommerceError({
|
||||||
|
message: 'The item quantity has to be a valid integer greater than 0',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await fetch<BigcommerceCart, AddCartItemBody>({
|
||||||
|
...options,
|
||||||
|
body: { item },
|
||||||
|
})
|
||||||
|
|
||||||
|
return normalizeCart(data)
|
||||||
|
},
|
||||||
|
useHook: ({ fetch }) => () => {
|
||||||
|
const { mutate } = useCart()
|
||||||
|
|
||||||
|
return useCallback(
|
||||||
|
async function addItem(input) {
|
||||||
|
const data = await fetch({ input })
|
||||||
|
await mutate(data, false)
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
[fetch, mutate]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Adding the Node.js provider API
|
||||||
|
|
||||||
|
TODO
|
||||||
|
|
||||||
|
> The commerce API is currently going through a refactor in https://github.com/vercel/commerce/pull/252 - We'll update the docs once the API is released.
|
||||||
@ -163,6 +163,7 @@ interface Entity {
|
|||||||
export interface Product extends Entity {
|
export interface Product extends Entity {
|
||||||
name: string
|
name: string
|
||||||
description: string
|
description: string
|
||||||
|
descriptionHtml?: string
|
||||||
slug?: string
|
slug?: string
|
||||||
path?: string
|
path?: string
|
||||||
images: ProductImage[]
|
images: ProductImage[]
|
||||||
|
|||||||
@ -1,41 +0,0 @@
|
|||||||
/**
|
|
||||||
* This file is expected to be used in next.config.js only
|
|
||||||
*/
|
|
||||||
|
|
||||||
const merge = require('deepmerge')
|
|
||||||
|
|
||||||
const PROVIDERS = ['bigcommerce', 'shopify']
|
|
||||||
|
|
||||||
function getProviderName() {
|
|
||||||
// TODO: OSOT.
|
|
||||||
return process.env.BIGCOMMERCE_STOREFRONT_API_URL ? 'bigcommerce' : null
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = (nextConfig = {}) => {
|
|
||||||
const commerce = nextConfig.commerce || {}
|
|
||||||
const name = commerce.provider || getProviderName()
|
|
||||||
|
|
||||||
if (!name) {
|
|
||||||
throw new Error(
|
|
||||||
`The commerce provider is missing, please add a valid provider name or its environment variables`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (!PROVIDERS.includes(name)) {
|
|
||||||
throw new Error(
|
|
||||||
`The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
|
|
||||||
', '
|
|
||||||
)}"`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const commerceNextConfig = require(`../${name}/next.config`)
|
|
||||||
const config = merge(commerceNextConfig, nextConfig)
|
|
||||||
|
|
||||||
config.env = config.env || {}
|
|
||||||
|
|
||||||
Object.entries(config.commerce.features).forEach(([k, v]) => {
|
|
||||||
if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
|
|
||||||
})
|
|
||||||
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
@ -1,2 +1,4 @@
|
|||||||
|
COMMERCE_PROVIDER=shopify
|
||||||
|
|
||||||
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
|
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
|
||||||
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
|
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
|
||||||
|
|||||||
@ -1,57 +1,28 @@
|
|||||||
## Table of Contents
|
## Shopify Provider
|
||||||
|
|
||||||
- [Getting Started](#getting-started)
|
**Demo:** https://shopify.demo.vercel.store/
|
||||||
- [Modifications](#modifications)
|
|
||||||
- [Adding item to Cart](#adding-item-to-cart)
|
|
||||||
- [Proceed to Checkout](#proceed-to-checkout)
|
|
||||||
- [General Usage](#general-usage)
|
|
||||||
- [CommerceProvider](#commerceprovider)
|
|
||||||
- [useCommerce](#usecommerce)
|
|
||||||
- [Hooks](#hooks)
|
|
||||||
- [usePrice](#useprice)
|
|
||||||
- [useAddItem](#useadditem)
|
|
||||||
- [useRemoveItem](#useremoveitem)
|
|
||||||
- [useUpdateItem](#useupdateitem)
|
|
||||||
- [APIs](#apis)
|
|
||||||
- [getProduct](#getproduct)
|
|
||||||
- [getAllProducts](#getallproducts)
|
|
||||||
- [getAllCollections](#getallcollections)
|
|
||||||
- [getAllPages](#getallpages)
|
|
||||||
|
|
||||||
# Shopify Storefront Data Hooks
|
Before getting starter, a [Shopify](https://www.shopify.com/) account and store is required before using the provider.
|
||||||
|
|
||||||
Collection of hooks and data fetching functions to integrate Shopify in a React application. Designed to work with [Next.js Commerce](https://demo.vercel.store/).
|
Next, copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):
|
||||||
|
|
||||||
## Getting Started
|
```bash
|
||||||
|
cp framework/shopify/.env.template .env.local
|
||||||
1. Install dependencies:
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn add shopify-buy
|
|
||||||
yarn add @types/shopify-buy
|
|
||||||
```
|
```
|
||||||
|
|
||||||
3. Environment variables need to be set:
|
Then, set the environment variables in `.env.local` to match the ones from your store.
|
||||||
|
|
||||||
```
|
## Contribute
|
||||||
SHOPIFY_STORE_DOMAIN=
|
|
||||||
SHOPIFY_STOREFRONT_ACCESS_TOKEN=
|
|
||||||
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
|
|
||||||
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Point the framework to `shopify` by updating `tsconfig.json`:
|
Our commitment to Open Source can be found [here](https://vercel.com/oss).
|
||||||
|
|
||||||
```
|
If you find an issue with the provider or want a new feature, feel free to open a PR or [create a new issue](https://github.com/vercel/commerce/issues).
|
||||||
"@framework/*": ["framework/shopify/*"],
|
|
||||||
"@framework": ["framework/shopify"]
|
|
||||||
```
|
|
||||||
|
|
||||||
### Modifications
|
## Modifications
|
||||||
|
|
||||||
These modifications are temporarily until contributions are made to remove them.
|
These modifications are temporarily until contributions are made to remove them.
|
||||||
|
|
||||||
#### Adding item to Cart
|
### Adding item to Cart
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// components/product/ProductView/ProductView.tsx
|
// components/product/ProductView/ProductView.tsx
|
||||||
@ -72,7 +43,7 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Proceed to Checkout
|
### Proceed to Checkout
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// components/cart/CartSidebarView/CartSidebarView.tsx
|
// components/cart/CartSidebarView/CartSidebarView.tsx
|
||||||
@ -88,114 +59,6 @@ const CartSidebarView: FC = () => {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## General Usage
|
|
||||||
|
|
||||||
### CommerceProvider
|
|
||||||
|
|
||||||
Provider component that creates the commerce context for children.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { CommerceProvider } from '@framework'
|
|
||||||
|
|
||||||
const App = ({ children }) => {
|
|
||||||
return <CommerceProvider locale={locale}>{children}</CommerceProvider>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
```
|
|
||||||
|
|
||||||
### useCommerce
|
|
||||||
|
|
||||||
Returns the configs that are defined in the nearest `CommerceProvider`. Also provides access to Shopify's `checkout` and `shop`.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { useCommerce } from 'nextjs-commerce-shopify'
|
|
||||||
|
|
||||||
const { checkout, shop } = useCommerce()
|
|
||||||
```
|
|
||||||
|
|
||||||
- `checkout`: The information required to checkout items and pay ([Documentation](https://shopify.dev/docs/storefront-api/reference/checkouts/checkout)).
|
|
||||||
- `shop`: Represents a collection of the general settings and information about the shop ([Documentation](https://shopify.dev/docs/storefront-api/reference/online-store/shop/index)).
|
|
||||||
|
|
||||||
## Hooks
|
|
||||||
|
|
||||||
### usePrice
|
|
||||||
|
|
||||||
Display the product variant price according to currency and locale.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import usePrice from '@framework/product/use-price'
|
|
||||||
|
|
||||||
const { price } = usePrice({
|
|
||||||
amount,
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
Takes in either `amount` or `variant`:
|
|
||||||
|
|
||||||
- `amount`: A price value for a particular item if the amount is known.
|
|
||||||
- `variant`: A shopify product variant. Price will be extracted from the variant.
|
|
||||||
|
|
||||||
### useAddItem
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { useAddItem } from '@framework/cart'
|
|
||||||
|
|
||||||
const AddToCartButton = ({ variantId, quantity }) => {
|
|
||||||
const addItem = useAddItem()
|
|
||||||
|
|
||||||
const addToCart = async () => {
|
|
||||||
await addItem({
|
|
||||||
variantId,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return <button onClick={addToCart}>Add To Cart</button>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### useRemoveItem
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { useRemoveItem } from '@framework/cart'
|
|
||||||
|
|
||||||
const RemoveButton = ({ item }) => {
|
|
||||||
const removeItem = useRemoveItem()
|
|
||||||
|
|
||||||
const handleRemove = async () => {
|
|
||||||
await removeItem({ id: item.id })
|
|
||||||
}
|
|
||||||
|
|
||||||
return <button onClick={handleRemove}>Remove</button>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### useUpdateItem
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { useUpdateItem } from '@framework/cart'
|
|
||||||
|
|
||||||
const CartItem = ({ item }) => {
|
|
||||||
const [quantity, setQuantity] = useState(item.quantity)
|
|
||||||
const updateItem = useUpdateItem(item)
|
|
||||||
|
|
||||||
const updateQuantity = async (e) => {
|
|
||||||
const val = e.target.value
|
|
||||||
await updateItem({ quantity: val })
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
max={99}
|
|
||||||
min={0}
|
|
||||||
value={quantity}
|
|
||||||
onChange={updateQuantity}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## APIs
|
## APIs
|
||||||
|
|
||||||
Collections of APIs to fetch data from a Shopify store.
|
Collections of APIs to fetch data from a Shopify store.
|
||||||
|
|||||||
@ -5,7 +5,6 @@ import {
|
|||||||
API_TOKEN,
|
API_TOKEN,
|
||||||
SHOPIFY_CHECKOUT_ID_COOKIE,
|
SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||||
SHOPIFY_COOKIE_EXPIRE,
|
|
||||||
} from '../const'
|
} from '../const'
|
||||||
|
|
||||||
if (!API_URL) {
|
if (!API_URL) {
|
||||||
@ -48,7 +47,7 @@ const config = new Config({
|
|||||||
commerceUrl: API_URL,
|
commerceUrl: API_URL,
|
||||||
apiToken: API_TOKEN!,
|
apiToken: API_TOKEN!,
|
||||||
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
cartCookieMaxAge: SHOPIFY_COOKIE_EXPIRE,
|
cartCookieMaxAge: 60 * 60 * 24 * 30,
|
||||||
fetch: fetchGraphqlApi,
|
fetch: fetchGraphqlApi,
|
||||||
customerCookie: SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
customerCookie: SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
import Client from 'shopify-buy'
|
|
||||||
import { ShopifyConfig } from '../index'
|
|
||||||
|
|
||||||
type Options = {
|
|
||||||
config: ShopifyConfig
|
|
||||||
}
|
|
||||||
|
|
||||||
const getAllCollections = async (options: Options) => {
|
|
||||||
const { config } = options
|
|
||||||
|
|
||||||
const client = Client.buildClient({
|
|
||||||
storefrontAccessToken: config.apiToken,
|
|
||||||
domain: config.commerceUrl,
|
|
||||||
})
|
|
||||||
|
|
||||||
const res = await client.collection.fetchAllWithProducts()
|
|
||||||
|
|
||||||
return JSON.parse(JSON.stringify(res))
|
|
||||||
}
|
|
||||||
|
|
||||||
export default getAllCollections
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { Page } from '../../schema'
|
|
||||||
import { ShopifyConfig, getConfig } from '..'
|
|
||||||
|
|
||||||
export type GetPageResult<T extends { page?: any } = { page?: Page }> = T
|
|
||||||
|
|
||||||
export type PageVariables = {
|
|
||||||
id: string
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getPage({
|
|
||||||
url,
|
|
||||||
variables,
|
|
||||||
config,
|
|
||||||
preview,
|
|
||||||
}: {
|
|
||||||
url?: string
|
|
||||||
variables: PageVariables
|
|
||||||
config?: ShopifyConfig
|
|
||||||
preview?: boolean
|
|
||||||
}): Promise<GetPageResult> {
|
|
||||||
config = getConfig(config)
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default getPage
|
|
||||||
@ -10,7 +10,7 @@ import {
|
|||||||
MutationCheckoutCreateArgs,
|
MutationCheckoutCreateArgs,
|
||||||
} from '../schema'
|
} from '../schema'
|
||||||
import useLogin, { UseLogin } from '@commerce/auth/use-login'
|
import useLogin, { UseLogin } from '@commerce/auth/use-login'
|
||||||
import { setCustomerToken } from '../utils'
|
import { setCustomerToken, throwUserErrors } from '../utils'
|
||||||
|
|
||||||
export default useLogin as UseLogin<typeof handler>
|
export default useLogin as UseLogin<typeof handler>
|
||||||
|
|
||||||
@ -45,13 +45,8 @@ export const handler: MutationHook<null, {}, CustomerAccessTokenCreateInput> = {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const errors = customerAccessTokenCreate?.customerUserErrors
|
throwUserErrors(customerAccessTokenCreate?.customerUserErrors)
|
||||||
|
|
||||||
if (errors && errors.length) {
|
|
||||||
throw new ValidationError({
|
|
||||||
message: getErrorMessage(errors[0]),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const customerAccessToken = customerAccessTokenCreate?.customerAccessToken
|
const customerAccessToken = customerAccessTokenCreate?.customerAccessToken
|
||||||
const accessToken = customerAccessToken?.accessToken
|
const accessToken = customerAccessToken?.accessToken
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +1,16 @@
|
|||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
import type { MutationHook } from '@commerce/utils/types'
|
import type { MutationHook } from '@commerce/utils/types'
|
||||||
import { CommerceError } from '@commerce/utils/errors'
|
import { CommerceError, ValidationError } from '@commerce/utils/errors'
|
||||||
import useSignup, { UseSignup } from '@commerce/auth/use-signup'
|
import useSignup, { UseSignup } from '@commerce/auth/use-signup'
|
||||||
import useCustomer from '../customer/use-customer'
|
import useCustomer from '../customer/use-customer'
|
||||||
import { CustomerCreateInput } from '../schema'
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
customerCreateMutation,
|
CustomerCreateInput,
|
||||||
customerAccessTokenCreateMutation,
|
Mutation,
|
||||||
} from '../utils/mutations'
|
MutationCustomerCreateArgs,
|
||||||
import handleLogin from '../utils/handle-login'
|
} from '../schema'
|
||||||
|
|
||||||
|
import { customerCreateMutation } from '../utils/mutations'
|
||||||
|
import { handleAutomaticLogin, throwUserErrors } from '../utils'
|
||||||
|
|
||||||
export default useSignup as UseSignup<typeof handler>
|
export default useSignup as UseSignup<typeof handler>
|
||||||
|
|
||||||
@ -33,7 +34,11 @@ export const handler: MutationHook<
|
|||||||
'A first name, last name, email and password are required to signup',
|
'A first name, last name, email and password are required to signup',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const data = await fetch({
|
|
||||||
|
const { customerCreate } = await fetch<
|
||||||
|
Mutation,
|
||||||
|
MutationCustomerCreateArgs
|
||||||
|
>({
|
||||||
...options,
|
...options,
|
||||||
variables: {
|
variables: {
|
||||||
input: {
|
input: {
|
||||||
@ -45,19 +50,10 @@ export const handler: MutationHook<
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
try {
|
throwUserErrors(customerCreate?.customerUserErrors)
|
||||||
const loginData = await fetch({
|
await handleAutomaticLogin(fetch, { email, password })
|
||||||
query: customerAccessTokenCreateMutation,
|
|
||||||
variables: {
|
return null
|
||||||
input: {
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
handleLogin(loginData)
|
|
||||||
} catch (error) {}
|
|
||||||
return data
|
|
||||||
},
|
},
|
||||||
useHook: ({ fetch }) => () => {
|
useHook: ({ fetch }) => () => {
|
||||||
const { revalidate } = useCustomer()
|
const { revalidate } = useCustomer()
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
export { default as useCart } from './use-cart'
|
export { default as useCart } from './use-cart'
|
||||||
export { default as useAddItem } from './use-add-item'
|
export { default as useAddItem } from './use-add-item'
|
||||||
|
export { default as useUpdateItem } from './use-update-item'
|
||||||
export { default as useRemoveItem } from './use-remove-item'
|
export { default as useRemoveItem } from './use-remove-item'
|
||||||
|
|||||||
@ -1,12 +1,15 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
import type { MutationHook } from '@commerce/utils/types'
|
import type { MutationHook } from '@commerce/utils/types'
|
||||||
import { CommerceError } from '@commerce/utils/errors'
|
import { CommerceError } from '@commerce/utils/errors'
|
||||||
import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
|
import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
|
||||||
import useCart from './use-cart'
|
import useCart from './use-cart'
|
||||||
|
import {
|
||||||
|
checkoutLineItemAddMutation,
|
||||||
|
getCheckoutId,
|
||||||
|
checkoutToCart,
|
||||||
|
} from '../utils'
|
||||||
import { Cart, CartItemBody } from '../types'
|
import { Cart, CartItemBody } from '../types'
|
||||||
import { checkoutLineItemAddMutation, getCheckoutId } from '../utils'
|
|
||||||
import { checkoutToCart } from './utils'
|
|
||||||
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
||||||
import { useCallback } from 'react'
|
|
||||||
|
|
||||||
export default useAddItem as UseAddItem<typeof handler>
|
export default useAddItem as UseAddItem<typeof handler>
|
||||||
|
|
||||||
@ -40,8 +43,7 @@ export const handler: MutationHook<Cart, {}, CartItemBody> = {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
// TODO: Fix this Cart type here
|
return checkoutToCart(checkoutLineItemsAdd)
|
||||||
return checkoutToCart(checkoutLineItemsAdd) as any
|
|
||||||
},
|
},
|
||||||
useHook: ({ fetch }) => () => {
|
useHook: ({ fetch }) => () => {
|
||||||
const { mutate } = useCart()
|
const { mutate } = useCart()
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import useCommerceCart, {
|
|||||||
|
|
||||||
import { Cart } from '../types'
|
import { Cart } from '../types'
|
||||||
import { SWRHook } from '@commerce/utils/types'
|
import { SWRHook } from '@commerce/utils/types'
|
||||||
import { checkoutCreate, checkoutToCart } from './utils'
|
import { checkoutCreate, checkoutToCart } from '../utils'
|
||||||
import getCheckoutQuery from '../utils/queries/get-checkout-query'
|
import getCheckoutQuery from '../utils/queries/get-checkout-query'
|
||||||
|
|
||||||
export default useCommerceCart as UseCart<typeof handler>
|
export default useCommerceCart as UseCart<typeof handler>
|
||||||
@ -22,11 +22,12 @@ export const handler: SWRHook<
|
|||||||
},
|
},
|
||||||
async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
|
async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
|
||||||
let checkout
|
let checkout
|
||||||
|
|
||||||
if (checkoutId) {
|
if (checkoutId) {
|
||||||
const data = await fetch({
|
const data = await fetch({
|
||||||
...options,
|
...options,
|
||||||
variables: {
|
variables: {
|
||||||
checkoutId,
|
checkoutId: checkoutId,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
checkout = data.node
|
checkout = data.node
|
||||||
@ -36,8 +37,7 @@ export const handler: SWRHook<
|
|||||||
checkout = await checkoutCreate(fetch)
|
checkout = await checkoutCreate(fetch)
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Fix this type
|
return checkoutToCart({ checkout })
|
||||||
return checkoutToCart({ checkout } as any)
|
|
||||||
},
|
},
|
||||||
useHook: ({ useData }) => (input) => {
|
useHook: ({ useData }) => (input) => {
|
||||||
const response = useData({
|
const response = useData({
|
||||||
|
|||||||
@ -1,23 +1,22 @@
|
|||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
MutationHookContext,
|
MutationHookContext,
|
||||||
HookFetcherContext,
|
HookFetcherContext,
|
||||||
} from '@commerce/utils/types'
|
} from '@commerce/utils/types'
|
||||||
|
import { RemoveCartItemBody } from '@commerce/types'
|
||||||
import { ValidationError } from '@commerce/utils/errors'
|
import { ValidationError } from '@commerce/utils/errors'
|
||||||
|
|
||||||
import useRemoveItem, {
|
import useRemoveItem, {
|
||||||
RemoveItemInput as RemoveItemInputBase,
|
RemoveItemInput as RemoveItemInputBase,
|
||||||
UseRemoveItem,
|
UseRemoveItem,
|
||||||
} from '@commerce/cart/use-remove-item'
|
} from '@commerce/cart/use-remove-item'
|
||||||
|
|
||||||
import useCart from './use-cart'
|
import useCart from './use-cart'
|
||||||
import { checkoutLineItemRemoveMutation, getCheckoutId } from '../utils'
|
import {
|
||||||
import { checkoutToCart } from './utils'
|
checkoutLineItemRemoveMutation,
|
||||||
|
getCheckoutId,
|
||||||
|
checkoutToCart,
|
||||||
|
} from '../utils'
|
||||||
import { Cart, LineItem } from '../types'
|
import { Cart, LineItem } from '../types'
|
||||||
import { Mutation, MutationCheckoutLineItemsRemoveArgs } from '../schema'
|
import { Mutation, MutationCheckoutLineItemsRemoveArgs } from '../schema'
|
||||||
import { RemoveCartItemBody } from '@commerce/types'
|
|
||||||
|
|
||||||
export type RemoveItemFn<T = any> = T extends LineItem
|
export type RemoveItemFn<T = any> = T extends LineItem
|
||||||
? (input?: RemoveItemInput<T>) => Promise<Cart | null>
|
? (input?: RemoveItemInput<T>) => Promise<Cart | null>
|
||||||
|
|||||||
@ -13,7 +13,7 @@ import useUpdateItem, {
|
|||||||
import useCart from './use-cart'
|
import useCart from './use-cart'
|
||||||
import { handler as removeItemHandler } from './use-remove-item'
|
import { handler as removeItemHandler } from './use-remove-item'
|
||||||
import type { Cart, LineItem, UpdateCartItemBody } from '../types'
|
import type { Cart, LineItem, UpdateCartItemBody } from '../types'
|
||||||
import { checkoutToCart } from './utils'
|
import { checkoutToCart } from '../utils'
|
||||||
import { getCheckoutId, checkoutLineItemUpdateMutation } from '../utils'
|
import { getCheckoutId, checkoutLineItemUpdateMutation } from '../utils'
|
||||||
import { Mutation, MutationCheckoutLineItemsUpdateArgs } from '../schema'
|
import { Mutation, MutationCheckoutLineItemsUpdateArgs } from '../schema'
|
||||||
|
|
||||||
|
|||||||
@ -1,42 +0,0 @@
|
|||||||
import { Cart } from '../../types'
|
|
||||||
import { CommerceError, ValidationError } from '@commerce/utils/errors'
|
|
||||||
|
|
||||||
import {
|
|
||||||
CheckoutLineItemsAddPayload,
|
|
||||||
CheckoutLineItemsRemovePayload,
|
|
||||||
CheckoutLineItemsUpdatePayload,
|
|
||||||
Maybe,
|
|
||||||
} from '../../schema'
|
|
||||||
import { normalizeCart } from '../../utils'
|
|
||||||
|
|
||||||
export type CheckoutPayload =
|
|
||||||
| CheckoutLineItemsAddPayload
|
|
||||||
| CheckoutLineItemsUpdatePayload
|
|
||||||
| CheckoutLineItemsRemovePayload
|
|
||||||
|
|
||||||
const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
|
|
||||||
if (!checkoutPayload) {
|
|
||||||
throw new CommerceError({
|
|
||||||
message: 'Invalid response from Shopify',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const checkout = checkoutPayload?.checkout
|
|
||||||
const userErrors = checkoutPayload?.userErrors
|
|
||||||
|
|
||||||
if (userErrors && userErrors.length) {
|
|
||||||
throw new ValidationError({
|
|
||||||
message: userErrors[0].message,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!checkout) {
|
|
||||||
throw new CommerceError({
|
|
||||||
message: 'Invalid response from Shopify',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return normalizeCart(checkout)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default checkoutToCart
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { HookFetcherFn } from '@commerce/utils/types'
|
|
||||||
import { Cart } from '@commerce/types'
|
|
||||||
import { checkoutCreate, checkoutToCart } from '.'
|
|
||||||
import { FetchCartInput } from '@commerce/cart/use-cart'
|
|
||||||
|
|
||||||
const fetcher: HookFetcherFn<Cart | null, FetchCartInput> = async ({
|
|
||||||
options,
|
|
||||||
input: { cartId: checkoutId },
|
|
||||||
fetch,
|
|
||||||
}) => {
|
|
||||||
let checkout
|
|
||||||
|
|
||||||
if (checkoutId) {
|
|
||||||
const data = await fetch({
|
|
||||||
...options,
|
|
||||||
variables: {
|
|
||||||
checkoutId,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
checkout = data.node
|
|
||||||
}
|
|
||||||
|
|
||||||
if (checkout?.completedAt || !checkoutId) {
|
|
||||||
checkout = await checkoutCreate(fetch)
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Fix this type
|
|
||||||
return checkoutToCart({ checkout } as any)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default fetcher
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
export { default as checkoutToCart } from './checkout-to-cart'
|
|
||||||
export { default as checkoutCreate } from './checkout-create'
|
|
||||||
@ -10,11 +10,15 @@ export const handler: SWRHook<Customer | null> = {
|
|||||||
query: getCustomerQuery,
|
query: getCustomerQuery,
|
||||||
},
|
},
|
||||||
async fetcher({ options, fetch }) {
|
async fetcher({ options, fetch }) {
|
||||||
const data = await fetch<any | null>({
|
const customerAccessToken = getCustomerToken()
|
||||||
|
if (customerAccessToken) {
|
||||||
|
const data = await fetch({
|
||||||
...options,
|
...options,
|
||||||
variables: { customerAccessToken: getCustomerToken() },
|
variables: { customerAccessToken: getCustomerToken() },
|
||||||
})
|
})
|
||||||
return data.customer ?? null
|
return data.customer
|
||||||
|
}
|
||||||
|
return null
|
||||||
},
|
},
|
||||||
useHook: ({ useData }) => (input) => {
|
useHook: ({ useData }) => (input) => {
|
||||||
return useData({
|
return useData({
|
||||||
|
|||||||
@ -2,9 +2,14 @@ import { Fetcher } from '@commerce/utils/types'
|
|||||||
import { API_TOKEN, API_URL } from './const'
|
import { API_TOKEN, API_URL } from './const'
|
||||||
import { handleFetchResponse } from './utils'
|
import { handleFetchResponse } from './utils'
|
||||||
|
|
||||||
const fetcher: Fetcher = async ({ method = 'POST', variables, query }) => {
|
const fetcher: Fetcher = async ({
|
||||||
|
url = API_URL,
|
||||||
|
method = 'POST',
|
||||||
|
variables,
|
||||||
|
query,
|
||||||
|
}) => {
|
||||||
return handleFetchResponse(
|
return handleFetchResponse(
|
||||||
await fetch(API_URL, {
|
await fetch(url, {
|
||||||
method,
|
method,
|
||||||
body: JSON.stringify({ query, variables }),
|
body: JSON.stringify({ query, variables }),
|
||||||
headers: {
|
headers: {
|
||||||
|
|||||||
@ -28,8 +28,7 @@ export type ShopifyProps = {
|
|||||||
export function CommerceProvider({ children, ...config }: ShopifyProps) {
|
export function CommerceProvider({ children, ...config }: ShopifyProps) {
|
||||||
return (
|
return (
|
||||||
<CoreCommerceProvider
|
<CoreCommerceProvider
|
||||||
// TODO: Fix this type
|
provider={shopifyProvider}
|
||||||
provider={shopifyProvider as any}
|
|
||||||
config={{ ...shopifyConfig, ...config }}
|
config={{ ...shopifyConfig, ...config }}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@ -1,6 +1,4 @@
|
|||||||
import { Product } from '@commerce/types'
|
|
||||||
import { getConfig, ShopifyConfig } from '../api'
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
import fetchAllProducts from '../api/utils/fetch-all-products'
|
|
||||||
import { ProductEdge } from '../schema'
|
import { ProductEdge } from '../schema'
|
||||||
import getAllProductsPathsQuery from '../utils/queries/get-all-products-paths-query'
|
import getAllProductsPathsQuery from '../utils/queries/get-all-products-paths-query'
|
||||||
|
|
||||||
@ -21,21 +19,22 @@ const getAllProductPaths = async (options?: {
|
|||||||
config?: ShopifyConfig
|
config?: ShopifyConfig
|
||||||
preview?: boolean
|
preview?: boolean
|
||||||
}): Promise<ReturnType> => {
|
}): Promise<ReturnType> => {
|
||||||
let { config, variables = { first: 250 } } = options ?? {}
|
let { config, variables = { first: 100, sortKey: 'BEST_SELLING' } } =
|
||||||
|
options ?? {}
|
||||||
config = getConfig(config)
|
config = getConfig(config)
|
||||||
|
|
||||||
const products = await fetchAllProducts({
|
const { data } = await config.fetch(getAllProductsPathsQuery, {
|
||||||
config,
|
|
||||||
query: getAllProductsPathsQuery,
|
|
||||||
variables,
|
variables,
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
products: products?.map(({ node: { handle } }: ProductEdge) => ({
|
products: data.products?.edges?.map(
|
||||||
|
({ node: { handle } }: ProductEdge) => ({
|
||||||
node: {
|
node: {
|
||||||
path: `/${handle}`,
|
path: `/${handle}`,
|
||||||
},
|
},
|
||||||
})),
|
})
|
||||||
|
),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -27,10 +27,9 @@ const getAllProducts = async (options: {
|
|||||||
{ variables }
|
{ variables }
|
||||||
)
|
)
|
||||||
|
|
||||||
const products =
|
const products = data.products?.edges?.map(({ node: p }: ProductEdge) =>
|
||||||
data.products?.edges?.map(({ node: p }: ProductEdge) =>
|
|
||||||
normalizeProduct(p)
|
normalizeProduct(p)
|
||||||
) ?? []
|
)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
products,
|
products,
|
||||||
|
|||||||
@ -21,11 +21,10 @@ const getProduct = async (options: {
|
|||||||
const { data }: GraphQLFetcherResult = await config.fetch(getProductQuery, {
|
const { data }: GraphQLFetcherResult = await config.fetch(getProductQuery, {
|
||||||
variables,
|
variables,
|
||||||
})
|
})
|
||||||
|
const { productByHandle } = data
|
||||||
const { productByHandle: product } = data
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
product: product ? normalizeProduct(product) : null,
|
product: productByHandle ? normalizeProduct(productByHandle) : null,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -48,7 +48,8 @@ export const handler: SWRHook<
|
|||||||
edges = data.node?.products?.edges ?? []
|
edges = data.node?.products?.edges ?? []
|
||||||
if (brandId) {
|
if (brandId) {
|
||||||
edges = edges.filter(
|
edges = edges.filter(
|
||||||
({ node: { vendor } }: ProductEdge) => vendor === brandId
|
({ node: { vendor } }: ProductEdge) =>
|
||||||
|
vendor.replace(/\s+/g, '-').toLowerCase() === brandId
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { SHOPIFY_CHECKOUT_ID_COOKIE, STORE_DOMAIN } from './const'
|
import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
|
||||||
|
|
||||||
import { handler as useCart } from './cart/use-cart'
|
import { handler as useCart } from './cart/use-cart'
|
||||||
import { handler as useAddItem } from './cart/use-add-item'
|
import { handler as useAddItem } from './cart/use-add-item'
|
||||||
@ -17,15 +17,11 @@ import fetcher from './fetcher'
|
|||||||
export const shopifyProvider = {
|
export const shopifyProvider = {
|
||||||
locale: 'en-us',
|
locale: 'en-us',
|
||||||
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
storeDomain: STORE_DOMAIN,
|
|
||||||
fetcher,
|
fetcher,
|
||||||
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
|
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
|
||||||
customer: { useCustomer },
|
customer: { useCustomer },
|
||||||
products: { useSearch },
|
products: { useSearch },
|
||||||
auth: { useLogin, useLogout, useSignup },
|
auth: { useLogin, useLogout, useSignup },
|
||||||
features: {
|
|
||||||
wishlist: false,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ShopifyProvider = typeof shopifyProvider
|
export type ShopifyProvider = typeof shopifyProvider
|
||||||
|
|||||||
@ -7,13 +7,11 @@ export type ShopifyCheckout = {
|
|||||||
lineItems: CheckoutLineItem[]
|
lineItems: CheckoutLineItem[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Cart extends Core.Cart {
|
export type Cart = Core.Cart & {
|
||||||
id: string
|
|
||||||
lineItems: LineItem[]
|
lineItems: LineItem[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LineItem extends Core.LineItem {
|
export interface LineItem extends Core.LineItem {
|
||||||
options: any[]
|
options?: any[]
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,13 +1,17 @@
|
|||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
SHOPIFY_CHECKOUT_ID_COOKIE,
|
SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
SHOPIFY_CHECKOUT_URL_COOKIE,
|
SHOPIFY_CHECKOUT_URL_COOKIE,
|
||||||
SHOPIFY_COOKIE_EXPIRE,
|
SHOPIFY_COOKIE_EXPIRE,
|
||||||
} from '../../const'
|
} from '../const'
|
||||||
|
|
||||||
import checkoutCreateMutation from '../../utils/mutations/checkout-create'
|
import checkoutCreateMutation from './mutations/checkout-create'
|
||||||
import Cookies from 'js-cookie'
|
import { CheckoutCreatePayload } from '../schema'
|
||||||
|
|
||||||
export const checkoutCreate = async (fetch: any) => {
|
export const checkoutCreate = async (
|
||||||
|
fetch: any
|
||||||
|
): Promise<CheckoutCreatePayload> => {
|
||||||
const data = await fetch({
|
const data = await fetch({
|
||||||
query: checkoutCreateMutation,
|
query: checkoutCreateMutation,
|
||||||
})
|
})
|
||||||
@ -20,7 +24,7 @@ export const checkoutCreate = async (fetch: any) => {
|
|||||||
expires: SHOPIFY_COOKIE_EXPIRE,
|
expires: SHOPIFY_COOKIE_EXPIRE,
|
||||||
}
|
}
|
||||||
Cookies.set(SHOPIFY_CHECKOUT_ID_COOKIE, checkoutId, options)
|
Cookies.set(SHOPIFY_CHECKOUT_ID_COOKIE, checkoutId, options)
|
||||||
Cookies.set(SHOPIFY_CHECKOUT_URL_COOKIE, checkout?.webUrl, options)
|
Cookies.set(SHOPIFY_CHECKOUT_URL_COOKIE, checkout.webUrl, options)
|
||||||
}
|
}
|
||||||
|
|
||||||
return checkout
|
return checkout
|
||||||
48
framework/shopify/utils/checkout-to-cart.ts
Normal file
48
framework/shopify/utils/checkout-to-cart.ts
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import { Cart } from '../types'
|
||||||
|
import { CommerceError } from '@commerce/utils/errors'
|
||||||
|
|
||||||
|
import {
|
||||||
|
CheckoutLineItemsAddPayload,
|
||||||
|
CheckoutLineItemsRemovePayload,
|
||||||
|
CheckoutLineItemsUpdatePayload,
|
||||||
|
CheckoutCreatePayload,
|
||||||
|
CheckoutUserError,
|
||||||
|
Checkout,
|
||||||
|
Maybe,
|
||||||
|
} from '../schema'
|
||||||
|
|
||||||
|
import { normalizeCart } from './normalize'
|
||||||
|
import throwUserErrors from './throw-user-errors'
|
||||||
|
|
||||||
|
export type CheckoutQuery = {
|
||||||
|
checkout: Checkout
|
||||||
|
checkoutUserErrors?: Array<CheckoutUserError>
|
||||||
|
}
|
||||||
|
|
||||||
|
export type CheckoutPayload =
|
||||||
|
| CheckoutLineItemsAddPayload
|
||||||
|
| CheckoutLineItemsUpdatePayload
|
||||||
|
| CheckoutLineItemsRemovePayload
|
||||||
|
| CheckoutCreatePayload
|
||||||
|
| CheckoutQuery
|
||||||
|
|
||||||
|
const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
|
||||||
|
if (!checkoutPayload) {
|
||||||
|
throw new CommerceError({
|
||||||
|
message: 'Missing checkout payload from response',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkout = checkoutPayload?.checkout
|
||||||
|
throwUserErrors(checkoutPayload?.checkoutUserErrors)
|
||||||
|
|
||||||
|
if (!checkout) {
|
||||||
|
throw new CommerceError({
|
||||||
|
message: 'Missing checkout object from response',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return normalizeCart(checkout)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default checkoutToCart
|
||||||
@ -1,4 +1,4 @@
|
|||||||
const getSortVariables = (sort?: string, isCategory = false) => {
|
const getSortVariables = (sort?: string, isCategory: boolean = false) => {
|
||||||
let output = {}
|
let output = {}
|
||||||
switch (sort) {
|
switch (sort) {
|
||||||
case 'price-asc':
|
case 'price-asc':
|
||||||
|
|||||||
@ -2,13 +2,14 @@ import { ShopifyConfig } from '../api'
|
|||||||
import fetchAllProducts from '../api/utils/fetch-all-products'
|
import fetchAllProducts from '../api/utils/fetch-all-products'
|
||||||
import getAllProductVendors from './queries/get-all-product-vendors-query'
|
import getAllProductVendors from './queries/get-all-product-vendors-query'
|
||||||
|
|
||||||
export type BrandNode = {
|
export type Brand = {
|
||||||
|
entityId: string
|
||||||
name: string
|
name: string
|
||||||
path: string
|
path: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export type BrandEdge = {
|
export type BrandEdge = {
|
||||||
node: BrandNode
|
node: Brand
|
||||||
}
|
}
|
||||||
|
|
||||||
export type Brands = BrandEdge[]
|
export type Brands = BrandEdge[]
|
||||||
@ -24,13 +25,16 @@ const getVendors = async (config: ShopifyConfig): Promise<BrandEdge[]> => {
|
|||||||
|
|
||||||
let vendorsStrings = vendors.map(({ node: { vendor } }) => vendor)
|
let vendorsStrings = vendors.map(({ node: { vendor } }) => vendor)
|
||||||
|
|
||||||
return [...new Set(vendorsStrings)].map((v) => ({
|
return [...new Set(vendorsStrings)].map((v) => {
|
||||||
|
const id = v.replace(/\s+/g, '-').toLowerCase()
|
||||||
|
return {
|
||||||
node: {
|
node: {
|
||||||
entityId: v,
|
entityId: id,
|
||||||
name: v,
|
name: v,
|
||||||
path: `brands/${v}`,
|
path: `brands/${id}`,
|
||||||
},
|
},
|
||||||
}))
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export default getVendors
|
export default getVendors
|
||||||
|
|||||||
30
framework/shopify/utils/handle-account-activation.ts
Normal file
30
framework/shopify/utils/handle-account-activation.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { FetcherOptions } from '@commerce/utils/types'
|
||||||
|
import throwUserErrors from './throw-user-errors'
|
||||||
|
|
||||||
|
import {
|
||||||
|
MutationCustomerActivateArgs,
|
||||||
|
MutationCustomerActivateByUrlArgs,
|
||||||
|
} from '../schema'
|
||||||
|
import { Mutation } from '../schema'
|
||||||
|
import { customerActivateByUrlMutation } from './mutations'
|
||||||
|
|
||||||
|
const handleAccountActivation = async (
|
||||||
|
fetch: <T = any, B = Body>(options: FetcherOptions<B>) => Promise<T>,
|
||||||
|
input: MutationCustomerActivateByUrlArgs
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const { customerActivateByUrl } = await fetch<
|
||||||
|
Mutation,
|
||||||
|
MutationCustomerActivateArgs
|
||||||
|
>({
|
||||||
|
query: customerActivateByUrlMutation,
|
||||||
|
variables: {
|
||||||
|
input,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
throwUserErrors(customerActivateByUrl?.customerUserErrors)
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default handleAccountActivation
|
||||||
@ -1,30 +1,12 @@
|
|||||||
import { ValidationError } from '@commerce/utils/errors'
|
import { FetcherOptions } from '@commerce/utils/types'
|
||||||
|
import { CustomerAccessTokenCreateInput } from '../schema'
|
||||||
import { setCustomerToken } from './customer-token'
|
import { setCustomerToken } from './customer-token'
|
||||||
|
import { customerAccessTokenCreateMutation } from './mutations'
|
||||||
const getErrorMessage = ({
|
import throwUserErrors from './throw-user-errors'
|
||||||
code,
|
|
||||||
message,
|
|
||||||
}: {
|
|
||||||
code: string
|
|
||||||
message: string
|
|
||||||
}) => {
|
|
||||||
switch (code) {
|
|
||||||
case 'UNIDENTIFIED_CUSTOMER':
|
|
||||||
message = 'Cannot find an account that matches the provided credentials'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
return message
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleLogin = (data: any) => {
|
const handleLogin = (data: any) => {
|
||||||
const response = data.customerAccessTokenCreate
|
const response = data.customerAccessTokenCreate
|
||||||
const errors = response?.customerUserErrors
|
throwUserErrors(response?.customerUserErrors)
|
||||||
|
|
||||||
if (errors && errors.length) {
|
|
||||||
throw new ValidationError({
|
|
||||||
message: getErrorMessage(errors[0]),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const customerAccessToken = response?.customerAccessToken
|
const customerAccessToken = response?.customerAccessToken
|
||||||
const accessToken = customerAccessToken?.accessToken
|
const accessToken = customerAccessToken?.accessToken
|
||||||
@ -36,4 +18,19 @@ const handleLogin = (data: any) => {
|
|||||||
return customerAccessToken
|
return customerAccessToken
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const handleAutomaticLogin = async (
|
||||||
|
fetch: <T = any, B = Body>(options: FetcherOptions<B>) => Promise<T>,
|
||||||
|
input: CustomerAccessTokenCreateInput
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const loginData = await fetch({
|
||||||
|
query: customerAccessTokenCreateMutation,
|
||||||
|
variables: {
|
||||||
|
input,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
handleLogin(loginData)
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
|
|
||||||
export default handleLogin
|
export default handleLogin
|
||||||
|
|||||||
@ -4,6 +4,11 @@ export { default as getSortVariables } from './get-sort-variables'
|
|||||||
export { default as getVendors } from './get-vendors'
|
export { default as getVendors } from './get-vendors'
|
||||||
export { default as getCategories } from './get-categories'
|
export { default as getCategories } from './get-categories'
|
||||||
export { default as getCheckoutId } from './get-checkout-id'
|
export { default as getCheckoutId } from './get-checkout-id'
|
||||||
|
export { default as checkoutCreate } from './checkout-create'
|
||||||
|
export { default as checkoutToCart } from './checkout-to-cart'
|
||||||
|
export { default as handleLogin, handleAutomaticLogin } from './handle-login'
|
||||||
|
export { default as handleAccountActivation } from './handle-account-activation'
|
||||||
|
export { default as throwUserErrors } from './throw-user-errors'
|
||||||
export * from './queries'
|
export * from './queries'
|
||||||
export * from './mutations'
|
export * from './mutations'
|
||||||
export * from './normalize'
|
export * from './normalize'
|
||||||
|
|||||||
@ -3,9 +3,10 @@ import { checkoutDetailsFragment } from '../queries/get-checkout-query'
|
|||||||
const checkoutCreateMutation = /* GraphQL */ `
|
const checkoutCreateMutation = /* GraphQL */ `
|
||||||
mutation {
|
mutation {
|
||||||
checkoutCreate(input: {}) {
|
checkoutCreate(input: {}) {
|
||||||
userErrors {
|
checkoutUserErrors {
|
||||||
message
|
code
|
||||||
field
|
field
|
||||||
|
message
|
||||||
}
|
}
|
||||||
checkout {
|
checkout {
|
||||||
${checkoutDetailsFragment}
|
${checkoutDetailsFragment}
|
||||||
|
|||||||
@ -3,9 +3,10 @@ import { checkoutDetailsFragment } from '../queries/get-checkout-query'
|
|||||||
const checkoutLineItemAddMutation = /* GraphQL */ `
|
const checkoutLineItemAddMutation = /* GraphQL */ `
|
||||||
mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
|
mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
|
||||||
checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) {
|
checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) {
|
||||||
userErrors {
|
checkoutUserErrors {
|
||||||
message
|
code
|
||||||
field
|
field
|
||||||
|
message
|
||||||
}
|
}
|
||||||
checkout {
|
checkout {
|
||||||
${checkoutDetailsFragment}
|
${checkoutDetailsFragment}
|
||||||
|
|||||||
@ -6,9 +6,10 @@ const checkoutLineItemRemoveMutation = /* GraphQL */ `
|
|||||||
checkoutId: $checkoutId
|
checkoutId: $checkoutId
|
||||||
lineItemIds: $lineItemIds
|
lineItemIds: $lineItemIds
|
||||||
) {
|
) {
|
||||||
userErrors {
|
checkoutUserErrors {
|
||||||
message
|
code
|
||||||
field
|
field
|
||||||
|
message
|
||||||
}
|
}
|
||||||
checkout {
|
checkout {
|
||||||
${checkoutDetailsFragment}
|
${checkoutDetailsFragment}
|
||||||
|
|||||||
@ -3,9 +3,10 @@ import { checkoutDetailsFragment } from '../queries/get-checkout-query'
|
|||||||
const checkoutLineItemUpdateMutation = /* GraphQL */ `
|
const checkoutLineItemUpdateMutation = /* GraphQL */ `
|
||||||
mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemUpdateInput!]!) {
|
mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemUpdateInput!]!) {
|
||||||
checkoutLineItemsUpdate(checkoutId: $checkoutId, lineItems: $lineItems) {
|
checkoutLineItemsUpdate(checkoutId: $checkoutId, lineItems: $lineItems) {
|
||||||
userErrors {
|
checkoutUserErrors {
|
||||||
message
|
code
|
||||||
field
|
field
|
||||||
|
message
|
||||||
}
|
}
|
||||||
checkout {
|
checkout {
|
||||||
${checkoutDetailsFragment}
|
${checkoutDetailsFragment}
|
||||||
|
|||||||
@ -0,0 +1,19 @@
|
|||||||
|
const customerActivateByUrlMutation = /* GraphQL */ `
|
||||||
|
mutation customerActivateByUrl($activationUrl: URL!, $password: String!) {
|
||||||
|
customerActivateByUrl(activationUrl: $activationUrl, password: $password) {
|
||||||
|
customer {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
customerAccessToken {
|
||||||
|
accessToken
|
||||||
|
expiresAt
|
||||||
|
}
|
||||||
|
customerUserErrors {
|
||||||
|
code
|
||||||
|
field
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default customerActivateByUrlMutation
|
||||||
19
framework/shopify/utils/mutations/customer-activate.ts
Normal file
19
framework/shopify/utils/mutations/customer-activate.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const customerActivateMutation = /* GraphQL */ `
|
||||||
|
mutation customerActivate($id: ID!, $input: CustomerActivateInput!) {
|
||||||
|
customerActivate(id: $id, input: $input) {
|
||||||
|
customer {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
customerAccessToken {
|
||||||
|
accessToken
|
||||||
|
expiresAt
|
||||||
|
}
|
||||||
|
customerUserErrors {
|
||||||
|
code
|
||||||
|
field
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default customerActivateMutation
|
||||||
@ -5,3 +5,5 @@ export { default as checkoutLineItemUpdateMutation } from './checkout-line-item-
|
|||||||
export { default as checkoutLineItemRemoveMutation } from './checkout-line-item-remove'
|
export { default as checkoutLineItemRemoveMutation } from './checkout-line-item-remove'
|
||||||
export { default as customerAccessTokenCreateMutation } from './customer-access-token-create'
|
export { default as customerAccessTokenCreateMutation } from './customer-access-token-create'
|
||||||
export { default as customerAccessTokenDeleteMutation } from './customer-access-token-delete'
|
export { default as customerAccessTokenDeleteMutation } from './customer-access-token-delete'
|
||||||
|
export { default as customerActivateMutation } from './customer-activate'
|
||||||
|
export { default as customerActivateByUrlMutation } from './customer-activate-by-url'
|
||||||
|
|||||||
@ -33,7 +33,7 @@ const normalizeProductOption = ({
|
|||||||
let output: any = {
|
let output: any = {
|
||||||
label: value,
|
label: value,
|
||||||
}
|
}
|
||||||
if (displayName === 'Color') {
|
if (displayName.match(/colou?r/gi)) {
|
||||||
output = {
|
output = {
|
||||||
...output,
|
...output,
|
||||||
hexColors: [value],
|
hexColors: [value],
|
||||||
@ -54,21 +54,24 @@ const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
|
|||||||
return edges?.map(
|
return edges?.map(
|
||||||
({
|
({
|
||||||
node: { id, selectedOptions, sku, title, priceV2, compareAtPriceV2 },
|
node: { id, selectedOptions, sku, title, priceV2, compareAtPriceV2 },
|
||||||
}) => ({
|
}) => {
|
||||||
|
return {
|
||||||
id,
|
id,
|
||||||
name: title,
|
name: title,
|
||||||
sku: sku ?? id,
|
sku: sku ?? id,
|
||||||
price: +priceV2.amount,
|
price: +priceV2.amount,
|
||||||
listPrice: +compareAtPriceV2?.amount,
|
listPrice: +compareAtPriceV2?.amount,
|
||||||
requiresShipping: true,
|
requiresShipping: true,
|
||||||
options: selectedOptions.map(({ name, value }: SelectedOption) =>
|
options: selectedOptions.map(({ name, value }: SelectedOption) => {
|
||||||
normalizeProductOption({
|
const options = normalizeProductOption({
|
||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
values: [value],
|
values: [value],
|
||||||
})
|
})
|
||||||
),
|
return options
|
||||||
})
|
}),
|
||||||
|
}
|
||||||
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -80,6 +83,7 @@ export function normalizeProduct(productNode: ShopifyProduct): Product {
|
|||||||
images,
|
images,
|
||||||
variants,
|
variants,
|
||||||
description,
|
description,
|
||||||
|
descriptionHtml,
|
||||||
handle,
|
handle,
|
||||||
priceRange,
|
priceRange,
|
||||||
options,
|
options,
|
||||||
@ -90,13 +94,18 @@ export function normalizeProduct(productNode: ShopifyProduct): Product {
|
|||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
vendor,
|
vendor,
|
||||||
description,
|
|
||||||
path: `/${handle}`,
|
path: `/${handle}`,
|
||||||
slug: handle?.replace(/^\/+|\/+$/g, ''),
|
slug: handle?.replace(/^\/+|\/+$/g, ''),
|
||||||
price: money(priceRange?.minVariantPrice),
|
price: money(priceRange?.minVariantPrice),
|
||||||
images: normalizeProductImages(images),
|
images: normalizeProductImages(images),
|
||||||
variants: variants ? normalizeProductVariants(variants) : [],
|
variants: variants ? normalizeProductVariants(variants) : [],
|
||||||
options: options ? options.map((o) => normalizeProductOption(o)) : [],
|
options: options
|
||||||
|
? options
|
||||||
|
.filter((o) => o.name !== 'Title') // By default Shopify adds a 'Title' name when there's only one option. We don't need it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
|
||||||
|
.map((o) => normalizeProductOption(o))
|
||||||
|
: [],
|
||||||
|
...(description && { description }),
|
||||||
|
...(descriptionHtml && { descriptionHtml }),
|
||||||
...rest,
|
...rest,
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -122,7 +131,7 @@ export function normalizeCart(checkout: Checkout): Cart {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function normalizeLineItem({
|
function normalizeLineItem({
|
||||||
node: { id, title, variant, quantity },
|
node: { id, title, variant, quantity, ...rest },
|
||||||
}: CheckoutLineItemEdge): LineItem {
|
}: CheckoutLineItemEdge): LineItem {
|
||||||
return {
|
return {
|
||||||
id,
|
id,
|
||||||
@ -135,15 +144,19 @@ function normalizeLineItem({
|
|||||||
sku: variant?.sku ?? '',
|
sku: variant?.sku ?? '',
|
||||||
name: variant?.title!,
|
name: variant?.title!,
|
||||||
image: {
|
image: {
|
||||||
url: variant?.image?.originalSrc,
|
url: variant?.image?.originalSrc ?? '/product-img-placeholder.svg',
|
||||||
},
|
},
|
||||||
requiresShipping: variant?.requiresShipping ?? false,
|
requiresShipping: variant?.requiresShipping ?? false,
|
||||||
price: variant?.priceV2?.amount,
|
price: variant?.priceV2?.amount,
|
||||||
listPrice: variant?.compareAtPriceV2?.amount,
|
listPrice: variant?.compareAtPriceV2?.amount,
|
||||||
},
|
},
|
||||||
path: '',
|
path: String(variant?.product?.handle),
|
||||||
discounts: [],
|
discounts: [],
|
||||||
options: [
|
options:
|
||||||
|
// By default Shopify adds a default variant with default names, we're removing it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
|
||||||
|
variant?.title == 'Default Title'
|
||||||
|
? []
|
||||||
|
: [
|
||||||
{
|
{
|
||||||
value: variant?.title,
|
value: variant?.title,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -9,7 +9,6 @@ edges {
|
|||||||
title
|
title
|
||||||
vendor
|
vendor
|
||||||
handle
|
handle
|
||||||
description
|
|
||||||
priceRange {
|
priceRange {
|
||||||
minVariantPrice {
|
minVariantPrice {
|
||||||
amount
|
amount
|
||||||
|
|||||||
@ -43,6 +43,9 @@ export const checkoutDetailsFragment = `
|
|||||||
amount
|
amount
|
||||||
currencyCode
|
currencyCode
|
||||||
}
|
}
|
||||||
|
product {
|
||||||
|
handle
|
||||||
|
}
|
||||||
}
|
}
|
||||||
quantity
|
quantity
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
export const getCheckoutIdFromStorage = (token: string) => {
|
|
||||||
if (window && window.sessionStorage) {
|
|
||||||
return window.sessionStorage.getItem(token)
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
export const setCheckoutIdInStorage = (token: string, id: string | number) => {
|
|
||||||
if (window && window.sessionStorage) {
|
|
||||||
return window.sessionStorage.setItem(token, id + '')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
38
framework/shopify/utils/throw-user-errors.ts
Normal file
38
framework/shopify/utils/throw-user-errors.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { ValidationError } from '@commerce/utils/errors'
|
||||||
|
|
||||||
|
import {
|
||||||
|
CheckoutErrorCode,
|
||||||
|
CheckoutUserError,
|
||||||
|
CustomerErrorCode,
|
||||||
|
CustomerUserError,
|
||||||
|
} from '../schema'
|
||||||
|
|
||||||
|
export type UserErrors = Array<CheckoutUserError | CustomerUserError>
|
||||||
|
|
||||||
|
export type UserErrorCode =
|
||||||
|
| CustomerErrorCode
|
||||||
|
| CheckoutErrorCode
|
||||||
|
| null
|
||||||
|
| undefined
|
||||||
|
|
||||||
|
const getCustomMessage = (code: UserErrorCode, message: string) => {
|
||||||
|
switch (code) {
|
||||||
|
case 'UNIDENTIFIED_CUSTOMER':
|
||||||
|
message = 'Cannot find an account that matches the provided credentials'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return message
|
||||||
|
}
|
||||||
|
|
||||||
|
export const throwUserErrors = (errors?: UserErrors) => {
|
||||||
|
if (errors && errors.length) {
|
||||||
|
throw new ValidationError({
|
||||||
|
errors: errors.map(({ code, message }) => ({
|
||||||
|
code: code ?? 'validation_error',
|
||||||
|
message: getCustomMessage(code, message),
|
||||||
|
})),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default throwUserErrors
|
||||||
@ -1,8 +1,12 @@
|
|||||||
const commerce = require('./commerce.config.json')
|
const commerce = require('./commerce.config.json')
|
||||||
const withCommerceConfig = require('./framework/commerce/with-config')
|
const {
|
||||||
|
withCommerceConfig,
|
||||||
|
getProviderName,
|
||||||
|
} = require('./framework/commerce/config')
|
||||||
|
|
||||||
const isBC = commerce.provider === 'bigcommerce'
|
const provider = commerce.provider || getProviderName()
|
||||||
const isShopify = commerce.provider === 'shopify'
|
const isBC = provider === 'bigcommerce'
|
||||||
|
const isShopify = provider === 'shopify'
|
||||||
|
|
||||||
module.exports = withCommerceConfig({
|
module.exports = withCommerceConfig({
|
||||||
commerce,
|
commerce,
|
||||||
@ -39,3 +43,6 @@ module.exports = withCommerceConfig({
|
|||||||
].filter((x) => x)
|
].filter((x) => x)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Don't delete this console log, useful to see the commerce config in Vercel deployments
|
||||||
|
console.log('next.config.js', JSON.stringify(module.exports, null, 2))
|
||||||
|
|||||||
@ -25,8 +25,7 @@ export async function getStaticProps({
|
|||||||
const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
|
const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
|
||||||
const data =
|
const data =
|
||||||
pageItem &&
|
pageItem &&
|
||||||
// TODO: Shopify - Fix this type
|
(await getPage({ variables: { id: pageItem.id! }, config, preview }))
|
||||||
(await getPage({ variables: { id: pageItem.id! } as any, config, preview }))
|
|
||||||
const page = data?.page
|
const page = data?.page
|
||||||
|
|
||||||
if (!page) {
|
if (!page) {
|
||||||
|
|||||||
@ -75,10 +75,8 @@ export default function Search({
|
|||||||
|
|
||||||
const { data } = useSearch({
|
const { data } = useSearch({
|
||||||
search: typeof q === 'string' ? q : '',
|
search: typeof q === 'string' ? q : '',
|
||||||
// TODO: Shopify - Fix this type
|
categoryId: activeCategory?.entityId,
|
||||||
categoryId: activeCategory?.entityId as any,
|
brandId: activeBrand?.entityId,
|
||||||
// TODO: Shopify - Fix this type
|
|
||||||
brandId: (activeBrand as any)?.entityId,
|
|
||||||
sort: typeof sort === 'string' ? sort : '',
|
sort: typeof sort === 'string' ? sort : '',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -22,8 +22,8 @@
|
|||||||
"@components/*": ["components/*"],
|
"@components/*": ["components/*"],
|
||||||
"@commerce": ["framework/commerce"],
|
"@commerce": ["framework/commerce"],
|
||||||
"@commerce/*": ["framework/commerce/*"],
|
"@commerce/*": ["framework/commerce/*"],
|
||||||
"@framework": ["framework/bigcommerce"],
|
"@framework": ["framework/shopify"],
|
||||||
"@framework/*": ["framework/bigcommerce/*"]
|
"@framework/*": ["framework/shopify/*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user