diff --git a/src/components/inputs/company-input-v2.js b/src/components/inputs/company-input-v2.js index bfc80df5..27675921 100644 --- a/src/components/inputs/company-input-v2.js +++ b/src/components/inputs/company-input-v2.js @@ -13,6 +13,7 @@ import React from "react"; import PropTypes from "prop-types"; +import T from "i18n-react/dist/i18n-react"; import { TextField, Autocomplete, Typography } from "@mui/material"; import { queryRegistrationCompanies } from "../../utils/query-actions"; @@ -20,6 +21,12 @@ const CompanyInputV2 = ({ summitId, isRequired, sx, onChange, id, name, label, v const [inputValue, setInputValue] = React.useState(""); const [options, setOptions] = React.useState([]); + const noCompanyMatchText = T.translate("request_modal.no_company_match"); + const createAccessRequestText = (companyName) => + T.translate("request_modal.create_company_access_request", { + companyName: `"${companyName}"` + }); + React.useEffect(() => { if (inputValue === "") { setOptions(value ? [value] : []); @@ -40,7 +47,7 @@ const CompanyInputV2 = ({ summitId, isRequired, sx, onChange, id, name, label, v setOptions(newOptions); }, options2Show); return undefined; - }, [value, inputValue]); + }, [value, inputValue, summitId, options2Show]); return ( { let tmpValue = newValue?.inputValue || newValue; // if new option is selected ... - if (newValue && typeof newValue === 'object' && newValue.inputValue) { + if (newValue && typeof newValue === "object" && newValue.inputValue) { tmpValue = { id: 0, name: newValue.inputValue }; - } + } setOptions(tmpValue ? [tmpValue, ...options] : options); let ev = { target: { id: name, value: tmpValue, - type: 'companyinput' + type: "companyinput" } }; onChange(ev); @@ -90,15 +97,24 @@ const CompanyInputV2 = ({ summitId, isRequired, sx, onChange, id, name, label, v }} filterOptions={(options, params) => { const { inputValue } = params; + const trimmedInput = inputValue.trim(); const filtered = [...options]; + // Suggest the creation of a new value const isExisting = options.some( - (option) => inputValue === option.title + (option) => { + if (typeof option === "string") { + return option.toLowerCase() === trimmedInput.toLowerCase(); + } + + return option.name?.toLowerCase() === trimmedInput.toLowerCase(); + } ); - if (inputValue !== "" && !isExisting) { + + if (trimmedInput !== "" && !isExisting) { filtered.push({ - inputValue, - name: `Select "${inputValue}"` + inputValue: trimmedInput, + name: noCompanyMatchText }); } @@ -115,20 +131,48 @@ const CompanyInputV2 = ({ summitId, isRequired, sx, onChange, id, name, label, v helperText={helperText} error={error} margin="normal" - InputLabelProps={{ shrink: disableShrink }} + InputLabelProps={disableShrink ? { shrink: false } : undefined} /> )} renderOption={(props, option) => { const { key, ...optionProps } = props; + const isCreateOption = Boolean(option.inputValue); + return ( // eslint-disable-next-line react/jsx-props-no-spreading -
  • - - {option.name} - +
  • + {isCreateOption ? ( + <> + + {noCompanyMatchText} + + + {createAccessRequestText(option.inputValue)} + + + ) : ( + + {option.name} + + )}
    • ); }} diff --git a/src/components/mui/AuthButton/index.js b/src/components/mui/AuthButton/index.js index 72908a41..f6360d15 100644 --- a/src/components/mui/AuthButton/index.js +++ b/src/components/mui/AuthButton/index.js @@ -11,56 +11,188 @@ * limitations under the License. * */ -import React, { useState } from "react"; -import T from "i18n-react"; -import {Button, Box} from '@mui/material'; -import styles from "./styles.module.scss" +import React, {useRef, useState} from "react"; +import T from "i18n-react/dist/i18n-react"; +import {useTheme} from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import Typography from "@mui/material/Typography"; +import AccountCircleIcon from "@mui/icons-material/AccountCircle"; +import LogoutIcon from "@mui/icons-material/Logout"; +import PersonIcon from "@mui/icons-material/Person"; +import SettingsIcon from "@mui/icons-material/Settings"; +import styles from "./styles.module.scss"; -const AuthButton = ({ isLoggedUser, doLogin, initLogOut, picture }) => { - const [showLogOut, setShowLogOut] = useState(false); +const AuthButton = ({ + isLoggedUser, + doLogin, + initLogOut, + profileEmail, + profileName + }) => { + const theme = useTheme(); + const anchorRef = useRef(null); + const [menuOpen, setMenuOpen] = useState(false); - const toggleLogOut = () => { - setShowLogOut(!showLogOut); + const menuFontSize = theme?.custom?.menu?.fontSize || "1.4rem"; + const menuLineHeight = theme?.custom?.menu?.lineHeight || "2rem"; + const menuIconColor = theme?.custom?.menu?.icon || theme.palette.text.secondary; + + const openMenu = () => { + setMenuOpen(true); + }; + + const closeMenu = () => { + setMenuOpen(false); }; if (isLoggedUser) { return ( -
    -
    - {showLogOut && ( - - )} -
    - ); - } - return ( - - + + + + + + ); + } + return ( + + + + ); }; export default AuthButton; diff --git a/src/components/mui/AuthButton/styles.module.scss b/src/components/mui/AuthButton/styles.module.scss index d3074ae3..cd1b344c 100644 --- a/src/components/mui/AuthButton/styles.module.scss +++ b/src/components/mui/AuthButton/styles.module.scss @@ -1,28 +1,13 @@ .userMenu { position: absolute; - top: 12px; - right: 34px; - height: 40px; - width: 140px; - cursor: pointer; + top: 50%; + right: 24px; + display: flex; + justify-content: flex-end; + transform: translateY(-50%); } .login { width: 100%; text-align: right; -} - -.logout { - top: 4px; - right: 4px; -} - -.profilePic { - height: 40px; - width: 40px; - border: 1px solid #afafaf; - border-radius: 20px; - overflow: hidden; - float: right; - background-size: cover; } \ No newline at end of file diff --git a/src/components/mui/CartButton/index.js b/src/components/mui/CartButton/index.js index fd033ee0..c704723f 100644 --- a/src/components/mui/CartButton/index.js +++ b/src/components/mui/CartButton/index.js @@ -13,11 +13,13 @@ import React from "react"; import { Button, Box } from "@mui/material"; -import T from "i18n-react"; +import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; +import T from "i18n-react/dist/i18n-react"; const CartButton = ({ itemCount, onClick, sx, disabled }) => { return (