Add edit mode

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedMultipleUsers/ChangedMultipleUsers.css

@@ -0,0 +1,29 @@
+.row {
+  display: grid;
+  align-items: center;
+  height: 44px;
+  border-bottom: 1px solid color-mod(var(--temp-grey-blue-7) alpha(15%));
+  font-size: var(--size-normal);
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  color: var(--temp-grey-blue-7);
+  grid-template-columns: 4.5fr 1fr 4.5fr;
+}
+
+.arrowIcon {
+  height: 16px;
+  width: 16px;
+  color: color-mod(var(--dark) alpha(65%));
+  justify-self: center;
+}
+
+.right {
+  color: var(--dark);
+  justify-self: end;
+}
+
+.left {
+  max-width: 90%;
+  overflow: hidden;
+  justify-self: start;
+}

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedMultipleUsers/ChangedMultipleUsers.css.d.ts

@@ -0,0 +1,4 @@
+export const row: string;
+export const arrowIcon: string;
+export const right: string;
+export const left: string;

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedMultipleUsers/ChangedMultipleUsers.tsx

@@ -0,0 +1,106 @@
+import React, { Fragment, useCallback } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import Icon from '~core/Icon';
+import { Colony } from '~data/index';
+import { ValuesType } from '~pages/IncorporationPage/types';
+
+import NewRecipient from '../NewRecipient';
+import { NewValueType } from '../types';
+
+import styles from './ChangedMultipleUsers.css';
+
+export const MSG = defineMessages({
+  discard: {
+    id: 'dashboard.EditIncorporationDialog.ChangedMultipleUsers.discard',
+    defaultMessage: 'Discard',
+  },
+  changeRecipient: {
+    id: `dashboard.EditIncorporationDialog.ChangedMultipleUsers.changeRecipient`,
+    defaultMessage: 'Change Recipient',
+  },
+  removed: {
+    id: `dashboard.EditIncorporationDialog.ChangedMultipleUsers.removed`,
+    defaultMessage: 'Removed protector',
+  },
+  added: {
+    id: `dashboard.EditIncorporationDialog.ChangedMultipleUsers.added`,
+    defaultMessage: 'Added protector',
+  },
+});
+
+const displayName = 'dashboard.EditIncorporationDialog.ChangedMultipleUsers';
+
+interface Props {
+  newValues?: NewValueType[];
+  colony: Colony;
+  oldValues: ValuesType;
+}
+
+const ChangedMultipleUsers = ({ newValues, oldValues }: Props) => {
+  const renderUserChange = useCallback((newUser, oldUser) => {
+    if (newUser.removed) {
+      return (
+        <div className={styles.row}>
+          <FormattedMessage {...MSG.removed} />
+          <Icon name="arrow-right" className={styles.arrowIcon} />
+          <span className={styles.right}>
+            <NewRecipient newValue={oldUser.user} />
+          </span>
+        </div>
+      );
+    }
+
+    if (newUser.created) {
+      return (
+        <div className={styles.row}>
+          <FormattedMessage {...MSG.added} />
+          <Icon name="arrow-right" className={styles.arrowIcon} />
+          <span className={styles.right}>
+            <NewRecipient newValue={newUser.user} />
+          </span>
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.row}>
+        <div className={styles.left}>
+          <NewRecipient newValue={oldUser.user} />
+        </div>
+        <Icon name="arrow-right" className={styles.arrowIcon} />
+        <div className={styles.right}>
+          <NewRecipient newValue={newUser.user} />
+        </div>
+      </div>
+    );
+  }, []);
+
+  if (!Array.isArray(newValues) || !Array.isArray) {
+    return null;
+  }
+
+  return (
+    <>
+      {newValues?.map((newValue) => (
+        <Fragment key={newValue.key}>
+          {Array.isArray(newValue.value) &&
+            newValue.value?.map((changeItem) => {
+              const oldItem = oldValues[newValue.key]?.find(
+                (item) => item?.key === changeItem?.key,
+              );
+              return (
+                <Fragment key={changeItem.key}>
+                  {renderUserChange(changeItem, oldItem)}
+                </Fragment>
+              );
+            })}
+        </Fragment>
+      ))}
+    </>
+  );
+};
+
+ChangedMultipleUsers.displayName = displayName;
+
+export default ChangedMultipleUsers;

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedMultipleUsers/index.ts

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

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedValues/ChangedValues.css

@@ -0,0 +1,47 @@
+.teamWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.teamWrapper > div {
+  margin-right: 4px;
+}
+
+.row {
+  display: grid;
+  align-items: center;
+  height: 44px;
+  border-bottom: 1px solid color-mod(var(--temp-grey-blue-7) alpha(15%));
+  font-size: var(--size-normal);
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  color: var(--temp-grey-blue-7);
+  grid-template-columns: 4.5fr 1fr 4.5fr;
+  grid-template-rows: auto;
+  letter-spacing: 0.1px;
+}
+
+.smallerPadding {
+  padding: 4px 0;
+}
+
+.arrowIcon {
+  height: 16px;
+  width: 16px;
+  color: color-mod(var(--dark) alpha(65%));
+  justify-self: center;
+}
+
+.left {
+  max-width: 90%;
+  overflow: hidden;
+  justify-self: start;
+}
+
+.right {
+  max-width: 90%;
+  overflow: hidden;
+  text-align: right;
+  color: var(--dark);
+  justify-self: end;
+}

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedValues/ChangedValues.css.d.ts

@@ -0,0 +1,6 @@
+export const teamWrapper: string;
+export const row: string;
+export const smallerPadding: string;
+export const arrowIcon: string;
+export const left: string;
+export const right: string;

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedValues/ChangedValues.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { isEmpty } from 'lodash';
+import classNames from 'classnames';
+
+import Icon from '~core/Icon';
+import { SignOption } from '~dashboard/Incorporation/IncorporationForm/constants';
+import { ValuesType } from '~pages/IncorporationPage/types';
+import { multiLineTextEllipsis } from '~utils/strings';
+
+import NewRecipient from '../NewRecipient';
+
+import styles from './ChangedValues.css';
+
+export const MSG = defineMessages({
+  none: {
+    id: 'dashboard.EditIncorporationDialog.ChangedValues.none',
+    defaultMessage: 'None',
+  },
+  individual: {
+    id: 'dashboard.EditIncorporationDialog.ChangedValues.individual',
+    defaultMessage: 'Individual signing',
+  },
+  multiple: {
+    id: 'dashboard.EditIncorporationDialog.ChangedValues.multiple',
+    defaultMessage: 'All have to sign',
+  },
+});
+
+const displayName = 'dashboard.EditIncorporationDialog.ChangedValues';
+
+export type ValueOf<T> = T[keyof T];
+interface Props {
+  newValues?: {
+    key: string;
+    value?: ValueOf<ValuesType>;
+    id: string;
+  }[];
+  oldValues: ValuesType;
+}
+
+const ChangedValues = ({ newValues, oldValues }: Props) => {
+  const { formatMessage } = useIntl();
+
+  const renderChange = useCallback(
+    (change: any, key: string, newVallue: boolean) => {
+      switch (key) {
+        case 'name':
+        case 'alternativeName1':
+        case 'alternativeName2':
+        case 'purpose': {
+          return (
+            multiLineTextEllipsis(change, newVallue ? 40 : 20) ||
+            formatMessage(MSG.none)
+          );
+        }
+        case 'protectors': {
+          return <NewRecipient newValue={change} />;
+        }
+        case 'mainContact': {
+          return <NewRecipient newValue={change} />;
+        }
+        case 'signOption': {
+          return change === SignOption.Individual ? (
+            <FormattedMessage {...MSG.individual} />
+          ) : (
+            <FormattedMessage {...MSG.multiple} />
+          );
+        }
+        default:
+          return null;
+      }
+    },
+    [formatMessage],
+  );
+
+  if (!newValues || isEmpty(newValues)) {
+    return null;
+  }
+
+  return (
+    <>
+      {newValues.map(({ key, value }) => {
+        const oldValue = oldValues[key];
+
+        return (
+          <div
+            className={classNames(styles.row, {
+              [styles.smallerPadding]: key === 'mainContact,',
+            })}
+          >
+            <div className={styles.left}>
+              {renderChange(oldValue, key, false)}
+            </div>
+            <Icon name="arrow-right" className={styles.arrowIcon} />
+            <div className={styles.right}>{renderChange(value, key, true)}</div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+ChangedValues.displayName = displayName;
+
+export default ChangedValues;

src/modules/dashboard/components/Dialogs/EditIncorporationDialog/ChangedValues/index.ts

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