From 967edde51d85d6fc377c135b4e79d437f1cf7508 Mon Sep 17 00:00:00 2001
From: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
Date: Mon, 19 Apr 2021 14:05:20 +0800
Subject: [PATCH 1/5] Add time condition in scenes

---
 front/src/config/i18n/en.json                 |   9 +-
 front/src/config/i18n/fr.json                 |   9 +-
 .../routes/scene/edit-scene/ActionCard.jsx    |  13 +-
 .../scene/edit-scene/actions/CheckTime.jsx    | 134 ++++++++++++++++++
 .../actions/ChooseActionTypeCard.jsx          |   3 +-
 server/lib/scene/scene.actions.js             |  38 +++++
 server/models/scene.js                        |   5 +
 .../lib/scene/scene.executeActions.test.js    | 100 ++++++++++++-
 server/utils/constants.js                     |   1 +
 9 files changed, 307 insertions(+), 5 deletions(-)
 create mode 100644 front/src/routes/scene/edit-scene/actions/CheckTime.jsx

diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
index d05a571da7..e137b17569 100644
--- a/front/src/config/i18n/en.json
+++ b/front/src/config/i18n/en.json
@@ -903,6 +903,12 @@
         "orText": "OR",
         "orButton": "+ OR"
       },
+      "checkTime": {
+        "description": "The scene will continue only if current time is between the selected limits, in the selected days. If a field is left empty, it'll not be taken into account.",
+        "beforeLabel": "Before",
+        "afterLabel": "After",
+        "daysOfTheWeekLabel": "Weekdays"
+      },
       "userPresence": {
         "userLabel": "User",
         "houseLabel": "House",
@@ -962,7 +968,8 @@
         "stop": "Stop service"
       },
       "condition": {
-        "only-continue-if": "Only continue if"
+        "only-continue-if": "Only continue if",
+        "check-time": "Time condition"
       },
       "user": {
         "set-seen-at-home": "User seen at home",
diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
index 7948b6a045..521ba6fb2d 100644
--- a/front/src/config/i18n/fr.json
+++ b/front/src/config/i18n/fr.json
@@ -903,6 +903,12 @@
         "orText": "OU",
         "orButton": "+ OU"
       },
+      "checkTime": {
+        "description": "La scène continuera si l'heure actuelle est comprise entre les bornes spécifiées, aux jours spécifiés. Si une condition est vide, elle ne sera pas prise en compte.",
+        "beforeLabel": "Avant",
+        "afterLabel": "Après",
+        "daysOfTheWeekLabel": "Jour de la semaine"
+      },
       "userPresence": {
         "userLabel": "Utilisateur",
         "houseLabel": "Maison",
@@ -962,7 +968,8 @@
         "stop": "Arrêter le service"
       },
       "condition": {
-        "only-continue-if": "Continuer seulement si"
+        "only-continue-if": "Continuer seulement si",
+        "check-time": "Condition temporelle"
       },
       "user": {
         "set-seen-at-home": "Utilisateur vu à la maison",
diff --git a/front/src/routes/scene/edit-scene/ActionCard.jsx b/front/src/routes/scene/edit-scene/ActionCard.jsx
index aac0d9b7b6..22434b1a8a 100644
--- a/front/src/routes/scene/edit-scene/ActionCard.jsx
+++ b/front/src/routes/scene/edit-scene/ActionCard.jsx
@@ -15,6 +15,7 @@ import TurnOnOffSwitchParams from './actions/TurnOnOffSwitchParams';
 import UserPresence from './actions/UserPresence';
 import HttpRequest from './actions/HttpRequest';
 import CheckUserPresence from './actions/CheckUserPresence';
+import CheckTime from './actions/CheckTime';
 
 const deleteActionFromColumn = (columnIndex, rowIndex, deleteAction) => () => {
   deleteAction(columnIndex, rowIndex);
@@ -32,7 +33,8 @@ const ACTION_ICON = {
   [ACTIONS.USER.SET_SEEN_AT_HOME]: 'fe fe-home',
   [ACTIONS.USER.SET_OUT_OF_HOME]: 'fe fe-home',
   [ACTIONS.HTTP.REQUEST]: 'fe fe-link',
-  [ACTIONS.USER.CHECK_PRESENCE]: 'fe fe-home'
+  [ACTIONS.USER.CHECK_PRESENCE]: 'fe fe-home',
+  [ACTIONS.CONDITION.CHECK_TIME]: 'fe fe-watch'
 };
 
 const ActionCard = ({ children, ...props }) => (
@@ -186,6 +188,15 @@ const ActionCard = ({ children, ...props }) => (
             setVariables={props.setVariables}
           />
         )}
+        {props.action.type === ACTIONS.CONDITION.CHECK_TIME && (
+          <CheckTime
+            action={props.action}
+            columnIndex={props.columnIndex}
+            index={props.index}
+            updateActionProperty={props.updateActionProperty}
+            setVariables={props.setVariables}
+          />
+        )}
       </div>
     </div>
   </div>
diff --git a/front/src/routes/scene/edit-scene/actions/CheckTime.jsx b/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
new file mode 100644
index 0000000000..32acb08c7a
--- /dev/null
+++ b/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
@@ -0,0 +1,134 @@
+import Select from 'react-select';
+import { Component } from 'preact';
+import DatePicker from 'react-datepicker';
+import { connect } from 'unistore/preact';
+import { format } from 'date-fns';
+import { Text, Localizer } from 'preact-i18n';
+
+@connect('', {})
+class CheckTime extends Component {
+  handleBeforeTimeChange = time => {
+    const timeFormatted = time ? format(time, 'HH:mm') : undefined;
+    this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'before', timeFormatted);
+  };
+  handleBeforeAfterChange = time => {
+    const timeFormatted = time ? format(time, 'HH:mm') : undefined;
+    this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'after', timeFormatted);
+  };
+  handleDayOfTheWeekChange = options => {
+    const values = options ? options.map(option => option.value) : undefined;
+    this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'days_of_the_week', values);
+  };
+
+  render(props, state) {
+    const { localeSet } = state;
+    const before = this.props.action.before
+      ? new Date().setHours(this.props.action.before.substr(0, 2), this.props.action.before.substr(3, 2))
+      : null;
+    const after = this.props.action.after
+      ? new Date().setHours(this.props.action.after.substr(0, 2), this.props.action.after.substr(3, 2))
+      : null;
+    const daysOfTheWeekOptions = [
+      {
+        value: 'monday',
+        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.monday" />
+      },
+      {
+        value: 'tuesday',
+        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.tuesday" />
+      },
+      {
+        value: 'wednesday',
+        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.wednesday" />
+      },
+      {
+        value: 'thursday',
+        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.thursday" />
+      },
+      {
+        value: 'friday',
+        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.friday" />
+      },
+      {
+        value: 'saturday',
+        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.saturday" />
+      },
+      {
+        value: 'sunday',
+        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.sunday" />
+      }
+    ];
+    const selectedWeekDaysOptions = this.props.action.days_of_the_week
+      ? this.props.action.days_of_the_week.map(day => daysOfTheWeekOptions.find(option => option.value === day))
+      : [];
+    return (
+      <div>
+        <p>
+          <small>
+            <Text id="editScene.actionsCard.checkTime.description" />
+          </small>
+        </p>
+        <div class="row">
+          <div class="col">
+            <div class="form-group">
+              <div class="form-label">
+                <Text id="editScene.actionsCard.checkTime.afterLabel" />
+              </div>
+              <Localizer>
+                <DatePicker
+                  selected={after}
+                  className="form-control"
+                  locale={localeSet}
+                  onChange={this.handleBeforeAfterChange}
+                  placeholderText={<Text id="editScene.actionsCard.checkTime.afterLabel" />}
+                  showTimeSelect
+                  showTimeSelectOnly
+                  isClearable
+                  timeIntervals={5}
+                  timeCaption={<Text id="editScene.actionsCard.checkTime.afterLabel" />}
+                  dateFormat="HH:mm"
+                />
+              </Localizer>
+            </div>
+          </div>
+          <div class="col">
+            <div class="form-group">
+              <div class="form-label">
+                <Text id="editScene.actionsCard.checkTime.beforeLabel" />
+              </div>
+              <Localizer>
+                <DatePicker
+                  selected={before}
+                  className="form-control"
+                  locale={localeSet}
+                  onChange={this.handleBeforeTimeChange}
+                  placeholderText={<Text id="editScene.actionsCard.checkTime.beforeLabel" />}
+                  showTimeSelect
+                  showTimeSelectOnly
+                  isClearable
+                  timeIntervals={5}
+                  timeCaption={<Text id="editScene.actionsCard.checkTime.beforeLabel" />}
+                  dateFormat="HH:mm"
+                />
+              </Localizer>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="form-label">
+            <Text id="editScene.actionsCard.checkTime.daysOfTheWeekLabel" />
+          </div>
+          <Select
+            defaultValue={[]}
+            isMulti
+            value={selectedWeekDaysOptions}
+            onChange={this.handleDayOfTheWeekChange}
+            options={daysOfTheWeekOptions}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CheckTime;
diff --git a/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx b/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx
index 25bf19a563..f21c12cf9f 100644
--- a/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx
+++ b/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx
@@ -17,7 +17,8 @@ const ACTION_LIST = [
   ACTIONS.USER.SET_SEEN_AT_HOME,
   ACTIONS.USER.SET_OUT_OF_HOME,
   ACTIONS.USER.CHECK_PRESENCE,
-  ACTIONS.HTTP.REQUEST
+  ACTIONS.HTTP.REQUEST,
+  ACTIONS.CONDITION.CHECK_TIME
 ];
 
 const TRANSLATIONS = ACTION_LIST.reduce((acc, action) => {
diff --git a/server/lib/scene/scene.actions.js b/server/lib/scene/scene.actions.js
index 285c05082c..4c38301bbd 100644
--- a/server/lib/scene/scene.actions.js
+++ b/server/lib/scene/scene.actions.js
@@ -2,6 +2,7 @@ const Promise = require('bluebird');
 const Handlebars = require('handlebars');
 const set = require('set-value');
 const get = require('get-value');
+const dayjs = require('dayjs');
 const { ACTIONS, DEVICE_FEATURE_CATEGORIES, DEVICE_FEATURE_TYPES } = require('../../utils/constants');
 const { getDeviceFeature } = require('../../utils/device');
 const { AbortScene } = require('../../utils/coreErrors');
@@ -128,6 +129,43 @@ const actionsFunc = {
       throw new AbortScene('CONDITION_NOT_VERIFIED');
     }
   },
+  [ACTIONS.CONDITION.CHECK_TIME]: async (self, action, scope) => {
+    const now = dayjs().tz(self.timezone);
+    if (action.before) {
+      const beforeDate = dayjs()
+        .hour(action.before.substr(0, 2))
+        .minute(action.before.substr(3, 2))
+        .tz(self.timezone);
+      const isBeforeCondition = now.isBefore(beforeDate);
+      if (!isBeforeCondition) {
+        logger.debug(`Condition isBeforeHour not verified. Now = ${now} > beforeDate = ${beforeDate}`);
+        throw new AbortScene('CONDITION_IS_BEFORE_HOUR_NOT_VERIFIED');
+      }
+    }
+    if (action.after) {
+      const afterDate = dayjs()
+        .hour(action.after.substr(0, 2))
+        .minute(action.after.substr(3, 2))
+        .tz(self.timezone);
+      const isAfterCondition = now.isAfter(afterDate);
+      if (!isAfterCondition) {
+        logger.debug(`Condition isAfterHour not verified. Now = ${now} < afterDate = ${afterDate}`);
+        throw new AbortScene('CONDITION_IS_AFTER_HOUR_NOT_VERIFIED');
+      }
+    }
+    if (action.days_of_the_week) {
+      const currentDayOfTheWeek = now.format('dddd').toLowerCase();
+      const isCurrentDayInCondition = action.days_of_the_week.indexOf(currentDayOfTheWeek) !== -1;
+      if (!isCurrentDayInCondition) {
+        logger.debug(
+          `Condition isInDayOfWeek not verified. Current day of the week = ${currentDayOfTheWeek}. Allowed days = ${action.days_of_the_week.join(
+            ',',
+          )}`,
+        );
+        throw new AbortScene('CONDITION_IS_IN_DAYS_OF_WEEK_NOT_VERIFIED');
+      }
+    }
+  },
   [ACTIONS.USER.SET_SEEN_AT_HOME]: async (self, action) => {
     await self.house.userSeen(action.house, action.user);
   },
diff --git a/server/models/scene.js b/server/models/scene.js
index 95eee56078..2d643f8443 100644
--- a/server/models/scene.js
+++ b/server/models/scene.js
@@ -22,6 +22,11 @@ const actionSchema = Joi.array().items(
       url: Joi.string().uri(),
       body: Joi.string(),
       method: Joi.string().valid('get', 'post', 'patch', 'put', 'delete'),
+      days_of_the_week: Joi.array().items(
+        Joi.string().valid('monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'),
+      ),
+      before: Joi.string().regex(/^([0-9]{2}):([0-9]{2})$/),
+      after: Joi.string().regex(/^([0-9]{2}):([0-9]{2})$/),
       request_response_keys: Joi.array().items(Joi.string()),
       headers: Joi.array().items(
         Joi.object().keys({
diff --git a/server/test/lib/scene/scene.executeActions.test.js b/server/test/lib/scene/scene.executeActions.test.js
index 481f38bc49..739eda47fd 100644
--- a/server/test/lib/scene/scene.executeActions.test.js
+++ b/server/test/lib/scene/scene.executeActions.test.js
@@ -1,6 +1,7 @@
-const { assert, fake } = require('sinon');
+const { assert, fake, useFakeTimers } = require('sinon');
 const chaiAssert = require('chai').assert;
 const { expect } = require('chai');
+const dayjs = require('dayjs');
 const EventEmitter = require('events');
 const { ACTIONS } = require('../../../utils/constants');
 const { AbortScene } = require('../../../utils/coreErrors');
@@ -539,4 +540,101 @@ describe('scene.executeActions', () => {
     );
     assert.calledWith(message.sendToUser, 'pepper', 'Temperature in the living room is 15 °C.');
   });
+  it('should execute condition.check-time, and send message because condition is true', async () => {
+    const stateManager = new StateManager(event);
+    const message = {
+      sendToUser: fake.resolves(null),
+    };
+    const scope = {};
+    const todayAt12 = dayjs().hour(12);
+    const fiveMinutesAgo = todayAt12.subtract(5, 'minute');
+    const inFiveMinutes = todayAt12.add(5, 'minute');
+    const clock = useFakeTimers(todayAt12.valueOf());
+    await executeActions(
+      { stateManager, event, message },
+      [
+        [
+          {
+            type: ACTIONS.CONDITION.CHECK_TIME,
+            after: fiveMinutesAgo.format('hh:mm'),
+            before: inFiveMinutes.format('hh:mm'),
+            days_of_the_week: [todayAt12.format('dddd').toLowerCase()],
+          },
+        ],
+        [
+          {
+            type: ACTIONS.MESSAGE.SEND,
+            user: 'pepper',
+            text: 'hello',
+          },
+        ],
+      ],
+      scope,
+    );
+    assert.calledWith(message.sendToUser, 'pepper', 'hello');
+    clock.restore();
+  });
+  it('should abort scene because condition is not verified', async () => {
+    const stateManager = new StateManager(event);
+    const scope = {};
+    const todayAt12 = dayjs().hour(12);
+    const fiveMinutesAgo = todayAt12.subtract(5, 'minute');
+    const clock = useFakeTimers(todayAt12.valueOf());
+    const promise = executeActions(
+      { stateManager, event },
+      [
+        [
+          {
+            type: ACTIONS.CONDITION.CHECK_TIME,
+            before: fiveMinutesAgo.format('hh:mm'),
+          },
+        ],
+      ],
+      scope,
+    );
+    await chaiAssert.isRejected(promise, AbortScene);
+    clock.restore();
+  });
+  it('should abort scene because condition is not verified', async () => {
+    const stateManager = new StateManager(event);
+    const scope = {};
+    const todayAt12 = dayjs().hour(12);
+    const inFiveMinutes = todayAt12.add(5, 'minute');
+    const clock = useFakeTimers(todayAt12.valueOf());
+    const promise = executeActions(
+      { stateManager, event },
+      [
+        [
+          {
+            type: ACTIONS.CONDITION.CHECK_TIME,
+            after: inFiveMinutes.format('hh:mm'),
+          },
+        ],
+      ],
+      scope,
+    );
+    await chaiAssert.isRejected(promise, AbortScene);
+    clock.restore();
+  });
+  it('should abort scene because condition is not verified', async () => {
+    const stateManager = new StateManager(event);
+    const scope = {};
+    const todayAt12 = dayjs().hour(12);
+    const tomorrow = todayAt12.add(1, 'day');
+    const clock = useFakeTimers(todayAt12.valueOf());
+    const promise = executeActions(
+      { stateManager, event },
+      [
+        [
+          {
+            type: ACTIONS.CONDITION.CHECK_TIME,
+            days_of_the_week: [tomorrow.format('dddd').toLowerCase()],
+          },
+        ],
+      ],
+      scope,
+    );
+    await chaiAssert.isRejected(promise, AbortScene);
+    clock.restore();
+  });
 });
diff --git a/server/utils/constants.js b/server/utils/constants.js
index 0b99df9900..9f2d83a408 100644
--- a/server/utils/constants.js
+++ b/server/utils/constants.js
@@ -233,6 +233,7 @@ const ACTIONS = {
   },
   CONDITION: {
     ONLY_CONTINUE_IF: 'condition.only-continue-if',
+    CHECK_TIME: 'condition.check-time',
   },
   USER: {
     SET_SEEN_AT_HOME: 'user.set-seen-at-home',

From 4a0448057cd428eb21632fbfb5b2a8a8a5b112a6 Mon Sep 17 00:00:00 2001
From: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
Date: Thu, 22 Apr 2021 09:55:40 +0800
Subject: [PATCH 2/5] Localize time component + simplify day of the week code

---
 .../scene/edit-scene/actions/CheckTime.jsx    | 44 +++++--------------
 1 file changed, 12 insertions(+), 32 deletions(-)

diff --git a/front/src/routes/scene/edit-scene/actions/CheckTime.jsx b/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
index 32acb08c7a..858e370c36 100644
--- a/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
+++ b/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
@@ -4,8 +4,13 @@ import DatePicker from 'react-datepicker';
 import { connect } from 'unistore/preact';
 import { format } from 'date-fns';
 import { Text, Localizer } from 'preact-i18n';
+import get from 'get-value';
 
-@connect('', {})
+import fr from 'date-fns/locale/fr';
+
+const weekDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+@connect('user', {})
 class CheckTime extends Component {
   handleBeforeTimeChange = time => {
     const timeFormatted = time ? format(time, 'HH:mm') : undefined;
@@ -21,43 +26,18 @@ class CheckTime extends Component {
   };
 
   render(props, state) {
-    const { localeSet } = state;
+    const language = get(this.props, 'user.language');
+    const localeSet = language === 'fr' ? fr : 'en';
     const before = this.props.action.before
       ? new Date().setHours(this.props.action.before.substr(0, 2), this.props.action.before.substr(3, 2))
       : null;
     const after = this.props.action.after
       ? new Date().setHours(this.props.action.after.substr(0, 2), this.props.action.after.substr(3, 2))
       : null;
-    const daysOfTheWeekOptions = [
-      {
-        value: 'monday',
-        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.monday" />
-      },
-      {
-        value: 'tuesday',
-        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.tuesday" />
-      },
-      {
-        value: 'wednesday',
-        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.wednesday" />
-      },
-      {
-        value: 'thursday',
-        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.thursday" />
-      },
-      {
-        value: 'friday',
-        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.friday" />
-      },
-      {
-        value: 'saturday',
-        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.saturday" />
-      },
-      {
-        value: 'sunday',
-        label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.sunday" />
-      }
-    ];
+    const daysOfTheWeekOptions = weekDays.map(weekDay => ({
+      value: weekDay,
+      label: <Text id={`editScene.triggersCard.scheduledTrigger.daysOfTheWeek.${weekDay}`} />
+    }));
     const selectedWeekDaysOptions = this.props.action.days_of_the_week
       ? this.props.action.days_of_the_week.map(day => daysOfTheWeekOptions.find(option => option.value === day))
       : [];

From b19c601a82a7806fb0bbe3cd9e53a2dc5d144c9e Mon Sep 17 00:00:00 2001
From: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
Date: Thu, 22 Apr 2021 10:29:35 +0800
Subject: [PATCH 3/5] Customize cross button

---
 front/package-lock.json                       | 42 +++++++++----------
 front/package.json                            |  2 +-
 .../scene/edit-scene/actions/CheckTime.css    |  3 ++
 .../scene/edit-scene/actions/CheckTime.jsx    |  5 +++
 4 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100644 front/src/routes/scene/edit-scene/actions/CheckTime.css

diff --git a/front/package-lock.json b/front/package-lock.json
index 287c31051b..20a1ddf4ad 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -243,6 +243,15 @@
         "socket.io-client": "^2.3.0"
       }
     },
+    "@hypnosphi/create-react-context": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
+      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "@irojs/iro-core": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@irojs/iro-core/-/iro-core-1.0.3.tgz",
@@ -3970,15 +3979,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "create-react-context": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
-      "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
-      "requires": {
-        "gud": "^1.0.0",
-        "warning": "^4.0.3"
-      }
-    },
     "cropperjs": {
       "version": "1.5.6",
       "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.6.tgz",
@@ -14349,15 +14349,15 @@
       }
     },
     "react-datepicker": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.13.0.tgz",
-      "integrity": "sha512-vUp3tGGT8SwJX5c6hKnhSJFOFjjBgwKQUv9nl7dkhe/viraxrihLikDr/KVDRGYyj/Q1MBvTpOog4fsSly9o9A==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.8.0.tgz",
+      "integrity": "sha512-iFVNEp8DJoX5yEvEiciM7sJKmLGrvE70U38KhpG13XrulNSijeHw1RZkhd/0UmuXR71dcZB/kdfjiidifstZjw==",
       "requires": {
         "classnames": "^2.2.6",
         "date-fns": "^2.0.1",
         "prop-types": "^15.7.2",
-        "react-onclickoutside": "^6.9.0",
-        "react-popper": "^1.3.4"
+        "react-onclickoutside": "^6.10.0",
+        "react-popper": "^1.3.8"
       }
     },
     "react-input-autosize": {
@@ -14379,9 +14379,9 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-onclickoutside": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
-      "integrity": "sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A=="
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz",
+      "integrity": "sha512-7i2L3ef+0ILXpL6P+Hg304eCQswh4jl3ynwR71BSlMU49PE2uk31k8B2GkP6yE9s2D4jTGKnzuSpzWxu4YxfQQ=="
     },
     "react-overlays": {
       "version": "2.1.0",
@@ -14398,12 +14398,12 @@
       }
     },
     "react-popper": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
-      "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
+      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
       "requires": {
         "@babel/runtime": "^7.1.2",
-        "create-react-context": "^0.3.0",
+        "@hypnosphi/create-react-context": "^0.3.1",
         "deep-equal": "^1.1.1",
         "popper.js": "^1.14.4",
         "prop-types": "^15.6.1",
diff --git a/front/package.json b/front/package.json
index 2f8d331cfb..700d57affe 100644
--- a/front/package.json
+++ b/front/package.json
@@ -53,7 +53,7 @@
     "preact-router": "^3.2.1",
     "qrcode": "^1.4.2",
     "react-big-calendar": "^0.22.1",
-    "react-datepicker": "^2.13.0",
+    "react-datepicker": "^3.8.0",
     "react-select": "^3.0.8",
     "set-value": "^3.0.0",
     "tabler-ui": "0.0.32",
diff --git a/front/src/routes/scene/edit-scene/actions/CheckTime.css b/front/src/routes/scene/edit-scene/actions/CheckTime.css
new file mode 100644
index 0000000000..0ed8e1984b
--- /dev/null
+++ b/front/src/routes/scene/edit-scene/actions/CheckTime.css
@@ -0,0 +1,3 @@
+.clearButtonCustom::after {
+  background-color: #485056;
+}
diff --git a/front/src/routes/scene/edit-scene/actions/CheckTime.jsx b/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
index 858e370c36..3ff389fe30 100644
--- a/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
+++ b/front/src/routes/scene/edit-scene/actions/CheckTime.jsx
@@ -6,6 +6,9 @@ import { format } from 'date-fns';
 import { Text, Localizer } from 'preact-i18n';
 import get from 'get-value';
 
+import 'react-datepicker/dist/react-datepicker.css';
+import style from './CheckTime.css';
+
 import fr from 'date-fns/locale/fr';
 
 const weekDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
@@ -58,6 +61,7 @@ class CheckTime extends Component {
                 <DatePicker
                   selected={after}
                   className="form-control"
+                  clearButtonClassName={style.clearButtonCustom}
                   locale={localeSet}
                   onChange={this.handleBeforeAfterChange}
                   placeholderText={<Text id="editScene.actionsCard.checkTime.afterLabel" />}
@@ -80,6 +84,7 @@ class CheckTime extends Component {
                 <DatePicker
                   selected={before}
                   className="form-control"
+                  clearButtonClassName={style.clearButtonCustom}
                   locale={localeSet}
                   onChange={this.handleBeforeTimeChange}
                   placeholderText={<Text id="editScene.actionsCard.checkTime.beforeLabel" />}

From d3c46052791243048e2e9f121df321f2f574f8b5 Mon Sep 17 00:00:00 2001
From: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
Date: Thu, 22 Apr 2021 11:00:20 +0800
Subject: [PATCH 4/5] Fix timezone issue

---
 server/lib/scene/scene.actions.js | 29 ++++++++++++++++++-----------
 server/lib/scene/scene.execute.js |  7 ++++++-
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/server/lib/scene/scene.actions.js b/server/lib/scene/scene.actions.js
index 4c38301bbd..d611a7cbb7 100644
--- a/server/lib/scene/scene.actions.js
+++ b/server/lib/scene/scene.actions.js
@@ -3,6 +3,8 @@ const Handlebars = require('handlebars');
 const set = require('set-value');
 const get = require('get-value');
 const dayjs = require('dayjs');
+const utc = require('dayjs/plugin/utc');
+const timezone = require('dayjs/plugin/timezone');
 const { ACTIONS, DEVICE_FEATURE_CATEGORIES, DEVICE_FEATURE_TYPES } = require('../../utils/constants');
 const { getDeviceFeature } = require('../../utils/device');
 const { AbortScene } = require('../../utils/coreErrors');
@@ -10,6 +12,9 @@ const { compare } = require('../../utils/compare');
 const { parseJsonIfJson } = require('../../utils/json');
 const logger = require('../../utils/logger');
 
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 const actionsFunc = {
   [ACTIONS.DEVICE.SET_VALUE]: async (self, action, scope, columnIndex, rowIndex) => {
     let device;
@@ -130,27 +135,29 @@ const actionsFunc = {
     }
   },
   [ACTIONS.CONDITION.CHECK_TIME]: async (self, action, scope) => {
-    const now = dayjs().tz(self.timezone);
+    const now = dayjs.tz(dayjs(), self.timezone);
     if (action.before) {
-      const beforeDate = dayjs()
-        .hour(action.before.substr(0, 2))
-        .minute(action.before.substr(3, 2))
-        .tz(self.timezone);
+      const beforeDate = dayjs.tz(`${now.format('YYYY-MM-DD')} ${action.before}`, self.timezone);
       const isBeforeCondition = now.isBefore(beforeDate);
       if (!isBeforeCondition) {
-        logger.debug(`Condition isBeforeHour not verified. Now = ${now} > beforeDate = ${beforeDate}`);
+        logger.debug(
+          `Check time before: ${now.format('HH:mm')} > ${beforeDate.format('HH:mm')} condition is not verified.`,
+        );
         throw new AbortScene('CONDITION_IS_BEFORE_HOUR_NOT_VERIFIED');
+      } else {
+        logger.debug(`Check time before: ${now.format('HH:mm')} < ${beforeDate.format('HH:mm')} condition is valid.`);
       }
     }
     if (action.after) {
-      const afterDate = dayjs()
-        .hour(action.after.substr(0, 2))
-        .minute(action.after.substr(3, 2))
-        .tz(self.timezone);
+      const afterDate = dayjs.tz(`${now.format('YYYY-MM-DD')} ${action.after}`, self.timezone);
       const isAfterCondition = now.isAfter(afterDate);
       if (!isAfterCondition) {
-        logger.debug(`Condition isAfterHour not verified. Now = ${now} < afterDate = ${afterDate}`);
+        logger.debug(
+          `Check time after: ${now.format('HH:mm')} > ${afterDate.format('HH:mm')} condition is not verified.`,
+        );
         throw new AbortScene('CONDITION_IS_AFTER_HOUR_NOT_VERIFIED');
+      } else {
+        logger.debug(`Check time after: ${now.format('HH:mm')} > ${afterDate.format('HH:mm')} condition is valid.`);
       }
     }
     if (action.days_of_the_week) {
diff --git a/server/lib/scene/scene.execute.js b/server/lib/scene/scene.execute.js
index 91212cdefe..9757b0206e 100644
--- a/server/lib/scene/scene.execute.js
+++ b/server/lib/scene/scene.execute.js
@@ -1,5 +1,6 @@
 const { executeActions } = require('./scene.executeActions');
 const logger = require('../../utils/logger');
+const { AbortScene } = require('../../utils/coreErrors');
 
 /**
  * @description Execute a scene by its selector.
@@ -17,7 +18,11 @@ function execute(sceneSelector, scope) {
       try {
         await executeActions(this, this.scenes[sceneSelector].actions, scope);
       } catch (e) {
-        logger.error(e);
+        if (e instanceof AbortScene) {
+          logger.debug(e);
+        } else {
+          logger.error(e);
+        }
       }
     });
   } catch (e) {

From 889eabfb640c63239d719cc8dafa414a329e964e Mon Sep 17 00:00:00 2001
From: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
Date: Thu, 22 Apr 2021 11:35:59 +0800
Subject: [PATCH 5/5] Add more tests to scene.execute

---
 server/test/lib/scene/scene.execute.test.js | 83 +++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/server/test/lib/scene/scene.execute.test.js b/server/test/lib/scene/scene.execute.test.js
index 56c72e816e..3d333393b8 100644
--- a/server/test/lib/scene/scene.execute.test.js
+++ b/server/test/lib/scene/scene.execute.test.js
@@ -1,5 +1,6 @@
 const { assert, fake } = require('sinon');
 const EventEmitter = require('events');
+const { expect } = require('chai');
 const { ACTIONS } = require('../../../utils/constants');
 const SceneManager = require('../../../lib/scene');
 const StateManager = require('../../../lib/state');
@@ -42,6 +43,88 @@ describe('SceneManager', () => {
       });
     });
   });
+  it('should execute one scene and abort scene', async () => {
+    const stateManager = new StateManager(event);
+    stateManager.setState('deviceFeature', 'my-device-feature', {
+      category: 'light',
+      type: 'binary',
+      last_value: 15,
+    });
+    const device = {
+      setValue: fake.resolves(null),
+    };
+    const sceneManager = new SceneManager(stateManager, event, device);
+    const scene = {
+      selector: 'my-scene',
+      triggers: [],
+      actions: [
+        [
+          {
+            type: ACTIONS.DEVICE.GET_VALUE,
+            device_feature: 'my-device-feature',
+          },
+        ],
+        [
+          {
+            type: ACTIONS.CONDITION.ONLY_CONTINUE_IF,
+            conditions: [
+              {
+                variable: '0.0.last_value',
+                operator: '=',
+                value: 20,
+              },
+            ],
+          },
+        ],
+      ],
+    };
+    sceneManager.addScene(scene);
+    const scope = {};
+    await sceneManager.execute('my-scene', scope);
+    return new Promise((resolve, reject) => {
+      sceneManager.queue.start(() => {
+        try {
+          assert.notCalled(device.setValue);
+          expect(scope).to.deep.equal({ '0': { '0': { category: 'light', type: 'binary', last_value: 15 } } });
+          resolve();
+        } catch (e) {
+          reject(e);
+        }
+      });
+    });
+  });
+  it('should execute one scene, crash but not crash here', async () => {
+    const stateManager = new StateManager(event);
+    stateManager.setState('deviceFeature', 'my-device-feature', {
+      category: 'light',
+      type: 'binary',
+      last_value: 15,
+    });
+    const device = {
+      setValue: fake.resolves(null),
+    };
+    const sceneManager = new SceneManager(stateManager, event, device);
+    const scene = {
+      selector: 'my-scene',
+      triggers: [],
+      actions: [
+        [
+          {
+            type: 'this type does not exist',
+            device_feature: 'my-device-feature',
+          },
+        ],
+      ],
+    };
+    sceneManager.addScene(scene);
+    const scope = {};
+    await sceneManager.execute('my-scene', scope);
+    return new Promise((resolve, reject) => {
+      sceneManager.queue.start(() => {
+        resolve();
+      });
+    });
+  });
   it('scene does not exist', async () => {
     const sceneManager = new SceneManager(light, event);
     return sceneManager.execute('thisscenedoesnotexist');