Fix errors & styles

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": {

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
 

packages/shopify/src/utils/metafields.ts

@@ -46,7 +46,7 @@ export const getMetafieldValue = (
 ) => {
   switch (type) {
     case 'boolean':
-      return value === 'true' ? '✓' : 'No'
+      return value === 'true' ? '✓' : '✕'
     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
+}

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 }
 

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>

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">

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;
 }

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) => (

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"