@developer_tribe/react-native-comnyx 0.9.0 → 0.10.1

package/src/components/CustomerForm.tsx

@@ -7,6 +7,8 @@ import {
   ScrollView,
   StatusBar,
   ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { createCustomer } from '../api';
@@ -122,218 +124,234 @@ export function CustomerForm({
         animated={false}
         translucent
       />
-      <TouchableOpacity
-        style={[styles.container, { backgroundColor: themeColors.background }]}
-        onPress={Keyboard.dismiss}
-        activeOpacity={1}
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={{ flex: 1 }}
       >
-        <ScrollView
-          contentContainerStyle={styles.scrollContainer}
-          keyboardShouldPersistTaps="handled"
+        <TouchableOpacity
+          style={[
+            styles.container,
+            { backgroundColor: themeColors.background },
+          ]}
+          onPress={Keyboard.dismiss}
+          activeOpacity={1}
         >
-          <View
-            style={[
-              styles.container,
-              { backgroundColor: themeColors.background },
-            ]}
+          <ScrollView
+            contentContainerStyle={styles.scrollContainer}
+            keyboardShouldPersistTaps="handled"
           >
-            <TouchableOpacity
-              activeOpacity={1}
-              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={1}
                 style={[
-                  styles.title,
-                  {
-                    color: themeColors.slate,
-                  },
+                  styles.iconContainer,
+                  { backgroundColor: themeColors.dark_background },
                 ]}
+                onPress={onBack}
               >
-                {localize('customer.form.name')}
-              </AppText>
-              <Controller
-                control={control}
-                rules={{
-                  required: {
-                    value: true,
-                    message: localize('customer.form.validation.name.required'),
-                  },
-                  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={{
+                    required: {
+                      value: true,
+                      message: localize(
+                        'customer.form.validation.name.required'
+                      ),
+                    },
+                    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}
                       />
-                    )}
-                  </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'}
+                      {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="phone"
-              />
+                      {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>
             </View>
-          </View>
-        </ScrollView>
-        <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 }]}
+          </ScrollView>
+          <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>
+          <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>
-        <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>
+      </KeyboardAvoidingView>
     </>
   );
 }

package/src/components/EmptyList.tsx

@@ -1,4 +1,4 @@
-import { View, Image } from 'react-native';
+import { View, Image, Platform } from 'react-native';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { AppText } from './AppText';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
@@ -11,7 +11,15 @@ export function EmptyList() {
 
   return (
     <View
-      style={[styles.container, { backgroundColor: themeColors.background }]}
+      style={[
+        styles.container,
+        {
+          backgroundColor: themeColors.background,
+          transform: [
+            Platform.OS === 'ios' ? { scaleY: -1 } : { rotate: '180deg' },
+          ],
+        },
+      ]}
     >
       <Image
         source={notificationIcon}
@@ -37,7 +45,6 @@ const styles = ScaledSheet.create({
     paddingHorizontal: '20@s',
     paddingVertical: '20@vs',
     gap: 15,
-    transform: [{ rotate: '180deg' }],
   },
   title: {
     fontSize: '18@vs',

package/src/notifications/initializeNotifications.ts

@@ -60,10 +60,30 @@ function changePermissionStatus(status: NotificationPermissionStatus) {
 
 async function initializeNativeNotifications() {
   const state = useAppStore.getState();
+  //TODO: better event listener. Event listener doesn't work if its set after initialize
+  globalSubscriptions.subscriptionsForNotification = [
+    ComnyxNotifications.addEventListener('TOKEN_INIT', (data) => {
+      if (Platform.OS === 'ios') {
+        accumulator.add({
+          apnsToken: data.token,
+        });
+      } else if (Platform.OS === 'android') {
+        accumulator.add({
+          fcmToken: data.token,
+        });
+      }
+    }),
+    ComnyxNotifications.addEventListener('TOKEN_FAILED', (data) => {
+      //TODO: logger
+      console.error('TOKEN_FAILED', data);
+    }),
+  ];
   return await nativeComnyx.initialize().then((res) => {
     state.setNotificationInitialized(true);
     if (res.success) {
+
       accumulator.add({
+        platform: Platform.OS,
         country: res.country,
         language: res.language, //ComnyxSupport burayı override ediyor!.
         timezone: res.timezone,
@@ -157,24 +177,6 @@ export async function initializeNotifications(
     }
   );
 
-  globalSubscriptions.subscriptionsForNotification = [
-    ComnyxNotifications.addEventListener('TOKEN_INIT', (data) => {
-      if (Platform.OS === 'ios') {
-        accumulator.add({
-          apnsToken: data.token,
-          platform: 'ios',
-        });
-      } else if (Platform.OS === 'android') {
-        accumulator.add({
-          fcmToken: data.token,
-          platform: 'android',
-        });
-      }
-    }),
-    ComnyxNotifications.addEventListener('TOKEN_FAILED', (data) => {
-      //TODO: logger
-      console.error('TOKEN_FAILED', data);
-    }),
-  ];
+
   return result;
 }