feat(integration): ♿️ Add modal that asks for checking Google checkboxes

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 (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Connect Spreadsheets</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody as={Stack} spacing="6">
+          <Info>
+            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.
+          </Info>
+          <Text>
+            Make sure to check all the permissions so that the integration works
+            as expected:
+          </Text>
+          <Image
+            src="/images/google-spreadsheets-scopes.jpeg"
+            alt="Google Spreadsheets checkboxes"
+          />
+          <Flex>
+            <Button
+              as={NextChakraLink}
+              leftIcon={<GoogleLogo />}
+              data-testid="google"
+              isLoading={['loading', 'authenticated'].includes(status)}
+              variant="outline"
+              href={getGoogleSheetsConsentScreenUrl(
+                window.location.href,
+                stepId
+              )}
+              mx="auto"
+            >
+              Continue with Google
+            </Button>
+          </Flex>
+        </ModalBody>
+
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}

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 {
+import { Sheet, useSheets } from 'services/integrations'
-  getGoogleSheetsConsentScreenUrl,
-  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')
+    onOpen()
-    linkElement.href = getGoogleSheetsConsentScreenUrl(
-      window.location.href,
-      stepId
-    )
-    linkElement.click()
   }
 
   return (
@@ -99,6 +92,11 @@ export const GoogleSheetsSettingsBody = ({
         onCredentialsSelect={handleCredentialsIdChange}
         onCreateNewClick={handleCreateNewClick}
       />
+      <GoogleSheetConnectModal
+        stepId={stepId}
+        isOpen={isOpen}
+        onClose={onClose}
+      />
       {options?.credentialsId && (
         <SpreadsheetsDropdown
           credentialsId={options.credentialsId}