@eohjsc/react-native-smart-city 0.2.93 → 0.2.96

package/assets/images/Device/air-dry.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1302 0.511174C11.3959 1.343 4.08508 10.1691 4.08508 15.4443C4.08508 19.8876 7.68713 23.4894 12.1302 23.4894C16.5733 23.4894 20.1753 19.8876 20.1753 15.4443C20.1753 9.80224 12.1024 0.427685 12.1302 0.511174ZM11.6441 21.4844L11.6203 21.4839C9.92602 21.3784 7.67768 20.7243 6.57036 18.2043C6.47513 17.9873 6.57445 17.7332 6.79121 17.6375C7.00644 17.5443 7.26559 17.6479 7.35802 17.8581C8.29096 19.9816 10.2178 20.5348 11.6706 20.625C11.907 20.6395 12.0878 20.844 12.0733 21.0807C12.0587 21.3072 11.8703 21.4844 11.6441 21.4844Z" fill="#262626"/>
+</svg>

package/assets/images/Device/auto.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18C14.42 18 18 14.42 18 10C18 5.58 14.42 2 10 2C5.58 2 2 5.58 2 10C2 14.42 5.58 18 10 18ZM10 0C15.52 0 20 4.48 20 10C20 15.43 15.67 19.85 10.28 20H10C4.48 20 0 15.52 0 10C0 4.48 4.48 0 10 0ZM10.83 5H9.18L6 14H8.24L8.67 12.66H11.35L11.75 14H14L10.83 5ZM10.06 8.41L10.8 10.81H9.28L10.06 8.41Z" fill="#262626"/>
+</svg>

package/assets/images/Device/circulator.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.11682 11.024C2.40536 9.18824 3.22604 7.47741 4.47723 6.1034C5.72841 4.72939 7.35515 3.75257 9.15598 3.29389C10.9568 2.83521 12.8526 2.91484 14.6087 3.5229C16.3647 4.13096 17.9038 5.24075 19.0353 6.71483L19.6441 7.50745V4.69527H21.0013V10.1242H15.5724V8.76696H17.9944L17.6211 8.23323C16.7705 7.01113 15.5737 6.0715 14.1846 5.53525C12.7956 4.999 11.2778 4.89065 9.82666 5.22414C8.37551 5.55764 7.05734 6.31772 6.04175 7.40659C5.02617 8.49547 4.35963 9.86332 4.12789 11.3342L2.11682 11.024Z" fill="black"/>
+<path d="M11.5006 22C10.0429 22.0056 8.60381 21.673 7.29637 21.0285C5.98894 20.3839 4.84881 19.4449 3.96561 18.2852L3.35723 17.4913V20.3034H2V14.8745H7.42891V16.2317H5.00694L5.38018 16.7655C6.23084 17.9875 7.4277 18.9271 8.81677 19.4633C10.2058 19.9996 11.7236 20.1079 13.1747 19.7744C14.6259 19.4409 15.9441 18.6809 16.9597 17.592C17.9753 16.5032 18.6419 15.1354 18.8737 13.6646L20.8852 13.9747C20.5347 16.2116 19.3964 18.2497 17.6756 19.7212C15.9548 21.1928 13.7648 22.001 11.5006 22Z" fill="black"/>
+</svg>

package/assets/images/Device/clean.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.2968 16.5784C21.8701 16.5784 20.5301 16.028 19.5234 15.0284C18.517 14.0294 17.963 12.6988 17.963 11.2817C17.963 10.8934 17.648 10.5786 17.2598 10.5786C16.8715 10.5786 16.5567 10.8934 16.5567 11.2817C16.5567 12.6988 16.0024 14.0294 14.9961 15.0284C13.9894 16.028 12.6494 16.5784 11.2227 16.5784C10.8343 16.5784 10.5195 16.8932 10.5195 17.2816C10.5195 17.6699 10.8343 17.9847 11.2227 17.9847C14.1637 17.9847 16.5567 20.3678 16.5567 23.2969C16.5567 23.6853 16.8715 24.0001 17.2598 24.0001C17.648 24.0001 17.963 23.6853 17.963 23.2969C17.963 20.3678 20.3558 17.9847 23.2968 17.9847C23.6852 17.9847 23.9999 17.6699 23.9999 17.2816C23.9999 16.8932 23.6852 16.5784 23.2968 16.5784Z" fill="black"/>
+<path d="M9.62036 11.0806C7.54962 11.0806 5.86487 9.40826 5.86487 7.35254C5.86487 6.96436 5.55011 6.64941 5.16174 6.64941C4.77338 6.64941 4.45862 6.96436 4.45862 7.35254C4.45862 9.40826 2.77386 11.0806 0.703125 11.0806C0.314758 11.0806 0 11.3955 0 11.7837C0 12.1721 0.314758 12.4868 0.703125 12.4868C2.77386 12.4868 4.45862 14.1644 4.45862 16.2264C4.45862 16.6146 4.77338 16.9295 5.16174 16.9295C5.55011 16.9295 5.86487 16.6146 5.86487 16.2264C5.86487 14.1644 7.54962 12.4868 9.62036 12.4868C10.0087 12.4868 10.3235 12.1721 10.3235 11.7837C10.3235 11.3955 10.0087 11.0806 9.62036 11.0806Z" fill="black"/>
+<path d="M10.7642 4.85889C12.287 4.85889 13.5261 6.08844 13.5261 7.59961C13.5261 7.98779 13.8409 8.30273 14.2292 8.30273C14.6176 8.30273 14.9324 7.98779 14.9324 7.59961C14.9324 6.0835 16.1714 4.8501 17.6943 4.8501C18.0827 4.8501 18.3975 4.53516 18.3975 4.14697C18.3975 3.75861 18.0827 3.44385 17.6943 3.44385C16.1714 3.44385 14.9324 2.21429 14.9324 0.703125C14.9324 0.314758 14.6176 0 14.2292 0C13.8409 0 13.5261 0.314758 13.5261 0.703125C13.5261 2.21924 12.287 3.45264 10.7642 3.45264C10.3758 3.45264 10.061 3.7674 10.061 4.15576C10.061 4.54413 10.3758 4.85889 10.7642 4.85889Z" fill="black"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.93",
+  "version": "0.2.96",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -97,7 +97,7 @@
   "dependencies": {
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
-    "@eohjsc/highcharts": "^1.0.6",
+    "@eohjsc/highcharts": "^1.0.8",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",

package/src/Images/Common/member.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z" fill="#262626"/>
+<path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7C13.32 7 12.11 7 10.99 7C8.24 6.99 6 4.75 6 2H4C4 5.16 6.11 7.84 9 8.71V22H11V16H13V22H15V10.05L18.95 14L20.36 12.59L15.89 8.11Z" fill="#262626"/>
+</svg>

package/src/Images/Common/owner.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.753 9.0184C21.753 9.66253 21.2308 10.1847 20.5867 10.1847C20.4682 10.1847 20.3559 10.1617 20.2483 10.1291L18.5961 15.808H5.15687L3.50472 10.1291C3.39711 10.1617 3.28483 10.1847 3.16633 10.1847C2.52221 10.1847 2 9.66253 2 9.0184C2 8.37428 2.52221 7.85207 3.16633 7.85207C3.81046 7.85207 4.33266 8.37428 4.33266 9.0184C4.33266 9.24732 4.26424 9.45912 4.15041 9.6392L7.88142 12.1939L8.36195 7.3196C7.78003 7.25367 7.32625 6.76567 7.32625 6.16633C7.32625 5.52221 7.84846 5 8.49258 5C9.13671 5 9.65892 5.52221 9.65892 6.16633C9.65892 6.59305 9.42752 6.96224 9.08539 7.16565L11.8765 11.7398L14.6863 7.13517C14.3743 6.92585 14.1687 6.57035 14.1687 6.16633C14.1687 5.52221 14.6909 5 15.3351 5C15.9792 5 16.5014 5.52221 16.5014 6.16633C16.5014 6.79118 16.0091 7.2969 15.392 7.32707L15.8716 12.1939L19.6026 9.6392C19.4888 9.45912 19.4203 9.24732 19.4203 9.0184C19.4203 8.37428 19.9425 7.85207 20.5867 7.85207C21.2308 7.85207 21.753 8.37428 21.753 9.0184ZM5.15782 16.6384H18.5962V18.712H5.15782V16.6384Z" fill="#262626"/>
+</svg>

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -39,7 +39,11 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
 
   const doActionAndWatchConfig = useCallback(
     (actionData, actionValue, actionName) => {
-      doAction(actionData, actionValue, actionName);
+      doAction(
+        actionData,
+        JSON.stringify({ temperature: actionValue }),
+        actionName
+      );
       if (!sensor?.is_managed_by_backend) {
         return;
       }

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -61,7 +61,11 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     const value = getOptionValue(newOption);
     let actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
     actionName = actionName.replace(/\s+/g, ' ').trim();
-    doAction(action_data, value, actionName);
+    doAction(
+      action_data,
+      JSON.stringify({ level: value, key_code: newOption?.value_int }),
+      actionName
+    );
     if (sensor?.is_managed_by_backend) {
       configuration.config && watchMultiConfigs([configuration.config]);
     }

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -8,6 +8,10 @@ import { watchMultiConfigs } from '../../iot/Monitor';
 import IconComponent from '../IconComponent';
 import styles from './StatesGridActionTemplateStyle';
 import { TESTID } from '../../configs/Constants';
+import SvgClean from '../../../assets/images/Device/clean.svg';
+import SvgCirculator from '../../../assets/images/Device/circulator.svg';
+import SvgAuo from '../../../assets/images/Device/auto.svg';
+import SvgAirDry from '../../../assets/images/Device/air-dry.svg';
 
 const buttonStyle = {
   OFF: {
@@ -21,21 +25,6 @@ const buttonStyle = {
 };
 
 const GridItem = ({ item, index, length, doAction, sensor, title }) => {
-  const isFirst = index === 0;
-  const isLast = index === length - 1;
-  const isNextLine = index % 4 === 0;
-
-  let extraStyle = {};
-  if (isFirst || isNextLine) {
-    extraStyle.marginLeft = 24;
-  }
-  if (isLast) {
-    extraStyle.marginRight = 24;
-  }
-  if (index > 3) {
-    extraStyle.marginTop = 24;
-  }
-
   const {
     active,
     text,
@@ -46,6 +35,7 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
     config,
   } = item;
   const buttonOnOffStyle = active ? buttonStyle.ON : buttonStyle.OFF;
+  const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
 
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
@@ -63,22 +53,40 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
 
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
+  const iconSvg = useMemo(() => {
+    switch (icon) {
+      case 'clean-1':
+        return <SvgClean width={24} height={24} />;
+      case 'circulator-1':
+        return <SvgCirculator width={24} height={24} />;
+      case 'auto-1':
+        return <SvgAuo width={24} height={24} />;
+      case 'air-dry-1':
+        return <SvgAirDry width={24} height={24} />;
+      default:
+        return () => <></>;
+    }
+  }, [icon]);
+
   return (
     <View
-      style={[styles.gridItem, extraStyle]}
+      style={[styles.gridItem]}
       testID={TESTID.STATES_GRID_ACTION_GRID_ITEM}
     >
       <TouchableOpacity
         style={[styles.button, buttonOnOffStyle]}
         onPress={() => doActionAndWatchConfig(action_data)}
       >
-        <IconComponent
-          icon={icon}
-          iconKit={iconKit}
-          icon_outlined={icon_outlined}
-          isSendingCommand={false}
-          size={24}
-        />
+        {!checkIcon && (
+          <IconComponent
+            icon={icon}
+            iconKit={iconKit}
+            icon_outlined={icon_outlined}
+            isSendingCommand={false}
+            size={24}
+          />
+        )}
+        {checkIcon && <View>{iconSvg}</View>}
       </TouchableOpacity>
       <Text center color={Colors.Gray8} style={styles.textMargin}>
         {text}
@@ -116,19 +124,17 @@ const StatesGridActionTemplate = ({ actionGroup, doAction, sensor }) => {
       <Text type="H4" style={styles.textModeMargin}>
         {title}
       </Text>
-      <View style={styles.center}>
-        <View style={styles.wrapOption}>
-          {options.map((item, index) => (
-            <GridItem
-              item={item}
-              index={index}
-              length={options.length}
-              doAction={doAction}
-              sensor={sensor}
-              title={title}
-            />
-          ))}
-        </View>
+      <View style={styles.wrapOption}>
+        {options.map((item, index) => (
+          <GridItem
+            item={item}
+            index={index}
+            length={options.length}
+            doAction={doAction}
+            sensor={sensor}
+            title={title}
+          />
+        ))}
       </View>
     </View>
   );

package/src/commons/ActionGroup/StatesGridActionTemplateStyle.js

@@ -8,23 +8,18 @@ export default StyleSheet.create({
     marginHorizontal: 20,
     borderWidth: 1,
     borderColor: Colors.Gray4,
-    borderTopWidth: 0,
+    borderTopRightRadius: 10,
+    borderTopLeftRadius: 10,
     borderBottomRightRadius: 10,
     borderBottomLeftRadius: 10,
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
+    marginTop: 20,
   },
   wrapOption: {
     flex: 1,
     flexDirection: 'row',
+    justifyContent: 'space-between',
     flexWrap: 'wrap',
-    width: 312,
-  },
-  gridItem: {
-    width: 48,
-    marginHorizontal: 12,
+    paddingHorizontal: 16,
   },
   textMargin: {
     marginTop: 8,

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

@@ -152,7 +152,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
-      1,
+      JSON.stringify({ level: 1, key_code: 1 }),
       'Sensor name fan speed 1'
     );
     is_managed_by_backend
@@ -221,7 +221,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
-      'level-1',
+      JSON.stringify({ level: 'level-1', key_code: 1 }),
       'Sensor name fan speed level-1'
     ); // doAction with text instead of int
 

package/src/commons/Connecting /__test__/Connecting.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import Connecting from '../index';
+import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Connecting route={route} />
+  </SCProvider>
+);
+describe('Test Connecting', () => {
+  let tree;
+  test('create Connecting', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const text = instance.findAllByType(Text);
+    expect(text).toHaveLength(4);
+  });
+});

package/src/commons/Connecting /index.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { View } from 'react-native';
+import * as Progress from 'react-native-progress';
+import Text from '../Text';
+import { Colors, Constants } from '../../configs';
+import styles from './styles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { HeaderCustom } from '../Header';
+
+const Connecting = ({ isLoading, isConnect, isPercentConnect }) => {
+  const t = useTranslations();
+  const [percent, setPercent] = useState(0);
+
+  useEffect(() => {
+    processLoading();
+  }, [processLoading]);
+
+  const processLoading = useCallback(() => {
+    let interval;
+    if (isLoading) {
+      interval = setInterval(() => {
+        setPercent((prev) => {
+          if (prev === 1) {
+            clearInterval(interval);
+            return 1;
+          } else if (prev === 0.8 && isConnect) {
+            clearInterval(interval);
+            return 0.8;
+          } else {
+            return prev + 0.2;
+          }
+        });
+      }, 180);
+    } else {
+      clearInterval(interval);
+    }
+  }, [isConnect, isLoading]);
+  return (
+    <View style={styles.screen}>
+      <HeaderCustom title={t('connect_device')} isShowSeparator />
+      <View style={styles.body}>
+        <View style={styles.connecting}>
+          <Text type="H4" bold>
+            {t('connecting')}
+          </Text>
+        </View>
+        <View style={styles.percentLoad}>
+          <Progress.Bar
+            progress={isPercentConnect || percent}
+            animated={true}
+            color={Colors.Primary}
+            indeterminateAnimationDuration={1000}
+            height={7}
+            width={Constants.width - 80}
+            useNativeDriver={true}
+          />
+          <Text style={styles.textPercentLoad}>{`${parseInt(
+            (isPercentConnect || percent) * 100,
+            10
+          )}%`}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Connecting;

package/src/commons/Connecting /styles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Constants } from '../../configs';
+
+export default StyleSheet.create({
+  screen: {
+    flex: 1,
+    width: '100%',
+  },
+  body: {
+    width: '100%',
+    height: Constants.height - 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  connecting: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  percentLoad: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textPercentLoad: {
+    marginLeft: 10,
+  },
+});

package/src/commons/ConnectingProcess/index.js

@@ -3,14 +3,14 @@ import { SafeAreaView, View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
-import * as Progress from 'react-native-progress';
 import ImageSuccessfully from '../../Images/Common/SuccessfullyConnected.svg';
 
 import Text from '../Text';
 import { axiosPost } from '../../utils/Apis/axios';
-import { API, Colors, Constants } from '../../configs';
+import { API, Colors } from '../../configs';
 import styles from './styles';
 import DeviceItem from './DeviceItem/DeviceItem';
+import Connecting from '../Connecting ';
 import { useSCContextSelector } from '../../context';
 
 const ConnectingProcess = ({ route }) => {
@@ -29,31 +29,9 @@ const ConnectingProcess = ({ route }) => {
     wifi_pass,
     chip_id,
   } = route.params;
-  const [percent, setPercent] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [sensor, setSensor] = useState(null);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  useEffect(() => {
-    processLoading();
-  }, [processLoading]);
-
-  const processLoading = useCallback(() => {
-    let interval;
-    if (isLoading) {
-      interval = setInterval(() => {
-        setPercent((prev) => {
-          if (prev === 1) {
-            clearInterval(interval);
-            return 1;
-          } else {
-            return prev + 0.2;
-          }
-        });
-      }, 180);
-    } else {
-      clearInterval(interval);
-    }
-  }, [isLoading]);
 
   const ConnectingDevice = useCallback(async () => {
     setIsLoading(true);
@@ -120,35 +98,6 @@ const ConnectingProcess = ({ route }) => {
     chip_id,
   ]);
 
-  const Connecting = useCallback(() => {
-    return (
-      <>
-        <View style={styles.progressBar}>
-          <View style={styles.connecting}>
-            <Text type="H4" bold>
-              {t('connecting')}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.percentLoad}>
-          <Progress.Bar
-            progress={percent}
-            animated={true}
-            color={Colors.Primary}
-            indeterminateAnimationDuration={1000}
-            height={7}
-            width={Constants.width - 80}
-            useNativeDriver={true}
-          />
-          <Text style={styles.textPercentLoad}>{`${parseInt(
-            percent * 100,
-            10
-          )}%`}</Text>
-        </View>
-      </>
-    );
-  }, [percent, t]);
-
   const ConnectingSuccess = useCallback(() => {
     return (
       <View style={styles.ConnectingSuccess}>
@@ -188,7 +137,7 @@ const ConnectingProcess = ({ route }) => {
         <Text bold style={styles.connectingText}>
           {t('connect_device')}
         </Text>
-        {!!isLoading && <Connecting />}
+        {!!isLoading && <Connecting isLoading={isLoading} />}
         {!isLoading && <ConnectingSuccess />}
       </View>
       {!isLoading && (

package/src/commons/Explore/SearchBox/__test__/SearchBox.test.js

@@ -4,6 +4,8 @@ import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
+import { TextInput } from 'react-native';
+import { TESTID } from '../../../../configs/Constants';
 
 const mockedNavigate = jest.fn();
 
@@ -36,4 +38,21 @@ describe('Test SearchBox', () => {
     });
     expect(mockedNavigate.mock.calls.length).toBe(1);
   });
+
+  test('Onfocus searchBox', () => {
+    act(() => {
+      wrapper = renderer.create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const textInput = instance.find(
+      (item) =>
+        item.props.testID === TESTID.ON_FOCUS_SEARCH_B0X &&
+        item.type === TextInput
+    );
+
+    act(() => {
+      textInput.props.onFocus();
+    });
+    expect(textInput).toBeDefined();
+  });
 });

package/src/commons/Explore/SearchBox/index.js

@@ -7,6 +7,7 @@ import { Colors } from '../../../configs';
 import Theme from '../../../configs/Theme';
 import Search from '../../../../assets/images/Explore/Search.svg';
 import ArrowBack from '../../../../assets/images/Explore/ArrowBack.svg';
+import { TESTID } from '../../../configs/Constants';
 
 const SearchBox = memo(({ isBack, style, onFocus }) => {
   const t = useTranslations();
@@ -33,6 +34,7 @@ const SearchBox = memo(({ isBack, style, onFocus }) => {
         placeholderTextColor={Colors.Gray7}
         style={Theme.textSearchInput}
         onFocus={onFocusInput}
+        testID={TESTID.ON_FOCUS_SEARCH_B0X}
       />
     </View>
   );

package/src/commons/MenuActionMore/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { TouchableOpacity, ScrollView } from 'react-native';
 import Popover from 'react-native-popover-view';
 
@@ -19,10 +19,16 @@ const MenuActionMore = memo(
     wrapStyle,
     isTextCenter = true,
   }) => {
+    const [isDisable, setIsDisable] = useState(false);
     const onPress = useCallback(
-      (item, index) => {
+      (item, index) => () => {
+        setIsDisable(true);
         hideMore && hideMore();
         onItemClick && onItemClick(item, index);
+        const timeout = setTimeout(() => {
+          setIsDisable(false);
+          clearTimeout(timeout);
+        }, 500);
       },
       [hideMore, onItemClick]
     );
@@ -52,9 +58,10 @@ const MenuActionMore = memo(
                   styles.menuWrapper,
                   isTextCenter ? styles.modalHeaderCenter : styles.modalHeader,
                 ]}
-                onPress={() => onPress(item, index)}
+                onPress={onPress(item, index)}
                 key={index}
                 testID={TESTID.TOUCHABLE_ACTION_ADD_MORE}
+                disabled={isDisable}
               >
                 <Text style={styles.modalHeaderText}>{item.text}</Text>
               </TouchableOpacity>

package/src/commons/Modal/ModalCustom.js

@@ -1,10 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Modal from 'react-native-modal';
 import { Colors } from '../../configs';
+import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
 
 const ModalCustom = (props) => {
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStatusBarPreview(
+      props.isVisible ? Colors.BlackTransparent3_5 : Colors.TextTransparent
+    );
+  }, [props.isVisible]);
   return (
     <Modal
+      isVisible
       hasBackdrop
       useNativeDriver
       animationIn={'slideInUp'}

package/src/commons/Sharing/MemberList.js

@@ -1,29 +1,27 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-
 import RowMember from './RowMember';
 
 const MemberList = ({
   dataMember,
   ownerId,
+  unit,
   currentUserId, //user is using app
-  onPressRemove,
 }) => {
   const t = useTranslations();
-
   return (
     <View style={styles.box}>
       {!!dataMember.length &&
         dataMember.map((item, index) => (
           <RowMember
             member={item}
+            unit={unit}
             index={index}
             ownerId={ownerId}
             currentUserId={currentUserId}
-            onPressRemove={onPressRemove}
             key={index.toString()}
           />
         ))}
@@ -33,13 +31,10 @@ const MemberList = ({
     </View>
   );
 };
-export default MemberList;
+export default memo(MemberList);
+
 const styles = StyleSheet.create({
   box: {
-    paddingBottom: 16,
-    borderRadius: 20,
     backgroundColor: Colors.White,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
   },
 });