Agnostic UI (#199)

* changes * Progress * Normalized Products output * Progress * Restored Index Agnostic * Progress * Reordering * Moved normalizer to BC function * Removed Futures * More Types * More Types * More Types * Fix useCallback * Progress, Changes types, readme and restoring functionality * Changes * TS Issues * Changes * Normalizer * Normalizing more operations * Normalizing more operations * changes * Merge Issues * Cleanup * change * changes * index.ts broke my tree shaking * slug * Normalized Options and Swatches * Restored Add to cart * Correct Variant Added to Cart * Normalizing Cart Responses * Changes * changes breaking * Adding immutable normalizer for Product * Cart Normalized * changes * Progress * More updates * Removed some comments * Add loading state for data hooks * Bug fix * Changed the way isEmpty works * Improve navbar performance * Added useResponse hook * added useResponse to useWhishlist * Added husky and lint-staged * Ran prettier fix * Added more cart types * Moved types.d.ts to the commerce folder * Minor changes * Moved normalizer to happen after fetch * updated useCart types * Updated normalizer for useData * Added new normalizer for the cart to the UI * More corrections for useCart * Updated cart update hooks * Removed import * Progress * Switch away from global types * Making multiple changes * Improved types for operations * Moved and updated cart types * Updated the useAddItem and useRemoveItem hooks * Minor life improvement * Minor change * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * userAvatar * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * MOving stuff around and adding temporal new files * changes * Replace use-cart with the new hook * Removed old hook * Improved HookHandler type * Moved types * Simplified useData types * Updated Fetcher type * Moved SwrOptions type * Removed duplicated fetcher * Moved provider to its own file * Added proper type for fetch input * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7c2d, reversing changes made to bf50965a39. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965a39, reversing changes made to 0dad4ddedb. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1bce. * align with upstream changes * Updated how the hook input is handled * Add more options to the hook handler * Final touches to the hook handler type * Moved useWishlist to use new handler * Move useCustomer to the new hook * Added a default fetcher * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * Shopify Provider (#186) * Start of Shopify provider * add missing comment to documentation * add missing env vars to documentation * update reference to types file * Moved useSearch to the new hook * Removed old use-data lib * Removed generics for result and body * Removed normalizr * Wishlist * New changes and initial Features API * Fixed some types * Fixed more types * fixes after upstream changes * Fixed product types * Fixed another product type * Updated type * Fixed remaining issues with types * Added a MutationHandler * Moved the handlers to each hook * Moved the fetcher to its own file * Moved handler to each hook * Added initial version of useAddItem * Added better mutation types, and moved some hooks * Removed use-cart-actions * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * changes * Changes * Reordering and changes * Adding Features APO * Adding wishlist api * Implementing FeaturesAPI with Wishlist * Removing bug with touchstart * Adding tyni typing * moved use-remove-item * Removed MutationHandler type * Moved more hooks and updated types to make them smaller * Moved data hooks to new format * Removed no longer required types * Removed useResponse helper * Updated useData type * Moved wishlist use-add-item * Moved wishlist use-remove-item to provider * Moved use-login and use-logout * Update use-signup * Removed use-action helper * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Updates to wishlist feature * Moved the features to be environment variable only * More changes for wishlist config * Disable wishlist * Removed useWishlistActions * Updated readme * updates * typos * Updated the way the provider config is set * Removed features.ts * Removed bootstrap.js * Aligned with upstream changes * Updates * shopify: changes * shopify: changes * Update next.config.js * Shopify Provider Updates (#209) * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * changes * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7c2d, reversing changes made to bf50965a39. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965a39, reversing changes made to 0dad4ddedb. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1bce. * align with upstream changes * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * fixes after upstream changes * Moved handler to each hook * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Aligned with upstream changes * Updates * Update next.config.js * Updated the commerce config structure * Removed @framework imports within framework providers * Fixed types * changes * Adding extra config * Adding shopify commit * Adding env templates to the providers * Ignore some types * Adding link for Cart * Adding customCheckout * multiple changes to fix the wishlist * Shopify Provier Updates (#212) * changes * Adding shopify commit * Changed to query page by id * Fixed page query, Changed use-search GraphQl query * Update use-search.tsx * remove unused util * Changed cookie expiration * Update tsconfig.json Co-authored-by: okbel <curciobel@gmail.com> * Bump and adding dependency * Adding color checks * Now colors work with lighter colors * Stable commerce.config.json * Updated main readme * Readme changes * Default to bigcommerce Co-authored-by: bc <bc@bcs-MacBook-Pro.fibertel.com.ar> Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: cond0r <pinte_catalin@yahoo.com> Co-authored-by: Peter Mekhaeil <4616064+petermekhaeil@users.noreply.github.com>
2025-07-22 20:26:49 +00:00 · 2021-03-04 07:57:25 -03:00
parent b121078151
commit 9b71bd77fc
232 changed files with 20545 additions and 1895 deletions
--- a/framework/bigcommerce/product/get-all-product-paths.ts
+++ b/framework/bigcommerce/product/get-all-product-paths.ts
@@ -0,0 +1,71 @@
+import type {
+  GetAllProductPathsQuery,
+  GetAllProductPathsQueryVariables,
+} from '../schema'
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import filterEdges from '../api/utils/filter-edges'
+import { BigcommerceConfig, getConfig } from '../api'
+
+export const getAllProductPathsQuery = /* GraphQL */ `
+  query getAllProductPaths($first: Int = 100) {
+    site {
+      products(first: $first) {
+        edges {
+          node {
+            path
+          }
+        }
+      }
+    }
+  }
+`
+
+export type ProductPath = NonNullable<
+  NonNullable<GetAllProductPathsQuery['site']['products']['edges']>[0]
+>
+
+export type ProductPaths = ProductPath[]
+
+export type { GetAllProductPathsQueryVariables }
+
+export type GetAllProductPathsResult<
+  T extends { products: any[] } = { products: ProductPaths }
+> = T
+
+async function getAllProductPaths(opts?: {
+  variables?: GetAllProductPathsQueryVariables
+  config?: BigcommerceConfig
+}): Promise<GetAllProductPathsResult>
+
+async function getAllProductPaths<
+  T extends { products: any[] },
+  V = any
+>(opts: {
+  query: string
+  variables?: V
+  config?: BigcommerceConfig
+}): Promise<GetAllProductPathsResult<T>>
+
+async function getAllProductPaths({
+  query = getAllProductPathsQuery,
+  variables,
+  config,
+}: {
+  query?: string
+  variables?: GetAllProductPathsQueryVariables
+  config?: BigcommerceConfig
+} = {}): Promise<GetAllProductPathsResult> {
+  config = getConfig(config)
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `query`
+  const { data } = await config.fetch<
+    RecursivePartial<GetAllProductPathsQuery>
+  >(query, { variables })
+  const products = data.site?.products?.edges
+
+  return {
+    products: filterEdges(products as RecursiveRequired<typeof products>),
+  }
+}
+
+export default getAllProductPaths
--- a/framework/bigcommerce/product/get-all-products.ts
+++ b/framework/bigcommerce/product/get-all-products.ts
@@ -0,0 +1,135 @@
+import type {
+  GetAllProductsQuery,
+  GetAllProductsQueryVariables,
+} from '../schema'
+import type { Product } from '@commerce/types'
+import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
+import filterEdges from '../api/utils/filter-edges'
+import setProductLocaleMeta from '../api/utils/set-product-locale-meta'
+import { productConnectionFragment } from '../api/fragments/product'
+import { BigcommerceConfig, getConfig } from '../api'
+import { normalizeProduct } from '../lib/normalize'
+
+export const getAllProductsQuery = /* GraphQL */ `
+  query getAllProducts(
+    $hasLocale: Boolean = false
+    $locale: String = "null"
+    $entityIds: [Int!]
+    $first: Int = 10
+    $products: Boolean = false
+    $featuredProducts: Boolean = false
+    $bestSellingProducts: Boolean = false
+    $newestProducts: Boolean = false
+  ) {
+    site {
+      products(first: $first, entityIds: $entityIds) @include(if: $products) {
+        ...productConnnection
+      }
+      featuredProducts(first: $first) @include(if: $featuredProducts) {
+        ...productConnnection
+      }
+      bestSellingProducts(first: $first) @include(if: $bestSellingProducts) {
+        ...productConnnection
+      }
+      newestProducts(first: $first) @include(if: $newestProducts) {
+        ...productConnnection
+      }
+    }
+  }
+
+  ${productConnectionFragment}
+`
+
+export type ProductEdge = NonNullable<
+  NonNullable<GetAllProductsQuery['site']['products']['edges']>[0]
+>
+
+export type ProductNode = ProductEdge['node']
+
+export type GetAllProductsResult<
+  T extends Record<keyof GetAllProductsResult, any[]> = {
+    products: ProductEdge[]
+  }
+> = T
+
+const FIELDS = [
+  'products',
+  'featuredProducts',
+  'bestSellingProducts',
+  'newestProducts',
+]
+
+export type ProductTypes =
+  | 'products'
+  | 'featuredProducts'
+  | 'bestSellingProducts'
+  | 'newestProducts'
+
+export type ProductVariables = { field?: ProductTypes } & Omit<
+  GetAllProductsQueryVariables,
+  ProductTypes | 'hasLocale'
+>
+
+async function getAllProducts(opts?: {
+  variables?: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<{ products: Product[] }>
+
+async function getAllProducts<
+  T extends Record<keyof GetAllProductsResult, any[]>,
+  V = any
+>(opts: {
+  query: string
+  variables?: V
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetAllProductsResult<T>>
+
+async function getAllProducts({
+  query = getAllProductsQuery,
+  variables: { field = 'products', ...vars } = {},
+  config,
+}: {
+  query?: string
+  variables?: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+  // TODO: fix the product type here
+} = {}): Promise<{ products: Product[] | any[] }> {
+  config = getConfig(config)
+
+  const locale = vars.locale || config.locale
+  const variables: GetAllProductsQueryVariables = {
+    ...vars,
+    locale,
+    hasLocale: !!locale,
+  }
+
+  if (!FIELDS.includes(field)) {
+    throw new Error(
+      `The field variable has to match one of ${FIELDS.join(', ')}`
+    )
+  }
+
+  variables[field] = true
+
+  // RecursivePartial forces the method to check for every prop in the data, which is
+  // required in case there's a custom `query`
+  const { data } = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
+    query,
+    { variables }
+  )
+  const edges = data.site?.[field]?.edges
+  const products = filterEdges(edges as RecursiveRequired<typeof edges>)
+
+  if (locale && config.applyLocale) {
+    products.forEach((product: RecursivePartial<ProductEdge>) => {
+      if (product.node) setProductLocaleMeta(product.node)
+    })
+  }
+
+  return { products: products.map(({ node }) => normalizeProduct(node as any)) }
+}
+
+export default getAllProducts
--- a/framework/bigcommerce/product/get-product.ts
+++ b/framework/bigcommerce/product/get-product.ts
@@ -0,0 +1,121 @@
+import type { GetProductQuery, GetProductQueryVariables } from '../schema'
+import setProductLocaleMeta from '../api/utils/set-product-locale-meta'
+import { productInfoFragment } from '../api/fragments/product'
+import { BigcommerceConfig, getConfig } from '../api'
+import { normalizeProduct } from '../lib/normalize'
+import type { Product } from '@commerce/types'
+
+export const getProductQuery = /* GraphQL */ `
+  query getProduct(
+    $hasLocale: Boolean = false
+    $locale: String = "null"
+    $path: String!
+  ) {
+    site {
+      route(path: $path) {
+        node {
+          __typename
+          ... on Product {
+            ...productInfo
+            variants {
+              edges {
+                node {
+                  entityId
+                  defaultImage {
+                    urlOriginal
+                    altText
+                    isDefault
+                  }
+                  prices {
+                    ...productPrices
+                  }
+                  inventory {
+                    aggregated {
+                      availableToSell
+                      warningLevel
+                    }
+                    isInStock
+                  }
+                  productOptions {
+                    edges {
+                      node {
+                        __typename
+                        entityId
+                        displayName
+                        ...multipleChoiceOption
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ${productInfoFragment}
+`
+
+export type ProductNode = Extract<
+  GetProductQuery['site']['route']['node'],
+  { __typename: 'Product' }
+>
+
+export type GetProductResult<
+  T extends { product?: any } = { product?: ProductNode }
+> = T
+
+export type ProductVariables = { locale?: string } & (
+  | { path: string; slug?: never }
+  | { path?: never; slug: string }
+)
+
+async function getProduct(opts: {
+  variables: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetProductResult>
+
+async function getProduct<T extends { product?: any }, V = any>(opts: {
+  query: string
+  variables: V
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetProductResult<T>>
+
+async function getProduct({
+  query = getProductQuery,
+  variables: { slug, ...vars },
+  config,
+}: {
+  query?: string
+  variables: ProductVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<Product | {} | any> {
+  config = getConfig(config)
+
+  const locale = vars.locale || config.locale
+  const variables: GetProductQueryVariables = {
+    ...vars,
+    locale,
+    hasLocale: !!locale,
+    path: slug ? `/${slug}/` : vars.path!,
+  }
+  const { data } = await config.fetch<GetProductQuery>(query, { variables })
+  const product = data.site?.route?.node
+
+  if (product?.__typename === 'Product') {
+    if (locale && config.applyLocale) {
+      setProductLocaleMeta(product)
+    }
+
+    return { product: normalizeProduct(product as any) }
+  }
+
+  return {}
+}
+
+export default getProduct
--- a/framework/bigcommerce/product/index.ts
+++ b/framework/bigcommerce/product/index.ts
@@ -0,0 +1,4 @@
+export { default as usePrice } from './use-price'
+export { default as useSearch } from './use-search'
+export { default as getProduct } from './get-product'
+export { default as getAllProducts } from './get-all-products'
--- a/framework/bigcommerce/product/use-price.tsx
+++ b/framework/bigcommerce/product/use-price.tsx
@@ -0,0 +1,2 @@
+export * from '@commerce/product/use-price'
+export { default } from '@commerce/product/use-price'
--- a/framework/bigcommerce/product/use-search.tsx
+++ b/framework/bigcommerce/product/use-search.tsx
@@ -0,0 +1,53 @@
+import { SWRHook } from '@commerce/utils/types'
+import useSearch, { UseSearch } from '@commerce/product/use-search'
+import type { SearchProductsData } from '../api/catalog/products'
+
+export default useSearch as UseSearch<typeof handler>
+
+export type SearchProductsInput = {
+  search?: string
+  categoryId?: number
+  brandId?: number
+  sort?: string
+}
+
+export const handler: SWRHook<
+  SearchProductsData,
+  SearchProductsInput,
+  SearchProductsInput
+> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/catalog/products',
+    method: 'GET',
+  },
+  fetcher({ input: { search, categoryId, brandId, sort }, options, fetch }) {
+    // Use a dummy base as we only care about the relative path
+    const url = new URL(options.url!, 'http://a')
+
+    if (search) url.searchParams.set('search', search)
+    if (Number.isInteger(categoryId))
+      url.searchParams.set('category', String(categoryId))
+    if (Number.isInteger(brandId))
+      url.searchParams.set('brand', String(brandId))
+    if (sort) url.searchParams.set('sort', sort)
+
+    return fetch({
+      url: url.pathname + url.search,
+      method: options.method,
+    })
+  },
+  useHook: ({ useData }) => (input = {}) => {
+    return useData({
+      input: [
+        ['search', input.search],
+        ['categoryId', input.categoryId],
+        ['brandId', input.brandId],
+        ['sort', input.sort],
+      ],
+      swrOptions: {
+        revalidateOnFocus: false,
+        ...input.swrOptions,
+      },
+    })
+  },
+}