From 41f8a651f71c5d0460b03b3e0a51d4fb77d26524 Mon Sep 17 00:00:00 2001
From: cond0r <1243434+cond0r@users.noreply.github.com>
Date: Mon, 25 Jul 2022 13:16:09 +0300
Subject: [PATCH] Fix errors & styles

---
 packages/shopify/package.json                      |  1 -
 packages/shopify/src/const.ts                      |  3 ++-
 packages/shopify/src/utils/metafields.ts           | 14 +++++++++++++-
 packages/shopify/src/utils/normalize.ts            |  3 +--
 site/components/common/Head/Head.tsx               |  5 ++++-
 .../ProductCustomFields/ProductCustomFields.tsx    |  4 ++--
 .../ProductDetails/ProductDetails.module.css       |  5 +++--
 .../components/product/ProductView/ProductView.tsx |  8 +++++---
 yarn.lock                                          | 12 ------------
 9 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/shopify/package.json b/packages/shopify/package.json
index ba14ea1f7..8f7d11cd2 100644
--- a/packages/shopify/package.json
+++ b/packages/shopify/package.json
@@ -51,7 +51,6 @@
   "dependencies": {
     "@vercel/commerce": "^0.0.1",
     "@vercel/fetch": "^6.1.1",
-    "humanize-string": "^3.0.0",
     "lodash.debounce": "^4.0.8"
   },
   "peerDependencies": {
diff --git a/packages/shopify/src/const.ts b/packages/shopify/src/const.ts
index 14fccf84b..77bb340bb 100644
--- a/packages/shopify/src/const.ts
+++ b/packages/shopify/src/const.ts
@@ -6,7 +6,8 @@ export const SHOPIFY_CART_URL_COOKIE = 'shopify_cartUrl'
 
 export const SHOPIFY_CUSTOMER_TOKEN_COOKIE = 'shopify_customerToken'
 
-export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+export const STORE_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN?.replace(/(^\w+:|^)\/\//, '')
 
 export const SHOPIFY_COOKIE_EXPIRE = 30
 
diff --git a/packages/shopify/src/utils/metafields.ts b/packages/shopify/src/utils/metafields.ts
index 1fee04d21..4b65cf1b4 100644
--- a/packages/shopify/src/utils/metafields.ts
+++ b/packages/shopify/src/utils/metafields.ts
@@ -46,7 +46,7 @@ export const getMetafieldValue = (
 ) => {
   switch (type) {
     case 'boolean':
-      return value === 'true' ? '&#10003;' : 'No'
+      return value === 'true' ? '&#10003;' : '&#10005;'
     case 'number_integer':
       return parseInt(value).toLocaleString(locale)
     case 'number_decimal':
@@ -88,3 +88,15 @@ export const getMetafieldValue = (
       return value
   }
 }
+
+export const humanizeString = (string: string) => {
+  string = string
+    .toLowerCase()
+    .replace(/[_-]+/g, ' ')
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+
+  string = string.charAt(0).toUpperCase() + string.slice(1)
+
+  return string
+}
diff --git a/packages/shopify/src/utils/normalize.ts b/packages/shopify/src/utils/normalize.ts
index 802a360e3..31616b4cf 100644
--- a/packages/shopify/src/utils/normalize.ts
+++ b/packages/shopify/src/utils/normalize.ts
@@ -16,11 +16,10 @@ import type {
   CartDetailsFragment,
 } from '../../schema'
 
-import humanizeString from 'humanize-string'
 import { CommerceError } from '@vercel/commerce/utils/errors'
 
 import { colorMap } from './colors'
-import { getMetafieldValue, parseJson } from './metafields'
+import { getMetafieldValue, parseJson, humanizeString } from './metafields'
 
 type MoneyProps = MoneyV2 & { retailPrice?: string | number }
 
diff --git a/site/components/common/Head/Head.tsx b/site/components/common/Head/Head.tsx
index 33b2b25f7..07f257567 100644
--- a/site/components/common/Head/Head.tsx
+++ b/site/components/common/Head/Head.tsx
@@ -13,7 +13,10 @@ const Head: VFC = () => {
       {process.env.COMMERCE_PROVIDER === '@vercel/commerce-shopify' && (
         <link
           rel="preconnect"
-          href={`https://${process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN}`}
+          href={`https://${process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN?.replace(
+            /(^\w+:|^)\/\//,
+            ''
+          )}`}
         />
       )}
     </SEO>
diff --git a/site/components/product/ProductCustomFields/ProductCustomFields.tsx b/site/components/product/ProductCustomFields/ProductCustomFields.tsx
index 3b08909de..816a2b302 100644
--- a/site/components/product/ProductCustomFields/ProductCustomFields.tsx
+++ b/site/components/product/ProductCustomFields/ProductCustomFields.tsx
@@ -2,10 +2,10 @@ import type { ProductCustomField } from '@commerce/types/product'
 
 const ProductCustomFields = ({ fields }: { fields: ProductCustomField[] }) => {
   return (
-    <ul className="flex flex-col space-y-2 divide-y divide-dashed">
+    <ul className="flex flex-col space-y-2.5 divide-y divide-accent-2 divide-dashed">
       {fields.map((m) => (
         <li
-          className="flex space-x-2 justify-start items-start text-sm pt-2"
+          className="flex space-x-2 justify-start items-start pt-2.5 text-sm"
           key={m.key}
         >
           <span className="font-bold capitalize whitespace-nowrap">
diff --git a/site/components/product/ProductDetails/ProductDetails.module.css b/site/components/product/ProductDetails/ProductDetails.module.css
index d11d57844..eb39176c8 100644
--- a/site/components/product/ProductDetails/ProductDetails.module.css
+++ b/site/components/product/ProductDetails/ProductDetails.module.css
@@ -4,9 +4,10 @@
 }
 
 .main {
-  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
-  min-height: 500px;
+  @apply relative px-0 pb-0 box-border flex flex-col col-span-1;
+  min-height: 728px;
 }
+
 .sidebar {
   @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
 }
diff --git a/site/components/product/ProductView/ProductView.tsx b/site/components/product/ProductView/ProductView.tsx
index d96660762..b584a976c 100644
--- a/site/components/product/ProductView/ProductView.tsx
+++ b/site/components/product/ProductView/ProductView.tsx
@@ -19,11 +19,13 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
   return (
     <>
       <Container className="max-w-none w-full" clean>
+        <ProductProvider product={product}>
+          <ProductDetails />
+        </ProductProvider>
+
         <hr className="mt-7 border-accent-2" />
+
         <section className="py-12 px-6 mb-10">
-          <ProductProvider product={product}>
-            <ProductDetails />
-          </ProductProvider>
           <Text variant="sectionHeading">Related Products</Text>
           <div className={s.relatedProductsGrid}>
             {relatedProducts.map((p) => (
diff --git a/yarn.lock b/yarn.lock
index f460cd4e0..1dd65d651 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2853,11 +2853,6 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-decamelize@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e"
-  integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==
-
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -3991,13 +3986,6 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-humanize-string@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/humanize-string/-/humanize-string-3.0.0.tgz#4ea0ef1daf1d23fd8d8c7864adf0117f74939455"
-  integrity sha512-jhWD2GAZRMELz0IEIfqpEdi0M4CMQF1GpJpBYIopFN6wT+78STiujfQTKcKqZzOJgUkIgJSo2xFeHdsg922JZQ==
-  dependencies:
-    decamelize "^6.0.0"
-
 husky@^7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"