@pinelab/vendure-plugin-webhook 0.0.3

package/dist/generated/graphql-types.d.ts

@@ -0,0 +1,114 @@
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends {
+    [key: string]: unknown;
+}> = {
+    [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]: Maybe<T[SubKey]>;
+};
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+    ID: number | string;
+    String: string;
+    Boolean: boolean;
+    Int: number;
+    Float: number;
+};
+export type Mutation = {
+    __typename?: 'Mutation';
+    /** Set all webhooks for the current channel. This will overwrite any existing webhooks. */
+    setWebhooks: Array<Webhook>;
+};
+export type MutationSetWebhooksArgs = {
+    webhooks: Array<WebhookInput>;
+};
+export type Query = {
+    __typename?: 'Query';
+    /** Get all available Vendure events that can be used to trigger webhooks */
+    availableWebhookEvents: Array<Scalars['String']>;
+    /**
+     * "
+     * Get all available webhook request transformers
+     */
+    availableWebhookRequestTransformers: Array<WebhookRequestTransformer>;
+    /** Get all webhooks for the current channel */
+    webhooks: Array<Webhook>;
+};
+export type Webhook = {
+    __typename?: 'Webhook';
+    event: Scalars['String'];
+    id: Scalars['ID'];
+    requestTransformer?: Maybe<WebhookRequestTransformer>;
+    url: Scalars['String'];
+};
+export type WebhookInput = {
+    event: Scalars['String'];
+    transformerName?: InputMaybe<Scalars['String']>;
+    url: Scalars['String'];
+};
+export type WebhookRequestTransformer = {
+    __typename?: 'WebhookRequestTransformer';
+    name: Scalars['String'];
+    supportedEvents: Array<Scalars['String']>;
+};
+export type SetWebhooksMutationVariables = Exact<{
+    webhooks: Array<WebhookInput> | WebhookInput;
+}>;
+export type SetWebhooksMutation = {
+    __typename?: 'Mutation';
+    setWebhooks: Array<{
+        __typename?: 'Webhook';
+        id: number | string;
+        event: string;
+        url: string;
+        requestTransformer?: {
+            __typename?: 'WebhookRequestTransformer';
+            name: string;
+            supportedEvents: Array<string>;
+        } | null;
+    }>;
+};
+export type WebhooksQueryVariables = Exact<{
+    [key: string]: never;
+}>;
+export type WebhooksQuery = {
+    __typename?: 'Query';
+    webhooks: Array<{
+        __typename?: 'Webhook';
+        id: number | string;
+        event: string;
+        url: string;
+        requestTransformer?: {
+            __typename?: 'WebhookRequestTransformer';
+            name: string;
+            supportedEvents: Array<string>;
+        } | null;
+    }>;
+};
+export type AvailableWebhookEventsQueryVariables = Exact<{
+    [key: string]: never;
+}>;
+export type AvailableWebhookEventsQuery = {
+    __typename?: 'Query';
+    availableWebhookEvents: Array<string>;
+};
+export type AvailableWebhookRequestTransformersQueryVariables = Exact<{
+    [key: string]: never;
+}>;
+export type AvailableWebhookRequestTransformersQuery = {
+    __typename?: 'Query';
+    availableWebhookRequestTransformers: Array<{
+        __typename?: 'WebhookRequestTransformer';
+        name: string;
+        supportedEvents: Array<string>;
+    }>;
+};
+export declare const SetWebhooks: import("graphql").DocumentNode;
+export declare const Webhooks: import("graphql").DocumentNode;
+export declare const AvailableWebhookEvents: import("graphql").DocumentNode;
+export declare const AvailableWebhookRequestTransformers: import("graphql").DocumentNode;

package/dist/generated/graphql-types.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvailableWebhookRequestTransformers = exports.AvailableWebhookEvents = exports.Webhooks = exports.SetWebhooks = void 0;
+const graphql_tag_1 = __importDefault(require("graphql-tag"));
+exports.SetWebhooks = (0, graphql_tag_1.default) `
+    mutation setWebhooks($webhooks: [WebhookInput!]!) {
+  setWebhooks(webhooks: $webhooks) {
+    id
+    event
+    requestTransformer {
+      name
+      supportedEvents
+    }
+    url
+  }
+}
+    `;
+exports.Webhooks = (0, graphql_tag_1.default) `
+    query webhooks {
+  webhooks {
+    id
+    event
+    requestTransformer {
+      name
+      supportedEvents
+    }
+    url
+  }
+}
+    `;
+exports.AvailableWebhookEvents = (0, graphql_tag_1.default) `
+    query availableWebhookEvents {
+  availableWebhookEvents
+}
+    `;
+exports.AvailableWebhookRequestTransformers = (0, graphql_tag_1.default) `
+    query availableWebhookRequestTransformers {
+  availableWebhookRequestTransformers {
+    name
+    supportedEvents
+  }
+}
+    `;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './webhook.plugin';

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./webhook.plugin"), exports);

package/dist/ui/graphql-types.ts

@@ -0,0 +1,121 @@
+import gql from 'graphql-tag';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: number | string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  /** Set all webhooks for the current channel. This will overwrite any existing webhooks. */
+  setWebhooks: Array<Webhook>;
+};
+
+
+export type MutationSetWebhooksArgs = {
+  webhooks: Array<WebhookInput>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  /** Get all available Vendure events that can be used to trigger webhooks */
+  availableWebhookEvents: Array<Scalars['String']>;
+  /**
+   * "
+   * Get all available webhook request transformers
+   */
+  availableWebhookRequestTransformers: Array<WebhookRequestTransformer>;
+  /** Get all webhooks for the current channel */
+  webhooks: Array<Webhook>;
+};
+
+export type Webhook = {
+  __typename?: 'Webhook';
+  event: Scalars['String'];
+  id: Scalars['ID'];
+  requestTransformer?: Maybe<WebhookRequestTransformer>;
+  url: Scalars['String'];
+};
+
+export type WebhookInput = {
+  event: Scalars['String'];
+  transformerName?: InputMaybe<Scalars['String']>;
+  url: Scalars['String'];
+};
+
+export type WebhookRequestTransformer = {
+  __typename?: 'WebhookRequestTransformer';
+  name: Scalars['String'];
+  supportedEvents: Array<Scalars['String']>;
+};
+
+export type SetWebhooksMutationVariables = Exact<{
+  webhooks: Array<WebhookInput> | WebhookInput;
+}>;
+
+
+export type SetWebhooksMutation = { __typename?: 'Mutation', setWebhooks: Array<{ __typename?: 'Webhook', id: number | string, event: string, url: string, requestTransformer?: { __typename?: 'WebhookRequestTransformer', name: string, supportedEvents: Array<string> } | null }> };
+
+export type WebhooksQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type WebhooksQuery = { __typename?: 'Query', webhooks: Array<{ __typename?: 'Webhook', id: number | string, event: string, url: string, requestTransformer?: { __typename?: 'WebhookRequestTransformer', name: string, supportedEvents: Array<string> } | null }> };
+
+export type AvailableWebhookEventsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AvailableWebhookEventsQuery = { __typename?: 'Query', availableWebhookEvents: Array<string> };
+
+export type AvailableWebhookRequestTransformersQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AvailableWebhookRequestTransformersQuery = { __typename?: 'Query', availableWebhookRequestTransformers: Array<{ __typename?: 'WebhookRequestTransformer', name: string, supportedEvents: Array<string> }> };
+
+
+export const SetWebhooks = gql`
+    mutation setWebhooks($webhooks: [WebhookInput!]!) {
+  setWebhooks(webhooks: $webhooks) {
+    id
+    event
+    requestTransformer {
+      name
+      supportedEvents
+    }
+    url
+  }
+}
+    `;
+export const Webhooks = gql`
+    query webhooks {
+  webhooks {
+    id
+    event
+    requestTransformer {
+      name
+      supportedEvents
+    }
+    url
+  }
+}
+    `;
+export const AvailableWebhookEvents = gql`
+    query availableWebhookEvents {
+  availableWebhookEvents
+}
+    `;
+export const AvailableWebhookRequestTransformers = gql`
+    query availableWebhookRequestTransformers {
+  availableWebhookRequestTransformers {
+    name
+    supportedEvents
+  }
+}
+    `;

package/dist/ui/queries.ts

@@ -0,0 +1,44 @@
+import gql from 'graphql-tag';
+
+export const setWebhooksMutation = gql`
+  mutation setWebhooks($webhooks: [WebhookInput!]!) {
+    setWebhooks(webhooks: $webhooks) {
+      id
+      event
+      requestTransformer {
+        name
+        supportedEvents
+      }
+      url
+    }
+  }
+`;
+
+export const getWebhooksQuery = gql`
+  query webhooks {
+    webhooks {
+      id
+      event
+      requestTransformer {
+        name
+        supportedEvents
+      }
+      url
+    }
+  }
+`;
+
+export const getAvailableWebhookEventsQuery = gql`
+  query availableWebhookEvents {
+    availableWebhookEvents
+  }
+`;
+
+export const getAvailableWebhookRequestTransformersQuery = gql`
+  query availableWebhookRequestTransformers {
+    availableWebhookRequestTransformers {
+      name
+      supportedEvents
+    }
+  }
+`;

package/dist/ui/webhook-nav.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { addNavMenuItem, SharedModule } from '@vendure/admin-ui/core';
+
+/**
+ * This module adds the webhook-sections to existing nav
+ */
+@NgModule({
+  imports: [SharedModule],
+  providers: [
+    addNavMenuItem(
+      {
+        id: 'webhook',
+        label: 'Webhook',
+        routerLink: ['/extensions/webhook'],
+        icon: 'cloud-traffic',
+        requiresPermission: 'SetWebhook',
+      },
+      'settings'
+    ),
+  ],
+})
+export class WebhookNavModule {}

package/dist/ui/webhook.component.html

@@ -0,0 +1,119 @@
+<vdr-action-bar>
+  <vdr-ab-right>
+    <vdr-action-bar-items locationId="collection-list"></vdr-action-bar-items>
+    <button class="btn btn-primary" (click)="showCreateModal()">
+      <clr-icon shape="add"></clr-icon>
+      Add Webhook
+    </button>
+  </vdr-ab-right>
+</vdr-action-bar>
+<clr-modal [(clrModalOpen)]="showMessage">
+  <h3 class="modal-title">Add Webhook</h3>
+  <div class="modal-body">
+    <div class="popupContainer">
+      <div class="card">
+        <div style="width: 100%">
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item">
+              <h4 class="card-title">Request Transformer</h4>
+              <select
+                clrSelect
+                [(ngModel)]="requestTransformerName"
+                (ngModelChange)="requestTransformerSelected()"
+              >
+                <option value="{{ undefined }}">--select---</option>
+                <option
+                  *ngFor="
+                    let transformers of avaiabelWebhookRequestTransformers
+                  "
+                  [value]="transformers.name"
+                >
+                  {{ transformers.name }}
+                </option>
+              </select>
+            </li>
+            <li class="list-group-item">
+              <h4 class="card-title">Event *</h4>
+              <select clrSelect [(ngModel)]="eventName">
+                <option value="{{ undefined }}">--select---</option>
+                <option
+                  *ngFor="let event of filteredWeebhookEvents"
+                  [value]="event"
+                >
+                  {{ event }}
+                </option>
+              </select>
+            </li>
+            <li class="list-group-item">
+              <h4 class="card-title">URL *</h4>
+              <input
+                clrInput
+                placeholder="https://"
+                name="input"
+                [(ngModel)]="url"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="showMessage = false">
+      Cancel
+    </button>
+    <button class="btn btn-primary" (click)="create()">Submit</button>
+  </div>
+</clr-modal>
+<vdr-data-table
+  [items]="webhooks"
+  [itemsPerPage]="itemsPerPage"
+  [totalItems]="webhooks.length"
+  [currentPage]="currentPage"
+  (pageChange)="setPageNumber($event)"
+  (itemsPerPageChange)="setItemsPerPage($event)"
+>
+  <vdr-dt-column>Event</vdr-dt-column>
+  <vdr-dt-column>Request Transformer</vdr-dt-column>
+  <vdr-dt-column>URL</vdr-dt-column>
+  <vdr-dt-column></vdr-dt-column>
+
+  <ng-template let-webhook="item">
+    <td class="left align-middle">
+      {{ webhook.event }}
+    </td>
+    <td class="left align-middle">
+      {{ webhook.requestTransformer?.name }}
+    </td>
+    <td class="left align-middle">
+      {{ webhook.url }}
+    </td>
+    <td>
+      <vdr-dropdown>
+        <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
+          {{ 'common.actions' | translate }}
+          <clr-icon shape="caret down"></clr-icon>
+        </button>
+        <vdr-dropdown-menu vdrPosition="bottom-right">
+          <button
+            type="button"
+            class="delete-button"
+            (click)="deleteWeebhook(webhook.id)"
+            vdrDropdownItem
+          >
+            <clr-icon shape="trash" class="is-danger"></clr-icon>
+            {{ 'common.delete' | translate }}
+          </button>
+          <button
+            type="button"
+            (click)="duplicate(webhook.requestTransformer?.name, webhook.url)"
+            vdrDropdownItem
+          >
+            <clr-icon shape="copy"></clr-icon>
+            Duplicate
+          </button>
+        </vdr-dropdown-menu>
+      </vdr-dropdown>
+    </td>
+  </ng-template>
+</vdr-data-table>

package/dist/ui/webhook.component.ts

@@ -0,0 +1,157 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DataService, NotificationService } from '@vendure/admin-ui/core';
+import {
+  getAvailableWebhookEventsQuery,
+  getAvailableWebhookRequestTransformersQuery,
+  getWebhooksQuery,
+  setWebhooksMutation,
+} from './queries';
+import {
+  Webhook,
+  WebhookInput,
+  WebhookRequestTransformer,
+} from './graphql-types';
+
+@Component({
+  selector: 'webhook-component',
+  templateUrl: './webhook.component.html',
+})
+export class WebhookComponent implements OnInit {
+  webhooks: Webhook[] = [];
+  currentPage: number = 1;
+  itemsPerPage: number = 10;
+  eventName: string | undefined;
+  requestTransformerName: string | undefined;
+  url: string | undefined;
+  showMessage = false;
+  availableWeebhookEvents: string[] = [];
+  filteredWeebhookEvents: string[] = [];
+  avaiabelWebhookRequestTransformers: WebhookRequestTransformer[] = [];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    protected dataService: DataService,
+    private changeDetector: ChangeDetectorRef,
+    private notificationService: NotificationService
+  ) {}
+
+  ngOnInit() {
+    this.dataService
+      .query(getAvailableWebhookEventsQuery)
+      .single$.subscribe((e: any) => {
+        this.filteredWeebhookEvents = this.availableWeebhookEvents =
+          e.availableWebhookEvents;
+      });
+    this.dataService.query(getWebhooksQuery).single$.subscribe((s: any) => {
+      this.webhooks = s.webhooks;
+    });
+    this.dataService
+      .query(getAvailableWebhookRequestTransformersQuery)
+      .single$.toPromise()
+      .then((d: any) => {
+        this.avaiabelWebhookRequestTransformers =
+          d.availableWebhookRequestTransformers;
+      });
+  }
+
+  setPageNumber(event: number) {
+    this.currentPage = event;
+  }
+
+  setItemsPerPage(event: number) {
+    this.itemsPerPage = event;
+  }
+
+  showCreateModal() {
+    this.showMessage = true;
+    this.eventName = '';
+    this.requestTransformerName = '';
+    this.url = '';
+    this.changeDetector.detectChanges();
+  }
+
+  create() {
+    if (
+      this.url &&
+      this.url !== '' &&
+      this.eventName &&
+      this.eventName !== ''
+    ) {
+      this.dataService
+        .mutate(setWebhooksMutation, {
+          webhooks: [
+            ...this.webhooks.map((w: Webhook) => {
+              return {
+                event: w.event,
+                transformerName: w.requestTransformer?.name,
+                url: w.url,
+              };
+            }),
+            {
+              event: this.eventName,
+              transformerName: this.requestTransformerName,
+              url: this.url,
+            },
+          ],
+        })
+        .subscribe((s: any) => {
+          this.showMessage = false;
+          this.notificationService.success('Webhook created successfully');
+          this.webhooks = s.setWebhooks;
+          this.changeDetector.detectChanges();
+        });
+    } else {
+      this.notificationService.error('Please enter all the required fields');
+    }
+  }
+
+  deleteWeebhook(id: number) {
+    this.webhooks = this.webhooks.filter((w: Webhook) => w.id != id);
+    this.changeDetector.detectChanges();
+    this.dataService
+      .mutate(setWebhooksMutation, {
+        webhooks: [
+          ...this.webhooks.map((w: Webhook) => {
+            return {
+              event: w.event,
+              transformerName: w.requestTransformer?.name,
+              url: w.url,
+            };
+          }),
+        ],
+      })
+      .subscribe((s: any) => {
+        this.webhooks = s.setWebhooks;
+        this.notificationService.success('Webhook deleted successfully');
+      });
+  }
+
+  requestTransformerSelected(setRequestTransformerName?: string) {
+    if (setRequestTransformerName) {
+      this.filteredWeebhookEvents =
+        this.avaiabelWebhookRequestTransformers.find(
+          (v) => v.name === this.requestTransformerName
+        )?.supportedEvents ?? [];
+    } else if (this.requestTransformerName) {
+      this.filteredWeebhookEvents =
+        this.avaiabelWebhookRequestTransformers.find(
+          (v) => v.name === this.requestTransformerName
+        )?.supportedEvents ?? [];
+    } else {
+      this.filteredWeebhookEvents = this.availableWeebhookEvents;
+    }
+    this.eventName = this.filteredWeebhookEvents.find(
+      (v) => v === this.eventName
+    );
+    this.changeDetector.detectChanges();
+  }
+
+  duplicate(requestTransformer: string, url: string) {
+    this.requestTransformerName = requestTransformer;
+    this.requestTransformerSelected(requestTransformer);
+    this.url = url;
+    this.showMessage = true;
+    this.changeDetector.detectChanges();
+  }
+}

package/dist/ui/webhook.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { addNavMenuItem, SharedModule } from '@vendure/admin-ui/core';
+import { WebhookComponent } from './webhook.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        pathMatch: 'full',
+        component: WebhookComponent,
+        data: { breadcrumb: 'Webhook' },
+      },
+    ]),
+  ],
+  providers: [
+    addNavMenuItem(
+      {
+        id: 'webhook',
+        label: 'Webhook',
+        routerLink: ['/extensions/webhook'],
+        icon: 'cursor-hand-open',
+      },
+      'settings'
+    ),
+  ],
+  declarations: [WebhookComponent],
+})
+export class WebhookModule {}