[FSEUS-731] Fixing autocomplete for French

vtex-apps · Nov 5, 2024 · 3978aa1 · 3978aa1
1 parent 0373bff
commit 3978aa1
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- Autocomplete not working with French language
+
 ## [3.15.9] - 2024-10-02
 
 ### Fixed

diff --git a/node/package.json b/node/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@gocommerce/utils": "^0.7.3",
-    "@vtex/api": "6.47.0",
+    "@vtex/api": "6.48.0",
     "atob": "^2.1.2",
     "axios": "^0.19.0",
     "camelcase": "^5.0.0",

diff --git a/node/yarn.lock b/node/yarn.lock
@@ -1863,10 +1863,10 @@
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
   integrity sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg==
 
-"@vtex/api@6.47.0":
-  version "6.47.0"
-  resolved "https://registry.yarnpkg.com/@vtex/api/-/api-6.47.0.tgz#6910455d593d8bb76f1f4f2b7660023853fda35e"
-  integrity sha512-t9gt7Q89EMbSj3rLhho+49Fv+/lQgiy8EPVRgtmmXFp1J4v8hIAZF7GPjCPie111KVs4eG0gfZFpmhA5dafKNA==
+"@vtex/api@6.48.0":
+  version "6.48.0"
+  resolved "https://registry.yarnpkg.com/@vtex/api/-/api-6.48.0.tgz#67f9f11d197d543d4f854b057d31a8d6999241e9"
+  integrity sha512-mAdT7gbV0/BwiuqUkNH1E7KZqTUczT5NbBBZcPJq5kmTr73PUjbR9wh//70ryJo2EAdHlqIgqgwsCVpozenlhg==
   dependencies:
     "@types/koa" "^2.11.0"
     "@types/koa-compose" "^3.2.3"
@@ -6071,7 +6071,7 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-stats-lite@vtex/node-stats-lite#dist:
+"stats-lite@github:vtex/node-stats-lite#dist":
   version "2.2.0"
   resolved "https://codeload.github.com/vtex/node-stats-lite/tar.gz/1b0d39cc41ef7aaecfd541191f877887a2044797"
   dependencies:

diff --git a/react/AutocompleteBlock.tsx b/react/AutocompleteBlock.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/prop-types */
 import type { FunctionComponent } from 'react'
@@ -175,7 +176,7 @@ const AutocompleteBlock: FunctionComponent<any & WrappedComponentProps> = ({
     if (!!product && product.length) {
       const query = {
         query: productQuery,
-        variables: { slug: product[0].slug },
+        variables: { skuId: product[0].value },
       }
 
       const { data } = await client.query(query)

diff --git a/react/components/ReviewBlock.tsx b/react/components/ReviewBlock.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable vtex/prefer-early-return */
 import type { FunctionComponent } from 'react'
@@ -53,17 +54,17 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
   }
 
   const setRestriction = async (data: any) => {
-    return Promise.all(
-      data.map(async (item: any) => {
-        const res: any = await checkRestriction(item.refid)
-
+    const promises = data.map((item: any) =>
+      checkRestriction(item.refid).then((res: any) => {
         const foundSku = res?.data?.productSuggestions?.products[0]?.items.find(
           (suggestedItem) => suggestedItem.itemId === item.sku
         )
 
         return foundSku ? item : null
       })
     )
+
+    return Promise.all(promises)
   }
 
   const [state, setReviewState] = useState<any>({
@@ -177,59 +178,54 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
       }
 
       const errorMsg = (item: any, sellerWithStock: string) => {
-        let ret: any = null
-
-        /* order of precedence for errors
-         * 1) Item not found
-         * 2) Item availability
-         * 3) Item restriction
-         */
-        const notfound = refIdNotFound.find((curr: any) => {
-          return curr.refid === item.sku && curr.sku === null
-        })
+        const { sku } = item
 
-        const found = refIdFound.find((curr: any) => {
-          return curr.refid === item.sku && curr.sku !== null
-        })
+        // Error precedence
+        const notfound = refIdNotFound.find(
+          (curr: any) => curr.refid === sku && curr.sku === null
+        )
+
+        const found = refIdFound.find(
+          (curr: any) => curr.refid === sku && curr.sku !== null
+        )
+
+        if (found?.sku && found.sellers.length === 0) {
+          return 'store/quickorder.inactive'
+        }
 
-        let selectedSellerHasPartialStock
+        // Check for stock in the selected seller
+        let selectedSellerHasPartialStock = false
         const foundHasStock =
-          (found?.sellers?.length &&
-            found.sellers.filter((seller: any) => {
-              if (seller?.id === sellerWithStock) {
-                selectedSellerHasPartialStock =
-                  seller?.availability === 'partiallyAvailable'
-              }
-
-              return (
-                seller?.availability &&
-                (seller?.availability === 'available' ||
-                  seller?.availability === 'partiallyAvailable')
-              )
-            })?.length) ||
-          0
-
-        const itemRestricted = sellerWithStock
-          ? null
-          : `store/quickorder.limited`
+          found?.sellers?.some((seller: any) => {
+            if (seller?.id === sellerWithStock) {
+              selectedSellerHasPartialStock =
+                seller.availability === 'partiallyAvailable'
+            }
+
+            return (
+              seller?.availability &&
+              (seller.availability === 'available' ||
+                seller.availability === 'partiallyAvailable')
+            )
+          }) ?? false
 
+        // Error handling for availability and restriction
         const partialStockError = selectedSellerHasPartialStock
           ? 'store/quickorder.partiallyAvailable'
           : null
 
         const availabilityError = foundHasStock
           ? partialStockError
-          : `store/quickorder.withoutStock`
+          : 'store/quickorder.withoutStock'
 
-        if (found?.sku && found?.sellers?.length === 0) {
-          return 'store/quickorder.inactive'
-        }
+        const itemRestricted = !sellerWithStock
+          ? 'store/quickorder.limited'
+          : null
 
-        ret = notfound
+        // Final return
+        return notfound
           ? 'store/quickorder.skuNotFound'
           : availabilityError ?? itemRestricted
-
-        return ret
       }
 
       if (refIdNotFound.length || refNotAvailable.length) {

diff --git a/react/queries/product.gql b/react/queries/product.gql
@@ -1,5 +1,6 @@
-query Product($slug: String) {
-  product(slug: $slug) @context(provider: "vtex.search-graphql") {
+query Product($skuId: ID!) {
+  product(identifier: { field: sku, value: $skuId })
+    @context(provider: "vtex.search-graphql") {
     productName
     items {
       itemId