Move to components, and updates

packages/commerce/src/types/product.ts

@@ -130,7 +130,7 @@ export interface ProductMetafield {
  * {
  *  // Namespace, the container for a set of metadata
  *  reviews: {
- *   // Key of the metafield, used to differentiate between metafields of the same namespace
+ *   // Key of the metafield
  *   rating: {
  *    key: 'rating',
  *    value: 5,
@@ -216,7 +216,7 @@ export interface Product {
    * {
    *  // Namespace, the container for a set of metadata
    *  reviews: {
-   *   // Key of the metafield, used to differentiate between metafields of the same namespace
+   *   // Key of the metafield
    *   rating: {
    *    key: 'rating',
    *    value: 4,

packages/shopify/src/utils/normalize.ts

@@ -156,7 +156,7 @@ export function normalizeMetafields(
       type,
       namespace,
       value,
-      html: getMetafieldValue(type, value, locale),
+      valueHtml: getMetafieldValue(type, value, locale),
     }
 
     if (!output[namespace]) {

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) => (
+        {product.customFields && product.customFields?.length > 0 && (
-              <div
+          <Collapse title="Specifications">
-                key={field.key}
+            <ProductCustomFields customFields={product.customFields} />
-                className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
+          </Collapse>
-              >
+        )}
-                <strong className="leading-7">{field.name}:</strong>
+
-                <Text html={field.valueHtml || field.value} className="!mx-0" />
+        {product.metafields?.my_fields && (
-              </div>
+          <Collapse title="Specifications">
-            ))}
+            <ProductMetafields
+              metafields={product.metafields}
+              namespace="my_fields"
+            />
           </Collapse>
         )}
       </div>

site/pages/product/[slug].tsx

@@ -13,11 +13,10 @@ import { ProductView } from '@components/product'
 // Used by the Shopify Example
 const withMetafields = [
   { namespace: 'reviews', key: 'rating' },
-  { namespace: 'descriptors', key: 'care_guide' },
+  { namespace: 'reviews', key: 'count' },
-  { namespace: 'my_fields', key: 'weight' },
   { namespace: 'my_fields', key: 'width' },
+  { namespace: 'my_fields', key: 'weight' },
   { namespace: 'my_fields', key: 'length' },
-  { namespace: 'my_fields', key: 'manufacturer_url' },
 ]
 
 export async function getStaticProps({