Update webhook settings UI and functionality

src/views/Settings/Settings.jsx

@@ -7,6 +7,8 @@ import {
   CircularProgress,
   Container,
   Divider,
+  FormControl,
+  FormHelperText,
   Input,
   Typography,
 } from '@mui/joy'
@@ -28,6 +30,7 @@ import {
   PutWebhookURL,
   UpdatePassword,
 } from '../../utils/Fetcher'
+import { isPlusAccount } from '../../utils/Helpers'
 import PassowrdChangeModal from '../Modals/Inputs/PasswordChangeModal'
 import APITokenSettings from './APITokenSettings'
 import NotificationSetting from './NotificationSetting'
@@ -327,6 +330,7 @@ const Settings = () => {
               services when events happen in your Circle. Use the webhook URL
               below to
             </Typography>
+            <FormControl sx={{ mt: 1 }}>
               <Checkbox
                 checked={webhookURL !== null}
                 onClick={() => {
@@ -337,8 +341,22 @@ const Settings = () => {
                   }
                 }}
                 variant='soft'
-              label={'Enable Webhook'}
+                label='Enable Webhook'
+                disabled={!isPlusAccount(userProfile)}
+                overlay
               />
+              <FormHelperText
+                sx={{
+                  opacity: !isPlusAccount(userProfile) ? 0.5 : 1,
+                }}
+              >
+                Enable webhook notifications for tasks and things updates.{' '}
+                {userProfile && !isPlusAccount(userProfile) && (
+                  <Chip variant='soft' color='warning'>
+                    Not available in Basic Plan
+                  </Chip>
+                )}
+              </FormHelperText>
               <>
                 {webhookURL !== null && (
                   <Typography level='title-sm'>
@@ -359,7 +377,7 @@ const Settings = () => {
                 )}
                 <Button
                   variant='soft'
-                sx={{ width: '110px' }}
+                  sx={{ width: '110px', mt: 1 }}
                   onClick={() => {
                     PutWebhookURL(webhookURL).then(resp => {
                       if (resp.ok) {
@@ -369,10 +387,12 @@ const Settings = () => {
                       }
                     })
                   }}
+                  disabled={!isPlusAccount(userProfile)}
                 >
                   Save
                 </Button>
               </>
+            </FormControl>
           </>
         )}
       </div>