SDA-4774 - Display dynamic status message (#2246)

* SDA-4774 - Display dynamic status message

* SDA-4774 - Update snapshot file

* SDA-4774 - Update message

spec/__snapshots__/aboutApp.spec.ts.snap

@@ -67,7 +67,7 @@ exports[`about app should render correctly 1`] = `
     <p
       className="AboutApp-copyright-text"
     >
-      Copyright © 2024 Symphony
+      Copyright © 2025 Symphony
     </p>
   </div>
 </div>

src/app/main-api-handler.ts

@@ -828,7 +828,7 @@ const loadPodUrl = (() => {
         }
 
         isRetryInProgress = false;
-        setLoginRetryState(isRetryInProgress);
+        setLoginRetryState(isRetryInProgress, false);
         retryTimeoutId = null;
       } catch (error: any) {
         if (
@@ -867,7 +867,7 @@ const loadPodUrl = (() => {
               'main-api-handler: Retry attempts exhausted. Endpoint unreachable.',
             );
             isRetryInProgress = false;
-            setLoginRetryState(isRetryInProgress);
+            setLoginRetryState(isRetryInProgress, true);
           }
         }
       } finally {
@@ -880,7 +880,7 @@ const loadPodUrl = (() => {
     // Start the retry logic only if it's not already in progress
     if (!isRetryInProgress) {
       isRetryInProgress = true;
-      setLoginRetryState(isRetryInProgress);
+      setLoginRetryState(isRetryInProgress, false);
       attemptFetch();
     } else {
       logger.info(
@@ -897,12 +897,17 @@ const loadPodUrl = (() => {
  * This message is used to update the UI accordingly.
  *
  * @param {boolean} isRetryInProgress - A boolean indicating whether a login retry is in progress.
+ * @param {boolean} retryFailed - A boolean indicating a failure of retry mechanism
  */
-const setLoginRetryState = (isRetryInProgress: boolean) => {
+const setLoginRetryState = (
+  isRetryInProgress: boolean,
+  retryFailed: boolean = false,
+) => {
   const mainWebContents = windowHandler.getMainWebContents();
   if (mainWebContents && !mainWebContents.isDestroyed()) {
     mainWebContents.send('welcome', {
       isRetryInProgress,
+      retryFailed,
     });
   }
 };

src/locale/en-US.json

@@ -224,6 +224,8 @@
   "Welcome": {
     "Continue": "Continue",
     "Enable Single Sign On": "Enable Single Sign On",
+    "Establishing a secure connection.": "Establishing a secure connection.",
+    "Unable to establish a secure connection.": "Unable to establish a secure connection.",
     "Find your pod URL in your invitation email.": "Find your pod URL in your invitation email.",
     "Welcome to the largest global community in financial services with over": "Welcome to the largest global community in financial services with over",
     " half a million users": " half a million users",

src/locale/en.json

@@ -223,6 +223,8 @@
   "Welcome": {
     "Continue": "Continue",
     "Enable Single Sign On": "Enable Single Sign On",
+    "Establishing a secure connection.": "Establishing a secure connection.",
+    "Unable to establish a secure connection.": "Unable to establish a secure connection.",
     "Find your pod URL in your invitation email.": "Find your pod URL in your invitation email.",
     "Welcome to the largest global community in financial services with over": "Welcome to the largest global community in financial services with over",
     " half a million users": " half a million users",

src/renderer/components/welcome.tsx

@@ -13,6 +13,7 @@ interface IState {
   browserLoginAutoConnect: boolean;
   isLoading: boolean;
   isRetryInProgress: boolean;
+  retryFailed: boolean;
 }
 
 const WELCOME_NAMESPACE = 'Welcome';
@@ -39,6 +40,7 @@ export default class Welcome extends React.Component<{}, IState> {
       browserLoginAutoConnect: false,
       isLoading: false,
       isRetryInProgress: false,
+      retryFailed: false,
     };
     this.updateState = this.updateState.bind(this);
   }
@@ -55,6 +57,7 @@ export default class Welcome extends React.Component<{}, IState> {
       isBrowserLoginEnabled,
       isFirstTimeLaunch,
       isRetryInProgress,
+      retryFailed,
     } = this.state;
     return (
       <div className='Welcome' lang={i18n.getLocale()}>
@@ -120,10 +123,10 @@ export default class Welcome extends React.Component<{}, IState> {
           {isBrowserLoginEnabled && (
             <div className='Welcome-redirect-info-text-container'>
               <span>
-                {i18n.t(
-                  'You’ll momentarily be redirected to your web browser.',
-                  WELCOME_NAMESPACE,
-                )()}
+                {this.getConnectionStatusMessage(
+                  isRetryInProgress,
+                  retryFailed,
+                )}
               </span>
               {isLoading && (
                 <button
@@ -392,4 +395,29 @@ export default class Welcome extends React.Component<{}, IState> {
       </svg>
     );
   }
+
+  /**
+   * Gets the appropriate connection status message based on retry status.
+   * @param {boolean} isRetryInProgress Whether a retry is currently in progress.
+   * @param {boolean} retryFailed Whether the retry attempt failed.
+   * @returns {string} The connection status message.
+   */
+  private getConnectionStatusMessage = (
+    isRetryInProgress: boolean,
+    retryFailed: boolean,
+  ): string => {
+    if (isRetryInProgress) {
+      return i18n.t('Establishing a secure connection.', WELCOME_NAMESPACE)();
+    } else if (retryFailed) {
+      return i18n.t(
+        'Unable to establish a secure connection.',
+        WELCOME_NAMESPACE,
+      )();
+    } else {
+      return i18n.t(
+        'You’ll momentarily be redirected to your web browser.',
+        WELCOME_NAMESPACE,
+      )();
+    }
+  };
 }

src/renderer/styles/welcome.less

@@ -263,7 +263,7 @@ body {
     border: none;
     cursor: pointer;
     padding: 0;
-    margin: 0 8px;
+    margin: 0 4px;
     font-size: 14px;
     text-align: center;
     display: inline-block;