@evenicanpm/storefront-core 2.1.0 → 2.3.0

package/src/pages/account/orders/order-history-row.tsx

@@ -0,0 +1,110 @@
+import type { SalesOrder } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
+// GLOBAL CUSTOM COMPONENT
+import {
+	H6,
+	Paragraph,
+} from "@evenicanpm/storefront-core/src/components/Typography";
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
+// CUSTOM UTILS LIBRARY FUNCTION;
+import TableRow from "@evenicanpm/storefront-core/src/pages/account/table-row";
+import type { ChipProps } from "@mui/material";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import IconButton from "@mui/material/IconButton";
+import { format } from "date-fns";
+import Link from "next/link";
+import { createContext, useContext } from "react";
+import { MdEast as East } from "react-icons/md";
+
+const STATUS_MAP: Record<number, { label: string; color: ChipProps["color"] }> =
+	{
+		1: { label: "Created", color: "secondary" },
+		2: { label: "Processing", color: "secondary" },
+		3: { label: "Delivered", color: "success" },
+		4: { label: "Invoiced", color: "primary" },
+		7: { label: "Cancelled", color: "primary" },
+	};
+
+const getStatusInfo = (status: number) => {
+	return STATUS_MAP[status] ?? { label: "Pending", color: "default" };
+};
+
+export type OrderHistoryTableRowContextType = {
+	order: SalesOrder;
+};
+
+export const OrderHistoryTableRowContext = createContext<
+	OrderHistoryTableRowContextType | undefined
+>(undefined);
+
+export const useOrderHistoryTableRow = () => {
+	const context = useContext(OrderHistoryTableRowContext);
+	if (!context) {
+		throw new Error(
+			"Context must be used within a OrderHistoryTableRowContextProvider",
+		);
+	}
+	return context;
+};
+
+const OrderHistoryTableRow = ({ children }: { children: React.ReactNode }) => {
+	const { order } = useOrderHistoryTableRow();
+	const useTransactionId = order.Id && order.Id !== " ";
+
+	return (
+		<Link
+			href={`/account/orders/${useTransactionId ? order.Id : order.SalesId}/?id=${useTransactionId ? "TransactionId" : "SalesId"}`}
+		>
+			<TableRow sx={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
+				{children}
+			</TableRow>
+		</Link>
+	);
+};
+
+OrderHistoryTableRow.OrderNumber = () => {
+	const { order } = useOrderHistoryTableRow();
+	return <H6 ellipsis>{order?.ChannelReferenceId}</H6>;
+};
+
+OrderHistoryTableRow.OrderStatus = () => {
+	const { order } = useOrderHistoryTableRow();
+	const { label, color } = getStatusInfo(order.StatusValue ?? 0);
+	return (
+		<Box textAlign="center">
+			<Chip size="small" label={label} color={color} />
+		</Box>
+	);
+};
+
+OrderHistoryTableRow.TransactionDate = () => {
+	const { order } = useOrderHistoryTableRow();
+	return (
+		<Paragraph textAlign={{ sm: "center", xs: "left" }}>
+			{format(new Date(order.CreatedDateTime ?? ""), "MMM dd, yyyy")}
+		</Paragraph>
+	);
+};
+
+OrderHistoryTableRow.TransactionAmount = () => {
+	const { order } = useOrderHistoryTableRow();
+	const { formatCurrency } = useCurrencyFormatter();
+
+	return (
+		<Paragraph textAlign="center">
+			{formatCurrency(order.TotalAmount ?? 0)}
+		</Paragraph>
+	);
+};
+
+OrderHistoryTableRow.DetailsIcon = () => {
+	return (
+		<Box display={{ sm: "inline-flex", xs: "none" }} justifyContent="end">
+			<IconButton sx={{ color: "grey.500" }}>
+				<East fontSize="large" />
+			</IconButton>
+		</Box>
+	);
+};
+
+export default OrderHistoryTableRow;

package/src/pages/account/orders/order-history-search-and-filter.tsx

@@ -0,0 +1,449 @@
+import getStoresList from "@evenicanpm/storefront-core/src/api-manager/services/organization/queries/get-stores";
+import type {
+	OrderSearchCriteria,
+	SalesStatus,
+} from "@msdyn365-commerce/retail-proxy";
+import { Box } from "@mui/material";
+import { createContext, useContext, useState } from "react";
+import {
+	type CreatedDateFilter,
+	FilterSourceType,
+	type OrderStatusFilter,
+	type OriginFilter,
+} from "./order-history-filter-types";
+import OrdersFilterPanel from "./order-history-filters-panel";
+import { useOrderHistory } from "./order-history-root";
+import OrdersSearchBar from "./order-history-search-bar";
+
+// interface OrdersSearchAndFilterProps {
+// 	handleSearch: (criteria: OrderSearchCriteria) => void;
+// }
+
+// export default function OrdersSearchAndFilter({
+// 	handleSearch,
+// }: OrdersSearchAndFilterProps) {
+// 	const { data: stores } = getStoresList.useData({
+// 		queryResultSettings: {
+// 			Paging: {
+// 				Skip: 0,
+// 				Top: 1000,
+// 			},
+// 		},
+// 		searchArea: {
+// 			DistanceUnitValue: 0,
+// 			Latitude: 0,
+// 			Longitude: 0,
+// 			Radius: 0,
+// 		},
+// 	});
+
+// 	const originOptions: OriginFilter[] =
+// 		stores?.map((store) => ({
+// 			sourceType: FilterSourceType.Origin,
+// 			label: store.location.OrgUnitName || "",
+// 			value: store.location.ChannelId || 0,
+// 		})) || [];
+
+// 	// Search bar
+// 	const [searchText, setSearchText] = useState<string>("");
+// 	const [selectedSearchOption, setSelectedSearchOption] = useState<number>(0);
+
+// 	// Filters
+// 	const [selectedOrigins, setSelectedOrigins] = useState<OriginFilter[]>([]);
+// 	const [createdDate, setCreatedDate] = useState<CreatedDateFilter>();
+// 	const [orderStatus, setOrderStatus] = useState<OrderStatusFilter>();
+
+// 	const handleSelectCreatedDate = (
+// 		date: CreatedDateFilter | undefined,
+// 		toggle = true,
+// 	) => {
+// 		toggle
+// 			? setCreatedDate((prev) =>
+// 					prev?.label === date?.label ? undefined : date,
+// 				)
+// 			: setCreatedDate(date);
+// 	};
+
+// 	const handleSelectOrderStatus = (status: OrderStatusFilter | undefined) => {
+// 		setOrderStatus((prev) =>
+// 			prev?.label === status?.label ? undefined : status,
+// 		);
+// 	};
+
+// 	const handleSelectOrigin = (origin: OriginFilter) => {
+// 		setSelectedOrigins((prev) => {
+// 			const exists = prev.some((o) => o.label === origin.label);
+// 			return exists
+// 				? prev.filter((o) => o.label !== origin.label)
+// 				: [...prev, origin];
+// 		});
+// 	};
+
+// 	const executeSearch = () => {
+// 		const searchCriteria = createSearchCriteria();
+// 		handleSearch(searchCriteria);
+// 	};
+
+// 	const createSearchCriteria = (): OrderSearchCriteria => {
+// 		const orderSearchCriteria: OrderSearchCriteria = {};
+
+// 		const channelIds: number[] = selectedOrigins.map((origin) => origin.value);
+// 		if (channelIds.length > 0) {
+// 			orderSearchCriteria.ChannelIds = channelIds;
+// 		}
+// 		const salesStatus = orderStatus?.value ?? undefined;
+// 		const salesStatuses: SalesStatus[] =
+// 			salesStatus !== undefined ? [salesStatus] : [];
+// 		if (salesStatuses.length > 0) {
+// 			orderSearchCriteria.OrderStatusValues = salesStatuses;
+// 		}
+
+// 		if (createdDate) {
+// 			const { startDate, endDate } = getDateRange(createdDate);
+// 			orderSearchCriteria.StartDateTime = startDate;
+// 			orderSearchCriteria.EndDateTime = endDate;
+// 		}
+
+// 		if (searchText) {
+// 			if (selectedSearchOption === 0) {
+// 				orderSearchCriteria.ChannelReferenceId = searchText;
+// 			} else if (selectedSearchOption === 1) {
+// 				orderSearchCriteria.SalesId = searchText;
+// 			} else if (selectedSearchOption === 2) {
+// 				const channelIds = stores
+// 					?.filter((store) =>
+// 						store.location.OrgUnitName?.toLocaleLowerCase().includes(
+// 							searchText.toLowerCase(),
+// 						),
+// 					)
+// 					.map((store) => store.location.ChannelId)
+// 					.filter((id): id is number => id !== undefined);
+
+// 				if (channelIds?.length) {
+// 					if (orderSearchCriteria.ChannelIds?.length) {
+// 						// Find interesting channels between searched name and selected filters
+// 						const intersectingChannelIds = channelIds.filter((id) =>
+// 							orderSearchCriteria.ChannelIds?.includes(id),
+// 						);
+
+// 						orderSearchCriteria.ChannelIds = intersectingChannelIds;
+// 					} else {
+// 						orderSearchCriteria.ChannelIds = channelIds;
+// 					}
+// 				}
+// 			}
+// 		}
+
+// 		return orderSearchCriteria;
+// 	};
+
+// 	const getDateRange = (
+// 		option: CreatedDateFilter | undefined,
+// 	): {
+// 		startDate: Date;
+// 		endDate: Date;
+// 	} => {
+// 		const endDate = new Date(); // today
+// 		const startDate = new Date();
+
+// 		switch (option?.label) {
+// 			case "Last 7 days":
+// 				startDate.setDate(endDate.getDate() - 7);
+// 				break;
+// 			case "Last 30 days":
+// 				startDate.setDate(endDate.getDate() - 30);
+// 				break;
+// 			case "Last 3 months":
+// 				startDate.setMonth(endDate.getMonth() - 3);
+// 				break;
+// 			case "Last 6 months":
+// 				startDate.setMonth(endDate.getMonth() - 6);
+// 				break;
+// 			case "Custom Dates":
+// 				if (option.startValue && option.endValue) {
+// 					const customStart = parseLocalDate(option.startValue);
+// 					const customEnd = parseLocalDate(option.endValue, true);
+// 					if (isNaN(customStart.getTime()) || isNaN(customEnd.getTime())) {
+// 						throw new Error("Invalid date format in customized date range.");
+// 					}
+
+// 					startDate.setTime(customStart.getTime());
+// 					endDate.setTime(customEnd.getTime());
+// 				} else {
+// 					throw new Error(
+// 						"Customized date range must have start and end values.",
+// 					);
+// 				}
+// 				break;
+// 			default:
+// 				throw new Error(`Unsupported date filter option: ${option}`);
+// 		}
+
+// 		return { startDate, endDate };
+// 	};
+
+// 	const parseLocalDate = (dateStr: string, endOfDay = false): Date => {
+// 		const [year, month, day] = dateStr.split("-").map(Number);
+// 		// month is 0-based in JS Date
+// 		return endOfDay
+// 			? new Date(year, month - 1, day, 23, 59, 59, 999)
+// 			: new Date(year, month - 1, day, 0, 0, 0, 0);
+// 	};
+
+// 	return (
+// 		<Box>
+// 			{/* SEARCH BAR */}
+// 			<OrdersSearchBar
+// 				setSearchText={setSearchText}
+// 				selectedSearchOption={selectedSearchOption}
+// 				setSelectedSearchOption={setSelectedSearchOption}
+// 				executeSearch={executeSearch}
+// 			/>
+
+// 			{/* FITLERS BAR */}
+// 			<OrdersFilterPanel
+// 				originOptions={originOptions}
+// 				selectedOrigins={selectedOrigins}
+// 				handleSelectOrigin={handleSelectOrigin}
+// 				createdDate={createdDate}
+// 				setCreatedDate={handleSelectCreatedDate}
+// 				orderStatus={orderStatus}
+// 				setOrderStatus={handleSelectOrderStatus}
+// 			/>
+// 		</Box>
+// 	);
+// }
+
+type OrdersSearchAndFilterContextType = {
+	// Search states
+	searchText: string;
+	setSearchText: (text: string) => void;
+	selectedSearchOption: number;
+	setSelectedSearchOption: (option: number) => void;
+
+	// Filter states
+	originOptions: OriginFilter[];
+	selectedOrigins: OriginFilter[];
+	handleSelectOrigin: (origin: OriginFilter) => void;
+	createdDate?: CreatedDateFilter;
+	handleSelectCreatedDate: (
+		date: CreatedDateFilter | undefined,
+		toggle?: boolean,
+	) => void;
+	orderStatus?: OrderStatusFilter;
+	handleSelectOrderStatus: (status: OrderStatusFilter | undefined) => void;
+
+	// Actions
+	executeSearch: () => void;
+};
+
+const OrdersSearchAndFilterContext = createContext<
+	OrdersSearchAndFilterContextType | undefined
+>(undefined);
+
+export const useOrdersSearchAndFilter = () => {
+	const context = useContext(OrdersSearchAndFilterContext);
+	if (!context) {
+		throw new Error("Must be used within OrdersSearchAndFilterProvider");
+	}
+	return context;
+};
+
+const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
+	const { setOrderSearchCriteria } = useOrderHistory();
+	const { data: stores } = getStoresList.useData({
+		queryResultSettings: {
+			Paging: {
+				Skip: 0,
+				Top: 1000,
+			},
+		},
+		searchArea: {
+			DistanceUnitValue: 0,
+			Latitude: 0,
+			Longitude: 0,
+			Radius: 0,
+		},
+	});
+
+	// Search states
+	const [searchText, setSearchText] = useState<string>("");
+	const [selectedSearchOption, setSelectedSearchOption] = useState<number>(0);
+
+	// Filter states
+	const [selectedOrigins, setSelectedOrigins] = useState<OriginFilter[]>([]);
+	const [createdDate, setCreatedDate] = useState<CreatedDateFilter>();
+	const [orderStatus, setOrderStatus] = useState<OrderStatusFilter>();
+
+	const originOptions: OriginFilter[] =
+		stores?.map((store) => ({
+			sourceType: FilterSourceType.Origin,
+			label: store.location.OrgUnitName || "",
+			value: store.location.ChannelId || 0,
+		})) || [];
+
+	const handleSelectOrigin = (origin: OriginFilter) => {
+		setSelectedOrigins((prev) => {
+			const exists = prev.some((o) => o.label === origin.label);
+			return exists
+				? prev.filter((o) => o.label !== origin.label)
+				: [...prev, origin];
+		});
+	};
+
+	const handleSelectCreatedDate = (
+		date: CreatedDateFilter | undefined,
+		toggle = true,
+	) => {
+		toggle
+			? setCreatedDate((prev) =>
+					prev?.label === date?.label ? undefined : date,
+				)
+			: setCreatedDate(date);
+	};
+
+	const handleSelectOrderStatus = (status: OrderStatusFilter | undefined) => {
+		setOrderStatus((prev) =>
+			prev?.label === status?.label ? undefined : status,
+		);
+	};
+
+	const executeSearch = () => {
+		const searchCriteria = createSearchCriteria();
+		setOrderSearchCriteria(searchCriteria);
+	};
+
+	const createSearchCriteria = (): OrderSearchCriteria => {
+		const orderSearchCriteria: OrderSearchCriteria = {};
+
+		const channelIds: number[] = selectedOrigins.map((origin) => origin.value);
+		if (channelIds.length > 0) {
+			orderSearchCriteria.ChannelIds = channelIds;
+		}
+		const salesStatus = orderStatus?.value ?? undefined;
+		const salesStatuses: SalesStatus[] =
+			salesStatus !== undefined ? [salesStatus] : [];
+		if (salesStatuses.length > 0) {
+			orderSearchCriteria.OrderStatusValues = salesStatuses;
+		}
+
+		if (createdDate) {
+			const { startDate, endDate } = getDateRange(createdDate);
+			orderSearchCriteria.StartDateTime = startDate;
+			orderSearchCriteria.EndDateTime = endDate;
+		}
+
+		if (searchText) {
+			if (selectedSearchOption === 0) {
+				orderSearchCriteria.ChannelReferenceId = searchText;
+			} else if (selectedSearchOption === 1) {
+				orderSearchCriteria.SalesId = searchText;
+			} else if (selectedSearchOption === 2) {
+				const channelIds = stores
+					?.filter((store) =>
+						store.location.OrgUnitName?.toLocaleLowerCase().includes(
+							searchText.toLowerCase(),
+						),
+					)
+					.map((store) => store.location.ChannelId)
+					.filter((id): id is number => id !== undefined);
+
+				if (channelIds?.length) {
+					if (orderSearchCriteria.ChannelIds?.length) {
+						const intersectingChannelIds = channelIds.filter((id) =>
+							orderSearchCriteria.ChannelIds?.includes(id),
+						);
+
+						orderSearchCriteria.ChannelIds = intersectingChannelIds;
+					} else {
+						orderSearchCriteria.ChannelIds = channelIds;
+					}
+				}
+			}
+		}
+
+		return orderSearchCriteria;
+	};
+
+	const getDateRange = (
+		option: CreatedDateFilter | undefined,
+	): {
+		startDate: Date;
+		endDate: Date;
+	} => {
+		const endDate = new Date();
+		const startDate = new Date();
+
+		switch (option?.label) {
+			case "Last 7 days":
+				startDate.setDate(endDate.getDate() - 7);
+				break;
+			case "Last 30 days":
+				startDate.setDate(endDate.getDate() - 30);
+				break;
+			case "Last 3 months":
+				startDate.setMonth(endDate.getMonth() - 3);
+				break;
+			case "Last 6 months":
+				startDate.setMonth(endDate.getMonth() - 6);
+				break;
+			case "Custom Dates":
+				if (option.startValue && option.endValue) {
+					const customStart = parseLocalDate(option.startValue);
+					const customEnd = parseLocalDate(option.endValue, true);
+					if (
+						Number.isNaN(customStart.getTime()) ||
+						Number.isNaN(customEnd.getTime())
+					) {
+						throw new Error("Invalid date format in customized date range.");
+					}
+
+					startDate.setTime(customStart.getTime());
+					endDate.setTime(customEnd.getTime());
+				} else {
+					throw new Error(
+						"Customized date range must have start and end values.",
+					);
+				}
+				break;
+			default:
+				throw new Error(`Unsupported date filter option: ${option}`);
+		}
+
+		return { startDate, endDate };
+	};
+
+	const parseLocalDate = (dateStr: string, endOfDay = false): Date => {
+		const [year, month, day] = dateStr.split("-").map(Number);
+		// month is 0-based in JS Date
+		return endOfDay
+			? new Date(year, month - 1, day, 23, 59, 59, 999)
+			: new Date(year, month - 1, day, 0, 0, 0, 0);
+	};
+
+	const value = {
+		searchText,
+		setSearchText,
+		selectedSearchOption,
+		setSelectedSearchOption,
+		originOptions,
+		selectedOrigins,
+		handleSelectOrigin,
+		createdDate,
+		handleSelectCreatedDate,
+		orderStatus,
+		handleSelectOrderStatus,
+		executeSearch,
+	};
+
+	return (
+		<OrdersSearchAndFilterContext.Provider value={value}>
+			<Box>{children}</Box>
+		</OrdersSearchAndFilterContext.Provider>
+	);
+};
+
+OrdersSearchAndFilter.Search = OrdersSearchBar;
+OrdersSearchAndFilter.FiltersPanel = OrdersFilterPanel;
+
+export default OrdersSearchAndFilter;

package/src/pages/account/orders/order-history-search-bar.tsx

@@ -0,0 +1,84 @@
+import { Box, Button, TextField } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useOrdersSearchAndFilter } from "./order-history-search-and-filter";
+import OrdersSearchDropdown from "./order-history-search-dropdown";
+
+export type DisplaySearchOption = {
+	name: string;
+	id: number;
+};
+
+const searchOptions: DisplaySearchOption[] = [
+	{ id: 0, name: "Order Number" },
+	{ id: 1, name: "Sales ID" },
+	{ id: 2, name: "Channel Name" },
+];
+
+const OrdersSearchBar = () => {
+	const {
+		setSearchText,
+		selectedSearchOption,
+		setSelectedSearchOption,
+		executeSearch,
+	} = useOrdersSearchAndFilter();
+	const t = useTranslations("Account.Orders");
+
+	const findOptionNameById = () => {
+		return (
+			searchOptions.find((opt) => opt.id === selectedSearchOption)?.name || ""
+		);
+	};
+
+	const INPUT_PROPS = {
+		sx: {
+			height: 44,
+			padding: 0,
+			overflow: "hidden",
+			backgroundColor: "grey.200",
+			"& .MuiOutlinedInput-notchedOutline": { border: 0 },
+			"& .MuiOutlinedInput-input": {
+				paddingLeft: 2,
+				paddingRight: 2,
+			},
+		},
+		startAdornment: (
+			<OrdersSearchDropdown
+				title={findOptionNameById()}
+				handleChange={setSelectedSearchOption}
+				searchOptions={searchOptions}
+			/>
+		),
+		endAdornment: (
+			<Button
+				onClick={executeSearch}
+				color="primary"
+				disableElevation
+				variant="contained"
+				sx={{ px: "3rem", height: "100%", borderRadius: "0 4px 4px 0" }}
+			>
+				{t("searchBtn")}
+			</Button>
+		),
+	};
+
+	return (
+		<Box
+			position="relative"
+			flex="1 1 0"
+			maxWidth="670px"
+			mx="auto"
+			mr="auto"
+			ml="0px"
+		>
+			<TextField
+				fullWidth
+				variant="outlined"
+				placeholder={t("searchOrderHistoryPlaceholder")}
+				onChange={(e) => setSearchText(e.target.value)}
+				InputProps={INPUT_PROPS}
+			/>
+		</Box>
+	);
+};
+
+export default OrdersSearchBar;

package/src/pages/account/orders/order-history-search-dropdown.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Menu from "@evenicanpm/storefront-core/src/components/BazaarMenu";
+import TouchRipple from "@mui/material/ButtonBase";
+import MenuItem from "@mui/material/MenuItem";
+import useTheme from "@mui/material/styles/useTheme";
+import { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
+import type { DisplaySearchOption } from "./order-history-search-bar";
+import { OrdersDropDownHandler } from "./orders-drop-down-handler";
+
+interface Props {
+	title: string;
+	handleChange: (optionId: number) => void;
+	searchOptions: DisplaySearchOption[];
+}
+
+export default function OrdersSearchDropdown({
+	title,
+	handleChange,
+	searchOptions,
+}: Props) {
+	const { breakpoints } = useTheme();
+	const _searchOptions = Array.isArray(searchOptions) ? searchOptions : [];
+	const options: DisplaySearchOption[] = [
+		..._searchOptions.map((opt) => ({ name: opt?.name ?? "", id: opt.id })),
+	];
+
+	return (
+		<Menu
+			direction="right"
+			sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
+			handler={(e) => (
+				<OrdersDropDownHandler as={TouchRipple} onClick={e}>
+					{title}
+					<KeyboardArrowDownOutlined fontSize="small" color="inherit" />
+				</OrdersDropDownHandler>
+			)}
+			options={(onClose) => {
+				return options.map((item: DisplaySearchOption) => (
+					<MenuItem
+						key={item.id}
+						onClick={() => {
+							handleChange(item.id);
+							onClose();
+						}}
+					>
+						{item.name}
+					</MenuItem>
+				));
+			}}
+		/>
+	);
+}