fix: Handle invalid credentials error case

Author: abhay-keyvalue

src/components/sirenInbox.tsx

@@ -21,7 +21,8 @@ const {
   events,
   TOKEN_VERIFICATION_PENDING,
   MAXIMUM_ITEMS_PER_FETCH,
-  VerificationStatus
+  VerificationStatus,
+  errorMap
 } = Constants;
 const { applyTheme, isNonEmptyArray, updateNotifications } = CommonUtils;
 
@@ -127,7 +128,13 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
 
   useEffect(() => {
     // Initialize Siren SDK and start polling notifications
-    if (verificationStatus !== VerificationStatus.PENDING && siren) initialize();
+    if (verificationStatus !== VerificationStatus.PENDING && siren) {
+      initialize();
+    } else if(verificationStatus === VerificationStatus.FAILED) {
+      setIsError(true);
+      setIsLoading(false);
+      if (onError) onError(errorMap.MISSING_PARAMETER);
+    }
   }, [siren, verificationStatus]);
 
   useEffect(() => {

src/components/sirenInboxIcon.tsx

@@ -8,7 +8,15 @@ import { useSirenContext } from './sirenProvider';
 import type { SirenInboxIconProps } from '../types';
 import { CommonUtils, Constants } from '../utils';
 
-const { ThemeMode, defaultBadgeStyle, eventTypes, events, defaultStyles } = Constants;
+const {
+  ThemeMode,
+  defaultBadgeStyle,
+  eventTypes,
+  events,
+  defaultStyles,
+  VerificationStatus,
+  errorMap
+} = Constants;
 const { logger } = CommonUtils;
 
 /**
@@ -42,7 +50,7 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
     onError = () => null
   } = props;
 
-  const { siren } = useSirenContext();
+  const { siren, verificationStatus } = useSirenContext();
 
   const [unviewedCount, seUnviewedCount] = useState<number>(0);
 
@@ -79,8 +87,10 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
   }, []);
 
   useEffect(() => {
-    initialize();
-  }, [siren]);
+    if (verificationStatus !== VerificationStatus.PENDING && siren) initialize();
+    else if (verificationStatus === VerificationStatus.FAILED && onError)
+      onError(errorMap.MISSING_PARAMETER);
+  }, [siren, verificationStatus]);
 
   useEffect(() => {
     if (unviewedCount > 0) logger.info(`unviewed notification count : ${unviewedCount}`);

src/components/sirenProvider.tsx

@@ -84,6 +84,8 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
       stopRealTimeFetch();
       sendResetDataEvents();
       initialize();
+    } else {
+      setVerificationStatus(VerificationStatus.FAILED);
     }
   }, [config]);
 

src/utils/constants.ts

@@ -97,6 +97,11 @@ export const errorMap = {
     Type: 'ERROR',
     Code: 'MISSING_PARAMETER',
     Message: 'Missing required parameter'
+  },
+  INVALID_CREDENTIALS: {
+    Type: 'ERROR',
+    Code: 'INVALID_CREDENTIALS',
+    Message: 'Invalid credentials found. Please check your token and recipient ID'
   }
 };