From ed0c3875aa0912509cf8b6bd1e4fa5fab43d8f93 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Wed, 12 Apr 2023 13:09:42 +0200 Subject: [PATCH] used stages from expenditure page --- .../Stages/LinkedMotions/LinkedMotions.css | 7 +- .../Stages/LinkedMotions/LinkedMotions.tsx | 176 ++++++++++++++---- .../ExpenditurePage/Stages/LockedStages.tsx | 41 ++-- .../ExpenditurePage/Stages/Stages.tsx | 83 ++++++--- .../StagesButtonIncorporation.css | 6 + .../StagesButtonIncorporation.css.d.ts | 1 + .../StagesButtonIncorporation.tsx | 48 +++++ .../Stages/StagesButtonIncorporation/index.ts | 1 + .../Protectors/Protectors.tsx | 1 + .../Incorporation/Stages/FormStages.tsx | 106 ----------- .../IncorporationPage/IncorporationPage.tsx | 25 +-- 11 files changed, 294 insertions(+), 201 deletions(-) create mode 100644 src/modules/dashboard/components/ExpenditurePage/Stages/StagesButtonIncorporation/StagesButtonIncorporation.css create mode 100644 src/modules/dashboard/components/ExpenditurePage/Stages/StagesButtonIncorporation/StagesButtonIncorporation.css.d.ts create mode 100644 src/modules/dashboard/components/ExpenditurePage/Stages/StagesButtonIncorporation/StagesButtonIncorporation.tsx create mode 100644 src/modules/dashboard/components/ExpenditurePage/Stages/StagesButtonIncorporation/index.ts delete mode 100644 src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx diff --git a/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.css b/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.css index 8d7f0a7c83..11bc42277c 100644 --- a/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.css +++ b/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.css @@ -14,13 +14,18 @@ align-items: center; margin-bottom: 10px; padding-bottom: 10px; - border-bottom: 1px solid var(--temp-grey-blue-6); + border-bottom: 1px solid color-mod(var(--temp-grey-blue-7) alpha(15%)); } .statusWrapper { display: flex; justify-content: space-between; align-items: center; + margin-bottom: 12px; +} + +.statusWrapper > span { + padding: 1px 10px 2px; } .line { diff --git a/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.tsx b/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.tsx index 87342ac2cc..d6e07b370e 100644 --- a/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.tsx +++ b/src/modules/dashboard/components/ExpenditurePage/Stages/LinkedMotions/LinkedMotions.tsx @@ -1,18 +1,27 @@ import React, { useMemo } from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; +import { + defineMessages, + FormattedMessage, + MessageDescriptor, +} from 'react-intl'; import Link from '~core/Link'; import Tag from '~core/Tag'; -import { MotionStatus } from '../constants'; +import { Motion, MotionStatus, MotionType } from '../constants'; import styles from './LinkedMotions.css'; +import { LANDING_PAGE_ROUTE } from '~routes/routeConstants'; const MSG = defineMessages({ - linkedMotions: { + linkedMotionExpenditure: { id: 'dashboard.ExpenditurePage.Stages.LinkedMotions.linkedMotions', defaultMessage: 'Linked motions', }, + linkedMotionIncorporation: { + id: 'dashboard.Incorporation.LinkedMotions.linkedMotion', + defaultMessage: 'Relates to motion', + }, foundExp: { id: 'dashboard.ExpenditurePage.Stages.LinkedMotions.foundExp', defaultMessage: '{motion} Exp - {id}', @@ -29,30 +38,94 @@ const MSG = defineMessages({ id: 'dashboard.ExpenditurePage.Stages.LinkedMotions.motion', defaultMessage: 'Motion', }, + payment: { + id: 'dashboard.ExpenditurePage.Stages.LinkedMotions.motion', + defaultMessage: 'Pay Incorporation Fee', + }, + edit: { + id: 'dashboard.ExpenditurePage.Stages.LinkedMotions.edit', + defaultMessage: 'Edit Incorporation', + }, + cancel: { + id: 'dashboard.ExpenditurePage.Stages.LinkedMotions.cancel', + defaultMessage: 'Cancel Incorporation', + }, + motionText: { + id: 'dashboard.ExpenditurePage.Stages.LinkedMotions.motionText', + defaultMessage: '{text} {count}', + }, }); const displayName = 'dashboard.ExpenditurePage.Stages.LinkedMotions'; +export enum ViewFor { + INCORPORATION = 'incorporation', + EXPENDITURE = 'expenditure', +} + +type MotionSettins = { + text?: MessageDescriptor; + tagText?: MessageDescriptor; + tagColor?: string; +}; + interface Props { - status: MotionStatus; - motionLink?: string; - motion: string; - id: string; + motion: Motion | Motion[]; + viewFor?: ViewFor; } -const LinkedMotions = ({ status, motionLink, motion, id }: Props) => { - const tagOptions = useMemo(() => { - switch (status) { - case MotionStatus.Pending: - return { text: MSG.motion, color: undefined }; - case MotionStatus.Passed: - return { text: MSG.passed, color: styles.passedColor }; - case MotionStatus.Failed: - return { text: MSG.failed, color: styles.failedColor }; - default: - return { text: '', color: undefined }; - } - }, [status]); +const LinkedMotions = ({ motion, viewFor = ViewFor.EXPENDITURE }: Props) => { + const motionSettings = useMemo( + () => (motionItem: Motion) => { + const settings: MotionSettins = { + text: undefined, + tagText: undefined, + tagColor: undefined, + }; + + switch (motionItem.type) { + case MotionType.Payment: + settings.text = MSG.payment; + break; + case MotionType.Edit: + settings.text = MSG.edit; + break; + case MotionType.Cancel: + settings.text = MSG.cancel; + break; + default: + break; + } + + switch (motionItem.status) { + case MotionStatus.Pending: + settings.tagText = MSG.motion; + settings.tagColor = undefined; + break; + case MotionStatus.Passed: + settings.tagText = MSG.passed; + settings.tagColor = styles.passedColor; + break; + case MotionStatus.Failed: + settings.tagText = MSG.failed; + settings.tagColor = styles.failedColor; + break; + default: + break; + } + + return settings; + }, + [], + ); + + // mocks, needed to display correct UI, must be adjusted to display data from the backend + const multiplePayments = + Array.isArray(motion) && + motion.filter((motionItem) => motionItem.type === MotionType.Payment) + ?.length > 1; + let paymentCount = 0; + const motionsArr = Array.isArray(motion) ? motion : [motion]; return (
@@ -61,27 +134,52 @@ const LinkedMotions = ({ status, motionLink, motion, id }: Props) => {
- +
-
- {motionLink ? ( - - - - ) : ( - - )} - -
+ {/* The link is hardcoded. Link should redirect to the motion page */} + {motionsArr.map((motionItem) => { + const motionData = motionSettings(motionItem); + if (motionItem.type === MotionType.Payment) paymentCount += 1; + + return ( +
+ + {motionData.text && ( + , + count: ( + + {multiplePayments && + paymentCount > 1 && + `#${paymentCount}`} + + ), + }} + /> + )} + + +
+ ); + })}
); }; diff --git a/src/modules/dashboard/components/ExpenditurePage/Stages/LockedStages.tsx b/src/modules/dashboard/components/ExpenditurePage/Stages/LockedStages.tsx index c15191c380..7a1cf072cf 100644 --- a/src/modules/dashboard/components/ExpenditurePage/Stages/LockedStages.tsx +++ b/src/modules/dashboard/components/ExpenditurePage/Stages/LockedStages.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useMemo } from 'react'; import { defineMessages, MessageDescriptor, useIntl } from 'react-intl'; +import { isEmpty } from 'lodash'; import Tag from '~core/Tag'; import { Colony } from '~data/index'; import { @@ -8,12 +9,12 @@ import { StageObject, ValuesType, } from '~pages/ExpenditurePage/types'; -import { LANDING_PAGE_ROUTE } from '~routes/routeConstants'; import { Motion, MotionStatus, MotionType, Status } from './constants'; import LinkedMotions from './LinkedMotions'; -import Stages from './Stages'; +import Stages, { Appearance } from './Stages'; import StreamingStagesLocked from './StreamingStages/StreamingStagesLocked'; +import { ViewFor } from './LinkedMotions/LinkedMotions'; import styles from './Stages.css'; const MSG = defineMessages({ @@ -33,12 +34,14 @@ interface Props { stages: StageObject[]; setActiveStageId?: React.Dispatch>; activeStageId?: string; - motion?: Motion; + motion?: Motion[] | Motion; status?: Status; handleCancel?: () => void; colony: Colony; expenditureType?: ExpenditureTypes; formValues?: ValuesType; + appearance?: Appearance; + viewFor?: ViewFor; } const LockedStages = ({ @@ -51,6 +54,7 @@ const LockedStages = ({ formValues, colony, expenditureType, + viewFor, }: Props) => { const activeStage = stages.find((stage) => stage.id === activeStageId); const { formatMessage } = useIntl(); @@ -77,17 +81,29 @@ const LockedStages = ({ [formatMessage], ); + // searching for motion in pending state is a mock. Will be replaced with call to backend + const pendingMotion = useMemo( + () => + Array.isArray(motion) + ? motion?.find( + (motionItem) => motionItem.status === MotionStatus.Pending, + ) + : motion?.status === MotionStatus.Pending, + [motion], + ); + return (
- {motion?.status === MotionStatus.Pending && !isStreamingPaymentType && ( + {pendingMotion && !isStreamingPaymentType && ( - {motion.type === MotionType.Edit && - motion.status === MotionStatus.Pending + {typeof pendingMotion === 'object' && + 'type' in pendingMotion && + pendingMotion.type === MotionType.Edit ? formatMessage(MSG.activeMotion) : formatMessage(MSG.motion, { action: formattedLabel(activeStage?.buttonText), @@ -97,7 +113,7 @@ const LockedStages = ({ {isStreamingPaymentType ? ( )} - {motion && ( - + {motion && !isEmpty(motion) && ( + )}
); diff --git a/src/modules/dashboard/components/ExpenditurePage/Stages/Stages.tsx b/src/modules/dashboard/components/ExpenditurePage/Stages/Stages.tsx index 12b62c87f5..b7127dfdfb 100644 --- a/src/modules/dashboard/components/ExpenditurePage/Stages/Stages.tsx +++ b/src/modules/dashboard/components/ExpenditurePage/Stages/Stages.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import { defineMessages, FormattedMessage, @@ -19,10 +19,12 @@ import { Colony } from '~data/index'; import { Stages as StagesEnum } from '~pages/IncorporationPage/constants'; import StageItem from './StageItem'; -import { Motion, MotionStatus, Stage, Status } from './constants'; +import { Motion, MotionStatus, MotionType, Stage, Status } from './constants'; import Label from './StageItem/Label'; import StagesButton from './StagesButton'; +import StagesButtonIncorporation from './StagesButtonIncorporation'; import { ClaimFundsOther, ClaimFundsRecipients } from './ClaimFunds'; +import { ViewFor } from './LinkedMotions/LinkedMotions'; import styles from './Stages.css'; const MSG = defineMessages({ @@ -90,7 +92,7 @@ export interface Props { handleSaveDraft?: () => void; handleButtonClick: () => void; status?: Status; - motion?: Motion; + motion?: Motion | Motion[]; handleCancel?: () => void; colony: Colony; buttonDisabled?: boolean; @@ -133,14 +135,37 @@ const Stages = ({ const activeStage = stages.find((stage) => stage.id === activeStageId); const isLogedIn = true; - const isCancelled = - status === Status.Cancelled || status === Status.ForceCancelled; - const claimFundsVisible = isLogedIn && activeStageId === Stage.Released && status !== Status.Cancelled; + const isCancelled = useMemo( + () => + Array.isArray(motion) + ? motion?.find( + (motionItem) => + motionItem.type === MotionType.Cancel && + motionItem.status === MotionStatus.Passed, + ) + : (motion?.type === MotionType.Cancel && + motion?.status === MotionStatus.Passed) || + status === Status.Cancelled || + status === Status.ForceCancelled, + [motion, status], + ); + + // searching for motion in pending state is a mock. Will be replaced with call to backend + const pendingMotion = useMemo( + () => + Array.isArray(motion) + ? motion?.find( + (motionItem) => motionItem.status === MotionStatus.Pending, + ) + : motion?.status === MotionStatus.Pending, + [motion], + ); + return (
{claimFundsVisible && formValues && ( @@ -151,7 +176,7 @@ const Stages = ({ colony={colony} buttonAction={activeStage?.buttonAction} buttonText={activeStage?.buttonText} - isDisabled={motion?.status === MotionStatus.Pending} + isDisabled={!!pendingMotion} /> ) : ( )} )}
@@ -296,17 +321,13 @@ const Stages = ({ activeStageId !== Stage.Claimed && (
@@ -367,7 +396,7 @@ const Stages = ({ description={description} isLast={stages.length === index + 1} isActive={activeStage ? index <= activeIndex : false} - isCancelled={isCancelled && status === Status.ForceCancelled} + isCancelled={!!isCancelled} labelComponent={ status === Status.ForceEdited && index === activeIndex &&