@eohjsc/react-native-smart-city 0.7.26 → 0.7.30

package/src/screens/ActivityLog/styles/filterPopupStyles.js

@@ -3,16 +3,19 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   wrapPopup: {
-    marginHorizontal: 16,
+    marginHorizontal: 12,
   },
   popup: {
     backgroundColor: Colors.White,
     width: '100%',
     height: (Constants.height * 80) / 100,
-    padding: 24,
+    padding: 20,
     paddingBottom: 100,
     borderRadius: 10,
   },
+  datePicker: {
+    justifyContent: 'center',
+  },
   heigh50percent: {
     height: (Constants.height * 50) / 100,
   },

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -8,6 +8,7 @@ import Text from '../../commons/Text';
 import GatewayIcon from '../../../assets/images/AddNewDevice/gateway-icon.svg';
 import _TextInput from '../../commons/Form/TextInput';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import useInAppReview from '../../hooks/Review/useInAppReview';
 import Routes from '../../utils/Route';
 import styles from './RenameNewDevicesStyles';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
@@ -33,6 +34,7 @@ const RenameNewDevices = memo(({ route }) => {
   const [selectedDevice, setSelectedDevice] = useState([]);
   const [originalDevices, setOriginalDevices] = useState([]);
   const [isAutoFocus, setIsAutoFocus] = useState(true);
+  const { allowInAppReview } = useInAppReview(false);
 
   const renameLabel = AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE;
 
@@ -94,6 +96,7 @@ const RenameNewDevices = memo(({ route }) => {
         setIsDisabled(false);
         clearTimeout(clear);
       }, 3000);
+      allowInAppReview();
       goBackUnitDetail();
       return;
     }
@@ -135,6 +138,7 @@ const RenameNewDevices = memo(({ route }) => {
     }
 
     if (success1 || success2) {
+      allowInAppReview();
       goBackUnitDetail();
     }
     if (!success1) {
@@ -145,6 +149,7 @@ const RenameNewDevices = memo(({ route }) => {
     }
     setLoading(false);
   }, [
+    allowInAppReview,
     goBackUnitDetail,
     info,
     isChangedName,

package/src/screens/AddNewGateway/__test__/RenameNewDevices.test.js

@@ -14,6 +14,18 @@ import api from '../../../utils/Apis/axios';
 import { CheckBoxCustom } from '../../Sharing/Components';
 import RenameNewDevices from '../RenameNewDevices';
 
+const mockAllowInAppReview = jest.fn();
+const mockAskReview = jest.fn();
+jest.mock('../../../hooks/Review/useInAppReview', () => {
+  return {
+    __esModule: true,
+    default: jest.fn(() => ({
+      allowInAppReview: mockAllowInAppReview,
+      askReview: mockAskReview,
+    })),
+  };
+});
+
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <RenameNewDevices route={route} />
@@ -103,6 +115,8 @@ describe('Test rename new devices', () => {
   };
 
   beforeEach(() => {
+    mockAllowInAppReview.mockClear();
+    mockAskReview.mockClear();
     navigate.mockClear();
     mock.reset();
     route = {
@@ -403,6 +417,8 @@ describe('Test rename new devices', () => {
         ],
       })
     );
+    expect(mockAllowInAppReview).toHaveBeenCalled();
+    expect(mockAskReview).not.toHaveBeenCalled();
     mockedDispatchNavigate();
   });
 
@@ -443,6 +459,8 @@ describe('Test rename new devices', () => {
     });
 
     expect(mock.history.post).toHaveLength(0);
+    expect(mockAllowInAppReview).toHaveBeenCalled();
+    expect(mockAskReview).not.toHaveBeenCalled();
     mockedDispatchNavigate();
   });
 

package/src/screens/Automate/AddNewAction/ReceiverSelect.js

@@ -0,0 +1,208 @@
+import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
+import { FlatList, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import CheckBox from '@react-native-community/checkbox';
+import styles from './Styles/ReceiverSelectStyles';
+import { CircleView, HeaderCustom, Text } from '../../../commons';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { Search } from '../../../commons/DevMode';
+import { convertToSlug } from '../../../utils/Functions/Search';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API, Colors } from '../../../configs';
+import { useSCContextSelector } from '../../../context';
+import { Image } from 'react-native';
+
+const ReceiverSelect = ({
+  listUser,
+  unitId,
+  title,
+  setListUser,
+  onLoadOption,
+  onNext,
+}) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const [members, setMembers] = useState([]);
+  const [search, setSearch] = useState('');
+  const currentUserId = useSCContextSelector(
+    (state) => state.auth.account.user.id
+  );
+
+  const loadMembers = useCallback(async () => {
+    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unitId));
+    if (success) {
+      setMembers(
+        data.map((item) => ({
+          ...item,
+          ...onLoadOption(item),
+        }))
+      );
+    }
+  }, [unitId, onLoadOption]);
+
+  useEffect(() => {
+    loadMembers();
+  }, [loadMembers]);
+
+  const filterMembers = useMemo(() => {
+    return members.filter((member) => {
+      const text = convertToSlug(search);
+      const isNameMatch = convertToSlug(member.name ?? '').includes(text);
+      const isPhoneMatch = convertToSlug(member.phone_number ?? '').includes(
+        text
+      );
+      const isEmailMatch = convertToSlug(member.email ?? '').includes(text);
+      return isNameMatch || isPhoneMatch || isEmailMatch;
+    });
+  }, [members, search]);
+
+  const arrColor = useMemo(
+    () => [
+      Colors.GeekBlue3,
+      Colors.Purple3,
+      Colors.Orange3,
+      Colors.Volcano3,
+      Colors.Blue9,
+      Colors.Green3,
+      Colors.Cyan2,
+    ],
+    []
+  );
+
+  const selectableIds = useMemo(
+    () =>
+      members.filter((member) => !member.disabled).map((member) => member.id),
+    [members]
+  );
+
+  const allSelected = useMemo(
+    () => selectableIds.length === listUser.length,
+    [listUser, selectableIds]
+  );
+
+  const onChecked = useCallback(
+    (id) => (checked) => {
+      setListUser((prev) =>
+        checked ? [...prev, id] : prev.filter((userId) => userId !== id)
+      );
+    },
+    [setListUser]
+  );
+
+  const onDeselectAll = useCallback(() => {
+    setListUser([]);
+  }, [setListUser]);
+
+  const onSelectAll = useCallback(() => {
+    setListUser(selectableIds);
+  }, [selectableIds, setListUser]);
+
+  const onToggleAll = useCallback(
+    (checked) => {
+      if (checked) {
+        onSelectAll();
+      } else {
+        onDeselectAll();
+      }
+    },
+    [onSelectAll, onDeselectAll]
+  );
+
+  const RowMember = memo(({ member, index, onValueChange }) => {
+    const { id, name, avatar, share_id, label, invalidLabel, disabled } =
+      member;
+    const [role, roleColor] = useMemo(() => {
+      if (!share_id) {
+        return [t('owner'), Colors.Primary];
+      }
+      if (id === currentUserId) {
+        return [t('me'), Colors.Primary];
+      }
+      return [t('member'), Colors.Gray6];
+    }, [share_id, id]);
+
+    const firstWordsInName = useMemo(() => {
+      return name.charAt();
+    }, [name]);
+
+    const circleColor = arrColor[index % arrColor.length];
+
+    return (
+      <View style={styles.rowContainer}>
+        <View style={styles.border}>
+          <CheckBox
+            disabled={disabled}
+            lineWidth={4}
+            value={listUser.includes(id)}
+            onValueChange={onValueChange(id)}
+            style={styles.checkbox}
+          />
+          <View style={styles.paddingLeft16}>
+            {avatar ? (
+              <Image source={{ uri: avatar }} style={styles.avatar} />
+            ) : (
+              <CircleView size={40} backgroundColor={circleColor} center>
+                <Text color={Colors.White}>{firstWordsInName}</Text>
+              </CircleView>
+            )}
+          </View>
+          <View style={styles.paddingLeft16}>
+            <Text style={styles.titleName}>{name}</Text>
+            {label ? (
+              <Text style={styles.status}>{label}</Text>
+            ) : (
+              <Text style={styles.invalid}>{invalidLabel}</Text>
+            )}
+          </View>
+          <View style={styles.endFlex}>
+            <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  });
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onClose={goBack} title={title} />
+
+      <View style={styles.wrapSelectAll}>
+        <Search onSearch={setSearch} />
+        <View style={styles.wrapCheckboxSelectAll}>
+          <CheckBox
+            value={allSelected}
+            onValueChange={onToggleAll}
+            style={styles.checkboxSelectAll}
+          />
+          <Text>{allSelected ? t('deselect_all') : t('select_all')}</Text>
+        </View>
+      </View>
+      <View style={styles.borderSelectAll} />
+
+      <FlatList
+        data={filterMembers}
+        renderItem={({ item, index }) => (
+          <RowMember member={item} index={index} onValueChange={onChecked} />
+        )}
+        keyExtractor={(item) => item.id.toString()}
+        ListEmptyComponent={
+          <View style={styles.viewEmpty}>
+            <Text style={styles.textCenter}>{t('no_member')}</Text>
+          </View>
+        }
+      />
+      <View style={styles.container}>
+        <BottomButtonView
+          style={styles.bottomButtonView}
+          mainTitle={t('done')}
+          onPressMain={onNext}
+          typeMain={listUser.length ? 'primary' : 'disabled'}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ReceiverSelect;

package/src/screens/Automate/AddNewAction/SetupScriptEmail.js

@@ -42,7 +42,7 @@ const SetupScriptEmail = ({ route }) => {
   }, [navigate, automate, initialUnitId, formData]);
 
   const canSave = useMemo(() => {
-    const { title, message } = formData || {};
+    const { title, message } = formData;
     return !!title && !!message;
   }, [formData]);
 

package/src/screens/Automate/AddNewAction/SetupScriptNotify.js

@@ -8,53 +8,43 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import _TextInput from '../../../commons/Form/TextInput';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import BottomButtonView from '../../../commons/BottomButtonView';
-import { axiosPost } from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
-import { ToastBottomHelper } from '../../../utils/Utils';
 import Routes from '../../../utils/Route';
-import moment from 'moment';
 
 const SetupScriptNotify = ({ route }) => {
   const t = useTranslations();
   const { goBack, navigate } = useNavigation();
-  const { automate = {}, unitId, multiUnit } = route.params || {};
-  const { id: automateId } = automate;
-  const [notify, setNotify] = useState({ unit: unitId || multiUnit.id });
+  const { automate, unitId, multiUnit } = route.params || {};
+  const initialUnitId = useMemo(
+    () => unitId || multiUnit.id,
+    [unitId, multiUnit?.id]
+  );
+  const [formData, setFormData] = useState({ unit: initialUnitId });
 
   const onChangeTitle = (value) => {
-    setNotify((state) => ({
+    setFormData((state) => ({
       ...state,
       title: value,
     }));
   };
   const onChangeMessage = (value) => {
-    setNotify((state) => ({
+    setFormData((state) => ({
       ...state,
       message: value,
     }));
   };
 
   const onNext = useCallback(async () => {
-    const { success } = await axiosPost(
-      API.AUTOMATE.ADD_SCRIPT_NOTIFY(automateId),
-      notify
-    );
-    if (success) {
-      ToastBottomHelper.success(t('text_done'));
-      navigate({
-        name: Routes.ScriptDetail,
-        merge: true,
-        params: { saveAt: moment().valueOf() },
-      });
-    } else {
-      ToastBottomHelper.error(t('error_please_try_later'));
-    }
-  }, [automateId, navigate, notify, t]);
+    navigate(Routes.SetupScriptReceiverNotify, {
+      automate,
+      unitId: initialUnitId,
+      formData,
+    });
+  }, [navigate, automate, initialUnitId, formData]);
 
   const canSave = useMemo(() => {
-    const { title, message } = notify || {};
+    const { title, message } = formData;
     return !!title && !!message;
-  }, [notify]);
+  }, [formData]);
 
   return (
     <View style={styles.wrap}>
@@ -65,7 +55,7 @@ const SetupScriptNotify = ({ route }) => {
             placeholder={t('title_notification')}
             onChange={onChangeTitle}
             textInputStyle={styles.textTitle}
-            value={notify?.title}
+            value={formData.title}
             accessibilityLabel={AccessibilityLabel.AUTOMATE_TITLE_NOTIFY}
             autoFocus
           />
@@ -73,7 +63,7 @@ const SetupScriptNotify = ({ route }) => {
             placeholder={t('message_notification')}
             onChange={onChangeMessage}
             textInputStyle={styles.textMessage}
-            value={notify?.message}
+            value={formData.message}
             accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
             multiline={true}
             maxLength={255}

package/src/screens/Automate/AddNewAction/SetupScriptReceiverEmail.js

@@ -1,41 +1,20 @@
-import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
-import { FlatList, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import styles from './Styles/SetupScriptReceiverEmailStyles';
-import { CircleView, HeaderCustom, Text } from '../../../commons';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 
-import BottomButtonView from '../../../commons/BottomButtonView';
-import { axiosPost, axiosGet } from '../../../utils/Apis/axios';
-import { API, Colors } from '../../../configs';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import Routes from '../../../utils/Route';
+import ReceiverSelect from './ReceiverSelect';
 import moment from 'moment';
-import CheckBox from '@react-native-community/checkbox';
-import { useSCContextSelector } from '../../../context';
-import { Image } from 'react-native';
 
 const SetupScriptReceiverEmail = ({ route }) => {
   const t = useTranslations();
-  const { goBack, navigate } = useNavigation();
-  const { automate = {}, unitId, formData } = route.params || {};
+  const { navigate } = useNavigation();
+  const { automate = {}, unitId, formData } = route.params;
   const { id: automateId } = automate;
-  const [members, setMembers] = useState([]);
   const [listUser, setListUser] = useState([]);
-  const currentUserId = useSCContextSelector(
-    (state) => state.auth.account.user.id
-  );
-
-  const loadMembers = useCallback(async () => {
-    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unitId));
-    if (success) {
-      setMembers(data);
-    }
-  }, [unitId]);
-
-  useEffect(() => {
-    loadMembers();
-  }, [loadMembers]);
 
   const onNext = useCallback(async () => {
     formData.receiver = listUser;
@@ -55,112 +34,26 @@ const SetupScriptReceiverEmail = ({ route }) => {
     }
   }, [automateId, formData, listUser, navigate, t]);
 
-  const canSave = useMemo(() => {
-    const { title, message } = formData;
-    return !!title && !!message && !!listUser.length;
-  }, [formData, listUser.length]);
-
-  const arrColor = useMemo(
-    () => [
-      Colors.GeekBlue3,
-      Colors.Purple3,
-      Colors.Orange3,
-      Colors.Volcano3,
-      Colors.Blue9,
-      Colors.Green3,
-      Colors.Cyan2,
-    ],
-    []
-  );
-
-  const onChecked = useCallback(
-    (id) => (checked) => {
-      setListUser((prevListUser) =>
-        checked
-          ? [...prevListUser, id]
-          : prevListUser.filter((userId) => userId !== id)
-      );
+  const onLoadOption = useCallback(
+    (item) => {
+      return {
+        label: item.email,
+        invalidLabel: t('no_email'),
+        disabled: !item.email,
+      };
     },
-    []
+    [t]
   );
 
-  const RowMember = memo(({ member, index, onValueChange }) => {
-    const { id, name, avatar, share_id, email } = member;
-    const [role, roleColor] = useMemo(() => {
-      if (!share_id) {
-        return [t('owner'), Colors.Primary];
-      }
-      if (id === currentUserId) {
-        return [t('me'), Colors.Primary];
-      }
-      return [t('member'), Colors.Gray6];
-    }, [share_id, id]);
-
-    const firstWordsInName = useMemo(() => {
-      return name.charAt();
-    }, [name]);
-
-    const circleColor = arrColor[index % arrColor.length];
-
-    return (
-      <View style={styles.rowContainer}>
-        <View style={styles.border}>
-          <CheckBox
-            disabled={!email}
-            lineWidth={4}
-            value={listUser.includes(id)}
-            onValueChange={onValueChange(id)}
-            style={styles.checkbox}
-          />
-          <View style={styles.paddingLeft16}>
-            {avatar ? (
-              <Image source={{ uri: avatar }} style={styles.avatar} />
-            ) : (
-              <CircleView size={40} backgroundColor={circleColor} center>
-                <Text color={Colors.White}>{firstWordsInName}</Text>
-              </CircleView>
-            )}
-          </View>
-          <View style={styles.paddingLeft16}>
-            <Text style={styles.titleName}>{name}</Text>
-            {email ? (
-              <Text style={styles.status}>{email}</Text>
-            ) : (
-              <Text style={styles.invalid}>{t('no_email')}</Text>
-            )}
-          </View>
-          <View style={styles.endFlex}>
-            <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
-          </View>
-        </View>
-      </View>
-    );
-  });
-
   return (
-    <View style={styles.wrap}>
-      <HeaderCustom isShowClose onClose={goBack} title={t('email_to')} />
-      <FlatList
-        data={members}
-        renderItem={({ item, index }) => (
-          <RowMember member={item} index={index} onValueChange={onChecked} />
-        )}
-        keyExtractor={(item) => item.id.toString()}
-        ListEmptyComponent={
-          <View style={styles.viewEmpty}>
-            <Text style={styles.textCenter}>{t('no_member')}</Text>
-          </View>
-        }
-      />
-      <View style={styles.container}>
-        <BottomButtonView
-          style={styles.bottomButtonView}
-          mainTitle={t('done')}
-          onPressMain={onNext}
-          typeMain={canSave ? 'primary' : 'disabled'}
-        />
-      </View>
-    </View>
+    <ReceiverSelect
+      listUser={listUser}
+      unitId={unitId}
+      title={t('notify_to')}
+      setListUser={setListUser}
+      onLoadOption={onLoadOption}
+      onNext={onNext}
+    />
   );
 };
 

package/src/screens/Automate/AddNewAction/SetupScriptReceiverNotify.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import ReceiverSelect from './ReceiverSelect';
+import moment from 'moment';
+
+const SetupScriptReceiverNotify = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { automate = {}, unitId, formData } = route.params;
+  const { id: automateId } = automate;
+  const [listUser, setListUser] = useState([]);
+
+  const onNext = useCallback(async () => {
+    formData.receiver = listUser;
+    const { success } = await axiosPost(
+      API.AUTOMATE.ADD_SCRIPT_NOTIFY(automateId),
+      formData
+    );
+    if (success) {
+      ToastBottomHelper.success(t('text_done'));
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+    } else {
+      ToastBottomHelper.error(t('error_please_try_later'));
+    }
+  }, [automateId, formData, listUser, navigate, t]);
+
+  const onLoadOption = useCallback(
+    (item) => {
+      return {
+        label: item.phone_number,
+        invalidLabel: t('no_phone_number'),
+      };
+    },
+    [t]
+  );
+
+  return (
+    <ReceiverSelect
+      listUser={listUser}
+      unitId={unitId}
+      title={t('notify_to')}
+      setListUser={setListUser}
+      onLoadOption={onLoadOption}
+      onNext={onNext}
+    />
+  );
+};
+
+export default SetupScriptReceiverNotify;