@akinon/pz-similar-products 1.92.0-snapshot-ZERO-3457-20250627121541 → 1.93.0-rc.47

package/src/views/search-modal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Modal, Button, Icon, Select } from '@akinon/next/components';
+import { Modal, Button, Icon, Select, Input } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { SimilarProductsFilterSidebar } from './filters';
 import { SimilarProductsResultsGrid } from './results';
@@ -43,7 +43,11 @@ export function SimilarProductsModal({
   fileError,
   showResetButton = true,
   settings,
-  className
+  className,
+  searchText,
+  setSearchText,
+  handleTextSearch,
+  handleClearText
 }: SimilarProductsModalProps) {
   const { t } = useLocalization();
 
@@ -164,6 +168,24 @@ export function SimilarProductsModal({
             })) || []
       ) || [];
 
+  const modalCloseIconName = settings?.iconNames?.modalClose || 'close';
+  const filterIconName = settings?.iconNames?.filter || 'filter';
+  const modalSearchIconName = settings?.iconNames?.modalSearch || 'search';
+  const modalSearchClearIconName =
+    settings?.iconNames?.modalSearchClear || 'close';
+
+  const modalCloseIconClassName = twMerge(
+    '',
+    settings?.customStyles?.modalCloseIcon
+  );
+
+  const filterIconClassName = twMerge('', settings?.customStyles?.filterIcon);
+
+  const modalSearchIconClassName = twMerge(
+    'text-gray-500',
+    settings?.customStyles?.modalSearchIcon
+  );
+
   const renderHeader = () => {
     if (settings?.customRenderers?.render?.modal?.renderHeader) {
       return settings.customRenderers.render.modal.renderHeader({
@@ -246,7 +268,11 @@ export function SimilarProductsModal({
                   disabled={isLoading}
                   className={buttonClassName}
                 >
-                  <Icon name="close" size={12} />
+                  <Icon
+                    name={modalCloseIconName}
+                    size={12}
+                    className={modalCloseIconClassName}
+                  />
                 </Button>
               </div>
             );
@@ -266,7 +292,9 @@ export function SimilarProductsModal({
           '',
         onSortChange: handleSortChange,
         onFilterMenuToggle: () => setIsFilterMenuOpen(true),
-        isLoading
+        isLoading,
+        searchText,
+        setSearchText
       });
     }
 
@@ -281,15 +309,30 @@ export function SimilarProductsModal({
     );
 
     const filterToggleClassName = twMerge(
-      'md:hidden text-xs',
+      'md:hidden text-xs px-3 py-2',
       settings?.customStyles?.filterToggleButton
     );
 
     const sortDropdownClassName = twMerge(
-      'h-10 px-4 text-md md:text-xs bg-gray-200 hover:bg-gray-400 transition-colors duration-200 border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary w-full md:w-40 min-w-[120px]',
+      'h-10 px-3 md:px-4 text-sm md:text-xs bg-gray-200 hover:bg-gray-400 transition-colors duration-200 border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary w-full md:w-40 min-w-[120px]',
       settings?.customStyles?.sortDropdown
     );
 
+    const modalSearchInputClassName = twMerge(
+      'h-10 px-3 md:px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-48 md:w-60 min-w-[180px]',
+      settings?.customStyles?.modalSearchInput
+    );
+
+    const modalSearchContainerClassName = twMerge(
+      'relative flex items-center',
+      settings?.customStyles?.modalSearchContainer
+    );
+
+    const modalSearchButtonClassName = twMerge(
+      'absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+      settings?.customStyles?.modalSearchButton
+    );
+
     const renderItemCount = () => {
       if (settings?.customRenderers?.render?.modal?.renderItemCount) {
         return settings.customRenderers.render.modal.renderItemCount({
@@ -299,7 +342,9 @@ export function SimilarProductsModal({
       }
       return (
         <div className={itemCountClassName}>
-          {searchResults?.pagination?.total_count || 0} items
+          <span className="hidden md:inline">
+            {searchResults?.pagination?.total_count || 0} items
+          </span>
         </div>
       );
     };
@@ -319,13 +364,21 @@ export function SimilarProductsModal({
           onClick={() => setIsFilterMenuOpen(true)}
           data-testid="similar-products-filter"
         >
-          <Icon name="filter" size={14} />
+          <Icon
+            name={filterIconName}
+            size={14}
+            className={filterIconClassName}
+          />
           {t('common.product.filters')}
         </Button>
       );
     };
 
     const renderSortDropdown = () => {
+      if (!searchResults?.products?.length || !searchResults?.sorters?.length) {
+        return null;
+      }
+
       if (settings?.customRenderers?.render?.modal?.renderSortDropdown) {
         return settings.customRenderers.render.modal.renderSortDropdown({
           sorters: searchResults?.sorters || [],
@@ -351,26 +404,134 @@ export function SimilarProductsModal({
       );
     };
 
+    const renderModalSearchInput = () => {
+      if (
+        !settings?.enableTextSearch ||
+        searchText === undefined ||
+        !setSearchText ||
+        !searchResults?.products?.length ||
+        !searchResults?.sorters?.length
+      ) {
+        return null;
+      }
+
+      if (settings?.customRenderers?.render?.modal?.renderModalSearchInput) {
+        return settings.customRenderers.render.modal.renderModalSearchInput({
+          searchText,
+          setSearchText,
+          isLoading,
+          placeholder: t('common.search.placeholder'),
+          onSearch: handleTextSearch
+        });
+      }
+
+      return (
+        <div className={modalSearchContainerClassName}>
+          <Input
+            type="text"
+            value={searchText}
+            onChange={(e) => setSearchText(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && handleTextSearch) {
+                e.preventDefault();
+                handleTextSearch();
+              }
+            }}
+            placeholder={t('common.search.placeholder')}
+            className={twMerge(modalSearchInputClassName, 'pr-20')}
+            disabled={isLoading}
+          />
+          {searchText && (
+            <button
+              onClick={() => {
+                if (handleClearText) {
+                  handleClearText();
+                }
+              }}
+              disabled={isLoading}
+              className={twMerge(
+                'absolute right-12 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+                settings?.customStyles?.modalSearchClearButton
+              )}
+            >
+              <Icon
+                name={modalSearchClearIconName}
+                size={16}
+                className={twMerge(
+                  'text-gray-400 hover:text-gray-600',
+                  settings?.customStyles?.modalSearchClearIcon
+                )}
+              />
+            </button>
+          )}
+          <button
+            onClick={() => {
+              if (handleTextSearch) {
+                handleTextSearch();
+              }
+            }}
+            disabled={isLoading}
+            className={modalSearchButtonClassName}
+          >
+            {settings?.customRenderers?.render?.modal?.renderSearchIcon ? (
+              settings.customRenderers.render.modal.renderSearchIcon({
+                disabled: isLoading,
+                onClick: handleTextSearch
+              })
+            ) : (
+              <Icon
+                name={modalSearchIconName}
+                size={18}
+                className={modalSearchIconClassName}
+              />
+            )}
+          </button>
+        </div>
+      );
+    };
+
     return (
       <div className={containerClassName}>
         <div
           className={twMerge(
-            'flex items-center justify-between p-3 md:p-4',
+            'p-3 md:p-4',
+            settings?.enableTextSearch &&
+              searchText !== undefined &&
+              setSearchText
+              ? 'flex gap-3 md:grid md:grid-cols-3 md:gap-4 md:items-center'
+              : 'flex items-center justify-between',
             settings?.customStyles?.controlsInner
           )}
         >
           <div
             className={twMerge(
-              'flex items-center gap-3',
+              'flex items-center gap-2 md:gap-3',
               settings?.customStyles?.controlsLeft
             )}
           >
             {renderItemCount()}
             {renderFilterToggle()}
           </div>
+          {settings?.enableTextSearch &&
+            searchText !== undefined &&
+            setSearchText && (
+              <div
+                className={twMerge(
+                  'flex items-center justify-center w-full',
+                  settings?.customStyles?.controlsCenter
+                )}
+              >
+                {renderModalSearchInput()}
+              </div>
+            )}
           <div
             className={twMerge(
               'relative',
+              settings?.enableTextSearch &&
+                searchText !== undefined &&
+                setSearchText
+                ? 'flex justify-end md:mt-0'
+                : '',
               settings?.customStyles?.controlsRight
             )}
           >
@@ -406,6 +567,8 @@ export function SimilarProductsModal({
             isLoading={isLoading}
             handleFacetChange={handleFacetChange}
             removeFacetFilter={removeFacetFilter}
+            searchText={searchText}
+            setSearchText={setSearchText}
             currentImageUrl={currentImageUrl}
             isCropping={isCropping}
             imageRef={imageRef}