feat: verified sms modal

src/public/modules/forms/admin/directiveViews/configure-mobile.client.view.html

@@ -4,7 +4,7 @@
       Verified?
       <i
         class="glyphicon glyphicon-question-sign"
-        uib-tooltip="When enabled, users will need to verify their mobile before they can submit the form"
+        uib-tooltip="When enabled, respondents must verify by entering a code sent to their mobile number"
         tooltip-trigger="'click mouseenter'"
       ></i>
     </div>
@@ -14,7 +14,11 @@
         ng-class="field.isVerifiable? 'toggle-selector-on' : ''"
         onclick=""
       >
-        <input type="checkbox" ng-model="field.isVerifiable" />
+        <input
+          type="checkbox"
+          ng-model="field.isVerifiable"
+          ng-click="openVerifiedSMSModal()"
+        />
         <div class="toggle-selector-switch">
           <i ng-class="field.isVerifiable ? 'bx bx-check' : 'bx bx-x' "></i>
         </div>

src/public/modules/forms/admin/directives/configure-mobile.client.directive.js

@@ -14,5 +14,45 @@ function configureMobileDirective() {
       name: '=',
       characterLimit: '=',
     },
+    controller: [
+      '$uibModal',
+      '$scope',
+      '$translate',
+      function ($uibModal, $scope, $translate) {
+        // Get support form link from translation json.
+        $translate('LINKS.SUPPORT_FORM_LINK').then((supportFormLink) => {
+          $scope.supportFormLink = supportFormLink
+        })
+
+        $scope.openVerifiedSMSModal = function () {
+          const isTogglingOnVerifiedSms = !$scope.field.isVerifiable
+          $scope.verifiedSMSModal =
+            isTogglingOnVerifiedSms &&
+            $uibModal.open({
+              animation: true,
+              backdrop: 'static',
+              keyboard: false,
+              templateUrl: 'modules/forms/admin/views/pop-up.client.modal.html',
+              windowClass: 'pop-up-modal-window',
+              controller: 'PopUpModalController',
+              controllerAs: 'vm',
+              resolve: {
+                externalScope: function () {
+                  return {
+                    title: 'Verified SMS',
+                    confirmButtonText: 'OK, Noted',
+                    description: `
+                      FormSG provides free verified SMS <b>up to 10,000 responses</b>
+                      <b>per form</b>. If you expect >10k responses, please <a href=${$scope.supportFormLink} target="_blank" class="">contact us</a> 
+                      to arrange billing for verified SMS. <b>Failure to do so risks your form</b>
+                      <b>being deactivated for submissions</b>.
+                    `,
+                  }
+                },
+              },
+            })
+        }
+      },
+    ],
   }
 }

src/public/modules/forms/admin/directives/edit-form.client.directive.js

@@ -200,8 +200,7 @@ function editFormController(
       backdrop: 'static',
       keyboard: false,
       templateUrl: 'modules/forms/admin/views/edit-fields.client.modal.html',
-      windowClass: 'edit-modal-window full-page-modal modal-on-top',
-      backdropClass: 'custom-modal-backdrop',
+      windowClass: 'edit-modal-window full-page-modal',
       resolve: {
         externalScope: function () {
           return {

src/public/modules/forms/admin/views/edit-fields.client.modal.html

@@ -568,7 +568,7 @@ <h2 class="modal-title">
               Verified?
               <i
                 class="glyphicon glyphicon-question-sign"
-                uib-tooltip="When enabled, users will need to verify their email before they can submit the form"
+                uib-tooltip="When enabled, respondents must verify by entering a code sent to their email address"
                 tooltip-trigger="'click mouseenter'"
               ></i>
             </div>