🚸 (setVariable) Rename Today setVar type to Now

apps/builder/src/components/inputs/Select.tsx

@@ -57,7 +57,7 @@ export const Select = <T extends Item>({
         typeof item === 'string'
           ? selectedItem === item
           : selectedItem === item.value
-      )
+      ) ?? selectedItem
     )
   )
 

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

@@ -1,4 +1,4 @@
-import { Text } from '@chakra-ui/react'
+import { Tag, Text } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { SetVariableBlock, Variable } from '@typebot.io/schemas'
 import { byId, isEmpty } from '@typebot.io/lib'
@@ -9,42 +9,65 @@ export const SetVariableContent = ({ block }: { block: SetVariableBlock }) => {
     typebot?.variables.find(byId(block.options.variableId))?.name ?? ''
   return (
     <Text color={'gray.500'} noOfLines={4}>
-      {variableName === '' && isEmpty(block.options.expressionToEvaluate)
-        ? 'Click to edit...'
-        : getExpression(typebot?.variables ?? [])(block.options)}
+      {variableName === '' && isEmpty(block.options.expressionToEvaluate) ? (
+        'Click to edit...'
+      ) : (
+        <Expression
+          options={block.options}
+          variables={typebot?.variables ?? []}
+        />
+      )}
     </Text>
   )
 }
 
-const getExpression =
-  (variables: Variable[]) =>
-  (options: SetVariableBlock['options']): string | null => {
-    const variableName = variables.find(byId(options.variableId))?.name ?? ''
-    switch (options.type) {
-      case 'Custom':
-      case undefined:
-        return `${variableName} = ${options.expressionToEvaluate}`
-      case 'Map item with same index': {
-        const baseItemVariable = variables.find(
-          byId(options.mapListItemParams?.baseItemVariableId)
-        )
-        const baseListVariable = variables.find(
-          byId(options.mapListItemParams?.baseListVariableId)
-        )
-        const targetListVariable = variables.find(
-          byId(options.mapListItemParams?.targetListVariableId)
-        )
-        return `${variableName} = item in ${targetListVariable?.name} with same index as ${baseItemVariable?.name} in ${baseListVariable?.name}`
-      }
-      case 'Empty':
-        return `Reset ${variableName}`
-      case 'Random ID':
-      case 'Today':
-      case 'Tomorrow':
-      case 'User ID':
-      case 'Moment of the day':
-      case 'Yesterday': {
-        return `${variableName} = ${options.type}`
-      }
+const Expression = ({
+  options,
+  variables,
+}: {
+  options: SetVariableBlock['options']
+  variables: Variable[]
+}): JSX.Element | null => {
+  const variableName = variables.find(byId(options.variableId))?.name ?? ''
+  switch (options.type) {
+    case 'Custom':
+    case undefined:
+      return (
+        <Text>
+          {variableName} = {options.expressionToEvaluate}
+        </Text>
+      )
+    case 'Map item with same index': {
+      const baseItemVariable = variables.find(
+        byId(options.mapListItemParams?.baseItemVariableId)
+      )
+      const baseListVariable = variables.find(
+        byId(options.mapListItemParams?.baseListVariableId)
+      )
+      const targetListVariable = variables.find(
+        byId(options.mapListItemParams?.targetListVariableId)
+      )
+      return (
+        <Text>
+          {variableName} = item in ${targetListVariable?.name} with same index
+          as ${baseItemVariable?.name} in ${baseListVariable?.name}
+        </Text>
+      )
+    }
+    case 'Empty':
+      return <Text>Reset {variableName}</Text>
+    case 'Random ID':
+    case 'Today':
+    case 'Now':
+    case 'Tomorrow':
+    case 'User ID':
+    case 'Moment of the day':
+    case 'Yesterday': {
+      return (
+        <Text>
+          {variableName} = <Tag colorScheme="purple">System.{options.type}</Tag>
+        </Text>
+      )
     }
   }
+}

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

@@ -1,6 +1,11 @@
 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 {
+  SetVariableOptions,
+  Variable,
+  hiddenTypes,
+  valueTypes,
+} from '@typebot.io/schemas'
 import React from 'react'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
@@ -11,6 +16,8 @@ type Props = {
   onOptionsChange: (options: SetVariableOptions) => void
 }
 
+const setVarTypes = valueTypes.filter((type) => !hiddenTypes.includes(type))
+
 export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
   const updateVariableId = (variable?: Variable) =>
     onOptionsChange({ ...options, variableId: variable?.id })
@@ -40,7 +47,7 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
         </Text>
         <Select
           selectedItem={options.type ?? 'Custom'}
-          items={valueTypes}
+          items={setVarTypes}
           onSelect={updateValueType}
         />
         <SetVariableValue options={options} onOptionsChange={onOptionsChange} />
@@ -144,6 +151,7 @@ const SetVariableValue = ({
       )
     }
     case 'Random ID':
+    case 'Now':
     case 'Today':
     case 'Tomorrow':
     case 'User ID':