Fixes

components/product/Swatch/Swatch.module.css

@@ -1,10 +1,8 @@
 .root {
   composes: root from 'components/ui/Button/Button.module.css';
-  @apply h-12 p-0 bg-primary text-primary rounded-full mr-3 inline-flex
+  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
-   shadow-none border-gray-200 border box-border;
+  p-0 shadow-none border-gray-200 border box-border;
-
-  min-width: 3em;
 
   & > span {
     @apply absolute;
@@ -15,10 +13,6 @@
   }
 }
 
-.size {
-  @apply px-3 leading-none;
-}
-
 .color {
   @apply text-black transition duration-150 ease-in-out;
 

components/product/Swatch/Swatch.tsx

@@ -21,14 +21,14 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   active,
   ...props
 }) => {
+  variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-  const isColor = color !== ''
 
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
-      [s.size]: !isColor,
+      [s.size]: variant === 'size',
       [s.color]: color,
       [s.dark]: color ? isDark(color) : false,
     },
@@ -38,20 +38,18 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   return (
     <Button
       className={rootClassName}
-      style={isColor ? { backgroundColor: color } : {}}
+      style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
-      {...(isColor && { title: label })}
       {...props}
     >
-      {isColor ? (
+      {variant === 'color' && active && (
         <span>
           <Check />
         </span>
-      ) : (
-        label
       )}
+      {variant === 'size' ? label : null}
     </Button>
   )
 }
 
-export default Swatch
+export default Swatch

framework/bigcommerce/api/endpoints/catalog/products/get-products.ts

@@ -25,10 +25,10 @@ const getProducts: ProductsEndpoint['handlers']['getProducts'] = async ({
   if (search) url.searchParams.set('keyword', search)
 
   if (categoryId && Number.isInteger(Number(categoryId)))
-    url.searchParams.set('categories:in', categoryId)
+    url.searchParams.set('categories:in', String(categoryId))
 
   if (brandId && Number.isInteger(Number(brandId)))
-    url.searchParams.set('brand_id', brandId)
+    url.searchParams.set('brand_id', String(brandId))
 
   if (sort) {
     const [_sort, direction] = sort.split('-')

framework/commerce/types/product.ts

@@ -14,7 +14,7 @@ export type ProductPrice = {
 }
 
 export type ProductOption = {
-  __typename: 'MultipleChoiceOption'
+  __typename?: 'MultipleChoiceOption'
   id: string
   displayName: string
   values: ProductOptionValues[]
@@ -47,8 +47,8 @@ export type Product = {
 
 export type SearchProductsBody = {
   search?: string
-  categoryId?: string
+  categoryId?: string | number
-  brandId?: string
+  brandId?: string | number
   sort?: string
   locale?: string
 }

framework/commerce/types/wishlist.ts

@@ -2,7 +2,7 @@
 export type Wishlist = any
 
 export type WishlistItemBody = {
-  variantId: string
+  variantId: string | number
   productId: string
 }
 

framework/shopify/api/endpoints/checkout/checkout.ts

@@ -2,8 +2,8 @@ import {
   SHOPIFY_CHECKOUT_ID_COOKIE,
   SHOPIFY_CHECKOUT_URL_COOKIE,
   SHOPIFY_CUSTOMER_TOKEN_COOKIE,
-} from '@framework/const'
+} from '../../../const'
-import associateCustomerWithCheckoutMutation from '@framework/utils/mutations/associate-customer-with-checkout'
+import associateCustomerWithCheckoutMutation from '../../../utils/mutations/associate-customer-with-checkout'
 import type { CheckoutEndpoint } from '.'
 
 const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({

framework/shopify/api/operations/get-all-pages.ts

@@ -6,8 +6,8 @@ import {
   GetAllPagesQuery,
   GetAllPagesQueryVariables,
   PageEdge,
-} from '@framework/schema'
+} from '../../schema'
-import { normalizePages } from '@framework/utils'
+import { normalizePages } from '../../utils'
 import type { ShopifyConfig, Provider } from '..'
 import type { GetAllPagesOperation, Page } from '../../types/page'
 import getAllPagesQuery from '../../utils/queries/get-all-pages-query'

framework/shopify/api/operations/get-all-products.ts

@@ -10,7 +10,7 @@ import {
 } from '../../schema'
 import type { ShopifyConfig, Provider } from '..'
 import getAllProductsQuery from '../../utils/queries/get-all-products-query'
-import { normalizeProduct } from '@framework/utils'
+import { normalizeProduct } from '../../utils'
 
 export default function getAllProductsOperation({
   commerce,

framework/shopify/api/operations/get-page.ts

@@ -2,7 +2,7 @@ import type {
   OperationContext,
   OperationOptions,
 } from '@commerce/api/operations'
-import { normalizePage } from '@framework/utils'
+import { normalizePage } from '../../utils'
 import type { ShopifyConfig, Provider } from '..'
 import {
   GetPageQuery,

framework/shopify/api/operations/get-site-info.ts

@@ -2,7 +2,7 @@ import type {
   OperationContext,
   OperationOptions,
 } from '@commerce/api/operations'
-import { GetSiteInfoQuery, GetSiteInfoQueryVariables } from '@framework/schema'
+import { GetSiteInfoQueryVariables } from '../../schema'
 import type { ShopifyConfig, Provider } from '..'
 import { GetSiteInfoOperation } from '../../types/site'
 

framework/shopify/auth/use-login.tsx

@@ -5,18 +5,18 @@ import useLogin, { UseLogin } from '@commerce/auth/use-login'
 import type { LoginHook } from '../types/login'
 import useCustomer from '../customer/use-customer'
 
-import createCustomerAccessTokenMutation from '../utils/mutations/customer-access-token-create'
-import { setCustomerToken, throwUserErrors } from '@framework/utils'
 import {
-  Mutation,
+  setCustomerToken,
-  MutationCustomerAccessTokenCreateArgs,
+  throwUserErrors,
-} from '@framework/schema'
+  customerAccessTokenCreateMutation,
+} from '../utils'
+import { Mutation, MutationCustomerAccessTokenCreateArgs } from '../schema'
 
 export default useLogin as UseLogin<typeof handler>
 
 export const handler: MutationHook<LoginHook> = {
   fetchOptions: {
-    query: createCustomerAccessTokenMutation,
+    query: customerAccessTokenCreateMutation,
   },
   async fetcher({ input: { email, password }, options, fetch }) {
     if (!(email && password)) {

framework/shopify/auth/use-signup.tsx

@@ -10,7 +10,7 @@ import {
   handleAutomaticLogin,
   throwUserErrors,
   customerCreateMutation,
-} from '@framework/utils'
+} from '../utils'
 
 export default useSignup as UseSignup<typeof handler>
 

framework/shopify/utils/get-brands.ts

@@ -1,7 +1,7 @@
 import {
   GetAllProductVendorsQuery,
   GetAllProductVendorsQueryVariables,
-} from '@framework/schema'
+} from '../schema'
 import { ShopifyConfig } from '../api'
 import getAllProductVendors from './queries/get-all-product-vendors-query'
 

pages/search.tsx

@@ -34,8 +34,9 @@ const SORT = Object.entries({
 export async function getStaticProps({
   preview,
   locale,
+  locales,
 }: GetStaticPropsContext) {
-  const config = { locale }
+  const config = { locale, locales }
   const { pages } = await commerce.getAllPages({ config, preview })
   const { categories, brands } = await commerce.getSiteInfo({ config, preview })
   return {