saafe-redirection-flow 2.0.0 → 2.1.0

package/src/pages/consent/success.tsx

@@ -8,13 +8,23 @@ import { feedbackService } from "@/services/api";
 import { StarFilledIcon } from "@radix-ui/react-icons";
 import { useNavigationBlock } from "@/store/NavigationBlockContext";
 import { MobileAppDownload } from "@/components/mobileAppDownload";
+import { useLocation } from "react-router-dom";
+import AlertComp from "@/components/alert/alert";
+import { X } from "lucide-react";
+import { useFipStore } from "@/store/fip.store";
+
+import { HelpModal } from "@/components/modal/HelpModal";
 
 const Success = () => {
+  const location = useLocation();
+  const consentResult: any[] = location.state?.consentResult;
+  const consents: any[] = location.state?.consents;
   const [rating, setRating] = useState<number | null>(null);
   const [hoveredRating, setHoveredRating] = useState<number | null>(null);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [countdown, setCountdown] = useState(10);
+  const { selectedAccountToLink } = useFipStore()
   const { decodedInfo } = useRedirectStore();
   const { allowNextNavigation } = useNavigationBlock();
   const consentHandle = decodedInfo?.srcref || '';
@@ -24,9 +34,9 @@ const Success = () => {
     if (countdown === 1) {
       console.log("Sending message to parent -->> From AA");
       window.parent.postMessage(
-        { 
-          type: 'AA', 
-          status: 'approved', 
+        {
+          type: 'AA',
+          status: 'approved',
           flowCompleted: true,
           consentHandle: consentHandle,
           userRating: rating,
@@ -94,8 +104,9 @@ const Success = () => {
   };
 
   return (
-    <div className="flex flex-col min-h-screen h-full">
+    <div className="flex flex-col h-full">
       <MobileBackground
+        className="h-full min-h-screen"
         blobConfig={{
           count: 8,
           color: "rgba(255, 255, 255, 0.4)",
@@ -104,104 +115,142 @@ const Success = () => {
           speed: 4,
         }}
       >
-        <div className="p-6 flex flex-col min-h-screen">
-          {/* Redirecting message */}
-          {decodedInfo?.redirect && (
-            <div className="absolute top-4 sm:top-6 left-0 right-0 text-center">
-              <p className="text-white/80 text-sm">
-              Redirecting in <span className="font-semibold">00:{countdown < 10 ? `0${countdown}` : countdown}</span>
-            </p>
-            </div>
-          )}
+        <div className="flex flex-col h-full min-h-screen p-4 sm:p-6">
+          {/* Header with help and timer */}
+          <div className="flex justify-between items-start mb-4 sm:mb-6">
+            <HelpModal 
+              variant="light" 
+              iconSize={16} 
+              textSize="text-xs sm:text-sm"
+              buttonClassName="self-start"
+            />
+            {decodedInfo?.redirect && (
+              <div className="text-center">
+                <p className="text-white/80 text-xs sm:text-sm">
+                    Redirecting in <span className="font-semibold">00:{countdown < 10 ? `0${countdown}` : countdown}</span>
+                  </p>
+              </div>
+            )}
+          </div>
 
           {/* Main content - centered vertically and horizontally */}
           <div className="flex-1 flex flex-col justify-center items-center pt-10 sm:pt-16 pb-10 sm:pb-20">
-          <motion.div
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ delay: 0.2, duration: 0.5 }}
+            <motion.div
+              initial={{ y: 20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.2, duration: 0.5 }}
               className="text-white flex flex-col items-center w-full max-w-md mx-auto px-4"
-          >
+            >
               <div className="rounded-full mb-10 sm:mb-16">
-              <motion.img
-                src={checkIcon}
-                alt="Check Icon"
+                <motion.img
+                  src={checkIcon}
+                  alt="Check Icon"
                   className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48"
-                initial={{ scale: 0, rotate: -10 }}
-                animate={{ scale: 1, rotate: 0 }}
-                transition={{
-                  type: "spring",
-                  damping: 8,
-                  stiffness: 100,
-                  delay: 0.9,
-                  duration: 4
-                }}
-              />
-            </div>
+                  initial={{ scale: 0, rotate: -10 }}
+                  animate={{ scale: 1, rotate: 0 }}
+                  transition={{
+                    type: "spring",
+                    damping: 8,
+                    stiffness: 100,
+                    delay: 0.9,
+                    duration: 4
+                  }}
+                />
+              </div>
 
-            <motion.h1
+              <motion.h1
                 className="text-xl md:text-3xl font-semibold mb-5 sm:mb-6 text-center"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 1.5 }}
-            >
-              Approved Successfully
-            </motion.h1>
-
-            <motion.p
-                className="text-white/80 text-center mb-10 sm:mb-14 text-sm sm:text-base md:text-lg max-w-sm"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 1.5 }}
-            >
-              You can pause/revoke this consent anytime using Saafe app
-            </motion.p>
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 1.5 }}
+              >
+                Approved Successfully
+              </motion.h1>
+
+              <motion.p
+                className="text-white/80 text-center mb-10 sm:mb-8 text-sm sm:text-base md:text-lg max-w-sm"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 1.5 }}
+              >
+                You can pause/revoke this consent anytime using Saafe app
+              </motion.p>
 
+              {consentResult?.filter(item => item.ConsentStatus === 'FAILED')?.length > 0 && (
+                <AlertComp
+                  type="error"
+                  icon={
+                    <div className='flex  bg-red-600 p-2 rounded-full'>
+                      <X
+                        strokeWidth='2.3'
+                        className='h-[18px] w-[18px] text-white'
+                      />
+                    </div>
+                  }
+                  title={`Out of ${consents?.length} consents, ${consentResult?.filter(item => item.ConsentStatus === 'FAILED')?.length} was rejected`}
+                  description={
+                    <div className="text-left mt-1">
+                      {
+                        (() => {
+                          const fipCodes = consentResult?.filter(item => item.ConsentStatus === 'FAILED')?.map(item =>
+                            item.reasonForRejection.match(/\[(.*?)\]/)?.[1]
+                          );
+                          const fipNames = selectedAccountToLink?.filter(item => fipCodes?.join(", ").split(", ").includes(item.fipHandle))?.map(item => item.fipName)
+                          // remove the duplicate fipCodes
+                          const uniqueFipCodes = [...new Set((fipNames))];
+                          const result = `Consent rejected by FIP: ${uniqueFipCodes?.join(", ")}`;
+                          return <div>{result}</div>;
+                        })()
+                      }
+                    </div>
+                  }
+                />
+              )}
               {/* Mobile App Download - animated to appear last */}
               <motion.div
-                className="w-full max-w-xs mx-auto"
+                className="w-full max-w-xs mx-auto mt-5"
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 2.5, duration: 0.7 }}
               >
-            <MobileAppDownload />
+                <MobileAppDownload />
               </motion.div>
-              
-            {/* Rating Component */}
-            <motion.div
+
+              {/* Rating Component */}
+              <motion.div
                 className="mt-12 sm:mt-16 w-full max-w-xs mx-auto px-4 text-center"
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 2.0 }}
-            >
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 2.0 }}
+              >
                 <h3 className="text-white text-sm sm:text-base md:text-lg mb-4 sm:mb-6">Rate your experience</h3>
                 <div className="flex justify-center gap-3 sm:gap-5">
-                {[1, 2, 3, 4, 5].map((star) => (
-                  <button
-                    key={star}
-                    onClick={() => handleRatingClick(star)}
-                    onMouseEnter={() => setHoveredRating(star)}
-                    onMouseLeave={() => setHoveredRating(null)}
+                  {[1, 2, 3, 4, 5].map((star) => (
+                    <button
+                      key={star}
+                      onClick={() => handleRatingClick(star)}
+                      onMouseEnter={() => setHoveredRating(star)}
+                      onMouseLeave={() => setHoveredRating(null)}
                       className="focus:outline-none transition-transform hover:scale-110 p-1 sm:p-2"
-                    disabled={isSubmitting}
-                  >
-                    <StarFilledIcon
-                      className={`
+                      disabled={isSubmitting}
+                    >
+                      <StarFilledIcon
+                        className={`
                           transition-colors duration-200 w-6 h-6 sm:w-8 sm:h-8 md:w-9 md:h-9
                         ${(hoveredRating !== null ? star <= hoveredRating : star <= (rating || 0))
-                          ? "fill-white text-white"
-                          : "text-white/40 fill-transparent"}
+                            ? "fill-white text-white"
+                            : "text-white/40 fill-transparent"}
                         ${isSubmitting ? "opacity-70" : ""}
                       `}
-                    />
-                  </button>
-                ))}
-              </div>
-              {isSubmitted && (
+                      />
+                    </button>
+                  ))}
+                </div>
+                {isSubmitted && (
                   <p className="mt-3 text-white/80 text-xs sm:text-sm">Thank you for your feedback!</p>
-              )}
+                )}
+              </motion.div>
             </motion.div>
-          </motion.div>
           </div>
 
           {/* Footer */}

package/src/store/fip.store.ts

@@ -8,6 +8,48 @@ import { fiTypeCategoryMap } from '@/const/fiTypeCategoryMap'
 export interface Identifier {
   category: string
   type: string
+  value?: string
+}
+
+export interface DiscoveredAccount {
+  FIType: string
+  accType: string
+  accRefNumber: string
+  maskedAccNumber: string
+  state: string | null
+  amcName: string | null
+  logoUrl: string | null
+}
+
+export interface AccountToLink {
+  id: string
+  type: string
+  maskedAccountNumber: string
+  bankName: string
+  logoUrl?: string
+  isNew?: boolean
+  fipId: string
+  fipName: string
+  signature: string
+  DiscoveredAccounts?: DiscoveredAccount[]
+}
+
+export interface AccountStatus {
+  id: string
+  fipId: string
+  status: string
+  accounts?: string
+  otp?: string
+}
+
+export interface AccountForConsent {
+  linkRefNumber: string
+  fiType: string
+  bankName: string
+  accountType: string
+  maskedAccNumber: string
+  logoUrl?: string
+  fipHandle: string
 }
 
 export interface FipData {
@@ -32,14 +74,16 @@ export const MAIN_STEPS = {
   LOGIN: 'login',
   LINK_ACCOUNTS: 'link_accounts',
   REVIEW_CONSENT: 'review_consent'
-}
+} as const
 
 // Define flow steps for each category
 export const CATEGORY_STEPS = {
   LIST: 'list',
   DISCOVERY: 'discovery',
   LINKING: 'linking'
-}
+} as const
+
+type CategoryStepType = typeof CATEGORY_STEPS[keyof typeof CATEGORY_STEPS]
 
 export interface FipState {
   fips: FipData[]
@@ -49,16 +93,15 @@ export interface FipState {
   activeCategory: string | null
   categories: string[]
   completedCategories: string[]
-  currentCategoryStep: CATEGORY_STEPS
+  currentCategoryStep: CategoryStepType
   isLoading: boolean
   error: string | null
-  selectedAccountToLink: any[]
-  signature: string | null
+  selectedAccountToLink: AccountToLink[]
   originalAccounts: AutoDiscoveryResponse['Accounts']
-  accountsStatusArray: any[]
-  identifiers: any[]
-  accountForConsent: any[]
-  accountsToNotify: any[]
+  accountsStatusArray: AccountStatus[]
+  identifiers: Identifier[]
+  accountForConsent: AccountForConsent[]
+  accountsToNotify: string[]
 
   // Navigation state
   currentStep: string
@@ -76,21 +119,20 @@ export interface FipState {
   removeSelectedFip: (category: string, fipId: string) => void
   setSelectedMobileNumber: (mobileNumber: string) => void
   setActiveCategory: (category: string | null) => void
-  setCategoryStep: (step: string) => void
+  setCategoryStep: (step: CategoryStepType) => 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
+  setSelectedAccountToLink: (account: AccountToLink[]) => void
   setOriginalAccounts: (
     originalAccounts: AutoDiscoveryResponse['Accounts']
   ) => void
-  setAccountsStatusArray: (data: any[]) => void
-  setIdentifiers: (identifiersList: any[]) => void
-  setAccountForConsent: (accountForConsent: any[]) => void
+  setAccountsStatusArray: (data: AccountStatus[]) => void
+  setIdentifiers: (identifiersList: Identifier[]) => void
+  setAccountForConsent: (accountForConsent: AccountForConsent[]) => void
   setAccountsToNotify: (data: string) => void
 }
 
@@ -119,7 +161,7 @@ const initialNavigationSteps: StepItem[] = [
 
 // Helper function to extract categories
 export const extractCategories = (groupedFips: string[]): string[] => {
-  const category = new Set()
+  const category = new Set<string>()
   console.log('groupedFips', groupedFips);
 
   groupedFips.forEach((i) => {
@@ -131,13 +173,13 @@ export const extractCategories = (groupedFips: string[]): string[] => {
     })
   })
 
-  const result = [...category]
+  const result = Array.from(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.sort((a, b) => order.indexOf(a) - order.indexOf(b))
   }
 
-  return result as unknown as string[]
+  return result
 }
 
 // Helper function to create child steps from categories
@@ -179,6 +221,7 @@ export const useFipStore = create<FipState>()(
       fips: [],
       groupedFips: {},
       selectedFips: {},
+      autoDiscoveryFips: {},
       selectedMobileNumber: undefined,
       activeCategory: null,
       categories: [],
@@ -187,7 +230,6 @@ export const useFipStore = create<FipState>()(
       isLoading: false,
       error: null,
       selectedAccountToLink: [],
-      signature: null,
       originalAccounts: [],
       accountsStatusArray: [],
       identifiers: [],
@@ -207,10 +249,16 @@ export const useFipStore = create<FipState>()(
 
         // Initialize selectedFips with empty arrays for each category
         const selectedFips: { [category: string]: string[] } = {}
+        // const autoDiscoveryFips: { [category: string]: string[] } = {}
         categories.forEach(category => {
           selectedFips[category] = []
+          // autoDiscoveryFips[category] = []
+          // const fipsList = fips[category]
+          // autoDiscoveryFips[category] = fipsList.filter(fip => fip.isEnabled && fip.isOnBoarded)
         })
 
+
+
         // Create child steps from categories
         const childSteps = createChildSteps(categories)
         const currentChildStep = categories.length > 0 ? categories[0] : null
@@ -245,8 +293,6 @@ export const useFipStore = create<FipState>()(
       setSelectedAccountToLink: accountIds =>
         set({ selectedAccountToLink: accountIds }),
 
-      setSignature: signature => set({ signature }),
-
       setIdentifiers: identifiers => set({ identifiers }),
 
       setOriginalAccounts: originalAccounts => set({ originalAccounts }),
@@ -363,12 +409,13 @@ export const useFipStore = create<FipState>()(
 
       setIsLoading: isLoading => set({ isLoading }),
 
-      setAccountsToNotify: (data: string | null) => {
+      setAccountsToNotify: (data: string) => {
         console.log('data', data);
-
-        set(state => ({
-          accountsToNotify: [...state?.accountsToNotify, data]
-        }))
+        if (data) {
+          set(state => ({
+            accountsToNotify: [...(state.accountsToNotify || []), data]
+          }))
+        }
       },
 
       setError: error => set({ error })
@@ -388,7 +435,6 @@ export const useFipStore = create<FipState>()(
         selectedAccountToLink: state.selectedAccountToLink,
         originalAccounts: state.originalAccounts,
         identifiers: state.identifiers,
-        signature: state.signature,
         accountForConsent: state.accountForConsent
       })
     }

package/src/store/redirect.store.ts

@@ -13,6 +13,7 @@ export interface RedirectState {
   setDecodingError: (error: string) => void;
   clearDecodedInfo: () => void;
   getCustomStyle: () => Record<string, string> | null;
+  updateIdentifiers: (pan?: string, dob?: string) => void;
 }
 
 export const useRedirectStore = create<RedirectState>()(
@@ -60,6 +61,18 @@ export const useRedirectStore = create<RedirectState>()(
           return null;
         }
       },
+
+      updateIdentifiers: (pan?: string, dob?: string) => {
+        const { decodedInfo } = get();
+        if (decodedInfo) {
+          const updatedInfo = {
+            ...decodedInfo,
+            pan: pan || decodedInfo.pan,
+            dob: dob || decodedInfo.dob,
+          };
+          set({ decodedInfo: updatedInfo });
+        }
+      },
     }),
     {
       name: "saafe-redirect-storage",

package/src/utils/auto-discovery.ts

@@ -0,0 +1,126 @@
+export interface AutoDiscoveryConfig {
+  isEnabled: boolean;
+  showDiscoverMore: boolean;
+}
+
+export interface AutoDiscoveryConfigs {
+  INSURANCE: AutoDiscoveryConfig;
+  GST: AutoDiscoveryConfig;
+  INVESTMENTS: AutoDiscoveryConfig;
+}
+
+/**
+ * Parse the auto discovery configuration from the decoded info
+ */
+export const parseAutoDiscoveryConfig = (otherAppCustomization?: string): AutoDiscoveryConfigs => {
+  const defaultConfig: AutoDiscoveryConfigs = {
+    INSURANCE: { isEnabled: false, showDiscoverMore: true },
+    GST: { isEnabled: false, showDiscoverMore: true },
+    INVESTMENTS: { isEnabled: false, showDiscoverMore: true }
+  };
+
+  if (!otherAppCustomization) {
+    return defaultConfig;
+  }
+
+  try {
+    const config = JSON.parse(otherAppCustomization);
+    
+    return {
+      INSURANCE: {
+        isEnabled: config.INSURANCE_AutoDiscovery === 'true',
+        showDiscoverMore: config.INSURANCE_ShowDiscoverMore === undefined ? true : config.INSURANCE_ShowDiscoverMore === 'true'
+      },
+      GST: {
+        isEnabled: config.GST_AutoDiscovery === 'true',
+        showDiscoverMore: config.GST_ShowDiscoverMore === undefined ? true : config.GST_ShowDiscoverMore === 'true'
+      },
+      INVESTMENTS: {
+        isEnabled: config.INVESTMENTS_AutoDiscovery === 'true',
+        showDiscoverMore: config.INVESTMENTS_ShowDiscoverMore === undefined ? true : config.INVESTMENTS_ShowDiscoverMore === 'true'
+      }
+    };
+  } catch (error) {
+    console.error('Failed to parse auto discovery configuration:', error);
+    return defaultConfig;
+  }
+};
+
+/**
+ * Check if auto discovery is enabled for a specific category
+ */
+export const isAutoDiscoveryEnabled = (category: string, otherAppCustomization?: string): boolean => {
+  const config = parseAutoDiscoveryConfig(otherAppCustomization);
+  const categoryKey = category.toUpperCase() as keyof AutoDiscoveryConfigs;
+  
+  // Only enable auto discovery for supported categories
+  if (!['INSURANCE', 'GST', 'INVESTMENTS'].includes(categoryKey)) {
+    return false;
+  }
+  
+  return config[categoryKey]?.isEnabled || false;
+};
+
+/**
+ * Get FIP IDs for auto discovery
+ * If FIP IDs are configured in decodedInfo, use those
+ * Otherwise, use all FIPs for the category
+ */
+export const getAutoDiscoveryFipIds = (
+  category: string,
+  configuredFipIds?: string,
+  groupedFips?: Record<string, any[]>
+): string[] => {
+  // If FIP IDs are configured and not empty, use them
+  if (configuredFipIds && configuredFipIds.trim()) {
+    return configuredFipIds.split(',').map(fipId => fipId.trim()).filter(fipId => fipId.length > 0);
+  }
+
+  // Otherwise, get all FIPs for the category from the store
+  if (groupedFips) {
+    // Import fiTypeCategoryMap to get the correct FI types for the category
+    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']
+    };
+
+    const categoryUpper = category.toUpperCase();
+    const fiTypesForCategory = fiTypeCategoryMap[categoryUpper] || [];
+    
+    // Get all FIPs that match the FI types for this category
+    const categoryFips = fiTypesForCategory
+      .flatMap(fiType => groupedFips[fiType] || [])
+      .reduce((unique: any[], fip: any) => {
+        // Remove duplicates based on ID
+        if (!unique.find((existingFip: any) => existingFip.id === fip.id)) {
+          unique.push(fip);
+        }
+        return unique;
+      }, [])
+      // IMPORTANT: Filter to only include enabled and onboarded FIPs
+      .filter((fip: any) => fip.isEnabled === true && fip.isOnBoarded === true);
+    
+    console.log(`Auto Discovery: Found ${categoryFips.length} enabled & onboarded FIPs for category ${categoryUpper}:`, 
+      categoryFips.map((fip: any) => ({ id: fip.id, name: fip.name, isEnabled: fip.isEnabled, isOnBoarded: fip.isOnBoarded }))
+    );
+    
+    return categoryFips.map((fip: any) => fip.id);
+  }
+
+  return [];
+};