From 274c2e6980ceb68e9c8ca2ec2dfd6491eaf4a905 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Tue, 26 Nov 2024 14:54:41 -0800
Subject: [PATCH] Lil merch updates (#9984)

---
 gatsby/createSchemaCustomization.ts     |  1 +
 gatsby/sourceNodes.ts                   |  1 +
 src/pages/merch.tsx                     |  1 +
 src/templates/merch/BackInStockForm.tsx |  5 ++++-
 src/templates/merch/Product.tsx         |  1 +
 src/templates/merch/ProductPanel.tsx    |  8 ++++---
 src/templates/merch/SizeGuide.tsx       | 29 +++++++++++++++++++++++++
 src/templates/merch/index.tsx           |  1 +
 8 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/templates/merch/SizeGuide.tsx

diff --git a/gatsby/createSchemaCustomization.ts b/gatsby/createSchemaCustomization.ts
index 7438ccfce..d69a6baba 100644
--- a/gatsby/createSchemaCustomization.ts
+++ b/gatsby/createSchemaCustomization.ts
@@ -328,6 +328,7 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization']
               originalSrc: String
             }
             type ShopifyProduct implements Node {
+              descriptionHtml: String
               description: String!
               featuredMedia: ShopifyMedia
               handle: String!
diff --git a/gatsby/sourceNodes.ts b/gatsby/sourceNodes.ts
index 80892e66c..17df68fbe 100644
--- a/gatsby/sourceNodes.ts
+++ b/gatsby/sourceNodes.ts
@@ -400,6 +400,7 @@ export const sourceNodes: GatsbyNode['sourceNodes'] = async ({ actions, createCo
               products(first: 250) {
                 nodes {
                   description
+                  descriptionHtml
                   featuredMedia {
                     preview {
                       image {
diff --git a/src/pages/merch.tsx b/src/pages/merch.tsx
index 97a117ea9..2d8eab80a 100644
--- a/src/pages/merch.tsx
+++ b/src/pages/merch.tsx
@@ -18,6 +18,7 @@ export const query = graphql`
             handle
             products {
                 description
+                descriptionHtml
                 featuredMedia {
                     preview {
                         image {
diff --git a/src/templates/merch/BackInStockForm.tsx b/src/templates/merch/BackInStockForm.tsx
index e167330e3..5ef0b8534 100644
--- a/src/templates/merch/BackInStockForm.tsx
+++ b/src/templates/merch/BackInStockForm.tsx
@@ -2,12 +2,15 @@ import React, { useState } from 'react'
 import { CallToAction } from 'components/CallToAction'
 import usePostHog from 'hooks/usePostHog'
 
-export function BackInStockForm({ product }): React.ReactElement {
+export function BackInStockForm({ variant }) {
     const [email, setEmail] = useState('')
     const [submitted, setSubmitted] = useState(false)
     const posthog = usePostHog()
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
+        const title = variant?.product?.title
+        const size = variant?.selectedOptions?.find((o: any) => o.name === 'Size')?.value || 'N/A'
+        const product = { title, size, shopifyId: variant?.shopifyId }
         posthog?.capture('back_in_stock_form_submitted', { email, product })
         setSubmitted(true)
     }
diff --git a/src/templates/merch/Product.tsx b/src/templates/merch/Product.tsx
index bd397b5ee..6f677fce5 100644
--- a/src/templates/merch/Product.tsx
+++ b/src/templates/merch/Product.tsx
@@ -168,6 +168,7 @@ export const query = graphql`
             handle
             shopifyId
             description
+            descriptionHtml
             media {
                 mediaContentType
                 preview {
diff --git a/src/templates/merch/ProductPanel.tsx b/src/templates/merch/ProductPanel.tsx
index ced90b064..f1a42a655 100644
--- a/src/templates/merch/ProductPanel.tsx
+++ b/src/templates/merch/ProductPanel.tsx
@@ -14,6 +14,7 @@ import { getProductMetafield } from './utils'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import { getShopifyImage } from 'gatsby-source-shopify'
 import { IconSpinner } from '@posthog/icons'
+import SizeGuide from './SizeGuide'
 
 type ProductPanelProps = {
     className?: string
@@ -62,7 +63,6 @@ export function ProductPanel(props: ProductPanelProps): React.ReactElement {
                         New
                     </div>
                 )}
-
                 <ProductCarousel product={product} />
             </div>
             <div className="space-y-0.5">
@@ -103,6 +103,8 @@ export function ProductPanel(props: ProductPanelProps): React.ReactElement {
                     })
                     .filter(Boolean)}
 
+            <SizeGuide title={product.title} />
+
             <Quantity value={quantity} onChange={setQuantity} />
 
             <CallToAction
@@ -130,12 +132,12 @@ export function ProductPanel(props: ProductPanelProps): React.ReactElement {
                 </>
             </CallToAction>
 
-            {!loading && outOfStock && <BackInStockForm product={selectedVariant} />}
+            {!loading && outOfStock && <BackInStockForm variant={variantForCart} />}
 
             {product.description && (
                 <div className="border-t border-light dark:border-dark pt-4">
                     <h3 className="text-lg mb-0">Description</h3>
-                    <p className="text-[15px]">{product.description}</p>
+                    <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
                 </div>
             )}
             {product.imageProducts?.length > 0 && (
diff --git a/src/templates/merch/SizeGuide.tsx b/src/templates/merch/SizeGuide.tsx
new file mode 100644
index 000000000..82f9b9898
--- /dev/null
+++ b/src/templates/merch/SizeGuide.tsx
@@ -0,0 +1,29 @@
+import CloudinaryImage from 'components/CloudinaryImage'
+import { ZoomImage } from 'components/ZoomImage'
+import React, { useState } from 'react'
+
+const sizeGuides = {
+    't-shirt': 'https://res.cloudinary.com/dmukukwp6/image/upload/5026_SIZE_GUIDE_c922fdf762.jpg',
+    hoodie: 'https://res.cloudinary.com/dmukukwp6/image/upload/5102_SIZE_GUIDE_31cdfc2740.jpg',
+}
+
+export default function SizeGuide({ title }: { title: string }): React.ReactElement | null {
+    const [showSizeGuide, setShowSizeGuide] = useState(false)
+    const sizeGuideImage =
+        sizeGuides[Object.keys(sizeGuides).find((key) => title.toLowerCase().includes(key)) as keyof typeof sizeGuides]
+
+    return sizeGuideImage ? (
+        <div className={showSizeGuide ? '' : '!mt-1'}>
+            {showSizeGuide && (
+                <div className="w-full aspect-square">
+                    <ZoomImage>
+                        <CloudinaryImage src={sizeGuideImage} />
+                    </ZoomImage>
+                </div>
+            )}
+            <button className="text-sm opacity-70 underline" onClick={() => setShowSizeGuide(!showSizeGuide)}>
+                {showSizeGuide ? 'Hide' : 'View'} size guide
+            </button>
+        </div>
+    ) : null
+}
diff --git a/src/templates/merch/index.tsx b/src/templates/merch/index.tsx
index 3d0ed06ef..2ff83d75b 100644
--- a/src/templates/merch/index.tsx
+++ b/src/templates/merch/index.tsx
@@ -83,6 +83,7 @@ export const query = graphql`
                     handle
                     shopifyId
                     description
+                    descriptionHtml
                     priceRangeV2 {
                         maxVariantPrice {
                             amount