Merge pull request #2921 from bluewave-labs/develop

develop -> master

Author: ajhollid

.coderabbit.yml

@@ -0,0 +1 @@
+release_notes: false

.github/scripts/download-translations.js

@@ -7,7 +7,7 @@ import { URLSearchParams } from "url";
 const API_TOKEN = process.env.POEDITOR_API;
 const PROJECT_ID = process.env.POEDITOR_PROJECT_ID;
 const LANGUAGES = (
-  process.env.LANGUAGES || "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja"
+  process.env.LANGUAGES || "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn"
 ).split(",");
 const EXPORT_FORMAT = process.env.EXPORT_FORMAT || "key_value_json";
 

.github/workflows/check-format.yml

@@ -16,7 +16,7 @@ jobs:
 
       - name: Install client dependencies
         working-directory: client
-        run: npm ci
+        run: npm install
 
       - name: Check client formatting
         working-directory: client
@@ -34,7 +34,7 @@ jobs:
 
       - name: Install server dependencies
         working-directory: server
-        run: npm ci
+        run: npm install
 
       - name: Check server formatting
         working-directory: server

.github/workflows/poeditor-sync.yml

@@ -7,7 +7,7 @@ on:
       languages:
         description: "Languages to synchronize (comma separated, e.g.: tr,en,es)"
         required: false
-        default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja"
+        default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn"
       format:
         description: "Export format (key_value_json or json)"
         required: false

client/src/Components/Charts/StatusPageBarChart/index.jsx

@@ -22,8 +22,8 @@ const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
 
 	return (
 		<Box
-			position="relative"
 			width={width}
+			position="relative"
 			height={height}
 			backgroundColor={backgroundColor}
 			sx={{
@@ -36,7 +36,7 @@ const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
 };
 
 Bar.propTypes = {
-	width: PropTypes.string.isRequired,
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
 	height: PropTypes.string.isRequired,
 	backgroundColor: PropTypes.string.isRequired,
 	borderRadius: PropTypes.string,

client/src/Components/Check/Check.jsx

@@ -65,7 +65,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 };
 
 Check.propTypes = {
-	text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 	noHighlightText: PropTypes.string,
 	variant: PropTypes.oneOf(["info", "error", "success"]),
 	outlined: PropTypes.bool,

client/src/Components/Dialog/genericDialog.jsx

@@ -2,7 +2,7 @@ import { useId } from "react";
 import PropTypes from "prop-types";
 import { Modal, Stack, Typography } from "@mui/material";
 
-const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+const GenericDialog = ({ title, description, open, onClose, theme, children, width }) => {
 	const titleId = useId();
 	const descriptionId = useId();
 	const ariaDescribedBy = description?.length > 0 ? descriptionId : "";
@@ -16,6 +16,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 		>
 			<Stack
 				gap={theme.spacing(2)}
+				width={width}
 				sx={{
 					position: "absolute",
 					top: "50%",
@@ -39,13 +40,15 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					fontSize={16}
 					color={theme.palette.primary.contrastText}
 					fontWeight={600}
+					marginBottom={theme.spacing(4)}
 				>
 					{title}
 				</Typography>
 				{description && (
 					<Typography
 						id={descriptionId}
 						color={theme.palette.primary.contrastTextTertiary}
+						marginBottom={theme.spacing(4)}
 					>
 						{description}
 					</Typography>
@@ -64,6 +67,7 @@ GenericDialog.propTypes = {
 	theme: PropTypes.object.isRequired,
 	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 		.isRequired,
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
 };
 
 export { GenericDialog };

client/src/Hooks/inviteHooks.js

@@ -14,33 +14,52 @@ const useGetInviteToken = () => {
 	const clearToken = () => {
 		setToken(undefined);
 	};
-
+	const fetchToken = async (email, role) => {
+		const response = await networkService.requestInvitationToken({ email, role });
+		const token = response?.data?.data?.token;
+		if (typeof token === "undefined") {
+			throw new Error(t("inviteNoTokenFound"));
+		}
+		return token;
+	};
 	const getInviteToken = async ({ email, role }) => {
 		try {
-			const response = await networkService.requestInvitationToken({
-				email,
-				role,
-			});
-			const token = response?.data?.data?.token;
-			if (typeof token === "undefined") {
-				throw new Error(t("inviteNoTokenFound"));
-			}
-
+			setIsLoading(true);
+			const token = await fetchToken(email, role);
 			let inviteLink = token;
 
 			if (typeof CLIENT_HOST !== "undefined") {
 				inviteLink = `${CLIENT_HOST}/register/${token}`;
 			}
-
 			setToken(inviteLink);
+			return token;
+		} catch (error) {
+			setError(error);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const addTeamMember = async (formData, role) => {
+		try {
+			setIsLoading(true);
+			const token = await fetchToken(formData.email, role);
+			const toSubmit = {
+				...formData,
+				inviteToken: token,
+			};
+			delete toSubmit.confirm;
+			const responseRegister = await networkService.registerUser(toSubmit);
+			return responseRegister;
 		} catch (error) {
 			setError(error);
+			throw error;
 		} finally {
 			setIsLoading(false);
 		}
 	};
 
-	return [getInviteToken, clearToken, isLoading, error, token];
+	return [getInviteToken, clearToken, isLoading, error, token, addTeamMember];
 };
 
 export { useGetInviteToken };

client/src/Pages/Account/components/AddMemberMenu/index.jsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useTheme } from "@emotion/react";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { useTranslation } from "react-i18next";
+import Proptypes from "prop-types";
+
+const AddMemberMenu = ({ handleInviteOpen, handleIsRegisterOpen }) => {
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<>
+			<Button
+				variant="contained"
+				color="accent"
+				endIcon={<ArrowDropDownIcon sx={{ color: theme.palette.secondary.light }} />}
+				onClick={handleClick}
+			>
+				{t("teamPanel.addTeamMember.addMemberMenu")}
+			</Button>
+			<Menu
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				sx={{
+					"& .MuiPaper-root": {
+						minWidth: anchorEl?.offsetWidth || "auto",
+					},
+				}}
+			>
+				<MenuItem
+					onClick={() => {
+						handleClose();
+						handleInviteOpen();
+					}}
+				>
+					{t("teamPanel.inviteTeamMember")}
+				</MenuItem>
+				<MenuItem
+					onClick={() => {
+						handleClose();
+						handleIsRegisterOpen(true);
+					}}
+				>
+					{t("teamPanel.register")}
+				</MenuItem>
+			</Menu>
+		</>
+	);
+};
+
+AddMemberMenu.propTypes = {
+	handleInviteOpen: Proptypes.func.isRequired,
+	handleIsRegisterOpen: Proptypes.func.isRequired,
+};
+
+export default AddMemberMenu;

client/src/Pages/Account/components/AddTeamMember/hooks/useAddTeamMember.jsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { newOrChangedCredentials } from "../../../../../Validation/validation";
+import { useTranslation } from "react-i18next";
+const useAddTeamMember = () => {
+	const { t } = useTranslation();
+	const [errors, setErrors] = useState({});
+
+	const clearErrors = () => setErrors({});
+
+	const validateFields = (name, value, formData) => {
+		const { error } = newOrChangedCredentials.validate(
+			{ [name]: value },
+			{ abortEarly: false, context: { password: formData.password } }
+		);
+
+		setErrors((prev) => ({
+			...prev,
+			[name]: error?.details?.[0]?.message || "",
+		}));
+	};
+
+	const validateForm = (formData, role) => {
+		const { error } = newOrChangedCredentials.validate(formData, {
+			abortEarly: false,
+			context: { password: formData.password },
+		});
+		const formErrors = {};
+		if (error) {
+			for (const err of error.details) {
+				formErrors[err.path[0]] = err.message;
+			}
+		}
+		if (!role[0] || role.length === 0) {
+			formErrors.role = t(
+				"teamPanel.registerTeamMember.auth.common.inputs.role.errors.empty"
+			);
+		}
+		if (Object.keys(formErrors).length > 0) {
+			setErrors(formErrors);
+			return false;
+		}
+		setErrors({});
+		return true;
+	};
+
+	return { errors, setErrors, clearErrors, validateFields, validateForm };
+};
+export default useAddTeamMember;