fix: Terminate retry verification api trigger if config changes while retrying

Author: reshmarevi17

package-lock.json

@@ -84,7 +84,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "test_notification": "^1.1.0",
+    "test_notification": "^1.1.1",
     "pubsub-js": "^1.9.4"
   }
 }

package.json

@@ -13,7 +13,6 @@ import {
   debounce,
 } from "../utils/commonUtils";
 import {
-  BadgeType,
   EventType,
   MAXIMUM_ITEMS_PER_FETCH,
   ThemeMode,
@@ -156,9 +155,9 @@ const SirenInbox: FC<SirenProps> = ({
             notificationIcon={notificationIcon}
             styles={styles}
             onIconClick={onIconClick}
-            badgeType={isModalOpen ? BadgeType.NONE : BadgeType.DEFAULT}
             darkMode={darkMode}
             hideBadge={hideBadge}
+            isModalOpen={isModalOpen}
           />
         </div>
       )}

src/components/SirenInbox.tsx

@@ -23,16 +23,17 @@ const { eventTypes, events } = Constants;
 
 const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
   notificationIcon,
-  badgeType,
   styles,
   onIconClick,
   darkMode,
   hideBadge,
+  isModalOpen,
 }) => {
   const { siren } = useSirenContext();
 
   const [unviewedCount, seUnviewedCount] = useState<number>(0);
-
+  const badgeType:BadgeType = isModalOpen ? BadgeType.NONE : BadgeType.DEFAULT;
+  
   const notificationCountSubscriber = async (
     type: string,
     dataString: string
@@ -57,7 +58,8 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
   }, []);
 
   useEffect(() => {
-    if(!hideBadge) 
+    // Check to avoid calling getUnViewedCount when the badge is hidden and the modal is open, and when either the siren object or hideBadge state changes.
+    if(!hideBadge && !isModalOpen) 
       getUnViewedCount();
 
   }, [siren, hideBadge]);
@@ -113,13 +115,6 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
           )
         );
       }
-      case BadgeType.DOT:
-        return (
-          <span
-            className="siren-sdk-notificationIcon-badge-container"
-            data-testid="notification-dot-badge"
-          />
-        );
 
       default:
         return null;

src/components/SirenNotificationIcon.tsx

@@ -120,7 +120,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
       !hideBadge && restartNotificationCountFetch();
       handleMarkNotificationsAsViewed(new Date().toISOString());
     };
-  }, [hideBadge]);
+  }, [hideBadge, siren]);
 
   useEffect(() => {
     if (eventListenerData) {
@@ -140,7 +140,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
       !hideBadge && siren.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
       fetchNotifications(true);
     }
-    if(!siren && isLoading) {
+    if(verificationStatus === VerificationStatus.FAILED) {
       setIsLoading(false);
       onError && onError(errorMap?.INVALID_CREDENTIALS);
       setError(ERROR_TEXT);

src/components/SirenPanel.tsx

@@ -16,6 +16,7 @@ import {
   events,
   EventType,
   eventTypes,
+  IN_APP_RECIPIENT_UNAUTHENTICATED,
   MAXIMUM_RETRY_COUNT,
   VerificationStatus,
 } from "../utils/constants";
@@ -81,6 +82,9 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
       sendResetDataEvents();
       initialize();
     }
+    else {
+      setVerificationStatus(VerificationStatus.FAILED);
+    }
     if (retryCount > MAXIMUM_RETRY_COUNT) stopRealTimeFetch();
   }, [config]);
 
@@ -156,10 +160,10 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
   };
 
   const retryVerification = (error: SirenErrorType) => {
-    if (
-      error.Code === AUTHENTICATION_FAILED &&
-      retryCount < MAXIMUM_RETRY_COUNT
-    )
+    const shouldRetry = (error.Code === AUTHENTICATION_FAILED || error.Code === IN_APP_RECIPIENT_UNAUTHENTICATED) &&
+      retryCount < MAXIMUM_RETRY_COUNT && verificationStatus === VerificationStatus.FAILED
+
+    if (shouldRetry)
       setTimeout(() => {
         initialize();
         retryCount++;
@@ -171,6 +175,7 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
     const dataParams: InitConfigType = getDataParams();
     const siren = new Siren(dataParams);
 
+    setVerificationStatus(VerificationStatus.PENDING);
     setSiren(siren);
   };
 

src/components/SirenProvider.tsx

@@ -67,11 +67,11 @@ export type NotificationCardProps = {
 
 export type SirenNotificationButtonProps = {
   styles: SirenStyleProps;
-  badgeType: BadgeType;
   darkMode: boolean;
   hideBadge: boolean;
   notificationIcon?: JSX.Element;
   onIconClick: () => void;
+  isModalOpen: boolean;
 };
 export type SirenPanelProps = Pick<
   SirenInboxProps,
@@ -109,8 +109,6 @@ export type LoaderProps = {
   hideAvatar: boolean;
 }
 
-type BadgeType = "none" | "dot" | "default";
-
 export type Theme = {
   dark: ThemeProps;
   light: ThemeProps;

src/types.ts

@@ -100,6 +100,7 @@ export const ERROR_SUB_TEXT =
 export const DEFAULT_WINDOW_TITLE = "Notifications";
 export const RETRY_BUTTON_LABEL = "Retry";
 export const CLEAR_ALL_LABEL = "Clear All";
+export const IN_APP_RECIPIENT_UNAUTHENTICATED = "IN_APP_RECIPIENT_UNAUTHENTICATED";
 export const AUTHENTICATION_FAILED = 'AUTHENTICATION_FAILED';
 export const TOKEN_VERIFICATION_PENDING ='TOKEN_VERIFICATION_PENDING';
 export const MAXIMUM_RETRY_COUNT = 3;