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

package/src/views/results.tsx

@@ -0,0 +1,591 @@
+'use client';
+
+import React from 'react';
+import { LoaderSpinner } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { ResultsGridProps } from '../types';
+import { twMerge } from 'tailwind-merge';
+import dynamic from 'next/dynamic';
+
+const ProductItem = dynamic(
+  () => import('@theme/views/product-item').then((mod) => mod.ProductItem),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-64 bg-gray-100 animate-pulse rounded"></div>
+    )
+  }
+);
+
+export function SimilarProductsResultsGrid({
+  searchResults,
+  resultsKey,
+  isLoading,
+  handlePageChange,
+  handleLoadMore,
+  loadedPages,
+  settings,
+  className
+}: ResultsGridProps) {
+  const { t } = useLocalization();
+
+  const onPageChange = (page: number) => {
+    handlePageChange(page);
+  };
+
+  const gridClassName = twMerge(
+    'flex-1 flex flex-col p-3 md:p-4 overflow-y-auto relative',
+    className
+  );
+
+  if (settings?.customRenderers?.render?.resultsGrid?.renderGrid) {
+    return settings.customRenderers.render.resultsGrid.renderGrid({
+      searchResults,
+      resultsKey,
+      isLoading,
+      handlePageChange,
+      handleLoadMore,
+      loadedPages,
+      settings,
+      className: gridClassName
+    });
+  }
+
+  const renderLoadingState = () => {
+    if (settings?.customRenderers?.render?.resultsGrid?.renderLoadingState) {
+      return settings.customRenderers.render.resultsGrid.renderLoadingState();
+    }
+
+    const loadingStateClassName = twMerge(
+      'flex-1 flex justify-center items-center p-3 md:p-4',
+      settings?.customStyles?.loadingSpinner
+    );
+
+    const loadingSpinnerClassName = twMerge(
+      'h-8 w-8',
+      settings?.customStyles?.loadingSpinner
+    );
+
+    return (
+      <div className={loadingStateClassName}>
+        <LoaderSpinner className={loadingSpinnerClassName} />
+      </div>
+    );
+  };
+
+  const renderEmptyState = () => {
+    if (settings?.customRenderers?.render?.resultsGrid?.renderEmptyState) {
+      return settings.customRenderers.render.resultsGrid.renderEmptyState();
+    }
+
+    const emptyStateClassName = twMerge(
+      'flex-1 flex flex-col justify-center items-center',
+      settings?.customStyles?.emptyState
+    );
+
+    const emptyStateIconClassName = twMerge(
+      'mx-auto h-24 w-24 text-gray-400 mb-4',
+      settings?.customStyles?.emptyStateIcon
+    );
+
+    const emptyStateTextClassName = twMerge(
+      'text-lg font-medium text-gray-900 mb-2',
+      settings?.customStyles?.emptyStateText
+    );
+
+    return (
+      <div className={emptyStateClassName}>
+        <div className="text-center">
+          <svg
+            className={emptyStateIconClassName}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1}
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+          <h3 className={emptyStateTextClassName}>
+            {t('common.product.no_products')}
+          </h3>
+        </div>
+      </div>
+    );
+  };
+
+  const renderProductItem = (product: any, index: number) => {
+    if (settings?.customRenderers?.render?.resultsGrid?.renderProductItem) {
+      return settings.customRenderers.render.resultsGrid.renderProductItem({
+        product,
+        index
+      });
+    }
+
+    const productItemClassName = twMerge(
+      'product-item',
+      settings?.customStyles?.productItem
+    );
+
+    const renderProductImage = () => {
+      if (settings?.customRenderers?.render?.resultsGrid?.renderProductImage) {
+        return settings.customRenderers.render.resultsGrid.renderProductImage({
+          product,
+          imageUrl: product.productimage_set?.[0]?.image || '',
+          alt: product.name,
+          index
+        });
+      }
+      return null;
+    };
+
+    const renderProductInfo = () => {
+      if (settings?.customRenderers?.render?.resultsGrid?.renderProductInfo) {
+        return settings.customRenderers.render.resultsGrid.renderProductInfo({
+          product,
+          index
+        });
+      }
+      return null;
+    };
+
+    const renderProductTitle = () => {
+      if (settings?.customRenderers?.render?.resultsGrid?.renderProductTitle) {
+        return settings.customRenderers.render.resultsGrid.renderProductTitle({
+          product,
+          title: product.name
+        });
+      }
+      return null;
+    };
+
+    const renderProductPrice = () => {
+      if (settings?.customRenderers?.render?.resultsGrid?.renderProductPrice) {
+        return settings.customRenderers.render.resultsGrid.renderProductPrice({
+          product,
+          price: product.price,
+          oldPrice: product.old_price
+        });
+      }
+      return null;
+    };
+
+    if (
+      renderProductImage() ||
+      renderProductInfo() ||
+      renderProductTitle() ||
+      renderProductPrice()
+    ) {
+      const productImageWrapperClassName = twMerge(
+        'product-image-wrapper',
+        settings?.customStyles?.productImageWrapper
+      );
+
+      const productImageClassName = twMerge(
+        'product-image',
+        settings?.customStyles?.productImage
+      );
+
+      const productInfoClassName = twMerge(
+        'product-info',
+        settings?.customStyles?.productInfo
+      );
+
+      const productTitleClassName = twMerge(
+        'product-title',
+        settings?.customStyles?.productTitle
+      );
+
+      const productPriceClassName = twMerge(
+        'product-price',
+        settings?.customStyles?.productPrice
+      );
+
+      const productOldPriceClassName = twMerge(
+        'product-old-price',
+        settings?.customStyles?.productOldPrice
+      );
+
+      return (
+        <div key={product.pk} className={productItemClassName}>
+          {renderProductImage() || (
+            <div className={productImageWrapperClassName}>
+              <img
+                src={product.productimage_set?.[0]?.image}
+                alt={product.name}
+                className={productImageClassName}
+              />
+            </div>
+          )}
+
+          {renderProductInfo() || (
+            <div className={productInfoClassName}>
+              {renderProductTitle() || (
+                <h3 className={productTitleClassName}>{product.name}</h3>
+              )}
+
+              {renderProductPrice() || (
+                <div className="price-container">
+                  <span className={productPriceClassName}>
+                    {product.price} ₺
+                  </span>
+                  {product.old_price && (
+                    <span className={productOldPriceClassName}>
+                      {product.old_price} ₺
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div key={product.pk} className={productItemClassName}>
+        <ProductItem product={product} width={340} height={510} index={index} />
+      </div>
+    );
+  };
+
+  const renderLoadMore = () => {
+    if (!searchResults?.pagination || !handleLoadMore) return null;
+
+    const hasMore =
+      searchResults.pagination.current_page <
+      searchResults.pagination.num_pages;
+    if (!hasMore) return null;
+
+    if (settings?.customRenderers?.render?.resultsGrid?.renderLoadMore) {
+      return settings.customRenderers.render.resultsGrid.renderLoadMore({
+        onLoadMore: handleLoadMore,
+        hasMore,
+        isLoading,
+        currentPage: searchResults.pagination.current_page,
+        totalPages: searchResults.pagination.num_pages,
+        loadedPages: loadedPages?.length || 1
+      });
+    }
+
+    const loadMoreContainerClassName = twMerge(
+      'flex justify-center items-center mt-8',
+      settings?.customStyles?.loadMoreContainer
+    );
+
+    const renderLoadMoreButton = () => {
+      if (
+        settings?.customRenderers?.render?.resultsGrid?.renderLoadMoreButton
+      ) {
+        return settings.customRenderers.render.resultsGrid.renderLoadMoreButton(
+          {
+            onClick: handleLoadMore,
+            disabled: isLoading,
+            isLoading,
+            text: settings?.loadMoreText || 'Load More'
+          }
+        );
+      }
+
+      const loadMoreButtonClassName = twMerge(
+        'px-8 py-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+        settings?.customStyles?.loadMoreButton
+      );
+
+      return (
+        <button
+          onClick={handleLoadMore}
+          disabled={isLoading}
+          className={loadMoreButtonClassName}
+        >
+          {isLoading ? (
+            <div className="flex items-center space-x-2">
+              <LoaderSpinner className="h-4 w-4" />
+              <span>Loading...</span>
+            </div>
+          ) : (
+            settings?.loadMoreText || 'Load More'
+          )}
+        </button>
+      );
+    };
+
+    return (
+      <div className={loadMoreContainerClassName}>{renderLoadMoreButton()}</div>
+    );
+  };
+
+  const renderPagination = () => {
+    if (!searchResults?.pagination || searchResults.pagination.num_pages <= 1) {
+      return null;
+    }
+
+    if (
+      settings?.paginationType === 'load-more' ||
+      settings?.paginationType === 'infinite-scroll'
+    ) {
+      return renderLoadMore();
+    }
+
+    if (settings?.customRenderers?.render?.resultsGrid?.renderPagination) {
+      return settings.customRenderers.render.resultsGrid.renderPagination({
+        pagination: searchResults.pagination,
+        onPageChange,
+        isLoading
+      });
+    }
+
+    const paginationContainerClassName = twMerge(
+      'mb-4 mt-8 flex items-center justify-center',
+      settings?.customStyles?.paginationContainer
+    );
+
+    const paginationInfoClassName = twMerge(
+      'pagination-info',
+      settings?.customStyles?.paginationInfo
+    );
+
+    const renderPaginationInfo = () => {
+      if (
+        settings?.customRenderers?.render?.resultsGrid?.renderPaginationInfo
+      ) {
+        return settings.customRenderers.render.resultsGrid.renderPaginationInfo(
+          {
+            currentPage: searchResults.pagination.current_page,
+            totalPages: searchResults.pagination.num_pages,
+            totalCount: searchResults.pagination.total_count || 0
+          }
+        );
+      }
+      return null;
+    };
+
+    const renderPaginationPrevious = () => {
+      if (searchResults.pagination.current_page <= 1) return null;
+
+      if (
+        settings?.customRenderers?.render?.resultsGrid?.renderPaginationPrevious
+      ) {
+        return settings.customRenderers.render.resultsGrid.renderPaginationPrevious(
+          {
+            onClick: () =>
+              onPageChange(searchResults.pagination.current_page - 1),
+            disabled: isLoading
+          }
+        );
+      }
+
+      const paginationPreviousClassName = twMerge(
+        'flex cursor-pointer px-2 text-sm items-center disabled:opacity-50 disabled:cursor-not-allowed',
+        settings?.customStyles?.paginationPrevious
+      );
+
+      return (
+        <li>
+          <button
+            onClick={() =>
+              onPageChange(searchResults.pagination.current_page - 1)
+            }
+            disabled={isLoading}
+            className={paginationPreviousClassName}
+          >
+            <span>&lt;</span>
+            <span className="ms-4 hidden lg:inline-block">
+              {t('category.pagination.previous')}
+            </span>
+          </button>
+        </li>
+      );
+    };
+
+    const renderPaginationNext = () => {
+      if (
+        searchResults.pagination.current_page >=
+        searchResults.pagination.num_pages
+      )
+        return null;
+
+      if (
+        settings?.customRenderers?.render?.resultsGrid?.renderPaginationNext
+      ) {
+        return settings.customRenderers.render.resultsGrid.renderPaginationNext(
+          {
+            onClick: () =>
+              onPageChange(searchResults.pagination.current_page + 1),
+            disabled: isLoading
+          }
+        );
+      }
+
+      const paginationNextClassName = twMerge(
+        'flex cursor-pointer px-2 text-xs items-center disabled:opacity-50 disabled:cursor-not-allowed',
+        settings?.customStyles?.paginationNext
+      );
+
+      return (
+        <li>
+          <button
+            onClick={() =>
+              onPageChange(searchResults.pagination.current_page + 1)
+            }
+            disabled={isLoading}
+            className={paginationNextClassName}
+          >
+            <span className="me-4 hidden lg:inline-block">
+              {t('category.pagination.next')}
+            </span>
+            <span>&gt;</span>
+          </button>
+        </li>
+      );
+    };
+
+    const renderPaginationButton = (pageNum: number) => {
+      const isCurrentPage = pageNum === searchResults.pagination.current_page;
+
+      if (
+        settings?.customRenderers?.render?.resultsGrid?.renderPaginationButton
+      ) {
+        return settings.customRenderers.render.resultsGrid.renderPaginationButton(
+          {
+            page: pageNum,
+            isActive: isCurrentPage,
+            isDisabled: isLoading || isCurrentPage,
+            onClick: () => onPageChange(pageNum),
+            children: pageNum
+          }
+        );
+      }
+
+      const paginationButtonClassName = twMerge(
+        `cursor-pointer px-2 text-xs items-center disabled:cursor-not-allowed`,
+        isCurrentPage
+          ? 'font-semibold text-black-800'
+          : 'text-gray-400 hover:text-gray-600',
+        settings?.customStyles?.paginationButton
+      );
+
+      const activeButtonClassName = twMerge(
+        paginationButtonClassName,
+        isCurrentPage ? settings?.customStyles?.paginationButtonActive : ''
+      );
+
+      const disabledButtonClassName = twMerge(
+        activeButtonClassName,
+        isLoading || isCurrentPage
+          ? settings?.customStyles?.paginationButtonDisabled
+          : ''
+      );
+
+      return (
+        <li key={pageNum}>
+          <button
+            onClick={() => onPageChange(pageNum)}
+            disabled={isLoading || isCurrentPage}
+            className={disabledButtonClassName}
+          >
+            {pageNum}
+          </button>
+        </li>
+      );
+    };
+
+    return (
+      <div className={paginationContainerClassName}>
+        {renderPaginationInfo()}
+        <ul
+          className={twMerge(
+            'flex items-center',
+            settings?.customStyles?.pagination
+          )}
+        >
+          {renderPaginationPrevious()}
+
+          {Array.from(
+            { length: searchResults.pagination.num_pages },
+            (_, i) => i + 1
+          ).map((pageNum) => renderPaginationButton(pageNum))}
+
+          {renderPaginationNext()}
+        </ul>
+      </div>
+    );
+  };
+
+  if (isLoading && (!searchResults || !searchResults.products)) {
+    return renderLoadingState();
+  }
+
+  const renderLoadingOverlay = () => {
+    if (settings?.customRenderers?.render?.resultsGrid?.renderLoadingOverlay) {
+      return settings.customRenderers.render.resultsGrid.renderLoadingOverlay();
+    }
+
+    const loadingOverlayClassName = twMerge(
+      'absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10',
+      settings?.customStyles?.loadingOverlay
+    );
+
+    const loadingSpinnerClassName = twMerge(
+      'h-8 w-8',
+      settings?.customStyles?.loadingSpinner
+    );
+
+    return (
+      <div className={loadingOverlayClassName}>
+        <LoaderSpinner className={loadingSpinnerClassName} />
+      </div>
+    );
+  };
+
+  const renderGridContainer = () => {
+    if (settings?.customRenderers?.render?.resultsGrid?.renderGridContainer) {
+      return settings.customRenderers.render.resultsGrid.renderGridContainer({
+        children: searchResults.products.map((product, index) =>
+          renderProductItem(product, index)
+        ),
+        resultsKey
+      });
+    }
+
+    const gridContainerClassName = twMerge(
+      'grid gap-x-4 gap-y-12 grid-cols-2 md:grid-cols-3 flex-1',
+      settings?.customStyles?.gridContainer
+    );
+
+    return (
+      <div key={resultsKey} className={gridContainerClassName}>
+        {searchResults.products.map((product, index) =>
+          renderProductItem(product, index)
+        )}
+      </div>
+    );
+  };
+
+  const resultsContainerClassName = twMerge(
+    'results-container',
+    settings?.customStyles?.resultsContainer
+  );
+
+  return (
+    <div className={gridClassName}>
+      {isLoading &&
+        searchResults &&
+        searchResults.products &&
+        renderLoadingOverlay()}
+
+      {searchResults && searchResults.products?.length > 0 ? (
+        <div className={resultsContainerClassName}>
+          {renderGridContainer()}
+          {renderPagination()}
+        </div>
+      ) : (
+        renderEmptyState()
+      )}
+    </div>
+  );
+}

package/src/views/search-button.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import { Icon } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface SimilarProductsButtonProps {
+  onClick: () => void;
+  className?: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export function SimilarProductsButton({
+  onClick,
+  className = '',
+  isLoading = false,
+  disabled = false
+}: SimilarProductsButtonProps) {
+  const { t } = useLocalization();
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled || isLoading}
+      className={`flex items-center justify-center p-2 bg-amber-200 rounded-md ${
+        disabled || isLoading ? 'opacity-50 cursor-not-allowed' : ''
+      } ${className}`}
+    >
+      <div className="flex items-center gap-2">
+        <Icon name="search" size={16} className="fill-black" />
+        <span className="text-xs font-medium text-black uppercase">
+          {t('common.product.view_similar_styles')}
+        </span>
+      </div>
+    </button>
+  );
+}