saafe-redirection-flow 2.0.0 → 2.1.0

package/src/pages/accounts/DiscoverAccount.tsx

@@ -18,7 +18,6 @@ import { useMutation, useQuery } from '@tanstack/react-query'
 import { accountService } from '@/services/api'
 import { useMediaQuery } from '@/hooks/use-media-query'
 import { useFipStore } from '@/store/fip.store'
-import logo from '../../assets/brand/saafe-logo.svg'
 import { z } from 'zod'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
@@ -36,10 +35,22 @@ import { useSetPageTitle } from '@/hooks/use-page-title'
 import { useRedirectStore } from '@/store/redirect.store'
 import { BottomSheet } from '@/components/ui/bottom-sheet'
 
+interface ApiError extends Error {
+  response?: {
+    data?: {
+      errorCode?: string
+      errorMsg?: string
+    }
+  }
+}
+
 interface DiscoverAccountProps {
   state?: {
     category: string
     selectedFips?: string[]
+    fromOldUser?: boolean
+    fromDiscoverMore?: boolean
+    fromAutoDiscovery?: boolean
   }
   currentCategory?: string | null
 }
@@ -107,7 +118,7 @@ const AddNumberModalContent = ({ showModal, setShowModal, t, addNewNoQuery, hand
             onSuccess: () => {
               handleAddNumber(inputValue.number)
             },
-            onError: (error: Error) => {
+            onError: (error: ApiError) => {
               // console.error(error)
               setInputValue({ number: inputValue.number, error: error.response?.data?.errorCode || 'Something went wrong' });
             }
@@ -147,6 +158,43 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const [showAlert, setShowAlert] = useState(true)
 
+  // Utility function to parse various date formats
+  const parseDateFromDecodedInfo = (dateString: string | null): Date | null => {
+    if (!dateString) return null
+    
+    try {
+      // Handle URL-encoded date string
+      const decodedDateString = decodeURIComponent(dateString)
+      
+      // Try parsing as ISO string first (handles formats like "1999-12-09T18:30:00.000Z")
+      let parsedDate = new Date(decodedDateString)
+      
+      // If that fails, try other common formats
+      if (isNaN(parsedDate.getTime())) {
+        // Try DD/MM/YYYY format
+        if (decodedDateString.includes('/')) {
+          const [day, month, year] = decodedDateString.split('/')
+          parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
+        }
+        // Try YYYY-MM-DD format
+        else if (decodedDateString.includes('-') && decodedDateString.length === 10) {
+          parsedDate = new Date(decodedDateString + 'T00:00:00.000Z')
+        }
+      }
+      
+      // Validate the parsed date
+      if (isNaN(parsedDate.getTime())) {
+        console.warn('Could not parse date:', dateString)
+        return null
+      }
+      
+      return parsedDate
+    } catch (error) {
+      console.warn('Error parsing date:', error)
+      return null
+    }
+  }
+
   // Format category name for display
   const formatCategoryName = (name: string) => {
     return name
@@ -159,7 +207,8 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
     title: t('addNewMobileNumber'),
     content: null as React.ReactNode,
     number: '',
-    otp: null as string | null
+    otp: null as string | null,
+    error: ''
   })
 
   // Detect mobile screens
@@ -189,7 +238,7 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
       getMobileNumbersQuery.refetch()
       setShowModal(old => ({ ...old, otp: null, error: '' }))
     },
-    onError: error => {
+    onError: (error: ApiError) => {
       setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorCode || 'Something went wrong' }))
     }
   })
@@ -209,10 +258,11 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
         title: 'Add new mobile number',
         content: null,
         number: '',
-        otp: null
+        otp: null,
+        error: ''
       })
     },
-    onError: error => {
+    onError: (error: ApiError) => {
       setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorCode || 'Something went wrong' }))
       // console.error(error)
     }
@@ -257,13 +307,64 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
       ...result[mobileIndex],
       value: selectedMobileNumber
     })
-    navigate('/link-accounts/discovery', {
-      state: {
-        category,
-        selectedFips: state?.selectedFips,
-        fromDiscovery: true
-      }
+    
+    // Update identifiers in FIP store
+    setIdentifiers(result)
+    
+    // Also update PAN and DOB in redirect store for API calls
+    const { updateIdentifiers } = useRedirectStore.getState()
+    const panIdentifier = result.find(i => i.type === 'PAN')
+    const dobIdentifier = result.find(i => i.type === 'DOB')
+    
+    updateIdentifiers(
+      panIdentifier?.value || undefined,
+      dobIdentifier?.value || undefined
+    )
+    
+    console.log('DiscoverAccount: Updated identifiers in both stores', {
+      pan: panIdentifier?.value,
+      dob: dobIdentifier?.value
     })
+    
+    // Check if we came from different sources and redirect accordingly
+    if (state?.fromOldUser) {
+      // Redirect back to old user page
+      navigate('/link-accounts/old-user', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          fromDiscovery: true
+        }
+      })
+    } else if (state?.fromAutoDiscovery) {
+      // Redirect back to auto discovery page
+      navigate('/link-accounts/discovery', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          isAutoDiscovery: true, // Important: preserve auto discovery flag
+          fromDiscovery: true
+        }
+      })
+    } else if (state?.fromDiscoverMore) {
+      // Redirect back to AccountsToProceed page
+      navigate('/link-accounts/discovery', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          fromDiscovery: true
+        }
+      })
+    } else {
+      // Normal flow - go to discovery page
+      navigate('/link-accounts/discovery', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          fromDiscovery: true
+        }
+      })
+    }
   }
 
   const handleCancel = () => {
@@ -308,7 +409,7 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
       <Modal
         title={showModal.title}
         open={showModal.isOpen}
-        className='w-[380px]'
+        className='w-[450px]'
         onOpenChange={open =>
           !open &&
           setShowModal({
@@ -330,13 +431,14 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
             title=''
             editable={true}
             mobileNumber={showModal.number}
+            eyeClassName="translate-x-2"
             onResend={() => {
               setShowModal(old => ({ ...old, otp: null, error: '' }))
               addNewNoQuery.mutate(undefined, {
                 onSuccess: () => {
                   setShowModal(old => ({ ...old, otp: null, error: '' }))
                 },
-                onError: (error: Error) => {
+                onError: (error: ApiError) => {
                   setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorMsg || 'Something went wrong' }))
                   // console.error(error)
                 }
@@ -366,6 +468,28 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
     );
   };
 
+  // Auto-fill DOB from decodedInfo when identifiers are set
+  useEffect(() => {
+    if (decodedInfo?.dob && identifiers?.find(i => i.type === 'DOB')) {
+      const parsedDate = parseDateFromDecodedInfo(decodedInfo.dob)
+      
+      if (parsedDate) {
+        const dobIdentifier = identifiers.find(i => i.type === 'DOB')
+        if (dobIdentifier && !dobIdentifier.value) {
+          const result = [...identifiers]
+          const dobIndex = result.findIndex(i => i.type === 'DOB')
+          if (dobIndex !== -1) {
+            result[dobIndex] = {
+              ...dobIdentifier,
+              value: parsedDate.toLocaleDateString('en-CA') // YYYY-MM-DD format
+            }
+            setIdentifiers(result)
+          }
+        }
+      }
+    }
+  }, [decodedInfo?.dob, identifiers, setIdentifiers])
+
   return (
     <div>
       <div className='flex flex-col gap-1 w-full md:px-14 px-0 gap-2 md:mt-6 mt-0'>
@@ -474,15 +598,15 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
           <>
             <SectionTitle className='mt-6' title={`DOB*`} />
             <div className='flex flex-col gap-1 md:w-[50%] w-full gap-2'>
-              <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+              <Popover open={isPopoverOpen && !decodedInfo?.dob} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
-                  <div className='flex h-[56px] w-full items-center justify-between rounded-md border bg-white border-gray-200 dark:border-gray-700 dark:bg-input/30 px-3 py-2 text-consent-primary dark:border-gray-700'>
+                  <div className={`flex h-[56px] w-full items-center justify-between rounded-md border bg-white border-gray-200 dark:border-gray-700 dark:bg-input/30 px-3 py-2 text-consent-primary dark:border-gray-700 ${decodedInfo?.dob ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}>
                     {identifiers?.find(i => i.type === 'DOB')?.value ? (
                       <span>{new Date(identifiers.find(i => i.type === 'DOB')?.value || '').toLocaleDateString('en-IN', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
                     ) : (
                       <span className='text-muted-foreground'>Pick a date</span>
                     )}
-                    <CalendarIcon className='h-4 w-4 opacity-50' />
+                    <CalendarIcon className={`h-4 w-4 ${decodedInfo?.dob ? 'opacity-30' : 'opacity-50'}`} />
                   </div>
 
                 </PopoverTrigger>
@@ -529,16 +653,22 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
                     selected={identifiers?.find(i => i.type === 'DOB')?.value ? new Date(identifiers.find(i => i.type === 'DOB')?.value || '') : undefined}
                     onSelect={(date) => {
                       if (date) {
+                        const dateValue = date.toLocaleString().split(',')[0]
                         const result = [...identifiers]
                         result.splice(
                           result.findIndex(i => i.type === 'DOB'),
                           1,
                           {
                             ...identifiers?.find(i => i.type === 'DOB'),
-                            value: date.toLocaleString().split(',')[0]
+                            value: dateValue
                           }
                         )
                         setIdentifiers(result)
+                        
+                        // Also update redirect store immediately
+                        const { updateIdentifiers } = useRedirectStore.getState()
+                        updateIdentifiers(undefined, dateValue || undefined)
+                        
                         setIsPopoverOpen(false)
                       }
                     }}
@@ -557,21 +687,27 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
                 type='text'
                 className={`h-[56px] bg-white border-gray-200 dark:border-gray-700 text-consent-primary text-md ${validationError.PAN ? 'border-red-500' : ''}`}
                 placeholder={`Enter PAN`}
-                value={identifiers?.find(i => i.type === 'PAN')?.value}
-                readOnly={decodedInfo?.pan ? true : false}
+                value={identifiers?.find(i => i.type === 'PAN')?.value || ''}
+                // readOnly={decodedInfo?.pan ? true : false}
                 onChange={e => {
                   setValidationError(prev => ({ ...prev, PAN: null }))
                   const panValue = e.target.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase()
+                  
+                  // Update identifiers array more safely
                   const result = [...identifiers]
-                  result.splice(
-                    result.findIndex(i => i.type === 'PAN'),
-                    1,
-                    {
-                      ...identifiers?.find(i => i.type === 'PAN'),
+                  const panIndex = result.findIndex(i => i.type === 'PAN')
+                  
+                  if (panIndex !== -1) {
+                    result[panIndex] = {
+                      ...result[panIndex],
                       value: panValue
                     }
-                  )
-                  setIdentifiers(result)
+                    setIdentifiers(result)
+                    
+                    // Also update redirect store immediately
+                    const { updateIdentifiers } = useRedirectStore.getState()
+                    updateIdentifiers(panValue || undefined, undefined)
+                  }
 
                   // Only validate when input reaches max length
                   if (panValue.length >= 10) {
@@ -601,20 +737,22 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
                 className={`h-[56px] bg-white border-gray-200 dark:border-gray-700 text-consent-primary text-md ${validationError.AADHAAR ? 'border-red-500' : ''}`}
                 placeholder={`Enter AADHAAR`}
                 readOnly={decodedInfo?.aadhaar ? true : false}
-                value={identifiers?.find(i => i.type === 'AADHAAR')?.value}
+                value={identifiers?.find(i => i.type === 'AADHAAR')?.value || ''}
                 onChange={e => {
                   setValidationError(prev => ({ ...prev, AADHAAR: null }))
                   const aadhaarValue = e.target.value.replace(/[^0-9]/g, '')
+                  
+                  // Update identifiers array more safely
                   const result = [...identifiers]
-                  result.splice(
-                    result.findIndex(i => i.type === 'AADHAAR'),
-                    1,
-                    {
-                      ...identifiers?.find(i => i.type === 'AADHAAR'),
+                  const aadhaarIndex = result.findIndex(i => i.type === 'AADHAAR')
+                  
+                  if (aadhaarIndex !== -1) {
+                    result[aadhaarIndex] = {
+                      ...result[aadhaarIndex],
                       value: aadhaarValue
                     }
-                  )
-                  setIdentifiers(result)
+                    setIdentifiers(result)
+                  }
 
                   // Only validate when input reaches max length
                   if (aadhaarValue.length >= 12) {
@@ -710,13 +848,14 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
             title=''
             editable={true}
             mobileNumber={showModal.number}
+            eyeClassName="translate-x-2"
             onResend={() => {
               setShowModal(old => ({ ...old, otp: null, error: '' }))
               addNewNoQuery.mutate(undefined, {
                 onSuccess: () => {
                   setShowModal(old => ({ ...old, otp: null, error: '' }))
                 },
-                onError: (error: Error) => {
+                onError: (error: ApiError) => {
                   setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorMsg || 'Something went wrong' }))
                   // console.error(error)
                 }
@@ -743,8 +882,7 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
           </AnimatedButton>
         </div> : showModal.content}
       </BottomSheet>
-
-    </div >
+    </div>
   )
 }
 

package/src/pages/accounts/LinkSelectedAccounts.tsx

@@ -8,7 +8,7 @@ import { Repeat } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { MobileFooter } from '@/components/ui/mobile-footer'
 import WebFooter from '@/components/ui/web-footer'
-import { useFipStore } from '@/store/fip.store'
+import { useFipStore, DiscoveredAccount } from '@/store/fip.store'
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'
 import { Input } from '@/components/ui/input'
 import { useMutation } from '@tanstack/react-query'
@@ -117,8 +117,11 @@ const SuccessAnimation = ({
 interface Account {
   id: string;
   fipId: string;
+  fipName: string;
+  signature: string;
   accounts: string;
   otp: string;
+  DiscoveredAccounts?: DiscoveredAccount[];
 }
 
 interface LinkSelectedAccountsProps {
@@ -157,13 +160,12 @@ const LinkSelectedAccounts = ({
   const {
     selectedAccountToLink,
     selectedMobileNumber,
-    signature,
     accountsStatusArray,
     setAccountsStatusArray
   } = useFipStore()
 
   const sendBankOTPQuery = useMutation({
-    mutationFn: ({ fipId, accounts }: { fipId: string; accounts: any[] }) =>
+    mutationFn: ({ fipId, accounts, signature }: { fipId: string; accounts: DiscoveredAccount[]; signature: string }) =>
       accountService.sendBankOTP({
         signature: signature || '',
         FipId: fipId || '',
@@ -236,9 +238,10 @@ const LinkSelectedAccounts = ({
     ) {
       sendBankOTPQuery.mutate({
         fipId: selectedAccountToLink[nextIndex].fipId,
-        accounts: selectedAccountToLink[nextIndex]?.['DiscoveredAccounts']
+        accounts: selectedAccountToLink[nextIndex]?.DiscoveredAccounts || [],
+        signature: selectedAccountToLink[nextIndex]?.signature || ''
       })
-      setIsExpanded({ item: selectedAccountToLink[nextIndex], expanded: true })
+      setIsExpanded({ item: { ...selectedAccountToLink[nextIndex], accounts: '', otp: '' }, expanded: true })
     } else {
       if (type != 'retry') { setIsExpanded({ item: null, expanded: false }) }
     }
@@ -313,10 +316,11 @@ const LinkSelectedAccounts = ({
       if (accountsStatusArray?.length) {
         handleNextActiveAccount()
       } else {
-        setIsExpanded({ item: selectedAccountToLink[0], expanded: true })
+        setIsExpanded({ item: { ...selectedAccountToLink[0], accounts: '', otp: '' }, expanded: true })
         sendBankOTPQuery.mutate({
           fipId: selectedAccountToLink[0].fipId,
-          accounts: selectedAccountToLink[0]?.['DiscoveredAccounts']
+          accounts: selectedAccountToLink[0]?.DiscoveredAccounts || [],
+          signature: selectedAccountToLink[0]?.signature || ''
         })
       }
     }
@@ -443,7 +447,8 @@ const LinkSelectedAccounts = ({
                         ) {
                           sendBankOTPQuery.mutate({
                             fipId: account.fipId,
-                            accounts: account?.['DiscoveredAccounts']
+                            accounts: account?.DiscoveredAccounts || [],
+                            signature: account?.signature || ''
                           })
                         }
                         setIsExpanded({
@@ -555,7 +560,8 @@ const LinkSelectedAccounts = ({
                             onClick={() => {
                               sendBankOTPQuery.mutate({
                                 fipId: account.fipId,
-                                accounts: account?.['DiscoveredAccounts']
+                                accounts: account?.DiscoveredAccounts || [],
+                                signature: account?.signature || ''
                               })
                               setOTPResent(true)
                             }}