@eohjsc/react-native-smart-city 0.2.68 → 0.2.69

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.68",
+  "version": "0.2.69",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -1,22 +1,14 @@
 import React, { memo, useCallback, useState } from 'react';
 import { TouchableOpacity, View, Switch, Image } from 'react-native';
 import { Icon } from '@ant-design/react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './CurtainButtonTemplateStyle';
 import Text from '../Text';
 import { TESTID } from '../../configs/Constants';
 import { Colors, Images } from '../../configs';
-import { Section } from '../../commons/Section';
-import { IconOutline } from '@ant-design/icons-react-native';
-import MenuActionAddSchedule from './hooks/MenuActionAddSchedule';
-import { useBoolean } from '../../hooks/Common';
 
 const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
-  const t = useTranslations();
   const { configuration } = actionGroup;
   const [lock, setLock] = useState(false);
-  const [isShowModal, setShowModal, setHideModal] = useBoolean(false);
-
   const onButtonOpenPress = useCallback(
     () => doAction(configuration.open_action_data),
     [configuration.open_action_data, doAction]
@@ -118,28 +110,6 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
             lock ? Colors.Primary : Colors.Gray6
           )}
       </View>
-      <Section style={styles.section}>
-        <View style={styles.reminderOption}>
-          <Text type="H4" color={Colors.Gray8}>
-            {t('schedule')}
-          </Text>
-          <TouchableOpacity onPress={setShowModal}>
-            <IconOutline name="plus" size={20} />
-          </TouchableOpacity>
-        </View>
-        <View>
-          <TouchableOpacity
-            onPress={setShowModal}
-            style={styles.tapToAddSchedule}
-          >
-            <Text type="Body" color={Colors.Gray6} center>
-              {t('tap_to_add_new_schedule')}
-            </Text>
-          </TouchableOpacity>
-        </View>
-
-        <MenuActionAddSchedule visible={isShowModal} hideModal={setHideModal} />
-      </Section>
     </>
   );
 });

package/src/commons/ActionGroup/CurtainButtonTemplateStyle.js

@@ -29,18 +29,6 @@ export default StyleSheet.create({
     alignItems: 'flex-end',
     paddingLeft: 5,
   },
-  section: {
-    marginHorizontal: 20,
-    borderRadius: 10,
-  },
-  reminderOption: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  tapToAddSchedule: {
-    paddingVertical: 50,
-  },
   buttonActionCurtain: {
     flex: 1,
     aspectRatio: 1,

package/src/commons/ActionGroup/__test__/CurtainButtonTemplate.test.js

@@ -67,6 +67,6 @@ describe('Test CurtainButtonTemplate', () => {
     });
     const instance = wrapper.root;
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(touchableOpacities.length).toEqual(18);
+    expect(touchableOpacities.length).toEqual(3);
   });
 });

package/src/commons/AlertAction/index.js

@@ -22,6 +22,8 @@ const AlertAction = ({
   children,
   testIDPrefix = '',
   animatedStyle,
+  boxLeftButtonStyle,
+  boxRightButtonStyle,
 }) => {
   return (
     <ModalCustom
@@ -54,6 +56,8 @@ const AlertAction = ({
             onRightClick={rightButtonClick}
             styleButtonLeftText={leftButtonStyle}
             styleButtonRightText={rightButtonStyle}
+            styleButtonLeft={boxLeftButtonStyle}
+            styleButtonRight={boxRightButtonStyle}
             testIDPrefix={testIDPrefix}
           />
         </View>
@@ -85,10 +89,8 @@ const styles = StyleSheet.create({
   modalHeader: {
     padding: 16,
     backgroundColor: Colors.White,
-    borderBottomWidth: 1,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
-    borderColor: Colors.Gray4,
   },
   modalHeaderText: {
     fontSize: 16,
@@ -97,7 +99,6 @@ const styles = StyleSheet.create({
   },
   descriptionText: {
     paddingHorizontal: 16,
-    paddingTop: 16,
   },
 });
 

package/src/commons/SubUnit/OneTap/OneTapStyles.js

@@ -33,13 +33,19 @@ export default StyleSheet.create({
     alignItems: 'center',
     paddingBottom: 3,
   },
-  dropDown: {
-    width: 114,
-    height: 40,
+  borderSelection: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 5,
+    paddingLeft: 15,
     borderRadius: 30,
     backgroundColor: Colors.Gray3,
   },
-  boxDropDown: {
+  notShowBorder: {
+    paddingLeft: 15,
+  },
+  boxTextScenarito: {
     justifyContent: 'center',
     flexDirection: 'row',
     alignItems: 'center',
@@ -48,8 +54,11 @@ export default StyleSheet.create({
       android: 6,
     }),
   },
-  textDropDown: {
+  textSelection: {
     color: Colors.Primary,
     marginRight: 10,
   },
+  boxScenario: {
+    flexDirection: 'row',
+  },
 });

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -267,82 +267,19 @@ describe('test Item', () => {
     expect(goDetail).toHaveLength(1);
   });
 
-  test('render click select option filter by automation', async () => {
-    data.isOwner = false;
-    data.type = 'schedule';
-    data.listAutomate = [
-      {
-        text: AUTOMATE_TYPE.SCENARIO,
-        type: AUTOMATE_TYPE.ONE_TAP,
-        data: [
-          {
-            id: 1,
-            user: 6,
-            type: 'one_tap',
-            activate_at: null,
-            script: {
-              name: 'One-tap',
-              icon: '',
-              icon_kit: '',
-            },
-          },
-        ],
-      },
-      {
-        text: AUTOMATE_TYPE.AUTOMATION,
-        type: AUTOMATE_TYPE.AUTOMATION,
-        data: [
-          {
-            id: 2,
-            user: 6,
-            type: 'schedule',
-            activate_at: null,
-            script: {
-              name: 'Rain',
-              icon: '',
-              icon_kit: '',
-            },
-          },
-        ],
-      },
-    ];
-    const response = {
-      status: 200,
-    };
-
-    await axios.post.mockImplementation(async () => {
-      return response;
-    });
-
+  test('render click select option by automation', async () => {
     await act(async () => {
       tree = await create(wrapComponent(data));
     });
-
     const instance = tree.root;
-    const menuDropDown = instance.find(
+    const touchableOpacity = instance.findAll(
       (el) =>
         el.props.testID === TESTID.SUB_UNIT_SELECT_AUTOMATE_TYPE &&
         el.type === TouchableOpacity
     );
-    await act(async () => {
-      await menuDropDown.props.onPress();
+    act(() => {
+      touchableOpacity[0].props.onPress();
     });
-
-    const menu = instance.find(
-      (el) => el.props.testID === TESTID.NAVBAR_MENU_ACTION_MORE
-    );
-
-    expect(menu.props.isVisible).toBeTruthy();
-
-    const automation = menu.props.listMenuItem[1];
-
-    await act(async () => {
-      await menu.props.onItemClick(automation, 1);
-    });
-
-    const text = instance.find(
-      (el) => el.props.testID === TESTID.SUB_UNIT_TEXT_DROPDOWN
-    );
-    expect(text.props.children).toEqual(AUTOMATE_TYPE.AUTOMATION);
+    expect(touchableOpacity).toHaveLength(1);
   });
 });

package/src/commons/SubUnit/OneTap/index.js

@@ -1,16 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { Icon } from '@ant-design/react-native';
 
-import { MenuActionMore, Section } from '../..';
+import { Section } from '../..';
 import ItemAddNew from '../../Device/ItemAddNew';
 import ItemOneTap from './ItemOneTap';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route/index.js';
 import { AUTOMATE_TYPE, TESTID } from '../../../configs/Constants';
-import { Colors } from '../../../configs/Colors.js';
-import usePopover from '../../../hooks/Common/usePopover.js';
 import Text from '../../Text/index.js';
 
 import styles from './OneTapStyles.js';
@@ -33,11 +30,8 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
         break;
     }
   };
-  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
-    usePopover();
 
   const refMenuAction = useRef();
-  const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
 
   const onItemClick = useCallback((item, index) => {
     setAutomates(item);
@@ -50,23 +44,30 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
 
   return (
     <Section style={styles.noShadow}>
-      <TouchableOpacity
-        style={styles.dropDown}
-        onPress={handleShowMenuAction}
-        ref={refMenuAction}
-        testID={TESTID.SUB_UNIT_SELECT_AUTOMATE_TYPE}
-      >
-        <View style={styles.boxDropDown}>
-          <Text
-            testID={TESTID.SUB_UNIT_TEXT_DROPDOWN}
-            style={styles.textDropDown}
-            semibold
+      <View style={styles.boxScenario}>
+        {listAutomate.map((item, index) => (
+          <TouchableOpacity
+            style={
+              indexAutomate === index
+                ? styles.borderSelection
+                : styles.notShowBorder
+            }
+            onPress={() => onItemClick(item, index)}
+            ref={refMenuAction}
+            testID={TESTID.SUB_UNIT_SELECT_AUTOMATE_TYPE}
           >
-            {automates?.text}
-          </Text>
-          <Icon name={'caret-down'} size={14} style={{ color: Colors.Gray8 }} />
-        </View>
-      </TouchableOpacity>
+            <View style={styles.boxTextScenarito}>
+              <Text
+                testID={TESTID.SUB_UNIT_TEXT_DROPDOWN}
+                style={styles.textSelection}
+                semibold
+              >
+                {item?.text}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </View>
       <View style={styles.boxDevices}>
         {automates?.data &&
           automates.data.map((item) => (
@@ -78,16 +79,6 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
           wrapStyle={wrapItemStyle}
         />
       </View>
-      <MenuActionMore
-        isVisible={showingPopover}
-        hideMore={hidePopover}
-        listMenuItem={listAutomate}
-        childRef={childRef}
-        onItemClick={onItemClick}
-        isTextCenter={false}
-        testID={TESTID.NAVBAR_MENU_ACTION_MORE}
-        wrapStyle={styles.wrapStyle}
-      />
     </Section>
   );
 };

package/src/commons/ViewButtonBottom/index.js

@@ -16,6 +16,8 @@ const ViewButtonBottom = ({
   styleButton,
   styleButtonLeftText,
   styleButtonRightText,
+  styleButtonLeft,
+  styleButtonRight,
   testIDPrefix = '',
 }) => {
   const useTwoButton = leftTitle && rightTitle;
@@ -27,6 +29,7 @@ const ViewButtonBottom = ({
           style={[
             styles.button,
             styleButton,
+            styleButtonLeft,
             useTwoButton && styles.buttonMarginRight,
           ]}
           onPress={onLeftClick}
@@ -48,6 +51,7 @@ const ViewButtonBottom = ({
           style={[
             styles.button,
             styleButton,
+            styleButtonRight,
             useTwoButton && styles.buttonMarginLeft,
           ]}
           onPress={onRightClick}

package/src/screens/SharedUnit/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import { View, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+
 import { axiosGet } from '../../utils/Apis/axios';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-
 import { API } from '../../configs';
 import Text from '../../commons/Text';
 import SharedUnit from '../../commons/Unit/SharedUnit';
@@ -24,7 +24,7 @@ const Shared = () => {
   useTitleHeader(t('text_shared_with_me'));
   const navigation = useNavigation();
   const [tab, setTabActiveState] = useState(0);
-
+  const isFocused = useIsFocused();
   const [sharedUnits, setSharedUnits] = useState([]);
 
   const dataStarred = useMemo(
@@ -73,8 +73,10 @@ const Shared = () => {
   }, [language, forceUpdate]);
 
   useEffect(() => {
-    filterSharedUnits(filter);
-  }, [filterSharedUnits, filter]);
+    if (isFocused) {
+      filterSharedUnits(filter);
+    }
+  }, [filterSharedUnits, filter, isFocused]);
 
   const onRefresh = useCallback(() => {
     filterSharedUnits(filter);

package/src/screens/Sharing/Components/SensorItem.js

@@ -5,11 +5,13 @@ import { Colors } from '../../../configs';
 import styles from './Styles/SensorItemStyles';
 import FImage from '../../../commons/FImage';
 import { TitleCheckBox } from '.';
+import { CheckBoxCustom } from '.';
 
 const SensorItem = ({
   item = {},
   isRenderSeparated,
   onTickedChild,
+  onTickedSensor,
   titleGroup,
   activeItemId,
   setActiveItemId,
@@ -21,21 +23,22 @@ const SensorItem = ({
     actions = [],
     read_configs = [],
     icon_kit = '',
+    isChecked,
   } = item;
-  const [expanded, setExpanded] = useState(activeItemId === id);
   const [dataConfig, setDataConfig] = useState([
     ...actions,
     ...read_configs.map((i) => ({ ...i, isConfig: true })),
   ]);
 
+  const expanded = activeItemId === id;
+
   const onPressItem = () => {
-    setActiveItemId(id);
-    if (activeItemId === id) {
-      setExpanded(!expanded);
+    if (dataConfig.length > 0) {
+      expanded ? setActiveItemId(-1) : setActiveItemId(id);
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     } else {
-      setExpanded(false);
+      handleOnTickedSensor();
     }
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
   };
 
   const handleOnTickedChild = (idGroup, isChecked, childId) => {
@@ -56,6 +59,10 @@ const SensorItem = ({
       );
   };
 
+  const handleOnTickedSensor = () => {
+    onTickedSensor && onTickedSensor(idGroup, id, !isChecked);
+  };
+
   useEffect(() => {
     if (
       Platform.OS === 'android' &&
@@ -97,12 +104,20 @@ const SensorItem = ({
           <Text numberOfLines={1} style={styles.text} onPress={onPressItem}>
             {name}
           </Text>
-          <IconOutline
-            onPress={onPressItem}
-            name={expanded ? 'up' : 'down'}
-            size={20}
-            color={Colors.Gray6}
-          />
+          {dataConfig.length > 0 ? (
+            <IconOutline
+              onPress={onPressItem}
+              name={expanded ? 'up' : 'down'}
+              size={20}
+              color={Colors.Gray6}
+            />
+          ) : (
+            <CheckBoxCustom
+              isChecked={isChecked}
+              onPress={onPressItem}
+              wrapStyle={styles.checkBox}
+            />
+          )}
         </View>
         {expanded && <View style={styles.wrapExpand}>{renderData}</View>}
         {isRenderSeparated && <View style={styles.viewSeparated} />}

package/src/screens/Sharing/Components/Styles/SensorItemStyles.js

@@ -53,4 +53,8 @@ export default StyleSheet.create({
   wrapExpand: {
     marginTop: 10,
   },
+  checkBox: {
+    width: normalize(20),
+    height: normalize(20),
+  },
 });

package/src/screens/Sharing/SelectPermission.js

@@ -38,11 +38,12 @@ const SelectPermission = ({ route }) => {
         ...i,
         isChecked,
       }));
-      for (let sensor in data) {
-        for (let item in data[sensor].sensors) {
-          const itemTemp = data[sensor].sensors[item];
-          data[sensor].sensors[item] = {
+      for (let station in data) {
+        for (let item in data[station].sensors) {
+          const itemTemp = data[station].sensors[item];
+          data[station].sensors[item] = {
             ...itemTemp,
+            isChecked,
             actions: itemTemp.actions.map((i) => ({
               ...i,
               isChecked,
@@ -63,6 +64,7 @@ const SelectPermission = ({ route }) => {
         isChecked,
         sensors: data[index]?.sensors.map((i) => ({
           ...i,
+          isChecked,
           actions: i.actions.map((j) => ({ ...j, isChecked })),
           read_configs: i.read_configs.map((j) => ({ ...j, isChecked })),
         })),
@@ -80,33 +82,38 @@ const SelectPermission = ({ route }) => {
     isReadConfig
   ) => {
     let data = [...dataStationTemp];
-    const indexGroup = data.findIndex((item) => item.id === idGroup);
-    const indexSensor = (data[indexGroup]?.sensors || []).findIndex(
-      (item) => item.id === sensorId
+    const group = data.find((i) => i.id === idGroup);
+    const sensor = group.sensors.find((i) => i.id === sensorId);
+    const child = sensor[`${isReadConfig ? 'read_configs' : 'actions'}`].find(
+      (i) => i.id === childId
     );
-    const indexChild = (data[indexGroup]?.sensors || [])[indexSensor][
-      `${isReadConfig ? 'read_configs' : 'actions'}`
-    ].findIndex((item) => item.id === childId);
-    (data[indexGroup]?.sensors || [])[indexSensor][
-      `${isReadConfig ? 'read_configs' : 'actions'}`
-    ][indexChild] = {
-      ...(data[indexGroup]?.sensors || [])[indexSensor][
-        `${isReadConfig ? 'read_configs' : 'actions'}`
-      ][indexChild],
-      isChecked,
-    };
-    for (let i of data) {
-      if (i.sensors.length) {
-        let isChecked;
-        let arrChecked = [];
-        for (let j of i.sensors) {
-          isChecked = !(
-            j.actions.some((k) => !k.isChecked) ||
-            j.read_configs.some((k) => !k.isChecked)
-          );
-          arrChecked.push(isChecked);
-        }
-        i.isChecked = !arrChecked.some((i) => !i);
+
+    child.isChecked = isChecked;
+    sensor.isChecked = !(
+      sensor.read_configs.some((i) => !i.isChecked) ||
+      sensor.actions.some((i) => !i.isChecked)
+    );
+
+    for (let station of data) {
+      if (station.sensors.length) {
+        station.isChecked = !station.sensors.some((i) => !i.isChecked);
+      }
+    }
+    setIsTickAllDevices(!dataStationTemp.some((i) => !i.isChecked));
+    dataStationTemp = data;
+    setDataStations(data);
+  };
+
+  const onTickedSensor = (idGroup, sensorId, isChecked) => {
+    let data = [...dataStationTemp];
+    const group = data.find((i) => i.id === idGroup);
+    const sensor = group.sensors.find((i) => i.id === sensorId);
+
+    sensor.isChecked = isChecked;
+
+    for (let station of data) {
+      if (station.sensors.length) {
+        station.isChecked = !station.sensors.some((i) => !i.isChecked);
       }
     }
     setIsTickAllDevices(!dataStationTemp.some((i) => !i.isChecked));
@@ -133,6 +140,7 @@ const SelectPermission = ({ route }) => {
               key={i.id}
               isRenderSeparated={index !== sensors.length - 1}
               onTickedChild={onTickedChild}
+              onTickedSensor={onTickedSensor}
               titleGroup={name}
               activeItemId={activeItemId}
               setActiveItemId={setActiveItemId}
@@ -147,8 +155,8 @@ const SelectPermission = ({ route }) => {
   const onPressNext = () => {
     let read_permissions = [],
       control_permissions = [];
-    for (let sensor of dataStationTemp) {
-      for (let item of sensor.sensors) {
+    for (let station of dataStationTemp) {
+      for (let item of station.sensors) {
         let arrIdControlTemp = [],
           arrIdReadTemp = [];
         for (let i of item.actions) {
@@ -161,6 +169,10 @@ const SelectPermission = ({ route }) => {
           control_permissions.push({ id: item.id, values: arrIdControlTemp });
         arrIdReadTemp.length &&
           read_permissions.push({ id: item.id, values: arrIdReadTemp });
+        !arrIdControlTemp.length &&
+          !arrIdReadTemp.length &&
+          item.isChecked &&
+          read_permissions.push({ id: item.id, values: [] });
       }
     }
     if (!read_permissions.length && !control_permissions.length) {

package/src/screens/Sharing/__test__/SelectPermission.test.js

@@ -144,6 +144,7 @@ describe('Test SelectPermission', () => {
           {
             actions: [{ id: 136, isChecked: true, name: 'action 1' }],
             id: 123,
+            isChecked: true,
             name: 'child1',
             read_configs: [{ id: 137, isChecked: true, name: 'config 1' }],
           },
@@ -165,7 +166,7 @@ describe('Test SelectPermission', () => {
     const SensorItemElement = instance.findAllByType(SensorItem);
     expect(SensorItemElement).toHaveLength(1);
     act(() => {
-      SensorItemElement[0].props.onTickedChild(204, 123, 136, true, true);
+      SensorItemElement[0].props.onTickedChild(204, 123, 137, true, true);
     });
     expect(mockSetDataStations).toBeCalled();
   });

package/src/screens/SubUnit/AddSubUnit.js

@@ -24,9 +24,11 @@ import { axiosPost, createFormData } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { TESTID } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
+import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
+  const { dismissKeyboard } = useKeyboardShow();
   const { navigate, goBack } = useNavigation();
   const { unit, addType, isAddUnit, location = '' } = route?.params;
   const [roomName, setRoomName] = useState('');
@@ -126,8 +128,9 @@ const AddSubUnit = ({ route }) => {
   ]);
 
   const onChoosePhoto = useCallback(() => {
+    dismissKeyboard();
     setShowImagePicker(true);
-  }, []);
+  }, [dismissKeyboard]);
 
   useEffect(() => {
     if (imageUrl) {

package/src/screens/Unit/Detail.js

@@ -122,12 +122,12 @@ const UnitDetail = ({ route }) => {
         if (success) {
           setListAutomate([
             {
-              text: t(AUTOMATE_TYPE.SCENARIO),
+              text: t(AUTOMATE_TYPE.ONE_TAP),
               data: data.filter((item) => item.type === AUTOMATE_TYPE.ONE_TAP),
               type: AUTOMATE_TYPE.ONE_TAP,
             },
             {
-              text: t(AUTOMATE_TYPE.AUTOMATION),
+              text: t(AUTOMATE_TYPE.SCENARIO),
               data: data.filter((item) => item.type !== AUTOMATE_TYPE.ONE_TAP),
               type: AUTOMATE_TYPE.AUTOMATION,
             },

package/src/screens/Unit/SmartAccount.js

@@ -14,9 +14,10 @@ import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { axiosDelete, axiosGet } from '../../utils/Apis/axios';
 import { SmartAccountItem } from './SmartAccountItem';
-import { usePopover } from '../../hooks/Common';
-import { MenuActionMore } from '../../commons';
+import { usePopover, useBoolean } from '../../hooks/Common';
+import { MenuActionMore, AlertAction } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -36,6 +37,9 @@ const ListSmartAccount = ({ route }) => {
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
+  const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
+  const { stateAlertRemove, onShowRemoveAlert, hideAlertAction } =
+    useStateAlertRemove();
 
   useEffect(() => {
     getAllSmartAccounts();
@@ -50,29 +54,31 @@ const ListSmartAccount = ({ route }) => {
     [showPopoverWithRef]
   );
 
-  const deleteSmartAccount = useCallback(async () => {
-    if (!smartAccountRef?.current) {
-      return;
-    }
-    const id = smartAccountRef.current.id;
-    const { success } = await axiosDelete(
-      API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
-    );
-    success && getAllSmartAccounts();
-  }, [getAllSmartAccounts]);
-
   const onItemClick = useCallback(
     (item) => {
       if (!smartAccountRef?.current) {
         return;
       }
       if (item.action === 'remove') {
-        deleteSmartAccount();
+        acquireLockShowing();
+        onShowRemoveAlert(smartAccountRef.current.brand)();
       }
     },
-    [deleteSmartAccount]
+    [acquireLockShowing, onShowRemoveAlert]
   );
 
+  const deleteSmartAccount = useCallback(async () => {
+    hideAlertAction();
+    if (!smartAccountRef?.current) {
+      return;
+    }
+    const id = smartAccountRef.current.id;
+    const { success } = await axiosDelete(
+      API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
+    );
+    success && getAllSmartAccounts();
+  }, [getAllSmartAccounts, hideAlertAction]);
+
   const listMenuItem = useMemo(() => {
     return [{ action: 'remove', text: t('remove_account') }];
   }, [t]);
@@ -88,6 +94,7 @@ const ListSmartAccount = ({ route }) => {
     },
     [navigate, unitId]
   );
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -109,12 +116,26 @@ const ListSmartAccount = ({ route }) => {
             );
           })}
         </View>
+        <AlertAction
+          visible={stateAlertRemove.visible && !lockShowing}
+          hideModal={hideAlertAction}
+          title={stateAlertRemove.title}
+          message={stateAlertRemove.message}
+          leftButtonTitle={stateAlertRemove.leftButton}
+          leftButtonClick={deleteSmartAccount}
+          rightButtonTitle={stateAlertRemove.rightButton}
+          rightButtonClick={hideAlertAction}
+          boxLeftButtonStyle={styles.boxButtonNotSelect}
+          boxRightButtonStyle={styles.boxButtonSelect}
+          rightButtonStyle={styles.textRightButton}
+        />
         <MenuActionMore
           isVisible={showingPopover}
           hideMore={hidePopover}
           listMenuItem={listMenuItem}
           childRef={childRef}
           onItemClick={onItemClick}
+          hideComplete={releaseLockShowing}
         />
       </WrapHeaderScrollable>
     </View>

package/src/screens/Unit/SmartAccountStyles.js

@@ -42,4 +42,24 @@ export default StyleSheet.create({
     borderColor: Colors.ShadownTransparent,
     borderTopWidth: 1,
   },
+  boxButtonNotSelect: {
+    marginVertical: 16,
+    height: 45,
+    borderRadius: 30,
+    borderColor: Colors.Primary,
+    borderWidth: 1,
+    paddingVertical: 0,
+  },
+  boxButtonSelect: {
+    marginVertical: 16,
+    height: 45,
+    borderRadius: 30,
+    borderColor: Colors.Primary,
+    backgroundColor: Colors.Primary,
+    borderWidth: 1,
+    paddingVertical: 0,
+  },
+  textRightButton: {
+    color: Colors.White,
+  },
 });

package/src/screens/Unit/hook/useStateAlertRemove.js

@@ -5,10 +5,10 @@ export const useStateAlertRemove = () => {
   const t = useTranslations();
   const [stateAlertRemove, setStateAlertRemove] = useState({
     visible: false,
-    title: t('delete_smart_account'),
+    title: t('remove_account'),
     message: '',
-    leftButton: t('cancel'),
-    rightButton: t('remove'),
+    leftButton: t('yes_remove'),
+    rightButton: t('cancel'),
   });
   const hideAlertAction = useCallback(() => {
     setStateAlertRemove((state) => ({
@@ -22,9 +22,7 @@ export const useStateAlertRemove = () => {
       setStateAlertRemove((state) => ({
         ...state,
         visible: true,
-        message: `${t('are_you_sure_want_to_delete', {
-          text: brand === 'google_home' ? 'Điện Quang' : brand,
-        })}`,
+        message: t('this_action_will_remove_all_related_devices'),
       }));
     },
     [t]

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

@@ -798,7 +798,7 @@
   "smart": "Smart",
   "smart_account": "Smart account",
   "delete_smart_account": "Delete smart account",
-  "are_you_sure_want_to_delete": "Are you sure you want to delete {text} ?",
+  "this_action_will_remove_all_related_devices": "This action will remove all related devices and it’s setting forever. Do you wish to continue?",
   "multi_unit": "Multi Units",
   "edit_device": "Edit Device",
   "device_name": "Device name",
@@ -888,5 +888,6 @@
   "location_permission_required_wifi_title": "Location permission is required for WiFi connections",
   "location_permission_required_wifi_message": "This app needs location permission as this is required to scan for wifi networks.",
   "deny": "DENY",
-  "allow": "ALLOW"
+  "allow": "ALLOW",
+  "yes_remove": "Yes,remove"
 }

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

@@ -799,7 +799,7 @@
   "smart": "Thông minh",
   "smart_account": "Tài khoản thông minh",
   "delete_smart_account": "Xóa tài khoản thông minh",
-  "are_you_sure_want_to_delete": "Bạn có muốn xóa {text} ?",
+  "this_action_will_remove_all_related_devices": "Hành động này sẽ xóa tất cả các thiết bị liên quan và nó sẽ cài đặt vĩnh viễn. Bạn có muốn tiếp tục không?",
   "edit_device": "Chỉnh sửa thiết bị",
   "device_name": "Tên thiết bị",
   "rename_successfully": "Đổi tên thành công!",
@@ -890,5 +890,6 @@
   "location_permission_required_wifi_title": "Quyền vị trí là bắt buộc đối với kết nối WiFi",
   "location_permission_required_wifi_message": "Ứng dụng này cần có quyền định vị vì ứng dụng này được yêu cầu để quét các mạng Wi-Fi.",
   "deny": "Từ chối",
-  "allow": "Cho phép"
+  "allow": "Cho phép",
+  "yes_remove": "Có,loại bỏ"
 }

package/src/commons/ActionGroup/__test__/MenuActionAddSchedule.test.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import renderer, { act } from 'react-test-renderer';
-
-import MenuActionAddSchedule from '../hooks/MenuActionAddSchedule';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import RecurringDetail from '../hooks/RecurringDetail';
-import WheelDateTimePicker from '../../WheelDateTimePicker';
-
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
-
-const wrapComponent = (actionGroup) => (
-  <SCProvider initState={mockSCStore({})}>
-    <MenuActionAddSchedule />
-  </SCProvider>
-);
-
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockedNavigate,
-    }),
-  };
-});
-
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
-jest.mock('axios');
-
-describe('Test MenuActionAddSchedule', () => {
-  let tree;
-
-  test('test render MenuActionAddSchedule', async () => {
-    await act(async () => {
-      tree = await renderer.create(wrapComponent());
-    });
-    const instance = tree.root;
-
-    const recurringDetail = instance.findByType(RecurringDetail);
-    await act(async () => {
-      recurringDetail.props.onShowSetDateTime();
-    });
-
-    const wheelDateTimePicker = instance.findByType(WheelDateTimePicker);
-
-    await act(async () => {
-      wheelDateTimePicker.props.onPicked();
-    });
-
-    await act(async () => {
-      wheelDateTimePicker.props.onCancel();
-    });
-
-    expect(wheelDateTimePicker.props.isVisible).toEqual(false);
-  });
-});

package/src/commons/ActionGroup/hooks/AccessScheduleDetailStyles.js

@@ -1,41 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Colors } from '../../../configs';
-
-export default StyleSheet.create({
-  title: {
-    marginTop: 16,
-  },
-  value: {
-    marginTop: 8,
-    marginBottom: 12,
-  },
-  repeatWrap: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    marginTop: 16,
-  },
-  repeatItem: {
-    width: 24,
-    height: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 12,
-    borderWidth: 0,
-    borderColor: Colors.Orange,
-  },
-  repeatItemSelected: {
-    borderWidth: 1,
-  },
-  repeatText: {
-    lineHeight: 16,
-  },
-  curtainText: {
-    fontSize: 17,
-    marginTop: 12,
-    color: Colors.Gray9,
-  },
-  boder: {
-    borderBottomWidth: 1,
-    borderColor: Colors.Gray4,
-  },
-});

package/src/commons/ActionGroup/hooks/MenuActionAddSchedule.js

@@ -1,110 +0,0 @@
-import React, { memo, useCallback, useState } from 'react';
-import { View } from 'react-native';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-
-import Text from '../../Text';
-import { ModalCustom } from '../../Modal';
-import ViewButtonBottom from '../../ViewButtonBottom';
-import WheelDateTimePicker from '../../WheelDateTimePicker';
-import moment from 'moment';
-import { useBoolean } from '../../../hooks/Common';
-import RecurringDetail from './RecurringDetail';
-import _TextInput from '../../../commons/Form/TextInput';
-import styles from './MenuActionAddScheduleStyle';
-
-const MenuActionAddSchedule = memo(({ visible, hideModal, onItemClick }) => {
-  const t = useTranslations();
-
-  const [stateDateTimePicker, setStateDateTimePicker] = useState({
-    isVisible: false,
-    mode: 'time',
-    defaultValue: moment().valueOf(),
-    setter: null,
-  });
-
-  const [lockShowing, releaseLockShowing, acquireLockShowing] =
-    useBoolean(true);
-  const [recurringTimeStart, setRecurringTimeStart] = useState('');
-  const [recurringTimeEnd, setRecurringTimeEnd] = useState('');
-  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState('');
-
-  const onShowSetDateTime = useCallback(
-    (currentValue, setter, mode) => {
-      acquireLockShowing();
-      setStateDateTimePicker((state) => ({
-        ...state,
-        isVisible: true,
-        mode: mode,
-        defaultValue: currentValue,
-        setter: setter,
-      }));
-    },
-    [setStateDateTimePicker, acquireLockShowing]
-  );
-
-  const onDateTimePicked = useCallback(
-    (timeData) => {
-      const setter = stateDateTimePicker.setter;
-      setter && setter(moment(timeData));
-    },
-    [stateDateTimePicker]
-  );
-
-  const onHideSetDateTime = useCallback(() => {
-    acquireLockShowing();
-    setStateDateTimePicker((state) => ({
-      ...state,
-      isVisible: false,
-    }));
-  }, [setStateDateTimePicker, acquireLockShowing]);
-
-  return (
-    <ModalCustom
-      isVisible={visible}
-      onBackButtonPress={hideModal}
-      onBackdropPress={hideModal}
-      style={styles.container}
-    >
-      <View style={styles.popoverStyle}>
-        <View style={styles.modalWrapper}>
-          <View style={styles.modalHeader}>
-            <Text style={styles.modalHeaderText}>{t('add_schedule')}</Text>
-            <View style={styles.boder} />
-            <RecurringDetail
-              onShowSetDateTime={onShowSetDateTime}
-              recurringTimeStart={recurringTimeStart}
-              recurringTimeEnd={recurringTimeEnd}
-              recurringTimeRepeat={recurringTimeRepeat}
-              setRecurringTimeStart={setRecurringTimeStart}
-              setRecurringTimeEnd={setRecurringTimeEnd}
-              setRecurringTimeRepeat={setRecurringTimeRepeat}
-            />
-
-            <Text style={styles.subName}>{t('schedule_name')}</Text>
-            <_TextInput
-              placeholder={t('enter_name')}
-              wrapStyle={styles.noMarginTop}
-              textInputStyle={styles.textInput}
-            />
-            <View style={styles.ViewButtonBottom}>
-              <ViewButtonBottom
-                leftTitle={t('cancel')}
-                onLeftClick={hideModal}
-                rightTitle={t('done')}
-              />
-            </View>
-            <WheelDateTimePicker
-              mode={stateDateTimePicker.mode}
-              isVisible={stateDateTimePicker.isVisible && lockShowing}
-              defaultValue={stateDateTimePicker.defaultValue}
-              onPicked={onDateTimePicked}
-              onCancel={onHideSetDateTime}
-              onHide={releaseLockShowing}
-            />
-          </View>
-        </View>
-      </View>
-    </ModalCustom>
-  );
-});
-export default MenuActionAddSchedule;

package/src/commons/ActionGroup/hooks/MenuActionAddScheduleStyle.js

@@ -1,69 +0,0 @@
-import { Colors } from '../../../configs';
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  container: {
-    flex: 1,
-    margin: 0,
-  },
-  popoverStyle: {
-    width: '100%',
-    backgroundColor: Colors.White,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    borderRadius: 10,
-  },
-  modalWrapper: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: Colors.White,
-    borderRadius: 10,
-  },
-  modalHeader: {
-    padding: 16,
-    backgroundColor: Colors.White,
-    justifyContent: 'flex-start',
-  },
-  modalHeaderText: {
-    fontSize: 17,
-    lineHeight: 24,
-    color: Colors.Gray9,
-    fontWeight: 'bold',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    marginVertical: 20,
-  },
-  boder: {
-    borderBottomWidth: 1,
-    borderColor: Colors.Gray4,
-  },
-  subName: {
-    color: Colors.Gray8,
-    marginTop: 12,
-  },
-  ViewButtonBottom: {
-    borderTopWidth: 1,
-    borderTopColor: Colors.Gray4,
-  },
-  scheduleName: {
-    fontSize: 17,
-    marginTop: 12,
-    color: Colors.Gray9,
-    marginBottom: 12,
-  },
-  noMarginTop: {
-    marginTop: 0,
-    backgroundColor: Colors.White,
-  },
-  textInput: {
-    marginTop: 0,
-    borderWidth: 0,
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.Gray4,
-    paddingLeft: 0,
-    backgroundColor: Colors.White,
-    fontSize: 17,
-    color: Colors.Gray9,
-  },
-});

package/src/commons/ActionGroup/hooks/RecurringDetail.js

@@ -1,97 +0,0 @@
-import React, { useCallback } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-
-import Text from '../../../commons/Text';
-import { Colors } from '../../../configs';
-import { REPEAT_ITEMS } from '../../../screens/GuestInfo/constant';
-import styles from './AccessScheduleDetailStyles';
-
-const RecurringDetail = ({
-  onShowSetDateTime,
-  recurringTimeStart,
-  recurringTimeEnd,
-  recurringTimeRepeat,
-  setRecurringTimeStart,
-  setRecurringTimeEnd,
-  setRecurringTimeRepeat,
-}) => {
-  const t = useTranslations();
-  const onSetTimeStart = useCallback(() => {
-    onShowSetDateTime();
-  }, [onShowSetDateTime]);
-
-  const onSetTimeEnd = useCallback(() => {
-    onShowSetDateTime();
-  }, [onShowSetDateTime]);
-
-  const onSetRepeat = useCallback(
-    (item) => {
-      const index = recurringTimeRepeat.indexOf(item.value);
-      if (index !== -1) {
-        setRecurringTimeRepeat([
-          ...recurringTimeRepeat.slice(0, index),
-          ...recurringTimeRepeat.slice(index + 1),
-        ]);
-      } else {
-        setRecurringTimeRepeat([...recurringTimeRepeat, item.value]);
-      }
-    },
-    [recurringTimeRepeat, setRecurringTimeRepeat]
-  );
-
-  const renderRepeatItem = useCallback(
-    (item, index, isSelected) => {
-      return (
-        <TouchableOpacity
-          key={index}
-          style={[styles.repeatItem, isSelected && styles.repeatItemSelected]}
-          onPress={() => onSetRepeat(item)}
-        >
-          <Text
-            type="Body"
-            lineHeight={16}
-            color={isSelected ? Colors.Orange : item.color}
-            style={styles.repeatText}
-          >
-            {item.text}
-          </Text>
-        </TouchableOpacity>
-      );
-    },
-    [onSetRepeat]
-  );
-
-  return (
-    <View>
-      <Text style={styles.curtainText}>{t('curtain_opens')}</Text>
-      <TouchableOpacity onPress={onSetTimeStart}>
-        <Text type="Body" color={Colors.Orange} style={styles.value}>
-          07:00 AM
-        </Text>
-      </TouchableOpacity>
-      <View style={styles.boder} />
-      <Text style={styles.curtainText}>{t('curtain_closes')}</Text>
-      <TouchableOpacity onPress={onSetTimeEnd}>
-        <Text type="Body" color={Colors.Orange} style={styles.value}>
-          12:00 AM
-        </Text>
-      </TouchableOpacity>
-      <View style={styles.boder} />
-      <Text type="Body" color={Colors.Gray8} style={styles.title}>
-        {t('repeat')}
-      </Text>
-      <View style={styles.repeatWrap}>
-        {REPEAT_ITEMS.map((item, index) =>
-          renderRepeatItem(
-            item,
-            index,
-            recurringTimeRepeat.includes(item.value)
-          )
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default RecurringDetail;