Merge pull request #2 from beightone/fix/PROS-83

Feat: add unavailable class
beightone · Sep 12, 2023 · da6a472 · da6a472
2 parents 79732ed + 23f622e
commit da6a472
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 38 deletions.
diff --git a/react/Index.tsx b/react/Index.tsx
@@ -3,10 +3,11 @@ import type { ProductTypes } from 'vtex.product-context'
 import { useProduct } from 'vtex.product-context'
 import { useQuery } from 'react-apollo'
 import { useCssHandles } from 'vtex.css-handles'
-import { useRuntime, Link } from 'vtex.render-runtime'
+import { Link } from 'vtex.render-runtime'
 import { useIntl } from 'react-intl'
 
 import productRecommendationsQuery from './queries/productRecommendations.gql'
+import SelectedItem from './components/SelectedItem'
 
 interface SimilarProductsVariantsProps {
   productQuery: {
@@ -20,25 +21,35 @@ interface SimilarProductsVariantsProps {
     specificationName: string
   }
 }
+interface Item {
+  sellers?: Seller[]
+}
+
+interface Seller {
+  commertialOffer: CommercialOffer
+}
+interface CommercialOffer {
+  AvailableQuantity: number
+}
 
 const CSS_HANDLES = [
   'variants',
   'title',
   'var-wrap',
   'img_wrap',
+  'text_wrap',
   'img',
   'textLabel',
+  'unavailable',
 ] as const
 
 function SimilarProductsVariants({
   productQuery,
-  imageLabel,
   textLabel,
 }: SimilarProductsVariantsProps) {
   const handles = useCssHandles(CSS_HANDLES)
   const intl = useIntl()
   const productContext = useProduct()
-  const { route } = useRuntime()
   const productId =
     productQuery?.product?.productId ?? productContext?.product?.productId
 
@@ -84,20 +95,8 @@ function SimilarProductsVariants({
         {intl.formatMessage({ id: 'store/title.label' })}
       </p>
       <div className={handles['var-wrap']}>
-        {items.map((element: ProductTypes.Product) => {
-          const imageIndex =
-            imageLabel === undefined
-              ? 0
-              : element.items[0].images.findIndex(
-                  image => image.imageLabel === imageLabel
-                ) === -1
-              ? 0
-              : element.items[0].images.findIndex(
-                  image => image.imageLabel === imageLabel
-                )
-
-          const srcImage = element.items[0].images[imageIndex].imageUrl
-
+        <SelectedItem />
+        {items.map((element: ProductTypes.Product & Item) => {
           // Labels
           let indexSpecificationGroup = -1
           let indexSpecification = -1
@@ -129,11 +128,18 @@ function SimilarProductsVariants({
             }
           }
 
+          let isAvailable = false
+
+          if (element) {
+            isAvailable =
+              element.items[0].sellers[0].commertialOffer.AvailableQuantity > 0
+          }
+
           return (
             <Link
               key={element.productId}
-              className={`${handles.img_wrap}${
-                route?.params?.slug === element.linkText ? '--is-active' : ''
+              className={`${handles.img_wrap} ${
+                isAvailable ? '' : handles.unavailable
               }`}
               {...{
                 page: 'store.product',
@@ -143,19 +149,7 @@ function SimilarProductsVariants({
                 },
               }}
             >
-              <span
-                className={`${handles.img_wrap}${
-                  route?.params?.slug === element.linkText ? '--is-active' : ''
-                }`}
-              >
-                <img
-                  src={srcImage}
-                  alt={element.productName}
-                  height="50px"
-                  className={`${handles.img} mr3 ${
-                    route?.params?.slug === element.linkText ? 'o-50' : ''
-                  }`}
-                />
+              <span className={`${handles.text_wrap}`}>
                 {indexSpecificationGroup > -1 && indexSpecification > -1 && (
                   <span className={`${handles.textLabel}`}>
                     {

diff --git a/react/components/SelectedItem.tsx b/react/components/SelectedItem.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { useCssHandles } from 'vtex.css-handles'
+import { useProduct } from 'vtex.product-context'
+import { Link } from 'vtex.render-runtime'
+
+const CSS_HANDLES = [
+  'img_wrap',
+  'text_wrap',
+  'textLabel',
+  'selectedItem',
+] as const
+
+const SelectedItem = () => {
+  const handles = useCssHandles(CSS_HANDLES)
+  const productContext = useProduct()
+  const { linkText, productId, properties } = productContext?.product ?? {}
+
+  return (
+    <Link
+      className={`${handles.img_wrap} ${handles.selectedItem}`}
+      {...{
+        page: 'store.product',
+        params: {
+          slug: linkText,
+          id: productId,
+        },
+      }}
+    >
+      <span className={`${handles.text_wrap}`}>
+        <span className={`${handles.textLabel}`}>
+          {properties?.find(property => property.name === 'Cor')?.values[0]}
+        </span>
+      </span>
+    </Link>
+  )
+}
+
+export default SelectedItem
diff --git a/react/package.json b/react/package.json
@@ -19,12 +19,13 @@
     "@vtex/tsconfig": "^0.4.4",
     "apollo-cache-inmemory": "^1.6.5",
     "graphql": "^14.6.0",
+    "proshow.similar-products-variants": "https://pros83--proshow.myvtex.com/_v/private/typings/linked/v1/proshow.similar-products-variants@0.1.0+build1694194952/public/@types/proshow.similar-products-variants",
     "typescript": "3.9.7",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
     "vtex.order-items": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-items@0.13.21/public/@types/vtex.order-items",
     "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.12.0/public/@types/vtex.order-manager",
     "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.0/public/@types/vtex.render-runtime",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.1/public/@types/vtex.render-runtime",
     "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.55.0/public/@types/vtex.search-graphql",
     "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.91.0/public/@types/vtex.store-resources",
     "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"

diff --git a/react/queries/productRecommendations.gql b/react/queries/productRecommendations.gql
@@ -15,7 +15,7 @@ query ProductRecommendations(
         values
       }
     }
-    items {
+    items(filter: ALL_AVAILABLE) {
       images {
         imageLabel
         imageUrl
@@ -24,6 +24,11 @@ query ProductRecommendations(
         name
         values
       }
+      sellers {
+        commertialOffer {
+          AvailableQuantity
+        }
+      }
     }
   }
-}
+}
diff --git a/react/yarn.lock b/react/yarn.lock
@@ -4352,6 +4352,10 @@ prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+"proshow.similar-products-variants@https://pros83--proshow.myvtex.com/_v/private/typings/linked/v1/proshow.similar-products-variants@0.1.0+build1694194952/public/@types/proshow.similar-products-variants":
+  version "0.1.0"
+  resolved "https://pros83--proshow.myvtex.com/_v/private/typings/linked/v1/proshow.similar-products-variants@0.1.0+build1694194952/public/@types/proshow.similar-products-variants#ca11c9b8319f093b008464fbc598f0f8e6198f68"
+
 psl@^1.1.28:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -5280,9 +5284,9 @@ verror@1.10.0:
   version "0.10.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"
 
-"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.0/public/@types/vtex.render-runtime":
-  version "8.134.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.0/public/@types/vtex.render-runtime#ee5a73993a75e45de60ccceac1ef74ab6b9202a3"
+"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.1/public/@types/vtex.render-runtime":
+  version "8.134.1"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.1/public/@types/vtex.render-runtime#da48779c477fbef1521010718b0f779ee1ae1ffe"
 
 "vtex.search-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.55.0/public/@types/vtex.search-graphql":
   version "0.55.0"