feat: use an onSubmit option instead of redirecting in useMarketoForm

newrelic · Sep 26, 2020 · d4ce6f9 · d4ce6f9
1 parent 76f16a5
commit d4ce6f9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/MarketoForm/MarketoForm.js b/src/components/MarketoForm/MarketoForm.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
-import './marketo.scss';
+import { navigate } from 'gatsby';
 import useMarketoForm from '../../hooks/useMarketoForm';
 import Spinner from '../Spinner';
+import './marketo.scss';
 
 const MarketoForm = ({
   title,
@@ -16,7 +17,7 @@ const MarketoForm = ({
     munchkinId,
     id,
     publishableKey,
-    redirectLink,
+    onSubmit: () => navigate(redirectLink),
   });
 
   return (

diff --git a/src/hooks/useMarketoForm.js b/src/hooks/useMarketoForm.js
@@ -1,4 +1,3 @@
-import { navigate } from 'gatsby';
 import { assign, Machine } from 'xstate';
 import { asEffect, useMachine } from '@xstate/react';
 import useScript from './useScript';
@@ -46,7 +45,12 @@ const machine = Machine({
   },
 });
 
-const useMarketoForm = ({ munchkinId, id, publishableKey, redirectLink }) => {
+const useMarketoForm = ({
+  id,
+  munchkinId,
+  publishableKey,
+  onSubmit = () => {},
+}) => {
   const [state, send] = useMachine(machine, {
     actions: {
       loadForm: asEffect(() => {
@@ -59,7 +63,7 @@ const useMarketoForm = ({ munchkinId, id, publishableKey, redirectLink }) => {
       }),
       defineFormActions: asEffect(({ form }) => {
         form.onSuccess(() => {
-          navigate(redirectLink);
+          onSubmit();
 
           // prevent the default behavior of redirecting via marketo to another
           // page. We want to control the navigation ourselves.