chore: Generate webhook-verify-token automatically (#5593)

- Autogenerate webhook verification token in the WhatsAppCloud channel.

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -239,7 +239,9 @@
         },
         "API_CALLBACK": {
           "TITLE": "Callback URL",
-          "SUBTITLE": "You have to configure the webhook URL in facebook developer portal with the URL mentioned here."
+          "SUBTITLE": "You have to configure the webhook URL and the verification token in the Facebook Developer portal with the values shown below.",
+          "WEBHOOK_URL": "Webhook URL",
+          "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
         },
         "SUBMIT_BUTTON": "Create WhatsApp Channel",
         "API": {
@@ -357,7 +359,7 @@
     },
     "FINISH": {
       "TITLE": "Your Inbox is ready!",
-      "MESSAGE": "You can now engage with your customers through your new Channel. Happy supporting ",
+      "MESSAGE": "You can now engage with your customers through your new Channel. Happy supporting",
       "BUTTON_TEXT": "Take me there",
       "MORE_SETTINGS": "More settings",
       "WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox."

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -20,11 +20,26 @@
           />
         </div>
         <div class="medium-6 small-offset-3">
+          <p class="config--label">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
+          </p>
           <woot-code
-            v-if="isAWhatsappWhatsappCloudInbox"
+            v-if="isWhatsAppCloudInbox"
             lang="html"
             :script="currentInbox.callback_webhook_url"
           />
+          <p class="config--label">
+            {{
+              $t(
+                'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
+              )
+            }}
+          </p>
+          <woot-code
+            v-if="isWhatsAppCloudInbox"
+            lang="html"
+            :script="currentInbox.provider_config.webhook_verify_token"
+          />
         </div>
         <div class="medium-6 small-offset-3">
           <woot-code
@@ -99,7 +114,7 @@ export default {
     isASmsInbox() {
       return this.currentInbox.channel_type === 'Channel::Sms';
     },
-    isAWhatsappWhatsappCloudInbox() {
+    isWhatsAppCloudInbox() {
       return (
         this.currentInbox.channel_type === 'Channel::Whatsapp' &&
         this.currentInbox.provider === 'whatsapp_cloud'
@@ -124,7 +139,7 @@ export default {
         )}`;
       }
 
-      if (this.isAWhatsappWhatsappCloudInbox) {
+      if (this.isWhatsAppCloudInbox) {
         return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
           'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
         )}`;
@@ -159,4 +174,10 @@ export default {
 .settings-button {
   margin-right: var(--space-small);
 }
+
+.config--label {
+  color: var(--b-600);
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--space-large);
+}
 </style>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue

@@ -85,25 +85,6 @@
       </label>
     </div>
 
-    <div class="medium-8 columns">
-      <label :class="{ error: $v.webhookVerifyToken.$error }">
-        <span>
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.WEBHOOK_VERIFY_TOKEN.LABEL') }}
-        </span>
-        <input
-          v-model.trim="webhookVerifyToken"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WHATSAPP.WEBHOOK_VERIFY_TOKEN.PLACEHOLDER')
-          "
-          @blur="$v.webhookVerifyToken.$touch"
-        />
-        <span v-if="$v.webhookVerifyToken.$error" class="message">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.WEBHOOK_VERIFY_TOKEN.ERROR') }}
-        </span>
-      </label>
-    </div>
-
     <div class="medium-12 columns">
       <woot-submit-button
         :loading="uiFlags.isCreating"
@@ -130,7 +111,6 @@ export default {
       apiKey: '',
       phoneNumberId: '',
       businessAccountId: '',
-      webhookVerifyToken: '',
     };
   },
   computed: {
@@ -142,7 +122,6 @@ export default {
     apiKey: { required },
     phoneNumberId: { required },
     businessAccountId: { required },
-    webhookVerifyToken: { required },
   },
   methods: {
     async createChannel() {
@@ -164,7 +143,6 @@ export default {
                 api_key: this.apiKey,
                 phone_number_id: this.phoneNumberId,
                 business_account_id: this.businessAccountId,
-                webhook_verify_token: this.webhookVerifyToken,
               },
             },
           }