diff --git a/react/Index.tsx b/react/Index.tsx index 9023235..9128c87 100644 --- 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' })}

- {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 - + + {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 ( - - {element.productName} + {indexSpecificationGroup > -1 && indexSpecification > -1 && ( { diff --git a/react/components/SelectedItem.tsx b/react/components/SelectedItem.tsx new file mode 100644 index 0000000..e67829f --- /dev/null +++ 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 ( + + + + {properties?.find(property => property.name === 'Cor')?.values[0]} + + + + ) +} + +export default SelectedItem diff --git a/react/package.json b/react/package.json index 4c2d8a0..7994b28 100644 --- 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 index 3be38e8..e7227f3 100644 --- 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 + } + } } } -} \ No newline at end of file +} diff --git a/react/yarn.lock b/react/yarn.lock index 3d20e84..87dc156 100644 --- 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"