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

package/.eslintrc.js

@@ -24,6 +24,18 @@ module.exports = {
       parserOptions: {
         sourceType: 'script'
       }
+    },
+    {
+      env: {
+        node: true
+      },
+      files: ['redux/middlewares/pre-order/index.ts'],
+      rules: {
+        '@akinon/projectzero/check-pre-order-middleware-order': 'error'
+      },
+      parserOptions: {
+        sourceType: 'script'
+      }
     }
   ],
   parser: '@typescript-eslint/parser',

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @akinon/next
 
+## 2.0.0-beta.11
+
+### Minor Changes
+
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+
+## 2.0.0-beta.10
+
+### Minor Changes
+
+- 2806320: ZERO-3390: Update version tailwindcss, autoprefixer, tailwind-merge, postcss
+
+## 2.0.0-beta.9
+
+### Minor Changes
+
+- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+
+## 2.0.0-beta.8
+
+### Minor Changes
+
+- 071d0f5: ZERO-3352: Resolve Single item size exceeds maxSize error and upgrade dependencies
+
+## 2.0.0-beta.7
+
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
+## 2.0.0-beta.5
+
+### Minor Changes
+
+- e791eab: ZERO-3133: Add fallbackReducer for handling missing plugin reducers
+
+## 2.0.0-beta.4
+
+## 2.0.0-beta.3
+
+### Minor Changes
+
+- 5536b80: ZERO-3104: Add optional headers parameter
+
+## 2.0.0-beta.2
+
+### Minor Changes
+
+- a006015: ZERO-3116: Add not-found page and update default middleware.
+- 999168d: ZERO-3104: Remove local cache handler from CacheHandler initialization
+- 1eeb3d8: ZERO-3116: Add not found page
+- 86a5a62: ZERO-3104: Add optional headers parameter to data fetching functions
+- dd69cc6: ZERO-3079: Modularize pre-order middleware
+
 ## 2.0.0-beta.1
 
 ### Minor Changes

package/__tests__/next-config.test.ts

@@ -0,0 +1,83 @@
+import { resolve } from 'path';
+import type { NextConfig } from 'next';
+
+function findBaseDir() {
+  const insideNodeModules = __dirname.includes('node_modules');
+
+  if (insideNodeModules) {
+    return resolve(__dirname, '../../../../');
+  } else {
+    return resolve(__dirname, '../../../apps/projectzeronext');
+  }
+}
+
+const baseDir = findBaseDir();
+
+jest.mock('next-pwa', () => {
+  return () => (config: NextConfig) => config;
+});
+
+jest.mock('@sentry/nextjs', () => ({
+  withSentryConfig: (config: NextConfig) => config
+}));
+
+jest.mock('../with-pz-config.js', () => {
+  return (config: NextConfig) => {
+    const originalHeaders = config.headers;
+
+    config.headers = async () => {
+      const originalHeadersResult = (await originalHeaders?.()) ?? [];
+
+      return [
+        {
+          source: '/(.*)',
+          headers: [
+            {
+              key: 'Content-Security-Policy',
+              value: 'https://*.akifast.com akifast.com'
+            }
+          ]
+        },
+        ...originalHeadersResult
+      ];
+    };
+    return config;
+  };
+});
+
+interface Header {
+  key: string;
+  value: string;
+}
+
+interface HeaderGroup {
+  source: string;
+  headers: Header[];
+}
+
+const nextConfigPath = resolve(baseDir, 'next.config.mjs');
+let nextConfig: any;
+
+beforeAll(async () => {
+  nextConfig = await import(nextConfigPath);
+});
+
+describe('Next.js Configuration', () => {
+  it('should contain Content-Security-Policy header with akifast domain values', async () => {
+    const headers = nextConfig.default.headers;
+    expect(headers).toBeDefined();
+
+    const headersResult = await headers();
+
+    const cspHeaders = headersResult
+      .flatMap((headerGroup: HeaderGroup) => headerGroup.headers)
+      .filter((header: Header) => header.key === 'Content-Security-Policy');
+
+    expect(cspHeaders.length).toBeGreaterThan(0);
+
+    const lastCspHeader = cspHeaders[cspHeaders.length - 1];
+
+    expect(lastCspHeader.value).toContain('akifast.com');
+    expect(lastCspHeader.value).toContain('https://*.akifast.com');
+  });
+});

package/__tests__/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "allowJs": true
+  },
+  "exclude": ["node_modules"],
+  "include": [".", "../."]
+}

package/api/auth.ts

@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import NextAuth, { Session } from 'next-auth';
+import NextAuth, { Session, NextAuthOptions } from 'next-auth';
 import CredentialProvider from 'next-auth/providers/credentials';
 import { ROUTES } from 'routes';
 import { URLS, user } from '../data/urls';
@@ -7,6 +7,8 @@ import Settings from 'settings';
 import { urlLocaleMatcherRegex } from '../utils';
 import logger from '@akinon/next/utils/log';
 import { AuthError } from '../types';
+import getRootHostname from '../utils/get-root-hostname';
+import { LocaleUrlStrategy } from '../localization';
 
 async function getCurrentUser(sessionId: string, currency = '') {
   const headers = {
@@ -40,7 +42,15 @@ async function getCurrentUser(sessionId: string, currency = '') {
   };
 }
 
-const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
+type CustomNextAuthOptions = (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => Partial<NextAuthOptions>;
+
+const defaultNextAuthOptions = (
+  req: NextApiRequest,
+  res: NextApiResponse
+): NextAuthOptions => {
   return {
     providers: [
       CredentialProvider({
@@ -92,11 +102,28 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
             req.headers['x-app-device']?.toString() ?? ''
           );
 
+          headers.set('x-frontend-id', req.cookies['pz-frontend-id'] || '');
+
           logger.debug('Trying to login/register', {
             formType: credentials.formType,
             userIp
           });
 
+          const checkCurrentUser = await getCurrentUser(
+            req.cookies['osessionid'] ?? '',
+            req.cookies['pz-currency'] ?? ''
+          );
+
+          if (checkCurrentUser?.pk) {
+            const sessionCookie = headers
+              .get('cookie')
+              ?.match(/osessionid=\w+/)?.[0]
+              .replace(/osessionid=/, '');
+            if (sessionCookie) {
+              headers.set('cookie', sessionCookie);
+            }
+          }
+
           const apiRequest = await fetch(
             `${Settings.commerceUrl}${user[credentials.formType]}`,
             {
@@ -133,7 +160,19 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
 
           if (sessionId) {
             const maxAge = 30 * 24 * 60 * 60; // 30 days in seconds
-            const cookieOptions = `Path=/; HttpOnly; Secure; Max-Age=${maxAge}`;
+            const { localeUrlStrategy } = Settings.localization;
+
+            const fallbackHost =
+              req.headers['x-forwarded-host']?.toString() ||
+              req.headers.host?.toString();
+            const hostname =
+              process.env.NEXT_PUBLIC_URL || `https://${fallbackHost}`;
+            const rootHostname =
+              localeUrlStrategy === LocaleUrlStrategy.Subdomain
+                ? getRootHostname(hostname)
+                : null;
+            const domainOption = rootHostname ? `Domain=${rootHostname};` : '';
+            const cookieOptions = `Path=/; HttpOnly; Secure; Max-Age=${maxAge}; ${domainOption}`;
 
             res.setHeader('Set-Cookie', [
               `osessionid=${sessionId}; ${cookieOptions}`,
@@ -236,8 +275,36 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
   };
 };
 
-const Auth = (req, res) => {
-  return NextAuth(req, res, nextAuthOptions(req, res));
+const Auth = (
+  req: NextApiRequest,
+  res: NextApiResponse,
+  customOptions?: CustomNextAuthOptions
+) => {
+  const baseOptions = defaultNextAuthOptions(req, res);
+  const customOptionsResult = customOptions ? customOptions(req, res) : {};
+
+  const mergedOptions = {
+    ...baseOptions,
+    ...customOptionsResult,
+    providers: [
+      ...baseOptions.providers,
+      ...(customOptionsResult.providers || [])
+    ],
+    callbacks: {
+      ...baseOptions.callbacks,
+      ...customOptionsResult.callbacks
+    },
+    events: {
+      ...baseOptions.events,
+      ...customOptionsResult.events
+    },
+    pages: {
+      ...baseOptions.pages,
+      ...customOptionsResult.pages
+    }
+  };
+
+  return NextAuth(req, res, mergedOptions);
 };
 
 export default Auth;

package/api/client.ts

@@ -5,6 +5,8 @@ import logger from '../utils/log';
 import formatCookieString from '../utils/format-cookie-string';
 import cookieParser from 'set-cookie-parser';
 import { cookies } from 'next/headers';
+import getRootHostname from '../utils/get-root-hostname';
+import { LocaleUrlStrategy } from '../localization';
 
 interface RouteParams {
   params: {
@@ -191,8 +193,23 @@ async function proxyRequest(...args) {
     const responseHeaders: any = {};
 
     if (filteredCookies.length > 0) {
+      const { localeUrlStrategy } = settings.localization;
+
+      const fallbackHost =
+        req.headers.get('x-forwarded-host') || req.headers.get('host');
+      const hostname = process.env.NEXT_PUBLIC_URL || `https://${fallbackHost}`;
+      const rootHostname =
+        localeUrlStrategy === LocaleUrlStrategy.Subdomain
+          ? getRootHostname(hostname)
+          : null;
+
       responseHeaders['set-cookie'] = filteredCookies
-        .map(formatCookieString)
+        .map((cookie) => {
+          if (!cookie.domain && rootHostname) {
+            cookie.domain = rootHostname;
+          }
+          return formatCookieString(cookie);
+        })
         .join(', ');
     }
 

package/babel.config.js

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

package/bin/pz-prebuild.js

@@ -2,6 +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');

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
+});

package/bin/run-prebuild-tests.js

@@ -0,0 +1,46 @@
+const path = require('path')
+const fs = require('fs')
+
+function runPrebuildTests() {
+  const workspaceRoot = process.cwd()
+  const configPath = path.join(workspaceRoot, 'config/prebuild-tests.json')
+
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, 'utf8'))
+
+    if (config.tests && Array.isArray(config.tests)) {
+      for (const testScript of config.tests) {
+        console.log(`🧪 Running test script: ${testScript}`)
+        const result = require('child_process').spawnSync('yarn', [testScript], {
+          stdio: 'inherit',
+          shell: true
+        })
+
+        if (result.status !== 0) {
+          console.error(`❌ Test script '${testScript}' failed`)
+          process.exit(1)
+        }
+      }
+      console.log('✅ All prebuild tests passed successfully!')
+    }
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      console.log('🧪 Running default test: test:middleware')
+      const result = require('child_process').spawnSync('yarn', ['test:middleware'], {
+        stdio: 'inherit',
+        shell: true
+      })
+
+      if (result.status !== 0) {
+        console.error('❌ Middleware test failed')
+        process.exit(1)
+      }
+      console.log('✅ Default test passed successfully!')
+    } else {
+      console.error('❌ Error reading test configuration:', error)
+      process.exit(1)
+    }
+  }
+}
+
+module.exports = runPrebuildTests

package/components/accordion.tsx

@@ -22,7 +22,7 @@ export const Accordion = ({
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
         className
       )}
     >

package/components/button.tsx

@@ -1,46 +1,61 @@
 'use client';
 
-import { ButtonProps } from '../types/index';
+import { ButtonProps } from '../types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Link } from './link';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200 cursor-pointer',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/components/client-root.tsx

@@ -1,6 +1,9 @@
 'use client';
 
 import { useMobileIframeHandler } from '../hooks';
+import * as Sentry from '@sentry/nextjs';
+import { initSentry } from '../sentry';
+import { useEffect } from 'react';
 
 export default function ClientRoot({
   children,
@@ -11,6 +14,23 @@ export default function ClientRoot({
 }) {
   const { preventPageRender } = useMobileIframeHandler({ sessionId });
 
+  const initializeSentry = async () => {
+    const response = await fetch('/api/sentry', { next: { revalidate: 0 } });
+    const data = await response.json();
+
+    const options = {
+      dsn: data.dsn
+    };
+
+    initSentry('Client', options);
+  };
+
+  useEffect(() => {
+    if (!Sentry.isInitialized()) {
+      initializeSentry();
+    }
+  }, []);
+
   if (preventPageRender) {
     return null;
   }

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-none', // disable outline on focus
+      'focus-visible:outline-hidden', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'

package/components/modal.tsx

@@ -38,7 +38,7 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary/60 z-50" />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',

package/components/price.tsx

@@ -55,8 +55,8 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
       : formattedValue;
 
   const currentCurrencyDecimalScale = Settings.localization.currencies.find(
-    (currency) => currency.code === currencyCode_
-  ).decimalScale;
+    (currency) => currency?.code === currencyCode_
+  )?.decimalScale;
 
   return (
     <NumericFormat