fixed some minor bugs

frontend-dev/src/components/AllIntegrations/IntegrationHelpers/IntegrationHelpers.js

@@ -42,6 +42,7 @@ import {
   wpJobManagerStateIH
 } from '../../Triggers/TriggerHelpers/TriggerStateHelper'
 import c from 'react-multiple-select-dropdown-lite'
+import { create } from 'mutative'
 
 export const checkWebhookIntegrationsExist = (entity) => {
   const integrations = webhookIntegrations
@@ -477,13 +478,11 @@ export const handleAuthorize = (
     return
   }
   setIsLoading(true)
-  const apiEndpoint = `https://accounts.zoho.${
-    confTmp.dataCenter
-  }/oauth/v2/auth?scope=${scopes}&response_type=code&client_id=${
-    confTmp.clientId
-  }&prompt=Consent&access_type=offline&state=${encodeURIComponent(
-    window.location.href
-  )}/redirect&redirect_uri=${encodeURIComponent(`${btcbi.api.base}`)}/redirect`
+  const apiEndpoint = `https://accounts.zoho.${confTmp.dataCenter
+    }/oauth/v2/auth?scope=${scopes}&response_type=code&client_id=${confTmp.clientId
+    }&prompt=Consent&access_type=offline&state=${encodeURIComponent(
+      window.location.href
+    )}/redirect&redirect_uri=${encodeURIComponent(`${btcbi.api.base}`)}/redirect`
   const authWindow = window.open(apiEndpoint, integ, 'width=400,height=609,toolbar=off')
   const popupURLCheckTimer = setInterval(() => {
     if (authWindow.closed) {
@@ -564,9 +563,8 @@ const tokenHelper = (
       ) {
         setSnackbar({
           show: true,
-          msg: `${__('Authorization failed Cause:', 'bit-integrations')}${
-            result.data.data || result.data
-          }. ${__('please try again', 'bit-integrations')}`
+          msg: `${__('Authorization failed Cause:', 'bit-integrations')}${result.data.data || result.data
+            }. ${__('please try again', 'bit-integrations')}`
         })
       } else {
         setSnackbar({
@@ -639,3 +637,14 @@ export const handleCustomValue = (event, index, conftTmp, setConf, tab) => {
   }
   setConf({ ...newConf })
 }
+
+export const setFieldInputOnMsgBody = (val, setConf, inputRef) => {
+  setConf(prevConf => create(prevConf, draftConf => {
+    const body = draftConf.body
+    const cursorPosition = inputRef.current.selectionStart
+    const firstHalfBody = body.substring(0, cursorPosition)
+    const lastHalfBody = body.substring(cursorPosition, body.length)
+
+    draftConf.body = firstHalfBody + val + lastHalfBody
+  }))
+}

frontend-dev/src/components/AllIntegrations/Slack/SlackIntegLayout.jsx

@@ -1,13 +1,14 @@
+import { useRef } from 'react'
 import MultiSelect from 'react-multiple-select-dropdown-lite'
 import { useParams } from 'react-router-dom'
 import { __ } from '../../../Utils/i18nwrap'
-import CheckBox from '../../Utilities/CheckBox'
 import Loader from '../../Loaders/Loader'
-import TinyMCE from '../../Utilities/TinyMCE'
+import { setFieldInputOnMsgBody } from '../IntegrationHelpers/IntegrationHelpers'
 import SlackActions from './SlackActions'
 
 export default function SlackIntegLayout({ formFields, slackConf, setSlackConf, isLoading }) {
-  const { id } = useParams()
+  const textAreaRef = useRef(null)
+
   const handleInput = (e) => {
     const newConf = { ...slackConf }
     newConf[e.target.name] = e.target.value
@@ -63,6 +64,7 @@ export default function SlackIntegLayout({ formFields, slackConf, setSlackConf,
           <div className="flx mt-4">
             <b className="wdt-200 d-in-b mr-16">{__('Messages:', 'bit-integrations')}</b>
             <textarea
+              ref={textAreaRef}
               className="w-7"
               onChange={handleInput}
               name="body"
@@ -74,7 +76,9 @@ export default function SlackIntegLayout({ formFields, slackConf, setSlackConf,
                 .filter((f) => f.type !== 'file')
                 .map((f) => ({ label: f.label, value: `\${${f.name}}` }))}
               className="btcd-paper-drpdwn wdt-600 ml-2"
-              onChange={(val) => setMessageBody(val)}
+              onChange={(val) => setFieldInputOnMsgBody(val, setSlackConf, textAreaRef)}
+              singleSelect
+              selectOnClose
             />
           </div>
           <div className="mt-4">

frontend-dev/src/components/AllIntegrations/Telegram/TelegramIntegLayout.jsx

@@ -7,6 +7,8 @@ import TelegramActions from './TelegramActions'
 import { refreshGetUpdates } from './TelegramCommonFunc'
 import { create } from 'mutative'
 import TinyMCE from '../../Utilities/TinyMCE'
+import { useRef } from 'react'
+import { setFieldInputOnMsgBody } from '../IntegrationHelpers/IntegrationHelpers'
 
 export default function TelegramIntegLayout({
   formID,
@@ -18,6 +20,8 @@ export default function TelegramIntegLayout({
   setSnackbar
 }) {
   const { id } = useParams()
+  const textAreaRef = useRef(null)
+
   const handleInput = (e) => {
     const newConf = { ...telegramConf }
     newConf[e.target.name] = e.target.value
@@ -29,6 +33,7 @@ export default function TelegramIntegLayout({
       draftConf.body = val
     }))
   }
+
   const changeActionRun = (e) => {
     setTelegramConf(prevConf => create(prevConf, draftConf => {
       draftConf.parse_mode = e.target.value
@@ -114,6 +119,7 @@ export default function TelegramIntegLayout({
             {telegramConf?.parse_mode === 'MarkdownV2' && (
               <>
                 <textarea
+                  ref={textAreaRef}
                   className="w-7"
                   onChange={handleInput}
                   name="body"
@@ -125,8 +131,9 @@ export default function TelegramIntegLayout({
                     .filter((f) => f.type !== 'file')
                     .map((f) => ({ label: f.label, value: `\${${f.name}}` }))}
                   className="btcd-paper-drpdwn wdt-200 ml-2"
+                  onChange={(val) => setFieldInputOnMsgBody(val, setTelegramConf, textAreaRef)}
                   singleSelect
-                  onChange={(val) => setMessageBody(val)}
+                  selectOnClose
                 />
               </>
             )}

frontend-dev/src/components/AllIntegrations/Twilio/TwilioIntegLayout.jsx

@@ -1,5 +1,7 @@
 import MultiSelect from 'react-multiple-select-dropdown-lite'
 import { __ } from '../../../Utils/i18nwrap'
+import { setFieldInputOnMsgBody } from '../IntegrationHelpers/IntegrationHelpers'
+import { useRef } from 'react'
 // import TwilioFieldMap from './TwilioFieldMap'
 
 export default function TwilioIntegLayout({
@@ -11,11 +13,8 @@ export default function TwilioIntegLayout({
   setIsLoading,
   setSnackbar
 }) {
-  const setMessageBody = (val) => {
-    const newConf = { ...twilioConf }
-    newConf.body = val
-    setTwilioConf(newConf)
-  }
+  const textAreaRef = useRef(null)
+
   const handleInputt = (e) => {
     const newConf = { ...twilioConf }
     newConf[e.target.name] = e.target.value
@@ -61,6 +60,7 @@ export default function TwilioIntegLayout({
       <div className="flx mt-4">
         <b className="wdt-200 d-in-b">{__('Messages:', 'bit-integrations')}</b>
         <textarea
+          ref={textAreaRef}
           className="w-7"
           onChange={handleInputt}
           name="body"
@@ -72,7 +72,9 @@ export default function TwilioIntegLayout({
             .filter((f) => f.type !== 'file')
             .map((f) => ({ label: f.label, value: `\${${f.name}}` }))}
           className="btcd-paper-drpdwn wdt-400 ml-2"
-          onChange={(val) => setMessageBody(val)}
+          onChange={(val) => setFieldInputOnMsgBody(val, setTwilioConf, textAreaRef)}
+          singleSelect
+          selectOnClose
         />
       </div>