chore: google integration auth notif

src/components/molecules/IntegrationSettings.tsx

@@ -1,12 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import { GenericModal } from "../atoms/GenericModal";
-import { MenuItem, Typography, CircularProgress, Alert, AlertTitle, Chip } from "@mui/material";
+import {
+  MenuItem,
+  Typography,
+  CircularProgress,
+  Alert,
+  AlertTitle,
+  Chip,
+} from "@mui/material";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
-import axios from 'axios';
+import axios from "axios";
-import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useGlobalInfoStore } from "../../context/globalInfo";
-import { getStoredRecording } from '../../api/storage';
+import { getStoredRecording } from "../../api/storage";
-import { apiUrl } from '../../apiConfig.js';
+import { apiUrl } from "../../apiConfig.js";
+import Cookies from 'js-cookie';
 interface IntegrationProps {
   isOpen: boolean;
   handleStart: (data: IntegrationSettings) => void;
@@ -18,14 +26,20 @@ export interface IntegrationSettings {
   data: string;
 }
 
-export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: IntegrationProps) => {
+export const IntegrationSettingsModal = ({
+  isOpen,
+  handleStart,
+  handleClose,
+}: IntegrationProps) => {
   const [settings, setSettings] = useState<IntegrationSettings>({
-        spreadsheetId: '',
+    spreadsheetId: "",
-        spreadsheetName: '',
+    spreadsheetName: "",
-        data: '',
+    data: "",
   });
 
-    const [spreadsheets, setSpreadsheets] = useState<{ id: string, name: string }[]>([]);
+  const [spreadsheets, setSpreadsheets] = useState<
+    { id: string; name: string }[]
+  >([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -41,26 +55,43 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
       const response = await axios.get(`${apiUrl}/auth/google/callback`);
       const { google_sheet_email, files } = response.data;
     } catch (error) {
-            setError('Error authenticating with Google');
+      setError("Error authenticating with Google");
     }
   };
 
   const fetchSpreadsheetFiles = async () => {
     try {
-            const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, {
+      const response = await axios.get(
+        `${apiUrl}/auth/gsheets/files?robotId=${recordingId}`,
+        {
           withCredentials: true,
-            });
+        }
+      );
       setSpreadsheets(response.data);
     } catch (error: any) {
-            console.error('Error fetching spreadsheet files:', error.response?.data?.message || error.message);
+      console.error(
-            notify('error', `Error fetching spreadsheet files: ${error.response?.data?.message || error.message}`);
+        "Error fetching spreadsheet files:",
+        error.response?.data?.message || error.message
+      );
+      notify(
+        "error",
+        `Error fetching spreadsheet files: ${
+          error.response?.data?.message || error.message
+        }`
+      );
     }
   };
 
   const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const selectedSheet = spreadsheets.find(sheet => sheet.id === e.target.value);
+    const selectedSheet = spreadsheets.find(
+      (sheet) => sheet.id === e.target.value
+    );
     if (selectedSheet) {
-            setSettings({ ...settings, spreadsheetId: selectedSheet.id, spreadsheetName: selectedSheet.name });
+      setSettings({
+        ...settings,
+        spreadsheetId: selectedSheet.id,
+        spreadsheetName: selectedSheet.name,
+      });
     }
   };
 
@@ -68,12 +99,19 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
     try {
       const response = await axios.post(
         `${apiUrl}/auth/gsheets/update`,
-                { spreadsheetId: settings.spreadsheetId, spreadsheetName: settings.spreadsheetName, robotId: recordingId },
+        {
+          spreadsheetId: settings.spreadsheetId,
+          spreadsheetName: settings.spreadsheetName,
+          robotId: recordingId,
+        },
         { withCredentials: true }
       );
-            console.log('Google Sheet ID updated:', response.data);
+      console.log("Google Sheet ID updated:", response.data);
     } catch (error: any) {
-            console.error('Error updating Google Sheet ID:', error.response?.data?.message || error.message);
+      console.error(
+        "Error updating Google Sheet ID:",
+        error.response?.data?.message || error.message
+      );
     }
   };
 
@@ -87,16 +125,30 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
 
       setRecording(null);
       setSpreadsheets([]);
-            setSettings({ spreadsheetId: '', spreadsheetName: '', data: '' });
+      setSettings({ spreadsheetId: "", spreadsheetName: "", data: "" });
     } catch (error: any) {
-            console.error('Error removing Google Sheets integration:', error.response?.data?.message || error.message);
+      console.error(
+        "Error removing Google Sheets integration:",
+        error.response?.data?.message || error.message
+      );
     }
   };
 
   useEffect(() => {
+    // Check if there is a success message in cookies
+    const status = Cookies.get("robot_auth_status");
+    const message = Cookies.get("robot_auth_message");
+
+    if (status === "success" && message) {
+      notify("success", message);
+      // Clear the cookies after reading
+      Cookies.remove("robot_auth_status");
+      Cookies.remove("robot_auth_message");
+    }
+
     // Check if we're on the callback URL
     const urlParams = new URLSearchParams(window.location.search);
-        const code = urlParams.get('code');
+    const code = urlParams.get("code");
     if (code) {
       handleOAuthCallback();
     }
@@ -114,22 +166,44 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
 
   return (
     <GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', marginLeft: '65px' }}>
+      <div
-                <Typography variant="h6" >Integrate with Google Sheet <Chip label="beta" color="primary" variant="outlined" /></Typography>
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          marginLeft: "65px",
+        }}
+      >
+        <Typography variant="h6">
+          Integrate with Google Sheet{" "}
+          <Chip label="beta" color="primary" variant="outlined" />
+        </Typography>
 
         {recording && recording.google_sheet_id ? (
           <>
             <Alert severity="info">
               <AlertTitle>Google Sheet Integrated Successfully.</AlertTitle>
-                            Every time this robot creates a successful run, its captured data is appended to your {recording.google_sheet_name} Google Sheet. You can check the data updates <a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`} target="_blank" rel="noreferrer">here</a>.
+              Every time this robot creates a successful run, its captured data
+              is appended to your {recording.google_sheet_name} Google Sheet.
+              You can check the data updates{" "}
+              <a
+                href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                here
+              </a>
+              .
               <br />
-                            <strong>Note:</strong> The data extracted before integrating with Google Sheets will not be synced in the Google Sheet. Only the data extracted after the integration will be synced.
+              <strong>Note:</strong> The data extracted before integrating with
+              Google Sheets will not be synced in the Google Sheet. Only the
+              data extracted after the integration will be synced.
             </Alert>
             <Button
               variant="outlined"
               color="error"
               onClick={removeIntegration}
-                            style={{ marginTop: '15px' }}
+              style={{ marginTop: "15px" }}
             >
               Remove Integration
             </Button>
@@ -138,7 +212,11 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
           <>
             {!recording?.google_sheet_email ? (
               <>
-                                <p>If you enable this option, every time this robot runs a task successfully, its captured data will be appended to your Google Sheet.</p>
+                <p>
+                  If you enable this option, every time this robot runs a task
+                  successfully, its captured data will be appended to your
+                  Google Sheet.
+                </p>
                 <Button
                   variant="contained"
                   color="primary"
@@ -150,18 +228,18 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
             ) : (
               <>
                 {recording.google_sheet_email && (
-                                    <Typography sx={{ margin: '20px 0px 30px 0px' }}>
+                  <Typography sx={{ margin: "20px 0px 30px 0px" }}>
                     Authenticated as: {recording.google_sheet_email}
                   </Typography>
                 )}
 
                 {loading ? (
-                                    <CircularProgress sx={{ marginBottom: '15px' }} />
+                  <CircularProgress sx={{ marginBottom: "15px" }} />
                 ) : error ? (
                   <Typography color="error">{error}</Typography>
                 ) : spreadsheets.length === 0 ? (
                   <>
-                                        <div style={{ display: 'flex', gap: '10px' }}>
+                    <div style={{ display: "flex", gap: "10px" }}>
                       <Button
                         variant="outlined"
                         color="primary"
@@ -181,7 +259,7 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
                 ) : (
                   <>
                     <TextField
-                                            sx={{ marginBottom: '15px' }}
+                      sx={{ marginBottom: "15px" }}
                       select
                       label="Select Google Sheet"
                       required
@@ -189,7 +267,7 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
                       onChange={handleSpreadsheetSelect}
                       fullWidth
                     >
-                                            {spreadsheets.map(sheet => (
+                      {spreadsheets.map((sheet) => (
                         <MenuItem key={sheet.id} value={sheet.id}>
                           {sheet.name}
                         </MenuItem>
@@ -197,8 +275,14 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
                     </TextField>
 
                     {settings.spreadsheetId && (
-                                            <Typography sx={{ marginBottom: '10px' }}>
+                      <Typography sx={{ marginBottom: "10px" }}>
-                                                Selected Sheet: {spreadsheets.find(s => s.id === settings.spreadsheetId)?.name} (ID: {settings.spreadsheetId})
+                        Selected Sheet:{" "}
+                        {
+                          spreadsheets.find(
+                            (s) => s.id === settings.spreadsheetId
+                          )?.name
+                        }{" "}
+                        (ID: {settings.spreadsheetId})
                       </Typography>
                     )}
 
@@ -209,7 +293,7 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
                         updateGoogleSheetId();
                         handleStart(settings);
                       }}
-                                            style={{ marginTop: '10px' }}
+                      style={{ marginTop: "10px" }}
                       disabled={!settings.spreadsheetId || loading}
                     >
                       Submit
@@ -226,13 +310,13 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
 };
 
 export const modalStyle = {
-    top: '40%',
+  top: "40%",
-    left: '50%',
+  left: "50%",
-    transform: 'translate(-50%, -50%)',
+  transform: "translate(-50%, -50%)",
-    width: '50%',
+  width: "50%",
-    backgroundColor: 'background.paper',
+  backgroundColor: "background.paper",
   p: 4,
-    height: 'fit-content',
+  height: "fit-content",
-    display: 'block',
+  display: "block",
-    padding: '20px',
+  padding: "20px",
 };