added DeleteDraftIncorporationDialog

Author: agnieszkajarosikloj

src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css

@@ -0,0 +1,29 @@
+.title {
+  padding-bottom: 16px;
+  width: 100%;
+  font-size: var(--size-medium-l);
+  font-weight: var(--weight-bold);
+  line-height: 24px;
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.heading {
+  display: block;
+  padding: 3px 0 20px;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  color: var(--temp-grey-blue-7);
+  letter-spacing: 0.1px;
+}
+
+.button {
+  composes: themeDanger from '~core/Button/Button.css';
+  height: 44px;
+  width: 160px;
+  border-color: var(--pink);
+  background-color: var(--pink);
+  font-size: var(--size-normal);
+  line-height: 18px;
+}

src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css.d.ts

@@ -0,0 +1,3 @@
+export const title: string;
+export const heading: string;
+export const button: string;

src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import Dialog, { DialogSection } from '~core/Dialog';
+import Heading from '~core/Heading';
+import Button from '~core/Button';
+
+import styles from './DeleteDraftIncorporationDialog.css';
+
+const MSG = defineMessages({
+  header: {
+    id: 'dashboard.DeleteDraftIncorporationDialog.header',
+    defaultMessage: 'Delete draft Incorporation',
+  },
+  description: {
+    id: 'dashboard.DeleteDraftIncorporationDialog.description',
+    defaultMessage: `Are you sure you want to delete this draft incorporation?`,
+  },
+  deleteText: {
+    id: 'dashboard.DeleteDraftIncorporationDialog.deleteText',
+    defaultMessage: 'Yes, delete',
+  },
+});
+
+const displayName = 'dashboard.DeleteDraftIncorporationDialog';
+
+interface Props {
+  cancel: () => void;
+  close: () => void;
+  onClick?: () => void;
+}
+
+const DeleteDraftIncorporationDialog = ({ cancel, onClick, close }: Props) => {
+  const handleSubmit = useCallback(() => {
+    onClick?.();
+    close();
+  }, [onClick, close]);
+
+  return (
+    <Dialog cancel={cancel}>
+      <DialogSection appearance={{ theme: 'heading' }}>
+        <div className={styles.heading}>
+          <Heading
+            appearance={{ size: 'medium', margin: 'none' }}
+            className={styles.title}
+          >
+            <FormattedMessage {...MSG.header} />
+          </Heading>
+          <FormattedMessage {...MSG.description} />
+        </div>
+      </DialogSection>
+      <DialogSection appearance={{ align: 'right', theme: 'footer' }}>
+        <Button
+          autoFocus
+          onClick={handleSubmit}
+          text={MSG.deleteText}
+          className={styles.button}
+        />
+      </DialogSection>
+    </Dialog>
+  );
+};
+
+DeleteDraftIncorporationDialog.displayName = displayName;
+
+export default DeleteDraftIncorporationDialog;

src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './DeleteDraftIncorporationDialog';

src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx

@@ -6,6 +6,8 @@ import { flattenObject } from '~dashboard/ExpenditurePage/Stages/utils';
 import { FIX_TRIGGER_EVENT_NAME } from '~pages/ExpenditurePage/constants';
 import { StageObject, ValuesType } from '~pages/IncorporationPage/types';
 import { Stages as StagesEnum } from '~pages/IncorporationPage/constants';
+import { useDialog } from '~core/Dialog';
+import DeleteDraftIncorporationDialog from '~dashboard/Dialogs/DeleteDraftIncorporationDialog';
 
 import Stages from './Stages';
 import styles from './Stages.css';
@@ -30,11 +32,20 @@ const MSG = defineMessages({
 export interface Props {
   stages: StageObject[];
   activeStageId: StagesEnum;
+  setFormValues: React.Dispatch<React.SetStateAction<ValuesType | undefined>>;
 }
 
-const FormStages = ({ stages, activeStageId }: Props) => {
-  const { values, handleSubmit, validateForm, setTouched, errors: formikErr } =
-    useFormikContext<ValuesType>() || {};
+const FormStages = ({ stages, activeStageId, setFormValues }: Props) => {
+  const {
+    values,
+    handleSubmit,
+    validateForm,
+    setTouched,
+    errors: formikErr,
+    resetForm,
+  } = useFormikContext<ValuesType>() || {};
+
+  const openDeleteDraftDialog = useDialog(DeleteDraftIncorporationDialog);
 
   const formikErrors = useMemo(() => {
     const errorsFlat = flattenObject(formikErr);
@@ -49,6 +60,15 @@ const FormStages = ({ stages, activeStageId }: Props) => {
     return !errorsLength && handleSubmit(values as any);
   }, [handleSubmit, setTouched, validateForm, values]);
 
+  const handleDeleteDraft = () =>
+    openDeleteDraftDialog({
+      onClick: () => {
+        resetForm();
+        // add logic to delete the draft from database
+        setFormValues(undefined);
+      },
+    });
+
   const handleFixButtonClick = useCallback(() => {
     setTouched(
       setNestedObjectValues<FormikTouched<ValuesType>>(formikErr, true),
@@ -96,6 +116,7 @@ const FormStages = ({ stages, activeStageId }: Props) => {
         stages={stages}
         activeStageId={activeStageId}
         buttonAction={handleSaveDraft}
+        handleDeleteDraft={handleDeleteDraft}
       />
     </div>
   );

src/modules/dashboard/components/Incorporation/Stages/Stages.tsx

@@ -33,14 +33,16 @@ export interface Props {
   stages: StageObject[];
   activeStageId: StagesEnum;
   buttonDisabled?: boolean;
-  buttonAction?: VoidFunction;
+  buttonAction?: (values?: ValuesType) => void;
+  handleDeleteDraft?: VoidFunction;
 }
 
 const Stages = ({
   stages,
   activeStageId,
   buttonDisabled,
   buttonAction,
+  handleDeleteDraft,
 }: Props) => {
   const [valueIsCopied, setValueIsCopied] = useState(false);
   const userFeedbackTimer = useRef<any>(null);
@@ -82,7 +84,14 @@ const Stages = ({
                 />
               </div>
             </Button>
-            <Button className={styles.iconButton}>
+            <Button
+              className={styles.iconButton}
+              onClick={
+                activeStageId === StagesEnum.Draft
+                  ? handleDeleteDraft
+                  : () => {}
+              }
+            >
               <div className={styles.iconWrapper}>
                 <Icon
                   name="trash"

src/modules/pages/components/IncorporationPage/IncorporationPage.tsx

@@ -7,16 +7,16 @@ import { getMainClasses } from '~utils/css';
 import { SpinnerLoader } from '~core/Preloaders';
 import Stages, { FormStages } from '~dashboard/Incorporation/Stages';
 import IncorporationForm from '~dashboard/Incorporation/IncorporationForm';
+import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/LockedIncorporationForm';
 
 import {
   initialValues,
   stages,
   validationSchema,
   Stages as StagesEnum,
 } from './constants';
-import styles from './IncorporationPage.css';
 import { ValuesType } from './types';
-import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/LockedIncorporationForm';
+import styles from './IncorporationPage.css';
 
 const displayName = 'pages.IncorporationPage';
 
@@ -102,7 +102,11 @@ const IncorporationPage = () => {
             <main className={styles.mainContent}>
               <div />
               {activeStageId === StagesEnum.Draft ? (
-                <FormStages activeStageId={activeStageId} stages={stages} />
+                <FormStages
+                  activeStageId={activeStageId}
+                  stages={stages}
+                  setFormValues={setFormValues}
+                />
               ) : (
                 <Stages
                   activeStageId={activeStageId}