saafe-redirection-flow 2.0.0

package/src/config/urls.ts

@@ -0,0 +1,53 @@
+/**
+ * URL configuration file for centralized management of application URLs
+ * All URLs used throughout the application should be defined here
+ */
+
+// API URLs
+export const API_URLS = {
+  BASE_URL: import.meta.env.VITE_API_BASE_URL || '',
+  AUTH: {
+    LOGIN: '/auth/login',
+    REFRESH_TOKEN: '/auth/refresh-token',
+    LOGOUT: '/auth/logout',
+  },
+  ACCOUNTS: {
+    DISCOVER: '/accounts/discover',
+    LINK: '/accounts/link',
+  },
+  CONSENT: {
+    REVIEW: '/consent/review',
+    CONFIRM: '/consent/confirm',
+    REJECT: '/consent/reject',
+  },
+}
+
+// Application URLs
+export const APP_URLS = {
+  LOGIN: '/login',
+  LINK_ACCOUNTS: {
+    ROOT: '/link-accounts',
+    DISCOVERY: '/link-accounts/discovery',
+    PROCEED: '/link-accounts/proceed',
+    LINK: '/link-accounts/link',
+    DISCOVER_ACCOUNT: '/link-accounts/discover-account',
+    OLD_USER: '/link-accounts/old-user',
+    CATEGORY: '/link-accounts/:category',
+  },
+  CONSENT: {
+    REVIEW: '/review',
+    SUCCESS: '/success',
+    REJECTED: '/rejected',
+  },
+}
+
+// External URLs
+export const EXTERNAL_URLS = {
+  POSTHOG_HOST: import.meta.env.VITE_PUBLIC_POSTHOG_HOST || '',
+  POSTHOG_KEY: import.meta.env.VITE_PUBLIC_POSTHOG_KEY || '',
+}
+
+// Session config
+export const SESSION = {
+  TIMEOUT: import.meta.env.VITE_SESSION_TIMEOUT || '900000', // Default 15 minutes
+} 

package/src/const/fiTypeCategoryMap.ts

@@ -0,0 +1,19 @@
+export const fiTypeCategoryMap: Record<string, string[]> = {
+  BANK: ['DEPOSIT', 'RECURRING_DEPOSIT', 'TERM_DEPOSIT', 'BANK'],
+  INVESTMENTS: [
+    'EQUITIES',
+    'MUTUAL_FUNDS',
+    'OTHER_INVESTMENTS',
+    'IDR',
+    'REIT',
+    'CIS',
+    'INVIT',
+    'AIF',
+    'ETF',
+    'SIP',
+    'NPS (Retirement focused)',
+    'PENSION'
+  ],
+  INSURANCE: ['INSURANCE_POLICIES', 'LIFE_INSURANCE', 'GENERAL_INSURANCE', 'INSURANCE'],
+  GST: ['GSTR1_3B', 'GST']
+}

package/src/contexts/LanguageContext.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { languageOptions } from '@/lib/i18n';
+
+// Define the context type
+interface LanguageContextType {
+  currentLanguage: string;
+  changeLanguage: (code: string) => void;
+  languageOptions: typeof languageOptions;
+}
+
+// Create the context with default values
+const LanguageContext = createContext<LanguageContextType>({
+  currentLanguage: 'en',
+  changeLanguage: () => {},
+  languageOptions,
+});
+
+// Hook to use the language context
+export const useLanguage = () => useContext(LanguageContext);
+
+// Provider component
+export const LanguageProvider = ({ children }: { children: React.ReactNode }) => {
+  const { i18n } = useTranslation();
+  const [currentLanguage, setCurrentLanguage] = useState(i18n.language || 'en');
+
+  useEffect(() => {
+    // Update state when i18n language changes
+    setCurrentLanguage(i18n.language);
+  }, [i18n.language]);
+
+  const changeLanguage = (code: string) => {
+    i18n.changeLanguage(code);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ currentLanguage, changeLanguage, languageOptions }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}; 

package/src/contexts/RTLContext.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useContext, useEffect } from 'react';
+import { useLanguage } from './LanguageContext';
+
+// Define RTL languages
+const RTL_LANGUAGES = ['ur']; // Add more RTL languages here if needed
+
+// Define the context type
+interface RTLContextType {
+  isRTL: boolean;
+}
+
+// Create the context with default value
+const RTLContext = createContext<RTLContextType>({
+  isRTL: false,
+});
+
+// Hook to use the RTL context
+export const useRTL = () => useContext(RTLContext);
+
+// Provider component
+export const RTLProvider = ({ children }: { children: React.ReactNode }) => {
+  const { currentLanguage } = useLanguage();
+  const isRTL = RTL_LANGUAGES.includes(currentLanguage);
+
+  useEffect(() => {
+    // Update HTML dir attribute based on language
+    document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
+
+    // Apply RTL class to body for global styling
+    if (isRTL) {
+      document.body.classList.add('rtl');
+    } else {
+      document.body.classList.remove('rtl');
+    }
+  }, [isRTL]);
+
+  return (
+    <RTLContext.Provider value={{ isRTL }}>
+      {children}
+    </RTLContext.Provider>
+  );
+}; 

package/src/contexts/ThemeContext.tsx

@@ -0,0 +1,93 @@
+import { createContext, ReactNode, use, useEffect, useState } from "react";
+import { useRedirectStore } from "@/store/redirect.store";
+
+type ThemeType = {
+  theme: string;
+  setTheme: (theme: string) => void;
+};
+
+export const ThemeContext = createContext<ThemeType | null>(null);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "shadcn-ui-theme",
+}: {
+  children: ReactNode;
+  defaultTheme?: string;
+  storageKey?: string;
+}) {
+  const { decodedInfo } = useRedirectStore();
+  const sdkTheme = decodedInfo?.theme?.toLowerCase();
+  
+  const [theme, setTheme] = useState<string>(
+    () => {
+      // First priority: SDK-defined theme
+      if (sdkTheme && ["light", "dark", "system"].includes(sdkTheme)) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.log('Using SDK-defined theme:', sdkTheme);
+        }
+        return sdkTheme;
+      }
+      // Second priority: Stored theme
+      const storedTheme = localStorage.getItem(storageKey);
+      if (storedTheme) {
+        return storedTheme;
+      }
+      // Last resort: default theme
+      return defaultTheme;
+    }
+  );
+
+  // Update theme if SDK theme changes
+  useEffect(() => {
+    if (sdkTheme && ["light", "dark", "system"].includes(sdkTheme)) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.log('Theme updated from SDK:', sdkTheme);
+      }
+      setTheme(sdkTheme);
+    }
+  }, [sdkTheme]);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        setTheme: (theme: string) => {
+          localStorage.setItem(storageKey, theme);
+          setTheme(theme);
+        },
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeType {
+  const context = use(ThemeContext);
+
+  if (context === null) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+
+  return context;
+}

package/src/hooks/use-account-discovery.ts

@@ -0,0 +1,205 @@
+import { useMutation } from '@tanstack/react-query'
+import {
+  accountService,
+  AutoDiscoveryResponse,
+  AccountDiscoveryResponse
+} from '@/services/api/account.service'
+import { useAuthStore } from '@/store/auth.store'
+import { useState } from 'react'
+import { useFipStore } from '@/store/fip.store'
+import { fiTypeCategoryMap } from '@/const/fiTypeCategoryMap'
+import { useRedirectStore } from '@/store/redirect.store'
+
+// Map API account format to our internal format
+export interface ProcessedDiscoveryResult {
+  originalAccounts: AutoDiscoveryResponse['Accounts']
+  groupedAccounts: {
+    [key: string]: {
+      id: string
+      type: string
+      maskedAccountNumber: string
+      bankName: string
+      logoUrl?: string | null
+      isNew?: boolean
+      fipId: string
+    }[]
+  }
+  accounts: {
+    id: string
+    type: string
+    maskedAccountNumber: string
+    bankName: string
+    logoUrl?: string | null
+    isNew?: boolean
+    fipId: string
+  }[]
+  signature: string
+}
+
+/**
+ * Hook for auto discovering accounts using FIPs
+ */
+export function useAccountDiscovery() {
+  const { user } = useAuthStore()
+  const { identifiers, activeCategory } = useFipStore()
+  const { decodedInfo } = useRedirectStore()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  return {
+    ...useMutation({
+      mutationFn: async (
+        fipIds: string[]
+      ): Promise<ProcessedDiscoveryResult> => {
+        if (!user?.phoneNumber) {
+          const error = new Error('Mobile number is not available')
+          setErrorMessage(error.message)
+          throw error
+        }
+
+        if (!activeCategory) {
+          const error = new Error('Active category is not available')
+          setErrorMessage(error.message)
+          throw error
+        }
+
+        if (!decodedInfo?.fiuId) {
+          const error = new Error('FIU ID is not available')
+          setErrorMessage(error.message)
+          throw error
+        }
+
+        try {
+          const fiuId = decodedInfo.fiuId
+          const fiTypes = Array.isArray(decodedInfo.fiTypesRequiredForConsent)
+            ? decodedInfo.fiTypesRequiredForConsent.filter(i => fiTypeCategoryMap[activeCategory].includes(i))
+            : []
+
+          if (fiTypes.length === 0) {
+            // Fallback to category map if no FI types are provided
+            fiTypes.push(...fiTypeCategoryMap[activeCategory])
+          }
+
+          const commonIdentifiers = identifiers.map(i => ({
+            type: i.type,
+            value: i.value,
+            categoryType: i.category
+          }))
+
+          // If multiple FIP IDs, we need to call account discovery for each
+          const accountPromises = fipIds.map(async (fipId) => {
+            // Use account discovery for individual FIP
+            return accountService.accountDiscovery({
+              Identifiers: [...commonIdentifiers],
+              FiuId: fiuId,
+              FipId: fipId,
+              FITypes: fiTypes
+            })
+          })
+
+          // Wait for all account discovery calls to complete (including failures)
+          const results = await Promise.allSettled(accountPromises)
+
+          // Separate successful and failed results
+          const successfulResults: { fipId: string; result: AccountDiscoveryResponse }[] = []
+          const failedFips: string[] = []
+          const errorMessages: string[] = []
+
+          results.forEach((settledResult, index) => {
+            const fipId = fipIds[index]
+            if (settledResult.status === 'fulfilled') {
+              successfulResults.push({ fipId, result: settledResult.value })
+            } else {
+              failedFips.push(fipId)
+              const error = settledResult.reason as Error & {
+                response?: {
+                  status?: number;
+                  data?: { message?: string }
+                }
+              }
+              if (error?.response?.data?.message) {
+                errorMessages.push(`${fipId}: ${error.response.data.message}`)
+              } else {
+                errorMessages.push(`${fipId}: Failed to discover accounts`)
+              }
+            }
+          })
+
+          // If no successful results, throw an error
+          if (successfulResults.length === 0) {
+            const combinedError = errorMessages.join('; ')
+            setErrorMessage(combinedError)
+            throw new Error(combinedError)
+          }
+
+          // Process and merge the accounts from successful FIPs only
+          const originalAccounts = successfulResults.map(({ fipId, result }) => ({
+            fipId,
+            fipName: fipId, // We'll need to get the actual name from somewhere
+            DiscoveredAccounts: result.DiscoveredAccounts
+          }))
+
+          // Process the accounts from successful API responses
+          const processedAccounts = originalAccounts.flatMap(fipData =>
+            fipData.DiscoveredAccounts.map(account => ({
+              id: account.accRefNumber,
+              type: account.FIType,
+              maskedAccountNumber: account.maskedAccNumber,
+              bankName: fipData.fipName,
+              logoUrl: account.logoUrl,
+              isNew: false, // Could determine this if needed
+              fipId: fipData.fipId
+            }))
+          )
+
+          // Group accounts by bank/FIP
+          const groupedAccounts = processedAccounts.reduce((acc, account) => {
+            const key = account.fipId
+            if (!acc[key]) {
+              acc[key] = []
+            }
+            acc[key].push(account)
+            return acc
+          }, {} as ProcessedDiscoveryResult['groupedAccounts'])
+
+          // Use the signature from the first successful result
+          const signature = successfulResults[0].result.signature
+
+          // Set partial error message if some FIPs failed
+          if (failedFips.length > 0) {
+            const partialErrorMsg = `Some banks failed to load: ${failedFips.join(', ')}`
+            setErrorMessage(partialErrorMsg)
+          }
+
+          return {
+            originalAccounts,
+            accounts: processedAccounts,
+            groupedAccounts,
+            signature
+          }
+        } catch (error) {
+          // Handle specific error types
+          const typedError = error as Error & {
+            response?: {
+              status?: number;
+              data?: { message?: string }
+            }
+          }
+
+          if (typedError.response?.status === 401) {
+            setErrorMessage('Authentication error. Please log in again.')
+          } else if (typedError.response?.status === 403) {
+            setErrorMessage("You don't have permission to discover accounts.")
+          } else if (typedError.response?.data?.message) {
+            setErrorMessage(typedError.response.data.message)
+          } else {
+            setErrorMessage('Failed to discover accounts. Please try again.')
+          }
+          // console.error('Error during account discovery:', error)
+          throw error
+        }
+      }
+    }),
+    errorMessage,
+    clearError: () => setErrorMessage(null)
+  }
+}

package/src/hooks/use-auth-query.ts

@@ -0,0 +1,141 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  authService,
+  InitOtpResponse,
+  ApiErrorType
+} from '@/services/api/auth.service'
+import { useAuthStore } from '@/store/auth.store'
+import { handleApiError } from '@/utils/toast-helpers'
+
+/**
+ * Hook for initiating OTP flow
+ */
+export function useInitiateOtp() {
+  const { setOtpUniqueId, setIsLoading, setError } = useAuthStore()
+
+  return useMutation({
+    mutationFn: async ({
+      phoneNumber,
+      isTermsAndConditionAgreed
+    }: {
+      phoneNumber: string
+      isTermsAndConditionAgreed: boolean
+    }): Promise<InitOtpResponse> => {
+      setIsLoading(true)
+      try {
+        const response = await authService.initiateOtp(
+          phoneNumber,
+          isTermsAndConditionAgreed
+        )
+
+        // Store OTP unique ID if available - use otpUniqueID (with capital ID)
+        if (response.otpUniqueID) {
+          setOtpUniqueId(response.otpUniqueID)
+        }
+
+        // Store tokens if available
+        if (response.access_token) {
+          useAuthStore
+            .getState()
+            .setTokens(response.access_token, response.refresh_token || '')
+        }
+
+        return response
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    onError: (error: ApiErrorType | Error) => {
+      const errorMessage =
+        'errorData' in error
+          ? error.errorData?.errorCode || 'Failed to send OTP'
+          : 'Failed to send OTP'
+      setError(errorMessage)
+    }
+  })
+}
+
+/**
+ * Hook for verifying OTP
+ */
+export function useVerifyOtp() {
+  const queryClient = useQueryClient()
+  const { setUser, setTokens, setIsLoading, setError } = useAuthStore()
+
+  return useMutation({
+    mutationFn: async ({
+      phoneNumber,
+      code,
+      otpUniqueID
+    }: {
+      phoneNumber: string
+      code: string
+      otpUniqueID: string
+    }) => {
+      setIsLoading(true)
+      try {
+        const response = await authService.verifyOtp(
+          phoneNumber,
+          code,
+          otpUniqueID
+        )
+
+        // Set tokens if available
+        if (response.access_token) {
+          setTokens(response.access_token, response.refresh_token || '')
+        }
+
+        // Set user if available
+        if (response.phoneNumber) {
+          setUser({
+            firstName: response.firstName || '',
+            lastName: response.lastName || '',
+            vuaId: response.vuaId || '',
+            phoneNumber: response.phoneNumber,
+            isTwoFactorEnabled: response.isTwoFactorEnabled ?? null,
+            isBioMetricsEnabled: response.isBioMetricsEnabled ?? null
+          })
+        }
+
+        return response
+      } catch (error) {
+        throw error
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    onSuccess: () => {
+      // Invalidate relevant queries after successful authentication
+      queryClient.invalidateQueries({ queryKey: ['user'] })
+    },
+    onError: (error: ApiErrorType | Error) => {
+      const errorMessage =
+        'errorData' in error
+          ? error.errorData?.errorCode || 'Failed to verify OTP'
+          : 'Failed to verify OTP'
+      setError(errorMessage)
+    }
+  })
+}
+
+/**
+ * Hook for refreshing token
+ */
+export function useRefreshToken() {
+  const { setTokens, logout } = useAuthStore()
+
+  return useMutation({
+    mutationFn: async (refreshToken: string) => {
+      const response = await authService.refreshToken(refreshToken)
+      return response
+    },
+    onSuccess: data => {
+      setTokens(data.access_token, data.refresh_token)
+    },
+    onError: error => {
+      // If refresh token fails, logout user
+      handleApiError(error, 'Session expired. Please login again.')
+      logout()
+    }
+  })
+}

package/src/hooks/use-fip-query.ts

@@ -0,0 +1,72 @@
+import { useQuery } from "@tanstack/react-query";
+import { fipService, FipResponseData } from "@/services/api/fip.service";
+import { useFipStore, FipData } from "@/store/fip.store";
+import { useRedirectStore } from "@/store/redirect.store";
+
+/**
+ * Helper function to extract categories from API response
+ */
+const extractCategoriesFromResponse = (data: FipResponseData): string[] => {
+  // If response is not an object, return empty array
+  if (!data || typeof data !== "object") return [];
+
+  // Get direct keys from the response object (GST, BANK, etc.)
+  const categories = Object.keys(data).filter((key) => {
+    // Exclude metadata or non-array keys
+    return Array.isArray(data[key]);
+  });
+
+  return categories;
+};
+
+/**
+ * Hook for fetching FIP data
+ */
+export function useFipQuery(consentHandle?: string) {
+  const { setFips, setIsLoading, setError } = useFipStore();
+  const { decodedInfo } = useRedirectStore();
+
+  return useQuery({
+    queryKey: ["fips", consentHandle],
+    queryFn: async () => {
+      setIsLoading(true);
+      try {
+        // Get raw response containing category structure
+        const response = await fipService.getRawFipResponse(consentHandle);
+
+        // Extract categories from response (GST, BANK, etc)
+        const categories = extractCategoriesFromResponse(response);
+
+        // Create a map of category => FIPs for that category only
+        const categorizedFips: Record<string, FipData[]> = {};
+
+        // Populate each category with its specific FIPs
+        categories.forEach(category => {
+          const categoryData = response[category];
+          if (Array.isArray(categoryData)) {
+            categorizedFips[category] = categoryData as FipData[];
+          }
+        });
+
+        // Flatten for backward compatibility - but maintain categorization
+        const allFips = Object.values(categorizedFips).flat();
+
+        if (allFips.length > 0) {
+          // Pass both the flattened FIPs, categories, and the categorized map
+          setFips(allFips, decodedInfo?.fiTypesRequiredForConsent, categorizedFips);
+        } else {
+          setError("No FIP data available");
+        }
+
+        return allFips;
+      } catch (error) {
+        setError("Failed to fetch FIP data");
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    refetchOnWindowFocus: false,
+  });
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Custom hook to check if a media query matches
+ * @param query Media query string to check
+ * @returns boolean indicating if the query matches
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    
+    // Set initial value
+    setMatches(mediaQuery.matches);
+    
+    // Create event listener to update state when media query changes
+    const updateMatches = (e: MediaQueryListEvent) => {
+      setMatches(e.matches);
+    };
+    
+    // Add event listener
+    mediaQuery.addEventListener('change', updateMatches);
+    
+    // Clean up when component unmounts
+    return () => {
+      mediaQuery.removeEventListener('change', updateMatches);
+    };
+  }, [query]);
+
+  return matches;
+}