feat(sms-limiting): ui changes for modal

src/public/modules/forms/admin/controllers/pop-up-modal.client.controller.js

@@ -15,7 +15,6 @@ function PopUpModalController($uibModalInstance, externalScope) {
   vm.description = externalScope.description
   vm.confirmButtonText = externalScope.confirmButtonText
   vm.cancelButtonText = externalScope.cancelButtonText
-  vm.isImportant = externalScope.isImportant
   vm.cancel = $uibModalInstance.close
 
   vm.confirm = function () {

src/public/modules/forms/admin/css/edit-form.css

@@ -1437,3 +1437,7 @@ a.modal-cancel-btn:hover {
   display: flex;
   justify-content: flex-end;
 }
+
+.sms-counts {
+  color: #484848;
+}

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

@@ -1,15 +1,22 @@
 <div class="row">
-  <div class="toggle-option">
+  <div class="toggle-option label-bottom">
     <div
       ng-class="{'toggle-option--disabled' : field.hasAdminExceededSmsLimit || field.hasRetrievalError}"
-      class="col-xs-8 label-custom label-medium label-bottom"
+      class="col-xs-8"
     >
-      OTP verification
-      <i
-        class="glyphicon glyphicon-question-sign"
-        uib-tooltip="When enabled, respondents must verify by entering a code sent to their mobile number"
-        tooltip-trigger="'click mouseenter'"
-      ></i>
+      <div class="label-custom label-medium">
+        OTP verification
+        <i
+          class="glyphicon glyphicon-question-sign"
+          uib-tooltip="When enabled, respondents must verify by entering a code sent to their mobile number"
+          tooltip-trigger="'click mouseenter'"
+        ></i>
+      </div>
+      <div ng-show="!isLoading && !field.hasRetrievalError">
+        <small class="sms-counts"
+          >{{verifiedSmsCount}}/{{smsVerificationLimit}} SMSes used</small
+        >
+      </div>
     </div>
     <div class="col-xs-4 field-input">
       <div ng-show="isLoading" class="loading-spinner">

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

@@ -21,6 +21,8 @@ function configureMobileDirective() {
       form: '<',
       name: '=',
       characterLimit: '=',
+      smsVerificationLimit: '=',
+      verifiedSmsCount: '=',
       isLoading: '<',
     },
     controller: [
@@ -66,7 +68,7 @@ function configureMobileDirective() {
           AdminMetaService.getFreeSmsCountsUsedByFormAdmin($scope.form._id),
         )
           .then(({ quota, freeSmsCounts }) => {
-            $scope.verifiedSmsCount = freeSmsCounts
+            $scope.verifiedSmsCount = formatStringAsNumber(freeSmsCounts)
             $scope.adminVerifiedSmsState = getAdminVerifiedSmsState(
               freeSmsCounts,
               $scope.form.msgSrvcName,
@@ -117,27 +119,23 @@ function configureMobileDirective() {
                 externalScope: function () {
                   return {
                     title: `OTP verification will be disabled at ${$scope.smsVerificationLimit} responses`,
-                    confirmButtonText: 'Accept',
+                    confirmButtonText: 'I understand',
                     description: `
-                    We provide SMS OTP verification for free up to ${
-                      $scope.smsVerificationLimit
-                    } responses. OTP verification will be automatically disabled when your account reaches ${
-                      $scope.smsVerificationLimit
-                    } responses. 
+                    We provide ${$scope.smsVerificationLimit} free SMS OTP verifications per account, only counting owned forms. 
+
+                    Once this limit is reached, SMS OTP verification will be automatically disabled for all owned forms. 
+
+                    <br></br>
+
+                    If you are a collaborator, ensure the form's owner has enough free verifications. 
+
                     <br></br>
-                    If you require OTP verification for more than ${
-                      $scope.smsVerificationLimit
-                    } responses,
-                    <a href=${
-                      $scope.verifiedSmsSetupLink
-                    } target="_blank" class=""> please arrange advance billing with us. </a>  
+
+                    If you require more than ${$scope.smsVerificationLimit} verifications, please <a href=${$scope.verifiedSmsSetupLink} target="_blank" class=""> arrange advance billing with us. </a>  
 
                     <br></br>
-                    <small>Current response count: ${formatStringAsNumber(
-                      $scope.verifiedSmsCount,
-                    )}/${$scope.smsVerificationLimit}</small>
+                    <small>Current response count: ${$scope.verifiedSmsCount}/${$scope.smsVerificationLimit}</small>
                     `,
-                    isImportant: true,
                   }
                 },
               },

src/public/modules/forms/admin/views/pop-up.client.modal.html

@@ -6,7 +6,7 @@
       <button
         type="submit"
         ng-click="vm.confirm()"
-        ng-class="vm.isImportant ? 'red-bg-dark' : 'modal-save-btn'"
+        ng-class="modal-save-btn"
         class="btn-custom btn-medium"
       >
         {{ vm.confirmButtonText || 'OK' }}