saafe-redirection-flow 2.0.0

package/src/components/layouts/MobileLayout.tsx

@@ -0,0 +1,403 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useLocation } from "react-router-dom";
+import {
+  Shield,
+  Link,
+  FileText,
+  Building2,
+  Receipt,
+  ShieldCheck,
+} from "lucide-react";
+import { StepperProgress } from "@/components/ui/stepper-progress";
+import { useStep } from "@/hooks/useStep";
+import { MobileBackground } from "@/components/mobile-background";
+import AppBar from "../title/AppBar";
+import { LanguageSwitcher } from "@/components/language/LanguageSwitcher";
+import { useTranslation } from "react-i18next";
+import { useFipStore } from "@/store/fip.store";
+import { SessionTimer } from "../session/SessionTimer";
+import { SessionTimeoutScreen } from "../session/SessionTimeoutScreen";
+
+// Define step interfaces
+interface BaseStep {
+  step: number;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  path: string;
+  parentStep?: number;
+}
+
+// Base steps without dynamic child steps
+const baseSteps: BaseStep[] = [
+  {
+    step: 1,
+    title: "Login/Signup",
+    description: "Enter the OTP sent to your mobile",
+    icon: <Shield className="w-4 h-4" />,
+    path: "/login",
+  },
+  {
+    step: 2,
+    title: "Link Accounts",
+    description: "Select & Link the accounts you'd like to share",
+    icon: <Link className="w-4 h-4" />,
+    path: "/link-accounts/discover",
+  },
+  {
+    step: 3,
+    title: "Review Consent",
+    description: "Approve/Reject the consent after reviewing the details",
+    icon: <FileText className="w-4 h-4" />,
+    path: "/review",
+  },
+];
+
+// Map of category icons
+const categoryIcons = {
+  "BANK": <Building2 className="w-4 h-4" />,
+  "GST": <Receipt className="w-4 h-4" />,
+  "INSURANCE": <ShieldCheck className="w-4 h-4" />,
+  "INVESTMENTS": <ShieldCheck className="w-4 h-4" />,
+};
+
+// Filter steps to only include parent steps (those without parentStep property)
+const getParentSteps = (steps: BaseStep[]) =>
+  steps.filter(step => !step.parentStep).map(step => ({
+    ...step,
+  }));
+
+// Mapping of parent steps to their child steps for tracking progress
+const getParentChildMapping = (steps: BaseStep[]) => {
+  const mapping: Record<number, number[]> = {};
+
+  steps.forEach(step => {
+    if (step.parentStep) {
+      if (!mapping[step.parentStep]) {
+        mapping[step.parentStep] = [];
+      }
+      mapping[step.parentStep].push(step.step);
+    }
+  });
+
+  return mapping;
+};
+
+interface MobileLayoutProps {
+  children: React.ReactNode;
+  title?: string;
+}
+
+export function MobileLayout({ children, title }: MobileLayoutProps) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const isLoginPage = location.pathname === "/login";
+  const currentPath = location.pathname;
+  const [steps, setSteps] = useState<BaseStep[]>(baseSteps);
+  const { categories, activeCategory } = useFipStore();
+  const [isSessionExpired, setIsSessionExpired] = useState(false);
+  const [showSessionTimer, setShowSessionTimer] = useState(true);
+
+  // Handle session timeout
+  const handleTimeout = () => {
+    setIsSessionExpired(true);
+  };
+
+  // Dynamically create steps whenever categories change
+  useEffect(() => {
+    if (categories && categories.length > 0) {
+      // Create child steps for Link Accounts
+      const childSteps = categories.map((category, index) => ({
+        step: 3 + index, // Start numbering after Link Accounts
+        title: t(`categories.${category.toLowerCase()}`),
+        description: t(`categories.${category.toLowerCase()}Description`),
+        icon: categoryIcons[category as keyof typeof categoryIcons] || <Link className="w-4 h-4" />,
+        path: `/link-accounts/${category.toLowerCase()}`,
+        parentStep: 2, // Link Accounts is step 2,
+        isActive: category === activeCategory
+      }));
+
+      // Combine base steps with child steps
+      const newSteps = [
+        ...baseSteps.slice(0, 2), // Login and Link Accounts
+        ...childSteps,
+        baseSteps[2], // Review Consent, update the step number
+      ];
+
+      // Update Review Consent step number
+      newSteps[newSteps.length - 1] = {
+        ...newSteps[newSteps.length - 1],
+        step: 3 + childSteps.length
+      };
+
+      setSteps(newSteps);
+    } else {
+      setSteps(baseSteps);
+    }
+  }, [categories, activeCategory, t]);
+
+  // Use the translated parent steps
+  const parentSteps = useMemo(() => getParentSteps(steps, t), [steps, t]);
+  const parentChildMapping = useMemo(() => getParentChildMapping(steps), [steps]);
+
+  // Determine the current active step
+  const determineActiveStep = () => {
+    // First check if we're on an exact path match
+    const exactPathMatch = steps.findIndex((step) => step.path === location.pathname);
+    if (exactPathMatch >= 0) return exactPathMatch + 1;
+
+    // Check if we're on a path under link-accounts
+    if (location.pathname.includes('/link-accounts/')) {
+      const pathSegment = location.pathname.split('/').pop() || '';
+
+      // Flow paths are all part of the current category step
+      const flowPaths = ['discovery', 'link', 'discover-account'];
+      if (flowPaths.includes(pathSegment)) {
+        // Find which category step is active
+        if (activeCategory) {
+          // Find the child step matching the active category
+          const activeChildStep = steps.findIndex(step => {
+            // Look for parent steps that have child steps matching the active category
+            const matchesCategory = step.title?.toLowerCase() === activeCategory.toLowerCase();
+            const isChildStep = Boolean(step.parentStep);
+            return matchesCategory && isChildStep;
+          });
+
+          if (activeChildStep >= 0) {
+            return activeChildStep + 1;
+          }
+        }
+
+        // Default to Link Accounts if no category match
+        return 2;
+      }
+
+      // Check if path matches a category directly - based on the URL path
+      const categorySegment = pathSegment.toLowerCase();
+      for (let i = 0; i < steps.length; i++) {
+        const step = steps[i];
+        // Skip non-child steps
+        if (!step.parentStep) continue;
+
+        // Check if this step's title matches the path segment
+        if (step.title?.toLowerCase() === categorySegment) {
+          return i + 1;
+        }
+      }
+
+      // Default to Link Accounts step
+      return 2;
+    }
+
+    // We're not on a path in the steps
+    return 1; // Default to first step
+  };
+
+  const currentStep = determineActiveStep();
+
+  // Calculate current parent step and track child progress
+  const { activeStep, completedSteps, goToStep } = useStep({
+    totalSteps: steps.length,
+    initialStep: currentStep > 0 ? currentStep : 1,
+    onStepComplete: (step) => {
+      // Step completed callback
+    },
+  });
+
+  // Find current step based on path
+  const currentStepData = steps.find((step) => step.path === currentPath);
+
+  // Generate title from current step if not provided
+  const appTitle = title ||
+    t("keywords.select") + " " +
+    `${currentStepData?.title || t("categories.bank")}` +
+    " & " +
+    t("keywords.discover") + " " +
+    t("keywords.your") + " " +
+    t("keywords.accounts");
+
+  // Calculate child progress for parent steps
+  const childProgress = useMemo(() => {
+    const progress: Record<number, number> = {};
+
+    Object.entries(parentChildMapping).forEach(([parentStepStr, childSteps]) => {
+      const parentStep = parseInt(parentStepStr);
+      const completedChildSteps = childSteps.filter(step =>
+        completedSteps.includes(step) || step === activeStep
+      ).length;
+
+      // Only track progress if at least one child step is active/completed
+      if (completedChildSteps > 0) {
+        progress[parentStep] = completedChildSteps;
+      }
+    });
+
+    return progress;
+  }, [completedSteps, activeStep, parentChildMapping]);
+
+  // Calculate max possible progress for each parent step
+  const maxChildProgress = useMemo(() => {
+    const maxProgress: Record<number, number> = {};
+
+    Object.entries(parentChildMapping).forEach(([parentStepStr, childSteps]) => {
+      const parentStep = parseInt(parentStepStr);
+      maxProgress[parentStep] = childSteps.length;
+    });
+
+    return maxProgress;
+  }, [parentChildMapping]);
+
+  // For the progress bar, calculate the current parent step
+  const currentParentStep = useMemo(() => {
+    const index = parentSteps.findIndex((step) => {
+      // If we're on a child step, find its parent
+      if (currentStepData?.parentStep) {
+        return step.step === currentStepData.parentStep;
+      }
+      // Otherwise, check if we're on this parent step
+      return step.step === currentStep;
+    });
+    return index >= 0 ? index + 1 : 1;
+  }, [parentSteps, currentStepData, currentStep]);
+
+  // Return session timeout screen if session expired
+  if (isSessionExpired) {
+    return <SessionTimeoutScreen />;
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-background">
+      {/* Special background for login page */}
+      {isLoginPage ? (
+        <div>
+          <MobileBackground>
+            <div className="p-6">
+              {/* Progress indicator */}
+              <div className="mb-6">
+                <div className="mb-4">
+                  <LanguageSwitcher />
+                </div>
+                <StepperProgress
+                  steps={parentSteps.length}
+                  currentStep={currentParentStep || 1}
+                  childProgress={childProgress}
+                  maxChildProgress={maxChildProgress}
+                  className="mb-4"
+                />
+              </div>
+
+              {/* Login content with animated entrance */}
+              <motion.div
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.2, duration: 0.5 }}
+                className="text-white"
+              >
+                <div className="mb-6">
+                  <h2 className="text-xl font-medium mb-4">
+                    {t('layout.title')}
+                  </h2>
+
+                  <div>
+                    {steps.map((step) => (
+                      <motion.div
+                        key={step.step}
+                        initial={{ x: -10, opacity: 0 }}
+                        animate={{ x: 0, opacity: 1 }}
+                        transition={{
+                          delay: step.parentStep ? 0.1 * (step.step % categories.length) : 0.1 * step.step,
+                          duration: 0.4
+                        }}
+                        className="flex items-center gap-4 p-3 rounded-lg py-6"
+                      >
+                        <div className="p-2 bg-white rounded-full text-primary">
+                          {step.icon}
+                        </div>
+                        <div>
+                          <h3 className="font-medium text-white">
+                            {step.parentStep
+                              ? step.title
+                              : t(`stepper.${step.title.toLowerCase().replace('/', '')}`)}
+                          </h3>
+                          <p className="text-xs text-white/70">
+                            {step.parentStep
+                              ? step.description
+                              : t(`${step.description.toLowerCase().replace('/', '')}`)}
+                          </p>
+                        </div>
+                      </motion.div>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+          </MobileBackground>
+          <div className="overflow-y-scroll h-full px-6 py-6">{children}</div>
+        </div>
+      ) : (
+        // Regular layout for non-login pages
+        <>
+          {/* Session Timer at the top */}
+          {showSessionTimer && !isLoginPage && (
+            <div className="px-4 py-2 flex justify-between items-center pt-5">
+              <div className="flex items-center gap-2 text-gray-600 w-full">
+                {/* <span className="text-sm font-medium">Session timeout:</span> */}
+                <SessionTimer onTimeout={handleTimeout} mobile={true} />
+              </div>
+            </div>
+          )}
+
+          {/* Header with progress bar */}
+          <motion.div
+            initial={{ y: -10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            className="px-4 py-4 bg-background"
+          >
+            <div className="flex items-center justify-between">
+              <AppBar title={title || appTitle} />
+              {/* <LanguageSwitcher /> */}
+            </div>
+            {/* Step Progress using the stepper with child progress tracking */}
+            <StepperProgress
+              steps={parentSteps.length}
+              currentStep={currentParentStep || 1}
+              childProgress={childProgress}
+              maxChildProgress={maxChildProgress}
+              className="mt-4"
+              onStepChange={(step) => {
+                // Only allow navigation to completed steps
+                const targetStep = parentSteps[step - 1];
+                if (
+                  targetStep &&
+                  (completedSteps.includes(targetStep.step) ||
+                    targetStep.step === activeStep)
+                ) {
+                  goToStep(targetStep.step);
+                }
+              }}
+            />
+          </motion.div>
+
+          {/* Main Content */}
+          <div className="flex-1 overflow-auto p-4">
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={location.pathname}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.3 }}
+                className="flex-1"
+              >
+                {children}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/mobile-background.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { useRedirectStore } from "@/store/redirect.store";
+
+interface MobileBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+  gradientColors?: {
+    top: string;
+    bottom: string;
+  };
+  blobConfig?: {
+    count: number;
+    color: string;
+    minSize: number;
+    maxSize: number;
+    speed: number;
+  };
+}
+
+export function MobileBackground({
+  children,
+  className,
+  gradientColors = {
+    top: "#004d4d",
+    bottom: "#00b2c1",
+  },
+  blobConfig = {
+    count: 3,
+    color: "rgba(255, 255, 255, 0.4)",
+    minSize: 60,
+    maxSize: 140,
+    speed: 0.9,
+  },
+  ...props
+}: MobileBackgroundProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number | null>(null);
+  const { getCustomStyle } = useRedirectStore();
+  const customStyles = getCustomStyle();
+  const blobsRef = useRef<Array<{
+    x: number;
+    y: number;
+    radius: number;
+    xSpeed: number;
+    ySpeed: number;
+    opacity: number;
+  }>>([]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Initialize blobs only once
+    if (blobsRef.current.length === 0) {
+      for (let i = 0; i < blobConfig.count; i++) {
+        blobsRef.current.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          radius: blobConfig.minSize + Math.random() * (blobConfig.maxSize - blobConfig.minSize),
+          xSpeed: (Math.random() - 0.5) * blobConfig.speed,
+          ySpeed: (Math.random() - 0.5) * blobConfig.speed,
+          opacity: 0.4 + Math.random() * 0.4,
+        });
+      }
+    }
+
+    const resizeCanvas = () => {
+      const parent = canvas.parentElement;
+      if (!parent) return;
+      canvas.width = parent.offsetWidth;
+      canvas.height = parent.offsetHeight;
+    };
+
+    resizeCanvas();
+    window.addEventListener("resize", resizeCanvas);
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      blobsRef.current.forEach((blob) => {
+        blob.x += blob.xSpeed;
+        blob.y += blob.ySpeed;
+
+        if (blob.x < -blob.radius || blob.x > canvas.width + blob.radius) {
+          blob.xSpeed = -blob.xSpeed;
+        }
+        if (blob.y < -blob.radius || blob.y > canvas.height + blob.radius) {
+          blob.ySpeed = -blob.ySpeed;
+        }
+
+        ctx.beginPath();
+        ctx.arc(blob.x, blob.y, blob.radius, 0, Math.PI * 2);
+        ctx.fillStyle = blobConfig.color
+          .replace(")", `, ${blob.opacity})`)
+          .replace("rgba", "rgba")
+          .replace("rgb", "rgba");
+        ctx.fill();
+      });
+
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener("resize", resizeCanvas);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [blobConfig]);
+
+  return (
+    <div
+      className={cn(
+        "relative w-full overflow-hidden",
+        className
+      )}
+      style={{
+        background: `linear-gradient(to bottom, ${customStyles?.primaryButtonColor || gradientColors.top}, ${customStyles?.primaryButtonColor ? `${customStyles?.primaryButtonColor}95` : gradientColors.bottom})`,
+        opacity: 1,
+        transition: 'opacity 0.6s ease-in-out',
+      }}
+      {...props}
+    >
+      <canvas ref={canvasRef} className="absolute inset-0 z-10 w-full h-full" />
+      <div className="absolute inset-0 backdrop-blur-[140px] bg-white/10 z-20" />
+      <div className="relative z-30 w-full h-full">
+        {children}
+      </div>
+    </div>
+  );
+} 

package/src/components/mobileAppDownload.tsx

@@ -0,0 +1,30 @@
+import appStore from '../assets/brand/applestore.svg'
+import playStore from '../assets/brand/playstore.svg'
+
+export const MobileAppDownload = () => (
+  <div className="text-center w-full">
+    <h3 className="text-sm sm:text-base md:text-lg font-semibold mb-3 sm:mb-4">Download our mobile app</h3>
+    <div className="flex flex-wrap gap-2 sm:gap-3 justify-center">
+      {/* Android App Link */}
+      <a
+        href="https://play.google.com/store/apps/details?id=app.saafe.prod"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-2 border border-gray-300 rounded-lg px-3 sm:px-4 md:px-5 py-2 sm:py-3 hover:shadow-lg transition bg-white max-w-[160px] sm:max-w-none flex-1 justify-center"
+      >
+        <img src={playStore} alt="Android" className="w-5 h-5 sm:w-6 sm:h-6" />
+        <span className="text-xs sm:text-sm font-medium text-gray-800">Google Play</span>
+      </a>
+      {/* iOS App Link */}
+      <a
+        href="https://apps.apple.com/in/app/saafe/id6444038213"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-2 border border-gray-300 rounded-lg px-3 sm:px-4 md:px-5 py-2 sm:py-3 hover:shadow-lg transition bg-white max-w-[160px] sm:max-w-none flex-1 justify-center"
+      >
+        <img src={appStore} alt="iOS" className="w-5 h-5 sm:w-6 sm:h-6" />
+        <span className="text-xs sm:text-sm font-medium text-gray-800">App Store</span>
+      </a>
+    </div>
+  </div>
+);

package/src/components/modal/ModalComp.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Modal from '../ui/modal'
+import { Button } from '../ui/button'
+import { CircleAlert } from 'lucide-react'
+
+const ModalComp = () => {
+  return (
+    <Modal withCloseIcon={false}>
+      <Modal.Trigger>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <div className="flex flex-col items-center gap-4">
+        <CircleAlert className="text-amber-900" />
+        <p className="font-bold text-xl">Are you sure you want to reject?</p>
+        <p className="text-xs text-muted-foreground text-center">Rejecting this consent is a permanent action and cannot be undone. However, you can still view the consent details anytime using Saafe app. </p>
+      </div>
+      <Modal.Footer>
+        <div className="flex gap-4 justify-center items-center">
+          <Button size={"lg"}>No, go back!</Button>
+          <Button size={"lg"} variant={'secondary'} className="bg-amber-200 text-amber-900">Yes, Reject</Button>
+        </div>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+export default ModalComp

package/src/components/mode-toggle.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from '@/contexts/ThemeContext'
+import { Moon, Sun } from 'lucide-react'
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="w-9 px-0">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem className="cursor-pointer" onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/page-header.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils"
+
+function PageHeader({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <section
+      className={cn(
+        "pt-6 pb-4 space-y-2",
+        className
+      )}
+      {...props}>
+      {children}
+    </section>
+  )
+}
+
+function PageHeaderHeading({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h1
+      className={cn(
+        "text-xl font-semibold leading-tight tracking-tight my-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      className={cn(
+        "max-w-2xl text-base font-light text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { PageHeader, PageHeaderDescription, PageHeaderHeading }