Merge pull request #350 from AppQuality/develop

Fix express issues

Author: cannarocks

src/pages/Campaign/pageHeader/index.tsx

@@ -1,4 +1,4 @@
-import { Anchor, PageHeader, Span } from '@appquality/unguess-design-system';
+import { Anchor, PageHeader } from '@appquality/unguess-design-system';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { Pills } from './Pills';

src/pages/ExpressWizard/index.tsx

@@ -21,6 +21,7 @@ import {
   closeDrawer,
   closeWizard,
   resetWizard,
+  setExpressProject,
 } from 'src/features/express/expressSlice';
 import * as Yup from 'yup';
 import styled from 'styled-components';
@@ -39,7 +40,6 @@ import {
   EXPRESS_1_CAMPAIGN_TYPE_ID,
 } from 'src/constants';
 import { format } from 'date-fns';
-import async from 'async';
 import {
   createCrons,
   createPages,
@@ -204,162 +204,146 @@ export const ExpressWizardContainer = () => {
   }, [activeStep]);
 
   // Form actions
-  const handleSubmit = (
+  const handleSubmit = async (
     values: WizardModel,
     { setSubmitting, setStatus }: FormikHelpers<WizardModel>
   ) => {
     // Save submitted form values
     setFormValues(values);
 
-    // eslint-disable-next-line consistent-return
-    const projectHandle = (next: any) => {
-      try {
-        // Create project if it doesn't exist
-        if (
-          project &&
-          project.id === -1 &&
-          activeWorkspace &&
-          activeWorkspace.id
-        ) {
-          createProject({
-            body: {
-              name: project.name,
-              customer_id: activeWorkspace.id,
-            },
-          })
-            .unwrap()
-            .then((payload) => {
-              next(null, payload);
-            })
-            .catch((error) => next(error));
-        } else {
-          next(null, project);
-        }
-      } catch (error) {
-        return next(error);
-      }
-    };
-
-    // eslint-disable-next-line consistent-return
-    const campaignHandle = (prj: Project, next: any) => {
-      try {
-        const fallBackDate = format(new Date(), BASE_DATE_FORMAT);
-        // Create the campaign
-        createCampaign({
+    const projectHandle = async () => {
+      // Create project if it doesn't exist
+      if (
+        project &&
+        project.id === -1 &&
+        activeWorkspace &&
+        activeWorkspace.id
+      ) {
+        const prj = await createProject({
           body: {
-            title: values.campaign_name || 'Express campaign',
-            start_date: values.campaign_date
-              ? format(values.campaign_date, BASE_DATE_FORMAT)
-              : fallBackDate,
-            end_date: values.campaign_date_end
-              ? format(values.campaign_date_end, BASE_DATE_FORMAT)
-              : fallBackDate,
-            close_date: values.campaign_date_end
-              ? format(values.campaign_date_end, BASE_DATE_FORMAT)
-              : fallBackDate,
-            customer_title: values.campaign_name,
-            campaign_type_id: getExpressCPTypeId(expressTypeMeta.slug),
-            project_id: prj?.id || -1,
-            pm_id: activeWorkspace?.csm.id || -1,
-            platforms: getPlatform(values),
-            customer_id: activeWorkspace?.id || -1,
-
-            express_slug: expressTypeMeta.slug,
-            has_bug_form: values.has_bug_form ? 1 : 0,
-            has_bug_parade: values.has_bug_parade ? 1 : 0,
-            ...(values.use_cases && { use_cases: values.use_cases }),
+            name: project.name,
+            customer_id: activeWorkspace.id,
           },
-        })
-          .unwrap()
-          .then(async (payload) => {
-            next(null, payload);
-          })
-          .catch((error) => next(error));
-      } catch (error) {
-        return next(error);
+        }).unwrap();
+
+        if (prj) dispatch(setExpressProject(prj));
+
+        return prj;
       }
+
+      return project;
     };
 
-    // eslint-disable-next-line consistent-return
-    const zapierHandle = (cp: Campaign, next: any) => {
-      try {
-        // Post on webhook Zapier axios call
-        fetch(expressTypeData.webhook_url ?? ZAPIER_WEBHOOK_TRIGGER, {
-          method: 'POST',
-          mode: 'no-cors',
-          headers: {
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
+    const campaignHandle = async (prj: Project) => {
+      const fallBackDate = format(new Date(), BASE_DATE_FORMAT);
+      // Create the campaign
+      const cp = await createCampaign({
+        body: {
+          title: values.campaign_name || 'Express campaign',
+          start_date: values.campaign_date
+            ? format(values.campaign_date, BASE_DATE_FORMAT)
+            : fallBackDate,
+          end_date: values.campaign_date_end
+            ? format(values.campaign_date_end, BASE_DATE_FORMAT)
+            : fallBackDate,
+          close_date: values.campaign_date_end
+            ? format(values.campaign_date_end, BASE_DATE_FORMAT)
+            : fallBackDate,
+          customer_title: values.campaign_name,
+          campaign_type_id: getExpressCPTypeId(expressTypeMeta.slug),
+          project_id: prj?.id || -1,
+          pm_id: activeWorkspace?.csm.id || -1,
+          platforms: getPlatform(values),
+          customer_id: activeWorkspace?.id || -1,
+
+          express_slug: expressTypeMeta.slug,
+          has_bug_form: values.has_bug_form ? 1 : 0,
+          has_bug_parade: values.has_bug_parade ? 1 : 0,
+          ...(values.use_cases && { use_cases: values.use_cases }),
+        },
+      }).unwrap();
+
+      return cp;
+    };
+
+    const zapierHandle = async (cp: Campaign) => {
+      // Post on webhook Zapier axios call
+      await fetch(expressTypeData.webhook_url ?? ZAPIER_WEBHOOK_TRIGGER, {
+        method: 'POST',
+        mode: 'no-cors',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          cp: {
+            ...values,
+            id: cp.id,
+            ...(values.campaign_date && {
+              start_date: format(values.campaign_date, BASE_DATE_FORMAT),
+            }),
+            ...(values.campaign_date_end && {
+              end_date: format(values.campaign_date_end, BASE_DATE_FORMAT),
+            }),
+            ...(values.campaign_date_end && {
+              close_date: format(values.campaign_date_end, BASE_DATE_FORMAT),
+            }),
+            ...(values.campaign_reason && {
+              reason: reasonItems[values.campaign_reason],
+            }),
           },
-          body: JSON.stringify({
-            cp: {
-              ...values,
-              id: cp.id,
-              ...(values.campaign_date && {
-                start_date: format(values.campaign_date, BASE_DATE_FORMAT),
-              }),
-              ...(values.campaign_date_end && {
-                end_date: format(values.campaign_date_end, BASE_DATE_FORMAT),
-              }),
-              ...(values.campaign_date_end && {
-                close_date: format(values.campaign_date_end, BASE_DATE_FORMAT),
-              }),
-              ...(values.campaign_reason && {
-                reason: reasonItems[values.campaign_reason],
-              }),
-            },
-            user: userData,
-            workspace: activeWorkspace,
-          }),
-        })
-          .then(() => next(null, cp))
-          .catch((error) => next(error));
-      } catch (error) {
-        return next(error);
-      }
+          user: userData,
+          workspace: activeWorkspace,
+        }),
+      });
     };
 
-    // eslint-disable-next-line consistent-return
-    const wordpressHandle = (cp: Campaign, next: any) => {
+    const wordpressHandle = async (cp: Campaign) => {
+      // Post on webhook WordPress axios call
       try {
-        // Post on webhook WordPress axios call
         if (!values.use_cases) {
-          createUseCases(cp.id);
+          await createUseCases(cp.id);
         }
 
-        createPages(cp.id);
-        createCrons(cp.id);
-        createTasks(cp.id);
-        return next(null);
-      } catch (error) {
-        return next(null); // Skip error handling
+        await createPages(cp.id);
+        await createCrons(cp.id);
+        await createTasks(cp.id);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log('Something went wrong with wp', e);
       }
     };
 
-    return async.waterfall(
-      [projectHandle, campaignHandle, zapierHandle, wordpressHandle],
-      (err: any) => {
-        if (err) {
-          // eslint-disable-next-line no-console
-          console.error('Submission error:', err);
-
-          setSubmitting(false);
+    try {
+      const prj = await projectHandle();
 
-          // TODO: Show error message modal
-          setStatus({ submitError: true });
-
-          // Send error to GTM
-          sendGTMEvent({
-            event: 'generic_error',
-            content: JSON.stringify(err),
-          });
-        } else {
-          // eslint-disable-next-line no-console
-          console.log('done');
+      if (prj) {
+        const cp = await campaignHandle(prj);
+        if (cp) {
+          await zapierHandle(cp);
+          await wordpressHandle(cp);
           onNext();
+        } else {
+          throw Error('Something went wrong with campaign');
         }
+      } else {
+        throw Error('Something went wrong with project');
       }
-    );
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Submission error:', e);
+
+      setSubmitting(false);
+
+      // TODO: Show error message modal
+      setStatus({ submitError: true });
+
+      // Send error to GTM
+      sendGTMEvent({
+        event: 'generic_error',
+        content: JSON.stringify(e),
+      });
+    }
   };
 
   const closeExpressWizard = () => {