@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/views/header/search/index.tsx

@@ -1,16 +1,20 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { closeSearch } from '@akinon/next/redux/reducers/header';
 import clsx from 'clsx';
 
 import { Icon } from '@theme/components';
+import { SearchInput } from './search-input';
 import Results from './results';
 import { ROUTES } from '@theme/routes';
-import { useLocalization, useRouter } from '@akinon/next/hooks';
+import { useDebounce, useLocalization, useRouter } from '@akinon/next/hooks';
+import { useAutocompleteQuery } from '@akinon/next/data/client/misc';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
+const MINIMUM_SEARCH_LENGTH = 3;
+
 export default function Search() {
   const { t } = useLocalization();
   const router = useRouter();
@@ -19,6 +23,24 @@ export default function Search() {
   const [searchText, setSearchText] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const debouncedSearchText = useDebounce(searchText, 400);
+  const { currentData } = useAutocompleteQuery(debouncedSearchText, {
+    refetchOnMountOrArgChange: true,
+    skip: debouncedSearchText.length < MINIMUM_SEARCH_LENGTH
+  });
+
+  const categoryLabel = useMemo(() => {
+    const firstCategory = currentData?.groups.find(
+      (group) => group.suggestion_type === 'Category'
+    )?.entries?.[0];
+
+    if (firstCategory?.label) {
+      return firstCategory.label;
+    }
+
+    return t('common.search.all_products');
+  }, [currentData, t]);
+
   useEffect(() => {
     if (isSearchOpen) {
       inputRef.current?.focus();
@@ -42,11 +64,19 @@ export default function Search() {
     };
   }, [isSearchOpen, dispatch]);
 
+  const handleSearch = () => {
+    if (searchText.trim() !== '') {
+      router.push(
+        `${ROUTES.LIST}/?search_text=${encodeURIComponent(searchText)}`
+      );
+      dispatch(closeSearch());
+    }
+  };
+
   return (
     <>
       <div
         className={clsx(
-          // 177px is the height of the header
           'absolute bg-black opacity-75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
           isSearchOpen && searchText
             ? 'visible opacity-100'
@@ -55,44 +85,53 @@ export default function Search() {
         role="button"
         onClick={() => dispatch(closeSearch())}
       />
+
       <div
         className={clsx(
-          'absolute overflow-auto max-h-screen md:max-h-[calc(100vh-177px)] bg-white p-6 left-0 lg:bottom-0 lg:translate-y-full z-40 w-screen transition duration-500',
+          'fixed inset-0 lg:absolute lg:inset-auto lg:left-0 lg:bottom-0 lg:translate-y-full lg:w-screen lg:h-auto',
+          'overflow-auto h-screen lg:max-h-[calc(100vh-177px)] bg-white p-6 z-40 transition duration-500',
           isSearchOpen ? 'visible opacity-100' : 'invisible opacity-0'
         )}
       >
-        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12">
-          <div className="border-b border-gray-400 flex flex-col py-1.5 gap-2 self-center items-center md:flex-row">
-            <span className="text-xl lg:text-2xl">
-              {t('common.search.results_for')}
-            </span>
-            <div className="flex items-center">
-              <input
+        <button
+          className="absolute top-4 right-4 p-2 lg:hidden z-50"
+          onClick={() => dispatch(closeSearch())}
+          aria-label="Close search"
+        >
+          <Icon name="close" size={16} className="text-black" />
+        </button>
+
+        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12 pt-8 lg:pt-0">
+          <div className="flex flex-col items-center gap-8">
+            <h1 className="text-2xl text-black-750 font-normal text-center">
+              {t('common.search.results_title') || 'Search results'}
+            </h1>
+
+            <div className="w-full max-w-[468px]">
+              <SearchInput
+                startAdornment={
+                  <PluginModule
+                    component={Component.HeaderImageSearchFeature}
+                    props={{
+                      enableTextSearch: true,
+                      isEnabled: false,
+                      settings: {
+                        iconNames: {
+                          imageSearchButton: 'hamburger'
+                        }
+                      }
+                    }}
+                  />
+                }
+                ref={inputRef}
+                label={categoryLabel}
                 value={searchText}
                 onChange={(e) => setSearchText(e.target.value)}
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter' && searchText.trim() !== '') {
-                    router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
-                  }
+                  if (e.key === 'Enter') handleSearch();
                 }}
-                className="border-0 text-2xl outline-none text-secondary placeholder:text-xl placeholder:lg:text-2xl"
-                placeholder={t('common.search.placeholder')}
-                ref={inputRef}
-              />
-
-              <PluginModule
-                component={Component.HeaderImageSearchFeature}
-                props={{
-                  enableTextSearch: true,
-                  isEnabled: true
-                }}
-              />
-
-              <Icon
-                name="close"
-                size={14}
-                onClick={() => dispatch(closeSearch())}
-                className="cursor-pointer"
+                onSearchClick={handleSearch}
+                placeholder={t('common.search.placeholder') || 'Search...'}
               />
             </div>
           </div>

package/app-template/src/views/header/search/results.tsx

@@ -1,18 +1,77 @@
 'use client';
 
 import { useMemo } from 'react';
-import { useAutocompleteQuery } from '@akinon/next/data/client/misc';
+import {
+  useAutocompleteQuery,
+  AutocompleteResponse
+} from '@akinon/next/data/client/misc';
 import { ROUTES } from '@theme/routes';
 
-import { LoaderSpinner, Price, Link } from '@theme/components';
+import { LoaderSpinner, Price, Link, Button } from '@theme/components';
 import { useDebounce, useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
+import { SaleTag } from '@theme/views/product/sale-tag';
+
 interface ResultsProps {
   searchText: string;
 }
 
 const MINIMUM_SEARCH_LENGTH = 3;
 
+type AutocompleteProduct = AutocompleteResponse['groups'][0]['entries'][0];
+
+function ProductCard({ product }: { product: AutocompleteProduct }) {
+  const productPk = (product?.extra as unknown as { pk?: number })?.pk || 0;
+
+  const isOnSale =
+    product?.extra?.retail_price &&
+    product?.extra?.price &&
+    parseFloat(String(product.extra.retail_price)) >
+      parseFloat(String(product.extra.price));
+  return (
+    <div className="flex flex-col group w-full">
+      <div className="relative aspect-square mb-2">
+        <Link href={product?.url || '#'} className="block w-full h-full">
+          <Image
+            src={product?.extra?.image || '/noimage.jpg'}
+            alt={product?.label || 'Product'}
+            fill
+            aspectRatio={200 / 250}
+            sizes="(max-width: 768px) 170px, 260px"
+            imageClassName="object-cover transition-transform duration-300"
+          />
+        </Link>
+
+        {isOnSale && (
+          <div className="absolute bottom-4 left-2 z-10">
+            <SaleTag />
+          </div>
+        )}
+      </div>
+
+      <Link
+        href={product?.url || '#'}
+        className="text-sm text-black-750 tracking-[0.28px] leading-[21px] hover:underline"
+      >
+        {product?.label}
+      </Link>
+
+      <div className="flex items-center gap-2">
+        {isOnSale && (
+          <Price
+            value={product?.extra?.retail_price}
+            className="text-sm text-black-750 tracking-[0.28px] leading-[21px] line-through"
+          />
+        )}
+        <Price
+          value={product?.extra?.price}
+          className="text-base text-black-750 tracking-[0.64px] leading-[27.52px]"
+        />
+      </div>
+    </div>
+  );
+}
+
 export default function Results(props: ResultsProps) {
   const { searchText } = props;
   const { t } = useLocalization();
@@ -47,77 +106,80 @@ export default function Results(props: ResultsProps) {
   }
 
   if (isLoading || isFetching) {
-    return <LoaderSpinner />;
+    return (
+      <div className="flex justify-center py-12">
+        <LoaderSpinner />
+      </div>
+    );
   }
 
   if (categories.length === 0 && products.length === 0) {
-    return <p className="text-center">{t('common.search.not_found')}</p>;
+    return (
+      <p className="text-center text-black-750 py-12">
+        {t('common.search.not_found')}
+      </p>
+    );
   }
 
   return (
-    <div className="w-full flex flex-wrap gap-4 md:gap-0">
-      {categories.length > 0 && (
-        <div className="flex flex-col w-44">
-          <h6 className="mb-6 font-semibold">
-            {t('common.search.categories')}
-          </h6>
-          <ul className="flex flex-col gap-3">
-            {categories.map((category, index) => (
-              <li key={index} className="text-sm">
-                <Link href={category.url}>{category.label}</Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <div className="flex-1 flex flex-col gap-6">
-        <h6 className="font-semibold">
-          {t('common.search.products_for')}{' '}
-          <span className="text-secondary uppercase">
-            {debouncedSearchText}
-          </span>
-        </h6>
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
-          {products.map((product, index) => (
-            <Link href={product?.url} key={index} className="flex flex-col">
-              <div className="relative aspect-[315/448]">
-                {product.extra.image ? (
-                  <Image
-                    src={product.extra.image}
-                    alt={product?.label}
-                    aspectRatio={274.5 / 390.39}
-                    fill
-                    sizes="(min-width: 320px) 164px,
-                     (min-width: 640px) 50vw,
-                     (min-width: 1160px) 315px"
-                  />
-                ) : (
-                  <Image
-                    className="h-full object-cover"
-                    src="/noimage.jpg"
-                    alt={product?.label}
-                    aspectRatio={274.5 / 390.39}
-                    fill
-                    sizes="100vw"
-                  />
-                )}
-              </div>
-              <span className="text-sm mt-2">{product?.label}</span>
-              <Price
-                value={product?.extra?.price}
-                className="font-semibold text-sm"
-              />
-            </Link>
-          ))}
+    <div className="w-full md:px-16 pb-12">
+      <p className="text-center text-base text-black-750 tracking-[0.64px] leading-[15px]">
+        {products.length}{' '}
+        {t('common.search.results_found') || 'results found for'} &ldquo;
+        {debouncedSearchText}&rdquo;
+      </p>
+
+      <div className="mt-10 md:mt-16 flex justify-center">
+        <div className="flex flex-col lg:flex-row gap-8 max-w-[1300px]">
+          {categories.length > 0 && (
+            <div className="lg:w-44 shrink-0">
+              <h6 className="mb-4 text-lg font-normal text-black-750">
+                {t('common.search.categories')}
+              </h6>
+              <ul className="flex flex-col gap-3">
+                {categories.map((category, index) => (
+                  <li key={index} className="text-sm text-black-750/75">
+                    <Link
+                      href={category.url}
+                      className="hover:text-black-750 hover:underline"
+                    >
+                      {category.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <div className="flex-1">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-[10px]">
+              {products.slice(0, 8).map((product, index) => (
+                <ProductCard
+                  key={
+                    (product?.extra as unknown as { pk?: number })?.pk || index
+                  }
+                  product={product as unknown as AutocompleteProduct}
+                />
+              ))}
+            </div>
+          </div>
         </div>
-        <Link
-          href={`${ROUTES.LIST}/?search_text=${debouncedSearchText}`}
-          data-testid="search-view-all"
-          className="w-80 py-3 px-10 border border-primary text-center text-xs font-semibold hover:bg-primary hover:text-white transition-all"
-        >
-          {t('common.search.view_all')} {debouncedSearchText.toUpperCase()}
-        </Link>
       </div>
+
+      {products.length > 0 && (
+        <div className="flex justify-center mt-8">
+          <Button
+            appearance="outlined"
+            href={`${ROUTES.LIST}/?search_text=${encodeURIComponent(
+              debouncedSearchText
+            )}`}
+            data-testid="search-view-all"
+            className="px-10 py-3 border-black text-black hover:bg-black hover:text-white"
+          >
+            {t('common.search.view_all')} {debouncedSearchText.toUpperCase()}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

package/app-template/src/views/header/search/search-input.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { forwardRef, InputHTMLAttributes } from 'react';
+import clsx from 'clsx';
+import { Icon } from '@theme/components';
+
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  onSearchClick?: () => void;
+  error?: string;
+  startAdornment?: React.ReactNode;
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (props, ref) => {
+    const { label, onSearchClick, error, className, startAdornment, ...rest } =
+      props;
+
+    return (
+      <div className={clsx('flex flex-col', className)}>
+        <div
+          className={clsx(
+            'relative flex items-center border h-12 px-4',
+            error ? 'border-error' : 'border-black'
+          )}
+        >
+          {startAdornment}
+          <div className="flex-1 flex flex-col justify-center">
+            {label && (
+              <span className="text-[10px] text-black-750 leading-none tracking-wider">
+                {label}
+              </span>
+            )}
+            <input
+              ref={ref}
+              type="text"
+              className={clsx(
+                'w-full text-base leading-[15px] tracking-[0.64px] text-black-750',
+                'bg-transparent border-none outline-none',
+                'placeholder:text-black-750/75 font-jost',
+                label ? 'mt-0.5' : ''
+              )}
+              {...rest}
+            />
+          </div>
+          <button
+            type="button"
+            onClick={onSearchClick}
+            className="flex items-center justify-center ml-2"
+            aria-label="Search"
+          >
+            <Icon name="search" size={20} className="text-black" />
+          </button>
+        </div>
+        {error && <span className="mt-1 text-sm text-error">{error}</span>}
+      </div>
+    );
+  }
+);
+
+SearchInput.displayName = 'SearchInput';