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

… string variables  ### 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.
baptisteArno · Sep 28, 2023 · 76f4954 · 76f4954 · vercel · Sep 28, 2023
1 parent d46e801
commit 76f4954
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 32 deletions.
diff --git a/...lder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsNodeContent.tsx b/...lder/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>
+  )
+}
diff --git a/...builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx b/...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}
-                />
               </>
             )}
 

diff --git a/apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx b/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} />

diff --git a/packages/bot-engine/blocks/inputs/pictureChoice/injectVariableValuesInPictureChoiceBlock.ts b/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)(