@griddo/ax 11.14.2-rc.0 → 11.14.2

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

@@ -0,0 +1,94 @@
+import styled from "styled-components";
+
+import Button from "@ax/components/Button";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+
+const DragAndDropWrapper = styled.div`
+  width: 290px;
+  margin: ${(p) => p.theme.spacing.s} auto;
+`;
+
+const IconWrapper = styled.div`
+  svg path {
+    fill: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const DragTitle = styled.p`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.interactive01};
+`;
+
+const DropZone = styled.div<{ inDropZone: boolean }>`
+  width: 276px;
+  height: 276px;
+  border-radius: 50%;
+  border: 2px dashed ${(p) => p.theme.color.interactive01};
+  background-color: ${(p) => (p.inDropZone ? p.theme.color.interactive01 : "transparent")};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${(p) => p.theme.spacing.xxs};
+  transition: background-color 0.15s;
+
+  ${DragTitle} {
+    color: ${(p) => (p.inDropZone ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+  }
+
+  ${IconWrapper} {
+    svg {
+      path {
+        fill: ${(p) => (p.inDropZone ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+      }
+    }
+  }
+`;
+
+const DragSubtitle = styled.p`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const DragError = styled.p`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.error};
+  width: 100%;
+  text-align: center;
+`;
+
+const FilesInput = styled.input`
+  display: none;
+`;
+
+const _Button: any = (props: any) => <Button {...props} />;
+const SelectButton = styled(_Button)`
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+const Actions = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  margin-top: auto;
+`;
+
+export {
+	Wrapper,
+	DragAndDropWrapper,
+	Actions,
+	IconWrapper,
+	DragTitle,
+	DragSubtitle,
+	DropZone,
+	FilesInput,
+	SelectButton,
+	DragError,
+};

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

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import type { Area } from "react-easy-crop";
+
+import CropView from "./CropView";
+import UploadView from "./UploadView";
+
+import * as S from "./style";
+
+const ImageStep = (props: IProps) => {
+	const { userImage, onCropConfirmed, onSkip } = props;
+
+	const [imageSrc, setImageSrc] = useState<string | null>(userImage || null);
+
+	return (
+		<S.Wrapper>
+			<S.InfoWrapper>
+				<S.Title>Upload Your Profile Picture</S.Title>
+				<S.Text>
+					Customize how people see you. If you don't upload a picture, one will be generated based on your initials and
+					a random color.
+				</S.Text>
+			</S.InfoWrapper>
+			<S.ImageWrapper>
+				{!imageSrc ? (
+					<UploadView onImageLoaded={setImageSrc} onSkip={onSkip} />
+				) : (
+					<CropView
+						imageSrc={imageSrc}
+						onConfirm={(croppedAreaPixels) => onCropConfirmed(imageSrc, croppedAreaPixels)}
+						onUploadNew={() => setImageSrc(null)}
+					/>
+				)}
+			</S.ImageWrapper>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	userImage?: string;
+	onCropConfirmed: (imageSrc: string, croppedAreaPixels: Area) => void;
+	onSkip: () => void;
+}
+
+export default ImageStep;

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

@@ -0,0 +1,31 @@
+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: 16px;
+`;
+
+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 ImageWrapper = styled.div`
+  flex-grow: 1;
+`;
+
+export { Wrapper, InfoWrapper, Title, Text, ImageWrapper };

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

@@ -0,0 +1,51 @@
+import { Button, Select } from "@ax/components";
+
+import WorldMap from "react-timezone-map-select/dist/WorldMap";
+
+import { timezones } from "../../../../Settings/Globals/constants";
+import type { IUserFormState } from "..";
+
+import * as S from "./style";
+
+const TimezoneStep = (props: IProps) => {
+	const { onClickNext, onClickBack, form, isSaving, setForm } = props;
+
+	const handleChange = (timeZoneName: string) => {
+		setForm({ ...form, timezone: timeZoneName });
+	};
+
+	return (
+		<S.Wrapper>
+			<S.Header>
+				<S.InfoWrapper>
+					<S.Title>Complete your job information</S.Title>
+					<S.Text>Select a time zone in the list or click an area on the map.</S.Text>
+				</S.InfoWrapper>
+				<S.SelectWrapper>
+					<Select name="timezone" value={form.timezone} options={timezones} onChange={handleChange} />
+				</S.SelectWrapper>
+			</S.Header>
+			<S.MapWrapper>
+				<WorldMap timeZoneName={form.timezone} onChange={handleChange} />
+			</S.MapWrapper>
+			<S.Actions>
+				<Button type="button" buttonStyle="text" onClick={onClickBack}>
+					Back
+				</Button>
+				<Button type="button" onClick={onClickNext} disabled={!form.timezone || isSaving}>
+					{isSaving ? "Saving..." : "Save profile"}
+				</Button>
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	form: IUserFormState;
+	isSaving: boolean;
+	setForm: (data: IUserFormState) => void;
+	onClickNext: () => void;
+	onClickBack: () => void;
+}
+
+export default TimezoneStep;

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

@@ -0,0 +1,52 @@
+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``;
+
+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 MapWrapper = styled.div`
+  flex: 1;
+  min-height: 0;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    margin: auto;
+  }
+`;
+
+const Actions = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.s};
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-top: ${(p) => p.theme.spacing.s};
+`;
+
+const Header = styled.div`
+  display: flex;
+`;
+
+const SelectWrapper = styled.div`
+  width: 252px;
+  margin-left: auto;
+`;
+
+export { Wrapper, InfoWrapper, Title, Text, MapWrapper, Actions, Header, SelectWrapper };

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

@@ -0,0 +1,40 @@
+import { Button } from "@ax/components";
+
+import * as S from "./style";
+
+const WelcomeStep = (props: IWelcomeStepProps) => {
+	const { onSkip, onClickNext } = props;
+
+	return (
+		<S.Wrapper>
+			<S.WelcomeWrapper>
+				<S.EmojiWrapper>👋</S.EmojiWrapper>
+				<S.Title>Welcome to Griddo :)</S.Title>
+				<S.Text>
+					<p>We’re excited to have you onboard to help us build a better web.</p>
+					<p>
+						Let's start <strong>completing your profile</strong> in Griddo. This will help the team to recognise your
+						and improve collaboraation.
+					</p>
+				</S.Text>
+			</S.WelcomeWrapper>
+			<S.ImageWrapper>
+				<S.Actions>
+					<Button type="button" buttonStyle="text" onClick={() => onSkip()}>
+						Skip, I’ll do it later
+					</Button>
+					<Button type="button" onClick={() => onClickNext()}>
+						Complete profile
+					</Button>
+				</S.Actions>
+			</S.ImageWrapper>
+		</S.Wrapper>
+	);
+};
+
+interface IWelcomeStepProps {
+	onSkip: () => void;
+	onClickNext: () => void;
+}
+
+export default WelcomeStep;

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

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+const WelcomeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 45px;
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  width: 516px;
+  background-image: url(/img/welcome.svg);
+  flex-shrink: 0;
+  align-items: flex-end;
+  justify-content: flex-end;
+`;
+
+const EmojiWrapper = styled.div`
+  font-size: 44px;
+  line-height: 100%;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Title = styled.div`
+  font-size: 28px;
+  line-height: 37px;
+  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;
+  }
+`;
+
+const Actions = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.s};
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { Wrapper, WelcomeWrapper, ImageWrapper, EmojiWrapper, Title, Text, Actions };

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

@@ -0,0 +1,215 @@
+import { useState } from "react";
+import type { Area } from "react-easy-crop";
+import { connect } from "react-redux";
+
+import { Modal } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { galleryActions } from "@ax/containers/Gallery";
+import { usersActions } from "@ax/containers/Users";
+import { getCroppedImg } from "@ax/helpers";
+import type { IImage, IModal, IRole, IRootState, ISite, IUser } from "@ax/types";
+
+import DataStep from "./DataStep";
+import FinalStep from "./FinalStep";
+import ImageStep from "./ImageStep";
+import TimezoneStep from "./TimezoneStep";
+import { getCompanyFromEmail } from "./utils";
+import WelcomeStep from "./WelcomeStep";
+
+import * as S from "./style";
+
+type Step = "welcome" | "image" | "data" | "timezone" | "final";
+const STEPS: Step[] = ["welcome", "image", "data", "timezone", "final"];
+
+const WelcomeModal = (props: IProps) => {
+	const { isOpen, toggleModal, currentUser, roles, sites, uploadImage, updateUser, setHistoryPush } = props;
+
+	const [currentStep, setCurrentStep] = useState<Step>("welcome");
+	const [croppedImageFile, setCroppedImageFile] = useState<File | null>(null);
+	const [isSaving, setIsSaving] = useState(false);
+	const [userForm, setUserForm] = useState<IUserFormState>({
+		name: currentUser.name,
+		username: currentUser.username,
+		position: currentUser.position || "",
+		company: getCompanyFromEmail(currentUser.email),
+		timezone: Intl.DateTimeFormat().resolvedOptions().timeZone ?? "",
+	});
+
+	const stepIndex = STEPS.indexOf(currentStep);
+	const { isSuperAdmin, roles: userRoles } = currentUser;
+
+	const handleBack = () => setCurrentStep(STEPS[stepIndex - 1]);
+
+	const handleNext = () => setCurrentStep(STEPS[stepIndex + 1]);
+
+	const handleSaveAndFinish = async () => {
+		if (!currentUser?.id) return;
+		setIsSaving(true);
+		try {
+			let image: IImage | null = null;
+			if (croppedImageFile) {
+				image = await uploadImage(croppedImageFile, "global", undefined, false);
+			}
+			await updateUser(
+				currentUser.id,
+				{
+					...currentUser,
+					username: userForm.username,
+					company: userForm.company,
+					timezone: userForm.timezone,
+					position: userForm.position,
+					image,
+					profileCreated: true,
+				},
+				true,
+				false,
+			);
+		} catch (e) {
+			console.error("Profile update failed", e);
+		}
+		setIsSaving(false);
+		setCurrentStep(STEPS[stepIndex + 1]);
+	};
+
+	const handleSkipAndClose = async () => {
+		if (!currentUser?.id) return;
+		if (currentStep !== "final") {
+			await updateUser(currentUser.id, { ...currentUser, profileCreated: true }, true, false);
+			setCurrentStep("final");
+		} else {
+			toggleModal();
+		}
+	};
+
+	const handleClose = () => {
+		setCurrentStep("welcome");
+		setCroppedImageFile(null);
+		toggleModal();
+	};
+
+	const handleViewProfile = () => {
+		handleClose();
+		setHistoryPush("/profile");
+	};
+
+	const handleCropConfirmed = async (imageSrc: string, croppedAreaPixels: Area) => {
+		const file = await getCroppedImg(imageSrc, croppedAreaPixels);
+		setCroppedImageFile(file);
+		setCurrentStep(STEPS[stepIndex + 1]);
+	};
+
+	const getTitle = (step: string) => {
+		switch (step) {
+			case "image":
+				return "Step 1 of 3: Profile Picture";
+			case "data":
+				return "Step 2 of 3: Profile data";
+			case "timezone":
+				return "Step 3 of 3: Define timezone";
+			case "final":
+				return "🎉 Ready to start :)";
+			default:
+				return "Welcome";
+		}
+	};
+
+	const getBarSize = (step: string) => {
+		switch (step) {
+			case "image":
+				return "33%";
+			case "data":
+				return "66%";
+			case "timezone":
+				return "100%";
+			default:
+				return "0";
+		}
+	};
+
+	const globalSiteRole = userRoles.find((ur) => ur.siteId === "global");
+	const allSiteRole = userRoles.find((ur) => ur.siteId === "all");
+	const hasOnlyAllSites = !!allSiteRole && !globalSiteRole;
+	const size = currentStep === "final" && !isSuperAdmin && !hasOnlyAllSites ? "XL" : "L";
+	const height = currentStep === "final" && !isSuperAdmin && !hasOnlyAllSites ? 608 : 563;
+
+	return (
+		<Modal isOpen={isOpen} hide={handleSkipAndClose} title={getTitle(currentStep)} size={size} height={height}>
+			<>
+				<S.ProgressBar width={getBarSize(currentStep)} />
+				{currentStep === "welcome" && <WelcomeStep onSkip={handleSkipAndClose} onClickNext={handleNext} />}
+				{currentStep === "image" && (
+					<ImageStep onCropConfirmed={handleCropConfirmed} onSkip={handleNext} userImage={currentUser.image?.url} />
+				)}
+				{currentStep === "data" && (
+					<DataStep
+						onClickNext={handleNext}
+						onClickBack={handleBack}
+						form={userForm}
+						setForm={setUserForm}
+						croppedImageUrl={croppedImageFile ? URL.createObjectURL(croppedImageFile) : null}
+					/>
+				)}
+				{currentStep === "timezone" && (
+					<TimezoneStep
+						onClickNext={handleSaveAndFinish}
+						onClickBack={handleBack}
+						form={userForm}
+						setForm={setUserForm}
+						isSaving={isSaving}
+					/>
+				)}
+				{currentStep === "final" && (
+					<FinalStep
+						onClose={handleClose}
+						onViewProfile={handleViewProfile}
+						isSuperAdmin={isSuperAdmin}
+						userRoles={userRoles}
+						roles={roles}
+						sites={sites}
+					/>
+				)}
+			</>
+		</Modal>
+	);
+};
+
+interface IStateProps {
+	currentUser: IUser;
+	roles: IRole[];
+	sites: ISite[];
+}
+
+export interface IUserFormState {
+	name: string;
+	username: string;
+	position: string;
+	company: string;
+	timezone: string;
+}
+
+interface IDispatchProps {
+	uploadImage: (
+		file: File,
+		site: number | string,
+		setProgress?: (progress: number) => void,
+		visible?: boolean,
+	) => Promise<IImage | null>;
+	updateUser: (id: number, data: IUser, isProfile: boolean, isList?: boolean) => Promise<boolean>;
+	setHistoryPush: (path: string) => void;
+}
+
+type IProps = IModal & IStateProps & IDispatchProps;
+
+const mapStateToProps = (state: IRootState): IStateProps => ({
+	currentUser: state.users.currentUser!,
+	roles: state.users.roles,
+	sites: state.sites.allSites,
+});
+
+const mapDispatchToProps = {
+	uploadImage: galleryActions.uploadImage,
+	updateUser: usersActions.updateUser,
+	setHistoryPush: appActions.setHistoryPush,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(WelcomeModal);

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+const ProgressBar = styled.div<{ width: string }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 2px;
+  width: ${(p) => p.width};
+  background-color: ${(p) => p.theme.color.interactive01};
+`;
+
+export { ProgressBar };

package/src/modules/Sites/SitesList/WelcomeModal/utils.ts

@@ -0,0 +1,26 @@
+import type { ISiteRoles } from "@ax/types";
+
+const GENERIC_DOMAINS = new Set(["gmail", "hotmail", "outlook", "yahoo", "icloud", "live", "msn", "aol"]);
+
+const getCompanyFromEmail = (email: string): string => {
+	const domain = email.split("@")[1] ?? "";
+	const company = domain.substring(0, domain.lastIndexOf("."));
+	if (GENERIC_DOMAINS.has(company)) return "";
+	return company.charAt(0).toUpperCase() + company.slice(1);
+};
+
+const getMostFrequentRole = (userRoles: ISiteRoles[]): number | null => {
+	const roleCounts: Record<number, number> = {};
+
+	userRoles.forEach(({ roles }) => {
+		roles.forEach((roleId) => {
+			roleCounts[roleId] = (roleCounts[roleId] || 0) + 1;
+		});
+	});
+
+	if (Object.keys(roleCounts).length === 0) return null;
+
+	return Number(Object.entries(roleCounts).reduce((prev, curr) => (curr[1] > prev[1] ? curr : prev))[0]);
+};
+
+export { getCompanyFromEmail, getMostFrequentRole };

package/src/modules/Sites/SitesList/atoms.tsx

@@ -1,11 +1,9 @@
-import React from "react";
-
 import { trimText } from "@ax/helpers";
 import { Tooltip, Image } from "@ax/components";
 
 import * as S from "./style";
 
-export const ItemName = (props: IItemNameProps): JSX.Element => {
+const ItemName = (props: IItemNameProps): JSX.Element => {
 	const { name, length } = props;
 	return name.length > length ? (
 		<Tooltip content={name} left={120}>
@@ -16,7 +14,7 @@ export const ItemName = (props: IItemNameProps): JSX.Element => {
 	);
 };
 
-export const ItemThumbnail = (props: IItemThumbnailProps): JSX.Element => {
+const ItemThumbnail = (props: IItemThumbnailProps): JSX.Element => {
 	const { src, width, height, borderRadius } = props;
 	const thumbnailPlaceholder = "/img/placeholder/thumbnail@1x.png";
 	return src ? (
@@ -45,3 +43,5 @@ interface IItemThumbnailProps {
 	height: number;
 	borderRadius?: boolean;
 }
+
+export { ItemName, ItemThumbnail };