Lil merch updates (#9984)

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!

gatsby/sourceNodes.ts

@@ -400,6 +400,7 @@ export const sourceNodes: GatsbyNode['sourceNodes'] = async ({ actions, createCo
               products(first: 250) {
                 nodes {
                   description
+                  descriptionHtml
                   featuredMedia {
                     preview {
                       image {

src/pages/merch.tsx

@@ -18,6 +18,7 @@ export const query = graphql`
             handle
             products {
                 description
+                descriptionHtml
                 featuredMedia {
                     preview {
                         image {

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

src/templates/merch/Product.tsx

@@ -168,6 +168,7 @@ export const query = graphql`
             handle
             shopifyId
             description
+            descriptionHtml
             media {
                 mediaContentType
                 preview {

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 && (

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
+}

src/templates/merch/index.tsx

@@ -83,6 +83,7 @@ export const query = graphql`
                     handle
                     shopifyId
                     description
+                    descriptionHtml
                     priceRangeV2 {
                         maxVariantPrice {
                             amount