From 71ae1d3ff6a209d3e24154ac835639bc99c08aba Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 31 Jul 2023 15:48:18 +0300
Subject: [PATCH] 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                                  |  1 +
 .../src/plugin/GrafanaPluginRootPage.tsx      |  5 -----
 .../src/plugin/PluginSetup/index.tsx          |  8 +++++++-
 .../src/state/rootBaseStore/index.ts          |  1 +
 grafana-plugin/src/utils/loadJs.ts            | 19 ++++++++++++++++++-
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56cabf08..a42fe127 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
index d012fec0..a96f090c 100644
--- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
+++ b/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);
diff --git a/grafana-plugin/src/plugin/PluginSetup/index.tsx b/grafana-plugin/src/plugin/PluginSetup/index.tsx
index da485b40..5592c0f3 100644
--- a/grafana-plugin/src/plugin/PluginSetup/index.tsx
+++ b/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) {
diff --git a/grafana-plugin/src/state/rootBaseStore/index.ts b/grafana-plugin/src/state/rootBaseStore/index.ts
index 2791acc1..ee81b2d7 100644
--- a/grafana-plugin/src/state/rootBaseStore/index.ts
+++ b/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();
diff --git a/grafana-plugin/src/utils/loadJs.ts b/grafana-plugin/src/utils/loadJs.ts
index 83e7d4e6..4580f1e3 100644
--- a/grafana-plugin/src/utils/loadJs.ts
+++ b/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);
 }