saafe-redirection-flow 2.0.0

package/src/components/session/SessionTimeoutScreen.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { useRedirectStore } from "@/store/redirect.store";
+import { XCircle } from 'lucide-react';
+import logo from "../../assets/brand/saafe-logo.svg";
+import { motion } from "framer-motion";
+
+export const SessionTimeoutScreen = () => {
+  const navigate = useNavigate();
+  const { decodedInfo } = useRedirectStore();
+  const [countdown, setCountdown] = useState(10);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Prevent scrolling when this screen is shown
+    document.body.style.overflow = 'hidden';
+    
+    // Prevent back navigation
+    const preventNavigation = (e: PopStateEvent) => {
+      // Push another state to prevent going back
+      window.history.pushState(null, '', window.location.href);
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    // Handle keyboard shortcuts
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Prevent navigation keys, refresh, etc.
+      if (
+        e.key === 'Escape' || 
+        e.key === 'Backspace' || 
+        (e.key === 'r' && (e.ctrlKey || e.metaKey)) ||
+        (e.key === 'w' && (e.ctrlKey || e.metaKey)) ||
+        (e.key === 'F5')
+      ) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    };
+
+    // Focus trap - keep focus inside this component
+    const handleFocus = () => {
+      if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
+        containerRef.current.focus();
+      }
+    };
+
+    // Block context menu
+    const blockContextMenu = (e: MouseEvent) => {
+      e.preventDefault();
+      return false;
+    };
+
+    // Push current state to history so we can intercept back button
+    window.history.pushState(null, '', window.location.href);
+    
+    // Add event listeners
+    window.addEventListener('popstate', preventNavigation);
+    window.addEventListener('keydown', handleKeyDown, { capture: true });
+    document.addEventListener('focus', handleFocus, { capture: true });
+    document.addEventListener('contextmenu', blockContextMenu);
+    
+    // Redirect after countdown reaches 0
+    if (countdown <= 0) {
+      // Check if there's a redirect URL (might be undefined/null)
+      const redirectUrl = decodedInfo?.redirect;
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      }
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setCountdown((prev) => prev - 1);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timer);
+      document.body.style.overflow = ''; // Re-enable scrolling if component unmounts
+      
+      // Remove event listeners
+      window.removeEventListener('popstate', preventNavigation);
+      window.removeEventListener('keydown', handleKeyDown, { capture: true });
+      document.removeEventListener('focus', handleFocus, { capture: true });
+      document.removeEventListener('contextmenu', blockContextMenu);
+    };
+  }, [countdown, decodedInfo, navigate]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className="fixed inset-0 w-full h-full bg-white z-50 dark:bg-background"
+      tabIndex={-1} // Make div focusable
+      onContextMenu={(e) => e.preventDefault()} // Extra measure to prevent context menu
+    >
+      <div className="w-full h-full flex flex-col items-center justify-center">
+        {decodedInfo?.redirect && (
+          <p className="text-center mb-8 absolute top-8 text-muted-secondary dark:text-muted-foreground">
+            Redirecting in <span className="font-semibold">{countdown < 10 ? `0${countdown}` : countdown}</span>
+          </p>
+        )}
+        <motion.div
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+          className="flex flex-col items-center dark:text-foreground"
+        >
+          <div className="rounded-full bg-amber-100 p-6 mb-8">
+            <XCircle className="h-16 w-16 text-amber-600" />
+          </div>
+          
+          <h1 className="text-3xl font-semibold mb-4">Session Timed Out</h1>
+          
+          {decodedInfo?.redirect ? (
+            <p className="text-center mb-8 text-muted-secondary dark:text-muted-foreground">
+              Please wait while we redirect you to {decodedInfo?.fiuName || "your bank's website"}.
+            </p>
+          ) : (
+            <p className="text-center mb-8 text-muted-secondary dark:text-muted-foreground">
+              Please close the window.
+            </p>
+          )}
+        </motion.div>
+        <div className="mt-16 text-center absolute bottom-8">
+          <div className="text-sm flex items-center justify-center gap-2 opacity-70">
+            <p>Powered by</p>
+            <img src={logo} alt="Saafe Logo" className="w-16 h-auto" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/session/SessionTimer.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect } 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 { CircleHelp, Clock, Clock4 } from "lucide-react";
+import { useNavigationBlock } from "@/store/NavigationBlockContext";
+import { SESSION } from "@/config/urls";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+
+export const SessionTimer = ({ onTimeout, mobile = false }: { onTimeout: () => void, mobile?: boolean }) => {
+  const [timeLeft, setTimeLeft] = useState<number>(30 * 1000); // Default to 30 seconds initially
+  const { t } = useTranslation();
+  const [showWarningModal, setShowWarningModal] = useState(false);
+  const warningThreshold = 5 * 60 * 1000; // 5 minutes in milliseconds
+  const SESSION_TIMER_KEY = 'sessionTimer';
+  const { allowNextNavigation } = useNavigationBlock();
+
+  // Get session timeout from env or use default (30 seconds)
+  useEffect(() => {
+    try {
+      // Check if there's a saved timer state
+      const savedTimer = sessionStorage.getItem(SESSION_TIMER_KEY);
+      if (savedTimer) {
+        const { endTime } = JSON.parse(savedTimer);
+        const remainingTime = endTime - Date.now();
+        if (remainingTime > 0) {
+          setTimeLeft(remainingTime);
+          return;
+        } else {
+          // Clear expired session data
+          sessionStorage.clear();
+        }
+      }
+
+      // If no saved state or expired, set new timer
+      const sessionTimeoutSec = SESSION.TIMEOUT ? parseInt(SESSION.TIMEOUT) : 30;
+      const sessionTimeout = sessionTimeoutSec * 1000;
+      setTimeLeft(sessionTimeout);
+
+      // Save the end time in session storage
+      const endTime = Date.now() + sessionTimeout;
+      sessionStorage.setItem(SESSION_TIMER_KEY, JSON.stringify({ endTime }));
+    } catch (error) {
+      setTimeLeft(30 * 1000);
+    }
+  }, []);
+
+  // Timer logic
+  useEffect(() => {
+    if (timeLeft <= 0) {
+      // Clear session storage when timer expires
+      allowNextNavigation();
+      sessionStorage.clear();
+      onTimeout();
+      return;
+    }
+
+    // Show warning modal when 5 minutes remaining or less (if we just crossed the threshold)
+    if (
+      timeLeft <= warningThreshold &&
+      timeLeft > warningThreshold - 1000 &&
+      !showWarningModal
+    ) {
+      setShowWarningModal(true);
+    }
+
+    const timer = setTimeout(() => {
+      setTimeLeft((prevTime) => prevTime - 1000);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [timeLeft, onTimeout, showWarningModal, warningThreshold, allowNextNavigation]);
+
+  // Format time as mm:ss
+  const formatTime = (ms: number) => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  };
+
+  // Extend session by 30 minutes
+  const extendSession = () => {
+    const newTimeLeft = 30 * 60 * 1000; // 30 minutes
+    setTimeLeft(newTimeLeft);
+    // Update session storage with new end time
+    const endTime = Date.now() + newTimeLeft;
+    sessionStorage.setItem(SESSION_TIMER_KEY, JSON.stringify({ endTime }));
+    setShowWarningModal(false);
+  };
+
+  // Continue with remaining 5 minutes
+  const continueSession = () => {
+    setShowWarningModal(false);
+  };
+
+  return (
+    <div className={mobile ? "text-consent-secondary w-full" : "text-white"}>
+      {mobile ? (
+        <div className="flex flex-col">
+          <div className="flex items-start gap-1 justify-items-start w-full">
+            <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>
+        </div>
+      ) : (
+        <div className="flex justify-between gap-1.5">
+          <div className="flex items-center gap-1.5">
+            <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>
+        </div>
+      )}
+
+      <Dialog open={showWarningModal} onOpenChange={setShowWarningModal}>
+        <DialogContent className="text-center">
+          <div className="flex flex-col items-center justify-center gap-2">
+            <div className="bg-amber-100 w-10 h-10 rounded-full flex items-center justify-center">
+              <Clock className="w-6 h-6 text-amber-800" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2 py-4">
+            <h1 className="text-[20px] md:text-2xl font-medium">Session Timeout Approaching</h1>
+            <p className="text-xs md:text-sm text-muted-secondary">
+              Your session will expire in 5 minutes. Would you like to extend it
+              by 30 minutes or finish now?
+            </p>
+          </div>
+          <DialogFooter className="flex-col md:flex-row items-center justify-center gap-2">
+            <Button onClick={extendSession} size="lg" className="w-full md:w-fit">Extend by 30 mins</Button>
+            <Button variant="ghost" onClick={continueSession} size="lg" className="w-full md:w-fit">
+              Continue for 5 mins
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};

package/src/components/step-navigation.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface StepItem {
+  id: string;
+  title: string;
+  isActive: boolean;
+  isCompleted: boolean;
+  childSteps?: StepItem[];
+}
+
+interface StepNavigationProps {
+  steps: StepItem[];
+  onStepClick?: (stepId: string) => void;
+  onChildStepClick?: (parentId: string, childId: string) => void;
+  className?: string;
+}
+
+export const StepNavigation: React.FC<StepNavigationProps> = ({
+  steps,
+  onStepClick,
+  onChildStepClick,
+  className,
+}) => {
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {steps.map((step) => (
+        <div key={step.id} className="flex flex-col">
+          {/* Parent step */}
+          <button
+            className={cn(
+              "flex items-center gap-2 py-2 text-left focus:outline-none transition-colors",
+              step.isActive
+                ? "text-primary font-semibold"
+                : step.isCompleted
+                ? "text-muted-foreground"
+                : "text-muted-foreground/50",
+              onStepClick && "cursor-pointer hover:text-primary"
+            )}
+            onClick={() => onStepClick?.(step.id)}
+            disabled={!onStepClick}
+          >
+            <div
+              className={cn(
+                "w-6 h-6 rounded-full flex items-center justify-center text-xs",
+                step.isActive
+                  ? "bg-primary text-white"
+                  : step.isCompleted
+                  ? "bg-primary/20 text-primary"
+                  : "bg-muted text-muted-foreground/50"
+              )}
+            >
+              {step.isCompleted ? "✓" : steps.indexOf(step) + 1}
+            </div>
+            <span>{step.title}</span>
+          </button>
+
+          {/* Child steps if parent is active and has children */}
+          {step.isActive && step.childSteps && step.childSteps.length > 0 && (
+            <div className="ml-8 mt-2 flex flex-col gap-2">
+              {step.childSteps.map((childStep) => (
+                <button
+                  key={childStep.id}
+                  className={cn(
+                    "flex items-center gap-2 py-1 text-left text-sm focus:outline-none transition-colors",
+                    childStep.isActive
+                      ? "text-primary font-medium"
+                      : childStep.isCompleted
+                      ? "text-muted-foreground"
+                      : "text-muted-foreground/50",
+                    onChildStepClick && "cursor-pointer hover:text-primary"
+                  )}
+                  onClick={() => onChildStepClick?.(step.id, childStep.id)}
+                  disabled={!onChildStepClick}
+                >
+                  <ChevronRight size={14} />
+                  <span>{childStep.title}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}; 

package/src/components/title/AppBar.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AppBar from "./AppBar";
+import { Settings, Bell } from "lucide-react";
+
+const meta: Meta<typeof AppBar> = {
+  title: "UI/AppBar",
+  component: AppBar,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AppBar>;
+
+export const Default: Story = {
+  args: {
+    title: "Default AppBar",
+  },
+};
+
+export const WithCustomLeftSection: Story = {
+  args: {
+    title: "Custom Left Section",
+    leftSection: <Settings className="w-6 h-6 text-consent-primary" />,
+  },
+};
+
+export const WithCustomRightSection: Story = {
+  args: {
+    title: "Custom Right Section",
+    rightSection: <Bell className="w-6 h-6 text-consent-primary" />,
+  },
+};
+
+export const WithCustomActions: Story = {
+  args: {
+    title: "Custom Actions",
+    leftSectionAction: () => alert("Left section clicked"),
+    rightSectionAction: () => alert("Right section clicked"),
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    title: "Custom Styling",
+    className: "bg-gray-100 p-4 rounded-lg",
+  },
+}; 

package/src/components/title/AppBar.tsx

@@ -0,0 +1,150 @@
+import { ChevronLeft, ChevronRight, Info } from 'lucide-react'
+import { useLocation, useNavigate } from 'react-router-dom';
+import { usePageTitle } from '@/hooks/use-page-title';
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { cn } from '@/lib/utils';
+import Modal from '../ui/modal';
+import { Label } from '../ui/label';
+import { AnimatedButton } from '../ui/animatedButton';
+import { useFipStore } from '@/store/fip.store';
+import { EVENTS, trackEvent } from '@/utils/posthog';
+import { useNavigationBlock } from '@/store/NavigationBlockContext';
+import { useRTL } from '@/contexts/RTLContext';
+import { useTranslation } from 'react-i18next';
+interface AppBarProps {
+  title?: string;
+  leftSection?: React.ReactNode;
+  leftSectionAction?: () => void;
+  rightSection?: React.ReactNode | boolean;
+  rightSectionAction?: () => void;
+  className?: string;
+}
+
+const AppBar = ({
+  title: propTitle,
+  leftSection,
+  leftSectionAction,
+  rightSection,
+  className = '',
+}: AppBarProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [contextTitle] = usePageTitle();
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const {
+    completeCategory,
+    categories,
+    setActiveCategory,
+    activeCategory,
+    completedCategories,
+  } = useFipStore()
+  // Only navigate back if we have history within our app
+  const { allowNextNavigation } = useNavigationBlock();
+  const { isRTL } = useRTL();
+  const { t } = useTranslation();
+  // Use prop title if provided, otherwise use context title
+  const title = contextTitle || propTitle;
+
+  const handleLeftSectionAction = () => {
+    if (leftSectionAction) {
+      leftSectionAction();
+    } else {
+      allowNextNavigation(); // mark this as an allowed navigation
+      navigate(-1);
+    }
+  };
+
+  if (location.pathname?.split('/')?.includes('login')) {
+    return null;
+  }
+
+  const handleComplete = () => {
+    // Mark this category as complete
+    completeCategory(activeCategory || 'BANKS')
+    trackEvent(EVENTS.SKIP_LINKING, { activeCategory })
+
+    // Check if there are more categories to process
+    const currentIndex = categories.indexOf(activeCategory || 'BANKS')
+    if (currentIndex < categories.length - 1) {
+      // Move to the next category
+      const nextCategory = categories[currentIndex + 1]
+      setActiveCategory(nextCategory)
+
+      // Navigate directly to the next category path for proper step highlighting
+      navigate(`/link-accounts/${nextCategory.toLowerCase()}`, {
+        state: {
+          completedCategories: [...(completedCategories || []), activeCategory]
+        }
+      })
+    } else {
+      // All categories done, move to review consent
+      navigate('/review', {
+        state: {
+          // selectedFips: state?.selectedFips,
+          completedCategories: [...(completedCategories || []), activeCategory]
+        }
+      })
+    }
+  }
+
+  return (
+    <div className={cn(
+      "flex justify-between items-center w-full py-2",
+      // isMobile ? "px-4" : "px-6",
+      isRTL ? "flex-row-reverse" : "",
+      className
+    )}>
+      <div className="cursor-pointer" onClick={handleLeftSectionAction}>
+        {leftSection ? leftSection : <ChevronLeft className='text-consent-primary dark:text-gray-300' />}
+      </div>
+      <div>
+        <p className={cn(
+          "font-semibold",
+          isMobile ? "text-sm" : "text-lg",
+          "text-black text-center dark:text-gray-300"
+        )}>
+          {title}
+        </p>
+      </div>
+      <Modal className='w-[500px]'>
+        <Modal.Trigger>
+          <p className={cn(
+            isMobile ? "text-sm" : "text-base",
+            "text-consent-primary cursor-pointer"
+          )}>
+            {location.pathname === '/review' ? null : (
+              <div className='flex items-center gap-1 dark:text-gray-300'>
+                {rightSection ? rightSection : t('next')}
+                {!rightSection ? <ChevronRight className='text-consent-primary dark:text-gray-300' /> : null}
+              </div>
+            )}
+          </p>
+        </Modal.Trigger>
+        <div className='flex flex-col items-center gap-4'>
+          <div className='flex items-center justify-center bg-orange-100/50 dark:bg-orange-900/50 p-3 rounded-full w-fit'>
+            <Info className='h-[32px] w-[32px] text-yellow-600' />
+          </div>
+          {
+            location.pathname === '/link-accounts/link' ? <>
+              <Label className='text-[20px] md:text-2xl font-semibold dark:text-white'>{t('skipModal.title')}</Label>
+              <p className='text-sm md:text-md text-gray-500 dark:text-gray-400 text-center'>{t('skipModal.description')}</p>
+            </> : <>
+              <Label className='text-[20px] md:text-2xl font-semibold dark:text-white text-center'>{t('completeModal.title')}</Label>
+              <p className='text-sm md:text-md text-gray-500 dark:text-gray-400 text-center'>{t('completeModal.description').replace('{activeCategory}', activeCategory)}</p>
+            </>
+          }
+        </div>
+        <div className='flex justify-center gap-4 mt-6 flex-col md:flex-row'>
+          <Modal.Close>
+            <AnimatedButton size={'lg'} className='w-full'>{t('skipModal.cancel')}</AnimatedButton>
+          </Modal.Close>
+          <Modal.Close>
+            <AnimatedButton variant={'secondary'} size={'lg'} className='bg-orange-100/50 dark:bg-orange-900/50 text-yellow-600 hover:bg-orange-100/70 dark:hover:bg-orange-900/70 w-full' onClick={handleComplete}>{t('skipModal.confirm')}</AnimatedButton>
+          </Modal.Close>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default AppBar

package/src/components/title/SectionTitle.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+const SectionTitle = ({
+  title,
+  rightSection,
+  className = '',
+  description
+}: {
+  title: string
+  rightSection?: React.ReactNode
+  className?: string
+  description?: string
+}) => {
+  return (
+    <div className='w-full flex flex-col'>
+      <div
+        className={`flex items-center gap-4 w-full justify-between ${className}`}
+      >
+        <p className='text-sm md:text-lg font-[600] text-consent-primary dark:text-muted-foreground'>
+          {title}
+        </p>
+        <div>{rightSection ? rightSection : null}</div>
+      </div>
+      <div>
+        <p className='text-sm text-consent-secondary'>{description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default SectionTitle

package/src/components/ui/AnimatedButton.module.css

@@ -0,0 +1,13 @@
+.loader {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}