@akinon/next 2.0.0-beta.11 → 2.0.0-beta.13

package/api/virtual-try-on.ts

@@ -0,0 +1,382 @@
+import { NextRequest, NextResponse } from 'next/server';
+import Settings from 'settings';
+
+const VIRTUAL_TRY_ON_API_URL = process.env.NEXT_PUBLIC_VIRTUAL_TRY_ON_API_URL;
+
+let limitedCategoriesCache: {
+  data: any;
+  timestamp: number;
+} | null = null;
+
+const CACHE_TTL = 3600000;
+
+function getClientIP(request: NextRequest): string | null {
+  const forwardedFor = request.headers.get('x-forwarded-for');
+  if (forwardedFor) {
+    const ip = forwardedFor.split(',')[0].trim();
+    if (ip === '::1' || ip === '::ffff:127.0.0.1') {
+      return '127.0.0.1';
+    }
+    return ip;
+  }
+
+  const realIP = request.headers.get('x-real-ip');
+  if (realIP) {
+    if (realIP === '::1' || realIP === '::ffff:127.0.0.1') {
+      return '127.0.0.1';
+    }
+    return realIP;
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    return '127.0.0.1';
+  }
+
+  return null;
+}
+
+function getLocaleFromRequest(request: NextRequest): string | null {
+  const cookieLocale = request.cookies.get('pz-locale')?.value;
+
+  if (cookieLocale) {
+    const currentLocale = Settings.localization.locales.find(
+      (l) => l.value === cookieLocale
+    );
+    return currentLocale?.apiValue || null;
+  }
+
+  return null;
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const endpoint = searchParams.get('endpoint');
+
+    if (endpoint === 'limited-categories') {
+      const now = Date.now();
+
+      if (
+        limitedCategoriesCache &&
+        now - limitedCategoriesCache.timestamp < CACHE_TTL
+      ) {
+        return NextResponse.json(limitedCategoriesCache.data, {
+          status: 200,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, OPTIONS',
+            'Access-Control-Allow-Headers':
+              'Content-Type, Accept, Authorization',
+            'Cache-Control':
+              'public, s-maxage=3600, stale-while-revalidate=7200',
+            'X-Virtual-Try-On-Cache-Status': 'HIT'
+          }
+        });
+      }
+
+      const externalUrl = `${VIRTUAL_TRY_ON_API_URL}/api/v1/limited-categories`;
+      const clientIP = getClientIP(request);
+      const locale = getLocaleFromRequest(request);
+
+      const headersToSend = {
+        Accept: 'application/json',
+        ...(locale && { 'Accept-Language': locale }),
+        ...(request.headers.get('authorization') && {
+          Authorization: request.headers.get('authorization')!
+        }),
+        ...(clientIP && {
+          'X-Forwarded-For': clientIP
+        })
+      };
+
+      const response = await fetch(externalUrl, {
+        method: 'GET',
+        headers: headersToSend
+      });
+
+      let responseData: any;
+      const responseText = await response.text();
+
+      try {
+        responseData = responseText ? JSON.parse(responseText) : {};
+      } catch (parseError) {
+        responseData = { category_ids: [] };
+      }
+
+      if (!response.ok) {
+        responseData = { category_ids: [] };
+      }
+
+      limitedCategoriesCache = {
+        data: responseData,
+        timestamp: Date.now()
+      };
+
+      return NextResponse.json(responseData, {
+        status: response.ok ? response.status : 200,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, POST, PUT, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization',
+          'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=7200',
+          'X-Virtual-Try-On-Cache-Status': 'MISS'
+        }
+      });
+    } else if (endpoint === 'job-status') {
+      const referenceUrl = searchParams.get('reference_url');
+      if (!referenceUrl) {
+        return NextResponse.json(
+          { error: 'reference_url is required' },
+          { status: 400 }
+        );
+      }
+
+      const externalUrl = `${VIRTUAL_TRY_ON_API_URL}/api/async/v1/job-status?reference_url=${encodeURIComponent(
+        referenceUrl
+      )}`;
+      const clientIP = getClientIP(request);
+      const locale = getLocaleFromRequest(request);
+
+      const headersToSend = {
+        Accept: 'application/json',
+        ...(locale && { 'Accept-Language': locale }),
+        ...(request.headers.get('authorization') && {
+          Authorization: request.headers.get('authorization')!
+        }),
+        ...(clientIP && {
+          'X-Forwarded-For': clientIP
+        })
+      };
+
+      const response = await fetch(externalUrl, {
+        method: 'GET',
+        headers: headersToSend
+      });
+
+      let responseData: any;
+      const responseText = await response.text();
+
+      try {
+        responseData = responseText ? JSON.parse(responseText) : {};
+      } catch (parseError) {
+        return NextResponse.json(
+          { error: 'Invalid JSON response from job status API' },
+          { status: 500 }
+        );
+      }
+
+      return NextResponse.json(responseData, {
+        status: response.status,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, POST, PUT, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization'
+        }
+      });
+    }
+
+    return NextResponse.json(
+      { error: 'Invalid endpoint for GET method' },
+      { status: 400 }
+    );
+  } catch (error) {
+    return NextResponse.json({ category_ids: [] }, { status: 200 });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const endpoint = searchParams.get('endpoint');
+
+    const body = await request.json();
+
+    let externalUrl: string;
+    let httpMethod = 'POST';
+
+    if (endpoint === 'feedback') {
+      if (!body.url || typeof body.url !== 'string' || !body.url.trim()) {
+        return NextResponse.json(
+          { status: 'error', message: 'URL is required for feedback' },
+          { status: 400 }
+        );
+      }
+      if (typeof body.feedback !== 'boolean') {
+        return NextResponse.json(
+          { status: 'error', message: 'Feedback must be a boolean value' },
+          { status: 400 }
+        );
+      }
+      externalUrl = `${VIRTUAL_TRY_ON_API_URL}/api/v1/feedback`;
+      httpMethod = 'PUT';
+    } else if (endpoint === 'async-multiple-try-on') {
+      externalUrl = `${VIRTUAL_TRY_ON_API_URL}/api/async/v1/multiple-virtual-try-on`;
+    } else {
+      return NextResponse.json(
+        { error: 'Invalid endpoint specified' },
+        { status: 400 }
+      );
+    }
+
+    const clientIP = getClientIP(request);
+    const locale = getLocaleFromRequest(request);
+
+    const headersToSend = {
+      'Content-Type': 'application/json',
+      ...(locale && { 'Accept-Language': locale }),
+      ...(httpMethod === 'POST' && { Accept: 'application/json' }),
+      ...(request.headers.get('authorization') && {
+        Authorization: request.headers.get('authorization')!
+      }),
+      ...(clientIP && {
+        'X-Forwarded-For': clientIP
+      })
+    };
+
+    const fetchOptions: RequestInit = {
+      method: httpMethod,
+      headers: headersToSend
+    };
+
+    if (httpMethod !== 'GET') {
+      fetchOptions.body = JSON.stringify(body);
+    }
+
+    const response = await fetch(externalUrl, fetchOptions);
+
+    let responseData: Record<string, any>;
+    const responseText = await response.text();
+
+    if (endpoint === 'feedback') {
+      try {
+        responseData = responseText ? JSON.parse(responseText) : {};
+      } catch (parseError) {
+        responseData = { error: 'Invalid JSON response from feedback API' };
+      }
+    } else {
+      try {
+        responseData = responseText ? JSON.parse(responseText) : {};
+      } catch (parseError) {
+        responseData = { error: 'Invalid JSON response' };
+      }
+    }
+
+    if (!response.ok && responseData.error) {
+      let userFriendlyMessage = responseData.error;
+
+      if (
+        typeof responseData.error === 'string' &&
+        (responseData.error.includes('duplicate key value') ||
+          responseData.error.includes('image_pk'))
+      ) {
+        userFriendlyMessage =
+          'This image has already been processed. Please try with a different image.';
+      } else if (responseData.error.includes('bulk insert images')) {
+        userFriendlyMessage =
+          'There was an issue processing your image. Please try again with a different image.';
+      }
+
+      return NextResponse.json(
+        {
+          ...responseData,
+          message: userFriendlyMessage
+        },
+        {
+          status: response.status,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'POST, OPTIONS',
+            'Access-Control-Allow-Headers':
+              'Content-Type, Accept, Authorization'
+          }
+        }
+      );
+    }
+
+    return NextResponse.json(responseData, {
+      status: response.status,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization'
+      }
+    });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        status: 'error',
+        message:
+          'Internal server error occurred during virtual try-on processing'
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const endpoint = searchParams.get('endpoint');
+
+    if (endpoint !== 'feedback') {
+      return NextResponse.json(
+        { error: 'PUT method only supports feedback endpoint' },
+        { status: 400 }
+      );
+    }
+
+    const body = await request.json();
+
+    const externalUrl = `${VIRTUAL_TRY_ON_API_URL}/api/v1/feedback`;
+    const clientIP = getClientIP(request);
+    const locale = getLocaleFromRequest(request);
+
+    const headersToSend = {
+      'Content-Type': 'application/json',
+      ...(locale && { 'Accept-Language': locale }),
+      ...(request.headers.get('authorization') && {
+        Authorization: request.headers.get('authorization')!
+      }),
+      ...(clientIP && {
+        'X-Forwarded-For': clientIP
+      })
+    };
+
+    const response = await fetch(externalUrl, {
+      method: 'PUT',
+      headers: headersToSend,
+      body: JSON.stringify(body)
+    });
+
+    const responseData = response?.json() || {};
+
+    return NextResponse.json(responseData, {
+      status: response.status,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, PUT, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization'
+      }
+    });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        status: 'error',
+        message: 'Internal server error occurred during feedback submission',
+        error: (error as Error).message
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization'
+    }
+  });
+}

package/bin/pz-generate-routes.js

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const findBaseDir = require('../utils/find-base-dir');
+
+const generateRoutes = () => {
+  const baseDir = findBaseDir();
+  const srcDir = path.join(baseDir, 'src');
+  const appDir = path.join(srcDir, 'app');
+
+  const routesDir = path.join(srcDir, 'routes');
+  const jsOutputPath = path.join(routesDir, 'generated-routes.js');
+
+  if (!fs.existsSync(routesDir)) {
+    fs.mkdirSync(routesDir, { recursive: true });
+  }
+
+  if (!fs.existsSync(appDir)) {
+    console.error(`Error: app directory not found at ${appDir}`);
+    console.error('Make sure you have an app directory in your project');
+    process.exit(1);
+  }
+
+  const routes = [];
+  const excludedDirs = ['api', 'pz-not-found'];
+
+  const skipSegments = ['[pz]', '[commerce]', '[locale]', '[currency]'];
+  const skipCatchAllRoutes = ['[...prettyurl]', '[...not_found]'];
+
+  const walkDirectory = (dir, basePath = '') => {
+    const files = fs.readdirSync(dir);
+
+    files.forEach((file) => {
+      const filePath = path.join(dir, file);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory()) {
+        if (excludedDirs.includes(file)) {
+          return;
+        }
+
+        if (skipCatchAllRoutes.includes(file.toLowerCase())) {
+          return;
+        }
+
+        let routePath = basePath;
+        if (skipSegments.includes(file.toLowerCase())) {
+          routePath = basePath;
+        } else if (file.startsWith('[') && file.endsWith(']')) {
+          if (file.startsWith('[...')) {
+            routePath = `${basePath}/.+`;
+          } else {
+            routePath = `${basePath}/[^/]+`;
+          }
+        } else if (file.startsWith('(') && file.endsWith(')')) {
+          routePath = basePath;
+        } else {
+          routePath = `${basePath}/${file}`;
+        }
+
+        const pageFiles = ['page.tsx'];
+        const hasPage = pageFiles.some((pageFile) =>
+          fs.existsSync(path.join(filePath, pageFile))
+        );
+
+        if (hasPage && routePath) {
+          routes.push(routePath === '' ? '/' : routePath);
+        }
+
+        walkDirectory(filePath, routePath);
+      }
+    });
+  };
+
+  walkDirectory(appDir);
+
+  routes.push('/');
+
+  const cleanedRoutes = routes
+    .map((route) => {
+      return route.replace(/\/+/g, '/');
+    })
+    .filter((route, index, self) => {
+      return self.indexOf(route) === index;
+    })
+    .sort();
+
+  const jsContent = `// Generated by pz-generate-routes script
+// Do not edit manually
+module.exports = ${JSON.stringify(cleanedRoutes, null, 2)};`;
+
+  fs.writeFileSync(jsOutputPath, jsContent);
+
+  console.info(
+    `Routes generated successfully. (Found ${cleanedRoutes.length} routes)`
+  );
+};
+
+try {
+  generateRoutes();
+} catch (error) {
+  console.error('Error generating routes:', error);
+  process.exit(1);
+}

package/bin/pz-prebuild.js

@@ -2,7 +2,7 @@
 
 const runScript = require('./run-script');
 
-runScript('pz-run-tests.js');
 runScript('pz-install-theme.js');
 runScript('pz-pre-check-dist.js');
 runScript('pz-generate-translations.js');
+runScript('pz-generate-routes.js');

package/bin/pz-predev.js

@@ -6,3 +6,4 @@ runScript('pz-install-extensions.js');
 runScript('pz-check-env.js');
 runScript('pz-install-theme.js');
 runScript('pz-generate-translations.js');
+runScript('pz-generate-routes.js');

package/components/accordion.tsx

@@ -7,35 +7,46 @@ import { AccordionProps } from '../types';
 
 export const Accordion = ({
   isCollapse = false,
+  collapseClassName,
   title,
   subTitle,
   icons = ['chevron-up', 'chevron-down'],
   iconSize = 16,
   iconColor = 'fill-[#000000]',
   children,
+  headerClassName,
   className,
   titleClassName,
-  dataTestId
+  subTitleClassName,
+  dataTestId,
+  contentClassName
 }: AccordionProps) => {
   const [collapse, setCollapse] = useState(isCollapse);
 
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
         className
       )}
     >
       <div
-        className="flex items-center justify-between cursor-pointer"
+        className={twMerge(
+          'flex items-center justify-between cursor-pointer',
+          headerClassName
+        )}
         onClick={() => setCollapse(!collapse)}
         data-testid={dataTestId}
       >
-        <div className="flex flex-col">
+        <div className={twMerge('flex flex-col', contentClassName)}>
           {title && (
             <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
           )}
-          {subTitle && <h4 className="text-xs text-gray-700">{subTitle}</h4>}
+          {subTitle && (
+            <h4 className={twMerge('text-xs text-gray-700', subTitleClassName)}>
+              {subTitle}
+            </h4>
+          )}
         </div>
 
         {icons && (
@@ -46,7 +57,11 @@ export const Accordion = ({
           />
         )}
       </div>
-      {collapse && <div className="mt-3 text-sm">{children}</div>}
+      {collapse && (
+        <div className={twMerge('mt-3 text-sm', collapseClassName)}>
+          {children}
+        </div>
+      )}
     </div>
   );
 };

package/components/button.tsx

@@ -35,7 +35,7 @@ export const Button = (props: ButtonProps) => {
 
   const buttonClasses = twMerge(
     clsx(
-      'px-4 text-xs transition-all duration-200 cursor-pointer',
+      'px-4 text-xs transition-all duration-200',
       'inline-flex gap-2 justify-center items-center',
       variants[appearance],
       sizes[size],

package/components/file-input.tsx

@@ -1,8 +1,70 @@
+import { useState } from 'react';
 import { forwardRef } from 'react';
-import { FileInputProps } from '../types/index';
+import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
+import { FileInputProps } from '../types';
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function fileInput(props, ref) {
-    return <input type="file" {...props} ref={ref} />;
+  function FileInput(
+    {
+      buttonClassName,
+      onChange,
+      fileClassName,
+      fileNameWrapperClassName,
+      fileInputClassName,
+      ...props
+    },
+    ref
+  ) {
+    const { t } = useLocalization();
+    const [fileNames, setFileNames] = useState<string[]>([]);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      setFileNames(files.map((file) => file.name));
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return (
+      <div className="relative">
+        <input
+          type="file"
+          {...props}
+          ref={ref}
+          className={twMerge(
+            'absolute inset-0 w-full h-full opacity-0 cursor-pointer',
+            fileInputClassName
+          )}
+          onChange={handleFileChange}
+        />
+        <button
+          type="button"
+          className={twMerge(
+            'bg-primary text-white py-2 px-4 text-sm',
+            buttonClassName
+          )}
+        >
+          {t('common.file_input.select_file')}
+        </button>
+        <div
+          className={twMerge('mt-1 text-gray-500', fileNameWrapperClassName)}
+        >
+          {fileNames.length > 0 ? (
+            <ul className={twMerge('list-disc pl-4 text-xs', fileClassName)}>
+              {fileNames.map((name, index) => (
+                <li key={index}>{name}</li>
+              ))}
+            </ul>
+          ) : (
+            <span className={twMerge('text-xs', fileClassName)}>
+              {t('common.file_input.no_file')}
+            </span>
+          )}
+        </div>
+      </div>
+    );
   }
 );

package/components/input.tsx

@@ -40,7 +40,7 @@ export const Input = forwardRef<
   const inputClass = twMerge(
     clsx(
       'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
-      'focus-visible:outline-hidden', // disable outline on focus
+      'focus-visible:outline-none', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'
@@ -112,7 +112,7 @@ export const Input = forwardRef<
         )}
       </div>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </div>
   );