chore: Multiple minor fixes and improvements (#917)

Author: muhsin-k

app.config.ts

@@ -4,7 +4,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     name: 'Chatwoot',
     slug: process.env.EXPO_PUBLIC_APP_SLUG || 'chatwoot-mobile',
-    version: '4.0.15',
+    version: '4.0.16',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "4.0.15",
+  "version": "4.0.16",
   "main": "expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -102,6 +102,7 @@
     "redux-persist": "^6.0.0",
     "rn-fetch-blob": "^0.12.0",
     "semver": "^7.6.3",
+    "snakecase-keys": "^8.0.1",
     "string.prototype.matchall": "4.0.3",
     "tailwindcss": "^3.4.12",
     "twrnc": "^4.5.1",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import React from 'react';
 import Animated, { LinearTransition, withTiming } from 'react-native-reanimated';
 import { tailwind } from '@/theme';
 import { FilterButton } from './FilterButton';
+import i18n from '@/i18n';
 
 // Generic type for filter options
 export type BaseFilterOption = {
@@ -32,22 +33,42 @@ export const FilterBar = ({ allFilters, selectedFilters, onFilterPress }: Filter
     };
   };
 
+  const getFilterTitle = (value: BaseFilterOption) => {
+    return i18n.t(
+      `CONVERSATION.FILTERS.${value.type.toUpperCase()}.OPTIONS.${selectedFilters[value.type].toUpperCase()}`,
+    );
+  };
+
   return (
     <Animated.View
       exiting={exiting}
       style={tailwind.style('px-3 pt-2 pb-1.5 h-[46px] flex flex-row')}>
-      {allFilters.map((value, index) => (
-        <Animated.View
-          layout={LinearTransition.springify().stiffness(200).damping(24)}
-          key={index}
-          style={tailwind.style('pr-2')}>
-          <FilterButton
-            handleOnPress={() => onFilterPress(value.type)}
-            allFilters={value}
-            selectedFilters={selectedFilters}
-          />
-        </Animated.View>
-      ))}
+      {allFilters.map((value, index) => {
+        if (value.type === 'inbox_id') {
+          return (
+            <Animated.View
+              layout={LinearTransition.springify().stiffness(200).damping(24)}
+              key={index}
+              style={tailwind.style('pr-2')}>
+              <FilterButton
+                handleOnPress={() => onFilterPress(value.type)}
+                value={value.options[selectedFilters[value.type] as keyof typeof value.options]}
+              />
+            </Animated.View>
+          );
+        }
+        return (
+          <Animated.View
+            layout={LinearTransition.springify().stiffness(200).damping(24)}
+            key={index}
+            style={tailwind.style('pr-2')}>
+            <FilterButton
+              handleOnPress={() => onFilterPress(value.type)}
+              value={getFilterTitle(value)}
+            />
+          </Animated.View>
+        );
+      })}
     </Animated.View>
   );
 };

src/components-next/common/filters/FilterBar.tsx

@@ -8,16 +8,14 @@ import { CaretBottomSmall } from '@/svg-icons';
 import { tailwind } from '@/theme';
 import { useHaptic, useScaleAnimation } from '@/utils';
 import { Icon } from '../icon';
-import { BaseFilterOption } from './FilterBar';
 
 type FilterButtonProps = {
-  allFilters: BaseFilterOption;
-  selectedFilters: Record<string, string>;
+  value: string;
   handleOnPress: () => void;
 };
 
 export const FilterButton = (props: FilterButtonProps) => {
-  const { allFilters, handleOnPress, selectedFilters } = props;
+  const { value, handleOnPress } = props;
   const { handlers, animatedStyle } = useScaleAnimation();
   const { filtersModalSheetRef } = useRefsContext();
 
@@ -40,7 +38,7 @@ export const FilterButton = (props: FilterButtonProps) => {
           style={tailwind.style(
             'text-sm font-inter-medium-24 leading-[16px] tracking-[0.24px] pr-1 capitalize text-gray-950',
           )}>
-          {allFilters.options[selectedFilters[allFilters.type] as keyof typeof allFilters.options]}
+          {value}
         </Animated.Text>
         <Icon icon={<CaretBottomSmall />} size={7.5} />
       </Pressable>

src/components-next/common/filters/FilterButton.tsx

@@ -59,14 +59,6 @@
       "AGENT": {
         "SEARCH_AGENT": "Search agents"
       },
-      "ASSIGNEE_TYPE": {
-        "TITLE": "Filter by assignee type",
-        "OPTIONS": {
-          "ME": "Me",
-          "UNASSIGNED": "Unassigned",
-          "ALL": "All"
-        }
-      },
       "INBOX": {
         "TITLE": "Filter by inbox"
       },
@@ -87,6 +79,14 @@
           "RESOLVED": "Resolved",
           "ALL": "All"
         }
+      },
+      "ASSIGNEE_TYPE": {
+        "TITLE": "Filter by assignee type",
+        "OPTIONS": {
+          "ME": "Me",
+          "UNASSIGNED": "Unassigned",
+          "ALL": "All"
+        }
       }
     },
     "ASSIGNEE": {

src/i18n/en.json

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Dimensions } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { LightBox, LightBoxProps } from '@alantoa/lightbox';
 import { Image } from 'expo-image';
 import { tailwind } from '@/theme';
 
-const { width, height } = Dimensions.get('screen');
-
 const AnimatedExpoImage = Animated.createAnimatedComponent(Image);
 
 type ImageCellProps = {
@@ -18,12 +15,13 @@ type ImageContainerProps = Pick<ImageCellProps, 'imageSrc'> &
 
 export const ImageBubbleContainer = (props: ImageContainerProps) => {
   const { imageSrc, height: lightboxH, width: lightboxW } = props;
+
   return (
     <LightBox
       width={lightboxW}
       height={lightboxH}
-      imgLayout={{ height: height * 0.8, width: width * 0.8 }}
-      tapToClose={false}>
+      imgLayout={{ width: lightboxW, height: lightboxH }}
+      tapToClose={true}>
       <AnimatedExpoImage
         source={{ uri: imageSrc }}
         contentFit="cover"
@@ -32,6 +30,7 @@ export const ImageBubbleContainer = (props: ImageContainerProps) => {
     </LightBox>
   );
 };
+
 export const ImageBubble = (props: ImageCellProps) => {
   const { imageSrc } = props;
 

src/screens/chat-screen/components/message-components/ImageBubble.tsx

@@ -183,32 +183,34 @@ export const MessageTextInput = ({
       if (keyword == null || !isPrivateMessage) {
         return null;
       }
+      const filteredSuggestions = suggestions.filter(one =>
+        one.name?.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()),
+      );
       return (
         <Animated.View
           style={[
             tailwind.style(
-              'absolute bottom-full rounded-[13px] mx-4 px-2 bg-white w-full max-h-[250px]',
+              'bg-white border-t border-gray-200 rounded-[13px] mx-4 px-2 w-full max-h-[250px]',
+              Platform.OS === 'ios' ? 'absolute bottom-full' : 'relative h-[150px]',
             ),
             styles.listShadow,
           ]}>
           <ScrollView keyboardShouldPersistTaps="always">
-            {suggestions
-              .filter(one => one.name?.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
-              .map(agent => {
-                const agentSuggestion: AgentSuggestion = {
-                  ...agent,
-                  id: String(agent.id),
-                  name: agent.name || '',
-                };
-                return (
-                  <MentionUser
-                    key={agent.id}
-                    agent={agent}
-                    lastItem={false}
-                    onPress={() => onSuggestionPress(agentSuggestion)}
-                  />
-                );
-              })}
+            {filteredSuggestions.map(agent => {
+              const agentSuggestion: AgentSuggestion = {
+                ...agent,
+                id: String(agent.id),
+                name: agent.name || '',
+              };
+              return (
+                <MentionUser
+                  key={agent.id}
+                  agent={agent}
+                  lastItem={false}
+                  onPress={() => onSuggestionPress(agentSuggestion)}
+                />
+              );
+            })}
           </ScrollView>
         </Animated.View>
       );