42083 V14: Integrations (Shopify)

- Add modal, picker property editor for Shopify
- update ts config file

Author: dtng95

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/modal/manifests.ts

@@ -0,0 +1,8 @@
+import type { ManifestModal } from "@umbraco-cms/backoffice/extension-registry";
+
+export const manifest: ManifestModal = {
+    type: "modal",
+    alias: "Shopify.Modal",
+    name: "Shopify Modal",
+    js: () => import("./shopify-modal.element")
+}

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/modal/shopify-modal.element.ts

@@ -0,0 +1,16 @@
+import { html, css, state, customElement } from "@umbraco-cms/backoffice/external/lit";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import {
+    UMB_NOTIFICATION_CONTEXT,
+} from "@umbraco-cms/backoffice/notification";
+import type { UUIInputEvent } from "@umbraco-cms/backoffice/external/uui";
+import type { ShopifyServiceStatus } from "../models/shopify-service.model.js";
+import type { ShopifyPickerModalData, ShopifyPickerModalValue } from "./shopify.modal-token.js";
+import type { ProductsListDtoModel } from "../generated";
+import { SHOPIFY_CONTEXT_TOKEN } from "../context/shopify.context.js";
+
+const elementName = "shopify-modal";
+
+export default class ShopifyModalElement extends UmbModalBaseElement<ShopifyPickerModalData, ShopifyPickerModalValue>{
+
+}

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/modal/shopify.modal-token.ts

@@ -0,0 +1,17 @@
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
+import type { ProductDtoModel } from "../generated";
+
+export type ShopifyPickerModalData = {
+    headline: string;
+}
+
+export type ShopifyPickerModalValue = {
+    products: ProductDtoModel;
+}
+
+export const SHOPIFY_MODAL_TOKEN = new UmbModalToken<ShopifyPickerModalData, ShopifyPickerModalValue>("Shopify.Modal", {
+    modal: {
+        type: "sidebar",
+        size: "small"
+    }
+});

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/src/property-editor/shopify-picker-property-editor.element.ts

@@ -0,0 +1,117 @@
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import { LitElement, customElement, html, css, property, state } from "@umbraco-cms/backoffice/external/lit";
+import { UMB_MODAL_MANAGER_CONTEXT } from "@umbraco-cms/backoffice/modal";
+import {
+    UMB_NOTIFICATION_CONTEXT,
+} from "@umbraco-cms/backoffice/notification";
+import { SHOPIFY_MODAL_TOKEN } from "../modal/shopify.modal-token";
+import { ConfigDescription, type ShopifyServiceStatus } from "../models/shopify-service.model";
+import { SHOPIFY_CONTEXT_TOKEN } from "../context/shopify.context";
+import type { ProductDtoModel } from "../generated/models";
+
+const elementName = "shopify-picker";
+export class ShopifyPickerPropertyEditor extends UmbElementMixin(LitElement){
+    #modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
+    #shopifyContext!: typeof SHOPIFY_CONTEXT_TOKEN.TYPE;
+
+    @property({ type: String })
+    public value = "";
+
+    @state()
+    private products: Array<ProductDtoModel> = [];
+
+    @state()
+    private _serviceStatus: ShopifyServiceStatus = {
+        isValid: false,
+        type: "",
+        description: "",
+        useOAuth: false
+    };
+
+    constructor() {
+        super();
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
+            this.#modalManagerContext = instance;
+        });
+        this.consumeContext(SHOPIFY_CONTEXT_TOKEN, (context) => {
+            this.#shopifyContext = context;
+        });
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+
+        if (this.value == null || this.value.length == 0) return;
+
+        const { data } = await this.#shopifyContext.checkConfiguration();
+        if (!data || !data.type?.value) return;
+
+        this._serviceStatus = {
+            isValid: data.isValid,
+            type: data.type.value,
+            description: "",
+            useOAuth: data.isValid && data.type.value === "OAuth"
+        }
+
+        if (!this._serviceStatus.isValid) {
+            this._showError(ConfigDescription.none);
+        }
+
+        const dto: Array<ProductDtoModel> = JSON.parse(JSON.stringify(this.value));
+        this.products = dto;
+    }
+
+    private async _openModal() {
+        const pickerContext = this.#modalManagerContext?.open(this, SHOPIFY_MODAL_TOKEN, {
+            data: {
+                headline: "HubSpot Forms",
+            },
+        });
+
+        const data = await pickerContext?.onSubmit();
+        if (!data) return;
+
+        this.value = JSON.stringify(data.products);
+        console.log(this.value);
+        this.dispatchEvent(new CustomEvent('property-value-change'));
+    }
+
+    private async _showError(message: string) {
+        const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+        notificationContext?.peek("danger", {
+            data: { message: message },
+        });
+    }
+
+    render() {
+        return html`
+            ${this.value == null || this.value.length == 0
+                ? html`
+                    <uui-button
+				        class="add-button"
+				        @click=${this._openModal}
+				        label=${this.localize.term('general_add')}
+				        look="placeholder"></uui-button>
+                `
+                : html`
+                    <div></div>
+                `}
+		`;
+    }
+
+    static styles = [
+        css`
+            .add-button {
+                width: 100%;
+            }
+        `];
+}
+
+
+export default ShopifyPickerPropertyEditor;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: ShopifyPickerPropertyEditor;
+    }
+}

src/Umbraco.Cms.Integrations.Commerce.Shopify/Client/tsconfig.json

@@ -17,8 +17,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]