solve NaN target size and refactor form overlay

src/pages/campaigns/components/campaignForm/FormOverlay.tsx

@@ -0,0 +1,33 @@
+import { styled } from "styled-components";
+import { useFormikContext } from "formik";
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
+
+const FormOverlay = () => {
+  const { isSubmitting, isValid } = useFormikContext();
+
+  if (!isSubmitting || !isValid) return null;
+
+  return (
+    <Overlay>
+      Saving campaign in progress
+      <br />
+      It may take a few seconds...
+      <br />
+    </Overlay>
+  );
+};
+
+export default FormOverlay;

src/pages/campaigns/components/campaignForm/FormProvider.tsx

@@ -48,7 +48,7 @@ export interface NewCampaignValues {
   outOfScope?: string;
   deviceRequirements?: string;
   targetNotes?: string;
-  targetSize?: number;
+  targetSize?: string;
   browsersList?: string[];
   productType?: string;
 }
@@ -114,7 +114,7 @@ const FormProvider = ({
     outOfScope: dossier?.outOfScope || "",
     deviceRequirements: dossier?.deviceRequirements || "",
     targetNotes: dossier?.target?.notes || "",
-    targetSize: dossier?.target?.size || 0,
+    targetSize: dossier?.target?.size?.toString(),
     browsersList:
       dossier?.browsers?.map((browser) => browser.id.toString()) || [],
     productType: dossier?.productType?.id.toString() || "",
@@ -155,7 +155,8 @@ const FormProvider = ({
       initialValues={initialValues}
       enableReinitialize
       validationSchema={validationSchema}
-      onSubmit={async (values) => {
+      onSubmit={async (values, action) => {
+        action.setSubmitting(true);
         let roles = [];
         if (values.pm) {
           roles.push({ role: 1, user: parseInt(values.pm) });
@@ -195,7 +196,9 @@ const FormProvider = ({
             deviceRequirements: values.deviceRequirements,
             target: {
               notes: values.targetNotes,
-              size: values.targetSize,
+              size: !!values.targetSize
+                ? parseInt(values.targetSize)
+                : undefined,
             },
             browsers: values.browsersList?.map((browser) =>
               parseInt(browser, 10)
@@ -211,8 +214,6 @@ const FormProvider = ({
               dossierCreationData: body,
             }).unwrap();
           } else {
-            setIsCreating(true);
-
             const resp = await postDossiers({
               body: {
                 ...body,
@@ -237,7 +238,7 @@ const FormProvider = ({
             )
           );
         }
-        setIsCreating(false);
+        action.setSubmitting(false);
       }}
     >
       {children}

src/pages/campaigns/components/campaignForm/fields/InputField.tsx

@@ -17,10 +17,7 @@ const InputField = ({ name, label, type = "text", ...props }: InputProps) => {
     <FormikField name={name}>
       {({ field, form, meta }: FieldProps) => {
         const handleChange = (val: string) => {
-          form.setFieldValue(
-            field.name,
-            type === "number" ? parseInt(val || "0") : val
-          );
+          form.setFieldValue(field.name, val);
         };
         const handleBlur = () => {
           form.setFieldTouched(field.name, true);

src/pages/campaigns/components/campaignForm/index.tsx

@@ -37,6 +37,7 @@ import CsmSelect from "./fields/roles/CsmSelect";
 import PmSelect from "./fields/roles/PMSelect";
 import ResearcherSelect from "./fields/roles/ResearcherSelect";
 import TlSelect from "./fields/roles/TLSelect";
+import FormOverlay from "./FormOverlay";
 
 interface FormProps {
   dossier?: GetDossiersByCampaignApiResponse;
@@ -68,33 +69,11 @@ const CampaignForm = (props: FormProps) => (
   </CampaignFormContext>
 );
 
-const CreatingOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  background-color: rgba(255, 255, 255, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-`;
-
 const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
-  const { isCreating } = useCampaignFormContext();
   return (
     <FormProvider dossier={dossier} isEdit={isEdit} duplicate={duplicate}>
       <FullGrid>
-        {isCreating && (
-          <CreatingOverlay>
-            Creating campaign in progress
-            <br />
-            It may take a few seconds...
-            <br />
-          </CreatingOverlay>
-        )}
+        <FormOverlay />
         <BSCol size="col-lg-9">
           <Form id="campaign-form">
             <Section title="Campaign General Informations" id="general">
@@ -113,7 +92,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
                 <TestTypeSelect />
                 <TextareaField
                   name="description"
-                  label="Description"
+                  label="Campaign Goal and description"
                   placeholder="The product to be tested is [...] and we need to verify that [...]"
                 />
               </FieldWrapper>
@@ -147,23 +126,16 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
               <FieldWrapper>
                 <ProductType />
                 <InputField
-                  type="url"
+                  type="text"
                   name="productLink"
                   label="Product Link"
                 />
               </FieldWrapper>
-              <FieldWrapper>
-                <TextareaField
-                  name="goal"
-                  label="Test goal"
-                  placeholder="The test goal is to verify that..."
-                />
-                <TextareaField
-                  name="outOfScope"
-                  label="Out of scope"
-                  placeholder="The test will not cover..."
-                />
-              </FieldWrapper>
+              <TextareaField
+                name="outOfScope"
+                label="Out of scope"
+                placeholder="The test will not cover..."
+              />
             </Section>
             <Section title="Where do we need to test?" id="where">
               <DeviceMultiselect />