From 0c2c7343c3163734b2258c33b7cd1842f6882690 Mon Sep 17 00:00:00 2001
From: cond0r <pinte_catalin@yahoo.com>
Date: Thu, 11 Mar 2021 08:56:24 +0200
Subject: [PATCH] Fixed types
---
commerce.config.json | 4 +-
components/product/helpers.ts | 20 ++---
framework/shopify/cart/use-cart.tsx | 2 +-
framework/shopify/fetcher.ts | 9 +-
framework/shopify/index.tsx | 3 +-
framework/shopify/provider.ts | 3 +-
framework/shopify/types.ts | 6 +-
framework/shopify/utils/storage.ts | 13 ---
framework/shopify/wishlist/use-add-item.tsx | 39 ++-------
.../shopify/wishlist/use-remove-item.tsx | 47 +++-------
framework/shopify/wishlist/use-wishlist.tsx | 87 +++++++++----------
pages/[...pages].tsx | 3 +-
pages/customer/activate.tsx | 26 ------
tsconfig.json | 4 +-
14 files changed, 90 insertions(+), 176 deletions(-)
delete mode 100644 framework/shopify/utils/storage.ts
delete mode 100644 pages/customer/activate.tsx
diff --git a/commerce.config.json b/commerce.config.json
index bef7db222..e8418f296 100644
--- a/commerce.config.json
+++ b/commerce.config.json
@@ -1,7 +1,7 @@
{
- "provider": "bigcommerce",
+ "provider": "shopify",
"features": {
- "wishlist": true,
+ "wishlist": false,
"customCheckout": false
}
}
diff --git a/components/product/helpers.ts b/components/product/helpers.ts
index f8ab538ba..a0ceb7aa5 100644
--- a/components/product/helpers.ts
+++ b/components/product/helpers.ts
@@ -4,18 +4,14 @@ export type SelectedOptions = Record<string, string | null>
export function getVariant(product: Product, opts: SelectedOptions) {
const variant = product.variants.find((variant) => {
return Object.entries(opts).every(([key, value]) =>
- value
- ? variant.options.find((option) => {
- if (
- option.__typename === 'MultipleChoiceOption' &&
- option.displayName.toLowerCase() === key.toLowerCase()
- ) {
- return option.values.find((v) => v.label.toLowerCase() === value)
- }
- })
- : !variant.options.find(
- (v) => v.displayName.toLowerCase() === key.toLowerCase()
- )
+ variant.options.find((option) => {
+ if (
+ option.__typename === 'MultipleChoiceOption' &&
+ option.displayName.toLowerCase() === key.toLowerCase()
+ ) {
+ return option.values.find((v) => v.label.toLowerCase() === value)
+ }
+ })
)
})
return variant
diff --git a/framework/shopify/cart/use-cart.tsx b/framework/shopify/cart/use-cart.tsx
index ea1982c2c..5f77360bb 100644
--- a/framework/shopify/cart/use-cart.tsx
+++ b/framework/shopify/cart/use-cart.tsx
@@ -27,7 +27,7 @@ export const handler: SWRHook<
const data = await fetch({
...options,
variables: {
- checkoutId,
+ checkoutId: checkoutId,
},
})
checkout = data.node
diff --git a/framework/shopify/fetcher.ts b/framework/shopify/fetcher.ts
index 9c4fe9a9e..a69150503 100644
--- a/framework/shopify/fetcher.ts
+++ b/framework/shopify/fetcher.ts
@@ -2,9 +2,14 @@ import { Fetcher } from '@commerce/utils/types'
import { API_TOKEN, API_URL } from './const'
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(
- await fetch(API_URL, {
+ await fetch(url, {
method,
body: JSON.stringify({ query, variables }),
headers: {
diff --git a/framework/shopify/index.tsx b/framework/shopify/index.tsx
index c26704771..5b25d6b21 100644
--- a/framework/shopify/index.tsx
+++ b/framework/shopify/index.tsx
@@ -28,8 +28,7 @@ export type ShopifyProps = {
export function CommerceProvider({ children, ...config }: ShopifyProps) {
return (
<CoreCommerceProvider
- // TODO: Fix this type
- provider={shopifyProvider as any}
+ provider={shopifyProvider}
config={{ ...shopifyConfig, ...config }}
>
{children}
diff --git a/framework/shopify/provider.ts b/framework/shopify/provider.ts
index 5041770c6..00db5c1d3 100644
--- a/framework/shopify/provider.ts
+++ b/framework/shopify/provider.ts
@@ -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 useAddItem } from './cart/use-add-item'
@@ -17,7 +17,6 @@ import fetcher from './fetcher'
export const shopifyProvider = {
locale: 'en-us',
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
- storeDomain: STORE_DOMAIN,
fetcher,
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
customer: { useCustomer },
diff --git a/framework/shopify/types.ts b/framework/shopify/types.ts
index c4e42b67d..e7bcb2476 100644
--- a/framework/shopify/types.ts
+++ b/framework/shopify/types.ts
@@ -7,13 +7,11 @@ export type ShopifyCheckout = {
lineItems: CheckoutLineItem[]
}
-export interface Cart extends Core.Cart {
- id: string
+export type Cart = Core.Cart & {
lineItems: LineItem[]
}
-
export interface LineItem extends Core.LineItem {
- options: any[]
+ options?: any[]
}
/**
diff --git a/framework/shopify/utils/storage.ts b/framework/shopify/utils/storage.ts
deleted file mode 100644
index d46dadb21..000000000
--- a/framework/shopify/utils/storage.ts
+++ /dev/null
@@ -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 + '')
- }
-}
diff --git a/framework/shopify/wishlist/use-add-item.tsx b/framework/shopify/wishlist/use-add-item.tsx
index 438397f2b..75f067c3a 100644
--- a/framework/shopify/wishlist/use-add-item.tsx
+++ b/framework/shopify/wishlist/use-add-item.tsx
@@ -1,34 +1,13 @@
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 useCustomer from '../customer/use-customer'
-import useWishlist from './use-wishlist'
+export function emptyHook() {
+ const useEmptyHook = async (options = {}) => {
+ return useCallback(async function () {
+ return Promise.resolve()
+ }, [])
+ }
-export default useAddItem as UseAddItem<typeof handler>
-
-export const handler: MutationHook<any, {}, any, any> = {
- fetchOptions: {
- query: '',
- },
- 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',
- })
- }
-
- await revalidate()
- return null
- },
- [fetch, revalidate, customer]
- )
- },
+ return useEmptyHook
}
+
+export default emptyHook
diff --git a/framework/shopify/wishlist/use-remove-item.tsx b/framework/shopify/wishlist/use-remove-item.tsx
index 971ec082f..a2d3a8a05 100644
--- a/framework/shopify/wishlist/use-remove-item.tsx
+++ b/framework/shopify/wishlist/use-remove-item.tsx
@@ -1,36 +1,17 @@
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 useCustomer from '../customer/use-customer'
-import useWishlist from './use-wishlist'
-
-export default useRemoveItem as UseRemoveItem<typeof handler>
-
-export const handler: MutationHook<any, {}, any, any> = {
- fetchOptions: {
- query: '',
- },
- 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',
- })
- }
-
- await revalidate()
- return null
- },
- [fetch, revalidate, customer]
- )
- },
+type Options = {
+ includeProducts?: boolean
}
+
+export function emptyHook(options?: Options) {
+ const useEmptyHook = async ({ id }: { id: string | number }) => {
+ return useCallback(async function () {
+ return Promise.resolve()
+ }, [])
+ }
+
+ return useEmptyHook
+}
+
+export default emptyHook
diff --git a/framework/shopify/wishlist/use-wishlist.tsx b/framework/shopify/wishlist/use-wishlist.tsx
index 651ea06c8..d2ce9db5b 100644
--- a/framework/shopify/wishlist/use-wishlist.tsx
+++ b/framework/shopify/wishlist/use-wishlist.tsx
@@ -1,49 +1,46 @@
-import { useMemo } from 'react'
-import { SWRHook } from '@commerce/utils/types'
-import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
-import useCustomer from '../customer/use-customer'
+// TODO: replace this hook and other wishlist hooks with a handler, or remove them if
+// Shopify doesn't have a wishlist
-export type UseWishlistInput = { includeProducts?: boolean }
+import { HookFetcher } from '@commerce/utils/types'
+import { Product } from '../schema'
-export default useWishlist as UseWishlist<typeof handler>
+const defaultOpts = {}
-export const handler: SWRHook<
- any | null,
- UseWishlistInput,
- { customerId?: number } & UseWishlistInput,
- { isEmpty?: boolean }
-> = {
- fetchOptions: {
- url: '/api/bigcommerce/wishlist',
- method: 'GET',
- },
- fetcher() {
- return { items: [] }
- },
- useHook: ({ useData }) => (input) => {
- const { data: customer } = useCustomer()
- const response = useData({
- input: [
- ['customerId', customer?.entityId],
- ['includeProducts', input?.includeProducts],
- ],
- swrOptions: {
- revalidateOnFocus: false,
- ...input?.swrOptions,
- },
- })
-
- return useMemo(
- () =>
- Object.create(response, {
- isEmpty: {
- get() {
- return (response.data?.items?.length || 0) <= 0
- },
- enumerable: true,
- },
- }),
- [response]
- )
- },
+export type Wishlist = {
+ items: [
+ {
+ product_id: number
+ variant_id: number
+ id: number
+ product: Product
+ }
+ ]
}
+
+export interface UseWishlistOptions {
+ includeProducts?: boolean
+}
+
+export interface UseWishlistInput extends UseWishlistOptions {
+ customerId?: number
+}
+
+export const fetcher: HookFetcher<Wishlist | null, UseWishlistInput> = () => {
+ return null
+}
+
+export function extendHook(
+ customFetcher: typeof fetcher,
+ // swrOptions?: SwrOptions<Wishlist | null, UseWishlistInput>
+ swrOptions?: any
+) {
+ const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
+ return { data: null }
+ }
+
+ useWishlist.extend = extendHook
+
+ return useWishlist
+}
+
+export default extendHook(fetcher)
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
index 67adb6287..3f39845b5 100644
--- a/pages/[...pages].tsx
+++ b/pages/[...pages].tsx
@@ -25,8 +25,7 @@ export async function getStaticProps({
const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
const data =
pageItem &&
- // TODO: Shopify - Fix this type
- (await getPage({ variables: { id: pageItem.id! } as any, config, preview }))
+ (await getPage({ variables: { id: pageItem.id! }, config, preview }))
const page = data?.page
if (!page) {
diff --git a/pages/customer/activate.tsx b/pages/customer/activate.tsx
deleted file mode 100644
index 61e4da0ca..000000000
--- a/pages/customer/activate.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/common/get-all-pages'
-import { Layout } from '@components/common'
-import { Container, Text } from '@components/ui'
-
-export async function getStaticProps({
- preview,
- locale,
-}: GetStaticPropsContext) {
- const config = getConfig({ locale })
- const { pages } = await getAllPages({ config, preview })
- return {
- props: { pages },
- }
-}
-
-export default function ActivateAccount() {
- return (
- <Container>
- <Text variant="pageHeading">Activate Your Account</Text>
- </Container>
- )
-}
-
-ActivateAccount.Layout = Layout
diff --git a/tsconfig.json b/tsconfig.json
index 9e712fb18..e20f37099 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,8 +22,8 @@
"@components/*": ["components/*"],
"@commerce": ["framework/commerce"],
"@commerce/*": ["framework/commerce/*"],
- "@framework": ["framework/bigcommerce"],
- "@framework/*": ["framework/bigcommerce/*"]
+ "@framework": ["framework/shopify"],
+ "@framework/*": ["framework/shopify/*"]
}
},
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],