feat(surveymonkey): add create contact action

feat: hide react-flow attribution

packages/backend/src/apps/surveymonkey/actions/create-contact/index.js

@@ -0,0 +1,72 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Create contact',
+  key: 'createContact',
+  description: 'Creates a new contact in your address book.',
+  arguments: [
+    {
+      label: 'First Name',
+      key: 'firstName',
+      type: 'string',
+      required: true,
+      description: '',
+      variables: true,
+    },
+    {
+      label: 'Last Name',
+      key: 'lastName',
+      type: 'string',
+      required: true,
+      description: '',
+      variables: true,
+    },
+    {
+      label: 'Email',
+      key: 'email',
+      type: 'string',
+      required: true,
+      description: '',
+      variables: true,
+    },
+    {
+      label: 'Contact List',
+      key: 'contactListId',
+      type: 'dropdown',
+      required: false,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listContactLists',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const { firstName, lastName, email, contactListId } = $.step.parameters;
+    let url = '/v3/contacts';
+
+    if (contactListId) {
+      url = `/v3/contact_lists/${contactListId}/contacts`;
+    }
+
+    const body = {
+      first_name: firstName,
+      last_name: lastName,
+      email,
+    };
+
+    const { data } = await $.http.post(url, body);
+
+    $.setActionItem({
+      raw: data,
+    });
+  },
+});

packages/backend/src/apps/surveymonkey/actions/index.js

@@ -0,0 +1,3 @@
+import createContact from './create-contact/index.js';
+
+export default [createContact];

packages/backend/src/apps/surveymonkey/assets/favicon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.61 155.27"><defs><style>.cls-1{fill:#00bf6f;}</style></defs><title>Goldie_Sabaeus_RGB</title><path id="_Compound_Path_" data-name="&lt;Compound Path&gt;" class="cls-1" d="M249,141.26a26.52,26.52,0,0,0-6.29.78,81.08,81.08,0,0,0-64.19-59.81c-1.4-.25-2.66-.44-4.09-.62h0c.24-7.66.59-16.51,11.86-24.47l-1.78-4.49s-22,6.82-24.49,25.61c-1.09-5.11-11.33-11.51-16.4-12.72l-2.52,4.07s6.72,3.36,8.36,12.63h0A81.08,81.08,0,0,0,85.24,142a26.3,26.3,0,1,0,3.32,50,80.63,80.63,0,0,0,8.54,15.89l21.83-14.71-.19-.24c-5.77-7.42-9.3-18.34-9.9-29.21-.65-12,2.27-23.9,9.93-30.9,15.79-13.44,33-7.31,43.74,5.57h2.89c10.77-12.88,28-19,43.74-5.57,7.65,7,10.58,18.91,9.93,30.9-.59,10.87-4.12,21.79-9.9,29.21l-.19.24,21.83,14.71A80.63,80.63,0,0,0,239.37,192,26.29,26.29,0,1,0,249,141.26Zm-170.53,34a7.76,7.76,0,0,1,0-15.52,7.83,7.83,0,0,1,4.35,1.34,117.87,117.87,0,0,0,.83,12.19A7.76,7.76,0,0,1,78.44,175.31Zm171,0a7.76,7.76,0,0,1-5.18-2,117.87,117.87,0,0,0,.83-12.19,7.75,7.75,0,0,1,12.1,6.43A7.74,7.74,0,0,1,249.48,175.31Z" transform="translate(-52.66 -52.66)"/></svg>

packages/backend/src/apps/surveymonkey/auth/generate-auth-url.js

@@ -0,0 +1,24 @@
+import crypto from 'crypto';
+import { URLSearchParams } from 'url';
+
+export default async function generateAuthUrl($) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+  const state = crypto.randomBytes(100).toString('base64url');
+
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId,
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    state,
+  });
+
+  const url = `https://api.surveymonkey.com/oauth/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+    originalState: state,
+  });
+}

packages/backend/src/apps/surveymonkey/auth/index.js

@@ -0,0 +1,46 @@
+import generateAuthUrl from './generate-auth-url.js';
+import verifyCredentials from './verify-credentials.js';
+import isStillVerified from './is-still-verified.js';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string',
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/surveymonkey/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in SurveyMonkey, enter the URL above.',
+      clickToCopy: true,
+    },
+    {
+      key: 'clientId',
+      label: 'Client ID',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+    {
+      key: 'clientSecret',
+      label: 'Client Secret',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+  ],
+
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/surveymonkey/auth/is-still-verified.js

@@ -0,0 +1,8 @@
+import getCurrentUser from '../common/get-current-user.js';
+
+const isStillVerified = async ($) => {
+  const currentUser = await getCurrentUser($);
+  return !!currentUser.id;
+};
+
+export default isStillVerified;

packages/backend/src/apps/surveymonkey/auth/verify-credentials.js

@@ -0,0 +1,48 @@
+import getCurrentUser from '../common/get-current-user.js';
+
+const verifyCredentials = async ($) => {
+  if ($.auth.data.originalState !== $.auth.data.state) {
+    throw new Error("The 'state' parameter does not match.");
+  }
+
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+  const { data } = await $.http.post(
+    'https://api.surveymonkey.com/oauth/token',
+    {
+      client_secret: $.auth.data.clientSecret,
+      code: $.auth.data.code,
+      redirect_uri: redirectUri,
+      client_id: $.auth.data.clientId,
+      grant_type: 'authorization_code',
+    },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    }
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    tokenType: data.token_type,
+    accessUrl: data.access_url,
+    expiresIn: data.expires_in,
+  });
+
+  const currentUser = await getCurrentUser($);
+
+  const screenName = [currentUser.username, currentUser.email]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    screenName,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/surveymonkey/common/add-auth-header.js

@@ -0,0 +1,9 @@
+const addAuthHeader = ($, requestConfig) => {
+  if ($.auth.data?.accessToken) {
+    requestConfig.headers.Authorization = `${$.auth.data.tokenType} ${$.auth.data.accessToken}`;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/surveymonkey/common/get-current-user.js

@@ -0,0 +1,6 @@
+const getCurrentUser = async ($) => {
+  const { data: currentUser } = await $.http.get('/v3/users/me');
+  return currentUser;
+};
+
+export default getCurrentUser;

packages/backend/src/apps/surveymonkey/common/set-base-url.js

@@ -0,0 +1,11 @@
+const setBaseUrl = ($, requestConfig) => {
+  const accessUrl = $.auth.data.accessUrl;
+
+  if (accessUrl) {
+    requestConfig.baseURL = accessUrl;
+  }
+
+  return requestConfig;
+};
+
+export default setBaseUrl;

packages/backend/src/apps/surveymonkey/dynamic-data/index.js

@@ -0,0 +1,4 @@
+import listContactLists from './list-contact-lists/index.js';
+import listSurveys from './list-surveys/index.js';
+
+export default [listSurveys, listContactLists];

packages/backend/src/apps/surveymonkey/dynamic-data/list-contact-lists/index.js

@@ -0,0 +1,36 @@
+export default {
+  name: 'List contact lists',
+  key: 'listContactLists',
+
+  async run($) {
+    const contactLists = {
+      data: [],
+    };
+
+    const params = {
+      page: 1,
+      per_page: 100,
+    };
+
+    let fetchedSum = 0;
+    let total;
+    do {
+      const { data } = await $.http.get('/v3/contact_lists', { params });
+
+      params.page = params.page + 1;
+      fetchedSum = fetchedSum + params.per_page;
+      total = data.total;
+
+      if (data.data) {
+        for (const contactList of data.data) {
+          contactLists.data.push({
+            value: contactList.id,
+            name: contactList.name,
+          });
+        }
+      }
+    } while (fetchedSum <= total);
+
+    return contactLists;
+  },
+};

packages/backend/src/apps/surveymonkey/dynamic-data/list-surveys/index.js

@@ -0,0 +1,38 @@
+export default {
+  name: 'List surveys',
+  key: 'listSurveys',
+
+  async run($) {
+    const surveys = {
+      data: [],
+    };
+
+    const params = {
+      page: 1,
+      per_page: 100,
+      sort_by: 'date_modified',
+      sort_order: 'DESC',
+    };
+
+    let fetchedSum = 0;
+    let total;
+    do {
+      const { data } = await $.http.get(`/v3/surveys`, { params });
+
+      params.page = params.page + 1;
+      fetchedSum = fetchedSum + params.per_page;
+      total = data.total;
+
+      if (data.data) {
+        for (const survey of data.data) {
+          surveys.data.push({
+            value: survey.id,
+            name: survey.title,
+          });
+        }
+      }
+    } while (fetchedSum <= total);
+
+    return surveys;
+  },
+};

packages/backend/src/apps/surveymonkey/index.js

@@ -0,0 +1,23 @@
+import defineApp from '../../helpers/define-app.js';
+import addAuthHeader from './common/add-auth-header.js';
+import auth from './auth/index.js';
+import setBaseUrl from './common/set-base-url.js';
+import triggers from './triggers/index.js';
+import dynamicData from './dynamic-data/index.js';
+import actions from './actions/index.js';
+
+export default defineApp({
+  name: 'SurveyMonkey',
+  key: 'surveymonkey',
+  baseUrl: 'https://www.surveymonkey.com',
+  apiBaseUrl: '',
+  iconUrl: '{BASE_URL}/apps/surveymonkey/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/surveymonkey/connection',
+  primaryColor: '00bf6f',
+  supportsConnections: true,
+  beforeRequest: [setBaseUrl, addAuthHeader],
+  auth,
+  triggers,
+  dynamicData,
+  actions,
+});

packages/backend/src/apps/surveymonkey/triggers/index.js

@@ -0,0 +1,3 @@
+import newResponseNotification from './new-response-notification/index.js';
+
+export default [newResponseNotification];

packages/backend/src/apps/surveymonkey/triggers/new-response-notification/index.js

@@ -0,0 +1,78 @@
+import Crypto from 'crypto';
+import isEmpty from 'lodash/isEmpty.js';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New response notification',
+  key: 'newResponseNotification',
+  type: 'webhook',
+  description: 'Triggers a notification upon the completion of your survey.',
+  arguments: [
+    {
+      label: 'Survey',
+      key: 'surveyId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSurveys',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: Crypto.randomUUID(),
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const lastExecutionStep = await $.getLastExecutionStep();
+
+    if (!isEmpty(lastExecutionStep?.dataOut)) {
+      $.pushTriggerItem({
+        raw: lastExecutionStep.dataOut,
+        meta: {
+          internalId: '',
+        },
+      });
+    }
+  },
+
+  async registerHook($) {
+    const surveyId = $.step.parameters.surveyId;
+
+    const body = JSON.stringify({
+      name: $.flow.id,
+      subscription_url: $.webhookUrl,
+      event_type: 'response_completed',
+      object_type: 'survey',
+      object_ids: [surveyId],
+    });
+
+    const { data } = await $.http.post('/v3/webhooks?bypass_ping=true', body, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    await $.flow.setRemoteWebhookId(data.id);
+  },
+
+  async unregisterHook($) {
+    await $.http.delete(`/v3/webhooks/${$.flow.remoteWebhookId}`);
+  },
+});

packages/docs/pages/.vitepress/config.js

@@ -437,6 +437,16 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/stripe/connection' },
           ],
         },
+        {
+          text: 'SurveyMonkey',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Triggers', link: '/apps/surveymonkey/triggers' },
+            { text: 'Actions', link: '/apps/surveymonkey/actions' },
+            { text: 'Connection', link: '/apps/surveymonkey/connection' },
+          ],
+        },
         {
           text: 'Telegram',
           collapsible: true,

packages/docs/pages/apps/surveymonkey/actions.md

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/surveymonkey.svg
+items:
+  - name: Create contact
+    desc: Creates a new contact in your address book.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

packages/docs/pages/apps/surveymonkey/connection.md

@@ -0,0 +1,18 @@
+# SurveyMonkey
+
+:::info
+This page explains the steps you need to follow to set up the SurveyMonkey
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [My Apps page of your SurveyMonkey account](https://developer.surveymonkey.com/apps/) to create a project.
+2. Click on the **Add a New App** button.
+3. Fill the form and submit it.
+4. Go to **Settings** page.
+5. Copy **OAuth Redirect URL** from Automatisch to **OAuth Redirect URIs** field, and click on the **Submit Changes** button.
+6. In the same page, go to the **Scopes** section.
+7. Select **Create/Modify Surveys**, **View Surveys**, **View Collectors**, **View Responses**, **Create/Modify Contacts**, **View Contacts**, **Create/Modify Webhooks**, **View Users** and **View Webhooks** scopes and click on the **Update Scopes** button.
+8. Copy the **Client ID** value in the same page to the `Client ID` field on Automatisch.
+9. Copy the **Secret** value in the same page to the `Client Secret` field on Automatisch.
+10. Click **Submit** button on Automatisch.
+11. Congrats! Start using your new SurveyMonkey connection within the flows.

packages/docs/pages/apps/surveymonkey/triggers.md

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/surveymonkey.svg
+items:
+  - name: New response notification
+    desc: Triggers a notification upon the completion of your survey.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

packages/docs/pages/guide/available-apps.md

@@ -46,6 +46,7 @@ The following integrations are currently supported by Automatisch.
 - [Spotify](/apps/spotify/actions)
 - [Strava](/apps/strava/actions)
 - [Stripe](/apps/stripe/triggers)
+- [SurveyMonkey](/apps/surveymonkey/triggers)
 - [Telegram](/apps/telegram-bot/actions)
 - [Todoist](/apps/todoist/triggers)
 - [Trello](/apps/trello/actions)

packages/docs/pages/public/favicons/surveymonkey.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.61 155.27"><defs><style>.cls-1{fill:#00bf6f;}</style></defs><title>Goldie_Sabaeus_RGB</title><path id="_Compound_Path_" data-name="&lt;Compound Path&gt;" class="cls-1" d="M249,141.26a26.52,26.52,0,0,0-6.29.78,81.08,81.08,0,0,0-64.19-59.81c-1.4-.25-2.66-.44-4.09-.62h0c.24-7.66.59-16.51,11.86-24.47l-1.78-4.49s-22,6.82-24.49,25.61c-1.09-5.11-11.33-11.51-16.4-12.72l-2.52,4.07s6.72,3.36,8.36,12.63h0A81.08,81.08,0,0,0,85.24,142a26.3,26.3,0,1,0,3.32,50,80.63,80.63,0,0,0,8.54,15.89l21.83-14.71-.19-.24c-5.77-7.42-9.3-18.34-9.9-29.21-.65-12,2.27-23.9,9.93-30.9,15.79-13.44,33-7.31,43.74,5.57h2.89c10.77-12.88,28-19,43.74-5.57,7.65,7,10.58,18.91,9.93,30.9-.59,10.87-4.12,21.79-9.9,29.21l-.19.24,21.83,14.71A80.63,80.63,0,0,0,239.37,192,26.29,26.29,0,1,0,249,141.26Zm-170.53,34a7.76,7.76,0,0,1,0-15.52,7.83,7.83,0,0,1,4.35,1.34,117.87,117.87,0,0,0,.83,12.19A7.76,7.76,0,0,1,78.44,175.31Zm171,0a7.76,7.76,0,0,1-5.18-2,117.87,117.87,0,0,0,.83-12.19,7.75,7.75,0,0,1,12.1,6.43A7.74,7.74,0,0,1,249.48,175.31Z" transform="translate(-52.66 -52.66)"/></svg>

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -4,7 +4,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import { FlowPropType } from 'propTypes/propTypes';
 import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'reactflow';
 import 'reactflow/dist/style.css';
-import { Stack } from '@mui/material';
 import { UPDATE_STEP } from 'graphql/mutations/update-step';
 
 import { useAutoLayout } from './useAutoLayout';
@@ -246,6 +245,7 @@ const EditorNew = ({ flow }) => {
         zoomOnPinch={false}
         zoomOnDoubleClick={false}
         panActivationKeyCode={null}
+        proOptions={{ hideAttribution: true }}
       />
     </EditorWrapper>
   );