@akinon/next 1.92.0-rc.9 → 1.92.0-snapshot-ZERO-3449-20250618101111

package/hooks/use-similar-products.ts

@@ -0,0 +1,720 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Product } from '@akinon/next/types';
+import {
+  useGetSimilarProductsByUrlQuery,
+  useGetSimilarProductsByImageMutation,
+  useLazyGetSimilarProductsListQuery,
+  type SimilarProductsListResponse
+} from '@akinon/next/data/client/similar-products';
+import { type Facet, type SortOption } from '@akinon/next/types/commerce';
+import { useLocalization } from '@akinon/next/hooks';
+import {
+  validateImageFile,
+  validateImageFromDataUrl,
+  type ImageValidationResult
+} from '@akinon/next/utils/image-validation';
+
+type SearchResults = SimilarProductsListResponse;
+
+interface SearchParams {
+  [key: string]: string;
+}
+
+export function useSimilarProducts(product: Product) {
+  const { t } = useLocalization();
+  const [currentImageUrl, setCurrentImageUrl] = useState('');
+  const [fileError, setFileError] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResults | null>(
+    null
+  );
+  const [resultsKey, setResultsKey] = useState(0);
+  const [lastProductIds, setLastProductIds] = useState<number[]>([]);
+  const [hasUploadedImage, setHasUploadedImage] = useState(false);
+  const [shouldFetchByUrl, setShouldFetchByUrl] = useState(false);
+  const [urlToFetch, setUrlToFetch] = useState('');
+
+  const { data: urlSearchData, isLoading: isUrlSearchLoading } =
+    useGetSimilarProductsByUrlQuery(
+      {
+        url: urlToFetch,
+        limit: 20,
+        excluded_product_ids: product?.pk ? [product.pk] : undefined
+      },
+      { skip: !shouldFetchByUrl || !urlToFetch }
+    );
+
+  const [getSimilarProductsByImage, { isLoading: isImageSearchLoading }] =
+    useGetSimilarProductsByImageMutation();
+
+  const [fetchProductsList, { isLoading: isProductsListLoading }] =
+    useLazyGetSimilarProductsListQuery();
+
+  const isLoading =
+    isUrlSearchLoading || isImageSearchLoading || isProductsListLoading;
+
+  const createEmptySearchResults = useCallback(
+    (): SearchResults => ({
+      products: [],
+      facets: [],
+      sorters: [],
+      search_text: null,
+      pagination: {
+        current_page: 1,
+        num_pages: 1,
+        page_size: 20,
+        total_count: 0
+      }
+    }),
+    []
+  );
+
+  const updateResultsAndKey = useCallback((results: SearchResults) => {
+    setSearchResults(results);
+    setResultsKey((prevKey) => prevKey + 1);
+  }, []);
+
+  const buildSearchParams = useCallback(
+    (facets?: Facet[], sortValue?: string, page?: number): SearchParams => {
+      const searchParams: SearchParams = {};
+
+      if (page) {
+        searchParams.page = String(page);
+      }
+
+      if (facets) {
+        facets.forEach((facet) => {
+          if (String(facet.key) === 'category_ids') return;
+
+          const selectedChoices =
+            facet.data?.choices?.filter((choice) => choice.is_selected) || [];
+
+          if (selectedChoices.length > 0) {
+            const values = selectedChoices.map((choice) =>
+              String(choice.value)
+            );
+            const searchKey = String(facet.search_key || facet.key);
+            searchParams[searchKey] = values.join(',');
+          }
+        });
+      }
+
+      if (sortValue) {
+        searchParams.sorter = sortValue;
+      }
+
+      return searchParams;
+    },
+    []
+  );
+
+  const preserveFacetState = useCallback(
+    (responseFacets: Facet[], existingFacets: Facet[]) => {
+      return (
+        responseFacets?.map((responseFacet) => {
+          const existingFacet = existingFacets?.find(
+            (f) => String(f.key) === String(responseFacet.key)
+          );
+          if (existingFacet && responseFacet.data?.choices) {
+            return {
+              ...responseFacet,
+              data: {
+                ...responseFacet.data,
+                choices: responseFacet.data.choices.map((choice) => {
+                  const existingChoice = existingFacet.data?.choices?.find(
+                    (c) => String(c.value) === String(choice.value)
+                  );
+                  return {
+                    ...choice,
+                    is_selected: existingChoice?.is_selected || false
+                  };
+                })
+              }
+            };
+          }
+          return responseFacet;
+        }) ||
+        existingFacets ||
+        []
+      );
+    },
+    []
+  );
+
+  const updateSorterState = useCallback(
+    (sorters: SortOption[], selectedValue: string) => {
+      return (
+        sorters?.map((sorter) => ({
+          ...sorter,
+          is_selected: String(sorter.value) === String(selectedValue)
+        })) || []
+      );
+    },
+    []
+  );
+
+  const sortProducts = useCallback(
+    (products: SearchResults['products'], sortValue: string) => {
+      if (!products || products.length === 0) return products;
+
+      const sortedProducts = [...products];
+
+      switch (sortValue) {
+        case 'price':
+          return sortedProducts.sort((a, b) => {
+            const priceA = parseFloat(String(a.price || '0'));
+            const priceB = parseFloat(String(b.price || '0'));
+            return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
+          });
+        case '-price':
+          return sortedProducts.sort((a, b) => {
+            const priceA = parseFloat(String(a.price || '0'));
+            const priceB = parseFloat(String(b.price || '0'));
+            return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
+          });
+        case 'newcomers':
+          return sortedProducts.sort((a, b) => {
+            const pkA = parseInt(String(a.pk || '0'), 10);
+            const pkB = parseInt(String(b.pk || '0'), 10);
+            return isNaN(pkA) || isNaN(pkB) ? 0 : pkB - pkA;
+          });
+        case 'default':
+        default:
+          return products;
+      }
+    },
+    []
+  );
+
+  const createSearchFilter = useCallback(
+    (filterData: number[] | Record<string, unknown> | unknown) => {
+      let filterObject: Record<string, unknown>;
+
+      if (Array.isArray(filterData)) {
+        filterObject = {
+          'products.pk': filterData,
+          default_sorting_deactivated: true
+        };
+      } else if (typeof filterData === 'object' && filterData !== null) {
+        filterObject = {
+          ...(filterData as Record<string, unknown>),
+          default_sorting_deactivated: true
+        };
+      } else {
+        filterObject = {
+          default_sorting_deactivated: true
+        };
+      }
+
+      const jsonString = JSON.stringify(filterObject);
+      return btoa(jsonString);
+    },
+    []
+  );
+
+  const executeProductSearch = useCallback(
+    async (
+      productIds: number[],
+      searchParams: SearchParams = {},
+      currentSortValue?: string
+    ): Promise<SearchResults | null> => {
+      try {
+        const base64Filter = createSearchFilter(productIds);
+        const result = await fetchProductsList({
+          filter: base64Filter,
+          searchParams,
+          isExclude: false
+        }).unwrap();
+
+        const sortedProducts = currentSortValue
+          ? sortProducts(result.products, currentSortValue)
+          : result.products;
+
+        return {
+          ...result,
+          products: sortedProducts,
+          facets: preserveFacetState(
+            result.facets,
+            searchResults?.facets || []
+          ),
+          sorters: updateSorterState(
+            result.sorters,
+            currentSortValue ||
+              searchResults?.sorters?.find((s) => s.is_selected)?.value ||
+              'default'
+          )
+        };
+      } catch (error) {
+        console.error('Product search failed:', error);
+        return createEmptySearchResults();
+      }
+    },
+    [
+      createSearchFilter,
+      fetchProductsList,
+      sortProducts,
+      preserveFacetState,
+      updateSorterState,
+      searchResults,
+      createEmptySearchResults
+    ]
+  );
+
+  const extractProductIds = useCallback((data: unknown): number[] => {
+    if (!data) return [];
+
+    if (data && typeof data === 'object') {
+      const obj = data as Record<string, unknown>;
+
+      const possibleArrayKeys = [
+        'product_ids',
+        'productIds',
+        'products',
+        'results'
+      ];
+
+      for (const key of possibleArrayKeys) {
+        if (obj[key] && Array.isArray(obj[key])) {
+          const arr = obj[key] as unknown[];
+          const filtered = arr
+            .map((item) => {
+              if (typeof item === 'number') return item;
+              if (typeof item === 'string') {
+                const parsed = parseInt(item, 10);
+                return isNaN(parsed) ? null : parsed;
+              }
+              return null;
+            })
+            .filter((id): id is number => id !== null && id > 0);
+
+          if (filtered.length > 0) return filtered;
+        }
+      }
+
+      if (obj.similar_products && Array.isArray(obj.similar_products)) {
+        return obj.similar_products
+          .map((item) => {
+            if (item && typeof item === 'object' && 'product_id' in item) {
+              const productId = (item as any).product_id;
+              if (typeof productId === 'number') return productId;
+              if (typeof productId === 'string') {
+                const parsed = parseInt(productId, 10);
+                return isNaN(parsed) ? null : parsed;
+              }
+            }
+            return null;
+          })
+          .filter((id): id is number => id !== null && id > 0);
+      }
+    }
+
+    if (Array.isArray(data)) {
+      return data
+        .map((item) => {
+          if (typeof item === 'number') return item;
+          if (typeof item === 'string') {
+            const parsed = parseInt(item, 10);
+            return isNaN(parsed) ? null : parsed;
+          }
+          return null;
+        })
+        .filter((id): id is number => id !== null && id > 0);
+    }
+
+    return [];
+  }, []);
+
+  const handleSearchResults = useCallback(
+    async (data: unknown) => {
+      const productIds = extractProductIds(data);
+
+      if (productIds.length > 0) {
+        const result = await executeProductSearch(productIds);
+        if (result) {
+          const resultWithCorrectSorterState = {
+            ...result,
+            sorters: updateSorterState(result.sorters, 'default')
+          };
+          updateResultsAndKey(resultWithCorrectSorterState);
+        }
+      } else {
+        updateResultsAndKey(createEmptySearchResults());
+      }
+
+      setLastProductIds(productIds);
+    },
+    [
+      extractProductIds,
+      executeProductSearch,
+      updateSorterState,
+      updateResultsAndKey,
+      createEmptySearchResults
+    ]
+  );
+
+  const validateImageFileWithTranslation = useCallback(
+    async (file: File): Promise<ImageValidationResult> => {
+      try {
+        const result = await validateImageFile(file, 5);
+
+        if (!result.isValid) {
+          if (result.error?.includes('size')) {
+            return {
+              isValid: false,
+              error: t('common.similar_products.errors.file_size_too_large')
+            };
+          }
+          if (result.error?.includes('not a valid image')) {
+            return {
+              isValid: false,
+              error: t('common.similar_products.errors.invalid_image_file')
+            };
+          }
+          if (result.error?.includes('format')) {
+            return {
+              isValid: false,
+              error: t('common.similar_products.errors.invalid_image_format')
+            };
+          }
+        }
+
+        return result;
+      } catch (error) {
+        return {
+          isValid: false,
+          error: t('common.similar_products.errors.processing_error')
+        };
+      }
+    },
+    [t]
+  );
+
+  const handleImageSearch = useCallback(
+    async (
+      searchFn: (image: string) => Promise<unknown>,
+      imageData: string,
+      errorPrefix: string
+    ) => {
+      try {
+        const result = await searchFn(imageData);
+        await handleSearchResults(result);
+        return result;
+      } catch (error) {
+        console.error(`${errorPrefix} failed:`, error);
+        setFileError(t('common.similar_products.errors.search_failed'));
+        updateResultsAndKey(createEmptySearchResults());
+        return null;
+      }
+    },
+    [handleSearchResults, updateResultsAndKey, createEmptySearchResults, t]
+  );
+
+  useEffect(() => {
+    if (product?.productimage_set?.length > 0) {
+      const initialImageUrl = product.productimage_set[0].image;
+      setCurrentImageUrl(initialImageUrl);
+    }
+  }, [product]);
+
+  useEffect(() => {
+    if (urlSearchData && shouldFetchByUrl) {
+      handleSearchResults(urlSearchData);
+      setShouldFetchByUrl(false);
+      setUrlToFetch('');
+    }
+  }, [urlSearchData, shouldFetchByUrl, handleSearchResults]);
+
+  const fetchSimilarProductsByImageUrl = useCallback(
+    async (imageUrl: string) => {
+      try {
+        setUrlToFetch(imageUrl);
+        setShouldFetchByUrl(true);
+      } catch (error) {
+        console.error('Image search request failed:', error);
+        setFileError(t('common.similar_products.errors.connection_failed'));
+        updateResultsAndKey(createEmptySearchResults());
+        return null;
+      }
+    },
+    [updateResultsAndKey, createEmptySearchResults, t]
+  );
+
+  const fetchSimilarProductsByBase64 = useCallback(
+    async (base64Image: string) => {
+      const base64Data = base64Image.startsWith('data:')
+        ? base64Image.split(',')[1]
+        : base64Image;
+
+      return handleImageSearch(
+        async () =>
+          getSimilarProductsByImage({
+            image: base64Data,
+            limit: 20
+          }).unwrap(),
+        base64Image,
+        'Image search'
+      );
+    },
+    [getSimilarProductsByImage, handleImageSearch]
+  );
+
+  const fetchSimilarProductsByImageCrop = useCallback(
+    async (base64Image: string) => {
+      const base64Data = base64Image.startsWith('data:')
+        ? base64Image.split(',')[1]
+        : base64Image;
+
+      return handleImageSearch(
+        async () =>
+          getSimilarProductsByImage({
+            image: base64Data,
+            limit: 20,
+            excluded_product_ids: product?.pk ? [product.pk] : undefined
+          }).unwrap(),
+        base64Image,
+        'Image crop search'
+      );
+    },
+    [getSimilarProductsByImage, handleImageSearch, product]
+  );
+
+  const handleFileUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setFileError('');
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const validation = await validateImageFileWithTranslation(file);
+      if (!validation.isValid) {
+        setFileError(validation.error!);
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const dataUrl = e.target?.result as string;
+        setCurrentImageUrl(dataUrl);
+        setHasUploadedImage(true);
+
+        const metadataValidation = await validateImageFromDataUrl(dataUrl);
+        if (!metadataValidation.isValid) {
+          setFileError(
+            t('common.similar_products.errors.invalid_image_properties')
+          );
+          return;
+        }
+        fetchSimilarProductsByBase64(dataUrl);
+      };
+
+      reader.onerror = () =>
+        setFileError(t('common.similar_products.errors.file_read_error'));
+      reader.readAsDataURL(file);
+    } catch (error) {
+      setFileError(t('common.similar_products.errors.processing_error'));
+    }
+  };
+
+  const handleImageCrop = async (base64Image: string) => {
+    setFileError('');
+
+    try {
+      setCurrentImageUrl(base64Image);
+
+      const metadataValidation = await validateImageFromDataUrl(base64Image);
+      if (!metadataValidation.isValid) {
+        setFileError(
+          t('common.similar_products.errors.invalid_image_properties')
+        );
+        return;
+      }
+
+      if (hasUploadedImage) {
+        await fetchSimilarProductsByBase64(base64Image);
+      } else {
+        await fetchSimilarProductsByImageCrop(base64Image);
+      }
+    } catch (error) {
+      setFileError(t('common.similar_products.errors.crop_processing_error'));
+    }
+  };
+
+  const handleSortChange = async (sortValue: string) => {
+    if (lastProductIds.length === 0) return;
+
+    if (searchResults?.sorters) {
+      const updatedSearchResults = {
+        ...searchResults,
+        sorters: updateSorterState(searchResults.sorters, sortValue)
+      };
+      updateResultsAndKey(updatedSearchResults);
+    }
+
+    const searchParams = buildSearchParams(searchResults?.facets, sortValue);
+    const result = await executeProductSearch(
+      lastProductIds,
+      searchParams,
+      sortValue
+    );
+
+    if (result) {
+      updateResultsAndKey(result);
+    }
+  };
+
+  const handlePageChange = async (page: number, sortValue?: string) => {
+    if (lastProductIds.length === 0) return;
+
+    const currentSort =
+      sortValue || searchResults?.sorters?.find((s) => s.is_selected)?.value;
+    const searchParams = buildSearchParams(
+      searchResults?.facets,
+      currentSort,
+      page
+    );
+    const result = await executeProductSearch(
+      lastProductIds,
+      searchParams,
+      currentSort
+    );
+
+    if (result) {
+      updateResultsAndKey(result);
+    }
+  };
+
+  const updateFacetSelection = useCallback(
+    (facetKey: string, choiceValue: string | number, isSelected: boolean) => {
+      if (!searchResults || String(facetKey) === 'category_ids') return null;
+
+      return {
+        ...searchResults,
+        facets:
+          searchResults.facets?.map((facet) => {
+            if (String(facet.key) === String(facetKey)) {
+              return {
+                ...facet,
+                data: {
+                  ...facet.data,
+                  choices:
+                    facet.data?.choices?.map((choice) => {
+                      if (String(choice.value) === String(choiceValue)) {
+                        return { ...choice, is_selected: isSelected };
+                      }
+                      return choice;
+                    }) || []
+                }
+              };
+            }
+            return facet;
+          }) || []
+      };
+    },
+    [searchResults]
+  );
+
+  const handleFacetChange = async (
+    facetKey: string,
+    choiceValue: string | number
+  ) => {
+    if (
+      !searchResults ||
+      lastProductIds.length === 0 ||
+      String(facetKey) === 'category_ids'
+    )
+      return;
+
+    const targetFacet = searchResults.facets?.find(
+      (f) => String(f.key) === String(facetKey)
+    );
+    const targetChoice = targetFacet?.data?.choices?.find(
+      (c) => String(c.value) === String(choiceValue)
+    );
+
+    const updatedSearchResults = updateFacetSelection(
+      facetKey,
+      choiceValue,
+      !(targetChoice?.is_selected || false)
+    );
+
+    if (!updatedSearchResults) return;
+
+    updateResultsAndKey(updatedSearchResults);
+
+    const searchParams = buildSearchParams(updatedSearchResults.facets);
+    const result = await executeProductSearch(lastProductIds, searchParams);
+
+    if (result) {
+      const finalResult = {
+        ...result,
+        facets: preserveFacetState(result.facets, updatedSearchResults.facets)
+      };
+      updateResultsAndKey(finalResult);
+    }
+  };
+
+  const removeFacetFilter = async (
+    facetKey: string,
+    choiceValue: string | number
+  ) => {
+    if (
+      !searchResults ||
+      lastProductIds.length === 0 ||
+      String(facetKey) === 'category_ids'
+    )
+      return;
+
+    const updatedSearchResults = updateFacetSelection(
+      facetKey,
+      choiceValue,
+      false
+    );
+    if (!updatedSearchResults) return;
+
+    const searchParams = buildSearchParams(updatedSearchResults.facets);
+    const result = await executeProductSearch(lastProductIds, searchParams);
+
+    if (result) {
+      const finalResult = {
+        ...result,
+        facets: preserveFacetState(result.facets, updatedSearchResults.facets)
+      };
+      updateResultsAndKey(finalResult);
+    }
+  };
+
+  const clearError = useCallback(() => {
+    setFileError('');
+  }, []);
+
+  const clearFileInput = useCallback(
+    (fileInputRef: React.RefObject<HTMLInputElement>) => {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    },
+    []
+  );
+
+  return {
+    currentImageUrl,
+    setCurrentImageUrl,
+    isLoading,
+    fileError,
+    searchResults,
+    resultsKey,
+    hasUploadedImage,
+    setHasUploadedImage,
+    handleFileUpload,
+    handleImageCrop,
+    fetchSimilarProductsByImageUrl,
+    fetchSimilarProductsByBase64,
+    fetchSimilarProductsByImageCrop,
+    handleSortChange,
+    handlePageChange,
+    handleFacetChange,
+    removeFacetFilter,
+    clearError,
+    clearFileInput
+  };
+}