From 17584680c478b428b08b302df5fab03df69feab5 Mon Sep 17 00:00:00 2001
From: Guilherme Carvalho <guilherme.carvalho@vtex.com.br>
Date: Mon, 4 Mar 2024 11:21:33 -0300
Subject: [PATCH] Allow different images per specification (#2245)

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

The goal of this PR is to allow merchants to pick different SKU selector
images for different SKU specifications. The current solution only
allows one image to be picked for all Specifications. So a product with
more than one Specification would look like this:

<img width="178" alt="image"
src="https://github.com/vtex/faststore/assets/77246/5e263c65-4ff6-4692-b250-266f3e2c7f9e">

If this PR gets merged, given the two Specifications (Material and Size)
and properly labeled images (`skuvariationmaterial` and
`skuvariationsize`) merchants can pick different images for each
variation, the end result being:

<img width="217" alt="image"
src="https://github.com/vtex/faststore/assets/77246/df61d46e-cceb-4694-a00d-8af9fd514182">

The name of the label and the fact that it has to be allinasingleword is
a limitation of how the Catalog image uploader handles non-alphanumeric
characters.

## How to test it?

Go to the [starter deploy
preview](https://sfj-2f52717--starter.preview.vtex.app/awesome-chair-99988217/p)
and look for Awesome Chair. You should see different images for each SKU
Selector. If you go to the [production
starter](https://starter.vtex.app/awesome-chair-99988217/p) you will see
the same image on both SKU Selectors.

## References

I had to figure out a lot of things to create this new product (Awesome
Chair) and [this
doc](https://help.vtex.com/en/tutorial/cadastrar-especificacoes-ou-campos-de-sku--tutorials_119)
is what made everything click regarding SKUs and Specifications, you
should check it out :)
---
 .../src/platforms/vtex/utils/skuVariants.ts   | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/api/src/platforms/vtex/utils/skuVariants.ts b/packages/api/src/platforms/vtex/utils/skuVariants.ts
index f82011891c..079811d2d4 100644
--- a/packages/api/src/platforms/vtex/utils/skuVariants.ts
+++ b/packages/api/src/platforms/vtex/utils/skuVariants.ts
@@ -14,12 +14,27 @@ type FormattedSkuVariant = {
 
 const SKU_IMAGE_LABEL = 'skuvariation'
 
-function findSkuVariantImage(availableImages: Item['images']) {
-  return (
-    availableImages.find(
-      (imageProperties) => imageProperties.imageLabel === SKU_IMAGE_LABEL
-    ) ?? availableImages[0]
+function findSkuVariantImage(
+  availableImages: Item['images'],
+  variationName?: string
+) {
+  const variationSpecificImageLabel =
+    `${SKU_IMAGE_LABEL}${variationName}`.toLowerCase()
+
+  const variationSpecificImage = availableImages.find(
+    (imageProperties) =>
+      imageProperties.imageLabel === variationSpecificImageLabel
+  )
+
+  if (variationSpecificImage) {
+    return variationSpecificImage
+  }
+
+  const skuImage = availableImages.find(
+    (imageProperties) => imageProperties.imageLabel === SKU_IMAGE_LABEL
   )
+
+  return skuImage ? skuImage : availableImages[0]
 }
 
 export function createSlugsMap(
@@ -143,8 +158,6 @@ export function getFormattedVariations(
       return
     }
 
-    const variantImageToUse = findSkuVariantImage(variant.images)
-
     const dominantVariantEntry = variant.variations.find(
       (variation) => variation.name === dominantVariantName
     )
@@ -164,6 +177,8 @@ export function getFormattedVariations(
 
       previouslySeenPropertyValues.add(nameValueIdentifier)
 
+      const variantImageToUse = findSkuVariantImage(variant.images, dominantVariantName)
+
       const formattedVariant = {
         src: variantImageToUse.imageUrl,
         alt: variantImageToUse.imageLabel ?? '',
@@ -189,6 +204,8 @@ export function getFormattedVariations(
 
       previouslySeenPropertyValues.add(nameValueIdentifier)
 
+      const variantImageToUse = findSkuVariantImage(variant.images, variationProperty.name)
+
       const formattedVariant = {
         src: variantImageToUse.imageUrl,
         alt: variantImageToUse.imageText ?? '',