@eohjsc/react-native-smart-city 0.2.86 → 0.2.87

package/src/screens/SmartIr/components/SelectBrand.js

@@ -0,0 +1,61 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { HeaderCustom } from '../../../commons/Header';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
+import { RowItem } from '../../../commons/RowItem';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Colors } from '../../../configs';
+
+import styles from './SelectBrandStyles';
+
+const SelectDeviceType = memo(({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const tempBrand = [
+    { id: 1, name: 'Samsung' },
+    { id: 2, name: 'LG' },
+    { id: 3, name: 'Apple' },
+  ];
+  const [deviceBrand] = useState(tempBrand);
+
+  const handleOnPressItem = useCallback(
+    (item) => () => {
+      navigate(Routes.SmartIrStack, {
+        screen: Routes.GroupButtonByType,
+        params: {
+          device_type: item || {},
+          brand: item || {},
+        },
+      });
+    },
+    [navigate]
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('select_brand')} />
+      <ScrollView>
+        <View style={styles.listBrands}>
+          {!!deviceBrand &&
+            deviceBrand.map((item, index) => {
+              return (
+                <RowItem
+                  onPress={handleOnPressItem(item)}
+                  text={item?.name}
+                  key={index.toString()}
+                  isShowSubText={false}
+                  rightComponent={
+                    <IconOutline name="right" size={20} color={Colors.Gray7} />
+                  }
+                />
+              );
+            })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});
+
+export default SelectDeviceType;

package/src/screens/SmartIr/components/SelectBrandStyles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  listBrands: {
+    flex: 1,
+    paddingTop: 16,
+    paddingHorizontal: 16,
+  },
+});

package/src/screens/SmartIr/components/SelectDeviceType.js

@@ -0,0 +1,96 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Text from '../../../commons/Text';
+import { HeaderCustom } from '../../../commons/Header';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { AC, DIY, Fan, Fridge, TV, WM } from '../../../Images/SmartIr';
+import Routes from '../../../utils/Route';
+
+import styles from './SelectDeviceTypeStyles';
+
+const SelectDeviceType = memo(() => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const tempDeviceType = [
+    { id: 1, icon: 'tv', name: 'TV' },
+    { id: 2, icon: 'fan', name: 'Fan' },
+    { id: 3, icon: 'ac', name: 'AC' },
+    { id: 4, icon: 'wm', name: 'wm' },
+    { id: 5, icon: 'fridge', name: 'Fridge' },
+    { id: 6, icon: 'diy', name: 'DIY' },
+  ];
+  const [deviceType] = useState(tempDeviceType);
+
+  const handleOnPressItem = useCallback(
+    (item) => () => {
+      navigate(Routes.SmartIrStack, {
+        screen: Routes.SelectBrand,
+        params: {
+          device_type: item || {},
+        },
+      });
+    },
+    [navigate]
+  );
+
+  const IconDevice = ({ icon, width, height }) => {
+    switch (icon) {
+      case 'tv':
+        return <TV width={width} height={height} />;
+      case 'fan':
+        return <Fan width={width} height={height} />;
+      case 'ac':
+        return <AC width={width} height={height} />;
+      case 'wm':
+        return <WM width={width} height={height} />;
+      case 'fridge':
+        return <Fridge width={width} height={height} />;
+      case 'diy':
+        return <DIY width={width} height={height} />;
+      default:
+        return <></>;
+    }
+  };
+  const ItemDevice = useCallback(
+    ({ onPress, buttonStyle, textStyle, wrapStyle, name, icon }) => {
+      return (
+        <TouchableOpacity
+          style={[styles.buttonItem, buttonStyle]}
+          onPress={onPress}
+        >
+          <View style={[styles.wrapItem, wrapStyle]}>
+            {!!icon && <IconDevice width={60} height={60} icon={icon} />}
+            {!!name && (
+              <Text style={[styles.textDevice, textStyle]}> {name} </Text>
+            )}
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('select_device_type')} />
+      <ScrollView>
+        <View style={styles.listDevices}>
+          {!!deviceType &&
+            deviceType.map((item, index) => {
+              return (
+                <ItemDevice
+                  onPress={handleOnPressItem(item)}
+                  name={item?.name}
+                  icon={item?.icon}
+                  key={index.toString()}
+                />
+              );
+            })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});
+
+export default SelectDeviceType;

package/src/screens/SmartIr/components/SelectDeviceTypeStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapItem: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 34,
+    paddingBottom: 60,
+    paddingHorizontal: 52,
+  },
+  listDevices: {
+    paddingTop: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    paddingHorizontal: 16,
+  },
+  buttonItem: {
+    width: Constants.width / 2 - 25,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    marginBottom: 15,
+  },
+});

package/src/screens/SmartIr/index.js

@@ -1,14 +1,19 @@
 import React, { memo, useCallback } from 'react';
-import { View, Alert } from 'react-native';
+import { View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemAddNew from '../../commons/Device/ItemAddNew';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
 import styles from './styles';
 
 const SmartIr = memo(({ item }) => {
   const t = useTranslations();
+  const { navigate } = useNavigation();
   const AddRemoteControl = useCallback(() => {
-    Alert.alert(t('feature_under_development'));
-  }, [t]);
+    navigate(Routes.SmartIrStack, {
+      screen: Routes.SelectDeviceType,
+    });
+  }, [navigate]);
   return (
     <View style={styles.container}>
       <ItemAddNew

package/src/screens/Unit/Detail.js

@@ -82,6 +82,7 @@ const UnitDetail = ({ route }) => {
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [dataFullScreen, setDataFullScreen] = useState();
+  const [serverDown, setServerDown] = useState(false);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
@@ -128,10 +129,13 @@ const UnitDetail = ({ route }) => {
   const fetchDetails = useCallback(async () => {
     getAutomates();
     await fetchWithCache(API.UNIT.UNIT_DETAIL(unitId), {}, (response) => {
-      const { success, data } = response;
+      const { success, data, resp_status } = response;
       if (success) {
+        setServerDown(false);
         prepareData(data);
         setUnit(data);
+      } else if (resp_status >= 500) {
+        setServerDown(true);
       }
     });
   }, [setUnit, unitId, prepareData, getAutomates]);
@@ -311,7 +315,7 @@ const UnitDetail = ({ route }) => {
           isOwner={isOwner}
           favorites={favorites}
           wrapItemStyle={styles.wrapItemStyle}
-          isNetworkConnected={isNetworkConnected}
+          isNetworkConnected={isNetworkConnected && !serverDown}
           isGGHomeConnected={isGGHomeConnected}
         />
       );
@@ -338,7 +342,7 @@ const UnitDetail = ({ route }) => {
         <ShortDetailSubUnit
           unit={unit}
           station={station}
-          isNetworkConnected={isNetworkConnected}
+          isNetworkConnected={isNetworkConnected && !serverDown}
           isGGHomeConnected={isGGHomeConnected}
         />
       );

package/src/screens/Unit/components/MyUnitDevice/index.js

@@ -16,10 +16,8 @@ const MyUnitDevice = ({ sensor, unit }) => {
     navigate(Routes.UnitStack, {
       screen: Routes.DeviceDetail,
       params: {
-        unit,
-        sensor,
-        title: sensor?.name,
-        station: sensor?.station,
+        unitData: unit,
+        sensorData: sensor,
       },
     });
   }, [navigate, sensor, unit]);

package/src/screens/Unit/components/__test__/MyUnitDevice.test.js

@@ -1,33 +1,62 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import MyUnitDevice from '../MyUnitDevice';
 
-const wrapComponent = (sensor) => (
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
-    <MyUnitDevice sensor={sensor} />
+    <MyUnitDevice {...props} />
   </SCProvider>
 );
 
 describe('Test MyUnitDevice', () => {
-  let tree;
+  let tree, props;
+
+  beforeEach(() => {
+    props = {
+      sensor: {
+        status: 'Ok',
+        name: 'Test',
+        station_name: '',
+      },
+      unit: {
+        id: 1,
+      },
+    };
+  });
 
   it('Test render with status', async () => {
-    await act(() => {
-      tree = create(
-        wrapComponent({ status: 'Ok', name: 'Test', station_name: '' })
-      );
+    await act(async () => {
+      tree = await create(wrapComponent(props));
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
     expect(Views).toHaveLength(10);
+
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(1);
+    await act(async () => {
+      await touches[0].props.onPress();
+    });
+    expect(mockNavigate).toHaveBeenCalled();
   });
 
   it('Test render without status', async () => {
+    props.sensor.status = undefined;
     await act(() => {
-      tree = create(wrapComponent({ name: 'Test', station_name: '' }));
+      tree = create(wrapComponent(props));
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);

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

@@ -333,6 +333,11 @@
   "text_remove_sub_unit_fail": "Remove sub unit fail!",
   "camera": "Camera",
   "favorites": "Favorites",
+  "select_device_type": "Select device type",
+  "select_brand": "Select a brand",
+  "make_sure_3_button_available": "Please try to make sure more than 3 buttons is available",
+  "select_this_one": "Select this one",
+  "next_one": "Next one",
   "add_to_favorites": "Add to Favorites",
   "add_favorite": "Add Favorite",
   "remove_from_favorites": "Remove from Favorites",
@@ -358,6 +363,7 @@
   "suggestions": "Suggestions",
   "check_the_power": "Check the power on your device.",
   "check_the_wifi": "Check the Wi-Fi/Cellular signal or try to reset it.",
+  "check_the_ble": "Check your Bluetooth status and try use QUICK ACTION to control.",
   "disconnected": "Disconnected",
   "ggHomeDisconnected": "Google Home is disconnected",
   "rename_sub_unit": "Rename sub-unit",
@@ -682,6 +688,7 @@
   "text_notification_content_smoke": "Smoke appears in **%{unit_name}**. Please check your home and call the rescue team if there is a fire.",
   "text_notification_content_fire": "There is a fire at **%{unit_name}**, Please move out of the house immediately and call the rescue team.",
   "text_notification_content_active_sos": "SOS button is activating at **%{unit_name}**, Please check it NOW.",
+  "text_notification_content_replace_water_filter": "Filter **%{number_coil}** of **%{device_name}** in **%{unit_name}**: **%{sub_unit_name}** has less than 10h remaining. Check and replace now.",
   "text_notification_content_remove_unit_to_owner": "Unit **%{unit_name}** has been removed successfully.",
   "text_notification_content_remove_unit_to_member": "Unit **%{unit_name}** has been removed by **%{unit_owner_name}**. You cannot access to this unit anymore.",
   "text_notification_content_remove_member": "You were remove from **%{unit_name}** by **%{unit_owner_name}**. You cannot access to this unit anymore.",
@@ -922,5 +929,21 @@
   "lock": "LOCK",
   "unlock": "UNLOCK",
   "door_is_open": "Door is open | unlocked",
-  "door_is_close": "Door is close | locked"
+  "door_is_close": "Door is close | locked",
+  "setup_generate_passcode": "Setup generate passcode",
+  "choose_user": "Choose user",
+  "auto_lock": "Auto Lock",
+  "your_door_will_lock": "Your door will lock as soon as it is closed. If it hasn’t been opened, it will re-lock shortly after it’s unlocked.",
+  "auto_lock_enabled": "Auto-Lock Enabled",
+  "auto_lock_when": "Auto-Lock When",
+  "instant":"Instant",
+  "re_lock_timing": "Re-lock Timing",
+  "re_lock_will_lock": "Re-lock will lock your door if it has been unlocked, but not opened within specified time.",
+  "code": "Code",
+  "user": "User",
+  "create_time": "Create time",
+  "status": "Status",
+  "delete_passcode": "Delete Passcode",
+  "passcode_list": "Passcode list",
+  "search": "Search"
 }

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

@@ -347,6 +347,11 @@
   "choose_on_map": "Chọn trên bản đồ",
   "plan_and_zoom_to_adjust": "Di chuyển và phóng to để điều chỉnh",
   "add_remote_control": "Thêm điều khiển từ xa",
+  "select_device_type": "Chọn loại thiết bị",
+  "select_brand": "Chọn một thương hiệu",
+  "make_sure_3_button_available": "Hãy cố gắng đảm bảo có nhiều hơn 3 nút",
+  "select_this_one": "Chọn cái này",
+  "next_one": "Tiếp theo",
   "manage_sub_unit": "Quản lý khu vực",
   "remove_sub_unit": "Xóa khu vực",
   "text_ble_is_powered_on": "Bluetooth đã được mở",
@@ -397,6 +402,7 @@
   "suggestions": "Gợi ý",
   "check_the_power": "Kiểm tra lại nguồn điện của thiết bị.",
   "check_the_wifi": "Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.",
+  "check_the_ble": "Kiểm tra trạng thái Bluetooth của bạn và thử sử dụng HÀNH ĐỘNG NHANH để điều khiển",
   "disconnected": "Ngắt kết nối",
   "ggHomeDisconnected": "Google Home bị ngắt kết nối",
   "rename_sub_unit": "Đổi tên khu vực",
@@ -690,6 +696,7 @@
   "text_notification_content_smoke": "Xuất hiện khói tại **%{unit_name}**. Vui lòng kiểm tra nhà của bạn và gọi cho đội cứu hộ nếu xảy ra hỏa hoạn.",
   "text_notification_content_fire": "Có đám cháy tại **%{unit_name}**, Vui lòng di chuyển ra khỏi nhà ngay lập tức và gọi cho đội cứu hộ.",
   "text_notification_content_active_sos": "Nút SOS đang kích hoạt tại **%{unit_name}**. Vui lòng kiểm tra nó NGAY BÂY GIỜ.",
+  "text_notification_content_replace_water_filter": "Lõi lọc **%{number_coil}** của **%{device_name}** thuộc **%{unit_name}**: **%{sub_unit_name}** còn ít hơn 10 giờ lọc. Vui lòng kiểm tra và thay lõi lọc mới.",
   "text_notification_content_remove_unit_to_owner": "Địa điểm **%{unit_name}** vừa được xoá thành công.",
   "text_notification_content_remove_unit_to_member": "Địa điểm **%{unit_name}** vừa được xoá bởi **%{unit_owner_name}**. Bạn không thể truy cập vào địa điểm này được nữa.",
   "text_notification_content_remove_member": "Bạn vừa được xoá khỏi **%{unit_name}** bởi **%{unit_owner_name}**. Bạn không thể truy cập vào địa điểm này được nữa.",
@@ -924,5 +931,21 @@
   "lock": "KHÓA",
   "unlock": "MỞ KHÓA",
   "door_is_open": "Cửa mở | mở khóa",
-  "door_is_close": "Cửa đóng | bị khóa"
+  "door_is_close": "Cửa đóng | bị khóa",
+  "setup_generate_passcode": "Thiết lập tạo mật mã",
+  "choose_user": "Chọn người dùng",
+  "auto_lock": "khóa tự động",
+  "your_door_will_lock": "Cửa của bạn sẽ khóa ngay sau khi nó được đóng lại.Nếu nó chưa được mở,nó sẽ khóa lại ngay sau khi được mở khóa.",
+  "auto_lock_enabled": "Tự động khóa được bật",
+  "auto_lock_when": "Tự động khóa khi",
+  "instant":"Ngay lập tức",
+  "re_lock_timing": "Thời gian khóa lại",
+  "re_lock_will_lock": "Re-lock sẽ khóa cửa của bạn nếu nó đã được mở khóa, nhưng không được mở trong thời gian quy định.",
+  "code": "Mã số",
+  "user": "Người dùng",
+  "create_time": "Thời gian tạo",
+  "status": "Trạng thái",
+  "delete_passcode": "Xóa mật mã",
+  "passcode_list": "Danh sách mật mã",
+  "search": "Tìm kiếm"
 }

package/src/utils/Route/index.js

@@ -15,6 +15,7 @@ const Routes = {
   AddMemberStack: 'AddMemberStack',
   AddUnitStack: 'AddUnitStack',
   AddGatewayStack: 'AddGatewayStack',
+  SmartIrStack: 'SmartIrStack',
   EditSubUnit: 'EditSubUnit',
   Language: 'Language',
   MyAllUnit: 'MyAllUnit',
@@ -129,7 +130,14 @@ const Routes = {
   ConfirmUnitDeletion: 'ConfirmUnitDeletion',
   SmartAccount: 'SmartAccount',
   SmartHomeDashboard: 'SmartHomeDashboard',
-  SmartIrSelectDeviceType: 'SmartIrSelectDeviceType',
+  SetupGeneratePasscode: 'SetupGeneratePasscode',
+  SelectDeviceType: 'SelectDeviceType',
+  SelectBrand: 'SelectBrand',
+  GroupButtonByType: 'GroupButtonByType',
+  AutoLock: 'AutoLock',
+  SmartLockStack: 'SmartLockStack',
+  PasscodeList: 'PasscodeList',
+  ItemPasscode: 'ItemPasscode',
 };
 
 export default Routes;