Add info banner

src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css

@@ -0,0 +1,57 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 22px;
+  padding: 14px 28px;
+  min-height: 94px;
+  width: 100%;
+  border-radius: 5px;
+  background-color: var(--grey-blue-2);
+  gap: 100px;
+}
+
+.buttonsWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.title > span {
+  margin-right: 8px;
+}
+
+.description {
+  font-size: var(--size-normal);
+  color: var(--dark);
+  letter-spacing: var(0.1px);
+}
+
+.removeButton {
+  composes: main from '~core/Button/Button.css';
+  height: 44px;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+  color: var(--pink);
+}
+
+.verifyButton {
+  composes: themePrimary main from '~core/Button/Button.css';
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  height: 44px;
+  width: 160px;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+}

src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css.d.ts

@@ -0,0 +1,6 @@
+export const wrapper: string;
+export const buttonsWrapper: string;
+export const title: string;
+export const description: string;
+export const removeButton: string;
+export const verifyButton: string;

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import Link from '~core/Link';
+import { Stages } from '~pages/IncorporationPage/constants';
+import { LANDING_PAGE_ROUTE } from '~routes/routeConstants';
+
+import styles from './InfoBanner.css';
+
+const MSG = defineMessages({
+  titleProcessing: {
+    id: 'dashboard.Incorporation.InfoBanner.titleProcessing',
+    defaultMessage: 'Check email and spam folder',
+  },
+  titleCompleted: {
+    id: 'dashboard.Incorporation.InfoBanner.titleCompleted',
+    defaultMessage: 'Application Complete',
+  },
+  descriptionProcessing: {
+    id: 'dashboard.Incorporation.InfoBanner.descriptionProcessing',
+    defaultMessage: `Your Incorporation has been approved, each protector needs to sign and return the Indemnity form that they should have received from Korporatio.`,
+  },
+  descriptionCompleted: {
+    id: 'dashboard.Incorporation.InfoBanner.descriptionCompleted',
+    defaultMessage: `Your DAO incorporation has been completed. Your DAO is now able to interact with traditional organisations and your contributors are now protected.`,
+  },
+  buttonText: {
+    id: 'dashboard.Incorporation.InfoBanner.buttonText',
+    defaultMessage: 'View details',
+  },
+});
+
+const displayName = 'dashboard.Incorporation.InfoBanner';
+
+export interface Props {
+  activeStageId: Stages;
+}
+
+const InfoBanner = ({ activeStageId }: Props) => {
+  return (
+    <div className={styles.wrapper}>
+      <div>
+        <div className={styles.title}>
+          <FormattedMessage
+            {...(activeStageId === Stages.Processing
+              ? MSG.titleProcessing
+              : MSG.titleCompleted)}
+          />
+        </div>
+        <div className={styles.description}>
+          <FormattedMessage
+            {...(activeStageId === Stages.Processing
+              ? MSG.descriptionProcessing
+              : MSG.descriptionCompleted)}
+          />
+        </div>
+      </div>
+      {activeStageId === Stages.Complete && (
+        <div className={styles.buttonsWrapper}>
+          <Link
+            to={LANDING_PAGE_ROUTE}
+            text={MSG.buttonText}
+            className={styles.verifyButton}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+InfoBanner.displayName = displayName;
+
+export default InfoBanner;

src/modules/dashboard/components/Incorporation/InfoBanner/index.ts

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

src/modules/pages/components/IncorporationPage/IncorporationPage.css

@@ -36,6 +36,7 @@
 }
 
 .mainContainer {
+  padding: 76px 100px 70px 25px;
   padding-bottom: 50px;
   height: 600px;
   min-height: 100%;

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

@@ -12,6 +12,7 @@ import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/
 import VerificationBanner from '~dashboard/Incorporation/VerificationBanner';
 import IncorporationPaymentDialog from '~dashboard/Dialogs/IncorporationPaymentDialog';
 import { useDialog } from '~core/Dialog';
+import InfoBanner from '~dashboard/Incorporation/InfoBanner';
 
 import {
   initialValues,
@@ -26,8 +27,6 @@ import styles from './IncorporationPage.css';
 
 const displayName = 'pages.IncorporationPage';
 
-export type InitialValuesType = typeof initialValues;
-
 const IncorporationPage = () => {
   const { colonyName } = useParams<{
     colonyName: string;
@@ -36,8 +35,8 @@ 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(false);
   const [shouldValidate, setShouldValidate] = useState(false);
   const [activeStageId, setActiveStageId] = useState(StagesEnum.Payment);
   const sidebarRef = useRef<HTMLElement>(null);
@@ -94,7 +93,7 @@ const IncorporationPage = () => {
 
   return isFormEditable ? (
     <Formik
-      initialValues={initialValues} // mock values are used here to fill in the form
+      initialValues={initialValues}
       onSubmit={handleSubmit}
       validationSchema={validationSchema}
       validateOnBlur={shouldValidate}
@@ -159,11 +158,22 @@ const IncorporationPage = () => {
       </aside>
       <div
         className={classNames(styles.mainContainer, {
-          [styles.smallerPadding]: notVerified,
+          [styles.smallerPadding]:
+            activeStageId === StagesEnum.Processing ||
+            activeStageId === StagesEnum.Complete ||
+            notVerified,
         })}
       >
         {/* user passed to VerifiactionBanner is a mock */}
-        {notVerified && <VerificationBanner user={userMock} />}
+        {notVerified &&
+          activeStageId !== StagesEnum.Processing &&
+          activeStageId !== StagesEnum.Complete && (
+            <VerificationBanner user={userMock} />
+          )}
+        {(activeStageId === StagesEnum.Processing ||
+          activeStageId === StagesEnum.Complete) && (
+          <InfoBanner activeStageId={activeStageId} />
+        )}
         <main className={styles.mainContent}>
           <div />
           {colonyData && (

src/modules/pages/components/IncorporationPage/constants.ts

@@ -53,7 +53,7 @@ const MSG = defineMessages({
   },
   complete: {
     id: 'dashboard.IncorporationPage.complete',
-    defaultMessage: 'Create Application',
+    defaultMessage: 'Complete',
   },
   completeDesc: {
     id: 'dashboard.IncorporationPage.completeDesc',