Add various states of Motions

src/modules/dashboard/components/Dialogs/CancelIncorporationDialog/CancelIncorporationDialog.tsx

@@ -53,9 +53,9 @@ const MSG = defineMessages({
     id: `dashboard.CancelExpenditureDialog.CancelIncorporationDialog.mercyMessage`,
     defaultMessage: 'Owner will keep their stake and reputation.',
   },
-  createMotion: {
-    id: `dashboard.CancelExpenditureDialog.CancelIncorporationDialog.createMotion`,
-    defaultMessage: 'Create Motion',
+  submit: {
+    id: 'dashboard.CancelExpenditureDialog.CancelIncorporationDialog.submit',
+    defaultMessage: 'Submit',
   },
   textareaLabel: {
     id: `dashboard.CancelExpenditureDialog.CancelIncorporationDialog.textareaLabel`,
@@ -65,9 +65,9 @@ const MSG = defineMessages({
     id: `dashboard.CancelExpenditureDialog.CancelIncorporationDialog.effectTooltip`,
     defaultMessage: `Decide what to do with the owner's stake when cancelling this incorporation.`,
   },
-  continue: {
-    id: `dashboard.CancelExpenditureDialog.CancelIncorporationDialog.continue`,
-    defaultMessage: 'Continue',
+  createDomain: {
+    id: `dashboard.CancelExpenditureDialog.CancelIncorporationDialog.createDomain`,
+    defaultMessage: 'Motion will be created in',
   },
 });
 
@@ -269,11 +269,7 @@ const CancelIncorporationDialog = ({
                   width: styles.buttonWidth,
                 }}
                 autoFocus
-                text={
-                  formValues.values.forceAction
-                    ? MSG.continue
-                    : MSG.createMotion
-                }
+                text={{ id: 'button.submit' }}
                 type="submit"
                 onClick={() => {
                   onCancelIncorporation(formValues.values.forceAction);

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 {

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 (
     <div className={styles.wrapper}>
@@ -61,27 +134,52 @@ const LinkedMotions = ({ status, motionLink, motion, id }: Props) => {
         <div className={styles.dot} />
         <div className={styles.line} />
         <div className={styles.title}>
-          <FormattedMessage {...MSG.linkedMotions} />
+          <FormattedMessage
+            {...(viewFor === ViewFor.EXPENDITURE
+              ? MSG.linkedMotionExpenditure
+              : MSG.linkedMotionIncorporation)}
+          />
         </div>
       </div>
-      <div className={styles.statusWrapper}>
-        {motionLink ? (
-          <Link to={motionLink} className={styles.link}>
-            <FormattedMessage {...MSG.foundExp} values={{ motion, id }} />
-          </Link>
-        ) : (
-          <FormattedMessage {...MSG.foundExp} values={{ motion, id }} />
-        )}
-        <Tag
-          text={tagOptions.text}
-          style={{
-            color: tagOptions.color,
-          }}
-          appearance={{
-            theme: status === MotionStatus.Pending ? 'primary' : 'light',
-          }}
-        />
-      </div>
+      {/* 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 (
+          <div className={styles.statusWrapper}>
+            <Link to={LANDING_PAGE_ROUTE} className={styles.link}>
+              {motionData.text && (
+                <FormattedMessage
+                  {...MSG.motionText}
+                  values={{
+                    text: <FormattedMessage {...motionData.text} />,
+                    count: (
+                      <span>
+                        {multiplePayments &&
+                          paymentCount > 1 &&
+                          `#${paymentCount}`}
+                      </span>
+                    ),
+                  }}
+                />
+              )}
+            </Link>
+            <Tag
+              text={motionData.tagText}
+              style={{
+                color: motionData.tagColor,
+              }}
+              appearance={{
+                theme:
+                  motionItem.status === MotionStatus.Pending
+                    ? 'primary'
+                    : 'light',
+              }}
+            />
+          </div>
+        );
+      })}
     </div>
   );
 };

src/modules/dashboard/components/ExpenditurePage/Stages/LockedStages.tsx

@@ -1,19 +1,20 @@
 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 {
   ExpenditureTypes,
   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<React.SetStateAction<string | undefined>>;
   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 (
     <div className={styles.tagStagesWrapper}>
-      {motion?.status === MotionStatus.Pending && !isStreamingPaymentType && (
+      {pendingMotion && !isStreamingPaymentType && (
         <Tag
           appearance={{
             theme: 'golden',
             colorSchema: 'fullColor',
           }}
         >
-          {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 ? (
         <StreamingStagesLocked
           status={status}
-          motion={motion}
+          motion={Array.isArray(motion) ? undefined : motion}
           colony={colony}
           activeStageId={activeStageId}
           handleCancel={handleCancel}
@@ -120,15 +136,8 @@ const LockedStages = ({
           activeLine
         />
       )}
-      {motion && (
-        <LinkedMotions
-          status={motion.status}
-          motion={motion.type}
-          // The id and the link are hardcoded, they should be replaced with actual values.
-          // Link should redirect to the motion page
-          motionLink={LANDING_PAGE_ROUTE}
-          id="25"
-        />
+      {motion && !isEmpty(motion) && (
+        <LinkedMotions motion={motion} viewFor={viewFor} />
       )}
     </div>
   );