saafe-redirection-flow 2.0.0

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/src/stories/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/styles/rtl-utils.css

@@ -0,0 +1,90 @@
+/* RTL utilities for Tailwind CSS */
+
+/* These custom utilities will complement Tailwind classes */
+.rtl\:flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.rtl\:text-right {
+  text-align: right;
+}
+
+.rtl\:mr-auto {
+  margin-right: auto;
+}
+
+.rtl\:ml-auto {
+  margin-left: auto;
+}
+
+/* RTL specific padding and margin classes */
+.rtl\:pl-0 {
+  padding-left: 0;
+}
+
+.rtl\:pr-0 {
+  padding-right: 0;
+}
+
+/* RTL transforms for icons */
+.rtl\:rotate-180 {
+  transform: rotate(180deg);
+}
+
+.rtl\:scale-x-n1 {
+  transform: scaleX(-1);
+}
+
+/* RTL borders */
+.rtl\:border-r {
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+.rtl\:border-l {
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+.rtl\:border-r-0 {
+  border-right-width: 0;
+}
+
+.rtl\:border-l-0 {
+  border-left-width: 0;
+}
+
+/* Typography direction */
+.rtl\:direction-rtl {
+  direction: rtl;
+}
+
+.rtl\:direction-ltr {
+  direction: ltr;
+}
+
+/* RTL float classes */
+.rtl\:float-right {
+  float: right;
+}
+
+.rtl\:float-left {
+  float: left;
+}
+
+/* Variable to manage padding and margin amounts based on size */
+:root {
+  --padding-amount-1: 0.25rem;
+  --padding-amount-2: 0.5rem;
+  --padding-amount-3: 0.75rem;
+  --padding-amount-4: 1rem;
+  --padding-amount-5: 1.25rem;
+  --padding-amount-6: 1.5rem;
+  
+  --margin-amount-1: 0.25rem;
+  --margin-amount-2: 0.5rem;
+  --margin-amount-3: 0.75rem;
+  --margin-amount-4: 1rem;
+  --margin-amount-5: 1.25rem;
+  --margin-amount-6: 1.5rem;
+} 

package/src/styles/rtl.css

@@ -0,0 +1,105 @@
+/* RTL Specific Styles */
+
+/* Global RTL adjustments */
+.rtl {
+    direction: rtl;
+    text-align: right;
+}
+
+/* Flip padding and margins for RTL */
+.rtl .language-switcher {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+/* Flip button icons */
+.rtl button svg:not(.no-flip) {
+    transform: scaleX(-1);
+}
+
+/* Adjust flexbox direction */
+.rtl .flex-row {
+    flex-direction: row-reverse;
+}
+
+/* Adjust text alignment in inputs and forms */
+.rtl input, 
+.rtl textarea {
+    text-align: right;
+}
+
+/* Adjust dropdown menus */
+.rtl .dropdown-menu-content {
+    transform-origin: top right;
+}
+
+/* Adjust borders */
+.rtl .border-l {
+    border-left: none;
+    border-right: 1px solid;
+}
+
+.rtl .border-r {
+    border-right: none;
+    border-left: 1px solid;
+}
+
+/* Adjust any left/right padding or margins in common components */
+.rtl .pl-1, .rtl .pl-2, .rtl .pl-3, .rtl .pl-4, .rtl .pl-5, .rtl .pl-6 {
+    padding-left: 0;
+    padding-right: var(--padding-amount);
+}
+
+.rtl .pr-1, .rtl .pr-2, .rtl .pr-3, .rtl .pr-4, .rtl .pr-5, .rtl .pr-6 {
+    padding-right: 0;
+    padding-left: var(--padding-amount);
+}
+
+.rtl .ml-1, .rtl .ml-2, .rtl .ml-3, .rtl .ml-4, .rtl .ml-5, .rtl .ml-6 {
+    margin-left: 0;
+    margin-right: var(--margin-amount);
+}
+
+.rtl .mr-1, .rtl .mr-2, .rtl .mr-3, .rtl .mr-4, .rtl .mr-5, .rtl .mr-6 {
+    margin-right: 0;
+    margin-left: var(--margin-amount);
+}
+
+/* Adjust input groups */
+.rtl .input-group-prepend {
+    border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.rtl .input-group-append {
+    border-radius: 0.25rem 0 0 0.25rem;
+}
+
+/* If using tailwind, we need to adjust text alignment for RTL */
+.rtl .text-left {
+    text-align: right;
+}
+
+.rtl .text-right {
+    text-align: left;
+}
+
+/* Reset direction for elements that should not be flipped */
+.rtl .no-rtl {
+    direction: ltr;
+    text-align: left;
+}
+
+/* Stepper specific RTL adjustments */
+.rtl .rtl-stepper {
+    /* Ensure connectors align correctly in RTL */
+    direction: rtl;
+}
+
+.rtl .rtl-stepper .step-content {
+    text-align: right;
+}
+
+/* Fix for step icons in RTL mode */
+.rtl .rtl-stepper svg:not(.no-flip) {
+    transform: scaleX(-1);
+} 

package/src/utils/api-error.ts

@@ -0,0 +1,26 @@
+import { ErrorResponse } from '@/services/api/auth.service';
+
+export class ApiError extends Error {
+  code: string;
+  txnid: string;
+  timestamp: string;
+  
+  constructor(error: ErrorResponse) {
+    super(error.errorMsg || error.errorCode);
+    this.name = 'ApiError';
+    this.code = error.errorCode;
+    this.txnid = error.txnid;
+    this.timestamp = error.timestamp;
+  }
+}
+
+export const getErrorMessage = (errorCode: string): string => {
+  const errorMessages: Record<string, string> = {
+    'Invalid Otp': 'The OTP you entered is invalid. Please try again.',
+    'Token Expired': 'Your session has expired. Please log in again.',
+    'Invalid Token': 'Authentication failed. Please log in again.',
+    'User Not Found': 'User not found. Please check your credentials.'
+  };
+  
+  return errorMessages[errorCode] || 'An unexpected error occurred. Please try again.';
+}; 

package/src/utils/cn.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * A utility function that merges multiple class names together
+ * It combines clsx for conditional classes with tailwind-merge to handle Tailwind CSS class conflicts
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+} 

package/src/utils/error-callback.ts

@@ -0,0 +1,116 @@
+interface ErrorCallbackData {
+  type: 'error';
+  status: 'error';
+  flowCompleted: boolean;
+  errorCode?: string;
+  errorMessage: string;
+  errorType?: 'api' | 'auth' | 'network' | 'validation' | 'unknown';
+  statusCode?: number;
+  timestamp: string;
+  userAgent?: string;
+  url?: string;
+  stack?: string;
+  consentHandle?: string;
+  redirectUrl?: string;
+}
+
+/**
+ * Send error callback to parent window
+ */
+export const sendErrorCallback = (
+  errorMessage: string,
+  options: {
+    errorCode?: string;
+    errorType?: 'api' | 'auth' | 'network' | 'validation' | 'unknown';
+    statusCode?: number;
+    stack?: string;
+    consentHandle?: string;
+    redirectUrl?: string;
+    flowCompleted?: boolean;
+  } = {}
+) => {
+  const errorData: ErrorCallbackData = {
+    type: 'error',
+    status: 'error',
+    flowCompleted: options.flowCompleted ?? false,
+    errorCode: options.errorCode,
+    errorMessage,
+    errorType: options.errorType || 'unknown',
+    statusCode: options.statusCode,
+    timestamp: new Date().toISOString(),
+    userAgent: navigator.userAgent,
+    url: window.location.href,
+    stack: options.stack,
+    consentHandle: options.consentHandle,
+    redirectUrl: options.redirectUrl
+  };
+
+  console.log('Sending error message to parent:', errorData);
+  
+  try {
+    window.parent.postMessage(errorData, '*');
+  } catch (err) {
+    console.error('Failed to send error callback to parent:', err);
+  }
+};
+
+/**
+ * Handle API errors and send callback
+ */
+export const handleApiErrorWithCallback = (
+  error: unknown,
+  customMessage?: string,
+  consentHandle?: string,
+  redirectUrl?: string
+) => {
+  let errorMessage = customMessage || 'An unexpected error occurred';
+  let errorCode: string | undefined;
+  let statusCode: number | undefined;
+  let errorType: 'api' | 'auth' | 'network' | 'validation' | 'unknown' = 'unknown';
+
+  // Handle Axios errors
+  if (error && typeof error === 'object' && 'response' in error) {
+    const errorResponse = error?.response as any;
+    statusCode = errorResponse?.status;
+    errorCode = errorResponse?.data?.errorCode;
+    errorType = 'api';
+
+    // Get specific error message from response
+    if (errorResponse?.data?.errorCode) {
+      errorMessage = errorResponse.data.errorCode;
+    } else if (errorResponse?.data?.errorMsg) {
+      errorMessage = errorResponse.data.errorMsg;
+    } else if (statusCode === 401) {
+      errorMessage = 'Authentication failed. Please log in again.';
+      errorType = 'auth';
+    } else if (statusCode === 403) {
+      errorMessage = "You don't have permission to perform this action.";
+      errorType = 'auth';
+    } else if (statusCode === 404) {
+      errorMessage = 'Resource not found.';
+    } else if (statusCode && statusCode >= 500) {
+      errorMessage = 'Server error. Please try again later.';
+    }
+  }
+  // Handle network errors
+  else if (error && typeof error === 'object' && 'code' in error && (error as any).code === 'NETWORK_ERROR') {
+    errorMessage = 'Network error. Please check your connection.';
+    errorType = 'network';
+  }
+  // Handle standard errors
+  else if (error && typeof error === 'object' && 'message' in error) {
+    errorMessage = (error as Error).message;
+    errorType = error.name === 'ValidationError' ? 'validation' : 'unknown';
+  }
+
+  // Send error callback
+  sendErrorCallback(errorMessage, {
+    errorCode,
+    errorType,
+    statusCode,
+    stack: error instanceof Error ? error.stack : undefined,
+    consentHandle,
+    redirectUrl,
+    flowCompleted: false
+  });
+};

package/src/utils/formatAccountNumber.ts

@@ -0,0 +1,9 @@
+export const formatAccountNumber = (accountNumber: string) => {
+  return (
+    '****' +
+    accountNumber
+      .replace(/XX+/g, '')
+      .replace(/\s/g, '')
+      .replace(/(\d{4})(?=\d)/g, '$1')
+  )
+}

package/src/utils/handleIdentifiers.ts

@@ -0,0 +1,90 @@
+interface Identifier {
+  type: 'PAN' | 'AADHAAR' | 'MOBILE';
+  value?: string;
+}
+
+interface Fip {
+  id: string;
+  Identifiers?: Identifier[];
+}
+
+interface DecodedInfo {
+  pan?: string;
+  aadhaar?: string;
+}
+
+interface SelectedFips {
+  [key: string]: string[];
+}
+
+interface NavigateState {
+  category: string;
+  selectedFips: string[];
+}
+
+interface NavigateOptions {
+  state?: NavigateState;
+}
+
+const handleIdentifiers = ({
+  selectedFips,
+  activeCategory,
+  decodedInfo,
+  selectedMobileNumber,
+  setIdentifiers,
+  fips,
+  navigate
+}: {
+  selectedFips: SelectedFips;
+  activeCategory: string;
+  decodedInfo: DecodedInfo;
+  selectedMobileNumber: string;
+  setIdentifiers: (identifiers: Identifier[]) => void;
+  fips: Fip[];
+  navigate: (path: string, options?: NavigateOptions) => void;
+}) => {
+  let redirect = false;
+  const identifiersList: Identifier[] = [];
+
+  fips
+    .filter(fip =>
+      selectedFips[activeCategory]?.includes(fip.id)
+    )
+    .forEach(fip => {
+      fip.Identifiers?.forEach(identifier => {
+        if (!identifiersList.find(i => i.type === identifier.type)) {
+          const value =
+            identifier.type === 'PAN'
+              ? decodedInfo?.pan
+              : identifier.type === 'AADHAAR'
+                ? decodedInfo?.aadhaar
+                : identifier.type === 'MOBILE'
+                  ? selectedMobileNumber
+                  : undefined;
+          identifiersList.push({ ...identifier, value });
+        }
+      });
+    });
+
+  setIdentifiers(identifiersList);
+  if (identifiersList?.length > 0 && Boolean(identifiersList.find(val => !val.value)?.type)) {
+    if (identifiersList.find(i => i.type === 'PAN')) {
+      redirect = true;
+    }
+    if (identifiersList.find(i => i.type === 'AADHAAR')) {
+      redirect = true;
+    }
+  }
+
+  if (redirect) {
+    navigate(`/link-accounts/discover-account`, {
+      state: {
+        category: activeCategory,
+        selectedFips: selectedFips[activeCategory]
+      }
+    });
+    return null;
+  }
+};
+
+export default handleIdentifiers;

package/src/utils/posthog.ts

@@ -0,0 +1,67 @@
+import posthog from 'posthog-js';
+import { EXTERNAL_URLS } from '@/config/urls';
+import { useRedirectStore } from '@/store/redirect.store';
+
+export const trackEvent = (eventName: string, properties?: Record<string, unknown>) => {
+  if (import.meta.env.VITE_MODE.toLowerCase() !== 'production') {
+    return;
+  }
+  
+  // Get decoded info from the redirect store
+  const { decodedInfo } = useRedirectStore.getState();
+  
+  // Prepare default properties from redirect store
+  const defaultProperties: Record<string, unknown> = {};
+  
+  if (decodedInfo) {
+    defaultProperties.fiuId = decodedInfo.fiuId;
+    defaultProperties.fiuName = decodedInfo.fiuName;
+    defaultProperties.fipId = decodedInfo.fipId;
+    defaultProperties.platform = decodedInfo.platform;
+    defaultProperties.isNewUser = !decodedInfo.isUserPresent;
+  }
+  
+  // Merge default properties with provided properties
+  const combinedProperties = { ...defaultProperties, ...properties };
+  
+  const prefixedEventName = `AA_${eventName}`;
+  posthog.capture(prefixedEventName, combinedProperties);
+};
+
+// Event names as constants for type safety and reusability
+export const EVENTS = {
+  INIT_OTP: 'INIT_OTP',
+  RESEND_OTP: 'RESEND_OTP',
+  SUBMIT_OTP: 'SUBMIT_OTP',
+  ADD_NEW_MOBILE: 'ADD_NEW_MOBILE',
+  VERIFY_NEW_MOBILE: 'VERIFY_NEW_MOBILE',
+  DISCOVER_ACCOUNT: 'DISCOVER_ACCOUNT',
+  DISCOVER_MORE: 'DISCOVER_MORE',
+  CHANGE_LANGUAGE: 'CHANGE_LANGUAGE',
+  USER_EXIT: 'USER_EXIT',
+  VIEW_TERMS: 'VIEW_TERMS',
+  SELECT_ALL_ACCOUNTS: 'SELECT_ALL_ACCOUNTS',
+  SKIP_LINKING: 'SKIP_LINKING',
+  LINK_ACCOUNT: 'LINK_ACCOUNT',
+  RETRY_FAILED_ACCOUNTS: 'RETRY_FAILED_ACCOUNTS',
+  EDIT_ACCOUNT: 'EDIT_ACCOUNT',
+  ADD_ACCOUNT: 'ADD_ACCOUNT',
+  APPROVE_CONSENT: 'APPROVE_CONSENT',
+  REJECT_CONSENT: 'REJECT_CONSENT',
+  VIEW_MORE_CONSENT: 'VIEW_MORE_CONSENT',
+  SUBMIT_RATING: 'SUBMIT_RATING',
+  SUBMIT_FEEDBACK: 'SUBMIT_FEEDBACK',
+  NOTIFY_UPDATES: 'NOTIFY_UPDATES',
+  SEARCH_BANKS: 'SEARCH_BANKS',
+} as const;
+
+// Initialize PostHog with configuration from environment
+export const initPostHog = () => {
+  if (EXTERNAL_URLS.POSTHOG_KEY) {
+    posthog.init(EXTERNAL_URLS.POSTHOG_KEY, {
+      api_host: EXTERNAL_URLS.POSTHOG_HOST || 'https://app.posthog.com',
+      disable_session_recording: true,
+      capture_pageview: true,
+    });
+  }
+}; 

package/src/utils/toast-helpers.ts

@@ -0,0 +1,61 @@
+import { toast } from 'sonner'
+
+export const handleApiError = (
+  error: unknown,
+  customMessage: string = 'An error occurred'
+) => {
+  // Handle Axios errors
+  if (error && typeof error === 'object' && 'response' in error) {
+    const errorResponse = error?.response as any
+
+    // Display server error message if available
+    if (errorResponse?.data?.errorCode) {
+      toast.error('Error', {
+        description: errorResponse.data.errorCode
+      })
+      return
+    }
+
+    // Handle different status codes
+    if (errorResponse?.status === 401) {
+      toast.error('Unauthorized. Please log in again.')
+      return
+    }
+
+    if (errorResponse?.status === 403) {
+      toast.error("You don't have permission to perform this action.")
+      return
+    }
+
+    if (errorResponse?.status === 404) {
+      toast.error('Resource not found.')
+      return
+    }
+
+    if (errorResponse?.status >= 500) {
+      toast.error('Server error. Please try again later.!!!')
+      return
+    }
+  }
+
+  // For standard errors with message property
+  if (error && typeof error === 'object' && 'message' in error) {
+    toast.error(error.message as string)
+    return
+  }
+
+  // Default fallback
+  toast.error(customMessage)
+}
+
+export const showSuccessToast = (message: string) => {
+  toast.success(message)
+}
+
+export const showInfoToast = (message: string) => {
+  toast.info(message)
+}
+
+export const showWarningToast = (message: string) => {
+  toast.warning(message)
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />