@akinon/next 1.91.0-rc.3 → 1.91.0-rc.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @akinon/next
 
+## 1.91.0-rc.5
+
+### Minor Changes
+
+- 99b6e7b: ZERO-3421: Enhance Sentry error handling by adding network error detection logic and refining initialization options
+
+## 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

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.91.0-rc.3",
+  "version": "1.91.0-rc.5",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -34,7 +34,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.91.0-rc.3",
+    "@akinon/eslint-plugin-projectzero": "1.91.0-rc.5",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",

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/sentry/index.ts

@@ -13,36 +13,73 @@ const ALLOWED_CLIENT_LOG_TYPES: ClientLogType[] = [
   ClientLogType.CHECKOUT
 ];
 
+const isNetworkError = (exception: unknown): boolean => {
+  if (!(exception instanceof Error)) return false;
+
+  const networkErrorPatterns = [
+    'networkerror',
+    'failed to fetch',
+    'network request failed',
+    'network error',
+    'loading chunk',
+    'chunk load failed'
+  ];
+
+  if (exception.name === 'NetworkError') return true;
+
+  if (exception.name === 'TypeError') {
+    return networkErrorPatterns.some((pattern) =>
+      exception.message.toLowerCase().includes(pattern)
+    );
+  }
+
+  return networkErrorPatterns.some((pattern) =>
+    exception.message.toLowerCase().includes(pattern)
+  );
+};
+
 export const initSentry = (
   type: 'Server' | 'Client' | 'Edge',
   options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {}
 ) => {
-  // TODO: Handle options with ESLint rules
+  // TODO: Remove Zero Project DSN
 
-  Sentry.init({
+  const baseConfig = {
     dsn:
-      options.dsn ||
       SENTRY_DSN ||
+      options.dsn ||
       'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
     initialScope: {
       tags: {
         APP_TYPE: 'ProjectZeroNext',
-        TYPE: type
+        TYPE: type,
+        ...((options.initialScope as any)?.tags || {})
       }
     },
     tracesSampleRate: 0,
-    integrations: [],
-    beforeSend: (event, hint) => {
-      if (
-        type === 'Client' &&
-        !ALLOWED_CLIENT_LOG_TYPES.includes(
-          event.tags?.LOG_TYPE as ClientLogType
-        )
-      ) {
-        return null;
-      }
+    integrations: []
+  };
 
-      return event;
-    }
-  });
+  if (type === 'Server' || type === 'Edge') {
+    Sentry.init(baseConfig);
+  } else if (type === 'Client') {
+    Sentry.init({
+      ...baseConfig,
+      beforeSend: (event, hint) => {
+        if (
+          !ALLOWED_CLIENT_LOG_TYPES.includes(
+            event.tags?.LOG_TYPE as ClientLogType
+          )
+        ) {
+          return null;
+        }
+
+        if (isNetworkError(hint?.originalException)) {
+          return null;
+        }
+
+        return event;
+      }
+    });
+  }
 };

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/with-pz-config.js

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