mirror of
https://github.com/vercel/commerce.git
synced 2025-05-17 15:06:59 +00:00
Merge branch 'main' of https://github.com/vercel/commerce
This commit is contained in:
Oliver Heywood
commit
cf3b548fba
14
.gitignore
vendored
14
.gitignore
vendored
@ -2,18 +2,19 @@
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
/.pnp
|
||||
.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
coverage
|
||||
|
||||
# next.js
|
||||
.next/
|
||||
out/
|
||||
.next
|
||||
out
|
||||
|
||||
# production
|
||||
/build
|
||||
build
|
||||
dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
@ -34,3 +35,6 @@ yarn-error.log*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# Turborepo
|
||||
.turbo
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# Every package defines its prettier config
|
||||
node_modules
|
||||
dist
|
||||
.next
|
||||
public
|
||||
public
|
||||
|
||||
10
.prettierrc
10
.prettierrc
@ -2,13 +2,5 @@
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["framework/saleor/**/*"],
|
||||
"options": {
|
||||
"printWidth": 120
|
||||
}
|
||||
}
|
||||
]
|
||||
"useTabs": false
|
||||
}
|
||||
|
||||
7
.vscode/extensions.json
vendored
7
.vscode/extensions.json
vendored
@ -1,3 +1,8 @@
|
||||
{
|
||||
"recommendations": ["esbenp.prettier-vscode", "csstools.postcss", "bradlc.vscode-tailwindcss"]
|
||||
"recommendations": [
|
||||
"esbenp.prettier-vscode",
|
||||
"csstools.postcss",
|
||||
"bradlc.vscode-tailwindcss",
|
||||
"ms-vscode.vscode-typescript-next"
|
||||
]
|
||||
}
|
||||
|
||||
76
README.md
76
README.md
@ -35,38 +35,28 @@ Next.js Commerce integrates out-of-the-box with BigCommerce, Shopify, Swell, Sal
|
||||
|
||||
## Considerations
|
||||
|
||||
- `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 (`framework/commerce`).
|
||||
- `packages/commerce` contains all types, helpers and functions to be used as base to build a new **provider**.
|
||||
- **Providers** live under `packages`'s root folder and they will extend Next.js Commerce types and functionality (`packages/commerce`).
|
||||
- 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.
|
||||
- **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`
|
||||
|
||||
## Configuration
|
||||
|
||||
### How to change providers
|
||||
|
||||
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).
|
||||
Open `site/.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 `site/.env.template` as the base).
|
||||
|
||||
The setup for Shopify would look like this for example:
|
||||
|
||||
```
|
||||
COMMERCE_PROVIDER=shopify
|
||||
COMMERCE_PROVIDER=@vercel/commerce-shopify
|
||||
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com
|
||||
```
|
||||
|
||||
And check that the `tsconfig.json` resolves to the chosen provider:
|
||||
|
||||
```
|
||||
"@framework": ["framework/shopify"],
|
||||
"@framework/*": ["framework/shopify/*"]
|
||||
```
|
||||
|
||||
That's it!
|
||||
|
||||
### Features
|
||||
|
||||
Every provider defines the features that it supports under `framework/{provider}/commerce.config.json`
|
||||
Every provider defines the features that it supports under `packages/{provider}/src/commerce.config.json`
|
||||
|
||||
#### Features Available
|
||||
|
||||
@ -83,7 +73,7 @@ For example: Turning `cart` off will disable Cart capabilities.
|
||||
|
||||
> NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)
|
||||
|
||||
- Open `commerce.config.json`
|
||||
- Open `site/commerce.config.json`
|
||||
- You'll see a config file like this:
|
||||
```json
|
||||
{
|
||||
@ -98,9 +88,7 @@ For example: Turning `cart` off will disable Cart capabilities.
|
||||
|
||||
### How to create a new provider
|
||||
|
||||
🔔 New providers are on hold [until we have a new API for commerce](https://github.com/vercel/commerce/pull/252) 🔔
|
||||
|
||||
Follow our docs for [Adding a new Commerce Provider](framework/commerce/new-provider.md).
|
||||
Follow our docs for [Adding a new Commerce Provider](packages/commerce/new-provider.md).
|
||||
|
||||
If you succeeded building a provider, submit a PR with a valid demo and we'll review it asap.
|
||||
|
||||
@ -110,16 +98,17 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
|
||||
|
||||
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
|
||||
2. Create a new branch `git checkout -b MY_BRANCH_NAME`
|
||||
3. Install the dependencies: `npm i`
|
||||
4. Duplicate `.env.template` and rename it to `.env.local`
|
||||
5. Add proper store values to `.env.local`
|
||||
6. Run `npm run dev` to build and watch for code changes
|
||||
3. Install the dependencies: `yarn`
|
||||
4. Duplicate `site/.env.template` and rename it to `site/.env.local`
|
||||
5. Add proper store values to `site/.env.local`
|
||||
6. Run `cd site` and `yarn dev` to build and watch for code changes
|
||||
7. Run `yarn turbo run build` to check the build after your changes
|
||||
|
||||
## 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.
|
||||
People actively working on this project: @okbel, @lfades, @dominiksipowicz, @gbibeaul.
|
||||
|
||||
## Troubleshoot
|
||||
|
||||
@ -146,7 +135,7 @@ If your project was started with a "Deploy with Vercel" button, you can use Verc
|
||||
2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link`
|
||||
3. Download your environment variables: `vercel env pull .env.local`
|
||||
|
||||
Next, you're free to customize the starter. More updates coming soon. Stay tuned.
|
||||
Next, you're free to customize the starter. More updates coming soon. Stay tuned..
|
||||
|
||||
</details>
|
||||
|
||||
@ -158,3 +147,40 @@ After Email confirmation, Checkout should be manually enabled through BigCommerc
|
||||
<br>
|
||||
BigCommerce team has been notified and they plan to add more details about this subject.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>When run locally I get `Error: Cannot find module '...@vercel/commerce/dist/config'`</summary>
|
||||
|
||||
```bash
|
||||
commerce/site
|
||||
❯ yarn dev
|
||||
yarn run v1.22.17
|
||||
$ next dev
|
||||
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
|
||||
info - Loaded env from /commerce/site/.env.local
|
||||
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
|
||||
Error: Cannot find module '/Users/dom/work/vercel/commerce/node_modules/@vercel/commerce/dist/config.cjs'
|
||||
at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
|
||||
at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
|
||||
at resolveExports (node:internal/modules/cjs/loader:482:14)
|
||||
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
|
||||
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
|
||||
at Function.mod._resolveFilename (/Users/dom/work/vercel/commerce/node_modules/next/dist/build/webpack/require-hook.js:179:28)
|
||||
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
|
||||
at Module.require (node:internal/modules/cjs/loader:1005:19)
|
||||
at require (node:internal/modules/cjs/helpers:102:18)
|
||||
at Object.<anonymous> (/Users/dom/work/vercel/commerce/site/commerce-config.js:9:14) {
|
||||
code: 'MODULE_NOT_FOUND',
|
||||
path: '/Users/dom/work/vercel/commerce/node_modules/@vercel/commerce/package.json'
|
||||
}
|
||||
error Command failed with exit code 1.
|
||||
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
|
||||
```
|
||||
|
||||
The error usually occurs when running yarn dev inside of the `/site/` folder after installing a fresh repository.
|
||||
|
||||
In order to fix this, run `yarn dev` in the monorepo root folder first.
|
||||
|
||||
> Using `yarn dev` from the root is recommended for developing, which will run watch mode on all packages.
|
||||
</details>
|
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.root {
|
||||
@apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
|
||||
|
||||
@screen md {
|
||||
@apply flex text-left;
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import { FC } from 'react'
|
||||
import NextHead from 'next/head'
|
||||
import { DefaultSeo } from 'next-seo'
|
||||
import config from '@config/seo.json'
|
||||
|
||||
const Head: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<DefaultSeo {...config} />
|
||||
<NextHead>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
|
||||
</NextHead>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Head
|
||||
@ -1,64 +0,0 @@
|
||||
import cn from 'classnames'
|
||||
import React from 'react'
|
||||
import s from './Swatch.module.css'
|
||||
import { Check } from '@components/icons'
|
||||
import Button, { ButtonProps } from '@components/ui/Button'
|
||||
import { isDark } from '@lib/colors'
|
||||
interface SwatchProps {
|
||||
active?: boolean
|
||||
children?: any
|
||||
className?: string
|
||||
variant?: 'size' | 'color' | string
|
||||
color?: string
|
||||
label?: string | null
|
||||
}
|
||||
|
||||
const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = React.memo(
|
||||
({
|
||||
active,
|
||||
className,
|
||||
color = '',
|
||||
label = null,
|
||||
variant = 'size',
|
||||
...props
|
||||
}) => {
|
||||
variant = variant?.toLowerCase()
|
||||
|
||||
if (label) {
|
||||
label = label?.toLowerCase()
|
||||
}
|
||||
|
||||
const swatchClassName = cn(
|
||||
s.swatch,
|
||||
{
|
||||
[s.color]: color,
|
||||
[s.active]: active,
|
||||
[s.size]: variant === 'size',
|
||||
[s.dark]: color ? isDark(color) : false,
|
||||
[s.textLabel]: !color && label && label.length > 3,
|
||||
},
|
||||
className
|
||||
)
|
||||
|
||||
return (
|
||||
<Button
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
aria-label={variant && label ? `${variant} ${label}` : 'Variant Swatch'}
|
||||
className={swatchClassName}
|
||||
{...(label && color && { title: label })}
|
||||
style={color ? { backgroundColor: color } : {}}
|
||||
{...props}
|
||||
>
|
||||
{color && active && (
|
||||
<span>
|
||||
<Check />
|
||||
</span>
|
||||
)}
|
||||
{!color ? label : null}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default Swatch
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/checkout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/common'
|
||||
@ -1,5 +0,0 @@
|
||||
import * as Core from '@commerce/types/customer'
|
||||
|
||||
export * from '@commerce/types/customer'
|
||||
|
||||
export type CustomerSchema = Core.CustomerSchema
|
||||
@ -1,8 +0,0 @@
|
||||
import * as Core from '@commerce/types/login'
|
||||
import type { LoginMutationVariables } from '../schema'
|
||||
|
||||
export * from '@commerce/types/login'
|
||||
|
||||
export type LoginOperation = Core.LoginOperation & {
|
||||
variables: LoginMutationVariables
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/logout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/product'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/signup'
|
||||
@ -1,92 +0,0 @@
|
||||
/**
|
||||
* 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 = [
|
||||
'local',
|
||||
'bigcommerce',
|
||||
'saleor',
|
||||
'shopify',
|
||||
'swell',
|
||||
'vendure',
|
||||
'ordercloud',
|
||||
'kibocommerce',
|
||||
'spree',
|
||||
'commercejs',
|
||||
]
|
||||
|
||||
function getProviderName() {
|
||||
return (
|
||||
process.env.COMMERCE_PROVIDER ||
|
||||
(process.env.BIGCOMMERCE_STOREFRONT_API_URL
|
||||
? 'bigcommerce'
|
||||
: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
|
||||
? 'shopify'
|
||||
: process.env.NEXT_PUBLIC_SWELL_STORE_ID
|
||||
? 'swell'
|
||||
: 'local')
|
||||
)
|
||||
}
|
||||
|
||||
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(nextConfig, commerceNextConfig)
|
||||
|
||||
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}/*`]
|
||||
|
||||
// When running for production it may be useful to exclude the other providers
|
||||
// from TS checking
|
||||
if (process.env.VERCEL) {
|
||||
const exclude = tsconfig.exclude.filter(
|
||||
(item) => !item.startsWith('framework/')
|
||||
)
|
||||
|
||||
tsconfig.exclude = PROVIDERS.reduce((exclude, current) => {
|
||||
if (current !== name) exclude.push(`framework/${current}`)
|
||||
return exclude
|
||||
}, exclude)
|
||||
}
|
||||
|
||||
fs.writeFileSync(
|
||||
tsconfigPath,
|
||||
prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
|
||||
)
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
module.exports = { withCommerceConfig, getProviderName }
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/common'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/customer'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/logout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/page'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/signup'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/wishlist'
|
||||
@ -1,42 +0,0 @@
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
import useLogin, { UseLogin } from '@commerce/auth/use-login'
|
||||
|
||||
import { useCallback } from 'react'
|
||||
import { CommerceError } from '@commerce/utils/errors'
|
||||
import type { LoginHook } from '../types/login'
|
||||
import useCustomer from '../customer/use-customer'
|
||||
import useCart from '../cart/use-cart'
|
||||
export default useLogin as UseLogin<typeof handler>
|
||||
|
||||
export const handler: MutationHook<LoginHook> = {
|
||||
fetchOptions: {
|
||||
url: '/api/login',
|
||||
method: 'POST'
|
||||
},
|
||||
async fetcher({ input: { email, password }, options, fetch }) {
|
||||
if (!(email && password)) {
|
||||
throw new CommerceError({
|
||||
message:
|
||||
'An email and password are required to login',
|
||||
})
|
||||
}
|
||||
|
||||
return fetch({
|
||||
...options,
|
||||
body: { email, password },
|
||||
})
|
||||
},
|
||||
useHook: ({ fetch }) => () => {
|
||||
const { revalidate } = useCustomer()
|
||||
const {revalidate: revalidateCart} = useCart()
|
||||
return useCallback(
|
||||
async function login(input) {
|
||||
const data = await fetch({ input })
|
||||
await revalidate()
|
||||
await revalidateCart()
|
||||
return data
|
||||
},
|
||||
[fetch, revalidate, revalidateCart]
|
||||
)
|
||||
},
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { SWRHook } from '@commerce/utils/types'
|
||||
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
|
||||
|
||||
export default useCheckout as UseCheckout<typeof handler>
|
||||
|
||||
export const handler: SWRHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ useData }) =>
|
||||
async (input) => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1,8 +0,0 @@
|
||||
import * as Core from '@commerce/types/login'
|
||||
import type { CustomerUserAuthInfoInput } from '../schema'
|
||||
|
||||
export * from '@commerce/types/login'
|
||||
|
||||
export type LoginOperation = Core.LoginOperation & {
|
||||
variables: CustomerUserAuthInfoInput
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/logout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/signup'
|
||||
@ -1,36 +0,0 @@
|
||||
import { useCallback } from 'react'
|
||||
import type { MutationHook } from '@commerce/utils/types'
|
||||
import { CommerceError } from '@commerce/utils/errors'
|
||||
import useAddItem, { UseAddItem } from '@commerce/wishlist/use-add-item'
|
||||
import type { AddItemHook } from '@commerce/types/wishlist'
|
||||
import useCustomer from '../customer/use-customer'
|
||||
import useWishlist from './use-wishlist'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<AddItemHook> = {
|
||||
fetchOptions: {
|
||||
url: '/api/wishlist',
|
||||
method: 'POST',
|
||||
},
|
||||
useHook: ({ fetch }) => () => {
|
||||
const { data: customer } = useCustomer()
|
||||
const { revalidate } = useWishlist()
|
||||
|
||||
return useCallback(
|
||||
async function addItem(item) {
|
||||
if (!customer) {
|
||||
// A signed customer is required in order to have a wishlist
|
||||
throw new CommerceError({
|
||||
message: 'Signed customer not found',
|
||||
})
|
||||
}
|
||||
// TODO: add validations before doing the fetch
|
||||
const data = await fetch({ input: { item } })
|
||||
await revalidate()
|
||||
return data
|
||||
},
|
||||
[fetch, revalidate, customer]
|
||||
)
|
||||
},
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
import { useCallback } from 'react'
|
||||
import type { MutationHook } from '@commerce/utils/types'
|
||||
import { CommerceError } from '@commerce/utils/errors'
|
||||
import useRemoveItem, {
|
||||
UseRemoveItem,
|
||||
} from '@commerce/wishlist/use-remove-item'
|
||||
import type { RemoveItemHook } from '@commerce/types/wishlist'
|
||||
import useCustomer from '../customer/use-customer'
|
||||
import useWishlist from './use-wishlist'
|
||||
|
||||
export default useRemoveItem as UseRemoveItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<RemoveItemHook> = {
|
||||
fetchOptions: {
|
||||
url: '/api/wishlist',
|
||||
method: 'DELETE',
|
||||
},
|
||||
useHook: ({ fetch }) => ({ wishlist } = {}) => {
|
||||
const { data: customer } = useCustomer()
|
||||
const { revalidate } = useWishlist(wishlist)
|
||||
|
||||
return useCallback(
|
||||
async function removeItem(input) {
|
||||
if (!customer) {
|
||||
// A signed customer is required in order to have a wishlist
|
||||
throw new CommerceError({
|
||||
message: 'Signed customer not found',
|
||||
})
|
||||
}
|
||||
|
||||
const data = await fetch({ input: { itemId: String(input.id) } })
|
||||
await revalidate()
|
||||
return data
|
||||
},
|
||||
[fetch, revalidate, customer]
|
||||
)
|
||||
},
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/checkout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/common'
|
||||
@ -1,5 +0,0 @@
|
||||
import * as Core from '@commerce/types/customer'
|
||||
|
||||
export * from '@commerce/types/customer'
|
||||
|
||||
export type CustomerSchema = Core.CustomerSchema
|
||||
@ -1,8 +0,0 @@
|
||||
import * as Core from '@commerce/types/login'
|
||||
import type { CustomerAccessTokenCreateInput } from '../schema'
|
||||
|
||||
export * from '@commerce/types/login'
|
||||
|
||||
export type LoginOperation = Core.LoginOperation & {
|
||||
variables: CustomerAccessTokenCreateInput
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/logout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/product'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/signup'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/site'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/wishlist'
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1,14 +0,0 @@
|
||||
import { SWRHook } from '@commerce/utils/types'
|
||||
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
|
||||
|
||||
export default useCheckout as UseCheckout<typeof handler>
|
||||
|
||||
export const handler: SWRHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ useData }) =>
|
||||
async (input) => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/cart'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/checkout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/common'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/customer'
|
||||
@ -1,11 +0,0 @@
|
||||
import * as Core from '@commerce/types/login'
|
||||
import { LoginBody, LoginTypes } from '@commerce/types/login'
|
||||
|
||||
export * from '@commerce/types/login'
|
||||
|
||||
export type LoginHook<T extends LoginTypes = LoginTypes> = {
|
||||
data: null
|
||||
actionInput: LoginBody
|
||||
fetcherInput: LoginBody
|
||||
body: T['body']
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/logout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/page'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/product'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/signup'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/site'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/wishlist'
|
||||
@ -1,14 +0,0 @@
|
||||
import { SWRHook } from '@commerce/utils/types'
|
||||
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
|
||||
|
||||
export default useCheckout as UseCheckout<typeof handler>
|
||||
|
||||
export const handler: SWRHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ useData }) =>
|
||||
async (input) => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
|
||||
import { MutationHook } from '@commerce/utils/types'
|
||||
|
||||
export default useAddItem as UseAddItem<typeof handler>
|
||||
|
||||
export const handler: MutationHook<any> = {
|
||||
fetchOptions: {
|
||||
query: '',
|
||||
},
|
||||
async fetcher({ input, options, fetch }) {},
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() =>
|
||||
async () => ({}),
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@commerce/product/use-price'
|
||||
export { default } from '@commerce/product/use-price'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/cart'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/checkout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/common'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/customer'
|
||||
@ -1,12 +0,0 @@
|
||||
import * as Core from '@commerce/types/login'
|
||||
import type { LoginMutationVariables } from '../schema'
|
||||
import { LoginBody, LoginTypes } from '@commerce/types/login'
|
||||
|
||||
export * from '@commerce/types/login'
|
||||
|
||||
export type LoginHook<T extends LoginTypes = LoginTypes> = {
|
||||
data: null
|
||||
actionInput: LoginBody
|
||||
fetcherInput: LoginBody
|
||||
body: T['body']
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/logout'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/page'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/product'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/signup'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/site'
|
||||
@ -1 +0,0 @@
|
||||
export * from '@commerce/types/wishlist'
|
||||
27383
package-lock.json
generated
27383
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
134
package.json
134
package.json
@ -1,128 +1,26 @@
|
||||
{
|
||||
"name": "nextjs-commerce",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "NODE_OPTIONS='--inspect' next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"analyze": "BUNDLE_ANALYZE=both next build",
|
||||
"lint": "next lint",
|
||||
"prettier-fix": "prettier --write .",
|
||||
"find:unused": "npx next-unused",
|
||||
"generate": "graphql-codegen",
|
||||
"generate:shopify": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config framework/shopify/codegen.json",
|
||||
"generate:vendure": "graphql-codegen --config framework/vendure/codegen.json",
|
||||
"generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js",
|
||||
"generate:kibocommerce": "graphql-codegen --config framework/kibocommerce/codegen.json"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"name": "commerce",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.x"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chec/commerce.js": "^2.8.0",
|
||||
"@react-spring/web": "^9.2.1",
|
||||
"@spree/storefront-api-v2-sdk": "^5.0.1",
|
||||
"@vercel/fetch": "^6.1.1",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"body-scroll-lock": "^3.1.5",
|
||||
"classnames": "^2.3.1",
|
||||
"cookie": "^0.4.1",
|
||||
"email-validator": "^2.0.4",
|
||||
"immutability-helper": "^3.1.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"keen-slider": "^6.3.2",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.random": "^3.2.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"next": "^12.0.3",
|
||||
"next-seo": "^4.26.0",
|
||||
"next-themes": "^0.0.14",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-nesting": "^8.0.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-fast-marquee": "^1.1.4",
|
||||
"react-merge-refs": "^1.1.0",
|
||||
"react-use-measure": "^2.0.4",
|
||||
"stripe": "^8.176.0",
|
||||
"swell-js": "^4.0.0-next.0",
|
||||
"swr": "^0.5.6",
|
||||
"tabbable": "^5.2.0",
|
||||
"tailwindcss": "^2.2.2",
|
||||
"uuidv4": "^6.2.10"
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"site",
|
||||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "turbo run build --scope=next-commerce --include-dependencies --no-deps",
|
||||
"dev": "turbo run dev",
|
||||
"start": "turbo run start",
|
||||
"prettier-fix": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "^1.21.5",
|
||||
"@graphql-codegen/schema-ast": "^1.18.3",
|
||||
"@graphql-codegen/typescript": "^1.22.2",
|
||||
"@graphql-codegen/typescript-operations": "^1.18.1",
|
||||
"@next/bundle-analyzer": "^10.2.3",
|
||||
"@types/body-scroll-lock": "^2.6.1",
|
||||
"@types/chec__commerce.js": "^2.8.4",
|
||||
"@types/cookie": "^0.4.0",
|
||||
"@types/js-cookie": "^2.2.6",
|
||||
"@types/lodash.debounce": "^4.0.6",
|
||||
"@types/lodash.random": "^3.2.6",
|
||||
"@types/lodash.throttle": "^4.1.6",
|
||||
"@types/node": "^15.12.4",
|
||||
"@types/react": "^17.0.8",
|
||||
"deepmerge": "^4.2.2",
|
||||
"eslint": "^7.31.0",
|
||||
"eslint-config-next": "^11.0.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"graphql": "^15.5.1",
|
||||
"husky": "^6.0.0",
|
||||
"lint-staged": "^11.0.0",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"prettier": "^2.3.0",
|
||||
"typescript": "4.3.4"
|
||||
"husky": "^7.0.4",
|
||||
"prettier": "^2.5.1",
|
||||
"turbo": "^1.1.2"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
"pre-commit": "turbo run lint"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*.{js,jsx,ts,tsx}": [
|
||||
"eslint",
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"**/*.{md,mdx,json}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"next-unused": {
|
||||
"alias": {
|
||||
"@lib/*": [
|
||||
"lib/*"
|
||||
],
|
||||
"@assets/*": [
|
||||
"assets/*"
|
||||
],
|
||||
"@config/*": [
|
||||
"config/*"
|
||||
],
|
||||
"@components/*": [
|
||||
"components/*"
|
||||
],
|
||||
"@utils/*": [
|
||||
"utils/*"
|
||||
]
|
||||
},
|
||||
"debug": true,
|
||||
"include": [
|
||||
"components",
|
||||
"lib",
|
||||
"pages"
|
||||
],
|
||||
"exclude": [],
|
||||
"entrypoints": [
|
||||
"pages"
|
||||
]
|
||||
}
|
||||
"packageManager": "yarn@1.22.17"
|
||||
}
|
||||
|
||||
2
packages/bigcommerce/.prettierignore
Normal file
2
packages/bigcommerce/.prettierignore
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
6
packages/bigcommerce/.prettierrc
Normal file
6
packages/bigcommerce/.prettierrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
}
|
||||
@ -9,7 +9,7 @@ With the deploy button below you'll be able to have a [BigCommerce](https://www.
|
||||
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):
|
||||
|
||||
```bash
|
||||
cp framework/bigcommerce/.env.template .env.local
|
||||
cp packages/bigcommerce/.env.template .env.local
|
||||
```
|
||||
|
||||
Then, set the environment variables in `.env.local` to match the ones from your store.
|
||||
@ -8,16 +8,16 @@
|
||||
},
|
||||
"documents": [
|
||||
{
|
||||
"./framework/bigcommerce/api/**/*.ts": {
|
||||
"./src/api/**/*.ts": {
|
||||
"noRequire": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"generates": {
|
||||
"./framework/bigcommerce/schema.d.ts": {
|
||||
"./schema.d.ts": {
|
||||
"plugins": ["typescript", "typescript-operations"]
|
||||
},
|
||||
"./framework/bigcommerce/schema.graphql": {
|
||||
"./schema.graphql": {
|
||||
"plugins": ["schema-ast"]
|
||||
}
|
||||
},
|
||||
86
packages/bigcommerce/package.json
Normal file
86
packages/bigcommerce/package.json
Normal file
@ -0,0 +1,86 @@
|
||||
{
|
||||
"name": "@vercel/commerce-bigcommerce",
|
||||
"version": "0.0.1",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"release": "taskr release",
|
||||
"build": "taskr build",
|
||||
"dev": "taskr",
|
||||
"types": "tsc --emitDeclarationOnly",
|
||||
"generate:definitions": "node scripts/generate-definitions.js"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./dist/index.js",
|
||||
"./*": [
|
||||
"./dist/*.js",
|
||||
"./dist/*/index.js"
|
||||
],
|
||||
"./next.config": "./dist/next.config.cjs"
|
||||
},
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"src/*",
|
||||
"src/*/index"
|
||||
],
|
||||
"next.config": [
|
||||
"dist/next.config.d.cts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/*.d.ts",
|
||||
"dist/*/index.d.ts"
|
||||
],
|
||||
"config": [
|
||||
"dist/next.config.d.cts"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@vercel/fetch": "^6.1.1",
|
||||
"cookie": "^0.4.1",
|
||||
"immutability-helper": "^3.1.1",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"uuidv4": "^6.2.12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"next": "^12",
|
||||
"react": "^17",
|
||||
"react-dom": "^17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@taskr/clear": "^1.1.0",
|
||||
"@taskr/esnext": "^1.1.0",
|
||||
"@taskr/watch": "^1.1.0",
|
||||
"@types/cookie": "^0.4.1",
|
||||
"@types/jsonwebtoken": "^8.5.7",
|
||||
"@types/lodash.debounce": "^4.0.6",
|
||||
"@types/node": "^17.0.8",
|
||||
"@types/react": "^17.0.38",
|
||||
"lint-staged": "^12.1.7",
|
||||
"next": "^12.0.8",
|
||||
"prettier": "^2.5.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"taskr": "^1.1.0",
|
||||
"taskr-swc": "^0.0.1",
|
||||
"typescript": "^4.5.4"
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*.{js,jsx,ts,tsx,json}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { GetAPISchema, createEndpoint } from '@commerce/api'
|
||||
import cartEndpoint from '@commerce/api/endpoints/cart'
|
||||
import { GetAPISchema, createEndpoint } from '@vercel/commerce/api'
|
||||
import cartEndpoint from '@vercel/commerce/api/endpoints/cart'
|
||||
import type { CartSchema } from '../../../types/cart'
|
||||
import type { BigcommerceAPI } from '../..'
|
||||
import getCart from './get-cart'
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user