refactor(pci-project): refactor payment section in order to separate logic

ref: #MANAGER-19774
Signed-off-by: LIDRISSI Hamid <[email protected]>

Author: seven-amid

packages/manager/apps/pci-project/src/pages/creation/Creation.page.tsx

@@ -19,11 +19,12 @@ import {
 } from '@/data/hooks/useCart';
 import FullPageSpinner from '@/components/FullPageSpinner';
 import { useConfigForm } from './hooks/useConfigForm';
-import { useCreation } from './hooks/useCreation';
+import { useProjectCreation } from './hooks/useProjectCreation';
 import { useStepper } from './hooks/useStepper';
 import ConfigStep from './steps/ConfigStep';
 import PaymentStep from './steps/PaymentStep';
 import { useWillPayment } from './hooks/useWillPayment';
+import { usePaymentSubmission } from './hooks/usePaymentSubmission';
 
 export default function ProjectCreation() {
   const { t } = useTranslation([
@@ -88,7 +89,7 @@ export default function ProjectCreation() {
     needToCheckCustomerInfo,
     billingHref,
     handleProjectCreation,
-  } = useCreation({ t, cart, projectItem });
+  } = useProjectCreation({ t, cart, projectItem });
 
   const {
     isPaymentMethodSaveRequired,
@@ -100,6 +101,14 @@ export default function ProjectCreation() {
     handleRegisteredPaymentMethodSelected,
   } = useWillPayment();
 
+  const { handlePaymentSubmit } = usePaymentSubmission({
+    isPaymentMethodSaveRequired,
+    isPaymentMethodSaved,
+    hasDefaultPaymentMethod,
+    triggerSavePaymentMethod,
+    onProjectCreation: handleProjectCreation,
+  });
+
   useEffect(() => {
     if (isLoadingConfigForm) {
       return;
@@ -152,23 +161,6 @@ export default function ProjectCreation() {
 
   const handleCancel = useCallback(() => navigate('..'), [navigate]);
 
-  const handlePaymentSubmit = () => {
-    if (isPaymentMethodSaveRequired) {
-      triggerSavePaymentMethod();
-    } else if (hasDefaultPaymentMethod) {
-      handleProjectCreation();
-    }
-  };
-
-  /**
-   * If the payment method is saved, proceed to Creation directly
-   */
-  useEffect(() => {
-    if (isPaymentMethodSaved) {
-      handleProjectCreation();
-    }
-  }, [isPaymentMethodSaved]);
-
   if (!cart || !projectItem) {
     return <FullPageSpinner />;
   }

packages/manager/apps/pci-project/src/pages/creation/components/payment/WillPayment.component.tsx

@@ -1,6 +1,6 @@
-import { OdsSpinner } from '@ovhcloud/ods-components/react';
 import React, { lazy, Suspense, useEffect, useRef } from 'react';
 import { TWillPaymentConfig } from '@/types/WillPayment.type';
+import { setupRegisteredPaymentMethodListener } from '../../utils/paymentEvents';
 
 type WillPaymentModuleProps = {
   slotRef: React.RefObject<HTMLDivElement>;
@@ -24,7 +24,10 @@ const WillPaymentModule = lazy(() =>
       useEffect(() => {
         const { slotRef, config } = props;
 
-        // Initialize the payment module with configuration
+        if (!slotRef.current) {
+          return undefined;
+        }
+
         setUpWillPayment((slotRef.current as unknown) as HTMLSlotElement, {
           configuration: config,
         });
@@ -35,7 +38,7 @@ const WillPaymentModule = lazy(() =>
             slotRef.current.innerHTML = '';
           }
         };
-      }, [props.slotRef]);
+      }, [props.slotRef, props.config]);
 
       return null;
     },
@@ -53,20 +56,17 @@ function WillPaymentComponent({
   const slotRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (slotRef.current) {
-      slotRef.current.addEventListener(
-        'WP::USER_ACTION::REGISTERED_PM_SELECTED',
-        (event) => onRegisteredPaymentMethodSelected(event as CustomEvent),
-      );
-    }
+    const cleanup = setupRegisteredPaymentMethodListener(
+      onRegisteredPaymentMethodSelected,
+    );
+
+    return cleanup || undefined;
   }, [slotRef, onRegisteredPaymentMethodSelected]);
 
   return (
     <div id="will-payment-event-bus" ref={slotRef}>
-      <Suspense fallback={<OdsSpinner />}>
-        {slotRef.current && (
-          <WillPaymentModule slotRef={slotRef} config={config} />
-        )}
+      <Suspense>
+        <WillPaymentModule slotRef={slotRef} config={config} />
       </Suspense>
     </div>
   );

packages/manager/apps/pci-project/src/pages/creation/hooks/usePaymentSubmission.tsx

@@ -0,0 +1,52 @@
+import { useCallback, useEffect } from 'react';
+
+export type PaymentSubmissionOptions = {
+  isPaymentMethodSaveRequired: boolean;
+  isPaymentMethodSaved: boolean;
+  hasDefaultPaymentMethod: boolean;
+  triggerSavePaymentMethod: () => void;
+  onProjectCreation: () => void;
+};
+
+/**
+ * Hook that manages payment submission logic and orchestration
+ * Centralizes the decision making for when and how to proceed with payment
+ */
+export const usePaymentSubmission = ({
+  isPaymentMethodSaveRequired,
+  isPaymentMethodSaved,
+  hasDefaultPaymentMethod,
+  triggerSavePaymentMethod,
+  onProjectCreation,
+}: PaymentSubmissionOptions) => {
+  /**
+   * Handles the payment submission based on current payment state
+   */
+  const handlePaymentSubmit = useCallback(() => {
+    if (isPaymentMethodSaveRequired) {
+      // Need to save the payment method first
+      triggerSavePaymentMethod();
+    } else if (hasDefaultPaymentMethod) {
+      // Can proceed directly with project creation
+      onProjectCreation();
+    }
+  }, [
+    isPaymentMethodSaveRequired,
+    hasDefaultPaymentMethod,
+    triggerSavePaymentMethod,
+    onProjectCreation,
+  ]);
+
+  /**
+   * Auto-proceed with project creation when payment method is saved
+   */
+  useEffect(() => {
+    if (isPaymentMethodSaved) {
+      onProjectCreation();
+    }
+  }, [isPaymentMethodSaved, onProjectCreation]);
+
+  return {
+    handlePaymentSubmit,
+  };
+};

packages/manager/apps/pci-project/src/pages/creation/hooks/useCreation.tsx renamed to packages/manager/apps/pci-project/src/pages/creation/hooks/useProjectCreation.tsx

@@ -18,17 +18,17 @@ import { AntiFraudError, PCI_PROJECT_ORDER_CART } from '@/constants';
 import useAntiFraud from './useAntiFraud';
 import { payWithRegisteredPaymentMean } from '@/data/api/payment';
 
-export type UseCreationProps = {
+export type UseProjectCreationProps = {
   t: TFunction;
   cart?: Cart;
   projectItem?: OrderedProduct;
 };
 
-export const useCreation = ({
+export const useProjectCreation = ({
   t,
   cart,
   projectItem,
-}: Readonly<UseCreationProps>) => {
+}: Readonly<UseProjectCreationProps>) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [needToCheckCustomerInfo, setNeedToCheckCustomerInfo] = useState(false);
   const [billingHref, setBillingHref] = useState('');

packages/manager/apps/pci-project/src/pages/creation/hooks/useWillPayment.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useState } from 'react';
+import { GlobalStateStatus } from '@/types/WillPayment.type';
+import { triggerSavePaymentMethodEvent } from '../utils/paymentEvents';
 import {
-  ComponentStatus,
-  GlobalStateStatus,
-  PaymentMethodStatus,
-} from '@/types/WillPayment.type';
+  isPaymentMethodSaveRequired as checkIsPaymentMethodSaveRequired,
+  isPaymentMethodSaved as checkIsPaymentMethodSaved,
+  isSubmittingEnabled as checkIsSubmittingEnabled,
+} from '../utils/paymentLogic';
 
 /**
  * Simplified hook for WillPayment integration
@@ -17,11 +19,14 @@ export const useWillPayment = () => {
 
   const [hasDefaultPaymentMethod, setHasDefaultPaymentMethod] = useState(false);
 
-  const handleRegisteredPaymentMethodSelected = (event: CustomEvent) => {
-    if (event && event.detail) {
-      setHasDefaultPaymentMethod(true);
-    }
-  };
+  const handleRegisteredPaymentMethodSelected = useCallback(
+    (event: CustomEvent) => {
+      if (event && event.detail) {
+        setHasDefaultPaymentMethod(true);
+      }
+    },
+    [],
+  );
 
   /**
    * Handles payment status changes from the WillPayment module
@@ -37,23 +42,17 @@ export const useWillPayment = () => {
    * Triggers payment method saving via DOM event
    */
   const triggerSavePaymentMethod = useCallback(() => {
-    const eventBus = document.getElementById('will-payment-event-bus');
-    if (eventBus) {
-      eventBus.dispatchEvent(new CustomEvent('GO_SAVE_PAYMENT_METHOD'));
-    }
+    triggerSavePaymentMethodEvent();
   }, []);
 
-  const isPaymentMethodSaveRequired =
-    globalStateStatus?.componentStatus === ComponentStatus.READY_TO_GO_FORWARD;
-
-  const isPaymentMethodSaved =
-    globalStateStatus?.componentStatus ===
-      ComponentStatus.PAYMENT_METHOD_SAVED ||
-    globalStateStatus?.paymentMethodStatus ===
-      PaymentMethodStatus.PAYMENT_METHOD_SAVED;
-
-  const isSubmittingEnabled =
-    hasDefaultPaymentMethod || isPaymentMethodSaveRequired;
+  const isPaymentMethodSaveRequired = checkIsPaymentMethodSaveRequired(
+    globalStateStatus,
+  );
+  const isPaymentMethodSaved = checkIsPaymentMethodSaved(globalStateStatus);
+  const isSubmittingEnabled = checkIsSubmittingEnabled(
+    hasDefaultPaymentMethod,
+    isPaymentMethodSaveRequired,
+  );
 
   return {
     hasDefaultPaymentMethod,

packages/manager/apps/pci-project/src/pages/creation/hooks/useWillPaymentConfig.tsx

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  TWillPaymentConfig,
+  GlobalStateStatus,
+} from '@/types/WillPayment.type';
+
+export type WillPaymentConfigOptions = {
+  onPaymentStatusChange?: (status: GlobalStateStatus) => void;
+};
+
+/**
+ * Hook that generates WillPayment configuration automatically
+ * Centralizes configuration logic and reduces boilerplate
+ */
+export const useWillPaymentConfig = ({
+  onPaymentStatusChange,
+}: WillPaymentConfigOptions = {}): TWillPaymentConfig => {
+  const { environment } = useContext(ShellContext);
+  const user = environment.getUser();
+
+  return {
+    baseUrl: window.location.origin,
+    onChange: (state: GlobalStateStatus) => onPaymentStatusChange?.(state),
+    subsidiary: user.ovhSubsidiary,
+    language: user.language,
+    hostApp: 'pci',
+  };
+};

packages/manager/apps/pci-project/src/pages/creation/steps/PaymentStep.tsx

@@ -1,6 +1,4 @@
-import { useContext, useState } from 'react';
-
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useState } from 'react';
 import {
   useIsStartupProgramAvailable,
   useStartupProgramAmountText,
@@ -15,6 +13,7 @@ import { GlobalStateStatus } from '@/types/WillPayment.type';
 import WillPaymentComponent from '../components/payment/WillPayment.component';
 import StartupProgram from '../components/startup-program/StartupProgram';
 import Voucher from '../components/voucher/Voucher';
+import { useWillPaymentConfig } from '../hooks/useWillPaymentConfig';
 
 export type PaymentStepProps = {
   cart: Cart;
@@ -41,8 +40,9 @@ export default function PaymentStep({
     isAsDefault: false,
   });
 
-  const { environment } = useContext(ShellContext);
-  const user = environment.getUser();
+  const willPaymentConfig = useWillPaymentConfig({
+    onPaymentStatusChange,
+  });
 
   const handleVoucherConfigurationChange = (
     voucherConfiguration: CartConfiguration | undefined,
@@ -68,14 +68,7 @@ export default function PaymentStep({
       />
 
       <WillPaymentComponent
-        config={{
-          baseUrl: window.location.origin,
-          onChange: (state: GlobalStateStatus) =>
-            onPaymentStatusChange?.(state),
-          subsidiary: user.ovhSubsidiary,
-          language: user.language,
-          hostApp: 'pci',
-        }}
+        config={willPaymentConfig}
         onRegisteredPaymentMethodSelected={onRegisteredPaymentMethodSelected}
       />
 

packages/manager/apps/pci-project/src/pages/creation/utils/paymentEvents.ts

@@ -0,0 +1,46 @@
+/**
+ * Utility functions for WillPayment DOM events
+ * Centralizes DOM manipulation for better testability
+ */
+
+const EVENT_BUS_ID = 'will-payment-event-bus';
+const SAVE_PAYMENT_METHOD_EVENT = 'GO_SAVE_PAYMENT_METHOD';
+const REGISTERED_PM_EVENT = 'WP::USER_ACTION::REGISTERED_PM_SELECTED';
+
+/**
+ * Triggers the save payment method event via DOM
+ * @returns boolean indicating if the event was dispatched successfully
+ */
+export const triggerSavePaymentMethodEvent = (): boolean => {
+  const eventBus = document.getElementById(EVENT_BUS_ID);
+  if (eventBus) {
+    eventBus.dispatchEvent(new CustomEvent(SAVE_PAYMENT_METHOD_EVENT));
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Sets up listener for registered payment method selection
+ * @param handler - Function to handle the event
+ * @returns cleanup function to remove the listener
+ */
+export const setupRegisteredPaymentMethodListener = (
+  handler: (event: CustomEvent) => void,
+): (() => void) | null => {
+  const eventBus = document.getElementById(EVENT_BUS_ID);
+  if (!eventBus) {
+    return null;
+  }
+
+  const eventHandler = (event: Event) => {
+    handler(event as CustomEvent);
+  };
+
+  eventBus.addEventListener(REGISTERED_PM_EVENT, eventHandler);
+
+  // Return cleanup function
+  return () => {
+    eventBus.removeEventListener(REGISTERED_PM_EVENT, eventHandler);
+  };
+};