saafe-redirection-flow 2.0.0

package/src/components/auth/AuthGuard.tsx

@@ -0,0 +1,76 @@
+import { ReactNode, useEffect } from 'react';
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
+import { useAuthStore } from '@/store/auth.store';
+import { useRedirectStore } from '@/store/redirect.store';
+import { extractCategories, useFipStore } from '@/store/fip.store';
+import handleIdentifiers from '@/utils/handleIdentifiers';
+
+interface AuthGuardProps {
+  children: ReactNode;
+  requireAuth?: boolean;
+}
+
+/**
+ * AuthGuard component to protect routes
+ * 
+ * @param children - Child components to render if authentication check passes
+ * @param requireAuth - Whether authentication is required (defaults to true)
+ */
+const AuthGuard = ({ children, requireAuth = true }: AuthGuardProps) => {
+  const { isAuthenticated, refreshToken } = useAuthStore();
+  const { decodedInfo } = useRedirectStore();
+  const location = useLocation();
+  const { setActiveCategory } = useFipStore();
+
+  // Check if refresh token exists but user is not authenticated
+  useEffect(() => {
+    if (!isAuthenticated && refreshToken) {
+      // Attempt to refresh token automatically
+      const attemptRefresh = async () => {
+        try {
+          const authService = (await import('@/services/api/auth.service')).authService;
+          await authService.refreshToken(refreshToken);
+        }
+        catch (error) {
+          // Token refresh failed, handle silently
+          // console.error('Token refresh failed:', error);
+        }
+      };
+
+      attemptRefresh();
+    }
+  }, [isAuthenticated, refreshToken]);
+
+  // Redirect to login if authentication is required but user is not authenticated
+  if (requireAuth && !isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  // Handle authenticated user navigation based on decodedInfo
+  if (!requireAuth && isAuthenticated && decodedInfo) {
+    // if (decodedInfo.isUserPresent) {
+    //   return <Navigate to="/link-accounts/old-user" replace />;
+    // } else {
+    //   if (decodedInfo?.fiTypesRequiredForConsent.length > 0) {
+    //     const fiTypes = extractCategories(decodedInfo?.fiTypesRequiredForConsent);
+    //     return <Navigate to={`/link-accounts/${fiTypes?.[0]?.toLowerCase()}`} replace />;
+    //   } else {
+    //     return <Navigate to="/link-accounts/banks" replace />;
+    //   }
+    // }
+
+    if (decodedInfo.isUserPresent) {
+      return <Navigate to="/link-accounts/old-user" replace />;
+    } else if (decodedInfo?.fiTypesRequiredForConsent.length > 0) {
+      const fiTypes = extractCategories(decodedInfo?.fiTypesRequiredForConsent);
+      setActiveCategory(fiTypes?.[0]);
+      return <Navigate to={`/link-accounts/${fiTypes?.[0]?.toLowerCase()}`} replace />;
+    } else {
+      return <Navigate to="/link-accounts/banks" replace />;
+    }
+  }
+
+  return <>{children}</>;
+};
+
+export default AuthGuard; 

package/src/components/cards/BankCard.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import BankCard from "./BankCard";
+import { Checkbox } from "@/components/ui/checkbox";
+
+const meta: Meta<typeof BankCard> = {
+  title: "UI/BankCard",
+  component: BankCard,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof BankCard>;
+
+export const Default: Story = {
+  args: {
+    bankName: "Axis Bank",
+    image: "/images/bank-logo.png",
+    imageSize: "w-8 h-8",
+  },
+};
+
+export const WithSubText: Story = {
+  args: {
+    bankName: "Axis Bank",
+    subText: "Savings Account",
+    image: "/images/bank-logo.png",
+    imageSize: "w-8 h-8",
+  },
+};
+
+export const WithBadge: Story = {
+  args: {
+    bankName: "Axis Bank",
+    badgeText: "New",
+    image: "/images/bank-logo.png",
+    imageSize: "w-8 h-8",
+  },
+};
+
+export const WithCheckbox: Story = {
+  args: {
+    bankName: "Axis Bank",
+    rightSection: <Checkbox />,
+    image: "/images/bank-logo.png",
+    imageSize: "w-8 h-8",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    bankName: "Axis Bank",
+    subText: "Loading...",
+    loading: true,
+    image: "/images/bank-logo.png",
+    imageSize: "w-8 h-8",
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    bankName: "Axis Bank",
+    className: "bg-gray-100 p-4 rounded-lg",
+    image: "/images/bank-logo.png",
+    imageSize: "w-8 h-8",
+  },
+}; 

package/src/components/cards/BankCard.tsx

@@ -0,0 +1,227 @@
+import React, { ReactNode, useEffect } from 'react'
+import { Skeleton } from '../ui/skeleton'
+import { Bell, Building } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { useRTL } from '@/contexts/RTLContext'
+import { AnimatedButton } from '../ui/animatedButton'
+import { useIsMobile } from '@/hooks/use-mobile'
+
+const shimmerVariants = {
+  animate: {
+    x: ['-100%', '400%'],
+    transition: {
+      duration: 0.6, // shimmer speed
+      ease: 'easeInOut',
+      repeat: Infinity,
+      repeatDelay: 0.6 // delay after each shimmer
+    }
+  }
+}
+
+interface cardContentProps {
+  bankName: string
+  subText?: string | boolean
+  badgeText?: string | boolean
+  rightSection?: ReactNode
+  image?: string
+  className?: string
+  imageSize?: string
+  loading?: boolean
+  selected?: boolean
+  selectedTextColor?: string
+  onClick?: (e: React.MouseEvent) => void
+  commingSoon?: boolean
+  commingSoonFun?: () => void
+  notify?: boolean
+}
+
+// Define interface for right section props
+interface RightSectionProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  'data-state'?: string;
+  id?: string;
+  [key: string]: unknown;
+
+}
+
+const BankCard = ({
+  bankName,
+  subText,
+  badgeText,
+  rightSection,
+  image,
+  className = '',
+  imageSize = 'w-12 h-12',
+  loading = false,
+  selected = false,
+  selectedTextColor = '',
+  notify = false,
+  commingSoon = false,
+  commingSoonFun = () => { },
+  onClick
+}: cardContentProps) => {
+  const { isRTL } = useRTL();
+  const isMobile = useIsMobile();
+  const selectedClass = selected ? selectedTextColor : ''
+
+  useEffect(() => {
+    if (selected && rightSection) {
+      const setCheckedState = (element: HTMLElement) => {
+        if (
+          element.getAttribute('role') === 'checkbox' ||
+          element.getAttribute('role') === 'radio'
+        ) {
+          if (element.getAttribute('data-state') !== 'checked' && selected) {
+            const checkboxOrRadio = element.querySelector('input')
+            if (checkboxOrRadio) {
+              if (!checkboxOrRadio.checked && selected) {
+                checkboxOrRadio.checked = true
+              }
+            }
+          }
+        }
+      }
+
+      if (React.isValidElement(rightSection)) {
+        const props = rightSection.props as Record<string, unknown>
+        if (props && typeof props === 'object' && 'id' in props) {
+          const rightSectionElement = document.getElementById(props.id as string)
+          if (rightSectionElement) {
+            setCheckedState(rightSectionElement)
+          }
+        }
+      }
+    }
+  }, [selected, rightSection])
+
+  const enhancedRightSection = React.isValidElement(rightSection)
+    ? React.cloneElement(rightSection as React.ReactElement<RightSectionProps>, {
+      checked: selected,
+      defaultChecked: selected,
+      'data-state': selected ? 'checked' : undefined
+    })
+    : rightSection
+
+  // Placeholder for missing bank name
+  const displayName = bankName || 'Unknown Bank'
+
+  // Create order of elements based on RTL or LTR
+  const bankCardElements = [
+    // Left element (image)
+    loading ? (
+      <Skeleton key="image" className='w-10 h-9' />
+    ) : (
+      <div
+        key="image"
+        className={`flex items-center justify-center ${isMobile ? 'w-10 h-10' : imageSize} rounded-md overflow-hidden`}
+      >
+        {image ? (
+          <img
+            src={image}
+            className={`object-contain ${isMobile ? 'w-10 h-10' : imageSize}`}
+            onError={e => {
+              const target = e.target as HTMLImageElement
+              target.onerror = null
+              target.style.display = 'none'
+              if (target.parentElement) {
+                target.parentElement.innerHTML = `<div class="flex items-center justify-center ${imageSize} bg-gray-200 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building"><rect width="16" height="20" x="4" y="2" rx="2" ry="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01"/><path d="M16 6h.01"/><path d="M12 6h.01"/><path d="M12 10h.01"/><path d="M12 14h.01"/><path d="M16 10h.01"/><path d="M16 14h.01"/><path d="M8 10h.01"/><path d="M8 14h.01"/></svg></div>`
+              }
+            }}
+          />
+        ) : (
+          <Building size={24} className='text-gray-500' />
+        )}
+      </div>
+    ),
+
+
+    // Middle element (content)
+    <div key="content" className={`flex items-center justify-between w-[90%] overflow-hidden`}>
+      <div className={`flex flex-col gap-[8px] flex-1 ${isRTL ? 'items-end' : 'items-start'} justify-center`}>
+        <div className={`flex items-center ${isRTL ? 'w-[96%] justify-end' : 'w-[95%]'} gap-2`}>
+          {loading ? (
+            <Skeleton className='w-[80%] md:w-[30%] overflow-ellipsis h-4 mt-1' />
+          ) : (
+            <p
+              className={`font-[500] text-sm md:text-base w-full overflow-ellipsis ${selectedClass} truncate dark:text-gray-300 ${isRTL ? 'text-left' : ''}`}
+            >
+              {displayName}
+            </p>
+          )}
+          {!loading && badgeText ? (
+            <div className={`relative rounded-xl px-2 py-[2px] flex items-center overflow-hidden flex-shrink-0 bg-gradient-to-r from-primary to-secondary ${isRTL ? 'flex-row-reverse' : ''}`}>
+              {/* Shimmer layer */}
+              <motion.div
+                className='absolute top-0 left-0 h-full w-[20px] rounded-md'
+                style={{
+                  background:
+                    'linear-gradient(to right, transparent, white, transparent)',
+                  transform: 'rotate(-70deg)',
+                  zIndex: 0
+                }}
+                variants={shimmerVariants}
+                animate='animate'
+              />
+              {/* Text */}
+              <p className='text-[8px] md:text-sm text-white relative z-10'>{badgeText}</p>
+            </div>
+          ) : null}
+        </div>
+        {subText !== false ? (
+          loading ? (
+            <Skeleton className='w-[70%] md:w-[70px] h-4' />
+          ) : (
+            <div className={`flex items-center ${isRTL ? 'w-[96%] justify-end' : ' w-[95%]'} gap-2`}>
+              <p
+                className={`font-[500] text-sm md:text-md w-full overflow-ellipsis ${selectedClass} truncate ${isRTL ? 'text-left' : ''} dark:text-gray-400`}
+              >
+                {subText}
+              </p>
+            </div>
+          )
+        ) : null}
+      </div>
+    </div>,
+
+    // Right element (checkbox/radio)
+    <div key="rightSection" className='flex items-center'>
+      {commingSoon ?
+        notify ? (
+          <AnimatedButton
+            variant={'outline'}
+            className='text-black dark:text-white border-gray-100 text-xs md:text-md hover:text-black hover:dark:text-white hover:bg-gray-50'
+          >
+            <Bell /> You'll be notified
+          </AnimatedButton>
+        ) : (
+          <AnimatedButton
+            variant={'outline'}
+            className='text-black dark:text-white border-gray-100 text-xs md:text-md'
+            onClick={commingSoonFun}
+          >
+            <Bell /> Notify me
+          </AnimatedButton>
+        )
+        : enhancedRightSection
+      }
+    </div>
+  ];
+
+  // Reverse the order for RTL languages
+  if (isRTL) {
+    bankCardElements.reverse();
+  }
+
+  return (
+    <div
+      className={`flex items-center w-full ${isRTL ? 'gap-0' : 'gap-4'} ${className} ${isRTL ? 'rtl-direction flex-row-reverse justify-end' : ''}`}
+      onClick={onClick}
+      dir={isRTL ? 'rtl' : 'ltr'}
+    >
+      {bankCardElements}
+    </div>
+  )
+}
+
+export default BankCard

package/src/components/cards/OuterCard.tsx

@@ -0,0 +1,109 @@
+import React, { ReactNode, useState } from 'react'
+import { useRTL } from '@/contexts/RTLContext'
+
+interface OuterCardProp {
+  selected?: boolean
+  children: ReactNode
+  className?: string
+  hoverEffect?: boolean
+  loading?: boolean
+  onSelect?: (selected: boolean) => void
+  noAction?: boolean
+  onClick?: (e: React.MouseEvent) => void
+}
+
+// Add this interface for child props
+interface ChildProps {
+  onClick?: (e: React.MouseEvent) => void
+  loading?: boolean
+  selected?: boolean
+}
+
+const OuterCard = ({
+  selected = false ,
+  children,
+  className = '',
+  hoverEffect = true,
+  loading = false,
+  onSelect,
+  noAction = false,
+  onClick
+}: OuterCardProp) => {
+  const { isRTL } = useRTL();
+  const [isSelected, setIsSelected] = useState(selected)
+
+  // Use prop value if provided, otherwise use internal state
+  const currentSelected = onSelect ? selected : isSelected
+
+  const addedStyle = currentSelected
+    ? 'border-primary bg-ring dark:text-primary'
+    : `bg-white dark:bg-card ${hoverEffect
+      ? 'hover:bg-background hover:shadow-[0_0_2px_0_#1054760F]'
+      : ''
+    } drop-shadow-xs md:drop-shadow-xs`
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if (onClick) {
+      onClick(e)
+      return
+    }
+    // Don't trigger card selection if clicking on checkbox/radio or if noAction is true
+    if (noAction) return
+
+    // Check if the clicked element is a checkbox, radio, or their label
+    const target = e.target as HTMLElement
+    const isInput = target.tagName === 'INPUT'
+    const isRadioIndicator =
+      target.closest('[data-radix-collection-item]') ||
+      target.closest('[role="radio"]') ||
+      target.closest('.RadioGroupIndicator') ||
+      target.closest('svg')
+    const isCheckbox =
+      target.closest('[role="checkbox"]') || target.closest('[data-state]')
+
+    if (isInput || isRadioIndicator || isCheckbox) {
+      // Let the native checkbox/radio handle the click
+      return
+    }
+
+    if (onSelect) {
+      // If parent is controlling selection
+      onSelect(!selected)
+
+      // Find any radio or checkbox inside and trigger click if needed
+      const radioOrCheckbox = (e.currentTarget as HTMLElement).querySelector(
+        'input[type="radio"], input[type="checkbox"]'
+      ) as HTMLInputElement
+      if (radioOrCheckbox && !currentSelected) {
+        radioOrCheckbox.click()
+      }
+    } else {
+      // Internal state management
+      setIsSelected(!isSelected)
+    }
+  }
+
+  return (
+    <div
+      onClick={handleCardClick}
+      className={
+        `flex items-center gap-2 md:gap-4 border-1 border-border-secondary dark:border-border px-2 md:px-3.5 py-2 md:py-3 w-full rounded-lg ${!noAction ? 'cursor-pointer' : ''
+        }` +
+        ' ' +
+        addedStyle +
+        ' ' +
+        className
+      }
+      dir={isRTL ? 'rtl' : 'ltr'}
+    >
+      {React.isValidElement(children)
+        ? React.cloneElement(children as React.ReactElement<ChildProps>, {
+          loading,
+          selected: currentSelected
+        })
+        : children}
+    </div>
+  )
+}
+
+export default OuterCard

package/src/components/cards/WrapperCard.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+
+interface WrapperCardProps {
+  children: React.ReactNode
+  className?: string
+  selected?: boolean
+  onSelect?: (selected: boolean) => void
+  hoverEffect?: boolean
+  noAction?: boolean
+}
+
+const WrapperCard = ({
+  children,
+  className = '',
+  selected = false,
+  onSelect,
+  hoverEffect = true,
+  noAction = false
+}: WrapperCardProps) => {
+  const [isSelected, setIsSelected] = useState(selected);
+  
+  // Use prop value if provided, otherwise use internal state
+  const currentSelected = onSelect ? selected : isSelected;
+  
+  const addedStyle = currentSelected 
+    ? "border-primary bg-ring" 
+    : `bg-white ${hoverEffect ? 'hover:bg-gray-10 hover:shadow-sm transition duration-50' : ''} drop-shadow-xs md:drop-shadow-xs`;
+  
+  const handleCardClick = (e: React.MouseEvent) => {
+    // Don't trigger card selection if noAction is true
+    if (noAction) return;
+    
+    // Check if the clicked element is a checkbox, radio, or their label
+    const target = e.target as HTMLElement;
+    if (
+      target.tagName === 'INPUT' || 
+      target.classList.contains('checkbox') || 
+      target.classList.contains('radio') ||
+      target.classList.contains('form-control')
+    ) {
+      // Let the native checkbox/radio handle the click
+      return;
+    }
+    
+    if (onSelect) {
+      // If parent is controlling selection
+      onSelect(!selected);
+    } else {
+      // Internal state management
+      setIsSelected(!isSelected);
+    }
+  };
+
+  return (
+    <div 
+      onClick={handleCardClick}
+      className={`flex items-center gap-4 shadow-xs px-3.5 py-3 w-full rounded-lg ${!noAction ? 'cursor-pointer' : ''} border-1 border-gray-100 ${addedStyle} ${className}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default WrapperCard

package/src/components/documents/PrivacyContent.tsx

@@ -0,0 +1 @@
+ 

package/src/components/dummyFooter.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import logo from '@/assets/brand/saafe-logo.svg'
+import { useTrustedCount } from '@/hooks/use-trusted-count'
+
+const DummyFooter = ({ show = false }: { show?: boolean }) => {
+  const { data: trustedCount, isLoading } = useTrustedCount();
+  
+  return (
+    <div>
+      {
+        show ? (
+          <div className='mt-16'>
+            <img src={logo} className='w-48 h-auto filter grayscale opacity-30' />
+            {!isLoading && trustedCount?.displayText && (
+              <h1 className='text-4xl font-semibold text-gray-300 mt-8 dark:text-muted-secondary'>
+                {trustedCount.displayText}
+              </h1>
+            )}
+          </div>
+
+        ) : (
+          <div className='mt-16 w-full h-[140px]' />
+        )
+      }
+    </div>
+  )
+}
+
+export default DummyFooter

package/src/components/icons/github.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@/lib/utils'
+
+export default function GitHub({ className, ...props }: React.HTMLAttributes<SVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+            className={cn("icon icon-tabler icons-tabler-outline icon-tabler-brand-github", className)} {...props}>
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+        </svg>
+    )
+}

package/src/components/language/LanguageSwitcher.tsx

@@ -0,0 +1,44 @@
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useRTL } from '@/contexts/RTLContext';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { ChevronDown, Globe } from 'lucide-react';
+
+export function LanguageSwitcher() {
+  const { currentLanguage, changeLanguage, languageOptions } = useLanguage();
+  const { isRTL } = useRTL();
+
+  // Find current language display name
+  const currentLanguageOption = languageOptions.find(option => option.code === currentLanguage);
+  const currentDisplayName = currentLanguageOption ? currentLanguageOption.name : 'English';
+
+  return (
+    <div className={`language-switcher ${isRTL ? 'rtl-language' : ''}`}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="flex items-center gap-2 px-3 py-1.5 h-auto text-white">
+            <Globe className="h-4 w-4 no-flip" />
+            <span className="hidden sm:inline-block">{currentDisplayName}</span>
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align={isRTL ? "end" : "start"} className="w-40">
+          {languageOptions.map((option) => (
+            <DropdownMenuItem
+              key={option.code}
+              onClick={() => changeLanguage(option.code)}
+              className={`${currentLanguage === option.code ? 'bg-muted' : ''} ${option.code === 'ur' ? 'text-right w-full' : ''}`}
+            >
+              {option.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+} 

package/src/components/layouts/FrostedLayout.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FrostedLayout } from "./FrostedLayout";
+
+const meta: Meta<typeof FrostedLayout> = {
+  title: "Layouts/FrostedLayout",
+  component: FrostedLayout,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof FrostedLayout>;
+
+export const Default: Story = {
+  args: {
+    children: <div className="p-4">Main Content</div>,
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    children: <div className="p-4">Main Content</div>,
+    footer: <div className="p-4 bg-gray-100">Footer Content</div>,
+  },
+};
+
+export const WithLongContent: Story = {
+  args: {
+    children: (
+      <div className="p-4">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div key={i} className="mb-4 p-4 bg-white rounded shadow">
+            Content Block {i + 1}
+          </div>
+        ))}
+      </div>
+    ),
+    footer: <div className="p-4 bg-gray-100">Footer Content</div>,
+  },
+};