From 4d3f67c75212fc90b3fc8031c84e5b39d759f83c Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 7 Aug 2023 14:32:30 +0200
Subject: [PATCH] :children_crossing: (setVariable) Rename Today setVar type to
 Now

---
 apps/builder/src/components/inputs/Select.tsx |  2 +-
 .../components/SetVariableContent.tsx         | 91 ++++++++++++-------
 .../components/SetVariableSettings.tsx        | 12 ++-
 .../logic/setVariable/executeSetVariable.ts   |  1 +
 .../features/blocks/logic/setVariable.ts      |  3 +
 5 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/apps/builder/src/components/inputs/Select.tsx b/apps/builder/src/components/inputs/Select.tsx
index 00793adb0..79c915e0d 100644
--- a/apps/builder/src/components/inputs/Select.tsx
+++ b/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
     )
   )
 
diff --git a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx
index e1e8eefde..51830bd66 100644
--- a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx
+++ b/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>
+      )
     }
   }
+}
diff --git a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx
index 3c604e484..7b978aa39 100644
--- a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx
+++ b/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':
diff --git a/apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts b/apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts
index 04f84ed48..570e13889 100644
--- a/apps/viewer/src/features/blocks/logic/setVariable/executeSetVariable.ts
+++ b/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': {
diff --git a/packages/schemas/features/blocks/logic/setVariable.ts b/packages/schemas/features/blocks/logic/setVariable.ts
index 0e282254c..a21df15bb 100644
--- a/packages/schemas/features/blocks/logic/setVariable.ts
+++ b/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(),