saafe-redirection-flow 2.0.0

package/src/hooks/use-mobile.ts

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    
+    // Modern browsers use addEventListener
+    mql.addEventListener("change", onChange)
+    
+    // Set initial value
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/hooks/use-page-title.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect, useContext, createContext, ReactNode } from 'react';
+
+interface PageTitleContextType {
+  pageTitle: string;
+  setPageTitle: (title: string) => void;
+}
+
+// Create context with default values
+const PageTitleContext = createContext<PageTitleContextType>({
+  pageTitle: '',
+  setPageTitle: () => {}
+});
+
+// Provider component to wrap around App
+export const PageTitleProvider = ({ children }: { children: ReactNode }) => {
+  const [pageTitle, setPageTitle] = useState<string>('');
+
+  return (
+    <PageTitleContext.Provider value={{ pageTitle, setPageTitle }}>
+      {children}
+    </PageTitleContext.Provider>
+  );
+};
+
+// Custom hook to use the page title context
+export function usePageTitle(): [string, (title: string) => void] {
+  const context = useContext(PageTitleContext);
+  
+  if (!context) {
+    throw new Error('usePageTitle must be used within a PageTitleProvider');
+  }
+  
+  return [context.pageTitle, context.setPageTitle];
+}
+
+// Additional hook to set page title with document.title update
+export function useSetPageTitle(title: string): void {
+  const [_, setPageTitle] = usePageTitle();
+  
+  useEffect(() => {
+    setPageTitle(title);
+    document.title = `${title} | Saafe`;
+    
+    return () => {
+      document.title = 'Saafe';
+    };
+  }, [title, setPageTitle]);
+} 

package/src/hooks/use-platform.ts

@@ -0,0 +1,52 @@
+import { useRedirectStore } from "@/store/redirect.store";
+
+/**
+ * Supported platform types for SDK integration
+ */
+export type PlatformType = 
+  | "ios" 
+  | "android" 
+  | "react-native" 
+  | "flutter" 
+  | "web" 
+  | "unknown";
+
+/**
+ * Normalized platform values to ensure consistent casing
+ */
+const NORMALIZED_PLATFORMS: Record<string, PlatformType> = {
+  'ios': 'ios',
+  'android': 'android',
+  'react-native': 'react-native',
+  'reactnative': 'react-native',
+  'flutter': 'flutter',
+  'web': 'web'
+};
+
+/**
+ * Hook to detect and provide platform-specific information
+ * Usage:
+ * const { platform, isMobile, isIOS, isAndroid } = usePlatform();
+ */
+export function usePlatform() {
+  const { decodedInfo } = useRedirectStore();
+  
+  // Normalize platform value to ensure consistent handling
+  const rawPlatform = decodedInfo?.platform?.toLowerCase() || '';
+  const platform = NORMALIZED_PLATFORMS[rawPlatform] || "unknown";
+  
+  const isMobile = platform === "ios" || platform === "android";
+  const isNativeSDK = platform === "ios" || platform === "android" || platform === "react-native" || platform === "flutter";
+  const isWeb = platform === "web" || platform === "unknown";
+  
+  return {
+    platform,
+    isMobile,
+    isNativeSDK,
+    isWeb,
+    isIOS: platform === "ios",
+    isAndroid: platform === "android",
+    isReactNative: platform === "react-native",
+    isFlutter: platform === "flutter"
+  };
+} 

package/src/hooks/use-trusted-count.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { publicService } from '@/services/api';
+
+/**
+ * Hook to fetch trusted user count
+ */
+export function useTrustedCount() {
+  return useQuery({
+    queryKey: ['trusted-count'],
+    queryFn: publicService.getTrustedCount,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    retry: 2,
+    refetchOnWindowFocus: false,
+    select: (data) => {
+      return {
+        ...data,
+        displayText: `Trusted by ${data.trustedCount} Indians`
+      };
+    }
+  });
+} 

package/src/hooks/use-url-decode.ts

@@ -0,0 +1,90 @@
+import { useMutation } from '@tanstack/react-query'
+import { DecodeUrlParams, decodeService } from '@/services/api/decode.service'
+import { useRedirectStore } from '@/store/redirect.store'
+import { useEffect } from 'react'
+
+/**
+ * Parse URL search params to extract required decoding parameters
+ */
+export function extractUrlParams(): DecodeUrlParams | null {
+  // Check if we're in a browser environment
+  if (typeof window === 'undefined') return null
+
+  const urlParams = new URLSearchParams(window.location.search)
+  const fi = urlParams.get('fi')
+  const ecreq = urlParams.get('ecreq')
+  const reqdate = urlParams.get('reqdate')
+  const profile = urlParams.get('profile')
+  const platform = urlParams.get('platform')
+  const theme = urlParams.get('theme')
+
+  if (!fi || !ecreq || !reqdate) {
+    return null
+  }
+
+  return {
+    fi,
+    ecreq,
+    reqdate,
+    profile: profile || undefined,
+    platform: platform || undefined,
+    theme: theme || undefined
+  }
+}
+
+/**
+ * Hook for decoding URL parameters from redirection
+ */
+export function useUrlDecode() {
+  const { setDecodedInfo, setDecodingError, isDecoded } = useRedirectStore()
+
+  const decodeMutation = useMutation({
+    mutationFn: async (params: DecodeUrlParams) => {
+      try {
+        const result = await decodeService.decodeUrlParams(params)
+
+        // Handle specific platform and theme flags
+        if (params.platform) {
+          result.platform = params.platform;
+        }
+
+        if (params.theme) {
+          result.theme = params.theme;
+        }
+
+        // Log platform and theme for debugging
+        if (process.env.NODE_ENV !== 'production') {
+          console.log('Platform detected:', result.platform || 'none');
+          console.log('Theme detected:', result.theme || 'system (default)');
+        }
+
+        setDecodedInfo(result)
+        return result
+      } catch (error: Error | unknown) {
+        // console.error('Error decoding URL params:', error)
+        const errorMessage = error instanceof Error ? error.message : 'Failed to decode URL parameters'
+        setDecodingError(errorMessage)
+        throw error
+      }
+    }
+  })
+
+  // Automatically decode URL parameters on mount if not already decoded
+  useEffect(() => {
+    if (!isDecoded) {
+      const params = extractUrlParams()
+      if (params && decodeMutation.isIdle) {
+        decodeMutation.mutate(params)
+      }
+    }
+  }, [isDecoded])
+
+  return {
+    decode: (params: DecodeUrlParams) => decodeMutation.mutate(params),
+    isLoading: decodeMutation.isPending,
+    isError: decodeMutation.isError,
+    error: decodeMutation.error,
+    isSuccess: decodeMutation.isSuccess,
+    data: decodeMutation.data
+  }
+}

package/src/hooks/useStep.ts

@@ -0,0 +1,170 @@
+import { useState, useCallback, useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+interface Step {
+  step: number
+  title: string
+  path: string
+}
+
+const steps: Step[] = [
+  { step: 1, title: 'Login/Signup', path: '/login' },
+  { step: 2, title: 'Link Accounts', path: '/link-accounts' },
+  // Category paths - all these are child steps of Link Accounts
+  { step: 3, title: 'Banks', path: '/link-accounts/banks' },
+  { step: 4, title: 'GST', path: '/link-accounts/gst' },
+  { step: 5, title: 'Insurance', path: '/link-accounts/insurance' },
+  // Flow paths within each category
+  { step: 10, title: 'Discovery', path: '/link-accounts/discovery' },
+  { step: 11, title: 'Link', path: '/link-accounts/link' },
+  {
+    step: 12,
+    title: 'Discover Account',
+    path: '/link-accounts/discover-account'
+  },
+  // Final step
+  { step: 13, title: 'Review Consent', path: '/review' }
+]
+
+interface UseStepProps {
+  initialStep?: number
+  totalSteps: number
+  onStepComplete?: (step: number) => void
+}
+
+export const useStep = ({
+  initialStep = 1,
+  totalSteps,
+  onStepComplete
+}: UseStepProps) => {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [activeStep, setActiveStep] = useState(initialStep)
+  const [completedSteps, setCompletedSteps] = useState<number[]>([])
+
+  // Update active step when route changes
+  useEffect(() => {
+    const currentPath = location.pathname
+    // First check for exact matches
+    const exactMatchIndex = steps.findIndex(s => s.path === currentPath)
+    let step = 0
+    if (exactMatchIndex >= 0) {
+      step = steps[exactMatchIndex].step
+    } else {
+      // Handle nested paths like /link-accounts/banks
+      if (currentPath.startsWith('/link-accounts/')) {
+        const pathSegment = currentPath.split('/').pop() || ''
+
+        // Check if this is a category path
+        const categoryStep = steps.find(
+          s =>
+            s.path === `/link-accounts/${pathSegment}` &&
+            s.step >= 3 &&
+            s.step <= 5
+        )
+
+        if (categoryStep) {
+          // It's a category path
+          step = categoryStep.step
+        } else {
+          // It's a flow path (discovery, link, etc.) - set to Link Accounts step
+          step = 2
+        }
+      } else if (currentPath === '/link-accounts') {
+        // Base link accounts path
+        step = 2
+      } else if (currentPath === '/review') {
+        // Review page
+        step = 13
+      } else {
+        // Default to step 1
+        step = 1
+      }
+    }
+
+    if (step > 0 && step <= totalSteps) {
+      setActiveStep(step)
+
+      // Mark previous steps as completed
+      if (step > 1) {
+        setCompletedSteps(prev => {
+          // Add all steps from 1 to current-1 as completed
+          const mainSteps = [1]
+
+          // If we're on a category path (3, 4, 5), mark Link Accounts (2) as completed
+          if (step >= 3 && step <= 5) {
+            mainSteps.push(2)
+          }
+
+          // If we're on review, mark all main steps as completed
+          if (step === 13) {
+            mainSteps.push(2, 3, 4, 5)
+          }
+
+          return [...new Set([...prev, ...mainSteps])]
+        })
+      }
+    }
+  }, [location.pathname, totalSteps])
+
+  const nextStep = useCallback(() => {
+    if (activeStep < totalSteps) {
+      // Mark current step as completed
+      setCompletedSteps(prev => [...prev, activeStep])
+      const nextStepNumber = activeStep + 1
+      setActiveStep(nextStepNumber)
+      onStepComplete?.(activeStep)
+
+      // Navigate to next step's route
+      const nextStep = steps.find(s => s.step === nextStepNumber)
+      if (nextStep) {
+        navigate(nextStep.path)
+      }
+    }
+  }, [activeStep, totalSteps, onStepComplete, navigate])
+
+  const previousStep = useCallback(() => {
+    if (activeStep > 1) {
+      setCompletedSteps(prev => prev.filter(step => step !== activeStep - 1))
+      const prevStepNumber = activeStep - 1
+      setActiveStep(prevStepNumber)
+
+      // Navigate to previous step's route
+      const prevStep = steps.find(s => s.step === prevStepNumber)
+      if (prevStep) {
+        navigate(prevStep.path)
+      }
+    }
+  }, [activeStep, navigate])
+
+  const goToStep = useCallback(
+    (step: number) => {
+      if (step >= 1 && step <= totalSteps) {
+        setActiveStep(step)
+        setCompletedSteps(prev => prev.filter(s => s < step))
+
+        // Navigate to the specified step's route
+        const targetStep = steps.find(s => s.step === step)
+        if (targetStep) {
+          navigate(targetStep.path)
+        }
+      }
+    },
+    [totalSteps, navigate]
+  )
+
+  const resetSteps = useCallback(() => {
+    setActiveStep(initialStep)
+    setCompletedSteps([])
+    navigate('/login')
+  }, [initialStep, navigate])
+
+  return {
+    activeStep,
+    completedSteps,
+    nextStep,
+    previousStep,
+    goToStep,
+    resetSteps
+  }
+}

package/src/index.css

@@ -0,0 +1,154 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.5rem;
+  --background: oklch(98.46% 0.002 247.84);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(0.98 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(0.98 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(59.02% 0.1008 205.29);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(74.39% 0.1159 203.57);
+  --secondary-foreground: oklch(59.02% 0.1008 205.29);
+  --muted: oklch(0.95 0 0);
+  --muted-foreground: oklch(0.4 0 0);
+  --accent: oklch(0.95 0 0);
+  --accent-foreground: oklch(59.02% 0.1008 205.29);
+  --destructive: oklch(0.5 0.3 30);
+  --border: oklch(0.9 0 0);
+  --input: oklch(0.9 0 0);
+  --ring: oklch(0.7 0 0);
+  --chart-1: oklch(0.6 0.3 187.5);
+  --chart-2: oklch(0.6 0.3 30);
+  --chart-3: oklch(0.6 0.3 240);
+  --chart-4: oklch(0.6 0.3 270);
+  --chart-5: oklch(0.6 0.3 120);
+  --sidebar: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-primary: oklch(59.02% 0.1008 205.29);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(59.02% 0.1008 205.29);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.7 0 0);
+  --ring: oklch(96.42% 0.0181 205.32);
+  --danger: oklch(55.62% 0.2088 24.15);
+--muted-secondary: oklch(54.44% 0.035 265.11);
+--consent-primary: oklch(36.95% 0.0381 260.5);
+--consent-secondary: oklch(0.54 0.035 265.11);
+--placeholder: oklch(0.71 0.0273 261.12);
+
+
+--border-primary: oklch(87.15% 0.0123 259.82);
+--border-secondary: oklch(0.97 0.0045 258.32);
+
+--surface: oklch(0.98 0.0017 247.84);
+
+}
+
+.dark {
+  --background: oklch(20.22% 0.033 232.43);
+  /* --background: oklch(0.15 0 0); */
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(23.81% 0.041 232.18);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.2 0 0);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.6 0.3 187.5);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.25 0 0);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.25 0 0);
+  --muted-foreground: oklch(88.91% 0.018 229.03);
+  --accent: oklch(0.25 0 0);
+  --accent-foreground: oklch(0.95 0 0);
+  --destructive: oklch(0.7 0.3 30);
+  --border: oklch(30.13% 0.057 236.60);
+  --input: oklch(30.13% 0.057 236.60);
+  --ring: oklch(0.5 0 0);
+  --chart-1: oklch(0.4 0.3 187.5);
+  --chart-2: oklch(0.4 0.3 30);
+  --chart-3: oklch(0.4 0.3 240);
+  --chart-4: oklch(0.4 0.3 270);
+  --chart-5: oklch(0.4 0.3 120);
+  --sidebar: oklch(0.2 0 0);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.4 0.3 187.5);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.25 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.3 0 0);
+  --sidebar-ring: oklch(0.5 0 0);
+  --muted-secondary: oklch(77.53% 0.036 227.57);
+  --ring: oklch(30.13% 0.057 236.60);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-danger: var(--danger);
+  --color-muted-secondary: var(--muted-secondary);
+--color-consent-primary: var(--consent-primary);
+--color-consent-secondary: var(--consent-secondary);
+--color-placeholder: var(--placeholder);
+
+--color-border-primary: var(--border-primary);
+--color-border-secondary: var(--border-secondary);
+
+--color-surface: var(--surface);
+
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    color: #344054;
+  }
+}
+
+body {
+font-family: 'Poppins', sans-serif;
+
+}

package/src/interfaces/app.interfaces.ts

@@ -0,0 +1,39 @@
+/**
+ * Type definitions for App component and related functionality
+ */
+
+// Props for URL decode handler component
+export interface UrlDecodeHandlerProps {
+  children: React.ReactNode;
+}
+
+// Custom style interface used in redirect store
+export interface CustomStyle {
+  primaryButtonColor?: string;
+  primaryBackgroundColor?: string;
+  secondaryButtonColor?: string;
+  textColor?: string;
+  backgroundColor?: string;
+  logoUrl?: string;
+}
+
+// Decoded information from URL
+export interface DecodedInfo {
+  redirectUrl?: string;
+  entityId?: string;
+  purpose?: string;
+  customStyle?: CustomStyle;
+  [key: string]: any;
+}
+
+// Theme context related interfaces
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme: string;
+}
+
+// Navigation block context types
+export interface NavigationBlockContextType {
+  allowNavigation: () => void;
+  shouldAllowNavigation: () => boolean;
+} 

package/src/interfaces/services.interfaces.ts

@@ -0,0 +1,65 @@
+/**
+ * Type definitions for API services
+ */
+import { InternalAxiosRequestConfig } from 'axios';
+
+// Common API response interfaces
+export interface ApiResponse<T = any> {
+  data: T;
+  success: boolean;
+  message?: string;
+}
+
+// Auth related interfaces
+export interface LoginRequest {
+  phone: string;
+  otp: string;
+}
+
+export interface TokenResponse {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+  expires_in: number;
+}
+
+export interface UserProfile {
+  id: string;
+  name: string;
+  phone: string;
+  email?: string;
+}
+
+// Axios request interface with retry flag
+export interface RetryableRequest extends InternalAxiosRequestConfig {
+  _retry?: boolean;
+}
+
+// Account related interfaces
+export interface AccountDetails {
+  id: string;
+  accountNumber: string;
+  accountType: string;
+  bankName: string;
+  ifsc?: string;
+  linkedAt?: string;
+}
+
+// FIP related interfaces
+export interface FipDetails {
+  id: string;
+  name: string;
+  logo: string;
+  type: string;
+  category?: string;
+}
+
+// Consent related interfaces
+export interface ConsentDetails {
+  id: string;
+  purpose: string;
+  dataRequested: string[];
+  expiry: string;
+  approvedAt?: string;
+  status: 'pending' | 'approved' | 'rejected';
+}