accept slug on Query.product

packages/api/src/platforms/vtex/clients/commerce/index.ts

@@ -12,6 +12,7 @@ import type {
 } from './types/Simulation'
 import type { Session } from './types/Session'
 import type { Channel } from '../../utils/channel'
+import type { SearchResult } from './types/SearchResult'
 
 const BASE_INIT = {
   method: 'POST',
@@ -152,5 +153,12 @@ export const VtexCommerce = (
         body: '{}',
       })
     },
+    search: {
+      slug: (slug: string): Promise<SearchResult[]> => {
+        return fetchAPI(
+          `${base}/api/catalog_system/pub/products/search/${slug}/p`
+        )
+      },
+    },
   }
 }

packages/api/src/platforms/vtex/clients/commerce/types/SearchResult.ts

@@ -0,0 +1,154 @@
+export interface SearchResult {
+  productId: string
+  productName: string
+  brand: string
+  brandId: number
+  brandImageUrl: null
+  linkText: string
+  productReference: string
+  productReferenceCode: null
+  categoryId: string
+  productTitle: string
+  metaTagDescription: string
+  releaseDate: Date
+  clusterHighlights: any
+  productClusters: ProductClusters
+  searchableClusters: any
+  categories: string[]
+  categoriesIds: string[]
+  link: string
+  specification01: string[]
+  specifications: string[]
+  allSpecifications: string[]
+  allSpecificationsGroups: string[]
+  description: string
+  items: Item[]
+}
+
+export interface Item {
+  itemId: string
+  name: string
+  nameComplete: string
+  complementName: string
+  ean: string
+  referenceId: ReferenceId[]
+  measurementUnit: string
+  unitMultiplier: number
+  modalType: null
+  isKit: boolean
+  images: Image[]
+  sellers: Seller[]
+  videos: any[]
+  estimatedDateArrival: null
+}
+
+export interface Image {
+  imageId: string
+  imageLabel: string
+  imageTag: string
+  imageUrl: string
+  imageText: string
+  imageLastModified: Date
+}
+
+export interface ReferenceId {
+  key: string
+  value: string
+}
+
+export interface Seller {
+  sellerId: string
+  sellerName: string
+  addToCartLink: string
+  sellerDefault: boolean
+  commertialOffer: CommertialOffer
+}
+
+export interface CommertialOffer {
+  deliverySlaSamplesPerRegion: DeliverySlaSamplesPerRegion
+  installments: Installment[]
+  discountHighLight: any[]
+  giftSkuIds: any[]
+  teasers: any[]
+  buyTogether: any[]
+  itemMetadataAttachment: any[]
+  price: number
+  listPrice: number
+  priceWithoutDiscount: number
+  rewardValue: number
+  priceValidUntil: Date
+  availableQuantity: number
+  isAvailable: boolean
+  tax: number
+  deliverySlaSamples: DeliverySlaSample[]
+  getInfoErrorMessage: null
+  cacheVersionUsedToCallCheckout: string
+  paymentOptions: PaymentOptions
+}
+
+export interface DeliverySlaSample {
+  deliverySlaPerTypes: any[]
+  region: null
+}
+
+export interface DeliverySlaSamplesPerRegion {
+  the0: DeliverySlaSample
+}
+
+export interface Installment {
+  value: number
+  interestRate: number
+  totalValuePlusInterestRate: number
+  numberOfInstallments: number
+  paymentSystemName: string
+  paymentSystemGroupName: string
+  name: string
+}
+
+export interface PaymentOptions {
+  installmentOptions: InstallmentOption[]
+  paymentSystems: PaymentSystem[]
+  payments: any[]
+  giftCards: any[]
+  giftCardMessages: any[]
+  availableAccounts: any[]
+  availableTokens: any[]
+}
+
+export interface InstallmentOption {
+  paymentSystem: string
+  bin: null
+  paymentName: string
+  paymentGroupName: string
+  value: number
+  installments: InstallmentElement[]
+}
+
+export interface InstallmentElement {
+  count: number
+  hasInterestRate: boolean
+  interestRate: number
+  value: number
+  total: number
+  sellerMerchantInstallments?: InstallmentElement[]
+  id?: string
+}
+
+export interface PaymentSystem {
+  id: number
+  name: string
+  groupName: string
+  validator: null
+  stringId: string
+  template: string
+  requiresDocument: boolean
+  isCustom: boolean
+  description: null | string
+  requiresAuthentication: boolean
+  dueDate: Date
+  availablePayments: null
+}
+
+export interface ProductClusters {
+  the140: string
+}

packages/api/src/platforms/vtex/loaders/sku.ts

@@ -1,26 +1,12 @@
 import DataLoader from 'dataloader'
 
-import { BadRequestError } from '../utils/errors'
 import { enhanceSku } from '../utils/enhanceSku'
 import type { EnhancedSku } from '../utils/enhanceSku'
 import type { Options } from '..'
 import type { Clients } from '../clients'
-import type { SelectedFacet } from '../utils/facets'
 
 export const getSkuLoader = (_: Options, clients: Clients) => {
-  const loader = async (facetsList: readonly SelectedFacet[][]) => {
-    const skuIds = facetsList.map((facets) => {
-      const maybeFacet = facets.find(({ key }) => key === 'id')
-
-      if (!maybeFacet) {
-        throw new BadRequestError(
-          'Error while loading SKU. Needs to pass an id to selected facets'
-        )
-      }
-
-      return maybeFacet.value
-    })
-
+  const loader = async (skuIds: readonly string[]) => {
     const { products } = await clients.search.products({
       query: `sku:${skuIds.join(';')}`,
       page: 0,
@@ -47,7 +33,7 @@ export const getSkuLoader = (_: Options, clients: Clients) => {
     return skus
   }
 
-  return new DataLoader<SelectedFacet[], EnhancedSku>(loader, {
+  return new DataLoader<string, EnhancedSku>(loader, {
     maxBatchSize: 99, // Max allowed batch size of Search API
   })
 }

packages/api/src/platforms/vtex/resolvers/product.ts

@@ -41,9 +41,10 @@ export const StoreProduct: Record<string, Resolver<Root>> & {
   name: ({ isVariantOf, name }) => name ?? isVariantOf.productName,
   slug: ({ isVariantOf: { linkText }, itemId }) => getSlug(linkText, itemId),
   description: ({ isVariantOf: { description } }) => description,
-  seo: ({ isVariantOf: { description, productName } }) => ({
+  seo: ({ isVariantOf: { description, productName, linkText } }) => ({
     title: productName,
     description,
+    canonical: `/${linkText}/p`,
   }),
   brand: ({ isVariantOf: { brand } }) => ({ name: brand }),
   breadcrumbList: ({

packages/api/src/platforms/vtex/resolvers/query.ts

@@ -1,9 +1,12 @@
 import { mutateChannelContext, mutateLocaleContext } from '../utils/contex'
 import { enhanceSku } from '../utils/enhanceSku'
+import { BadRequestError } from '../utils/errors'
 import {
   findChannel,
   findLocale,
+  findSlug,
   transformSelectedFacet,
+  findSkuId,
 } from '../utils/facets'
 import { SORT_MAP } from '../utils/sort'
 import { StoreCollection } from './collection'
@@ -22,6 +25,8 @@ export const Query = {
     // Insert channel in context for later usage
     const channel = findChannel(locator)
     const locale = findLocale(locator)
+    const id = findSkuId(locator)
+    const slug = findSlug(locator)
 
     if (channel) {
       mutateChannelContext(ctx, channel)
@@ -33,9 +38,34 @@ export const Query = {
 
     const {
       loaders: { skuLoader },
+      clients: { commerce },
     } = ctx
 
-    return skuLoader.load(locator)
+    if (id) {
+      return skuLoader.load(id)
+    }
+
+    if (slug) {
+      try {
+        const skuId = slug?.split('-').pop() ?? ''
+        const sku = await skuLoader.load(skuId)
+
+        return sku
+      } catch (e) {
+        // On standard VTEX PDP routes /slug/p does not contain sku ids. We need
+        // to figure out the sku id before returning a product
+        const products = await commerce.search.slug(slug)
+        const skuId = products?.[0]?.items[0]?.itemId
+
+        if (skuId == null) {
+          throw new BadRequestError(`Could not find product for slug ${slug}`)
+        }
+
+        return skuLoader.load(skuId)
+      }
+    }
+
+    throw new BadRequestError(`Missing slug or id`)
   },
   collection: (_: unknown, { slug }: QueryCollectionArgs, ctx: Context) => {
     const {

packages/api/src/platforms/vtex/resolvers/seo.ts

@@ -1,10 +1,10 @@
 import type { Resolver } from '..'
 
-type Root = { title?: string; description?: string }
+type Root = { title?: string; description?: string; canonical?: string }
 
 export const StoreSeo: Record<string, Resolver<Root>> = {
   title: ({ title }) => title ?? '',
   description: ({ description }) => description ?? '',
+  canonical: ({ canonical }) => canonical ?? '',
   titleTemplate: () => '',
-  canonical: () => '',
 }

packages/api/src/platforms/vtex/resolvers/validateCart.ts

@@ -105,7 +105,7 @@ const orderFormToCart = (
       orderNumber: form.orderFormId,
       acceptedOffer: form.items.map((item) => ({
         ...item,
-        product: skuLoader.load([{ key: 'id', value: item.id }]), // TODO: add channel
+        product: skuLoader.load(item.id), // TODO: add channel
       })),
     },
     messages: form.messages.map(({ text, status }) => ({

packages/api/src/platforms/vtex/utils/facets.ts

@@ -34,6 +34,12 @@ export const transformSelectedFacet = ({ key, value }: SelectedFacet) => {
   }
 }
 
+export const findSlug = (facets?: Maybe<SelectedFacet[]>) =>
+  facets?.find((x) => x.key === 'slug')?.value ?? null
+
+export const findSkuId = (facets?: Maybe<SelectedFacet[]>) =>
+  facets?.find((x) => x.key === 'id')?.value ?? null
+
 export const findLocale = (facets?: Maybe<SelectedFacet[]>) =>
   facets?.find((x) => x.key === 'locale')?.value ?? null