Merge pull request #963 from rocket-admin/zapier

lyubov-voloshko · web-flow · commit 0dbbfc4da823 · 2024-12-19T17:55:58.000+02:00
add zapier widget to connection settings
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -156,6 +156,7 @@ import { UsersComponent } from './components/users/users.component';
 import { UsersService } from './services/users.service';
 import { WidgetComponent } from "./components/dashboard/db-table-widgets/widget/widget.component";
 import { WidgetDeleteDialogComponent } from './components/dashboard/db-table-widgets/widget-delete-dialog/widget-delete-dialog.component';
+import { ZapierComponent } from "./components/connection-settings/zapier/zapier.component";
 import { environment } from '../environments/environment';
 import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn';
 
@@ -320,7 +321,8 @@ const saasExtraProviders = (environment as any).saas ? [
     ImageRowComponent,
     DbTableAiPanelComponent,
     UrlRowComponent,
-    Db2CredentialsFormComponent
+    Db2CredentialsFormComponent,
+    ZapierComponent
   ],
   providers: [
     ConnectionsService,
diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.css b/frontend/src/app/components/connection-settings/connection-settings.component.css
@@ -1,3 +1,7 @@
+.zapier-page {
+    padding: 32px max(calc(50vw - 325px), 10%);
+}
+
 .settings-page {
     padding: 0 max(calc(50vw - 325px), 10%);
 }
diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.html b/frontend/src/app/components/connection-settings/connection-settings.component.html
diff --git a/frontend/src/app/components/connection-settings/zapier/zapier.component.css b/frontend/src/app/components/connection-settings/zapier/zapier.component.css
diff --git a/frontend/src/app/components/connection-settings/zapier/zapier.component.html b/frontend/src/app/components/connection-settings/zapier/zapier.component.html
@@ -0,0 +1,10 @@
+<div>
+    <zapier-workflow
+        [signUpEmail]='"email_of_your_user@example.com"'
+        [clientId]='"4MFV3OrjI8e8JkZPySqbFVbKtZUz0sV0H3XJnb6w"'
+        [theme]='"auto"'
+        [introCopyDisplay]='"show"'
+        [guessZapDisplay]='"show"'
+        [zapCreateFromScratchDisplay]='"hide"'
+    ></zapier-workflow>
+</div>
diff --git a/frontend/src/app/components/connection-settings/zapier/zapier.component.spec.ts b/frontend/src/app/components/connection-settings/zapier/zapier.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZapierComponent } from './zapier.component';
+
+describe('ZapierComponent', () => {
+  let component: ZapierComponent;
+  let fixture: ComponentFixture<ZapierComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZapierComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ZapierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/connection-settings/zapier/zapier.component.ts b/frontend/src/app/components/connection-settings/zapier/zapier.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-zapier',
+  templateUrl: './zapier.component.html',
+  styleUrl: './zapier.component.css'
+})
+export class ZapierComponent {
+
+}
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -15,6 +15,11 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
+
+  <!-- zapier -->
+    <script type="module" src="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.css"/>
+  <!-- zapier -->
 </head>
 <body>
   <app-root class="mainLayout mat-typography"></app-root>
diff --git a/frontend/src/index.saas.html b/frontend/src/index.saas.html
@@ -84,6 +84,11 @@
   /></noscript>
   <!-- End Facebook Pixel Code -->
 
+  <!-- zapier -->
+    <script type="module" src="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.css"/>
+  <!-- zapier -->
+
   <script src="https://accounts.google.com/gsi/client"></script>
   <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0" nonce="Fb790BHM"></script>
 

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	`+.zapier-page {`
	`2`	`+ padding: 32px max(calc(50vw - 325px), 10%);`
	`3`	`+}`
	`4`	`+`
`1`	`5`	`.settings-page {`
`2`	`6`	`padding: 0 max(calc(50vw - 325px), 10%);`
`3`	`7`	`}`