@faststore/api 1.10.19 → 1.10.34

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.19",
+  "version": "1.10.34",
   "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.18",
+    "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": "9678f28100f7829663fddb743835a4ea1f60a0da"
+  "gitHead": "5d59e28c724e389b596e2bb13b1464314eab275f"
 }

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/utils/skuVariants.ts

@@ -0,0 +1,206 @@
+import { StoreProduct as StoreProductType } from '../../..'
+import type { Product, Item } from '../clients/search/types/ProductSearchResult'
+
+export type SkuVariants = StoreProductType[]
+
+export type SkuVariantsByName = Record<string, Array<FormattedSkuVariant>>
+
+type FormattedSkuVariant = {
+  alt: string
+  src: string
+  label: string
+  value: string
+}
+
+function findSkuVariantImage(availableImages: Item['images']) {
+  return (
+    availableImages.find(
+      (imageProperties) => imageProperties.imageLabel === 'skuvariation'
+    ) ?? availableImages[0]
+  )
+}
+
+export function createSlugsMap(
+  variants: Item[],
+  dominantVariantName: string,
+  baseSlug: string
+) {
+  /**
+   * 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.
+   *
+   * Example: `'Color-Red-Size-40': 'classic-shoes-37'`
+   */
+  const slugsMap: Record<string, string> = {}
+
+  variants.forEach((variant) => {
+    const skuSpecificationProperties = variant.variations
+
+    if (skuSpecificationProperties.length === 0) {
+      return
+    }
+
+    // Make sure that the 'name-value' pair for the dominant variation
+    // is always the first one.
+    const dominantNameValue = `${dominantVariantName}-${
+      skuSpecificationProperties.find(
+        (variationDetails) => variationDetails.name === dominantVariantName
+      )?.values[0] ?? ''
+    }`
+
+    const skuVariantKey = skuSpecificationProperties.reduce((acc, property) => {
+      const shouldIgnore = property.name === dominantVariantName
+
+      if (shouldIgnore) {
+        return acc
+      }
+
+      return acc + `-${property.name}-${property.values[0]}`
+    }, dominantNameValue)
+
+    slugsMap[skuVariantKey] = `${baseSlug}-${variant.itemId}`
+  })
+
+  return slugsMap
+}
+
+export function getActiveSkuVariations(variations: Item['variations']) {
+  const activeVariations: Record<string, string> = {}
+
+  variations.forEach((variation) => {
+    activeVariations[variation.name] = variation.values[0]
+  })
+
+  return activeVariations
+}
+
+export function getVariantsByName(
+  skuSpecifications: Product['skuSpecifications']
+) {
+  const variants: Record<string, string[]> = {}
+
+  skuSpecifications?.forEach((specification) => {
+    variants[specification.field.originalName ?? specification.field.name] =
+      specification.values.map((value) => value.originalName ?? value.name)
+  })
+
+  return variants
+}
+
+function compare(a: string, b: string) {
+  // Values are always represented as Strings, so we need to handle numbers
+  // in this special case.
+  if (!Number.isNaN(Number(a) - Number(b))) {
+    return Number(a) - Number(b)
+  }
+
+  if (a < b) {
+    return -1
+  }
+
+  if (a > b) {
+    return 1
+  }
+
+  return 0
+}
+
+function sortVariants(variantsByName: SkuVariantsByName) {
+  const sortedVariants = variantsByName
+
+  for (const variantProperty in variantsByName) {
+    variantsByName[variantProperty].sort((a, b) => compare(a.value, b.value))
+  }
+
+  return sortedVariants
+}
+
+export function getFormattedVariations(
+  variants: Item[],
+  dominantVariantName: string,
+  dominantVariantValue: string
+) {
+  /**
+   * SKU options already formatted and indexed by their property name.
+   *
+   * Ex: {
+   *   `Size`: [
+   *     { label: '42', value: '42' },
+   *     { label: '41', value: '41' },
+   *     { label: '39', value: '39' },
+   *   ]
+   * }
+   */
+  const variantsByName: SkuVariantsByName = {}
+
+  const previouslySeenPropertyValues = new Set<string>()
+
+  variants.forEach((variant) => {
+    if (variant.variations.length === 0) {
+      return
+    }
+
+    const variantImageToUse = findSkuVariantImage(variant.images)
+
+    const dominantVariantEntry = variant.variations.find(
+      (variation) => variation.name === dominantVariantName
+    )
+
+    const matchesDominantVariant =
+      dominantVariantEntry?.values[0] === dominantVariantValue
+
+    if (!matchesDominantVariant) {
+      const nameValueIdentifier = `${dominantVariantName}-${dominantVariantEntry?.values[0]}`
+
+      if (
+        !dominantVariantEntry ||
+        previouslySeenPropertyValues.has(nameValueIdentifier)
+      ) {
+        return
+      }
+
+      previouslySeenPropertyValues.add(nameValueIdentifier)
+
+      const formattedVariant = {
+        src: variantImageToUse.imageUrl,
+        alt: variantImageToUse.imageLabel ?? '',
+        label: `${dominantVariantName}: ${dominantVariantEntry.values[0]}`,
+        value: dominantVariantEntry.values[0],
+      }
+
+      if (variantsByName[dominantVariantEntry.name]) {
+        variantsByName[dominantVariantEntry.name].push(formattedVariant)
+      } else {
+        variantsByName[dominantVariantEntry.name] = [formattedVariant]
+      }
+
+      return
+    }
+
+    variant.variations.forEach((variationProperty) => {
+      const nameValueIdentifier = `${variationProperty.name}-${variationProperty.values[0]}`
+
+      if (previouslySeenPropertyValues.has(nameValueIdentifier)) {
+        return
+      }
+
+      previouslySeenPropertyValues.add(nameValueIdentifier)
+
+      const formattedVariant = {
+        src: variantImageToUse.imageUrl,
+        alt: variantImageToUse.imageLabel ?? '',
+        label: `${variationProperty.name}: ${variationProperty.values[0]}`,
+        value: variationProperty.values[0],
+      }
+
+      if (variantsByName[variationProperty.name]) {
+        variantsByName[variationProperty.name].push(formattedVariant)
+      } else {
+        variantsByName[variationProperty.name] = [formattedVariant]
+      }
+    })
+  })
+
+  return sortVariants(variantsByName)
+}

package/src/typeDefs/index.ts

@@ -25,6 +25,7 @@ import Person from './person.graphql'
 import ObjectOrString from './objectOrString.graphql'
 import Session from './session.graphql'
 import Newsletter from './newsletter.graphql'
+import SkuVariants from './skuVariants.graphql'
 
 export const typeDefs = [
   Query,
@@ -51,7 +52,8 @@ export const typeDefs = [
   Person,
   ObjectOrString,
   Session,
-  Newsletter
+  Newsletter,
+  SkuVariants,
 ]
   .map(print)
   .join('\n')

package/src/typeDefs/productGroup.graphql

@@ -18,4 +18,10 @@ type StoreProductGroup {
   Array of additional properties.
   """
   additionalProperty: [StorePropertyValue!]!
+  """
+  Object containing data structures to facilitate handling different SKU
+  variant properties. Specially useful for implementing SKU selection 
+  components.
+  """
+  skuVariants: SkuVariants
 }

package/src/typeDefs/skuVariants.graphql

@@ -0,0 +1,87 @@
+type SkuVariants {
+  """
+  SKU property values for the current SKU.
+  """
+  activeVariations: ActiveVariations
+  """
+  All available options for each SKU variant property, indexed by their name.
+  """
+  allVariantsByName: VariantsByName
+  """
+  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(dominantVariantName: String!): SlugsMap
+  """
+  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(dominantVariantName: String!): FormattedVariants
+}
+
+"""
+Example: 
+
+```json
+{ 
+  'Color-Red-Size-40': 'classic-shoes-37'
+}
+```
+"""
+scalar SlugsMap
+"""
+Example:
+
+```json
+{
+  Color: 'Red', Size: '42'
+}
+```
+"""
+scalar ActiveVariations
+"""
+Example:
+
+```json
+{
+  Color: [ "Red", "Blue", "Green" ],
+  Size: [ "40", "41" ]
+}
+```
+"""
+scalar VariantsByName
+"""
+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: "..."
+    }
+  ]
+}
+```
+"""
+scalar FormattedVariants
+