Skip to content

Commit 375e3f7

Browse files
committed
42083 V14 integrations: Shopify
- Add UI for Product list of Shopify Picker
1 parent 07ed68e commit 375e3f7

File tree

7 files changed

+109
-16
lines changed

7 files changed

+109
-16
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
2-
import { LitElement, customElement, html } from "@umbraco-cms/backoffice/external/lit";
2+
import { LitElement, customElement, html, property } from "@umbraco-cms/backoffice/external/lit";
33
import { SHOPIFY_CONTEXT_TOKEN } from "../../context/shopify.context";
44

55
const elementName = "shopify-amount";
66

77
@customElement(elementName)
88
export class ShopifyAmountElement extends UmbElementMixin(LitElement){
99
#shopifyContext!: typeof SHOPIFY_CONTEXT_TOKEN.TYPE;
10+
@property()
11+
minValue: number = 0;
1012

1113
render() {
1214
return html`
1315
<div>
14-
<uui-input></uui-input>
16+
<uui-input .value=${this.minValue}></uui-input>
1517
<span>-</span>
1618
<uui-input placeholder=""></uui-input>
1719
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export class ShopifyAuthorizationElement extends UmbElementMixin(LitElement){
107107

108108
async #connectButtonClick(){
109109
window.addEventListener("message", async (event: MessageEvent) => {
110-
if (event.data.type === "hubspot:oauth:success") {
110+
if (event.data.type === "shopify:oauth:success") {
111111

112112
const oauthRequestDtoModel: OAuthRequestDtoModel = {
113113
code: event.data.code
@@ -158,13 +158,13 @@ export class ShopifyAuthorizationElement extends UmbElementMixin(LitElement){
158158
look="primary"
159159
label="Connect"
160160
?disabled=${this._oauthSetup.isConnected}
161-
.onclick=${this.#connectButtonClick()}></uui-button>
161+
@click=${this.#connectButtonClick}></uui-button>
162162
<uui-button
163163
color="danger"
164164
look="secondary"
165165
label="Revoke"
166166
?disabled=${!this._oauthSetup.isConnected}
167-
.onclick=${this.#revokeButtonClick()}></uui-button>
167+
@click=${this.#revokeButtonClick}></uui-button>
168168
</div>
169169
`)}
170170

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ export const manifest: ManifestModal = {
44
type: "modal",
55
alias: "Shopify.Modal",
66
name: "Shopify Modal",
7-
js: () => import("./shopify-modal.element")
7+
js: () => import("./shopify-products-modal.element")
88
}

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

Lines changed: 0 additions & 8 deletions
This file was deleted.
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
2+
import { SHOPIFY_CONTEXT_TOKEN } from "../context/shopify.context.js";
3+
import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
4+
import { html, css, state } from "@umbraco-cms/backoffice/external/lit";
5+
import type { ProductDtoModel } from "../../generated";
6+
import type { ShopifyProductPickerModalData, ShopifyProductPickerModalValue } from "./shopify.modal-token.js";
7+
import type { ShopifyServiceStatus } from "../models/shopify-service.model.js";
8+
9+
const elementName = "shopify-products-modal";
10+
export default class ShopifyProductsModalElement extends UmbModalBaseElement<ShopifyProductPickerModalData, ShopifyProductPickerModalValue>{
11+
#shopifyContext!: typeof SHOPIFY_CONTEXT_TOKEN.TYPE;
12+
13+
@state()
14+
private _serviceStatus: ShopifyServiceStatus = {
15+
isValid: false,
16+
type: "",
17+
description: "",
18+
useOAuth: false
19+
};
20+
21+
@state()
22+
private _loading = false;
23+
24+
@state()
25+
private _products: Array<ProductDtoModel> = [];
26+
27+
constructor() {
28+
super();
29+
30+
this.consumeContext(SHOPIFY_CONTEXT_TOKEN, (context) => {
31+
this.#shopifyContext = context;
32+
});
33+
}
34+
35+
async connectedCallback() {
36+
super.connectedCallback();
37+
this.#checkApiConfiguration();
38+
}
39+
40+
async #checkApiConfiguration() {
41+
if (!this.#shopifyContext) return;
42+
43+
const { data } = await this.#shopifyContext.checkConfiguration();
44+
if (!data || !data.type?.value) return;
45+
46+
this._serviceStatus = {
47+
isValid: data.isValid,
48+
type: data.type.value,
49+
description: "",
50+
useOAuth: data.isValid && data.type.value === "OAuth"
51+
}
52+
53+
await this.#loadProducts();
54+
}
55+
56+
async #loadProducts() {
57+
this._loading = true;
58+
const { data } = await this.#shopifyContext.getList();
59+
if (!data) return;
60+
61+
this._products = data.products ?? [];
62+
this._loading = false;
63+
64+
if (!data.isValid || data.isExpired) {
65+
this._showError(data.error!);
66+
}
67+
}
68+
69+
private _onSelect(products: Array<ProductDtoModel>) {
70+
this.value = { products };
71+
this._submitModal();
72+
}
73+
74+
private async _showError(message: string) {
75+
const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
76+
notificationContext?.peek("danger", {
77+
data: { message },
78+
});
79+
}
80+
81+
render() {
82+
return html`
83+
<umb-body-layout>
84+
<uui-box headline="Shopify Products">
85+
${this._loading ? html`<div class="center"><uui-loader></uui-loader></div>` : ""}
86+
${this._products.map((product) => {
87+
return html`
88+
<umb-table></umb-table>
89+
`;
90+
})}
91+
</uui-box>
92+
<span>Add up to x items(s)</span>
93+
94+
<uui-button slot="actions" label="Submit"></uui-button>
95+
<uui-button slot="actions" label="Close"></uui-button>
96+
</umb-body-layout>
97+
`;
98+
}
99+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export type ShopifyProductPickerModalData = {
66
}
77

88
export type ShopifyProductPickerModalValue = {
9-
products: ProductDtoModel;
9+
products: Array<ProductDtoModel>;
1010
}
1111

1212
export const SHOPIFY_MODAL_TOKEN = new UmbModalToken<ShopifyProductPickerModalData, ShopifyProductPickerModalValue>("Shopify.Modal", {

src/Umbraco.Cms.Integrations.Commerce.Shopify/Services/UmbracoAuthorizationService.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ public class UmbracoAuthorizationService : BaseAuthorizationService, IShopifyAut
2020

2121
public const string ServiceAddressReplace = "service_address_shop-replace";
2222

23-
public const string OAuthProxyBaseUrl = "https://localhost:44340/"; // for local testing: "https://localhost:44364/";
23+
public const string OAuthProxyBaseUrl = "https://hubspot-forms-auth.umbraco.com/"; // for local testing: "https://localhost:44364/";
2424

2525
public const string OAuthProxyRedirectUrl = OAuthProxyBaseUrl + "oauth/shopify";
2626

0 commit comments

Comments
 (0)