feat: reshape products

app/product/[handle]/page.tsx

@@ -28,8 +28,8 @@ export async function generateMetadata({
   const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
 
   return {
-    title: product.seo.title || product.title,
-    description: product.seo.description || product.description,
+    title: product.seo?.title || product.title,
+    description: product.seo?.description || product.description,
     robots: {
       index: hide,
       follow: hide,
@@ -61,6 +61,7 @@ export default async function ProductPage({ params }: { params: { handle: string
   return (
     <div>
       <div className="lg:grid lg:grid-cols-6">
+        {product.images && (
           <div className="lg:col-span-4">
             <Gallery
               title={product.title}
@@ -68,10 +69,11 @@ export default async function ProductPage({ params }: { params: { handle: string
               currencyCode={product.priceRange.maxVariantPrice.currencyCode}
               images={product.images.map((image: Image) => ({
                 src: image.url,
-              altText: image.altText
+                altText: image.altText ?? ''
               }))}
             />
           </div>
+        )}
 
         <div className="p-6 lg:col-span-2">
           {/* @ts-expect-error Server Component */}

lib/medusa/index.ts

@@ -66,9 +66,6 @@ const reshapeCart = (cart: MedusaCart): Cart => {
 };
 
 const reshapeProduct = (product: MedusaProduct): Product => {
-  const featuredImage = {
-    url: product.images?.[0]?.url ?? ''
-  };
   const priceRange = {
     maxVariantPrice: {
       amount: product.variants?.[0]?.prices?.[0]?.amount.toString() ?? '',
@@ -76,12 +73,22 @@ const reshapeProduct = (product: MedusaProduct): Product => {
     }
   };
   const updatedAt = product.updated_at;
+  const tags = product.tags?.map((tag) => tag.value) || [];
+  const descriptionHtml = product.description ?? '';
+  const featuredImage = {
+    url: product.images?.[0]?.url ?? '',
+    altText: product.images?.[0]?.id ?? ''
+  };
+  const availableForSale = true;
 
   return {
     ...product,
     featuredImage,
     priceRange,
-    updatedAt
+    updatedAt,
+    tags,
+    descriptionHtml,
+    availableForSale
   };
 };
 

lib/medusa/types.ts

@@ -27,10 +27,10 @@ export type MedusaProduct = {
   handle?: string | null;
   is_giftcard: boolean;
   status?: 'draft' | 'proposed' | 'published' | 'rejected';
-  images?: Array<Image>;
+  images?: Array<MedusaImage>;
   thumbnail?: string | null;
   options?: Array<ProductOption>;
-  variants?: Array<ProductVariant>;
+  variants: Array<ProductVariant>;
   categories?: Array<ProductCategory>;
   profile_id?: string | null;
   profile?: ShippingProfile | null;
@@ -49,11 +49,14 @@ export type MedusaProduct = {
   deleted_at: Date | null;
   type_id: string;
   material?: string | null;
+  tags?: ProductTag[];
 };
 
-export type Product = MedusaProduct & {
-  featuredImage: {
-    url: string;
+export type Product = Omit<MedusaProduct, 'tags'> & {
+  featuredImage: FeaturedImage;
+  seo?: {
+    title?: string;
+    description?: string;
   };
   priceRange: {
     maxVariantPrice: {
@@ -62,9 +65,28 @@ export type Product = MedusaProduct & {
     };
   };
   updatedAt: Date;
+  descriptionHtml: string;
+  tags: Array<string>;
+  availableForSale: boolean;
 };
 
-export type Image = {
+export type FeaturedImage = {
+  url: string;
+  width?: number;
+  height?: number;
+  altText: string;
+};
+
+export type ProductTag = {
+  id: string;
+  value: string;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  metadata?: Record<string, unknown> | null;
+};
+
+export type MedusaImage = {
   id: string;
   url: string;
   created_at: string;
@@ -73,6 +95,10 @@ export type Image = {
   metadata?: { [key: string]: string } | null;
 };
 
+export type Image = MedusaImage & {
+  altText?: string;
+};
+
 export type ShippingProfile = {
   id: string;
   name: string;