🚸 (pictureChoice) Allow dynamic picture choice with… (#865)

… string variables
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit

- Refactor: Updated `GoogleSheetsNodeContent` component to use the
`options` prop instead of `action`, and integrated the `useTypebot` hook
for better functionality.
- Style: Improved UI text and layout in `GoogleSheetsSettings.tsx`,
enhancing user experience when selecting rows.
- Refactor: Simplified rendering logic in `BlockNodeContent.tsx` by
directly calling `GoogleSheetsNodeContent` component, improving code
readability.
- Bug Fix: Enhanced `injectVariableValuesInPictureChoiceBlock` function
to handle different types of values for titles, descriptions, and
picture sources, fixing issues with variable value injection.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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 { Stack, Text } from '@chakra-ui/react'
-import { GoogleSheetsAction } from '@typebot.io/schemas'
+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) => (
+export const GoogleSheetsNodeContent = ({ options }: Props) => {
-  <Text color={action ? 'currentcolor' : 'gray.500'} noOfLines={1}>
+  const { typebot } = useTypebot()
-    {action ?? 'Configure...'}
+  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,12 +304,17 @@ 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}
@@ -317,11 +322,6 @@ const ActionOptions = ({
                     />
                   </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 (
+      return <GoogleSheetsNodeContent options={block.options} />
-        <GoogleSheetsNodeContent
-          action={'action' in block.options ? block.options.action : undefined}
-        />
-      )
     }
     case IntegrationBlockType.GOOGLE_ANALYTICS: {
       return <GoogleAnalyticsNodeBody action={block.options?.action} />

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

@@ -20,8 +20,7 @@ export const injectVariableValuesInPictureChoiceBlock =
           variable.id === block.options.dynamicItems?.pictureSrcsVariableId &&
           isDefined(variable.value)
       ) as VariableWithValue | undefined
-      if (!pictureSrcsVariable || typeof pictureSrcsVariable.value === 'string')
+      if (!pictureSrcsVariable) return block
-        return block
       const titlesVariable = block.options.dynamicItems.titlesVariableId
         ? (variables.find(
             (variable) =>
@@ -29,6 +28,10 @@ export const injectVariableValuesInPictureChoiceBlock =
               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,17 +41,25 @@ 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
+        items: variableValues.filter(isDefined).map((pictureSrc, idx) => ({
-          .filter(isDefined)
-          .map((pictureSrc, idx) => ({
           id: idx.toString(),
           type: ItemType.PICTURE_CHOICE,
           blockId: block.id,
           pictureSrc,
-            title: titlesVariable?.value?.[idx] ?? '',
+          title: titlesVariableValues?.[idx] ?? '',
-            description: descriptionsVariable?.value?.[idx] ?? '',
+          description: descriptionsVariableValues?.[idx] ?? '',
         })),
       }
     }