feat module 6, 7 : pull Return & Exchanges data from shopify, include Return & Exchanges identifiers in product service

src/components/ProductDetails/ProductDetails.jsx

@@ -386,21 +386,22 @@ const ProductDetails = () => {
     transition: "padding-bottom 0.25s ease-in-out"
   })
 
-  const emptyInfoPanel = (row) => (
-    // expandedInfoRows[row] && (
-    //   <Box
-    //     sx={{
-    //       minHeight: 28,
-    //       borderBottom: "1px solid #DDD"
-    //     }}
-    //   />
-    // )
-    null
-  )
+  // Old empty expanded panel kept for reference.
+  // const emptyInfoPanel = (row) => (
+  //   expandedInfoRows[row] && (
+  //     <Box
+  //       sx={{
+  //         minHeight: 28,
+  //         borderBottom: "1px solid #DDD"
+  //       }}
+  //     />
+  //   )
+  // )
 
   const materialMetafield = product?.metafields?.material
   const careInstructionMetafield = product?.metafields?.care_instruction
   const shippingInformationMetafield = product?.metafields?.shipping_information
+  const returnExchangeMetafield = product?.metafields?.return_exchange
 
   // Renders Shopify product metafield custom.material inside the Material row.
   const materialPanel = (
@@ -482,6 +483,34 @@ const ProductDetails = () => {
     </Box>
   )
 
+  // Renders Shopify product metafield custom.return_exchange inside the Return & Exchanges row.
+  const returnExchangesPanel = (
+    <Box
+      sx={{
+        maxHeight: expandedInfoRows.returnExchanges ? 600 : 0,
+        overflow: "hidden",
+        borderBottom: "1px solid #DDD",
+        transition: "max-height 0.25s ease-in-out"
+      }}
+    >
+      <Box
+        sx={{
+          // Old extra panel spacing kept for reference:
+          // pb: 3,
+          color: "text.secondary",
+          minHeight: returnExchangeMetafield?.value ? 0 : 28,
+          fontSize: {
+            xs: "0.875rem",
+            md: "1rem"
+          },
+          lineHeight: 1.6
+        }}
+      >
+        {renderShopifyRichText(returnExchangeMetafield?.value)}
+      </Box>
+    </Box>
+  )
+
   const productDetailsPanel = (
     <Box
       sx={{
@@ -937,14 +966,21 @@ const ProductDetails = () => {
           {/* Return & Exchanges */}
           <Box
             onClick={() => toggleInfoRow("returnExchanges")}
-            sx={infoRowSx(expandedInfoRows.returnExchanges)}
+            sx={{
+              ...infoRowSx(expandedInfoRows.returnExchanges),
+              // Old expanded spacing kept for reference:
+              // pb: expandedInfoRows.returnExchanges ? 5 : 2,
+              pb: 2,
+              borderBottom: "none"
+            }}
           >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Return & Exchanges
             </Typography>
             {expandedInfoRows.returnExchanges ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
-          {emptyInfoPanel("returnExchanges")}
+          {/* Old empty panel kept for reference: {emptyInfoPanel("returnExchanges")} */}
+          {returnExchangesPanel}
         </Box>
       </Box>
 

src/services/ProductService.js

@@ -169,7 +169,8 @@ const getProduct = async (handle = "") => {
           {key: "selected", namespace: "custom"},
           {key: "material", namespace: "custom"},
           {key: "care_instruction", namespace: "custom"},
-          {key: "shipping_information", namespace: "custom"}
+          {key: "shipping_information", namespace: "custom"},
+          {key: "return_exchange", namespace: "custom"}
         ]
       ) {
         namespace