feat(useAuthenticateApp): use REST API endpoint to update connection

packages/web/src/helpers/computeAuthStepVariables.js

@@ -1,27 +1,35 @@
 import template from 'lodash/template';
 const interpolate = /{([\s\S]+?)}/g;
+
 const computeAuthStepVariables = (variableSchema, aggregatedData) => {
   const variables = {};
+
   for (const variable of variableSchema) {
     if (variable.properties) {
       variables[variable.name] = computeAuthStepVariables(
         variable.properties,
         aggregatedData,
       );
+
       continue;
     }
+
     if (variable.value) {
       if (variable.value.endsWith('.all}')) {
         const key = variable.value.replace('{', '').replace('.all}', '');
         variables[variable.name] = aggregatedData[key];
+
         continue;
       }
+
       const computedVariable = template(variable.value, { interpolate })(
         aggregatedData,
       );
+
       variables[variable.name] = computedVariable;
     }
   }
+
   return variables;
 };
 export default computeAuthStepVariables;

packages/web/src/hooks/useAuthenticateApp.ee.js

@@ -6,10 +6,11 @@ import {
   processPopupMessage,
 } from 'helpers/authenticationSteps';
 import computeAuthStepVariables from 'helpers/computeAuthStepVariables';
+import useFormatMessage from './useFormatMessage';
 import useAppAuth from './useAppAuth';
 import useCreateConnection from './useCreateConnection';
-import useFormatMessage from './useFormatMessage';
 import useCreateConnectionAuthUrl from './useCreateConnectionAuthUrl';
+import useUpdateConnection from './useUpdateConnection';
 
 function getSteps(auth, hasConnection, useShared) {
   if (hasConnection) {
@@ -31,6 +32,7 @@ export default function useAuthenticateApp(payload) {
   const { data: auth } = useAppAuth(appKey);
   const { mutateAsync: createConnection } = useCreateConnection(appKey);
   const { mutateAsync: createConnectionAuthUrl } = useCreateConnectionAuthUrl();
+  const { mutateAsync: updateConnection } = useUpdateConnection();
   const [authenticationInProgress, setAuthenticationInProgress] =
     React.useState(false);
   const formatMessage = useFormatMessage();
@@ -76,6 +78,13 @@ export default function useAuthenticateApp(payload) {
               const stepResponse = await createConnectionAuthUrl(
                 response.createConnection.id,
               );
+              response[step.name] = stepResponse?.data;
+            } else if (step.name === 'updateConnection') {
+              const stepResponse = await updateConnection({
+                ...variables,
+                connectionId: response.createConnection.id,
+              });
+
               response[step.name] = stepResponse?.data;
             } else {
               const stepResponse = await processMutation(step.name, variables);
@@ -98,7 +107,16 @@ export default function useAuthenticateApp(payload) {
         setAuthenticationInProgress(false);
       }
     };
-  }, [steps, appKey, appAuthClientId, connectionId, formatMessage]);
+  }, [
+    steps,
+    appKey,
+    appAuthClientId,
+    connectionId,
+    formatMessage,
+    createConnection,
+    createConnectionAuthUrl,
+    updateConnection,
+  ]);
 
   return {
     authenticate,

packages/web/src/hooks/useUpdateConnection.js

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useUpdateConnection() {
+  const query = useMutation({
+    mutationFn: async ({ connectionId, formattedData, appAuthClientId }) => {
+      const { data } = await api.patch(`/v1/connections/${connectionId}`, {
+        formattedData,
+        appAuthClientId,
+      });
+
+      return data;
+    },
+  });
+
+  return query;
+}