saafe-redirection-flow 2.0.0

package/src/components/layouts/FrostedLayout.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { FrostedPanel } from "@/components/ui/frosted-panel";
+import { Step, StepGroup, StepConnector } from "@/components/ui/step";
+import { Link, FileText, Shield, Building2, Receipt, ShieldCheck, Info } from "lucide-react";
+import { useLocation } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import AppBar from "../title/AppBar";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { MobileLayout } from "./MobileLayout";
+import { useFipStore } from "@/store/fip.store";
+import { useTranslation } from "react-i18next";
+import { useStepStore } from "@/store/step.store";
+import { useRTL } from "@/contexts/RTLContext";
+import { useRedirectStore } from "@/store/redirect.store";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { VersionDisplay } from "../ui/version-display";
+// 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" />
+};
+
+interface FrostedLayoutProps {
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  title?: string;
+  notAuthenticated?: boolean;
+}
+
+export function FrostedLayout({ footer, children, title, notAuthenticated }: FrostedLayoutProps) {
+  const location = useLocation();
+  const isMobile = useIsMobile();
+  const currentPath = location.pathname;
+  const [steps, setSteps] = useState(baseSteps);
+  const { t } = useTranslation();
+  const { decodedInfo } = useRedirectStore()
+  const { categories, activeCategory, currentChildStep } = useFipStore();
+  const { activeStep, completedSteps, setActiveStep, setCompletedSteps, determineActiveStep } = useStepStore();
+  const [expandedParents, setExpandedParents] = useState<number[]>([]);
+  const { isRTL } = useRTL();
+
+  // 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);
+
+      // Update totalSteps in the store
+      useStepStore.setState({ totalSteps: newSteps.length });
+    } else {
+      setSteps(baseSteps);
+
+      // Reset to base steps count
+      useStepStore.setState({ totalSteps: baseSteps.length });
+    }
+  }, [categories, activeCategory]);
+
+  // Find the app title from the current step
+  const currentStepData = steps.find(step => step.path === currentPath);
+  const appTitle = title || t("keywords.select") + " " + `${currentStepData?.title || t("categories.bank")}` + " & " + t("keywords.discover") + " " + t("keywords.your") + " " + t("keywords.accounts");
+
+
+  // Determine the current active step using the store's determineActiveStep function
+  const currentStep = determineActiveStep(currentPath, steps);
+  const [hoverIButton, setHoverIButton] = useState()
+  // Update the store's active step whenever it changes
+  useEffect(() => {
+    setActiveStep(currentStep);
+
+    // Mark previous steps as completed
+    if (currentStep > 1) {
+      const newCompletedSteps = new Set(completedSteps);
+
+      // Add all steps from 1 to current-1 as completed
+      for (let i = 1; i < currentStep; i++) {
+        newCompletedSteps.add(i);
+      }
+
+      // For parent steps, check if all their children are completed
+      steps.forEach(step => {
+        if (step.parentStep) {
+          const childSteps = steps.filter(s => s.parentStep === step.parentStep);
+          const allChildrenCompleted = childSteps.every(s => newCompletedSteps.has(s.step));
+          if (allChildrenCompleted) {
+            newCompletedSteps.add(step.parentStep);
+          }
+        }
+      });
+
+      setCompletedSteps(Array.from(newCompletedSteps));
+    }
+  }, [currentStep, setActiveStep, setCompletedSteps, steps]);
+
+  // Check if all child steps of a parent are completed
+  const areAllChildStepsCompleted = (parentStep: number) => {
+    const childSteps = steps.filter(step => step.parentStep === parentStep);
+    return childSteps.length > 0 && childSteps.every(step => completedSteps.includes(step.step));
+  };
+
+  // Toggle expansion of a parent step
+  const toggleParentExpansion = (parentStep: number) => {
+    setExpandedParents(prev =>
+      prev.includes(parentStep)
+        ? prev.filter(p => p !== parentStep)
+        : [...prev, parentStep]
+    );
+  };
+
+  // On completion of all child steps, automatically fold them
+  useEffect(() => {
+    // Get all parent steps that have children
+    const parentSteps = [...new Set(steps.filter(step => step.parentStep).map(step => step.parentStep))];
+
+    // Initial setup - expand the parent of the active step if it exists
+    const activeStepParent = steps.find(s => s.step === activeStep)?.parentStep;
+
+    // Check each parent step
+    parentSteps.forEach(parentStep => {
+      if (parentStep) {
+        if (areAllChildStepsCompleted(parentStep)) {
+          // If all children completed and parent is expanded and not the active parent, collapse it
+          if (expandedParents.includes(parentStep) && parentStep !== activeStepParent) {
+            setExpandedParents(prev => prev.filter(p => p !== parentStep));
+          }
+        } else {
+          // If not all completed, ensure it's expanded
+          if (!expandedParents.includes(parentStep)) {
+            setExpandedParents(prev => [...prev, parentStep]);
+          }
+        }
+
+        // Always expand the active step's parent
+        if (activeStepParent && !expandedParents.includes(activeStepParent)) {
+          setExpandedParents(prev => [...prev, activeStepParent]);
+        }
+      }
+    });
+  }, [completedSteps, steps, activeStep]);
+
+  // Use mobile layout for mobile devices
+  if (isMobile) {
+    return <MobileLayout title={appTitle}>{children}</MobileLayout>;
+  }
+
+  // Tablet and desktop layout
+  return (
+    <FrostedPanel
+      blobConfig={{
+        speed: 0.9,
+        count: 4,
+        color: "rgba(255, 255, 255, 0.4)",
+        minSize: 100,
+        maxSize: 250,
+      }}
+      gradientColors={{
+        top: "#004d4d",
+        bottom: "#00b2c1",
+      }}
+    >
+      <FrostedPanel.Aside className="px-4 py-6">
+        <div className="flex justify-between items-center cursor-default">
+          <h1 className="text-2xl font-semibold text-white">
+            {t('layout.title')}
+          </h1>
+        </div>
+
+        <StepGroup
+          activeStep={activeStep}
+          completedSteps={completedSteps}
+          baseColor="#FFF"
+          className="mt-20"
+          spacing={32}
+        >
+          <AnimatePresence mode="wait">
+            {steps.map(({ step, title, icon, description, parentStep }, index) => {
+
+              // Skip child steps of completed parents that aren't expanded
+
+              if (parentStep &&
+                areAllChildStepsCompleted(parentStep) &&
+                !expandedParents.includes(parentStep) &&
+                activeStep !== step) {
+
+                return null;
+              }
+
+              // For parent steps that have children
+              const hasChildren = steps.some(s => s.parentStep === step);
+
+              return (
+                <motion.div
+                  key={`step-${step}-${title}`}
+                  className="relative group" // group for hover
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: 10 }}
+                  transition={{
+                    duration: 0.3,
+                    delay: parentStep ? 0.1 * (index % categories.length) : 0
+                  }}
+                >
+                  <div className="relative flex items-center">
+                    <Step
+                      step={step}
+                      title={parentStep ? title : t(`stepper.${title.toLowerCase().replace('/', '')}`)}
+                      icon={icon}
+                      isActive={parentStep ? activeCategory == title?.toUpperCase() : activeStep == step}
+                      isCompleted={!parentStep && steps[step]?.parentStep ?
+                        steps.filter(s => s.parentStep === step).every(s => completedSteps.includes(s.step)) :
+                        completedSteps.includes(step)
+                      }
+                      isParentPending={Boolean(!parentStep && steps[step]?.parentStep &&
+                        !steps.filter(s => s.parentStep === step).every(s => completedSteps.includes(s.step)))
+                      }
+                      isLast={index === steps.length - 1}
+                      height={parentStep ? 90 : 80}
+                      isChildStep={Boolean(parentStep)}
+                      onStepClick={hasChildren ? () => toggleParentExpansion(step) : undefined}
+                      notAuthenticated={notAuthenticated}
+                      isRTL={isRTL}
+                    />
+
+                    {index < steps.length - 1 && (
+                      <StepConnector
+                        isActive={true}
+                        isCompleted={completedSteps.includes(step)}
+                      />
+                    )}
+
+                    {index == 1 && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Info className={`${'w-3 h-3 mb-13 ml-2'} text-muted cursor-pointer ml-1`} />
+                        </TooltipTrigger>
+                        <TooltipContent side="right" align="center" className="max-w-[280px] whitespace-normal text-sm bg-gray-700" >
+                          {t("stepper.linkAccountsDescription")}
+                        </TooltipContent>
+                      </Tooltip>
+                    )}
+                  </div>
+                </motion.div>
+              )
+            })}
+          </AnimatePresence>
+        </StepGroup>
+      </FrostedPanel.Aside>
+
+      <FrostedPanel.Main className="flex flex-col justify-between">
+        <div className="px-14 sticky top-0 z-10">
+
+          <AppBar title={appTitle} className="mt-6" />
+        </div>
+        <div className="overflow-y-auto h-full my-1">
+          <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 h-full w-full flex-col"
+            >
+              {children}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+        {footer && <div className="w-full px-14 py-4">{footer}</div>}
+      </FrostedPanel.Main>
+    </FrostedPanel>
+  );
+}