@trustchex/react-native-sdk 1.250.0 → 1.266.0

package/lib/module/Shared/Components/NavigationManager.js

@@ -6,7 +6,8 @@ import { CommonActions, useNavigation, usePreventRemove } from '@react-navigatio
 import { View, StyleSheet, Alert } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import i18n from "../../Translation/index.js";
-import { Button } from 'react-native-paper';
+import StyledButton from "./StyledButton.js";
+import { analyticsService } from "../Services/AnalyticsService.js";
 
 // Simple global navigation lock
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -107,6 +108,7 @@ const NavigationManager = /*#__PURE__*/forwardRef(({
       appContext.currentWorkflowStep = undefined;
       appContext.workflowSteps = undefined;
       appContext.isDemoSession = false;
+      analyticsService.setDemoSession(false);
       appContext.identificationInfo = {
         sessionId: '',
         identificationId: '',
@@ -150,7 +152,7 @@ const NavigationManager = /*#__PURE__*/forwardRef(({
   }));
   return appContext.currentWorkflowStep && (!appContext.currentWorkflowStep?.required || canSkipStep) && /*#__PURE__*/_jsx(View, {
     style: styles.container,
-    children: /*#__PURE__*/_jsx(Button, {
+    children: /*#__PURE__*/_jsx(StyledButton, {
       mode: "text",
       onPress: goToNextRouteWithAlert,
       children: t('navigationManager.skipStepLabel')

package/lib/module/Shared/Components/QrCodeScannerCamera.js

@@ -10,11 +10,13 @@ import { useTranslation } from 'react-i18next';
 import LottieView from 'lottie-react-native';
 import { scanCodes } from "../VisionCameraPlugins/BarcodeScanner/index.js";
 import StyledButton from "./StyledButton.js";
+import { useTheme } from "../Contexts/ThemeContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const QrCodeScannerCamera = ({
   onQrCodeScanned
 }) => {
   useKeepAwake();
+  const theme = useTheme();
   const cameraPermission = useCameraPermission();
   const [permissionsRequested, setPermissionsRequested] = React.useState(false);
   const [isActive, setIsActive] = React.useState(false);
@@ -123,11 +125,13 @@ const QrCodeScannerCamera = ({
     return /*#__PURE__*/_jsx(View, {
       style: styles.permissionContainer,
       children: /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "large"
+        size: "large",
+        color: theme.colors.primary
       })
     });
   }
   if (!cameraPermission.hasPermission) {
+    // Camera permission denied by user - their choice, not actionable
     return /*#__PURE__*/_jsxs(View, {
       style: styles.permissionContainer,
       children: [/*#__PURE__*/_jsx(Text, {
@@ -143,6 +147,7 @@ const QrCodeScannerCamera = ({
     });
   }
   if (device == null) {
+    // No camera device - device limitation, not actionable
     return /*#__PURE__*/_jsx(View, {
       style: styles.permissionContainer,
       children: /*#__PURE__*/_jsx(TextView, {

package/lib/module/Shared/Components/StyledButton.js

@@ -1,18 +1,89 @@
 "use strict";
 
 import React from 'react';
-import { StyleSheet } from 'react-native';
-import { Button } from 'react-native-paper';
+import { StyleSheet, TouchableOpacity, Text, ActivityIndicator } from 'react-native';
+import { useTheme } from "../Contexts/ThemeContext.js";
+
+// Calculate if a color is light or dark to determine text color
 import { jsx as _jsx } from "react/jsx-runtime";
+const isLightColor = color => {
+  // Remove # if present
+  const hex = color.replace('#', '');
+
+  // Convert to RGB
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  // Calculate relative luminance using WCAG formula
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Return true if light (luminance > 0.5)
+  return luminance > 0.5;
+};
 const StyledButton = ({
+  mode = 'contained',
+  onPress,
+  disabled = false,
+  loading = false,
+  children,
   style,
   labelStyle,
-  ...props
+  buttonColor,
+  textColor
 }) => {
-  return /*#__PURE__*/_jsx(Button, {
-    ...props,
-    style: [styles.button, style],
-    labelStyle: [styles.label, labelStyle]
+  const theme = useTheme();
+  const primaryColor = buttonColor || theme.colors.primary;
+
+  // Determine text color based on background color for contained mode
+  const getContainedTextColor = () => {
+    if (textColor) return textColor;
+    return isLightColor(primaryColor) ? '#000000' : '#FFFFFF';
+  };
+  const containedTextColor = getContainedTextColor();
+  const getButtonStyle = () => {
+    const baseStyle = [styles.button, style];
+    if (mode === 'contained') {
+      return [...baseStyle, styles.containedButton, {
+        backgroundColor: primaryColor
+      }, disabled && styles.disabledButton];
+    }
+    if (mode === 'outlined') {
+      return [...baseStyle, styles.outlinedButton, {
+        borderColor: primaryColor
+      }, disabled && styles.disabledButton];
+    }
+    return [...baseStyle, styles.textButton];
+  };
+  const getTextStyle = () => {
+    const baseStyle = [styles.label, labelStyle];
+    if (mode === 'contained') {
+      return [...baseStyle, styles.containedLabel, {
+        color: containedTextColor
+      }, disabled && styles.disabledLabel];
+    }
+    if (mode === 'outlined') {
+      return [...baseStyle, styles.outlinedLabel, {
+        color: primaryColor
+      }, disabled && styles.disabledLabel];
+    }
+    return [...baseStyle, styles.textLabel, {
+      color: primaryColor
+    }, disabled && styles.disabledLabel];
+  };
+  const loadingColor = mode === 'contained' ? containedTextColor : primaryColor;
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: getButtonStyle(),
+    onPress: onPress,
+    disabled: disabled || loading,
+    activeOpacity: 0.7,
+    children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      size: "small",
+      color: loadingColor
+    }) : /*#__PURE__*/_jsx(Text, {
+      style: getTextStyle(),
+      children: children
+    })
   });
 };
 const styles = StyleSheet.create({
@@ -20,11 +91,39 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     height: 56,
     justifyContent: 'center',
-    elevation: 2
+    alignItems: 'center',
+    paddingHorizontal: 16
+  },
+  containedButton: {
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84
+  },
+  outlinedButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2
+  },
+  textButton: {
+    backgroundColor: 'transparent'
+  },
+  disabledButton: {
+    opacity: 0.5
   },
   label: {
     fontWeight: 'bold',
-    fontSize: 16
+    fontSize: 16,
+    textAlign: 'center'
+  },
+  containedLabel: {},
+  outlinedLabel: {},
+  textLabel: {},
+  disabledLabel: {
+    opacity: 0.6
   }
 });
 export default StyledButton;

package/lib/module/Shared/Components/StyledTextInput.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, TextInput, View, Text } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTextInput = /*#__PURE__*/React.forwardRef(({
+  containerStyle,
+  inputStyle,
+  placeholderStyle,
+  borderColor = '#DDDDDD',
+  focusedBorderColor,
+  backgroundColor = '#FFFFFF',
+  textColor = '#000000',
+  placeholderColor = '#999999',
+  style,
+  placeholderTextColor,
+  onFocus,
+  onBlur,
+  value,
+  ...props
+}, ref) => {
+  const [isFocused, setIsFocused] = React.useState(false);
+  const hasValue = value !== undefined && value !== '';
+  const handleFocus = e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+  const currentBorderColor = isFocused ? focusedBorderColor || borderColor : borderColor;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      ref: ref,
+      ...props,
+      value: value,
+      placeholder: "",
+      style: [styles.input, {
+        backgroundColor,
+        borderColor: currentBorderColor,
+        color: textColor
+      }, inputStyle, style],
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }), !hasValue && props.placeholder && /*#__PURE__*/_jsx(View, {
+      style: styles.placeholderContainer,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.placeholderText, {
+          color: placeholderColor || placeholderTextColor || '#999'
+        }, placeholderStyle],
+        children: props.placeholder
+      })
+    })]
+  });
+});
+StyledTextInput.displayName = 'StyledTextInput';
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative'
+  },
+  input: {
+    borderWidth: 2,
+    borderRadius: 8,
+    height: 56,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    fontWeight: '400'
+  },
+  placeholderContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  placeholderText: {
+    fontSize: 16,
+    fontWeight: '400'
+  }
+});
+export default StyledTextInput;

package/lib/module/Shared/Contexts/AppContext.js

@@ -23,5 +23,7 @@ export default /*#__PURE__*/createContext({
   workflowSteps: [],
   currentWorkflowStep: undefined,
   onCompleted: undefined,
-  onError: undefined
+  onError: undefined,
+  setSessionId: undefined,
+  setBaseUrl: undefined
 });

package/lib/module/Shared/Contexts/ThemeContext.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import React, { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultColors = {
+  primary: '#000000',
+  secondary: '#CCCCCC',
+  tertiary: '#FF0000',
+  background: '#FFFFFF',
+  surface: '#F5F5F5',
+  text: '#000000',
+  textSecondary: '#666666',
+  border: '#DDDDDD',
+  error: '#E53935',
+  success: '#43A047'
+};
+const ThemeContext = /*#__PURE__*/createContext({
+  colors: defaultColors
+});
+export const useTheme = () => useContext(ThemeContext);
+export const ThemeProvider = ({
+  children,
+  primaryColor,
+  secondaryColor,
+  tertiaryColor
+}) => {
+  const colors = useMemo(() => ({
+    ...defaultColors,
+    primary: primaryColor || defaultColors.primary,
+    secondary: secondaryColor || defaultColors.secondary,
+    tertiary: tertiaryColor || defaultColors.tertiary
+  }), [primaryColor, secondaryColor, tertiaryColor]);
+  const value = useMemo(() => ({
+    colors
+  }), [colors]);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: value,
+    children: children
+  });
+};