@akinon/pz-similar-products 1.92.0-rc.16

package/src/views/search-modal.tsx

@@ -0,0 +1,422 @@
+'use client';
+
+import React from 'react';
+import { Modal, Button, Icon, Select } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { SimilarProductsFilterSidebar } from './filters';
+import { SimilarProductsResultsGrid } from './results';
+import { SimilarProductsModalProps } from '../types';
+import { twMerge } from 'tailwind-merge';
+
+export function SimilarProductsModal({
+  isOpen,
+  onClose,
+  searchResults,
+  resultsKey,
+  isLoading,
+  isFilterMenuOpen,
+  setIsFilterMenuOpen,
+  handleSortChange,
+  handlePageChange,
+  handleFacetChange,
+  removeFacetFilter,
+  handleLoadMore,
+  loadedPages,
+  currentImageUrl,
+  isCropping,
+  imageRef,
+  fileInputRef,
+  crop,
+  setCrop,
+  completedCrop,
+  setCompletedCrop,
+  handleCropComplete,
+  toggleCropMode,
+  processCompletedCrop,
+  processManualCrop,
+  resetCrop,
+  product,
+  activeIndex,
+  hasUploadedImage,
+  handleFileUpload,
+  handleResetToOriginal,
+  fileError,
+  showResetButton = true,
+  settings,
+  className
+}: SimilarProductsModalProps) {
+  const { t } = useLocalization();
+
+  const cssVariables = React.useMemo(() => {
+    if (!settings?.cssVariables && !settings?.theme) return {};
+
+    const variables: Record<string, string> = {};
+
+    if (settings?.cssVariables) {
+      Object.entries(settings.cssVariables).forEach(([key, value]) => {
+        if (typeof value === 'string') {
+          variables[`--${key}`] = value;
+        }
+      });
+    }
+
+    if (settings?.theme) {
+      const { colors, spacing, borderRadius, fonts } = settings.theme;
+
+      if (colors) {
+        Object.entries(colors).forEach(([key, value]) => {
+          if (value && typeof value === 'string')
+            variables[`--color-${key}`] = value;
+        });
+      }
+
+      if (spacing) {
+        Object.entries(spacing).forEach(([key, value]) => {
+          if (value && typeof value === 'string')
+            variables[`--spacing-${key}`] = value;
+        });
+      }
+
+      if (borderRadius) {
+        Object.entries(borderRadius).forEach(([key, value]) => {
+          if (value && typeof value === 'string')
+            variables[`--border-radius-${key}`] = value;
+        });
+      }
+
+      if (fonts) {
+        Object.entries(fonts).forEach(([key, value]) => {
+          if (value && typeof value === 'string')
+            variables[`--font-${key}`] = value;
+        });
+      }
+    }
+
+    return variables;
+  }, [settings?.cssVariables, settings?.theme]);
+
+  const modalClassName = twMerge(
+    'w-full max-w-6xl h-[95vh] flex flex-col',
+    settings?.customStyles?.modal,
+    className
+  );
+
+  const FilterSidebarComponent =
+    settings?.customRenderers?.FilterSidebar || SimilarProductsFilterSidebar;
+  const ResultsGridComponent =
+    settings?.customRenderers?.ResultsGrid || SimilarProductsResultsGrid;
+
+  if (settings?.customRenderers?.render?.modal?.renderModal) {
+    return (
+      <div style={cssVariables}>
+        {settings.customRenderers.render.modal.renderModal({
+          isOpen,
+          onClose,
+          searchResults,
+          resultsKey,
+          isLoading,
+          isFilterMenuOpen,
+          setIsFilterMenuOpen,
+          handleSortChange,
+          handlePageChange,
+          handleFacetChange,
+          removeFacetFilter,
+          handleLoadMore,
+          loadedPages,
+          currentImageUrl,
+          isCropping,
+          imageRef,
+          fileInputRef,
+          crop,
+          setCrop,
+          completedCrop,
+          setCompletedCrop,
+          handleCropComplete,
+          toggleCropMode,
+          processCompletedCrop,
+          processManualCrop,
+          resetCrop,
+          product,
+          activeIndex,
+          hasUploadedImage,
+          handleFileUpload,
+          handleResetToOriginal,
+          fileError,
+          showResetButton,
+          settings,
+          className: modalClassName
+        })}
+      </div>
+    );
+  }
+
+  const activeFilters =
+    searchResults?.facets
+      ?.filter((facet) => facet.key !== 'category_ids')
+      ?.flatMap(
+        (facet) =>
+          facet.data.choices
+            ?.filter((choice) => choice.is_selected)
+            .map((choice) => ({
+              key: facet.key,
+              value: choice.value.toString(),
+              label: choice.label
+            })) || []
+      ) || [];
+
+  const renderHeader = () => {
+    if (settings?.customRenderers?.render?.modal?.renderHeader) {
+      return settings.customRenderers.render.modal.renderHeader({
+        title: t('common.product.similar_styles'),
+        onClose
+      });
+    }
+    return null;
+  };
+
+  const renderActiveFilters = () => {
+    if (activeFilters.length === 0) return null;
+
+    if (settings?.customRenderers?.render?.modal?.renderActiveFilters) {
+      return settings.customRenderers.render.modal.renderActiveFilters({
+        filters: activeFilters,
+        onRemove: (key: string, value: string) => {
+          if (!isLoading) {
+            handleFacetChange(key, value);
+          }
+        },
+        isLoading
+      });
+    }
+
+    const containerClassName = twMerge(
+      'border-b border-gray-200 p-3 md:p-4',
+      settings?.customStyles?.activeFiltersContainer
+    );
+
+    return (
+      <div className={containerClassName}>
+        <div className="flex flex-wrap gap-2">
+          {activeFilters.map((filter) => {
+            if (
+              settings?.customRenderers?.render?.modal?.renderActiveFilterTag
+            ) {
+              return settings.customRenderers.render.modal.renderActiveFilterTag(
+                {
+                  filter,
+                  onRemove: () => {
+                    if (!isLoading) {
+                      handleFacetChange(filter.key, filter.value);
+                    }
+                  },
+                  isLoading
+                }
+              );
+            }
+
+            const tagClassName = twMerge(
+              'flex items-center gap-1 px-2 py-1 md:px-3 bg-gray-100 rounded-full text-xs md:text-sm',
+              settings?.customStyles?.activeFilterTag
+            );
+
+            const buttonClassName = twMerge(
+              'hover:bg-gray-200 rounded-full p-0 w-6 h-6 disabled:opacity-50 disabled:cursor-not-allowed ml-1',
+              settings?.customStyles?.activeFilterTagButton
+            );
+
+            return (
+              <div
+                key={`${filter.key}-${filter.value}`}
+                className={tagClassName}
+              >
+                <span>{filter.label}</span>
+                <Button
+                  appearance="ghost"
+                  size="sm"
+                  onClick={() => {
+                    if (!isLoading) {
+                      handleFacetChange(filter.key, filter.value);
+                    }
+                  }}
+                  disabled={isLoading}
+                  className={buttonClassName}
+                >
+                  <Icon name="close" size={12} />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  const renderControls = () => {
+    if (settings?.customRenderers?.render?.modal?.renderControls) {
+      return settings.customRenderers.render.modal.renderControls({
+        totalCount: searchResults?.pagination?.total_count || 0,
+        sorters: searchResults?.sorters || [],
+        selectedSorter:
+          searchResults?.sorters?.find((sorter) => sorter.is_selected)?.value ||
+          '',
+        onSortChange: handleSortChange,
+        onFilterMenuToggle: () => setIsFilterMenuOpen(true),
+        isLoading
+      });
+    }
+
+    const containerClassName = twMerge(
+      'border-b border-gray-200',
+      settings?.customStyles?.controlsContainer
+    );
+
+    const itemCountClassName = twMerge(
+      'text-xs md:text-sm text-gray-500',
+      settings?.customStyles?.itemCount
+    );
+
+    const filterToggleClassName = twMerge(
+      'md:hidden text-xs',
+      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]',
+      settings?.customStyles?.sortDropdown
+    );
+
+    const renderItemCount = () => {
+      if (settings?.customRenderers?.render?.modal?.renderItemCount) {
+        return settings.customRenderers.render.modal.renderItemCount({
+          count: searchResults?.pagination?.total_count || 0,
+          isLoading
+        });
+      }
+      return (
+        <div className={itemCountClassName}>
+          {searchResults?.pagination?.total_count || 0} items
+        </div>
+      );
+    };
+
+    const renderFilterToggle = () => {
+      if (settings?.customRenderers?.render?.modal?.renderFilterToggleButton) {
+        return settings.customRenderers.render.modal.renderFilterToggleButton({
+          onClick: () => setIsFilterMenuOpen(true),
+          isLoading
+        });
+      }
+      return (
+        <Button
+          appearance="outlined"
+          size="sm"
+          className={filterToggleClassName}
+          onClick={() => setIsFilterMenuOpen(true)}
+          data-testid="similar-products-filter"
+        >
+          <Icon name="filter" size={14} />
+          {t('common.product.filters')}
+        </Button>
+      );
+    };
+
+    const renderSortDropdown = () => {
+      if (settings?.customRenderers?.render?.modal?.renderSortDropdown) {
+        return settings.customRenderers.render.modal.renderSortDropdown({
+          sorters: searchResults?.sorters || [],
+          selectedValue:
+            searchResults?.sorters?.find((sorter) => sorter.is_selected)
+              ?.value || '',
+          onChange: handleSortChange,
+          disabled: isLoading
+        });
+      }
+      return (
+        <Select
+          options={searchResults?.sorters || []}
+          value={
+            searchResults?.sorters?.find((sorter) => sorter.is_selected)
+              ?.value || ''
+          }
+          onChange={(e) => handleSortChange(e.currentTarget.value)}
+          disabled={isLoading}
+          borderless={false}
+          className={sortDropdownClassName}
+        />
+      );
+    };
+
+    return (
+      <div className={containerClassName}>
+        <div className="flex items-center justify-between p-3 md:p-4">
+          <div className="flex items-center gap-3">
+            {renderItemCount()}
+            {renderFilterToggle()}
+          </div>
+          <div className="relative">{renderSortDropdown()}</div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div style={cssVariables}>
+      <Modal
+        portalId="similar-styles-modal"
+        title={renderHeader() || t('common.product.similar_styles')}
+        open={isOpen}
+        setOpen={onClose}
+        className={modalClassName}
+      >
+        {renderActiveFilters()}
+        {renderControls()}
+
+        {/* Main Content */}
+        <div className="flex flex-col md:grid md:grid-cols-5 gap-0 flex-1 overflow-hidden">
+          <FilterSidebarComponent
+            isFilterMenuOpen={isFilterMenuOpen}
+            setIsFilterMenuOpen={setIsFilterMenuOpen}
+            searchResults={searchResults}
+            isLoading={isLoading}
+            handleFacetChange={handleFacetChange}
+            removeFacetFilter={removeFacetFilter}
+            currentImageUrl={currentImageUrl}
+            isCropping={isCropping}
+            imageRef={imageRef}
+            fileInputRef={fileInputRef}
+            crop={crop}
+            setCrop={setCrop}
+            completedCrop={completedCrop}
+            setCompletedCrop={setCompletedCrop}
+            handleCropComplete={handleCropComplete}
+            toggleCropMode={toggleCropMode}
+            processCompletedCrop={processCompletedCrop}
+            processManualCrop={processManualCrop}
+            resetCrop={resetCrop}
+            product={product}
+            hasUploadedImage={hasUploadedImage}
+            handleFileUpload={handleFileUpload}
+            handleResetToOriginal={handleResetToOriginal}
+            fileError={fileError}
+            showResetButton={showResetButton}
+            settings={settings}
+            className={settings?.customStyles?.filterSidebar}
+          />
+
+          <div className="flex-1 md:col-span-4 p-3 md:p-4 overflow-y-auto">
+            <ResultsGridComponent
+              searchResults={searchResults}
+              resultsKey={resultsKey}
+              isLoading={isLoading}
+              handlePageChange={handlePageChange}
+              handleLoadMore={handleLoadMore}
+              loadedPages={loadedPages}
+              settings={settings}
+              className={settings?.customStyles?.resultsGrid}
+            />
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}