Merge pull request #124 from Weaverse/dev

v2.1.1
Weaverse · Dec 20, 2024 · 8cfeea1 · 8cfeea1
2 parents 7864136 + 3416422
commit 8cfeea1
Show file tree

Hide file tree

Showing 59 changed files with 1,820 additions and 903 deletions.
diff --git a/@/lib/utils.ts b/@/lib/utils.ts
diff --git a/app/components/AddToCartButton.tsx b/app/components/AddToCartButton.tsx
@@ -1,34 +1,36 @@
-import type { CartLineInput } from '@shopify/hydrogen/storefront-api-types';
-import type { ShopifyAddToCartPayload } from '@shopify/hydrogen';
+import type { CartLineInput } from "@shopify/hydrogen/storefront-api-types";
+import type { ShopifyAddToCartPayload } from "@shopify/hydrogen";
 import {
   AnalyticsEventName,
   CartForm,
   getClientBrowserParameters,
   sendShopifyAnalytics,
-} from '@shopify/hydrogen';
-import type { FetcherWithComponents } from '@remix-run/react';
-import { useEffect } from 'react';
+} from "@shopify/hydrogen";
+import type { FetcherWithComponents } from "@remix-run/react";
+import { useEffect } from "react";
 
-import { Button } from '~/components/button';
-import { usePageAnalytics } from '~/hooks/usePageAnalytics';
+import { Button } from "~/components/button";
+import { usePageAnalytics } from "~/hooks/usePageAnalytics";
 
 export function AddToCartButton({
   children,
   lines,
-  className = '',
-  variant = 'primary',
-  width = 'full',
+  className = "",
+  variant = "primary",
+  width = "full",
   disabled,
   analytics,
+  onFetchingStateChange,
   ...props
 }: {
   children: React.ReactNode;
   lines: CartLineInput[];
   className?: string;
-  variant?: 'primary' | 'secondary' | 'outline';
-  width?: 'auto' | 'full';
+  variant?: "primary" | "secondary" | "outline";
+  width?: "auto" | "full";
   disabled?: boolean;
   analytics?: unknown;
+  onFetchingStateChange?: (state: string) => void;
   [key: string]: any;
 }) {
   return (
@@ -40,6 +42,12 @@ export function AddToCartButton({
       action={CartForm.ACTIONS.LinesAdd}
     >
       {(fetcher: FetcherWithComponents<any>) => {
+        useEffect(() => {
+          if (onFetchingStateChange) {
+            onFetchingStateChange(fetcher.state);
+          }
+        }, [fetcher.state]);
+
         return (
           <AddToCartAnalytics fetcher={fetcher}>
             <input
@@ -52,8 +60,8 @@ export function AddToCartButton({
               type="submit"
               size="lg"
               className={className}
-              disabled={disabled ?? fetcher.state !== 'idle'}
-              loading={fetcher.state === 'submitting'}
+              disabled={disabled ?? fetcher.state !== "idle"}
+              loading={fetcher.state === "submitting"}
               variant={variant}
               {...props}
             >
@@ -85,7 +93,7 @@ function AddToCartAnalytics({
       try {
         if (cartInputs.inputs.analytics) {
           const dataInForm: unknown = JSON.parse(
-            String(cartInputs.inputs.analytics),
+            String(cartInputs.inputs.analytics)
           );
           Object.assign(cartData, dataInForm);
         }

diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -1,23 +1,29 @@
 import { Button } from "~/components/button";
 import { Input } from "~/components/input";
-import { cn } from "@/lib/utils";
 import { Link } from "@remix-run/react";
-import { CartForm, Image, Money } from "@shopify/hydrogen";
+import { CartForm, Image, Money, OptimisticCart, OptimisticInput, useOptimisticCart, useOptimisticData } from "@shopify/hydrogen";
 import type { CartLineUpdateInput } from "@shopify/hydrogen/storefront-api-types";
 import clsx from "clsx";
 import type { CartApiQueryFragment } from "storefrontapi.generated";
 import { useVariantUrl } from "~/lib/variants";
 import { IconRemove } from "./Icon";
+import { cn } from "~/lib/utils";
 
-type CartLine = CartApiQueryFragment["lines"]["nodes"][0];
+type CartLine = OptimisticCart<CartApiQueryFragment>["lines"]["nodes"][0];
 
 type CartMainProps = {
-  cart: CartApiQueryFragment | null;
+  cart: CartApiQueryFragment;
   layout: "page" | "aside";
 };
 
+type OptimisticData = {
+  action?: string;
+  quantity?: number;
+};
+
 export function CartMain({ layout, cart }: CartMainProps) {
-  const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
+  let optimisticCart = useOptimisticCart<CartApiQueryFragment>(cart);
+  const linesCount = Boolean(optimisticCart?.lines?.nodes?.length || 0);
   const withDiscount =
     cart &&
     Boolean(cart.discountCodes.filter((code) => code.applicable).length);
@@ -28,7 +34,7 @@ export function CartMain({ layout, cart }: CartMainProps) {
   return (
     <div className={styles[layout]}>
       <CartEmpty hidden={linesCount} layout={layout} />
-      <CartDetails cart={cart} layout={layout} />
+      <CartDetails cart={optimisticCart} layout={layout} />
     </div>
   );
 }
@@ -104,6 +110,7 @@ function CartLineItem({
   layout: CartMainProps["layout"];
   line: CartLine;
 }) {
+  let optimisticData = useOptimisticData<OptimisticData>(line?.id);
   const { id, merchandise } = line;
   const { product, title, image, selectedOptions } = merchandise;
   const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
@@ -120,7 +127,11 @@ function CartLineItem({
   let cellClass = cellStyles[layout];
 
   return (
-    <tr key={id} className={styles[layout]}>
+    <tr key={id} className={styles[layout]} style={{
+      // Hide the line item if the optimistic data action is remove
+      // Do not remove the form from the DOM
+      display: optimisticData?.action === "remove" ? "none" : "",
+    }}>
       <td className="row-start-1 row-end-3">
         {image && (
           <Image
@@ -158,7 +169,7 @@ function CartLineItem({
             </p>
           </Link>
           <div className={layout === "page" ? "md:hidden" : ""}>
-            <CartLineRemoveButton lineIds={[line.id]} />
+            <CartLineRemoveButton lineId={line.id} />
           </div>
         </div>
         <ul className="space-y-1">
@@ -190,7 +201,7 @@ function CartLineItem({
             <CartLinePrice line={line} as="span" />
           </td>
           <td className="py-2 md:p-4 text-center md:table-cell hidden">
-            <CartLineRemoveButton lineIds={[line.id]} />
+            <CartLineRemoveButton lineId={line.id} />
           </td>
         </>
       )}
@@ -325,16 +336,17 @@ export function CartSummary({
   );
 }
 
-function CartLineRemoveButton({ lineIds }: { lineIds: string[] }) {
+function CartLineRemoveButton({ lineId }: { lineId: CartLine["id"] }) {
   return (
     <CartForm
       route="/cart"
       action={CartForm.ACTIONS.LinesRemove}
-      inputs={{ lineIds }}
+      inputs={{ lineIds: [lineId] }}
     >
       <button type="submit">
         <IconRemove />
       </button>
+      <OptimisticInput id={lineId} data={{ action: "remove" }} />
     </CartForm>
   );
 }
@@ -346,10 +358,15 @@ function CartLineQuantity({
   line: CartLine;
   layout: CartMainProps["layout"];
 }) {
+  let optimisticId = line?.id;
+  let optimisticData = useOptimisticData<OptimisticData>(optimisticId);
+
   if (!line || typeof line?.quantity === "undefined") return null;
+
+  let optimisticQuantity = optimisticData?.quantity || line.quantity;
   const { id: lineId, quantity } = line;
-  const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
-  const nextQuantity = Number((quantity + 1).toFixed(0));
+  let prevQuantity = Number(Math.max(0, optimisticQuantity - 1).toFixed(0));
+  let nextQuantity = Number((optimisticQuantity + 1).toFixed(0));
   let buttonStyles = {
     page: "w-10 h-10 transition",
     aside: "w-10 h-[35px] transition",
@@ -365,9 +382,13 @@ function CartLineQuantity({
           value={prevQuantity}
         >
           <span>&#8722; </span>
+          <OptimisticInput
+              id={optimisticId}
+              data={{ quantity: prevQuantity }}
+            />
         </button>
       </CartLineUpdateButton>
-      <div className="px-2 w-8 text-center">{quantity}</div>
+      <div className="px-2 w-8 text-center">{optimisticQuantity}</div>
       <CartLineUpdateButton lines={[{ id: lineId, quantity: nextQuantity }]}>
         <button
           className={buttonStyles[layout]}
@@ -376,6 +397,10 @@ function CartLineQuantity({
           value={nextQuantity}
         >
           <span>&#43;</span>
+          <OptimisticInput
+              id={optimisticId}
+              data={{ quantity: nextQuantity }}
+            />
         </button>
       </CartLineUpdateButton>
     </div>

diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from "~/lib/utils";
 import { Dialog, Transition } from "@headlessui/react";
 import { useLocation } from "@remix-run/react";
 import { Fragment, useEffect, useState } from "react";

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -5,18 +5,35 @@ import {NavLink, useFetcher} from '@remix-run/react';
 import {useThemeSettings} from '@weaverse/hydrogen';
 import {getMaxDepth} from '~/lib/menu';
 import {SingleMenuItem} from '~/lib/type';
-import {EnhancedMenu} from '~/lib/utils';
+import {cn, EnhancedMenu} from '~/lib/utils';
 import React from 'react';
 import {CountrySelector} from './CountrySelector';
 import {IconPlusLinkFooter} from './Icon';
 import {LayoutProps} from './Layout';
+import { cva } from 'class-variance-authority';
+
+let variants = cva("", {
+  variants: {
+    width: {
+      full: "w-full h-full",
+      stretch: "w-full h-full",
+      fixed: "w-full h-full container mx-auto",
+    },
+    padding: {
+      full: "",
+      stretch: "px-3 md:px-10 lg:px-16",
+      fixed: "px-3 md:px-4 lg:px-6 mx-auto",
+    },
+  },
+});
 
 type FooterProps = Pick<LayoutProps, 'footerMenu'>;
 export function Footer({footerMenu}: FooterProps) {
   let fetcher = useFetcher<any>();
   let isError = fetcher.state === 'idle' && fetcher.data?.errors;
   const settings = useThemeSettings();
   let {
+    footerWidth,
     footerTextCopyright,
     newsletterTitle,
     newsletterDescription,
@@ -25,8 +42,8 @@ export function Footer({footerMenu}: FooterProps) {
     tagNameTitle: Tag = 'h6',
   } = settings;
   return (
-    <footer className="footer w-full bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] border-t border-[var(--color-footer-text)]">
-      <div className="container flex h-fit flex-col gap-6 px-4 pb-10 pt-6 md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-0 lg:py-16">
+    <footer className={cn("footer w-full bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] border-t border-[var(--color-footer-text)]", variants({ padding: footerWidth }))}>
+      <div className={cn("flex h-fit flex-col gap-6 px-4 pb-10 pt-6 md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-0 lg:py-16", variants({ width: footerWidth }))}>
         <div className="flex flex-col justify-center gap-4 md:flex-row md:gap-4 lg:gap-10">
           <div className="flex w-full flex-col items-start gap-6 border-b border-foreground pb-6 md:h-fit md:border-none md:pb-0">
             {newsletterTitle && <Tag className='font-semibold'>{newsletterTitle}</Tag>}

diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -3,14 +3,14 @@ import { UseMenuDrawerHeader } from "./MenuDrawerHeader";
 import { UseMenuMegaHeader } from "./MenuMegaHeader";
 import type { LayoutProps } from "../Layout";
 import { AnnouncementBar } from "./AnnouncementBar";
-import { CartApiQueryFragment } from "storefrontapi.generated";
 import { Drawer, useDrawer } from "../Drawer";
 import { Suspense } from "react";
 import { CartLoading } from "../CartLoading";
-import { Await } from "@remix-run/react";
+import { Await, useRouteLoaderData } from "@remix-run/react";
 import { CartMain } from "../Cart";
 import { useCartFetchers } from "~/hooks/useCartFetchers";
-import { CartForm } from "@shopify/hydrogen";
+import { CartForm, CartReturn } from "@shopify/hydrogen";
+import { RootLoader } from "~/root";
 
 type HeaderProps = Pick<LayoutProps, "headerMenu" | "cart">;
 
@@ -26,7 +26,7 @@ export function Header({ headerMenu, cart }: HeaderProps) {
   useCartFetchers(CartForm.ACTIONS.LinesAdd, openCart);
   return (
     <>
-    <CartDrawer isOpen={isCartOpen} onClose={closeCart} cart={cart} />
+    <CartDrawer isOpen={isCartOpen} onClose={closeCart} />
       {enableTrialShipping && <AnnouncementBar />}
       {typeMenu === "mega" && (
         <UseMenuMegaHeader
@@ -51,12 +51,11 @@ export function Header({ headerMenu, cart }: HeaderProps) {
 function CartDrawer({
   isOpen,
   onClose,
-  cart,
 }: {
   isOpen: boolean;
   onClose: () => void;
-  cart: Promise<CartApiQueryFragment | null>;
 }) {
+  let rootData = useRouteLoaderData<RootLoader>("root");
   return (
     <Drawer
       open={isOpen}
@@ -67,12 +66,12 @@ function CartDrawer({
     >
       <div>
         <Suspense fallback={<CartLoading />}>
-          <Await resolve={cart}>
+          <Await resolve={rootData?.cart}>
             {(cart) => (
               <CartMain
                 layout="aside"
                 // onClose={onClose}
-                cart={cart}
+                cart={cart as CartReturn}
               />
             )}
           </Await>