const contribution = props.contribution; const request = props.request; const projectName = props.projectName; const vendorName = props.vendorName; const activity = [ { id: "created", text: <><b>{projectName}</b> created a contract <b>"{request.title}"</b> with <b>{vendorName}</b></> }, { id: "awaiting", text: <>Awaiting approval by <b>{vendorName}</b></> }, ]; if (!("Rejected" in contribution.status) && !("Created" in contribution.status)) { activity.push({ id: "accepted", text: <><b>{vendorName}</b> accepted contract</> }); activity.push({ id: "started", text: <>Contract has started</> }); } if ("Rejected" in contribution.status) { activity.push({ id: "rejected", text: <><b>{vendorName}</b> rejected contract</> }); } if (contribution.status === "Ongoing" || "Delivered" in contribution.status || "Completed" in contribution.status) { activity.push({ id: "ongoing", text: <>Work in progress</> }); } contribution.actions.forEach(({ description, start_date, end_date }) => activity.push({ id: start_date, text: <>{description}</>, timestamp: `${new Date(Number(start_date)).toLocaleDateString()}${end_date ? " - " + new Date(Number(end_date)).toLocaleDateString() : ""}` })); if ("Delivered" in contribution.status || "Completed" in contribution.status) { activity.push({ id: "delivered", text: <>Contract marked as delivered by <b>{vendorName}</b></> }); } if ("Completed" in contribution.status) { activity.push({ id: "completed", text: <>Contract completed</> }); } const List = styled.ul` list-style-type: image; list-style-image: url(https://ipfs.near.social/ipfs/bafkreicxzxikc435dyiwilxuitevu5uiwoea4ls6o7ckdev3esjs6r3p5q); width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0; gap: 2em; `; return <List>{ activity.reverse().map(({ id, text, timestamp }) => <li key={id}><span>{text}</span><small>{timestamp}</small></li>) }</List>;