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

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

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

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

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

package/src/screens/ConfirmUnitDeletion/__test__/ConfirmUnitDeletion.test.js

@@ -1,15 +1,18 @@
-import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
+import API from '../../../configs/API';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { Button } from '../../../commons';
 import ConfirmUnitDeletion from '../index';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../utils/Route';
+import { SCProvider } from '../../../context';
+import { ToastBottomHelper } from '../../../utils/Utils';
 import _TextInput from '../../../commons/Form/TextInput';
-import { TouchableOpacity } from 'react-native';
-import { AccessibilityLabel } from '../../../configs/Constants';
-import API from '../../../configs/API';
 import api from '../../../utils/Apis/axios';
-import MockAdapter from 'axios-mock-adapter';
+import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 const wrapComponent = (route, navigation) => (
@@ -21,7 +24,8 @@ const wrapComponent = (route, navigation) => (
 describe('Test ConfirmUnitDeletion', () => {
   let tree;
   let route;
-
+  const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+  const mockNavigate = useNavigation().navigate;
   beforeAll(() => {
     route = {
       params: {
@@ -31,6 +35,10 @@ describe('Test ConfirmUnitDeletion', () => {
       },
     };
   });
+  beforeEach(() => {
+    spyToast.mockClear();
+    mockNavigate.mockClear();
+  });
 
   it('test render ConfirmUnitDeletion', async () => {
     await act(async () => {
@@ -43,7 +51,8 @@ describe('Test ConfirmUnitDeletion', () => {
       textInput.props.onChange();
     });
   });
-  it('Onpress button ConfirmUnitDeletion ', async () => {
+  it('Onpress button ConfirmUnitDeletion success', async () => {
+    mock.onDelete(API.UNIT.MANAGE_UNIT(10)).reply(204);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
@@ -52,16 +61,63 @@ describe('Test ConfirmUnitDeletion', () => {
     const touchableOpacity = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON &&
-        el.type === TouchableOpacity
+          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON && el.type === Button
     );
     const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('YES');
+    });
     await act(async () => {
       touchableOpacity.props.onPress();
     });
+    expect(spyToast).toHaveBeenLastCalledWith('Unit was deleted successfully.');
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+  });
+
+  it('Onpress button ConfirmUnitDeletion response error', async () => {
+    mock.onDelete(API.UNIT.MANAGE_UNIT(10)).reply(400);
     await act(async () => {
-      textInput.props.onChange();
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touchableOpacity = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON && el.type === Button
+    );
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('YES');
+    });
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(spyToast).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('Onpress button ConfirmUnitDeletion wrong text confirm', async () => {
+    mock.onDelete(API.UNIT.MANAGE_UNIT(10)).reply(204);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touchableOpacity = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON && el.type === Button
+    );
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('XXX');
+    });
+    await act(async () => {
+      touchableOpacity.props.onPress();
     });
-    mock.onDelete(API.UNIT.MANAGE_UNIT(1)).reply(204);
+    expect(spyToast).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+    expect(textInput.props.errorText).toEqual('Please enter correct');
   });
 });

package/src/screens/ConfirmUnitDeletion/index.js

@@ -1,31 +1,31 @@
+import { API, Colors } from '../../configs';
 import React, { useCallback, useContext, useState } from 'react';
-import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import styles from './styles';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-import Text from '../../commons/Text';
-import { API, Colors } from '../../configs';
-import _TextInput from '../../commons/Form/TextInput';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { Action } from '../../context/actionType';
 import { Button } from '../../commons';
 import Routes from '../../utils/Route';
-import { axiosDelete } from '../../utils/Apis/axios';
-import { ToastBottomHelper } from '../../utils/Utils';
-import { AccessibilityLabel } from '../../configs/Constants';
 import { SCContext } from '../../context';
-import { Action } from '../../context/actionType';
+import Text from '../../commons/Text';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { View } from 'react-native';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import _TextInput from '../../commons/Form/TextInput';
+import { axiosDelete } from '../../utils/Apis/axios';
+import styles from './styles';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const ConfirmUnitDeletion = ({ route }) => {
   const { setAction } = useContext(SCContext);
   const t = useTranslations();
   const { unit } = route?.params || {};
   const navigation = useNavigation();
-  const [confirm, setConfrim] = useState('');
+  const [confirm, setConfirm] = useState('');
   const [errorText, setErrorText] = useState();
 
   const onChangePassword = useCallback((value) => {
-    setConfrim(value);
+    setConfirm(value);
   }, []);
 
   const onSendPress = useCallback(async () => {

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from '../../../commons';
+import { TitleCheckBox } from '.';
+import { View } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ConfigItem = ({ isChecked, item, onSelect }) => {
+  const t = useTranslations();
+  return (
+    <View style={styles.wrap}>
+      <TitleCheckBox
+        isChecked={isChecked}
+        item={item}
+        onSelect={onSelect}
+        checkBoxStyle={styles.wrapCheckBoxStyle}
+      />
+      <Text>{item?.isConfig ? t('view_only') : t('can_control')}</Text>
+    </View>
+  );
+};
+
+export default ConfigItem;
+
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  wrapCheckBoxStyle: {
+    marginLeft: -10,
+  },
+});

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

@@ -0,0 +1,77 @@
+import { Colors, Images } from '../../../configs';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { AccessibilityLabel } from '../../../configs/Constants';
+import FImage from '../../../commons/FImage';
+import IconComponent from '../../../commons/IconComponent';
+import { IconOutline } from '@ant-design/icons-react-native';
+import styles from './Styles/DeviceItemStyles';
+
+const DeviceItem = ({ isChecked, item, onSelect, childrenRender }) => {
+  const { label, key, item: endDeviceItem } = item;
+  const { actions, read_configs, icon_kit, icon } = endDeviceItem;
+  const [isChildExpanded, setIsChildExpanded] = useState(false);
+  const onPressItem = () => {
+    onSelect(item, !isChecked);
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity
+        onPress={onPressItem}
+        accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.ICON_END_DEVICE}-${key}`}
+      >
+        {icon_kit || icon ? (
+          <IconComponent
+            icon={icon_kit || icon}
+            size={20}
+            style={styles.viewLeft}
+          />
+        ) : (
+          <FImage
+            source={Images.defaultEndDeviceIcon}
+            style={styles.viewLeft}
+          />
+        )}
+      </TouchableOpacity>
+      <View style={styles.wrapRight}>
+        <View style={styles.viewRight}>
+          <TouchableOpacity
+            onPress={onPressItem}
+            style={styles.wrapTextIcon}
+            accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.NAME_END_DEVICE}-${key}`}
+          >
+            <Text numberOfLines={1} style={styles.text}>
+              {label}
+            </Text>
+            {isChecked && (
+              <IconOutline
+                name={'check'}
+                color={Colors.Primary}
+                size={20}
+                accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.ICON_CHECK}-${key}`}
+              />
+            )}
+          </TouchableOpacity>
+          <View style={styles.expandView}>
+            {actions?.length + read_configs?.length > 0 && (
+              <IconOutline
+                onPress={() => setIsChildExpanded(!isChildExpanded)}
+                name={isChildExpanded ? 'up' : 'down'}
+                size={20}
+                color={Colors.Gray6}
+                accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.EXPAND_END_DEVICE}-${key}`}
+              />
+            )}
+          </View>
+        </View>
+        <View style={styles.wrapChildren}>
+          {isChildExpanded && childrenRender}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default DeviceItem;

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

@@ -1,16 +1,15 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import Text from '../../../commons/Text';
-import { Colors } from '../../../configs';
 
-import styles from './Styles/ItemChangeRoleStyles';
+import { Colors } from '../../../configs';
 import { RadioCircle } from '../../../commons';
+import Text from '../../../commons/Text';
+import styles from './Styles/ItemChangeRoleStyles';
 
 const ItemChangeRole = ({
   isChecked,
   onPress,
   wrapStyle,
-  wrapCheckBoxStyle,
   icon,
   title = '',
   message = '',