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

package/src/views/filters.tsx

@@ -0,0 +1,858 @@
+'use client';
+
+import React from 'react';
+import {
+  Button,
+  Icon,
+  Accordion,
+  LoaderSpinner
+} from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { FilterSidebarProps } from '../types';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import dynamic from 'next/dynamic';
+
+const ReactCrop = dynamic(
+  () => import('react-image-crop').then((mod) => mod.ReactCrop),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-96 bg-gray-100 flex items-center justify-center">
+        <LoaderSpinner />
+      </div>
+    )
+  }
+);
+
+const Radio = dynamic(
+  () =>
+    import('@akinon/next/components')
+      .then((mod) => mod.Radio)
+      .catch(() => import('@theme/components').then((mod) => mod.Radio))
+      .catch(() => () => <input type="radio" className="form-radio" />),
+  { ssr: false }
+);
+
+const Checkbox = dynamic(
+  () =>
+    import('@theme/components')
+      .then((mod) => mod.Checkbox)
+      .catch(() => import('@theme/components').then((mod) => mod.Checkbox))
+      .catch(() => () => <input type="checkbox" className="form-checkbox" />),
+  { ssr: false }
+);
+
+const WIDGET_TYPE = {
+  category: 'category',
+  multiselect: 'multiselect'
+};
+
+export function SimilarProductsFilterSidebar({
+  isFilterMenuOpen,
+  setIsFilterMenuOpen,
+  searchResults,
+  isLoading,
+  handleFacetChange,
+  removeFacetFilter,
+  currentImageUrl,
+  isCropping,
+  imageRef,
+  fileInputRef,
+  crop,
+  setCrop,
+  completedCrop,
+  setCompletedCrop,
+  handleCropComplete,
+  toggleCropMode,
+  processCompletedCrop,
+  processManualCrop,
+  resetCrop,
+  product,
+  hasUploadedImage,
+  handleFileUpload,
+  handleResetToOriginal,
+  fileError,
+  showResetButton = true,
+  settings,
+  className
+}: FilterSidebarProps) {
+  const { t } = useLocalization();
+
+  const sizeKey = settings?.commonProductAttributes?.find(
+    (item: any) => item.translationKey === 'size'
+  )?.key;
+
+  const COMPONENT_TYPES = {
+    [WIDGET_TYPE.category]: Radio,
+    [WIDGET_TYPE.multiselect]: Checkbox
+  };
+
+  const getComponentByWidgetType = (widgetType: string, facetKey: string) => {
+    return (
+      COMPONENT_TYPES[widgetType] || COMPONENT_TYPES[WIDGET_TYPE.multiselect]
+    );
+  };
+
+  const handleNewImageClick = () => {
+    if (!isLoading && settings?.enableFileUpload !== false) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  const handleFileChangeWithCropReset = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (isLoading) return;
+
+    resetCrop();
+    handleFileUpload(event);
+
+    if (event.target) {
+      event.target.value = '';
+    }
+  };
+
+  const handleToggleCropMode = () => {
+    if (!isLoading) {
+      toggleCropMode();
+    }
+  };
+
+  const handleSafeProcessCrop = async (cropData: any) => {
+    if (!isLoading && cropData?.width > 10 && cropData?.height > 10) {
+      processManualCrop(cropData);
+    }
+  };
+
+  const sidebarClassName = twMerge(
+    'w-9/10 fixed left-0 top-0 bottom-0 bg-white z-50 p-6 transition-all ease-in duration-300 md:static md:mr-0 md:text-sm md:pt-4 md:col-span-1 md:bg-gray-100 md:p-4 md:flex md:flex-col md:overflow-y-auto overflow-x-hidden',
+    isFilterMenuOpen
+      ? 'flex flex-col opacity-100 overflow-auto md:opacity-100 md:visible md:translate-x-0'
+      : 'opacity-0 invisible absolute -translate-x-full md:opacity-100 md:visible md:translate-x-0',
+    settings?.customStyles?.filterSidebar,
+    className
+  );
+
+  return (
+    <div
+      className={sidebarClassName}
+      style={{
+        maxHeight: 'calc(100vh - 120px)'
+      }}
+    >
+      {(() => {
+        if (
+          settings?.customRenderers?.render?.filterSidebar?.renderMobileHeader
+        ) {
+          return settings.customRenderers.render.filterSidebar.renderMobileHeader(
+            {
+              title: t('common.product.filters'),
+              itemCount: searchResults?.pagination?.total_count || 0,
+              onClose: () => setIsFilterMenuOpen(false)
+            }
+          );
+        }
+
+        const mobileHeaderClassName = twMerge(
+          'flex justify-between mb-6 md:hidden',
+          settings?.customStyles?.filterSidebarMobileHeader
+        );
+
+        return (
+          <>
+            <div className={mobileHeaderClassName}>
+              <h3 className="text-2xl font-bold">
+                {t('common.product.filters')}
+              </h3>
+              <Button
+                appearance="ghost"
+                size="sm"
+                onClick={() => setIsFilterMenuOpen(false)}
+                className="hover:bg-gray-200 rounded-full p-0 w-6 h-6"
+              >
+                <Icon name="close" size={16} />
+              </Button>
+            </div>
+            <div className="flex justify-between items-center mb-6 md:hidden">
+              <span className="text-sm">
+                {searchResults?.pagination?.total_count || 0} items
+              </span>
+            </div>
+          </>
+        );
+      })()}
+
+      {(() => {
+        if (
+          settings?.customRenderers?.render?.filterSidebar?.renderImageSection
+        ) {
+          return settings.customRenderers.render.filterSidebar.renderImageSection(
+            {
+              currentImageUrl,
+              isCropping,
+              onToggleCrop: handleToggleCropMode,
+              onFileUpload: handleFileChangeWithCropReset,
+              onResetToOriginal: handleResetToOriginal,
+              fileError,
+              isLoading
+            }
+          );
+        }
+
+        const imageSectionClassName = twMerge(
+          'relative mb-2 md:mb-6 mt-4',
+          settings?.customStyles?.imageSection
+        );
+
+        const imageContainerClassName = twMerge(
+          'relative bg-white overflow-hidden flex items-center justify-center transition-all duration-300 ease-in-out',
+          isCropping ? 'border-2 border-dashed border-gray-300' : '',
+          settings?.customStyles?.imageContainer
+        );
+
+        const cropButtonClassName = twMerge(
+          `absolute z-10 bottom-3 left-3 p-2 rounded-full bg-white shadow-md w-10 h-10 ${
+            isCropping ? 'text-red-500' : 'text-gray-700'
+          } ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`,
+          settings?.customStyles?.cropButton
+        );
+
+        const renderCropButton = () => {
+          if (!settings?.enableCropping || settings.enableCropping === false)
+            return null;
+
+          if (
+            settings?.customRenderers?.render?.filterSidebar?.renderCropButton
+          ) {
+            return settings.customRenderers.render.filterSidebar.renderCropButton(
+              {
+                isCropping,
+                onClick: handleToggleCropMode,
+                disabled: isLoading
+              }
+            );
+          }
+
+          return (
+            <Button
+              appearance="ghost"
+              size="sm"
+              onClick={handleToggleCropMode}
+              disabled={isLoading}
+              className={cropButtonClassName}
+            >
+              {isLoading ? (
+                <LoaderSpinner className="w-5 h-5" />
+              ) : isCropping ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              ) : (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M6 2v14a2 2 0 0 0 2 2h14"></path>
+                  <path d="M18 22V8a2 2 0 0 0-2-2H2"></path>
+                </svg>
+              )}
+            </Button>
+          );
+        };
+
+        const renderTickButton = () => {
+          if (!settings?.enableCropping || settings.enableCropping === false)
+            return null;
+          if (
+            !isCropping ||
+            !completedCrop ||
+            completedCrop.width <= 10 ||
+            completedCrop.height <= 10
+          )
+            return null;
+
+          if (
+            settings?.customRenderers?.render?.filterSidebar?.renderTickButton
+          ) {
+            return settings.customRenderers.render.filterSidebar.renderTickButton(
+              {
+                onClick: () => handleSafeProcessCrop(completedCrop),
+                disabled: isLoading
+              }
+            );
+          }
+
+          const tickButtonClassName = twMerge(
+            `absolute z-10 bottom-3 right-3 p-2 rounded-full bg-white shadow-md w-10 h-10 text-green-600 ${
+              isLoading ? 'opacity-50 cursor-not-allowed' : ''
+            }`,
+            settings?.customStyles?.tickButton
+          );
+
+          return (
+            <Button
+              appearance="ghost"
+              size="sm"
+              onClick={() => {
+                if (!isLoading) {
+                  handleSafeProcessCrop(completedCrop);
+                }
+              }}
+              disabled={isLoading}
+              className={tickButtonClassName}
+            >
+              {isLoading ? (
+                <LoaderSpinner className="w-5 h-5" />
+              ) : (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="20,6 9,17 4,12"></polyline>
+                </svg>
+              )}
+            </Button>
+          );
+        };
+
+        return (
+          <div className={imageSectionClassName}>
+            <div className={imageContainerClassName}>
+              {renderCropButton()}
+              {renderTickButton()}
+
+              {(() => {
+                if (
+                  settings?.customRenderers?.render?.filterSidebar
+                    ?.renderImageContainer
+                ) {
+                  return settings.customRenderers.render.filterSidebar.renderImageContainer(
+                    {
+                      imageUrl: currentImageUrl || '',
+                      productName: product?.name || 'Product image',
+                      isCropping
+                    }
+                  );
+                }
+
+                const imageWrapperClassName = twMerge(
+                  'w-full h-full flex items-center justify-center',
+                  settings?.customStyles?.imageWrapper
+                );
+
+                return (
+                  <div className={imageWrapperClassName}>
+                    {isCropping ? (
+                      <ReactCrop
+                        crop={crop}
+                        onChange={(newCrop) => {
+                          if (!isLoading) {
+                            setCrop(newCrop);
+                            if (newCrop?.width > 10 && newCrop?.height > 10) {
+                              setCompletedCrop(newCrop);
+                            }
+                          }
+                        }}
+                        onComplete={handleCropComplete}
+                        onDragStart={() => {}}
+                        onDragEnd={() => {}}
+                        ruleOfThirds={false}
+                        aspect={settings?.cropAspectRatio}
+                        className="slider-crop"
+                        disabled={isLoading}
+                        keepSelection={true}
+                      >
+                        <img
+                          ref={imageRef}
+                          src={currentImageUrl || ''}
+                          alt={product?.name || 'Product image'}
+                          className="max-w-full max-h-[200px] md:max-h-[280px]"
+                          style={{ transform: `scale(1) rotate(0deg)` }}
+                        />
+                      </ReactCrop>
+                    ) : (
+                      <div className="relative w-full h-full flex items-center justify-center">
+                        <img
+                          ref={imageRef}
+                          src={currentImageUrl || ''}
+                          alt={product?.name || 'Product image'}
+                          className="max-w-full max-h-[200px] md:max-h-[280px] object-contain"
+                        />
+                        {!isCropping && completedCrop && (
+                          <div className="hidden md:block absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-in-out">
+                            <div
+                              className="absolute transition-all duration-300 ease-in-out"
+                              style={{
+                                width: `${completedCrop.width}px`,
+                                height: `${completedCrop.height}px`,
+                                left: `${completedCrop.x}px`,
+                                top: `${completedCrop.y}px`,
+                                boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.5)',
+                                border: '2px solid white'
+                              }}
+                            ></div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })()}
+            </div>
+
+            {!isCropping && (
+              <div
+                className={twMerge(
+                  'flex flex-col md:flex-row justify-center mt-3 gap-2',
+                  settings?.customStyles?.cropControls
+                )}
+              >
+                {settings?.enableFileUpload !== false && (
+                  <>
+                    <input
+                      type="file"
+                      accept="image/*"
+                      ref={fileInputRef}
+                      onChange={handleFileChangeWithCropReset}
+                      className="hidden"
+                    />
+                    {(() => {
+                      if (
+                        settings?.customRenderers?.render?.filterSidebar
+                          ?.renderUploadButton
+                      ) {
+                        return settings.customRenderers.render.filterSidebar.renderUploadButton(
+                          {
+                            onClick: handleNewImageClick,
+                            disabled: isLoading
+                          }
+                        );
+                      }
+
+                      const uploadButtonClassName = twMerge(
+                        `flex items-center gap-2 text-xs md:text-sm justify-center bg-gray-100 hover:bg-gray-200 border-gray-200 ${
+                          isLoading ? 'opacity-50 cursor-not-allowed' : ''
+                        }`,
+                        settings?.customStyles?.uploadButton
+                      );
+
+                      return (
+                        <Button
+                          appearance="outlined"
+                          size="sm"
+                          onClick={handleNewImageClick}
+                          disabled={isLoading}
+                          className={uploadButtonClassName}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="text-gray-500"
+                          >
+                            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+                            <circle cx="12" cy="13" r="4"></circle>
+                          </svg>
+                          {t('common.product.new_image')}
+                        </Button>
+                      );
+                    })()}
+                  </>
+                )}
+
+                {(() => {
+                  if (
+                    settings?.customRenderers?.render?.filterSidebar
+                      ?.renderResetButton
+                  ) {
+                    return settings.customRenderers.render.filterSidebar.renderResetButton(
+                      {
+                        onClick: handleResetToOriginal,
+                        disabled: isLoading,
+                        showButton:
+                          showResetButton && (hasUploadedImage || completedCrop)
+                      }
+                    );
+                  }
+
+                  if (!showResetButton || (!hasUploadedImage && !completedCrop))
+                    return null;
+
+                  const resetButtonClassName = twMerge(
+                    `flex items-center gap-2 text-xs md:text-sm justify-center bg-blue-100 hover:bg-blue-200 border-blue-200 text-blue-600 ${
+                      isLoading ? 'opacity-50 cursor-not-allowed' : ''
+                    }`,
+                    settings?.customStyles?.resetButton
+                  );
+
+                  return (
+                    <Button
+                      appearance="outlined"
+                      size="sm"
+                      onClick={handleResetToOriginal}
+                      disabled={isLoading}
+                      className={resetButtonClassName}
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="text-blue-600"
+                      >
+                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
+                        <path d="M21 3v5h-5"></path>
+                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
+                        <path d="M3 21v-5h5"></path>
+                      </svg>
+                      {t('common.product.reset_to_original')}
+                    </Button>
+                  );
+                })()}
+              </div>
+            )}
+
+            {fileError &&
+              !isCropping &&
+              (() => {
+                if (
+                  settings?.customRenderers?.render?.filterSidebar
+                    ?.renderErrorMessage
+                ) {
+                  return settings.customRenderers.render.filterSidebar.renderErrorMessage(
+                    {
+                      error: fileError
+                    }
+                  );
+                }
+
+                const errorClassName = twMerge(
+                  'mt-2 px-3 py-2 bg-red-50 border border-red-100 rounded-md',
+                  settings?.customStyles?.errorMessage
+                );
+
+                return (
+                  <div className={errorClassName}>
+                    <p className="text-xs text-red-600 font-medium">
+                      {fileError}
+                    </p>
+                  </div>
+                );
+              })()}
+          </div>
+        );
+      })()}
+
+      {/* Filters */}
+      <div className="space-y-2 md:space-y-4">
+        {searchResults?.facets
+          ?.filter((facet) => facet.key !== 'category_ids')
+          ?.map((facet) => {
+            if (
+              settings?.customRenderers?.render?.filterSidebar
+                ?.renderFilterGroup
+            ) {
+              return settings.customRenderers.render.filterSidebar.renderFilterGroup(
+                {
+                  facet,
+                  onFacetChange: handleFacetChange,
+                  isLoading
+                }
+              );
+            }
+
+            const Component = getComponentByWidgetType(
+              facet.widget_type,
+              facet.key
+            );
+            const choices = facet.data.choices || [];
+
+            if (!Component) {
+              console.warn(
+                'Component not found for widget type:',
+                facet.widget_type
+              );
+              return null;
+            }
+
+            const filterGroupClassName = twMerge(
+              'filter-group',
+              settings?.customStyles?.filterGroup
+            );
+
+            const filterGroupContentClassName = twMerge(
+              clsx('flex gap-4', {
+                'flex-wrap flex-row': facet.key === sizeKey,
+                'flex-col': facet.key !== sizeKey
+              }),
+              settings?.customStyles?.filterGroupContent
+            );
+
+            const renderFilterGroupTitle = () => {
+              if (
+                settings?.customRenderers?.render?.filterSidebar
+                  ?.renderFilterGroupTitle
+              ) {
+                return settings.customRenderers.render.filterSidebar.renderFilterGroupTitle(
+                  {
+                    title: facet.name,
+                    isCollapsed: choices.some((choice) => choice.is_selected),
+                    onToggle: () => {}
+                  }
+                );
+              }
+              return null;
+            };
+
+            const renderFilterItem = (choice: any, index: number) => {
+              if (
+                settings?.customRenderers?.render?.filterSidebar
+                  ?.renderFilterItem
+              ) {
+                return settings.customRenderers.render.filterSidebar.renderFilterItem(
+                  {
+                    choice,
+                    facetKey: facet.key,
+                    onFacetChange: handleFacetChange,
+                    isLoading,
+                    isSelected: choice.is_selected
+                  }
+                );
+              }
+
+              const filterItemClassName = twMerge(
+                'filter-item',
+                settings?.customStyles?.filterItem
+              );
+
+              const filterItemInputClassName = twMerge(
+                'filter-item-input',
+                settings?.customStyles?.filterItemInput
+              );
+
+              const filterItemLabelClassName = twMerge(
+                'filter-item-label',
+                settings?.customStyles?.filterItemLabel
+              );
+
+              const filterItemCountClassName = twMerge(
+                'filter-item-count',
+                settings?.customStyles?.filterItemCount
+              );
+
+              return (
+                <div key={choice.value} className={filterItemClassName}>
+                  <Component
+                    key={choice.label}
+                    value={choice.value}
+                    label={choice.label}
+                    name={facet.key}
+                    onChange={() => {
+                      if (!isLoading) {
+                        handleFacetChange(facet.key, choice.value);
+                      }
+                    }}
+                    onClick={() => {
+                      if (!isLoading && facet.key === sizeKey) {
+                        handleFacetChange(facet.key, choice.value);
+                      }
+                    }}
+                    checked={choice.is_selected}
+                    data-testid={`${choice.label.trim()}`}
+                    disabled={isLoading}
+                    className={filterItemInputClassName}
+                  >
+                    <span className={filterItemLabelClassName}>
+                      {choice.label}
+                    </span>{' '}
+                    (
+                    <span
+                      data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
+                      className={filterItemCountClassName}
+                    >
+                      {choice.quantity}
+                    </span>
+                    )
+                  </Component>
+                </div>
+              );
+            };
+
+            return (
+              <div key={facet.key} className={filterGroupClassName}>
+                <Accordion
+                  title={renderFilterGroupTitle() || facet.name}
+                  isCollapse={choices.some((choice) => choice.is_selected)}
+                  dataTestId={`filter-${facet.name}`}
+                >
+                  <div className={filterGroupContentClassName}>
+                    {choices
+                      .slice(0, 10)
+                      .map((choice, index) => renderFilterItem(choice, index))}
+                  </div>
+                </Accordion>
+              </div>
+            );
+          })}
+      </div>
+
+      {/* Mobile Active Filters and Clear Button */}
+      {(() => {
+        const hasActiveFilters = searchResults?.facets
+          ?.filter((facet) => facet.key !== 'category_ids')
+          ?.some((facet) =>
+            facet.data.choices?.some((choice) => choice.is_selected)
+          );
+
+        if (!hasActiveFilters) return null;
+
+        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 handleClearAll = () => {
+          if (!isLoading) {
+            const facetsToRemove = [];
+            searchResults?.facets
+              ?.filter((facet) => facet.key !== 'category_ids')
+              ?.forEach((facet) => {
+                facet.data.choices
+                  ?.filter((choice) => choice.is_selected)
+                  .forEach((choice) => {
+                    facetsToRemove.push({
+                      facetKey: facet.key,
+                      choiceValue: choice.value
+                    });
+                  });
+              });
+
+            facetsToRemove.forEach(({ facetKey, choiceValue }) => {
+              removeFacetFilter(facetKey, choiceValue);
+            });
+          }
+        };
+
+        if (
+          settings?.customRenderers?.render?.filterSidebar
+            ?.renderMobileActiveFilters
+        ) {
+          return (
+            <div className="md:hidden mt-6">
+              {settings.customRenderers.render.filterSidebar.renderMobileActiveFilters(
+                {
+                  filters: activeFilters,
+                  onRemove: handleFacetChange,
+                  onClearAll: handleClearAll,
+                  isLoading
+                }
+              )}
+            </div>
+          );
+        }
+
+        const mobileActiveFiltersClassName = twMerge(
+          'md:hidden mt-6',
+          settings?.customStyles?.mobileActiveFilters
+        );
+
+        const mobileActiveFilterTagClassName = twMerge(
+          'flex items-center gap-1 px-2 py-1 bg-gray-100 rounded-full text-xs',
+          settings?.customStyles?.mobileActiveFilterTag
+        );
+
+        const mobileClearAllButtonClassName = twMerge(
+          'w-full',
+          settings?.customStyles?.mobileClearAllButton
+        );
+
+        return (
+          <div className={mobileActiveFiltersClassName}>
+            <div className="mb-4">
+              <h4 className="text-sm font-medium mb-2">
+                {t('common.product.active_filters')}
+              </h4>
+              <div className="flex flex-wrap gap-2">
+                {activeFilters.map((filter) => (
+                  <div
+                    key={`${filter.key}-${filter.value}`}
+                    className={mobileActiveFilterTagClassName}
+                  >
+                    <span>{filter.label}</span>
+                    <Button
+                      appearance="ghost"
+                      size="sm"
+                      onClick={() => {
+                        if (!isLoading) {
+                          handleFacetChange(filter.key, filter.value);
+                        }
+                      }}
+                      disabled={isLoading}
+                      className="hover:bg-gray-200 rounded-full p-0 w-5 h-5 disabled:opacity-50 disabled:cursor-not-allowed ml-1"
+                    >
+                      <Icon name="close" size={10} />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <Button
+              appearance="outlined"
+              className={mobileClearAllButtonClassName}
+              onClick={handleClearAll}
+              disabled={isLoading}
+            >
+              {t('common.product.clear_all_filters')}
+            </Button>
+          </div>
+        );
+      })()}
+    </div>
+  );
+}