update: sdks v2.4.1

Weaverse · Nov 4, 2023 · bf36eef · bf36eef
1 parent ee686f5
commit bf36eef
Show file tree

Hide file tree

Showing 21 changed files with 847 additions and 171 deletions.
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -166,19 +166,33 @@ function CartLines({
       ])}
     >
       <table className="table-auto">
-        {layout === 'page' && <thead>
-          <tr className="font-semibold p-2">
-            <th className="p-4 text-left border-bar/15 border-b border-bar">Product</th>
-            <th className="p-4 border-b border-bar/15 hidden lg:table-cell"></th>
-            <th className="p-4 border-b border-bar/15 hidden lg:table-cell">Price</th>
-            <th className="p-4 border-b border-bar/15 hidden lg:table-cell">Quantity</th>
-            <th className="p-4 border-b border-bar/15 hidden lg:table-cell">Total</th>
-            <th className="p-4 border-b border-bar/15 hidden lg:table-cell"></th>
-          </tr>
-        </thead>}
+        {layout === 'page' && (
+          <thead>
+            <tr className="font-semibold p-2">
+              <th className="p-4 text-left border-bar/15 border-b border-bar">
+                Product
+              </th>
+              <th className="p-4 border-b border-bar/15 hidden lg:table-cell"></th>
+              <th className="p-4 border-b border-bar/15 hidden lg:table-cell">
+                Price
+              </th>
+              <th className="p-4 border-b border-bar/15 hidden lg:table-cell">
+                Quantity
+              </th>
+              <th className="p-4 border-b border-bar/15 hidden lg:table-cell">
+                Total
+              </th>
+              <th className="p-4 border-b border-bar/15 hidden lg:table-cell"></th>
+            </tr>
+          </thead>
+        )}
         <tbody>
           {currentLines.map((line) => (
-            <CartLineItem key={line.id} line={line as CartLine} layout={layout}/>
+            <CartLineItem
+              key={line.id}
+              line={line as CartLine}
+              layout={layout}
+            />
           ))}
         </tbody>
       </table>
@@ -247,12 +261,18 @@ type OptimisticData = {
   quantity?: number;
 };
 
-function CartLineItem({line, layout}: {line: CartLine, layout: 'drawer' | 'page'}) {
+function CartLineItem({
+  line,
+  layout,
+}: {
+  line: CartLine;
+  layout: 'drawer' | 'page';
+}) {
   const optimisticData = useOptimisticData<OptimisticData>(line?.id);
   let styles = {
-    page: "grid lg:table-row gap-2 grid-rows-2 grid-cols-[100px_1fr_64px]",
-    drawer: "grid gap-2 grid-rows-2 grid-cols-[100px_1fr_64px]"
-  }
+    page: 'grid lg:table-row gap-2 grid-rows-2 grid-cols-[100px_1fr_64px]',
+    drawer: 'grid gap-2 grid-rows-2 grid-cols-[100px_1fr_64px]',
+  };
   if (!line?.id) return null;
 
   const {id, quantity, merchandise, cost} = line;
@@ -262,11 +282,7 @@ function CartLineItem({line, layout}: {line: CartLine, layout: 'drawer' | 'page'
   // Do not remove the form from the DOM
   let style = optimisticData?.action === 'remove' ? {display: 'none'} : {};
   return (
-    <tr
-      key={line.id}
-      className={styles[layout]}
-      style={style}
-    >
+    <tr key={line.id} className={styles[layout]} style={style}>
       <td className="py-2 row-start-1 row-end-3">
         {merchandise.image && (
           <Image
@@ -304,16 +320,20 @@ function CartLineItem({line, layout}: {line: CartLine, layout: 'drawer' | 'page'
       <td className="py-2 lg:p-4 row-start-2">
         <div className="flex gap-2">
           <CartLineQuantityAdjust line={line as CartLine} />
-          {<div className="lg:hidden">
-            <ItemRemoveButton lineId={id} />
-          </div>}
+          {
+            <div className="lg:hidden">
+              <ItemRemoveButton lineId={id} />
+            </div>
+          }
         </div>
       </td>
-     {layout === 'page' && <td className="py-2 lg:p-4 col-start-3 hidden lg:table-cell">
-        <CartLinePrice line={line as CartLine} />
-      </td>}
+      {layout === 'page' && (
+        <td className="py-2 lg:p-4 col-start-3 hidden lg:table-cell">
+          <CartLinePrice line={line as CartLine} />
+        </td>
+      )}
       <td className="py-2 lg:p-4 lg:table-cell hidden">
-        <ItemRemoveButton lineIds={[id]} />
+        <ItemRemoveButton lineId={id} />
       </td>
     </tr>
   );

diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx
@@ -313,3 +313,10 @@ export function IconFacebook(props: IconProps) {
     </Icon>
   );
 }
+export function IconMapBlank(props: IconProps) {
+  return(
+    <Icon {...props} fill="none" stroke={props.stroke || 'currentColor'}>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M171.168 30.3128C171.673 30.4812 172.184 30.6519 172.702 30.8246L184.222 34.6645C188.66 36.1436 192.55 37.44 195.636 38.8757C198.972 40.4278 202.03 42.427 204.367 45.67C206.705 48.913 207.635 52.4459 208.052 56.1018C208.438 59.4836 208.438 63.5839 208.438 68.2621V146.966C208.438 153.66 208.438 159.305 207.919 163.767C207.38 168.403 206.172 172.987 202.793 176.684C200.789 178.877 198.354 180.633 195.64 181.84C191.064 183.876 186.333 183.573 181.764 182.618C177.367 181.699 172.012 179.914 165.662 177.797L165.253 177.661C154.514 174.082 150.835 172.966 147.262 173.088C145.839 173.137 144.424 173.326 143.038 173.654C139.559 174.476 136.302 176.52 126.884 182.799L113.636 191.631C113.182 191.934 112.733 192.234 112.291 192.529C102.118 199.319 95.0431 204.041 86.7721 205.149C78.501 206.256 70.4327 203.562 58.8317 199.688C58.3272 199.519 57.8161 199.349 57.298 199.176L45.778 195.336C41.3399 193.857 37.45 192.561 34.3639 191.125C31.0276 189.573 27.9701 187.574 25.6326 184.331C23.2952 181.088 22.3655 177.555 21.9481 173.899C21.562 170.517 21.5622 166.417 21.5625 161.739L21.5625 83.0345C21.5623 76.3411 21.5621 70.6961 22.081 66.2335C22.6201 61.5972 23.8285 57.0138 27.2067 53.3164C29.2107 51.1233 31.6462 49.3678 34.3605 48.1603C38.9364 46.1246 43.6667 46.4276 48.2356 47.3823C52.6333 48.3012 57.9885 50.0865 64.3383 52.2034L64.7468 52.3396C75.4856 55.9191 79.1654 57.0343 82.7378 56.9124C84.1612 56.8638 85.5762 56.6743 86.9622 56.3466C90.4409 55.5243 93.6976 53.4802 103.116 47.2012L116.364 38.3693C116.818 38.0664 117.267 37.7672 117.709 37.4719C127.882 30.6819 134.957 25.9595 143.228 24.8519C151.499 23.7442 159.567 26.4386 171.168 30.3128ZM150.938 39.344V158.885C156.071 159.441 161.477 161.246 168.6 163.624C168.994 163.755 169.394 163.889 169.799 164.024C176.667 166.313 181.224 167.82 184.705 168.547C188.109 169.258 189.276 168.938 189.797 168.706C190.701 168.304 191.513 167.719 192.181 166.988C192.566 166.567 193.239 165.561 193.64 162.107C194.051 158.575 194.063 153.775 194.063 146.536V68.6388C194.063 63.4727 194.052 60.2017 193.77 57.7323C193.509 55.4466 193.082 54.5968 192.706 54.0752C192.33 53.5536 191.659 52.8798 189.573 51.9094C187.319 50.8611 184.22 49.8164 179.319 48.1828L168.156 44.462C159.662 41.6306 154.623 40.0195 150.938 39.344ZM136.563 160.613V42.4867C133.58 44.21 129.755 46.7184 124.338 50.3301L111.09 59.1619C110.735 59.3988 110.384 59.6325 110.039 59.8633C103.443 64.2647 98.5258 67.5457 93.4375 69.3874V187.514C96.42 185.791 100.245 183.282 105.662 179.671L118.91 170.839C119.265 170.602 119.616 170.368 119.961 170.137C126.557 165.736 131.474 162.455 136.563 160.613ZM79.0625 190.657V71.1158C73.9288 70.5593 68.5228 68.7547 61.3997 66.3769C61.0055 66.2452 60.606 66.1119 60.201 65.9769C53.3332 63.6876 48.7762 62.1808 45.2953 61.4534C41.8916 60.7422 40.7244 61.0625 40.2035 61.2942C39.2987 61.6967 38.4869 62.2819 37.8189 63.0129C37.4344 63.4338 36.7614 64.4398 36.3598 67.8938C35.9491 71.4261 35.9375 76.2257 35.9375 83.465V161.362C35.9375 166.528 35.9484 169.799 36.2303 172.268C36.4913 174.554 36.9183 175.404 37.2942 175.925C37.6702 176.447 38.3413 177.121 40.4272 178.091C42.6807 179.14 45.7804 180.184 50.6814 181.818L61.8437 185.539C70.3379 188.37 75.3774 189.981 79.0625 190.657Z" fill="#0F0F0F" fill-opacity="0.05" />
+    </Icon>
+  );
+}
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import {useState} from 'react';
-import { IconClose, IconSearch } from '.';
+import {IconClose} from '.';
 
 const variants = {
   default: '',
@@ -30,16 +30,16 @@ export function Input({
   let commonClasses = clsx(
     'w-full rounded-sm border px-3 py-2.5',
     focused ? 'border-bar/50' : 'border-bar/10',
-    className
+    className,
   );
 
-  let handleClear = (e) => {
+  let handleClear = (e: any) => {
     e.preventDefault();
     e.stopPropagation();
     e.currentTarget.previousSibling.value = '';
-  }
+  };
   if (type === 'search') {
-    suffix = <IconClose onClick={handleClear}/>
+    suffix = <IconClose onClick={handleClear} />;
   }
   let hasChild = Boolean(prefix || suffix);
 

diff --git a/app/root.tsx b/app/root.tsx
@@ -253,7 +253,7 @@ async function getLayoutData({storefront, env}: AppLoadContext) {
       - /blog/news/blog-post -> /news/blog-post
       - /collections/all -> /products
   */
-  const customPrefixes = {BLOG: 'blogs', CATALOG: 'products'};
+  const customPrefixes = {BLOG: '', CATALOG: 'products'};
 
   const headerMenu = data?.headerMenu
     ? parseMenu(

diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx
@@ -17,7 +17,7 @@ export async function loader(args: RouteLoaderArgs) {
     params.locale.toLowerCase() !== `${language}-${country}`.toLowerCase()
   ) {
     // If the locale URL param is defined, yet we still are on `EN-US`
-    // then the locale param must be invalid, send to the 404 page
+    // the the locale param must be invalid, send to the 404 page
     throw new Response(null, {status: 404});
   }
 

diff --git a/app/routes/($locale).account.login.tsx b/app/routes/($locale).account.login.tsx
@@ -11,7 +11,7 @@ import {
   useLoaderData,
   type V2_MetaFunction,
 } from '@remix-run/react';
-import {useState} from 'react';
+import {MouseEvent, useState} from 'react';
 
 import {getInputStyleClasses} from '~/lib/utils';
 import {Input, Link, Button} from '~/components';
@@ -106,17 +106,13 @@ export default function Login() {
       <div className="max-w-sm w-full">
         <h2 className="text-center">Login</h2>
         {/* TODO: Add onSubmit to validate _before_ submission with native? */}
-        <Form
-          method="post"
-          noValidate
-          className="pt-6 pb-8 mt-4 mb-4"
-        >
+        <Form method="post" noValidate className="pt-6 pb-8 mt-4 mb-4">
           {actionData?.formError && (
             <div className="flex items-center justify-center mb-6 bg-zinc-500">
               <p className="m-4 text-sm">{actionData.formError}</p>
             </div>
           )}
-          <div className='space-y-3'>
+          <div className="space-y-3">
             <div>
               <Input
                 id="email"
@@ -128,7 +124,7 @@ export default function Login() {
                 aria-label="Email"
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
-                onBlur={(event) => {
+                onBlur={(event: MouseEvent<HTMLInputElement>) => {
                   setNativeEmailError(
                     event.currentTarget.value.length &&
                       !event.currentTarget.validity.valid
@@ -156,7 +152,7 @@ export default function Login() {
                 required
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
-                onBlur={(event) => {
+                onBlur={(event: MouseEvent<HTMLInputElement>) => {
                   if (
                     event.currentTarget.validity.valid ||
                     !event.currentTarget.value.length
@@ -194,7 +190,10 @@ export default function Login() {
             >
               Sign in
             </Button>
-            <Link className="inline underline text-body/70" to="/account/register">
+            <Link
+              className="inline underline text-body/70"
+              to="/account/register"
+            >
               Create an account
             </Link>
           </div>

diff --git a/app/routes/($locale).account.recover.tsx b/app/routes/($locale).account.recover.tsx
@@ -5,10 +5,9 @@ import {
   type LoaderArgs,
 } from '@shopify/remix-oxygen';
 import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
-import {useState} from 'react';
+import {useState, type MouseEvent} from 'react';
 
 import {Button, Input, Link} from '~/components';
-import {getInputStyleClasses} from '~/lib/utils';
 
 export async function loader({context, params}: LoaderArgs) {
   const customerAccessToken = await context.session.get('customerAccessToken');
@@ -74,13 +73,11 @@ export default function Recover() {
         ) : (
           <>
             <h2>Reset your password</h2>
-            <p className="mt-8 text-body/70">Enter your email to reset your password</p>
+            <p className="mt-8 text-body/70">
+              Enter your email to reset your password
+            </p>
             {/* TODO: Add onSubmit to validate _before_ submission with native? */}
-            <Form
-              method="post"
-              noValidate
-              className="mt-4 pb-8 mb-4 space-y-8"
-            >
+            <Form method="post" noValidate className="mt-4 pb-8 mb-4 space-y-8">
               {actionData?.formError && (
                 <div className="flex items-center justify-center mb-6 bg-zinc-500">
                   <p className="m-4 text-s text-contrast">
@@ -99,7 +96,7 @@ export default function Recover() {
                   aria-label="Email address"
                   // eslint-disable-next-line jsx-a11y/no-autofocus
                   autoFocus
-                  onBlur={(event) => {
+                  onBlur={(event: MouseEvent<HTMLInputElement>) => {
                     setNativeEmailError(
                       event.currentTarget.value.length &&
                         !event.currentTarget.validity.valid

diff --git a/app/routes/($locale).account.register.tsx b/app/routes/($locale).account.register.tsx
@@ -5,7 +5,7 @@ import {
   type LoaderArgs,
 } from '@shopify/remix-oxygen';
 import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
-import {useState} from 'react';
+import {useState, type MouseEvent} from 'react';
 
 import {getInputStyleClasses} from '~/lib/utils';
 import {Button, Input, Link} from '~/components';
@@ -120,7 +120,7 @@ export default function Register() {
                 aria-label="Email"
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
-                onBlur={(event) => {
+                onBlur={(event: MouseEvent<HTMLInputElement>) => {
                   setNativeEmailError(
                     event.currentTarget.value.length &&
                       !event.currentTarget.validity.valid
@@ -147,7 +147,7 @@ export default function Register() {
                 required
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
-                onBlur={(event) => {
+                onBlur={(event: MouseEvent<HTMLInputElement>) => {
                   if (
                     event.currentTarget.validity.valid ||
                     !event.currentTarget.value.length