Merge pull request #110 from Weaverse/dev

v2.0.7
Weaverse · Oct 4, 2024 · d4b62d4 · d4b62d4
2 parents e21bddb + ca5fc11
commit d4b62d4
Show file tree

Hide file tree

Showing 13 changed files with 659 additions and 762 deletions.
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -254,7 +254,7 @@ function CartCheckoutActions({ checkoutUrl }: { checkoutUrl: string }) {
   return (
     <div>
       <a href={checkoutUrl} target="_self">
-        <Button className="w-full">Checkout</Button>
+        <Button className="w-full">Continue to Checkout</Button>
       </a>
       <br />
     </div>
@@ -286,7 +286,7 @@ export function CartSummary({
           totalStyles[layout],
         )}
       >
-        <span>Total</span>
+        <span className="font-semibold">Subtotal</span>
         <div className={layout === "page" ? "text-3xl" : ""}>
           {cost?.subtotalAmount?.amount ? (
             <Money data={cost?.subtotalAmount} />
@@ -295,7 +295,7 @@ export function CartSummary({
           )}
         </div>
       </div>
-      <p className="text-sm">Shipping & taxes calculated at checkout</p>
+      {/* <p className="text-sm">Shipping & taxes calculated at checkout</p> */}
       {/* <p className="underline">Add delivery note</p> */}
       {children}
     </div>

diff --git a/app/components/CartDrawer.tsx b/app/components/CartDrawer.tsx
diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
@@ -61,8 +61,8 @@ export function CountrySelector() {
           ref={closeRef}
           onToggle={toggleDropdown}
         >
-          <summary className="flex w-full cursor-pointer items-center justify-between px-4 py-3.5">
-            <h5 className='font-medium'>{selectedLocale.label}</h5>
+          <summary className="flex w-full cursor-pointer items-center justify-between px-4 py-3">
+            <span className='font-normal font-heading text-xl'>{selectedLocale.label}</span>
             <span className={`transition-transform duration-300 ${isOpen ? '-rotate-180' : 'rotate-0'}`}>
               <IconCaret direction="down" className="h-4 w-4" />
             </span>

diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx
@@ -26,7 +26,7 @@ export function Drawer({
   onClose: () => void;
   openFrom: "right" | "left" | "top";
   children: React.ReactNode;
-  isForm?: "cart" | "search" | "menu";
+  isForm?: "cart" | "search" | "menu" | "filter";
   isBackMenu?: boolean;
 }) {
   const offScreen = {
@@ -70,11 +70,11 @@ export function Drawer({
                   className={cn(
                     "transform text-left align-middle shadow-xl transition-all",
                     openFrom === "left"
-                      ? "h-screen-dynamic w-screen max-w-96 bg-background-subtle-1"
+                      ? "h-screen-dynamic w-screen max-w-96"
                       : openFrom === "top"
-                        ? "h-fit w-screen bg-background-subtle-1"
+                        ? "h-fit w-screen"
                         : "h-screen-dynamic w-screen max-w-96",
-                    isForm === "cart"
+                    isForm === "cart" || isForm === "filter"
                       ? "bg-background-basic"
                       : "bg-background-subtle-1"
                   )}
@@ -117,7 +117,7 @@ export function Drawer({
                         />
                       </button>
                     )}
-                    {isForm !== 'cart' && !isBackMenu && <div className="p-0" />}
+                    {isForm !== 'cart' && isForm !== 'filter' && !isBackMenu && <div className="p-0" />}
                   </header>
                   {children}
                 </Dialog.Panel>

diff --git a/app/components/DrawerFilter.tsx b/app/components/DrawerFilter.tsx
@@ -45,7 +45,7 @@ export function DrawerFilter({
   const {openDrawer, isOpen, closeDrawer} = useDrawer();
   return (
     <>
-      <div className="border-y border-bar-subtle py-4">
+      <div className="border-y border-bar-subtle py-4 px-3 md:px-4 lg:px-0">
         <div className="container flex w-full items-center justify-between">
           <span className="font-heading text-xl font-medium tracking-tight">
             {productNumber} Products
@@ -60,6 +60,7 @@ export function DrawerFilter({
               onClose={closeDrawer}
               openFrom="left"
               heading="Filter"
+              isForm='filter'
             >
               <div className="w-96 px-6">
                 <FiltersDrawer

diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
@@ -33,15 +33,19 @@ export function ProductMedia(props: ProductMediaProps) {
       if (swiperInstance.thumbs) {
         swiperInstance.thumbs.swiper = thumbsSwiper;
         swiperInstance.thumbs.init();
-        swiperInstance.slideTo(activeIndex);
       }
+      swiperInstance.on("slideChange", () => {
+        const realIndex = swiperInstance.realIndex;
+        setActiveIndex(realIndex);
+        thumbsSwiper.slideTo(realIndex);
+      });
     }
-  }, [swiperInstance, thumbsSwiper, activeIndex]);
+  }, [swiperInstance, thumbsSwiper]);
 
   return (
     <div className="flex flex-col gap-4 w-full overflow-hidden">
       <Swiper
-        loop={true}
+        loop={false}
         modules={[FreeMode, Thumbs, Pagination]}
         pagination={{ type: "fraction" }}
         spaceBetween={10}
@@ -81,7 +85,7 @@ export function ProductMedia(props: ProductMediaProps) {
       </Swiper>
       <Swiper
         onSwiper={setThumbsSwiper}
-        loop={true}
+        loop={false}
         direction="horizontal"
         spaceBetween={spacing}
         freeMode={true}

diff --git a/app/sections/all-products/index.tsx b/app/sections/all-products/index.tsx
@@ -1,33 +1,31 @@
-import {Button} from '@/components/button';
-import {useLoaderData} from '@remix-run/react';
-import {Pagination} from '@shopify/hydrogen';
+import { Button } from "@/components/button";
+import { useLoaderData } from "@remix-run/react";
+import { Pagination } from "@shopify/hydrogen";
 import type {
   HydrogenComponentProps,
   HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import {Grid} from '~/components/Grid';
-import {ProductCard} from '~/components/ProductCard';
-import {getImageLoadingPriority} from '~/lib/const';
-import {Children, forwardRef} from 'react';
-import type {AllProductsQuery} from 'storefrontapi.generated';
-import {layoutInputs, Section, SectionProps} from '../atoms/Section';
+} from "@weaverse/hydrogen";
+import { Grid } from "~/components/Grid";
+import { ProductCard } from "~/components/ProductCard";
+import { getImageLoadingPriority } from "~/lib/const";
+import { Children, forwardRef } from "react";
+import type { AllProductsQuery } from "storefrontapi.generated";
+import { layoutInputs, Section, SectionProps } from "../atoms/Section";
 
 interface AllProductsProps extends HydrogenComponentProps {
   heading: string;
 }
 
 let AllProducts = forwardRef<HTMLElement, AllProductsProps & SectionProps>(
   (props, ref) => {
-    let {heading, children, ...rest} = props;
-    let {products} = useLoaderData<AllProductsQuery>();
+    let { heading, children, ...rest } = props;
+    let { products } = useLoaderData<AllProductsQuery>();
 
     return (
       <Section ref={ref} {...rest}>
-        {!!Children.count(children) && (
-          <div>{children}</div>
-        )}
+        {!!Children.count(children) && <div>{children}</div>}
         <Pagination connection={products}>
-          {({nodes, isLoading, NextLink, PreviousLink}) => {
+          {({ nodes, isLoading, NextLink, PreviousLink }) => {
             let itemsMarkup = nodes.map((product, i) => (
               <ProductCard
                 quickAdd
@@ -38,55 +36,63 @@ let AllProducts = forwardRef<HTMLElement, AllProductsProps & SectionProps>(
             ));
 
             return (
-              <>
-                <div className="mb-20 mt-5 flex items-center justify-center">
-                  <Button as={PreviousLink} variant="secondary">
-                    {isLoading ? 'Loading...' : 'Previous'}
-                  </Button>
-                </div>
+              <div className="flex flex-col items-center justify-center">
+                <Button
+                  as={PreviousLink}
+                  variant="outline"
+                  className="!mb-9 lg:!mb-16 lg:!mt-16 !mt-9"
+                >
+                  <span className="font-heading font-light">
+                    {isLoading ? "Loading..." : "Load previous"}
+                  </span>
+                </Button>
                 <Grid
                   className="!gap-y-10"
                   layout="products"
                   data-test="product-grid"
                 >
                   {itemsMarkup}
                 </Grid>
-                <div className="mb-5 mt-20 flex items-center justify-center">
-                  <Button as={NextLink} variant="secondary">
-                    {isLoading ? 'Loading...' : 'Next'}
-                  </Button>
-                </div>
-              </>
+                <Button
+                  as={NextLink}
+                  variant="outline"
+                  className="!mb-5 lg:!mt-20 !mt-12"
+                >
+                  <span className="font-heading font-light">
+                    {isLoading ? "Loading..." : "Show more +"}
+                  </span>
+                </Button>
+              </div>
             );
           }}
         </Pagination>
       </Section>
     );
-  },
+  }
 );
 
 export default AllProducts;
 
 export let schema: HydrogenComponentSchema = {
-  type: 'all-products',
-  title: 'All products',
+  type: "all-products",
+  title: "All products",
   limit: 1,
   enabledOn: {
-    pages: ['ALL_PRODUCTS'],
+    pages: ["ALL_PRODUCTS"],
   },
-  toolbar: ['general-settings'],
+  toolbar: ["general-settings"],
   inspector: [
     {
-      group: 'All products',
-      inputs: layoutInputs.filter(({ name }) => name !== 'borderRadius'),
+      group: "All products",
+      inputs: layoutInputs.filter(({ name }) => name !== "borderRadius"),
     },
   ],
-  childTypes: ['heading'],
+  childTypes: ["heading"],
   presets: {
     children: [
       {
-        type: 'heading',
-        content: 'All products',
+        type: "heading",
+        content: "All products",
       },
     ],
   },