feat module 6, 7 : pull care instruction data from shopify, include care instruction identifiers in product service

src/components/ProductDetails/ProductDetails.jsx

@@ -399,7 +399,9 @@ const ProductDetails = () => {
   )
 
   const materialMetafield = product?.metafields?.material
+  const careInstructionMetafield = product?.metafields?.care_instruction
 
+  // Renders Shopify product metafield custom.material inside the Material row.
   const materialPanel = (
     <Box
       sx={{
@@ -425,6 +427,32 @@ const ProductDetails = () => {
     </Box>
   )
 
+  // Renders Shopify product metafield custom.care_instruction inside the Care Instruction row.
+  const careInstructionPanel = (
+    <Box
+      sx={{
+        maxHeight: expandedInfoRows.careInstruction ? 600 : 0,
+        overflow: "hidden",
+        borderBottom: "1px solid #DDD",
+        transition: "max-height 0.25s ease-in-out"
+      }}
+    >
+      <Box
+        sx={{
+          color: "text.secondary",
+          minHeight: careInstructionMetafield?.value ? 0 : 28,
+          fontSize: {
+            xs: "0.875rem",
+            md: "1rem"
+          },
+          lineHeight: 1.6
+        }}
+      >
+        {renderShopifyRichText(careInstructionMetafield?.value)}
+      </Box>
+    </Box>
+  )
+
   const productDetailsPanel = (
     <Box
       sx={{
@@ -834,7 +862,6 @@ const ProductDetails = () => {
             onClick={() => toggleInfoRow("material")}
             sx={{
               ...infoRowSx(expandedInfoRows.material),
-              pb: expandedInfoRows.material ? 5 : 2,
               pb: 2,
               borderBottom: "none"
             }}
@@ -849,14 +876,19 @@ const ProductDetails = () => {
           {/* Care Instruction */}
           <Box
             onClick={() => toggleInfoRow("careInstruction")}
-            sx={infoRowSx(expandedInfoRows.careInstruction)}
+            sx={{
+              ...infoRowSx(expandedInfoRows.careInstruction),
+              pb: 2,
+              borderBottom: "none"
+            }}
           >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Care Instruction
             </Typography>
             {expandedInfoRows.careInstruction ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
-          {emptyInfoPanel("careInstruction")}
+          {careInstructionPanel}
+          
           {/* Shipping Information */}
           <Box
             onClick={() => toggleInfoRow("shippingInformation")}

src/services/ProductService.js

@@ -167,7 +167,8 @@ const getProduct = async (handle = "") => {
         identifiers: [
           {key: "published_date", namespace: "custom"},
           {key: "selected", namespace: "custom"},
-          {key: "material", namespace: "custom"}
+          {key: "material", namespace: "custom"},
+          {key: "care_instruction", namespace: "custom"}
         ]
       ) {
         namespace