@developer_tribe/react-native-comnyx 0.3.5 → 0.3.7

package/src/components/CustomerForm.tsx

@@ -16,6 +16,8 @@ import { useThemeColors } from '../hooks/useThemeColors';
 import CustomPopup from './CustomAlert';
 import { useState } from 'react';
 import { ScaledSheet } from './ScaledSheet';
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+import { activeOpacity } from '../constants/activeOpacity';
 
 interface CustomerFormData {
   name: string;
@@ -109,6 +111,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
           ]}
         >
           <TouchableOpacity
+            activeOpacity={activeOpacity}
             style={[
               styles.iconContainer,
               { backgroundColor: themeColors.dark_background },
@@ -144,7 +147,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
                 },
               ]}
             >
-              {localize('customer.form.title')}
+              {localize('customer.form.name')}
             </AppText>
             <Controller
               control={control}
@@ -158,7 +161,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
                 <View
                   style={[
                     styles.inputContainer,
-                    { borderBottomColor: themeColors.gainsboro },
+                    { borderBottomColor: themeColors.ghost },
                   ]}
                 >
                   <TextInput
@@ -200,7 +203,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
                 <View
                   style={[
                     styles.inputContainer,
-                    { borderBottomColor: themeColors.gainsboro },
+                    { borderBottomColor: themeColors.ghost },
                   ]}
                 >
                   <TextInput
@@ -246,7 +249,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
                 <View
                   style={[
                     styles.inputContainer,
-                    { borderBottomColor: themeColors.gainsboro },
+                    { borderBottomColor: themeColors.ghost },
                   ]}
                 >
                   <TextInput
@@ -269,6 +272,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
             />
           </View>
           <TouchableOpacity
+            activeOpacity={activeOpacity}
             style={[
               styles.button,
               { backgroundColor: themeColors.dark_background },
@@ -291,9 +295,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
           setPopupVisible(false);
           setPopupContent({ title: '', description: '' });
         }}
-        onResendButton={() => {
-          setPopupVisible(false);
-        }}
+        buttonText={'customer.form.cancel' as keyof LocalizationKeys}
       />
     </Pressable>
   );
@@ -301,7 +303,8 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
 
 const styles = ScaledSheet.create({
   container: {
-    paddingBottom: '24@vs',
+    paddingBottom: '20@vs',
+    paddingTop: '40@vs',
     flex: 1,
     justifyContent: 'space-between',
   },
@@ -359,10 +362,11 @@ const styles = ScaledSheet.create({
   },
   title: {
     fontSize: '16@vs',
+    fontWeight: '500',
   },
   iconContainer: {
     paddingHorizontal: '20@s',
-    paddingVertical: '10@vs',
+    paddingVertical: '30@vs',
   },
   inputContainer: {
     flexDirection: 'row',

package/src/components/InitFailed.tsx

@@ -2,6 +2,7 @@ import { TouchableOpacity, View } from 'react-native';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { AppText } from './AppText';
 import { ScaledSheet } from './ScaledSheet';
+import { activeOpacity } from '../constants/activeOpacity';
 
 interface InitFailedProps {
   setInitFailed: (value: boolean) => void;
@@ -15,6 +16,7 @@ export function InitFailed({ setInitFailed }: InitFailedProps) {
       style={[styles.container, { backgroundColor: themeColors.background }]}
     >
       <TouchableOpacity
+        activeOpacity={activeOpacity}
         style={[styles.retryButton, { backgroundColor: themeColors.primary }]}
         onPress={() => setInitFailed(false)}
       >

package/src/components/MessageInput.tsx

@@ -4,6 +4,8 @@ import { useState } from 'react';
 import { sendCustomerMessage } from '../api';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { ScaledSheet } from './ScaledSheet';
+import { useLocalize } from '../hooks/useLocalize';
+import { activeOpacity } from '../constants/activeOpacity';
 
 const sendDark = require('../assets/arrow-right.png');
 
@@ -16,6 +18,7 @@ export function MessageInput({
   const [value, setValue] = useState('');
   const customer = useAppStore((s) => s.customer!);
   const themeColors = useThemeColors();
+  const localize = useLocalize();
 
   const sendMessage = () => {
     if (value.trim()) {
@@ -26,7 +29,7 @@ export function MessageInput({
           approved: false,
           content: value,
           created_at: date,
-          user: {
+          customer: {
             name: customer.name,
             profile_photo_url: null,
           },
@@ -51,7 +54,8 @@ export function MessageInput({
               alteredData[itemIndex] = {
                 id: res.message.id,
                 content: res.message.content,
-                user: res.message.user ?? alteredData[itemIndex]?.user,
+                customer:
+                  res.message.customer ?? alteredData[itemIndex]?.customer,
                 created_at: new Date(res.message.created_at),
                 approved: true,
               };
@@ -82,7 +86,7 @@ export function MessageInput({
                 content: alteredData[itemIndex]?.content ?? '',
                 created_at: alteredData[itemIndex]?.created_at ?? new Date(),
                 approved: alteredData[itemIndex]?.approved ?? false,
-                user: alteredData[itemIndex]?.user ?? null,
+                customer: alteredData[itemIndex]?.customer ?? null,
                 error: true,
               };
               useAppStore.setState({
@@ -114,23 +118,18 @@ export function MessageInput({
           {
             backgroundColor: themeColors.background,
             color: themeColors.text,
-            borderColor: themeColors.border,
+            borderColor: themeColors.silver,
           },
         ]}
-        placeholder="Type a message..."
+        placeholder={localize('chat.messageInput.placeholder')}
         placeholderTextColor={themeColors.text + '80'}
       />
       <TouchableOpacity
-        style={[
-          styles.sendButton,
-          { backgroundColor: themeColors.dark_background },
-        ]}
+        style={[styles.sendButton]}
         onPress={sendMessage}
+        activeOpacity={activeOpacity}
       >
-        <Image
-          style={[styles.sendIcon, { tintColor: themeColors.light_text }]}
-          source={sendDark}
-        />
+        <Image style={[styles.sendIcon]} source={sendDark} />
       </TouchableOpacity>
     </View>
   );
@@ -157,14 +156,14 @@ const styles = ScaledSheet.create({
     maxHeight: 190,
   },
   sendButton: {
-    width: '40@s',
+    width: '40@vs',
     height: '40@vs',
     borderRadius: '20@vs',
     justifyContent: 'center',
     alignItems: 'center',
   },
   sendIcon: {
-    width: '20@vs',
-    height: '20@vs',
+    width: '40@vs',
+    height: '40@vs',
   },
 });

package/src/components/MessageItem.tsx

@@ -30,7 +30,7 @@ export function MessageItem({
   onShowPopup: () => void;
 }) {
   const themeColors = useThemeColors();
-  const isDeviceOwner = !!item.user;
+  const isDeviceOwner = !item.user && !item.bot;
   const formattedDate = new Date(item.created_at).toLocaleTimeString([], {
     hour: '2-digit',
     minute: '2-digit',
@@ -102,7 +102,7 @@ export function MessageItem({
   // A single line message with enough space for the timestamp
   const isSingleLineWithSpace =
     layoutRef.current.lines === 1 &&
-    layoutRef.current.lastLineWidth < layoutRef.current.totalWidth * 0.8;
+    layoutRef.current.lastLineWidth > layoutRef.current.totalWidth * 0.8;
 
   // For multi-line messages, check if the last line has space
   const isMultiLineWithSpace =
@@ -126,8 +126,8 @@ export function MessageItem({
         style={[
           styles.messageBubble,
           isDeviceOwner
-            ? [styles.rightBubble, { backgroundColor: themeColors.light_green }]
-            : [styles.leftBubble, { backgroundColor: themeColors.ghost }],
+            ? { backgroundColor: themeColors.light_green }
+            : { backgroundColor: themeColors.ghost },
         ]}
       >
         <View
@@ -173,7 +173,6 @@ export function MessageItem({
 
 const styles = ScaledSheet.create({
   messageItem: {
-    marginVertical: '5@vs',
     maxWidth: '80%',
     minHeight: 60,
     minWidth: 100,
@@ -189,12 +188,6 @@ const styles = ScaledSheet.create({
     paddingHorizontal: '12@s',
     borderRadius: '20@vs',
   },
-  leftBubble: {
-    borderTopLeftRadius: 4,
-  },
-  rightBubble: {
-    borderTopRightRadius: 4,
-  },
   inlineContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -250,7 +243,6 @@ const styles = ScaledSheet.create({
     width: '12@vs',
     height: '12@vs',
     marginLeft: '4@s',
-    tintColor: '#000000',
   },
   infoIcon: {
     width: '12@vs',

package/src/constants/activeOpacity.ts

@@ -0,0 +1 @@
+export const activeOpacity = 0.8;