Merge pull request #45 from Weaverse/v2.3.0--ac3f49f--nov-05

v2.3.0

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
   <p style="text-align: center;">
-    <img alt="Version" src="https://img.shields.io/badge/version-2.2.4-blue.svg?cacheSeconds=2592000" />
+    <img alt="Version" src="https://img.shields.io/badge/version-2.3.0-blue.svg?cacheSeconds=2592000" />
     <a href="#" target="_blank">
       <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg?label=license" />
     </a>
@@ -46,7 +46,7 @@ Follow these steps to get started with Pilot and begin crafting your Hydrogen-dr
 1. Install [Weaverse Hydrogen Customizer](https://apps.shopify.com/weaverse) from Shopify App Store.
 2. Create new Hydrogen storefront inside Weaverse.
 3. Initialize the project and start a local dev server with `@weaverse/cli` tool as instructed in the Weaverse editor.
-   ![Init Weaverse Storefront](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/init-project_4882deaa-c661-47cc-a7bf-38b2704e6a0b.png?v=1695816089)
+   ![Init Weaverse Storefront](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/New_storefront.png?v=1699244454)
 4. Open the Weaverse editor to start customizing and tailoring your storefront according to your preferences.
 
 ## Features overview
@@ -270,7 +270,7 @@ And then you can use the data in your component with `Component.props.loaderData
 
 Weaverse provides a convenient way to customize your theme inside the **Weaverse editor**. You can add new sections, customize existing ones, and change the theme settings.
 
-![Weaverse Editor](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/Live_demo_-_Weaverse_Hydrogen_2023-09-27_18-58-23.png?v=1695826457)
+![Weaverse Editor](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/playground.jpg?v=1699244445)
 
 ## References
 

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

app/components/CountrySelector.tsx

@@ -8,12 +8,13 @@ import {CartForm} from '@shopify/hydrogen';
 import {Heading, Button, IconCheck} from '~/components';
 import type {Localizations, Locale} from '~/lib/type';
 import {DEFAULT_LOCALE} from '~/lib/utils';
+import {useRootLoaderData} from '~/root';
 
 export function CountrySelector() {
-  const [root] = useMatches();
   const fetcher = useFetcher();
   const closeRef = useRef<HTMLDetailsElement>(null);
-  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
   const {pathname, search} = useLocation();
   const pathWithoutLocale = `${pathname.replace(
     selectedLocale.pathPrefix,

app/components/FeaturedProducts.tsx

@@ -26,8 +26,8 @@ interface FeaturedProductsProps {
  * @param query a filtering query
  * @param reverse wether to reverse the product results
  * @param sortKey Sort the underlying list by the given key.
- * @see query https://shopify.dev/api/storefront/2023-07/queries/products
- * @see filters https://shopify.dev/api/storefront/2023-07/queries/products#argument-products-query
+ * @see query https://shopify.dev/api/storefront/current/queries/products
+ * @see filters https://shopify.dev/api/storefront/current/queries/products#argument-products-query
  */
 export function FeaturedProducts({
   count = 4,
@@ -38,7 +38,7 @@ export function FeaturedProducts({
   reverse,
   sortKey = 'BEST_SELLING',
 }: FeaturedProductsProps) {
-  const {load, data} = useFetcher();
+  const {load, data} = useFetcher<{products: Product[]}>();
   const queryString = useMemo(
     () =>
       Object.entries({count, sortKey, query, reverse})
@@ -69,7 +69,7 @@ export function FeaturedProducts({
         <FeatureProductsContent
           count={count}
           onClick={onClose}
-          products={data?.products as Product[]}
+          products={data?.products}
         />
       </div>
     </>

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

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

app/components/Layout.tsx

@@ -1,4 +1,4 @@
-import {useParams, Form, Await, useMatches} from '@remix-run/react';
+import {useParams, Form, Await} from '@remix-run/react';
 import {useWindowScroll} from 'react-use';
 import {Disclosure} from '@headlessui/react';
 import {Suspense, useEffect, useMemo} from 'react';
@@ -32,6 +32,7 @@ import {useIsHydrated} from '~/hooks/useIsHydrated';
 import {useCartFetchers} from '~/hooks/useCartFetchers';
 import {Logo} from './Logo';
 import clsx from 'clsx';
+import {useRootLoaderData} from '~/root';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -107,13 +108,13 @@ function Header({title, menu}: {title: string; menu?: EnhancedMenu}) {
 }
 
 function CartDrawer({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
-  const [root] = useMatches();
+  const rootData = useRootLoaderData();
 
   return (
     <Drawer open={isOpen} onClose={onClose} heading="Cart" openFrom="right">
       <div className="grid">
         <Suspense fallback={<CartLoading />}>
-          <Await resolve={root.data?.cart}>
+          <Await resolve={rootData?.cart}>
             {(cart) => <Cart layout="drawer" onClose={onClose} cart={cart} />}
           </Await>
         </Suspense>
@@ -295,8 +296,8 @@ function DesktopHeader({
 }
 
 function AccountLink({className}: {className?: string}) {
-  const [root] = useMatches();
-  const isLoggedIn = root.data?.isLoggedIn;
+  const rootData = useRootLoaderData();
+  const isLoggedIn = rootData?.isLoggedIn;
   return isLoggedIn ? (
     <Link to="/account" className={className}>
       <IconAccount />
@@ -315,11 +316,11 @@ function CartCount({
   isHome: boolean;
   openCart: () => void;
 }) {
-  const [root] = useMatches();
+  const rootData = useRootLoaderData();
 
   return (
     <Suspense fallback={<Badge count={0} dark={isHome} openCart={openCart} />}>
-      <Await resolve={root.data?.cart}>
+      <Await resolve={rootData?.cart}>
         {(cart) => (
           <Badge
             dark={isHome}

app/components/Link.tsx

@@ -3,8 +3,8 @@ import {
   NavLink as RemixNavLink,
   type NavLinkProps as RemixNavLinkProps,
   type LinkProps as RemixLinkProps,
-  useMatches,
 } from '@remix-run/react';
+import {useRootLoaderData} from '~/root';
 
 type LinkProps = Omit<RemixLinkProps, 'className'> & {
   className?: RemixNavLinkProps['className'] | RemixLinkProps['className'];
@@ -27,8 +27,8 @@ type LinkProps = Omit<RemixLinkProps, 'className'> & {
  */
 export function Link(props: LinkProps) {
   const {to, className, ...resOfProps} = props;
-  const [root] = useMatches();
-  const selectedLocale = root.data?.selectedLocale;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale;
 
   let toWithLocale = to;
 

app/data/queries.ts

@@ -29,7 +29,7 @@ export let HOMEPAGE_SEO_QUERY = `#graphql
   ${COLLECTION_CONTENT_FRAGMENT}
 ` as const;
 
-// @see: https://shopify.dev/api/storefront/2023-04/queries/products
+// @see: https://shopify.dev/api/storefront/current/queries/products
 export let HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
   query homepageFeaturedProducts($country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
@@ -42,7 +42,7 @@ export let HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
   ${PRODUCT_CARD_FRAGMENT}
 `;
 
-// @see: https://shopify.dev/api/storefront/2023-04/queries/collections
+// @see: https://shopify.dev/api/storefront/current/queries/collections
 export let FEATURED_COLLECTIONS_QUERY = `#graphql
   query homepageFeaturedCollections($country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
@@ -235,7 +235,6 @@ export let COLLECTION_QUERY = `#graphql
         pageInfo {
           hasPreviousPage
           hasNextPage
-          hasNextPage
           endCursor
           startCursor
         }

app/hooks/useCartFetchers.tsx

@@ -6,9 +6,8 @@ export function useCartFetchers(actionName: string) {
   const cartFetchers = [];
 
   for (const fetcher of fetchers) {
-    const formData = fetcher.submission?.formData;
-    if (formData) {
-      const formInputs = CartForm.getFormInput(formData);
+    if (fetcher.formData) {
+      const formInputs = CartForm.getFormInput(fetcher.formData);
       if (formInputs.action === actionName) {
         cartFetchers.push(fetcher);
       }

app/hooks/usePageAnalytics.tsx

@@ -11,11 +11,13 @@ export function usePageAnalytics({hasUserConsent}: {hasUserConsent: boolean}) {
     const data: Record<string, unknown> = {};
 
     matches.forEach((event) => {
-      const eventData = event?.data;
+      const eventData = event?.data as Record<string, unknown>;
       if (eventData) {
         eventData['analytics'] && Object.assign(data, eventData['analytics']);
 
-        const selectedLocale = eventData['selectedLocale'] || DEFAULT_LOCALE;
+        const selectedLocale =
+          (eventData['selectedLocale'] as typeof DEFAULT_LOCALE) ||
+          DEFAULT_LOCALE;
         Object.assign(data, {
           currency: selectedLocale.currency,
           acceptedLanguage: selectedLocale.language,

app/lib/utils.ts

@@ -8,6 +8,7 @@ import type {
   ParentMenuItemFragment,
 } from 'storefrontapi.generated';
 import {countries} from '~/data/countries';
+import {useRootLoaderData} from '~/root';
 
 import type {I18nLocale} from './type';
 
@@ -296,8 +297,8 @@ export function getLocaleFromRequest(request: Request): I18nLocale {
 }
 
 export function usePrefixPathWithLocale(path: string) {
-  const [root] = useMatches();
-  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
 
   return `${selectedLocale.pathPrefix}${
     path.startsWith('/') ? path : '/' + path
@@ -306,8 +307,8 @@ export function usePrefixPathWithLocale(path: string) {
 
 export function useIsHomePath() {
   const {pathname} = useLocation();
-  const [root] = useMatches();
-  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
   const strippedPathname = pathname.replace(selectedLocale.pathPrefix, '');
   return strippedPathname === '/';
 }