feat: Delivery Promise - navigation based on shopper location (#2716)

## What's the purpose of this pull request?

Feature branch for the Delivery Promise feature - phase 1 (navigation
based on shopper location).

- #2708 
- #2728
- #2739 
- #2745 
- #2749
- #2750
- #2768
- #2772 
- #2775
- #2809
- #2817 
- #2824 
- #2835

## How it works?


## How to test it?


### Starters Deploy Preview


## References
- [Jira epic](https://vtex-dev.atlassian.net/browse/SFS-1696)


## Checklist

- [ ] For documentation changes, ping `@Mariana-Caetano` to review and
update (Or submit a doc request)
- [ ] TODO: Request Doc for PopOver
- [ ] TODO: Remind to run cms sync in the default account when the
feature branch is merged since new section was added. (And add the new
section in the admin!)

---------

Co-authored-by: Lucas Feijó <[email protected]>
Co-authored-by: Fanny Chien <[email protected]>

Author: 3 people

packages/api/src/__generated__/schema.ts

@@ -357,17 +357,19 @@ export const VtexCommerce = (
 
       params.set(
         'items',
-        'profile.id,profile.email,profile.firstName,profile.lastName,store.channel,store.countryCode,store.cultureInfo,store.currencyCode,store.currencySymbol,authentication.customerId,'
+        'profile.id,profile.email,profile.firstName,profile.lastName,store.channel,store.countryCode,store.cultureInfo,store.currencyCode,store.currencySymbol,authentication.customerId,checkout.regionId,'
       )
 
       const headers: HeadersInit = withCookie({
         'content-type': 'application/json',
       })
 
+      const sessionCookie = parse(ctx?.headers?.cookie ?? '')?.vtex_session
+
       return fetchAPI(
         `${base}/api/sessions?${params.toString()}`,
         {
-          method: 'POST',
+          method: sessionCookie ? 'PATCH' : 'POST',
           headers,
           body: '{}',
         },

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

@@ -13,5 +13,5 @@ export interface Address {
   neighborhood: string
   complement: string
   reference: string
-  geoCoordinates: [number]
+  geoCoordinates: [number, number] // [longitude, latitude]
 }

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

@@ -36,6 +36,7 @@ export interface Profile {
 
 export interface Checkout {
   orderFormId?: Value
+  regionId?: Value
 }
 
 export interface Public {

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

@@ -16,6 +16,7 @@ import type {
   ProductSearchResult,
   Suggestion,
 } from './types/ProductSearchResult'
+import type { ProductCountResult } from './types/ProductCountResult'
 
 export type Sort =
   | 'price:desc'
@@ -265,10 +266,26 @@ export const IntelligentSearch = (
   const facets = (args: Omit<SearchArgs, 'type'>) =>
     search<FacetSearchResult>({ ...args, type: 'facets' })
 
+  const productCount = (
+    args: Pick<SearchArgs, 'query'>
+  ): Promise<ProductCountResult> => {
+    const params = new URLSearchParams()
+
+    if (args?.query) {
+      params.append('query', args.query.toString())
+    }
+
+    return fetchAPI(
+      `${base}/_v/api/intelligent-search/catalog_count?${params.toString()}`,
+      { headers }
+    )
+  }
+
   return {
     facets,
     products,
     suggestedTerms,
     topSearches,
+    productCount,
   }
 }

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

@@ -0,0 +1,6 @@
+export interface ProductCountResult {
+  /**
+   * @description Total product count.
+   */
+  total: number
+}

packages/api/src/platforms/vtex/clients/search/types/ProductCountResult.ts

@@ -8,6 +8,7 @@ import type {
   QuerySearchArgs,
   QuerySellersArgs,
   QueryShippingArgs,
+  QueryProductCountArgs,
 } from '../../../__generated__/schema'
 import { BadRequestError, NotFoundError } from '../../errors'
 import type { CategoryTree } from '../clients/commerce/types/CategoryTree'
@@ -361,4 +362,19 @@ export const Query = {
 
     return { addresses: parsedAddresses }
   },
+  productCount: async (
+    _: unknown,
+    { term }: QueryProductCountArgs,
+    ctx: Context
+  ) => {
+    const {
+      clients: { search },
+    } = ctx
+
+    const result = await search.productCount({
+      query: term ?? undefined,
+    })
+
+    return result
+  },
 }

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

@@ -1,12 +1,34 @@
 import deepEquals from 'fast-deep-equal'
 
-import ChannelMarshal from '../utils/channel'
 import type { Context } from '..'
 import type {
   MutationValidateSessionArgs,
   StoreMarketingData,
   StoreSession,
 } from '../../../__generated__/schema'
+import ChannelMarshal from '../utils/channel'
+
+async function getPreciseLocationData(
+  clients: Context['clients'],
+  country: string,
+  postalCode: string
+) {
+  try {
+    const address = await clients.commerce.checkout.address({
+      postalCode,
+      country,
+    })
+
+    const [longitude, latitude] = address.geoCoordinates
+    return { city: address.city, geoCoordinates: { latitude, longitude } }
+  } catch (err) {
+    console.error(
+      `Error while getting geo coordinates for the current postal code (${postalCode}) and country (${country}).\n`
+    )
+
+    throw err
+  }
+}
 
 export const validateSession = async (
   _: any,
@@ -15,15 +37,45 @@ export const validateSession = async (
 ): Promise<StoreSession | null> => {
   const channel = ChannelMarshal.parse(oldSession.channel ?? '')
   const postalCode = String(oldSession.postalCode ?? '')
-  const geoCoordinates = oldSession.geoCoordinates ?? null
-
   const country = oldSession.country ?? ''
+  let city = oldSession.city ?? null
+  let geoCoordinates = oldSession.geoCoordinates ?? null
+
+  // Update location data if postal code and country are provided
+  const shouldGetPreciseLocation = !city || !geoCoordinates
+  if (shouldGetPreciseLocation && postalCode !== '' && country !== '') {
+    const preciseLocation = await getPreciseLocationData(
+      clients,
+      country,
+      postalCode
+    )
+    city = preciseLocation.city
+    geoCoordinates = preciseLocation.geoCoordinates
+  }
 
+  /**
+   * The Session Manager API (https://developers.vtex.com/docs/api-reference/session-manager-api#patch-/api/sessions) adds the query params to the session public namespace.
+   * This is used by Checkout (checkout-session) and Intelligent Search (search-session)
+   */
   const params = new URLSearchParams(search)
   const salesChannel = params.get('sc') ?? channel.salesChannel
-
   params.set('sc', salesChannel)
 
+  if (!!postalCode) {
+    params.set('postalCode', postalCode)
+  }
+
+  if (!!country) {
+    params.set('country', country)
+  }
+
+  if (!!geoCoordinates) {
+    params.set(
+      'geoCoordinates',
+      `${geoCoordinates.latitude},${geoCoordinates.longitude}`
+    )
+  }
+
   const { marketingData: oldMarketingData } = oldSession
 
   const marketingData: StoreMarketingData = {
@@ -36,24 +88,27 @@ export const validateSession = async (
     utmiPart: params.get('utmi_pc') ?? oldMarketingData?.utmiPart ?? '',
   }
 
-  const [regionData, sessionData] = await Promise.all([
-    postalCode || geoCoordinates
-      ? clients.commerce.checkout.region({
-          postalCode,
-          geoCoordinates,
-          country,
-          salesChannel,
-        })
-      : Promise.resolve(null),
-    clients.commerce.session(params.toString()).catch(() => null),
-  ])
+  const sessionData = await clients.commerce
+    .session(params.toString())
+    .catch(() => null)
 
   const profile = sessionData?.namespaces.profile ?? null
   const store = sessionData?.namespaces.store ?? null
   const authentication = sessionData?.namespaces.authentication ?? null
-  const region = regionData?.[0]
+  const checkout = sessionData?.namespaces.checkout ?? null
+
   // Set seller only if it's inside a region
-  const seller = region?.sellers.find((seller) => channel.seller === seller.id)
+  let seller
+  if (!!channel.seller && (postalCode || geoCoordinates)) {
+    const regionData = await clients.commerce.checkout.region({
+      postalCode,
+      geoCoordinates,
+      country,
+      salesChannel,
+    })
+    const region = regionData?.[0]
+    seller = region?.sellers.find((seller) => channel.seller === seller.id)
+  }
 
   const newSession = {
     ...oldSession,
@@ -64,7 +119,7 @@ export const validateSession = async (
     country: store?.countryCode?.value ?? oldSession.country,
     channel: ChannelMarshal.stringify({
       salesChannel: store?.channel?.value ?? channel.salesChannel,
-      regionId: region?.id ?? channel.regionId,
+      regionId: checkout?.regionId?.value ?? channel.regionId,
       seller: seller?.id,
       hasOnlyDefaultSalesChannel: !store?.channel?.value,
     }),
@@ -80,6 +135,8 @@ export const validateSession = async (
           familyName: profile.lastName?.value ?? '',
         }
       : null,
+    geoCoordinates,
+    city,
   }
 
   if (deepEquals(oldSession, newSession)) {

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

@@ -199,6 +199,13 @@ input IGeoCoordinates {
   longitude: Float!
 }
 
+type ProductCountResult {
+  """
+  Total product count.
+  """
+  total: Int!
+}
+
 type Query {
   """
   Returns the details of a product based on the specified locator.
@@ -349,6 +356,17 @@ type Query {
     id: String!
   ): Profile
     @cacheControl(scope: "public", sMaxAge: 120, staleWhileRevalidate: 3600)
+
+  """
+  Returns the total product count information based on a specific location accessible through the VTEX segment cookie.
+  """
+  productCount(
+    """
+    Search term.
+    """
+    term: String
+  ): ProductCountResult
+    @cacheControl(scope: "public", sMaxAge: 120, staleWhileRevalidate: 3600)
 }
 
 """

packages/api/src/typeDefs/query.graphql

@@ -159,6 +159,10 @@ type StoreSession {
   """
   addressType: String
   """
+  Session city.
+  """
+  city: String
+  """
   Session postal code.
   """
   postalCode: String
@@ -217,6 +221,10 @@ input IStoreSession {
   """
   addressType: String
   """
+  Session input city.
+  """
+  city: String
+  """
   Session input postal code.
   """
   postalCode: String

packages/api/src/typeDefs/session.graphql

@@ -68,6 +68,7 @@ const QUERIES = [
   'redirect',
   'sellers',
   'profile',
+  'productCount',
 ]
 
 const MUTATIONS = ['validateCart', 'validateSession', 'subscribeToNewsletter']