Merge pull request Weaverse#93 from Weaverse/dev

v2.0.4
Weaverse · Aug 9, 2024 · 1e3ec00 · 1e3ec00
2 parents 6ced6d3 + c8e8280
commit 1e3ec00
Show file tree

Hide file tree

Showing 27 changed files with 1,090 additions and 429 deletions.
diff --git a/@/components/button.tsx b/@/components/button.tsx
@@ -6,17 +6,18 @@ import {cn} from '@/lib/utils';
 import { Spinner } from "./spinner";
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        primary: 'bg-primary text-primary-foreground border border-primary hover:bg-background hover:text-foreground hover:border-bar',
+        primary: 'bg-primary text-primary-foreground border border-primary hover:bg-transparent hover:text-foreground hover:border-bar',
         secondary:
-          'border border-bar bg-background hover:bg-primary hover:text-secondary',
+          'border border-bar bg-transparent hover:bg-primary hover:text-secondary',
         outline:
-          'bg-background border border-bar text-secondary-foreground font-heading text-xl font-medium',
+          'bg-transparent border border-bar text-secondary-foreground font-heading text-xl',
         link: 'text-primary underline-offset-4 hover:underline',
         decor: 'relative',
+        custom: '',
       },
       size: {
         default: 'h-[50px] px-5 py-3',
@@ -27,7 +28,11 @@ const buttonVariants = cva(
       shape: {
         default: 'rounded',
         round: 'rounded-md',
-      }
+      },
+      fontFamily: {
+        body: 'font-body',
+        heading: 'font-heading',
+      },
     },
     defaultVariants: {
       variant: 'primary',
@@ -54,6 +59,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant,
       size = 'default',
       shape = 'round',
+      fontFamily = 'body',
       asChild,
       as = 'button',
       children,
@@ -66,7 +72,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Component
         className={cn(
-          buttonVariants({variant, size, shape, className}),
+          buttonVariants({variant, size, shape, fontFamily, className}),
           loading && 'pointer-events-none relative',
         )}
         ref={ref}

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -2,6 +2,7 @@ import {Button} from '@/components/button';
 import {Input} from '@/components/input';
 import {Disclosure} from '@headlessui/react';
 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';
@@ -14,30 +15,43 @@ 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 {
+    footerTextCopyright,
+    newsletterTitle,
+    newsletterDescription,
+    newsletterPlaceholder,
+    newsletterButtonText,
+  } = settings;
   return (
-    <footer className="footer w-full bg-background-subtle-2">
-      <div className="flex h-fit flex-col gap-6 px-4 pb-10 pt-6 container md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-10 lg:py-16">
+    <footer className="footer w-full bg-[var(--footer-menu-background-color)]">
+      <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">
         <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">
-            <h3>Newsletter</h3>
+            {newsletterTitle && <h3>{newsletterTitle}</h3>}
             <div className="flex w-fit flex-col gap-4 md:h-fit">
-              <p>Sign up for 15% off and updates straight to your inbox.</p>
-              <fetcher.Form
-                method="POST"
-                action="/api/customer"
-                className="flex gap-2"
-              >
-                <Input
-                  className="bg-transparent"
-                  type="email"
-                  name="email"
-                  placeholder="Enter your email"
-                  required
-                />
-                <Button loading={fetcher.state === 'submitting'} type="submit">
-                  Subscribe
-                </Button>
-              </fetcher.Form>
+              {newsletterDescription && <p>{newsletterDescription}</p>}
+              {newsletterButtonText && (
+                <fetcher.Form
+                  method="POST"
+                  action="/api/customer"
+                  className="flex gap-2"
+                >
+                  <Input
+                    className="bg-transparent"
+                    type="email"
+                    name="email"
+                    placeholder={newsletterPlaceholder}
+                    required
+                  />
+                  <Button
+                    loading={fetcher.state === 'submitting'}
+                    type="submit"
+                  >
+                    {newsletterButtonText}
+                  </Button>
+                </fetcher.Form>
+              )}
               {isError && (
                 <p className="!mt-1 text-xs text-red-700">
                   {fetcher.data.errors[0].message}
@@ -47,7 +61,10 @@ export function Footer({footerMenu}: FooterProps) {
           </div>
           {footerMenu && <FooterMenu menu={footerMenu} />}
         </div>
-        <CountrySelector />
+        <div className="flex w-full items-center justify-between">
+          <CountrySelector />
+          <p className="text-xs">{footerTextCopyright}</p>
+        </div>
       </div>
     </footer>
   );

diff --git a/app/components/Header/AnnouncementBar.tsx b/app/components/Header/AnnouncementBar.tsx
@@ -0,0 +1,78 @@
+import {useThemeSettings} from '@weaverse/hydrogen';
+import clsx from 'clsx';
+import {CSSProperties, useState} from 'react';
+
+export function AnnouncementBar() {
+  const [isVisible, setIsVisible] = useState(true);
+  const settings = useThemeSettings();
+  let {
+    content,
+    textSize,
+    textColor,
+    borderColor,
+    backgroundColor,
+    announcementBarHeight,
+    speed,
+    gap,
+    stickyAnnouncementBar,
+    enableScrollingText,
+  } = settings;
+  let style: CSSProperties = {
+    '--text-color': textColor,
+    '--border-color': borderColor,
+    '--background-color': backgroundColor,
+    '--height-bar': `${announcementBarHeight}px`,
+    '--speed': `${speed}s`,
+    '--gap': `${gap}px`,
+  } as CSSProperties;
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+  return (
+    <div
+      id="announcement-bar"
+      style={style}
+      className={clsx(
+        'h-[var(--height-bar)] bg-[var(--background-color)] py-[var(--vertical-padding)]',
+        'border-y border-y-[var(--border-color)]',
+        'flex w-full items-center justify-center overflow-hidden',
+        stickyAnnouncementBar ? 'sticky top-0 z-40' : 'relative',
+      )}
+    >
+      <button
+        onClick={handleClose}
+        className="absolute right-4 top-1/2 z-20 -translate-y-1/2 transform cursor-pointer border-none bg-transparent text-[var(--text-color)]"
+      >
+        ×
+      </button>
+      {enableScrollingText && (
+        <>
+          <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)]" />
+        </>
+      )}
+      {!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>
+  );
+}
diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -2,14 +2,17 @@ import {useThemeSettings} from '@weaverse/hydrogen';
 import {UseMenuDrawerHeader} from './MenuDrawerHeader';
 import {UseMenuMegaHeader} from './MenuMegaHeader';
 import type {LayoutProps} from '../Layout';
+import { AnnouncementBar } from './AnnouncementBar';
 
 type HeaderProps = Pick<LayoutProps, 'headerMenu' | 'cart' | 'isLoggedIn'>;
 
 export function Header({headerMenu, isLoggedIn, cart}: HeaderProps) {
   let settings = useThemeSettings();
   let typeMenu = settings?.typeMenuHeader;
+  let enableTrialShipping = settings?.enableTrialShipping;
   return (
     <>
+      {enableTrialShipping && <AnnouncementBar/>}
       {typeMenu === 'mega' && (
         <UseMenuMegaHeader
           header={headerMenu}

diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx
@@ -29,6 +29,7 @@ export function UseMenuDrawerHeader({
   cart: Promise<CartApiQueryFragment | null>;
   className?: string;
 }) {
+  let {stickyAnnouncementBar, announcementBarHeight} = useThemeSettings();
   const isHome = useIsHomePath();
   const {y} = useWindowScroll();
   let settings = useThemeSettings();
@@ -40,6 +41,9 @@ export function UseMenuDrawerHeader({
 
   let enableTransparent = settings?.enableTransparentHeader && isHome;
   let isTransparent = enableTransparent && y < 50 && !isOpen && !hovered;
+  let top = stickyAnnouncementBar
+    ? announcementBarHeight
+    : Math.max(announcementBarHeight - y, 0);
   const {
     isOpen: isCartOpen,
     openDrawer: openCart,
@@ -57,6 +61,7 @@ export function UseMenuDrawerHeader({
         'top-0 z-40 w-full border-b border-foreground',
         className,
       )}
+      style={{['--announcement-bar-height' as string]: `${top}px`}}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >

diff --git a/app/components/Header/MenuMegaHeader.tsx b/app/components/Header/MenuMegaHeader.tsx
@@ -14,9 +14,9 @@ import {Drawer, useDrawer} from '../Drawer';
 import {IconAccount, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
-import {MegaMenu} from './menu/MegaMenu';
 import {CartCount} from './CartCount';
-import { SearchToggle } from './SearchToggle';
+import {MegaMenu} from './menu/MegaMenu';
+import {SearchToggle} from './SearchToggle';
 
 export function UseMenuMegaHeader({
   header,
@@ -29,7 +29,8 @@ export function UseMenuMegaHeader({
   cart: Promise<CartApiQueryFragment | null>;
   className?: string;
 }) {
-  const isHome  = useIsHomePath();
+  let {stickyAnnouncementBar, announcementBarHeight} = useThemeSettings();
+  const isHome = useIsHomePath();
   const {y} = useWindowScroll();
   let settings = useThemeSettings();
   let [hovered, setHovered] = useState(false);
@@ -40,6 +41,9 @@ export function UseMenuMegaHeader({
 
   let enableTransparent = settings?.enableTransparentHeader && isHome;
   let isTransparent = enableTransparent && y < 50 && !isOpen && !hovered;
+  let top = stickyAnnouncementBar
+    ? announcementBarHeight
+    : Math.max(announcementBarHeight - y, 0);
   const {
     isOpen: isCartOpen,
     openDrawer: openCart,
@@ -52,25 +56,27 @@ export function UseMenuMegaHeader({
       className={clsx(
         enableTransparent ? 'fixed' : 'sticky',
         isTransparent
-          ? ' text-secondary bg-transparent border-secondary'
-          : 'shadow-header text-primary bg-background-subtle-1 border-foreground',
+          ? 'border-secondary bg-transparent text-secondary'
+          : 'shadow-header border-foreground bg-background-subtle-1 text-primary',
         'top-0 z-40 w-full border-b',
         className,
       )}
+      style={{['--announcement-bar-height' as string]: `${top}px`}}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 container">
+      <div className="container z-40 flex h-nav items-center justify-between gap-3 transition-all duration-300">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',
             'transition-all duration-500 ease-in-out',
-            isTransparent
-              ? 'opacity-0'
-              : 'opacity-100',
+            isTransparent ? 'opacity-0' : 'opacity-100',
           )}
         ></div>
-        <Logo className="z-30 flex justify-start" showTransparent={isTransparent}/>
+        <Logo
+          className="z-30 flex justify-start"
+          showTransparent={isTransparent}
+        />
         <MegaMenu menu={header} />
         <div className="z-30 flex items-center justify-end gap-2">
           <SearchToggle />
@@ -125,4 +131,3 @@ function AccountLink({className}: {className?: string}) {
     </Suspense>
   );
 }
-
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
@@ -32,7 +32,7 @@ export function Layout({
       <main>{children}</main>
       <Suspense>
         <Await resolve={footerMenu}>
-          {(footer) => <Footer footerMenu={footerMenu} />}
+          {(footerMenu) => <Footer footerMenu={footerMenu} />}
         </Await>
       </Suspense>
     </>