@akinon/next 1.104.0 → 1.105.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/next
 
+## 1.105.0
+
+### Minor Changes
+
+- c39c700: ZERO-3420: Refactor Modal component
+- d512ea2: ZERO-3656: update setLoyaltyData mutation to accept string type
+- 3b255fe: ZERO-3629 :edit warnings in build
+
 ## 1.104.0
 
 ### Minor Changes

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

@@ -21,6 +21,7 @@ enum Plugin {
   Akifast = 'pz-akifast',
   MultiBasket = 'pz-multi-basket',
   SavedCard = 'pz-saved-card',
+  Hepsipay = 'pz-hepsipay',
   FlowPayment = 'pz-flow-payment'
 }
 
@@ -47,6 +48,7 @@ export enum Component {
   AkifastCheckoutButton = 'CheckoutButton',
   MultiBasket = 'MultiBasket',
   SavedCard = 'SavedCardOption',
+  Hepsipay = 'Hepsipay',
   FlowPayment = 'FlowPayment'
 }
 
@@ -81,6 +83,7 @@ const PluginComponents = new Map([
   ],
   [Plugin.MultiBasket, [Component.MultiBasket]],
   [Plugin.SavedCard, [Component.SavedCard]],
+  [Plugin.Hepsipay, [Component.Hepsipay]],
   [Plugin.FlowPayment, [Component.FlowPayment]]
 ]);
 
@@ -146,6 +149,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'}`);
             } else if (plugin === Plugin.FlowPayment) {
               promise = import(`${'@akinon/pz-flow-payment'}`);
             }

package/data/client/checkout.ts

@@ -839,7 +839,7 @@ export const checkoutApi = api.injectEndpoints({
         method: 'GET'
       })
     }),
-    setLoyaltyData: build.mutation<CheckoutResponse, number>({
+    setLoyaltyData: build.mutation<CheckoutResponse, number | string>({
       query: (amount) => ({
         url: buildClientRequestUrl(checkout.loyaltyCardPage, {
           useFormData: true

package/middlewares/three-d-redirection.ts

@@ -4,7 +4,6 @@ import { Buffer } from 'buffer';
 import logger from '../utils/log';
 import { getUrlPathWithLocale } from '../utils/localization';
 import { PzNextRequest } from '.';
-import { ServerVariables } from '../utils/server-variables';
 
 const streamToString = async (stream: ReadableStream<Uint8Array> | null) => {
   if (stream) {

package/package.json

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

package/plugins.js

@@ -16,5 +16,6 @@ module.exports = [
   'pz-tabby-extension',
   'pz-apple-pay',
   'pz-tamara-extension',
+  'pz-hepsipay',
   'pz-flow-payment'
 ];

package/types/index.ts

@@ -346,3 +346,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;
+}