Skip to content

Commit bd7581a

Browse files
dtng95dtng95
committed
V14: Integrations (Dynamics)
- Update property picker - Update modal - Update oauth configuration
1 parent 82ff570 commit bd7581a

File tree

5 files changed

+154
-105
lines changed

5 files changed

+154
-105
lines changed

‎src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/config/authorization/authorization-property-editor.element.ts

Lines changed: 119 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,148 @@
11
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
22
import { LitElement, customElement, html, property, state, when } from "@umbraco-cms/backoffice/external/lit";
3+
import { DynamicsOAuthSetup } from "../../models/dynamics-service.model";
4+
import { DYNAMICS_CONTEXT_TOKEN } from "../../context/dynamics.context";
5+
import { UMB_NOTIFICATION_CONTEXT, UmbNotificationColor } from "@umbraco-cms/backoffice/notification";
6+
import { OAuthConfigurationDtoModel, OAuthRequestDtoModel } from "@umbraco-integrations/dynamics/generated";
37

48
const elementName = "dynamics-authorization";
59

610
@customElement(elementName)
711
export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
12+
#dynamicsContext!: typeof DYNAMICS_CONTEXT_TOKEN.TYPE;
13+
14+
@state()
15+
private _oauthSetup: DynamicsOAuthSetup = {
16+
isConnected: false,
17+
isAccessTokenExpired: false,
18+
isAccessTokenValid: false
19+
};
20+
21+
@state()
22+
private _oAuthConfig: OAuthConfigurationDtoModel | undefined;
23+
824
constructor() {
925
super();
1026

11-
// this.consumeContext(SHOPIFY_CONTEXT_TOKEN, (context) => {
12-
// if (!context) return;
13-
// this.#shopifyContext = context;
14-
// this.observe(context.settingsModel, (settingsModel) => {
15-
// this.#settingsModel = settingsModel;
16-
// });
17-
// });
27+
this.consumeContext(DYNAMICS_CONTEXT_TOKEN, (context) => {
28+
if (!context) return;
29+
this.#dynamicsContext = context;
30+
});
1831
}
1932

2033
async connectedCallback() {
2134
super.connectedCallback();
35+
36+
await this.#checkOAuthConfiguration();
37+
}
38+
39+
async #checkOAuthConfiguration(){
40+
const { data } = await this.#dynamicsContext.checkOauthConfiguration();
41+
if (!data) {
42+
this._oauthSetup = {
43+
isConnected: false,
44+
isAccessTokenExpired: true,
45+
isAccessTokenValid: false
46+
}
47+
} else {
48+
if (!data.isAuthorized) {
49+
this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")
50+
} else {
51+
this._oauthSetup = {
52+
isConnected: true,
53+
isAccessTokenExpired: false,
54+
isAccessTokenValid: true
55+
}
56+
57+
this._oAuthConfig = data;
58+
}
59+
}
60+
}
61+
62+
async #connectButtonClick(){
63+
window.addEventListener("message", async (event: MessageEvent) => {
64+
if (event.data.type === "dynamics:oauth:success") {
65+
66+
const oauthRequestDtoModel: OAuthRequestDtoModel = {
67+
code: event.data.code
68+
};
69+
70+
const { data } = await this.#dynamicsContext.getAccessToken(oauthRequestDtoModel);
71+
if (!data) return;
72+
73+
if (data.startsWith("Error:")) {
74+
this._showError(data);
75+
} else {
76+
this._oauthSetup = {
77+
isConnected: true
78+
};
79+
this._showSuccess("OAuth Connected");
80+
81+
}
82+
83+
}
84+
}, false);
85+
86+
const { data } = await this.#dynamicsContext.getAuthorizationUrl();
87+
if (!data) return;
88+
89+
window.open(data, "Authorize", "width=900,height=700,modal=yes,alwaysRaised=yes");
90+
}
91+
92+
async #revokeButtonClick(){
93+
await this.#dynamicsContext.revokeAccessToken();
94+
95+
this._oauthSetup = {
96+
isConnected: false
97+
};
98+
this._showSuccess("OAuth connection revoked.");
99+
100+
this.dispatchEvent(new CustomEvent("revoke"));
101+
}
102+
103+
private async _showSuccess(message: string) {
104+
await this._showMessage(message, "positive");
105+
}
106+
107+
private async _showError(message: string) {
108+
await this._showMessage(message, "danger");
109+
}
110+
111+
private async _showMessage(message: string, color: UmbNotificationColor) {
112+
const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
113+
notificationContext?.peek(color, {
114+
data: { message },
115+
});
22116
}
23117

24118
render(){
25119
return html`
26120
<div>
27-
<p>Connected: Thanhnd</p>
121+
${this._oauthSetup.isConnected ?
122+
html`
123+
<span>
124+
<b>Connected</b>: ${this._oAuthConfig?.fullName}
125+
</span>
126+
` :
127+
html`
128+
<span>
129+
<b>Disconnected</b>
130+
</span>
131+
`}
132+
28133
</div>
29134
<div>
30135
<uui-button
31136
look="primary"
32-
label="Connect"></uui-button>
137+
label="Connect"
138+
?disabled=${this._oauthSetup?.isConnected}
139+
@click=${this.#connectButtonClick}></uui-button>
33140
<uui-button
34141
color="danger"
35142
look="secondary"
36-
label="Revoke"></uui-button>
143+
label="Revoke"
144+
?disabled=${!this._oauthSetup?.isConnected}
145+
@click=${this.#revokeButtonClick}></uui-button>
37146
</div>
38147
`;
39148
}

‎src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,6 @@ export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
1818
OpenAPI.BASE = umbOpenApi.base;
1919
OpenAPI.WITH_CREDENTIALS = true;
2020
});
21-
}
21+
}
22+
23+
export * from './config/authorization/authorization-property-editor.element';

‎src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/modal/dynamics-form-modal.element.ts

Lines changed: 29 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,6 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
1616
private _loading = false;
1717
@state()
1818
private _forms: Array<FormDtoModel> = [];
19-
@state()
20-
private _oAuthConfig: OAuthConfigurationDtoModel | undefined;
21-
@state()
22-
private _oauthSetup: DynamicsOAuthSetup = {
23-
isConnected: false,
24-
isAccessTokenExpired: false,
25-
isAccessTokenValid: false
26-
};
2719

2820
constructor() {
2921
super();
@@ -40,13 +32,17 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
4032
}
4133

4234
async #checkOAuthConfiguration(){
43-
const {data} = await this.#dynamicsContext.checkOauthConfiguration();
44-
if(!data) return;
45-
if(!data.isAuthorized) this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.");
35+
const { data } = await this.#dynamicsContext.checkOauthConfiguration();
36+
if (!data) {
4637

47-
this._oAuthConfig = data;
38+
} else {
39+
if (!data.isAuthorized) {
40+
this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")
41+
} else {
4842

49-
await this.#getForms();
43+
await this.#getForms();
44+
}
45+
}
5046
}
5147

5248
async #getForms(){
@@ -63,51 +59,6 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
6359
this._submitModal();
6460
}
6561

66-
async #connectButtonClick(){
67-
window.addEventListener("message", async (event: MessageEvent) => {
68-
if (event.data.type === "dynamics:oauth:success") {
69-
70-
const oauthRequestDtoModel: OAuthRequestDtoModel = {
71-
code: event.data.code
72-
};
73-
74-
const { data } = await this.#dynamicsContext.getAccessToken(oauthRequestDtoModel);
75-
if (!data) return;
76-
77-
if (data.startsWith("Error:")) {
78-
this._showError(data);
79-
} else {
80-
this._oauthSetup = {
81-
isConnected: true
82-
};
83-
this._showSuccess("OAuth Connected");
84-
85-
}
86-
87-
}
88-
}, false);
89-
90-
const { data } = await this.#dynamicsContext.getAuthorizationUrl();
91-
if (!data) return;
92-
93-
window.open(data, "Authorize", "width=900,height=700,modal=yes,alwaysRaised=yes");
94-
}
95-
96-
async #revokeButtonClick(){
97-
await this.#dynamicsContext.revokeAccessToken();
98-
99-
this._oauthSetup = {
100-
isConnected: false
101-
};
102-
this._showSuccess("OAuth connection revoked.");
103-
104-
this.dispatchEvent(new CustomEvent("revoke"));
105-
}
106-
107-
private async _showSuccess(message: string) {
108-
await this._showMessage(message, "positive");
109-
}
110-
11162
private async _showError(message: string) {
11263
await this._showMessage(message, "danger");
11364
}
@@ -123,39 +74,26 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
12374
return html`
12475
<umb-body-layout>
12576
126-
${this._loading ? html`<div class="center loader"><uui-loader></uui-loader></div>` : ""}
127-
128-
<uui-box headline=${this.data!.headline}>
129-
<div slot="header">Select a form</div>
130-
131-
${repeat(this._forms, (form) => html`
132-
<uui-ref-node-form
133-
selectable
134-
name=${form.name ?? ""}
135-
@selected=${() => this._onSelect(form)}>
136-
</uui-ref-node-form>
137-
`)}
138-
</uui-box>
139-
<br />
140-
<uui-box headline="Dynamics - OAuth Status">
141-
<div slot="header">Please connect with your Microsoft account.</div>
142-
<div>
143-
<p><b>Connected</b>: ${this._oAuthConfig?.fullName}</p>
144-
</div>
145-
<div>
146-
<uui-button
147-
look="primary"
148-
label="Connect"
149-
?disabled=${this._oauthSetup?.isConnected}
150-
@click=${this.#connectButtonClick}></uui-button>
151-
<uui-button
152-
color="danger"
153-
look="secondary"
154-
label="Revoke"
155-
?disabled=${!this._oauthSetup?.isConnected}
156-
@click=${this.#revokeButtonClick}></uui-button>
157-
</div>
158-
</uui-box>
77+
${this._loading ?
78+
html`<div class="center loader"><uui-loader></uui-loader></div>` :
79+
html`
80+
<uui-box headline=${this.data!.headline}>
81+
<div slot="header">Select a form</div>
82+
83+
${repeat(this._forms, (form) => html`
84+
<uui-ref-node-form
85+
selectable
86+
name=${form.name ?? ""}
87+
@selected=${() => this._onSelect(form)}>
88+
</uui-ref-node-form>
89+
`)}
90+
</uui-box>
91+
<br />
92+
<uui-box headline="Dynamics - OAuth Status">
93+
<div slot="header">Please connect with your Microsoft account.</div>
94+
<dynamics-authorization></dynamics-authorization>
95+
</uui-box>
96+
`}
15997
16098
<uui-button slot="actions" label=${this.localize.term("general_close")} @click=${this._rejectModal}></uui-button>
16199
</umb-body-layout>

‎src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/modal/dynamics.modal-token.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { DynamicsFormPickerConfiguration } from "../types/types";
44

55
export type DynamicsFormPickerModalData = {
66
headline: string;
7-
config: DynamicsFormPickerConfiguration | undefined;
87
}
98

109
export type DynamicsFormPickerModalValue = {

‎src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/property-editor/dynamics-form-picker-property-editor.element.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,11 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
7777
}
7878

7979
private async _openModal() {
80+
console.log(this._config?.module);
81+
const module = this._config?.module == "Both" ? "Outbound | Real-Time" : this._config?.module;
8082
const pickerContext = this.#modalManagerContext?.open(this, DYNAMICS_MODAL_TOKEN, {
8183
data: {
82-
headline: "Dynamics Forms",
83-
config: this._config
84+
headline: `Dynamics Forms - ${module} Marketing Forms`
8485
},
8586
});
8687

0 commit comments

Comments
 (0)