const { open, componentOwnerId, addCreateBoardStatus, accountId, handleBoards, contract, createBoardStatus, createBoardButton, addBoard, } = props; const Overlay = styled.div` background-color: var(--blackA9); position: fixed; z-index: 1000; inset: 0; display: flex; justify-content: center; align-items: center; animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); `; const ModalContent = styled.div` position: absolute; width: 500px; padding: 30px; border-radius: 20px; color: white; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const Text = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-weight: 500; line-height: 120% margin-bottom: 1rem; font-style: normal; `; const Title = styled.input` color: #fff; width: 100%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: #0e0e10; border: none; :focus { outline-color: #d0fc42; outline-style: solid; outline-width: 1px; } `; const Label = styled.label` color: #777583; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; width: 30%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: transparent; :focus { outline-color: #d0fc42; outline-style: solid; outline-width: 1px; } border: none; `; const CloseButton = styled.div` color: #fff; :hover { color: #d0fc42; } cursor: pointer; `; const Header = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; `; const InputContainer = styled.div` display: flex; flex-direction: row; align-items: center; `; const FieldContainer = styled.div` position: relative; width: 100%; `; const MissingText = styled.div` position: absolute; right: 36%; top: 75%; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const MissingTitle = styled.div` position: absolute; left: 14px; top: 75%; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const FunctionButton = styled.button` background-color: #d0fc42; :hover { opacity: 0.8; } color: #0e0e10; border-radius: 4px; margin-top: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const DialogTitle = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; `; const [boardName, setBoardName] = useState(""); const [addBoardNameMissing, setAddBoardNameMissing] = useState(null); const [isCreateBoardDialogVisible, setIsCreateBoardDialogVisible] = useState(false); const onChangeBoardName = ({ target }) => { setAddBoardNameMissing(null); setBoardName(target.value); }; const handleOnClose = useCallback(() => { setIsCreateBoardDialogVisible(false); setBoardName(null); }, []); const createBoard = useCallback(async () => { let newStatus = { name: boardName, status: "Saving" }; try { addCreateBoardStatus(newStatus); const newBoard = [null, boardName]; addBoard(newBoard); Near.fakCalimeroCall(contract, "create_new_project", { name: boardName, owner: accountId, members: [accountId], statuses: ["TO DO", "IN PROGRESS", "DONE"], }).then(() => { newStatus.status = "Saved"; addCreateBoardStatus(newStatus); }); } catch { newStatus.status = "Error"; addCreateBoardStatus(newStatus); } setIsCreateBoardDialogVisible(false); setBoardName(""); }, [boardName, addCreateBoardStatus, accountId, contract]); const content = ( <Overlay> <ModalContent> <PopupContainer> <Header> <DialogTitle>Create new Board</DialogTitle> <CloseButton onClick={handleOnClose}> <i className="bi bi-x-lg"></i> </CloseButton> </Header> <FieldContainer> <Title onChange={onChangeBoardName} value={boardName} placeholder="Add Name" /> {addBoardNameMissing && ( <MissingTitle>{addBoardNameMissing}</MissingTitle> )} </FieldContainer> <FunctionButton onClick={() => { if (!!boardName) { createBoard(); } else { setAddBoardNameMissing("Missing name"); } }} > Create </FunctionButton> </PopupContainer> </ModalContent> </Overlay> ); return ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Popups.BaseModal`} props={{ toggle: createBoardButton, content, open: isCreateBoardDialogVisible, onOpenChange: (open) => setIsCreateBoardDialogVisible(open), }} /> );