New Components - widgetform (#16558)

* new components

* pnpm-lock.yaml

Author: michelle0927

components/widgetform/actions/get-recent-submissions/get-recent-submissions.mjs

@@ -0,0 +1,30 @@
+import widgetform from "../../widgetform.app.mjs";
+
+export default {
+  key: "widgetform-get-recent-submissions",
+  name: "Get Recent Submissions",
+  description: "Retrieves the 10 most recent submissions. [See the documentation](https://usewidgetform.notion.site/Zapier-API-185312164ccf808eb902f411608aa35d)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    widgetform,
+    form: {
+      propDefinition: [
+        widgetform,
+        "form",
+      ],
+    },
+  },
+  async run({ $ }) {
+    const response = await this.widgetform.listResponses({
+      $,
+    });
+    const submissions = this.form
+      ? response.filter(({ form_name }) => form_name === this.form)
+      : response;
+    $.export("$summary", `Successfully retrieved ${submissions.length} submission${submissions.length === 1
+      ? ""
+      : "s"}`);
+    return submissions;
+  },
+};

components/widgetform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/widgetform",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Pipedream Widgetform Components",
   "main": "widgetform.app.mjs",
   "keywords": [
@@ -11,5 +11,8 @@
   "author": "Pipedream <support@pipedream.com> (https://pipedream.com/)",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@pipedream/platform": "^3.0.3"
   }
-}
+}

components/widgetform/sources/new-submission-instant/new-submission-instant.mjs

@@ -0,0 +1,81 @@
+import widgetform from "../../widgetform.app.mjs";
+
+export default {
+  key: "widgetform-new-submission-instant",
+  name: "New Form Submission (Instant)",
+  description: "Emit new event when a form submission is received. [See the documentation](https://usewidgetform.notion.site/Zapier-API-185312164ccf808eb902f411608aa35d)",
+  version: "0.0.1",
+  type: "source",
+  props: {
+    widgetform,
+    db: "$.service.db",
+    http: "$.interface.http",
+    form: {
+      propDefinition: [
+        widgetform,
+        "form",
+      ],
+    },
+  },
+  hooks: {
+    async activate() {
+      const { id } = await this.widgetform.createSubscription({
+        data: {
+          hook_url: this.http.endpoint,
+        },
+      });
+      if (!id) {
+        throw new Error("Error creating subscription");
+      }
+      this._setSubscriptionId(id);
+    },
+    async deactivate() {
+      const id = this._getSubscriptionId();
+      if (!id) {
+        return;
+      }
+      await this.widgetform.deleteSubscription({
+        data: {
+          subscription_id: id,
+        },
+      });
+    },
+    async deploy() {
+      const response = await this.widgetform.listResponses();
+      if (!response?.length) {
+        return;
+      }
+      const submissions = this.form
+        ? response.filter(({ form_name }) => form_name === this.form)
+        : response;
+      submissions.reverse().forEach((submission) => {
+        const meta = this.generateMeta(submission);
+        this.$emit(submission, meta);
+      });
+    },
+  },
+  methods: {
+    _getSubscriptionId() {
+      return this.db.get("subscriptionId");
+    },
+    _setSubscriptionId(subscriptionId) {
+      this.db.set("subscriptionId", subscriptionId);
+    },
+    generateMeta(submission) {
+      const ts = Date.now();
+      return {
+        id: ts,
+        summary: `New Submission for ${submission.form_name}`,
+        ts,
+      };
+    },
+  },
+  async run(event) {
+    const submission = event.body;
+    if (!submission || (this.form && (submission.form_name !== this.form))) {
+      return;
+    }
+    const meta = this.generateMeta(submission);
+    this.$emit(submission, meta);
+  },
+};

components/widgetform/widgetform.app.mjs

@@ -1,11 +1,52 @@
+import { axios } from "@pipedream/platform";
+
 export default {
   type: "app",
   app: "widgetform",
-  propDefinitions: {},
+  propDefinitions: {
+    form: {
+      type: "string",
+      label: "Form",
+      description: "Filter results by form name",
+      optional: true,
+    },
+  },
   methods: {
-    // this.$auth contains connected account data
-    authKeys() {
-      console.log(Object.keys(this.$auth));
+    _baseUrl() {
+      return "https://usewidgetform.com/api/v1";
+    },
+    _makeRequest({
+      $ = this,
+      path,
+      ...otherOpts
+    }) {
+      return axios($, {
+        url: `${this._baseUrl()}${path}`,
+        headers: {
+          "x-api-key": this.$auth.api_key,
+        },
+        ...otherOpts,
+      });
+    },
+    listResponses(opts = {}) {
+      return this._makeRequest({
+        path: "/hooks/zapier/responses",
+        ...opts,
+      });
+    },
+    createSubscription(opts = {}) {
+      return this._makeRequest({
+        method: "POST",
+        path: "/hooks/zapier/subscription",
+        ...opts,
+      });
+    },
+    deleteSubscription(opts = {}) {
+      return this._makeRequest({
+        method: "DELETE",
+        path: "/hooks/zapier/subscription",
+        ...opts,
+      });
     },
   },
-};
+};