chore: more fixes

app/javascript/dashboard/composables/useWhatsappEmbeddedSignup.js

@@ -1,141 +1,33 @@
-import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useWhatsappSignupValidation } from './whatsapp/useWhatsappSignupValidation';
-import { useWhatsappSignupState } from './whatsapp/useWhatsappSignupState';
-import { useWhatsappSignupHandlers } from './whatsapp/useWhatsappSignupHandlers';
-import { useWhatsappSignupApi } from './whatsapp/useWhatsappSignupApi';
-import { useWhatsappFacebookSDK } from './whatsapp/useWhatsappFacebookSDK';
-import { useWhatsappMessageHandler } from './whatsapp/useWhatsappMessageHandler';
+import { useWhatsappComposableOrchestrator } from './whatsapp/useWhatsappComposableOrchestrator';
+import { useWhatsappLifecycle } from './whatsapp/useWhatsappLifecycle';
+import { useWhatsappComputed } from './whatsapp/useWhatsappComputed';
 
 export function useWhatsappEmbeddedSignup() {
   const store = useStore();
   const router = useRouter();
   const { t } = useI18n();
 
-  // Composables
-  const { isValidBusinessData, normalizeBusinessData } =
-    useWhatsappSignupValidation();
-
-  const {
-    fbSdkLoaded,
-    isProcessing,
-    processingMessage,
-    authCodeReceived,
-    currentStep,
-    authCode,
-    businessData,
-    isAuthenticating,
-    hasSignupStarted,
-    resetState,
-  } = useWhatsappSignupState();
-
-  const { handleSignupError, handleSignupCancellation, handleSignupSuccess } =
-    useWhatsappSignupHandlers({
-      currentStep,
-      isProcessing,
-      isAuthenticating,
-      resetState,
-      store,
-      router,
-      t,
-    });
-
-  const { completeSignupFlow } = useWhatsappSignupApi({
-    authCodeReceived,
-    authCode,
-    currentStep,
-    isProcessing,
-    processingMessage,
+  const orchestratorResult = useWhatsappComposableOrchestrator({
     store,
-    t,
-    handleSignupError,
-    handleSignupSuccess,
-  });
-
-  const { loadFacebookSdk, launchEmbeddedSignup } = useWhatsappFacebookSDK({
-    fbSdkLoaded,
-    hasSignupStarted,
-    processingMessage,
-    isProcessing,
-    isAuthenticating,
-    currentStep,
-    authCode,
-    authCodeReceived,
-    businessData,
-    completeSignupFlow,
-    handleSignupError,
+    router,
     t,
   });
-
-  const { handleSignupMessage } = useWhatsappMessageHandler({
-    isValidBusinessData,
-    normalizeBusinessData,
-    businessData,
-    authCodeReceived,
-    authCode,
-    completeSignupFlow,
-    currentStep,
-    processingMessage,
-    handleSignupError,
-    handleSignupCancellation,
+  const computedResult = useWhatsappComputed({
     t,
+    hasSignupStarted: orchestratorResult.hasSignupStarted,
+    isProcessing: orchestratorResult.isProcessing,
+  });
+  const lifecycleResult = useWhatsappLifecycle({
+    loadFacebookSdk: orchestratorResult.loadFacebookSdk,
+    handleSignupMessage: orchestratorResult.handleSignupMessage,
   });
-
-  // Computed
-  const benefits = computed(() => [
-    {
-      key: 'EASY_SETUP',
-      text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.EASY_SETUP'),
-    },
-    {
-      key: 'SECURE_AUTH',
-      text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.SECURE_AUTH'),
-    },
-    {
-      key: 'AUTO_CONFIG',
-      text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.AUTO_CONFIG'),
-    },
-  ]);
-
-  const showLoader = computed(
-    () => hasSignupStarted.value || isProcessing.value
-  );
-
-  // Lifecycle
-  const setupMessageListener = () => {
-    window.addEventListener('message', handleSignupMessage);
-  };
-
-  const cleanupMessageListener = () => {
-    window.removeEventListener('message', handleSignupMessage);
-  };
-
-  const initialize = () => {
-    loadFacebookSdk();
-    setupMessageListener();
-  };
 
   return {
-    // State
-    fbSdkLoaded,
-    isProcessing,
-    processingMessage,
-    authCodeReceived,
-    currentStep,
-    authCode,
-    businessData,
-    isAuthenticating,
-    hasSignupStarted,
-
-    // Computed
-    benefits,
-    showLoader,
-
-    // Methods
-    launchEmbeddedSignup,
-    initialize,
-    cleanupMessageListener,
+    ...orchestratorResult,
+    ...computedResult,
+    ...lifecycleResult,
   };
 }

app/javascript/dashboard/composables/whatsapp/useWhatsappComposableOrchestrator.js

@@ -0,0 +1,100 @@
+import { useWhatsappSignupValidation } from './useWhatsappSignupValidation';
+import { useWhatsappSignupState } from './useWhatsappSignupState';
+import { useWhatsappSignupHandlers } from './useWhatsappSignupHandlers';
+import { useWhatsappSignupApi } from './useWhatsappSignupApi';
+import { useWhatsappFacebookSDK } from './useWhatsappFacebookSDK';
+import { useWhatsappMessageHandler } from './useWhatsappMessageHandler';
+
+export function useWhatsappComposableOrchestrator({ store, router, t }) {
+  // Validation composable
+  const { isValidBusinessData, normalizeBusinessData } =
+    useWhatsappSignupValidation();
+
+  // State composable
+  const {
+    fbSdkLoaded,
+    isProcessing,
+    processingMessage,
+    authCodeReceived,
+    currentStep,
+    authCode,
+    businessData,
+    isAuthenticating,
+    hasSignupStarted,
+    resetState,
+  } = useWhatsappSignupState();
+
+  // Handlers composable
+  const { handleSignupError, handleSignupCancellation, handleSignupSuccess } =
+    useWhatsappSignupHandlers({
+      currentStep,
+      isProcessing,
+      isAuthenticating,
+      resetState,
+      store,
+      router,
+      t,
+    });
+
+  // API composable
+  const { completeSignupFlow } = useWhatsappSignupApi({
+    authCodeReceived,
+    authCode,
+    currentStep,
+    isProcessing,
+    processingMessage,
+    store,
+    t,
+    handleSignupError,
+    handleSignupSuccess,
+  });
+
+  // Facebook SDK composable
+  const { loadFacebookSdk, launchEmbeddedSignup } = useWhatsappFacebookSDK({
+    fbSdkLoaded,
+    hasSignupStarted,
+    processingMessage,
+    isProcessing,
+    isAuthenticating,
+    currentStep,
+    authCode,
+    authCodeReceived,
+    businessData,
+    completeSignupFlow,
+    handleSignupError,
+    t,
+  });
+
+  // Message handler composable
+  const { handleSignupMessage } = useWhatsappMessageHandler({
+    isValidBusinessData,
+    normalizeBusinessData,
+    businessData,
+    authCodeReceived,
+    authCode,
+    completeSignupFlow,
+    currentStep,
+    processingMessage,
+    handleSignupError,
+    handleSignupCancellation,
+    t,
+  });
+
+  return {
+    // State
+    fbSdkLoaded,
+    isProcessing,
+    processingMessage,
+    authCodeReceived,
+    currentStep,
+    authCode,
+    businessData,
+    isAuthenticating,
+    hasSignupStarted,
+
+    // Methods
+    loadFacebookSdk,
+    launchEmbeddedSignup,
+    handleSignupMessage,
+  };
+}

app/javascript/dashboard/composables/whatsapp/useWhatsappComputed.js

@@ -0,0 +1,27 @@
+import { computed } from 'vue';
+
+export function useWhatsappComputed({ t, hasSignupStarted, isProcessing }) {
+  const benefits = computed(() => [
+    {
+      key: 'EASY_SETUP',
+      text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.EASY_SETUP'),
+    },
+    {
+      key: 'SECURE_AUTH',
+      text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.SECURE_AUTH'),
+    },
+    {
+      key: 'AUTO_CONFIG',
+      text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.AUTO_CONFIG'),
+    },
+  ]);
+
+  const showLoader = computed(
+    () => hasSignupStarted.value || isProcessing.value
+  );
+
+  return {
+    benefits,
+    showLoader,
+  };
+}

app/javascript/dashboard/composables/whatsapp/useWhatsappLifecycle.js

@@ -0,0 +1,19 @@
+export function useWhatsappLifecycle({ loadFacebookSdk, handleSignupMessage }) {
+  const setupMessageListener = () => {
+    window.addEventListener('message', handleSignupMessage);
+  };
+
+  const cleanupMessageListener = () => {
+    window.removeEventListener('message', handleSignupMessage);
+  };
+
+  const initialize = () => {
+    loadFacebookSdk();
+    setupMessageListener();
+  };
+
+  return {
+    initialize,
+    cleanupMessageListener,
+  };
+}