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

package/assets/images/Device/button-lock.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0495 3.90313C22.0112 3.88385 21.9687 3.87473 21.9259 3.87662C21.8831 3.87852 21.8415 3.89138 21.8051 3.91397C21.7687 3.93656 21.7388 3.96811 21.7181 4.00561C21.6974 4.04311 21.6867 4.0853 21.687 4.12813V6.13438C21.687 6.30625 21.7776 6.46562 21.9213 6.55937C22.626 7.00293 23.2781 7.52502 23.8651 8.11563C24.887 9.14063 25.6901 10.3313 26.2495 11.6563C26.828 13.0279 27.1245 14.502 27.1213 15.9906C27.1213 17.4938 26.8276 18.9531 26.2495 20.325C25.6907 21.6481 24.881 22.8504 23.8651 23.8656C22.8525 24.8841 21.6509 25.6951 20.3276 26.2531C18.9588 26.8344 17.4995 27.1281 15.9995 27.1281C14.4995 27.1281 13.0401 26.8344 11.6713 26.2531C10.348 25.6951 9.14638 24.8841 8.13384 23.8656C7.11791 22.8504 6.3082 21.6481 5.74946 20.325C5.17097 18.9533 4.87446 17.4793 4.87759 15.9906C4.87759 14.4875 5.17134 13.0281 5.74946 11.6562C6.30884 10.3313 7.11196 9.14063 8.13384 8.11563C8.72759 7.52188 9.37759 7.00312 10.0776 6.55937C10.2245 6.46875 10.312 6.30625 10.312 6.13438V4.125C10.312 3.9375 10.1151 3.81875 9.94946 3.9C5.57759 6.1 2.56196 10.6031 2.49946 15.8219C2.41196 23.2844 8.51509 29.4844 15.9745 29.5C23.4432 29.5156 29.4995 23.4594 29.4995 15.9875C29.4995 10.7 26.4682 6.12188 22.0495 3.90313ZM14.9995 17.5H16.9995C17.137 17.5 17.2495 17.3875 17.2495 17.25V2.75C17.2495 2.6125 17.137 2.5 16.9995 2.5H14.9995C14.862 2.5 14.7495 2.6125 14.7495 2.75L14.7495 17.25C14.7495 17.3875 14.862 17.5 14.9995 17.5Z" fill="#00979D"/>
+</svg>

package/assets/images/Device/button-unlock.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0495 3.90313C22.0112 3.88385 21.9687 3.87473 21.9259 3.87662C21.8831 3.87852 21.8415 3.89138 21.8051 3.91397C21.7687 3.93656 21.7388 3.96811 21.7181 4.00561C21.6974 4.04311 21.6867 4.0853 21.687 4.12813V6.13438C21.687 6.30625 21.7776 6.46562 21.9213 6.55937C22.626 7.00293 23.2781 7.52502 23.8651 8.11563C24.887 9.14063 25.6901 10.3313 26.2495 11.6563C26.828 13.0279 27.1245 14.502 27.1213 15.9906C27.1213 17.4938 26.8276 18.9531 26.2495 20.325C25.6907 21.6481 24.881 22.8504 23.8651 23.8656C22.8525 24.8841 21.6509 25.6951 20.3276 26.2531C18.9588 26.8344 17.4995 27.1281 15.9995 27.1281C14.4995 27.1281 13.0401 26.8344 11.6713 26.2531C10.348 25.6951 9.14638 24.8841 8.13384 23.8656C7.11791 22.8504 6.3082 21.6481 5.74946 20.325C5.17097 18.9533 4.87446 17.4793 4.87759 15.9906C4.87759 14.4875 5.17134 13.0281 5.74946 11.6562C6.30884 10.3313 7.11196 9.14063 8.13384 8.11563C8.72759 7.52188 9.37759 7.00312 10.0776 6.55937C10.2245 6.46875 10.312 6.30625 10.312 6.13438V4.125C10.312 3.9375 10.1151 3.81875 9.94946 3.9C5.57759 6.1 2.56196 10.6031 2.49946 15.8219C2.41196 23.2844 8.51509 29.4844 15.9745 29.5C23.4432 29.5156 29.4995 23.4594 29.4995 15.9875C29.4995 10.7 26.4682 6.12188 22.0495 3.90313ZM14.9995 17.5H16.9995C17.137 17.5 17.2495 17.3875 17.2495 17.25V2.75C17.2495 2.6125 17.137 2.5 16.9995 2.5H14.9995C14.862 2.5 14.7495 2.6125 14.7495 2.75L14.7495 17.25C14.7495 17.3875 14.862 17.5 14.9995 17.5Z" fill="#F5222D"/>
+</svg>

package/assets/images/Event.svg

@@ -0,0 +1,9 @@
+<svg width="22" height="40" viewBox="0 0 22 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.4995 0H6.49908L0.500977 21.5962H6.51129L1.4009 40H3.20118L20.5983 18.4029H11.785L21.4995 0Z" fill="url(#paint0_linear_8208_3875)"/>
+<defs>
+<linearGradient id="paint0_linear_8208_3875" x1="0.500977" y1="0" x2="33.409" y2="17.2947" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B6B9F"/>
+<stop offset="1" stop-color="#D5FFCB"/>
+</linearGradient>
+</defs>
+</svg>

package/assets/images/brightness.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 3.90845C8.79471 3.90824 7.61636 4.26551 6.61406 4.93507C5.61177 5.60463 4.83056 6.55639 4.36924 7.66998C3.90791 8.78357 3.78721 10.009 4.02239 11.1912C4.25757 12.3734 4.83807 13.4593 5.69046 14.3115C6.54286 15.1638 7.62885 15.7441 8.81109 15.979C9.99333 16.214 11.2187 16.0931 12.3322 15.6316C13.4457 15.1701 14.3974 14.3887 15.0667 13.3863C15.7361 12.3839 16.0932 11.2055 16.0928 10.0001C16.0922 8.38449 15.4501 6.83522 14.3076 5.6929C13.1651 4.55058 11.6157 3.90872 10.0001 3.90845ZM10.0001 14.6376C9.08332 14.6378 8.18709 14.3662 7.4247 13.8571C6.66232 13.3479 6.06802 12.6242 5.71696 11.7773C5.36589 10.9304 5.27383 9.99847 5.4524 9.09928C5.63097 8.20008 6.07216 7.37403 6.72019 6.72557C7.36821 6.07711 8.19397 5.63536 9.09304 5.45618C9.99212 5.277 10.9241 5.36844 11.7712 5.71893C12.6184 6.06943 13.3425 6.66324 13.8522 7.42528C14.3618 8.18731 14.634 9.08336 14.6344 10.0001C14.6336 11.2293 14.1452 12.4079 13.2763 13.2773C12.4075 14.1467 11.2292 14.636 10.0001 14.6376Z" fill="#BFBFBF"/>
+<path d="M9.37419 0.866699H10.6242C10.6936 0.866699 10.7284 0.901421 10.7284 0.970866V2.96774C10.7284 3.03719 10.6936 3.07191 10.6242 3.07191H9.37419C9.30474 3.07191 9.27002 3.03719 9.27002 2.96774V0.970866C9.27002 0.901421 9.30474 0.866699 9.37419 0.866699Z" fill="#BFBFBF"/>
+<path d="M3.09933 3.98419L3.98321 3.10031C4.03232 3.0512 4.08142 3.0512 4.13053 3.10031L5.54253 4.51231C5.59164 4.56141 5.59164 4.61052 5.54253 4.65962L4.65865 5.54351C4.60954 5.59261 4.56044 5.59261 4.51133 5.54351L3.09933 4.1315C3.05022 4.0824 3.05022 4.03329 3.09933 3.98419Z" fill="#BFBFBF"/>
+<path d="M0.970866 9.27197H2.96774C3.03719 9.27197 3.07191 9.3067 3.07191 9.37614V10.6261C3.07191 10.6956 3.03719 10.7303 2.96774 10.7303H0.970866C0.901421 10.7303 0.866699 10.6956 0.866699 10.6261V9.37614C0.866699 9.3067 0.901421 9.27197 0.970866 9.27197Z" fill="#BFBFBF"/>
+<path d="M3.10079 15.8697L4.5128 14.4577C4.5619 14.4086 4.61101 14.4086 4.66011 14.4577L5.54399 15.3416C5.5931 15.3907 5.5931 15.4398 5.54399 15.4889L4.13199 16.9009C4.08289 16.95 4.03378 16.95 3.98468 16.9009L3.10079 16.017C3.05169 15.9679 3.05169 15.9188 3.10079 15.8697Z" fill="#BFBFBF"/>
+<path d="M9.37614 16.9282H10.6261C10.6956 16.9282 10.7303 16.9629 10.7303 17.0324V19.0293C10.7303 19.0987 10.6956 19.1334 10.6261 19.1334H9.37614C9.3067 19.1334 9.27197 19.0987 9.27197 19.0293V17.0324C9.27197 16.9629 9.3067 16.9282 9.37614 16.9282Z" fill="#BFBFBF"/>
+<path d="M14.4572 15.3404L15.3411 14.4565C15.3902 14.4074 15.4393 14.4074 15.4884 14.4565L16.9004 15.8685C16.9496 15.9176 16.9496 15.9667 16.9004 16.0158L16.0166 16.8997C15.9675 16.9488 15.9184 16.9488 15.8692 16.8997L14.4572 15.4877C14.4081 15.4386 14.4081 15.3895 14.4572 15.3404Z" fill="#BFBFBF"/>
+<path d="M17.0324 9.26978H19.0293C19.0987 9.26978 19.1334 9.3045 19.1334 9.37394V10.6239C19.1334 10.6934 19.0987 10.7281 19.0293 10.7281H17.0324C16.9629 10.7281 16.9282 10.6934 16.9282 10.6239V9.37394C16.9282 9.3045 16.9629 9.26978 17.0324 9.26978Z" fill="#BFBFBF"/>
+<path d="M14.4558 4.51109L15.8678 3.09908C15.9169 3.04998 15.966 3.04998 16.0151 3.09908L16.899 3.98297C16.9481 4.03207 16.9481 4.08118 16.899 4.13028L15.487 5.54229C15.4379 5.59139 15.3888 5.59139 15.3397 5.54229L14.4558 4.6584C14.4067 4.6093 14.4067 4.56019 14.4558 4.51109Z" fill="#BFBFBF"/>
+<path d="M9.89605 6.07715C8.87128 6.10077 7.89643 6.52444 7.18002 7.25756C6.4636 7.99068 6.0625 8.97503 6.0625 10.0001C6.0625 11.0251 6.4636 12.0095 7.18002 12.7426C7.89643 13.4757 8.87128 13.8994 9.89605 13.923C9.92367 13.923 9.95017 13.912 9.9697 13.8925C9.98924 13.8729 10.0002 13.8464 10.0002 13.8188V6.18132C10.0002 6.15369 9.98924 6.12719 9.9697 6.10766C9.95017 6.08812 9.92367 6.07715 9.89605 6.07715Z" fill="#BFBFBF"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.83",
+  "version": "0.2.86",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -174,6 +174,7 @@
     "react-native-parsed-text": "^0.0.22",
     "react-native-permissions": "^2.1.5",
     "react-native-popover-view": "^4.0.3",
+    "react-native-progress": "^5.0.0",
     "react-native-reanimated": "1.10.1",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
@@ -186,8 +187,9 @@
     "react-native-udp": "^4.1.3",
     "react-native-unimodules": "^0.11.0",
     "react-native-version-check": "^3.4.2",
-    "react-native-vlc-media-player": "https://github.com/razorRun/react-native-vlc-media-player.git",
+    "react-native-vlc-media-player": "^1.0.39",
     "react-native-webview": "^10.9.3",
+    "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "^4.5.0",
     "react-navigation": "^2.2.0",

package/src/Images/Common/SuccessfullyConnected.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8437 11.0312H20.3781C20.0593 11.0312 19.7562 11.1844 19.5687 11.4469L14.6562 18.2594L12.4312 15.1719C12.2437 14.9125 11.9437 14.7563 11.6218 14.7563H10.1562C9.95303 14.7563 9.83428 14.9875 9.95303 15.1531L13.8468 20.5531C13.9388 20.6815 14.06 20.7861 14.2005 20.8583C14.341 20.9305 14.4967 20.9681 14.6546 20.9681C14.8125 20.9681 14.9682 20.9305 15.1087 20.8583C15.2492 20.7861 15.3704 20.6815 15.4624 20.5531L22.0437 11.4281C22.1656 11.2625 22.0468 11.0312 21.8437 11.0312V11.0312Z" fill="#52C41A"/>
+<path d="M16 2C8.26875 2 2 8.26875 2 16C2 23.7312 8.26875 30 16 30C23.7312 30 30 23.7312 30 16C30 8.26875 23.7312 2 16 2ZM16 27.625C9.58125 27.625 4.375 22.4187 4.375 16C4.375 9.58125 9.58125 4.375 16 4.375C22.4187 4.375 27.625 9.58125 27.625 16C27.625 22.4187 22.4187 27.625 16 27.625Z" fill="#52C41A"/>
+</svg>

package/src/commons/ActionGroup/LightActionTemplate.js

@@ -0,0 +1,103 @@
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { Alert, View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './LightActionTemplateStyles';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import { Card } from '../CardShadow';
+import ColorPicker from 'react-native-wheel-color-picker';
+import SvgBrightness from '../../../assets/images/brightness.svg';
+import Slider from 'react-native-slider';
+import OnOffButtonTemplate from './OnOffTemplate/OnOffButtonTemplate';
+
+const LightActionTemplate = memo(({ actionGroup, doAction, sensor }) => {
+  const t = useTranslations();
+  const { configuration, title } = actionGroup;
+  const dataColor = useMemo(() => {
+    return configuration?.config_color;
+  }, [configuration]);
+
+  const dataBrightness = useMemo(() => {
+    return configuration?.config_brightness;
+  }, [configuration]);
+
+  const [valueComplete, setValueComplete] = useState(dataBrightness || 0);
+  const [value, setValue] = useState(dataBrightness || 0);
+  const [color, setColor] = useState(dataColor || '');
+  const [isOn] = useState(true);
+
+  const onChangeColor = useCallback(
+    (color) => {
+      setColor(color);
+      Alert.alert(t('feature_under_development'));
+    },
+    [t]
+  );
+
+  const onChangeBrightness = useCallback(
+    (value) => {
+      setValueComplete(value);
+      Alert.alert(t('feature_under_development'));
+    },
+    [t]
+  );
+
+  const triggerAction = useCallback(() => {
+    Alert.alert(t('feature_under_development'));
+  }, [t]);
+
+  return (
+    <View>
+      <OnOffButtonTemplate
+        isOn={isOn}
+        triggerAction={triggerAction}
+        actionGroup={actionGroup}
+        isLight={true}
+      />
+      <Card title={!!title && t(title)}>
+        <View style={styles.viewPickColor}>
+          <ColorPicker
+            style={styles.colorPicker}
+            sliderHidden={true}
+            swatches={false}
+            color={color}
+            onColorChangeComplete={(color) => onChangeColor(color)}
+            thumbSize={16}
+          />
+        </View>
+        <View style={styles.viewBrightness}>
+          <View style={styles.LeftBrightness}>
+            <SvgBrightness />
+            <Text type="H4" style={styles.LeftTextBrightness}>
+              {t('brightness')}
+            </Text>
+          </View>
+          <View style={styles.RightBrightness}>
+            <View style={styles.slider}>
+              <Slider
+                value={valueComplete}
+                onSlidingComplete={(value) => onChangeBrightness(value)}
+                onValueChange={(value) => setValue(value)}
+                step={1}
+                minimumValue={0}
+                maximumValue={100}
+                thumbTintColor={Colors.Gray3}
+                minimumTrackTintColor={Colors.Primary}
+                maximumTrackTintColor={Colors.Gray4}
+                trackStyle={styles.trackSlider}
+                thumbStyle={styles.thumbSlider}
+              />
+            </View>
+            <View style={styles.valuePercent}>
+              <Text type="Label" style={styles.textValuePercent}>
+                {`${value || 0}%`}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </Card>
+    </View>
+  );
+});
+
+export default LightActionTemplate;

package/src/commons/ActionGroup/LightActionTemplateStyles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 30,
+  },
+  viewPickColor: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  viewBrightness: {
+    paddingTop: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  slider: {
+    width: 131,
+  },
+  trackSlider: {
+    height: 8,
+    borderRadius: 30,
+  },
+  thumbSlider: {
+    backgroundColor: Colors.Primary,
+    width: 20,
+    height: 20,
+  },
+  colorPicker: {
+    width: '100%',
+    height: 'auto',
+  },
+  valuePercent: {
+    width: 40,
+    flexDirection: 'row',
+    paddingLeft: 16,
+  },
+  textValuePercent: {
+    width: 50,
+  },
+  LeftBrightness: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  LeftTextBrightness: {
+    paddingTop: 4,
+    paddingLeft: 8,
+  },
+  RightBrightness: {
+    flex: 1.2,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/commons/ActionGroup/OnOffSmartLock.js

@@ -0,0 +1,48 @@
+import React, { memo, useCallback, useState } from 'react';
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { Section } from '../Section';
+import Text from '../Text';
+import styles from './OnOffSmartLockStyle';
+import ButtonLock from '../../../assets/images/Device/button-lock.svg';
+import ButtonUnLock from '../../../assets/images/Device/button-unlock.svg';
+
+const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
+  const t = useTranslations();
+  const [active, setActive] = useState(true);
+
+  const handleClickButton = useCallback(() => {
+    setActive(!active);
+  }, [active]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.wrap}>
+        <Section style={styles.section}>
+          <View style={styles.wrapController}>
+            <Text style={styles.textController}>{t('controller')}</Text>
+          </View>
+          <View style={styles.wrapButtonSmartLock}>
+            <TouchableOpacity onPress={handleClickButton}>
+              {active ? (
+                <ButtonLock style={styles.buttonSmartLock} />
+              ) : (
+                <ButtonUnLock style={styles.buttonSmartLock} />
+              )}
+            </TouchableOpacity>
+            <Text style={styles.textSmartLock}>
+              {active ? t('lock') : t('unlock')}
+            </Text>
+          </View>
+          <View style={styles.wrapStatus}>
+            <Text style={styles.textStatus}>
+              {active ? t('door_is_open') : t('door_is_close')}
+            </Text>
+          </View>
+        </Section>
+      </View>
+    </SafeAreaView>
+  );
+});
+
+export default OnOffSmartLock;

package/src/commons/ActionGroup/OnOffSmartLockStyle.js

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  wrap: {
+    paddingHorizontal: 16,
+  },
+  section: {
+    borderRadius: 10,
+  },
+  wrapController: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  textController: {
+    color: Colors.Gray8,
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  wrapButtonSmartLock: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.Gray2,
+    borderRadius: 10,
+    borderColor: Colors.Gray4,
+    borderWidth: 1,
+  },
+  buttonSmartLock: {
+    marginTop: 14,
+  },
+  textSmartLock: {
+    color: Colors.Gray9,
+    fontSize: 14,
+    marginTop: 8,
+    marginBottom: 18,
+  },
+  wrapStatus: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textStatus: {
+    color: Colors.Gray8,
+    fontSize: 14,
+    marginTop: 16,
+  },
+});

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -6,37 +6,39 @@ import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
 
-const OnOffButtonTemplate = memo(({ isOn, triggerAction, actionGroup }) => {
-  const { configuration } = actionGroup;
+const OnOffButtonTemplate = memo(
+  ({ isOn, triggerAction, actionGroup, isLight = false }) => {
+    const { configuration } = actionGroup;
 
-  return (
-    <>
-      <View style={styles.barrierControlContainer}>
-        <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
-          <View style={styles.smallCircle}>
-            <Icon
-              name={isOn ? configuration.icon_on : configuration.icon_off}
-              size={44}
-              color={isOn ? Colors.Green7 : Colors.Gray6}
-            />
-            <Text
-              style={[
-                styles.textBig,
-                { color: isOn ? Colors.Gray8 : Colors.Gray6 },
-              ]}
-            >
-              {isOn ? configuration.text_on : configuration.text_off}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-      {!!actionGroup.title && (
-        <Text size={20} semibold center>
-          {actionGroup.title}
-        </Text>
-      )}
-    </>
-  );
-});
+    return (
+      <>
+        <View style={styles.barrierControlContainer}>
+          <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
+            <View style={styles.smallCircle}>
+              <Icon
+                name={isOn ? configuration.icon_on : configuration.icon_off}
+                size={44}
+                color={isOn ? Colors.Green7 : Colors.Gray6}
+              />
+              <Text
+                style={[
+                  styles.textBig,
+                  { color: isOn ? Colors.Gray8 : Colors.Gray6 },
+                ]}
+              >
+                {isOn ? configuration.text_on : configuration.text_off}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        {!!actionGroup.title && !isLight && (
+          <Text size={20} semibold center>
+            {actionGroup.title}
+          </Text>
+        )}
+      </>
+    );
+  }
+);
 
 export default OnOffButtonTemplate;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import Slider from 'react-native-slider';
+import ColorPicker from 'react-native-wheel-color-picker';
+
+import LightActionTemplate from '../LightActionTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <LightActionTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+  </SCProvider>
+);
+
+describe('Test CurtainButtonTemplate', () => {
+  const actionGroup = {
+    configuration: {
+      action: 'b1be40f2-f482-4796-8c1a-0431ab49ab5a',
+      action_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [Array],
+        icon: '123231',
+        icon_kit: null,
+        id: 5,
+        key: 'b1be40f2-f482-4796-8c1a-0431ab49ab5a',
+        lg_actions: [Array],
+        name: 'change color',
+      },
+      config_brightness: 18,
+      config_color: 17,
+    },
+    id: 2,
+    template: 'light_action_template',
+    title: 'controller',
+  };
+
+  let wrapper;
+
+  test('render LightActionTemplate', async () => {
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup));
+    });
+    const instance = wrapper.root;
+    const slider = instance.findAllByType(Slider);
+    const colorPicker = instance.findAllByType(ColorPicker);
+    expect(slider.length).toEqual(1);
+    expect(colorPicker.length).toEqual(1);
+    await act(async () => {
+      await slider[0].props.onSlidingComplete();
+    });
+    await act(async () => {
+      await colorPicker[0].props.onColorChangeComplete();
+    });
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -10,6 +10,8 @@ import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
 import CurtainButtonTemplate from './CurtainButtonTemplate';
 import SmartTiviActionTemplate from './SmartTiviActionTemplate/SmartTiviActionTemplate';
+import LightActionTemplate from './LightActionTemplate';
+import OnOffSmartLock from './OnOffSmartLock';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -20,6 +22,8 @@ export const getActionComponent = (template) => {
     case 'OnOffButtonActionTemplate':
     case 'OnOffSimpleActionTemplate':
       return OnOffTemplate;
+    case 'OnOffButtonActionSmartLock':
+      return OnOffSmartLock;
     case 'one_button_action_template': // todo refactor later with backend
     case 'OneBigButtonActionTemplate':
       return OneBigButtonTemplate;
@@ -35,6 +39,8 @@ export const getActionComponent = (template) => {
       return CurtainButtonTemplate;
     case 'SmartTiviActionTemplate':
       return SmartTiviActionTemplate;
+    case 'light_action_template':
+      return LightActionTemplate;
     default:
       return null;
   }

package/src/commons/Automate/ItemAutomate.js

@@ -38,7 +38,7 @@ const ItemAutomate = ({
         <View style={styles.wrapIcon}>
           <Icon />
         </View>
-        <View>
+        <View style={styles.wrapTitle}>
           <Text type="H4" bold>
             {t(item?.title)}
           </Text>

package/src/commons/Automate/ItemAutomateStyles.js

@@ -28,6 +28,10 @@ export default StyleSheet.create({
   },
   wrapIcon: {
     justifyContent: 'center',
-    marginRight: 16,
+    flexDirection: 'row',
+    width: 50,
+  },
+  wrapTitle: {
+    marginLeft: 10,
   },
 });

package/src/commons/CardShadow/index.js

@@ -3,10 +3,13 @@ import { View } from 'react-native';
 import Text from '../../commons/Text';
 import styles from './styles';
 
-const Card = memo(({ title, children, style }) => {
+const Card = memo(({ title, children, style, rightHeaderComponent }) => {
   return (
     <View style={[styles.card, style]}>
-      {title && <Text style={styles.headerTitle}>{title}</Text>}
+      <View style={styles.headerTitle}>
+        {!!title && <Text style={styles.headerLeft}>{title}</Text>}
+        {!!rightHeaderComponent && rightHeaderComponent}
+      </View>
       {children}
     </View>
   );

package/src/commons/CardShadow/styles.js

@@ -17,9 +17,8 @@ export default StyleSheet.create({
     shadowRadius: 3,
     elevation: 6,
   },
-  headerTitle: {
-    display: 'flex',
-    alignItems: 'flex-end',
+  headerTitle: { justifyContent: 'space-between', flexDirection: 'row' },
+  headerLeft: {
     color: Colors.Gray8,
     fontSize: 16,
     lineHeight: 24,

package/src/commons/ConnectingProcess/DeviceItem/DeviceItem.js

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import styles from './DeviceItemStyles';
+import FImage from '../../FImage';
+import Text from '../../Text';
+
+const DeviceItem = memo(({ icon, name }) => {
+  return (
+    <View style={styles.container}>
+      {!!icon && <FImage source={{ uri: icon }} style={styles.iconSensor} />}
+      <Text style={styles.textItem}>{name}</Text>
+    </View>
+  );
+});
+
+export default DeviceItem;

package/src/commons/ConnectingProcess/DeviceItem/DeviceItemStyles.js

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { Constants, Colors } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 5;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 60;
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: 15,
+    borderRadius: 10,
+    width: 250,
+    height: heightItem,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    backgroundColor: Colors.White,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+    flexDirection: 'row',
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 6,
+    paddingLeft: 30,
+    paddingRight: 30,
+  },
+  iconSensor: {
+    width: 32,
+    height: 32,
+    resizeMode: 'contain',
+  },
+  textItem: {
+    marginLeft: 15,
+    fontSize: 16,
+  },
+});

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import ConnectingProcess from '../index';
+import { SafeAreaView } from 'react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingProcess route={route} />
+  </SCProvider>
+);
+describe('Test ConnectingProcess', () => {
+  let tree;
+  test('create ConnectingProcess', () => {
+    const scan_sensor_data = { imei: 'SENSOR-afasdfas' };
+    const gateway = { id: 1, name: 'gateway' };
+    const station = { id: 1, icon_kit: 'a', name: 'station' };
+    const route = { params: { scan_sensor_data, gateway, station } };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const safeAreaView = instance.findAllByType(SafeAreaView);
+    expect(safeAreaView).toHaveLength(1);
+  });
+});