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

package/src/views/header-image-search-feature.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { Product } from '@akinon/next/types';
+import { useImageSearchFeature } from '../hooks/use-image-search-feature';
+import { ImageSearchButton } from './image-search-button';
+import { SimilarProductsPlugin } from './main';
+
+interface HeaderImageSearchFeatureProps {
+  className?: string;
+}
+
+export function HeaderImageSearchFeature({
+  className
+}: HeaderImageSearchFeatureProps) {
+  const { isEnabled, isLoading } = useImageSearchFeature();
+
+  const [isImageSearchModalOpen, setIsImageSearchModalOpen] = useState(false);
+  const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
+  const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
+
+  if (isLoading || !isEnabled) {
+    return null;
+  }
+
+  const handleOpenImageSearch = () => {
+    setIsImageSearchModalOpen(true);
+  };
+
+  const handleImageUpload = (file: File) => {
+    setUploadedImageFile(file);
+    setIsImageSearchModalOpen(false);
+    setIsResultsModalOpen(true);
+  };
+
+  const handleResultsModalClose = () => {
+    setIsResultsModalOpen(false);
+    setUploadedImageFile(null);
+  };
+
+  const handleImageSearchModalClose = () => {
+    setIsImageSearchModalOpen(false);
+  };
+
+  return (
+    <>
+      {isEnabled && (
+        <>
+          <ImageSearchButton
+            onClick={handleOpenImageSearch}
+            className={className}
+          />
+          <SimilarProductsPlugin
+            product={{} as Product}
+            isOpen={isResultsModalOpen}
+            onClose={handleResultsModalClose}
+            activeIndex={0}
+            showImageSearchModal={isImageSearchModalOpen}
+            onImageSearchModalClose={handleImageSearchModalClose}
+            uploadedImageFile={uploadedImageFile}
+            onImageUpload={handleImageUpload}
+            showResetButton={false}
+          />
+        </>
+      )}
+    </>
+  );
+}

package/src/views/image-search-button.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { useImageSearchFeature } from '../hooks/use-image-search-feature';
+
+interface ImageSearchButtonProps {
+  onClick: () => void;
+  className?: string;
+}
+
+export function ImageSearchButton({
+  onClick,
+  className
+}: ImageSearchButtonProps) {
+  const { t } = useLocalization();
+  const { isEnabled, isLoading } = useImageSearchFeature();
+
+  if (isLoading || !isEnabled) {
+    return null;
+  }
+
+  return (
+    <Button
+      onClick={onClick}
+      className={`flex items-center justify-center mr-2 text-gray-500 focus:outline-none border-none bg-transparent ${className || ''}`}
+      title={t('common.search.image_search.title')}
+    >
+      <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>
+    </Button>
+  );
+}

package/src/views/image-search.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { Modal, Button, Input } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface ImageSearchModalProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  fileInputRef: React.RefObject<HTMLInputElement>;
+  handleImageFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  className?: string;
+  clearError?: () => void;
+}
+
+const convertWebPToJPEG = (file: File): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = () => {
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+
+      if (!ctx) {
+        reject(new Error('Canvas context not available'));
+        return;
+      }
+
+      ctx.drawImage(img, 0, 0);
+
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error('Failed to convert image'));
+            return;
+          }
+
+          const convertedFile = new File(
+            [blob],
+            file.name.replace(/\.webp$/i, '.jpg'),
+            {
+              type: 'image/jpeg',
+              lastModified: Date.now()
+            }
+          );
+
+          resolve(convertedFile);
+        },
+        'image/jpeg',
+        0.9
+      );
+    };
+
+    img.onerror = () => reject(new Error('Failed to load image'));
+    img.src = URL.createObjectURL(file);
+  });
+};
+
+export function ImageSearchModal({
+  isOpen,
+  setIsOpen,
+  fileInputRef,
+  handleImageFileChange,
+  className,
+  clearError
+}: ImageSearchModalProps) {
+  const { t } = useLocalization();
+
+  useEffect(() => {
+    if (isOpen && clearError) {
+      clearError();
+    }
+  }, [isOpen, clearError]);
+
+  const handleFileSelect = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+
+    if (!file) return;
+
+    if (file.type === 'image/webp') {
+      try {
+        const convertedFile = await convertWebPToJPEG(file);
+
+        const modifiedEvent = {
+          ...event,
+          target: {
+            ...event.target,
+            files: [convertedFile] as any
+          }
+        };
+
+        handleImageFileChange(
+          modifiedEvent as React.ChangeEvent<HTMLInputElement>
+        );
+      } catch (error) {
+        console.error('WebP conversion failed:', error);
+
+        handleImageFileChange(event);
+      }
+    } else {
+      handleImageFileChange(event);
+    }
+  };
+
+  return (
+    <Modal
+      portalId="image-search-modal"
+      title={t('common.search.image_search.title')}
+      open={isOpen}
+      setOpen={setIsOpen}
+      className={`w-full max-w-2xl max-h-[90vh] overflow-auto ${className || ''}`}
+    >
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="md:col-span-1 p-4">
+          <p className="mb-4 text-lg font-medium">
+            {t('common.search.image_search.upload_image')}
+          </p>
+          <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+            <Input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileSelect}
+              accept="image/*"
+              className="hidden"
+            />
+            <Button
+              className="w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              {t('common.search.image_search.select_image')}
+            </Button>
+          </div>
+        </div>
+        <div className="md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4">
+          <p className="mb-2 font-medium">
+            {t('common.search.image_search.best_results')}
+          </p>
+          <ul className="text-left list-disc pl-5 text-sm text-gray-600">
+            <li className="mb-2">{t('common.search.image_search.tip_1')}</li>
+            <li className="mb-2">{t('common.search.image_search.tip_2')}</li>
+            <li className="mb-2">{t('common.search.image_search.tip_3')}</li>
+            <li className="mb-2">{t('common.search.image_search.tip_4')}</li>
+          </ul>
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/views/main.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Product } from '@akinon/next/types';
+import { useImageCropper } from '../hooks/use-image-cropper';
+import { SimilarProductsModal } from './search-modal';
+import { ImageSearchModal } from './image-search';
+import { useSimilarProducts } from '../hooks/use-similar-products';
+import { mergeSettings } from '../utils';
+
+interface SimilarProductsPluginProps {
+  product: Product;
+  isOpen?: boolean;
+  onClose?: () => void;
+  activeIndex?: number;
+  settings?: any;
+  showImageSearchModal?: boolean;
+  onImageSearchModalClose?: () => void;
+  uploadedImageFile?: File | null;
+  onImageUpload?: (file: File) => void;
+  showResetButton?: boolean;
+}
+
+export function SimilarProductsPlugin({
+  product,
+  isOpen = false,
+  onClose = () => {},
+  activeIndex = 0,
+  settings: userSettings,
+  showImageSearchModal = false,
+  onImageSearchModalClose = () => {},
+  uploadedImageFile = null,
+  onImageUpload = () => {},
+  showResetButton = true
+}: SimilarProductsPluginProps) {
+  const settings = mergeSettings(userSettings);
+  const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    currentImageUrl,
+    setCurrentImageUrl,
+    isLoading,
+    fileError,
+    searchResults,
+    resultsKey,
+    hasUploadedImage,
+    setHasUploadedImage,
+    handleFileUpload,
+    handleSortChange,
+    handlePageChange,
+    handleFacetChange,
+    removeFacetFilter,
+    handleLoadMore,
+    loadedPages,
+    fetchSimilarProductsByImageUrl,
+    fetchSimilarProductsByImageCrop,
+    clearError
+  } = useSimilarProducts(product);
+
+  const {
+    isCropping,
+    crop,
+    setCrop,
+    completedCrop,
+    setCompletedCrop,
+    imageRef,
+    handleCropComplete,
+    toggleCropMode,
+    processCompletedCrop,
+    processManualCrop,
+    resetCrop
+  } = useImageCropper(
+    (loading) => {},
+    fetchSimilarProductsByImageCrop,
+    clearError
+  );
+
+  const handleResetToOriginal = () => {
+    if (product?.productimage_set?.length > 0) {
+      const originalImageUrl =
+        product.productimage_set[activeIndex]?.image ||
+        product.productimage_set[0].image;
+      setCurrentImageUrl(originalImageUrl);
+      setHasUploadedImage(false);
+      resetCrop();
+      fetchSimilarProductsByImageUrl(originalImageUrl);
+    }
+  };
+
+  const [hasInitialSearchDone, setHasInitialSearchDone] = useState(false);
+
+  useEffect(() => {
+    if (
+      isOpen &&
+      product?.productimage_set?.length > 0 &&
+      !hasUploadedImage &&
+      !hasInitialSearchDone
+    ) {
+      const initialImageUrl =
+        product.productimage_set[activeIndex]?.image ||
+        product.productimage_set[0].image;
+      fetchSimilarProductsByImageUrl(initialImageUrl);
+      setHasInitialSearchDone(true);
+    }
+
+    if (!isOpen) {
+      setHasInitialSearchDone(false);
+      clearError();
+    }
+  }, [
+    isOpen,
+    product?.productimage_set?.length,
+    activeIndex,
+    hasUploadedImage,
+    hasInitialSearchDone,
+    clearError
+  ]);
+
+  useEffect(() => {
+    if (uploadedImageFile && isOpen) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const result = e.target?.result as string;
+        if (result) {
+          setCurrentImageUrl(result);
+          setHasUploadedImage(true);
+          fetchSimilarProductsByImageCrop(result);
+        }
+      };
+      reader.readAsDataURL(uploadedImageFile);
+    }
+  }, [uploadedImageFile, isOpen]);
+
+  const handleImageSearchFileChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onImageUpload(file);
+    }
+  };
+
+  const ModalComponent =
+    settings.customRenderers?.Modal || SimilarProductsModal;
+  const ImageSearchModalComponent =
+    settings.customRenderers?.ImageSearchModal || ImageSearchModal;
+
+  return (
+    <>
+      <ModalComponent
+        isOpen={isOpen}
+        onClose={onClose}
+        searchResults={searchResults}
+        resultsKey={resultsKey}
+        isLoading={isLoading}
+        isFilterMenuOpen={isFilterMenuOpen}
+        setIsFilterMenuOpen={setIsFilterMenuOpen}
+        handleSortChange={handleSortChange}
+        handlePageChange={handlePageChange}
+        handleFacetChange={handleFacetChange}
+        removeFacetFilter={removeFacetFilter}
+        handleLoadMore={handleLoadMore}
+        loadedPages={loadedPages}
+        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}
+        activeIndex={activeIndex}
+        hasUploadedImage={hasUploadedImage}
+        handleFileUpload={handleFileUpload}
+        handleResetToOriginal={handleResetToOriginal}
+        fileError={fileError}
+        settings={settings}
+        className={settings.customStyles?.modal}
+        showResetButton={showResetButton}
+      />
+
+      <ImageSearchModalComponent
+        isOpen={showImageSearchModal}
+        setIsOpen={onImageSearchModalClose}
+        fileInputRef={fileInputRef}
+        handleImageFileChange={handleImageSearchFileChange}
+        className={settings.customStyles?.imageSearchModal}
+        clearError={clearError}
+      />
+    </>
+  );
+}

package/src/views/product-image-search-feature.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Product } from '@akinon/next/types';
+import { SimilarProductsButton } from './search-button';
+import { SimilarProductsPlugin } from './main';
+import { mergeSettings } from '../utils';
+import { useImageSearchFeature } from '../hooks/use-image-search-feature';
+
+interface ProductImageSearchFeatureProps {
+  product: Product;
+  activeIndex?: number;
+  settings?: any;
+  className?: string;
+}
+
+export function ProductImageSearchFeature({
+  product,
+  activeIndex = 0,
+  settings: userSettings,
+  className = 'absolute top-6 left-6 z-[20]'
+}: ProductImageSearchFeatureProps) {
+  const settings = mergeSettings(userSettings);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { isEnabled } = useImageSearchFeature();
+
+  const handleClick = () => {
+    setIsModalOpen(true);
+  };
+
+  return (
+    <>
+      {isEnabled && (
+        <>
+          <SimilarProductsButton onClick={handleClick} className={className} />
+
+          <SimilarProductsPlugin
+            product={product}
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            activeIndex={activeIndex}
+            settings={settings}
+          />
+        </>
+      )}
+    </>
+  );
+}