Merge pull request #274 from mayuran-deriv/mayuran/landing-company-call-fix

fix: landing company call

Author: mayuran-deriv

src/components/UserNavbarItem/UserMenu/index.tsx

@@ -16,6 +16,7 @@ import Translate from '@docusaurus/Translate';
 import useLogout from '@site/src/hooks/useLogout';
 import Routes from '@site/src/utils/routes';
 import { useIsAffiliate } from '@site/src/hooks/useIsAffiliate';
+import { useLandingCompany } from '@site/src/hooks/useLandingCompany';
 
 const UserMenu = () => {
   const { deviceType } = useDeviceType();
@@ -27,6 +28,8 @@ const UserMenu = () => {
 
   const hasWalletAccount = userAccounts?.some((account) => account.loginid?.includes('VRW'));
   const { isAffiliate, data, isLoading } = useIsAffiliate();
+  const { data: landingCompanyData, isLoading: landingCompanyLoading } =
+    useLandingCompany(is_authorized);
 
   useEffect(() => {
     if (is_authorized) {
@@ -51,9 +54,14 @@ const UserMenu = () => {
               variant='secondary'
               color='black'
               fullWidth
+              disabled={landingCompanyLoading}
               onClick={() =>
                 window.location.assign(
-                  Routes.GET_REAL_ACCOUNT + `&target=${user?.upgradeable_landing_companies?.[0]}`,
+                  Routes.GET_REAL_ACCOUNT +
+                    `&target=${
+                      landingCompanyData?.financial_company?.shortcode ||
+                      landingCompanyData?.gaming_company?.shortcode
+                    }`,
                 )
               }
             >

src/features/dashboard/components/cta-banner/cta-banner.tsx

@@ -4,9 +4,13 @@ import Translate from '@docusaurus/Translate';
 import './cta-banner.scss';
 import Routes from '@site/src/utils/routes';
 import useAuthContext from '@site/src/hooks/useAuthContext';
+import { useLandingCompany } from '@site/src/hooks/useLandingCompany';
 
 const CtaBanner: React.FC = () => {
-  const { user } = useAuthContext();
+  const { is_authorized } = useAuthContext();
+  const { data: landingCompanyData, isLoading: landingCompanyLoading } =
+    useLandingCompany(is_authorized);
+
   return (
     <div className='cta-banner'>
       <div className='cta-banner__content'>
@@ -20,9 +24,14 @@ const CtaBanner: React.FC = () => {
         </Text>
         <Button
           className='cta-banner__button'
+          disabled={landingCompanyLoading}
           onClick={() =>
             window.location.assign(
-              Routes.GET_REAL_ACCOUNT + `&target=${user?.upgradeable_landing_companies?.[0]}`,
+              Routes.GET_REAL_ACCOUNT +
+                `&target=${
+                  landingCompanyData?.financial_company?.shortcode ||
+                  landingCompanyData?.gaming_company?.shortcode
+                }`,
             )
           }
         >

src/hooks/useGetSettings/index.tsx

@@ -0,0 +1,16 @@
+import useWS from '@site/src/hooks/useWs';
+import { useCallback } from 'react';
+
+export const useGetSettings = () => {
+  const { data, send, is_loading } = useWS('get_settings');
+
+  const getSettings = useCallback(async () => {
+    await send({ get_settings: '1' });
+  }, [send]);
+
+  return {
+    isLoading: is_loading,
+    getSettings,
+    data,
+  };
+};

src/hooks/useLandingCompany/index.tsx

@@ -0,0 +1,32 @@
+import useWS from '@site/src/hooks/useWs';
+import { useEffect, useState } from 'react';
+import { useGetSettings } from '../useGetSettings';
+
+export const useLandingCompany = (is_authorized: boolean) => {
+  const { getSettings, data: settingsData } = useGetSettings();
+  const { data, send } = useWS('landing_company');
+  const [hasRequestedLandingCompany, setHasRequestedLandingCompany] = useState(false);
+
+  // First, always call getSettings on mount
+  useEffect(() => {
+    is_authorized && getSettings();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [is_authorized]);
+
+  // When settingsData.country_code is available, call landing_company
+  useEffect(() => {
+    if (settingsData?.country_code && !hasRequestedLandingCompany) {
+      send({ landing_company: settingsData.country_code });
+      setHasRequestedLandingCompany(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settingsData?.country_code, send]);
+
+  // isLoading should be false until landing_company is actually called
+  const isLoading = !data;
+
+  return {
+    isLoading,
+    data,
+  };
+};

src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx

@@ -20,6 +20,7 @@ import classnames from 'classnames';
 import Translate from '@docusaurus/Translate';
 import Routes from '@site/src/utils/routes';
 import { useIsAffiliate } from '@site/src/hooks/useIsAffiliate';
+import { useLandingCompany } from '@site/src/hooks/useLandingCompany';
 
 // Utility function to get icons for menu items
 const getMenuItemIcons = (item) => {
@@ -102,6 +103,8 @@ export default function CustomMobileSidebar() {
   const items = useNavbarItems();
   const [leftItems] = splitNavbarItems(items);
   const { pathname } = useLocation();
+  const { data: landingCompanyData, isLoading: landingCompanyLoading } =
+    useLandingCompany(is_authorized);
 
   const { isAffiliate, data, isLoading } = useIsAffiliate();
 
@@ -176,10 +179,15 @@ export default function CustomMobileSidebar() {
                 className='get-real-account-btn'
                 variant='secondary'
                 color='black'
+                disabled={landingCompanyLoading}
                 fullWidth
                 onClick={() =>
                   window.location.assign(
-                    Routes.GET_REAL_ACCOUNT + `&target=${user?.upgradeable_landing_companies?.[0]}`,
+                    Routes.GET_REAL_ACCOUNT +
+                      `&target=${
+                        landingCompanyData?.financial_company?.shortcode ||
+                        landingCompanyData?.gaming_company?.shortcode
+                      }`,
                   )
                 }
               >