From c2e6417f70afd29f68b4c08e1b24e78a1b5e1944 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Thu, 31 Aug 2023 19:18:47 -0700
Subject: [PATCH] wip: Saving work

---
 app/[locale]/product/[handle]/page.tsx |  6 +++++
 components/product/tasting-notes.tsx   | 35 ++++++++++++++++++++++++++
 lib/shopify/types.ts                   |  8 ++++++
 3 files changed, 49 insertions(+)
 create mode 100644 components/product/tasting-notes.tsx

diff --git a/app/[locale]/product/[handle]/page.tsx b/app/[locale]/product/[handle]/page.tsx
index 7a45327e7..861e60bfd 100644
--- a/app/[locale]/product/[handle]/page.tsx
+++ b/app/[locale]/product/[handle]/page.tsx
@@ -9,6 +9,7 @@ import Label from 'components/label';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Price from 'components/price';
 import { ProductDescription } from 'components/product/product-description';
+import { ProductTastingNotes } from 'components/product/tasting-notes';
 import { VariantSelector } from 'components/product/variant-selector';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
@@ -72,6 +73,7 @@ export default async function ProductPage({
     handle: params.handle,
     language: params?.locale?.toUpperCase()
   });
+
   let otherImages: MediaImage[] = [];
   if (!!product) {
     otherImages = product.images
@@ -151,6 +153,10 @@ export default async function ProductPage({
             </div>
           </div>
 
+          <div>
+            <ProductTastingNotes product={product} />
+          </div>
+
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {!!otherImages &&
               otherImages?.length > 0 &&
diff --git a/components/product/tasting-notes.tsx b/components/product/tasting-notes.tsx
new file mode 100644
index 000000000..737463cf7
--- /dev/null
+++ b/components/product/tasting-notes.tsx
@@ -0,0 +1,35 @@
+import Prose from 'components/prose';
+import { Product } from 'lib/shopify/types';
+import Image from 'next/image';
+
+export function ProductTastingNotes({ product }: { product: Product }) {
+  const notes = product?.notes?.value;
+  const imageUrl = product?.notesImage?.reference?.image?.url;
+  const imageWidth = product?.notesImage?.reference?.image?.width;
+  const imageHeight = product?.notesImage?.reference?.image?.height;
+  const imageAlt = product?.notesImage?.reference?.image?.altText;
+
+  if (!imageUrl && !imageWidth && !imageHeight) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col justify-between space-y-6 px-6 md:flex-row md:space-x-6 md:space-y-0">
+      {!!notes ? (
+        <div>
+          <Prose className="mb-6 text-lg leading-tight dark:text-white/[60%]" html={notes} />
+        </div>
+      ) : null}
+      {imageUrl && imageHeight && imageWidth && (
+        <div>
+          <Image
+            src={imageUrl}
+            width={imageWidth}
+            height={imageHeight}
+            alt={imageAlt || imageUrl}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 9441d78af..cd7696c85 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -149,6 +149,14 @@ export type ShopifyProduct = {
   summary: {
     value: string;
   };
+  notes?: {
+    value?: string;
+  };
+  notesImage?: {
+    reference: {
+      image: Image;
+    };
+  };
   options: ProductOption[];
   priceRange: {
     maxVariantPrice: Money;