Fully Managed working

lukefrogger · lukefrogger · commit ef080a83ab1b · 2022-02-09T11:44:48.000-06:00
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/purpleLogo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#8b15b8" />
     <meta
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/examples/FullyManaged.js b/src/examples/FullyManaged.js
@@ -6,8 +6,7 @@ const FullyManaged = () => {
 
   const onSubmit = async (values) => {
     await sleep(1000);
-    // return "We couldn't save your form."";
-
+    // Your logic here
     console.log('return values', values);
   };
   return (
@@ -21,7 +20,7 @@ const FullyManaged = () => {
         <br />
         <div>
           <FetchForm
-            slug='fcd4ca8b-12d4-4b8c-882d-00144d54d02c'
+            slug='6fa85752-e237-493d-9c63-c441049cb53d'
             onSubmit={onSubmit}
           />
         </div>
diff --git a/src/lib/exports/components/FetchForm.js b/src/lib/exports/components/FetchForm.js
@@ -2,13 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 import useFetchForms from '../hooks/useFetchForms';
 import FetchFormItem from './form/FetchFormItem';
-import { validate } from './form/Validations';
+import { validate } from '../scripts/Validations';
 import '../styles/index.scss';
-import useCloudSave from '../hooks/useCloudSave';
 
 const FetchForm = ({ slug, showFormError, onSubmit }) => {
-  const [fetchForm, loading, error] = useFetchForms(slug);
-  const { status, createSubmission } = useCloudSave();
+  const [fetchForm, loading, error, doCloudSubmit] = useFetchForms(slug);
   const [validations, setValidations] = useState({});
   const [submitError, setSubmitError] = useState(false);
 
@@ -43,17 +41,23 @@ const FetchForm = ({ slug, showFormError, onSubmit }) => {
         formattedValues[keys[i]] = values[keys[i]];
       }
     }
+    console.log(formattedValues);
 
     if (fetchForm.cloudSave) {
-      await createSubmission(fetchForm.id, formattedValues);
-      if (status.error) {
-        return setSubmitError(status.error);
-      }
-    }
+      try {
+        const isSaved = await doCloudSubmit(fetchForm.id, formattedValues);
+        if (!isSaved.success) {
+          throw isSaved.message;
+        }
 
-    const hasError = await onSubmit(formattedValues);
-    if (hasError) {
-      setSubmitError(hasError);
+        const hasError = await onSubmit(formattedValues);
+        if (hasError) {
+          throw hasError;
+        }
+      } catch (err) {
+        console.log(err);
+        setSubmitError(err);
+      }
     }
   };
 
@@ -75,7 +79,6 @@ const FetchForm = ({ slug, showFormError, onSubmit }) => {
           initialValues={{}}
           validate={(values) => {
             const errors = validate(values, validations);
-            // console.log(errors);
             return errors;
           }}
           render={({ handleSubmit, submitting, invalid }) => (
@@ -92,7 +95,7 @@ const FetchForm = ({ slug, showFormError, onSubmit }) => {
                 className='fetch-submit-button'
                 disabled={submitting || invalid}
               >
-                {fetchForm.submitText}
+                {submitting ? 'Saving...' : fetchForm.submitText}
               </button>
             </form>
           )}
diff --git a/src/lib/exports/components/form/FetchLabel.js b/src/lib/exports/components/form/FetchLabel.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const FetchField = ({ label, name, noMargin }) => {
+  return (
+    <label
+      htmlFor={name}
+      className={`fetch-label ${noMargin ? 'no-margin' : ''}`}
+    >
+      {label}
+    </label>
+  );
+};
+
+export default FetchField;
diff --git a/src/lib/exports/components/form/fields/FetchFormCheckbox.js b/src/lib/exports/components/form/fields/FetchFormCheckbox.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import FetchLabel from '../elements/FetchLabel';
+import FetchLabel from '../FetchLabel';
 
 const FetchFormCheckbox = ({ label, html }) => {
   return (
diff --git a/src/lib/exports/components/form/fields/FetchFormInput.js b/src/lib/exports/components/form/fields/FetchFormInput.js
@@ -1,27 +1,25 @@
 import React from 'react';
-import FetchLabel from '../elements/FetchLabel';
-import { getFormat } from '../Formats';
+import FetchLabel from '../FetchLabel';
+import { getFormat } from '../../../scripts/Formats';
 import NumberFormat from 'react-number-format';
 
 const FetchFormInput = ({ label, html, format }) => {
   const { numerical, css } = getFormat(format, html.type);
 
-  if (numerical) {
-    console.log(html.name, numerical);
-  }
-
   return (
     <>
       <FetchLabel label={label} name={html.name} />
       {numerical ? (
         <NumberFormat
           {...numerical}
+          type='text'
           name={html.name}
           value={html.value}
           onBlur={html.onBlur}
           onFocus={html.onFocus}
-          onChange={(value) => html.onChange(value)}
-          onValueChange={({ formattedValue }) => html.onChange(formattedValue)}
+          onValueChange={({ floatValue, formattedValue }) => {
+            html.onChange(html.type === 'number' ? floatValue : formattedValue);
+          }}
           className={`fetch-input ${css}`}
         />
       ) : (
diff --git a/src/lib/exports/components/form/fields/FetchFormRadio.js b/src/lib/exports/components/form/fields/FetchFormRadio.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import FetchLabel from '../elements/FetchLabel';
+import FetchLabel from '../FetchLabel';
 
 const FetchFormRadio = ({ label, options, fieldName, html }) => {
   const [checked, setChecked] = useState('');
@@ -12,6 +12,8 @@ const FetchFormRadio = ({ label, options, fieldName, html }) => {
           <div className='input-group-field'>
             <input
               {...html}
+              value={option.value}
+              id={option.value}
               onClick={(e) => setChecked(e.target.value)}
               className={`fetch-radio ${
                 checked === option.value ? 'checked' : ''
diff --git a/src/lib/exports/components/form/fields/FetchFormSelect.js b/src/lib/exports/components/form/fields/FetchFormSelect.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import FetchLabel from '../elements/FetchLabel';
+import FetchLabel from '../FetchLabel';
 
 const FetchFormSelect = ({ label, options, html }) => {
   return (
diff --git a/src/lib/exports/components/form/fields/FetchFormTextarea.js b/src/lib/exports/components/form/fields/FetchFormTextarea.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import FetchLabel from '../elements/FetchLabel';
+import FetchLabel from '../FetchLabel';
 
 const FetchFormTextarea = ({ label, html }) => {
   return (
diff --git a/src/lib/exports/hooks/useFetchForms.js b/src/lib/exports/hooks/useFetchForms.js
@@ -50,7 +50,43 @@ const useFetchForms = (id, json) => {
 
     unsubscribe();
   }, [id, json, token]);
-  return [fetchForm, loading, error];
+
+  const doCloudSave = async (formId, values) => {
+    try {
+      const respBody = values
+        ? { submission: values }
+        : { record_conversion: true };
+
+      const resp = await window.fetch(
+        `https://api.fetchforms.io/v1/form/${formId}/submission`,
+        {
+          method: 'POST',
+          mode: 'cors',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`
+          },
+          body: JSON.stringify(respBody)
+        }
+      );
+
+      if (resp.status === 204) {
+        return { success: true };
+      }
+      const errorResp = await resp.json();
+      // console.log('form from hook', temp);
+      throw (
+        (errorResp.error && errorResp.error.message) ||
+        errorResp.error ||
+        'There has been a problem saving your submission.'
+      );
+    } catch (err) {
+      console.error(err);
+      return { success: false, message: (err && err.message) || err };
+    }
+  };
+
+  return [fetchForm, loading, error, doCloudSave];
 };
 
 export default useFetchForms;
diff --git a/src/lib/exports/scripts/Formats.js b/src/lib/exports/scripts/Formats.js
diff --git a/src/lib/exports/scripts/Validations.js b/src/lib/exports/scripts/Validations.js
