feat: everything google sheets integration docs'

apps/formbricks-com/app/docs/integrations/google-sheets/page.mdx

@@ -1,11 +1,12 @@
 import { Fence } from "@/components/shared/Fence";
 import { Callout } from "@/components/shared/Callout";
-import IntegrationTab from "./integrations-tab.png";
-import ConnectWithGoogle from "./connect-with-google.png";
-import GoogleConnected from "./google-connected.png";
-import LinkSurveyWithSheet from "./link-survey-with-sheet.png";
-import LinkWithQuestions from "./link-with-questions.png";
-import ListLinkedSurveys from "./list-linked-surveys.png";
+import IntegrationTab from "./integrations-tab.webp";
+import ConnectWithGoogle from "./connect-with-google.webp";
+import GoogleConnected from "./google-connected.webp";
+import LinkSurveyWithSheet from "./link-survey-with-sheet.webp";
+import LinkWithQuestions from "./link-with-questions.webp";
+import ListLinkedSurveys from "./list-linked-surveys.webp";
+import DeleteConnection from "./delete-connection.webp";
 import Image from "next/image";
 
 export const meta = {
@@ -24,7 +25,7 @@ The Google Sheets integration allows you to automatically send responses to a Go
   self-hosted version of Formbricks.
 </Note>
 
-## Setup in Formbricks Cloud
+## Start using straightaway Formbricks Cloud
 
 1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Google Sheets integration.
 
@@ -95,12 +96,42 @@ Congratulations! You have successfully linked a Google Sheet with Formbricks. No
 
 Enabling the Google Sheets Integration in a self-hosted environment isn't easy and requires a setup using Google Cloud and changing the environment variables of your Formbricks instance.
 
-The environment variables you need to set are:
+<Note>This process is really complicated and we recommend using Formbricks Cloud for this feature.</Note>
+
+We will first create a Google Cloud Project and then enable the Google Sheets API for it. Then we will create an OAuth Client ID and Client Secret for our Formbricks instance and set them as environment variables.
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/) and **create a new project**.
+2. Now select the project you just created and go to the "**APIs & Services**" section.
+3. Click on the "**Enable APIs and Services**" button and search for "**Google Sheets API**" and enable it.
+4. Now go to the "**OAuth Consent screen**" section and select the **"External" User Type** if you want any Google User to be able to use the integration or select "Internal" if you want only the users of your Google Workspace to be able to use the integration.
+5. Now provide it the details such as
+   - App name (Will **show up in the OAuth modal** when the user is asked to authenticate with Google)
+   - User support email (ideally should be **your email** for any support queries by the Users or Google)
+   - Developer contact information (ideally should be **your email** for any **support queries by Google**)
+6. Now click on the "Save and Continue" button and you will be taken to the Scopes step.
+7. Click on the "**Add or Remove Scopes**" button and add the scopes `https://www.googleapis.com/auth/userinfo.email`, `https://www.googleapis.com/auth/spreadsheets` & `https://www.googleapis.com/auth/drive` and click on the "Update" button:
+8. Now Verify the scopes and click on the "Save and Continue" button.
+9. Now go to the **"Test Users" section, skip the step**, and click the "Save and Continue" button.
+10. You will now be shown a summary of the OAuth Consent Screen. Verify the details and Click on the "**Back to Dashboard**" button.
+11. Now go to the "**Credentials**" section and click on the "**Create Credentials**" button and select "**OAuth Client ID**".
+12. Select "**Web Application**" as the Application Type and provide it a name (this name will **not be visible** to your end users).
+13. Now add your **public facing URL** in the "**Authorized JavaScript Origins**" section:
+    - https://`<your-public-facing-url`>
+14. Now add the following URL in the "**Authorized redirect URIs**" section and click on the "**Create**" button:
+    - https://`<your-public-facing-url`>/api/google-sheet/callback
+15. You will now be shown the **Client ID** and **Client Secret**. Copy them and set them as the **environment variables** in your Formbricks instance as:
+    - `GOOGLE_SHEETS_CLIENT_ID` - Client ID
+    - `GOOGLE_SHEETS_CLIENT_SECRET` - Client Secret
+16. Also use the **same Authorized redirect URI** in the `GOOGLE_SHEETS_REDIRECT_URL` environment variable.
+
+### By now, your environment variables should include the below ones as well:
 
 - `GOOGLE_SHEETS_CLIENT_ID`
 - `GOOGLE_SHEETS_CLIENT_SECRET`
 - `GOOGLE_SHEETS_REDIRECT_URL`
 
+Voila! You have successfully enabled the Google Sheets integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Start using straightaway Formbricks Cloud](#start-using-straightaway-formbricks-cloud) section to link a Google Sheet with Formbricks.
+
 ## Remove Integration with Google Account
 
 To remove the integration with Google Account,
@@ -110,4 +141,28 @@ To remove the integration with Google Account,
 3. Click on the "Connected with `<your-email-here`>" just before the "Link new Sheet" button.
 4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Google Account.
 
+<Image
+  src={DeleteConnection}
+  alt="Delete Google Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## What data do you need?
+
+- Your **Email ID** for authentication (We use this to identify you)
+- Your **Google Sheets Names and IDs** (We fetch this to list and show you the options of choosing a sheet to integrate with)
+- Write access to **selected Google Sheet** (The google sheet you choose to integrate it with, we write survey responses to it)
+
+For the above, we ask for:
+
+1. **User Email**: To identify you (that's it, nothing else, we're opensource, see this in our codebase [here](https://github.com/formbricks/formbricks/blob/main/apps/web/app/api/google-sheet/callback/route.ts#L47C17-L47C25))
+1. **Google Drive API**: To list all your google sheets (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/services/googleSheet.ts#L13))
+2. **Google Spreadsheet API**: To write to the spreadsheet you select (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/services/googleSheet.ts#L70))
+
+<Note>
+  We do not store any other information of yours! We value Privacy more than you and rest assured you're safe
+  with us!
+</Note>
+
 Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!