diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
index 212d48dc78..e580e26725 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx
@@ -47,9 +47,14 @@ const displayName = `dashboard.Incorporation.IncorporationForm.LockedIncorporati
export interface Props {
formValues: ValuesType;
activeStageId: Stages;
+ pendingMotion?: boolean;
}
-const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
+const LockedIncorporationForm = ({
+ formValues,
+ activeStageId,
+ pendingMotion,
+}: Props) => {
const { alternativeName1: altName1, alternativeName2: altName2 } = formValues;
const alternativeNames = useMemo(
() => [
@@ -136,7 +141,7 @@ const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
{formValues.purpose}
-
+
);
};
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
index c1f38e1145..e89bbb9648 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css
@@ -104,3 +104,21 @@
animation-name: fadeIn;
animation-duration: 500ms;
}
+
+.dot {
+ height: 9px;
+ width: 9px;
+ border-radius: 50%;
+ background-color: var(--golden);
+}
+
+.labelDotWrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+/* targets toolitp */
+.labelDotWrapper > div:last-of-type {
+ max-width: 220px;
+}
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
index c7955a631f..fc1e41ae79 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts
@@ -10,3 +10,5 @@ export const signOptionWrapper: string;
export const signing: string;
export const mianContactWrapper: string;
export const fadeIn: string;
+export const dot: string;
+export const labelDotWrapper: string;
diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
index 58cb25f4b9..4684e70302 100644
--- a/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
+++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx
@@ -8,6 +8,7 @@ import UserAvatar from '~core/UserAvatar';
import UserMention from '~core/UserMention';
import Tag from '~core/Tag';
import Link from '~core/Link';
+import { Tooltip } from '~core/Popover';
import { SignOption, VerificationStatus } from '../constants';
@@ -54,15 +55,20 @@ export const MSG = defineMessages({
id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.multiple`,
defaultMessage: 'All need to sign',
},
+ motionTooltip: {
+ id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.motionTooltip`,
+ defaultMessage: `There is an active Motion to change this application.`,
+ },
});
const displayName = `dashboard.Incorporation.IncorporationForm.LockedProtectors`;
export interface Props {
formValues: ValuesType;
+ pendingMotion?: boolean;
}
-const LockedProtectors = ({ formValues }: Props) => {
+const LockedProtectors = ({ formValues, pendingMotion }: Props) => {
const signLabel = useMemo(() => {
return formValues.signOption === SignOption.Individual
? MSG.individual
@@ -73,17 +79,38 @@ const LockedProtectors = ({ formValues }: Props) => {
<>
-
-
-
+
+
+
+
+
+
{chunks}, // link is a mock, add redirection to the correct page
+ }}
+ interactive
+ />
-
{chunks}, // link is a mock, add redirection to the correct page
- }}
- interactive
- />
+ {pendingMotion && (
+ }
+ popperOptions={{
+ modifiers: [
+ {
+ name: 'offset',
+ options: {
+ offset: [-2, 6],
+ },
+ },
+ ],
+ }}
+ >
+
+
+ )}
diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
index 3bd76343fb..f5cb30bade 100644
--- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
+++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useParams } from 'react-router';
import { Formik } from 'formik';
import classNames from 'classnames';
+import { isEmpty } from 'lodash';
import { useColonyFromNameQuery } from '~data/generated';
import { getMainClasses } from '~utils/css';
@@ -53,7 +54,7 @@ const IncorporationPage = () => {
const notVerified = true; // temporary valule
const openPayDialog = useDialog(IncorporationPaymentDialog);
- const [motion, setMotions] = useState
([]);
+ const [motions, setMotions] = useState([]);
const handleSubmit = useCallback((values) => {
setFormValues(values);
@@ -169,6 +170,12 @@ const IncorporationPage = () => {
);
}, [colonyData, openCancelIncorporationDialog]);
+ const pendingMotion = useMemo(
+ () =>
+ motions?.find((motionItem) => motionItem.status === MotionStatus.Pending),
+ [motions],
+ );
+
return isFormEditable ? (
{
)
)}
@@ -257,7 +265,7 @@ const IncorporationPage = () => {
colony={colonyData?.processedColony}
viewFor={ViewFor.INCORPORATION}
handleCancel={handleCancelIncorporation}
- motion={motion}
+ motion={motions}
/>
)}