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 :)

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 ?? '',