const Text = 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 Input = 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; `; const FunctionButton = styled.button` background-color: ${({ disabled }) => (disabled ? "#3B487A" : "#5765f2")}; :hover { background-color: ${({ disabled }) => (disabled ? "#3B487A" : "#717cf0;")}; } color: #fff; border-radius: 4px; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const CloseButton = styled.div` color: #fff; :hover { color: #5765f2; } position: absolute; right: 1rem; cursor: pointer; `; const { title, toggle, placeholder, functionLoader, buttonText, componentOwnerId, validator } = props; const BaseModal = (props) => ( <Widget src={`${componentOwnerId}/widget/Calimero.Common.Popups.BaseModal`} props={{ ...props, componentOwnerId, }} /> ); const [isOpen, setIsOpen] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [inputValue, setInputValue] = useState(""); const [validInput, setValidInput] = useState(false); const runProcess = () => { setIsProcessing(true); functionLoader(inputValue).then((res) => { setIsProcessing(false); setIsOpen(false); }); }; const onOpenChange = (isOpen) => { if (isProcessing && !isOpen) { return; } setIsOpen(isOpen); }; const handleClosePopup = () => { if (isProcessing) return; setIsOpen(false); }; const popupContent = ( <> <CloseButton onClick={handleClosePopup}> <i className="bi bi-x-lg"></i> </CloseButton> <Text>{title}</Text> <Input onChange={(e) => { setInputValue(e.target.value); if (validator) { setValidInput(validator(e.target.value)); } }} value={inputValue} placeholder={placeholder} /> <FunctionButton onClick={runProcess} disabled={validator && !validInput}> {isProcessing ? ( <Widget src={`${componentOwnerId}/widget/Calimero.Curb.Loader.Loader`} props={{ size: 16 }} /> ) : ( buttonText )} </FunctionButton> </> ); return ( <BaseModal toggle={toggle} content={popupContent} open={isOpen} onOpenChange={onOpenChange} /> );