feat(surveymonkey): add surveymonkey integration

feat: hide react-flow attribution

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/index.js

@@ -0,0 +1,17 @@
+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';
+
+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,
+});

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

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

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/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>
   );