Description text, additional validations and webhook trigger.

Author: acoumb

src/Umbraco.Cms.Integrations.Automation.Zapier/App_Plugins/UmbracoCms.Integrations/Automation/Zapier/dashboard.html

@@ -1,10 +1,38 @@
 <div ng-controller="Umbraco.Cms.Integrations.Automation.Zapier.ZapConfigController as vm">
     <umb-box>
-        <umb-box-header title="Configuration"></umb-box-header>
-        <umb-content>
-            <div class="mt2 ml2">
-                <input id="inWebHookUrl" type="text" ng-model="vm.webHookUrl" class="w-20 mb0" placeholder="WebHook URL" />
-                <select id="selContentTypes" ng-model="vm.selectedContentType" class="mb0">
+        <umb-box-header title="Content Properties"></umb-box-header>
+        <umb-box-content>
+            <div>
+                <p>
+                    <a href="https://zapier.com/">Zapier</a> is an online platform that helps you automate workflows by connecting your apps and services you use.
+                    This allows you to automate tasks without having to build this integration yourself.
+                    When an event happens in one app, Zapier can tell another app to perform (or do) a particular action - no code necessary.
+                </p>
+                <p>
+                    Automation is simply setting something up to run automatically. Automation is all around you, even if you don't realize it. 
+                    Take your smartphone, for example. You receive alerts whenever you receive a text message, a voice mail, or an email.
+                </p>
+                <p>
+                    The heart of any automation boils down to this simple command: <b>WHEN</b> <span>this happens</span> <b>THEN</b> <span>do that</span>.
+                </p>
+                <p>
+                    A Zap is an automated workflow that tells your apps to follow this simple command: "When this happens, do that."
+                    Every Zap has a trigger and one or more actions. A trigger is an event that starts a Zap, and an action is what your Zap does for you.
+                </p>
+                <p>
+                    When a Zap runs, each action it completes counts as one task.
+                    Zap triggers use webhooks to intercept the client's request and to execute the actions. Webhooks are automated messages sent from apps when something happens.
+                    Read Zapier Webhooks guide <a href="https://zapier.com/blog/what-are-webhooks/">here</a>.
+                </p>
+                <p>
+                    Using the filters below, you can map content items with Zap triggers Webhooks, and you will be able to: <br/>
+                    &nbsp; - Enable Zap trigger invoke when a specific content is published <br/>
+                    &nbsp; - Trigger a sample request using the Webhook URL and then reviewing the request data while creating the Zap trigger
+                </p>
+            </div>
+            <div class="mt3">
+                <input id="inWebHookUrl" type="text" ng-model="vm.webHookUrl" class="w-20 mb0" placeholder="WebHook URL" no-dirty-check />
+                <select id="selContentTypes" ng-model="vm.selectedContentType" class="mb0" no-dirty-check>
                     <option value="">Please select a content type</option>
                     <option ng-repeat="item in vm.contentTypes" value="{{ item.name }}">{{ item.name }}</option>
                 </select>
@@ -14,7 +42,15 @@
                             label="Add">
                 </umb-button>
             </div>
+        </umb-box-content>
+    </umb-box>
+    <umb-box>
+        <umb-box-header title="Results"></umb-box-header>
+        <umb-content>
             <div class="mt2">
+
+                <umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
+
                 <div class="umb-table" ng-if="vm.contentConfigs">
                     <!-- Listviews head section -->
                     <div class="umb-table-head">
@@ -47,6 +83,9 @@
                                 <span ng-bind="row.webHookUrl"></span>
                             </div>
                             <div class="mr7" style="position: relative;">
+                                <a href="javascript:void(0)" ng-click="vm.onTrigger(row.contentTypeName, row.webHookUrl)" title="trigger webHook">
+                                    <i class="icon-play"></i>
+                                </a>
                                 <a href="javascript:void(0)" ng-click="row.showDeletePrompt = true">
                                     <i class="icon-trash"></i>
                                 </a>

src/Umbraco.Cms.Integrations.Automation.Zapier/App_Plugins/UmbracoCms.Integrations/Automation/Zapier/js/zapier.controller.js

@@ -2,6 +2,7 @@
 
     var vm = this;
 
+    vm.loading = false;
     vm.contentTypes = [];
     vm.contentConfigs = [];
 
@@ -19,7 +20,12 @@
             return;
         }
 
-        umbracoCmsIntegrationsAutomationZapierResource.addConfig(vm.webHookUrl, vm.selectedContentType).then(function (r) {
+        umbracoCmsIntegrationsAutomationZapierResource.addConfig(vm.webHookUrl, vm.selectedContentType).then(function (response) {
+
+            if (response.length > 0) {
+                notificationsService.warning("Zapier Content Config", response);
+                return;
+            }
 
             getContentTypes();
 
@@ -29,6 +35,21 @@
         });
     }
 
+    vm.onTrigger = function (contentTypeName, webHookUrl) {
+
+        vm.loading = true;
+
+        umbracoCmsIntegrationsAutomationZapierResource.triggerWebHook(webHookUrl, contentTypeName).then(function(response) {
+
+            vm.loading = false;
+
+            if (response.length > 0)
+                notificationsService.warning("WebHook Trigger", response);
+            else
+                notificationsService.success("WebHook Trigger", "WebHook triggered successfully. Please check your Zap trigger for the newly submitted request.");
+        });
+    }
+
     vm.onDelete = function(id) {
         umbracoCmsIntegrationsAutomationZapierResource.deleteConfig(id).then(function () {
             getContentTypes();

src/Umbraco.Cms.Integrations.Automation.Zapier/App_Plugins/UmbracoCms.Integrations/Automation/Zapier/js/zapier.resource.js

@@ -17,6 +17,10 @@
                 return umbRequestHelper.resourcePromise(
                     $http.get(`${apiEndpoint}/GetAll`), "Failed to get resource");
             },
+            triggerWebHook: function(webHookUrl, contentTypeName) {
+                return umbRequestHelper.resourcePromise(
+                    $http.post(`${apiEndpoint}/TriggerAsync`, { contentTypeName: contentTypeName, webHookUrl: webHookUrl }), "Failed to get resource");
+            },
             deleteConfig: function(id) {
                 return umbRequestHelper.resourcePromise(
                     $http.delete(`${apiEndpoint}/Delete?id=${id}`), "Failed to get resource");

src/Umbraco.Cms.Integrations.Automation.Zapier/Components/NewContentPublishedComponent.cs

@@ -49,12 +49,12 @@ private void ContentServiceOnPublished(IContentService sender, ContentPublishedE
         {
             foreach (var node in e.PublishedEntities)
             {
-                var zapContentConfig = _zapConfigService.GetByAlias(node.ContentType.Alias);
+                var zapContentConfig = _zapConfigService.GetByName(node.ContentType.Name);
                 if (zapContentConfig == null) continue;
 
                 var content = new Dictionary<string, string>
                 {
-                    { Constants.Content.Name, node.ContentType.Name },
+                    { Constants.Content.Name, node.Name },
                     { Constants.Content.PublishDate, DateTime.UtcNow.ToString() }
                 };
 

src/Umbraco.Cms.Integrations.Automation.Zapier/Controllers/ZapConfigController.cs

@@ -1,5 +1,4 @@
-using System;
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using System.Web.Http;
@@ -45,19 +44,27 @@ public IEnumerable<ContentTypeDto> GetContentTypes()
         }
 
         [HttpPost]
-        public async Task<string> Add([FromBody] ContentConfigDto dto)
+        public string Add([FromBody] ContentConfigDto dto)
         {
-            var result = _zapConfigService.Add(dto);
-            if (!string.IsNullOrEmpty(result)) return result;
+            var getByNameResult = _zapConfigService.GetByName(dto.ContentTypeName);
+            if (getByNameResult != null) return "A record for this content type already exists.";
 
-            return await _zapierService.TriggerAsync(dto.WebHookUrl,
-                new Dictionary<string, string> { { Constants.Content.Name, dto.ContentTypeName } });
+            var result = _zapConfigService.Add(dto);
+            
+            return result;
         } 
 
         [HttpGet]
         public IEnumerable<ContentConfigDto> GetAll() => _zapConfigService.GetAll();
 
         [HttpDelete]
         public string Delete(int id) => _zapConfigService.Delete(id);
+
+        [HttpPost]
+        public async Task<string> TriggerAsync([FromBody] ContentConfigDto dto)
+        {
+            return await _zapierService.TriggerAsync(dto.WebHookUrl,
+                new Dictionary<string, string> { { Constants.Content.Name, dto.ContentTypeName } });
+        }
     }
 }

src/Umbraco.Cms.Integrations.Automation.Zapier/Services/ZapConfigService.cs

@@ -92,13 +92,13 @@ public string Delete(int id)
             }
         }
 
-        public ContentConfigDto GetByAlias(string contentAlias)
+        public ContentConfigDto GetByName(string contentName)
         {
             using (var scope = _scopeProvider.CreateScope())
             {
                 var entity =
-                    scope.Database.FirstOrDefault<ZapContentConfigTable.ZapContentConfig>("where ContentTypeAlias = @0",
-                        contentAlias);
+                    scope.Database.FirstOrDefault<ZapContentConfigTable.ZapContentConfig>("where ContentTypeName = @0",
+                        contentName);
 
                 return entity != null ? new ContentConfigDto(entity.WebHookUrl) : null;
             }