Move to components, and updates

site/components/product/ProductCustomFields/ProductCustomFields.tsx

@@ -0,0 +1,23 @@
+import { ProductCustomField } from '@commerce/types/product'
+
+interface Props {
+  customFields: ProductCustomField[]
+}
+
+const ProductCustomFields: React.FC<Props> = ({ customFields }) => {
+  return (
+    <>
+      {customFields.map((field) => (
+        <div
+          key={field.id}
+          className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
+        >
+          <strong className="leading-7">{field.name}:</strong>
+          <span>{field.value}</span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default ProductCustomFields

site/components/product/ProductCustomFields/index.ts

@@ -0,0 +1 @@
+export { default as ProductCustomFields } from './ProductCustomFields'

site/components/product/ProductMetafields/ProductMetafields.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import type { ProductMetafields as IProductMetafields } from '@commerce/types/product'
+import Text from '@components/ui/Text'
+
+interface Props {
+  metafields: IProductMetafields
+  /**
+   *  The namespace of the metafields to display.
+   */
+  namespace: string
+}
+
+const ProductMetafields: FC<Props> = ({ metafields, namespace }) => {
+  return (
+    <>
+      {Object.values(metafields[namespace] ?? {}).map((field) => (
+        <div
+          key={field.key}
+          className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
+        >
+          <strong className="leading-7">{field.name}:</strong>
+          <Text html={field.valueHtml || field.value} className="!mx-0" />
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default ProductMetafields

site/components/product/ProductMetafields/index.ts

@@ -0,0 +1 @@
+export { default as ProductMetafields } from './ProductMetafields'

site/components/product/ProductSidebar/ProductSidebar.tsx

@@ -10,6 +10,8 @@ import {
   SelectedOptions,
 } from '../helpers'
 import ErrorMessage from '@components/ui/ErrorMessage'
+import { ProductCustomFields } from '../ProductCustomFields'
+import { ProductMetafields } from '../ProductMetafields'
 
 interface ProductSidebarProps {
   product: Product
@@ -94,32 +96,25 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
           This is a limited edition production run. Printing starts when the
           drop ends.
         </Collapse>
+
         <Collapse title="Details">
           This is a limited edition production run. Printing starts when the
           drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days due
           to COVID-19.
         </Collapse>
-        {(product.customFields || product.metafields) && (
-          <Collapse title="Specifications">
-            {product.customFields?.map((field) => (
-              <div
-                key={field.id}
-                className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
-              >
-                <strong className="leading-7">{field.name}:</strong>
-                <span>{field.value}</span>
-              </div>
-            ))}
 
-            {Object.values(product.metafields?.my_fields ?? {}).map((field) => (
-              <div
-                key={field.key}
-                className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
-              >
-                <strong className="leading-7">{field.name}:</strong>
-                <Text html={field.valueHtml || field.value} className="!mx-0" />
-              </div>
-            ))}
+        {product.customFields && product.customFields?.length > 0 && (
+          <Collapse title="Specifications">
+            <ProductCustomFields customFields={product.customFields} />
+          </Collapse>
+        )}
+
+        {product.metafields?.my_fields && (
+          <Collapse title="Specifications">
+            <ProductMetafields
+              metafields={product.metafields}
+              namespace="my_fields"
+            />
           </Collapse>
         )}
       </div>