@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/modules/Sites/SitesList/WelcomeModal/DataStep/index.tsx

@@ -0,0 +1,72 @@
+import { Avatar, Button, FieldsBehavior } from "@ax/components";
+import * as S from "./style";
+import type { IUserFormState } from "..";
+
+const DataStep = (props: IProps) => {
+	const { onClickNext, onClickBack, form, setForm, croppedImageUrl } = props;
+	const { name, username, company, position } = form;
+
+	const handleUsernameChange = (value: string) => setForm({ ...form, username: value });
+	const handleJobChange = (value: string) => setForm({ ...form, position: value });
+	const handleCompanyChange = (value: string) => setForm({ ...form, company: value });
+
+	return (
+		<S.Wrapper>
+			<S.InfoWrapper>
+				<S.Title>Confirm your data</S.Title>
+				<S.Text>Please confirm your data to complete your profile.</S.Text>
+			</S.InfoWrapper>
+			<S.FormWrapper>
+				<S.FormImage>
+					<Avatar size={180} image={croppedImageUrl} name={name} fontSize={100} bold background />
+				</S.FormImage>
+				<S.FormFields>
+					<FieldsBehavior
+						title="Alias"
+						name="username"
+						fieldType="TextField"
+						placeholder="Type an alias"
+						mandatory
+						value={username}
+						onChange={handleUsernameChange}
+						prefix="@"
+					/>
+					<FieldsBehavior
+						title="Job title"
+						name="position"
+						fieldType="TextField"
+						placeholder="Type a job title"
+						value={position}
+						onChange={handleJobChange}
+					/>
+					<FieldsBehavior
+						title="Company"
+						name="company"
+						fieldType="TextField"
+						placeholder="Type a company"
+						value={company}
+						onChange={handleCompanyChange}
+					/>
+				</S.FormFields>
+			</S.FormWrapper>
+			<S.Actions>
+				<Button type="button" buttonStyle="text" onClick={onClickBack}>
+					Back
+				</Button>
+				<Button type="button" onClick={() => onClickNext()} disabled={!username.trim().length}>
+					Next step
+				</Button>
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	form: IUserFormState;
+	setForm: (data: IUserFormState) => void;
+	onClickNext: () => void;
+	onClickBack: () => void;
+	croppedImageUrl: string | null;
+}
+
+export default DataStep;

package/src/modules/Sites/SitesList/WelcomeModal/DataStep/style.tsx

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: ${(p) => `32px ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+`;
+
+const InfoWrapper = styled.div`
+  width: 450px;
+  margin-left: 85px;
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.headingM};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  font-weight: 400;
+`;
+
+const Actions = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.s};
+  justify-content: flex-end;
+  margin-top: auto;
+`;
+
+const FormWrapper = styled.div`
+  display: flex;
+  margin-left: 85px;
+  margin-top: ${(p) => p.theme.spacing.xs};
+  gap: ${(p) => p.theme.spacing.l};
+`;
+
+const FormImage = styled.div`
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const FormFields = styled.div`
+  width: 344px;
+`;
+
+export { Wrapper, InfoWrapper, Title, Text, Actions, FormWrapper, FormImage, FormFields };

package/src/modules/Sites/SitesList/WelcomeModal/FinalStep/constants.tsx

@@ -0,0 +1,78 @@
+const LEARN_ITEMS = [
+	{
+		icon: "project",
+		title: "Create sites",
+		description:
+			"Create as many sites as you need, there is no limit. You can separate your sites by schools, by business areas, by campaigns...",
+		url: "https://docs.griddo.io/primeros-pasos/crear-site/",
+		roles: ["Administrator"],
+	},
+	{
+		icon: "page",
+		title: "Create pages",
+		description: "Pages are very flexible and are created by adding modules that you can place in any order you want.",
+		url: "https://docs.griddo.io/editor/crear-y-editar-paginas/",
+		roles: ["Administrator", "Webmaster", "Editor"],
+	},
+	{
+		icon: "working",
+		title: "Create Add-ons",
+		description: "Add custom code blocks to your site to add a variety of custom functions.",
+		url: "https://docs.griddo.io/configuracion/add-ons/",
+		roles: ["Administrator"],
+	},
+	{
+		icon: "category",
+		title: "Work with Categories",
+		description:
+			"Categories allow you to organise the content of a web page, either by subject matter or by their place in the site hierarchy.",
+		url: "https://docs.griddo.io/content-types/categorias/",
+		roles: ["Webmaster"],
+	},
+	{
+		icon: "ia",
+		title: "Work with AI",
+		description: "We have integrated artificial intelligence services to help users be more efficient and productive.",
+		url: "https://docs.griddo.io/editor/trabajar-con-ia/",
+		roles: ["Webmaster", "Editor"],
+	},
+	{
+		icon: "image",
+		title: "Add and manage Images",
+		description: "Upload images to the gallery from your computer to use them on any page of your site.",
+		url: "https://docs.griddo.io/galeria/media-gallery/",
+		roles: ["Editor"],
+	},
+	{
+		icon: "edit",
+		title: "Manage SEO",
+		description:
+			"Easy creation and editing of OpenGraph tags and structured data to adequately define any type of content that we have on any site.",
+		url: "https://docs.griddo.io/editor/crear-y-editar-paginas/#configurar-el-seo-de-la-pagina",
+		roles: ["SEO Validator"],
+	},
+	{
+		icon: "page",
+		title: "Edit pages",
+		description: "Pages are very flexible and are created by adding modules that you can place in any order you want.",
+		url: "https://docs.griddo.io/editor/crear-y-editar-paginas/",
+		roles: ["SEO Validator"],
+	},
+	{
+		icon: "search",
+		title: "Preview your SEO",
+		description:
+			"Review your page's heading structure and keyword usage from the editor, so your content is ready for search engines before you hit publish.",
+		url: "https://docs.griddo.io/editor/seo-previews/",
+		roles: ["SEO Validator"],
+	},
+	{
+		icon: "page",
+		title: "View pages",
+		description: "Pages are very flexible and are created by adding modules that you can place in any order you want.",
+		url: "https://docs.griddo.io/editor/crear-y-editar-paginas/",
+		roles: ["Viewer"],
+	},
+];
+
+export { LEARN_ITEMS };

package/src/modules/Sites/SitesList/WelcomeModal/FinalStep/index.tsx

@@ -0,0 +1,78 @@
+import { Button, Icon, UserRolesAndSites } from "@ax/components";
+import type { IRole, ISite, ISiteRoles } from "@ax/types";
+
+import { getMostFrequentRole } from "../utils";
+import { LEARN_ITEMS } from "./constants";
+
+import * as S from "./style";
+
+const FinalStep = (props: IFinalStepProps) => {
+	const { isSuperAdmin, userRoles, roles, sites, onClose, onViewProfile } = props;
+
+	const showRows =
+		isSuperAdmin || (!!userRoles.find((ur) => ur.siteId === "all") && !userRoles.find((ur) => ur.siteId === "global"));
+
+	const mostFrequentRoleId = getMostFrequentRole(userRoles);
+	const mostFrequentRole = mostFrequentRoleId ? roles.find((r) => r.id === mostFrequentRoleId) : null;
+	const mostFrequentRoleName = isSuperAdmin ? "Administrator" : mostFrequentRole?.name;
+
+	let filteredLearnItems = mostFrequentRoleName
+		? LEARN_ITEMS.filter((item) => item.roles.includes(mostFrequentRoleName))
+		: [];
+
+	if (filteredLearnItems.length === 0) {
+		filteredLearnItems = LEARN_ITEMS.filter((item) => item.roles.includes("Editor"));
+	}
+
+	return (
+		<S.Wrapper isRow={!showRows}>
+			<S.RolesWrapper>
+				<S.SectionTitle>You have these permissions</S.SectionTitle>
+				<S.Text>
+					Build and publish all your websites, landing pages and events easily
+					<br />
+					from a single platform.
+				</S.Text>
+				<UserRolesAndSites isSuperAdmin={isSuperAdmin} userRoles={userRoles} sites={sites} roles={roles} />
+			</S.RolesWrapper>
+			<S.LearnWrapper>
+				<S.LearnTitle>Learn how to use</S.LearnTitle>
+				<S.ItemsWrapper>
+					{filteredLearnItems.map(({ icon, title, description, url }) => (
+						<S.LearnItem key={title}>
+							<S.LearnHeader>
+								<S.IconWrapper>
+									<Icon name={icon} />
+								</S.IconWrapper>
+								<S.ItemTitle>{title}</S.ItemTitle>
+							</S.LearnHeader>
+							<S.Description>{description}</S.Description>
+							<Button type="button" buttonStyle="minimal" icon="openOutside" onClick={() => window.open(url, "_blank")}>
+								view
+							</Button>
+						</S.LearnItem>
+					))}
+				</S.ItemsWrapper>
+				<S.Actions>
+					<Button type="button" buttonStyle="text" onClick={onViewProfile}>
+						View profile
+					</Button>
+					<Button type="button" onClick={onClose}>
+						Start Using Griddo
+					</Button>
+				</S.Actions>
+			</S.LearnWrapper>
+		</S.Wrapper>
+	);
+};
+
+interface IFinalStepProps {
+	isSuperAdmin: boolean;
+	userRoles: ISiteRoles[];
+	roles: IRole[];
+	sites: ISite[];
+	onClose: () => void;
+	onViewProfile: () => void;
+}
+
+export default FinalStep;

package/src/modules/Sites/SitesList/WelcomeModal/FinalStep/style.tsx

@@ -0,0 +1,141 @@
+import styled from "styled-components";
+
+const LearnWrapper = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  flex-direction: column;
+  flex-shrink: 0;
+`;
+
+const ItemsWrapper = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.xs};
+  width: 100%;
+`;
+
+const LearnItem = styled.div`
+  display: flex;
+  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 Actions = styled.div`
+  display: flex;
+  padding-top: ${(p) => p.theme.spacing.s};
+`;
+
+const SitesContent = styled.div``;
+
+const Wrapper = styled.div<{ isRow: boolean }>`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: ${(p) => (p.isRow ? "row" : "column")};
+
+  ${LearnWrapper} {
+    width: ${(p) => (p.isRow ? "344px" : "100%")};
+    height: ${(p) => (p.isRow ? "100%" : "273px")};
+    padding: ${(p) => (p.isRow ? p.theme.spacing.m : `${p.theme.spacing.m} 40px 0 40px`)};
+  }
+
+  ${ItemsWrapper} {
+    flex-direction: ${(p) => (p.isRow ? "column" : "row")};
+  }
+
+  ${LearnItem} {
+    width: ${(p) => (p.isRow ? "100%" : "33%")};
+  }
+
+  ${Actions} {
+    justify-content: ${(p) => (p.isRow ? "space-between" : "flex-end")};
+    gap: ${(p) => (p.isRow ? 0 : p.theme.spacing.s)};
+    margin-top: ${(p) => (p.isRow ? "auto" : 0)};
+  }
+
+  ${SitesContent} {
+    padding-top: ${(p) => (p.isRow ? p.theme.spacing.m : 0)};
+  }
+`;
+
+const LearnTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingM};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const LearnHeader = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const ItemTitle = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  font-weight: 600;
+  margin-left: ${(p) => p.theme.spacing.xxs};
+`;
+
+const IconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.m};
+  height: ${(p) => p.theme.spacing.m};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  flex: 1;
+`;
+
+const RolesWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: ${(p) => `32px 40px ${p.theme.spacing.s} 40px`};
+
+  &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 4px;
+      height: 100%;
+    }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.color.iconNonActive};
+  }
+`;
+
+const SectionTitle = styled.div`
+  font-size: 28px;
+  line-height: 25px;
+  font-weight: 700;
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  font-weight: 400;
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  strong {
+    font-weight: 600;
+  }
+`;
+
+export {
+	Wrapper,
+	Actions,
+	LearnWrapper,
+	RolesWrapper,
+	LearnTitle,
+	LearnItem,
+	LearnHeader,
+	IconWrapper,
+	Description,
+	ItemTitle,
+	ItemsWrapper,
+	SectionTitle,
+	Text,
+};

package/src/modules/Sites/SitesList/WelcomeModal/ImageStep/CropView/index.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useState } from "react";
+import type { Area } from "react-easy-crop";
+import Cropper from "react-easy-crop";
+
+import { Button } from "@ax/components";
+
+import * as S from "./style";
+
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 3;
+const ZOOM_STEP = 0.1;
+
+const CropView = (props: IProps) => {
+	const { imageSrc, onConfirm, onUploadNew } = props;
+
+	const [crop, setCrop] = useState({ x: 0, y: 0 });
+	const [zoom, setZoom] = useState(1);
+	const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+	const [objectFit, setObjectFit] = useState<"vertical-cover" | "horizontal-cover">("vertical-cover");
+
+	const onCropComplete = useCallback((_: Area, pixels: Area) => {
+		setCroppedAreaPixels(pixels);
+	}, []);
+
+	const onMediaLoaded = useCallback((mediaSize: { width: number; height: number }) => {
+		const isPortrait = mediaSize.height > mediaSize.width;
+		setObjectFit(isPortrait ? "vertical-cover" : "horizontal-cover");
+	}, []);
+
+	const handleConfirm = () => {
+		if (croppedAreaPixels) onConfirm(croppedAreaPixels);
+	};
+
+	const handleZoomIn = () => setZoom((z) => Math.min(z + ZOOM_STEP, MAX_ZOOM));
+	const handleZoomOut = () => setZoom((z) => Math.max(z - ZOOM_STEP, MIN_ZOOM));
+
+	return (
+		<S.Wrapper>
+			<S.CropArea>
+				<S.CropContainer>
+					<Cropper
+						image={imageSrc}
+						crop={crop}
+						zoom={zoom}
+						aspect={1}
+						cropShape="round"
+						showGrid={false}
+						onCropChange={setCrop}
+						onZoomChange={setZoom}
+						onCropComplete={onCropComplete}
+						onMediaLoaded={onMediaLoaded}
+						objectFit={objectFit}
+					/>
+				</S.CropContainer>
+				<S.ZoomControls>
+					<S.ZoomButton type="button" onClick={handleZoomIn} aria-label="Zoom in">
+						+
+					</S.ZoomButton>
+					<S.ZoomSlider
+						type="range"
+						min={MIN_ZOOM}
+						max={MAX_ZOOM}
+						step={ZOOM_STEP}
+						value={zoom}
+						onChange={(e) => setZoom(Number(e.target.value))}
+						aria-label="Zoom"
+					/>
+					<S.ZoomButton type="button" onClick={handleZoomOut} aria-label="Zoom out">
+						{"\u2212"}
+					</S.ZoomButton>
+				</S.ZoomControls>
+			</S.CropArea>
+			<S.ButtonWrapper>
+				<Button type="button" buttonStyle="minimal" onClick={onUploadNew} icon="refresh">
+					Upload new image
+				</Button>
+			</S.ButtonWrapper>
+			<S.Actions>
+				<Button type="button" buttonStyle="solid" onClick={handleConfirm}>
+					Next step
+				</Button>
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	imageSrc: string;
+	onConfirm: (croppedAreaPixels: Area) => void;
+	onUploadNew: () => void;
+}
+
+export default CropView;

package/src/modules/Sites/SitesList/WelcomeModal/ImageStep/CropView/style.tsx

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+`;
+
+const CropArea = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${(p) => p.theme.spacing.m};
+  margin-top: ${(p) => p.theme.spacing.s};
+  margin-left: ${(p) => p.theme.spacing.l};
+`;
+
+const CropContainer = styled.div`
+  position: relative;
+  width: 276px;
+  height: 276px;
+  border-radius: 50%;
+  overflow: hidden;
+`;
+
+const ZoomControls = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${(p) => p.theme.spacing.xs};
+`;
+
+const ZoomButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: ${(p) => p.theme.color.interactive01};
+  font-size: 24px;
+  line-height: 1;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+
+  &:hover {
+    opacity: 0.7;
+  }
+`;
+
+const ZoomSlider = styled.input`
+  appearance: slider-vertical;
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 4px;
+  height: 216px;
+  cursor: pointer;
+  accent-color: ${(p) => p.theme.color.interactive01};
+`;
+
+const Actions = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Actions, Wrapper, CropArea, CropContainer, ZoomControls, ZoomButton, ZoomSlider, ButtonWrapper };

package/src/modules/Sites/SitesList/WelcomeModal/ImageStep/UploadView/index.tsx

@@ -0,0 +1,100 @@
+import { useRef, useState } from "react";
+
+import { Button, DragAndDrop, Icon } from "@ax/components";
+
+import * as S from "./style";
+
+const VALID_FORMATS = ["jpg", "jpeg", "png", "webp"];
+const VALID_EXTENSIONS = VALID_FORMATS.map((f) => `.${f}`).join(",");
+
+const UploadView = (props: IProps) => {
+	const { onImageLoaded, onSkip } = props;
+
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const [inDropZone, setInDropZone] = useState(false);
+	const [dropDepth, setDropDepth] = useState(0);
+	const [error, setError] = useState<string | null>(null);
+
+	const isValidFormat = (fileName: string) => {
+		const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
+		return VALID_FORMATS.includes(ext);
+	};
+
+	const readFile = (file: File) => {
+		if (!isValidFormat(file.name)) {
+			setError(`Invalid format. Allowed: ${VALID_FORMATS.join(", ")}`);
+			return;
+		}
+		setError(null);
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			const result = e.target?.result;
+			if (typeof result === "string") onImageLoaded(result);
+		};
+		reader.readAsDataURL(file);
+	};
+
+	const handleDragEnter = () => setDropDepth((d) => d + 1);
+
+	const handleDragLeave = () => {
+		setDropDepth((d) => d - 1);
+		if (dropDepth > 1) return;
+		setInDropZone(false);
+	};
+
+	const handleDragOver = () => setInDropZone(true);
+
+	const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+		const file = e.dataTransfer.files[0];
+		if (file) readFile(file);
+		setInDropZone(false);
+		setDropDepth(0);
+	};
+
+	const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.currentTarget.files?.[0];
+		if (file) readFile(file);
+	};
+
+	const handleClick = () => inputRef.current?.click();
+
+	return (
+		<S.Wrapper>
+			<S.DragAndDropWrapper>
+				<DragAndDrop
+					onDrop={handleDrop}
+					onDragOver={handleDragOver}
+					onDragEnter={handleDragEnter}
+					onDragLeave={handleDragLeave}
+				>
+					<S.DropZone inDropZone={inDropZone}>
+						<S.IconWrapper>
+							<Icon name="image" size="48" />
+						</S.IconWrapper>
+						<S.DragTitle>{inDropZone ? "Drop your image" : "Drag your image here"}</S.DragTitle>
+						{!inDropZone && <S.DragSubtitle>or</S.DragSubtitle>}
+						<S.FilesInput ref={inputRef} type="file" accept={VALID_EXTENSIONS} onChange={handleFileInput} />
+						{!inDropZone && (
+							<S.SelectButton type="button" buttonStyle="solid" onClick={handleClick}>
+								Select image
+							</S.SelectButton>
+						)}
+					</S.DropZone>
+				</DragAndDrop>
+				{error && <S.DragError data-testid="upload-view-error">{error}</S.DragError>}
+			</S.DragAndDropWrapper>
+			<S.Actions>
+				<Button type="button" buttonStyle="text" onClick={onSkip}>
+					Skip profile picture
+				</Button>
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	onImageLoaded: (imageSrc: string) => void;
+	onSkip: () => void;
+}
+
+export default UploadView;