@eohjsc/react-native-smart-city 0.7.20 → 0.7.21

package/src/screens/Automate/SetSchedule/AddEditConditionSchedule.js

@@ -0,0 +1,173 @@
+import { useNavigation } from '@react-navigation/native';
+import moment from 'moment';
+import React, { memo, useCallback, useState } from 'react';
+import { ScrollView } from 'react-native';
+import Calendar from '../../../commons/Calendar';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import { useBoolean } from '../../../hooks/Common';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
+import NewActionWrapper from '../AddNewAction/NewActionWrapper';
+import RepeatOptionsPopup, {
+  REPEAT_OPTIONS,
+} from './components/RepeatOptionsPopup';
+import RowItem from './components/RowItem';
+import SelectWeekday from './components/SelectWeekday';
+import styles from './styles/indexStyles';
+import { axiosPost, axiosPut } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
+
+const getDateString = (date, t) => {
+  //Move outside component to prevent re-creation on every render.
+  const today = moment();
+  if (date.isSame(today, 'day')) {
+    return date.format(`[${t('today')}], D MMMM YYYY `);
+  }
+  return date.format('ddd, D MMMM YYYY');
+};
+
+const AddEditConditionSchedule = ({ route }) => {
+  const t = useTranslations();
+  const { automate, condition = {}, isUpdateCondition } = route.params;
+  const { navigate } = useNavigation();
+  const [repeat, setRepeat] = useState(
+    condition.repeat ? condition.repeat : REPEAT_OPTIONS.ONCE
+  );
+  const [time, setTime] = useState(
+    condition.time_repeat
+      ? moment(condition.time_repeat, 'HH:mm:ss')
+      : moment().second(0)
+  );
+  const [date, setDate] = useState(
+    condition.date_repeat
+      ? moment(condition.date_repeat, 'YYYY-MM-DD')
+      : moment()
+  );
+  const [weekday, setWeekday] = useState(
+    condition.weekday_repeat ? condition.weekday_repeat : []
+  );
+
+  const [showRepeatOptions, setShowRepeatOptions, setHideRepeatOptions] =
+    useBoolean();
+  const [showTimePicker, setShowTimePicker, setHideTimePicker] = useBoolean();
+  const [showCalendar, setShowCalendar, setHideCalendar] = useBoolean();
+
+  const handleOnSave = useCallback(async () => {
+    const data = {
+      type: AUTOMATE_TYPE.SCHEDULE,
+      repeat,
+      time_repeat: time.format('HH:mm:ss'),
+      date_repeat:
+        repeat === REPEAT_OPTIONS.ONCE ? date.format('YYYY-MM-DD') : null,
+      weekday_repeat: repeat === REPEAT_OPTIONS.EVERYWEEK ? weekday : null,
+    };
+
+    let response;
+    if (isUpdateCondition) {
+      response = await axiosPut(
+        API.AUTOMATE.UPDATE_CONDITION(automate.id, condition.id),
+        data
+      );
+    } else {
+      response = await axiosPost(API.AUTOMATE.ADD_CONDITION(automate.id), data);
+    }
+    const { success } = response;
+    if (success) {
+      navigate({
+        name: Routes.ScriptDetail,
+        params: { preAutomate: automate },
+      });
+    }
+  }, [
+    repeat,
+    time,
+    date,
+    weekday,
+    isUpdateCondition,
+    automate,
+    condition.id,
+    navigate,
+  ]);
+
+  const onSetRepeatOption = useCallback(
+    (value) => {
+      setRepeat(value);
+      setHideRepeatOptions();
+    },
+    [setRepeat, setHideRepeatOptions]
+  );
+
+  const onTimePicked = useCallback(
+    (timeData) => {
+      setTime(moment(timeData));
+    },
+    [setTime]
+  );
+
+  const onDatePicked = useCallback(
+    (datePicked) => {
+      setDate(datePicked);
+    },
+    [setDate]
+  );
+
+  return (
+    <NewActionWrapper
+      name={t('set_schedule')}
+      onNext={handleOnSave}
+      canNext={true}
+      nextTitle={t('save')}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scollView}
+        scrollIndicatorInsets={{ right: 1 }}
+      >
+        <RowItem
+          title={t('set_time')}
+          value={time.format('HH:mm')}
+          icon="clock-circle"
+          onPress={setShowTimePicker}
+        />
+        {repeat === REPEAT_OPTIONS.ONCE && (
+          <RowItem
+            title={t('select_date')}
+            value={getDateString(date, t)}
+            icon="calendar"
+            onPress={setShowCalendar}
+          />
+        )}
+        {repeat === REPEAT_OPTIONS.EVERYWEEK && (
+          <SelectWeekday weekday={weekday} setWeekday={setWeekday} />
+        )}
+        <RowItem
+          title={t('repeat')}
+          value={t(`${repeat}`)}
+          arrow
+          onPress={setShowRepeatOptions}
+        />
+      </ScrollView>
+      <RepeatOptionsPopup
+        isVisible={showRepeatOptions}
+        onHide={setHideRepeatOptions}
+        onSetRepeat={onSetRepeatOption}
+      />
+      <WheelDateTimePicker
+        mode="time"
+        isVisible={showTimePicker}
+        defaultValue={time.valueOf()}
+        onCancel={setHideTimePicker}
+        onPicked={onTimePicked}
+      />
+      <Calendar
+        isVisible={showCalendar}
+        defaultDate={date}
+        minDate={moment()}
+        onCancel={setHideCalendar}
+        onConfirm={onDatePicked}
+      />
+    </NewActionWrapper>
+  );
+};
+
+export default memo(AddEditConditionSchedule);

package/src/screens/Automate/SetSchedule/__test__/AddEditConditionSchedule.test.js

@@ -0,0 +1,211 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import moment from 'moment';
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import Calendar from '../../../../commons/Calendar';
+import WheelDateTimePicker from '../../../../commons/WheelDateTimePicker';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Routes from '../../../../utils/Route';
+import RepeatOptionsPopup, {
+  REPEAT_OPTIONS,
+} from '../components/RepeatOptionsPopup';
+
+import RowItem from '../components/RowItem';
+import SelectWeekday from '../components/SelectWeekday';
+import AddEditConditionSchedule from '../AddEditConditionSchedule';
+import { AUTOMATE_TYPE } from '../../../../configs/Constants';
+import NewActionWrapper from '../../AddNewAction/NewActionWrapper';
+import { API } from '../../../../configs';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../../utils/Apis/axios';
+
+const wrapComponent = (route) => {
+  useRoute.mockReturnValue(route);
+  return (
+    <SCProvider initState={mockSCStore({})}>
+      <AddEditConditionSchedule route={route} />
+    </SCProvider>
+  );
+};
+
+const mock = new MockAdapter(api.axiosInstance);
+
+describe('Test AddEditConditionSchedule', () => {
+  let tree;
+  let route = {
+    params: {
+      automate: { type: 'schedule', unit: 1, id: 1 },
+      condition: {
+        id: 1,
+        type: AUTOMATE_TYPE.SCHEDULE,
+        repeat: 'once',
+        time_repeat: '19:00:00',
+        date_repeat: '2025-01-01',
+        weekday_repeat: [],
+      },
+      isUpdateCondition: true,
+      closeScreen: 'ScriptDetail',
+    },
+  };
+
+  const mockedNavigate = useNavigation().navigate;
+
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    Date.now = jest.fn(() => new Date('2025-01-01T19:00:00.000Z'));
+  });
+
+  it('test render SetSchedule', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const rowItems = instance.findAllByType(RowItem);
+    const timePicker = instance.findByType(WheelDateTimePicker);
+    const popup = instance.findByType(RepeatOptionsPopup);
+    const calendar = instance.findByType(Calendar);
+    const header = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.ICON_CLOSE,
+    });
+
+    await act(async () => {
+      await rowItems[0].props.onPress();
+    });
+    expect(timePicker.props.isVisible).toBeTruthy();
+
+    await act(async () => {
+      await rowItems[2].props.onPress();
+    });
+    expect(popup.props.isVisible).toBeTruthy();
+
+    await act(async () => {
+      await rowItems[1].props.onPress();
+    });
+    expect(calendar.props.isVisible).toBeTruthy();
+
+    await act(async () => {
+      await header.props.onPress();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith('ScriptDetail', {
+      automate: { id: 1, type: 'schedule', unit: 1 },
+      closeScreen: 'ScriptDetail',
+      condition: {
+        id: 1,
+        repeat: 'once',
+        time_repeat: '19:00:00',
+        date_repeat: '2025-01-01',
+        type: 'schedule',
+        weekday_repeat: [],
+      },
+      isUpdateCondition: true,
+    });
+  });
+
+  it('test repeat options popup', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const popup = instance.findByType(RepeatOptionsPopup);
+    let rowItems = instance.findAllByType(RowItem);
+    expect(rowItems).toHaveLength(3);
+
+    await act(async () => {
+      await popup.props.onSetRepeat(REPEAT_OPTIONS.EVERYDAY);
+    });
+    rowItems = instance.findAllByType(RowItem);
+    expect(rowItems).toHaveLength(2);
+
+    await act(async () => {
+      await popup.props.onSetRepeat(REPEAT_OPTIONS.EVERYWEEK);
+    });
+    const selectWeekday = instance.findByType(SelectWeekday);
+    rowItems = instance.findAllByType(RowItem);
+    expect(rowItems).toHaveLength(2);
+    expect(selectWeekday).toBeDefined();
+  });
+
+  it('test pick date and time', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const timePicker = instance.findByType(WheelDateTimePicker);
+    const calendar = instance.findByType(Calendar);
+    const rowItems = instance.findAllByType(RowItem);
+
+    const time = moment();
+    const date = moment();
+    expect(rowItems[0].props.value).toBe('19:00');
+    expect(rowItems[1].props.value).toBe(date.format('[Today], D MMMM YYYY '));
+
+    time.hour(10).minute(30);
+    date.add(1, 'days');
+    await act(async () => {
+      await timePicker.props.onPicked(time);
+      await calendar.props.onConfirm(date);
+    });
+    expect(rowItems[0].props.value).toBe(time.format('HH:mm'));
+    expect(rowItems[1].props.value).toBe(date.format('ddd, D MMMM YYYY'));
+  });
+
+  it('test save isUpdateCondition', async () => {
+    mock.onPut(API.AUTOMATE.UPDATE_CONDITION(1, 1)).reply(200);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.findByType(NewActionWrapper);
+
+    await act(async () => {
+      await button.props.onNext();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith({
+      name: 'ScriptDetail',
+      params: { preAutomate: { id: 1, type: 'schedule', unit: 1 } },
+    });
+  });
+
+  it('test call api isUpdateCondition fail', async () => {
+    mock.onPut(API.AUTOMATE.UPDATE_CONDITION(1, 1)).reply(400);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const popup = instance.findByType(RepeatOptionsPopup);
+
+    await act(async () => {
+      await popup.props.onSetRepeat(REPEAT_OPTIONS.EVERYWEEK);
+    });
+    const button = instance.findByType(NewActionWrapper);
+
+    await act(async () => {
+      await button.props.onNext();
+    });
+    expect(global.mockedNavigate).toBeDefined();
+  });
+
+  it('test save isAddCondition', async () => {
+    // route.params.condition = {};
+    route.params = {
+      automate: { id: 1 },
+      closeScreen: Routes.ScriptDetail,
+    };
+    mock.onPost(API.AUTOMATE.ADD_CONDITION(1)).reply(200);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.findByType(NewActionWrapper);
+
+    await act(async () => {
+      await button.props.onNext();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith({
+      name: 'ScriptDetail',
+      params: { preAutomate: { id: 1 } },
+    });
+  });
+});

package/src/utils/I18n/translations/en.js

@@ -499,6 +499,8 @@ export default {
   west: 'West',
   condition: 'Condition',
   no_condition: 'No condition',
+  available_condition: 'Available [{number}] condition',
+  available_action: 'Available [{number}] action',
   north_east: 'North East',
   south_east: 'South East',
   south_west: 'South West',
@@ -1030,8 +1032,21 @@ export default {
   multi_units_automate: 'Multi-Units Smart',
   tap_to_run: 'Tap to run',
   how_to_start: 'How to start',
+  go_to_unit: 'Go to Unit',
   edit_condition: 'Edit condition',
+  update_condition_success: 'Update condition success',
+  edit_condition_success: 'Edit condition success',
+  delete_condition: 'Delete condition',
+  are_met: 'Are Met (All Condition)',
+  is_met: 'Is Met (Any Condition)',
+  add_condition: 'Add condition',
+  add_condition_success: 'Add condition success',
   device_display: 'Device display',
+  time_frame: 'Time frame',
+  ex_time_frame: 'For example: 8:00 a.m. everyday.',
+  when_value_change: 'When the value of the device changes',
+  ex_when_value_change:
+    'For example: When opening the door, when the sensor value changes, etc.',
   'set_up {name}': 'Setup {name}',
   choose_action: 'Choose action',
   action: 'action',
@@ -1047,8 +1062,11 @@ export default {
   add_script: 'Add Script',
   delete_script: 'Delete Script',
   title_delete_script: 'Delete script "{scriptName}"?',
+  title_delete_condition: 'Delete condition schedule?',
   message_delete_script:
     'Are you sure you want to delete script "{scriptName}"?',
+  message_delete_condition:
+    'Are you sure you want to delete condition schedule?',
   rename_automate: 'Rename automate',
   edit_sub_unit: 'Edit Sub-unit',
   no_sub_unit_yet: 'No sub-unit yet.',
@@ -1072,6 +1090,7 @@ export default {
   smart: 'Smart',
   enable_this_script: 'Enable this script',
   local_control: 'Local control',
+  local_control_update_success: 'Local control update successful',
   choose_gateway: 'Choose gateway',
   this_script_has_been_disabled: 'This script has been disabled',
   disable: 'Disable',
@@ -1501,6 +1520,8 @@ export default {
     'You have reached the maximum number of {length} chips per unit.',
   reach_max_configs_per_unit:
     'You have reached the maximum number of {length} configurations per unit.',
+  reach_max_conditions_per_automation:
+    'You have reached the maximum number of {length} condition per scenario.',
   no_permission_plug_and_play_modbus:
     'You do not have permission to add Modbus devices. Please upgrade your service package at e-ra.io',
   no_permission_plug_and_play_zigbee:

package/src/utils/I18n/translations/vi.js

@@ -491,6 +491,8 @@ export default {
   to: 'đến',
   condition: 'Điều kiện',
   no_condition: 'Không điều kiện',
+  available_condition: 'Số điều khiện còn lại [{number}]',
+  available_action: 'Số hành động còn lại [{number}]',
   shared_unit: 'Khu vực được chia sẻ',
   owner_unit: 'Chủ khu vực',
   sensor_device: 'Thiết bị cảm biến',
@@ -1042,8 +1044,21 @@ export default {
   continue: 'Tiếp tục',
   tap_to_run: 'Nhấn để chạy',
   how_to_start: 'Cách khởi động',
+  go_to_unit: 'Đi đến địa điểm',
   edit_condition: 'Chỉnh sửa điều kiện',
+  update_condition_success: 'Cập nhật điều kiện thành công',
+  edit_condition_success: 'Chỉnh sửa điều kiện thành công',
+  delete_condition: 'Xoá điều kiện',
+  are_met: 'Tất cả điều khiện đều thỏa',
+  is_met: 'Một trong các điều kiện được thỏa',
+  add_condition: 'Thêm điều khiện',
+  add_condition_success: 'Thêm điều khiện thành công',
   device_display: 'Thiết bị hiển thị',
+  time_frame: 'Khung thời gian',
+  ex_time_frame: 'Ví dụ: 8:00 a.m. mỗi ngày.',
+  when_value_change: 'Khi giá trị của thiết bị có thay đổi',
+  ex_when_value_change:
+    'Ví dụ: Khi mở cửa, khi giá trị cảm biến thay đổi, .v.v.',
   'set_up {name}': 'Thiết lập {name}',
   choose_action: 'Lựa chọn hành động',
   action: 'hành động',
@@ -1059,7 +1074,9 @@ export default {
   add_script: 'Thêm Kịch Bản',
   delete_script: 'Xóa kịch bản',
   title_delete_script: 'Xóa kịch bản "{scriptName}"?',
+  title_delete_condition: 'Xoá điều kiện lịch trình?',
   message_delete_script: 'Bạn có chắc chắn muốn xóa kịch bản "{scriptName}"?',
+  message_delete_condition: 'Bạn có chắc chắn muốn xóa điều kiện lịch trình?',
   rename_automate: 'Đổi tên tự động hóa',
   edit_sub_unit: 'Chỉnh sửa khu vực',
   no_sub_unit_yet: 'Chưa có khu vực nào.',
@@ -1082,6 +1099,7 @@ export default {
   smart: 'Thông minh',
   enable_this_script: 'Kích hoạt kịch bản này',
   local_control: 'Điều khiển tại biên',
+  local_control_update_success: 'Cập nhật điều khiển tại biên thành công',
   choose_gateway: 'Chọn gateway',
   this_script_has_been_disabled: 'Kịch bản này đã bị vô hiệu hoá',
   disable: 'Vô hiệu hóa',
@@ -1508,7 +1526,9 @@ export default {
   reach_max_chips_per_unit:
     'Bạn đã đạt đến số lượng tối đa {length} chip cho mỗi địa điểm.',
   reach_max_configs_per_unit:
-    'Bạn đã đạt đến số lượng tối đa {length} thông số cho mỗi địa điểm..',
+    'Bạn đã đạt đến số lượng tối đa {length} thông số cho mỗi địa điểm.',
+  reach_max_conditions_per_automation:
+    'Bạn đã đạt đến số lượng tối đa {length} điều kiện cho mỗi kịch bản.',
   no_permission_plug_and_play_modbus:
     'Bạn không có quyền thêm thiết bị Modbus. Vui lòng nâng cấp gói dịch vụ tại e-ra.io',
   no_permission_plug_and_play_zigbee:

package/src/utils/Route/index.js

@@ -155,6 +155,7 @@ const Routes = {
   EditDevice: 'EditDevice',
   SetSchedule: 'SetSchedule',
   Notification: 'Notification',
+  AddEditConditionSchedule: 'AddEditConditionSchedule',
   PersonalHealthStack: 'PersonalHealthStack',
   ListSmartAccount: 'ListSmartAccount',
   ListDeviceSmartAccount: 'ListDeviceSmartAccount',