@akinon/next 2.0.0-beta.2 → 2.0.0-beta.21

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/assets/styles/index.scss

@@ -51,3 +51,87 @@
     z-index: 1001;
   }
 }
+
+.container-droppable {
+  outline: 2px dashed #4482ff !important;
+  outline-offset: -2px;
+  background-color: rgba(96, 165, 250, 0.1) !important;
+}
+
+.container-dragover {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+.container-dragover::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid #4482ff;
+  pointer-events: none;
+}
+
+.dragging * {
+  cursor: default !important;
+}
+
+.dragging [data-component='true'] {
+  cursor: grabbing !important;
+}
+
+.dragging .drop-target {
+  cursor: grab !important;
+  outline: 2px dashed #4482ff !important;
+  outline-offset: -2px;
+}
+
+.dragging .no-drop-target {
+  cursor: no-drop !important;
+  outline: 2px dashed #e63946 !important;
+  outline-offset: -2px;
+}
+
+[data-component='true'] {
+  cursor: pointer;
+}
+
+.carousel-container {
+  li[aria-hidden='false'] {
+    div {
+      display: block;
+    }
+  }
+}
+
+.posts-slider-carousel {
+  width: 100%;
+
+  .react-multi-carousel-track {
+    align-items: stretch;
+  }
+}
+
+.posts-slider-dots {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+  padding: 0;
+  list-style: none;
+}
+
+.posts-slider-dots li button {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  border: none;
+  background: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+
+.posts-slider-dots li.react-multi-carousel-dot--active button {
+  background: rgba(0, 0, 0, 0.6);
+}

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript'
+  ]
+};

package/bin/pz-generate-routes.js

@@ -0,0 +1,115 @@
+#!/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]',
+    '[session]',
+    '[segment]',
+    '[url]',
+    '[theme]',
+    '[member_type]'
+  ];
+  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-install-plugins.js

@@ -26,7 +26,7 @@ try {
   process.exit(1);
 }
 
-const protectedPackages = ['@akinon/next', 'next'];
+const protectedPackages = ['@akinon/next', '@akinon/pz-theme', 'next'];
 
 const pluginsToRemove = Object.keys(packageJson.dependencies || {}).filter(
   (dep) =>

package/bin/pz-prebuild.js

@@ -5,3 +5,4 @@ const runScript = require('./run-script');
 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/bin/pz-run-tests.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
+const findBaseDir = require('../utils/find-base-dir');
+const checkMonorepo = require('../utils/check-monorepo');
+
+const IS_MONOREPO = checkMonorepo() !== null;
+const BASE_DIR = findBaseDir();
+const PLUGINS = require(path.join(BASE_DIR, 'src', 'plugins.js'));
+
+function findPluginTestFiles(akinonNextPackagePath) {
+  const pluginsRootPath = path.join(
+    akinonNextPackagePath,
+    '..',
+    '..',
+    IS_MONOREPO ? 'packages' : '@akinon'
+  );
+
+  if (!fs.existsSync(pluginsRootPath)) {
+    console.log('Plugins directory not found:', pluginsRootPath);
+    return [];
+  }
+
+  return PLUGINS.reduce((testFiles, pluginName) => {
+    const pluginDirectoryPath = path.join(pluginsRootPath, pluginName);
+    if (fs.existsSync(pluginDirectoryPath)) {
+      const pluginTestFiles = glob.sync('**/*.test.ts', {
+        cwd: pluginDirectoryPath,
+        absolute: true
+      });
+
+      return testFiles.concat(pluginTestFiles);
+    } else {
+      console.log(`Plugin directory not found: ${pluginName}`);
+    }
+    return testFiles;
+  }, []);
+}
+
+function isJestInstalled() {
+  try {
+    const jestExecutablePath = path.join(
+      BASE_DIR,
+      'node_modules',
+      '.bin',
+      'jest'
+    );
+    return fs.existsSync(jestExecutablePath);
+  } catch (error) {
+    return false;
+  }
+}
+
+function getAkinonNextPackagePath() {
+  if (!IS_MONOREPO) {
+    return path.resolve(__dirname, '..');
+  }
+
+  return path.resolve(__dirname, '../../../packages/akinon-next');
+}
+
+if (!isJestInstalled()) {
+  console.error('\x1b[31mError: Jest is not installed in the project!\x1b[0m');
+  console.error(
+    'Please install all dependencies by running one of the following commands:'
+  );
+  console.error('  npm install');
+  console.error('  yarn install');
+  process.exit(1);
+}
+
+const jestExecutablePath = path.join(BASE_DIR, 'node_modules', '.bin', 'jest');
+const akinonNextPackagePath = getAkinonNextPackagePath();
+
+const testFiles = [
+  ...glob.sync('__tests__/**/*.test.ts', {
+    cwd: akinonNextPackagePath,
+    absolute: true
+  }),
+  ...findPluginTestFiles(akinonNextPackagePath)
+];
+
+console.log(`Found ${testFiles.length} test files to run`);
+
+const jestArguments = [
+  ...testFiles,
+  `--config ${path.join(akinonNextPackagePath, 'jest.config.js')}`,
+  '--runTestsByPath',
+  '--passWithNoTests'
+];
+
+spawn(jestExecutablePath, jestArguments, {
+  cwd: akinonNextPackagePath,
+  stdio: 'inherit',
+  shell: true
+});