🚸 (pictureChoice) Allow dynamic picture choice with…

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsNodeContent.tsx

@@ -1,13 +1,33 @@
 import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { GoogleSheetsAction } from '@typebot.io/schemas'
+import { Stack, Text } from '@chakra-ui/react'
+import { GoogleSheetsAction, GoogleSheetsOptions } from '@typebot.io/schemas'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { SetVariableLabel } from '@/components/SetVariableLabel'
 
 type Props = {
-  action?: GoogleSheetsAction
+  options?: GoogleSheetsOptions
 }
 
-export const GoogleSheetsNodeContent = ({ action }: Props) => (
-  <Text color={action ? 'currentcolor' : 'gray.500'} noOfLines={1}>
-    {action ?? 'Configure...'}
-  </Text>
-)
+export const GoogleSheetsNodeContent = ({ options }: Props) => {
+  const { typebot } = useTypebot()
+  return (
+    <Stack>
+      <Text color={options?.action ? 'currentcolor' : 'gray.500'} noOfLines={1}>
+        {options?.action ?? 'Configure...'}
+      </Text>
+      {typebot &&
+        options?.action === GoogleSheetsAction.GET &&
+        options?.cellsToExtract
+          .map((mapping) => mapping.variableId)
+          .map((variableId, idx) =>
+            variableId ? (
+              <SetVariableLabel
+                key={variableId + idx}
+                variables={typebot.variables}
+                variableId={variableId}
+              />
+            ) : null
+          )}
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx

@@ -304,24 +304,24 @@ const ActionOptions = ({
                 <AccordionItem>
                   <AccordionButton>
                     <Text w="full" textAlign="left">
-                      Rows to filter
+                      Select row(s)
                     </Text>
                     <AccordionIcon />
                   </AccordionButton>
 
-                  <AccordionPanel pt="4">
+                  <AccordionPanel pt="4" as={Stack}>
+                    <DropdownList
+                      items={totalRowsToExtractOptions}
+                      currentItem={options.totalRowsToExtract ?? 'All'}
+                      onItemSelect={updateTotalRowsToExtract}
+                    />
                     <RowsFilterTableList
                       columns={sheet?.columns ?? []}
                       filter={options.filter}
                       onFilterChange={handleFilterChange}
                     />
                   </AccordionPanel>
                 </AccordionItem>
-                <DropdownList
-                  items={totalRowsToExtractOptions}
-                  currentItem={options.totalRowsToExtract ?? 'All'}
-                  onItemSelect={updateTotalRowsToExtract}
-                />
               </>
             )}
 

apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx

@@ -159,11 +159,7 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     case LogicBlockType.CONDITION:
       return <ItemNodesList block={block} indices={indices} />
     case IntegrationBlockType.GOOGLE_SHEETS: {
-      return (
-        <GoogleSheetsNodeContent
-          action={'action' in block.options ? block.options.action : undefined}
-        />
-      )
+      return <GoogleSheetsNodeContent options={block.options} />
     }
     case IntegrationBlockType.GOOGLE_ANALYTICS: {
       return <GoogleAnalyticsNodeBody action={block.options?.action} />

packages/bot-engine/blocks/inputs/pictureChoice/injectVariableValuesInPictureChoiceBlock.ts

@@ -20,15 +20,18 @@ export const injectVariableValuesInPictureChoiceBlock =
           variable.id === block.options.dynamicItems?.pictureSrcsVariableId &&
           isDefined(variable.value)
       ) as VariableWithValue | undefined
-      if (!pictureSrcsVariable || typeof pictureSrcsVariable.value === 'string')
-        return block
+      if (!pictureSrcsVariable) return block
       const titlesVariable = block.options.dynamicItems.titlesVariableId
         ? (variables.find(
             (variable) =>
               variable.id === block.options.dynamicItems?.titlesVariableId &&
               isDefined(variable.value)
           ) as VariableWithValue | undefined)
         : undefined
+      const titlesVariableValues =
+        typeof titlesVariable?.value === 'string'
+          ? [titlesVariable.value]
+          : titlesVariable?.value
       const descriptionsVariable = block.options.dynamicItems
         .descriptionsVariableId
         ? (variables.find(
@@ -38,18 +41,26 @@ export const injectVariableValuesInPictureChoiceBlock =
               isDefined(variable.value)
           ) as VariableWithValue | undefined)
         : undefined
+      const descriptionsVariableValues =
+        typeof descriptionsVariable?.value === 'string'
+          ? [descriptionsVariable.value]
+          : descriptionsVariable?.value
+
+      const variableValues =
+        typeof pictureSrcsVariable.value === 'string'
+          ? [pictureSrcsVariable.value]
+          : pictureSrcsVariable.value
+
       return {
         ...block,
-        items: pictureSrcsVariable.value
-          .filter(isDefined)
-          .map((pictureSrc, idx) => ({
-            id: idx.toString(),
-            type: ItemType.PICTURE_CHOICE,
-            blockId: block.id,
-            pictureSrc,
-            title: titlesVariable?.value?.[idx] ?? '',
-            description: descriptionsVariable?.value?.[idx] ?? '',
-          })),
+        items: variableValues.filter(isDefined).map((pictureSrc, idx) => ({
+          id: idx.toString(),
+          type: ItemType.PICTURE_CHOICE,
+          blockId: block.id,
+          pictureSrc,
+          title: titlesVariableValues?.[idx] ?? '',
+          description: descriptionsVariableValues?.[idx] ?? '',
+        })),
       }
     }
     return deepParseVariables(variables)(