feat module 6, 7 : pull material data from shopify

src/components/ProductDetails/ProductDetails.jsx

@@ -38,6 +38,86 @@ const hasMatchingProperties = (source, target) => {
   return Object.entries(target).every(([key, value]) => source[key] === value);
 };
 
+const renderShopifyRichTextNode = (node, key = "node") => {
+  if (!node) return null
+
+  if (node.type === "text") {
+    const textValue = node.value || ""
+
+    if (node.bold) {
+      return <Box component="strong" key={key} sx={{ fontWeight: 700 }}>{textValue}</Box>
+    }
+
+    return textValue
+  }
+
+  const children = (node.children || []).map((child, index) => renderShopifyRichTextNode(child, `${key}-${index}`))
+
+  if (node.type === "root") {
+    return <>{children}</>
+  }
+
+  if (node.type === "paragraph") {
+    return (
+      <Typography component="p" key={key} sx={{ mt: 0, mb: 1.5 }}>
+        {children}
+      </Typography>
+    )
+  }
+
+  if (node.type === "list") {
+    return (
+      <Box
+        component={node.listType === "ordered" ? "ol" : "ul"}
+        key={key}
+        sx={{ mt: 0, mb: 1.5, pl: 2.5 }}
+      >
+        {children}
+      </Box>
+    )
+  }
+
+  if (node.type === "list-item") {
+    return (
+      <Box component="li" key={key} sx={{ mb: 0.5 }}>
+        {children}
+      </Box>
+    )
+  }
+
+  if (node.type === "heading") {
+    return (
+      <Typography component={`h${node.level || 3}`} key={key} sx={{ mt: 0, mb: 1, fontWeight: 700 }}>
+        {children}
+      </Typography>
+    )
+  }
+
+  if (node.type === "link") {
+    return (
+      <Box component="a" key={key} href={node.url} target="_blank" rel="noreferrer" sx={{ color: "inherit" }}>
+        {children}
+      </Box>
+    )
+  }
+
+  return <Box key={key}>{children}</Box>
+}
+
+const renderShopifyRichText = (value) => {
+  if (!value) return null
+
+  try {
+    return renderShopifyRichTextNode(JSON.parse(value))
+  } catch (error) {
+    return (
+      <Typography component="p" sx={{ mt: 0, mb: 1.5 }}>
+        {value}
+      </Typography>
+    )
+  }
+}
+
 const ProductDetails = () => {
 
   const dispatch = useDispatch()
@@ -307,7 +387,6 @@ const ProductDetails = () => {
   })
 
   const emptyInfoPanel = (row) => (
-    // Old empty expanded panel kept for reference:
     // expandedInfoRows[row] && (
     //   <Box
     //     sx={{
@@ -319,6 +398,33 @@ const ProductDetails = () => {
     null
   )
 
+  const materialMetafield = product?.metafields?.material
+
+  const materialPanel = (
+    <Box
+      sx={{
+        maxHeight: expandedInfoRows.material ? 600 : 0,
+        overflow: "hidden",
+        borderBottom: "1px solid #DDD",
+        transition: "max-height 0.25s ease-in-out"
+      }}
+    >
+      <Box
+        sx={{
+          color: "text.secondary",
+          minHeight: materialMetafield?.value ? 0 : 28,
+          fontSize: {
+            xs: "0.875rem",
+            md: "1rem"
+          },
+          lineHeight: 1.6
+        }}
+      >
+        {renderShopifyRichText(materialMetafield?.value)}
+      </Box>
+    </Box>
+  )
+
   const productDetailsPanel = (
     <Box
       sx={{
@@ -726,14 +832,19 @@ const ProductDetails = () => {
           {/* Material */}
           <Box
             onClick={() => toggleInfoRow("material")}
-            sx={infoRowSx(expandedInfoRows.material)}
+            sx={{
+              ...infoRowSx(expandedInfoRows.material),
+              pb: expandedInfoRows.material ? 5 : 2,
+              pb: 2,
+              borderBottom: "none"
+            }}
           >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Material
             </Typography>
             {expandedInfoRows.material ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
-          {emptyInfoPanel("material")}
+          {materialPanel}
 
           {/* Care Instruction */}
           <Box