@developer_tribe/react-native-comnyx 0.3.8 → 0.3.10

package/src/components/ChatList.tsx

@@ -8,6 +8,7 @@ import {
   Image,
   TouchableOpacity,
   Keyboard,
+  StatusBar,
 } from 'react-native';
 import { getCustomerConversation, sendCustomerMessage } from '../api';
 import type { AppConversationMessage } from '../types/Conversation';
@@ -513,131 +514,141 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
   }
 
   return (
-    <View
-      style={[styles.container, { backgroundColor: themeColors.background }]}
-    >
-      <TouchableOpacity
-        style={[styles.iconContainer]}
-        onPress={onBack}
-        activeOpacity={activeOpacity}
-      >
-        <Image
-          source={closeIcon}
-          style={[styles.closeIcon, { tintColor: themeColors.text }]}
-        />
-      </TouchableOpacity>
+    <>
+      <StatusBar
+        barStyle={'dark-content'}
+        backgroundColor={themeColors.background}
+        animated={false}
+        translucent
+      />
       <View
-        style={[
-          styles.headerContainer,
-          {
-            backgroundColor: themeColors.background,
-            borderBottomColor: themeColors.lavender,
-          },
-        ]}
+        style={[styles.container, { backgroundColor: themeColors.background }]}
       >
-        <AppText
-          localization="chat.support-team"
-          style={[styles.header, { color: themeColors.text }]}
-        />
+        <TouchableOpacity
+          style={[styles.iconContainer]}
+          onPress={onBack}
+          activeOpacity={activeOpacity}
+        >
+          <Image
+            source={closeIcon}
+            style={[styles.closeIcon, { tintColor: themeColors.text }]}
+          />
+        </TouchableOpacity>
         <View
           style={[
-            styles.headerText,
-            { backgroundColor: themeColors.background },
+            styles.headerContainer,
+            {
+              backgroundColor: themeColors.background,
+              borderBottomColor: themeColors.lavender,
+            },
           ]}
         >
-          <Image
-            source={headphonesIcon}
-            style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
-          />
           <AppText
-            localization="chat.live"
-            style={[styles.liveChat, { color: themeColors.text }]}
+            localization="chat.support-team"
+            style={[styles.header, { color: themeColors.text }]}
           />
-          <View style={[styles.dot, { backgroundColor: themeColors.green }]} />
+          <View
+            style={[
+              styles.headerText,
+              { backgroundColor: themeColors.background },
+            ]}
+          >
+            <Image
+              source={headphonesIcon}
+              style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
+            />
+            <AppText
+              localization="chat.live"
+              style={[styles.liveChat, { color: themeColors.text }]}
+            />
+            <View
+              style={[styles.dot, { backgroundColor: themeColors.green }]}
+            />
+          </View>
         </View>
-      </View>
 
-      <View style={styles.listContainer}>
-        <AppText
-          style={[
-            styles.fixedDateText,
-            { color: themeColors.slate, backgroundColor: themeColors.ghost },
-          ]}
-        >
-          {currentSection}
-        </AppText>
-
-        <SectionList
-          ref={ref}
-          sections={sections}
-          inverted
-          renderItem={renderItem}
-          contentContainerStyle={[
-            styles.contentContainer,
-            { backgroundColor: themeColors.background },
-          ]}
-          style={styles.list}
-          ListEmptyComponent={
-            !loading && (!sections || sections.length === 0) ? (
-              <EmptyList />
-            ) : null
-          }
-          ListFooterComponent={loading ? <LoadingItem /> : null}
-          keyExtractor={(item: AppConversationMessage) =>
-            item.id + '-' + item.created_at
-          }
-          removeClippedSubviews={true}
-          maxToRenderPerBatch={10}
-          windowSize={21}
-          initialNumToRender={MESSAGES_PER_PAGE}
-          getItemLayout={(_: any, index: number) => ({
-            length: MESSAGE_MIN_HEIGHT + 10,
-            offset: (MESSAGE_MIN_HEIGHT + 10) * index,
-            index,
-          })}
-          onScroll={handleScroll}
-          scrollEventThrottle={16}
-          viewabilityConfigCallbackPairs={
-            viewabilityConfigCallbackPairs.current
-          }
-          stickySectionHeadersEnabled={false}
+        <View style={styles.listContainer}>
+          <AppText
+            style={[
+              styles.fixedDateText,
+              { color: themeColors.slate, backgroundColor: themeColors.ghost },
+            ]}
+          >
+            {currentSection}
+          </AppText>
+
+          <SectionList
+            ref={ref}
+            sections={sections}
+            inverted
+            renderItem={renderItem}
+            contentContainerStyle={[
+              styles.contentContainer,
+              { backgroundColor: themeColors.background },
+            ]}
+            style={styles.list}
+            ListEmptyComponent={
+              !loading && (!sections || sections.length === 0) ? (
+                <EmptyList />
+              ) : null
+            }
+            ListFooterComponent={loading ? <LoadingItem /> : null}
+            keyExtractor={(item: AppConversationMessage) =>
+              item.id + '-' + item.created_at
+            }
+            removeClippedSubviews={true}
+            maxToRenderPerBatch={10}
+            windowSize={21}
+            initialNumToRender={MESSAGES_PER_PAGE}
+            getItemLayout={(_: any, index: number) => ({
+              length: MESSAGE_MIN_HEIGHT + 10,
+              offset: (MESSAGE_MIN_HEIGHT + 10) * index,
+              index,
+            })}
+            onScroll={handleScroll}
+            scrollEventThrottle={16}
+            viewabilityConfigCallbackPairs={
+              viewabilityConfigCallbackPairs.current
+            }
+            stickySectionHeadersEnabled={false}
+          />
+        </View>
+        {isScrollingUp && (
+          <TouchableOpacity
+            activeOpacity={activeOpacity}
+            style={[
+              styles.scrollDownButton,
+              { backgroundColor: themeColors.ghost },
+              isKeyboardVisible && styles.scrollDownButtonWithKeyboard,
+            ]}
+            onPress={() => scrollToBottom(true)}
+          >
+            <Image
+              source={require('../assets/down.png')}
+              style={[styles.scrollUpIcon, { tintColor: themeColors.text }]}
+            />
+          </TouchableOpacity>
+        )}
+        <MessageInput
+          scrollToBottom={scrollToBottom}
+          selectedMessage={selectedMessage}
+        />
+        <CustomPopup
+          isVisible={popupVisible}
+          onClose={() => setPopupVisible(false)}
+          title={'chat.list-failed-message.title'}
+          description={'chat.list-failed-message.description'}
+          onCancelButton={() => {
+            setPopupVisible(false);
+          }}
+          onResendButton={() => {
+            resendMessage();
+            setPopupVisible(false);
+          }}
+          buttonText={'chat.list-cancel' as keyof LocalizationKeys}
         />
       </View>
-      {isScrollingUp && (
-        <TouchableOpacity
-          activeOpacity={activeOpacity}
-          style={[
-            styles.scrollDownButton,
-            { backgroundColor: themeColors.ghost },
-            isKeyboardVisible && styles.scrollDownButtonWithKeyboard,
-          ]}
-          onPress={() => scrollToBottom(true)}
-        >
-          <Image
-            source={require('../assets/down.png')}
-            style={[styles.scrollUpIcon, { tintColor: themeColors.text }]}
-          />
-        </TouchableOpacity>
-      )}
-      <MessageInput
-        scrollToBottom={scrollToBottom}
-        selectedMessage={selectedMessage}
-      />
-      <CustomPopup
-        isVisible={popupVisible}
-        onClose={() => setPopupVisible(false)}
-        title={'chat.list-failed-message.title'}
-        description={'chat.list-failed-message.description'}
-        onCancelButton={() => {
-          setPopupVisible(false);
-        }}
-        onResendButton={() => {
-          resendMessage();
-          setPopupVisible(false);
-        }}
-        buttonText={'chat.list-cancel' as keyof LocalizationKeys}
-      />
-    </View>
+    </>
   );
 }
 

package/src/components/CustomerForm.tsx

@@ -2,10 +2,10 @@ import {
   View,
   TextInput,
   TouchableOpacity,
-  Pressable,
   Keyboard,
   Image,
   ScrollView,
+  StatusBar,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useAppStore } from '../store';
@@ -96,208 +96,222 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
   };
 
   return (
-    <Pressable
-      style={[styles.container, { backgroundColor: themeColors.background }]}
-      onPress={Keyboard.dismiss}
-    >
-      <ScrollView
-        contentContainerStyle={styles.scrollContainer}
-        keyboardShouldPersistTaps="handled"
+    <>
+      <StatusBar
+        barStyle={'dark-content'}
+        backgroundColor={themeColors.dark_background}
+        animated={false}
+        translucent
+      />
+      <TouchableOpacity
+        style={[styles.container, { backgroundColor: themeColors.background }]}
+        onPress={Keyboard.dismiss}
+        activeOpacity={activeOpacity}
       >
-        <View
-          style={[
-            styles.container,
-            { backgroundColor: themeColors.background },
-          ]}
+        <ScrollView
+          contentContainerStyle={styles.scrollContainer}
+          keyboardShouldPersistTaps="handled"
         >
-          <TouchableOpacity
-            activeOpacity={activeOpacity}
-            style={[
-              styles.iconContainer,
-              { backgroundColor: themeColors.dark_background },
-            ]}
-            onPress={onBack}
-          >
-            <Image
-              source={closeIcon}
-              style={[styles.closeIcon, { tintColor: themeColors.light_text }]}
-            />
-          </TouchableOpacity>
           <View
             style={[
-              styles.headerContainer,
-              { backgroundColor: themeColors.dark_background },
+              styles.container,
+              { backgroundColor: themeColors.background },
             ]}
           >
-            <AppText
-              localization="customer.form.title"
-              style={[styles.headerText, { color: themeColors.gainsboro }]}
-            />
-            <AppText
-              localization="customer.form.instructions"
-              style={[styles.headerText, { color: themeColors.light_text }]}
-            />
-          </View>
-          <View style={styles.titleContainer}>
-            <AppText
+            <TouchableOpacity
+              activeOpacity={activeOpacity}
               style={[
-                styles.title,
-                {
-                  color: themeColors.slate,
-                },
+                styles.iconContainer,
+                { backgroundColor: themeColors.dark_background },
               ]}
+              onPress={onBack}
             >
-              {localize('customer.form.name')}
-            </AppText>
-            <Controller
-              control={control}
-              rules={{
-                maxLength: {
-                  value: 30,
-                  message: localize('customer.form.validation.name.maxLength'),
-                },
-              }}
-              render={({ field: { onChange, value } }) => (
-                <View
-                  style={[
-                    styles.inputContainer,
-                    { borderBottomColor: themeColors.ghost },
-                  ]}
-                >
-                  <TextInput
-                    style={inputStyle}
-                    placeholder={localize('customer.form.placeholder.name')}
-                    placeholderTextColor={themeColors.gainsboro}
-                    value={value}
-                    onChangeText={onChange}
-                  />
-                  {errors.name && (
-                    <InfoButton
-                      title={'customer.form.failed.name'}
-                      description={'customer.form.failed.name.desc'}
-                    />
-                  )}
-                </View>
-              )}
-              name="name"
-            />
-            <AppText
+              <Image
+                source={closeIcon}
+                style={[
+                  styles.closeIcon,
+                  { tintColor: themeColors.light_text },
+                ]}
+              />
+            </TouchableOpacity>
+            <View
               style={[
-                styles.title,
-                {
-                  color: themeColors.slate,
-                },
+                styles.headerContainer,
+                { backgroundColor: themeColors.dark_background },
               ]}
             >
-              Email
-            </AppText>
-            <Controller
-              control={control}
-              rules={{
-                pattern: {
-                  value: /^\S+@\S+$/i,
-                  message: localize('customer.form.validation.email.pattern'),
-                },
-              }}
-              render={({ field: { onChange, value } }) => (
-                <View
-                  style={[
-                    styles.inputContainer,
-                    { borderBottomColor: themeColors.ghost },
-                  ]}
-                >
-                  <TextInput
-                    style={inputStyle}
-                    placeholder={localize('customer.form.placeholder.email')}
-                    placeholderTextColor={themeColors.gainsboro}
-                    value={value}
-                    onChangeText={onChange}
-                    keyboardType="email-address"
-                  />
-                  {errors.email && (
-                    <InfoButton
-                      title={'customer.form.failed.email'}
-                      description={'customer.form.failed.email.desc'}
+              <AppText
+                localization="customer.form.title"
+                style={[styles.headerText, { color: themeColors.gainsboro }]}
+              />
+              <AppText
+                localization="customer.form.instructions"
+                style={[styles.headerText, { color: themeColors.light_text }]}
+              />
+            </View>
+            <View style={styles.titleContainer}>
+              <AppText
+                style={[
+                  styles.title,
+                  {
+                    color: themeColors.slate,
+                  },
+                ]}
+              >
+                {localize('customer.form.name')}
+              </AppText>
+              <Controller
+                control={control}
+                rules={{
+                  maxLength: {
+                    value: 30,
+                    message: localize(
+                      'customer.form.validation.name.maxLength'
+                    ),
+                  },
+                }}
+                render={({ field: { onChange, value } }) => (
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      { borderBottomColor: themeColors.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.name')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
+                    />
+                    {errors.name && (
+                      <InfoButton
+                        title={'customer.form.failed.name'}
+                        description={'customer.form.failed.name.desc'}
+                      />
+                    )}
+                  </View>
+                )}
+                name="name"
+              />
+              <AppText
+                style={[
+                  styles.title,
+                  {
+                    color: themeColors.slate,
+                  },
+                ]}
+              >
+                Email
+              </AppText>
+              <Controller
+                control={control}
+                rules={{
+                  pattern: {
+                    value: /^\S+@\S+$/i,
+                    message: localize('customer.form.validation.email.pattern'),
+                  },
+                }}
+                render={({ field: { onChange, value } }) => (
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      { borderBottomColor: themeColors.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.email')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
+                      keyboardType="email-address"
                     />
-                  )}
-                </View>
-              )}
-              name="email"
-            />
-            <AppText
+                    {errors.email && (
+                      <InfoButton
+                        title={'customer.form.failed.email'}
+                        description={'customer.form.failed.email.desc'}
+                      />
+                    )}
+                  </View>
+                )}
+                name="email"
+              />
+              <AppText
+                style={[
+                  styles.title,
+                  {
+                    color: themeColors.slate,
+                  },
+                ]}
+              >
+                Phone
+              </AppText>
+              <Controller
+                control={control}
+                rules={{
+                  validate: (value) => {
+                    if (!value) return true;
+                    return (
+                      typeof value === 'string' ||
+                      localize('customer.form.validation.phone.invalid')
+                    );
+                  },
+                }}
+                render={({ field: { onChange, value } }) => (
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      { borderBottomColor: themeColors.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.phone')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
+                      keyboardType="phone-pad"
+                    />
+                    {errors.phone && (
+                      <InfoButton
+                        title={'customer.form.failed.phone'}
+                        description={'customer.form.failed.phone.desc'}
+                      />
+                    )}
+                  </View>
+                )}
+                name="phone"
+              />
+            </View>
+            <TouchableOpacity
+              activeOpacity={activeOpacity}
               style={[
-                styles.title,
-                {
-                  color: themeColors.slate,
-                },
+                styles.button,
+                { backgroundColor: themeColors.dark_background },
               ]}
+              onPress={handleSubmit(onSubmit)}
             >
-              Phone
-            </AppText>
-            <Controller
-              control={control}
-              rules={{
-                validate: (value) => {
-                  if (!value) return true;
-                  return (
-                    typeof value === 'string' ||
-                    localize('customer.form.validation.phone.invalid')
-                  );
-                },
-              }}
-              render={({ field: { onChange, value } }) => (
-                <View
-                  style={[
-                    styles.inputContainer,
-                    { borderBottomColor: themeColors.ghost },
-                  ]}
-                >
-                  <TextInput
-                    style={inputStyle}
-                    placeholder={localize('customer.form.placeholder.phone')}
-                    placeholderTextColor={themeColors.gainsboro}
-                    value={value}
-                    onChangeText={onChange}
-                    keyboardType="phone-pad"
-                  />
-                  {errors.phone && (
-                    <InfoButton
-                      title={'customer.form.failed.phone'}
-                      description={'customer.form.failed.phone.desc'}
-                    />
-                  )}
-                </View>
-              )}
-              name="phone"
-            />
+              <AppText
+                localization="customer.form.submit"
+                style={[styles.buttonText, { color: themeColors.light_text }]}
+              />
+            </TouchableOpacity>
           </View>
-          <TouchableOpacity
-            activeOpacity={activeOpacity}
-            style={[
-              styles.button,
-              { backgroundColor: themeColors.dark_background },
-            ]}
-            onPress={handleSubmit(onSubmit)}
-          >
-            <AppText
-              localization="customer.form.submit"
-              style={[styles.buttonText, { color: themeColors.light_text }]}
-            />
-          </TouchableOpacity>
-        </View>
-      </ScrollView>
-      <CustomPopup
-        isVisible={popupVisible}
-        onClose={() => setPopupVisible(false)}
-        title={popupContent.title}
-        description={popupContent.description}
-        onCancelButton={() => {
-          setPopupVisible(false);
-          setPopupContent({ title: '', description: '' });
-        }}
-        buttonText={'customer.form.cancel' as keyof LocalizationKeys}
-      />
-    </Pressable>
+        </ScrollView>
+        <CustomPopup
+          isVisible={popupVisible}
+          onClose={() => setPopupVisible(false)}
+          title={popupContent.title}
+          description={popupContent.description}
+          onCancelButton={() => {
+            setPopupVisible(false);
+            setPopupContent({ title: '', description: '' });
+          }}
+          buttonText={'customer.form.cancel' as keyof LocalizationKeys}
+        />
+      </TouchableOpacity>
+    </>
   );
 }