Aligned with upstream changes

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -8,6 +8,7 @@ import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
 import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'
+import { LineItem } from '@commerce/types'
 
 const CartSidebarView: FC = () => {
   const { closeSidebar } = useUI()
@@ -91,7 +92,7 @@ const CartSidebarView: FC = () => {
               My Cart
             </h2>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
-              {data!.lineItems.map((item) => (
+              {data!.lineItems.map((item: any) => (
                 <CartItem
                   key={item.id}
                   item={item}

framework/commerce/with-config.js

@@ -4,7 +4,7 @@
 
 const merge = require('deepmerge')
 
-const PROVIDERS = ['bigcommerce']
+const PROVIDERS = ['bigcommerce', 'shopify']
 
 function getProviderName() {
   return process.env.BIGCOMMERCE_STOREFRONT_API_URL ? 'bigcommerce' : null

framework/shopify/api/checkout/index.ts

@@ -21,7 +21,9 @@ const checkoutApi: ShopifyApiHandler<any> = async (req, res, config) => {
 
   const { cookies } = req
   const checkoutUrl = cookies[SHOPIFY_CHECKOUT_URL_COOKIE]
+  const customerCookie = cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE]
 
+  if (customerCookie) {
     try {
       await config.fetch(associateCustomerWithCheckoutMutation, {
         variables: {
@@ -32,6 +34,7 @@ const checkoutApi: ShopifyApiHandler<any> = async (req, res, config) => {
     } catch (error) {
       console.error(error)
     }
+  }
 
   if (checkoutUrl) {
     res.redirect(checkoutUrl)

framework/shopify/auth/use-login.tsx

@@ -4,14 +4,12 @@ import { CommerceError, ValidationError } from '@commerce/utils/errors'
 import useCustomer from '../customer/use-customer'
 import createCustomerAccessTokenMutation from '../utils/mutations/customer-access-token-create'
 import {
-  CustomerAccessToken,
   CustomerAccessTokenCreateInput,
-  CustomerAccessTokenCreatePayload,
   CustomerUserError,
   Mutation,
   MutationCheckoutCreateArgs,
 } from '@framework/schema'
-import useLogin, { UseLogin } from '@commerce/use-login'
+import useLogin, { UseLogin } from '@commerce/auth/use-login'
 import { setCustomerToken } from '@framework/utils'
 
 export default useLogin as UseLogin<typeof handler>

framework/shopify/auth/use-logout.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
-import useLogout, { UseLogout } from '@commerce/use-logout'
+import useLogout, { UseLogout } from '@commerce/auth/use-logout'
 import useCustomer from '../customer/use-customer'
 import customerAccessTokenDeleteMutation from '@framework/utils/mutations/customer-access-token-delete'
 import {

framework/shopify/auth/use-signup.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useSignup, { UseSignup } from '@commerce/use-signup'
+import useSignup, { UseSignup } from '@commerce/auth/use-signup'
 import useCustomer from '../customer/use-customer'
 import { CustomerCreateInput } from '@framework/schema'
 

framework/shopify/common/get-all-pages.ts

@@ -1,5 +1,5 @@
 import { getConfig, ShopifyConfig } from '../api'
-import { Page, PageEdge } from '../schema'
+import { PageEdge } from '../schema'
 import { getAllPagesQuery } from '../utils/queries'
 
 type Variables = {
@@ -10,6 +10,14 @@ type ReturnType = {
   pages: Page[]
 }
 
+export type Page = {
+  id: string
+  name: string
+  url: string
+  sort_order?: number
+  body: string
+}
+
 const getAllPages = async (options?: {
   variables?: Variables
   config: ShopifyConfig
@@ -21,10 +29,13 @@ const getAllPages = async (options?: {
   const { data } = await config.fetch(getAllPagesQuery, { variables })
   const edges = data.pages?.edges
 
-  const pages = edges?.map(({ node }: PageEdge) => ({
+  const pages = edges?.map(
+    ({ node: { title: name, handle: url, ...node } }: PageEdge) => ({
       ...node,
-    url: node.handle,
+      url,
-  }))
+      name,
+    })
+  )
 
   return { pages }
 }

framework/shopify/common/get-page.ts

@@ -1,15 +1,13 @@
-import { GraphQLFetcherResult } from '@commerce/api'
-
 import { getConfig, ShopifyConfig } from '../api'
-import getPageQuery from '@framework/utils/queries/get-page-query'
+import getPageQuery from '../utils/queries/get-page-query'
-import { Page, PageEdge } from '@framework/schema'
+import { Page } from './get-all-pages'
 
 type Variables = {
   slug: string
 }
 
 type ReturnType = {
-  page: any
+  page: Page
 }
 
 const getPage = async (options: {
@@ -20,16 +18,17 @@ const getPage = async (options: {
   let { config, variables } = options ?? {}
   config = getConfig(config)
 
-  const { data }: GraphQLFetcherResult = await config.fetch(getPageQuery, {
+  const { data } = await config.fetch(getPageQuery, {
     variables,
   })
 
-  const page: Page = data.pageByHandle
+  const page = data.pageByHandle
 
   return {
     page: page
       ? {
           ...page,
+          name: page.title,
           url: page?.handle,
         }
       : null,

framework/shopify/next.config.js

@@ -0,0 +1,11 @@
+const providerConfig = require('./config.json')
+
+module.exports = {
+  commerce: {
+    provider: 'shopify',
+    ...providerConfig,
+  },
+  images: {
+    domains: ['cdn.shopify.com'],
+  },
+}

framework/shopify/product/get-all-product-paths.ts

@@ -1,10 +1,19 @@
+import { Product } from '@commerce/types'
 import { getConfig, ShopifyConfig } from '../api'
 import fetchAllProducts from '../api/utils/fetch-all-products'
 import { ProductEdge } from '../schema'
 import getAllProductsPathsQuery from '../utils/queries/get-all-products-paths-query'
 
+type ProductPath = {
+  path: string
+}
+
+export type ProductPathNode = {
+  node: ProductPath
+}
+
 type ReturnType = {
-  products: any[]
+  products: ProductPathNode[]
 }
 
 const getAllProductPaths = async (options?: {

framework/shopify/product/get-all-products.ts

@@ -1,10 +1,9 @@
 import { GraphQLFetcherResult } from '@commerce/api'
 import { getConfig, ShopifyConfig } from '../api'
-import { Product, ProductEdge } from '../schema'
+import { ProductEdge } from '../schema'
 import { getAllProductsQuery } from '../utils/queries'
 import { normalizeProduct } from '@framework/utils/normalize'
-
+import { Product } from '@commerce/types'
-export type ProductNode = Product
 
 type Variables = {
   first?: number
@@ -12,7 +11,7 @@ type Variables = {
 }
 
 type ReturnType = {
-  products: any[]
+  products: Product[]
 }
 
 const getAllProducts = async (options: {
@@ -28,9 +27,10 @@ const getAllProducts = async (options: {
     { variables }
   )
 
-  const products = data.products?.edges?.map(({ node: p }: ProductEdge) =>
+  const products =
+    data.products?.edges?.map(({ node: p }: ProductEdge) =>
       normalizeProduct(p)
-  )
+    ) ?? []
 
   return {
     products,

framework/shopify/product/use-price.tsx

@@ -1,2 +1,2 @@
-export * from '@commerce/use-price'
+export * from '@commerce/product/use-price'
-export { default } from '@commerce/use-price'
+export { default } from '@commerce/product/use-price'

framework/shopify/utils/normalize.ts

@@ -77,7 +77,7 @@ export function normalizeProduct(productNode: ShopifyProduct): any {
     slug: handle?.replace(/^\/+|\/+$/g, ''),
     price: money(priceRange?.minVariantPrice),
     images: normalizeProductImages(images),
-    variants: variants ? normalizeProductVariants(variants) : null,
+    variants: variants ? normalizeProductVariants(variants) : [],
     options: options ? options.map((o) => normalizeProductOption(o)) : [],
     ...rest,
   }

framework/shopify/utils/queries/get-all-pages-query.ts

@@ -6,9 +6,6 @@ export const getAllPagesQuery = /* GraphQL */ `
           id
           title
           handle
-          body
-          bodySummary
-          url
         }
       }
     }

framework/shopify/utils/queries/get-page-query.ts

@@ -7,7 +7,6 @@ export const getPageQuery = /* GraphQL */ `
           title
           handle
           body
-          bodySummary
           url
         }
       }

next.config.js

@@ -1,7 +1,8 @@
 const withCommerceConfig = require('./framework/commerce/with-config')
 
-const commerce = { provider: 'bigcommerce' }
+const commerce = { provider: 'shopify' }
 const isBC = commerce.provider === 'bigcommerce'
+const isShopify = commerce.provider === 'shopify'
 
 module.exports = withCommerceConfig({
   commerce,
@@ -11,7 +12,7 @@ module.exports = withCommerceConfig({
   },
   rewrites() {
     return [
-      isBC && {
+      (isBC || isShopify) && {
         source: '/checkout',
         destination: '/api/bigcommerce/checkout',
       },

tsconfig.json

@@ -21,8 +21,9 @@
       "@assets/*": ["assets/*"],
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
-      "@framework/*": ["framework/shopify/*"],
+      "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/shopify"]
+      "@framework": ["framework/shopify"],
+      "@framework/*": ["framework/shopify/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],