Merge pull request #2916 from glific/enhancement/maytapi-provider

Added popup message when changing maytap credentials
glific · Jul 5, 2024 · feac4ea · feac4ea
2 parents a4ba002 + a21f0c3
commit feac4ea
Show file tree

Hide file tree

Showing 5 changed files with 436 additions and 83 deletions.
diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
@@ -1,6 +1,6 @@
 import { useState, Fragment, useEffect } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
-import { Formik, Form, Field } from 'formik';
+import { Field, useFormik, FormikProvider } from 'formik';
 // eslint-disable-next-line no-unused-vars
 import { DocumentNode, ApolloError, useQuery, useMutation } from '@apollo/client';
 import { Typography } from '@mui/material';
@@ -75,6 +75,11 @@ export interface FormLayoutProps {
   helpData?: HelpDataProps;
   noHeading?: boolean;
   partialPage?: boolean;
+  confirmationState?: {
+    show: boolean;
+    title: string;
+    message: string;
+  };
 }
 
 export const FormLayout = ({
@@ -126,6 +131,7 @@ export const FormLayout = ({
   languageAttributes = {},
   noHeading = false,
   partialPage = false,
+  confirmationState,
 }: FormLayoutProps) => {
   const [showDialog, setShowDialog] = useState(false);
   const [formSubmitted, setFormSubmitted] = useState(false);
@@ -137,8 +143,27 @@ export const FormLayout = ({
   const [saveClick, onSaveClick] = useState(false);
   const [isLoadedData, setIsLoadedData] = useState(false);
   const [customError, setCustomError] = useState<any>(null);
+  const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
   const params = useParams();
 
+  const formik = useFormik({
+    initialValues: {
+      languageId,
+      ...states,
+    },
+    validationSchema: validationSchema,
+    enableReinitialize: true,
+    onSubmit: (values, { setErrors }) => {
+      setCustomError({ setErrors });
+      if (confirmationState?.show) {
+        setShowConfirmationDialog(true);
+      } else {
+        onSaveButtonClick(formik.errors);
+        saveHandler(values);
+      }
+    },
+  });
+
   const { t } = useTranslation();
 
   const { data: roleData } = useQuery(GET_ROLE_NAMES, { skip: !roleAccessSupport });
@@ -212,6 +237,7 @@ export const FormLayout = ({
 
   const [updateItem] = useMutation(updateItemQuery, {
     onCompleted: (data) => {
+      setShowConfirmationDialog(false);
       let itemUpdatedObject: any = Object.keys(data)[0];
       itemUpdatedObject = data[itemUpdatedObject];
       const updatedItem = itemUpdatedObject[listItem];
@@ -254,6 +280,7 @@ export const FormLayout = ({
       onSaveClick(false);
     },
     onError: (e: ApolloError) => {
+      setShowConfirmationDialog(false);
       onSaveClick(false);
       setErrorMessage(e);
       return null;
@@ -270,6 +297,7 @@ export const FormLayout = ({
 
   const [createItem] = useMutation(createItemQuery, {
     onCompleted: (data) => {
+      setShowConfirmationDialog(false);
       let itemCreatedObject: any = `create${camelCaseItem}`;
       itemCreatedObject = data[itemCreatedObject];
       const itemCreated = itemCreatedObject[listItem];
@@ -316,6 +344,7 @@ export const FormLayout = ({
       return [];
     },
     onError: (e: ApolloError) => {
+      setShowConfirmationDialog(false);
       onSaveClick(false);
       setErrorMessage(e);
       return null;
@@ -508,82 +537,66 @@ export const FormLayout = ({
   };
 
   const form = (
-    <Formik
-      enableReinitialize
-      validateOnMount
-      initialValues={{
-        languageId,
-        ...states,
-      }}
-      validationSchema={validationSchema}
-      onSubmit={(itemData, { setErrors }) => {
-        // when you want to show custom error on form field and error message is not coming from api
-        setCustomError({ setErrors });
-        saveHandler(itemData);
-      }}
-    >
-      {({ errors, submitForm }) => (
-        <Form className={[styles.Form, customStyles].join(' ')} data-testid="formLayout">
-          {formFieldItems.map((field, index) => {
-            const key = index;
-
-            if (field.skip) {
-              return null;
-            }
-
-            return (
-              <Fragment key={key}>
-                {field.label && (
-                  <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
-                    {field.label}
-                  </Typography>
-                )}
-                <Field key={key} {...field} onSubmit={submitForm} />
-              </Fragment>
-            );
-          })}
-          <div className={styles.Buttons}>
+    <form onSubmit={formik.handleSubmit}>
+      <div className={[styles.Form, customStyles].join(' ')} data-testid="formLayout">
+        {formFieldItems.map((field, index) => {
+          const key = index;
+
+          if (field.skip) {
+            return null;
+          }
+
+          return (
+            <Fragment key={key}>
+              {field.label && (
+                <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
+                  {field.label}
+                </Typography>
+              )}
+              <Field key={key} {...field} onSubmit={formik.submitForm} />
+            </Fragment>
+          );
+        })}
+        <div className={styles.Buttons}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              formik.submitForm();
+            }}
+            className={styles.Button}
+            data-testid="submitActionButton"
+            loading={saveClick}
+            disabled={buttonState.status}
+          >
+            {buttonState.status ? buttonState.text : button}
+          </Button>
+          {additionalAction ? (
             <Button
-              variant="contained"
+              variant="outlined"
               color="primary"
               onClick={() => {
-                onSaveButtonClick(errors);
-                submitForm();
+                formik.submitForm();
+                setAction(true);
               }}
-              className={styles.Button}
-              data-testid="submitActionButton"
-              loading={saveClick}
-              disabled={buttonState.status}
+              data-testid="additionalActionButton"
             >
-              {buttonState.status ? buttonState.text : button}
+              {additionalAction.label}
             </Button>
-            {additionalAction ? (
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={() => {
-                  submitForm();
-                  setAction(true);
-                }}
-                data-testid="additionalActionButton"
-              >
-                {additionalAction.label}
-              </Button>
-            ) : null}
-            <Button
-              variant="outlined"
-              color="secondary"
-              onClick={cancelHandler}
-              data-testid="cancelActionButton"
-            >
-              {t('Cancel')}
-            </Button>
-
-            {deleteButton}
-          </div>
-        </Form>
-      )}
-    </Formik>
+          ) : null}
+          <Button
+            variant="outlined"
+            color="secondary"
+            onClick={cancelHandler}
+            data-testid="cancelActionButton"
+          >
+            {t('Cancel')}
+          </Button>
+
+          {deleteButton}
+        </div>
+      </div>
+    </form>
   );
 
   const handleDeleteItem = () => {
@@ -622,14 +635,36 @@ export const FormLayout = ({
 
   let heading = <Heading backLink={backLinkButton} formTitle={formTitle} />;
 
+  let confirmationDialog;
+  if (showConfirmationDialog) {
+    confirmationDialog = (
+      <DialogBox
+        title={confirmationState?.title || 'Are you sure you want to proceed?'}
+        handleOk={() => {
+          onSaveButtonClick(formik.errors);
+          saveHandler(formik.values);
+        }}
+        handleCancel={() => setShowConfirmationDialog(false)}
+        colorOk="warning"
+        alignButtons="center"
+        contentAlign="center"
+        data-testid="confirmation-dialog"
+      >
+        {confirmationState?.message}
+      </DialogBox>
+    );
+  }
   return (
-    <div
-      className={partialPage ? styles.ItemAddDialog : styles.ItemAdd}
-      data-testid="add-container"
-    >
-      {dialogBox}
-      {!noHeading && heading}
-      {form}
-    </div>
+    <FormikProvider value={formik}>
+      <div
+        className={partialPage ? styles.ItemAddDialog : styles.ItemAdd}
+        data-testid="add-container"
+      >
+        {dialogBox}
+        {confirmationDialog}
+        {!noHeading && heading}
+        {form}
+      </div>
+    </FormikProvider>
   );
 };