From a6f6bbda8648efe8a1611ce1f8192e6b97c91b87 Mon Sep 17 00:00:00 2001
From: Victor Gerbrands <victorgerbrands@gmail.com>
Date: Mon, 7 Aug 2023 13:26:23 +0200
Subject: [PATCH] feat: add altText fallback

---
 app/[page]/opengraph-image.tsx |  2 +-
 lib/medusa/index.ts            | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/[page]/opengraph-image.tsx b/app/[page]/opengraph-image.tsx
index 2fd59281e..2e26a7cb8 100644
--- a/app/[page]/opengraph-image.tsx
+++ b/app/[page]/opengraph-image.tsx
@@ -1,5 +1,5 @@
 import OpengraphImage from 'components/opengraph-image';
-import { getPage } from 'lib/shopify';
+import { getPage } from 'lib/medusa';
 
 export const runtime = 'edge';
 
diff --git a/lib/medusa/index.ts b/lib/medusa/index.ts
index f68e95017..f95b7dc5f 100644
--- a/lib/medusa/index.ts
+++ b/lib/medusa/index.ts
@@ -5,7 +5,9 @@ import { calculateVariantAmount, computeAmount, convertToDecimal } from './helpe
 import {
   Cart,
   CartItem,
+  Image,
   MedusaCart,
+  MedusaImage,
   MedusaLineItem,
   MedusaProduct,
   MedusaProductCollection,
@@ -167,6 +169,17 @@ const reshapeLineItem = (lineItem: MedusaLineItem): CartItem => {
   };
 };
 
+const reshapeImages = (images?: MedusaImage[], productTitle?: string): Image[] => {
+  if (!images) return [];
+  return images.map((image) => {
+    const filename = image.url.match(/.*\/(.*)\..*/)![1];
+    return {
+      ...image,
+      altText: `${productTitle} - ${filename}`
+    };
+  });
+};
+
 const reshapeProduct = (product: MedusaProduct): Product => {
   const variant = product.variants?.[0];
 
@@ -192,6 +205,7 @@ const reshapeProduct = (product: MedusaProduct): Product => {
     altText: product.title ?? ''
   };
   const availableForSale = product.variants?.[0]?.purchasable || true;
+  const images = reshapeImages(product.images, product.title);
 
   const variants = product.variants.map((variant) =>
     reshapeProductVariant(variant, product.options)
@@ -202,6 +216,7 @@ const reshapeProduct = (product: MedusaProduct): Product => {
 
   return {
     ...product,
+    images,
     featuredImage,
     priceRange,
     updatedAt,