From 0968c0268a5dff9bae3334a533af02bfb654bb55 Mon Sep 17 00:00:00 2001
From: cond0r <1243434+cond0r@users.noreply.github.com>
Date: Fri, 2 Dec 2022 15:01:05 +0200
Subject: [PATCH] Move to components, and updates

---
 packages/commerce/src/types/product.ts        |  4 +--
 packages/shopify/src/utils/normalize.ts       |  2 +-
 .../ProductCustomFields.tsx                   | 23 ++++++++++++
 .../product/ProductCustomFields/index.ts      |  1 +
 .../ProductMetafields/ProductMetafields.tsx   | 29 +++++++++++++++
 .../product/ProductMetafields/index.ts        |  1 +
 .../product/ProductSidebar/ProductSidebar.tsx | 35 ++++++++-----------
 site/pages/product/[slug].tsx                 |  5 ++-
 8 files changed, 74 insertions(+), 26 deletions(-)
 create mode 100644 site/components/product/ProductCustomFields/ProductCustomFields.tsx
 create mode 100644 site/components/product/ProductCustomFields/index.ts
 create mode 100644 site/components/product/ProductMetafields/ProductMetafields.tsx
 create mode 100644 site/components/product/ProductMetafields/index.ts

diff --git a/packages/commerce/src/types/product.ts b/packages/commerce/src/types/product.ts
index 4faeb21b8..8bb383962 100644
--- a/packages/commerce/src/types/product.ts
+++ b/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,
diff --git a/packages/shopify/src/utils/normalize.ts b/packages/shopify/src/utils/normalize.ts
index 60708c8ae..d0dd1587f 100644
--- a/packages/shopify/src/utils/normalize.ts
+++ b/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]) {
diff --git a/site/components/product/ProductCustomFields/ProductCustomFields.tsx b/site/components/product/ProductCustomFields/ProductCustomFields.tsx
new file mode 100644
index 000000000..5611e78a8
--- /dev/null
+++ b/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
diff --git a/site/components/product/ProductCustomFields/index.ts b/site/components/product/ProductCustomFields/index.ts
new file mode 100644
index 000000000..1c63f7ea6
--- /dev/null
+++ b/site/components/product/ProductCustomFields/index.ts
@@ -0,0 +1 @@
+export { default as ProductCustomFields } from './ProductCustomFields'
diff --git a/site/components/product/ProductMetafields/ProductMetafields.tsx b/site/components/product/ProductMetafields/ProductMetafields.tsx
new file mode 100644
index 000000000..d619378a3
--- /dev/null
+++ b/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
diff --git a/site/components/product/ProductMetafields/index.ts b/site/components/product/ProductMetafields/index.ts
new file mode 100644
index 000000000..2e362c321
--- /dev/null
+++ b/site/components/product/ProductMetafields/index.ts
@@ -0,0 +1 @@
+export { default as ProductMetafields } from './ProductMetafields'
diff --git a/site/components/product/ProductSidebar/ProductSidebar.tsx b/site/components/product/ProductSidebar/ProductSidebar.tsx
index 78059e860..3165ce3a7 100644
--- a/site/components/product/ProductSidebar/ProductSidebar.tsx
+++ b/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>
diff --git a/site/pages/product/[slug].tsx b/site/pages/product/[slug].tsx
index 4cde4e074..f82c4a6be 100644
--- a/site/pages/product/[slug].tsx
+++ b/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: 'my_fields', key: 'weight' },
+  { namespace: 'reviews', key: 'count' },
   { 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({