Merge branch 'release/4.3.0'

Author: muhsin-k

.env.example

@@ -1,7 +1,7 @@
 EXPO_PUBLIC_CHATWOOT_WEBSITE_TOKEN=
 EXPO_PUBLIC_CHATWOOT_BASE_URL=https://app.chatwoot.com
 EXPO_PUBLIC_JUNE_SDK_KEY=
-EXPO_PUBLIC_MINIMUM_CHATWOOT_VERSION=3.13.0
+EXPO_PUBLIC_MINIMUM_CHATWOOT_VERSION=4.1.0
 EXPO_PUBLIC_SENTRY_DSN=
 EXPO_PUBLIC_PROJECT_ID=
 EXPO_PUBLIC_APP_SLUG=

app.config.ts

@@ -4,11 +4,12 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     name: 'Chatwoot',
     slug: process.env.EXPO_PUBLIC_APP_SLUG || 'chatwoot-mobile',
-    version: '4.2.0',
+    version: '4.3.0',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',
     newArchEnabled: false,
+    scheme: 'chatwootapp',
     splash: {
       image: './assets/splash.png',
       resizeMode: 'contain',
@@ -37,13 +38,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
     android: {
       adaptiveIcon: { foregroundImage: './assets/adaptive-icon.png', backgroundColor: '#ffffff' },
       package: 'com.chatwoot.app',
-      permissions: [
-        'android.permission.CAMERA',
-        'android.permission.READ_EXTERNAL_STORAGE',
-        'android.permission.WRITE_EXTERNAL_STORAGE',
-        'android.permission.RECORD_AUDIO',
-        'android.permission.READ_MEDIA_IMAGES',
-      ],
+      permissions: ['android.permission.CAMERA', 'android.permission.RECORD_AUDIO'],
       // Please use the relative path to the google-services.json file
       googleServicesFile: process.env.EXPO_PUBLIC_ANDROID_GOOGLE_SERVICES_FILE,
       intentFilters: [
@@ -60,6 +55,15 @@ export default ({ config }: ConfigContext): ExpoConfig => {
           ],
           category: ['BROWSABLE', 'DEFAULT'],
         },
+        {
+          action: 'VIEW',
+          data: [
+            {
+              scheme: 'chatwootapp',
+            },
+          ],
+          category: ['BROWSABLE', 'DEFAULT'],
+        },
       ],
     },
     extra: {
@@ -89,7 +93,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
           android: {
             minSdkVersion: 24,
             compileSdkVersion: 35,
-            targetSdkVersion: 34,
+            targetSdkVersion: 35,
             enableProguardInReleaseBuilds: true,
           },
           ios: { useFrameworks: 'static' },

jest.config.js

@@ -4,4 +4,7 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|@reduxjs|immer)',
+  ],
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "scripts": {
     "start": "expo start --dev-client",
     "start:production": "expo start --no-dev --minify",
@@ -63,6 +63,7 @@
     "diff": "5.0.0",
     "expo": "~52.0.46",
     "expo-application": "~6.0.2",
+    "expo-auth-session": "~6.0.3",
     "expo-av": "~15.0.2",
     "expo-build-properties": "~0.13.2",
     "expo-constants": "^17.0.8",

pnpm-lock.yaml

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { tailwind } from '@/theme';
+import { Icon } from '../common/icon/Icon';
+
+type AuthButtonProps = {
+  text: string;
+  icon: React.ReactNode;
+  handlePress?: () => void;
+  disabled?: boolean;
+  variant?: 'outline' | 'filled';
+  style?: any;
+};
+
+export const AuthButton = ({
+  text,
+  icon,
+  handlePress,
+  disabled = false,
+  variant = 'outline',
+  style,
+}: AuthButtonProps) => {
+  const getButtonStyles = () => {
+    const baseStyles = 'py-[11px] flex-row items-center justify-center rounded-[13px]';
+    const variantStyles = variant === 'filled' ? 'bg-blue-800' : 'bg-gray-50';
+    const disabledStyles = disabled ? 'opacity-50' : '';
+
+    return tailwind.style(baseStyles, variantStyles, disabledStyles);
+  };
+
+  const getTextStyles = () => {
+    const baseStyles = 'ml-2 text-base font-medium';
+    const colorStyles = variant === 'filled' ? 'text-white' : 'text-gray-950';
+
+    return tailwind.style(baseStyles, colorStyles);
+  };
+
+  return (
+    <Pressable style={[getButtonStyles(), style]} onPress={handlePress} disabled={disabled}>
+      <Icon size={16} icon={icon} />
+      <Animated.Text style={getTextStyles()}>{text}</Animated.Text>
+    </Pressable>
+  );
+};

src/components-next/button/AuthButton.tsx

@@ -1,2 +1,3 @@
 export * from './Button';
 export * from './IconButton';
+export * from './AuthButton';

src/components-next/button/index.ts

@@ -6,3 +6,4 @@ export * from './sheet-components';
 export * from './spinner';
 export * from './action-tabs';
 export * from './no-network';
+export * from './verification-code';

src/components-next/index.ts

@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  FlipInXDown,
+  FlipOutXDown,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+export type StatusType = 'inProgress' | 'correct' | 'wrong';
+
+export type AnimatedCodeNumberProps = {
+  code?: string;
+  highlighted: boolean;
+  status: SharedValue<StatusType>;
+};
+
+export const AnimatedCodeNumber: React.FC<AnimatedCodeNumberProps> = ({
+  code,
+  highlighted,
+  status,
+}) => {
+  const correctColor = 'hsl(151, 40.2%, 54.1%)'; // green-600
+  const defaultColor = 'hsl(0, 0%, 89.5%)'; // gray-300
+
+  const rBoxStyle = useAnimatedStyle(() => {
+    return {
+      // Only show green border for correct status, default border for all other states
+      borderColor: withTiming(status.value === 'correct' ? correctColor : defaultColor),
+    };
+  }, [correctColor, defaultColor]);
+
+  return (
+    <Animated.View style={[styles.container, rBoxStyle]}>
+      {code != null && (
+        <Animated.View entering={FadeIn.duration(250)} exiting={FadeOut.duration(250)}>
+          <Animated.Text
+            entering={FlipInXDown.duration(500)
+              // Go to this website and you'll see the curve I used:
+              // https://cubic-bezier.com/#0,0.75,0.5,0.9
+              // Basically, I want the animation to start slow, then accelerate at the end
+              // Do we really need to use a curve? Every detail matters :)
+              .easing(Easing.bezier(0, 0.75, 0.5, 0.9).factory())
+              .build()}
+            exiting={FlipOutXDown.duration(500)
+              // https://cubic-bezier.com/#0.6,0.1,0.4,0.8
+              // I want the animation to start fast, then decelerate at the end (opposite of the previous one)
+              .easing(Easing.bezier(0.6, 0.1, 0.4, 0.8).factory())
+              .build()}
+            style={[styles.text, { color: 'hsl(0, 0%, 39.3%)' }]}>
+            {code}
+          </Animated.Text>
+        </Animated.View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '90%',
+    width: '80%',
+    borderWidth: 2,
+    borderRadius: 12,
+    borderCurve: 'continuous',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 40,
+    fontFamily: 'Inter-500-24',
+  },
+});

src/components-next/verification-code/animated-code-number.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+// Custom hook for creating an animated shaking effect
+const useAnimatedShake = () => {
+  // Shared value to track the horizontal translation for shaking
+  const shakeTranslateX = useSharedValue(0);
+
+  // Callback function to trigger the shake animation
+  const shake = useCallback(() => {
+    // Cancel any ongoing animations on shakeTranslateX
+    cancelAnimation(shakeTranslateX);
+
+    // Reset the translation value to 0 before starting the new animation
+    shakeTranslateX.value = 0;
+
+    // Apply a repeating animation to create a shaking effect
+    shakeTranslateX.value = withRepeat(
+      withTiming(10, {
+        duration: 120,
+        easing: Easing.bezier(0.35, 0.7, 0.5, 0.7),
+      }),
+      6, // Repeat the animation 6 times
+      true, // Infinite loop (true indicates indefinite repetition)
+    );
+  }, [shakeTranslateX]); // Dependency array to ensure proper re-rendering
+
+  // Define the animated style based on the current translation value
+  const rShakeStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: shakeTranslateX.value }],
+    };
+  }, []);
+
+  // Return the shake callback function and the animated style for external use
+  return { shake, rShakeStyle };
+};
+
+// Export the custom hook for use in other components
+export { useAnimatedShake };