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} /> )}