@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/components/list-filter/multi-select-filter.tsx

@@ -1,22 +1,23 @@
-import { useTranslations } from "next-intl";
+import { CloseOutlined } from "@mui/icons-material";
 import {
 	Box,
-	Typography,
+	Chip,
+	FormControl,
 	IconButton,
 	InputAdornment,
-	Select,
 	MenuItem,
-	Theme,
+	Select,
+	type Theme,
+	Typography,
 	useTheme,
-	FormControl,
-	Chip,
 } from "@mui/material";
-import { CloseOutlined } from "@mui/icons-material";
-import React, { useState } from "react";
-import {
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type {
 	FilterOption,
-	MultiSelectFilter,
 	FilterProps,
+	MultiSelectFilter,
 } from "./list-filter-types";
 
 const MultiSelectFilterComponent: React.FC<FilterProps<MultiSelectFilter>> = ({

package/src/components/list-filter/select-filter.tsx

@@ -1,17 +1,22 @@
-import { useTranslations } from "next-intl";
+import { CloseOutlined } from "@mui/icons-material";
 import {
-	Typography,
+	FormControl,
 	IconButton,
 	InputAdornment,
-	Select,
 	MenuItem,
-	Theme,
+	Select,
+	type Theme,
+	Typography,
 	useTheme,
-	FormControl,
 } from "@mui/material";
-import { CloseOutlined } from "@mui/icons-material";
-import React, { useState } from "react";
-import { FilterOption, SelectFilter, FilterProps } from "./list-filter-types";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type {
+	FilterOption,
+	FilterProps,
+	SelectFilter,
+} from "./list-filter-types";
 
 const SelectFilterComponent: React.FC<FilterProps<SelectFilter>> = ({
 	filter,
@@ -34,10 +39,16 @@ const SelectFilterComponent: React.FC<FilterProps<SelectFilter>> = ({
 	) as { [id: string | number]: FilterOption };
 
 	const updateValue = (optionId: string | number | null) => {
-		const newValue =
-			optionId !== null ? mappedOptionDictionary[optionId] : null;
-		setValue(newValue && [newValue]);
-		onSet(newValue && [newValue]);
+		if (optionId == null) {
+			setValue(null);
+			onSet(null);
+			return;
+		}
+
+		const newValue = mappedOptionDictionary[optionId];
+
+		setValue(newValue ? [newValue] : null);
+		onSet(newValue ? [newValue] : null);
 	};
 
 	return (

package/src/components/scheduler/day-selector.tsx

@@ -1,10 +1,17 @@
-import { useTranslations } from "next-intl";
 // MUI
-import { Theme, useTheme } from "@mui/material";
-import { Typography, Box, Stack, ButtonBase } from "@mui/material";
+import {
+	Box,
+	ButtonBase,
+	Stack,
+	type SxProps,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
 
 // Types
-import { IsDay } from "./scheduler-types";
+import type { IsDay } from "./scheduler-types";
 
 interface Props {
 	days: IsDay;
@@ -16,7 +23,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 	const t = useTranslations("Integrate.Scheduler.DaySelector");
 
 	const theme = useTheme();
-	const styles = getStyles(theme);
+	const styles: DaySelectorStyles = getStyles(theme);
 
 	const handleClick = (field: keyof IsDay) => {
 		if (!props.disabled) {
@@ -34,7 +41,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isMonday)}
+					sx={getDayStyle(styles, props.days?.isMonday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -49,7 +56,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isTuesday)}
+					sx={getDayStyle(styles, props.days?.isTuesday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -64,7 +71,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isWednesday)}
+					sx={getDayStyle(styles, props.days?.isWednesday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -79,7 +86,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isThursday)}
+					sx={getDayStyle(styles, props.days?.isThursday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -94,7 +101,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isFriday)}
+					sx={getDayStyle(styles, props.days?.isFriday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -109,7 +116,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isSaturday)}
+					sx={getDayStyle(styles, props.days?.isSaturday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -124,7 +131,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isSunday)}
+					sx={getDayStyle(styles, props.days?.isSunday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -137,7 +144,14 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 	);
 };
 
-const getStyles = (theme: Theme) => {
+interface DaySelectorStyles {
+	days: SxProps;
+	dayOfWeek: SxProps;
+	dayOfWeekSelected: SxProps;
+	dayInitial: SxProps;
+}
+
+const getStyles = (theme: Theme): DaySelectorStyles => {
 	return {
 		days: {
 			marginTop: theme.spacing(0),
@@ -164,9 +178,9 @@ const getStyles = (theme: Theme) => {
 	};
 };
 
-const getDayStyle = (styles: any, selected: boolean) => {
+const getDayStyle = (styles: DaySelectorStyles, selected: boolean): SxProps => {
 	if (selected) {
-		return { ...styles.dayOfWeek, ...styles.dayOfWeekSelected };
+		return { ...styles.dayOfWeek, ...styles.dayOfWeekSelected } as SxProps;
 	}
 	return styles.dayOfWeek;
 };

package/src/components/scheduler/day-tag.tsx

@@ -1,22 +1,8 @@
-import React from "react";
+import { StatusTag } from "@evenicanpm/admin-integrate/components/core";
+import type { SxProps } from "@mui/material";
 import { useTranslations } from "next-intl";
 
-import { styled } from "@mui/material/styles";
-import { Box, Typography, SxProps } from "@mui/material";
-
-import { DayString } from "./scheduler-types";
-
-// Styled components
-const StyledTagBox = styled(Box)(({ theme }) => ({
-	padding: theme.spacing(0, 1.5),
-	border: "solid 1px",
-	borderRadius: 4,
-	alignContent: "center",
-	maxWidth: "fit-content",
-}));
-const StyledTag = styled(Typography)(() => ({
-	fontWeight: "bold",
-}));
+import type { DayString } from "./scheduler-types";
 
 interface Props {
 	day: DayString;
@@ -28,45 +14,22 @@ const DayTag: React.FC<Props> = (props: Props) => {
 
 	if (props.day === "disabled") {
 		return (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "grey.300",
-					borderColor: "grey.600",
-					color: "grey.600",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="grey" variant="caption">
-					{t("Scheduler.disabled")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag
+				type="unavailable"
+				text={t("Scheduler.disabled")}
+				sx={props.sx}
+			/>
 		);
 	}
 
 	return props.day === "everyday" ? (
-		<StyledTagBox
-			sx={{
-				backgroundColor: "success.100",
-				borderColor: "success.main",
-				...props.sx,
-			}}
-		>
-			<StyledTag color="success" variant="caption">
-				{t("Scheduler.everyday")}
-			</StyledTag>
-		</StyledTagBox>
+		<StatusTag type="success" text={t("Scheduler.everyday")} sx={props.sx} />
 	) : (
-		<StyledTagBox
-			sx={{
-				backgroundColor: "info.100",
-				borderColor: "info.main",
-				...props.sx,
-			}}
-		>
-			<StyledTag color="info" variant="caption">
-				{t(`Scheduler.${props.day}Short`)}
-			</StyledTag>
-		</StyledTagBox>
+		<StatusTag
+			type="info"
+			text={t(`Scheduler.${props.day}Short`)}
+			sx={props.sx}
+		/>
 	);
 };
 

package/src/components/scheduler/index.ts

@@ -1,4 +1,5 @@
+export { default as DaySelector } from "./day-selector";
 export { default as DayTag } from "./day-tag";
 export { default as ScheduleIcon } from "./schedule-icon";
-export { default as DaySelector } from "./day-selector";
+export { default as ScheduleIntegrationIcon } from "./schedule-integration-icon";
 export * from "./scheduler-types";

package/src/components/scheduler/schedule-drawer/details-reducer.ts

@@ -0,0 +1,217 @@
+import type {
+	ProcessScheduleGroupDetailsProcessInput,
+	ProcessScheduleGroupDetailsUpdate,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import type { IsDay } from "@evenicanpm/admin-integrate/components/scheduler";
+
+export interface DefaultScheduledProcess {
+	id: string;
+	name: string;
+	processIcon: string;
+}
+
+export enum DetailsActionType {
+	INIT = "INIT",
+	CLOSE = "CLOSE",
+	EDIT_NAME = "EDIT_NAME",
+	TOGGLE_ENABLED = "TOGGLE_ENABLED",
+	EDIT_DAYS = "EDIT_DAYS",
+	EDIT_START_DATE = "EDIT_START_DATE",
+	EDIT_RECURRENCE = "EDIT_RECURRENCE",
+	EDIT_INTEGRATIONS = "EDIT_INTEGRATIONS",
+	INIT_BLANK = "INIT_BLANK",
+	SET_ERRORS = "SET_ERRORS",
+	SET_DEFAULT_SCHEDULED_PROCESS = "SET_DEFAULT_SCHEDULED_PROCESS",
+}
+
+export interface DetailsAction {
+	type: DetailsActionType;
+}
+
+export interface InitAction extends DetailsAction {
+	details: ProcessScheduleGroupDetailsUpdate;
+}
+
+export interface EditNameAction extends DetailsAction {
+	name: string;
+}
+
+export interface EditDaysAction extends DetailsAction {
+	isDay: IsDay;
+}
+
+export interface EditStartDateAction extends DetailsAction {
+	startDate: string;
+}
+
+export interface EditRecurrenceAction extends DetailsAction {
+	interval?: number;
+	intervalUnitId?: string;
+}
+
+export interface EditIntegrationsAction extends DetailsAction {
+	processes: ProcessScheduleGroupDetailsProcessInput[];
+}
+
+export interface SetErrorsAction extends DetailsAction {
+	errors: ErrorsState;
+}
+
+export interface SetDefaultScheduledProcessAction extends DetailsAction {
+	defaultScheduledProcess: DefaultScheduledProcess;
+}
+
+export interface ErrorsState {
+	name?: boolean;
+	startDate?: boolean;
+	interval?: boolean;
+	processes?: boolean;
+}
+
+export interface DetailsState {
+	details: ProcessScheduleGroupDetailsUpdate | null;
+	errors?: ErrorsState;
+	defaultScheduledProcess?: DefaultScheduledProcess;
+}
+
+export function detailsReducer(
+	state: DetailsState,
+	action: DetailsAction,
+): DetailsState {
+	switch (action.type) {
+		case DetailsActionType.INIT: {
+			const { details } = action as InitAction;
+			return {
+				...state,
+				details,
+				errors: {
+					name: !details.name || details.name === "",
+					startDate: !details.startDate,
+					interval: !details.interval,
+					processes: !details.processes || details.processes.length === 0,
+				},
+			};
+		}
+		case DetailsActionType.INIT_BLANK: {
+			const blankState: ProcessScheduleGroupDetailsUpdate = {
+				id: "",
+				name: "",
+				code: "",
+				isDisabled: false,
+				interval: 5,
+				intervalUnitId: "1",
+				startDate: new Date().toISOString(),
+				processes: [],
+			};
+			return {
+				...state,
+				details: blankState,
+				errors: {
+					name: !blankState.name || blankState.name === "",
+					processes: !blankState.processes || blankState.processes.length === 0,
+				},
+			};
+		}
+		case DetailsActionType.CLOSE: {
+			return { details: null };
+		}
+		case DetailsActionType.EDIT_NAME: {
+			if (!state.details) return state;
+
+			const { name } = action as EditNameAction;
+			const code = name.replaceAll(" ", "_").toLowerCase();
+			return {
+				...state,
+				details: {
+					...state.details,
+					name,
+					code,
+				},
+			};
+		}
+		case DetailsActionType.TOGGLE_ENABLED: {
+			if (!state.details) return state;
+
+			return {
+				...state,
+				details: {
+					...state.details,
+					isDisabled: !state.details.isDisabled,
+				},
+			};
+		}
+		case DetailsActionType.EDIT_DAYS: {
+			if (!state.details) return state;
+
+			const { isDay } = action as EditDaysAction;
+			return {
+				...state,
+				details: {
+					...state.details,
+					...isDay,
+				},
+			};
+		}
+		case DetailsActionType.EDIT_START_DATE: {
+			if (!state.details) return state;
+
+			const { startDate } = action as EditStartDateAction;
+			return {
+				...state,
+				details: {
+					...state.details,
+					startDate,
+				},
+			};
+		}
+		case DetailsActionType.EDIT_RECURRENCE: {
+			if (!state.details) return state;
+
+			const { interval, intervalUnitId } = action as EditRecurrenceAction;
+			return {
+				...state,
+				details: {
+					...state.details,
+					...(interval !== undefined && { interval }),
+					...(intervalUnitId !== undefined && { intervalUnitId }),
+				},
+			};
+		}
+		case DetailsActionType.EDIT_INTEGRATIONS: {
+			if (!state.details) return state;
+
+			const { processes } = action as EditIntegrationsAction;
+			return {
+				...state,
+				details: {
+					...state.details,
+					processes: processes,
+				},
+			};
+		}
+		case DetailsActionType.SET_DEFAULT_SCHEDULED_PROCESS: {
+			const { defaultScheduledProcess } =
+				action as SetDefaultScheduledProcessAction;
+			return {
+				...state,
+				defaultScheduledProcess: defaultScheduledProcess,
+			};
+		}
+		case DetailsActionType.SET_ERRORS: {
+			if (!state.details) return state;
+
+			const { errors } = action as SetErrorsAction;
+			return {
+				...state,
+				errors: {
+					...state.errors,
+					...errors,
+				},
+			};
+		}
+		default: {
+			console.error(`${action.type} is not a valid action for detailsReducer`);
+			return state;
+		}
+	}
+}