@akinon/next 2.0.0-beta.12 → 2.0.0-beta.13

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/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,14 @@ enum Plugin {
   B2B = 'pz-b2b',
   Akifast = 'pz-akifast',
   MultiBasket = 'pz-multi-basket',
-  SavedCard = 'pz-saved-card'
+  SavedCard = 'pz-saved-card',
+  FlowPayment = 'pz-flow-payment',
+  VirtualTryOn = 'pz-virtual-try-on',
+  Hepsipay = 'pz-hepsipay',
+  MasterpassRest = 'pz-masterpass-rest',
+  SimilarProducts = 'pz-similar-products',
+  Haso = 'pz-haso',
+  GooglePay = 'pz-google-pay'
 }
 
 export enum Component {
@@ -45,7 +52,22 @@ export enum Component {
   AkifastQuickLoginButton = 'QuickLoginButton',
   AkifastCheckoutButton = 'CheckoutButton',
   MultiBasket = 'MultiBasket',
-  SavedCard = 'SavedCardOption'
+  SavedCard = 'SavedCardOption',
+  VirtualTryOnPlugin = 'VirtualTryOnPlugin',
+  BasketVirtualTryOn = 'BasketVirtualTryOn',
+  IyzicoSavedCard = 'IyzicoSavedCardOption',
+  Hepsipay = 'Hepsipay',
+  FlowPayment = 'FlowPayment',
+  MasterpassRest = 'MasterpassRestOption',
+  SimilarProductsModal = 'SimilarProductsModal',
+  SimilarProductsFilterSidebar = 'SimilarProductsFilterSidebar',
+  SimilarProductsResultsGrid = 'SimilarProductsResultsGrid',
+  SimilarProductsPlugin = 'SimilarProductsPlugin',
+  ProductImageSearchFeature = 'ProductImageSearchFeature',
+  ImageSearchButton = 'ImageSearchButton',
+  HeaderImageSearchFeature = 'HeaderImageSearchFeature',
+  HasoPaymentGateway = 'HasoPaymentGateway',
+  GooglePay = 'GooglePay'
 }
 
 const PluginComponents = new Map([
@@ -78,7 +100,29 @@ const PluginComponents = new Map([
     [Component.AkifastQuickLoginButton, Component.AkifastCheckoutButton]
   ],
   [Plugin.MultiBasket, [Component.MultiBasket]],
-  [Plugin.SavedCard, [Component.SavedCard]]
+  [
+    Plugin.SimilarProducts,
+    [
+      Component.SimilarProductsModal,
+      Component.SimilarProductsFilterSidebar,
+      Component.SimilarProductsResultsGrid,
+      Component.SimilarProductsPlugin,
+      Component.ProductImageSearchFeature,
+      Component.ImageSearchButton,
+      Component.HeaderImageSearchFeature
+    ]
+  ],
+  [Plugin.SavedCard, [Component.SavedCard, Component.IyzicoSavedCard]],
+  [Plugin.SavedCard, [Component.SavedCard]],
+  [Plugin.FlowPayment, [Component.FlowPayment]],
+  [
+    Plugin.VirtualTryOn,
+    [Component.VirtualTryOnPlugin, Component.BasketVirtualTryOn]
+  ],
+  [Plugin.Hepsipay, [Component.Hepsipay]],
+  [Plugin.MasterpassRest, [Component.MasterpassRest]],
+  [Plugin.Haso, [Component.HasoPaymentGateway]],
+  [Plugin.GooglePay, [Component.GooglePay]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -143,6 +187,20 @@ 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'}`);
+            } else if (plugin === Plugin.VirtualTryOn) {
+              promise = import(`${'@akinon/pz-virtual-try-on'}`);
+            } else if (plugin === Plugin.MasterpassRest) {
+              promise = import(`${'@akinon/pz-masterpass-rest'}`);
+            } else if (plugin === Plugin.SimilarProducts) {
+              promise = import(`${'@akinon/pz-similar-products'}`);
+            } else if (plugin === Plugin.Haso) {
+              promise = import(`${'@akinon/pz-haso'}`);
+            } else if (plugin === Plugin.GooglePay) {
+              promise = import(`${'@akinon/pz-google-pay'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/select.tsx

@@ -41,7 +41,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         ref={ref}
         className={twMerge(
           clsx(
-            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-hidden',
+            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
             !borderless &&
               'border border-gray-200 transition-all duration-150 hover:border-primary'
           ),
@@ -59,7 +59,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         ))}
       </select>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </label>
   );

package/components/selected-payment-option-view.tsx

@@ -16,6 +16,7 @@ const paymentTypeToView = {
   gpay: 'gpay',
   loyalty_money: 'loyalty',
   masterpass: 'credit-card',
+  masterpass_rest: 'masterpass-rest',
   pay_on_delivery: 'pay-on-delivery',
   redirection: 'redirection',
   saved_card: 'saved-card'
@@ -57,6 +58,26 @@ export default function SelectedPaymentOptionView({
           ) {
             const mod = await import('@akinon/pz-apple-pay');
 
+            return typeof mod?.default === 'function'
+              ? mod.default
+              : fallbackView;
+          } else if (
+            payment_option?.payment_type === 'wallet' &&
+            wallet_method === 'cybersource_uc'
+          ) {
+            const mod = await import('@akinon/pz-cybersource-uc');
+
+            return typeof mod?.CyberSourceUcPaymentOption === 'function'
+              ? mod.CyberSourceUcPaymentOption
+              : fallbackView;
+          }
+
+          if (
+            payment_option?.payment_type === 'wallet' &&
+            wallet_method === 'checkout_flow'
+          ) {
+            const mod = await import('@akinon/pz-flow-payment');
+
             return typeof mod?.default === 'function'
               ? mod.default
               : fallbackView;