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

src/components/ProductDetails/ProductDetails.jsx

@@ -400,6 +400,7 @@ const ProductDetails = () => {
   const careInstructionMetafield = product?.metafields?.care_instruction
   const shippingInformationMetafield = product?.metafields?.shipping_information
   const returnExchangeMetafield = product?.metafields?.return_exchange
+  const noteMetafield = product?.metafields?.note
   const productDetailsMetafield = product?.metafields?.product_details
   const sizeChartMetafield = product?.metafields?.size_chart
   const sizeChartImageUrl = sizeChartMetafield?.reference?.image?.url || sizeChartMetafield?.reference?.url || ""
@@ -470,6 +471,22 @@ const ProductDetails = () => {
     </Box>
   )
 
+  // Renders Shopify product metafield custom.note inside the Note row.
+  const notePanel = noteMetafield?.value ? (
+    <Box sx={infoPanelSx}>
+      <Collapse in={Boolean(expandedInfoRows.note)} timeout="auto">
+        <Box
+          sx={{
+            ...infoPanelContentSx,
+            minHeight: noteMetafield.value ? 0 : 28,
+          }}
+        >
+          {renderShopifyRichText(noteMetafield.value)}
+        </Box>
+      </Collapse>
+    </Box>
+  ) : null
+
   // Renders Shopify product metafield custom.product_details inside the Product Details row.
   const productDetailsPanel = (
     <Box sx={infoPanelSx}>
@@ -936,6 +953,24 @@ const ProductDetails = () => {
             {expandedInfoRows.returnExchanges ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
           {returnExchangesPanel}
+
+          {/* Note */}
+          {noteMetafield?.value && (
+            <Box
+              onClick={() => toggleInfoRow("note")}
+              sx={{
+                ...infoRowSx(expandedInfoRows.note),
+                pb: 2,
+                borderBottom: "none"
+              }}
+            >
+              <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+                Note
+              </Typography>
+              {expandedInfoRows.note ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
+            </Box>
+          )}
+          {notePanel}
         </Box>
       </Box>
 

src/services/ProductService.js

@@ -185,6 +185,7 @@ const getProduct = async (handle = "") => {
           {key: "care_instruction", namespace: "custom"},
           {key: "shipping_information", namespace: "custom"},
           {key: "return_exchange", namespace: "custom"},
+          {key: "note", namespace: "custom"},
           {key: "product_details", namespace: "custom"},
           {key: "size_chart", namespace: "custom"}
         ]