✨ (googleSheets) Advanced get filtering

Allows you to select rows based on advanced conditions / comparisons

apps/builder/src/features/billing/components/BillingContent/BillingContent.tsx

@@ -12,7 +12,6 @@ import { ChangePlanForm } from '../ChangePlanForm'
 export const BillingContent = () => {
   const { workspace, refreshWorkspace } = useWorkspace()
 
-  console.log(workspace)
   if (!workspace) return null
   return (
     <Stack spacing="10" w="full">

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

@@ -4,6 +4,9 @@ import { useTypebot } from '@/features/editor'
 import {
   Cell,
   CredentialsType,
+  defaultGoogleSheetsGetOptions,
+  defaultGoogleSheetsInsertOptions,
+  defaultGoogleSheetsUpdateOptions,
   ExtractingCell,
   GoogleSheetsAction,
   GoogleSheetsGetOptions,
@@ -22,6 +25,7 @@ import { TableListItemProps, TableList } from '@/components/TableList'
 import { CredentialsDropdown } from '@/features/credentials'
 import { useSheets } from '../../hooks/useSheets'
 import { Sheet } from '../../types'
+import { RowsFilterTableList } from './RowsFilterTableList'
 
 type Props = {
   options: GoogleSheetsOptions
@@ -56,24 +60,21 @@ export const GoogleSheetsSettingsBody = ({
       case GoogleSheetsAction.GET: {
         const newOptions: GoogleSheetsGetOptions = {
           ...options,
-          action,
-          cellsToExtract: [],
+          ...defaultGoogleSheetsGetOptions,
         }
         return onOptionsChange({ ...newOptions })
       }
       case GoogleSheetsAction.INSERT_ROW: {
         const newOptions: GoogleSheetsInsertRowOptions = {
           ...options,
-          action,
-          cellsToInsert: [],
+          ...defaultGoogleSheetsInsertOptions,
         }
         return onOptionsChange({ ...newOptions })
       }
       case GoogleSheetsAction.UPDATE_ROW: {
         const newOptions: GoogleSheetsUpdateRowOptions = {
           ...options,
-          action,
-          cellsToUpsert: [],
+          ...defaultGoogleSheetsUpdateOptions,
         }
         return onOptionsChange({ ...newOptions })
       }
@@ -161,6 +162,10 @@ const ActionOptions = ({
   const handleExtractingCellsChange = (cellsToExtract: ExtractingCell[]) =>
     onOptionsChange({ ...options, cellsToExtract } as GoogleSheetsOptions)
 
+  const handleFilterChange = (
+    filter: NonNullable<GoogleSheetsGetOptions['filter']>
+  ) => onOptionsChange({ ...options, filter } as GoogleSheetsOptions)
+
   const UpdatingCellItem = useMemo(
     () =>
       function Component(props: TableListItemProps<Cell>) {
@@ -210,12 +215,26 @@ const ActionOptions = ({
     case GoogleSheetsAction.GET:
       return (
         <Stack>
-          <Text>Row to select</Text>
-          <CellWithValueStack
-            columns={sheet?.columns ?? []}
-            item={options.referenceCell ?? { id: 'reference' }}
-            onItemChange={handleReferenceCellChange}
-          />
+          {options.referenceCell ? (
+            <>
+              <Text>Row to select</Text>
+              <CellWithValueStack
+                columns={sheet?.columns ?? []}
+                item={options.referenceCell ?? { id: 'reference' }}
+                onItemChange={handleReferenceCellChange}
+              />
+            </>
+          ) : (
+            <>
+              <Text>Filter</Text>
+              <RowsFilterTableList
+                columns={sheet?.columns ?? []}
+                filter={options.filter}
+                onFilterChange={handleFilterChange}
+              />
+            </>
+          )}
+
           <Text>Cells to extract</Text>
           <TableList<ExtractingCell>
             initialItems={options.cellsToExtract}

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/RowsFilterComparisonItem.tsx

@@ -0,0 +1,53 @@
+import { DropdownList } from '@/components/DropdownList'
+import { Input } from '@/components/inputs'
+import { TableListItemProps } from '@/components/TableList'
+import { Stack } from '@chakra-ui/react'
+import { ComparisonOperators, RowsFilterComparison } from 'models'
+import React from 'react'
+
+export const RowsFilterComparisonItem = ({
+  item,
+  columns,
+  onItemChange,
+}: TableListItemProps<RowsFilterComparison> & { columns: string[] }) => {
+  const handleColumnSelect = (column: string) => {
+    if (column === item.column) return
+    onItemChange({ ...item, column })
+  }
+
+  const handleSelectComparisonOperator = (
+    comparisonOperator: ComparisonOperators
+  ) => {
+    if (comparisonOperator === item.comparisonOperator) return
+    onItemChange({ ...item, comparisonOperator })
+  }
+
+  const handleChangeValue = (value: string) => {
+    if (value === item.value) return
+    onItemChange({ ...item, value })
+  }
+
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <DropdownList<string>
+        currentItem={item.column}
+        onItemSelect={handleColumnSelect}
+        items={columns}
+        placeholder="Select a column"
+      />
+      <DropdownList<ComparisonOperators>
+        currentItem={item.comparisonOperator}
+        onItemSelect={handleSelectComparisonOperator}
+        items={Object.values(ComparisonOperators)}
+        placeholder="Select an operator"
+      />
+      {item.comparisonOperator !== ComparisonOperators.IS_SET && (
+        <Input
+          defaultValue={item.value ?? ''}
+          onChange={handleChangeValue}
+          placeholder="Type a value..."
+        />
+      )}
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/RowsFilterTableList.tsx

@@ -0,0 +1,55 @@
+import { DropdownList } from '@/components/DropdownList'
+import { TableList, TableListItemProps } from '@/components/TableList'
+import { Flex } from '@chakra-ui/react'
+import {
+  GoogleSheetsGetOptions,
+  LogicalOperator,
+  RowsFilterComparison,
+} from 'models'
+import React, { useCallback } from 'react'
+import { RowsFilterComparisonItem } from './RowsFilterComparisonItem'
+
+type Props = {
+  filter: NonNullable<GoogleSheetsGetOptions['filter']>
+  columns: string[]
+  onFilterChange: (
+    filter: NonNullable<GoogleSheetsGetOptions['filter']>
+  ) => void
+}
+
+export const RowsFilterTableList = ({
+  filter,
+  columns,
+  onFilterChange,
+}: Props) => {
+  const handleComparisonsChange = (comparisons: RowsFilterComparison[]) =>
+    onFilterChange({ ...filter, comparisons })
+
+  const handleLogicalOperatorChange = (logicalOperator: LogicalOperator) =>
+    onFilterChange({ ...filter, logicalOperator })
+
+  const createRowsFilterComparisonItem = useCallback(
+    (props: TableListItemProps<RowsFilterComparison>) => (
+      <RowsFilterComparisonItem {...props} columns={columns} />
+    ),
+    [columns]
+  )
+
+  return (
+    <TableList<RowsFilterComparison>
+      initialItems={filter?.comparisons}
+      onItemsChange={handleComparisonsChange}
+      Item={createRowsFilterComparisonItem}
+      ComponentBetweenItems={() => (
+        <Flex justify="center">
+          <DropdownList<LogicalOperator>
+            currentItem={filter?.logicalOperator}
+            onItemSelect={handleLogicalOperatorChange}
+            items={Object.values(LogicalOperator)}
+          />
+        </Flex>
+      )}
+      addLabel="Add filter rule"
+    />
+  )
+}

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/index.ts

@@ -0,0 +1,2 @@
+export * from './RowsFilterComparisonItem'
+export * from './RowsFilterTableList'

apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts

@@ -95,7 +95,7 @@ test.describe.parallel('Google sheets integration', () => {
               '/api/integrations/google-sheets/spreadsheets/1k_pIDw3YHl9tlZusbBVSBRY0PeRPd2H6t4Nj7rwnOtM/sheets/0'
             ) &&
           resp.status() === 200 &&
-          resp.request().method() === 'PATCH'
+          resp.request().method() === 'POST'
       ),
       typebotViewer(page)
         .locator('input[placeholder="Type your email..."]')
@@ -118,10 +118,21 @@ test.describe.parallel('Google sheets integration', () => {
 
     await page.click('text=Select a column')
     await page.click('button >> text="Email"')
+    await page.getByRole('button', { name: 'Select an operator' }).click()
+    await page.getByRole('menuitem', { name: 'Equal to' }).click()
     await page.click('[aria-label="Insert a variable"]')
     await page.click('button >> text="Email" >> nth=1')
 
-    await page.click('text=Add a value')
+    await page.getByRole('button', { name: 'Add filter rule' }).click()
+    await page.getByRole('button', { name: 'AND', exact: true }).click()
+    await page.getByRole('menuitem', { name: 'OR' }).click()
+
+    await page.click('text=Select a column')
+    await page.getByRole('menuitem', { name: 'Email' }).click()
+    await page.getByRole('button', { name: 'Select an operator' }).click()
+    await page.getByRole('menuitem', { name: 'Equal to' }).click()
+    await page.getByPlaceholder('Type a value...').nth(-1).fill('test@test.com')
+
     await page.click('text=Select a column')
     await page.click('text="First name"')
     await createNewVar(page, 'First name')
@@ -138,9 +149,9 @@ test.describe.parallel('Google sheets integration', () => {
     await typebotViewer(page)
       .locator('input[placeholder="Type your email..."]')
       .press('Enter')
-    await expect(
-      typebotViewer(page).locator('text=Your name is: John Smith')
-    ).toBeVisible({ timeout: 30000 })
+    await expect(typebotViewer(page).locator('text=Your name is:')).toHaveText(
+      /John|Fred|Georges/
+    )
   })
 })
 

apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx

@@ -47,8 +47,6 @@ export const WorkspaceSettingsModal = ({
   const { currentRole } = useWorkspace()
   const [selectedTab, setSelectedTab] = useState<SettingsTab>('my-account')
 
-  console.log(currentRole)
-
   const canEditWorkspace = currentRole === WorkspaceRole.ADMIN
 
   return (

apps/viewer/src/pages/api/integrations/google-sheets/spreadsheets/[spreadsheetId]/sheets/[sheetId].ts

@@ -1,141 +1,235 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import { badRequest, initMiddleware, methodNotAllowed } from 'utils/api'
-import { hasValue } from 'utils'
-import { GoogleSpreadsheet } from 'google-spreadsheet'
-import { Cell } from 'models'
+import {
+  badRequest,
+  initMiddleware,
+  methodNotAllowed,
+  notFound,
+} from 'utils/api'
+import { hasValue, isDefined } from 'utils'
+import { GoogleSpreadsheet, GoogleSpreadsheetRow } from 'google-spreadsheet'
+import {
+  ComparisonOperators,
+  GoogleSheetsAction,
+  GoogleSheetsGetOptions,
+  GoogleSheetsInsertRowOptions,
+  GoogleSheetsUpdateRowOptions,
+  LogicalOperator,
+} from 'models'
 import Cors from 'cors'
 import { withSentry } from '@sentry/nextjs'
 import { getAuthenticatedGoogleClient } from '@/lib/google-sheets'
 import { saveErrorLog, saveSuccessLog } from '@/features/logs/api'
 
 const cors = initMiddleware(Cors())
+
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   await cors(req, res)
-  const resultId = req.query.resultId as string | undefined
-  if (req.method === 'GET') {
-    const spreadsheetId = req.query.spreadsheetId as string
-    const sheetId = req.query.sheetId as string
-    const credentialsId = req.query.credentialsId as string | undefined
-    if (!hasValue(credentialsId)) return badRequest(res)
-    const referenceCell = {
-      column: req.query['referenceCell[column]'],
-      value: req.query['referenceCell[value]'],
-    } as Cell
+  if (req.method !== 'POST') return methodNotAllowed(res)
+  const action = req.body.action as GoogleSheetsAction | undefined
+  if (!action) return badRequest(res, 'Missing action')
+  switch (action) {
+    case GoogleSheetsAction.GET: {
+      return await getRows(req, res)
+    }
+    case GoogleSheetsAction.INSERT_ROW: {
+      return await insertRow(req, res)
+    }
+    case GoogleSheetsAction.UPDATE_ROW: {
+      return await updateRow(req, res)
+    }
+  }
+}
 
-    const extractingColumns = getExtractingColumns(
-      req.query.columns as string[] | string | undefined
+const getRows = async (req: NextApiRequest, res: NextApiResponse) => {
+  const sheetId = req.query.sheetId as string
+  const spreadsheetId = req.query.spreadsheetId as string
+  const { resultId, credentialsId, referenceCell, filter, columns } =
+    req.body as GoogleSheetsGetOptions & {
+      resultId?: string
+      columns: string[] | string
+    }
+
+  if (!hasValue(credentialsId)) {
+    badRequest(res)
+    return
+  }
+
+  const extractingColumns = getExtractingColumns(columns)
+
+  if (!extractingColumns) {
+    badRequest(res)
+    return
+  }
+
+  const doc = new GoogleSpreadsheet(spreadsheetId)
+  const client = await getAuthenticatedGoogleClient(credentialsId)
+  if (!client) {
+    notFound(res, "Couldn't find credentials in database")
+    return
+  }
+  doc.useOAuth2Client(client)
+  await doc.loadInfo()
+  const sheet = doc.sheetsById[sheetId]
+  try {
+    const rows = await sheet.getRows()
+    const filteredRows = rows.filter((row) =>
+      referenceCell
+        ? row[referenceCell.column as string] === referenceCell.value
+        : matchFilter(row, filter)
     )
-    if (!extractingColumns) return badRequest(res)
-    const doc = new GoogleSpreadsheet(spreadsheetId)
-    const client = await getAuthenticatedGoogleClient(credentialsId)
-    if (!client)
-      return res.status(404).send("Couldn't find credentials in database")
-    doc.useOAuth2Client(client)
-    await doc.loadInfo()
-    const sheet = doc.sheetsById[sheetId]
-    try {
-      const rows = await sheet.getRows()
-      const row = rows.find(
-        (row) => row[referenceCell.column as string] === referenceCell.value
-      )
-      if (!row) {
-        await saveErrorLog({
-          resultId,
-          message: "Couldn't find reference cell",
-        })
-        return res.status(404).send({ message: "Couldn't find row" })
-      }
-      const response = {
-        ...extractingColumns.reduce(
+    if (filteredRows.length === 0) {
+      await saveErrorLog({
+        resultId,
+        message: "Couldn't find reference cell",
+      })
+      notFound(res, "Couldn't find reference cell")
+      return
+    }
+    const response = {
+      rows: filteredRows.map((row) =>
+        extractingColumns.reduce<{ [key: string]: string }>(
           (obj, column) => ({ ...obj, [column]: row[column] }),
           {}
-        ),
-      }
-      await saveSuccessLog({
-        resultId,
-        message: 'Succesfully fetched spreadsheet data',
-      })
-      return res.send(response)
-    } catch (err) {
-      await saveErrorLog({
-        resultId,
-        message: "Couldn't fetch spreadsheet data",
-        details: err,
-      })
-      return res.status(500).send(err)
+        )
+      ),
     }
+    await saveSuccessLog({
+      resultId,
+      message: 'Succesfully fetched spreadsheet data',
+    })
+    res.status(200).send(response)
+    return
+  } catch (err) {
+    await saveErrorLog({
+      resultId,
+      message: "Couldn't fetch spreadsheet data",
+      details: err,
+    })
+    res.status(500).send(err)
+    return
   }
-  if (req.method === 'POST') {
-    const spreadsheetId = req.query.spreadsheetId as string
-    const sheetId = req.query.sheetId as string
-    const { credentialsId, values } = (
-      typeof req.body === 'string' ? JSON.parse(req.body) : req.body
-    ) as {
-      credentialsId?: string
+}
+
+const insertRow = async (req: NextApiRequest, res: NextApiResponse) => {
+  const sheetId = req.query.sheetId as string
+  const spreadsheetId = req.query.spreadsheetId as string
+  const { resultId, credentialsId, values } =
+    req.body as GoogleSheetsInsertRowOptions & {
+      resultId?: string
       values: { [key: string]: string }
     }
-    if (!hasValue(credentialsId)) return badRequest(res)
-    const doc = new GoogleSpreadsheet(spreadsheetId)
-    const auth = await getAuthenticatedGoogleClient(credentialsId)
-    if (!auth)
-      return res.status(404).send("Couldn't find credentials in database")
-    doc.useOAuth2Client(auth)
-    try {
-      await doc.loadInfo()
-      const sheet = doc.sheetsById[sheetId]
-      await sheet.addRow(values)
-      await saveSuccessLog({ resultId, message: 'Succesfully inserted row' })
-      return res.send({ message: 'Success' })
-    } catch (err) {
-      await saveErrorLog({
-        resultId,
-        message: "Couldn't fetch spreadsheet data",
-        details: err,
-      })
-      return res.status(500).send(err)
-    }
+  if (!hasValue(credentialsId)) return badRequest(res)
+  const doc = new GoogleSpreadsheet(spreadsheetId)
+  const auth = await getAuthenticatedGoogleClient(credentialsId)
+  if (!auth)
+    return res.status(404).send("Couldn't find credentials in database")
+  doc.useOAuth2Client(auth)
+  try {
+    await doc.loadInfo()
+    const sheet = doc.sheetsById[sheetId]
+    await sheet.addRow(values)
+    await saveSuccessLog({ resultId, message: 'Succesfully inserted row' })
+    return res.send({ message: 'Success' })
+  } catch (err) {
+    await saveErrorLog({
+      resultId,
+      message: "Couldn't fetch spreadsheet data",
+      details: err,
+    })
+    return res.status(500).send(err)
   }
-  if (req.method === 'PATCH') {
-    const spreadsheetId = req.query.spreadsheetId as string
-    const sheetId = req.query.sheetId as string
-    const { credentialsId, values, referenceCell } = (
-      typeof req.body === 'string' ? JSON.parse(req.body) : req.body
-    ) as {
-      credentialsId?: string
-      referenceCell: Cell
+}
+
+const updateRow = async (req: NextApiRequest, res: NextApiResponse) => {
+  const sheetId = req.query.sheetId as string
+  const spreadsheetId = req.query.spreadsheetId as string
+  const { resultId, credentialsId, values, referenceCell } =
+    req.body as GoogleSheetsUpdateRowOptions & {
+      resultId?: string
       values: { [key: string]: string }
     }
-    if (!hasValue(credentialsId)) return badRequest(res)
-    const doc = new GoogleSpreadsheet(spreadsheetId)
-    const auth = await getAuthenticatedGoogleClient(credentialsId)
-    if (!auth)
-      return res.status(404).send("Couldn't find credentials in database")
-    doc.useOAuth2Client(auth)
-    try {
-      await doc.loadInfo()
-      const sheet = doc.sheetsById[sheetId]
-      const rows = await sheet.getRows()
-      const updatingRowIndex = rows.findIndex(
-        (row) => row[referenceCell.column as string] === referenceCell.value
+  if (!hasValue(credentialsId) || !referenceCell) return badRequest(res)
+  const doc = new GoogleSpreadsheet(spreadsheetId)
+  const auth = await getAuthenticatedGoogleClient(credentialsId)
+  if (!auth)
+    return res.status(404).send("Couldn't find credentials in database")
+  doc.useOAuth2Client(auth)
+  try {
+    await doc.loadInfo()
+    const sheet = doc.sheetsById[sheetId]
+    const rows = await sheet.getRows()
+    const updatingRowIndex = rows.findIndex(
+      (row) => row[referenceCell.column as string] === referenceCell.value
+    )
+    if (updatingRowIndex === -1)
+      return res.status(404).send({ message: "Couldn't find row to update" })
+    for (const key in values) {
+      rows[updatingRowIndex][key] = values[key]
+    }
+    await rows[updatingRowIndex].save()
+    await saveSuccessLog({ resultId, message: 'Succesfully updated row' })
+    return res.send({ message: 'Success' })
+  } catch (err) {
+    await saveErrorLog({
+      resultId,
+      message: "Couldn't fetch spreadsheet data",
+      details: err,
+    })
+    return res.status(500).send(err)
+  }
+}
+
+const matchFilter = (
+  row: GoogleSpreadsheetRow,
+  filter: GoogleSheetsGetOptions['filter']
+) => {
+  return filter.logicalOperator === LogicalOperator.AND
+    ? filter.comparisons.every(
+        (comparison) =>
+          comparison.column &&
+          matchComparison(
+            row[comparison.column],
+            comparison.comparisonOperator,
+            comparison.value
+          )
       )
-      if (updatingRowIndex === -1)
-        return res.status(404).send({ message: "Couldn't find row to update" })
-      for (const key in values) {
-        rows[updatingRowIndex][key] = values[key]
-      }
-      await rows[updatingRowIndex].save()
-      await saveSuccessLog({ resultId, message: 'Succesfully updated row' })
-      return res.send({ message: 'Success' })
-    } catch (err) {
-      await saveErrorLog({
-        resultId,
-        message: "Couldn't fetch spreadsheet data",
-        details: err,
-      })
-      return res.status(500).send(err)
+    : filter.comparisons.some(
+        (comparison) =>
+          comparison.column &&
+          matchComparison(
+            row[comparison.column],
+            comparison.comparisonOperator,
+            comparison.value
+          )
+      )
+}
+
+const matchComparison = (
+  inputValue?: string,
+  comparisonOperator?: ComparisonOperators,
+  value?: string
+) => {
+  if (!inputValue || !comparisonOperator || !value) return false
+  switch (comparisonOperator) {
+    case ComparisonOperators.CONTAINS: {
+      return inputValue.toLowerCase().includes(value.toLowerCase())
+    }
+    case ComparisonOperators.EQUAL: {
+      return inputValue === value
+    }
+    case ComparisonOperators.NOT_EQUAL: {
+      return inputValue !== value
+    }
+    case ComparisonOperators.GREATER: {
+      return parseFloat(inputValue) > parseFloat(value)
+    }
+    case ComparisonOperators.LESS: {
+      return parseFloat(inputValue) < parseFloat(value)
+    }
+    case ComparisonOperators.IS_SET: {
+      return isDefined(inputValue) && inputValue.length > 0
     }
   }
-  return methodNotAllowed(res)
 }
 
 const getExtractingColumns = (columns: string | string[] | undefined) => {