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: + + Google Spreadsheets checkboxes + + + + + + + + + ) +} 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 && (