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

src/components/ProductDetails/ProductDetails.jsx

@@ -400,6 +400,7 @@ const ProductDetails = () => {
 
   const materialMetafield = product?.metafields?.material
   const careInstructionMetafield = product?.metafields?.care_instruction
+  const shippingInformationMetafield = product?.metafields?.shipping_information
 
   // Renders Shopify product metafield custom.material inside the Material row.
   const materialPanel = (
@@ -453,6 +454,34 @@ const ProductDetails = () => {
     </Box>
   )
 
+  // Renders Shopify product metafield custom.shipping_information inside the Shipping Information row.
+  const shippingInformationPanel = (
+    <Box
+      sx={{
+        maxHeight: expandedInfoRows.shippingInformation ? 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: shippingInformationMetafield?.value ? 0 : 28,
+          fontSize: {
+            xs: "0.875rem",
+            md: "1rem"
+          },
+          lineHeight: 1.6
+        }}
+      >
+        {renderShopifyRichText(shippingInformationMetafield?.value)}
+      </Box>
+    </Box>
+  )
+
   const productDetailsPanel = (
     <Box
       sx={{
@@ -892,14 +921,18 @@ const ProductDetails = () => {
           {/* Shipping Information */}
           <Box
             onClick={() => toggleInfoRow("shippingInformation")}
-            sx={infoRowSx(expandedInfoRows.shippingInformation)}
+            sx={{
+              ...infoRowSx(expandedInfoRows.shippingInformation),
+              pb: 2,
+              borderBottom: "none"
+            }}
           >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Shipping Information
             </Typography>
             {expandedInfoRows.shippingInformation ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
-          {emptyInfoPanel("shippingInformation")}
+          {shippingInformationPanel}
 
           {/* Return & Exchanges */}
           <Box

src/services/ProductService.js

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