Phone provider refactoring (#1713)

# What this PR does
This PR moves phone notification logic into separate object PhoneBackend
and introduces PhoneProvider interface to hide actual implementation of
external phone services provider. It should allow add new phone
providers just by implementing one class (See SimplePhoneProvider for
example).
# Why 
[Asterisk PR](#1282) showed that
our phone notification system is not flexible. However this is one of
the most frequent community questions - how to add "X" phone provider.
Also, this refactoring move us one step closer to unifying all
notification backends, since with PhoneBackend all phone notification
logic is collected in one place and independent from concrete
realisation.
# Highligts
1. PhoneBackend object - contains all phone notifications business
logic.
2. PhoneProvider - interface to  external phone services provider.
3. TwilioPhoneProvider and SimplePhoneProvider - two examples of
PhoneProvider implementation.
4. PhoneCallRecord and SMSRecord models. I introduced these models to
keep phone notification limits logic decoupled from external providers.
Existing TwilioPhoneCall and TwilioSMS objects will be migrated to the
new table to not to reset limits counter. To be able to receive status
callbacks and gather from Twilio TwilioPhoneCall and TwilioSMS still
exists, but they are linked to PhoneCallRecord and SMSRecord via fk, to
not to leat twilio logic into core code.

---------

Co-authored-by: Yulia Shanyrova <[email protected]>

Author: Konstantinov-Innokentii

src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx

@@ -24,7 +24,8 @@ interface PhoneVerificationProps extends HTMLAttributes<HTMLElement> {
 interface PhoneVerificationState {
   phone: string;
   code: string;
-  isCodeSent: boolean;
+  isCodeSent?: boolean;
+  isPhoneCallInitiated?: boolean;
   isPhoneNumberHidden: boolean;
   isLoading: boolean;
   showForgetScreen: boolean;
@@ -41,7 +42,10 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
   const user = userStore.items[userPk];
   const isCurrentUser = userStore.currentUserPk === user.pk;
 
-  const [{ showForgetScreen, phone, code, isCodeSent, isPhoneNumberHidden, isLoading }, setState] = useReducer(
+  const [
+    { showForgetScreen, phone, code, isCodeSent, isPhoneCallInitiated, isPhoneNumberHidden, isLoading },
+    setState,
+  ] = useReducer(
     (state: PhoneVerificationState, newState: Partial<PhoneVerificationState>) => ({
       ...state,
       ...newState,
@@ -51,6 +55,7 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
       phone: user.verified_phone_number || '+',
       isLoading: false,
       isCodeSent: false,
+      isPhoneCallInitiated: false,
       showForgetScreen: false,
       isPhoneNumberHidden: user.hide_phone_number,
     }
@@ -70,7 +75,7 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
   );
 
   const onChangePhoneCallback = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ isCodeSent: false, phone: event.target.value });
+    setState({ isCodeSent: false, isPhoneCallInitiated: false, phone: event.target.value });
   }, []);
 
   const onChangeCodeCallback = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -81,59 +86,91 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
     userStore.makeTestCall(userPk);
   }, [userPk, userStore.makeTestCall]);
 
+  const handleSendTestSmsClick = useCallback(() => {
+    userStore.sendTestSms(userPk);
+  }, [userPk, userStore.sendTestSms]);
+
   const handleForgetNumberClick = useCallback(() => {
     userStore.forgetPhone(userPk).then(async () => {
       await userStore.loadUser(userPk);
-      setState({ phone: '', showForgetScreen: false, isCodeSent: false });
+      setState({ phone: '', showForgetScreen: false, isCodeSent: false, isPhoneCallInitiated: false });
     });
   }, [userPk, userStore.forgetPhone, userStore.loadUser]);
 
-  const onSubmitCallback = useCallback(async () => {
-    if (isCodeSent) {
-      userStore.verifyPhone(userPk, code).then(() => {
-        userStore.loadUser(userPk);
-      });
-    } else {
-      window.grecaptcha.ready(function () {
-        window.grecaptcha
-          .execute(rootStore.recaptchaSiteKey, { action: 'mobile_verification_code' })
-          .then(async function (token) {
-            await userStore.updateUser({
-              pk: userPk,
-              email: user.email,
-              unverified_phone_number: phone,
+  const onSubmitCallback = useCallback(
+    async (type) => {
+      let codeVerification = isCodeSent;
+      if (type === 'verification_call') {
+        codeVerification = isPhoneCallInitiated;
+      }
+      if (codeVerification) {
+        userStore.verifyPhone(userPk, code).then(() => {
+          userStore.loadUser(userPk);
+        });
+      } else {
+        window.grecaptcha.ready(function () {
+          window.grecaptcha
+            .execute(rootStore.recaptchaSiteKey, { action: 'mobile_verification_code' })
+            .then(async function (token) {
+              await userStore.updateUser({
+                pk: userPk,
+                email: user.email,
+                unverified_phone_number: phone,
+              });
+
+              switch (type) {
+                case 'verification_call':
+                  userStore.fetchVerificationCall(userPk, token).then(() => {
+                    setState({ isPhoneCallInitiated: true });
+                    if (codeInputRef.current) {
+                      codeInputRef.current.focus();
+                    }
+                  });
+                  break;
+                case 'verification_sms':
+                  userStore.fetchVerificationCode(userPk, token).then(() => {
+                    setState({ isCodeSent: true });
+                    if (codeInputRef.current) {
+                      codeInputRef.current.focus();
+                    }
+                  });
+                  break;
+              }
             });
+        });
+      }
+    },
+    [
+      code,
+      isCodeSent,
+      phone,
+      user.email,
+      userPk,
+      userStore.verifyPhone,
+      userStore.updateUser,
+      userStore.fetchVerificationCode,
+    ]
+  );
 
-            userStore.fetchVerificationCode(userPk, token).then(() => {
-              setState({ isCodeSent: true });
+  const onVerifyCallback = useCallback(async () => {
+    userStore.verifyPhone(userPk, code).then(() => {
+      userStore.loadUser(userPk);
+    });
+  }, [code, userPk, userStore.verifyPhone, userStore.loadUser]);
+
+  const isPhoneProviderConfigured = teamStore.currentTeam?.env_status.phone_provider?.configured;
+  const providerConfiguration = teamStore.currentTeam?.env_status.phone_provider;
 
-              if (codeInputRef.current) {
-                codeInputRef.current.focus();
-              }
-            });
-          });
-      });
-    }
-  }, [
-    code,
-    isCodeSent,
-    phone,
-    user.email,
-    userPk,
-    userStore.verifyPhone,
-    userStore.updateUser,
-    userStore.fetchVerificationCode,
-  ]);
-
-  const isTwilioConfigured = teamStore.currentTeam?.env_status.twilio_configured;
   const phoneHasMinimumLength = phone?.length > 8;
 
   const isPhoneValid = phoneHasMinimumLength && PHONE_REGEX.test(phone);
   const showPhoneInputError = phoneHasMinimumLength && !isPhoneValid && !isPhoneNumberHidden && !isLoading;
 
   const action = isCurrentUser ? UserActions.UserSettingsWrite : UserActions.UserSettingsAdmin;
   const isButtonDisabled =
-    phone === user.verified_phone_number || (!isCodeSent && !isPhoneValid) || !isTwilioConfigured;
+    phone === user.verified_phone_number ||
+    (!isCodeSent && !isPhoneValid && !isPhoneCallInitiated) ||
+    !isPhoneProviderConfigured;
 
   const isPhoneDisabled = !!user.verified_phone_number;
   const isCodeFieldDisabled = !isCodeSent || !isUserActionAllowed(action);
@@ -158,15 +195,15 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
         </>
       )}
 
-      {!isTwilioConfigured && store.hasFeature(AppFeature.LiveSettings) && (
+      {!isPhoneProviderConfigured && store.hasFeature(AppFeature.LiveSettings) && (
         <>
           <Alert
             severity="warning"
             // @ts-ignore
             title={
               <>
-                Can't verify phone. <PluginLink query={{ page: 'live-settings' }}> Check ENV variables</PluginLink>{' '}
-                related to Twilio.
+                Can't verify phone. <PluginLink query={{ page: 'live-settings' }}> Check ENV variables</PluginLink> to
+                configure your provider.
               </>
             }
           />
@@ -185,7 +222,7 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
               autoFocus
               id="phone"
               required
-              disabled={!isTwilioConfigured || isPhoneDisabled}
+              disabled={!isPhoneProviderConfigured || isPhoneDisabled}
               placeholder="Please enter the phone number with country code, e.g. +12451111111"
               // @ts-ignore
               prefix={<Icon name="phone" />}
@@ -233,11 +270,14 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
       <PhoneVerificationButtonsGroup
         action={action}
         isCodeSent={isCodeSent}
+        isPhoneCallInitiated={isPhoneCallInitiated}
         isButtonDisabled={isButtonDisabled}
         isTestCallInProgress={userStore.isTestCallInProgress}
-        isTwilioConfigured={isTwilioConfigured}
+        providerConfiguration={providerConfiguration}
         onSubmitCallback={onSubmitCallback}
+        onVerifyCallback={onVerifyCallback}
         handleMakeTestCallClick={handleMakeTestCallClick}
+        handleSendTestSmsClick={handleSendTestSmsClick}
         onShowForgetScreen={() => setState({ showForgetScreen: true })}
         user={user}
       />
@@ -273,12 +313,20 @@ interface PhoneVerificationButtonsGroupProps {
   action: UserAction;
 
   isCodeSent: boolean;
+  isPhoneCallInitiated: boolean;
   isButtonDisabled: boolean;
   isTestCallInProgress: boolean;
-  isTwilioConfigured: boolean;
-
-  onSubmitCallback(): void;
+  providerConfiguration: {
+    configured: boolean;
+    test_call: boolean;
+    test_sms: boolean;
+    verification_call: boolean;
+    verification_sms: boolean;
+  };
+  onSubmitCallback(type: string): void;
+  onVerifyCallback(): void;
   handleMakeTestCallClick(): void;
+  handleSendTestSmsClick(): void;
   onShowForgetScreen(): void;
 
   user: User;
@@ -287,25 +335,60 @@ interface PhoneVerificationButtonsGroupProps {
 function PhoneVerificationButtonsGroup({
   action,
   isCodeSent,
+  isPhoneCallInitiated,
   isButtonDisabled,
   isTestCallInProgress,
-  isTwilioConfigured,
+  providerConfiguration,
   onSubmitCallback,
+  onVerifyCallback,
   handleMakeTestCallClick,
+  handleSendTestSmsClick,
   onShowForgetScreen,
   user,
 }: PhoneVerificationButtonsGroupProps) {
   const showForgetNumber = !!user.verified_phone_number;
   const showVerifyOrSendCodeButton = !user.verified_phone_number;
-
+  const verificationStarted = isCodeSent || isPhoneCallInitiated;
   return (
     <HorizontalGroup>
       {showVerifyOrSendCodeButton && (
-        <WithPermissionControlTooltip userAction={action}>
-          <Button variant="primary" onClick={onSubmitCallback} disabled={isButtonDisabled}>
-            {isCodeSent ? 'Verify' : 'Send Code'}
-          </Button>
-        </WithPermissionControlTooltip>
+        <HorizontalGroup>
+          {verificationStarted ? (
+            <>
+              <WithPermissionControlTooltip userAction={action}>
+                <Button variant="primary" onClick={onVerifyCallback}>
+                  Verify
+                </Button>
+              </WithPermissionControlTooltip>
+            </>
+          ) : (
+            <HorizontalGroup>
+              {' '}
+              {providerConfiguration.verification_sms && (
+                <WithPermissionControlTooltip userAction={action}>
+                  <Button
+                    variant="primary"
+                    onClick={() => onSubmitCallback('verification_sms')}
+                    disabled={isButtonDisabled}
+                  >
+                    Send Code
+                  </Button>
+                </WithPermissionControlTooltip>
+              )}
+              {providerConfiguration.verification_call && (
+                <WithPermissionControlTooltip userAction={action}>
+                  <Button
+                    variant="primary"
+                    onClick={() => onSubmitCallback('verification_call')}
+                    disabled={isButtonDisabled}
+                  >
+                    Call to get the code
+                  </Button>
+                </WithPermissionControlTooltip>
+              )}
+            </HorizontalGroup>
+          )}
+        </HorizontalGroup>
       )}
 
       {showForgetNumber && (
@@ -321,24 +404,33 @@ function PhoneVerificationButtonsGroup({
       )}
 
       {user.verified_phone_number && (
-        <>
-          <WithPermissionControlTooltip userAction={action}>
-            <Button
-              disabled={!user?.verified_phone_number || !isTwilioConfigured || isTestCallInProgress}
-              onClick={handleMakeTestCallClick}
-            >
-              {isTestCallInProgress ? 'Making Test Call...' : 'Make Test Call'}
-            </Button>
-          </WithPermissionControlTooltip>
-          <Tooltip content={'Click "Make Test Call" to save a phone number and add it to DnD exceptions.'}>
-            <Icon
-              name="info-circle"
-              style={{
-                marginLeft: '10px',
-              }}
-            />
-          </Tooltip>
-        </>
+        <HorizontalGroup>
+          {providerConfiguration.test_sms && (
+            <WithPermissionControlTooltip userAction={action}>
+              <Button
+                disabled={!user?.verified_phone_number || !providerConfiguration.configured || isTestCallInProgress}
+                onClick={handleSendTestSmsClick}
+              >
+                Send test sms
+              </Button>
+            </WithPermissionControlTooltip>
+          )}
+          {providerConfiguration.test_call && (
+            <HorizontalGroup spacing="xs">
+              <WithPermissionControlTooltip userAction={action}>
+                <Button
+                  disabled={!user?.verified_phone_number || !providerConfiguration.configured || isTestCallInProgress}
+                  onClick={handleMakeTestCallClick}
+                >
+                  {isTestCallInProgress ? 'Making Test Call...' : 'Make Test Call'}
+                </Button>
+              </WithPermissionControlTooltip>
+              <Tooltip content={'Click "Make Test Call" to save a phone number and add it to DnD exceptions.'}>
+                <Icon name="info-circle" />
+              </Tooltip>
+            </HorizontalGroup>
+          )}
+        </HorizontalGroup>
       )}
     </HorizontalGroup>
   );

src/models/team/team.types.ts

@@ -66,5 +66,12 @@ export interface Team {
   env_status: {
     twilio_configured: boolean;
     telegram_configured: boolean;
+    phone_provider: {
+      configured: boolean;
+      test_call: boolean;
+      test_sms: boolean;
+      verification_call: boolean;
+      verification_sms: boolean;
+    };
   };
 }