@faststore/api 1.10.30 → 1.11.3

package/dist/index.d.ts

@@ -71,6 +71,11 @@ export declare const getResolvers: (options: Options) => {
     }, unknown, any>>;
     StoreSearchResult: Record<string, import("./platforms/vtex").Resolver<Pick<import("./platforms/vtex/clients/search").SearchArgs, "sort" | "selectedFacets" | "hideUnavailableItems" | "query" | "page" | "count" | "fuzzy">, unknown, any>>;
     StorePropertyValue: Record<string, import("./platforms/vtex").Resolver<import("./__generated__/schema").IStorePropertyValue, unknown, any>>;
+    SkuVariants: Record<string, import("./platforms/vtex").Resolver<import("./platforms/vtex/clients/search/types/ProductSearchResult").Item & {
+        isVariantOf: import("./platforms/vtex/clients/search/types/ProductSearchResult").Product;
+    } & {
+        attachmentsValues?: import("./platforms/vtex/clients/commerce/types/OrderForm").Attachment[] | undefined;
+    }, unknown, any>>;
     ObjectOrString: import("graphql").GraphQLScalarType;
     Query: {
         product: (_: unknown, { locator }: import("./__generated__/schema").QueryProductArgs, ctx: import("./platforms/vtex").Context) => Promise<import("./platforms/vtex/utils/enhanceSku").EnhancedSku>;

package/dist/platforms/vtex/index.d.ts

@@ -101,6 +101,11 @@ export declare const getResolvers: (_: Options) => {
     }, unknown, any>>;
     StoreSearchResult: Record<string, Resolver<Pick<SearchArgs, "hideUnavailableItems" | "query" | "page" | "count" | "sort" | "selectedFacets" | "fuzzy">, unknown, any>>;
     StorePropertyValue: Record<string, Resolver<import("../..").IStorePropertyValue, unknown, any>>;
+    SkuVariants: Record<string, Resolver<import("./clients/search/types/ProductSearchResult").Item & {
+        isVariantOf: import("./clients/search/types/ProductSearchResult").Product;
+    } & {
+        attachmentsValues?: import("./clients/commerce/types/OrderForm").Attachment[] | undefined;
+    }, unknown, any>>;
     ObjectOrString: import("graphql").GraphQLScalarType;
     Query: {
         product: (_: unknown, { locator }: import("../..").QueryProductArgs, ctx: Context) => Promise<import("./utils/enhanceSku").EnhancedSku>;

package/dist/platforms/vtex/resolvers/skuVariations.d.ts

@@ -0,0 +1,6 @@
+import type { Resolver } from '..';
+import type { PromiseType } from '../../../typings';
+import type { StoreProduct } from './product';
+declare type Root = PromiseType<ReturnType<typeof StoreProduct.isVariantOf>>;
+export declare const SkuVariants: Record<string, Resolver<Root>>;
+export {};

package/dist/platforms/vtex/utils/skuVariants.d.ts

@@ -0,0 +1,15 @@
+import { StoreProduct as StoreProductType } from '../../..';
+import type { Product, Item } from '../clients/search/types/ProductSearchResult';
+export declare type SkuVariants = StoreProductType[];
+export declare type SkuVariantsByName = Record<string, Array<FormattedSkuVariant>>;
+declare type FormattedSkuVariant = {
+    alt: string;
+    src: string;
+    label: string;
+    value: string;
+};
+export declare function createSlugsMap(variants: Item[], dominantVariantName: string, baseSlug: string): Record<string, string>;
+export declare function getActiveSkuVariations(variations: Item['variations']): Record<string, string>;
+export declare function getVariantsByName(skuSpecifications: Product['skuSpecifications']): Record<string, string[]>;
+export declare function getFormattedVariations(variants: Item[], dominantVariantName: string, dominantVariantValue: string): Record<string, FormattedSkuVariant[]>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/api",
-  "version": "1.10.30",
+  "version": "1.11.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -37,7 +37,7 @@
     "express-graphql": "^0.12.0",
     "graphql": "^15.6.0",
     "jest-transform-graphql": "^2.1.0",
-    "shared": "^1.10.30",
+    "shared": "^1.10.34",
     "ts-jest": "25.5.1",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
@@ -46,5 +46,5 @@
   "peerDependencies": {
     "graphql": "^15.6.0"
   },
-  "gitHead": "4541012c9a6b238f1082c2cb92c4d6410c663795"
+  "gitHead": "3e3bfc6bd9aa68ffc170b9979d5e3eeb5e06088e"
 }

package/src/__generated__/schema.ts

@@ -9,7 +9,69 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
+  /**
+   * Example:
+   *
+   * ```json
+   * {
+   *   Color: 'Red', Size: '42'
+   * }
+   * ```
+   */
+  ActiveVariations: any;
+  /**
+   * Example:
+   *
+   * ```json
+   * {
+   *   Color: [
+   *     {
+   *       src: "https://storecomponents.vtexassets.com/...",
+   *       alt: "...",
+   *       label: "...",
+   *       value: "..."
+   *     },
+   *     {
+   *       src: "https://storecomponents.vtexassets.com/...",
+   *       alt: "...",
+   *       label: "...",
+   *       value: "..."
+   *     }
+   *   ],
+   *   Size: [
+   *     {
+   *       src: "https://storecomponents.vtexassets.com/...",
+   *       alt: "...",
+   *       label: "...",
+   *       value: "..."
+   *     }
+   *   ]
+   * }
+   * ```
+   */
+  FormattedVariants: any;
   ObjectOrString: any;
+  /**
+   * Example:
+   *
+   * ```json
+   * {
+   *   'Color-Red-Size-40': 'classic-shoes-37'
+   * }
+   * ```
+   */
+  SlugsMap: any;
+  /**
+   * Example:
+   *
+   * ```json
+   * {
+   *   Color: [ "Red", "Blue", "Green" ],
+   *   Size: [ "40", "41" ]
+   * }
+   * ```
+   */
+  VariantsByName: any;
 };
 
 /** Person data input to the newsletter. */
@@ -206,6 +268,37 @@ export type QuerySearchArgs = {
   term?: Maybe<Scalars['String']>;
 };
 
+export type SkuVariants = {
+  __typename?: 'SkuVariants';
+  /** SKU property values for the current SKU. */
+  activeVariations?: Maybe<Scalars['ActiveVariations']>;
+  /** All available options for each SKU variant property, indexed by their name. */
+  allVariantsByName?: Maybe<Scalars['VariantsByName']>;
+  /**
+   * Available options for each varying SKU property, taking into account the
+   * `dominantVariantName` property. Returns all available options for the
+   * dominant property, and only options that can be combined with its current
+   * value for other properties.
+   */
+  availableVariations?: Maybe<Scalars['FormattedVariants']>;
+  /**
+   * Maps property value combinations to their respective SKU's slug. Enables
+   * us to retrieve the slug for the SKU that matches the currently selected
+   * variations in O(1) time.
+   */
+  slugsMap?: Maybe<Scalars['SlugsMap']>;
+};
+
+
+export type SkuVariantsAvailableVariationsArgs = {
+  dominantVariantName: Scalars['String'];
+};
+
+
+export type SkuVariantsSlugsMapArgs = {
+  dominantVariantName: Scalars['String'];
+};
+
 /** Aggregate offer information, for a given SKU that is available to be fulfilled by multiple sellers. */
 export type StoreAggregateOffer = {
   __typename?: 'StoreAggregateOffer';
@@ -556,6 +649,12 @@ export type StoreProductGroup = {
   name: Scalars['String'];
   /** Product group ID. */
   productGroupID: Scalars['String'];
+  /**
+   * Object containing data structures to facilitate handling different SKU
+   * variant properties. Specially useful for implementing SKU selection
+   * components.
+   */
+  skuVariants?: Maybe<SkuVariants>;
 };
 
 /** Properties that can be associated with products and products groups. */

package/src/platforms/vtex/index.ts

@@ -20,6 +20,7 @@ import { Query } from './resolvers/query'
 import { StoreReview } from './resolvers/review'
 import { StoreSearchResult } from './resolvers/searchResult'
 import { StoreSeo } from './resolvers/seo'
+import { SkuVariants } from './resolvers/skuVariations'
 import ChannelMarshal from './utils/channel'
 import type { Loaders } from './loaders'
 import type { Clients } from './clients'
@@ -80,6 +81,7 @@ const Resolvers = {
   StoreProductGroup,
   StoreSearchResult,
   StorePropertyValue,
+  SkuVariants,
   ObjectOrString,
   Query,
   Mutation,

package/src/platforms/vtex/resolvers/collection.ts

@@ -11,8 +11,11 @@ const isBrand = (x: any): x is Brand | CollectionPageType =>
   x.type === 'brand' ||
   (isCollectionPageType(x) && x.pageType.toLowerCase() === 'brand')
 
+const isCollection = (x: Root): x is CollectionPageType =>
+  isCollectionPageType(x) && x.pageType.toLowerCase() === 'collection'
+
 const slugifyRoot = (root: Root) => {
-  if (isBrand(root)) {
+  if (isBrand(root) || isCollection(root)) {
     return slugify(root.name)
   }
 

package/src/platforms/vtex/resolvers/productGroup.ts

@@ -12,15 +12,16 @@ export const StoreProductGroup: Record<string, Resolver<Root>> = {
   hasVariant: (root) =>
     root.isVariantOf.items.map((item) => enhanceSku(item, root.isVariantOf)),
   productGroupID: ({ isVariantOf }) => isVariantOf.productId,
-  name: ({ isVariantOf }) => isVariantOf.productName,
+  name: (root) => root.isVariantOf.productName,
+  skuVariants: (root) => root,
   additionalProperty: ({ isVariantOf: { specificationGroups } }) =>
     specificationGroups
-      // filter sku specifications so we dont mess sku with product specs
+      // Filter sku specifications so we don't mix them with product specs.
       .filter(
         (specificationGroup) =>
           !BLOCKED_SPECIFICATIONS.has(specificationGroup.name)
       )
-      // Transform specs back into product specs
+      // Transform specs back into product specs.
       .flatMap(({ specifications }) =>
         specifications.flatMap(({ name, values }) =>
           values.map((value) => ({

package/src/platforms/vtex/resolvers/skuVariations.ts

@@ -0,0 +1,47 @@
+import type { Resolver } from '..'
+import type { PromiseType } from '../../../typings'
+import type { StoreProduct } from './product'
+import {
+  createSlugsMap,
+  getActiveSkuVariations,
+  getFormattedVariations,
+  getVariantsByName,
+} from '../utils/skuVariants'
+
+type Root = PromiseType<ReturnType<typeof StoreProduct.isVariantOf>>
+
+type SlugsMapArgs = {
+  dominantVariantName: string
+}
+
+export const SkuVariants: Record<string, Resolver<Root>> = {
+  activeVariations: (root) => getActiveSkuVariations(root.variations),
+  allVariantsByName: (root) =>
+    getVariantsByName(root.isVariantOf.skuSpecifications),
+
+  slugsMap: (root, args) =>
+    createSlugsMap(
+      root.isVariantOf.items,
+      // Since `dominantVariantProperty` is a required argument, we can safely
+      // access it.
+      (args as SlugsMapArgs).dominantVariantName,
+      root.isVariantOf.linkText
+    ),
+
+  availableVariations: (root, args) => {
+    // Since `dominantVariantProperty` is a required argument, we can safely
+    // access it.
+    const dominantVariantName = (args as SlugsMapArgs).dominantVariantName
+    const activeVariations = getActiveSkuVariations(root.variations)
+
+    const activeDominantVariationValue = activeVariations[dominantVariantName]
+
+    const filteredFormattedVariations = getFormattedVariations(
+      root.isVariantOf.items,
+      dominantVariantName,
+      activeDominantVariationValue
+    )
+
+    return filteredFormattedVariations
+  },
+}

package/src/platforms/vtex/resolvers/validateCart.ts

@@ -1,6 +1,12 @@
 import deepEquals from 'fast-deep-equal'
 
 import { md5 } from '../utils/md5'
+import {
+  attachmentToPropertyValue,
+  getPropertyId,
+  VALUE_REFERENCES,
+} from '../utils/propertyValue'
+
 import type {
   IStoreCart,
   IStoreOffer,
@@ -13,12 +19,6 @@ import type {
   OrderFormItem,
 } from '../clients/commerce/types/OrderForm'
 import type { Context } from '..'
-import {
-  attachmentToPropertyValue,
-  getPropertyId,
-  VALUE_REFERENCES,
-} from '../utils/propertyValue'
-
 type Indexed<T> = T & { index?: number }
 
 const isAttachment = (value: IStorePropertyValue) =>
@@ -28,7 +28,7 @@ const getId = (item: IStoreOffer) =>
   [
     item.itemOffered.sku,
     item.seller.identifier,
-    item.price,
+    item.price < 0.01 ? 'Gift' : undefined,
     item.itemOffered.additionalProperty
       ?.filter(isAttachment)
       .map(getPropertyId)
@@ -39,7 +39,7 @@ const getId = (item: IStoreOffer) =>
 
 const orderFormItemToOffer = (
   item: OrderFormItem,
-  index?: number
+  index?: number,
 ): Indexed<IStoreOffer> => ({
   listPrice: item.listPrice / 100,
   price: item.sellingPrice / 100,
@@ -55,7 +55,7 @@ const orderFormItemToOffer = (
 })
 
 const offerToOrderItemInput = (
-  offer: Indexed<IStoreOffer>
+  offer: Indexed<IStoreOffer>,
 ): OrderFormInputItem => ({
   quantity: offer.quantity,
   seller: offer.seller.identifier,
@@ -69,14 +69,18 @@ const offerToOrderItemInput = (
   })),
 })
 
-const groupById = (offers: IStoreOffer[]): Map<string, IStoreOffer> =>
+const groupById = (offers: IStoreOffer[]): Map<string, IStoreOffer[]> =>
   offers.reduce((acc, item) => {
     const id = getId(item)
 
-    acc.set(id, acc.get(id) ?? item)
+    if (!acc.has(id)) {
+      acc.set(id, [])
+    }
+
+    acc.get(id)?.push(item)
 
     return acc
-  }, new Map<string, IStoreOffer>())
+  }, new Map<string, IStoreOffer[]>())
 
 const equals = (storeOrder: IStoreOrder, orderForm: OrderForm) => {
   const pick = (item: Indexed<IStoreOffer>, index: number) => ({
@@ -96,9 +100,42 @@ const equals = (storeOrder: IStoreOrder, orderForm: OrderForm) => {
   return isSameOrder && orderItemsAreSync
 }
 
+const joinItems = (form: OrderForm) => {
+  const itemsById = form.items
+    .reduce((acc, item) => {
+      const id = getId(orderFormItemToOffer(item))
+
+      if (!acc[id]) {
+        acc[id] = []
+      }
+
+      acc[id].push(item)
+
+      return acc
+    }, {} as Record<string, OrderFormItem[]>)
+
+  return {
+    ...form,
+    items: Object.values(itemsById).map((items) => {
+      const [item] = items
+      const quantity = items.reduce((acc, i) => acc + i.quantity, 0)
+      const totalPrice = items.reduce(
+        (acc, i) => acc + i.quantity * i.sellingPrice,
+        0,
+      )
+
+      return {
+        ...item,
+        quantity,
+        sellingPrice: totalPrice / quantity,
+      }
+    }),
+  }
+}
+
 const orderFormToCart = async (
   form: OrderForm,
-  skuLoader: Context['loaders']['skuLoader']
+  skuLoader: Context['loaders']['skuLoader'],
 ) => {
   return {
     order: {
@@ -119,7 +156,7 @@ const getOrderFormEtag = ({ items }: OrderForm) => md5(JSON.stringify(items))
 
 const setOrderFormEtag = async (
   form: OrderForm,
-  commerce: Context['clients']['commerce']
+  commerce: Context['clients']['commerce'],
 ) => {
   try {
     const orderForm = await commerce.checkout.setCustomData({
@@ -132,7 +169,7 @@ const setOrderFormEtag = async (
     return orderForm
   } catch (err) {
     console.error(
-      'Error while setting custom data to orderForm.\n Make sure to add the following custom app to the orderForm: \n{"fields":["cartEtag"],"id":"faststore","major":1}.\n More info at: https://developers.vtex.com/vtex-rest-api/docs/customizable-fields-with-checkout-api'
+      'Error while setting custom data to orderForm.\n Make sure to add the following custom app to the orderForm: \n{"fields":["cartEtag"],"id":"faststore","major":1}.\n More info at: https://developers.vtex.com/vtex-rest-api/docs/customizable-fields-with-checkout-api',
     )
 
     throw err
@@ -146,7 +183,7 @@ const setOrderFormEtag = async (
  */
 const isOrderFormStale = (form: OrderForm) => {
   const faststoreData = form.customData?.customApps.find(
-    (app) => app.id === 'faststore'
+    (app) => app.id === 'faststore',
   )
 
   const oldEtag = faststoreData?.fields?.cartEtag
@@ -176,7 +213,7 @@ const isOrderFormStale = (form: OrderForm) => {
 export const validateCart = async (
   _: unknown,
   { cart: { order } }: { cart: IStoreCart },
-  ctx: Context
+  ctx: Context,
 ) => {
   const { enableOrderFormSync } = ctx.storage.flags
   const { orderNumber, acceptedOffer } = order
@@ -197,7 +234,9 @@ export const validateCart = async (
     const isStale = isOrderFormStale(orderForm)
 
     if (isStale === true && orderNumber) {
-      const newOrderForm = await setOrderFormEtag(orderForm, commerce)
+      const newOrderForm = await setOrderFormEtag(orderForm, commerce).then(
+        joinItems,
+      )
 
       return orderFormToCart(newOrderForm, skuLoader)
     }
@@ -206,37 +245,54 @@ export const validateCart = async (
   // Step2: Process items from both browser and checkout so they have the same shape
   const browserItemsById = groupById(acceptedOffer)
   const originItemsById = groupById(orderForm.items.map(orderFormItemToOffer))
-  const browserItems = Array.from(browserItemsById.values()) // items on the user's browser
-  const originItems = Array.from(originItemsById.values()) // items on the VTEX platform backend
+  const originItems = Array.from(originItemsById.entries()); // items on the VTEX platform backend
+  const browserItems = Array.from(browserItemsById.entries()); // items on the user's browser
 
   // Step3: Compute delta changes
-  const { itemsToAdd, itemsToUpdate } = browserItems.reduce(
-    (acc, item) => {
-      const maybeOriginItem = originItemsById.get(getId(item))
-
-      if (!maybeOriginItem) {
-        acc.itemsToAdd.push(item)
-      } else {
+  const { itemsToAdd, itemsToUpdate } = browserItems
+    .reduce(
+      (acc, [id, items]) => {
+        const maybeOriginItem = originItemsById.get(id)
+
+        // Adding new items to cart
+        if (!maybeOriginItem) {
+          items.forEach((item) => acc.itemsToAdd.push(item))
+
+          return acc
+        }
+
+        // Update existing items
+        const [head, ...tail] = maybeOriginItem
+        const totalQuantity = items.reduce(
+          (acc, curr) => acc + curr.quantity,
+          0,
+        )
+
+        // set total quantity to first item
         acc.itemsToUpdate.push({
-          ...maybeOriginItem,
-          quantity: item.quantity,
+          ...head,
+          quantity: totalQuantity,
         })
-      }
 
-      return acc
-    },
-    {
-      itemsToAdd: [] as IStoreOffer[],
-      itemsToUpdate: [] as IStoreOffer[],
-    }
-  )
+        // Remove all the rest
+        tail.forEach((item) =>
+          acc.itemsToUpdate.push({ ...item, quantity: 0 })
+        )
+
+        return acc
+      },
+      {
+        itemsToAdd: [] as IStoreOffer[],
+        itemsToUpdate: [] as IStoreOffer[],
+      },
+    )
 
   const itemsToDelete = originItems
-    .filter((item) => !browserItemsById.has(getId(item)))
-    .map((item) => ({ ...item, quantity: 0 }))
+    .filter(([id]) => !browserItemsById.has(id))
+    .flatMap(([, items]) => items.map((item) => ({ ...item, quantity: 0 })))
 
   const changes = [...itemsToAdd, ...itemsToUpdate, ...itemsToDelete].map(
-    offerToOrderItemInput
+    offerToOrderItemInput,
   )
 
   if (changes.length === 0) {
@@ -254,6 +310,7 @@ export const validateCart = async (
     .then((form) =>
       enableOrderFormSync ? setOrderFormEtag(form, commerce) : form
     )
+    .then(joinItems)
 
   // Step5: If no changes detected before/after updating orderForm, the order is validated
   if (equals(order, updatedOrderForm)) {