Initial commit for Hubspot Forms integration.

AndyButland · AndyButland · commit 6e37d8a14455 · 2022-01-10T12:54:10.000+01:00
diff --git a/README.md b/README.md
@@ -7,3 +7,7 @@ This repository houses open-source extensions, created for Umbraco CMS, that int
 ### Commerce
 
 [CommerceTools](./src/Umbraco.Cms.Integrations.Commerce.CommerceTools/) - a product and category picker that can be added as a property editor for content, with a value converter providing a strongly typed model for rendering.
+
+### CRM
+
+[Hubspot](./src/Umbraco.Cms.Integrations.Crm.Hubspot/) - a extension for Umbraco CMS providing a form picker and rendering component for Hubspot forms.
diff --git a/src/Umbraco.Cms.Integrations.Commerce.CommerceTools/readme.md b/src/Umbraco.Cms.Integrations.Commerce.CommerceTools/readme.md
@@ -4,7 +4,7 @@ This integration provides a product and category picker, with data sourced from
 
 ## Prerequisites
 
-Requires minimum versions of Umbraco CMS: 8.5.0
+Requires minimum version of Umbraco CMS: 8.5.4.
 
 ## How To Use
 
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/Render/HubspotForm.cshtml b/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/Render/HubspotForm.cshtml
@@ -0,0 +1,10 @@
+﻿@using System.Configuration
+@inherits Umbraco.Web.Mvc.UmbracoViewPage<Umbraco.Cms.Integrations.Crm.Hubspot.Models.ViewModels.HubspotFormViewModel>
+
+<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
+<script>
+    hbspt.forms.create({
+        portalId: "@Model.PortalId",
+        formId: "@Model.Id"
+    });
+</script>
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/css/styles.css b/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/css/styles.css
@@ -0,0 +1,31 @@
+﻿.hsOverlayGroup {
+    margin-bottom: 1rem;
+}
+
+.hsFormsList {
+    list-style-type: none;
+    margin: 0;
+}
+
+.hsFormsList a {
+    display: block;
+    position: relative;
+    padding: .25rem .375rem .25rem 1.5rem;
+}
+
+.hsFormsList a:hover {
+    text-decoration: none;
+    background-color: #eee;
+}
+
+    .hsFormsList a i {
+        position: absolute;
+        top: .25rem;
+        left: .25rem;
+    }
+
+.hsFormsList .formLine {
+    display: block;
+}
+
+
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/formpicker.controller.js b/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/formpicker.controller.js
@@ -0,0 +1,43 @@
+﻿angular.module("umbraco")
+    .controller("Umbraco.Cms.Integrations.Crm.Hubspot.FormPickerController",
+        function ($scope, hubspotResources) {
+            var vm = this;
+            vm.loading = true;
+            vm.hubspotFormsList = [];
+            vm.searchTerm = "";
+            vm.error = "";
+            
+            hubspotResources.getHubspotFormsList().then(function (data) {
+                vm.hubspotFormsList = data;
+                vm.loading = false;
+               //errorcheck
+               console.log(data);
+            });
+
+            vm.remove = function() {
+                $scope.model.value = null;
+            };
+
+            vm.saveForm = function(form) {
+                $scope.model.value = form;
+            };
+
+            vm.openHubspotFormPickerOverlay = function () {
+                vm.hubspotFormPickerOverlay = {
+                    view: "/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/formpickeroverlay.html",
+                    show: true,
+                    title: "Hubspot forms",
+                    subtitle: "Select a form",
+                    hideSubmitButton: true,
+                    pickForm: function (form) {
+                        vm.saveForm(form);
+                        vm.hubspotFormPickerOverlay.show = false;
+                        vm.hubspotFormPickerOverlay = null;
+                    },
+                    close: function () {
+                        vm.hubspotFormPickerOverlay.show = false;
+                        vm.hubspotFormPickerOverlay = null;
+                    }
+                };
+            };
+        });
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/hubspot.resource.js b/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/hubspot.resource.js
@@ -0,0 +1,10 @@
+﻿angular.module('umbraco.resources').factory('umbracoCmsIntegrationsCrmHubspotResource',
+    function ($q, $http, umbRequestHelper) {
+        return {
+            getHubspotFormsList: function (id) {
+                return umbRequestHelper.resourcePromise(
+                    $http.get("backoffice/UmbracoCmsIntegrationsCrmHubspot/Forms/GetAll"), "");
+            }
+        };
+    }
+); 
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/package.manifest b/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/package.manifest
@@ -0,0 +1,21 @@
+﻿{
+  "propertyEditors": [
+    {
+      "alias": "Umbraco.Cms.Integrations.Crm.Hubspot.FormPicker",
+      "name": "Hubspot Form Picker",
+      "isParameterEditor": true,
+      "group": "Pickers",
+      "icon": "icon-handshake",
+      "editor": {
+        "view": "~/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/formpicker.html"
+      }
+    }
+  ],
+  "css": [
+    "~/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/css/styles.css" 
+  ],
+  "javascript": [
+    "~/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/formpicker.controller.js",
+    "~/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/hubspot.resource.js"
+  ]
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/formpicker.html b/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/formpicker.html
@@ -0,0 +1,32 @@
+﻿<div ng-controller="Umbraco.Cms.Integrations.Crm.Hubspot.FormPickerController as vm">
+
+    <umb-load-indicator ng-if="vm.loading">
+    </umb-load-indicator>
+
+    <umb-node-preview ng-if="model.value"
+                      name="model.value.name"
+                      icon="model.icon"
+                      description="model.value.fields"
+                      allow-remove="true",
+
+                      on-remove="vm.remove()">
+    </umb-node-preview>
+
+    <a ng-if="!model.value && !vm.loading"
+       class="umb-node-preview-add"
+       href=""
+       ng-click="vm.openHubspotFormPickerOverlay()"
+       prevent-default>
+        <localize key="general_add">Add</localize>
+    </a>
+
+    <div ng-if="vm.error" class="alert alert-warning">
+        {{ vm.error }}
+    </div>
+
+    <umb-overlay ng-if="vm.hubspotFormPickerOverlay.show"
+                 model="vm.hubspotFormPickerOverlay"
+                 view="vm.hubspotFormPickerOverlay.view"
+                 position="right">
+    </umb-overlay>
+</div>
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/formpickeroverlay.html b/src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/formpickeroverlay.html
@@ -0,0 +1,20 @@
+﻿<div ng-controller="Umbraco.Cms.Integrations.Crm.Hubspot.FormPickerController as vm">
+
+    <div class="hsOverlayGroup">
+        <div class="form-search">
+            <i class="icon-search"></i>
+            <input type="text" class="-full-width-input" ng-model="vm.searchTerm" placeholder="Type to search..." umb-auto-focus="" aria-invalid="false">
+        </div>
+    </div>
+    <div class="hsOverlayGroup">
+        <ul class="hsFormsList">
+            <li ng-repeat="form in vm.hubspotFormsList | orderBy:'name' | filter:vm.searchTerm" ng-click="model.pickForm(form)" class="ng-scope" role="button" tabindex="0">
+                <a href="" ng-attr-title="form.name">
+                    <i class="icon-umb-contour"></i>
+                    <span class="formLine">{{form.name}}</span>
+                    <small class="formLine">{{form.fields}}</small>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Constants.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Constants.cs
@@ -0,0 +1,19 @@
+﻿namespace Umbraco.Cms.Integrations.Crm.Hubspot.Models
+{
+    using Newtonsoft.Json;
+    using Newtonsoft.Json.Converters;
+    using System.Globalization;
+
+    public static class Constants
+    {
+        internal static readonly JsonSerializerSettings SerializationSettings = new JsonSerializerSettings
+        {
+            MetadataPropertyHandling = MetadataPropertyHandling.Ignore,
+            DateParseHandling = DateParseHandling.None,
+            Converters =
+            {
+                new IsoDateTimeConverter { DateTimeStyles = DateTimeStyles.AssumeUniversal }
+            },
+        };
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Controllers/FormsController.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Controllers/FormsController.cs
@@ -0,0 +1,43 @@
+﻿using System.Collections.Generic;
+using System.Configuration;
+using System.Linq;
+using System.Threading.Tasks;
+using Umbraco.Cms.Integrations.Crm.Hubspot.Helpers;
+using Umbraco.Cms.Integrations.Crm.Hubspot.Models;
+using Umbraco.Cms.Integrations.Crm.Hubspot.Models.Dtos;
+using Umbraco.Web.Mvc;
+using Umbraco.Web.WebApi;
+
+namespace Umbraco.Cms.Integrations.Crm.Hubspot.Controllers
+{
+    [PluginController("UmbracoCmsIntegrationsCrmHubspot")]
+    public class FormsController : UmbracoAuthorizedApiController
+    {
+        public async Task<List<HubspotFormDto>> GetAll()
+        {
+            //TODO: Errorhandling
+            var httpClient = Http.GetHttpClient();
+
+            var hubspotApiKey = ConfigurationManager.AppSettings["Umbraco.Cms.Integrations.Crm.Hubspot.ApiKey"];
+
+            var response = await httpClient.GetAsync("https://api.hubapi.com/forms/v2/forms?hapikey=" + hubspotApiKey);
+            var forms = await response.Content.ReadAsStringAsync();
+            var hubspotForms = HubspotForms.FromJson(forms);
+
+            var formsDto = new List<HubspotFormDto>();
+            foreach (var hubspotForm in hubspotForms)
+            {
+                var hubspotFormDto = new HubspotFormDto
+                {
+                    Name = hubspotForm.Name,
+                    PortalId = hubspotForm.PortalId.ToString(),
+                    Id = hubspotForm.Guid,
+                    Fields = string.Join(", ", hubspotForm.FormFieldGroups.SelectMany(x => x.Fields).Select(y => y.Label))
+                };
+                formsDto.Add(hubspotFormDto);
+            }
+
+            return formsDto;
+        }
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Editors/FormPickerValueConverter.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Editors/FormPickerValueConverter.cs
@@ -0,0 +1,42 @@
+﻿using Newtonsoft.Json.Linq;
+using System;
+using Umbraco.Cms.Integrations.Crm.Hubspot.Models.ViewModels;
+using Umbraco.Core.Models.PublishedContent;
+using Umbraco.Core.PropertyEditors;
+
+namespace Umbraco.Cms.Integrations.Crm.Hubspot.Editors
+{
+    public class FormPickerValueConverter : PropertyValueConverterBase
+    {
+        public override bool IsConverter(IPublishedPropertyType propertyType) => propertyType.EditorAlias.Equals("Umbraco.Cms.Integrations.Crm.Hubspot.FormPicker");
+
+        public override PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType) => PropertyCacheLevel.Snapshot;
+
+        public override Type GetPropertyValueType(IPublishedPropertyType propertyType) => typeof(HubspotFormViewModel);
+
+        public override object ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, object source, bool preview)
+        {
+            if (source == null)
+            {
+                return null;
+            }
+
+            var jObject = JObject.Parse(source.ToString());
+            var jformId = jObject["id"];
+            var jportalId = jObject["portalId"];
+
+            if (jformId != null && jportalId != null)
+            {
+                var hubspotFormViewModel = new HubspotFormViewModel
+                {
+                    Id = jformId.Value<string>(),
+                    PortalId = jportalId.Value<string>()
+                };
+                return hubspotFormViewModel;
+            }
+
+            return null;
+        }
+    }
+}
+
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Helpers/HtmlHelper.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Helpers/HtmlHelper.cs
@@ -0,0 +1,15 @@
+﻿using System.Web;
+using System.Web.Mvc;
+using System.Web.Mvc.Html;
+using Umbraco.Cms.Integrations.Crm.Hubspot.Models.ViewModels;
+
+namespace Umbraco.Cms.Integrations.Crm.Hubspot.Helpers
+{
+    public static class HubspotHtmlExtensions
+    {
+        public static IHtmlString RenderHubspotForm(this HtmlHelper htmlHelper, HubspotFormViewModel hubspotFormViewModel)
+        {
+            return htmlHelper.Partial("~/App_Plugins/Our.Umbraco.Hubspot/Render/HubspotForm.cshtml", hubspotFormViewModel);
+        }
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Helpers/HttpClient.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Helpers/HttpClient.cs
@@ -0,0 +1,12 @@
+﻿namespace Umbraco.Cms.Integrations.Crm.Hubspot.Helpers
+{
+    public static class Http
+    {
+        private static System.Net.Http.HttpClient _httpClient;
+
+        public static System.Net.Http.HttpClient GetHttpClient()
+        {
+            return _httpClient ?? (_httpClient = new System.Net.Http.HttpClient());
+        }
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/Dtos/HubspotFormDto.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/Dtos/HubspotFormDto.cs
@@ -0,0 +1,19 @@
+﻿using Newtonsoft.Json;
+
+namespace Umbraco.Cms.Integrations.Crm.Hubspot.Models.Dtos
+{
+    public class HubspotFormDto
+    {
+        [JsonProperty("name")]
+        public string Name { get; set; }
+
+        [JsonProperty("portalId")]
+        public string PortalId { get; set; }
+
+        [JsonProperty("id")]
+        public string Id { get; set; }
+
+        [JsonProperty("fields")]
+        public string Fields { get; set; }
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/Field.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/Field.cs
@@ -0,0 +1,13 @@
+﻿using Newtonsoft.Json;
+
+namespace Umbraco.Cms.Integrations.Crm.Hubspot.Models
+{
+    public class Field
+    {
+        [JsonProperty("name")]
+        public string Name { get; set; }
+
+        [JsonProperty("label")]
+        public string Label { get; set; }
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/FormFieldGroup.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/FormFieldGroup.cs
@@ -0,0 +1,11 @@
+﻿using System.Collections.Generic;
+using Newtonsoft.Json;
+
+namespace Umbraco.Cms.Integrations.Crm.Hubspot.Models
+{
+    public class FormFieldGroup
+    {
+        [JsonProperty("fields")]
+        public List<Field> Fields { get; set; }
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/HubspotForm.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/HubspotForm.cs
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/HubspotForms.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/HubspotForms.cs
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/ViewModels/HubspotFormViewModel.cs b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/ViewModels/HubspotFormViewModel.cs
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/Umbraco.Cms.Integrations.Crm.Hubspot.csproj b/src/Umbraco.Cms.Integrations.Crm.Hubspot/Umbraco.Cms.Integrations.Crm.Hubspot.csproj
diff --git a/src/Umbraco.Cms.Integrations.Crm.Hubspot/readme.md b/src/Umbraco.Cms.Integrations.Crm.Hubspot/readme.md
diff --git a/src/Umbraco.Cms.Integrations.sln b/src/Umbraco.Cms.Integrations.sln
