From 742e605e4f3b040c0fbd02bcd3f1fcea22df9479 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Fri, 30 Dec 2022 16:15:35 +0100
Subject: [PATCH 01/13] added Stages section

---
 .../Stages/StageItem/StageItem.css            |  51 ++++++
 .../Stages/StageItem/StageItem.css.d.ts       |   8 +
 .../Stages/StageItem/StageItem.tsx            |  42 +++++
 .../Stages/StageItem/index.ts                 |   1 +
 .../DAOIncorporation/Stages/Stages.css        | 104 ++++++++++++
 .../DAOIncorporation/Stages/Stages.css.d.ts   |  10 ++
 .../DAOIncorporation/Stages/Stages.tsx        | 152 ++++++++++++++++++
 .../Stages/StagesButton/StagesButton.css      |  14 ++
 .../Stages/StagesButton/StagesButton.css.d.ts |   3 +
 .../Stages/StagesButton/StagesButton.tsx      |  85 ++++++++++
 .../Stages/StagesButton/index.ts              |   1 +
 .../DAOIncorporation/Stages/index.ts          |   1 +
 .../components/IncorporationPage/constants.ts |   1 +
 13 files changed, 473 insertions(+)
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/index.ts

diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css
new file mode 100644
index 0000000000..3bbfbd6273
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css
@@ -0,0 +1,51 @@
+.container {
+  display: flex;
+  align-items: baseline;
+  padding: 9px 0;
+  position: relative;
+}
+
+.dot {
+  margin-right: 14px;
+  height: 7px;
+  width: 7px;
+  min-width: 7px;
+  border: 1px solid var(--temp-grey-blue-7);
+  border-radius: 50%;
+}
+
+.verticalLine {
+  height: 60%;
+  position: absolute;
+  bottom: -7px;
+  left: 3px;
+  border-left: 1px solid var(--temp-grey-6);
+}
+
+.activeDot {
+  border: 1px solid var(--primary);
+  background-color: var(--primary);
+}
+
+.label {
+  margin-bottom: 8px;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.activeLabel {
+  color: var(--temp-grey-blue-7);
+}
+
+.description {
+  font-size: var(--size-tiny);
+  font-weight: var(--weight-bold);
+  color: var(--temp-grey-blue-7);
+  letter-spacing: var(--spacing-medium);
+}
+
+.completedLabel {
+  color: var(--temp-grey-blue-7);
+}
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts
new file mode 100644
index 0000000000..76c5a5b024
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts
@@ -0,0 +1,8 @@
+export const container: string;
+export const dot: string;
+export const verticalLine: string;
+export const activeDot: string;
+export const label: string;
+export const activeLabel: string;
+export const description: string;
+export const completedLabel: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx
new file mode 100644
index 0000000000..cf9ad5e928
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { FormattedMessage, MessageDescriptor } from 'react-intl';
+import classNames from 'classnames';
+
+import styles from './StageItem.css';
+
+interface Props {
+  title?: MessageDescriptor;
+  description?: MessageDescriptor;
+  isActive: boolean;
+  isLast?: boolean;
+}
+const displayName = 'dashboard.ExpenditurePage.Stages.StageItem';
+
+const StageItem = ({ title, description, isActive, isLast }: Props) => {
+  return (
+    <div className={styles.container}>
+      <div
+        className={classNames(styles.dot, {
+          [styles.activeDot]: isActive,
+        })}
+      />
+      {!isLast && <div className={styles.verticalLine} />}
+      <div>
+        <div
+          className={classNames(styles.label, {
+            [styles.completedLabel]: isActive,
+          })}
+        >
+          <FormattedMessage {...title} />
+        </div>
+        <div className={styles.description}>
+          <FormattedMessage {...description} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+StageItem.displayName = displayName;
+
+export default StageItem;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts
new file mode 100644
index 0000000000..234df6a6cb
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts
@@ -0,0 +1 @@
+export { default } from './StageItem';
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css
new file mode 100644
index 0000000000..cb87d68bb6
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css
@@ -0,0 +1,104 @@
+@value iconColor: var(--temp-grey-blue-7);
+
+.mainContainer {
+  padding-top: 20px;
+  max-width: 340px;
+}
+
+.stagesText {
+  display: flex;
+  align-items: center;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  line-height: 18px;
+  color: var(--temp-grey-blue-7);
+}
+
+.statusContainer {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--temp-grey-6);
+}
+
+.statusContainer:first-child {
+  padding-top: 0;
+}
+
+.icon svg {
+  height: 18px;
+  width: 18px;
+  fill: var(--temp-grey-blue-7);
+}
+
+.buttonsContainer {
+  display: flex;
+  align-items: center;
+}
+
+.buttonsContainer button:not(:last-of-type) {
+  margin-right: 30px;
+}
+
+.buttonsContainer button {
+  &:disabled {
+    height: 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--colony-light-blue);
+    font-weight: var(--weight-bold);
+    color: var(--temp-grey-blue-7);
+  }
+
+  &:disabled:hover {
+    background-color: var(--colony-light-blue);
+    color: var(--temp-grey-blue-7);
+    cursor: default;
+  }
+}
+
+.iconButton {
+  margin-left: 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.iconButton i {
+  display: flex;
+}
+
+.iconButton:hover {
+  cursor: pointer;
+}
+
+.iconButtonDisabled {
+  opacity: 0.5;
+}
+
+.iconWrapper {
+  position: relative;
+}
+
+.iconWrapper:hover {
+  &::after {
+    height: 30px;
+    width: 30px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    background-color: var(--action-secondary);
+    transform: translate(-6px, -6px);
+    content: '';
+    opacity: 0.1;
+  }
+}
+
+.iconButtonDisabled:hover {
+  cursor: not-allowed;
+}
+
+.buttonTooltip {
+  max-width: 192px;
+}
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts
new file mode 100644
index 0000000000..1c668b5f59
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts
@@ -0,0 +1,10 @@
+export const iconColor: string;
+export const mainContainer: string;
+export const stagesText: string;
+export const statusContainer: string;
+export const icon: string;
+export const buttonsContainer: string;
+export const iconButton: string;
+export const iconButtonDisabled: string;
+export const iconWrapper: string;
+export const buttonTooltip: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx
new file mode 100644
index 0000000000..d07cff6cf7
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import copyToClipboard from 'copy-to-clipboard';
+import classNames from 'classnames';
+
+import Button from '~core/Button';
+import Icon from '~core/Icon';
+import { Tooltip } from '~core/Popover';
+
+import StageItem from './StageItem';
+import StagesButton from './StagesButton';
+import styles from './Stages.css';
+import { StageObject } from '~pages/IncorporationPage/types';
+import { Stages as StagesEnum } from '~pages/IncorporationPage/constants';
+
+const MSG = defineMessages({
+  stages: {
+    id: 'dashboard.DAOIncorporation.Stages.stages',
+    defaultMessage: 'Stages',
+  },
+  deleteDraft: {
+    id: 'dashboard.DAOIncorporation.Stages.deleteDraft',
+    defaultMessage: 'Delete draft',
+  },
+  tooltipDeleteText: {
+    id: 'dashboard.DAOIncorporation.Stages.tooltipDeleteText',
+    defaultMessage: 'Delete',
+  },
+  tooltipShareText: {
+    id: 'dashboard.DAOIncorporation.Stages.tooltipShareText',
+    defaultMessage: 'Share URL',
+  },
+});
+
+const displayName = 'dashboard.DAOIncorporation.Stages';
+
+export interface Props {
+  stages: StageObject[];
+  activeStageId: StagesEnum;
+  buttonDisabled?: boolean;
+  buttonAction?: VoidFunction;
+}
+
+const Stages = ({
+  stages,
+  activeStageId,
+  buttonDisabled,
+  buttonAction,
+}: Props) => {
+  const [valueIsCopied, setValueIsCopied] = useState(false);
+  const userFeedbackTimer = useRef<any>(null);
+
+  const handleClipboardCopy = () => {
+    copyToClipboard(window.location.href);
+    setValueIsCopied(true);
+    userFeedbackTimer.current = setTimeout(() => setValueIsCopied(false), 2000);
+  };
+
+  useEffect(() => () => clearTimeout(userFeedbackTimer.current), [
+    userFeedbackTimer,
+  ]);
+
+  const activeIndex = stages.findIndex((stage) => stage.id === activeStageId);
+  const activeStage = stages.find((stage) => stage.id === activeStageId);
+
+  return (
+    <div className={styles.mainContainer}>
+      <div className={classNames(styles.statusContainer)}>
+        <div className={styles.stagesText}>
+          <FormattedMessage {...MSG.stages} />
+        </div>
+        <div className={styles.buttonsContainer}>
+          <>
+            <Button
+              className={classNames(styles.iconButton, {
+                [styles.iconButtonDisabled]: valueIsCopied,
+              })}
+              onClick={handleClipboardCopy}
+              disabled={valueIsCopied}
+            >
+              {valueIsCopied ? (
+                <Icon name="share" className={styles.icon} />
+              ) : (
+                <Tooltip
+                  placement="top-start"
+                  content={<FormattedMessage {...MSG.tooltipShareText} />}
+                  popperOptions={{
+                    modifiers: [
+                      {
+                        name: 'offset',
+                        options: {
+                          offset: [0, 12],
+                        },
+                      },
+                    ],
+                  }}
+                >
+                  <div className={styles.iconWrapper}>
+                    <Icon name="share" className={styles.icon} />
+                  </div>
+                </Tooltip>
+              )}
+            </Button>
+            <Button className={styles.iconButton}>
+              <Tooltip
+                placement="top-start"
+                content={<FormattedMessage {...MSG.tooltipDeleteText} />}
+                popperOptions={{
+                  modifiers: [
+                    {
+                      name: 'offset',
+                      options: {
+                        offset: [0, 12],
+                      },
+                    },
+                  ],
+                }}
+              >
+                <div className={styles.iconWrapper}>
+                  <Icon
+                    name="trash"
+                    title={MSG.deleteDraft}
+                    appearance={{ size: 'normal' }}
+                    style={{ fill: styles.iconColor }}
+                  />
+                </div>
+              </Tooltip>
+            </Button>
+            <StagesButton
+              activeStage={activeStage}
+              buttonDisabled={buttonDisabled}
+              buttonAction={buttonAction}
+            />
+          </>
+        </div>
+      </div>
+      {stages.map(({ id, title, description }, index) => (
+        <StageItem
+          key={id}
+          title={title}
+          description={description}
+          isActive={activeStage ? index <= activeIndex : false}
+          isLast={stages.length === index + 1}
+        />
+      ))}
+    </div>
+  );
+};
+
+Stages.displayName = displayName;
+
+export default Stages;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css
new file mode 100644
index 0000000000..5f73f896d7
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css
@@ -0,0 +1,14 @@
+.button {
+  composes: themePrimary main from '~core/Button/Button.css';
+  padding: 0;
+  height: 29px;
+  width: 100px;
+}
+
+.buttonTooltip {
+  max-width: 192px;
+}
+
+.buttonWithTooltip {
+  margin-left: 20px;
+}
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts
new file mode 100644
index 0000000000..5941522346
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts
@@ -0,0 +1,3 @@
+export const button: string;
+export const buttonTooltip: string;
+export const buttonWithTooltip: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx
new file mode 100644
index 0000000000..0cc9e5c55e
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import Button from '~core/Button';
+import { Tooltip } from '~core/Popover';
+import { Stages } from '~pages/IncorporationPage/constants';
+import { StageObject } from '~pages/IncorporationPage/types';
+
+import styles from './StagesButton.css';
+
+const displayName = 'dashboard.ExpenditurePage.Stages.StagesButton';
+
+interface Props {
+  activeStage?: StageObject;
+  buttonDisabled?: boolean;
+  buttonAction?: VoidFunction;
+}
+
+const StagesButton = ({ activeStage, buttonDisabled, buttonAction }: Props) => {
+  const { formatMessage } = useIntl();
+  const buttonText =
+    typeof activeStage?.buttonText === 'string'
+      ? activeStage.buttonText
+      : activeStage?.buttonText && formatMessage(activeStage.buttonText);
+
+  if (!activeStage) return null;
+
+  if (
+    activeStage.id === Stages.Processing ||
+    activeStage.id === Stages.Complete
+  ) {
+    return null;
+  }
+
+  if (activeStage?.buttonTooltip) {
+    return (
+      <span className={styles.buttonWithTooltip}>
+        <Tooltip
+          placement="top"
+          content={
+            <div className={styles.buttonTooltip}>
+              {typeof activeStage.buttonTooltip === 'string'
+                ? activeStage.buttonTooltip
+                : formatMessage(activeStage.buttonTooltip)}
+            </div>
+          }
+          popperOptions={{
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [0, 8],
+                },
+              },
+            ],
+          }}
+        >
+          <Button
+            disabled={buttonDisabled}
+            className={styles.button}
+            type="submit"
+            onClick={buttonAction}
+          >
+            {buttonText}
+          </Button>
+        </Tooltip>
+      </span>
+    );
+  }
+
+  return (
+    <Button
+      disabled={buttonDisabled}
+      type="submit"
+      className={styles.button}
+      onClick={buttonAction}
+    >
+      {buttonText}
+    </Button>
+  );
+};
+
+StagesButton.displayName = displayName;
+
+export default StagesButton;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts
new file mode 100644
index 0000000000..4085c13edd
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts
@@ -0,0 +1 @@
+export { default } from './StagesButton';
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts
new file mode 100644
index 0000000000..11bb6dccd3
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts
@@ -0,0 +1 @@
+export { default } from './Stages';
diff --git a/src/modules/pages/components/IncorporationPage/constants.ts b/src/modules/pages/components/IncorporationPage/constants.ts
index 311d840016..ddaae0e2e3 100644
--- a/src/modules/pages/components/IncorporationPage/constants.ts
+++ b/src/modules/pages/components/IncorporationPage/constants.ts
@@ -144,6 +144,7 @@ export const stages: StageObject[] = [
     title: MSG.create,
     description: MSG.createDesc,
     buttonText: MSG.createButtonText,
+    buttonTooltip: MSG.createTooltip,
   },
   {
     id: Stages.Created,

From a32ba04d4823fb103a245435d7bdafa2f8d0f707 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Mon, 2 Jan 2023 14:15:19 +0100
Subject: [PATCH 02/13] added validation

---
 .../Stages/StageItem/StageItem.css            |  51 ------
 .../Stages/StageItem/StageItem.css.d.ts       |   8 -
 .../Stages/StageItem/StageItem.tsx            |  42 -----
 .../Stages/StageItem/index.ts                 |   1 -
 .../DAOIncorporation/Stages/Stages.css        | 104 ------------
 .../DAOIncorporation/Stages/Stages.css.d.ts   |  10 --
 .../DAOIncorporation/Stages/Stages.tsx        | 152 ------------------
 .../Stages/StagesButton/StagesButton.css      |  14 --
 .../Stages/StagesButton/StagesButton.css.d.ts |   3 -
 .../Stages/StagesButton/StagesButton.tsx      |  85 ----------
 .../Stages/StagesButton/index.ts              |   1 -
 .../DAOIncorporation/Stages/index.ts          |   1 -
 .../Incorporation/Stages/FormStages.tsx       | 108 +++++++++++++
 .../components/IncorporationPage/constants.ts |   1 -
 14 files changed, 108 insertions(+), 473 deletions(-)
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/index.ts
 create mode 100644 src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx

diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css
deleted file mode 100644
index 3bbfbd6273..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.container {
-  display: flex;
-  align-items: baseline;
-  padding: 9px 0;
-  position: relative;
-}
-
-.dot {
-  margin-right: 14px;
-  height: 7px;
-  width: 7px;
-  min-width: 7px;
-  border: 1px solid var(--temp-grey-blue-7);
-  border-radius: 50%;
-}
-
-.verticalLine {
-  height: 60%;
-  position: absolute;
-  bottom: -7px;
-  left: 3px;
-  border-left: 1px solid var(--temp-grey-6);
-}
-
-.activeDot {
-  border: 1px solid var(--primary);
-  background-color: var(--primary);
-}
-
-.label {
-  margin-bottom: 8px;
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: var(--dark);
-  letter-spacing: var(--spacing-medium);
-}
-
-.activeLabel {
-  color: var(--temp-grey-blue-7);
-}
-
-.description {
-  font-size: var(--size-tiny);
-  font-weight: var(--weight-bold);
-  color: var(--temp-grey-blue-7);
-  letter-spacing: var(--spacing-medium);
-}
-
-.completedLabel {
-  color: var(--temp-grey-blue-7);
-}
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts
deleted file mode 100644
index 76c5a5b024..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const container: string;
-export const dot: string;
-export const verticalLine: string;
-export const activeDot: string;
-export const label: string;
-export const activeLabel: string;
-export const description: string;
-export const completedLabel: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx
deleted file mode 100644
index cf9ad5e928..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { FormattedMessage, MessageDescriptor } from 'react-intl';
-import classNames from 'classnames';
-
-import styles from './StageItem.css';
-
-interface Props {
-  title?: MessageDescriptor;
-  description?: MessageDescriptor;
-  isActive: boolean;
-  isLast?: boolean;
-}
-const displayName = 'dashboard.ExpenditurePage.Stages.StageItem';
-
-const StageItem = ({ title, description, isActive, isLast }: Props) => {
-  return (
-    <div className={styles.container}>
-      <div
-        className={classNames(styles.dot, {
-          [styles.activeDot]: isActive,
-        })}
-      />
-      {!isLast && <div className={styles.verticalLine} />}
-      <div>
-        <div
-          className={classNames(styles.label, {
-            [styles.completedLabel]: isActive,
-          })}
-        >
-          <FormattedMessage {...title} />
-        </div>
-        <div className={styles.description}>
-          <FormattedMessage {...description} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-StageItem.displayName = displayName;
-
-export default StageItem;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts
deleted file mode 100644
index 234df6a6cb..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './StageItem';
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css
deleted file mode 100644
index cb87d68bb6..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css
+++ /dev/null
@@ -1,104 +0,0 @@
-@value iconColor: var(--temp-grey-blue-7);
-
-.mainContainer {
-  padding-top: 20px;
-  max-width: 340px;
-}
-
-.stagesText {
-  display: flex;
-  align-items: center;
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  line-height: 18px;
-  color: var(--temp-grey-blue-7);
-}
-
-.statusContainer {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--temp-grey-6);
-}
-
-.statusContainer:first-child {
-  padding-top: 0;
-}
-
-.icon svg {
-  height: 18px;
-  width: 18px;
-  fill: var(--temp-grey-blue-7);
-}
-
-.buttonsContainer {
-  display: flex;
-  align-items: center;
-}
-
-.buttonsContainer button:not(:last-of-type) {
-  margin-right: 30px;
-}
-
-.buttonsContainer button {
-  &:disabled {
-    height: 20px;
-    border: none;
-    border-radius: 5px;
-    background-color: var(--colony-light-blue);
-    font-weight: var(--weight-bold);
-    color: var(--temp-grey-blue-7);
-  }
-
-  &:disabled:hover {
-    background-color: var(--colony-light-blue);
-    color: var(--temp-grey-blue-7);
-    cursor: default;
-  }
-}
-
-.iconButton {
-  margin-left: 0;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-}
-
-.iconButton i {
-  display: flex;
-}
-
-.iconButton:hover {
-  cursor: pointer;
-}
-
-.iconButtonDisabled {
-  opacity: 0.5;
-}
-
-.iconWrapper {
-  position: relative;
-}
-
-.iconWrapper:hover {
-  &::after {
-    height: 30px;
-    width: 30px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 50%;
-    background-color: var(--action-secondary);
-    transform: translate(-6px, -6px);
-    content: '';
-    opacity: 0.1;
-  }
-}
-
-.iconButtonDisabled:hover {
-  cursor: not-allowed;
-}
-
-.buttonTooltip {
-  max-width: 192px;
-}
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts
deleted file mode 100644
index 1c668b5f59..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const iconColor: string;
-export const mainContainer: string;
-export const stagesText: string;
-export const statusContainer: string;
-export const icon: string;
-export const buttonsContainer: string;
-export const iconButton: string;
-export const iconButtonDisabled: string;
-export const iconWrapper: string;
-export const buttonTooltip: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx
deleted file mode 100644
index d07cff6cf7..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import copyToClipboard from 'copy-to-clipboard';
-import classNames from 'classnames';
-
-import Button from '~core/Button';
-import Icon from '~core/Icon';
-import { Tooltip } from '~core/Popover';
-
-import StageItem from './StageItem';
-import StagesButton from './StagesButton';
-import styles from './Stages.css';
-import { StageObject } from '~pages/IncorporationPage/types';
-import { Stages as StagesEnum } from '~pages/IncorporationPage/constants';
-
-const MSG = defineMessages({
-  stages: {
-    id: 'dashboard.DAOIncorporation.Stages.stages',
-    defaultMessage: 'Stages',
-  },
-  deleteDraft: {
-    id: 'dashboard.DAOIncorporation.Stages.deleteDraft',
-    defaultMessage: 'Delete draft',
-  },
-  tooltipDeleteText: {
-    id: 'dashboard.DAOIncorporation.Stages.tooltipDeleteText',
-    defaultMessage: 'Delete',
-  },
-  tooltipShareText: {
-    id: 'dashboard.DAOIncorporation.Stages.tooltipShareText',
-    defaultMessage: 'Share URL',
-  },
-});
-
-const displayName = 'dashboard.DAOIncorporation.Stages';
-
-export interface Props {
-  stages: StageObject[];
-  activeStageId: StagesEnum;
-  buttonDisabled?: boolean;
-  buttonAction?: VoidFunction;
-}
-
-const Stages = ({
-  stages,
-  activeStageId,
-  buttonDisabled,
-  buttonAction,
-}: Props) => {
-  const [valueIsCopied, setValueIsCopied] = useState(false);
-  const userFeedbackTimer = useRef<any>(null);
-
-  const handleClipboardCopy = () => {
-    copyToClipboard(window.location.href);
-    setValueIsCopied(true);
-    userFeedbackTimer.current = setTimeout(() => setValueIsCopied(false), 2000);
-  };
-
-  useEffect(() => () => clearTimeout(userFeedbackTimer.current), [
-    userFeedbackTimer,
-  ]);
-
-  const activeIndex = stages.findIndex((stage) => stage.id === activeStageId);
-  const activeStage = stages.find((stage) => stage.id === activeStageId);
-
-  return (
-    <div className={styles.mainContainer}>
-      <div className={classNames(styles.statusContainer)}>
-        <div className={styles.stagesText}>
-          <FormattedMessage {...MSG.stages} />
-        </div>
-        <div className={styles.buttonsContainer}>
-          <>
-            <Button
-              className={classNames(styles.iconButton, {
-                [styles.iconButtonDisabled]: valueIsCopied,
-              })}
-              onClick={handleClipboardCopy}
-              disabled={valueIsCopied}
-            >
-              {valueIsCopied ? (
-                <Icon name="share" className={styles.icon} />
-              ) : (
-                <Tooltip
-                  placement="top-start"
-                  content={<FormattedMessage {...MSG.tooltipShareText} />}
-                  popperOptions={{
-                    modifiers: [
-                      {
-                        name: 'offset',
-                        options: {
-                          offset: [0, 12],
-                        },
-                      },
-                    ],
-                  }}
-                >
-                  <div className={styles.iconWrapper}>
-                    <Icon name="share" className={styles.icon} />
-                  </div>
-                </Tooltip>
-              )}
-            </Button>
-            <Button className={styles.iconButton}>
-              <Tooltip
-                placement="top-start"
-                content={<FormattedMessage {...MSG.tooltipDeleteText} />}
-                popperOptions={{
-                  modifiers: [
-                    {
-                      name: 'offset',
-                      options: {
-                        offset: [0, 12],
-                      },
-                    },
-                  ],
-                }}
-              >
-                <div className={styles.iconWrapper}>
-                  <Icon
-                    name="trash"
-                    title={MSG.deleteDraft}
-                    appearance={{ size: 'normal' }}
-                    style={{ fill: styles.iconColor }}
-                  />
-                </div>
-              </Tooltip>
-            </Button>
-            <StagesButton
-              activeStage={activeStage}
-              buttonDisabled={buttonDisabled}
-              buttonAction={buttonAction}
-            />
-          </>
-        </div>
-      </div>
-      {stages.map(({ id, title, description }, index) => (
-        <StageItem
-          key={id}
-          title={title}
-          description={description}
-          isActive={activeStage ? index <= activeIndex : false}
-          isLast={stages.length === index + 1}
-        />
-      ))}
-    </div>
-  );
-};
-
-Stages.displayName = displayName;
-
-export default Stages;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css
deleted file mode 100644
index 5f73f896d7..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.button {
-  composes: themePrimary main from '~core/Button/Button.css';
-  padding: 0;
-  height: 29px;
-  width: 100px;
-}
-
-.buttonTooltip {
-  max-width: 192px;
-}
-
-.buttonWithTooltip {
-  margin-left: 20px;
-}
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts
deleted file mode 100644
index 5941522346..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const button: string;
-export const buttonTooltip: string;
-export const buttonWithTooltip: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx
deleted file mode 100644
index 0cc9e5c55e..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-
-import Button from '~core/Button';
-import { Tooltip } from '~core/Popover';
-import { Stages } from '~pages/IncorporationPage/constants';
-import { StageObject } from '~pages/IncorporationPage/types';
-
-import styles from './StagesButton.css';
-
-const displayName = 'dashboard.ExpenditurePage.Stages.StagesButton';
-
-interface Props {
-  activeStage?: StageObject;
-  buttonDisabled?: boolean;
-  buttonAction?: VoidFunction;
-}
-
-const StagesButton = ({ activeStage, buttonDisabled, buttonAction }: Props) => {
-  const { formatMessage } = useIntl();
-  const buttonText =
-    typeof activeStage?.buttonText === 'string'
-      ? activeStage.buttonText
-      : activeStage?.buttonText && formatMessage(activeStage.buttonText);
-
-  if (!activeStage) return null;
-
-  if (
-    activeStage.id === Stages.Processing ||
-    activeStage.id === Stages.Complete
-  ) {
-    return null;
-  }
-
-  if (activeStage?.buttonTooltip) {
-    return (
-      <span className={styles.buttonWithTooltip}>
-        <Tooltip
-          placement="top"
-          content={
-            <div className={styles.buttonTooltip}>
-              {typeof activeStage.buttonTooltip === 'string'
-                ? activeStage.buttonTooltip
-                : formatMessage(activeStage.buttonTooltip)}
-            </div>
-          }
-          popperOptions={{
-            modifiers: [
-              {
-                name: 'offset',
-                options: {
-                  offset: [0, 8],
-                },
-              },
-            ],
-          }}
-        >
-          <Button
-            disabled={buttonDisabled}
-            className={styles.button}
-            type="submit"
-            onClick={buttonAction}
-          >
-            {buttonText}
-          </Button>
-        </Tooltip>
-      </span>
-    );
-  }
-
-  return (
-    <Button
-      disabled={buttonDisabled}
-      type="submit"
-      className={styles.button}
-      onClick={buttonAction}
-    >
-      {buttonText}
-    </Button>
-  );
-};
-
-StagesButton.displayName = displayName;
-
-export default StagesButton;
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts
deleted file mode 100644
index 4085c13edd..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './StagesButton';
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts
deleted file mode 100644
index 11bb6dccd3..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Stages';
diff --git a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
new file mode 100644
index 0000000000..7abb9c16fd
--- /dev/null
+++ b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
@@ -0,0 +1,108 @@
+import { useFormikContext, setNestedObjectValues, FormikTouched } from 'formik';
+import React, { useCallback, useMemo } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+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 Stages from './Stages';
+import styles from './Stages.css';
+
+const displayName = 'dashboard.Incorporation.Stages.FormStages';
+
+const MSG = defineMessages({
+  singleErrorMessage: {
+    id: 'dashboard.Incorporation.Stages.FormStages.singleErrorMessage',
+    defaultMessage: '{number} required field has an error.',
+  },
+  mulitpleErrorMessage: {
+    id: 'dashboard.Incorporation.Stages.FormStages.mulitpleErrorMessage',
+    defaultMessage: '{number} required fields have an error.',
+  },
+  errorMessageAction: {
+    id: 'dashboard.Incorporation.Stages.FormStages.errorMessageAction',
+    defaultMessage: 'Fix it!',
+  },
+});
+
+export interface Props {
+  stages: StageObject[];
+  activeStageId: StagesEnum;
+}
+
+const FormStages = ({ stages, activeStageId }: Props) => {
+  const { values, handleSubmit, validateForm, setTouched, errors: formikErr } =
+    useFormikContext<ValuesType>() || {};
+
+  const formikErrors = useMemo(() => {
+    const errorsFlat = flattenObject(formikErr);
+    return Object.keys(errorsFlat);
+  }, [formikErr]);
+
+  const handleSaveDraft = useCallback(async () => {
+    const errors = await validateForm(values);
+    const errorsLength = Object.keys(errors)?.length;
+    setTouched(setNestedObjectValues<FormikTouched<ValuesType>>(errors, true));
+
+    return !errorsLength && handleSubmit(values as any);
+  }, [handleSubmit, setTouched, validateForm, values]);
+
+  const handleFixButtonClick = useCallback(() => {
+    setTouched(
+      setNestedObjectValues<FormikTouched<ValuesType>>(formikErr, true),
+    );
+    if (!formikErrors.length) return;
+
+    const firstError = document.getElementsByName(formikErrors[0])?.[0];
+
+    if (firstError?.tagName.toLowerCase() === 'input') {
+      (firstError as HTMLElement).focus();
+    } else if (firstError?.tagName.toLowerCase() === 'textarea') {
+      (firstError as HTMLElement).focus();
+    } else {
+      const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, {
+        detail: {
+          name: formikErrors[0],
+        },
+      });
+
+      window.dispatchEvent(customEvent);
+    }
+  }, [setTouched, formikErr, formikErrors]);
+
+  return (
+    <div className={styles.formStages}>
+      {!!formikErrors.length && (
+        <div className={styles.formStagesMsg}>
+          <p className={styles.formStagesMsgText}>
+            <FormattedMessage
+              {...(formikErrors.length > 1
+                ? { ...MSG.mulitpleErrorMessage }
+                : { ...MSG.singleErrorMessage })}
+              values={{ number: formikErrors.length }}
+            />
+          </p>
+          <button
+            type="button"
+            onClick={handleFixButtonClick}
+            className={styles.formStagesMsgAction}
+          >
+            <FormattedMessage {...MSG.errorMessageAction} />
+          </button>
+        </div>
+      )}
+
+      <Stages
+        stages={stages}
+        activeStageId={activeStageId}
+        buttonAction={handleSaveDraft}
+      />
+    </div>
+  );
+};
+
+FormStages.displayName = displayName;
+
+export default FormStages;
diff --git a/src/modules/pages/components/IncorporationPage/constants.ts b/src/modules/pages/components/IncorporationPage/constants.ts
index ddaae0e2e3..311d840016 100644
--- a/src/modules/pages/components/IncorporationPage/constants.ts
+++ b/src/modules/pages/components/IncorporationPage/constants.ts
@@ -144,7 +144,6 @@ export const stages: StageObject[] = [
     title: MSG.create,
     description: MSG.createDesc,
     buttonText: MSG.createButtonText,
-    buttonTooltip: MSG.createTooltip,
   },
   {
     id: Stages.Created,

From 10938350271fe780f08f3c7b18fd28696a6f80a1 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Mon, 23 Jan 2023 11:05:36 +0100
Subject: [PATCH 03/13] fixed condition, removed unnecessary type

---
 .../dashboard/components/Incorporation/Stages/FormStages.tsx  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
index 7abb9c16fd..606ef0e586 100644
--- a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
+++ b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
@@ -57,9 +57,7 @@ const FormStages = ({ stages, activeStageId }: Props) => {
 
     const firstError = document.getElementsByName(formikErrors[0])?.[0];
 
-    if (firstError?.tagName.toLowerCase() === 'input') {
-      (firstError as HTMLElement).focus();
-    } else if (firstError?.tagName.toLowerCase() === 'textarea') {
+    if (['textarea', 'input'].includes(firstError?.tagName.toLowerCase())) {
       (firstError as HTMLElement).focus();
     } else {
       const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, {

From 85a531ddd57078616cc52ba603ecc5af07349e6a Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Tue, 3 Jan 2023 12:47:51 +0100
Subject: [PATCH 04/13] [wip]locked sidebar form

---
 .../LockedIncorporationForm.css               | 113 +++++++++++++++
 .../LockedIncorporationForm.css.d.ts          |  13 ++
 .../LockedIncorporationForm.tsx               | 131 ++++++++++++++++++
 .../LockedIncorporationForm/index.ts          |   1 +
 .../LockedProtectors/LockedProtectors.css     |  47 +++++++
 .../LockedProtectors.css.d.ts                 |  10 ++
 .../LockedProtectors/LockedProtectors.tsx     | 101 ++++++++++++++
 .../LockedProtectors/index.ts                 |   1 +
 .../IncorporationPage/IncorporationPage.tsx   |   2 +
 9 files changed, 419 insertions(+)
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts

diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
new file mode 100644
index 0000000000..825f2e246a
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
@@ -0,0 +1,113 @@
+@value paddingTop: 46px;
+@value lockedPaddingTop: 75px;
+@value paddingRightLeftBottom: 54px;
+
+.container {
+  padding: paddingTop paddingRightLeftBottom paddingRightLeftBottom;
+}
+
+.costRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.cost {
+  display: flex;
+  align-items: center;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.cost i {
+  margin-right: 8px;
+}
+
+.labelWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.labelWrapper label {
+  margin-right: 8px;
+  width: auto;
+}
+
+.labelWrapper > div {
+  max-width: 250px;
+}
+
+.nameInputs {
+  padding: 12px 0 0 0;
+}
+
+.nameInputs input {
+  height: 44px;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+  color: var(--dark);
+  letter-spacing: var(--spacing-normal);
+}
+
+.nameInputs > div:not(:first-child) {
+  margin-bottom: 12px;
+}
+
+.nameInputs label {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+}
+
+.namesWrapper {
+  /* border: 1px solid red */
+}
+
+.namesWrapper label {
+  flex: 1;
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.description {
+  /* border: 1px solid red */
+}
+
+.descriptionWrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+.descriptionWrapper label {
+  flex: 1;
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.descriptionWrapper > div {
+  flex: 2.5;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+  text-align: right;
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: 0.1px;
+}
+
+.title {
+  margin-bottom: 16px;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.label {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
new file mode 100644
index 0000000000..ac2d41545d
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
@@ -0,0 +1,13 @@
+export const paddingTop: string;
+export const lockedPaddingTop: string;
+export const paddingRightLeftBottom: string;
+export const container: string;
+export const costRow: string;
+export const cost: string;
+export const labelWrapper: string;
+export const nameInputs: string;
+export const namesWrapper: string;
+export const description: string;
+export const descriptionWrapper: string;
+export const title: string;
+export const label: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
new file mode 100644
index 0000000000..f5c6001ebe
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import { FormSection, InputLabel, SelectHorizontal, Form } from '~core/Fields';
+import { Colony } from '~data/index';
+import Icon from '~core/Icon';
+import { ValuesType } from '~pages/IncorporationPage/types';
+
+import LockedProtectors from '../LockedProtectors';
+
+import styles from './LockedIncorporationForm.css';
+
+export const MSG = defineMessages({
+  incorporation: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.incorporation`,
+    defaultMessage: 'Incorporation',
+  },
+  initialCost: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.initialCost`,
+    defaultMessage: 'Initial cost',
+  },
+  ongoingCost: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.ongoingCost`,
+    defaultMessage: 'Ongoing cost',
+  },
+  cost: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.cost`,
+    defaultMessage: '{icon} {amount} {currency}',
+  },
+  nameLabel: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.nameLabel`,
+    defaultMessage: 'Corporation name',
+  },
+  descriptionLabel: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.descriptionLabel`,
+    defaultMessage: 'DAO Purpose',
+  },
+});
+
+const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm`;
+
+export interface Props {
+  sidebarRef: HTMLElement | null;
+  colony: Colony;
+  formValues: ValuesType;
+}
+
+const LockedIncorporationForm = ({ sidebarRef }: Props) => {
+  return (
+    <div className={styles.container}>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.title}>
+          <FormattedMessage {...MSG.incorporation} />
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.costRow}>
+          <div className={styles.label}>
+            <FormattedMessage {...MSG.initialCost} />
+          </div>
+          <div className={styles.cost}>
+            <FormattedMessage
+              {...MSG.cost}
+              values={{
+                icon: <Icon name="usd-coin" appearance={{ size: 'medium' }} />,
+                amount: '5,300',
+                currency: 'USDC',
+              }}
+            />
+          </div>
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.costRow}>
+          <div className={styles.label}>
+            <FormattedMessage {...MSG.ongoingCost} />
+          </div>
+          <div className={styles.cost}>
+            <FormattedMessage
+              {...MSG.cost}
+              values={{
+                icon: <Icon name="usd-coin" appearance={{ size: 'medium' }} />,
+                amount: '3,800 / year',
+                currency: 'USDC',
+              }}
+            />
+          </div>
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.namesWrapper}>
+          {/* <InputLabel label={MSG.nameLabel} /> */}
+          <Form initialValues={{}} onSubmit={() => {}}>
+            <SelectHorizontal
+              name="name"
+              label={MSG.nameLabel}
+              appearance={{
+                theme: 'alt',
+                width: 'content',
+              }}
+              options={[
+                { label: 'WallStreetBets', value: 'WallStreetBets' },
+                { label: 'WallStreetBets2', value: 'WallStreetBets' },
+              ]}
+              scrollContainer={sidebarRef}
+              placement="bottom"
+              withDropdownElement
+              optionSizeLarge
+              autoHeight
+              unselectable
+            />
+          </Form>
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.descriptionWrapper}>
+          <InputLabel label={MSG.descriptionLabel} />
+          <div className={styles.description}>
+            WallStreetBets is on a mission to deploy decentralized satellites in
+            our skies.
+          </div>
+        </div>
+      </FormSection>
+      <LockedProtectors />
+    </div>
+  );
+};
+
+LockedIncorporationForm.displayName = displayName;
+
+export default LockedIncorporationForm;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts
new file mode 100644
index 0000000000..836476fa94
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts
@@ -0,0 +1 @@
+export { default } from './LockedIncorporationForm';
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
new file mode 100644
index 0000000000..5c898c4e6a
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
@@ -0,0 +1,47 @@
+.wrapper {
+  /* border: 1px solid red */
+}
+
+.protectorsLabelWrapper {
+  /* border: 1px solid red */
+}
+
+.label {
+  /* border: 1px solid red */
+}
+
+.userAvatarContainer {
+  /* border: 1px solid red */
+}
+
+.userName {
+  /* border: 1px solid red */
+}
+
+.row {
+  display: flex;
+}
+
+.row label {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+}
+
+.signing {
+  /* border: 1px solid red */
+}
+
+.labelWrapper {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+}
+
+.signOptionWrapper {
+  /* border: 1px solid red */
+}
+
+.signOptionLabel {
+  /* border: 1px solid red */
+}
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
new file mode 100644
index 0000000000..dc35015ce0
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
@@ -0,0 +1,10 @@
+export const wrapper: string;
+export const protectorsLabelWrapper: string;
+export const label: string;
+export const userAvatarContainer: string;
+export const userName: string;
+export const row: string;
+export const signing: string;
+export const labelWrapper: string;
+export const signOptionWrapper: string;
+export const signOptionLabel: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
new file mode 100644
index 0000000000..1f106508bb
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import { FormSection, InputLabel } from '~core/Fields';
+import QuestionMarkTooltip from '~core/QuestionMarkTooltip';
+import { Colony } from '~data/index';
+
+import styles from './LockedProtectors.css';
+import { ValuesType } from '~pages/IncorporationPage/types';
+
+export const MSG = defineMessages({
+  protectors: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectors`,
+    defaultMessage: 'Protectors',
+  },
+  protectorsTooltip: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectorsTooltip`,
+    defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO and handle legal the required administration. Learn more`,
+  },
+  unverified: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.unverified`,
+    defaultMessage: 'Unverified',
+  },
+  verified: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.verified`,
+    defaultMessage: 'Verified',
+  },
+  mainContact: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContact`,
+    defaultMessage: 'Main contact',
+  },
+  signing: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signing`,
+    defaultMessage: 'Signing',
+  },
+  mainContactTooltip: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContactTooltip`,
+    defaultMessage: `The main contact is required during the incorporation process and is also required to use their delivery address details for the registration.`,
+  },
+  signOptionTooltip: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signOptionTooltip`,
+    defaultMessage: `Decide the requirements as to how many Protectors are required to sign legal documents to enact the decisions of a DAO.`,
+  },
+});
+
+const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors`;
+
+export interface Props {
+  protectors: ValuesType['protectors'];
+  colony: Colony;
+}
+
+const LockedProtectors = () => {
+  return (
+    <>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.wrapper}>
+          <div className={styles.protectorsLabelWrapper}>
+            <div className={styles.label}>
+              <FormattedMessage {...MSG.protectors} />
+            </div>
+            <QuestionMarkTooltip tooltipText={MSG.protectorsTooltip} />
+          </div>
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        {/* {protectors?.map((protector) => {
+          return (
+          <div className={styles.userAvatarContainer}>
+            <UserAvatar address={walletAddress} size="xs" notSet={false} />
+            <div className={styles.userName}>
+              <UserMention username={username || ''} />
+            </div>
+          </div>
+        )})} */}
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.row}>
+          <InputLabel label={MSG.mainContact} />
+          {/* <div className={styles.userAvatarContainer}>
+            <UserAvatar address={walletAddress} size="xs" notSet={false} />
+            <div className={styles.userName}>
+              <UserMention username={username || ''} />
+            </div>
+          </div> */}
+        </div>
+      </FormSection>
+      <div className={styles.signOptionWrapper}>
+        <div className={styles.labelWrapper}>
+          <InputLabel label={MSG.signing} />
+          <QuestionMarkTooltip tooltipText={MSG.signOptionTooltip} />
+        </div>
+        <div className={styles.signing}>All need to sign</div>
+      </div>
+    </>
+  );
+};
+
+LockedProtectors.displayName = displayName;
+
+export default LockedProtectors;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts
new file mode 100644
index 0000000000..2c15a2c788
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts
@@ -0,0 +1 @@
+export { default } from './LockedProtectors';
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
index e5475565aa..5964a27307 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
+++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
@@ -23,6 +23,8 @@ import {
 } from './constants';
 import { ValuesType } from './types';
 import styles from './IncorporationPage.css';
+import { ValuesType } from './types';
+import LockedIncorporationForm from '~dashboard/DAOIncorporation/IncorporationForm/LockedIncorporationForm';
 
 const displayName = 'pages.IncorporationPage';
 

From e35ddc5540e234e99ec2e3db2bbeb41f3c18ee9e Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Thu, 5 Jan 2023 12:24:08 +0100
Subject: [PATCH 05/13] added locked sidebar

---
 .../LockedIncorporationForm.css               | 48 ++++++---
 .../LockedIncorporationForm.css.d.ts          |  5 +-
 .../LockedIncorporationForm.tsx               | 43 ++++----
 .../LockedProtectors/LockedProtectors.css     | 68 ++++++++++---
 .../LockedProtectors.css.d.ts                 |  4 +-
 .../LockedProtectors/LockedProtectors.tsx     | 99 ++++++++++++++-----
 .../IncorporationForm/constants.ts            |  9 ++
 7 files changed, 196 insertions(+), 80 deletions(-)
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts

diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
index 825f2e246a..85f0a651fc 100644
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
@@ -2,6 +2,16 @@
 @value lockedPaddingTop: 75px;
 @value paddingRightLeftBottom: 54px;
 
+@keyframes slideDown {
+  0% {
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 180px;
+  }
+}
+
 .container {
   padding: paddingTop paddingRightLeftBottom paddingRightLeftBottom;
 }
@@ -63,23 +73,10 @@
   color: color-mod(var(--dark) alpha(85%));
 }
 
-.namesWrapper {
-  /* border: 1px solid red */
-}
-
-.namesWrapper label {
-  flex: 1;
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-  letter-spacing: var(--spacing-medium);
-}
-
-.description {
-  /* border: 1px solid red */
-}
-
 .descriptionWrapper {
   display: flex;
   align-items: baseline;
+  padding: 12px 0;
 }
 
 .descriptionWrapper label {
@@ -88,7 +85,7 @@
   letter-spacing: var(--spacing-medium);
 }
 
-.descriptionWrapper > div {
+.description {
   flex: 2.5;
   font-size: var(--size-normal);
   font-weight: var(--weight-bold);
@@ -111,3 +108,24 @@
   color: color-mod(var(--temp-grey-blue-7) alpha(85%));
   letter-spacing: var(--spacing-medium);
 }
+
+.namesWrapper label {
+  flex: 1;
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.namesWrapper ul {
+  position: static;
+  overflow: hidden;
+  animation-name: slideDown;
+  animation-duration: 250ms;
+}
+
+.namesWrapper span {
+  font-size: var(--size-smallish);
+}
+
+.namesWrapper li:hover {
+  background-color: transparent;
+}
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
index ac2d41545d..ef5111b4ae 100644
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
@@ -6,8 +6,9 @@ export const costRow: string;
 export const cost: string;
 export const labelWrapper: string;
 export const nameInputs: string;
-export const namesWrapper: string;
-export const description: string;
 export const descriptionWrapper: string;
+export const description: string;
 export const title: string;
 export const label: string;
+export const namesWrapper: string;
+export const slideDown: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
index f5c6001ebe..7c965323a8 100644
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { FormSection, InputLabel, SelectHorizontal, Form } from '~core/Fields';
-import { Colony } from '~data/index';
 import Icon from '~core/Icon';
 import { ValuesType } from '~pages/IncorporationPage/types';
 
@@ -40,12 +39,19 @@ export const MSG = defineMessages({
 const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm`;
 
 export interface Props {
-  sidebarRef: HTMLElement | null;
-  colony: Colony;
   formValues: ValuesType;
 }
 
-const LockedIncorporationForm = ({ sidebarRef }: Props) => {
+const LockedIncorporationForm = ({ formValues }: Props) => {
+  const alternativeNames = useMemo(
+    () =>
+      formValues.alternativeNames.map((name) => ({
+        label: name,
+        value: name,
+      })),
+    [formValues.alternativeNames],
+  );
+
   return (
     <div className={styles.container}>
       <FormSection appearance={{ border: 'bottom' }}>
@@ -88,9 +94,9 @@ const LockedIncorporationForm = ({ sidebarRef }: Props) => {
         </div>
       </FormSection>
       <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.namesWrapper}>
-          {/* <InputLabel label={MSG.nameLabel} /> */}
-          <Form initialValues={{}} onSubmit={() => {}}>
+        {/* A form is used here because the SelectHorizontal component must be wrapped in a Formik form. It doesn't send data anywhere. */}
+        <Form initialValues={{}} onSubmit={() => {}}>
+          <div className={styles.namesWrapper}>
             <SelectHorizontal
               name="name"
               label={MSG.nameLabel}
@@ -98,30 +104,21 @@ const LockedIncorporationForm = ({ sidebarRef }: Props) => {
                 theme: 'alt',
                 width: 'content',
               }}
-              options={[
-                { label: 'WallStreetBets', value: 'WallStreetBets' },
-                { label: 'WallStreetBets2', value: 'WallStreetBets' },
-              ]}
-              scrollContainer={sidebarRef}
-              placement="bottom"
-              withDropdownElement
-              optionSizeLarge
+              renderActiveOption={() => <>{formValues.name}</>}
+              options={alternativeNames}
               autoHeight
               unselectable
             />
-          </Form>
-        </div>
+          </div>
+        </Form>
       </FormSection>
       <FormSection appearance={{ border: 'bottom' }}>
         <div className={styles.descriptionWrapper}>
           <InputLabel label={MSG.descriptionLabel} />
-          <div className={styles.description}>
-            WallStreetBets is on a mission to deploy decentralized satellites in
-            our skies.
-          </div>
+          <div className={styles.description}>{formValues.purpose}</div>
         </div>
       </FormSection>
-      <LockedProtectors />
+      <LockedProtectors formValues={formValues} />
     </div>
   );
 };
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
index 5c898c4e6a..508476d5b6 100644
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
@@ -1,47 +1,91 @@
 .wrapper {
-  /* border: 1px solid red */
+  margin-top: 32px;
 }
 
 .protectorsLabelWrapper {
-  /* border: 1px solid red */
+  display: flex;
+  align-items: center;
+}
+
+.protectorsLabelWrapper span {
+  display: inline-block;
+  height: 16px;
 }
 
 .label {
-  /* border: 1px solid red */
+  margin-right: 8px;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
 }
 
 .userAvatarContainer {
-  /* border: 1px solid red */
+  display: flex;
+  align-items: center;
 }
 
 .userName {
-  /* border: 1px solid red */
+  margin-left: 8px;
 }
 
 .row {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
 }
 
 .row label {
   font-size: var(--size-smallish);
   font-weight: var(--weight-bold);
-  color: color-mod(var(--dark) alpha(85%));
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
 }
 
-.signing {
-  /* border: 1px solid red */
+.row > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  width: 94px;
+  border-radius: 5px;
+}
+
+.mainContactRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
 }
 
 .labelWrapper {
+  display: flex;
   font-size: var(--size-smallish);
   font-weight: var(--weight-bold);
-  color: color-mod(var(--dark) alpha(85%));
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+}
+
+.labelWrapper > span {
+  margin-left: 8px;
+}
+
+.labelWrapper > div {
+  max-width: 250px;
+}
+
+.protectorsLabelWrapper > div {
+  max-width: 250px;
 }
 
 .signOptionWrapper {
-  /* border: 1px solid red */
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 9px 0;
 }
 
-.signOptionLabel {
-  /* border: 1px solid red */
+.signing {
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: var(--spacing-medium);
 }
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
index dc35015ce0..e3c52d6de2 100644
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
@@ -4,7 +4,7 @@ export const label: string;
 export const userAvatarContainer: string;
 export const userName: string;
 export const row: string;
-export const signing: string;
+export const mainContactRow: string;
 export const labelWrapper: string;
 export const signOptionWrapper: string;
-export const signOptionLabel: string;
+export const signing: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
index 1f106508bb..34275d4f53 100644
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { FormSection, InputLabel } from '~core/Fields';
 import QuestionMarkTooltip from '~core/QuestionMarkTooltip';
-import { Colony } from '~data/index';
+import { ValuesType } from '~pages/IncorporationPage/types';
+import UserAvatar from '~core/UserAvatar';
+import UserMention from '~core/UserMention';
+import Tag from '~core/Tag';
+
+import { SignOption, VerificationStatus } from '../constants';
 
 import styles from './LockedProtectors.css';
-import { ValuesType } from '~pages/IncorporationPage/types';
 
 export const MSG = defineMessages({
   protectors: {
@@ -41,19 +45,32 @@ export const MSG = defineMessages({
     id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signOptionTooltip`,
     defaultMessage: `Decide the requirements as to how many Protectors are required to sign legal documents to enact the decisions of a DAO.`,
   },
+  individual: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.individual`,
+    defaultMessage: 'Individual signing',
+  },
+  multiple: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.multiple`,
+    defaultMessage: 'All need to sign',
+  },
 });
 
 const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors`;
 
 export interface Props {
-  protectors: ValuesType['protectors'];
-  colony: Colony;
+  formValues: ValuesType;
 }
 
-const LockedProtectors = () => {
+const LockedProtectors = ({ formValues }: Props) => {
+  const signLabel = useMemo(() => {
+    return formValues.signOption === SignOption.Individual
+      ? MSG.individual
+      : MSG.multiple;
+  }, [formValues]);
+
   return (
     <>
-      <FormSection appearance={{ border: 'bottom' }}>
+      <FormSection>
         <div className={styles.wrapper}>
           <div className={styles.protectorsLabelWrapper}>
             <div className={styles.label}>
@@ -64,34 +81,64 @@ const LockedProtectors = () => {
         </div>
       </FormSection>
       <FormSection appearance={{ border: 'bottom' }}>
-        {/* {protectors?.map((protector) => {
+        {formValues.protectors?.map((protector) => {
+          const { profile } = protector || {};
+          const { walletAddress, username, displayName: userDispalyName } =
+            profile || {};
+
           return (
-          <div className={styles.userAvatarContainer}>
-            <UserAvatar address={walletAddress} size="xs" notSet={false} />
-            <div className={styles.userName}>
-              <UserMention username={username || ''} />
+            <div className={styles.row}>
+              <Tag
+                appearance={{
+                  colorSchema: 'fullColor',
+                  theme: protector.verified ? 'primary' : 'danger',
+                }}
+              >
+                {protector.verified
+                  ? VerificationStatus.Verified
+                  : VerificationStatus.Unverified}
+              </Tag>
+              <div className={styles.userAvatarContainer}>
+                <UserAvatar address={walletAddress} size="xs" notSet={false} />
+                <div className={styles.userName}>
+                  <UserMention username={username || userDispalyName || ''} />
+                </div>
+              </div>
             </div>
-          </div>
-        )})} */}
+          );
+        })}
       </FormSection>
       <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.row}>
-          <InputLabel label={MSG.mainContact} />
-          {/* <div className={styles.userAvatarContainer}>
-            <UserAvatar address={walletAddress} size="xs" notSet={false} />
+        <div className={styles.mainContactRow}>
+          <div className={styles.labelWrapper}>
+            <InputLabel label={MSG.mainContact} />
+            <QuestionMarkTooltip tooltipText={MSG.mainContactTooltip} />
+          </div>
+          <div className={styles.userAvatarContainer}>
+            <UserAvatar
+              address={formValues.mainContact?.profile.walletAddress || ''}
+              size="xs"
+              notSet={false}
+            />
             <div className={styles.userName}>
-              <UserMention username={username || ''} />
+              <UserMention
+                username={formValues.mainContact?.profile.username || ''}
+              />
             </div>
-          </div> */}
+          </div>
         </div>
       </FormSection>
-      <div className={styles.signOptionWrapper}>
-        <div className={styles.labelWrapper}>
-          <InputLabel label={MSG.signing} />
-          <QuestionMarkTooltip tooltipText={MSG.signOptionTooltip} />
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.signOptionWrapper}>
+          <div className={styles.labelWrapper}>
+            <InputLabel label={MSG.signing} />
+            <QuestionMarkTooltip tooltipText={MSG.signOptionTooltip} />
+          </div>
+          <div className={styles.signing}>
+            <FormattedMessage {...signLabel} />
+          </div>
         </div>
-        <div className={styles.signing}>All need to sign</div>
-      </div>
+      </FormSection>
     </>
   );
 };
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
new file mode 100644
index 0000000000..8d8f7ec174
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
@@ -0,0 +1,9 @@
+export enum SignOption {
+  Individual = 'Individual',
+  Multiple = 'Multiple',
+}
+
+export enum VerificationStatus {
+  Verified = 'Verified',
+  Unverified = 'Unverified',
+}

From 398123687a19f19ecbe8ef24abfce4a2833c79bd Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Fri, 13 Jan 2023 13:14:21 +0100
Subject: [PATCH 06/13] renamed to Incorporation

---
 .../LockedIncorporationForm.css               | 131 ----------------
 .../LockedIncorporationForm.css.d.ts          |  14 --
 .../LockedIncorporationForm.tsx               | 128 ---------------
 .../LockedIncorporationForm/index.ts          |   1 -
 .../LockedProtectors/LockedProtectors.css     |  91 -----------
 .../LockedProtectors.css.d.ts                 |  10 --
 .../LockedProtectors/LockedProtectors.tsx     | 148 ------------------
 .../LockedProtectors/index.ts                 |   1 -
 .../IncorporationForm/constants.ts            |   9 --
 .../IncorporationPage/IncorporationPage.tsx   |   2 +-
 10 files changed, 1 insertion(+), 534 deletions(-)
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts

diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
deleted file mode 100644
index 85f0a651fc..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css
+++ /dev/null
@@ -1,131 +0,0 @@
-@value paddingTop: 46px;
-@value lockedPaddingTop: 75px;
-@value paddingRightLeftBottom: 54px;
-
-@keyframes slideDown {
-  0% {
-    max-height: 0;
-  }
-
-  100% {
-    max-height: 180px;
-  }
-}
-
-.container {
-  padding: paddingTop paddingRightLeftBottom paddingRightLeftBottom;
-}
-
-.costRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-}
-
-.cost {
-  display: flex;
-  align-items: center;
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--dark) alpha(85%));
-  letter-spacing: var(--spacing-medium);
-}
-
-.cost i {
-  margin-right: 8px;
-}
-
-.labelWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.labelWrapper label {
-  margin-right: 8px;
-  width: auto;
-}
-
-.labelWrapper > div {
-  max-width: 250px;
-}
-
-.nameInputs {
-  padding: 12px 0 0 0;
-}
-
-.nameInputs input {
-  height: 44px;
-  font-size: var(--size-normal);
-  font-weight: var(--weight-bold);
-  color: var(--dark);
-  letter-spacing: var(--spacing-normal);
-}
-
-.nameInputs > div:not(:first-child) {
-  margin-bottom: 12px;
-}
-
-.nameInputs label {
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--dark) alpha(85%));
-}
-
-.descriptionWrapper {
-  display: flex;
-  align-items: baseline;
-  padding: 12px 0;
-}
-
-.descriptionWrapper label {
-  flex: 1;
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-  letter-spacing: var(--spacing-medium);
-}
-
-.description {
-  flex: 2.5;
-  font-size: var(--size-normal);
-  font-weight: var(--weight-bold);
-  text-align: right;
-  color: color-mod(var(--dark) alpha(85%));
-  letter-spacing: 0.1px;
-}
-
-.title {
-  margin-bottom: 16px;
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--dark) alpha(85%));
-  letter-spacing: var(--spacing-medium);
-}
-
-.label {
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-  letter-spacing: var(--spacing-medium);
-}
-
-.namesWrapper label {
-  flex: 1;
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-  letter-spacing: var(--spacing-medium);
-}
-
-.namesWrapper ul {
-  position: static;
-  overflow: hidden;
-  animation-name: slideDown;
-  animation-duration: 250ms;
-}
-
-.namesWrapper span {
-  font-size: var(--size-smallish);
-}
-
-.namesWrapper li:hover {
-  background-color: transparent;
-}
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
deleted file mode 100644
index ef5111b4ae..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const paddingTop: string;
-export const lockedPaddingTop: string;
-export const paddingRightLeftBottom: string;
-export const container: string;
-export const costRow: string;
-export const cost: string;
-export const labelWrapper: string;
-export const nameInputs: string;
-export const descriptionWrapper: string;
-export const description: string;
-export const title: string;
-export const label: string;
-export const namesWrapper: string;
-export const slideDown: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
deleted file mode 100644
index 7c965323a8..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useMemo } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { FormSection, InputLabel, SelectHorizontal, Form } from '~core/Fields';
-import Icon from '~core/Icon';
-import { ValuesType } from '~pages/IncorporationPage/types';
-
-import LockedProtectors from '../LockedProtectors';
-
-import styles from './LockedIncorporationForm.css';
-
-export const MSG = defineMessages({
-  incorporation: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.incorporation`,
-    defaultMessage: 'Incorporation',
-  },
-  initialCost: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.initialCost`,
-    defaultMessage: 'Initial cost',
-  },
-  ongoingCost: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.ongoingCost`,
-    defaultMessage: 'Ongoing cost',
-  },
-  cost: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.cost`,
-    defaultMessage: '{icon} {amount} {currency}',
-  },
-  nameLabel: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.nameLabel`,
-    defaultMessage: 'Corporation name',
-  },
-  descriptionLabel: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.descriptionLabel`,
-    defaultMessage: 'DAO Purpose',
-  },
-});
-
-const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm`;
-
-export interface Props {
-  formValues: ValuesType;
-}
-
-const LockedIncorporationForm = ({ formValues }: Props) => {
-  const alternativeNames = useMemo(
-    () =>
-      formValues.alternativeNames.map((name) => ({
-        label: name,
-        value: name,
-      })),
-    [formValues.alternativeNames],
-  );
-
-  return (
-    <div className={styles.container}>
-      <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.title}>
-          <FormattedMessage {...MSG.incorporation} />
-        </div>
-      </FormSection>
-      <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.costRow}>
-          <div className={styles.label}>
-            <FormattedMessage {...MSG.initialCost} />
-          </div>
-          <div className={styles.cost}>
-            <FormattedMessage
-              {...MSG.cost}
-              values={{
-                icon: <Icon name="usd-coin" appearance={{ size: 'medium' }} />,
-                amount: '5,300',
-                currency: 'USDC',
-              }}
-            />
-          </div>
-        </div>
-      </FormSection>
-      <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.costRow}>
-          <div className={styles.label}>
-            <FormattedMessage {...MSG.ongoingCost} />
-          </div>
-          <div className={styles.cost}>
-            <FormattedMessage
-              {...MSG.cost}
-              values={{
-                icon: <Icon name="usd-coin" appearance={{ size: 'medium' }} />,
-                amount: '3,800 / year',
-                currency: 'USDC',
-              }}
-            />
-          </div>
-        </div>
-      </FormSection>
-      <FormSection appearance={{ border: 'bottom' }}>
-        {/* A form is used here because the SelectHorizontal component must be wrapped in a Formik form. It doesn't send data anywhere. */}
-        <Form initialValues={{}} onSubmit={() => {}}>
-          <div className={styles.namesWrapper}>
-            <SelectHorizontal
-              name="name"
-              label={MSG.nameLabel}
-              appearance={{
-                theme: 'alt',
-                width: 'content',
-              }}
-              renderActiveOption={() => <>{formValues.name}</>}
-              options={alternativeNames}
-              autoHeight
-              unselectable
-            />
-          </div>
-        </Form>
-      </FormSection>
-      <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.descriptionWrapper}>
-          <InputLabel label={MSG.descriptionLabel} />
-          <div className={styles.description}>{formValues.purpose}</div>
-        </div>
-      </FormSection>
-      <LockedProtectors formValues={formValues} />
-    </div>
-  );
-};
-
-LockedIncorporationForm.displayName = displayName;
-
-export default LockedIncorporationForm;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts
deleted file mode 100644
index 836476fa94..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './LockedIncorporationForm';
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
deleted file mode 100644
index 508476d5b6..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.wrapper {
-  margin-top: 32px;
-}
-
-.protectorsLabelWrapper {
-  display: flex;
-  align-items: center;
-}
-
-.protectorsLabelWrapper span {
-  display: inline-block;
-  height: 16px;
-}
-
-.label {
-  margin-right: 8px;
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-}
-
-.userAvatarContainer {
-  display: flex;
-  align-items: center;
-}
-
-.userName {
-  margin-left: 8px;
-}
-
-.row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-}
-
-.row label {
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-}
-
-.row > span {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  width: 94px;
-  border-radius: 5px;
-}
-
-.mainContactRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-}
-
-.labelWrapper {
-  display: flex;
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-}
-
-.labelWrapper > span {
-  margin-left: 8px;
-}
-
-.labelWrapper > div {
-  max-width: 250px;
-}
-
-.protectorsLabelWrapper > div {
-  max-width: 250px;
-}
-
-.signOptionWrapper {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  padding: 9px 0;
-}
-
-.signing {
-  font-size: var(--size-normal);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--dark) alpha(85%));
-  letter-spacing: var(--spacing-medium);
-}
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
deleted file mode 100644
index e3c52d6de2..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const wrapper: string;
-export const protectorsLabelWrapper: string;
-export const label: string;
-export const userAvatarContainer: string;
-export const userName: string;
-export const row: string;
-export const mainContactRow: string;
-export const labelWrapper: string;
-export const signOptionWrapper: string;
-export const signing: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
deleted file mode 100644
index 34275d4f53..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useMemo } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { FormSection, InputLabel } from '~core/Fields';
-import QuestionMarkTooltip from '~core/QuestionMarkTooltip';
-import { ValuesType } from '~pages/IncorporationPage/types';
-import UserAvatar from '~core/UserAvatar';
-import UserMention from '~core/UserMention';
-import Tag from '~core/Tag';
-
-import { SignOption, VerificationStatus } from '../constants';
-
-import styles from './LockedProtectors.css';
-
-export const MSG = defineMessages({
-  protectors: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectors`,
-    defaultMessage: 'Protectors',
-  },
-  protectorsTooltip: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectorsTooltip`,
-    defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO and handle legal the required administration. Learn more`,
-  },
-  unverified: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.unverified`,
-    defaultMessage: 'Unverified',
-  },
-  verified: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.verified`,
-    defaultMessage: 'Verified',
-  },
-  mainContact: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContact`,
-    defaultMessage: 'Main contact',
-  },
-  signing: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signing`,
-    defaultMessage: 'Signing',
-  },
-  mainContactTooltip: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContactTooltip`,
-    defaultMessage: `The main contact is required during the incorporation process and is also required to use their delivery address details for the registration.`,
-  },
-  signOptionTooltip: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signOptionTooltip`,
-    defaultMessage: `Decide the requirements as to how many Protectors are required to sign legal documents to enact the decisions of a DAO.`,
-  },
-  individual: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.individual`,
-    defaultMessage: 'Individual signing',
-  },
-  multiple: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.multiple`,
-    defaultMessage: 'All need to sign',
-  },
-});
-
-const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors`;
-
-export interface Props {
-  formValues: ValuesType;
-}
-
-const LockedProtectors = ({ formValues }: Props) => {
-  const signLabel = useMemo(() => {
-    return formValues.signOption === SignOption.Individual
-      ? MSG.individual
-      : MSG.multiple;
-  }, [formValues]);
-
-  return (
-    <>
-      <FormSection>
-        <div className={styles.wrapper}>
-          <div className={styles.protectorsLabelWrapper}>
-            <div className={styles.label}>
-              <FormattedMessage {...MSG.protectors} />
-            </div>
-            <QuestionMarkTooltip tooltipText={MSG.protectorsTooltip} />
-          </div>
-        </div>
-      </FormSection>
-      <FormSection appearance={{ border: 'bottom' }}>
-        {formValues.protectors?.map((protector) => {
-          const { profile } = protector || {};
-          const { walletAddress, username, displayName: userDispalyName } =
-            profile || {};
-
-          return (
-            <div className={styles.row}>
-              <Tag
-                appearance={{
-                  colorSchema: 'fullColor',
-                  theme: protector.verified ? 'primary' : 'danger',
-                }}
-              >
-                {protector.verified
-                  ? VerificationStatus.Verified
-                  : VerificationStatus.Unverified}
-              </Tag>
-              <div className={styles.userAvatarContainer}>
-                <UserAvatar address={walletAddress} size="xs" notSet={false} />
-                <div className={styles.userName}>
-                  <UserMention username={username || userDispalyName || ''} />
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </FormSection>
-      <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.mainContactRow}>
-          <div className={styles.labelWrapper}>
-            <InputLabel label={MSG.mainContact} />
-            <QuestionMarkTooltip tooltipText={MSG.mainContactTooltip} />
-          </div>
-          <div className={styles.userAvatarContainer}>
-            <UserAvatar
-              address={formValues.mainContact?.profile.walletAddress || ''}
-              size="xs"
-              notSet={false}
-            />
-            <div className={styles.userName}>
-              <UserMention
-                username={formValues.mainContact?.profile.username || ''}
-              />
-            </div>
-          </div>
-        </div>
-      </FormSection>
-      <FormSection appearance={{ border: 'bottom' }}>
-        <div className={styles.signOptionWrapper}>
-          <div className={styles.labelWrapper}>
-            <InputLabel label={MSG.signing} />
-            <QuestionMarkTooltip tooltipText={MSG.signOptionTooltip} />
-          </div>
-          <div className={styles.signing}>
-            <FormattedMessage {...signLabel} />
-          </div>
-        </div>
-      </FormSection>
-    </>
-  );
-};
-
-LockedProtectors.displayName = displayName;
-
-export default LockedProtectors;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts
deleted file mode 100644
index 2c15a2c788..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './LockedProtectors';
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
deleted file mode 100644
index 8d8f7ec174..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export enum SignOption {
-  Individual = 'Individual',
-  Multiple = 'Multiple',
-}
-
-export enum VerificationStatus {
-  Verified = 'Verified',
-  Unverified = 'Unverified',
-}
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
index 5964a27307..b9b3c5b17c 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
+++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
@@ -24,7 +24,7 @@ import {
 import { ValuesType } from './types';
 import styles from './IncorporationPage.css';
 import { ValuesType } from './types';
-import LockedIncorporationForm from '~dashboard/DAOIncorporation/IncorporationForm/LockedIncorporationForm';
+import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/LockedIncorporationForm';
 
 const displayName = 'pages.IncorporationPage';
 

From 79a92741e26976ee922e2c6e6a0cb2e9a7593148 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Mon, 23 Jan 2023 09:39:25 +0100
Subject: [PATCH 07/13] fixed type errors

---
 .../Incorporation/IncorporationForm/Protectors/Protectors.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
index 4fa7617d57..2f5e47a80b 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
@@ -17,7 +17,6 @@ import Button from '~core/Button';
 import Link from '~core/Link';
 
 import SingleUserPicker from '../SingleUserPicker';
-import { SignOption } from '../constants';
 
 import styles from './Protectors.css';
 

From 5bc15c69874072ab23e87297272b84f24c988822 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Mon, 2 Jan 2023 14:15:19 +0100
Subject: [PATCH 08/13] added validation

---
 .../SingleUserPicker/SingleUserPicker.css     |  35 ++++++
 .../SingleUserPicker.css.d.ts                 |   4 +
 .../SingleUserPicker/SingleUserPicker.tsx     |  70 ++++++++++++
 .../SingleUserPicker/index.ts                 |   1 +
 .../DAOIncorporation/Stages/FormStages.tsx    | 108 ++++++++++++++++++
 5 files changed, 218 insertions(+)
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx

diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css
new file mode 100644
index 0000000000..2c0af7fa16
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css
@@ -0,0 +1,35 @@
+.protectorWrapper {
+  display: flex;
+  justify-content: space-between;
+  padding: 11px 0 14px;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+}
+
+.selectWrapper {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.protectorError {
+  font-size: var(--size-tiny);
+  white-space: nowrap;
+  color: var(--danger);
+  letter-spacing: var(--spacing-medium);
+}
+
+.protectorWrapper label {
+  margin-right: 0;
+}
+
+.deleteIcon {
+  height: 20px;
+  width: 20px;
+  fill: var(--pink);
+}
+
+.deleteIcon:hover {
+  cursor: pointer;
+}
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts
new file mode 100644
index 0000000000..3119c86cca
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts
@@ -0,0 +1,4 @@
+export const protectorWrapper: string;
+export const selectWrapper: string;
+export const protectorError: string;
+export const deleteIcon: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx
new file mode 100644
index 0000000000..2fe3fcc6fe
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { FieldArrayRenderProps, useField } from 'formik';
+
+import { AnyUser } from '~data/index';
+import Icon from '~core/Icon';
+import UserPickerWithSearch from '~core/UserPickerWithSearch';
+import { Props as UserPickerProps } from '~core/UserPickerWithSearch/UserPickerWithSearch';
+
+import styles from './SingleUserPicker.css';
+
+export const MSG = defineMessages({
+  deleteIconTitle: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.SingleUserPicker.deleteIconTitle`,
+    defaultMessage: 'Delete recipient',
+  },
+});
+
+const displayName =
+  'dashboard.DAOIncorporation.IncorporationForm.SingleUserPicker';
+
+export interface Props extends UserPickerProps {
+  sidebarRef: HTMLElement | null;
+  name: string;
+  onSelected?: (value: AnyUser) => void;
+  remove: FieldArrayRenderProps['remove'];
+  index: number;
+  setMainContact: (value: any, shouldValidate?: boolean | undefined) => void;
+}
+
+const SingleUserPicker = ({
+  name,
+  remove,
+  index,
+  setMainContact,
+  ...rest
+}: Props) => {
+  const [, { error, touched, value }] = useField(name);
+  const [, { value: mainContact }] = useField('mainContact');
+  const { formatMessage } = useIntl();
+
+  const errorMessage =
+    error && typeof error === 'object' && formatMessage(error);
+
+  return (
+    <div className={styles.protectorWrapper} key={value?.id}>
+      <div className={styles.selectWrapper}>
+        <UserPickerWithSearch name={name} {...rest} />
+        {errorMessage && touched && (
+          <div className={styles.protectorError}>{errorMessage}</div>
+        )}
+      </div>
+      <Icon
+        name="trash"
+        className={styles.deleteIcon}
+        onClick={() => {
+          remove(index);
+          if (value.id === mainContact.id) {
+            setMainContact(undefined);
+          }
+        }}
+        title={MSG.deleteIconTitle}
+      />
+    </div>
+  );
+};
+
+SingleUserPicker.displayName = displayName;
+
+export default SingleUserPicker;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts
new file mode 100644
index 0000000000..4168664eb6
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts
@@ -0,0 +1 @@
+export { default } from './SingleUserPicker';
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx
new file mode 100644
index 0000000000..37d9f3673c
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx
@@ -0,0 +1,108 @@
+import { useFormikContext, setNestedObjectValues, FormikTouched } from 'formik';
+import React, { useCallback, useMemo } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+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 Stages from './Stages';
+import styles from './Stages.css';
+
+const displayName = 'dashboard.DAOIncorporation.Stages.FormStages';
+
+const MSG = defineMessages({
+  singleErrorMessage: {
+    id: 'dashboard.DAOIncorporation.Stages.FormStages.singleErrorMessage',
+    defaultMessage: '{number} required field has an error.',
+  },
+  mulitpleErrorMessage: {
+    id: 'dashboard.DAOIncorporation.Stages.FormStages.mulitpleErrorMessage',
+    defaultMessage: '{number} required fields have an error.',
+  },
+  errorMessageAction: {
+    id: 'dashboard.DAOIncorporation.Stages.FormStages.errorMessageAction',
+    defaultMessage: 'Fix it!',
+  },
+});
+
+export interface Props {
+  stages: StageObject[];
+  activeStageId: StagesEnum;
+}
+
+const FormStages = ({ stages, activeStageId }: Props) => {
+  const { values, handleSubmit, validateForm, setTouched, errors: formikErr } =
+    useFormikContext<ValuesType>() || {};
+
+  const formikErrors = useMemo(() => {
+    const errorsFlat = flattenObject(formikErr);
+    return Object.keys(errorsFlat);
+  }, [formikErr]);
+
+  const handleSaveDraft = useCallback(async () => {
+    const errors = await validateForm(values);
+    const errorsLength = Object.keys(errors)?.length;
+    setTouched(setNestedObjectValues<FormikTouched<ValuesType>>(errors, true));
+
+    return !errorsLength && handleSubmit(values as any);
+  }, [handleSubmit, setTouched, validateForm, values]);
+
+  const handleFixButtonClick = useCallback(() => {
+    setTouched(
+      setNestedObjectValues<FormikTouched<ValuesType>>(formikErr, true),
+    );
+    if (!formikErrors.length) return;
+
+    const firstError = document.getElementsByName(formikErrors[0])?.[0];
+
+    if (firstError?.tagName.toLowerCase() === 'input') {
+      (firstError as HTMLElement).focus();
+    } else if (firstError?.tagName.toLowerCase() === 'textarea') {
+      (firstError as HTMLElement).focus();
+    } else {
+      const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, {
+        detail: {
+          name: formikErrors[0],
+        },
+      });
+
+      window.dispatchEvent(customEvent);
+    }
+  }, [setTouched, formikErr, formikErrors]);
+
+  return (
+    <div className={styles.formStages}>
+      {!!formikErrors.length && (
+        <div className={styles.formStagesMsg}>
+          <p className={styles.formStagesMsgText}>
+            <FormattedMessage
+              {...(formikErrors.length > 1
+                ? { ...MSG.mulitpleErrorMessage }
+                : { ...MSG.singleErrorMessage })}
+              values={{ number: formikErrors.length }}
+            />
+          </p>
+          <button
+            type="button"
+            onClick={handleFixButtonClick}
+            className={styles.formStagesMsgAction}
+          >
+            <FormattedMessage {...MSG.errorMessageAction} />
+          </button>
+        </div>
+      )}
+
+      <Stages
+        stages={stages}
+        activeStageId={activeStageId}
+        buttonAction={handleSaveDraft}
+      />
+    </div>
+  );
+};
+
+FormStages.displayName = displayName;
+
+export default FormStages;

From 9e0f31ef0b10d908352c8c12c6bceb8cf8cbf303 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Thu, 5 Jan 2023 12:24:08 +0100
Subject: [PATCH 09/13] added locked sidebar

---
 .../DAOIncorporation/IncorporationForm/constants.ts      | 9 +++++++++
 .../IncorporationForm/Protectors/Protectors.tsx          | 1 +
 2 files changed, 10 insertions(+)
 create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts

diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
new file mode 100644
index 0000000000..8d8f7ec174
--- /dev/null
+++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
@@ -0,0 +1,9 @@
+export enum SignOption {
+  Individual = 'Individual',
+  Multiple = 'Multiple',
+}
+
+export enum VerificationStatus {
+  Verified = 'Verified',
+  Unverified = 'Unverified',
+}
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
index 2f5e47a80b..4fa7617d57 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
@@ -17,6 +17,7 @@ import Button from '~core/Button';
 import Link from '~core/Link';
 
 import SingleUserPicker from '../SingleUserPicker';
+import { SignOption } from '../constants';
 
 import styles from './Protectors.css';
 

From 9f4ea5ac9b7b61a9082b8939139eb8320c2019a4 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Fri, 13 Jan 2023 13:14:21 +0100
Subject: [PATCH 10/13] renamed to Incorporation

---
 .../SingleUserPicker/SingleUserPicker.css     |  35 ------
 .../SingleUserPicker.css.d.ts                 |   4 -
 .../SingleUserPicker/SingleUserPicker.tsx     |  70 ------------
 .../SingleUserPicker/index.ts                 |   1 -
 .../IncorporationForm/constants.ts            |   9 --
 .../DAOIncorporation/Stages/FormStages.tsx    | 108 ------------------
 6 files changed, 227 deletions(-)
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
 delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx

diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css
deleted file mode 100644
index 2c0af7fa16..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.protectorWrapper {
-  display: flex;
-  justify-content: space-between;
-  padding: 11px 0 14px;
-  font-size: var(--size-smallish);
-  font-weight: var(--weight-bold);
-  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
-}
-
-.selectWrapper {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.protectorError {
-  font-size: var(--size-tiny);
-  white-space: nowrap;
-  color: var(--danger);
-  letter-spacing: var(--spacing-medium);
-}
-
-.protectorWrapper label {
-  margin-right: 0;
-}
-
-.deleteIcon {
-  height: 20px;
-  width: 20px;
-  fill: var(--pink);
-}
-
-.deleteIcon:hover {
-  cursor: pointer;
-}
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts
deleted file mode 100644
index 3119c86cca..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.css.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const protectorWrapper: string;
-export const selectWrapper: string;
-export const protectorError: string;
-export const deleteIcon: string;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx
deleted file mode 100644
index 2fe3fcc6fe..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/SingleUserPicker.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { FieldArrayRenderProps, useField } from 'formik';
-
-import { AnyUser } from '~data/index';
-import Icon from '~core/Icon';
-import UserPickerWithSearch from '~core/UserPickerWithSearch';
-import { Props as UserPickerProps } from '~core/UserPickerWithSearch/UserPickerWithSearch';
-
-import styles from './SingleUserPicker.css';
-
-export const MSG = defineMessages({
-  deleteIconTitle: {
-    id: `dashboard.DAOIncorporation.IncorporationForm.SingleUserPicker.deleteIconTitle`,
-    defaultMessage: 'Delete recipient',
-  },
-});
-
-const displayName =
-  'dashboard.DAOIncorporation.IncorporationForm.SingleUserPicker';
-
-export interface Props extends UserPickerProps {
-  sidebarRef: HTMLElement | null;
-  name: string;
-  onSelected?: (value: AnyUser) => void;
-  remove: FieldArrayRenderProps['remove'];
-  index: number;
-  setMainContact: (value: any, shouldValidate?: boolean | undefined) => void;
-}
-
-const SingleUserPicker = ({
-  name,
-  remove,
-  index,
-  setMainContact,
-  ...rest
-}: Props) => {
-  const [, { error, touched, value }] = useField(name);
-  const [, { value: mainContact }] = useField('mainContact');
-  const { formatMessage } = useIntl();
-
-  const errorMessage =
-    error && typeof error === 'object' && formatMessage(error);
-
-  return (
-    <div className={styles.protectorWrapper} key={value?.id}>
-      <div className={styles.selectWrapper}>
-        <UserPickerWithSearch name={name} {...rest} />
-        {errorMessage && touched && (
-          <div className={styles.protectorError}>{errorMessage}</div>
-        )}
-      </div>
-      <Icon
-        name="trash"
-        className={styles.deleteIcon}
-        onClick={() => {
-          remove(index);
-          if (value.id === mainContact.id) {
-            setMainContact(undefined);
-          }
-        }}
-        title={MSG.deleteIconTitle}
-      />
-    </div>
-  );
-};
-
-SingleUserPicker.displayName = displayName;
-
-export default SingleUserPicker;
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts
deleted file mode 100644
index 4168664eb6..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/SingleUserPicker/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SingleUserPicker';
diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
deleted file mode 100644
index 8d8f7ec174..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export enum SignOption {
-  Individual = 'Individual',
-  Multiple = 'Multiple',
-}
-
-export enum VerificationStatus {
-  Verified = 'Verified',
-  Unverified = 'Unverified',
-}
diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx
deleted file mode 100644
index 37d9f3673c..0000000000
--- a/src/modules/dashboard/components/DAOIncorporation/Stages/FormStages.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { useFormikContext, setNestedObjectValues, FormikTouched } from 'formik';
-import React, { useCallback, useMemo } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-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 Stages from './Stages';
-import styles from './Stages.css';
-
-const displayName = 'dashboard.DAOIncorporation.Stages.FormStages';
-
-const MSG = defineMessages({
-  singleErrorMessage: {
-    id: 'dashboard.DAOIncorporation.Stages.FormStages.singleErrorMessage',
-    defaultMessage: '{number} required field has an error.',
-  },
-  mulitpleErrorMessage: {
-    id: 'dashboard.DAOIncorporation.Stages.FormStages.mulitpleErrorMessage',
-    defaultMessage: '{number} required fields have an error.',
-  },
-  errorMessageAction: {
-    id: 'dashboard.DAOIncorporation.Stages.FormStages.errorMessageAction',
-    defaultMessage: 'Fix it!',
-  },
-});
-
-export interface Props {
-  stages: StageObject[];
-  activeStageId: StagesEnum;
-}
-
-const FormStages = ({ stages, activeStageId }: Props) => {
-  const { values, handleSubmit, validateForm, setTouched, errors: formikErr } =
-    useFormikContext<ValuesType>() || {};
-
-  const formikErrors = useMemo(() => {
-    const errorsFlat = flattenObject(formikErr);
-    return Object.keys(errorsFlat);
-  }, [formikErr]);
-
-  const handleSaveDraft = useCallback(async () => {
-    const errors = await validateForm(values);
-    const errorsLength = Object.keys(errors)?.length;
-    setTouched(setNestedObjectValues<FormikTouched<ValuesType>>(errors, true));
-
-    return !errorsLength && handleSubmit(values as any);
-  }, [handleSubmit, setTouched, validateForm, values]);
-
-  const handleFixButtonClick = useCallback(() => {
-    setTouched(
-      setNestedObjectValues<FormikTouched<ValuesType>>(formikErr, true),
-    );
-    if (!formikErrors.length) return;
-
-    const firstError = document.getElementsByName(formikErrors[0])?.[0];
-
-    if (firstError?.tagName.toLowerCase() === 'input') {
-      (firstError as HTMLElement).focus();
-    } else if (firstError?.tagName.toLowerCase() === 'textarea') {
-      (firstError as HTMLElement).focus();
-    } else {
-      const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, {
-        detail: {
-          name: formikErrors[0],
-        },
-      });
-
-      window.dispatchEvent(customEvent);
-    }
-  }, [setTouched, formikErr, formikErrors]);
-
-  return (
-    <div className={styles.formStages}>
-      {!!formikErrors.length && (
-        <div className={styles.formStagesMsg}>
-          <p className={styles.formStagesMsgText}>
-            <FormattedMessage
-              {...(formikErrors.length > 1
-                ? { ...MSG.mulitpleErrorMessage }
-                : { ...MSG.singleErrorMessage })}
-              values={{ number: formikErrors.length }}
-            />
-          </p>
-          <button
-            type="button"
-            onClick={handleFixButtonClick}
-            className={styles.formStagesMsgAction}
-          >
-            <FormattedMessage {...MSG.errorMessageAction} />
-          </button>
-        </div>
-      )}
-
-      <Stages
-        stages={stages}
-        activeStageId={activeStageId}
-        buttonAction={handleSaveDraft}
-      />
-    </div>
-  );
-};
-
-FormStages.displayName = displayName;
-
-export default FormStages;

From 52ac964c8a682472a9f889774f79c84c3ed12448 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Tue, 17 Jan 2023 09:01:36 +0100
Subject: [PATCH 11/13] added DeleteDraftIncorporationDialog

---
 .../DeleteDraftIncorporationDialog.css        | 29 ++++++++
 .../DeleteDraftIncorporationDialog.css.d.ts   |  3 +
 .../DeleteDraftIncorporationDialog.tsx        | 66 +++++++++++++++++++
 .../DeleteDraftIncorporationDialog/index.ts   |  1 +
 .../Incorporation/Stages/FormStages.tsx       | 27 +++++++-
 .../IncorporationPage/IncorporationPage.tsx   |  2 -
 6 files changed, 123 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css
 create mode 100644 src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css.d.ts
 create mode 100644 src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.tsx
 create mode 100644 src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/index.ts

diff --git a/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css b/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css
new file mode 100644
index 0000000000..ac1613fdc9
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css.d.ts b/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.css.d.ts
new file mode 100644
index 0000000000..1fb3299707
--- /dev/null
+++ b/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;
diff --git a/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.tsx b/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/DeleteDraftIncorporationDialog.tsx
new file mode 100644
index 0000000000..061bed1639
--- /dev/null
+++ b/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;
diff --git a/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/index.ts b/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/index.ts
new file mode 100644
index 0000000000..06bbb82977
--- /dev/null
+++ b/src/modules/dashboard/components/Dialogs/DeleteDraftIncorporationDialog/index.ts
@@ -0,0 +1 @@
+export { default } from './DeleteDraftIncorporationDialog';
diff --git a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
index 606ef0e586..27818d19b8 100644
--- a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
+++ b/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>
   );
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
index b9b3c5b17c..e5475565aa 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
+++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
@@ -23,8 +23,6 @@ import {
 } from './constants';
 import { ValuesType } from './types';
 import styles from './IncorporationPage.css';
-import { ValuesType } from './types';
-import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/LockedIncorporationForm';
 
 const displayName = 'pages.IncorporationPage';
 

From 85dbbd2f07f99e92d41532917a5d6475f39f54b5 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Fri, 3 Feb 2023 12:11:12 +0100
Subject: [PATCH 12/13] fixed types

---
 .../Incorporation/IncorporationForm/Protectors/Protectors.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
index 4fa7617d57..2f5e47a80b 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
@@ -17,7 +17,6 @@ import Button from '~core/Button';
 import Link from '~core/Link';
 
 import SingleUserPicker from '../SingleUserPicker';
-import { SignOption } from '../constants';
 
 import styles from './Protectors.css';
 

From 693b3ffd2dd798c4ff0feb7481209f83b8849101 Mon Sep 17 00:00:00 2001
From: Agnieszka Jarosik <agnieszka.jarosik-loj@pagepro.co>
Date: Mon, 13 Mar 2023 16:08:51 +0100
Subject: [PATCH 13/13] fixed types

---
 .../Protectors/Protectors.tsx                 |   1 +
 .../Incorporation/Stages/FormStages.tsx       | 127 ------------------
 .../IncorporationPage/IncorporationPage.css   |   2 +-
 .../IncorporationPage/IncorporationPage.tsx   |   7 +-
 4 files changed, 5 insertions(+), 132 deletions(-)
 delete mode 100644 src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx

diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
index 2f5e47a80b..4fa7617d57 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx
@@ -17,6 +17,7 @@ import Button from '~core/Button';
 import Link from '~core/Link';
 
 import SingleUserPicker from '../SingleUserPicker';
+import { SignOption } from '../constants';
 
 import styles from './Protectors.css';
 
diff --git a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
deleted file mode 100644
index 27818d19b8..0000000000
--- a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useFormikContext, setNestedObjectValues, FormikTouched } from 'formik';
-import React, { useCallback, useMemo } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-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';
-
-const displayName = 'dashboard.Incorporation.Stages.FormStages';
-
-const MSG = defineMessages({
-  singleErrorMessage: {
-    id: 'dashboard.Incorporation.Stages.FormStages.singleErrorMessage',
-    defaultMessage: '{number} required field has an error.',
-  },
-  mulitpleErrorMessage: {
-    id: 'dashboard.Incorporation.Stages.FormStages.mulitpleErrorMessage',
-    defaultMessage: '{number} required fields have an error.',
-  },
-  errorMessageAction: {
-    id: 'dashboard.Incorporation.Stages.FormStages.errorMessageAction',
-    defaultMessage: 'Fix it!',
-  },
-});
-
-export interface Props {
-  stages: StageObject[];
-  activeStageId: StagesEnum;
-  setFormValues: React.Dispatch<React.SetStateAction<ValuesType | undefined>>;
-}
-
-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);
-    return Object.keys(errorsFlat);
-  }, [formikErr]);
-
-  const handleSaveDraft = useCallback(async () => {
-    const errors = await validateForm(values);
-    const errorsLength = Object.keys(errors)?.length;
-    setTouched(setNestedObjectValues<FormikTouched<ValuesType>>(errors, true));
-
-    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),
-    );
-    if (!formikErrors.length) return;
-
-    const firstError = document.getElementsByName(formikErrors[0])?.[0];
-
-    if (['textarea', 'input'].includes(firstError?.tagName.toLowerCase())) {
-      (firstError as HTMLElement).focus();
-    } else {
-      const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, {
-        detail: {
-          name: formikErrors[0],
-        },
-      });
-
-      window.dispatchEvent(customEvent);
-    }
-  }, [setTouched, formikErr, formikErrors]);
-
-  return (
-    <div className={styles.formStages}>
-      {!!formikErrors.length && (
-        <div className={styles.formStagesMsg}>
-          <p className={styles.formStagesMsgText}>
-            <FormattedMessage
-              {...(formikErrors.length > 1
-                ? { ...MSG.mulitpleErrorMessage }
-                : { ...MSG.singleErrorMessage })}
-              values={{ number: formikErrors.length }}
-            />
-          </p>
-          <button
-            type="button"
-            onClick={handleFixButtonClick}
-            className={styles.formStagesMsgAction}
-          >
-            <FormattedMessage {...MSG.errorMessageAction} />
-          </button>
-        </div>
-      )}
-
-      <Stages
-        stages={stages}
-        activeStageId={activeStageId}
-        buttonAction={handleSaveDraft}
-        handleDeleteDraft={handleDeleteDraft}
-      />
-    </div>
-  );
-};
-
-FormStages.displayName = displayName;
-
-export default FormStages;
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.css b/src/modules/pages/components/IncorporationPage/IncorporationPage.css
index 7984904f8f..5491644dc2 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.css
+++ b/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);
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
index e5475565aa..ed9d70655a 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
+++ b/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