Minor amends (readme, notifications on error, styling).

Author: AndyButland

README.md

@@ -8,4 +8,10 @@ This repository houses open-source extensions, created for Umbraco CMS, that int
 
 [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.
 
+### SEO
+
 [Semrush](./src/Umbraco.Cms.Integrations.SEO.Semrush/) - a search tool available as a content app, helping editors research and use appropriate keywords for their content, to help with website search engine optimisation.
+
+### CRM
+
+[HubSpot](./src/Umbraco.Cms.Integrations.Crm.HubSpot/) - a form picker and rendering component for Hubspot forms.

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/css/styles.css

@@ -29,4 +29,8 @@
     display: block;
 }
 
+.hsSettings {
+    padding-top: 4px;
+}
+
 

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/formpicker.controller.js

@@ -67,7 +67,7 @@
                     umbracoCmsIntegrationsCrmHubspotResource.validateAccessToken().then(function (response) {
                         if (response.isExpired === true || response.isValid === false) {
                             vm.loading = false;
-                            notificationsService.warning("HubSpot API", "Invalid access token. Please review OAuth settings of the editor.");
+                            notificationsService.warning("HubSpot API", "Unable to connect to HubSpot. Please review the settings of the form picker property's data type.");
                             return;
                         }
 
@@ -76,7 +76,7 @@
                             vm.hubspotFormsList = data.forms;
 
                             if (data.isValid === false || data.isExpired === true) {
-                                notificationsService.error("HubSpot API", "Invalid access token. Please review OAuth settings of the editor.");
+                                notificationsService.error("HubSpot API", "Unable to retrieve the list of forms from HubSpot. Please review the settings of the form picker property's data type.");
                             }
                         });
                     });

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/settings.controller.js

@@ -46,6 +46,7 @@
     vm.onRevokeToken = function() {
         umbracoCmsIntegrationsCrmHubspotResource.revokeAccessToken().then(function (response) {
             vm.oauthSetup.isConnected = false;
+            notificationsService.success("HubSpot Configuration", "OAuth connection revoked.");
         });
     }
 
@@ -54,9 +55,13 @@
         if (event.data.type === "hubspot:oauth:success") {
 
             umbracoCmsIntegrationsCrmHubspotResource.getAccessToken(event.data.code).then(function (response) {
-                vm.oauthSetup.isConnected = true;
-                vm.status.description = umbracoCmsIntegrationsCrmHubspotService.configDescription.OAuthConnected;
-                notificationsService.success("HubSpot Configuration", "OAuth connected.");
+                if (response.startsWith("Error:")) {
+                    notificationsService.error("HubSpot Configuration", response);
+                } else {
+                    vm.oauthSetup.isConnected = true;
+                    vm.status.description = umbracoCmsIntegrationsCrmHubspotService.configDescription.OAuthConnected;
+                    notificationsService.success("HubSpot Configuration", "OAuth connected.");
+                }
             });
 
         }

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/settings.html

@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.Cms.Integrations.Crm.Hubspot.SettingsController as vm">
+<div ng-controller="Umbraco.Cms.Integrations.Crm.Hubspot.SettingsController as vm" class="hsSettings">
     <div>
         <p>{{ vm.status.description }}</p>
     </div>

src/Umbraco.Cms.Integrations.Crm.Hubspot/Controllers/FormsController.cs

@@ -213,7 +213,15 @@ public async Task<string> GetAccessToken([FromBody] OAuthRequestDto authRequestD
                 return result;
             }
 
-            return "error";
+            if (response.StatusCode == HttpStatusCode.BadRequest)
+            {
+                var errorResult = await response.Content.ReadAsStringAsync();
+                var errorDto = JsonConvert.DeserializeObject<ErrorDto>(errorResult);
+
+                return "Error: " + errorDto.Message;
+            }
+
+            return "Error: An unexpected error occurred.";
         }
 
         [HttpPost]

src/Umbraco.Cms.Integrations.Crm.Hubspot/HubspotFormPickerPropertyEditor.cs

@@ -5,7 +5,7 @@ namespace Umbraco.Cms.Integrations.Crm.Hubspot
 {
     [DataEditor(
         alias: "Umbraco.Cms.Integrations.Crm.Hubspot.FormPicker",
-        name: "Hubspot Form Picker",
+        name: "HubSpot Form Picker",
         view: "~/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/views/formpicker.html",
         Group = "Pickers",
         Icon = "icon-handshake"

src/Umbraco.Cms.Integrations.Crm.Hubspot/Models/Dtos/ErrorDto.cs

@@ -0,0 +1,13 @@
+using Newtonsoft.Json;
+
+namespace Umbraco.Cms.Integrations.Crm.Hubspot.Models.Dtos
+{
+    public class ErrorDto
+    {
+        [JsonProperty("status")]
+        public string Status { get; set; }
+
+        [JsonProperty("message")]
+        public string Message { get; set; }
+    }
+}

src/Umbraco.Cms.Integrations.Crm.Hubspot/Umbraco.Cms.Integrations.Crm.Hubspot.csproj

@@ -10,7 +10,7 @@
     <PackageIconUrl></PackageIconUrl>
     <PackageProjectUrl>https://github.com/umbraco/Umbraco.Cms.Integrations</PackageProjectUrl>
     <RepositoryUrl>https://github.com/umbraco/Umbraco.Cms.Integrations</RepositoryUrl>
-    <Version>1.0.0</Version>
+    <Version>1.0.0-alpha001</Version>
     <Authors>Umbraco HQ</Authors>
     <Company>Umbraco</Company>
   </PropertyGroup>
@@ -26,12 +26,4 @@
     </Content>
   </ItemGroup>
 
-  <ItemGroup>
-    <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Hubspot\js\hubspot.service.js" />
-    <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Hubspot\js\settings.controller.js" />
-    <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Hubspot\Render\HubspotForm.cshtml" />
-    <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Hubspot\views\formpickereditor.html" />
-    <None Remove="App_Plugins\UmbracoCms.Integrations\Crm\Hubspot\views\settings.html" />
-  </ItemGroup>
-
 </Project>

src/Umbraco.Cms.Integrations.Crm.Hubspot/readme.md

@@ -15,15 +15,6 @@ The package supports two modes of authentication:
 - API Key
 - OAuth
 
-To support multi-region HubSpot forms, the following app setting is required in `Web.config`:
-```
-  <appSettings>
-    ...
-    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.Region" value="[region]" />
-    ...
-  </appSettings>
-```
-
 #### API Key
 
 Log into your HubSpot account, go to _Settings > Integrations > API Key_ and create an API key.
@@ -38,40 +29,39 @@ Add this to an app setting in `Web.config`:
   </appSettings>
 ```
 
+The key will be added to all requests made to the HubSpot API and used to authenticate access.
+
 #### OAuth
 
-OAuth required parameters are represented by a group of constants in the _FormsController_ with the following values:
-```
-OAuthClientId
-OAuthScopes
-OAuthProxyBaseUrl
-OAuthProxyEndpoint
-```
+If you prefer not to use an API key, an authentication flow using OAuth is also available.
 
-No two set of app settings will work simultaneously.
+To use this, simply ensure you don't have an API key in your configurataion file.
 
-#### Debug Configuration
+### Additional Configuration
 
-While in DEBUG mode use following post build events:
+To support multi-region HubSpot forms, the following app setting is required in `Web.config`:
 ```
-  set UmbracoCmsIntegrationsTestsiteV8Path=$(SolutionDir)\Umbraco.Cms.Integrations.Testsite.V8
-  set HubspotDir=%UmbracoCmsIntegrationsTestsiteV8Path%\App_Plugins\UmbracoCms.Integrations\Crm\Hubspot
-  if not exist %HubspotDir% mkdir -p %HubspotDir%
-  xcopy "$(ProjectDir)App_Plugins\UmbracoCms.Integrations\Crm\Hubspot" "%HubspotDir%" /e /y
+  <appSettings>
+    ...
+    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.Region" value="[region]" />
+    ...
+  </appSettings>
 ```
 
+For example, in Europe, a setting of `eu1` should be used.
+
 ### Backoffice usage
 
-Property Editor will check the settings in `Web.config`, validate the configuration based on the existing
-app settings and prompt the user a notification. 
+To use the form picker, a new data type should be created based on the HubSpot Form Picker property editor.
 
-If OAuth is available, then the _Connect_ button will be enabled, prompting the user, on clicked, 
-with the HubSpot authorization window. The retrieved access token will be saved into the database and 
-used for future requests. _Revoke_ action will remove the access token from the database and the authorization process will need to be repeated.
+The settings in `Web.config` will be checked and a message presented indicating whether authenticiation is in place.
 
-When a form is selected, the user needs to toggle the region flag notifying whether the data is stored in EU or US. This is very important as
-it triggers the front-end JS script and the form creation depending on the region.
+If OAuth is being used for authentication is available, then the _Connect_ button will be enabled, prompting the user when clicked, 
+with the HubSpot authorization window.
 
+The retrieved access token will be saved into the database and used for future requests.
+
+_Revoke_ action will remove the access token from the database and the authorization process will need to be repeated.
 
 ### Front-end rendering
 
@@ -88,3 +78,14 @@ And render the form using (assuming a property based on the created data type, w
 ```
 @Html.RenderHubspotForm(Model.HubspotForm)
 ```
+
+### Developer Notes
+
+To copy the front-end assets to the test site While in DEBUG mode, use following post build events:
+```
+  set UmbracoCmsIntegrationsTestsiteV8Path=$(SolutionDir)\Umbraco.Cms.Integrations.Testsite.V8
+  set HubspotDir=%UmbracoCmsIntegrationsTestsiteV8Path%\App_Plugins\UmbracoCms.Integrations\Crm\Hubspot
+  if not exist %HubspotDir% mkdir -p %HubspotDir%
+  xcopy "$(ProjectDir)App_Plugins\UmbracoCms.Integrations\Crm\Hubspot" "%HubspotDir%" /e /y
+```
+