🚸 (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,21 +9,34 @@ 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)
+      {variableName === '' && isEmpty(block.options.expressionToEvaluate) ? (
-        ? 'Click to edit...'
+        'Click to edit...'
-        : getExpression(typebot?.variables ?? [])(block.options)}
+      ) : (
+        <Expression
+          options={block.options}
+          variables={typebot?.variables ?? []}
+        />
+      )}
     </Text>
   )
 }
 
-const getExpression =
+const Expression = ({
-  (variables: Variable[]) =>
+  options,
-  (options: SetVariableBlock['options']): string | null => {
+  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 `${variableName} = ${options.expressionToEvaluate}`
+      return (
+        <Text>
+          {variableName} = {options.expressionToEvaluate}
+        </Text>
+      )
     case 'Map item with same index': {
       const baseItemVariable = variables.find(
         byId(options.mapListItemParams?.baseItemVariableId)
@@ -34,17 +47,27 @@ const getExpression =
       const targetListVariable = variables.find(
         byId(options.mapListItemParams?.targetListVariableId)
       )
-        return `${variableName} = item in ${targetListVariable?.name} with same index as ${baseItemVariable?.name} in ${baseListVariable?.name}`
+      return (
+        <Text>
+          {variableName} = item in ${targetListVariable?.name} with same index
+          as ${baseItemVariable?.name} in ${baseListVariable?.name}
+        </Text>
+      )
     }
     case 'Empty':
-        return `Reset ${variableName}`
+      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 `${variableName} = ${options.type}`
+      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':

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

@@ -76,6 +76,7 @@ const getExpressionToEvaluate =
   (resultId: string | undefined) =>
   (options: SetVariableBlock['options']): string | null => {
     switch (options.type) {
+      case 'Now':
       case 'Today':
         return 'new Date().toISOString()'
       case 'Tomorrow': {

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

@@ -6,6 +6,7 @@ export const valueTypes = [
   'Custom',
   'Empty',
   'User ID',
+  'Now',
   'Today',
   'Yesterday',
   'Tomorrow',
@@ -14,6 +15,8 @@ export const valueTypes = [
   'Map item with same index',
 ] as const
 
+export const hiddenTypes = ['Today']
+
 export const setVariableOptionsSchema = z.object({
   variableId: z.string().optional(),
   expressionToEvaluate: z.string().optional(),