⚡ (setVariable) Add "Moment of the day" variable value

Closes #564

apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx

@@ -42,6 +42,7 @@ const getExpression =
       case 'Today':
       case 'Tomorrow':
       case 'User ID':
+      case 'Moment of the day':
       case 'Yesterday': {
         return `${variableName} = ${options.type}`
       }

apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx

@@ -1,4 +1,4 @@
-import { FormLabel, Stack, Text } from '@chakra-ui/react'
+import { Alert, AlertIcon, FormLabel, Stack, Tag, Text } from '@chakra-ui/react'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { SetVariableOptions, Variable, valueTypes } from '@typebot.io/schemas'
 import React from 'react'
@@ -131,6 +131,18 @@ const SetVariableValue = ({
         </Stack>
       )
     }
+    case 'Moment of the day': {
+      return (
+        <Alert fontSize="sm">
+          <AlertIcon />
+          <Text>
+            Will return either <Tag size="sm">morning</Tag>,{' '}
+            <Tag size="sm">afternoon</Tag>,<Tag size="sm">evening</Tag> or{' '}
+            <Tag size="sm">night</Tag> based on the current user time.
+          </Text>
+        </Alert>
+      )
+    }
     case 'Random ID':
     case 'Today':
     case 'Tomorrow':

apps/docs/docs/editor/blocks/logic/set-variable.md

@@ -88,7 +88,15 @@ For example,
 
 :::
 
-## Map
+## Moment of the day
+
+It will set your variable with either one of these values based on the user's time of the day: `morning`, `afternoon`, `evening`, `night`.
+
+Then you can use this variable to conditionally display content:
+
+<img src="/img/blocks/logic/moment-condition.png" width="400" alt="Moment of the day condition"/>
+
+## Map item with same index
 
 This is a convenient value block that allows you to easily get an item from a list that has the same index as an item from another list.
 

apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts

@@ -15,10 +15,18 @@ export const executeSetVariable = async (
     return {
       outgoingEdgeId: block.outgoingEdgeId,
     }
-  if (block.options.isExecutedOnClient && block.options.expressionToEvaluate) {
+  const expressionToEvaluate = getExpressionToEvaluate(state.result.id)(
+    block.options
+  )
+  const isCustomValue = !block.options.type || block.options.type === 'Custom'
+  if (
+    expressionToEvaluate &&
+    ((isCustomValue && block.options.isExecutedOnClient) ||
+      block.options.type === 'Moment of the day')
+  ) {
     const scriptToExecute = parseScriptToExecuteClientSideAction(
       state.typebot.variables,
-      block.options.expressionToEvaluate
+      expressionToEvaluate
     )
     return {
       outgoingEdgeId: block.outgoingEdgeId,
@@ -31,9 +39,6 @@ export const executeSetVariable = async (
       ],
     }
   }
-  const expressionToEvaluate = getExpressionToEvaluate(state.result.id)(
-    block.options
-  )
   const evaluatedExpression = expressionToEvaluate
     ? evaluateSetVariableExpression(variables)(expressionToEvaluate)
     : undefined
@@ -92,6 +97,13 @@ const getExpressionToEvaluate =
       case 'Empty': {
         return null
       }
+      case 'Moment of the day': {
+        return `const now = new Date()
+        if(now.getHours() < 12) return 'morning'
+        if(now.getHours() >= 12 && now.getHours() < 18) return 'afternoon'
+        if(now.getHours() >= 18) return 'evening'
+        if(now.getHours() >= 22 || now.getHours() < 6) return 'night'`
+      }
       case 'Custom':
       case undefined: {
         return options.expressionToEvaluate ?? null

packages/schemas/features/blocks/logic/setVariable.ts

@@ -10,6 +10,7 @@ export const valueTypes = [
   'Yesterday',
   'Tomorrow',
   'Random ID',
+  'Moment of the day',
   'Map item with same index',
 ] as const