@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/components/ResizePanel/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import ResizeHandle from "./ResizeHandle";
 
@@ -10,12 +10,19 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 	const { leftPanel, rightPanel, fixed = true, full = false, disabled } = props;
 
 	const [rwidth, setRwidth] = useState(MIN_WIDTH);
+	const [containerWidth, setContainerWidth] = useState(0);
 	const rightPanelRef = useRef<HTMLDivElement>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
 
+	useLayoutEffect(() => {
+		if (containerRef.current) {
+			setContainerWidth(containerRef.current.offsetWidth);
+		}
+	}, []);
+
 	const calculateFixedPanelMinWidth = (currentWidth: number) => {
-		const containerWidth = containerRef.current?.offsetWidth ?? 1280;
-		const minWidth = Math.max(500, containerWidth - currentWidth - 32);
+		const width = containerWidth || window.innerWidth;
+		const minWidth = Math.max(500, width - currentWidth - 32);
 		return `${minWidth}px`;
 	};
 
@@ -34,6 +41,20 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 		return () => window.removeEventListener("resize", updateWidth);
 	}, []);
 
+	useEffect(() => {
+		const resizeObserver = new ResizeObserver(() => {
+			if (containerRef.current) {
+				setContainerWidth(containerRef.current.offsetWidth);
+			}
+		});
+
+		if (containerRef.current) {
+			resizeObserver.observe(containerRef.current);
+		}
+
+		return () => resizeObserver.disconnect();
+	}, []);
+
 	const resize = (value: number) => {
 		if (value > MIN_WIDTH) setRwidth(value);
 	};
@@ -53,7 +74,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 					leftPanel
 				)}
 			</S.LeftPanel>
-			{!disabled && <ResizeHandle onMouseMove={resize} />}
+			{!disabled && <ResizeHandle onMouseMove={resize} currentWidth={rwidth} />}
 			<S.RightPanel ref={rightPanelRef} data-testid="right-panel" style={{ width: rwidth ? `${rwidth}px` : "auto" }}>
 				{rightPanel}
 			</S.RightPanel>

package/src/components/Tabs/style.tsx

@@ -9,7 +9,7 @@ const TabsRow = styled.div<{ icons?: boolean; isInAppBar?: boolean; noMargins?:
 `;
 
 const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?: boolean; isDisabled?: boolean }>`
-  flex-grow: 1;
+  flex: 1;
   ${(p) => p.theme.textStyle.headingXS};
   border: none;
   border-bottom: ${(p) => (p.active ? "4px solid" : "none")};

package/src/components/Tag/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Icon } from "@ax/components";
 
 import * as S from "./style";

package/src/components/UserRolesAndSites/RoleItem/index.tsx

@@ -0,0 +1,42 @@
+import { ElementsTooltip } from "@ax/components";
+import type { IRole } from "@ax/types";
+
+import * as S from "./style";
+
+const RoleItem = ({ title, description, roles, isSuperAdmin = false }: IProps) => {
+	const rolesString = isSuperAdmin ? ["Super-admin"] : roles.map((role: IRole) => role.name);
+
+	const colors = isSuperAdmin
+		? { "Super-admin": "#E7CBFE" }
+		: rolesString?.reduce((prev: Record<string, string | undefined>, current) => {
+				const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
+				prev[current] = color?.hex;
+				return prev;
+			}, {});
+
+	return (
+		<S.Wrapper>
+			<S.Title>{title}</S.Title>
+			<S.Description>{description}</S.Description>
+			<S.TagWrapper>
+				<ElementsTooltip
+					elements={rolesString}
+					maxChar={30}
+					rounded={true}
+					defaultElements={1}
+					elementsPerRow={2}
+					colors={colors}
+				/>
+			</S.TagWrapper>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	title: string;
+	description: string;
+	roles: IRole[];
+	isSuperAdmin?: boolean;
+}
+
+export default RoleItem;

package/src/components/UserRolesAndSites/RoleItem/style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-radius: ${(p) => p.theme.radii.s};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  padding: ${(p) => p.theme.spacing.s};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const TagWrapper = styled.div`
+  position: absolute;
+  right: ${(p) => p.theme.spacing.s};
+  top: ${(p) => p.theme.spacing.s};
+`;
+
+export { Wrapper, Title, Description, TagWrapper };

package/src/components/UserRolesAndSites/index.tsx

@@ -0,0 +1,102 @@
+import { ElementsTooltip } from "@ax/components";
+import type { IRole, ISite, ISiteRoles } from "@ax/types";
+
+import RoleItem from "./RoleItem";
+
+import * as S from "./style";
+
+const UserRolesAndSites = (props: IUserRolesAndSitesProps): JSX.Element => {
+	const { isSuperAdmin, userRoles, sites, roles, showRows: showRowsProp } = props;
+
+	const globalSiteRole = userRoles.find((ur) => ur.siteId === "global");
+	const globalRoles = globalSiteRole ? roles.filter((r) => globalSiteRole.roles.includes(r.id)) : [];
+
+	const allSiteRole = userRoles.find((ur) => ur.siteId === "all");
+	const allRoles = allSiteRole ? roles.filter((r) => allSiteRole.roles.includes(r.id)) : [];
+
+	const siteRoles = userRoles.filter((ur) => ur.siteId !== "global" && ur.siteId !== "all");
+
+	const showRows = showRowsProp !== undefined ? showRowsProp : isSuperAdmin || (!!allSiteRole && !globalSiteRole);
+
+	return (
+		<>
+			<S.RolesContent>
+				{isSuperAdmin && (
+					<div data-testid="final-step-super-admin">
+						<RoleItem
+							title="You are a Super admin"
+							description="You have full access to all features and their configuration. You have access to all sites."
+							roles={[]}
+							isSuperAdmin={isSuperAdmin}
+						/>
+					</div>
+				)}
+				{globalRoles.length > 0 && (
+					<div data-testid="final-step-global-role">
+						<RoleItem
+							title="Global data permissions"
+							description="You can access to Global data based on the permissions assigned to the role."
+							roles={globalRoles}
+						/>
+					</div>
+				)}
+			</S.RolesContent>
+			{(siteRoles.length > 0 || allRoles.length > 0) && !isSuperAdmin && (
+				<S.SitesContent data-testid="final-step-sites-content">
+					{!showRows && <S.SitesHeader>Access to Sites</S.SitesHeader>}
+					{allRoles.length > 0 && (
+						<RoleItem
+							title="Access to All Sites"
+							description="You can access to all existing and future sites depending on the permissions assigned to the role."
+							roles={allRoles}
+						/>
+					)}
+					<S.SitesGrid>
+						{siteRoles.map((ur) => {
+							const site = sites.find((s) => s.id === ur.siteId);
+							if (!site) return null;
+
+							const rolesString = roles
+								?.filter((role: IRole) => ur.roles?.includes(role.id))
+								.map((role: IRole) => role.name);
+
+							const colors = rolesString?.reduce((prev: Record<string, string | undefined>, current) => {
+								const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
+								prev[current] = color?.hex;
+								return prev;
+							}, {});
+
+							return (
+								<S.SiteCard key={site.id}>
+									<S.SiteCardHeader>
+										<S.SiteName>{site.name}</S.SiteName>
+									</S.SiteCardHeader>
+									<S.TagsRow>
+										<ElementsTooltip
+											elements={rolesString}
+											maxChar={30}
+											rounded={true}
+											defaultElements={1}
+											elementsPerRow={2}
+											colors={colors}
+										/>
+									</S.TagsRow>
+								</S.SiteCard>
+							);
+						})}
+					</S.SitesGrid>
+				</S.SitesContent>
+			)}
+		</>
+	);
+};
+
+interface IUserRolesAndSitesProps {
+	isSuperAdmin: boolean;
+	userRoles: ISiteRoles[];
+	sites: ISite[];
+	roles: IRole[];
+	showRows?: boolean;
+}
+
+export default UserRolesAndSites;

package/src/components/UserRolesAndSites/style.tsx

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+
+const SitesContent = styled.div`
+  padding-top: ${(p) => p.theme.spacing.s};
+`;
+
+const RolesContent = styled.div`
+  padding-top: ${(p) => p.theme.spacing.s};
+`;
+
+const SitesHeader = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const SitesGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: ${(p) => p.theme.spacing.xs};
+`;
+
+const SiteCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.spacing.xxs};
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.theme.spacing.s};
+  height: 96px;
+`;
+
+const SiteCardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.spacing.xxs};
+`;
+
+const SiteAvatar = styled.img`
+  width: 32px;
+  height: 32px;
+  border-radius: ${(p) => p.theme.radii.xs};
+  object-fit: cover;
+  flex-shrink: 0;
+  margin-right: ${(p) => p.theme.spacing.xxs};
+`;
+
+const SiteName = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const TagsRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.spacing.xxs};
+  flex-wrap: wrap;
+  margin-top: auto;
+
+  & > div {
+    margin-bottom: 0;
+  }
+`;
+
+export { RolesContent, SitesContent, SitesHeader, SitesGrid, SiteCard, SiteCardHeader, SiteAvatar, SiteName, TagsRow };

package/src/components/index.tsx

@@ -73,6 +73,7 @@ import HeadingsPreviewModal from "./HeadingsPreviewModal";
 import Icon from "./Icon";
 import IconAction from "./IconAction";
 import Image from "./Image";
+import ImageDragAndDrop from "./ImageDragAndDrop";
 import InformativeMenu from "./InformativeMenu";
 import KeywordsPreviewModal from "./KeywordsPreviewModal";
 import LanguageMenu from "./LanguageMenu";
@@ -89,6 +90,7 @@ import Notification from "./Notification";
 import OcassionalToast from "./OcassionalToast";
 import PageFinder from "./PageFinder";
 import Pagination from "./Pagination";
+import ProfileImage from "./ProfileImage";
 import ProgressBar from "./ProgressBar";
 import ReorderArrows from "./ReorderArrows";
 import ResizePanel from "./ResizePanel";
@@ -123,6 +125,7 @@ import Tabs from "./Tabs";
 import Tag from "./Tag";
 import Toast from "./Toast";
 import Tooltip from "./Tooltip";
+import UserRolesAndSites from "./UserRolesAndSites";
 
 export {
 	ActionMenu,
@@ -181,6 +184,7 @@ export {
 	Icon,
 	IconAction,
 	Image,
+	ImageDragAndDrop,
 	ImageField,
 	InformativeMenu,
 	KeywordsPreviewModal,
@@ -206,6 +210,7 @@ export {
 	OcassionalToast,
 	PageFinder,
 	Pagination,
+	ProfileImage,
 	PermissionsFilter,
 	ProgressBar,
 	RadioField,
@@ -245,6 +250,7 @@ export {
 	UniqueCheck,
 	UrlField,
 	UsersFilter,
+	UserRolesAndSites,
 	VisualOption,
 	VisualUniqueSelection,
 	Wysiwyg,

package/src/constants/index.ts

@@ -24,4 +24,16 @@ const itemLabel = {
 
 type ItemLabel = ValueOf<typeof itemLabel>;
 
-export { itemLabel, type ItemLabel };
+const VALID_IMAGE_FORMATS = ["jpeg", "jpg", "png", "svg", "gif", "webp"];
+const VALID_DOCUMENT_FORMATS = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt"];
+const VALID_VIDEO_FORMATS = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
+const VALID_FILE_FORMATS = [...VALID_DOCUMENT_FORMATS, ...VALID_VIDEO_FORMATS];
+
+export {
+	itemLabel,
+	type ItemLabel,
+	VALID_IMAGE_FORMATS,
+	VALID_DOCUMENT_FORMATS,
+	VALID_VIDEO_FORMATS,
+	VALID_FILE_FORMATS,
+};

package/src/containers/App/actions.tsx

@@ -1,7 +1,7 @@
 import { global, languages } from "@ax/api";
+import { usersActions } from "@ax/containers/Users";
 import { isReqOk } from "@ax/helpers";
 import type { IRootState } from "@ax/types";
-import { usersActions } from "@ax/containers/Users";
 
 import type { AxiosResponse } from "axios";
 import differenceInSeconds from "date-fns/differenceInSeconds";
@@ -89,6 +89,12 @@ function logout(): ILogoutAction {
 	return { type: LOGOUT, payload: { token: "" } };
 }
 
+function logoutAndNavigate(): (dispatch: Dispatch) => Promise<void> {
+	return async (dispatch) => {
+		await setHistoryPush("/logout")(dispatch);
+	};
+}
+
 function setLanguage(lang: { locale: string; id: number }): ISetLanguageAction {
 	localStorage.setItem("langID", JSON.stringify(lang.id));
 	return { type: SET_LANGUAGE, payload: { lang } };
@@ -267,6 +273,7 @@ export {
 	login,
 	loginSSO,
 	logout,
+	logoutAndNavigate,
 	resetError,
 	setError,
 	setGlobalLanguages,

package/src/containers/Sites/actions.tsx

@@ -27,6 +27,7 @@ import type { Dispatch } from "redux";
 import {
 	DEFAULT_PARAMS,
 	SET_ALL_SITE_PAGES,
+	SET_ALL_SITES,
 	SET_CONFIG,
 	SET_CONTENT_FILTERS,
 	SET_CURRENT_SEARCH,
@@ -46,6 +47,7 @@ import {
 } from "./constants";
 import type {
 	ISetAllSitePagesAction,
+	ISetAllSitesAction,
 	ISetConfig,
 	ISetContentFilters,
 	ISetCurrentSearch,
@@ -87,6 +89,10 @@ function setSitesByLang(sitesList: ISite[]): ISetSitesByLangAction {
 	return { type: SET_SITES_BY_LANG, payload: { sitesByLang: sitesList } };
 }
 
+function setAllSites(allSites: ISite[]): ISetAllSitesAction {
+	return { type: SET_ALL_SITES, payload: { allSites } };
+}
+
 function setCurrentSiteInfo(currentSiteInfo: ISite | null): ISetCurrentSiteInfoAction {
 	localStorage.setItem("siteID", JSON.stringify(currentSiteInfo?.id || "global"));
 	return { type: SET_CURRENT_SITE_INFO, payload: { currentSiteInfo } };
@@ -203,6 +209,25 @@ function getSitesByLang(params: IGetSitesParams): (dispatch: Dispatch) => Promis
 	};
 }
 
+function getAllSites(): (dispatch: Dispatch) => Promise<void> {
+	return async (dispatch) => {
+		try {
+			const responseActions = {
+				handleSuccess: (data: any) => {
+					dispatch(setAllSites(data.allSites));
+				},
+				handleError: (response: any) => appActions.handleError(response)(dispatch),
+			};
+
+			const callback = async () => sites.getAllSites({ pagination: false });
+
+			await handleRequest(callback, responseActions, [])(dispatch);
+		} catch (e) {
+			console.log(e);
+		}
+	};
+}
+
 function saveSettings(form: ISettingsForm): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
@@ -817,4 +842,5 @@ export {
 	getSite,
 	updateCurrentSearch,
 	setIsSitesLoading,
+	getAllSites,
 };

package/src/containers/Sites/constants.tsx

@@ -18,6 +18,7 @@ export const SET_CONFIG = `${NAME}/SET_CONFIG`;
 export const SET_CURRENT_SEARCH = `${NAME}/SET_CURRENT_SEARCH`;
 export const SET_THEME_ELEMENTS = `${NAME}/SET_THEME_ELEMENTS`;
 export const SET_IS_SITES_LOADING = `${NAME}/SET_IS_SITES_LOADING`;
+export const SET_ALL_SITES = `${NAME}/SET_ALL_SITES`;
 
 export const ITEMS_PER_PAGE = 50;
 

package/src/containers/Sites/interfaces.tsx

@@ -17,6 +17,7 @@ import {
 	SET_CURRENT_SEARCH,
 	SET_THEME_ELEMENTS,
 	SET_IS_SITES_LOADING,
+	SET_ALL_SITES,
 } from "./constants";
 import { IQueryValue, ISite, ISiteListConfig, IThemeElements } from "@ax/types";
 
@@ -110,4 +111,9 @@ export interface ISetIsSitesLoading {
 	payload: { isSitesLoading: boolean };
 }
 
+export interface ISetAllSitesAction {
+	type: typeof SET_ALL_SITES;
+	payload: { allSites: ISite[] };
+}
+
 export type SitesActionsCreators = ISetSitesAction & ISetCurrentSiteInfoAction;

package/src/containers/Sites/reducer.tsx

@@ -17,9 +17,10 @@ import {
 	SET_CURRENT_SEARCH,
 	SET_THEME_ELEMENTS,
 	SET_IS_SITES_LOADING,
+	SET_ALL_SITES,
 } from "./constants";
 
-import { ISite, IPage, ILanguage, ISiteListConfig, IQueryValue, IThemeElements } from "@ax/types";
+import type { ISite, IPage, ILanguage, ISiteListConfig, IQueryValue, IThemeElements } from "@ax/types";
 
 import { SitesActionsCreators } from "./interfaces";
 
@@ -30,6 +31,7 @@ export interface ISitesState {
 	sites: ISite[];
 	recentSites: ISite[];
 	sitesTotalItems: number;
+	allSites: ISite[];
 	sitesByLang: ISite[];
 	currentSiteInfo: ISite | null;
 	currentFilter: string | null;
@@ -65,6 +67,7 @@ export const initialState = {
 	currentSitePages: [],
 	allSitePages: [],
 	sites: [],
+	allSites: [],
 	recentSites: [],
 	sitesByLang: [],
 	currentSiteInfo: null,
@@ -101,6 +104,7 @@ export function reducer(state = initialState, action: any): ISitesState {
 		case SET_CURRENT_SEARCH:
 		case SET_THEME_ELEMENTS:
 		case SET_IS_SITES_LOADING:
+		case SET_ALL_SITES:
 			return { ...state, ...action.payload };
 		default:
 			return state;

package/src/containers/Users/reducer.tsx

@@ -1,11 +1,12 @@
-import { IRole, IUser } from "@ax/types";
+import type { IRole, IUser } from "@ax/types";
+
 import {
-	SET_USERS,
-	SET_USER_FORM,
-	SET_CURRENT_USER,
-	SET_ROLES,
 	SET_CURRENT_PERMISSIONS,
+	SET_CURRENT_USER,
 	SET_GLOBAL_PERMISSIONS,
+	SET_ROLES,
+	SET_USER_FORM,
+	SET_USERS,
 } from "./constants";
 
 export interface IUsersState {

package/src/guards/routeLeaving/index.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { Prompt } from "react-router-dom";
 
-import { useModal } from "@ax/hooks";
 import { Modal } from "@ax/components";
+import { useModal } from "@ax/hooks";
 
 import * as S from "./style";
 
@@ -13,8 +13,8 @@ const RouteLeavingGuard = (props: IProps) => {
 	const [lastLocation, setLastLocation] = useState<Location | null>(null);
 	const [confirmedNavigation, setConfirmedNavigation] = useState(false);
 
-	const handleBlockedNavigation = (nextLocation: any): boolean => {
-		const isAllowedNavigation = allowedRoutes && allowedRoutes.includes(nextLocation.pathname);
+	const handleBlockedNavigation = (nextLocation: Location): boolean => {
+		const isAllowedNavigation = allowedRoutes?.includes(nextLocation.pathname);
 		if (!confirmedNavigation && !isAllowedNavigation) {
 			toggleModal();
 			setLastLocation(nextLocation);
@@ -55,11 +55,9 @@ const RouteLeavingGuard = (props: IProps) => {
 				mainAction={mainAction}
 				secondaryAction={secondaryAction}
 			>
-				{
-					<S.ModalContent>
-						{text} If you exit without saving it, it will be lost. Do you want to discard your changes?
-					</S.ModalContent>
-				}
+				<S.ModalContent>
+					{text} If you exit without saving it, it will be lost. Do you want to discard your changes?
+				</S.ModalContent>
 			</Modal>
 		</>
 	);
@@ -68,8 +66,8 @@ const RouteLeavingGuard = (props: IProps) => {
 interface IRouterLeavingProps {
 	when: boolean;
 	action(path: string): void;
-	text: any;
-	allowedRoutes?: any;
+	text: ReactNode;
+	allowedRoutes?: string[];
 }
 
 type IProps = IRouterLeavingProps;

package/src/helpers/images.tsx

@@ -1,3 +1,5 @@
+import type { Area } from "react-easy-crop";
+
 import { toBlob } from "html-to-image";
 
 const formatBytes = (bytes: number | null, decimals = 2) => {
@@ -9,7 +11,7 @@ const formatBytes = (bytes: number | null, decimals = 2) => {
 
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+	return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
 };
 
 const imageToBase64 = (file: any): Promise<string> => {
@@ -35,7 +37,7 @@ const getImageFromHtml = async (html: HTMLDivElement, fileName: string): Promise
 
 	const elChildren = browserContent.querySelectorAll("*");
 	let maxAbsoluteElementHeight = 0;
-	[].forEach.call(elChildren, function (element: HTMLElement) {
+	[].forEach.call(elChildren, (element: HTMLElement) => {
 		const isAbsolutePosition = getComputedStyle(element).position === "absolute";
 		const isMaxAbsolutePositionHeight = element.clientHeight > maxAbsoluteElementHeight;
 		if (isAbsolutePosition && isMaxAbsolutePositionHeight) {
@@ -90,4 +92,49 @@ const getImageFromIFrame = async (html: HTMLDivElement, fileName: string): Promi
 		});
 };
 
-export { formatBytes, imageToBase64, getImageFromHtml, getImageFromIFrame };
+const createImage = (url: string): Promise<HTMLImageElement> =>
+	new Promise((resolve, reject) => {
+		const image = new Image();
+		image.addEventListener("load", () => resolve(image));
+		image.addEventListener("error", (error) => reject(error));
+		image.setAttribute("crossOrigin", "anonymous");
+		image.src = url;
+	});
+
+const getCroppedImg = async (imageSrc: string, pixelCrop: Area): Promise<File> => {
+	const image = await createImage(imageSrc);
+	const canvas = document.createElement("canvas");
+	canvas.width = pixelCrop.width;
+	canvas.height = pixelCrop.height;
+	const ctx = canvas.getContext("2d");
+
+	if (!ctx) throw new Error("Could not get canvas context");
+
+	ctx.drawImage(
+		image,
+		pixelCrop.x,
+		pixelCrop.y,
+		pixelCrop.width,
+		pixelCrop.height,
+		0,
+		0,
+		pixelCrop.width,
+		pixelCrop.height,
+	);
+
+	return new Promise((resolve, reject) => {
+		canvas.toBlob(
+			(blob) => {
+				if (!blob) {
+					reject(new Error("Canvas is empty"));
+					return;
+				}
+				resolve(new File([blob], "avatar.jpg", { type: "image/jpeg" }));
+			},
+			"image/jpeg",
+			0.9,
+		);
+	});
+};
+
+export { formatBytes, imageToBase64, getImageFromHtml, getImageFromIFrame, createImage, getCroppedImg };