@akinon/pz-virtual-try-on 2.0.34-beta.0 → 2.0.34

package/src/types/index.ts

@@ -72,7 +72,7 @@ export interface VirtualTryOnAsyncRequest {
 }
 
 export interface VirtualTryOnAsyncResponse {
-  reference_url: string;
+  process_id: string;
   status: 'pending' | 'processing';
   message?: string;
 }
@@ -85,7 +85,7 @@ export type VirtualTryOnJobStatus =
   | 'failed';
 
 export interface VirtualTryOnJobStatusResponse {
-  reference_url: string;
+  process_id?: string;
   status: VirtualTryOnJobStatus;
   created_at?: string;
   started_at?: string;
@@ -93,24 +93,27 @@ export interface VirtualTryOnJobStatusResponse {
 
   // NEW API FORMAT: result object
   result?: {
-    job_type: 'single' | 'multiple';
+    job_type: 'single_try_on' | 'multiple_try_on' | 'single' | 'multiple';
     single?: {
-      reference: string;
       generated: string;
-      selected: string[];
+      selected?: string[];
+      reference?: string;
     };
     multiple?: {
-      reference: string;
+      reference?: string;
       products: VirtualTryOnMultipleResult[];
     };
     error?: VirtualTryOnCompatibilityError;
   };
 
+  tryon_limit?: number;
+  used_count?: number;
+
   // LEGACY: Direct fields (backward compatibility)
   generated?: string;
   selected?: string[];
   error?: VirtualTryOnCompatibilityError | string; // Can be string from backend
-  job_type?: 'single' | 'multiple';
+  job_type?: 'single_try_on' | 'multiple_try_on' | 'single' | 'multiple';
   multiple?: VirtualTryOnMultipleResult[];
 }
 
@@ -119,11 +122,13 @@ export interface VirtualTryOnMultipleResult {
   reference?: string;
   generated: string;
   selected?: string[];
+  used_count?: number;
   error?: VirtualTryOnCompatibilityError | null;
 }
 
 export interface VirtualTryOnCompatibilityError {
   code:
+    | 'INCOMPATIBLE'
     | 'child'
     | 'lighting'
     | 'multiperson'
@@ -136,7 +141,19 @@ export interface VirtualTryOnCompatibilityError {
     | 'others'
     | 'empty';
   detail: string;
-  error: string;
+  error?: string;
+  message?: string;
+}
+
+export interface TryOnUsageResponse {
+  tryon_limit: number;
+  skus: { sku: string; used_count: number }[];
+}
+
+export interface TryOnEventResponse {
+  sku: string;
+  event_name: string;
+  created_at: string;
 }
 
 export interface BasketProduct {
@@ -429,6 +446,11 @@ export interface CustomRendererProps {
       text: string;
       disabled?: boolean;
     }) => React.ReactNode;
+    renderUsageInfo?: (props: {
+      used: number;
+      limit: number;
+      text: string;
+    }) => React.ReactNode;
   };
   productSelector?: {
     renderModal?: (props: {
@@ -498,6 +520,11 @@ export interface CustomRendererProps {
     renderBackIcon?: () => React.ReactNode;
     renderCloseIcon?: () => React.ReactNode;
     renderErrorIcon?: () => React.ReactNode;
+    renderUsageInfo?: (props: {
+      used: number;
+      limit: number;
+      text: string;
+    }) => React.ReactNode;
   };
   basketAsyncModal?: {
     renderModal?: (props: {
@@ -512,6 +539,11 @@ export interface CustomRendererProps {
     }) => React.ReactNode;
     renderCloseIcon?: () => React.ReactNode;
     renderProcessingSpinner?: () => React.ReactNode;
+    renderUsageInfo?: (props: {
+      used: number;
+      limit: number;
+      text: string;
+    }) => React.ReactNode;
   };
   basketVirtualTryOn?: {
     renderButton?: (props: {
@@ -524,6 +556,7 @@ export interface CustomRendererProps {
       text: string;
       className?: string;
     }) => React.ReactNode;
+    renderUsageCheckLoader?: () => React.ReactNode;
   };
   multipleModal?: {
     renderCloseIcon?: () => React.ReactNode;
@@ -551,6 +584,7 @@ export interface CustomRendererProps {
       variant?: 'default' | 'outlined' | 'ghost';
       size?: 'sm' | 'md' | 'lg';
     }) => React.ReactNode;
+    renderUsageCheckLoader?: () => React.ReactNode;
     renderIcon?: (props: {
       name: string;
       size: number;
@@ -814,6 +848,12 @@ export interface VirtualTryOnPluginSettings {
     loadingOverlay?: string;
     loadingText?: string;
 
+    usageCheckOverlay?: string;
+    usageCheckSpinner?: string;
+    resultModalUsageInfo?: string;
+    multipleResultModalUsageInfo?: string;
+    basketAsyncModalUsageInfo?: string;
+
     modalEnter?: string;
     modalExit?: string;
 

package/src/utils/polling.ts

@@ -1,4 +1,5 @@
 import type { VirtualTryOnJobStatusResponse } from '../types';
+import { parseVirtualTryOnError } from './error-parser';
 
 export interface PollingConfig {
   referenceUrl: string;
@@ -89,11 +90,13 @@ export class VirtualTryOnPoller {
       if (response.status === 'failed') {
         this.stop();
 
-        const errorMessage =
+        const rawError =
           typeof response.error === 'string'
             ? response.error
-            : response.error?.detail || 'Processing failed';
-        this.config.onError(errorMessage);
+            : response.error?.detail || response.error?.message;
+        this.config.onError(
+          rawError ? parseVirtualTryOnError(rawError) : 'Processing failed'
+        );
         return false;
       }
 

package/src/views/basket-async-modal.tsx

@@ -185,6 +185,7 @@ export function BasketAsyncModal({
             },
             clearError: () => {},
             selectedFeedback: hookData.feedbackStates[selectedDetailIndex],
+            limitInfo: hookData.limitInfo,
             retryTryOn: async () => {
               if (hookData.uploadedImage && hookData.retrySingleProduct) {
                 setCurrentStep('processing');
@@ -414,6 +415,43 @@ export function BasketAsyncModal({
                   >
                     {t('product.virtual_try_on.click_to_view_details')}
                   </p>
+                  {hookData.limitInfo?.tryon_limit !== undefined &&
+                    hookData.limitInfo?.used_count !== undefined &&
+                    (settings?.customRenderers?.render?.basketAsyncModal
+                      ?.renderUsageInfo ? (
+                      settings.customRenderers.render.basketAsyncModal.renderUsageInfo(
+                        {
+                          used: hookData.limitInfo.used_count,
+                          limit: hookData.limitInfo.tryon_limit,
+                          text: t('product.virtual_try_on.usage_info')
+                            .replace(
+                              '{{used}}',
+                              String(hookData.limitInfo.used_count)
+                            )
+                            .replace(
+                              '{{limit}}',
+                              String(hookData.limitInfo.tryon_limit)
+                            )
+                        }
+                      )
+                    ) : (
+                      <p
+                        className={twMerge(
+                          'text-xs text-gray-500 pb-4',
+                          settings?.customStyles?.basketAsyncModalUsageInfo
+                        )}
+                      >
+                        {t('product.virtual_try_on.usage_info')
+                          .replace(
+                            '{{used}}',
+                            String(hookData.limitInfo.used_count)
+                          )
+                          .replace(
+                            '{{limit}}',
+                            String(hookData.limitInfo.tryon_limit)
+                          )}
+                      </p>
+                    ))}
                 </div>
 
                 <div

package/src/views/basket-virtual-try-on.tsx

@@ -2,7 +2,12 @@
 
 import React, { useState, useMemo, useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { BasketProduct, VirtualTryOnPluginSettings } from '../types';
+import { useSession } from 'next-auth/react';
+import type {
+  BasketProduct,
+  TryOnUsageResponse,
+  VirtualTryOnPluginSettings
+} from '../types';
 import { VirtualTryOnProductSelector } from './virtual-try-on-product-selector';
 import { VirtualTryOnUploadModal } from './virtual-try-on-upload-modal';
 import { BasketAsyncModal } from './basket-async-modal';
@@ -12,9 +17,13 @@ import {
   isVirtualTryOnEnabled,
   VirtualTryOnCache
 } from '../utils';
-import { useGetVirtualTryOnLimitedCategoriesQuery } from '../data/endpoints';
+import {
+  useGetTryOnUsageMutation,
+  useGetVirtualTryOnLimitedCategoriesQuery
+} from '../data/endpoints';
 import virtualCabinIcon from '../../static/virtual-cabin-icon.svg';
-import { useLocalization } from '@akinon/next/hooks';
+import { LoaderSpinner } from '@akinon/next/components';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
 
 export interface BasketVirtualTryOnProps {
   basketItems: BasketProduct[];
@@ -32,12 +41,19 @@ export function BasketVirtualTryOn({
   settings
 }: BasketVirtualTryOnProps) {
   const { t } = useLocalization();
+  const { status } = useSession();
+  const router = useRouter();
   const [isSelectorOpen, setIsSelectorOpen] = useState(false);
   const [showUploadModal, setShowUploadModal] = useState(false);
   const [showAsyncModal, setShowAsyncModal] = useState(false);
   const [selectedProducts, setSelectedProducts] = useState<BasketProduct[]>([]);
-  const [categoryMapping, setCategoryMapping] = useState<Record<string, number[]>>({});
+  const [categoryMapping, setCategoryMapping] = useState<
+    Record<string, number[]>
+  >({});
   const [isCategoriesLoading, setIsCategoriesLoading] = useState(true);
+  const [usageData, setUsageData] = useState<TryOnUsageResponse | null>(null);
+  const [isUsageChecking, setIsUsageChecking] = useState(false);
+  const [getTryOnUsage] = useGetTryOnUsageMutation();
 
   const hookData = useVirtualTryOnAsync(selectedProducts, categoryMapping);
 
@@ -66,9 +82,9 @@ export function BasketVirtualTryOn({
 
     const fetchCategories = async () => {
       try {
-        const pks = basketItems.map(item => item.pk).join(',');
+        const pks = basketItems.map((item) => item.pk).join(',');
         const response = await fetch(`/api/product-categories?pks=${pks}`);
-        
+
         if (response.ok) {
           const mapping = await response.json();
           setCategoryMapping(mapping);
@@ -170,10 +186,51 @@ export function BasketVirtualTryOn({
     isCategoriesLoading
   ]);
 
-  const handleOpenSelector = () => {
+  const handleOpenSelector = async () => {
+    if (isUsageChecking) {
+      return;
+    }
+
+    setIsUsageChecking(true);
+    try {
+      const usage = await getTryOnUsage({
+        skus: eligibleProducts.map((item) => item.sku)
+      }).unwrap();
+      setUsageData(usage);
+    } catch (usageError: any) {
+      if (
+        usageError?.status === 400 &&
+        usageError?.data?.code === 'VALIDATION'
+      ) {
+        setIsUsageChecking(false);
+        router.push(
+          `/users/auth?callbackUrl=${encodeURIComponent(
+            window.location.pathname + window.location.search
+          )}`
+        );
+        return;
+      }
+      setUsageData(null);
+    }
+    setIsUsageChecking(false);
+
     setIsSelectorOpen(true);
   };
 
+  const disabledSkus = useMemo(() => {
+    if (
+      status !== 'authenticated' ||
+      !usageData ||
+      !(usageData.tryon_limit > 0)
+    ) {
+      return [];
+    }
+
+    return usageData.skus
+      .filter((item) => item.used_count >= usageData.tryon_limit)
+      .map((item) => item.sku);
+  }, [status, usageData]);
+
   const handleProductsSelected = (products: BasketProduct[]) => {
     setSelectedProducts(products);
     setIsSelectorOpen(false);
@@ -202,7 +259,11 @@ export function BasketVirtualTryOn({
     onComplete?.(result);
   };
 
-  if (!isFeatureEnabled || isCategoriesLoading || eligibleProducts.length === 0) {
+  if (
+    !isFeatureEnabled ||
+    isCategoriesLoading ||
+    eligibleProducts.length === 0
+  ) {
     return null;
   }
 
@@ -215,12 +276,30 @@ export function BasketVirtualTryOn({
           isEnabled: isFeatureEnabled
         })}
 
+        {isUsageChecking &&
+          (settings?.customRenderers?.render?.basketVirtualTryOn
+            ?.renderUsageCheckLoader ? (
+            settings.customRenderers.render.basketVirtualTryOn.renderUsageCheckLoader()
+          ) : (
+            <div
+              className={twMerge(
+                'fixed inset-0 z-[9999]',
+                settings?.customStyles?.usageCheckOverlay
+              )}
+            >
+              <LoaderSpinner
+                className={settings?.customStyles?.usageCheckSpinner}
+              />
+            </div>
+          ))}
+
         {isSelectorOpen && (
           <VirtualTryOnProductSelector
             isOpen={isSelectorOpen}
             onClose={() => setIsSelectorOpen(false)}
             products={eligibleProducts}
             maxSelection={3}
+            disabledSkus={disabledSkus}
             onConfirm={handleProductsSelected}
             settings={settings}
           />
@@ -285,8 +364,9 @@ export function BasketVirtualTryOn({
       >
         <button
           onClick={handleOpenSelector}
+          disabled={isUsageChecking}
           className={twMerge(
-            'px-6 py-3 rounded-[24px] border border-[#979797] bg-white text-black font-medium hover:bg-gray-50 transition-colors duration-200 flex items-center gap-2',
+            'px-6 py-3 rounded-[24px] border border-[#979797] bg-white text-black font-medium hover:bg-gray-50 transition-colors duration-200 flex items-center gap-2 disabled:opacity-60',
             settings?.customStyles?.basketVirtualTryOnButton,
             buttonClassName
           )}
@@ -323,12 +403,30 @@ export function BasketVirtualTryOn({
         </button>
       </div>
 
+      {isUsageChecking &&
+        (settings?.customRenderers?.render?.basketVirtualTryOn
+          ?.renderUsageCheckLoader ? (
+          settings.customRenderers.render.basketVirtualTryOn.renderUsageCheckLoader()
+        ) : (
+          <div
+            className={twMerge(
+              'fixed inset-0 z-[9999]',
+              settings?.customStyles?.usageCheckOverlay
+            )}
+          >
+            <LoaderSpinner
+              className={settings?.customStyles?.usageCheckSpinner}
+            />
+          </div>
+        ))}
+
       {isSelectorOpen && (
         <VirtualTryOnProductSelector
           isOpen={isSelectorOpen}
           onClose={() => setIsSelectorOpen(false)}
           products={eligibleProducts}
           maxSelection={3}
+          disabledSkus={disabledSkus}
           onConfirm={handleProductsSelected}
           settings={settings}
         />

package/src/views/main.tsx

@@ -3,10 +3,12 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { Product } from '@akinon/next/types';
 import { twMerge } from 'tailwind-merge';
+import { useLocalization, useRouter, useToast } from '@akinon/next/hooks';
 import { VirtualTryOnModal } from './virtual-try-on-modal';
 import { VirtualTryOnButton } from './virtual-try-on-button';
 import { useVirtualTryOn } from '../hooks/use-virtual-try-on';
-import { ProcessingSpinner } from '../components/processing-spinner';
+import { useGetTryOnUsageMutation } from '../data/endpoints';
+import { LoaderSpinner } from '@akinon/next/components';
 import type { VirtualTryOnPluginSettings } from '../types';
 
 interface VirtualTryOnPluginProps {
@@ -28,7 +30,12 @@ export function VirtualTryOnPlugin({
 }: VirtualTryOnPluginProps) {
   const [isModalOpen, setIsModalOpen] = useState(autoOpen);
   const [isModalLoading, setIsModalLoading] = useState(false);
+  const [isUsageChecking, setIsUsageChecking] = useState(false);
   const { isEnabled } = useVirtualTryOn(product);
+  const { t } = useLocalization();
+  const { error: showErrorToast } = useToast();
+  const router = useRouter();
+  const [getTryOnUsage] = useGetTryOnUsageMutation();
 
   useEffect(() => {
     return () => {
@@ -105,7 +112,42 @@ export function VirtualTryOnPlugin({
     return variables;
   }, [settings?.cssVariables, settings?.theme]);
 
-  const handleOpenModal = () => {
+  const handleOpenModal = async () => {
+    if (isUsageChecking) {
+      return;
+    }
+
+    const sku = product.sku || product.pk.toString();
+
+    setIsUsageChecking(true);
+    try {
+      const usage = await getTryOnUsage({ skus: [sku] }).unwrap();
+
+      if (usage?.tryon_limit > 0) {
+        const skuUsage = usage.skus?.find((item) => item.sku === sku);
+
+        if (skuUsage && skuUsage.used_count >= usage.tryon_limit) {
+          setIsUsageChecking(false);
+          showErrorToast(t('product.virtual_try_on.limit_exceeded'));
+          return;
+        }
+      }
+    } catch (usageError: any) {
+      if (
+        usageError?.status === 400 &&
+        usageError?.data?.code === 'VALIDATION'
+      ) {
+        setIsUsageChecking(false);
+        router.push(
+          `/users/auth?callbackUrl=${encodeURIComponent(
+            window.location.pathname + window.location.search
+          )}`
+        );
+        return;
+      }
+    }
+    setIsUsageChecking(false);
+
     setIsModalLoading(true);
     setTimeout(() => {
       setIsModalLoading(false);
@@ -139,7 +181,7 @@ export function VirtualTryOnPlugin({
           {settings.customRenderers.render.button.renderButton({
             onClick: handleOpenModal,
             isLoading: false,
-            disabled: isModalLoading,
+            disabled: isModalLoading || isUsageChecking,
             className: twMerge(settings?.customStyles?.button, className),
             variant: buttonVariant,
             size: buttonSize
@@ -150,7 +192,7 @@ export function VirtualTryOnPlugin({
           <CustomButton
             onClick={handleOpenModal}
             isLoading={false}
-            disabled={isModalLoading}
+            disabled={isModalLoading || isUsageChecking}
             className={twMerge(settings?.customStyles?.button, className)}
           />
         </div>
@@ -165,26 +207,28 @@ export function VirtualTryOnPlugin({
           variant={buttonVariant}
           size={buttonSize}
           isLoading={false}
-          disabled={isModalLoading}
+          disabled={isModalLoading || isUsageChecking}
           settings={settings}
           style={cssVariables}
         />
       )}
 
-      {isModalLoading && (
-        <div
-          className={twMerge(
-            'fixed inset-0 flex flex-col items-center justify-center backdrop-blur-[12px] z-[9999]',
-            settings?.customStyles?.processingOverlay
-          )}
-          style={{
-            ...cssVariables,
-            backgroundColor: 'rgba(0, 0, 0, 0.6)'
-          }}
-        >
-          <ProcessingSpinner settings={settings} />
-        </div>
-      )}
+      {(isUsageChecking || isModalLoading) &&
+        (settings?.customRenderers?.render?.button?.renderUsageCheckLoader ? (
+          settings.customRenderers.render.button.renderUsageCheckLoader()
+        ) : (
+          <div
+            className={twMerge(
+              'fixed inset-0 z-[9999]',
+              settings?.customStyles?.usageCheckOverlay
+            )}
+            style={cssVariables}
+          >
+            <LoaderSpinner
+              className={settings?.customStyles?.usageCheckSpinner}
+            />
+          </div>
+        ))}
 
       <VirtualTryOnModal
         isOpen={isModalOpen}

package/src/views/virtual-try-on-multiple-modal.tsx

@@ -82,6 +82,7 @@ export function VirtualTryOnMultipleModal({
     isStarting,
     isProcessing,
     isComplete,
+    limitInfo,
     handleFileUpload,
     acceptLegalConsent,
     startTryOn,
@@ -129,6 +130,7 @@ export function VirtualTryOnMultipleModal({
         results={results}
         products={products}
         settings={settings}
+        limitInfo={limitInfo}
       />
     );
   }
@@ -358,7 +360,9 @@ export function VirtualTryOnMultipleModal({
                       settings?.customStyles?.multipleModalUploadDescription
                     )}
                   >
-                    {`${t('product.virtual_try_on.upload_title')} - ${products.length} ${t('product.virtual_try_on.products_count')}`}
+                    {`${t('product.virtual_try_on.upload_title')} - ${
+                      products.length
+                    } ${t('product.virtual_try_on.products_count')}`}
                   </p>
                 </div>
 
@@ -407,7 +411,9 @@ export function VirtualTryOnMultipleModal({
                     {t('product.virtual_try_on.photo_preview')}
                   </h3>
                   <p className="text-sm text-gray-600">
-                    {`${products.length} ${t('product.virtual_try_on.products_count')} ${t('product.virtual_try_on.will_start')}`}
+                    {`${products.length} ${t(
+                      'product.virtual_try_on.products_count'
+                    )} ${t('product.virtual_try_on.will_start')}`}
                   </p>
                 </div>
 

package/src/views/virtual-try-on-multiple-result-modal.tsx

@@ -11,7 +11,7 @@ import type {
 } from '../types';
 import { Image } from '@akinon/next/components/image';
 import { useSubmitVirtualTryOnFeedbackMutation } from '../data/endpoints';
-import { getErrorMessage, hasCompatibilityError } from '../utils/error-mapping';
+import { parseVirtualTryOnError } from '../utils';
 import { useLocalization } from '@akinon/next/hooks';
 
 export interface VirtualTryOnMultipleResultModalProps {
@@ -25,6 +25,7 @@ export interface VirtualTryOnMultipleResultModalProps {
   settings?: VirtualTryOnPluginSettings;
   hasFailedResults?: boolean;
   isRetrying?: boolean;
+  limitInfo?: { tryon_limit?: number; used_count?: number } | null;
 }
 
 export function VirtualTryOnMultipleResultModal({
@@ -37,7 +38,8 @@ export function VirtualTryOnMultipleResultModal({
   className,
   settings,
   hasFailedResults = false,
-  isRetrying = false
+  isRetrying = false,
+  limitInfo = null
 }: VirtualTryOnMultipleResultModalProps) {
   const { t } = useLocalization();
   const [feedbackStates, setFeedbackStates] = useState<
@@ -277,6 +279,31 @@ export function VirtualTryOnMultipleResultModal({
                   products.length.toString()
                 ) || `${products.length} ürün için deneme tamamlandı`}
               </p>
+              {limitInfo?.tryon_limit !== undefined &&
+                limitInfo?.used_count !== undefined &&
+                (settings?.customRenderers?.render?.multipleResultModal
+                  ?.renderUsageInfo ? (
+                  settings.customRenderers.render.multipleResultModal.renderUsageInfo(
+                    {
+                      used: limitInfo.used_count,
+                      limit: limitInfo.tryon_limit,
+                      text: t('product.virtual_try_on.usage_info')
+                        .replace('{{used}}', String(limitInfo.used_count))
+                        .replace('{{limit}}', String(limitInfo.tryon_limit))
+                    }
+                  )
+                ) : (
+                  <p
+                    className={twMerge(
+                      'text-xs text-gray-500 mt-1',
+                      settings?.customStyles?.multipleResultModalUsageInfo
+                    )}
+                  >
+                    {t('product.virtual_try_on.usage_info')
+                      .replace('{{used}}', String(limitInfo.used_count))
+                      .replace('{{limit}}', String(limitInfo.tryon_limit))}
+                  </p>
+                ))}
             </div>
           </div>
 
@@ -306,7 +333,7 @@ export function VirtualTryOnMultipleResultModal({
           >
             {results.map((result, index) => {
               const product = products[index];
-              const hasError = hasCompatibilityError(result);
+              const hasError = !!result.error;
               const feedback = feedbackStates[index];
 
               return (
@@ -362,7 +389,12 @@ export function VirtualTryOnMultipleResultModal({
                               ?.multipleResultModalErrorMessage
                           )}
                         >
-                          {getErrorMessage(result.error!)}
+                          {parseVirtualTryOnError(
+                            result.error?.detail ||
+                              result.error?.message ||
+                              result.error?.error ||
+                              ''
+                          )}
                         </p>
                       </div>
                     ) : (