@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/screens/ScanChipQR/components/QRScan/index.js

@@ -5,7 +5,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import { RNCamera } from 'react-native-camera';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors, Device } from '../../../../configs';
 import Text from '../../../../commons/Text';
@@ -26,6 +26,7 @@ const LoadingCamera = memo(() => {
 });
 
 const VerifingQRCode = memo(() => {
+  const t = useTranslations();
   return (
     <View style={styles.maskOutter}>
       <TouchableOpacity style={[styles.viewVerifing, styles.buttonShadow]}>

package/src/screens/ScriptDetail/Styles/indexStyles.js

@@ -0,0 +1,143 @@
+import { Colors } from '../../../configs';
+import { Platform, StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapContent: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: getBottomSpace() + 10,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  box: {
+    height: 76,
+    backgroundColor: Colors.White,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 8,
+    marginTop: 16,
+    marginBottom: 24,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  wrapText: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  rightComponent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerButton: {
+    marginRight: 20,
+  },
+  activeButton: {
+    alignSelf: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  editButton: {
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  moreButton: {
+    marginLeft: -5,
+  },
+  wrapStyle: {
+    borderRadius: 8,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    width: 160,
+    marginTop: Platform.select({
+      android: -25,
+      ios: 0,
+    }),
+    marginLeft: -10,
+  },
+  wrapItem: {
+    flexDirection: 'row',
+    height: 100,
+    marginBottom: 16,
+  },
+  leftItem: {
+    width: 41,
+    height: '100%',
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+  },
+  leftItemAdd: {
+    width: 41,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+    borderStyle: 'dashed',
+    borderWidth: 2,
+  },
+  rightItem: {
+    flex: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+    borderWidth: 1,
+    flexDirection: 'row',
+    paddingVertical: 15,
+    paddingHorizontal: 16,
+  },
+  rightItemAdd: {
+    flex: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    borderStyle: 'dashed',
+    borderWidth: 2,
+  },
+  noBorder: {
+    borderWidth: 0,
+  },
+  iconItem: {
+    width: 40,
+    height: 40,
+    marginRight: 24,
+  },
+  contentItem: {
+    flex: 1,
+  },
+  addAction: {
+    marginLeft: 24,
+    marginTop: Platform.select({
+      android: 3,
+      ios: 0,
+    }),
+  },
+  number: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});

package/src/screens/ScriptDetail/index.js

@@ -0,0 +1,243 @@
+import React, {
+  useCallback,
+  useMemo,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import { Icon } from '@ant-design/react-native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './Styles/indexStyles';
+import Text from '../../commons/Text';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { API, Colors, Images } from '../../configs';
+import { usePopover } from '../../hooks/Common';
+import MenuActionMore from '../../commons/MenuActionMore';
+import Add from '../../../assets/images/Add.svg';
+import { useNavigation, useRoute } from '@react-navigation/core';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import FImage from '../../commons/FImage';
+import Routes from '../../utils/Route';
+import { ToastBottomHelper } from '../../utils/Utils';
+import ItemAutomate from '../../commons/Automate/ItemAutomate';
+import { AUTOMATE_TYPE } from '../../configs/Constants';
+
+const ScriptDetail = () => {
+  const { navigate } = useNavigation();
+  const { params = {} } = useRoute();
+  const refMenuAction = useRef();
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+  const t = useTranslations();
+  const { id, name = '', type, havePermission, unit, dateNow = null } = params;
+  const [isFavourite, setIsFavourite] = useState(false);
+  const [data, setData] = useState([]);
+
+  const listMenuItem = [
+    { text: 'Rename' },
+    { text: 'Activity Log' },
+    { text: 'Delete Script' },
+  ];
+
+  const onPressFavourite = useCallback(() => {
+    setIsFavourite(!isFavourite);
+  }, [isFavourite]);
+
+  const handleShowMenuAction = useCallback(
+    () => showPopoverWithRef(refMenuAction),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onItemClick = useCallback((item) => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPressAdd = useCallback(() => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getOneTapDetail = useCallback(async () => {
+    const { success, data } = await axiosGet(API.AUTOMATE.ONE_TAP_DETAIL(id));
+    success && setData(data?.script_actions || []);
+  }, [id]);
+
+  const onPressEdit = useCallback(() => {
+    navigate(Routes.EditActionsList, { data, id, setData });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const onPressAddAction = useCallback(() => {
+    navigate(Routes.SelectDevice, {
+      unit,
+      automateId: id,
+      scriptName: name,
+    });
+  }, [navigate, id, name, unit]);
+
+  const handleScriptAction = useCallback(async () => {
+    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    if (success) {
+      ToastBottomHelper.success(t('Activated successfully.'));
+    } else {
+      ToastBottomHelper.error(t('Activation failed.'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const Item = useCallback(({ item, index }) => {
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItem}>
+          <Text color={Colors.Gray9} type="H4" semibold>
+            {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+          </Text>
+        </View>
+        <View style={styles.rightItem}>
+          <FImage
+            source={{ uri: item?.sensor_icon_kit }}
+            style={styles.iconItem}
+          />
+          <View style={styles.contentItem}>
+            <Text numberOfLines={1} type="Label" color={Colors.Gray7}>
+              {item?.station_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+              {item?.sensor_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+              {item?.action_name}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }, []);
+
+  const ItemAdd = useCallback(({ item, index }) => {
+    return (
+      <View style={styles.wrapItem}>
+        <View style={styles.leftItemAdd}>
+          <Text style={styles.number} type="H4" semibold color={Colors.Gray7}>
+            {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+          </Text>
+        </View>
+        <TouchableOpacity
+          onPress={onPressAddAction}
+          style={[styles.rightItemAdd]}
+        >
+          <Add />
+          <Text type="H4" color={Colors.Gray8} style={styles.addAction}>
+            {t('add_action')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderButtonStar = useMemo(() => {
+    return (
+      <TouchableOpacity
+        style={[styles.buttonStar, styles.headerButton]}
+        onPress={onPressFavourite}
+      >
+        {isFavourite ? (
+          <IconFill name="star" size={25} color={Colors.Yellow6} />
+        ) : (
+          <IconOutline name="star" size={25} />
+        )}
+      </TouchableOpacity>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFavourite]);
+
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        {renderButtonStar}
+        <TouchableOpacity onPress={onPressAdd} style={styles.headerButton}>
+          <Icon name={'plus'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={handleShowMenuAction}
+          ref={refMenuAction}
+          style={[styles.headerButton, styles.moreButton]}
+        >
+          <Icon name={'more'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isFavourite]
+  );
+
+  useEffect(() => {
+    getOneTapDetail();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, dateNow]); // TODO will remove dateNow later
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={name}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+      >
+        <View style={styles.wrapContent}>
+          <Text type="H3" semibold>
+            {t('how_to_start')}
+          </Text>
+          <ItemAutomate
+            type={type}
+            // eslint-disable-next-line no-alert
+            onPress={() => alert(t('feature_under_development'))}
+          />
+          {type === AUTOMATE_TYPE.ONE_TAP && (
+            <TouchableOpacity
+              onPress={handleScriptAction}
+              style={styles.activeButton}
+            >
+              <Image source={Images.activeButton} />
+            </TouchableOpacity>
+          )}
+
+          <View style={styles.row}>
+            <Text type="H3" color={Colors.Gray9} semibold>
+              {t('active_list')}
+            </Text>
+            {havePermission && (
+              <TouchableOpacity onPress={onPressEdit} style={styles.editButton}>
+                <Text type="Label" hilight>
+                  {t('edit')}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+          {data.map((item, index) => (
+            <Item key={item?.id} item={item} index={index} />
+          ))}
+          {havePermission && <ItemAdd index={data.length} />}
+        </View>
+      </WrapHeaderScrollable>
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={onItemClick}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+      />
+    </View>
+  );
+};
+
+export default ScriptDetail;

package/src/screens/SharedUnit/TabHeader.js

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import Text from '../../commons/Text';
 
 import styles from './styles';
 
 const TabHeader = ({ current, getCurrentTab, showModal, textFilter }) => {
+  const t = useTranslations();
   const [currentTab, setCurrentTabState] = useState(current);
 
   useEffect(() => {

package/src/screens/SharedUnit/__test__/TabHeader.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import { act } from '@testing-library/react-hooks';
+import TabHeader from '../TabHeader';
+import { TouchableOpacity } from 'react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+jest.mock('axios');
+
+const wrapComponent = (current, getCurrentTab, showModal, textFilter) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TabHeader
+      current={current}
+      getCurrentTab={getCurrentTab}
+      showModal={showModal}
+      textFilter={textFilter}
+    />
+  </SCProvider>
+);
+
+describe('Test TabHeader', () => {
+  let tree;
+
+  const current = 0;
+  const getCurrentTab = () => {};
+  const showModal = true;
+  const textFilter = '';
+
+  it('render TabHeader', async () => {
+    act(() => {
+      tree = create(
+        wrapComponent(current, getCurrentTab, showModal, textFilter)
+      );
+    });
+    const instance = tree.root;
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(3);
+  });
+});

package/src/screens/SharedUnit/index.js

@@ -3,7 +3,7 @@ import { View, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import Modal from 'react-native-modal';
 import { axiosGet } from '../../utils/Apis/axios';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API } from '../../configs';
 import Text from '../../commons/Text';
@@ -21,6 +21,7 @@ import { useSCContextSelector } from '../../context';
 const Shared = () => {
   useBlockBackAndroid();
   useTitleHeader(t('text_shared_with_me'));
+  const t = useTranslations();
   const navigation = useNavigation();
   const [tab, setTabActiveState] = useState(0);
 
@@ -102,7 +103,7 @@ const Shared = () => {
         textFilter: t('text_can_edit'),
       },
     ],
-    []
+    [t]
   );
 
   return (

package/src/screens/Sharing/MemberList.js

@@ -7,7 +7,7 @@ import {
   View,
   ActivityIndicator,
 } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Routes from '../../utils/Route';
@@ -21,6 +21,7 @@ import { TESTID } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const MemberList = ({ route }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
   const account = useSCContextSelector((state) => state.auth.account);
   const { unitId, unit } = route.params;

package/src/screens/Sharing/SelectPermission.js

@@ -8,7 +8,7 @@ import {
   Platform,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
 import ViewButtonBottom from '../../commons/ViewButtonBottom';
@@ -23,6 +23,7 @@ import { TESTID } from '../../configs/Constants';
 let dataStationTemp = [];
 
 const SelectPermission = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const navigation = useNavigation();
   const [dataStations, setDataStations] = useState([]);

package/src/screens/Sharing/SelectUser.js

@@ -7,7 +7,7 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors, Theme } from '../../configs';
 import AccountList from '../../commons/Auth/AccountList';
@@ -22,6 +22,7 @@ import { TESTID } from '../../configs/Constants';
 import Text from '../../commons/Text';
 
 const SelectUser = ({ route }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
   const { unit, permissions } = route.params;
   const [errorText, setErrorText] = useState('');
@@ -64,7 +65,7 @@ const SelectUser = ({ route }) => {
     }
     setErrorText('');
     sharePermissions(phone, email);
-  }, [content, sharePermissions]);
+  }, [content, sharePermissions, t]);
 
   const onPressNext = useCallback(() => {
     navigation.dangerouslyGetParent().goBack();

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

@@ -8,10 +8,11 @@ import MemberList from '../MemberList';
 import { AlertAction } from '../../../commons';
 import SharingMembers from '../../../commons/Sharing/MemberList';
 import API from '../../../configs/API';
-import { t } from 'i18n-js';
 import { TESTID } from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
-import Routes from '../../../utils/Route';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockedNavigate = jest.fn();
 const mockedDispatch = jest.fn();
@@ -41,6 +42,12 @@ jest.mock('react-redux', () => {
   };
 });
 
+const wrapComponent = (route, account) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MemberList route={route} account={account} />
+  </SCProvider>
+);
+
 describe('test MemberList', () => {
   let route;
   let account;
@@ -82,7 +89,7 @@ describe('test MemberList', () => {
 
   test('render MemberList', async () => {
     await act(async () => {
-      await create(<MemberList route={route} account={account} />);
+      await create(wrapComponent(route, account));
     });
     expect(axios.get).toHaveBeenCalledWith(API.SHARE.UNITS_MEMBERS(1), {});
   });
@@ -98,7 +105,7 @@ describe('test MemberList', () => {
 
     let tree;
     await act(async () => {
-      tree = await create(<MemberList route={route} account={account} />);
+      tree = await create(wrapComponent(route, account));
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
@@ -111,8 +118,8 @@ describe('test MemberList', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'success',
       position: 'bottom',
-      text1: t('sharing_removed_user', {
-        name: '[missing %{name} value]',
+      text1: getTranslate('en', 'sharing_removed_user', {
+        name: 'undefined',
       }),
       visibilityTime: 1000,
     });
@@ -134,7 +141,7 @@ describe('test MemberList', () => {
 
     let tree;
     await act(async () => {
-      tree = await create(<MemberList route={route} account={account} />);
+      tree = await create(wrapComponent(route, account));
     });
     const instance = tree.root;
     const sharingMember = instance.findAllByType(SharingMembers);
@@ -158,7 +165,7 @@ describe('test MemberList', () => {
 
     let tree;
     await act(async () => {
-      tree = await create(<MemberList route={route} account={account} />);
+      tree = await create(wrapComponent(route, account));
     });
     const instance = tree.root;
     const button = instance.find(
@@ -170,10 +177,7 @@ describe('test MemberList', () => {
       await button.props.onPress();
     });
     expect(axios.get).toHaveBeenCalledWith(API.SHARE.UNITS_MEMBERS(1), {});
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddMemberStack, {
-      screen: Routes.SharingSelectPermission,
-      params: { unit: { id: 1 } },
-    });
+    expect(mockedNavigate).not.toBeCalled();
   });
 
   test('WrapHeaderScrollable rightHeader but not owner', async () => {
@@ -193,7 +197,7 @@ describe('test MemberList', () => {
 
     let tree;
     await act(async () => {
-      tree = await create(<MemberList route={route} account={account} />);
+      tree = await create(wrapComponent(route, account));
     });
     const instance = tree.root;
     const button = instance.find(