feat: PDP regionalization

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

@@ -39,6 +39,7 @@ export interface SearchArgs {
   showInvisibleItems?: boolean
   showSponsored?: boolean
   sponsoredCount?: number
+  regionId?: string
 }
 
 export interface ProductLocator {
@@ -101,24 +102,30 @@ export const IntelligentSearch = (
     }
   }
 
-  const getRegionFacet = (): IStoreSelectedFacet | null => {
-    const { regionId, seller } = ctx.storage.channel
+  const getRegionFacet = (
+    queryRegionId?: string
+  ): IStoreSelectedFacet | null => {
+    const { regionId: channelRegionId, seller } = ctx.storage.channel
     const sellerRegionId = seller
       ? Buffer.from(`SW#${seller}`).toString('base64')
       : null
-    const facet = sellerRegionId ?? regionId
+    const regionId = sellerRegionId ?? channelRegionId
+    const regionFacet = regionId ?? queryRegionId
 
-    if (!facet) {
+    if (!regionFacet) {
       return null
     }
 
     return {
       key: REGION_KEY,
-      value: facet,
+      value: regionFacet,
     }
   }
 
-  const addDefaultFacets = (facets: SelectedFacet[]) => {
+  const addDefaultFacets = (
+    facets: SelectedFacet[],
+    queryRegionId?: string
+  ) => {
     const withDefaultFacets = facets.filter(
       ({ key }) => !EXTRA_FACETS_KEYS.has(key)
     )
@@ -127,7 +134,8 @@ export const IntelligentSearch = (
       facets.find(({ key }) => key === POLICY_KEY) ?? getPolicyFacet()
 
     const regionFacet =
-      facets.find(({ key }) => key === REGION_KEY) ?? getRegionFacet()
+      facets.find(({ key }) => key === REGION_KEY) ??
+      getRegionFacet(queryRegionId)
 
     if (policyFacet !== null) {
       withDefaultFacets.push(policyFacet)
@@ -165,6 +173,7 @@ export const IntelligentSearch = (
     type,
     showInvisibleItems,
     sponsoredCount,
+    regionId = undefined,
   }: SearchArgs): Promise<T> => {
     const params = new URLSearchParams({
       page: (page + 1).toString(),
@@ -196,7 +205,7 @@ export const IntelligentSearch = (
       params.append('sponsoredCount', sponsoredCount.toString())
     }
 
-    const pathname = addDefaultFacets(selectedFacets)
+    const pathname = addDefaultFacets(selectedFacets, regionId)
       .map(({ key, value }) => `${key}/${value}`)
       .join('/')
 

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

@@ -9,6 +9,7 @@ import {
   findSkuId,
   findSlug,
   transformSelectedFacet,
+  findRegionId,
 } from '../utils/facets'
 import { SORT_MAP } from '../utils/sort'
 import { StoreCollection } from './collection'
@@ -34,6 +35,7 @@ export const Query = {
     const locale = findLocale(locator)
     const id = findSkuId(locator)
     const slug = findSlug(locator)
+    const regionId = findRegionId(locator)
 
     if (channel) {
       mutateChannelContext(ctx, channel)
@@ -92,6 +94,7 @@ export const Query = {
         page: 0,
         count: 1,
         query: `product:${route.id}`,
+        regionId,
       })
 
       if (!product) {

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

@@ -98,3 +98,9 @@ export const findLocale = (facets?: Maybe<SelectedFacet[]>) =>
 
 export const findChannel = (facets?: Maybe<SelectedFacet[]>) =>
   facets?.find((facet) => facet.key === 'channel')?.value ?? null
+
+export const findRegionId = (facets?: Maybe<SelectedFacet[]>) => {
+  const regionId = facets?.find((facet) => facet.key === 'regionId')?.value
+
+  return regionId && regionId !== '' ? regionId : undefined
+}

packages/cli/src/utils/generate.ts

@@ -373,7 +373,7 @@ function checkDependencies(basePath: string, packagesToCheck: string[]) {
       logger.warn(
         `${chalk.yellow(
           'warning'
-        )} - Version mismatch detected for ${packageName}. 
+        )} - Version mismatch detected for ${packageName}.
           Core: ${coreVersion}, Customization: ${rootVersion}. Please align both versions to prevent issues`
       )
     }
@@ -513,6 +513,27 @@ function enableSearchSSR(basePath: string) {
   writeFileSync(searchPagePath, searchPageWithSSR)
 }
 
+function enablePdpSSR(basePath: string) {
+  const storeConfigPath = getCurrentUserStoreConfigFile(basePath)
+
+  if (!storeConfigPath) {
+    return
+  }
+
+  const storeConfig = require(storeConfigPath)
+  if (!storeConfig.experimental.enablePdpSSR) {
+    return
+  }
+
+  const { tmpDir } = withBasePath(basePath)
+  const pdpPath = path.join(tmpDir, 'src', 'pages', 'p.tsx')
+  const pdpData = String(readFileSync(pdpPath))
+
+  const pdpWithSSR = pdpData.replaceAll('getStaticProps', 'getServerSideProps')
+
+  writeFileSync(pdpPath, pdpWithSSR)
+}
+
 export async function generate(options: GenerateOptions) {
   const { basePath, setup = false } = options
 
@@ -533,6 +554,7 @@ export async function generate(options: GenerateOptions) {
     setupPromise,
     checkDependencies(basePath, ['typescript']),
     enableSearchSSR(basePath),
+    enablePdpSSR(basePath),
     updateBuildTime(basePath),
     copyUserStarterToCustomizations(basePath),
     copyTheme(basePath),

packages/core/discovery.config.default.js

@@ -116,5 +116,6 @@ module.exports = {
     preact: false,
     enableRedirects: false,
     enableSearchSSR: false,
+    enablePdpSSR: false,
   },
 }

packages/core/src/components/region/RegionModal/RegionModal.tsx

@@ -4,8 +4,10 @@ import {
   useUI,
 } from '@faststore/ui'
 import { useRef, useState } from 'react'
+import type { Session } from '@faststore/sdk'
 
 import { sessionStore, useSession, validateSession } from 'src/sdk/session'
+import { setCookie } from 'src/utils/cookies'
 
 import dynamic from 'next/dynamic'
 import styles from './section.module.scss'
@@ -36,6 +38,17 @@ interface RegionModalProps {
   }
 }
 
+async function setRegionIdCookie(session: Session) {
+  const ONE_WEEK_SECONDS = 7 * 24 * 3600
+  const channel = JSON.parse(session.channel ?? 'null')
+
+  setCookie(
+    'vtex-faststore-regionid',
+    channel?.regionId as string,
+    ONE_WEEK_SECONDS
+  )
+}
+
 function RegionModal({
   title,
   description,
@@ -70,6 +83,9 @@ function RegionModal({
 
       const validatedSession = await validateSession(newSession)
 
+      // Set cookie for the regionId
+      await setRegionIdCookie(validatedSession ?? newSession)
+
       sessionStore.set(validatedSession ?? newSession)
     } catch (error) {
       setErrorMessage(inputFieldErrorMessage)

packages/core/src/experimental/pdpServerSideFunctions/getServerSideProps.ts

@@ -0,0 +1,153 @@
+import type { GetServerSideProps } from 'next'
+import type { Locator } from '@vtex/client-cms'
+import { isNotFoundError } from '@faststore/api'
+
+import {
+  getGlobalSectionsData,
+  type GlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+import { execute } from 'src/server'
+import { getPDP, type PDPContentType } from 'src/server/cms/pdp'
+import { gql } from '@generated'
+import type {
+  ServerProductQueryQuery,
+  ServerProductQueryQueryVariables,
+} from '@generated/graphql'
+import storeConfig from 'discovery.config'
+import type { PDPProps, StoreConfig } from './getStaticProps'
+
+const query = gql(`
+  query ServerProductQuery($locator: [IStoreSelectedFacet!]!) {
+    ...ServerProduct
+    product(locator: $locator) {
+      id: productID
+
+      seo {
+        title
+        description
+        canonical
+      }
+
+      brand {
+        name
+      }
+
+      sku
+      gtin
+      name
+      description
+      releaseDate
+
+      breadcrumbList {
+        itemListElement {
+          item
+          name
+          position
+        }
+      }
+
+      image {
+        url
+        alternateName
+      }
+
+      offers {
+        lowPrice
+        highPrice
+        lowPriceWithTaxes
+        priceCurrency
+        offers {
+          availability
+          price
+          priceValidUntil
+          priceCurrency
+          itemCondition
+          seller {
+            identifier
+          }
+        }
+      }
+
+      isVariantOf {
+        productGroupID
+      }
+
+      ...ProductDetailsFragment_product
+    }
+  }
+`)
+
+export const getServerSideProps: GetServerSideProps<
+  PDPProps,
+  { slug: string },
+  Locator
+> = async ({ params, previewData, req, res }) => {
+  const slug = params?.slug ?? ''
+  const regionId = req.cookies['vtex-faststore-regionid'] ?? ''
+
+  const { data, errors = [] } = await execute<
+    ServerProductQueryQueryVariables,
+    ServerProductQueryQuery
+  >({
+    variables: {
+      locator: [
+        { key: 'slug', value: slug },
+        { key: 'regionId', value: regionId },
+      ],
+    },
+    operation: query,
+  })
+
+  const notFound = errors.find(isNotFoundError)
+
+  if (notFound) {
+    return {
+      notFound: true,
+    }
+  }
+
+  if (errors.length > 0) {
+    throw errors[0]
+  }
+
+  const globalSections = await getGlobalSectionsData(previewData)
+  const cmsPage: PDPContentType = await getPDP(data.product, previewData)
+
+  const { seo } = data.product
+  const meta = {
+    title: seo.title || storeConfig.seo.title,
+    description: seo.description || storeConfig.seo.description,
+    canonical: `${storeConfig.storeUrl}${seo.canonical}`,
+  }
+
+  let offer = {}
+  if (data.product.offers.offers.length > 0) {
+    const { listPrice, ...offerData } = data.product.offers.offers[0]
+
+    offer = offerData
+  }
+
+  const offers = {
+    ...offer,
+    priceCurrency: data.product.offers.priceCurrency,
+    url: meta.canonical,
+  }
+
+  // 5 minutes of fresh content and 1 year of stale content
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=300, stale-while-revalidate=31536000, stale-if-error=31536000'
+  )
+
+  return {
+    props: {
+      data,
+      ...cmsPage,
+      meta,
+      offers,
+      globalSections,
+      key: seo.canonical,
+    },
+    revalidate: (storeConfig as StoreConfig).experimental.revalidate ?? false,
+  }
+}