@akinon/next 1.91.0-rc.2 → 1.91.0-rc.4

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @akinon/next
 
+## 1.91.0-rc.4
+
+### Minor Changes
+
+- 7eb51ca: ZERO-3424 :Update package versions
+- c39c700: ZERO-3420: Refactor Modal component
+- 0de5573: ZERO-3418: Update remotePatterns hostname to allow all subdomains
+- 9dc7298: ZERO-3416: Refactor Accordion component to enhance props and improve styling flexibility
+- 2d3f178: ZERO-3417: Enhance FileInput component with additional props for customization
+
+## 1.91.0-rc.3
+
+### Minor Changes
+
+- 5dfeea04: ZERO-2801: Revert ZERO-2801
+- 823d82f9: ZERO-3393: Enhance error handling in checkout middleware to ensure errors are checked for existence before processing
+- 63774a6a: ZERO-3351: Add commerce redirection ignore list functionality and related utility
+- 2d9b2b2c: ZERO-2816: Add segment to headers
+- 5e1feca6: Revert "ZERO-3286: Add notFound handling for chunk URLs starting with \_next"
+- d8fad39f: ZERO-3370: include plugins test to build stage
+- 40a46853: ZERO-3182: Optimize basket update mutation with optimistic update
+- 68bbcb27: ZERO-3393: Fix error handling in checkout middleware to check for errors array length
+- 25524867: ZERO-3391: Add subdomain support to setLocale function
+- f49bb74f: ZERO-3097: Add setCookie to logging in payment redirection middlewares
+- e9541a13: ZERO-2816: Add headers to url
+- 9b7d0de6: ZERO-3393: Improve error handling in checkout middleware to support both object and array error formats
+- 72fd4d67: ZERO-3084: Fix URL search parameters encoding in default middleware
+- c53ef7b9: ZERO-2668: The Link component has been updated to improve the logic for handling href values. Previously, if the href was not a string or started with 'http', it would return the href as is. Now, if the href is not provided, it will default to '#' to prevent any potential errors. Additionally, if the href is a string and does not start with 'http', it will be formatted with the locale and pathname, based on the localeUrlStrategy and defaultLocaleValue. This ensures that the correct href is generated based on the localization settings.
+- f8e4cac6: ZERO-3343: restrict root hostname to only locale subdomains
+- 64699d3f: ZERO-2761: Fix invalid import for plugin module
+- 832bee36: ZERO-3343: add domain to cookie for subdomain locale strategy
+- e974d8e8: ZERO-3406: Fix rc build
+- 28a59d49: ZERO-3400: refactor cookie domain logic using fallback host
+- 8feabe9a: ZERO-3343: add custom NextAuth options support
+- bf354de4: ZERO-3321: add babel compiler for akinon/next test
+- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
+- d552629f: ZERO-3182: Refactor basketApi to use invalidatesTags and comment out onQueryStarted logic
+- 448adefb: ZERO-3321: move csp test to akinon-next
+- 17f87524: ZERO-2816: Make the incoming currency lowercase
+- 65d3b862: ZERO-3054: Update headers in appFetch
+- bbe18b9f: ZERO-2575: Fix build error
+- 17bfadc4: ZERO-3275: Disable OpenTelemetry monitoring in production environment
+- 4920742c: Disable getCachedTranslations
+- b6e5b624: ZERO-3257: Enhance locale middleware to redirect using existing or default locale and support 303 status for POST requests
+- 6c3629c2: ZERO-3321: fix jest tests in akinon-next for standalone projects
+- 6bc260be: ZERO-3295: update default tailwind content list
+- 7e56d6b6: ZERO-2841: Update api tagTypes
+- dfaceffd: ZERO-3356: Add useLoyaltyAvailability hook and update checkout state management
+- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
+- 43c182ee: ZERO-3054: Update Redis variable checks to conditionally include CACHE_SECRET
+- 943a239e: ZERO-3370: add allowJs in akinon-next test tsconfig
+- 068dc394: ZERO-3343: update get-root-hostname logic
+- 942490f2: ZERO-3295: move third party tailwind content list to akinon-next
+- eeb20bea: Revert "ZERO-3054: Refactor cache handler to use custom Redis handler and implement key hashing"
+- 3bf63c8a: ZERO-3286: Add notFound handling for chunk URLs starting with \_next
+- 9be2c081: ZERO-3243: Improve basket update query handling with optimistic updates
+- f2c92d5c: ZERO-2816: Update cookie name
+- 7bd3d992: ZERO-2801: Refactor locale middleware to handle single locale configuration
+- b6d5bda2: ZERO-3343: update changeset config
+- fdd255ee: ZERO-3054: Refactor cache handler to use custom Redis handler and implement key hashing
+- acf03209: ZERO-3321: remove babel config
+- 387356b6: ZERO-3323: Refactor locale filtering logic in URL matcher regex
+- 49eeebfa: ZERO-2909: Add deleteCollectionItem query to wishlistApi
+- 3f9b8d7e: ZERO-2761: Update plugins.js for akinon-next
+- b2ee69b9: ZERO-3321: delete unnecessary files
+- 0cabbda3: ZERO-3370: replace inline monorepo check with reusable utility
+
 ## 1.91.0-rc.2
 
 ### Minor Changes

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({
@@ -150,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}`,
@@ -253,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: {
@@ -190,8 +192,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/components/accordion.tsx

@@ -7,15 +7,19 @@ 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);
 
@@ -27,15 +31,22 @@ export const Accordion = ({
       )}
     >
       <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/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/modal.tsx

@@ -4,16 +4,7 @@ import { ReactPortal } from './react-portal';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
 import { useEffect } from 'react';
-
-export interface ModalProps {
-  portalId: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
-  title?: React.ReactNode;
-  showCloseButton?: React.ReactNode;
-  className?: string;
-}
+import { ModalProps } from '../types';
 
 export const Modal = (props: ModalProps) => {
   const {
@@ -23,7 +14,14 @@ export const Modal = (props: ModalProps) => {
     setOpen,
     title = '',
     showCloseButton = true,
-    className
+    className,
+    overlayClassName,
+    headerWrapperClassName,
+    titleClassName,
+    closeButtonClassName,
+    iconName = 'close',
+    iconSize = 16,
+    iconClassName
   } = props;
 
   useEffect(() => {
@@ -38,7 +36,12 @@ 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={twMerge(
+          'fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50',
+          overlayClassName
+        )}
+      />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
@@ -46,15 +49,28 @@ export const Modal = (props: ModalProps) => {
         )}
       >
         {(showCloseButton || title) && (
-          <div className="flex px-6 py-4 border-b border-gray-400">
-            {title && <h3 className="text-lg font-light">{title}</h3>}
+          <div
+            className={twMerge(
+              'flex px-6 py-4 border-b border-gray-400',
+              headerWrapperClassName
+            )}
+          >
+            {title && (
+              <h3 className={twMerge('text-lg font-light', titleClassName)}>
+                {title}
+              </h3>
+            )}
             {showCloseButton && (
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="ml-auto"
+                className={twMerge('ml-auto', closeButtonClassName)}
               >
-                <Icon name="close" size={16} />
+                <Icon
+                  name={iconName}
+                  size={iconSize}
+                  className={iconClassName}
+                />
               </button>
             )}
           </div>

package/components/plugin-module.tsx

@@ -20,7 +20,8 @@ enum Plugin {
   B2B = 'pz-b2b',
   Akifast = 'pz-akifast',
   MultiBasket = 'pz-multi-basket',
-  SavedCard = 'pz-saved-card'
+  SavedCard = 'pz-saved-card',
+  Hepsipay = 'pz-hepsipay'
 }
 
 export enum Component {
@@ -45,7 +46,8 @@ export enum Component {
   AkifastQuickLoginButton = 'QuickLoginButton',
   AkifastCheckoutButton = 'CheckoutButton',
   MultiBasket = 'MultiBasket',
-  SavedCard = 'SavedCardOption'
+  SavedCard = 'SavedCardOption',
+  Hepsipay = 'Hepsipay'
 }
 
 const PluginComponents = new Map([
@@ -78,7 +80,8 @@ const PluginComponents = new Map([
     [Component.AkifastQuickLoginButton, Component.AkifastCheckoutButton]
   ],
   [Plugin.MultiBasket, [Component.MultiBasket]],
-  [Plugin.SavedCard, [Component.SavedCard]]
+  [Plugin.SavedCard, [Component.SavedCard]],
+  [Plugin.Hepsipay, [Component.Hepsipay]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -143,6 +146,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-multi-basket'}`);
             } else if (plugin === Plugin.SavedCard) {
               promise = import(`${'@akinon/pz-saved-card'}`);
+            } else if (plugin === Plugin.Hepsipay) {
+              promise = import(`${'@akinon/pz-hepsipay'}`);
             }
           } catch (error) {
             logger.error(error);

package/middlewares/default.ts

@@ -19,6 +19,8 @@ import withLocale from './locale';
 import logger from '../utils/log';
 import { user } from '../data/urls';
 import { getUrlPathWithLocale } from '../utils/localization';
+import getRootHostname from '../utils/get-root-hostname';
+import { LocaleUrlStrategy } from '../localization';
 
 const withPzDefault =
   (middleware: NextMiddleware) =>
@@ -296,7 +298,7 @@ const withPzDefault =
                                 !req.middlewareParams.found &&
                                 Settings.customNotFoundEnabled
                               ) {
-                                let pathname = url.pathname
+                                const pathname = url.pathname
                                   .replace(/\/+$/, '')
                                   .split('/');
                                 url.pathname = url.pathname.replace(
@@ -341,6 +343,21 @@ const withPzDefault =
                                 middlewareResult = NextResponse.rewrite(url);
                               }
 
+                              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;
+
                               if (
                                 !url.pathname.startsWith(`/${currency}/orders`)
                               ) {
@@ -350,6 +367,7 @@ const withPzDefault =
                                     ? locale
                                     : defaultLocaleValue,
                                   {
+                                    domain: rootHostname,
                                     sameSite: 'none',
                                     secure: true,
                                     expires: new Date(
@@ -358,10 +376,12 @@ const withPzDefault =
                                   }
                                 );
                               }
+
                               middlewareResult.cookies.set(
                                 'pz-currency',
                                 currency,
                                 {
+                                  domain: rootHostname,
                                   sameSite: 'none',
                                   secure: true,
                                   expires: new Date(
@@ -410,7 +430,10 @@ const withPzDefault =
                                   ).json();
                                   middlewareResult.cookies.set(
                                     'csrftoken',
-                                    csrf_token
+                                    csrf_token,
+                                    {
+                                      domain: rootHostname
+                                    }
                                   );
                                 }
                               } catch (error) {

package/middlewares/locale.ts

@@ -13,7 +13,8 @@ const getMatchedLocale = (pathname: string, req: PzNextRequest) => {
   const { localeUrlStrategy, defaultLocaleValue } = settings.localization;
 
   if (localeUrlStrategy === LocaleUrlStrategy.Subdomain) {
-    const host = req.headers.get('x-forwarded-host');
+    const host =
+      req.headers.get('x-forwarded-host') || req.headers.get('host') || '';
 
     if (host) {
       const subDomain = host.split('.')[0] || '';
@@ -44,7 +45,9 @@ const withLocale =
     try {
       const url = req.nextUrl.clone();
       const matchedLocale = getMatchedLocale(url.pathname, req);
-      let { localeUrlStrategy, defaultLocaleValue, redirectToDefaultLocale } =
+      let { localeUrlStrategy } = settings.localization;
+
+      const { defaultLocaleValue, redirectToDefaultLocale } =
         settings.localization;
 
       localeUrlStrategy =

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.91.0-rc.2",
+  "version": "1.91.0-rc.4",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -34,7 +34,11 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.91.0-rc.2",
+    "@akinon/eslint-plugin-projectzero": "1.91.0-rc.4",
+    "@babel/core": "7.26.10",
+    "@babel/preset-env": "7.26.9",
+    "@babel/preset-typescript": "7.27.0",
+    "@types/jest": "29.5.14",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",

package/plugins.js

@@ -15,5 +15,6 @@ module.exports = [
   'pz-saved-card',
   'pz-tabby-extension',
   'pz-apple-pay',
-  'pz-tamara-extension'
+  'pz-tamara-extension',
+  'pz-hepsipay'
 ];

package/tailwind/content.js

@@ -0,0 +1,16 @@
+const defaultPlugins = require('../plugins');
+
+const getAkinonNextContent = (plugins = defaultPlugins) => {
+  return [
+    `./node_modules/@akinon/next/components/**/*.{js,ts,jsx,tsx}`,
+    `../../node_modules/@akinon/next/components/**/*.{js,ts,jsx,tsx}`,
+    ...plugins
+      .map((plugin) => [
+        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
+        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
+      ])
+      .flat()
+  ];
+};
+
+module.exports = getAkinonNextContent;

package/types/index.ts

@@ -283,7 +283,13 @@ export interface ButtonProps
   target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
-export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+export interface FileInputProps extends React.HTMLProps<HTMLInputElement> {
+  fileClassName?: string;
+  fileNameWrapperClassName?: string;
+  fileInputClassName?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  buttonClassName?: string;
+}
 
 export interface PriceProps {
   currencyCode?: string;
@@ -304,15 +310,19 @@ export interface InputProps extends React.HTMLProps<HTMLInputElement> {
 
 export interface AccordionProps {
   isCollapse?: boolean;
+  collapseClassName?: string;
   title?: string;
   subTitle?: string;
   icons?: string[];
   iconSize?: number;
   iconColor?: string;
   children?: ReactNode;
+  headerClassName?: string;
   className?: string;
   titleClassName?: string;
+  subTitleClassName?: string;
   dataTestId?: string;
+  contentClassName?: string;
 }
 
 export interface PluginModuleComponentProps {
@@ -337,3 +347,20 @@ export interface PaginationProps {
   direction?: 'next' | 'prev';
   isLoading?: boolean;
 }
+
+export interface ModalProps {
+  portalId: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  title?: React.ReactNode;
+  showCloseButton?: React.ReactNode;
+  className?: string;
+  overlayClassName?: string;
+  headerWrapperClassName?: string;
+  titleClassName?: string;
+  closeButtonClassName?: string;
+  iconName?: string;
+  iconSize?: number;
+  iconClassName?: string;
+}

package/utils/get-root-hostname.ts

@@ -0,0 +1,28 @@
+import Settings from 'settings';
+
+export default function getRootHostname(
+  url: string | undefined
+): string | null {
+  if (!url) return null;
+
+  try {
+    const urlObj = new URL(url);
+    const hostname = urlObj.hostname;
+    const parts = hostname.split('.');
+
+    const firstPart = parts[0];
+
+    const isLocale = Settings.localization.locales.some(
+      (locale) => locale.value === firstPart
+    );
+
+    if (isLocale) {
+      const hostnameAfterLocale = parts.slice(1).join('.');
+      return `.${hostnameAfterLocale}`;
+    }
+
+    return `.${hostname}`;
+  } catch {
+    return null;
+  }
+}

package/with-pz-config.js

@@ -16,12 +16,8 @@ const defaultConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: '**.akinoncloud.com'
+        hostname: '**'
       },
-      {
-        protocol: 'https',
-        hostname: '**.akinoncdn.com'
-      }
     ]
   },
   modularizeImports: {