refactor: Optimize Google Sheets connection in settings modal

apps/acf-options-page/src/modal/settings/google-sheets.tsx

@@ -1,12 +1,12 @@
 import { Alert, Button, Image } from 'react-bootstrap';
 
-import GoogleSignInLight from '../../assets/btn_google_signin_light_normal_web.png';
+import { GOOGLE_SCOPES } from '@dhruv-techapps/google-oauth';
 import GoogleSignInDark from '../../assets/btn_google_signin_dark_normal_web.png';
+import GoogleSignInLight from '../../assets/btn_google_signin_light_normal_web.png';
 import { useAppDispatch, useAppSelector } from '../../hooks';
-import { themeSelector } from '../../store/theme.slice';
-import { googleLoginAPI } from '../../store/settings/settings.api';
 import { settingsSelector } from '../../store/settings';
-import { GOOGLE_SCOPES } from '@dhruv-techapps/google-oauth';
+import { googleLoginAPI } from '../../store/settings/settings.api';
+import { themeSelector } from '../../store/theme.slice';
 
 function SettingGoogleSheets() {
   const theme = useAppSelector(themeSelector);
@@ -21,17 +21,21 @@ function SettingGoogleSheets() {
   if (!google || !googleScopes.includes(scope)) {
     return (
       <div className='d-flex flex-column align-items-start'>
-        {['DEV', 'BETA', 'LOCAL'].includes(process.env.NX_VARIANT || '') && (
+        {['DEV', 'BETA', 'LOCAL'].includes(process.env.NX_VARIANT || '') ? (
           <Alert>
-            <Alert.Heading>For DEV and BETA versions only.</Alert.Heading>
-            To obtain access to the Local Google Sheets, kindly send an email to <Alert.Link href={`mailto:dhruv.techapps@gmail.com`}>dhruv.techapps@gmail.com</Alert.Link>. Please use{' '}
-            <b>Require access to {process.env.NX_VARIANT} Google sheets</b> as the subject of your email.
+            <Alert.Heading>Use Stable Versions for Google Sheets Features.</Alert.Heading>
+            For optimal performance and reliability in Google Sheets, it's recommended to utilize <Alert.Link href={`https://stable.getautoclicker.com`}>stable</Alert.Link> versions of its features.
+            These versions undergo thorough testing to ensure seamless functionality, providing you with a dependable platform for your tasks. By prioritizing stability, you can enhance your
+            productivity and minimize the risk of encountering unexpected issues. If you need assistance or guidance on leveraging Google Sheets effectively, feel free to reach out for support!.
           </Alert>
+        ) : (
+          <>
+            <b className='mx-3 text-muted'>Connect with Google Sheets</b>
+            <Button variant='link' onClick={connect} data-testid='google-sheets-connect' disabled={['DEV', 'BETA', 'LOCAL'].includes(process.env.NX_VARIANT || '')}>
+              <img src={theme === 'light' ? GoogleSignInLight : GoogleSignInDark} alt='Logo' />
+            </Button>
+          </>
         )}
-        <b className='mx-3 text-muted'>Connect with Google Sheets</b>
-        <Button variant='link' onClick={connect} data-testid='google-sheets-connect'>
-          <img src={theme === 'light' ? GoogleSignInLight : GoogleSignInDark} alt='Logo' />
-        </Button>
       </div>
     );
   }