saafe-redirection-flow 2.0.0

package/src/store/auth.store.ts

@@ -0,0 +1,79 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export interface AuthUser {
+  firstName: string;
+  lastName: string;
+  vuaId: string;
+  phoneNumber: string;
+  isTwoFactorEnabled: boolean | null;
+  isBioMetricsEnabled: boolean | null;
+}
+
+export interface AuthState {
+  user: AuthUser | null;
+  accessToken: string | null;
+  refreshToken: string | null;
+  otpUniqueId: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+  
+  // Actions
+  setUser: (user: AuthUser | null) => void;
+  setTokens: (accessToken: string, refreshToken: string) => void;
+  setOtpUniqueId: (id: string | null) => void;
+  setIsLoading: (isLoading: boolean) => void;
+  setError: (error: string | null) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      accessToken: null,
+      refreshToken: null,
+      otpUniqueId: null,
+      isAuthenticated: false,
+      isLoading: false,
+      error: null,
+      
+      setUser: (user) => set({ 
+        user, 
+        isAuthenticated: !!user 
+      }),
+      
+      setTokens: (accessToken, refreshToken) => set({ 
+        accessToken, 
+        refreshToken,
+        isAuthenticated: true
+      }),
+      
+      setOtpUniqueId: (otpUniqueId) => set({ otpUniqueId }),
+      
+      setIsLoading: (isLoading) => set({ isLoading }),
+      
+      setError: (error) => set({ error }),
+      
+      logout: () => set({
+        user: null,
+        accessToken: null,
+        refreshToken: null,
+        otpUniqueId: null,
+        isAuthenticated: false,
+        error: null
+      })
+    }),
+    {
+      name: 'saafe-auth-storage',
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: (state) => ({
+        user: state.user,
+        accessToken: state.accessToken,
+        refreshToken: state.refreshToken,
+        isAuthenticated: state.isAuthenticated
+      })
+    }
+  )
+); 

package/src/store/fip.store.ts

@@ -0,0 +1,396 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+import { StepItem } from '@/components/step-navigation'
+import { AutoDiscoveryResponse } from '@/services/api'
+import { fiTypeCategoryMap } from '@/const/fiTypeCategoryMap'
+
+// FIP data interfaces
+export interface Identifier {
+  category: string
+  type: string
+}
+
+export interface FipData {
+  fiTypeList: string[]
+  isEnabled: boolean
+  isOnBoarded: boolean
+  logoUrl: string
+  id: string
+  name: string
+  Identifiers: Identifier[]
+  host?: string
+  hostV2?: string | null
+  version?: string
+}
+
+export interface GroupedFips {
+  [category: string]: FipData[]
+}
+
+// Define main journey steps
+export const MAIN_STEPS = {
+  LOGIN: 'login',
+  LINK_ACCOUNTS: 'link_accounts',
+  REVIEW_CONSENT: 'review_consent'
+}
+
+// Define flow steps for each category
+export const CATEGORY_STEPS = {
+  LIST: 'list',
+  DISCOVERY: 'discovery',
+  LINKING: 'linking'
+}
+
+export interface FipState {
+  fips: FipData[]
+  groupedFips: Record<string, FipData[]>
+  selectedFips: Record<string, string[]>
+  selectedMobileNumber?: string
+  activeCategory: string | null
+  categories: string[]
+  completedCategories: string[]
+  currentCategoryStep: CATEGORY_STEPS
+  isLoading: boolean
+  error: string | null
+  selectedAccountToLink: any[]
+  signature: string | null
+  originalAccounts: AutoDiscoveryResponse['Accounts']
+  accountsStatusArray: any[]
+  identifiers: any[]
+  accountForConsent: any[]
+  accountsToNotify: any[]
+
+  // Navigation state
+  currentStep: string
+  currentChildStep: string | null
+  navigationSteps: StepItem[]
+
+  // Actions
+  setFips: (
+    fips: FipData[],
+    responseCategories?: string[],
+    preCategorizedFips?: GroupedFips
+  ) => void
+  setSelectedFips: (category: string, fipIds: string[]) => void
+  addSelectedFip: (category: string, fipId: string) => void
+  removeSelectedFip: (category: string, fipId: string) => void
+  setSelectedMobileNumber: (mobileNumber: string) => void
+  setActiveCategory: (category: string | null) => void
+  setCategoryStep: (step: string) => void
+  completeCategory: (category: string) => void
+  setCurrentStep: (stepId: string) => void
+  setCurrentChildStep: (childStepId: string | null) => void
+  clearSelections: () => void
+  setIsLoading: (isLoading: boolean) => void
+  setError: (error: string | null) => void
+  setSignature: (signature: string | null) => void
+  setSelectedAccountToLink: (account: any[]) => void
+  setOriginalAccounts: (
+    originalAccounts: AutoDiscoveryResponse['Accounts']
+  ) => void
+  setAccountsStatusArray: (data: any[]) => void
+  setIdentifiers: (identifiersList: any[]) => void
+  setAccountForConsent: (accountForConsent: any[]) => void
+  setAccountsToNotify: (data: string) => void
+}
+
+// Initial navigation steps structure
+const initialNavigationSteps: StepItem[] = [
+  {
+    id: MAIN_STEPS.LOGIN,
+    title: 'Login',
+    isActive: false,
+    isCompleted: true
+  },
+  {
+    id: MAIN_STEPS.LINK_ACCOUNTS,
+    title: 'Link Accounts',
+    isActive: true,
+    isCompleted: false,
+    childSteps: []
+  },
+  {
+    id: MAIN_STEPS.REVIEW_CONSENT,
+    title: 'Review Consent',
+    isActive: false,
+    isCompleted: false
+  }
+]
+
+// Helper function to extract categories
+export const extractCategories = (groupedFips: string[]): string[] => {
+  const category = new Set()
+  console.log('groupedFips', groupedFips);
+
+  groupedFips.forEach((i) => {
+    Object.keys(fiTypeCategoryMap).forEach((fiType) => {
+      if (fiTypeCategoryMap?.[fiType].includes(i)) {
+        category.add(fiType)
+        return
+      }
+    })
+  })
+
+  const result = [...category]
+  if (result.length > 1) {
+    const order = Object.keys(fiTypeCategoryMap)
+    return result.sort((a, b) => order.indexOf(a) - order.indexOf(b)) as unknown as string[]
+  }
+
+  return result as unknown as string[]
+}
+
+// Helper function to create child steps from categories
+const createChildSteps = (categories: string[]): StepItem[] => {
+  return categories.map((category, index) => ({
+    id: category,
+    title: category
+      .split('_')
+      .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+      .join(' '),
+    isActive: index === 0,
+    isCompleted: false
+  }))
+}
+
+// Helper function to update navigation steps with child steps
+const updateNavigationSteps = (
+  steps: StepItem[],
+  childSteps: StepItem[],
+  currentChildStep: string | null
+): StepItem[] => {
+  return steps.map(step => {
+    if (step.id === MAIN_STEPS.LINK_ACCOUNTS) {
+      return {
+        ...step,
+        childSteps: childSteps.map(childStep => ({
+          ...childStep,
+          isActive: childStep.id === currentChildStep
+        }))
+      }
+    }
+    return step
+  })
+}
+
+export const useFipStore = create<FipState>()(
+  persist(
+    (set, get) => ({
+      fips: [],
+      groupedFips: {},
+      selectedFips: {},
+      selectedMobileNumber: undefined,
+      activeCategory: null,
+      categories: [],
+      completedCategories: [],
+      currentCategoryStep: CATEGORY_STEPS.LIST,
+      isLoading: false,
+      error: null,
+      selectedAccountToLink: [],
+      signature: null,
+      originalAccounts: [],
+      accountsStatusArray: [],
+      identifiers: [],
+      accountForConsent: [],
+      accountsToNotify: [],
+
+      // Navigation state
+      currentStep: MAIN_STEPS.LINK_ACCOUNTS,
+      currentChildStep: null,
+      navigationSteps: initialNavigationSteps,
+
+      setFips: (fips, responseCategories, preCategorizedFips) => {
+        // If pre-categorized FIPs are provided, use them directly
+        const groupedFips = preCategorizedFips || {}
+        const categoryList = responseCategories || Object.keys(groupedFips || {})
+        const categories = extractCategories(categoryList as unknown as string[])
+
+        // Initialize selectedFips with empty arrays for each category
+        const selectedFips: { [category: string]: string[] } = {}
+        categories.forEach(category => {
+          selectedFips[category] = []
+        })
+
+        // Create child steps from categories
+        const childSteps = createChildSteps(categories)
+        const currentChildStep = categories.length > 0 ? categories[0] : null
+
+        // Update navigation steps
+        const navigationSteps = updateNavigationSteps(
+          initialNavigationSteps,
+          childSteps,
+          currentChildStep
+        )
+
+        set({
+          fips,
+          groupedFips,
+          categories,
+          selectedFips,
+          activeCategory: currentChildStep,
+          currentChildStep,
+          navigationSteps,
+          currentCategoryStep: CATEGORY_STEPS.LIST
+        })
+      },
+
+      setSelectedFips: (category, fipIds) =>
+        set(state => ({
+          selectedFips: {
+            ...state.selectedFips,
+            [category]: fipIds
+          }
+        })),
+
+      setSelectedAccountToLink: accountIds =>
+        set({ selectedAccountToLink: accountIds }),
+
+      setSignature: signature => set({ signature }),
+
+      setIdentifiers: identifiers => set({ identifiers }),
+
+      setOriginalAccounts: originalAccounts => set({ originalAccounts }),
+
+      setAccountsStatusArray: data => set({ accountsStatusArray: data }),
+
+      addSelectedFip: (category, fipId) =>
+        set(state => {
+          const currentSelected = state.selectedFips[category] || []
+          if (currentSelected.includes(fipId)) return state
+
+          return {
+            selectedFips: {
+              ...state.selectedFips,
+              [category]: [...currentSelected, fipId]
+            }
+          }
+        }),
+
+      removeSelectedFip: (category, fipId) =>
+        set(state => ({
+          selectedFips: {
+            ...state.selectedFips,
+            [category]: (state.selectedFips[category] || []).filter(
+              id => id !== fipId
+            )
+          }
+        })),
+
+      setSelectedMobileNumber: mobileNumber =>
+        set({ selectedMobileNumber: mobileNumber }),
+
+      setActiveCategory: (category: string | null) => {
+        const { completedCategories } = get()
+        const isCompleted = category && completedCategories.includes(category)
+
+        // Update the active category and current child step
+        set({
+          activeCategory: category,
+          currentChildStep: category,
+          // If this category was already completed, set to LINKING step
+          // Otherwise start at LIST step
+          currentCategoryStep: isCompleted
+            ? CATEGORY_STEPS.LINKING
+            : CATEGORY_STEPS.LIST
+        })
+      },
+
+      setCategoryStep: step => set({ currentCategoryStep: step }),
+
+      completeCategory: (category: string) => {
+        const { completedCategories } = get()
+
+        // Only add if not already in the completed list
+        if (!completedCategories.includes(category)) {
+          set({
+            completedCategories: [...completedCategories, category]
+          })
+        }
+
+        // After completing, set the category step to LIST for the next category
+        set({ currentCategoryStep: CATEGORY_STEPS.LIST })
+      },
+
+      setAccountForConsent: accountForConsent => set({ accountForConsent }),
+
+      setCurrentStep: stepId =>
+        set(state => {
+          const updatedSteps = state.navigationSteps.map(step => ({
+            ...step,
+            isActive: step.id === stepId,
+            // Mark previous steps as completed
+            isCompleted:
+              step.id !== stepId &&
+              state.navigationSteps.findIndex(s => s.id === step.id) <
+              state.navigationSteps.findIndex(s => s.id === stepId)
+          }))
+
+          return {
+            currentStep: stepId,
+            navigationSteps: updatedSteps
+          }
+        }),
+
+      setCurrentChildStep: childStepId =>
+        set(state => {
+          if (!childStepId) return state
+
+          // Update the active category
+          const updatedNavigationSteps = updateNavigationSteps(
+            state.navigationSteps,
+            state.navigationSteps.find(s => s.id === MAIN_STEPS.LINK_ACCOUNTS)
+              ?.childSteps || [],
+            childStepId
+          )
+
+          return {
+            activeCategory: childStepId,
+            currentChildStep: childStepId,
+            navigationSteps: updatedNavigationSteps,
+            // Reset the category step when changing child steps
+            currentCategoryStep: CATEGORY_STEPS.LIST
+          }
+        }),
+
+      clearSelections: () =>
+        set(state => {
+          const emptySelections: { [category: string]: string[] } = {}
+          state.categories.forEach(category => {
+            emptySelections[category] = []
+          })
+          return { selectedFips: emptySelections }
+        }),
+
+      setIsLoading: isLoading => set({ isLoading }),
+
+      setAccountsToNotify: (data: string | null) => {
+        console.log('data', data);
+
+        set(state => ({
+          accountsToNotify: [...state?.accountsToNotify, data]
+        }))
+      },
+
+      setError: error => set({ error })
+    }),
+    {
+      name: 'saafe-fip-storage',
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: state => ({
+        selectedFips: state.selectedFips,
+        activeCategory: state.activeCategory,
+        selectedMobileNumber: state.selectedMobileNumber,
+        currentStep: state.currentStep,
+        categories: state.categories,
+        currentChildStep: state.currentChildStep,
+        completedCategories: state.completedCategories,
+        accountsStatusArray: state.accountsStatusArray,
+        selectedAccountToLink: state.selectedAccountToLink,
+        originalAccounts: state.originalAccounts,
+        identifiers: state.identifiers,
+        signature: state.signature,
+        accountForConsent: state.accountForConsent
+      })
+    }
+  )
+)

package/src/store/mandatoryConsent.store.ts

@@ -0,0 +1,24 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export type MandatoryConsentData = {
+  enabled: boolean
+  mandatory: boolean
+}
+
+export type MandatoryConsentState = {
+  mandatoryConsent: Record<string, MandatoryConsentData>
+  setMandatoryConsent: (data: Record<string, MandatoryConsentData>) => void
+}
+
+export const useMandatoryConsentStore = create<MandatoryConsentState>()(
+  persist(
+    (set) => ({
+      mandatoryConsent: {},
+      setMandatoryConsent: (data) => set({ mandatoryConsent: data }),
+    }),
+    {
+      name: 'mandatory-consent-storage',
+    }
+  )
+) 

package/src/store/redirect.store.ts

@@ -0,0 +1,73 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { DecodedInfo } from "@/services/api/decode.service";
+
+export interface RedirectState {
+  decodedInfo: DecodedInfo | null;
+  isDecoded: boolean;
+  isDecodingError: boolean;
+  error: string | null;
+
+  // Actions
+  setDecodedInfo: (info: DecodedInfo) => void;
+  setDecodingError: (error: string) => void;
+  clearDecodedInfo: () => void;
+  getCustomStyle: () => Record<string, string> | null;
+}
+
+export const useRedirectStore = create<RedirectState>()(
+  persist(
+    (set, get) => ({
+      decodedInfo: null,
+      isDecoded: false,
+      isDecodingError: false,
+      error: null,
+
+      setDecodedInfo: (info) =>
+        set({
+          decodedInfo: info,
+          isDecoded: true,
+          isDecodingError: false,
+          error: null,
+        }),
+
+      setDecodingError: (error) =>
+        set({
+          isDecodingError: true,
+          error,
+        }),
+
+      clearDecodedInfo: () =>
+        set({
+          decodedInfo: null,
+          isDecoded: false,
+          isDecodingError: false,
+          error: null,
+        }),
+
+      // Parse and return custom styles if available
+      getCustomStyle: () => {
+        const { decodedInfo } = get();
+
+        if (!decodedInfo?.customization?.fiu_custom_styles) {
+          return null;
+        }
+
+        try {
+          return JSON.parse(decodedInfo.customization.fiu_custom_styles);
+        } catch {
+          // console.error("Failed to parse custom styles:", error);
+          return null;
+        }
+      },
+    }),
+    {
+      name: "saafe-redirect-storage",
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: (state) => ({
+        decodedInfo: state.decodedInfo,
+        isDecoded: state.isDecoded,
+      }),
+    }
+  )
+);

package/src/store/step.store.ts

@@ -0,0 +1,124 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+// Define step interface
+interface StepItem {
+  step: number
+  title: string
+  path: string
+  parentStep?: number
+}
+
+interface StepState {
+  activeStep: number
+  completedSteps: number[]
+  totalSteps: number
+
+  // Actions
+  setActiveStep: (step: number) => void
+  setCompletedSteps: (steps: number[]) => void
+  markStepAsCompleted: (step: number) => void
+  determineActiveStep: (currentPath: string, steps: StepItem[]) => number
+  nextStep: () => void
+  previousStep: () => void
+  resetSteps: () => void
+}
+
+export const useStepStore = create<StepState>()(
+  persist(
+    set => ({
+      activeStep: 1,
+      completedSteps: [],
+      totalSteps: 1,
+
+      setActiveStep: (step: number) => set({ activeStep: step }),
+
+      setCompletedSteps: (steps: number[]) => set({ completedSteps: steps }),
+
+      markStepAsCompleted: (step: number) =>
+        set(state => ({
+          completedSteps: [...new Set([...state.completedSteps, step])]
+        })),
+
+      determineActiveStep: (currentPath: string, steps: StepItem[]) => {
+        // First check if we're on an exact path match
+        const exactPathMatch = steps.findIndex(
+          step => step.path === currentPath
+        )
+        if (exactPathMatch >= 0) return exactPathMatch + 1
+
+        // Check if we're on a path under link-accounts
+        if (currentPath.includes('/link-accounts/')) {
+          const pathSegment = currentPath.split('/').pop() || ''
+
+          // Flow paths are all part of the current category step
+          const flowPaths = ['discovery', 'link', 'discover-account']
+          if (flowPaths.includes(pathSegment)) {
+            return 2 // Default to Link Accounts if no category match
+          }
+
+          // Check if path matches a category directly - based on the URL path
+          const categorySegment = pathSegment.toLowerCase()
+          for (let i = 0; i < steps.length; i++) {
+            const step = steps[i]
+            // Skip non-child steps
+            if (!step.parentStep) continue
+
+            // Check if this step's title matches the path segment
+            if (step.title?.toLowerCase() === categorySegment) {
+              return i + 1
+            }
+          }
+
+          // Default to Link Accounts step
+          return 2
+        }
+
+        // We're not on a path in the steps
+        return 1 // Default to first step
+      },
+
+      nextStep: () =>
+        set(state => {
+          if (state.activeStep < state.totalSteps) {
+            const nextStepNumber = state.activeStep + 1
+            return {
+              activeStep: nextStepNumber,
+              completedSteps: [
+                ...new Set([...state.completedSteps, state.activeStep])
+              ]
+            }
+          }
+          return state
+        }),
+
+      previousStep: () =>
+        set(state => {
+          if (state.activeStep > 1) {
+            const prevStepNumber = state.activeStep - 1
+            return {
+              activeStep: prevStepNumber,
+              completedSteps: state.completedSteps.filter(
+                step => step !== state.activeStep - 1
+              )
+            }
+          }
+          return state
+        }),
+
+      resetSteps: () =>
+        set({
+          activeStep: 1,
+          completedSteps: []
+        })
+    }),
+    {
+      name: 'saafe-step-storage',
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: state => ({
+        activeStep: state.activeStep,
+        completedSteps: state.completedSteps
+      })
+    }
+  )
+)