@eohjsc/react-native-smart-city 0.7.14 → 0.7.16

package/src/screens/Automate/AddNewAction/__test__/SetupScriptReceiverSms.test.js

@@ -0,0 +1,105 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import API from '../../../../configs/API';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import SetupScriptReceiverSms from '../SetupScriptReceiverSms';
+import CheckBox from '@react-native-community/checkbox';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SetupScriptReceiverSms route={route} />
+  </SCProvider>
+);
+
+describe('Test SetupScriptReceiverSms', () => {
+  const mockedNavigate = useNavigation().navigate;
+
+  let tree;
+  const route = {
+    params: {
+      unitId: 1,
+      automateId: 1,
+      automate: {
+        id: 1,
+        sensor_id: 1,
+      },
+      closeScreen: Routes.ScriptDetail,
+      formData: { message: 'message' },
+    },
+  };
+
+  const listUser = [
+    {
+      avatar: 'https://xxx',
+      phone_number: '0902xx',
+      id: 140,
+      name: 'User 1',
+    },
+    {
+      avatar: null,
+      phone_number: null,
+      id: 56,
+      name: 'User 2',
+      share_id: 5386,
+    },
+  ];
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    useRoute.mockImplementation(() => route);
+  });
+
+  it('SetupScriptReceiverSms onPress create script sms success', async () => {
+    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, listUser);
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_SMS(1)).reply(200);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const checkboxs = instance.findAllByType(CheckBox);
+    expect(checkboxs).toHaveLength(2);
+    expect(checkboxs[0].props.disabled).toBeFalsy();
+    expect(checkboxs[1].props.disabled).toBeTruthy();
+    await act(async () => {
+      checkboxs[0].props.onValueChange(true);
+    });
+
+    const button = instance.findByType(BottomButtonView);
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(spyToast).toHaveBeenCalled();
+  });
+
+  it('SetupScriptReceiverSms onPress create script email fail', async () => {
+    const spyToast = jest.spyOn(ToastBottomHelper, 'error');
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, listUser);
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_SMS(1)).reply(400);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const checkboxs = instance.findAllByType(CheckBox);
+    expect(checkboxs).toHaveLength(2);
+    expect(checkboxs[0].props.disabled).toBeFalsy();
+    expect(checkboxs[1].props.disabled).toBeTruthy();
+    await act(async () => {
+      checkboxs[0].props.onValueChange(true);
+    });
+
+    const button = instance.findByType(BottomButtonView);
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(spyToast).toHaveBeenCalled();
+  });
+});

package/src/screens/Automate/AddNewAction/__test__/SetupScriptSms.test.js

@@ -0,0 +1,70 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import API from '../../../../configs/API';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import SetupScriptSms from '../SetupScriptSms';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SetupScriptSms route={route} />
+  </SCProvider>
+);
+
+describe('Test SetupScriptSms', () => {
+  const mockedNavigate = useNavigation().navigate;
+
+  let tree;
+  const route = {
+    params: {
+      unitId: 1,
+      automateId: 1,
+      scriptName: 'scriptName test',
+      automate: {
+        id: 1,
+        sensor_id: 1,
+      },
+      closeScreen: Routes.ScriptDetail,
+    },
+  };
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    useRoute.mockImplementation(() => route);
+  });
+
+  it('SetupScriptNotify onPress create script SMS success', async () => {
+    mock.onPost(API.AUTOMATE.ADD_SCRIPT_SMS(1)).reply(200);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const inputs = instance.findAllByType(_TextInput);
+    expect(inputs).toHaveLength(1);
+
+    const touchable = instance.findAllByType(TouchableWithoutFeedback);
+    await act(async () => {
+      touchable[0].props.onPress();
+    });
+    await act(async () => {
+      inputs[0].props.onChange('Message');
+    });
+    const button = instance.findByType(BottomButtonView);
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.SetupScriptReceiverSms, {
+      automate: route.params.automate,
+      unitId: 1,
+      formData: { message: 'Message', unit: 1 },
+    });
+  });
+});

package/src/screens/Automate/EditActionsList/UpdateReceiverSmsScript.js

@@ -0,0 +1,178 @@
+import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
+import { FlatList, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import styles from './Styles/UpdateReceiverEmailScriptStyles.js';
+import { CircleView, HeaderCustom, Text } from '../../../commons/index.js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import BottomButtonView from '../../../commons/BottomButtonView/index.js';
+import { axiosPut, axiosGet } from '../../../utils/Apis/axios.js';
+import { API, Colors } from '../../../configs/index.js';
+import { ToastBottomHelper } from '../../../utils/Utils.js';
+import Routes from '../../../utils/Route/index.js';
+import moment from 'moment';
+import CheckBox from '@react-native-community/checkbox';
+import { useSCContextSelector } from '../../../context';
+import { Image } from 'react-native';
+
+const UpdateReceiverSmsScript = ({ route }) => {
+  const t = useTranslations();
+  const { goBack, navigate } = useNavigation();
+  const { automateId, scriptItemId, formData } = route.params;
+  const [members, setMembers] = useState([]);
+  const [listUser, setListUser] = useState(formData.receiver_ids);
+  const currentUserId = useSCContextSelector(
+    (state) => state.auth.account.user.id
+  );
+
+  const loadMembers = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SHARE.UNITS_MEMBERS(formData.unit_id)
+    );
+    if (success) {
+      setMembers(data);
+    }
+  }, [formData.unit_id]);
+
+  useEffect(() => {
+    loadMembers();
+  }, [loadMembers]);
+
+  const onNext = useCallback(async () => {
+    const { success } = await axiosPut(
+      API.AUTOMATE.UPDATE_SCRIPT_SMS(automateId),
+      {
+        id: scriptItemId,
+        unit: formData.unit_id,
+        message: formData.newMessage,
+        receiver: listUser,
+      }
+    );
+    if (success) {
+      ToastBottomHelper.success(t('update_successfully'));
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+    }
+  }, [
+    automateId,
+    formData.newMessage,
+    formData.unit_id,
+    listUser,
+    navigate,
+    scriptItemId,
+    t,
+  ]);
+
+  const canSave = useMemo(() => {
+    const { newMessage } = formData;
+    return !!newMessage && !!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 RowMember = memo(({ member, index, onValueChange }) => {
+    const { id, name, avatar, share_id, phone_number } = 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={!phone_number}
+            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>
+            {phone_number ? (
+              <Text style={styles.status}>{phone_number}</Text>
+            ) : (
+              <Text style={styles.invalid}>{t('no_phone_number')}</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('sms_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>
+  );
+};
+
+export default UpdateReceiverSmsScript;

package/src/screens/Automate/EditActionsList/UpdateSmsScript.js

@@ -0,0 +1,66 @@
+import React, { useCallback, useState } from 'react';
+import _TextInput from '../../../commons/Form/TextInput';
+import styles from './Styles/indexStyles';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../utils/Route';
+
+const UpdateSmsScript = ({
+  automateId,
+  scriptItemId,
+  sms_script,
+  t,
+  onClosePopup,
+}) => {
+  const { navigate } = useNavigation();
+  const { message, unit_id, str_phone_numbers, receiver_ids } = sms_script;
+  const [formData, setFormData] = useState({
+    newMessage: message,
+    unit_id,
+    str_phone_numbers,
+    receiver_ids,
+  });
+
+  const onPressNext = useCallback(async () => {
+    onClosePopup();
+    navigate(Routes.UpdateReceiverSmsScript, {
+      automateId,
+      scriptItemId,
+      formData,
+    });
+  }, [automateId, formData, navigate, onClosePopup, scriptItemId]);
+
+  const onChangeMessage = (value) => {
+    setFormData((prev) => ({ ...prev, newMessage: value }));
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+      <View>
+        <_TextInput
+          label={t('update_message_email')}
+          placeholder={t('message_notification')}
+          onChange={onChangeMessage}
+          textInputStyle={styles.textMessage}
+          value={formData.newMessage}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
+          multiline={true}
+          maxLength={255}
+        />
+        <View style={styles.wrapBottom}>
+          <BottomButtonView
+            mainTitle={t('next')}
+            onPressMain={onPressNext}
+            typeMain={'primary'}
+            accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
+            disableKeyBoardAnimated
+          />
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default UpdateSmsScript;

package/src/screens/Automate/EditActionsList/__tests__/UpdateReceiverSmsScript.test.js

@@ -0,0 +1,82 @@
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import API from '../../../../configs/API';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import UpdateReceiverSmsScript from '../UpdateReceiverSmsScript';
+import CheckBox from '@react-native-community/checkbox';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const listUser = [
+  {
+    avatar: 'https://xxx',
+    phone_number: '0902xxx',
+    id: 140,
+    name: 'User 1',
+  },
+  {
+    avatar: null,
+    phone_number: null,
+    id: 56,
+    name: 'User 2',
+    share_id: 5386,
+  },
+];
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <UpdateReceiverSmsScript
+      route={{
+        params: {
+          automateId: 1,
+          scriptItemId: 1,
+          automate: {
+            id: 1,
+            sensor_id: 1,
+          },
+          closeScreen: Routes.ScriptDetail,
+          formData: {
+            message: 'Contend',
+            unit_id: 1,
+            str_phone_numbers: '0902xxx',
+            receiver_ids: [],
+          },
+        },
+      }}
+    />
+  </SCProvider>
+);
+
+describe('Test UpdateReceiverSmsScript', () => {
+  let tree;
+
+  it('test update message', async () => {
+    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, listUser);
+    mock.onPut(API.AUTOMATE.UPDATE_SCRIPT_SMS(1)).reply(200);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const checkboxs = instance.findAllByType(CheckBox);
+    expect(checkboxs).toHaveLength(2);
+    expect(checkboxs[0].props.disabled).toBeFalsy();
+    expect(checkboxs[1].props.disabled).toBeTruthy();
+    await act(async () => {
+      checkboxs[0].props.onValueChange(true);
+    });
+
+    const button = instance.findByType(BottomButtonView);
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(spyToast).toHaveBeenCalled();
+  });
+});

package/src/screens/Automate/EditActionsList/__tests__/UpdateSmsScript.test.js

@@ -0,0 +1,71 @@
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import API from '../../../../configs/API';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import api from '../../../../utils/Apis/axios';
+import UpdateSmsScript from '../UpdateSmsScript';
+import Routes from '../../../../utils/Route';
+
+const mock = new MockAdapter(api.axiosInstance);
+const mockerOnClosePopup = jest.fn();
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <UpdateSmsScript
+      automateId={1}
+      scriptItemId={1}
+      sms_script={{
+        message: 'Contend',
+        unit_id: 60,
+        str_phone_numbers: '0902xxx',
+      }}
+      t={jest.fn()}
+      onClosePopup={mockerOnClosePopup}
+    />
+  </SCProvider>
+);
+
+describe('Test UpdateSmsScript', () => {
+  let tree;
+
+  it('test update message', async () => {
+    mock.onPut(API.AUTOMATE.UPDATE_SCRIPT_SMS(1)).reply(200);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const message = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY && el.type === _TextInput
+    );
+    await act(async () => {
+      message.props.onChange('2');
+    });
+    const button = instance.findByType(BottomButtonView);
+    expect(button.props.typeMain).toEqual('primary');
+    await act(async () => {
+      button.props.onPressMain();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.UpdateReceiverSmsScript,
+      {
+        automateId: 1,
+        formData: {
+          newMessage: '2',
+          str_phone_numbers: '0902xxx',
+          unit_id: 60,
+        },
+        scriptItemId: 1,
+      }
+    );
+  });
+});

package/src/screens/Automate/EditActionsList/index.js

@@ -9,6 +9,7 @@ import Close from '../../../../assets/images/Close.svg';
 import Delay from '../../../../assets/images/Delay.svg';
 import Notify from '../../../../assets/images/Notify.svg';
 import Email from '../../../../assets/images/Email.svg';
+import Sms from '../../../../assets/images/Sms.svg';
 import Rearrange from '../../../../assets/images/Rearrange.svg';
 import { FullLoading } from '../../../commons';
 import FImage from '../../../commons/FImage';
@@ -25,6 +26,7 @@ import styles from './Styles/indexStyles';
 import UpdateDelayScript from './UpdateDelayScript';
 import UpdateNotifyScript from './UpdateNotifyScript';
 import UpdateEmailScript from './UpdateEmailScript';
+import UpdateSmsScript from './UpdateSmsScript';
 
 const EditActionsList = () => {
   const t = useTranslations();
@@ -140,7 +142,13 @@ const EditActionsList = () => {
     ({ item, getIndex, drag, isActive }) => {
       const index = getIndex();
       const paddedIndex = (index + 1).toString().padStart(2, '0');
-      const { action_script, notify_script, delay_script, email_script } = item;
+      const {
+        action_script,
+        notify_script,
+        delay_script,
+        email_script,
+        sms_script,
+      } = item;
       if (action_script) {
         const {
           sensor_icon_kit,
@@ -272,6 +280,34 @@ const EditActionsList = () => {
           />
         );
       }
+      if (sms_script) {
+        const { message, str_phone_numbers } = sms_script;
+
+        return (
+          <CommonItem
+            paddedIndex={paddedIndex}
+            icon={
+              <View style={styles.iconItem}>
+                <Sms />
+              </View>
+            }
+            content={
+              <>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {message}
+                </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {str_phone_numbers}
+                </Text>
+              </>
+            }
+            onPress={() => onPressRemove(item)}
+            onPressUpdate={() => onShowPopupUpdate(item, index)}
+            isActive={isActive}
+            drag={drag}
+          />
+        );
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [needRefresh]
@@ -283,6 +319,7 @@ const EditActionsList = () => {
       notify_script,
       delay_script,
       email_script,
+      sms_script,
       id: scriptItemId,
     } = scriptItem;
 
@@ -343,6 +380,18 @@ const EditActionsList = () => {
         />
       );
     }
+    if (sms_script) {
+      return (
+        <UpdateSmsScript
+          unitId={unitId}
+          automateId={id}
+          scriptItemId={scriptItemId}
+          sms_script={sms_script}
+          t={t}
+          onClosePopup={onClosePopup}
+        />
+      );
+    }
   }, [actionsList, id, navigate, scriptItem, t, unitId, updateIndex]);
 
   const onDragEnd = useCallback(