diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsConnectModal.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsConnectModal.tsx
new file mode 100644
index 000000000..c6664567b
--- /dev/null
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsConnectModal.tsx
@@ -0,0 +1,70 @@
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ Stack,
+ Text,
+ Image,
+ Button,
+ ModalFooter,
+ Flex,
+} from '@chakra-ui/react'
+import { GoogleLogo } from 'assets/logos'
+import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { Info } from 'components/shared/Info'
+import React from 'react'
+import { getGoogleSheetsConsentScreenUrl } from 'services/integrations'
+
+type Props = {
+ isOpen: boolean
+ stepId: string
+ onClose: () => void
+}
+
+export const GoogleSheetConnectModal = ({ stepId, isOpen, onClose }: Props) => {
+ return (
+
+
+
+ Connect Spreadsheets
+
+
+
+ Typebot needs access to Google Drive in order to list all your
+ spreadsheets. It also needs access to your spreadsheets in order to
+ fetch or inject data in it.
+
+
+ Make sure to check all the permissions so that the integration works
+ as expected:
+
+
+
+ }
+ data-testid="google"
+ isLoading={['loading', 'authenticated'].includes(status)}
+ variant="outline"
+ href={getGoogleSheetsConsentScreenUrl(
+ window.location.href,
+ stepId
+ )}
+ mx="auto"
+ >
+ Continue with Google
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx
index 24611b956..7f754a31b 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Text } from '@chakra-ui/react'
+import { Divider, Stack, Text, useDisclosure } from '@chakra-ui/react'
import { DropdownList } from 'components/shared/DropdownList'
import { TableList, TableListItemProps } from 'components/shared/TableList'
import { useTypebot } from 'contexts/TypebotContext'
@@ -13,17 +13,14 @@ import {
GoogleSheetsUpdateRowOptions,
} from 'models'
import React, { useMemo } from 'react'
-import {
- getGoogleSheetsConsentScreenUrl,
- Sheet,
- useSheets,
-} from 'services/integrations'
+import { Sheet, useSheets } from 'services/integrations'
import { isDefined, omit } from 'utils'
import { SheetsDropdown } from './SheetsDropdown'
import { SpreadsheetsDropdown } from './SpreadsheetDropdown'
import { CellWithValueStack } from './CellWithValueStack'
import { CellWithVariableIdStack } from './CellWithVariableIdStack'
import { CredentialsDropdown } from 'components/shared/CredentialsDropdown'
+import { GoogleSheetConnectModal } from './GoogleSheetsConnectModal'
type Props = {
options: GoogleSheetsOptions
@@ -41,6 +38,7 @@ export const GoogleSheetsSettingsBody = ({
credentialsId: options?.credentialsId,
spreadsheetId: options?.spreadsheetId,
})
+ const { isOpen, onOpen, onClose } = useDisclosure()
const sheet = useMemo(
() => sheets?.find((s) => s.id === options?.sheetId),
[sheets, options?.sheetId]
@@ -83,12 +81,7 @@ export const GoogleSheetsSettingsBody = ({
const handleCreateNewClick = async () => {
await save()
- const linkElement = document.createElement('a')
- linkElement.href = getGoogleSheetsConsentScreenUrl(
- window.location.href,
- stepId
- )
- linkElement.click()
+ onOpen()
}
return (
@@ -99,6 +92,11 @@ export const GoogleSheetsSettingsBody = ({
onCredentialsSelect={handleCredentialsIdChange}
onCreateNewClick={handleCreateNewClick}
/>
+
{options?.credentialsId && (