feat: Check products availability when setting postal code (#2817)

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

This PR intends to handle the scenario when shoppers are setting postal
code and there is no available products for that specific location.

## How it works?

For all Delivery Promises scenarios, when shoppers are setting their
postal code an input error should be displayed if there is no available
products for that location.

## How to test it?

- If there is a testing postal code with no products available you can
use it on `RegionModal` or `RegionPopover`;
- Or for local environment you can change the condition at
`useSetLocation` hook to mock the `no products` scenario;

### Starters Deploy Preview

vtex-sites/faststoreqa.store#788

---------

Co-authored-by: Larícia Mota <[email protected]>

Author: lucasfp13

packages/api/src/__generated__/schema.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

@@ -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

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

packages/api/test/integration/schema.test.ts

@@ -44,6 +44,8 @@ const documents = {
     types.ValidateCartMutationDocument,
   '\n  mutation SubscribeToNewsletter($data: IPersonNewsletter!) {\n    subscribeToNewsletter(data: $data) {\n      id\n    }\n  }\n':
     types.SubscribeToNewsletterDocument,
+  '\n  query ClientProductCountQuery($term: String) {\n    productCount(term: $term) {\n      total\n    }\n  }\n':
+    types.ClientProductCountQueryDocument,
   '\n  query ClientAllVariantProductsQuery($locator: [IStoreSelectedFacet!]!) {\n      product(locator: $locator) {\n      ...ProductSKUMatrixSidebarFragment_product\n    }\n  }\n':
     types.ClientAllVariantProductsQueryDocument,
   '\n  query ClientManyProductsQuery(\n    $first: Int!\n    $after: String\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n    $sponsoredCount: Int\n  ) {\n    ...ClientManyProducts\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      sponsoredCount: $sponsoredCount\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n        edges {\n          node {\n            ...ProductSummary_product\n          }\n        }\n      }\n    }\n  }\n':
@@ -162,6 +164,12 @@ export function gql(
 export function gql(
   source: '\n  mutation SubscribeToNewsletter($data: IPersonNewsletter!) {\n    subscribeToNewsletter(data: $data) {\n      id\n    }\n  }\n'
 ): typeof import('./graphql').SubscribeToNewsletterDocument
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(
+  source: '\n  query ClientProductCountQuery($term: String) {\n    productCount(term: $term) {\n      total\n    }\n  }\n'
+): typeof import('./graphql').ClientProductCountQueryDocument
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

packages/core/@generated/gql.ts

@@ -471,6 +471,11 @@ export type PickupStoreInfo = {
   isPickupStore: Maybe<Scalars['Boolean']['output']>
 }
 
+export type ProductCountResult = {
+  /** Total product count. */
+  total: Scalars['Int']['output']
+}
+
 export type Profile = {
   /** Collection of user's address */
   addresses: Maybe<Array<Maybe<ProfileAddress>>>
@@ -514,6 +519,8 @@ export type Query = {
   collection: StoreCollection
   /** Returns the details of a product based on the specified locator. */
   product: StoreProduct
+  /** Returns information about total product count based on VTEX segment cookie. */
+  productCount: Maybe<ProductCountResult>
   /** Returns information about the profile. */
   profile: Maybe<Profile>
   /** Returns if there's a redirect for a search. */
@@ -544,6 +551,10 @@ export type QueryProductArgs = {
   locator: Array<IStoreSelectedFacet>
 }
 
+export type QueryProductCountArgs = {
+  term: InputMaybe<Scalars['String']['input']>
+}
+
 export type QueryProfileArgs = {
   id: Scalars['String']['input']
 }
@@ -1540,6 +1551,14 @@ export type SubscribeToNewsletterMutation = {
   subscribeToNewsletter: { id: string } | null
 }
 
+export type ClientProductCountQueryQueryVariables = Exact<{
+  term: InputMaybe<Scalars['String']['input']>
+}>
+
+export type ClientProductCountQueryQuery = {
+  productCount: { total: number } | null
+}
+
 export type ClientAllVariantProductsQueryQueryVariables = Exact<{
   locator: Array<IStoreSelectedFacet> | IStoreSelectedFacet
 }>
@@ -2395,6 +2414,15 @@ export const SubscribeToNewsletterDocument = {
   SubscribeToNewsletterMutation,
   SubscribeToNewsletterMutationVariables
 >
+export const ClientProductCountQueryDocument = {
+  __meta__: {
+    operationName: 'ClientProductCountQuery',
+    operationHash: 'dc912e7272e3d9f5ced206837df87f544d39d0a5',
+  },
+} as unknown as TypedDocumentString<
+  ClientProductCountQueryQuery,
+  ClientProductCountQueryQueryVariables
+>
 export const ClientAllVariantProductsQueryDocument = {
   __meta__: {
     operationName: 'ClientAllVariantProductsQuery',

packages/core/@generated/graphql.ts

@@ -2,6 +2,8 @@ import { useState } from 'react'
 
 import type { Session } from '@faststore/sdk'
 import { sessionStore, validateSession } from 'src/sdk/session'
+import { getProductCount } from 'src/sdk/product'
+import { deliveryPromise } from 'discovery.config'
 
 interface UseSetLocationParams {
   input: string
@@ -49,6 +51,16 @@ export function useSetLocation(): UseSetLocationParams {
 
       const validatedSession = await validateSession(newSession)
 
+      if (deliveryPromise.enabled) {
+        // Check product availability for specific location
+        const productCount = await getProductCount()
+        if (productCount === 0) {
+          setErrorMessage(`There are no products available for ${postalCode}.`)
+          setLoading(false)
+          return
+        }
+      }
+
       sessionStore.set(validatedSession ?? newSession)
       resetInputField()
       onSuccess?.() // Execute the post-validation action (close modal, etc.)

packages/core/src/components/region/RegionModal/useSetLocation.ts

@@ -0,0 +1,21 @@
+import { gql } from '@generated'
+
+import type {
+  ClientProductCountQueryQuery as Query,
+  ClientProductCountQueryQueryVariables as Variables,
+} from '@generated/graphql'
+import { request } from '../graphql/request'
+
+export const query = gql(`
+  query ClientProductCountQuery($term: String) {
+    productCount(term: $term) {
+      total
+    }
+  }
+`)
+
+export const getProductCount = async (term?: string) => {
+  const { productCount } = await request<Query, Variables>(query, { term })
+
+  return productCount.total
+}

packages/core/src/sdk/product/index.ts

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