Merge pull request Weaverse#96 from Weaverse/dev

Dev
Weaverse · Aug 22, 2024 · bcc67da · bcc67da
2 parents 1e3ec00 + 5a56fad
commit bcc67da
Show file tree

Hide file tree

Showing 19 changed files with 383 additions and 121 deletions.
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -9,15 +9,15 @@ import {Input} from '@/components/input';
 import {cn} from '@/lib/utils';
 import clsx from "clsx";
 
-type CartLine = CartApiQueryFragment['lines']['nodes'][0];
+type CartLine = CartApiQueryFragment['lines']['edges'][0]['node'];
 
 type CartMainProps = {
   cart: CartApiQueryFragment | null;
   layout: 'page' | 'aside';
 };
 
 export function CartMain({layout, cart}: CartMainProps) {
-  const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
+  const linesCount = Boolean(cart?.lines?.edges?.length || 0);
   const withDiscount =
     cart &&
     Boolean(cart.discountCodes.filter((code) => code.applicable).length);
@@ -40,6 +40,7 @@ function CartDetails({layout, cart}: CartMainProps) {
     aside:
       'cart-details flex flex-col gap-6 relative justify-between h-screen-in-drawer',
   };
+  if (!cart) return null;
   return (
     <div className={styles[layout]}>
       <CartLines lines={cart?.lines} layout={layout} />
@@ -84,7 +85,7 @@ function CartLines({
           </thead>
         )}
         <tbody>
-          {lines.nodes.map((line) => (
+          {lines?.edges?.map(({node: line}) => (
             <CartLineItem key={line.id} line={line} layout={layout} />
           ))}
         </tbody>

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -61,7 +61,7 @@ export function Footer({footerMenu}: FooterProps) {
           </div>
           {footerMenu && <FooterMenu menu={footerMenu} />}
         </div>
-        <div className="flex w-full items-center justify-between">
+        <div className="flex w-full flex-col justify-between gap-4 sm:flex-row sm:items-center">
           <CountrySelector />
           <p className="text-xs">{footerTextCopyright}</p>
         </div>

diff --git a/app/components/Header/AnnouncementBar.tsx b/app/components/Header/AnnouncementBar.tsx
@@ -1,9 +1,12 @@
 import {useThemeSettings} from '@weaverse/hydrogen';
 import clsx from 'clsx';
-import {CSSProperties, useState} from 'react';
+import {CSSProperties, useEffect, useRef, useState} from 'react';
 
 export function AnnouncementBar() {
   const [isVisible, setIsVisible] = useState(true);
+  const [shouldScroll, setShouldScroll] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const settings = useThemeSettings();
   let {
     content,
@@ -30,10 +33,30 @@ export function AnnouncementBar() {
     setIsVisible(false);
   };
 
+  useEffect(() => {
+    const checkScrollCondition = () => {
+      if (contentRef.current && containerRef.current) {
+        const contentWidth = contentRef.current.scrollWidth;
+        const containerWidth = containerRef.current.clientWidth;
+        if (contentWidth > containerWidth || enableScrollingText) {
+          setShouldScroll(true);
+        } else {
+          setShouldScroll(false);
+        }
+      }
+    };
+    setTimeout(checkScrollCondition, 0);
+    window.addEventListener('resize', checkScrollCondition);
+    return () => {
+      window.removeEventListener('resize', checkScrollCondition);
+    };
+  }, [content, enableScrollingText]);
+
   if (!isVisible) return null;
   return (
     <div
       id="announcement-bar"
+      ref={containerRef}
       style={style}
       className={clsx(
         'h-[var(--height-bar)] bg-[var(--background-color)] py-[var(--vertical-padding)]',
@@ -48,31 +71,40 @@ export function AnnouncementBar() {
       >
         ×
       </button>
-      {enableScrollingText && (
+      {shouldScroll && (
         <>
           <div className="absolute right-0 z-10 h-full w-11 bg-[var(--background-color)]" />
           <div className="absolute left-0 z-10 h-full w-11 bg-[var(--background-color)]" />
+          <ul className="inline-flex list-none">
+            {Array.from({length: 15}).map((_, i) => (
+              <li
+                key={i}
+                className="animate-scrollContent whitespace-nowrap pr-[var(--gap)] font-body font-normal text-[var(--text-color)]"
+                style={{
+                  animationDuration: `var(--speed)`,
+                  fontSize: `${textSize}px`,
+                }}
+              >
+                {content}
+              </li>
+            ))}
+          </ul>
         </>
       )}
-      {!enableScrollingText && (
-        <div className="flex items-center justify-center">{content}</div>
-      )}
-      {enableScrollingText && (
-        <ul className="inline-flex list-none">
-          {Array.from({length: 15}).map((_, i) => (
-            <li
-              key={i}
-              className="animate-scrollContent whitespace-nowrap pr-[var(--gap)] font-body font-normal text-[var(--text-color)]"
-              style={{
-                animationDuration: `var(--speed)`,
-                fontSize: `${textSize}px`,
-              }}
-            >
-              {content}
-            </li>
-          ))}
-        </ul>
-      )}
+      <div
+        className={clsx(
+          'flex items-center justify-center',
+          !shouldScroll ? 'w-full' : 'w-0',
+        )}
+        style={{fontSize: `${textSize}px`}}
+      >
+        <div
+          ref={contentRef}
+          className="w-fit whitespace-nowrap px-11 font-body font-normal text-[var(--text-color)]"
+        >
+          {content}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -4,9 +4,9 @@ import {UseMenuMegaHeader} from './MenuMegaHeader';
 import type {LayoutProps} from '../Layout';
 import { AnnouncementBar } from './AnnouncementBar';
 
-type HeaderProps = Pick<LayoutProps, 'headerMenu' | 'cart' | 'isLoggedIn'>;
+type HeaderProps = Pick<LayoutProps, 'headerMenu' | 'cart' >;
 
-export function Header({headerMenu, isLoggedIn, cart}: HeaderProps) {
+export function Header({headerMenu, cart}: HeaderProps) {
   let settings = useThemeSettings();
   let typeMenu = settings?.typeMenuHeader;
   let enableTrialShipping = settings?.enableTrialShipping;
@@ -16,21 +16,18 @@ export function Header({headerMenu, isLoggedIn, cart}: HeaderProps) {
       {typeMenu === 'mega' && (
         <UseMenuMegaHeader
           header={headerMenu}
-          isLoggedIn={isLoggedIn}
           cart={cart}
           className="hidden xl:flex"
         />
       )}
       {typeMenu === 'drawer' ? (
         <UseMenuDrawerHeader
           header={headerMenu}
-          isLoggedIn={isLoggedIn}
           cart={cart}
         />
       ) : (
         <UseMenuDrawerHeader
           header={headerMenu}
-          isLoggedIn={isLoggedIn}
           cart={cart}
           className="block xl:hidden"
         />

diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx
@@ -20,12 +20,10 @@ import {SearchToggle} from './SearchToggle';
 
 export function UseMenuDrawerHeader({
   header,
-  isLoggedIn,
   cart,
   className,
 }: {
   header: EnhancedMenu | null | undefined;
-  isLoggedIn: Promise<boolean>;
   cart: Promise<CartApiQueryFragment | null>;
   className?: string;
 }) {

diff --git a/app/components/Header/MenuMegaHeader.tsx b/app/components/Header/MenuMegaHeader.tsx
@@ -20,12 +20,10 @@ import {SearchToggle} from './SearchToggle';
 
 export function UseMenuMegaHeader({
   header,
-  isLoggedIn,
   cart,
   className,
 }: {
   header: EnhancedMenu | null | undefined;
-  isLoggedIn: Promise<boolean>;
   cart: Promise<CartApiQueryFragment | null>;
   className?: string;
 }) {

diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
@@ -12,23 +12,21 @@ export type LayoutProps = {
   children?: React.ReactNode;
   footerMenu: EnhancedMenu | undefined | null;
   headerMenu: EnhancedMenu | undefined | null;
-  isLoggedIn: Promise<boolean>;
 };
 
 export function Layout({
   cart,
   children = null,
   footerMenu,
   headerMenu,
-  isLoggedIn,
 }: LayoutProps) {
 
   return (
     <>
       {/* <CartAside cart={cart} /> */}
       {/* <SearchAside /> */}
       {/* <MobileMenuAside menu={header?.menu} shop={header?.shop} /> */}
-      {headerMenu && <Header headerMenu={headerMenu} cart={cart} isLoggedIn={isLoggedIn} />}
+      {headerMenu && <Header headerMenu={headerMenu} cart={cart} />}
       <main>{children}</main>
       <Suspense>
         <Await resolve={footerMenu}>

diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
@@ -73,7 +73,7 @@ export function ProductCard({
   return (
     <div className="flex flex-col gap-2 w-full">
       <div className={clsx('grid gap-4', className)}>
-        <div className="card-image group relative aspect-[4/5] bg-primary/5">
+        <div className="card-image group/productCard relative aspect-[4/5] bg-primary/5">
           {image && (
             <Link
               onClick={onClick}
@@ -86,7 +86,7 @@ export function ProductCard({
               {hasTwoImages && (
                 <>
                   <Image
-                    className="fadeIn w-full object-cover absolute opacity-100 transition-opacity duration-300 group-hover:opacity-0"
+                    className="fadeIn w-full object-cover absolute opacity-100 transition-opacity duration-300 group-hover/productCard:opacity-0"
                     sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                     aspectRatio="4/5"
                     data={productImages[0]}
@@ -96,7 +96,7 @@ export function ProductCard({
                     loading={loading}
                   />
                   <Image
-                    className="fadeIn w-full object-cover absolute opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                    className="fadeIn w-full object-cover absolute opacity-0 transition-opacity duration-300 group-hover/productCard:opacity-100"
                     sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                     aspectRatio="4/5"
                     data={productImages[1]}
@@ -135,7 +135,7 @@ export function ProductCard({
           {quickAdd &&
             variants.length === 1 &&
             firstVariant.availableForSale && (
-              <div className="absolute bottom-0 hidden w-full bg-[rgba(238,239,234,0.10)] px-3 py-5 opacity-100 backdrop-blur-2xl lg:group-hover:block">
+              <div className="absolute bottom-0 hidden w-full bg-[rgba(238,239,234,0.10)] px-3 py-5 opacity-100 backdrop-blur-2xl lg:group-hover/productCard:block">
                 <AddToCartButton
                   className="w-full"
                   lines={[

diff --git a/app/components/QuickView.tsx b/app/components/QuickView.tsx
@@ -182,7 +182,7 @@ export function QuickViewTrigger(props: {productHandle: string}) {
   }, [quickAddOpen, data, load, state]);
   return (
     <>
-      <div className="mt-2 absolute bottom-0 hidden lg:group-hover:block py-5 px-3 w-full opacity-100 bg-[rgba(238,239,234,0.10)] backdrop-blur-2xl">
+      <div className="mt-2 absolute bottom-0 hidden lg:group-hover/productCard:block py-5 px-3 w-full opacity-100 bg-[rgba(238,239,234,0.10)] backdrop-blur-2xl">
         <Button
           onClick={(e) => {
             e.preventDefault();

diff --git a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx
@@ -64,7 +64,7 @@ export function SearchTypeHeaderResults() {
           <div className="flex flex-col items-start gap-6">
             <PredictiveSearchResult
               goToSearchResult={goToSearchResult}
-              items={products.items}
+              items={products.items.slice(0, 5)}
               key={products.type}
               searchTerm={searchTerm}
               type={products.type}

diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
@@ -4,6 +4,9 @@ import { useState } from "react";
 import type { MediaFragment } from "storefrontapi.generated";
 import { FreeMode, Pagination, Thumbs } from "swiper/modules";
 import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react";
+import 'swiper/css/free-mode';
+import 'swiper/css/navigation';
+import 'swiper/css/thumbs';
 
 interface ProductMediaProps {
   selectedVariant: any;