Fix for mobile verification (#2692)

# What this PR does

## Which issue(s) this PR fixes

https://github.com/grafana/oncall/issues/2687

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix helm env variable validation logic when specifying Twilio auth related values by @njohnstone2 ([#2674](https://github.com/grafana/oncall/pull/2674))
+- Fixed mobile app verification not sending SMS to phone number ([#2687](https://github.com/grafana/oncall/issues/2687))
 
 ## v1.3.19 (2023-07-28)
 

grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx

@@ -40,7 +40,6 @@ import { rootStore } from 'state';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 import { isUserActionAllowed } from 'utils/authorization';
-import loadJs from 'utils/loadJs';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -99,10 +98,6 @@ export const Root = observer((props: AppRootProps) => {
     };
   }, []);
 
-  useEffect(() => {
-    loadJs(`https://www.google.com/recaptcha/api.js?render=${rootStore.recaptchaSiteKey}`);
-  }, []);
-
   const updateBasicData = async () => {
     await store.updateBasicData();
     setBasicDataLoaded(true);

grafana-plugin/src/plugin/PluginSetup/index.tsx

@@ -9,6 +9,7 @@ import { AppRootProps } from 'types';
 import logo from 'assets/img/logo.svg';
 import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers';
 import { useStore } from 'state/useStore';
+import loadJs from 'utils/loadJs';
 
 export type PluginSetupProps = AppRootProps & {
   InitializedComponent: (props: AppRootProps) => JSX.Element;
@@ -35,8 +36,13 @@ const PluginSetupWrapper: FC<PluginSetupWrapperProps> = ({ text, children }) =>
 const PluginSetup: FC<PluginSetupProps> = observer(({ InitializedComponent, ...props }) => {
   const store = useStore();
   const setupPlugin = useCallback(() => store.setupPlugin(props.meta), [props.meta]);
+
   useEffect(() => {
-    setupPlugin();
+    (async function () {
+      await setupPlugin();
+      store.recaptchaSiteKey &&
+        loadJs(`https://www.google.com/recaptcha/api.js?render=${store.recaptchaSiteKey}`, store.recaptchaSiteKey);
+    })();
   }, [setupPlugin]);
 
   if (store.initializationError) {

grafana-plugin/src/state/rootBaseStore/index.ts

@@ -231,6 +231,7 @@ export class RootBaseStore {
       this.backendLicense = pluginConnectionStatus.license;
       this.recaptchaSiteKey = pluginConnectionStatus.recaptcha_site_key;
     }
+
     if (!this.userStore.currentUser) {
       try {
         await this.userStore.loadCurrentUser();

grafana-plugin/src/utils/loadJs.ts

@@ -1,6 +1,23 @@
-export default function loadJs(url: string) {
+/**
+ * Will append a new JS script
+ * @param  {string} url of the script
+ * @param  {string} id optional id. If specified, the script will be loaded only once for that given id
+ */
+export default function loadJs(url: string, id: string = undefined) {
+  if (id) {
+    const existingScript = document.getElementById(url);
+    if (existingScript) {
+      return;
+    }
+  }
+
   let script = document.createElement('script');
   script.src = url;
 
+  if (id) {
+    // optional
+    script.id = id;
+  }
+
   document.head.appendChild(script);
 }