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 ? `${colors.disabled};` : `${colors.base};`}; :hover { background-color: ${({ disabled }) => disabled ? `${colors.disabled};` : `${colors.hover};`}; } color: #fff; border-radius: 4px; margin-top: 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 UserList = styled.div` position: absolute; left: 0px; top: 7rem; overflow-y: scroll; max-height: 150px; width: 100%; background-color: #1d1d21; border-radius: 4px; padding: 8px; scrollbar-color: black black; ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: black; } * { scrollbar-color: black black; } html::-webkit-scrollbar { width: 12px; } html::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } html::-webkit-scrollbar-thumb:hover { background-color: black; } `; const UserListItem = styled.div` display: flex; justify-content: space-between; align-items: center; color: #777583; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; cursor: pointer; :hover { background-color: #25252a; } `; const UserInfo = styled.div` display: flex; column-gap: 0.5rem; `; const UserText = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; const { title, toggle, placeholder, functionLoader, buttonText, componentOwnerId, validator, colors, isChild, autocomplete, nonInvitedUserList, } = 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 [chatUsersNotInMembers, setChatUsersNotInMembers] = useState([]); const [showAutocomplete, setShowAutocomplete] = useState(false); const runProcess = () => { setIsProcessing(true); functionLoader(inputValue).then((_) => { setIsProcessing(false); setIsOpen(false); }); }; const onOpenChange = (isOpen) => { if (isProcessing && !isOpen) { return; } setIsOpen(isOpen); }; const handleClosePopup = () => { if (isProcessing) return; setIsOpen(false); }; const AutocompleteContainer = ({ value, inviteUsers, selectUser }) => { return ( <> {inviteUsers.length && ( <UserList> {inviteUsers.map( (user, id) => user.id !== value && ( <UserListItem key={id} onClick={() => selectUser(user.id)}> <UserInfo> <Widget src={`${componentOwnerId}/widget/Calimero.Curb.ProfileIcon.UserProfileIcon`} props={{ accountId: user.id, active: user.active, componentOwnerId, }} /> <UserText>{user.id}</UserText> </UserInfo> </UserListItem> ) )} </UserList> )} </> ); }; const selectUser = (userId) => { setInputValue(userId); setValidInput(validator(userId)); setShowAutocomplete(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)); } if (e.target.value) { setShowAutocomplete(true); } else { setShowAutocomplete(false); } }} value={inputValue} placeholder={placeholder} /> {autocomplete && inputValue && nonInvitedUserList.length > 0 && showAutocomplete && ( <AutocompleteContainer value={inputValue} inviteUsers={nonInvitedUserList} selectUser={selectUser} /> )} <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} isChild={isChild} /> );