diff --git a/frontend/src/app/components/zapier/zapier.component.ts b/frontend/src/app/components/zapier/zapier.component.ts
index 6540565cc..074639c91 100644
--- a/frontend/src/app/components/zapier/zapier.component.ts
+++ b/frontend/src/app/components/zapier/zapier.component.ts
@@ -1,8 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
-import { User } from '@sentry/angular';
import { UserService } from 'src/app/services/user.service';
@Component({
@@ -12,12 +12,28 @@ import { UserService } from 'src/app/services/user.service';
styleUrl: './zapier.component.css',
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
-export class ZapierComponent {
- public currentUser: User;
-
- constructor(private _userService: UserService) {}
+export class ZapierComponent implements OnInit {
+ currentUser = toSignal(inject(UserService).cast);
ngOnInit(): void {
- this._userService.cast.subscribe((user) => (this.currentUser = user));
+ this._loadZapierElements();
+ }
+
+ private _loadZapierElements(): void {
+ const cdnBase = 'https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements';
+
+ if (!document.querySelector(`script[src="${cdnBase}/zapier-elements.esm.js"]`)) {
+ const script = document.createElement('script');
+ script.type = 'module';
+ script.src = `${cdnBase}/zapier-elements.esm.js`;
+ document.head.appendChild(script);
+ }
+
+ if (!document.querySelector(`link[href="${cdnBase}/zapier-elements.css"]`)) {
+ const link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = `${cdnBase}/zapier-elements.css`;
+ document.head.appendChild(link);
+ }
}
}
diff --git a/frontend/src/index.html b/frontend/src/index.html
index d3d9c99af..5b89d897a 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -14,10 +14,6 @@