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

src/components/ProductDetails/ProductDetails.jsx

@@ -386,22 +386,11 @@ const ProductDetails = () => {
     transition: "padding-bottom 0.25s ease-in-out"
   })
 
-  // 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
+  const productDetailsMetafield = product?.metafields?.product_details
 
   // Renders Shopify product metafield custom.material inside the Material row.
   const materialPanel = (
@@ -467,8 +456,6 @@ const ProductDetails = () => {
     >
       <Box
         sx={{
-          // Old extra panel spacing kept for reference:
-          // pb: 3,
           color: "text.secondary",
           minHeight: shippingInformationMetafield?.value ? 0 : 28,
           fontSize: {
@@ -495,8 +482,6 @@ const ProductDetails = () => {
     >
       <Box
         sx={{
-          // Old extra panel spacing kept for reference:
-          // pb: 3,
           color: "text.secondary",
           minHeight: returnExchangeMetafield?.value ? 0 : 28,
           fontSize: {
@@ -511,19 +496,20 @@ const ProductDetails = () => {
     </Box>
   )
 
+  // Renders Shopify product metafield custom.product_details inside the Product Details row.
   const productDetailsPanel = (
     <Box
       sx={{
         maxHeight: expandedInfoRows.productDetails ? 1200 : 0,
         overflow: "hidden",
-        borderBottom: expandedInfoRows.productDetails ? "1px solid #DDD" : "none",
+        borderBottom: "1px solid #DDD",
         transition: "max-height 0.25s ease-in-out"
       }}
     >
       <Box
         sx={{
-          pb: 3,
           color: "text.secondary",
+          minHeight: productDetailsMetafield?.value ? 0 : 28,
           fontSize: {
             xs: "0.875rem",
             md: "1rem"
@@ -554,7 +540,7 @@ const ProductDetails = () => {
           }
         }}
       >
-        <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
+        {renderShopifyRichText(productDetailsMetafield?.value)}
       </Box>
     </Box>
   )
@@ -905,7 +891,8 @@ const ProductDetails = () => {
             onClick={() => toggleInfoRow("productDetails")}
             sx={{
               ...infoRowSx(expandedInfoRows.productDetails),
-              borderBottom: expandedInfoRows.productDetails ? "none" : "1px solid #DDD"
+              pb: 2,
+              borderBottom: "none"
             }}
           >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
@@ -968,8 +955,6 @@ const ProductDetails = () => {
             onClick={() => toggleInfoRow("returnExchanges")}
             sx={{
               ...infoRowSx(expandedInfoRows.returnExchanges),
-              // Old expanded spacing kept for reference:
-              // pb: expandedInfoRows.returnExchanges ? 5 : 2,
               pb: 2,
               borderBottom: "none"
             }}
@@ -979,7 +964,6 @@ const ProductDetails = () => {
             </Typography>
             {expandedInfoRows.returnExchanges ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
-          {/* Old empty panel kept for reference: {emptyInfoPanel("returnExchanges")} */}
           {returnExchangesPanel}
         </Box>
       </Box>

src/services/ProductService.js

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