Merge branch 'Weaverse:main' into main

app/lib/utils.ts

@@ -186,6 +186,7 @@ function parseItem(primaryDomain: string, env: Env, customPrefixes = {}) {
       return {
         ...parsedItem,
         items: item.items
+          // @ts-ignore
           .map(parseItem(primaryDomain, env, customPrefixes))
           .filter(Boolean),
       } as EnhancedMenu["items"][number];

app/modules/DrawerFilter.tsx

@@ -9,32 +9,24 @@ import type {
   Filter,
   ProductFilter,
 } from "@shopify/hydrogen/storefront-api-types";
+import clsx from "clsx";
 import type { SyntheticEvent } from "react";
-import { useMemo, useState } from "react";
-import { useDebounce } from "react-use";
-import { Drawer, useDrawer } from "./Drawer";
-import {
-  AppliedFilter,
-  SortParam,
-  filterInputToParams,
-  getAppliedFilterLink,
-  getFilterLink,
-  getSortLink,
-} from "~/lib/filter";
-import { Button } from "./Button";
+import { useState } from "react";
 import { Checkbox } from "~/components/Checkbox";
 import { FILTER_URL_PREFIX } from "~/lib/const";
+import type { AppliedFilter, SortParam } from "~/lib/filter";
+import { getAppliedFilterLink, getFilterLink, getSortLink } from "~/lib/filter";
+import { Input } from ".";
+import { Button } from "./Button";
+import { Drawer, useDrawer } from "./Drawer";
 import {
   IconCaret,
-  IconFilters,
   IconFourGrid,
   IconOneGrid,
   IconSliders,
   IconThreeGrid,
   IconTwoGrid,
 } from "./Icon";
-import { Input } from ".";
-import clsx from "clsx";
 
 type DrawerFilterProps = {
   productNumber?: number;
@@ -65,6 +57,7 @@ export function DrawerFilter({
               numberInRow === 4 && " border-[#88847F]",
             )}
             onClick={() => onLayoutChange(4)}
+            role="button"
           >
             <IconFourGrid className="w-12 h-12 text-[#88847F]" />
           </div>
@@ -74,6 +67,7 @@ export function DrawerFilter({
               numberInRow === 3 && " border-[#88847F]",
             )}
             onClick={() => onLayoutChange(3)}
+            role="button"
           >
             <IconThreeGrid className="w-12 h-12 text-[#88847F]" />
           </div>
@@ -83,6 +77,7 @@ export function DrawerFilter({
               numberInRow === 4 && "border-[#88847F]",
             )}
             onClick={() => onLayoutChange(4)}
+            role="button"
           >
             <IconTwoGrid className="w-12 h-12 text-[#88847F]" />
           </div>
@@ -92,6 +87,7 @@ export function DrawerFilter({
               numberInRow === 3 && "border-[#88847F]",
             )}
             onClick={() => onLayoutChange(3)}
+            role="button"
           >
             <IconOneGrid className="w-12 h-12 text-[#88847F]" />
           </div>
@@ -114,6 +110,7 @@ export function DrawerFilter({
             heading="Filter"
           >
             <div className="px-6">
+              {/* @ts-expect-error */}
               <FiltersDrawer
                 filters={filters}
                 appliedFilters={appliedFilters}
@@ -214,15 +211,15 @@ export function FiltersDrawer({
   );
 }
 
-const PRICE_RANGE_FILTER_DEBOUNCE = 500;
+// const PRICE_RANGE_FILTER_DEBOUNCE = 500;
 
 function PriceRangeFilter({ max, min }: { max?: number; min?: number }) {
-  const location = useLocation();
-  const params = useMemo(
-    () => new URLSearchParams(location.search),
-    [location.search],
-  );
-  const navigate = useNavigate();
+  // const location = useLocation();
+  // const params = useMemo(
+  //   () => new URLSearchParams(location.search),
+  //   [location.search],
+  // );
+  // const navigate = useNavigate();
 
   const [minPrice, setMinPrice] = useState(min);
   const [maxPrice, setMaxPrice] = useState(max);
@@ -264,7 +261,7 @@ function PriceRangeFilter({ max, min }: { max?: number; min?: number }) {
 
   return (
     <div className="flex gap-6">
-      <label className="flex items-center gap-1">
+      <label className="flex items-center gap-1" htmlFor="minPrice">
         <span>$</span>
         <Input
           name="minPrice"
@@ -274,7 +271,7 @@ function PriceRangeFilter({ max, min }: { max?: number; min?: number }) {
           onChange={onChangeMin}
         />
       </label>
-      <label className="flex items-center gap-1">
+      <label className="flex items-center gap-1" htmlFor="maxPrice">
         <span>$</span>
         <Input
           name="maxPrice"

app/modules/FeaturedSection.tsx

@@ -1,10 +1,7 @@
 import { useEffect } from "react";
 import { useFetcher } from "@remix-run/react";
-
 import { usePrefixPathWithLocale } from "~/lib/utils";
 import type { FeaturedData } from "~/routes/($locale).featured-products";
-
-import { FeaturedCollections } from "./FeaturedCollections";
 import { ProductSwimlane } from "./ProductSwimlane";
 
 export function FeaturedSection() {
@@ -18,17 +15,7 @@ export function FeaturedSection() {
 
   if (!data) return null;
 
-  const { featuredCollections, featuredProducts } = data;
+  const { featuredProducts } = data;
 
-  return (
-    <>
-      {featuredCollections.nodes.length < 2 && (
-        <FeaturedCollections
-          title="Popular Collections"
-          collections={featuredCollections}
-        />
-      )}
-      <ProductSwimlane products={featuredProducts} />
-    </>
-  );
+  return <ProductSwimlane products={featuredProducts} />;
 }

app/modules/QuickView.tsx

@@ -46,7 +46,7 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
   let handleSelectedVariantChange = (variant: any) => {
     setSelectedVariant(variant);
   };
-  console.log("🚀 ~ QuickView ~ selectedVariant:", selectedVariant);
+
   useEffect(() => {
     if (variants?.nodes?.length) {
       if (!selectedVariant) {
@@ -59,8 +59,8 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
   }, [product?.id]);
 
   const { shippingPolicy, refundPolicy } = shop;
-
-  const { title, vendor, descriptionHtml } = product;
+  // @ts-expect-error
+  const { title, descriptionHtml } = product;
   let atcText = selectedVariant?.availableForSale
     ? addToCartText
     : selectedVariant?.quantityAvailable === -1
@@ -70,6 +70,7 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
     <div className="p-10 rounded-md bg-background w-[80vw] max-w-[1200px]">
       <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-2 lg:gap-12">
         <ProductMedia
+          // @ts-expect-error
           media={product?.media.nodes}
           selectedVariant={selectedVariant}
           showThumbnails={showThumbnails}
@@ -102,13 +103,16 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
               ) : null}
             </p>
             <ProductVariants
+              // @ts-expect-error
               product={product}
+              // @ts-expect-error
+              options={product?.options}
+              // @ts-expect-error
+              handle={product?.handle}
               selectedVariant={selectedVariant}
               onSelectedVariantChange={handleSelectedVariantChange}
               swatch={swatches}
               variants={variants}
-              options={product?.options}
-              handle={product?.handle}
               hideUnavailableOptions={hideUnavailableOptions}
             />
           </div>
@@ -171,16 +175,19 @@ export function QuickViewTrigger(props: { productHandle: string }) {
   let [quickAddOpen, setQuickAddOpen] = useState(false);
   const { productHandle } = props;
   let { load, data, state } = useFetcher<ProductData>();
+
   useEffect(() => {
     if (quickAddOpen && !data && state !== "loading") {
       load(`/api/query/products?handle=${productHandle}`);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [quickAddOpen, data, load, state]);
+
   return (
     <>
       <div className="mt-2 absolute bottom-4 hidden lg:group-hover:block py-5 px-3 w-full opacity-100 bg-[rgba(238,239,234,0.10)] backdrop-blur-2xl">
         <Button
-          onClick={(e) => {
+          onClick={(e: Event) => {
             e.preventDefault();
             e.stopPropagation();
             setQuickAddOpen(true);

app/modules/header/CartCount.tsx

@@ -5,7 +5,6 @@ import { useIsHydrated } from "~/hooks/useIsHydrated";
 import { useRootLoaderData } from "~/root";
 import { IconBag } from "../Icon";
 
-
 export function CartCount({
   isHome,
   openCart,
@@ -40,7 +39,7 @@ function Badge({
   count: number;
   dark: boolean;
   openCart: () => void;
-  cart: any;
+  cart?: any;
 }) {
   const isHydrated = useIsHydrated();
 

app/modules/index.ts

@@ -15,7 +15,6 @@ export { AccountDetails } from "./AccountDetails";
 export { AccountAddressBook } from "./AccountAddressBook";
 export { Modal } from "./Modal";
 export { Link } from "./Link";
-export { FeaturedCollections } from "./FeaturedCollections";
 export { Hero } from "./Hero";
 export { SortFilter } from "./SortFilter";
 export { Grid } from "./Grid";

app/routes/($locale).account.tsx

@@ -9,11 +9,13 @@ import {
 import { flattenConnection } from "@shopify/hydrogen";
 import { defer, type LoaderFunctionArgs } from "@shopify/remix-oxygen";
 import { Suspense } from "react";
-
 import type {
   CustomerDetailsFragment,
   OrderCardFragment,
 } from "customer-accountapi.generated";
+import { CACHE_NONE, routeHeaders } from "~/data/cache";
+import { CUSTOMER_DETAILS_QUERY } from "~/graphql/customer-account/CustomerDetailsQuery";
+import { usePrefixPathWithLocale } from "~/lib/utils";
 import {
   AccountAddressBook,
   AccountDetails,
@@ -24,11 +26,6 @@ import {
   ProductSwimlane,
   Text,
 } from "~/modules";
-import { FeaturedCollections } from "~/modules/FeaturedCollections";
-import { CACHE_NONE, routeHeaders } from "~/data/cache";
-import { CUSTOMER_DETAILS_QUERY } from "~/graphql/customer-account/CustomerDetailsQuery";
-import { usePrefixPathWithLocale } from "~/lib/utils";
-
 import { doLogout } from "./($locale).account_.logout";
 import {
   getFeaturedData,
@@ -131,10 +128,6 @@ function Account({ customer, heading, featuredDataPromise }: AccountType) {
           >
             {(data) => (
               <>
-                <FeaturedCollections
-                  title="Popular Collections"
-                  collections={data.featuredCollections}
-                />
                 <ProductSwimlane products={data.featuredProducts} />
               </>
             )}

app/routes/($locale).api.predictive-search.tsx

@@ -8,7 +8,7 @@ import type {
   PredictiveQueryFragment,
   PredictiveSearchQuery,
 } from "storefrontapi.generated";
-import {
+import type {
   NormalizedPredictiveSearch,
   NormalizedPredictiveSearchResults,
 } from "~/components/predictive-search/types";
@@ -137,11 +137,12 @@ export function normalizePredictiveSearchResults(
   if (predictiveSearch.queries.length) {
     results.push({
       type: "queries",
+      // @ts-expect-error
       items: predictiveSearch.queries.map((query: PredictiveQueryFragment) => {
-        const trackingParams = applyTrackingParams(
-          query,
-          `q=${encodeURIComponent(query.text)}`,
-        );
+        // const trackingParams = applyTrackingParams(
+        //   query,
+        //   `q=${encodeURIComponent(query.text)}`,
+        // );
 
         totalResults++;
         return {
@@ -160,6 +161,7 @@ export function normalizePredictiveSearchResults(
   if (predictiveSearch.products.length) {
     results.push({
       type: "products",
+      // @ts-expect-error
       items: predictiveSearch.products.map(
         (product: PredictiveProductFragment) => {
           totalResults++;
@@ -183,6 +185,7 @@ export function normalizePredictiveSearchResults(
   if (predictiveSearch.collections.length) {
     results.push({
       type: "collections",
+      // @ts-expect-error
       items: predictiveSearch.collections.map(
         (collection: PredictiveCollectionFragment) => {
           totalResults++;
@@ -203,6 +206,7 @@ export function normalizePredictiveSearchResults(
   if (predictiveSearch.pages.length) {
     results.push({
       type: "pages",
+      // @ts-expect-error
       items: predictiveSearch.pages.map((page: PredictivePageFragment) => {
         totalResults++;
         const trackingParams = applyTrackingParams(page);
@@ -221,6 +225,7 @@ export function normalizePredictiveSearchResults(
   if (predictiveSearch.articles.length) {
     results.push({
       type: "articles",
+      // @ts-expect-error
       items: predictiveSearch.articles.map(
         (article: PredictiveArticleFragment) => {
           totalResults++;

app/routes/($locale).search.tsx

@@ -8,9 +8,7 @@ import {
 import type { LoaderFunctionArgs, MetaArgs } from "@shopify/remix-oxygen";
 import { defer } from "@shopify/remix-oxygen";
 import { Suspense } from "react";
-
 import {
-  FeaturedCollections,
   Grid,
   Heading,
   Input,
@@ -23,7 +21,6 @@ import {
 import { PRODUCT_CARD_FRAGMENT } from "~/data/fragments";
 import { getImageLoadingPriority, PAGINATION_SIZE } from "~/lib/const";
 import { seoPayload } from "~/lib/seo.server";
-
 import {
   type FeaturedData,
   getFeaturedData,
@@ -170,14 +167,10 @@ function NoResults({
         >
           {(result) => {
             if (!result) return null;
-            const { featuredCollections, featuredProducts } = result;
+            const { featuredProducts } = result;
 
             return (
               <>
-                <FeaturedCollections
-                  title="Trending Collections"
-                  collections={featuredCollections}
-                />
                 <ProductSwimlane
                   title="Trending Products"
                   products={featuredProducts}