Skip to content

Commit 7a426df

Browse files
dtng95dtng95
committed
V14: Integrations (Zapier)
- Update gitignore file - Update Zapier dashboard - Because of some issue with ngrok, some hardcode data has been configure in order to show how the dashboard looks like - Update appsettings
1 parent 0dda61f commit 7a426df

File tree

4 files changed

+206
-5
lines changed

4 files changed

+206
-5
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ src/Testsite/Views
88
src/Testsite/wwwroot
99
src/Umbraco.Cms.Integrations.Automation.Zapier/wwwroot
1010
src/Umbraco.Cms.Integrations.Commerce.Shopify/wwwroot
11+
src/Umbraco.Cms.Integrations.Crm.Hubspot/wwwroot
1112

1213

1314
# User-specific files

‎src/Umbraco.Cms.Integrations.Automation.Zapier/Client/src/dashboard/manifests.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const dashboards: Array<ManifestDashboard> = [
88
element: () => import('./zapier-management-dashboard.element'),
99
weight: 20,
1010
meta: {
11-
label: 'Zapier Management Dashboard',
11+
label: 'Zapier Integrations',
1212
pathname: 'zapier-management',
1313
},
1414
conditions: [

‎src/Umbraco.Cms.Integrations.Automation.Zapier/Client/src/dashboard/zapier-management-dashboard.element.ts

Lines changed: 195 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,207 @@
11
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
2-
import { css, html, nothing, customElement, state, query, property } from '@umbraco-cms/backoffice/external/lit';
2+
import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
3+
import { ZAPIER_CONTEXT_TOKEN } from '../context/zapier.context';
4+
import { GetAllResponse, SubscriptionDtoModel } from '@umbraco-integrations/zapier/generated';
5+
import type { UmbTableColumn, UmbTableItem } from '@umbraco-cms/backoffice/components';
6+
import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
7+
import { UmbPaginationManager } from "@umbraco-cms/backoffice/utils";
38

49
const elementName = "zapier-management-dashboard";
510
@customElement(elementName)
611
export class ZapierManagementDashboardElement extends UmbLitElement {
12+
#zapierContext?: typeof ZAPIER_CONTEXT_TOKEN.TYPE;
13+
#paginationManager = new UmbPaginationManager();
14+
#itemList: GetAllResponse | undefined;
15+
#isFormsExtensionInstalled: boolean | undefined = false;
16+
17+
@state()
18+
private _tableItems: Array<UmbTableItem> = [];
19+
20+
@state()
21+
_currentPageNumber = 1;
22+
23+
@state()
24+
_totalPages = 1;
25+
26+
@state()
27+
_nextPageInfo?: string;
28+
29+
@state()
30+
_previousPageInfo?: string;
31+
32+
@state()
33+
private _tableColumns: Array<UmbTableColumn> = [
34+
{
35+
name: 'Identifer',
36+
alias: 'identifer'
37+
},
38+
{
39+
name: 'Entity Type',
40+
alias: 'entityType',
41+
},
42+
{
43+
name: 'Hook URL',
44+
alias: 'hookUrl'
45+
}
46+
];
47+
48+
constructor() {
49+
super();
50+
this.consumeContext(ZAPIER_CONTEXT_TOKEN, (instance) => {
51+
this.#zapierContext = instance;
52+
});
53+
}
54+
55+
async connectedCallback(){
56+
super.connectedCallback();
57+
58+
await this.getAll();
59+
await this.checkFormsExtension();
60+
}
61+
62+
async getAll(){
63+
debugger;
64+
const data = await this.#zapierContext?.getAll();
65+
if (!data) return;
66+
67+
this.#itemList = data.data;
68+
69+
const lst : Array<SubscriptionDtoModel> = [{
70+
entityId: "docType1",
71+
typeName: "Content",
72+
hookUrl: "wwww.google.com",
73+
id: 1,
74+
subscribeHook: true,
75+
type: 1
76+
}, {
77+
entityId: "docType1",
78+
typeName: "Content",
79+
hookUrl: "wwww.google.com",
80+
id: 1,
81+
subscribeHook: true,
82+
type: 1
83+
}, {
84+
entityId: "docType1",
85+
typeName: "Content",
86+
hookUrl: "wwww.google.com",
87+
id: 1,
88+
subscribeHook: true,
89+
type: 1
90+
}];
91+
92+
this.#createTableItems(lst);
93+
}
94+
95+
async checkFormsExtension(){
96+
const data = await this.#zapierContext?.isFormsExtensionInstalled();
97+
if (!data) return;
98+
99+
this.#isFormsExtensionInstalled = data.data;
100+
}
101+
102+
#createTableItems(products: Array<SubscriptionDtoModel>) {
103+
this._tableItems = products.map((product) => {
104+
return {
105+
id: product.id.toString(),
106+
data: [{
107+
columnAlias: "identifer",
108+
value: product.entityId,
109+
},
110+
{
111+
columnAlias: "entityType",
112+
value: product.type,
113+
},
114+
{
115+
columnAlias: "hookUrl",
116+
value: product.hookUrl,
117+
}
118+
]
119+
}
120+
});
121+
}
122+
7123
override render() {
8124
return html`
9-
<div>This is new Zapier dashboard</div>
125+
<div class="zapier-content">
126+
<umb-body-layout>
127+
<uui-box headline="Content Properties">
128+
<p>
129+
<a href="https://zapier.com/">Zapier</a> is an online platform that helps you automate workflows by connecting your apps and services you use.
130+
This allows you to automate tasks without having to build this integration yourself.
131+
When an event happens in one app, Zapier can tell another app to perform (or do) a particular action - no code necessary.
132+
</p>
133+
<p>
134+
The heart of any automation boils down to this simple command: <b>WHEN</b> <span>this happens</span> <b>THEN</b> <span>do that</span>.
135+
</p>
136+
<p>
137+
A Zap is an automated workflow that tells your apps to follow this simple command: "When this happens, do that."
138+
Every Zap has a trigger and one or more actions. A trigger is an event that starts a Zap, and an action is what your Zap does for you.
139+
</p>
140+
<p>
141+
Zap triggers use webhooks to execute the actions. Webhooks are automated messages sent from apps when something happens.
142+
</p>
143+
${!this.#isFormsExtensionInstalled ? html`
144+
<p>
145+
You can initiate your automation when a content item of a particular document type is published in Umbraco.
146+
</p>
147+
` : html`
148+
<p>
149+
You can initiate your automation when a content item of a particular document type is published or a form is submitted in Umbraco.
150+
</p>
151+
`
152+
}
153+
<p>
154+
The integration uses Zapier subscription hook triggers, allowing Zapier to set up and remove hook subscriptions when Zaps are created or removed on the platform.
155+
</p>
156+
</uui-box>
157+
</umb-body-layout>
158+
</div>
159+
160+
<div>
161+
<umb-body-layout>
162+
<uui-box headline="Registed Subscription Hooks">
163+
<umb-table
164+
.columns=${this._tableColumns}
165+
.items=${this._tableItems}>
166+
</umb-table>
167+
${this.#renderPagination()}
168+
</uui-box>
169+
</umb-body-layout>
170+
</div>
10171
`;
11172
}
173+
174+
#renderPagination() {
175+
return html`
176+
${this._totalPages > 1
177+
? html`
178+
<div class="shopify-pagination">
179+
<uui-pagination
180+
class="pagination"
181+
.current=${this._currentPageNumber}
182+
.total=${this._totalPages}
183+
@change=${this.#onPageChange}></uui-pagination>
184+
</div>
185+
`
186+
: nothing}
187+
`;
188+
}
189+
190+
#onPageChange(event: UUIPaginationEvent) {
191+
const forward = event.target?.current > this._currentPageNumber;
192+
193+
const currentPageNumber = forward ? this._currentPageNumber + 1 : this._currentPageNumber - 1
194+
195+
this.#paginationManager.setCurrentPageNumber(currentPageNumber);
196+
197+
this._currentPageNumber = currentPageNumber;
198+
}
199+
200+
static styles = [css`
201+
.zapier-content p:first-child {
202+
margin-top: 0 !important;
203+
}
204+
`];
12205
}
13206

14207
export default ZapierManagementDashboardElement;

‎src/Umbraco.Cms.Integrations.Testsite.V14/appsettings.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,19 @@
4848
"AccessToken": ""
4949
}
5050
}
51+
},
52+
"Automation": {
53+
"Zapier": {
54+
"Settings": {
55+
"ApiKey": ""
56+
}
57+
}
5158
}
5259
}
5360
}
5461
},
5562
"ConnectionStrings": {
56-
"umbracoDbDSN": "Data Source=|DataDirectory|/Umbraco.sqlite.db;Cache=Shared;Foreign Keys=True;Pooling=True",
57-
"umbracoDbDSN_ProviderName": "Microsoft.Data.Sqlite"
63+
"umbracoDbDSN": "Server=NDT-THINKPAD\\SQLEXPRESS;Database=TestIntegration14;User Id=sa;Password=Emin3m1995;TrustServerCertificate=true;",
64+
"umbracoDbDSN_ProviderName": "Microsoft.Data.SqlClient"
5865
}
5966
}

0 commit comments

Comments
 (0)