Merge pull request #102 from bigcommerce/prerelease

1.7.0

CHANGELOG.md

@@ -1,3 +1,28 @@
+# 1.7.0
+
+## Set `OptionSelection` as an array
+Following the BigCommerce API, `OptionSelection` have to be an array.
+
+## Login cookies
+Return only non-null cookies.
+
+## Update cart after add, update or remove cart items
+Allow to pass array of options to `useAddItem`, `useUpdateItem ` and `useRemoveItem ` as it's allowed in `useCart`.
+
+This way, when using the hook of `useCart` with options, we can update its value through the rest of hooks if the same options are used. This is because behind the scenes we use **`swr`** in which the hook update depends on its input arguments. And the cart options are input arguments.
+
+## Add review summary
+
+Add review summary to get product operation.
+
+## Increase product variants
+
+By default, the number of variants returned by the API is 10. This has been changed to the maximum (250) to cover cases where a product has many possible variants.
+
+## Reduce wishlist products to new maximum
+
+The new maximum number of products returned by the API is 50.
+
 # 1.6.0
 
 ## Add extra values to `useSignup` hook

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/storefront-data-hooks",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "main": "index.js",
   "repository": "[email protected]:bigcommerce/storefront-data-hooks.git",
   "license": "MIT",

src/api/cart/index.ts

@@ -10,22 +10,26 @@ import updateItem from './handlers/update-item'
 import removeItem from './handlers/remove-item'
 
 type OptionSelections = {
-	option_id: Number
-	option_value: Number|String
+  option_id: number
+  option_value: number | string
 }
 
 export type ItemBody = {
   productId: number
   variantId?: number
-	quantity?: number
-	optionSelections?: OptionSelections
+  quantity?: number
+  optionSelections?: OptionSelections[]
 }
 
-export type AddItemBody = { item: ItemBody, locale?: string, include?: string }
+export type AddItemBody = { item: ItemBody; locale?: string; include?: string }
 
-export type UpdateItemBody = { itemId: string; item: ItemBody, include?: string  }
+export type UpdateItemBody = {
+  itemId: string
+  item: ItemBody
+  include?: string
+}
 
-export type RemoveItemBody = { itemId: string, include?: string  }
+export type RemoveItemBody = { itemId: string; include?: string }
 
 export type Coupon = {
   code: string
@@ -136,7 +140,7 @@ export type Cart = {
 }
 
 export type CartHandlers = {
-  getCart: BigcommerceHandler<Cart, { cartId?: string, include?: string }>
+  getCart: BigcommerceHandler<Cart, { cartId?: string; include?: string }>
   addItem: BigcommerceHandler<Cart, { cartId?: string } & Partial<AddItemBody>>
   updateItem: BigcommerceHandler<
     Cart,
@@ -161,7 +165,8 @@ const cartApi: BigcommerceApiHandler<Cart, CartHandlers> = async (
 
   const { cookies } = req
   const cartId = cookies[config.cartCookie]
-  const include = typeof req.query.include === 'string' ? req.query.include : undefined
+  const include =
+    typeof req.query.include === 'string' ? req.query.include : undefined
 
   try {
     // Return current cart info

src/api/fragments/product.ts

@@ -78,7 +78,11 @@ export const productInfoFragment = /* GraphQL */ `
         }
       }
     }
-    variants {
+    reviewSummary {
+      numberOfReviews
+      summationOfRatings
+    }
+    variants(first: 250) {
       edges {
         node {
           entityId

src/api/operations/get-customer-wishlist.ts

@@ -61,7 +61,7 @@ async function getCustomerWishlist({
 
     if (entityIds?.length) {
       const graphqlData = await getAllProducts({
-        variables: { first: 100, entityIds },
+        variables: { first: 50, entityIds },
         config,
       })
       // Put the products in an object that we can use to get them by id

src/api/operations/get-product.ts

@@ -15,7 +15,7 @@ export const getProductQuery = /* GraphQL */ `
           __typename
           ... on Product {
             ...productInfo
-            variants {
+            variants(first: 250) {
               edges {
                 node {
                   entityId

src/api/operations/login.ts

@@ -53,14 +53,21 @@ async function login({
     { variables }
   )
 
-  response.setHeader(
-    'Set-Cookie',
-    [
-      getLoginCookie(res.headers.get('Set-Cookie'), request.headers.host)!,
-      getLoginCookie(res.headers.get('Set-Cookie'), request.headers.host, 'SHOP_SESSION_TOKEN')!,
-      getLoginCookie(res.headers.get('Set-Cookie'), request.headers.host, 'Shopper-perf')!,
-    ].filter(cookie => cookie)
-  )
+  const cookies = [
+    getLoginCookie(res.headers.get('Set-Cookie'), request.headers.host),
+    getLoginCookie(
+      res.headers.get('Set-Cookie'),
+      request.headers.host,
+      'SHOP_SESSION_TOKEN'
+    ),
+    getLoginCookie(
+      res.headers.get('Set-Cookie'),
+      request.headers.host,
+      'Shopper-perf'
+    ),
+  ].filter((cookie): cookie is string => typeof cookie === 'string')
+
+  response.setHeader('Set-Cookie', cookies)
 
   return {
     result: data.login?.result,

src/api/utils/get-login-cookie.ts

@@ -1,11 +1,18 @@
-export default function getLoginCookie(setCookieHeader: string | null, host: string | undefined, cookieKey: string = 'SHOP_TOKEN'): string | null {
+export default function getLoginCookie(
+  setCookieHeader: string | null,
+  host: string | undefined,
+  cookieKey = 'SHOP_TOKEN'
+): string | null {
   if (!setCookieHeader) return null
-  const cookies : string[] = setCookieHeader.split(/, (?=[^;]+=[^;]+;)/)
-
-  let cookie = cookies.find(cookie => cookie.startsWith(`${cookieKey}=`)) || null
+  const cookies: string[] = setCookieHeader.split(/, (?=[^;]+=[^;]+;)/)
+  let cookie =
+    cookies.find((cookie) => cookie.startsWith(`${cookieKey}=`)) || null
 
+  if (!cookie) return null
   // Set the cookie at TLD to make it accessible on subdomains (embedded checkout)
-  cookie = cookie + `; Domain=${host?.includes(':') ? host?.slice(0, host.indexOf(':')) : host}`
+  cookie =
+    cookie +
+    `; Domain=${host?.includes(':') ? host?.slice(0, host.indexOf(':')) : host}`
 
   // In development, don't set a secure cookie or the browser will ignore it
   if (process.env.NODE_ENV !== 'production') {
@@ -16,4 +23,4 @@ export default function getLoginCookie(setCookieHeader: string | null, host: str
     cookie = cookie.replace(/; SameSite=none/gi, '; SameSite=lax')
   }
   return cookie
-}
+}

src/api/utils/parse-item.ts

@@ -10,5 +10,5 @@ export const parseCartItem = (item: ItemBody) => ({
   quantity: item.quantity,
   product_id: item.productId,
   variant_id: item.variantId,
-  option_selections: item.optionSelections
+  option_selections: item.optionSelections,
 })

src/cart/use-add-item.tsx

@@ -41,13 +41,17 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
 
 export function extendHook(customFetcher: typeof fetcher) {
   const useAddItem = (input?: UseCartInput) => {
-    const { mutate } = useCart()
+    const { mutate } = useCart(input)
     const { locale } = useCommerce()
     const fn = useCartAddItem(defaultOpts, customFetcher)
 
     return useCallback(
       async function addItem(item: AddItemInput) {
-        const data = await fn({ item, locale, include: input?.include?.join(',') })
+        const data = await fn({
+          item,
+          locale,
+          include: input?.include?.join(','),
+        })
         await mutate(data, false)
         return data
       },

src/cart/use-remove-item.tsx

@@ -18,7 +18,6 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
   { itemId, include },
   fetch
 ) => {
-
   // Use a dummy base as we only care about the relative path
   const url = new URL(options?.url ?? defaultOpts.url, 'http://a')
   if (include) url.searchParams.set('include', include)
@@ -32,8 +31,9 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
 }
 
 export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = (item?: any, input?: UseCartInput) => { // TODO; Item should be mandatory and types
-    const { mutate } = useCart()
+  const useRemoveItem = (item?: any, input?: UseCartInput) => {
+    // TODO; Item should be mandatory and types
+    const { mutate } = useCart(input)
     const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(
       defaultOpts,
       customFetcher
@@ -43,7 +43,7 @@ export function extendHook(customFetcher: typeof fetcher) {
       async function removeItem({ id: itemId }: RemoveItemInput) {
         const data = await fn({
           itemId: itemId ?? item?.id,
-          include: input?.include?.join(',')
+          include: input?.include?.join(','),
         })
         await mutate(data, false)
         return data

src/cart/use-update-item.tsx

@@ -44,7 +44,7 @@ export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
 
 function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
   const useUpdateItem = (item: PhysicalItem, input?: UseCartInput) => {
-    const { mutate } = useCart()
+    const { mutate } = useCart(input)
     const fn = useCartUpdateItem<Cart | null, UpdateItemBody>(
       defaultOpts,
       customFetcher
@@ -59,9 +59,8 @@ function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
             variantId: newItem.variantId ?? item?.variant_id,
             quantity: newItem.quantity,
           },
-          include: input?.include?.join(',')
+          include: input?.include?.join(','),
         })
-        console.log({ data })
         await mutate(data, false)
         return data
       }, cfg?.wait ?? 500),