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

package/src/index.ts

@@ -0,0 +1,33 @@
+export { SimilarProductsModal } from './views/search-modal';
+export { SimilarProductsFilterSidebar } from './views/filters';
+export { SimilarProductsResultsGrid } from './views/results';
+export { SimilarProductsPlugin } from './views/main';
+export { SimilarProductsButton } from './views/search-button';
+export { ProductImageSearchFeature } from './views/product-image-search-feature';
+export { ImageSearchModal } from './views/image-search';
+export { ImageSearchButton } from './views/image-search-button';
+export { HeaderImageSearchFeature } from './views/header-image-search-feature';
+
+export { useSimilarProducts } from './hooks/use-similar-products';
+export { useImageCropper } from './hooks/use-image-cropper';
+
+export {
+  useGetSimilarProductsByUrlQuery,
+  useLazyGetSimilarProductsByUrlQuery,
+  useGetSimilarProductsByImageMutation,
+  useGetSimilarProductsListQuery,
+  useLazyGetSimilarProductsListQuery
+} from './data/endpoints';
+
+export type {
+  SimilarProductsListResponse,
+  SimilarProductsModalProps,
+  FilterSidebarProps,
+  ResultsGridProps,
+  SimilarProductsSettings,
+  SimilarProductsResponse
+} from './types';
+
+export * from './utils';
+
+export { SimilarProductsPlugin as default } from './views/main';

package/src/types/index.ts

@@ -0,0 +1,419 @@
+import React from 'react';
+import {
+  Product,
+  Facet,
+  SortOption,
+  Pagination
+} from '@akinon/next/types/commerce';
+
+export interface SimilarProductsResponse {
+  product_ids?: number[];
+  productIds?: number[];
+  similar_products?: Array<{ product_id: number }>;
+  [key: string]: any;
+}
+
+export interface SimilarProductsListResponse {
+  pagination: Pagination;
+  facets: Facet[];
+  sorters: SortOption[];
+  search_text: string | null;
+  products: Product[];
+  [key: string]: any;
+}
+
+export interface SimilarProductsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  searchResults: SimilarProductsListResponse | null;
+  resultsKey: number;
+  isLoading: boolean;
+  isFilterMenuOpen: boolean;
+  setIsFilterMenuOpen: (open: boolean) => void;
+  handleSortChange: (value: string) => void;
+  handlePageChange: (page: number, sortValue?: string) => void;
+  handleFacetChange: (facetKey: string, choiceValue: string | number) => void;
+  removeFacetFilter: (facetKey: string, choiceValue: string | number) => void;
+  handleLoadMore?: () => void;
+  loadedPages?: number[];
+  currentImageUrl: string;
+  isCropping: boolean;
+  imageRef: React.RefObject<HTMLImageElement>;
+  fileInputRef: React.RefObject<HTMLInputElement>;
+  crop: any;
+  setCrop: (crop: any) => void;
+  completedCrop: any;
+  setCompletedCrop: (crop: any) => void;
+  handleCropComplete: (crop: any) => void;
+  toggleCropMode: () => void;
+  processCompletedCrop: (crop: any) => void;
+  processManualCrop: (crop: any) => void;
+  resetCrop: () => void;
+  product: Product;
+  activeIndex?: number;
+  hasUploadedImage: boolean;
+  handleFileUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleResetToOriginal: () => void;
+  fileError: string;
+  showResetButton?: boolean;
+  settings?: any;
+  className?: string;
+}
+
+export interface FilterSidebarProps {
+  isFilterMenuOpen: boolean;
+  setIsFilterMenuOpen: (open: boolean) => void;
+  searchResults: SimilarProductsListResponse | null;
+  isLoading: boolean;
+  handleFacetChange: (facetKey: string, choiceValue: string | number) => void;
+  removeFacetFilter: (facetKey: string, choiceValue: string | number) => void;
+  currentImageUrl: string;
+  isCropping: boolean;
+  imageRef: React.RefObject<HTMLImageElement>;
+  fileInputRef: React.RefObject<HTMLInputElement>;
+  crop: any;
+  setCrop: (crop: any) => void;
+  completedCrop: any;
+  setCompletedCrop: (crop: any) => void;
+  handleCropComplete: (crop: any) => void;
+  toggleCropMode: () => void;
+  processCompletedCrop: (crop: any) => void;
+  processManualCrop: (crop: any) => void;
+  resetCrop: () => void;
+  product: Product;
+  hasUploadedImage: boolean;
+  handleFileUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleResetToOriginal: () => void;
+  fileError: string;
+  showResetButton?: boolean;
+  settings?: any;
+  className?: string;
+}
+
+export interface ResultsGridProps {
+  searchResults: SimilarProductsListResponse | null;
+  resultsKey: number;
+  isLoading: boolean;
+  handlePageChange: (page: number) => void;
+  handleLoadMore?: () => void;
+  loadedPages?: number[];
+  settings?: any;
+  className?: string;
+}
+
+export interface CustomRendererProps {
+  modal?: {
+    renderModal?: (props: SimilarProductsModalProps) => React.ReactNode;
+    renderHeader?: (props: {
+      title: string;
+      onClose: () => void;
+    }) => React.ReactNode;
+    renderCloseButton?: (props: { onClose: () => void }) => React.ReactNode;
+    renderActiveFilters?: (props: {
+      filters: Array<{ key: string; value: string; label: string }>;
+      onRemove: (key: string, value: string) => void;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderActiveFilterTag?: (props: {
+      filter: { key: string; value: string; label: string };
+      onRemove: () => void;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderControls?: (props: {
+      totalCount: number;
+      sorters: SortOption[];
+      selectedSorter: string;
+      onSortChange: (value: string) => void;
+      onFilterMenuToggle: () => void;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderSortDropdown?: (props: {
+      sorters: SortOption[];
+      selectedValue: string;
+      onChange: (value: string) => void;
+      disabled: boolean;
+    }) => React.ReactNode;
+    renderItemCount?: (props: {
+      count: number;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderFilterToggleButton?: (props: {
+      onClick: () => void;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderEmptyState?: () => React.ReactNode;
+  };
+  filterSidebar?: {
+    renderSidebar?: (props: FilterSidebarProps) => React.ReactNode;
+    renderMobileHeader?: (props: {
+      title: string;
+      itemCount: number;
+      onClose: () => void;
+    }) => React.ReactNode;
+    renderImageSection?: (props: {
+      currentImageUrl: string;
+      isCropping: boolean;
+      onToggleCrop: () => void;
+      onFileUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
+      onResetToOriginal: () => void;
+      fileError: string;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderImageContainer?: (props: {
+      imageUrl: string;
+      productName: string;
+      isCropping: boolean;
+    }) => React.ReactNode;
+    renderCropButton?: (props: {
+      isCropping: boolean;
+      onClick: () => void;
+      disabled: boolean;
+    }) => React.ReactNode;
+    renderTickButton?: (props: {
+      onClick: () => void;
+      disabled: boolean;
+    }) => React.ReactNode;
+    renderUploadButton?: (props: {
+      onClick: () => void;
+      disabled: boolean;
+    }) => React.ReactNode;
+    renderResetButton?: (props: {
+      onClick: () => void;
+      disabled: boolean;
+      showButton: boolean;
+    }) => React.ReactNode;
+    renderErrorMessage?: (props: { error: string }) => React.ReactNode;
+    renderFilterGroup?: (props: {
+      facet: Facet;
+      onFacetChange: (facetKey: string, choiceValue: string | number) => void;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderFilterGroupTitle?: (props: {
+      title: string;
+      isCollapsed: boolean;
+      onToggle: () => void;
+    }) => React.ReactNode;
+    renderFilterItem?: (props: {
+      choice: any;
+      facetKey: string;
+      onFacetChange: (facetKey: string, choiceValue: string | number) => void;
+      isLoading: boolean;
+      isSelected: boolean;
+    }) => React.ReactNode;
+    renderFilterItemInput?: (props: {
+      choice: any;
+      facetKey: string;
+      onChange: () => void;
+      checked: boolean;
+      disabled: boolean;
+      inputType: 'checkbox' | 'radio';
+    }) => React.ReactNode;
+    renderFilterItemLabel?: (props: {
+      choice: any;
+      facetKey: string;
+    }) => React.ReactNode;
+    renderFilterItemCount?: (props: { count: number }) => React.ReactNode;
+    renderMobileActiveFilters?: (props: {
+      filters: Array<{ key: string; value: string; label: string }>;
+      onRemove: (key: string, value: string) => void;
+      onClearAll: () => void;
+      isLoading: boolean;
+    }) => React.ReactNode;
+  };
+  resultsGrid?: {
+    renderGrid?: (props: ResultsGridProps) => React.ReactNode;
+    renderGridContainer?: (props: {
+      children: React.ReactNode;
+      resultsKey: number;
+    }) => React.ReactNode;
+    renderProductItem?: (props: {
+      product: Product;
+      index: number;
+    }) => React.ReactNode;
+    renderProductImage?: (props: {
+      product: Product;
+      imageUrl: string;
+      alt: string;
+      index: number;
+    }) => React.ReactNode;
+    renderProductInfo?: (props: {
+      product: Product;
+      index: number;
+    }) => React.ReactNode;
+    renderProductTitle?: (props: {
+      product: Product;
+      title: string;
+    }) => React.ReactNode;
+    renderProductPrice?: (props: {
+      product: Product;
+      price: string;
+      oldPrice?: string;
+    }) => React.ReactNode;
+    renderPagination?: (props: {
+      pagination: Pagination;
+      onPageChange: (page: number) => void;
+      isLoading: boolean;
+    }) => React.ReactNode;
+    renderPaginationButton?: (props: {
+      page: number;
+      isActive: boolean;
+      isDisabled: boolean;
+      onClick: () => void;
+      children: React.ReactNode;
+    }) => React.ReactNode;
+    renderPaginationInfo?: (props: {
+      currentPage: number;
+      totalPages: number;
+      totalCount: number;
+    }) => React.ReactNode;
+    renderPaginationPrevious?: (props: {
+      onClick: () => void;
+      disabled: boolean;
+    }) => React.ReactNode;
+    renderPaginationNext?: (props: {
+      onClick: () => void;
+      disabled: boolean;
+    }) => React.ReactNode;
+    renderLoadMore?: (props: {
+      onLoadMore: () => void;
+      hasMore: boolean;
+      isLoading: boolean;
+      currentPage: number;
+      totalPages: number;
+      loadedPages: number;
+    }) => React.ReactNode;
+    renderLoadMoreButton?: (props: {
+      onClick: () => void;
+      disabled: boolean;
+      isLoading: boolean;
+      text: string;
+    }) => React.ReactNode;
+    renderLoadingState?: () => React.ReactNode;
+    renderLoadingOverlay?: () => React.ReactNode;
+    renderEmptyState?: () => React.ReactNode;
+  };
+  imageSearchModal?: {
+    renderModal?: (props: any) => React.ReactNode;
+    renderUploadArea?: (props: {
+      onFileSelect: (file: File) => void;
+      acceptedFormats: string[];
+      maxFileSize: number;
+    }) => React.ReactNode;
+  };
+}
+
+export interface SimilarProductsSettings {
+  maxFileSize?: number;
+  imageFormats?: string[];
+  cropAspectRatio?: number;
+  resultsPerPage?: number;
+  enableCropping?: boolean;
+  enableFileUpload?: boolean;
+  paginationType?: 'pagination' | 'load-more' | 'infinite-scroll';
+  loadMoreText?: string;
+  loadMoreStyle?: 'button' | 'auto';
+  loadMoreThreshold?: number;
+  maxPagesLoadMore?: number;
+  customStyles?: {
+    modal?: string;
+    filterSidebar?: string;
+    resultsGrid?: string;
+    imageSearchModal?: string;
+
+    activeFiltersContainer?: string;
+    activeFilterTag?: string;
+    activeFilterTagButton?: string;
+
+    controlsContainer?: string;
+    itemCount?: string;
+    sortDropdown?: string;
+    filterToggleButton?: string;
+
+    filterSidebarMobileHeader?: string;
+    filterGroup?: string;
+    filterGroupTitle?: string;
+    filterGroupContent?: string;
+    filterItem?: string;
+    filterItemInput?: string;
+    filterItemLabel?: string;
+    filterItemCount?: string;
+
+    imageSection?: string;
+    imageContainer?: string;
+    imageWrapper?: string;
+    cropButton?: string;
+    tickButton?: string;
+    uploadButton?: string;
+    resetButton?: string;
+    errorMessage?: string;
+    cropControls?: string;
+
+    resultsContainer?: string;
+    gridContainer?: string;
+    productItem?: string;
+    productImageWrapper?: string;
+    productImage?: string;
+    productInfo?: string;
+    productTitle?: string;
+    productPrice?: string;
+    productOldPrice?: string;
+
+    pagination?: string;
+    paginationContainer?: string;
+    paginationInfo?: string;
+    paginationButton?: string;
+    paginationButtonActive?: string;
+    paginationButtonDisabled?: string;
+    paginationPrevious?: string;
+    paginationNext?: string;
+    loadMoreButton?: string;
+    loadMoreContainer?: string;
+
+    loadingSpinner?: string;
+    loadingOverlay?: string;
+    emptyState?: string;
+    emptyStateIcon?: string;
+    emptyStateText?: string;
+
+    mobileActiveFilters?: string;
+    mobileActiveFilterTag?: string;
+    mobileClearAllButton?: string;
+  };
+  customRenderers?: {
+    Modal?: React.ComponentType<SimilarProductsModalProps>;
+    FilterSidebar?: React.ComponentType<FilterSidebarProps>;
+    ResultsGrid?: React.ComponentType<ResultsGridProps>;
+    ImageSearchModal?: React.ComponentType<any>;
+
+    render?: CustomRendererProps;
+  };
+  theme?: {
+    colors?: {
+      primary?: string;
+      secondary?: string;
+      background?: string;
+      text?: string;
+      border?: string;
+      success?: string;
+      error?: string;
+      warning?: string;
+    };
+    spacing?: {
+      xs?: string;
+      sm?: string;
+      md?: string;
+      lg?: string;
+      xl?: string;
+    };
+    borderRadius?: {
+      sm?: string;
+      md?: string;
+      lg?: string;
+    };
+    fonts?: {
+      primary?: string;
+      secondary?: string;
+    };
+  };
+  cssVariables?: Record<string, string>;
+}