From 2f8214eb870a769bebb8c5aa1fc3efd4ce1da61c Mon Sep 17 00:00:00 2001 From: Muhsin Keloth Date: Wed, 11 Jun 2025 15:01:53 +0530 Subject: [PATCH] chore: more fixes --- .../composables/useWhatsappEmbeddedSignup.js | 138 ++---------------- .../useWhatsappComposableOrchestrator.js | 100 +++++++++++++ .../whatsapp/useWhatsappComputed.js | 27 ++++ .../whatsapp/useWhatsappLifecycle.js | 19 +++ 4 files changed, 161 insertions(+), 123 deletions(-) create mode 100644 app/javascript/dashboard/composables/whatsapp/useWhatsappComposableOrchestrator.js create mode 100644 app/javascript/dashboard/composables/whatsapp/useWhatsappComputed.js create mode 100644 app/javascript/dashboard/composables/whatsapp/useWhatsappLifecycle.js diff --git a/app/javascript/dashboard/composables/useWhatsappEmbeddedSignup.js b/app/javascript/dashboard/composables/useWhatsappEmbeddedSignup.js index a87c70dfc..0bf6d134e 100644 --- a/app/javascript/dashboard/composables/useWhatsappEmbeddedSignup.js +++ b/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, }; } diff --git a/app/javascript/dashboard/composables/whatsapp/useWhatsappComposableOrchestrator.js b/app/javascript/dashboard/composables/whatsapp/useWhatsappComposableOrchestrator.js new file mode 100644 index 000000000..9e9182476 --- /dev/null +++ b/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, + }; +} diff --git a/app/javascript/dashboard/composables/whatsapp/useWhatsappComputed.js b/app/javascript/dashboard/composables/whatsapp/useWhatsappComputed.js new file mode 100644 index 000000000..dd1f58a86 --- /dev/null +++ b/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, + }; +} diff --git a/app/javascript/dashboard/composables/whatsapp/useWhatsappLifecycle.js b/app/javascript/dashboard/composables/whatsapp/useWhatsappLifecycle.js new file mode 100644 index 000000000..20985caed --- /dev/null +++ b/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, + }; +}