+
+export function CoreCommerceProvider({
provider,
children,
- config,
}: CommerceProps
) {
- if (!config) {
- throw new Error('CommerceProvider requires a valid config object')
- }
-
const providerRef = useRef(provider)
// TODO: Remove the fetcherRef
const fetcherRef = useRef(provider.fetcher)
- // Because the config is an object, if the parent re-renders this provider
- // will re-render every consumer unless we memoize the config
+ // If the parent re-renders this provider will re-render every
+ // consumer unless we memoize the config
+ const { locale, cartCookie } = providerRef.current
const cfg = useMemo(
- () => ({
- providerRef,
- fetcherRef,
- locale: config.locale,
- cartCookie: config.cartCookie,
- }),
- [config.locale, config.cartCookie]
+ () => ({ providerRef, fetcherRef, locale, cartCookie }),
+ [locale, cartCookie]
)
return {children}
}
+export function getCommerceProvider
(provider: P) {
+ return function CommerceProvider({
+ children,
+ ...props
+ }: CommerceProviderProps) {
+ return (
+
+ {children}
+
+ )
+ }
+}
+
export function useCommerce
() {
return useContext(Commerce) as CommerceContextValue
}
diff --git a/framework/commerce/new-provider.md b/framework/commerce/new-provider.md
index 8c2feeab2..6e149a7d4 100644
--- a/framework/commerce/new-provider.md
+++ b/framework/commerce/new-provider.md
@@ -47,6 +47,12 @@ The app imports from the provider directly instead of the core commerce folder (
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.
+## Updating the list of known providers
+
+Open [./config.js](./config.js) and add the provider name to the list in `PROVIDERS`.
+
+Then, open [/.env.template](/.env.template) and add the provider name in the first line.
+
## 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:
diff --git a/framework/commerce/types/checkout.ts b/framework/commerce/types/checkout.ts
index 9e3c7ecfa..ea28926a8 100644
--- a/framework/commerce/types/checkout.ts
+++ b/framework/commerce/types/checkout.ts
@@ -1,10 +1,57 @@
-export type CheckoutSchema = {
+import type { UseSubmitCheckout } from '../checkout/use-submit-checkout'
+import type { Address } from './customer/address'
+import type { Card } from './customer/card'
+
+// Index
+export type Checkout = unknown;
+
+export type CheckoutTypes = {
+ card?: Card
+ address?: Address
+ checkout?: Checkout
+ hasPayment?: boolean
+ hasShipping?: boolean
+}
+
+export type SubmitCheckoutHook = {
+ data: T
+ input?: T
+ fetcherInput: T
+ body: { item: T }
+ actionInput: T
+}
+
+export type GetCheckoutHook = {
+ data: T['checkout'] | null
+ input: {}
+ fetcherInput: { cartId?: string }
+ swrState: { isEmpty: boolean }
+ mutations: { submit: UseSubmitCheckout }
+}
+
+export type CheckoutHooks = {
+ submitCheckout: SubmitCheckoutHook
+ getCheckout: GetCheckoutHook
+}
+
+export type GetCheckoutHandler =
+ GetCheckoutHook & {
+ body: { cartId: string }
+ }
+
+export type SubmitCheckoutHandler =
+ SubmitCheckoutHook & {
+ body: { cartId: string }
+ }
+
+export type CheckoutHandlers = {
+ getCheckout?: GetCheckoutHandler
+ submitCheckout: SubmitCheckoutHandler
+}
+
+export type CheckoutSchema = {
endpoint: {
options: {}
- handlers: {
- checkout: {
- data: null
- }
- }
+ handlers: CheckoutHandlers
}
}
diff --git a/framework/commerce/types/customer/address.ts b/framework/commerce/types/customer/address.ts
new file mode 100644
index 000000000..5b6ca4b49
--- /dev/null
+++ b/framework/commerce/types/customer/address.ts
@@ -0,0 +1,93 @@
+export interface Address {
+ id: string;
+ mask: string;
+}
+
+export interface AddressFields {
+ type: string;
+ firstName: string;
+ lastName: string;
+ company: string;
+ streetNumber: string;
+ apartments: string;
+ zipCode: string;
+ city: string;
+ country: string;
+}
+
+export type CustomerAddressTypes = {
+ address?: Address;
+ fields: AddressFields;
+}
+
+export type GetAddressesHook = {
+ data: T['address'] | null
+ input: {}
+ fetcherInput: { cartId?: string }
+ swrState: { isEmpty: boolean }
+}
+
+export type AddItemHook = {
+ data: T['address']
+ input?: T['fields']
+ fetcherInput: T['fields']
+ body: { item: T['fields'] }
+ actionInput: T['fields']
+}
+
+export type UpdateItemHook = {
+ data: T['address'] | null
+ input: { item?: T['fields']; wait?: number }
+ fetcherInput: { itemId: string; item: T['fields'] }
+ body: { itemId: string; item: T['fields'] }
+ actionInput: T['fields'] & { id: string }
+}
+
+export type RemoveItemHook = {
+ data: T['address'] | null
+ input: { item?: T['fields'] }
+ fetcherInput: { itemId: string }
+ body: { itemId: string }
+ actionInput: { id: string }
+}
+
+export type CustomerAddressHooks = {
+ getAddresses: GetAddressesHook
+ addItem: AddItemHook
+ updateItem: UpdateItemHook
+ removeItem: RemoveItemHook
+}
+
+export type AddresssHandler = GetAddressesHook & {
+ body: { cartId?: string }
+}
+
+export type AddItemHandler = AddItemHook & {
+ body: { cartId: string }
+}
+
+export type UpdateItemHandler =
+ UpdateItemHook & {
+ data: T['address']
+ body: { cartId: string }
+ }
+
+export type RemoveItemHandler =
+ RemoveItemHook & {
+ body: { cartId: string }
+ }
+
+
+export type CustomerAddressHandlers = {
+ getAddresses: GetAddressesHook
+ addItem: AddItemHandler
+ updateItem: UpdateItemHandler
+ removeItem: RemoveItemHandler
+}
+
+export type CustomerAddressSchema = {
+ endpoint: {
+ options: {}
+ handlers: CustomerAddressHandlers
+ }
+}
diff --git a/framework/commerce/types/customer/card.ts b/framework/commerce/types/customer/card.ts
new file mode 100644
index 000000000..a8731411f
--- /dev/null
+++ b/framework/commerce/types/customer/card.ts
@@ -0,0 +1,96 @@
+export interface Card {
+ id: string;
+ mask: string;
+ provider: string;
+}
+
+export interface CardFields {
+ cardHolder: string;
+ cardNumber: string;
+ cardExpireDate: string;
+ cardCvc: string;
+ firstName: string;
+ lastName: string;
+ company: string;
+ streetNumber: string;
+ zipCode: string;
+ city: string;
+ country: string;
+}
+
+export type CustomerCardTypes = {
+ card?: Card;
+ fields: CardFields;
+}
+
+export type GetCardsHook = {
+ data: T['card'] | null
+ input: {}
+ fetcherInput: { cartId?: string }
+ swrState: { isEmpty: boolean }
+}
+
+export type AddItemHook = {
+ data: T['card']
+ input?: T['fields']
+ fetcherInput: T['fields']
+ body: { item: T['fields'] }
+ actionInput: T['fields']
+}
+
+export type UpdateItemHook = {
+ data: T['card'] | null
+ input: { item?: T['fields']; wait?: number }
+ fetcherInput: { itemId: string; item: T['fields'] }
+ body: { itemId: string; item: T['fields'] }
+ actionInput: T['fields'] & { id: string }
+}
+
+export type RemoveItemHook = {
+ data: T['card'] | null
+ input: { item?: T['fields'] }
+ fetcherInput: { itemId: string }
+ body: { itemId: string }
+ actionInput: { id: string }
+}
+
+export type CustomerCardHooks = {
+ getCards: GetCardsHook
+ addItem: AddItemHook
+ updateItem: UpdateItemHook
+ removeItem: RemoveItemHook
+}
+
+export type CardsHandler = GetCardsHook & {
+ body: { cartId?: string }
+}
+
+export type AddItemHandler = AddItemHook & {
+ body: { cartId: string }
+}
+
+export type UpdateItemHandler =
+ UpdateItemHook & {
+ data: T['card']
+ body: { cartId: string }
+ }
+
+export type RemoveItemHandler =
+ RemoveItemHook & {
+ body: { cartId: string }
+ }
+
+
+export type CustomerCardHandlers = {
+ getCards: GetCardsHook
+ addItem: AddItemHandler
+ updateItem: UpdateItemHandler
+ removeItem: RemoveItemHandler
+}
+
+export type CustomerCardSchema = {
+ endpoint: {
+ options: {}
+ handlers: CustomerCardHandlers
+ }
+}
diff --git a/framework/commerce/types/customer.ts b/framework/commerce/types/customer/index.ts
similarity index 87%
rename from framework/commerce/types/customer.ts
rename to framework/commerce/types/customer/index.ts
index ba90acdf4..70c437c29 100644
--- a/framework/commerce/types/customer.ts
+++ b/framework/commerce/types/customer/index.ts
@@ -1,3 +1,6 @@
+export * as Card from "./card"
+export * as Address from "./address"
+
// TODO: define this type
export type Customer = any
diff --git a/framework/commerce/utils/types.ts b/framework/commerce/utils/types.ts
index 751cea4a5..2bca30852 100644
--- a/framework/commerce/utils/types.ts
+++ b/framework/commerce/utils/types.ts
@@ -87,6 +87,8 @@ export type HookSchemaBase = {
export type SWRHookSchemaBase = HookSchemaBase & {
// Custom state added to the response object of SWR
swrState?: {}
+ // Instances of MutationSchemaBase that the hook returns for better DX
+ mutations?: Record['useHook']>>
}
export type MutationSchemaBase = HookSchemaBase & {
@@ -102,7 +104,7 @@ export type SWRHook = {
context: SWRHookContext
): HookFunction<
H['input'] & { swrOptions?: SwrOptions },
- ResponseState & H['swrState']
+ ResponseState & H['swrState'] & H['mutations']
>
fetchOptions: HookFetcherOptions
fetcher?: HookFetcherFn
diff --git a/framework/local/api/endpoints/customer/address.ts b/framework/local/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/local/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/local/api/endpoints/customer/card.ts b/framework/local/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/local/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/local/checkout/use-checkout.tsx b/framework/local/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/local/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout
+
+export const handler: SWRHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ useData }) =>
+ async (input) => ({}),
+}
diff --git a/framework/local/customer/address/use-add-item.tsx b/framework/local/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/local/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem
+
+export const handler: MutationHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ fetch }) =>
+ () =>
+ async () => ({}),
+}
diff --git a/framework/local/customer/card/use-add-item.tsx b/framework/local/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/local/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem
+
+export const handler: MutationHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ fetch }) =>
+ () =>
+ async () => ({}),
+}
diff --git a/framework/local/index.tsx b/framework/local/index.tsx
index 2ec304f63..dcc713e69 100644
--- a/framework/local/index.tsx
+++ b/framework/local/index.tsx
@@ -1,32 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-import { localProvider } from './provider'
-import {
- CommerceConfig,
- CommerceProvider as CoreCommerceProvider,
- useCommerce as useCoreCommerce,
-} from '@commerce'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { localProvider, LocalProvider } from './provider'
-export const localConfig: CommerceConfig = {
- locale: 'en-us',
- cartCookie: 'session',
-}
+export { localProvider }
+export type { LocalProvider }
-export function CommerceProvider({
- children,
- ...config
-}: {
- children?: ReactNode
- locale: string
-} & Partial) {
- return (
-
- {children}
-
- )
-}
+export const CommerceProvider = getCommerceProvider(localProvider)
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce()
diff --git a/framework/local/provider.ts b/framework/local/provider.ts
index e6a2b0a21..53dc7f574 100644
--- a/framework/local/provider.ts
+++ b/framework/local/provider.ts
@@ -9,7 +9,6 @@ import { handler as useLogin } from './auth/use-login'
import { handler as useLogout } from './auth/use-logout'
import { handler as useSignup } from './auth/use-signup'
-export type Provider = typeof localProvider
export const localProvider = {
locale: 'en-us',
cartCookie: 'session',
@@ -19,3 +18,5 @@ export const localProvider = {
products: { useSearch },
auth: { useLogin, useLogout, useSignup },
}
+
+export type LocalProvider = typeof localProvider
diff --git a/framework/saleor/README.md b/framework/saleor/README.md
index 1684ff6bc..00af272b0 100644
--- a/framework/saleor/README.md
+++ b/framework/saleor/README.md
@@ -1,19 +1,22 @@
## Saleor Provider
-**Demo:** TBD
+**Demo:** https://saleor.vercel.store/
-Before getting starter, a [Saleor](https://saleor.io/) account and store is required before using the provider.
+You need a [Saleor](https://saleor.io/) instance, either in the cloud or self-hosted.
-Next, copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):
+This provider requires Saleor **3.x** or higher.
+
+Copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):
```bash
cp framework/saleor/.env.template .env.local
```
-Then, set the environment variables in `.env.local` to match the ones from your store.
+Then, set the environment following variables in your `.env.local`. Both, `NEXT_PUBLIC_SALEOR_API_URL` and `COMMERCE_IMAGE_HOST` must point to your own Saleor instance.
-## 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).
+```
+COMMERCE_PROVIDER=saleor
+NEXT_PUBLIC_SALEOR_API_URL=https://vercel.saleor.cloud/graphql/
+NEXT_PUBLIC_SALEOR_CHANNEL=default-channel
+COMMERCE_IMAGE_HOST=vercel.saleor.cloud
+```
diff --git a/framework/saleor/api/endpoints/checkout/index.ts b/framework/saleor/api/endpoints/checkout/index.ts
index f15672435..385283ea7 100644
--- a/framework/saleor/api/endpoints/checkout/index.ts
+++ b/framework/saleor/api/endpoints/checkout/index.ts
@@ -6,11 +6,7 @@ export type CheckoutAPI = GetAPISchema
export type CheckoutEndpoint = CheckoutAPI['endpoint']
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
- req,
- res,
- config,
-}) => {
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({ req, res, config }) => {
try {
const html = `
@@ -47,7 +43,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
}
}
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
const checkoutApi = createEndpoint({
handler: checkoutEndpoint,
diff --git a/framework/saleor/api/endpoints/customer.ts b/framework/saleor/api/endpoints/customer.ts
deleted file mode 100644
index d09c976c3..000000000
--- a/framework/saleor/api/endpoints/customer.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function (_commerce: any) {}
diff --git a/framework/saleor/api/endpoints/customer/address.ts b/framework/saleor/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/saleor/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/saleor/api/endpoints/customer/card.ts b/framework/saleor/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/saleor/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/saleor/api/endpoints/customer/index.ts b/framework/saleor/api/endpoints/customer/index.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/saleor/api/endpoints/customer/index.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/saleor/api/index.ts b/framework/saleor/api/index.ts
index 5ae5f3a8a..074607666 100644
--- a/framework/saleor/api/index.ts
+++ b/framework/saleor/api/index.ts
@@ -1,5 +1,5 @@
-import type { CommerceAPIConfig } from '@commerce/api'
-
+import { CommerceAPI, CommerceAPIConfig, getCommerceApi as commerceApi } from '@commerce/api'
+import * as operations from './operations'
import * as Const from '../const'
if (!Const.API_URL) {
@@ -27,23 +27,12 @@ const config: SaleorConfig = {
storeChannel: Const.API_CHANNEL,
}
-import {
- CommerceAPI,
- getCommerceApi as commerceApi,
-} from '@commerce/api'
-
-import * as operations from './operations'
-
-export interface ShopifyConfig extends CommerceAPIConfig {}
-
export const provider = { config, operations }
export type Provider = typeof provider
export type SaleorAPI = CommerceAPI
-export function getCommerceApi
(
- customProvider: P = provider as any
-): SaleorAPI
{
+export function getCommerceApi
(customProvider: P = provider as any): SaleorAPI
{
return commerceApi(customProvider)
}
diff --git a/framework/saleor/api/operations/get-all-product-paths.ts b/framework/saleor/api/operations/get-all-product-paths.ts
index 43ce7de94..c04964147 100644
--- a/framework/saleor/api/operations/get-all-product-paths.ts
+++ b/framework/saleor/api/operations/get-all-product-paths.ts
@@ -1,10 +1,6 @@
import type { OperationContext } from '@commerce/api/operations'
-import {
- GetAllProductPathsQuery,
- GetAllProductPathsQueryVariables,
- ProductCountableEdge,
-} from '../../schema'
-import type { ShopifyConfig, Provider, SaleorConfig } from '..'
+import { ProductCountableEdge } from '../../schema'
+import type { Provider, SaleorConfig } from '..'
import { getAllProductsPathsQuery } from '../../utils/queries'
import fetchAllProducts from '../utils/fetch-all-products'
@@ -13,10 +9,7 @@ export type GetAllProductPathsResult = {
products: Array<{ path: string }>
}
-export default function getAllProductPathsOperation({
- commerce,
-}: OperationContext) {
-
+export default function getAllProductPathsOperation({ commerce }: OperationContext) {
async function getAllProductPaths({
query,
config,
@@ -24,7 +17,7 @@ export default function getAllProductPathsOperation({
}: {
query?: string
config?: SaleorConfig
- variables?: any
+ variables?: any
} = {}): Promise {
config = commerce.getConfig(config)
@@ -39,7 +32,6 @@ export default function getAllProductPathsOperation({
path: `/${slug}`,
})),
}
-
}
return getAllProductPaths
diff --git a/framework/saleor/checkout/use-checkout.tsx b/framework/saleor/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/saleor/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout
+
+export const handler: SWRHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ useData }) =>
+ async (input) => ({}),
+}
diff --git a/framework/saleor/customer/address/use-add-item.tsx b/framework/saleor/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/saleor/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem
+
+export const handler: MutationHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ fetch }) =>
+ () =>
+ async () => ({}),
+}
diff --git a/framework/saleor/customer/card/use-add-item.tsx b/framework/saleor/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/saleor/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem
+
+export const handler: MutationHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ fetch }) =>
+ () =>
+ async () => ({}),
+}
diff --git a/framework/saleor/index.tsx b/framework/saleor/index.tsx
index 5c9e61ec8..0fa217943 100644
--- a/framework/saleor/index.tsx
+++ b/framework/saleor/index.tsx
@@ -1,32 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-
-import { CommerceConfig, CommerceProvider as CoreCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
import { saleorProvider, SaleorProvider } from './provider'
-import * as Const from './const'
export { saleorProvider }
export type { SaleorProvider }
-export const saleorConfig: CommerceConfig = {
- locale: 'en-us',
- cartCookie: Const.CHECKOUT_ID_COOKIE,
-}
+export const CommerceProvider = getCommerceProvider(saleorProvider)
-export type SaleorConfig = Partial
-
-export type SaleorProps = {
- children?: ReactNode
- locale: string
-} & SaleorConfig
-
-export function CommerceProvider({ children, ...config }: SaleorProps) {
- return (
-
- {children}
-
- )
-}
-
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce()
diff --git a/framework/saleor/provider.ts b/framework/saleor/provider.ts
index 2ca96475a..becf2998f 100644
--- a/framework/saleor/provider.ts
+++ b/framework/saleor/provider.ts
@@ -1,3 +1,4 @@
+import { CHECKOUT_ID_COOKIE } from './const'
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'
@@ -14,8 +15,7 @@ import fetcher from './fetcher'
export const saleorProvider = {
locale: 'en-us',
- cartCookie: '',
- cartCookieToken: '',
+ cartCookie: CHECKOUT_ID_COOKIE,
fetcher,
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
customer: { useCustomer },
diff --git a/framework/shopify/api/endpoints/checkout/index.ts b/framework/shopify/api/endpoints/checkout/index.ts
index 5d78f451b..72b86cae2 100644
--- a/framework/shopify/api/endpoints/checkout/index.ts
+++ b/framework/shopify/api/endpoints/checkout/index.ts
@@ -2,13 +2,13 @@ import { GetAPISchema, createEndpoint } from '@commerce/api'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
import type { CheckoutSchema } from '../../../types/checkout'
import type { ShopifyAPI } from '../..'
-import checkout from './checkout'
+import submitCheckout from './submit-checkout'
export type CheckoutAPI = GetAPISchema
export type CheckoutEndpoint = CheckoutAPI['endpoint']
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
const checkoutApi = createEndpoint({
handler: checkoutEndpoint,
diff --git a/framework/shopify/api/endpoints/checkout/checkout.ts b/framework/shopify/api/endpoints/checkout/submit-checkout.ts
similarity index 88%
rename from framework/shopify/api/endpoints/checkout/checkout.ts
rename to framework/shopify/api/endpoints/checkout/submit-checkout.ts
index 0c340a129..97ac77381 100644
--- a/framework/shopify/api/endpoints/checkout/checkout.ts
+++ b/framework/shopify/api/endpoints/checkout/submit-checkout.ts
@@ -6,7 +6,7 @@ import {
import associateCustomerWithCheckoutMutation from '../../../utils/mutations/associate-customer-with-checkout'
import type { CheckoutEndpoint } from '.'
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
req,
res,
config,
@@ -35,4 +35,4 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
}
}
-export default checkout
+export default submitCheckout
diff --git a/framework/shopify/api/endpoints/customer.ts b/framework/shopify/api/endpoints/customer.ts
deleted file mode 100644
index d09c976c3..000000000
--- a/framework/shopify/api/endpoints/customer.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function (_commerce: any) {}
diff --git a/framework/shopify/api/endpoints/customer/address.ts b/framework/shopify/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/shopify/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/shopify/api/endpoints/customer/card.ts b/framework/shopify/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/shopify/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/shopify/api/endpoints/customer/index.ts b/framework/shopify/api/endpoints/customer/index.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/shopify/api/endpoints/customer/index.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/shopify/auth/use-login.tsx b/framework/shopify/auth/use-login.tsx
index d4369b7c2..e1de89c99 100644
--- a/framework/shopify/auth/use-login.tsx
+++ b/framework/shopify/auth/use-login.tsx
@@ -22,7 +22,7 @@ export const handler: MutationHook = {
if (!(email && password)) {
throw new CommerceError({
message:
- 'A first name, last name, email and password are required to login',
+ 'An email and password are required to login',
})
}
diff --git a/framework/shopify/checkout/use-checkout.tsx b/framework/shopify/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/shopify/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout
+
+export const handler: SWRHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ useData }) =>
+ async (input) => ({}),
+}
diff --git a/framework/shopify/codegen.json b/framework/shopify/codegen.json
index f0a757142..9d7dcf8a9 100644
--- a/framework/shopify/codegen.json
+++ b/framework/shopify/codegen.json
@@ -1,6 +1,6 @@
{
"schema": {
- "https://${NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN}/api/2021-01/graphql.json": {
+ "https://${NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN}/api/2021-07/graphql.json": {
"headers": {
"X-Shopify-Storefront-Access-Token": "${NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN}"
}
diff --git a/framework/shopify/customer/address/use-add-item.tsx b/framework/shopify/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/shopify/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem
+
+export const handler: MutationHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ fetch }) =>
+ () =>
+ async () => ({}),
+}
diff --git a/framework/shopify/customer/card/use-add-item.tsx b/framework/shopify/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/shopify/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem
+
+export const handler: MutationHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ fetch }) =>
+ () =>
+ async () => ({}),
+}
diff --git a/framework/shopify/index.tsx b/framework/shopify/index.tsx
index 46ed106c5..6a8c6aa8b 100644
--- a/framework/shopify/index.tsx
+++ b/framework/shopify/index.tsx
@@ -1,40 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-
-import {
- CommerceConfig,
- CommerceProvider as CoreCommerceProvider,
- useCommerce as useCoreCommerce,
-} from '@commerce'
-
-import { shopifyProvider } from './provider'
-import type { ShopifyProvider } from './provider'
-import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { shopifyProvider, ShopifyProvider } from './provider'
export { shopifyProvider }
export type { ShopifyProvider }
-export const shopifyConfig: CommerceConfig = {
- locale: 'en-us',
- cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
-}
-
-export type ShopifyConfig = Partial
-
-export type ShopifyProps = {
- children?: ReactNode
- locale: string
-} & ShopifyConfig
-
-export function CommerceProvider({ children, ...config }: ShopifyProps) {
- return (
-
- {children}
-
- )
-}
+export const CommerceProvider = getCommerceProvider(shopifyProvider)
export const useCommerce = () => useCoreCommerce()
diff --git a/framework/swell/api/endpoints/checkout/index.ts b/framework/swell/api/endpoints/checkout/index.ts
index ab17a3767..9847d8420 100644
--- a/framework/swell/api/endpoints/checkout/index.ts
+++ b/framework/swell/api/endpoints/checkout/index.ts
@@ -3,7 +3,7 @@ import { CheckoutSchema } from '@commerce/types/checkout'
import { SWELL_CHECKOUT_URL_COOKIE } from '../../../const'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
req,
res,
config,
@@ -17,7 +17,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
res.redirect('/cart')
}
}
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
export type CheckoutAPI = GetAPISchema
export type CheckoutEndpoint = CheckoutAPI['endpoint']
diff --git a/framework/swell/api/endpoints/customer.ts b/framework/swell/api/endpoints/customer.ts
deleted file mode 100644
index d09c976c3..000000000
--- a/framework/swell/api/endpoints/customer.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function (_commerce: any) {}
diff --git a/framework/swell/api/endpoints/customer/address.ts b/framework/swell/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/swell/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/swell/api/endpoints/customer/card.ts b/framework/swell/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/swell/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/swell/api/endpoints/customer/index.ts b/framework/swell/api/endpoints/customer/index.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/swell/api/endpoints/customer/index.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/swell/api/utils/fetch-swell-api.ts b/framework/swell/api/utils/fetch-swell-api.ts
index 65caed763..83055c5c0 100644
--- a/framework/swell/api/utils/fetch-swell-api.ts
+++ b/framework/swell/api/utils/fetch-swell-api.ts
@@ -1,7 +1,7 @@
-import { swellConfig } from '../..'
+import swell from '../../swell'
const fetchApi = async (query: string, method: string, variables: [] = []) => {
- const { swell } = swellConfig
return swell[query][method](...variables)
}
+
export default fetchApi
diff --git a/framework/swell/checkout/use-checkout.tsx b/framework/swell/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/swell/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout
+
+export const handler: SWRHook = {
+ fetchOptions: {
+ query: '',
+ },
+ async fetcher({ input, options, fetch }) {},
+ useHook:
+ ({ useData }) =>
+ async (input) => ({}),
+}
diff --git a/framework/swell/const.ts b/framework/swell/const.ts
index 669194298..16d493896 100644
--- a/framework/swell/const.ts
+++ b/framework/swell/const.ts
@@ -4,8 +4,6 @@ export const SWELL_CHECKOUT_URL_COOKIE = 'swell_checkoutUrl'
export const SWELL_CUSTOMER_TOKEN_COOKIE = 'swell_customerToken'
-export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SWELL_STORE_DOMAIN
-
export const SWELL_COOKIE_EXPIRE = 30
export const SWELL_STORE_ID = process.env.NEXT_PUBLIC_SWELL_STORE_ID
diff --git a/framework/swell/customer/address/use-add-item.tsx b/framework/swell/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/swell/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem