saafe-redirection-flow 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [2.1.0](https://gitlab.com/Networth360/saafe-redirection/compare/v2.0.0...v2.1.0) (2025-07-04)
+
+
+### Bug Fixes
+
+* link signature and auto discovery ([5953384](https://gitlab.com/Networth360/saafe-redirection/commit/5953384080386c4bf29aa9b1a74bad87b31443c9))
+* merger branch conflict ([b524051](https://gitlab.com/Networth360/saafe-redirection/commit/b524051f4590521933e61835aaa37105ef472bb1))
+* mobile view accepted screen and help greveance ([88dd323](https://gitlab.com/Networth360/saafe-redirection/commit/88dd323530c18bcc665c0a0bd8259eef1f201665))
+* otp input eye placement ([2206d3a](https://gitlab.com/Networth360/saafe-redirection/commit/2206d3ab63897f6ebfe4240b81a14781433f55c8))
+
+
+### Features
+
+* customer support info added ([b8842bb](https://gitlab.com/Networth360/saafe-redirection/commit/b8842bb6df8a95c2d4a29f4f861d7b0241726b7a))
+* **Success:** handled the rejected consent in approved screen ([d3e483e](https://gitlab.com/Networth360/saafe-redirection/commit/d3e483e1a436e62385abefb408f3fcb9dcbbf399))
+
 # [2.0.0](https://gitlab.com/Networth360/saafe-redirection/compare/v1.1.0...v2.0.0) (2025-07-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saafe-redirection-flow",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/alert/alert.tsx

@@ -3,13 +3,19 @@ interface AlertInterface {
   title?: string
   description?: string
   rightSection?: React.ReactNode
+  type?: 'error' | 'warning'
 }
 
-const AlertComp = ({ icon, title, description, rightSection }: AlertInterface) => {
+const colors = {
+  warning: 'bg-orange-100/50 dark:bg-ring border-orange-400/50 dark:border-orange-400/50 border-1 text-yellow-600 dark:text-yellow-600 p-4 rounded-lg',
+  error: 'bg-red-100/50 dark:bg-warning-primary border-red-400/50 dark:border-red-400/50 border-1 text-gray-800 dark:text-gray-800 p-4 rounded-lg',
+}
+
+const AlertComp = ({ icon, title, description, rightSection, type = 'warning' }: AlertInterface) => {
   return (
-    <div className='bg-orange-100/50 dark:bg-ring border-orange-400/50 dark:border-orange-400/50 border-1 text-yellow-600 dark:text-yellow-600 p-4 rounded-lg'>
+    <div className={colors[type]}>
       <div className='flex items-center justify-between'>
-        <div className='flex items-start w-full gap-4'>
+        <div className='flex items-center w-full gap-4'>
           {icon ? icon : null}
           <div className='flex flex-col gap-1'>
             {title ? <p className='text-md md:text-lg font-medium'>{title}</p> : null}
@@ -20,7 +26,7 @@ const AlertComp = ({ icon, title, description, rightSection }: AlertInterface) =
           rightSection
           : null}
       </div>
-    </div>
+    </div >
   )
 }
 

package/src/components/modal/HelpModal.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
+import { DialogFooter } from "../ui/dialog";
+import { DialogContent } from "../ui/dialog";
+import { Dialog } from "../ui/dialog";
+import { DialogHeader, DialogTitle } from "../ui/dialog";
+import { CircleHelp } from "lucide-react";
+
+interface HelpModalProps {
+  buttonClassName?: string;
+  iconSize?: number;
+  textSize?: string;
+  variant?: "light" | "dark";
+}
+
+export const HelpModal = ({ 
+  buttonClassName = "", 
+  iconSize = 14, 
+  textSize = "text-sm",
+  variant = "dark"
+}: HelpModalProps) => {
+  const [showHelpModal, setShowHelpModal] = useState(false);
+  const { t } = useTranslation();
+
+  const buttonStyles = variant === "light" 
+    ? "text-white/80 hover:text-white"
+    : "text-muted-foreground hover:text-foreground";
+
+  return (
+    <>
+      <button
+        onClick={() => setShowHelpModal(true)}
+        className={`flex items-center gap-1 cursor-pointer transition-colors ${buttonStyles} ${buttonClassName}`}
+      >
+        <CircleHelp size={iconSize} />
+        <span className={`${textSize} mt-0.5`}>
+          {t("session.help")}
+        </span>
+      </button>
+
+      {/* Help Modal */}
+      <Dialog open={showHelpModal} onOpenChange={setShowHelpModal}>
+        <DialogContent className="max-w-4xl w-[90vw] max-h-[85vh] overflow-y-auto my-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <DialogHeader>
+            <DialogTitle className="text-left text-xl md:text-2xl font-semibold dark:text-white">
+              Customer Support & Complaint Redressal
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-6 text-sm md:text-base pr-2">
+            <p className="text-muted-foreground leading-relaxed">
+              The Customers who have any Complaint, can follow the following process for its redressal:
+            </p>
+            
+            <div className="space-y-5">
+              <div>
+                <p className="font-semibold mb-3 text-foreground">Register the Complaint:</p>
+                <p className="text-muted-foreground mb-3 leading-relaxed">
+                  Register the Complaint in a complaint register / complaint box, which is available at the corporate office of the Company following address:
+                </p>
+                <div className="mt-2 p-4 bg-card border border-border rounded-lg shadow-sm">
+                  <p className="font-semibold text-foreground">Dashboard Account Aggregation Services Private Limited</p>
+                  <p className="text-muted-foreground">Workafella, New No. 431, Teynampet,</p>
+                  <p className="text-muted-foreground">Anna Salai Chennai – 600018</p>
+                </div>
+              </div>
+
+              <div>
+                <p className="font-semibold mb-3 text-foreground">Email:</p>
+                <div className="p-4 bg-card border border-border rounded-lg shadow-sm">
+                  <a href="mailto:general@saafe.in" className="text-primary hover:underline font-medium">
+                    general@saafe.in
+                  </a>
+                </div>
+              </div>
+
+              <div>
+                <p className="font-semibold mb-3 text-foreground">Write to the Company:</p>
+                <div className="p-4 bg-card border border-border rounded-lg shadow-sm">
+                  <p className="font-semibold text-foreground mb-1">Kind Attention: Customer Service Team</p>
+                  <p className="text-muted-foreground">Dashboard Account Aggregation Services Private Limited</p>
+                  <p className="text-muted-foreground">Suite 422, Workafella, New No. 431, Teynampet,</p>
+                  <p className="text-muted-foreground">Anna Salai Chennai – 600018</p>
+                </div>
+              </div>
+
+              <div className="border-t border-border pt-5">
+                <p className="font-semibold mb-3 text-amber-600 dark:text-amber-400">Escalation:</p>
+                <p className="text-muted-foreground mb-4 leading-relaxed">
+                  If the customer's query or complaint is not resolved within a period of one month from date of complaint the customer may also approach the RBI Ombudsman / Regional Office of Dept. of Supervision – RBI:
+                </p>
+                <div className="p-4 bg-amber-50/80 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg">
+                  <p className="font-semibold text-foreground">Officer-in-Charge</p>
+                  <p className="text-muted-foreground">Department of Supervision</p>
+                  <p className="text-muted-foreground">Regional Office – Chennai</p>
+                  <p className="text-muted-foreground">Reserve Bank of India</p>
+                  <p className="text-muted-foreground">Fort Glacis, No.16, Rajaji Salai</p>
+                  <p className="text-muted-foreground">Chennai 600 001</p>
+                  <p className="mt-3">
+                    <span className="font-semibold text-foreground">Tel:</span> 
+                    <a href="tel:044-25399189" className="text-primary hover:underline ml-2 font-medium">
+                      044-2539 9189
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="mt-6">
+            <Button 
+              onClick={() => setShowHelpModal(false)} 
+              variant="default" 
+              className="w-full md:w-auto px-8"
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}; 

package/src/components/session/SessionTimer.tsx

@@ -4,10 +4,10 @@ import { Button } from "../ui/button";
 import { DialogFooter } from "../ui/dialog";
 import { DialogContent } from "../ui/dialog";
 import { Dialog } from "../ui/dialog";
-import { CircleHelp, Clock, Clock4 } from "lucide-react";
+import { Clock, Clock4 } from "lucide-react";
 import { useNavigationBlock } from "@/store/NavigationBlockContext";
 import { SESSION } from "@/config/urls";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { HelpModal } from "../modal/HelpModal";
 
 export const SessionTimer = ({ onTimeout, mobile = false }: { onTimeout: () => void, mobile?: boolean }) => {
   const [timeLeft, setTimeLeft] = useState<number>(30 * 1000); // Default to 30 seconds initially
@@ -42,7 +42,7 @@ export const SessionTimer = ({ onTimeout, mobile = false }: { onTimeout: () => v
       // Save the end time in session storage
       const endTime = Date.now() + sessionTimeout;
       sessionStorage.setItem(SESSION_TIMER_KEY, JSON.stringify({ endTime }));
-    } catch (error) {
+    } catch {
       setTimeLeft(30 * 1000);
     }
   }, []);
@@ -106,21 +106,12 @@ export const SessionTimer = ({ onTimeout, mobile = false }: { onTimeout: () => v
             <Clock4 size={12} className="mt-[1px]" />
             <span className={`font-medium ${mobile ? "text-xs" : ""}`}>{formatTime(timeLeft)}</span>
           </div>
-          <Popover>
-            <PopoverTrigger>
-              <div className="flex items-center gap-1 cursor-pointer">
-                <CircleHelp size={12} />
-                <span className="text-xs mt-0.5">
-                  {t("session.help")}
-                </span>
-              </div>
-            </PopoverTrigger>
-            <PopoverContent className="w-68">
-              <div className="text-xs text-muted-secondary">
-                For any questions or concerns, please report it to our Customer Grievance Redressal Officer (<a href="https://saafe.in/contact/" target="_blank" rel="noopener noreferrer"><span className="text-primary cursor-pointer">https://saafe.in/contact/</span></a>) - AA
-              </div>
-            </PopoverContent>
-          </Popover>
+          <HelpModal 
+            variant="dark" 
+            iconSize={12} 
+            textSize="text-xs"
+            buttonClassName="text-left"
+          />
         </div>
       ) : (
         <div className="flex justify-between gap-1.5">
@@ -128,24 +119,20 @@ export const SessionTimer = ({ onTimeout, mobile = false }: { onTimeout: () => v
             <span className="font-light text-sm">{t("session.timeRemaining")}:</span>
             <span className={`font-medium ${mobile ? "text-sm" : ""}`}>{formatTime(timeLeft)}</span>
           </div>
-          <Popover>
-            <PopoverTrigger>
-              <div className="flex items-center gap-1 cursor-pointer">
-                <CircleHelp size={14} />
-                <span className="text-sm mt-0.5">
-                  {t("session.help")}
-                </span>
-              </div>
-            </PopoverTrigger>
-            <PopoverContent className="w-68">
-              <div className="text-sm text-muted-secondary">
-                For any questions or concerns, please report it to our Customer Grievance Redressal Officer (<a href="https://saafe.in/contact/" target="_blank" rel="noopener noreferrer"><span className="text-primary cursor-pointer">https://saafe.in/contact/</span></a>) - AA
-              </div>
-            </PopoverContent>
-          </Popover>
+          <HelpModal />
+          {/* <button
+            onClick={() => setShowHelpModal(true)}
+            className="flex items-center gap-1 cursor-pointer"
+          >
+            <CircleHelp size={14} />
+            <span className="text-sm mt-0.5">
+              {t("session.help")}
+            </span>
+          </button> */}
         </div>
       )}
 
+      {/* Session Warning Modal */}
       <Dialog open={showWarningModal} onOpenChange={setShowWarningModal}>
         <DialogContent className="text-center">
           <div className="flex flex-col items-center justify-center gap-2">

package/src/components/ui/bottom-sheet.tsx

@@ -92,7 +92,7 @@ export function BottomSheet({
             {/* Header with title and close button */}
             {(title || showCloseButton) && (
               <div className="flex items-center justify-between px-4 py-3">
-                {title && <h3 className="font-medium text-lg">{title}</h3>}
+                {title && <h3 className="font-medium text-lg dark:text-white">{title}</h3>}
                 {showCloseButton && (
                   <button
                     onClick={onClose}

package/src/components/ui/frosted-panel.tsx

@@ -118,8 +118,6 @@ function Aside({ children, className, width, ratio, ...props }: AsideProps) {
   const context = useContext(FrostedPanelContext);
   const { isAuthenticated } = useAuthStore();
   const { data: trustedCount, isLoading } = useTrustedCount();
-  console.log(trustedCount);
-  
 
   // Handle session timeout - only called when timer actually reaches zero
   const handleTimeout = () => {

package/src/components/ui/otp-input.tsx

@@ -24,7 +24,8 @@ interface OTPInputComponentProps {
   name?: string;
   editable?: boolean;
   autoFocus?: boolean;
-  resendLoading?: boolean
+  resendLoading?: boolean;
+  eyeClassName?: string;
 }
 
 // Extend SlotProps with our custom isError property
@@ -50,7 +51,8 @@ const OTPInputComponent = forwardRef<HTMLDivElement, OTPInputComponentProps>(({
   value = "",
   onChange,
   name,
-  autoFocus = true
+  autoFocus = true,
+  eyeClassName
 }, ref) => {
 
   const id = useId();
@@ -148,7 +150,7 @@ const OTPInputComponent = forwardRef<HTMLDivElement, OTPInputComponentProps>(({
             type="button"
             variant="link"
             size="icon"
-            className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 right-0 sm:right-2 z-10 mt-1"
+            className={cn("absolute top-1/2 -translate-y-1/2 -translate-x-1/2 right-0 sm:right-2 z-10 mt-1", eyeClassName)}
             onClick={toggleOtpVisibility}
           >
             {isOtpVisible ? (

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

@@ -45,6 +45,8 @@ export function useAccountDiscovery() {
   const { decodedInfo } = useRedirectStore()
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
+  console.log('Identifiers:', identifiers, 'Active Category:', activeCategory)
+
   return {
     ...useMutation({
       mutationFn: async (
@@ -79,11 +81,15 @@ export function useAccountDiscovery() {
             fiTypes.push(...fiTypeCategoryMap[activeCategory])
           }
 
-          const commonIdentifiers = identifiers.map(i => ({
-            type: i.type,
-            value: i.value,
-            categoryType: i.category
-          }))
+          const commonIdentifiers = identifiers
+            .filter(i => i.value && i.value.trim() !== '')
+            .map(i => ({
+              type: i.type,
+              value: i.value as string,
+              categoryType: i.category
+            }))
+
+          console.log('Common Identifiers:', commonIdentifiers)
 
           // If multiple FIP IDs, we need to call account discovery for each
           const accountPromises = fipIds.map(async (fipId) => {
@@ -135,7 +141,8 @@ export function useAccountDiscovery() {
           const originalAccounts = successfulResults.map(({ fipId, result }) => ({
             fipId,
             fipName: fipId, // We'll need to get the actual name from somewhere
-            DiscoveredAccounts: result.DiscoveredAccounts
+            DiscoveredAccounts: result.DiscoveredAccounts,
+            signature: result.signature
           }))
 
           // Process the accounts from successful API responses

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

@@ -0,0 +1,226 @@
+import { useMutation } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useFipStore, DiscoveredAccount } from '@/store/fip.store'
+import { useRedirectStore } from '@/store/redirect.store'
+import { useAuthStore } from '@/store/auth.store'
+import { fiTypeCategoryMap } from '@/const/fiTypeCategoryMap'
+import { accountService } from '@/services/api/account.service'
+import { ProcessedDiscoveryResult } from './use-account-discovery'
+import { getAutoDiscoveryFipIds } from '@/utils/auto-discovery'
+
+/**
+ * Hook for auto discovery - discovers accounts from all available FIPs for a category
+ */
+export function useAutoDiscovery() {
+  const { user } = useAuthStore()
+  const { groupedFips } = useFipStore()
+  const { decodedInfo } = useRedirectStore()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const autoDiscoveryMutation = useMutation({
+    mutationFn: async (category: string): Promise<ProcessedDiscoveryResult> => {
+      if (!user?.phoneNumber) {
+        const error = new Error('Mobile number 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 {
+        setIsLoading(true)
+        const fiuId = decodedInfo.fiuId
+        const fiTypes = Array.isArray(decodedInfo.fiTypesRequiredForConsent)
+          ? decodedInfo.fiTypesRequiredForConsent.filter(i => 
+              fiTypeCategoryMap[category.toUpperCase()]?.includes(i)
+            )
+          : []
+
+        if (fiTypes.length === 0) {
+          // Fallback to category map if no FI types are provided
+          const categoryTypes = fiTypeCategoryMap[category.toUpperCase()]
+          if (categoryTypes) {
+            fiTypes.push(...categoryTypes)
+          }
+        }
+
+        // Get FIP IDs for auto discovery
+        const fipIds = getAutoDiscoveryFipIds(
+          category,
+          decodedInfo.fipId,
+          groupedFips
+        )
+
+        if (fipIds.length === 0) {
+          throw new Error('No FIPs available for auto discovery')
+        }
+
+        // Construct identifiers from redirect store data and FIP requirements
+        const constructIdentifiers = (fipIds: string[]) => {
+          const { decodedInfo } = useRedirectStore.getState()
+          const { fips } = useFipStore.getState()
+
+          return fipIds
+            .flatMap((fipId) => {
+              const fip = fips.find((f) => f.id === fipId)
+              return fip?.Identifiers || []
+            })
+            .reduce<{ type: string; value: string | null; categoryType: string }[]>(
+              (acc, identifier) => {
+                if (!acc.find((i) => i.type === identifier.type)) {
+                  let value: string | null = null
+                  if (identifier.type === 'PAN') {
+                    value = decodedInfo?.pan || null
+                  } else if (identifier.type === 'MOBILE') {
+                    value = decodedInfo?.phoneNumber || null
+                  } else if (identifier.type === 'DOB') {
+                    value = decodedInfo?.dob || null
+                  } else if (identifier.type === 'AADHAAR') {
+                    value = null // AADHAAR not available in decodedInfo
+                  }
+                  acc.push({ 
+                    type: identifier.type,
+                    value, 
+                    categoryType: identifier.category 
+                  })
+                }
+                return acc
+              },
+              []
+            )
+        }
+
+        const commonIdentifiers = constructIdentifiers(fipIds).filter(id => id.value !== null) as { type: string; value: string; categoryType: string; }[]
+
+        // Log the constructed identifiers for debugging
+        console.log('Auto Discovery: Constructed identifiers:', commonIdentifiers)
+
+        // Perform account discovery for all FIPs
+        const accountPromises = fipIds.map(async (fipId) => {
+          return accountService.accountDiscovery({
+            Identifiers: [...commonIdentifiers],
+            FiuId: fiuId,
+            FipId: fipId,
+            FITypes: fiTypes
+          })
+        })
+
+        // Wait for all account discovery calls to complete
+        const results = await Promise.allSettled(accountPromises)
+
+        // Process results
+        const successfulResults: { fipId: string; result: { DiscoveredAccounts: DiscoveredAccount[]; signature: string } }[] = []
+        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
+        const originalAccounts = successfulResults.map(({ fipId, result }) => ({
+          fipId,
+          fipName: fipId, // We'll get the actual name from the FIP data
+          DiscoveredAccounts: result.DiscoveredAccounts,
+          signature: result.signature
+        }))
+
+        // Process the accounts from successful API responses
+        const processedAccounts = originalAccounts.flatMap(fipData =>
+          fipData.DiscoveredAccounts.map((account: DiscoveredAccount) => ({
+            id: account.accRefNumber,
+            type: account.FIType,
+            maskedAccountNumber: account.maskedAccNumber,
+            bankName: fipData.fipName,
+            logoUrl: account.logoUrl,
+            isNew: false,
+            fipId: fipData.fipId
+          }))
+        )
+
+        // Group accounts by type
+        const groupedAccounts = processedAccounts.reduce((acc: ProcessedDiscoveryResult['groupedAccounts'], account) => {
+          const key = account.type
+          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 providers failed to load: ${failedFips.join(', ')}`
+          setErrorMessage(partialErrorMsg)
+        } else {
+          setErrorMessage(null)
+        }
+
+        setIsLoading(false)
+        return {
+          originalAccounts,
+          accounts: processedAccounts,
+          groupedAccounts,
+          signature
+        }
+      } catch (error) {
+        setIsLoading(false)
+        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.')
+        }
+        throw error
+      }
+    }
+  })
+
+  return {
+    ...autoDiscoveryMutation,
+    isLoading,
+    errorMessage,
+    clearError: () => setErrorMessage(null)
+  }
+} 

package/src/index.css

@@ -50,6 +50,8 @@
 
 --surface: oklch(0.98 0.0017 247.84);
 
+--warning-primary: oklch(0.9791 0.018 78.24);
+
 }
 
 .dark {
@@ -136,6 +138,7 @@
 
 --color-surface: var(--surface);
 
+--color-warning-primary: var(--warning-primary);
 }
 
 @layer base {