Add delete draft

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/pages/components/IncorporationPage/IncorporationPage.css

@@ -36,7 +36,7 @@
 }
 
 .mainContainer {
-  padding-bottom: 50px;
+  padding: 52px 100px 70px 25px;
   height: 600px;
   min-height: 100%;
   min-height: calc(100vh - navBarHeight);

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

@@ -18,7 +18,6 @@ import {
   stages,
   validationSchema,
   Stages as StagesEnum,
-  formValuesMock,
   userMock,
 } from './constants';
 import { ValuesType } from './types';
@@ -36,10 +35,10 @@ const IncorporationPage = () => {
   const { data: colonyData, loading } = useColonyFromNameQuery({
     variables: { name: colonyName, address: '' },
   });
-  const [isFormEditable, setFormEditable] = useState(false);
-  const [formValues, setFormValues] = useState<ValuesType>(formValuesMock);
+  const [isFormEditable, setFormEditable] = useState(true);
+  const [formValues, setFormValues] = useState<ValuesType>();
   const [shouldValidate, setShouldValidate] = useState(false);
-  const [activeStageId, setActiveStageId] = useState(StagesEnum.Payment);
+  const [activeStageId, setActiveStageId] = useState(StagesEnum.Draft);
   const sidebarRef = useRef<HTMLElement>(null);
 
   const notVerified = true; // temporary valule