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

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@akinon/pz-similar-products",
+  "version": "1.92.0-rc.16",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "react-image-crop": "^11.0.5",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "typescript": "^5.2.2"
+  }
+}

package/src/data/endpoints.ts

@@ -0,0 +1,122 @@
+import { api } from '@akinon/next/data/client/api';
+import {
+  Product,
+  Facet,
+  FacetChoice,
+  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 const similarProductsApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getSimilarProductsByUrl: build.query<
+      SimilarProductsResponse,
+      { url: string; limit?: number; excluded_product_ids?: number[] }
+    >({
+      query: ({ url, limit = 20, excluded_product_ids }) => {
+        const params = new URLSearchParams();
+        params.append('limit', String(limit));
+        params.append('url', url);
+
+        if (excluded_product_ids && excluded_product_ids.length > 0) {
+          params.append('excluded_product_ids', excluded_product_ids.join(','));
+        }
+
+        return {
+          url: `/api/similar-products?${params.toString()}`,
+          method: 'GET',
+          headers: {
+            Accept: 'application/json'
+          }
+        };
+      }
+    }),
+
+    getSimilarProductsByImage: build.mutation<
+      SimilarProductsResponse,
+      { image: string; limit?: number; excluded_product_ids?: number[] }
+    >({
+      query: ({ image, limit = 20, excluded_product_ids }) => {
+        const params = new URLSearchParams();
+        params.append('limit', String(limit));
+
+        return {
+          url: `/api/similar-products?${params.toString()}`,
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+          },
+          body: JSON.stringify({ image, excluded_product_ids })
+        };
+      }
+    }),
+
+    getSimilarProductsList: build.query<
+      SimilarProductsListResponse,
+      {
+        filter: string;
+        searchParams?: Record<string, string>;
+        isExclude?: boolean;
+      }
+    >({
+      query: ({ filter, searchParams = {}, isExclude = false }) => {
+        const params = new URLSearchParams(searchParams);
+        const queryString = params.toString();
+
+        const headerName = isExclude
+          ? 'x-search-dynamic-exclude'
+          : 'x-search-dynamic-filter';
+
+        return {
+          url: `/api/similar-product-list?${queryString}`,
+          headers: {
+            [headerName]: filter
+          }
+        };
+      },
+      serializeQueryArgs: ({ queryArgs }) => {
+        const { filter, searchParams = {}, isExclude = false } = queryArgs;
+        const sortedParams = Object.keys(searchParams)
+          .sort()
+          .reduce((acc, key) => {
+            acc[key] = searchParams[key];
+            return acc;
+          }, {} as Record<string, string>);
+
+        return JSON.stringify({
+          filter,
+          searchParams: sortedParams,
+          isExclude
+        });
+      }
+    })
+  }),
+  overrideExisting: true
+});
+
+export const {
+  useGetSimilarProductsByUrlQuery,
+  useLazyGetSimilarProductsByUrlQuery,
+  useGetSimilarProductsByImageMutation,
+  useGetSimilarProductsListQuery,
+  useLazyGetSimilarProductsListQuery
+} = similarProductsApi;
+
+export type { Product, Facet, FacetChoice, SortOption, Pagination };

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useSimilarProducts } from './use-similar-products';
+export { useImageCropper } from './use-image-cropper';
+export { useImageSearchFeature } from './use-image-search-feature';

package/src/hooks/use-image-cropper.ts

@@ -0,0 +1,264 @@
+import { useState, useRef, useCallback } from 'react';
+import 'react-image-crop/dist/ReactCrop.css';
+
+type CropType = {
+  unit: 'px' | '%';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export function useImageCropper(
+  setIsLoading: (loading: boolean) => void,
+  processImage: (base64: string) => void,
+  clearError?: () => void
+) {
+  const [isCropping, setIsCropping] = useState(false);
+  const [crop, setCrop] = useState<CropType>({
+    unit: 'px',
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100
+  });
+  const [completedCrop, setCompletedCrop] = useState<CropType | null>(null);
+  const [cropProcessed, setCropProcessed] = useState(false);
+  const [lastSuccessfulCrop, setLastSuccessfulCrop] = useState<CropType | null>(
+    null
+  );
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const imageRef = useRef<HTMLImageElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleCropComplete = (c: any) => {
+    setCompletedCrop(c);
+  };
+
+  const toggleCropMode = () => {
+    const newCroppingState = !isCropping;
+    setIsCropping(newCroppingState);
+
+    if (newCroppingState && clearError) {
+      clearError();
+    }
+
+    if (newCroppingState) {
+      setCropProcessed(false);
+      if (completedCrop?.width && completedCrop?.height) {
+        setCrop(completedCrop);
+      } else {
+        const centeredCrop: CropType = {
+          unit: '%',
+          x: 25,
+          y: 25,
+          width: 50,
+          height: 50
+        };
+        setCrop(centeredCrop);
+      }
+    } else {
+      if (!cropProcessed) {
+        setCompletedCrop(lastSuccessfulCrop);
+      }
+    }
+  };
+
+  const processCompletedCropImmediate = async (crop: any) => {
+    if (!imageRef.current || !crop?.width || !crop?.height) {
+      setIsLoading(false);
+      return;
+    }
+
+    if (clearError) {
+      clearError();
+    }
+
+    try {
+      const canvas = document.createElement('canvas');
+      const image = imageRef.current;
+
+      const scaleX = image.naturalWidth / image.width;
+      const scaleY = image.naturalHeight / image.height;
+
+      canvas.width = crop.width * scaleX;
+      canvas.height = crop.height * scaleY;
+
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        setIsLoading(false);
+        throw new Error('No 2d context');
+      }
+
+      try {
+        ctx.drawImage(
+          image,
+          crop.x * scaleX,
+          crop.y * scaleY,
+          crop.width * scaleX,
+          crop.height * scaleY,
+          0,
+          0,
+          crop.width * scaleX,
+          crop.height * scaleY
+        );
+
+        const base64Image = canvas.toDataURL('image/jpeg');
+        processImage(base64Image);
+        setCropProcessed(true);
+        setLastSuccessfulCrop(crop);
+        setIsLoading(false);
+      } catch (canvasError) {
+        try {
+          const originalUrl = image.src;
+          const proxyUrl = `/api/image-proxy?url=${encodeURIComponent(
+            originalUrl
+          )}`;
+
+          const proxiedImg = new window.Image();
+
+          proxiedImg.onload = () => {
+            try {
+              const corsCanvas = document.createElement('canvas');
+              corsCanvas.width = crop.width * scaleX;
+              corsCanvas.height = crop.height * scaleY;
+
+              const corsCtx = corsCanvas.getContext('2d');
+              if (!corsCtx) {
+                throw new Error('No 2d context for proxy canvas');
+              }
+
+              corsCtx.drawImage(
+                proxiedImg,
+                crop.x * scaleX,
+                crop.y * scaleY,
+                crop.width * scaleX,
+                crop.height * scaleY,
+                0,
+                0,
+                crop.width * scaleX,
+                crop.height * scaleY
+              );
+
+              const base64Image = corsCanvas.toDataURL('image/jpeg');
+              processImage(base64Image);
+              setCropProcessed(true);
+              setLastSuccessfulCrop(crop);
+            } catch (proxyError) {
+              console.error(
+                'Proxy image processing failed, using URL fallback:',
+                proxyError
+              );
+
+              const fallbackData = JSON.stringify({
+                type: 'cors_fallback',
+                originalUrl,
+                crop: {
+                  x: crop.x,
+                  y: crop.y,
+                  width: crop.width,
+                  height: crop.height
+                },
+                scale: { x: scaleX, y: scaleY }
+              });
+
+              const fallbackString =
+                'data:application/x-cors-fallback;base64,' + btoa(fallbackData);
+              processImage(fallbackString);
+              setCropProcessed(true);
+              setLastSuccessfulCrop(crop);
+            } finally {
+              setIsLoading(false);
+            }
+          };
+
+          proxiedImg.onerror = (error) => {
+            console.error(
+              'Proxy image loading failed, using URL fallback:',
+              error
+            );
+
+            const fallbackData = JSON.stringify({
+              type: 'cors_fallback',
+              originalUrl,
+              crop: {
+                x: crop.x,
+                y: crop.y,
+                width: crop.width,
+                height: crop.height
+              },
+              scale: { x: scaleX, y: scaleY }
+            });
+
+            const fallbackString =
+              'data:application/x-cors-fallback;base64,' + btoa(fallbackData);
+            processImage(fallbackString);
+            setCropProcessed(true);
+            setLastSuccessfulCrop(crop);
+            setIsLoading(false);
+          };
+
+          proxiedImg.src = proxyUrl;
+        } catch (proxyError) {
+          console.error('Image proxy setup failed:', proxyError);
+          setIsLoading(false);
+        }
+      }
+    } catch (error) {
+      console.error('processCompletedCrop failed:', error);
+      setIsLoading(false);
+    }
+  };
+
+  const processCompletedCrop = useCallback((crop: any) => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    debounceTimeoutRef.current = setTimeout(() => {
+      processCompletedCropImmediate(crop);
+    }, 250);
+  }, []);
+
+  const processManualCrop = useCallback((crop: any) => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+    processCompletedCropImmediate(crop);
+  }, []);
+
+  const resetCrop = () => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    setIsCropping(false);
+    setCompletedCrop(null);
+    setCropProcessed(false);
+    setLastSuccessfulCrop(null);
+    setCrop({
+      unit: 'px',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100
+    });
+  };
+
+  return {
+    isCropping,
+    crop,
+    setCrop,
+    completedCrop,
+    setCompletedCrop,
+    imageRef,
+    fileInputRef,
+    handleCropComplete,
+    toggleCropMode,
+    processCompletedCrop,
+    processManualCrop,
+    resetCrop
+  };
+}

package/src/hooks/use-image-search-feature.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+const IMAGE_SEARCH_STORAGE_KEY = 'enable_image_search';
+
+export function useImageSearchFeature() {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
+
+    if (envEnabled) {
+      setIsEnabled(true);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const localStorageValue = localStorage.getItem(IMAGE_SEARCH_STORAGE_KEY);
+      setIsEnabled(localStorageValue === 'true');
+    } catch (error) {
+      setIsEnabled(false);
+    }
+
+    setIsLoading(false);
+  }, []);
+
+  return {
+    isEnabled,
+    isLoading
+  };
+}