[Added] Discord Webhook Notification (#81) (#83)

* [Feature] Added Discord Webhook feature to forms

* Remove commented out svg

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

app/Http/Requests/UserFormRequest.php

@@ -42,6 +42,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'webhook_url' => 'url|nullable',
             'use_captcha' => 'boolean',
             'slack_webhook_url' => 'url|nullable',
+            'discord_webhook_url' => 'url|nullable',
 
             // Customization
             'theme' => ['required',Rule::in(Form::THEMES)],

app/Http/Resources/FormResource.php

@@ -30,6 +30,7 @@ class FormResource extends JsonResource
             'submissions_count' => $this->when($this->workspaceIsPro(), $this->submissions_count),
             'notifies' => $this->notifies,
             'notifies_slack' => $this->notifies_slack,
+            'notifies_discord' => $this->notifies_discord,
             'send_submission_confirmation' => $this->send_submission_confirmation,
             'webhook_url' => $this->webhook_url,
             'redirect_url' => $this->redirect_url,
@@ -45,6 +46,7 @@ class FormResource extends JsonResource
             'visibility' => $this->visibility,
             'notification_emails' => $this->notification_emails,
             'slack_webhook_url' => $this->slack_webhook_url,
+            'discord_webhook_url' => $this->discord_webhook_url,
             'removed_properties' => $this->removed_properties,
             'last_edited_human' => $this->updated_at?->diffForHumans()
         ] : [];

app/Listeners/Forms/NotifyFormSubmission.php

@@ -2,13 +2,15 @@
 
 namespace App\Listeners\Forms;
 
+use App\Models\Forms\Form;
 use App\Events\Forms\FormSubmitted;
-use App\Notifications\Forms\FormSubmissionNotification;
+use Illuminate\Support\Facades\Http;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Queue\InteractsWithQueue;
-use Illuminate\Support\Facades\Notification;
 use Spatie\WebhookServer\WebhookCall;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Support\Facades\Notification;
 use App\Service\Forms\FormSubmissionFormatter;
+use App\Notifications\Forms\FormSubmissionNotification;
 use Vinkla\Hashids\Facades\Hashids;
 
 class NotifyFormSubmission implements ShouldQueue
@@ -44,8 +46,16 @@ class NotifyFormSubmission implements ShouldQueue
             // Send Slack Notification
             $this->sendSlackNotification($event);
         }
+
+        if ($event->form->notifies_discord) {
+            // Send Discord Notification
+            $this->sendDiscordNotification($event);
         }
 
+
+    }
+
+
     private function sendSlackNotification(FormSubmitted $event)
     {
         if($this->validateSlackWebhookUrl($event->form->slack_webhook_url)){
@@ -105,4 +115,75 @@ class NotifyFormSubmission implements ShouldQueue
     {
         return ($url) ? str_contains($url, 'https://hooks.slack.com/') : false;
     }
+
+    private function sendDiscordNotification(FormSubmitted $event)
+    {
+        if($this->validateDiscordWebhookUrl($event->form->discord_webhook_url)){
+            $submissionString = "";
+            $formatter = (new FormSubmissionFormatter($event->form, $event->data))->outputStringsOnly();
+
+            foreach ($formatter->getFieldsWithValue() as $field) {
+                $tmpVal = is_array($field['value']) ? implode(",", $field['value']) : $field['value'];
+                $submissionString .= "**".ucfirst($field['name'])."**: `".$tmpVal."`\n";
+            }
+
+            $form_name = $event->form->title;
+            $form = Form::find($event->form->id);
+            $formURL = url("forms/".$event->form->slug."/show/submissions");
+
+            $finalDiscordPostData = [
+                   "content" => "@here We have received a new submission for **$form_name**",
+                   "username" => config('app.name'),
+                   "avatar_url" => asset('img/logo.png'),
+                   "tts" => false,
+                   "embeds" => [
+                       [
+                           "title" => "🔗 Go to $form_name",
+
+                           "type" => "rich",
+
+                           "description" => $submissionString,
+
+                           "url" => $formURL,
+
+                           "color" => hexdec(str_replace('#', '', $event->form->color)),
+
+                           "footer" => [
+                               "text" => config('app.name'),
+                               "icon_url" => asset('img/logo.png'),
+                           ],
+
+                           "author" => [
+                               "name" => config('app.name'),
+                               "url" => config('app.url'),
+                           ],
+
+                           "fields" => [
+                               [
+                                   "name" => "Views 👀",
+                                   "value" => "$form->views_count",
+                                   "inline" => true
+                               ],
+                               [
+                                   "name" => "Submissions 🖊️",
+                                   "value" => "$form->submissions_count",
+                                   "inline" => true
+                               ]
+                           ]
+                       ]
+                   ]
+           ];
+
+            WebhookCall::create()
+                ->url($event->form->discord_webhook_url)
+                ->doNotSign()
+                ->payload($finalDiscordPostData)
+                ->dispatch();
+        }
+    }
+
+    private function validateDiscordWebhookUrl($url)
+    {
+        return ($url) ? str_contains($url, 'https://discord.com/api/webhooks') : false;
+    }
 }

app/Models/Forms/Form.php

@@ -39,6 +39,7 @@ class Form extends Model
         'notification_body',
         'notifications_include_submission',
         'slack_webhook_url',
+        'discord_webhook_url',
 
         // integrations
         'webhook_url',
@@ -98,6 +99,7 @@ class Form extends Model
         'workspace_id',
         'notifies',
         'slack_webhook_url',
+        'discord_webhook_url',
         'webhook_url',
         'send_submission_confirmation',
         'redirect_url',
@@ -250,6 +252,12 @@ class Form extends Model
         return FormFactory::new();
     }
 
+
+    public function getNotifiesDiscordAttribute()
+    {
+        return !empty($this->discord_webhook_url);
+    }
+
     public function getNotifiesSlackAttribute()
     {
         return !empty($this->slack_webhook_url);

app/Service/Forms/FormCleaner.php

@@ -39,6 +39,7 @@ class FormCleaner
         'use_captcha' => false,
         'password' => null,
         'slack_webhook_url' => null,
+        'discord_webhook_url' => null,
     ];
 
     private array $fieldDefaults = [
@@ -70,6 +71,7 @@ class FormCleaner
         'database_fields_update' => 'Form submission will only create new records (no updates).',
         'theme' => 'Default theme was applied.',
         'slack_webhook_url' => "Slack webhook disabled.",
+        'discord_webhook_url' => "Discord webhook disabled.",
 
         // For fields
         'hide_field_name' => 'Hide field name removed.',

database/migrations/2023_01_28_142618_add_discord_url.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->string('discord_webhook_url')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('discord_webhook_url');
+        });
+    }
+};

resources/js/components/open/forms/components/form-components/FormNotifications.vue

@@ -14,6 +14,7 @@
 
     <form-notifications-option />
     <form-notifications-slack />
+    <form-notifications-discord />
     <form-notifications-submission-confirmation />
 
   </collapse>
@@ -24,10 +25,11 @@ import Collapse from '../../../../common/Collapse.vue'
 import ProTag from '../../../../common/ProTag.vue'
 import FormNotificationsOption from './components/FormNotificationsOption.vue'
 import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
+import FormNotificationsDiscord from './components/FormNotificationsDiscord.vue'
 import FormNotificationsSubmissionConfirmation from './components/FormNotificationsSubmissionConfirmation.vue'
 
 export default {
-  components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsOption, Collapse, ProTag },
+  components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, Collapse, ProTag },
   props: {
   },
   data () {

resources/js/components/open/forms/components/form-components/components/FormNotificationsDiscord.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <button
+      class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
+      @click.prevent="showModal=true"
+    >
+      <div class="flex-grow flex items-center">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M7.5 7.5c3.5 -1 5.5 -1 9 0"></path><path d="M7 16.5c3.5 1 6.5 1 10 0"></path><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-1 2.5"></path><path d="M8.5 17c0 1 -1.356 3 -1.832 3c-1.429 0 -2.698 -1.667 -3.333 -3c-.635 -1.667 -.476 -5.833 1.428 -11.5c1.388 -1.015 2.782 -1.34 4.237 -1.5l1 2.5"></path></svg>
+        <p class="flex-grow text-center">
+          Discord Notifications
+        </p>
+      </div>
+      <div v-if="form.notifies_discord">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+             class="w-5 h-5 text-nt-blue"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round"
+                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+    </button>
+    <modal :show="showModal" @close="showModal=false">
+      <h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
+        Discord Notifications
+        <pro-tag />
+      </h2>
+      <toggle-switch-input name="notifies_discord" :form="form" class="mt-4"
+                           label="Receive a Discord notification on submission"
+      />
+      <text-input v-if="form.notifies_discord" name="discord_webhook_url" :form="form" class="mt-4"
+                  label="Discord webhook url" help="help"
+      >
+        <template #help>
+          Receive a discord message on each form submission.
+          <a href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks" target="_blank">Click here</a> to learn how to get a discord webhook url.
+        </template>
+      </text-input>
+    </modal>
+  </div>
+</template>
+
+<script>
+import ProTag from '../../../../../common/ProTag.vue'
+
+export default {
+  components: { ProTag },
+  props: {},
+  data () {
+    return {
+      showModal: false
+    }
+  },
+
+  computed: {
+    form: {
+      get () {
+        return this.$store.state['open/working_form'].content
+      },
+      /* We add a setter */
+      set (value) {
+        this.$store.commit('open/working_form/set', value)
+      }
+    }
+  },
+
+  watch: {},
+
+  mounted () {
+  },
+
+  methods: {}
+}
+</script>