42083 V14: Integrations (Shopify)

- Add new API
- Add UI for shopify property editor setting: Authorization

Author: dtng95

src/Umbraco.Cms.Integrations.Commerce.Shopify/Api/Management/Controllers/CheckConfigurationController.cs

@@ -19,16 +19,28 @@ namespace Umbraco.Cms.Integrations.Commerce.Shopify.Core.Api.Management.Controll
     [ApiExplorerSettings(GroupName = Constants.ManagementApi.GroupName)]
     public class CheckConfigurationController : ShopifyControllerBase
     {
-        public CheckConfigurationController(IOptions<ShopifySettings> shopifySettings, IShopifyService shopifyService, IShopifyAuthorizationService shopifyAuthorizationService) : base(shopifySettings, shopifyService, shopifyAuthorizationService)
+        private readonly ShopifyOAuthSettings _oauthSettings;
+        public CheckConfigurationController(IOptions<ShopifySettings> shopifySettings, IShopifyService shopifyService, IShopifyAuthorizationService shopifyAuthorizationService, IOptions<ShopifyOAuthSettings> oauthSettings) : base(shopifySettings, shopifyService, shopifyAuthorizationService)
         {
+            _oauthSettings = oauthSettings.Value;
         }
 
         [HttpGet("check-configuration")]
         [ProducesResponseType(typeof(EditorSettings), StatusCodes.Status200OK)]
-        public ActionResult CheckConfiguration()
+        public IActionResult CheckConfiguration()
         {
-            var setting = ShopifyService.GetApiConfiguration();
-            return Ok(setting);
+            var settings = !string.IsNullOrEmpty(ShopifySettings.AccessToken)
+                    ? new EditorSettings { IsValid = true, Type = ConfigurationType.Api }
+                    : ShopifySettings.UseUmbracoAuthorization
+                        ? new EditorSettings { IsValid = true, Type = ConfigurationType.OAuth }
+                        : !string.IsNullOrEmpty(_oauthSettings.ClientId)
+                       && !string.IsNullOrEmpty(_oauthSettings.Scopes)
+                       && !string.IsNullOrEmpty(_oauthSettings.ClientSecret)
+                       && !string.IsNullOrEmpty(_oauthSettings.TokenEndpoint)
+                        ? new EditorSettings { IsValid = true, Type = ConfigurationType.OAuth }
+                        : new EditorSettings();
+
+            return Ok(settings);
         }
     }
 }

src/Umbraco.Cms.Integrations.Commerce.Shopify/Api/Management/Controllers/RefreshAccessTokenController.cs

@@ -0,0 +1,34 @@
+using Asp.Versioning;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Options;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Umbraco.Cms.Integrations.Commerce.Shopify.Core;
+using Umbraco.Cms.Integrations.Commerce.Shopify.Core.Api.Management.Controllers;
+using Umbraco.Cms.Integrations.Commerce.Shopify.Core.Configuration;
+using Umbraco.Cms.Integrations.Commerce.Shopify.Core.Services;
+
+namespace Umbraco.Cms.Integrations.Commerce.Shopify.Api.Management.Controllers
+{
+    [ApiVersion("1.0")]
+    [ApiExplorerSettings(GroupName = Constants.ManagementApi.GroupName)]
+    public class RefreshAccessTokenController : ShopifyControllerBase
+    {
+        public RefreshAccessTokenController(IOptions<ShopifySettings> shopifySettings, IShopifyService shopifyService, IShopifyAuthorizationService shopifyAuthorizationService) : base(shopifySettings, shopifyService, shopifyAuthorizationService)
+        {
+        }
+
+        [HttpPost("refresh")]
+        [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
+        public async Task<IActionResult> RefreshAccessToken()
+        {
+            var response = await ShopifyAuthorizationService.RefreshAccessTokenAsync();
+            return Ok(response);
+        }
+    }
+}

src/Umbraco.Cms.Integrations.Commerce.Shopify/Api/Management/Controllers/ShopifyControllerBase.cs

@@ -26,6 +26,7 @@ public abstract class ShopifyControllerBase : Controller
         protected IShopifyService ShopifyService;
         protected IShopifyAuthorizationService ShopifyAuthorizationService;
 
+
         protected ShopifyControllerBase(IOptions<ShopifySettings> shopifySettings, IShopifyService shopifyService, IShopifyAuthorizationService shopifyAuthorizationService)
         {
             ShopifySettings = shopifySettings.Value;

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/generated/services.gen.ts

@@ -3,7 +3,7 @@
 import type { CancelablePromise } from './core/CancelablePromise';
 import { OpenAPI } from './core/OpenAPI';
 import { request as __request } from './core/request';
-import type { CheckConfigurationResponse, GetAccessTokenData, GetAccessTokenResponse, GetAuthorizationUrlResponse, GetListData, GetListResponse, GetListByIdsData, GetListByIdsResponse, RevokeAccessTokenResponse, GetTotalPagesResponse, ValidateAccessTokenResponse } from './types.gen';
+import type { CheckConfigurationResponse, GetAccessTokenData, GetAccessTokenResponse, GetAuthorizationUrlResponse, GetListData, GetListResponse, GetListByIdsData, GetListByIdsResponse, RefreshAccessTokenResponse, RevokeAccessTokenResponse, GetTotalPagesResponse, ValidateAccessTokenResponse } from './types.gen';
 
 export class ShopifyService {
     /**
@@ -89,6 +89,20 @@ export class ShopifyService {
         });
     }
 
+    /**
+     * @returns string OK
+     * @throws ApiError
+     */
+    public static refreshAccessToken(): CancelablePromise<RefreshAccessTokenResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/umbraco/shopify/management/api/v1/refresh',
+            errors: {
+                401: 'The resource is protected and requires an authentication token'
+            }
+        });
+    }
+    
     /**
      * @returns string OK
      * @throws ApiError

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/generated/types.gen.ts

@@ -90,6 +90,8 @@ export type GetListByIdsData = {
 
 export type GetListByIdsResponse = ResponseDtoProductsListDtoModel;
 
+export type RefreshAccessTokenResponse = string;
+
 export type RevokeAccessTokenResponse = string;
 
 export type GetTotalPagesResponse = number;
@@ -170,6 +172,20 @@ export type $OpenApiTs = {
             };
         };
     };
+    '/umbraco/shopify/management/api/v1/refresh': {
+        post: {
+            res: {
+                /**
+                 * OK
+                 */
+                200: string;
+                /**
+                 * The resource is protected and requires an authentication token
+                 */
+                401: unknown;
+            };
+        };
+    };
     '/umbraco/shopify/management/api/v1/revoke-access-token': {
         post: {
             res: {

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/config/amount/amount-property-editor.element.ts

@@ -0,0 +1,28 @@
+import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
+import { LitElement, customElement, html } from "@umbraco-cms/backoffice/external/lit";
+import { SHOPIFY_CONTEXT_TOKEN } from "../../context/shopify.context";
+
+const elementName = "shopify-amount";
+
+@customElement(elementName)
+export class ShopifyAmountElement extends UmbElementMixin(LitElement){
+    #shopifyContext!: typeof SHOPIFY_CONTEXT_TOKEN.TYPE;
+
+    render() {
+        return html`
+            <div>
+                <uui-input></uui-input>
+                <span>-</span>
+                <uui-input placeholder="∞"></uui-input>
+            </div>
+        `;
+    }
+}
+
+export default ShopifyAmountElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: ShopifyAmountElement;
+	}
+}

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/config/amount/manifests.ts

@@ -0,0 +1,13 @@
+import type { ManifestPropertyEditorUi } from "@umbraco-cms/backoffice/extension-registry";
+
+export const manifests : ManifestPropertyEditorUi = {
+    type: 'propertyEditorUi',
+	alias: 'Shopify.PropertyEditorUi.Amount',
+	name: 'Shopify Product Picker Amount Setting',
+	element: () => import('./amount-property-editor.element.js'),
+	meta: {
+		label: 'Amount',
+		icon: 'icon-autofill',
+		group: 'common',
+    }
+};

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/config/authorization/authorization-property-editor.element.ts

@@ -0,0 +1,181 @@
+import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
+import { LitElement, customElement, html, property, state, when } from "@umbraco-cms/backoffice/external/lit";
+import { SHOPIFY_CONTEXT_TOKEN } from "../../context/shopify.context";
+import { ConfigDescription, ShopifyOAuthSetup, type ShopifyServiceStatus } from "../../models/shopify-service.model";
+import { OAuthRequestDtoModel } from "../../../generated";
+import { UMB_NOTIFICATION_CONTEXT, type UmbNotificationColor } from "@umbraco-cms/backoffice/notification";
+
+const elementName = "shopify-authorization";
+
+@customElement(elementName)
+export class ShopifyAuthorizationElement extends UmbElementMixin(LitElement){
+    #shopifyContext!: typeof SHOPIFY_CONTEXT_TOKEN.TYPE;
+
+    @state()
+    private _serviceStatus: ShopifyServiceStatus = {
+        isValid: false,
+        type: "",
+        description: "",
+        useOAuth: false
+    };
+
+    @state()
+    private _oauthSetup: ShopifyOAuthSetup = {
+        isConnected: false,
+        isAccessTokenExpired: false,
+        isAccessTokenValid: false
+    };
+
+    @property({ type: String })
+    public value = "";
+
+    constructor() {
+        super();
+
+        this.consumeContext(SHOPIFY_CONTEXT_TOKEN, (context) => {
+            this.#shopifyContext = context;
+        });
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.#checkApiConfiguration();
+    }
+
+    async #checkApiConfiguration() {
+        const { data } = await this.#shopifyContext.checkConfiguration();
+        if (!data || !data.type?.value) return;
+
+        this._serviceStatus = {
+            isValid: data.isValid,
+            type: data.type.value,
+            description: this.#getDescription(data.type.value),
+            useOAuth: data.isValid && data.type.value === "OAuth"
+        }
+
+        if (this._serviceStatus.useOAuth) {
+            await this.#validateOAuthSetup();
+        }
+
+        if (!data!.isValid) {
+            this._showError("Invalid setup. Please review the API/OAuth settings.");
+        }
+    }
+
+    async #validateOAuthSetup() {
+        const { data } = await this.#shopifyContext.validateAccessToken();
+        if (data) {
+            this._oauthSetup = {
+                isConnected: data.isValid,
+                isAccessTokenExpired: data.isExpired,
+                isAccessTokenValid: data.isValid
+            }
+
+            if (this._oauthSetup.isConnected && this._oauthSetup.isAccessTokenValid) {
+                this._serviceStatus.description = ConfigDescription.oauthConnected;
+            }
+
+            if (this._oauthSetup.isAccessTokenExpired) {
+                await this.#shopifyContext.refreshAccessToken();
+            }
+        }
+    }
+
+    #getDescription(type: string) {
+        switch (type) {
+            case "API": return ConfigDescription.api;
+            case "OAuth": return ConfigDescription.oauth;
+            case "OAuthConnected": return ConfigDescription.oauthConnected;
+            default: return ConfigDescription.none;
+        }
+    }
+
+    private async _showSuccess(message: string) {
+        await this._showMessage(message, "positive");
+    }
+
+    private async _showError(message: string) {
+        await this._showMessage(message, "danger");
+    }
+
+    private async _showMessage(message: string, color: UmbNotificationColor) {
+        const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+        notificationContext?.peek(color, {
+            data: { message },
+        });
+    }
+
+    async #connectButtonClick(){
+        window.addEventListener("message", async (event: MessageEvent) => {
+            if (event.data.type === "hubspot:oauth:success") {
+
+                const oauthRequestDtoModel: OAuthRequestDtoModel = {
+                    code: event.data.code
+                };
+
+                const { data } = await this.#shopifyContext.getAccessToken(oauthRequestDtoModel);
+                if (!data) return;
+
+                if (data.startsWith("Error:")) {
+                    this._showError(data);
+                } else {
+                    this._oauthSetup = {
+                        isConnected: true
+                    };
+                    this._serviceStatus.description = ConfigDescription.oauthConnected;
+                    this._showSuccess("OAuth Connected");
+
+                }
+
+            }
+        }, false);
+
+        const { data } = await this.#shopifyContext.getAuthorizationUrl();
+        if (!data) return;
+
+        window.open(data, "Authorize", "width=900,height=700,modal=yes,alwaysRaised=yes");
+    }
+
+    async #revokeButtonClick(){
+        await this.#shopifyContext.revokeAccessToken();
+
+        this._oauthSetup = {
+            isConnected: false
+        };
+        this._serviceStatus.description = ConfigDescription.none;
+        this._showSuccess("OAuth connection revoked.");
+    }
+
+    render() {
+        return html`
+            <div>
+                <p>${this._serviceStatus.description}</p>
+            </div>
+            ${when(this._serviceStatus.useOAuth, () => 
+                html`
+                <div>
+                    <uui-button 
+                        look="primary" 
+                        label="Connect" 
+                        ?disabled=${this._oauthSetup.isConnected} 
+                        .onclick=${this.#connectButtonClick()}></uui-button>
+                    <uui-button 
+                        color="danger" 
+                        look="secondary" 
+                        label="Revoke" 
+                        ?disabled=${!this._oauthSetup.isConnected} 
+                        .onclick=${this.#revokeButtonClick()}></uui-button>
+                </div>
+                `)}
+            
+        `;
+    }
+}
+
+export default ShopifyAuthorizationElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: ShopifyAuthorizationElement;
+	}
+}

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/config/authorization/manifests.ts

@@ -0,0 +1,13 @@
+import type { ManifestPropertyEditorUi } from "@umbraco-cms/backoffice/extension-registry";
+
+export const manifests : ManifestPropertyEditorUi = {
+    type: 'propertyEditorUi',
+    alias: 'Shopify.PropertyEditorUi.Authorization',
+    name: 'Shopify Product Picker Authorization Setting',
+    element: () => import('./authorization-property-editor.element.js'),
+    meta: {
+        label: 'Authorization',
+        icon: 'icon-autofill',
+        group: 'common',
+    }
+}

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/context/shopify.context.ts

@@ -45,6 +45,10 @@ export class ShopifyContext extends UmbControllerBase{
     async getAuthorizationUrl(){
         return await this.#repository.getAuthorizationUrl();
     }
+
+    async refreshAccessToken(){
+        return await this.#repository.refreshAccessToken();
+    }
 }
 
 export default ShopifyContext;