@evenicanpm/storefront-core 2.1.0 → 2.3.0

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

@@ -0,0 +1,26 @@
+export enum FilterSourceType {
+	Origin = "Origin",
+	CreatedDate = "CreatedDate",
+	OrderStatus = "OrderStatus",
+}
+
+export interface OriginFilter {
+	sourceType: FilterSourceType.Origin;
+	label: string;
+	value: number;
+}
+
+export interface CreatedDateFilter {
+	sourceType: FilterSourceType.CreatedDate;
+	label: string;
+	startValue?: string;
+	endValue?: string;
+}
+
+export interface OrderStatusFilter {
+	sourceType: FilterSourceType.OrderStatus;
+	label: string;
+	value: number;
+}
+
+export type FilterOption = OriginFilter | CreatedDateFilter | OrderStatusFilter;

package/src/pages/account/orders/order-history-filters-panel.tsx

@@ -0,0 +1,375 @@
+import { SalesStatus } from "@msdyn365-commerce/retail-proxy";
+import { KeyboardArrowRight } from "@mui/icons-material";
+import {
+	Box,
+	Button,
+	Checkbox,
+	Divider,
+	FormControlLabel,
+	FormGroup,
+	Radio,
+	RadioGroup,
+	TextField,
+	Typography,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { HiX } from "react-icons/hi";
+import {
+	type CreatedDateFilter,
+	type FilterOption,
+	FilterSourceType,
+	type OrderStatusFilter,
+} from "./order-history-filter-types";
+import { useOrdersSearchAndFilter } from "./order-history-search-and-filter";
+
+const createdDateOptions: CreatedDateFilter[] = [
+	{
+		sourceType: FilterSourceType.CreatedDate,
+		label: "Last 7 days",
+	},
+	{
+		sourceType: FilterSourceType.CreatedDate,
+		label: "Last 30 days",
+	},
+	{
+		sourceType: FilterSourceType.CreatedDate,
+		label: "Last 3 months",
+	},
+	{
+		sourceType: FilterSourceType.CreatedDate,
+		label: "Last 6 months",
+	},
+	{
+		sourceType: FilterSourceType.CreatedDate,
+		label: "Custom Dates",
+		startValue: "",
+		endValue: "",
+	},
+];
+
+const orderStatusOptions: OrderStatusFilter[] = [
+	{
+		sourceType: FilterSourceType.OrderStatus,
+		label: "Created",
+		value: SalesStatus.Created,
+	},
+	{
+		sourceType: FilterSourceType.OrderStatus,
+		label: "Processing",
+		value: SalesStatus.Processing,
+	},
+	{
+		sourceType: FilterSourceType.OrderStatus,
+		label: "Delivered",
+		value: SalesStatus.Delivered,
+	},
+	{
+		sourceType: FilterSourceType.OrderStatus,
+		label: "Invoiced",
+		value: SalesStatus.Invoiced,
+	},
+	{
+		sourceType: FilterSourceType.OrderStatus,
+		label: "Cancelled",
+		value: SalesStatus.Canceled,
+	},
+];
+
+const OrdersFilterPanel = ({ children }: { children: React.ReactNode }) => {
+	const {
+		selectedOrigins,
+		handleSelectOrigin,
+		createdDate,
+		handleSelectCreatedDate,
+		orderStatus,
+		handleSelectOrderStatus,
+	} = useOrdersSearchAndFilter();
+	const [open, setOpen] = useState(false);
+	const t = useTranslations("Account.Orders");
+
+	const handleToggle = () => setOpen((prev) => !prev);
+
+	const activeFilters: FilterOption[] = [];
+	selectedOrigins.forEach((origin) => {
+		activeFilters.push(origin);
+	});
+	if (createdDate) {
+		activeFilters.push(createdDate);
+	}
+	if (orderStatus) {
+		activeFilters.push(orderStatus);
+	}
+
+	const handleRemoveActiveFilter = (filter: FilterOption) => {
+		switch (filter.sourceType) {
+			case FilterSourceType.Origin:
+				handleSelectOrigin(filter);
+				break;
+			case FilterSourceType.CreatedDate:
+				handleSelectCreatedDate(undefined);
+				break;
+			case FilterSourceType.OrderStatus:
+				handleSelectOrderStatus(undefined);
+				break;
+		}
+	};
+
+	const handleClearAllFilters = () => {
+		selectedOrigins.forEach((origin) => {
+			handleSelectOrigin(origin);
+		});
+		handleSelectCreatedDate(undefined);
+		handleSelectOrderStatus(undefined);
+	};
+
+	return (
+		<Box
+			sx={{
+				border: "1px solid #eee",
+				borderRadius: 2,
+				bgcolor: "#fff",
+				mb: 3,
+				mt: 2,
+				flex: "1 1 0",
+			}}
+		>
+			<Box display="flex" sx={{ pt: 1, pl: 1 }}>
+				<Button
+					onClick={handleToggle}
+					sx={{ textTransform: "none", mb: 1, mr: 1, ml: 1 }}
+				>
+					<Typography sx={{ marginRight: 1, fontWeight: 600 }}>
+						{t("filterBtn")}
+					</Typography>
+
+					<KeyboardArrowRight
+						fontSize="small"
+						color="inherit"
+						sx={{
+							transform: open ? "rotate(90deg)" : "rotate(0deg)", // 0deg = right, 90deg = down
+							transition: "transform 0.3s ease",
+							transformOrigin: "center",
+						}}
+					/>
+				</Button>
+				<Box>
+					{activeFilters.length > 0 &&
+						activeFilters.map((filter, index) => (
+							<Box
+								key={index}
+								sx={{
+									display: "inline-flex",
+									alignItems: "center",
+									backgroundColor: "#f0f0f0",
+									borderRadius: 4,
+									px: 1.5,
+									py: 0.75,
+									mr: 1,
+									mb: 1,
+									cursor: "pointer",
+
+									"&:hover": {
+										boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
+									},
+								}}
+								onClick={() => handleRemoveActiveFilter(filter)}
+							>
+								<Typography mr={1}>{filter.label}</Typography>
+								<HiX />
+							</Box>
+						))}
+				</Box>
+				{activeFilters.length > 0 && (
+					<Typography
+						sx={{
+							cursor: "pointer",
+							mx: 1,
+							my: 1,
+							minWidth: "60px",
+							textDecoration: "underline",
+						}}
+						onClick={handleClearAllFilters}
+					>
+						{t("clearAllBtn")}
+					</Typography>
+				)}
+			</Box>
+
+			{open && (
+				<>
+					<Box
+						display="flex"
+						gap={4}
+						p={3}
+						sx={{
+							border: "1px solid #e0e0e0",
+							borderRadius: 2,
+							bgcolor: "#fff",
+							mb: 2,
+						}}
+					>
+						{children}
+					</Box>
+
+					{/* Done Button */}
+					<Box textAlign="right" pr={2} pb={2}>
+						<Button
+							variant="contained"
+							color="primary"
+							onClick={handleToggle}
+							sx={{ borderRadius: "24px", textTransform: "none" }}
+						>
+							{t("doneBtn")}
+						</Button>
+					</Box>
+				</>
+			)}
+		</Box>
+	);
+};
+
+const OriginsFilterList = () => {
+	const { originOptions, selectedOrigins, handleSelectOrigin } =
+		useOrdersSearchAndFilter();
+	const t = useTranslations("Account.Orders");
+
+	return (
+		<Box>
+			<Typography fontWeight={600} mb={1}>
+				{t("originHeader")}
+			</Typography>
+			<Divider />
+			<FormGroup
+				sx={{
+					maxHeight: "400px",
+					overflowY: "auto",
+					flexWrap: "nowrap",
+				}}
+			>
+				{originOptions.map((originOption, index) => (
+					<FormControlLabel
+						key={index}
+						control={
+							<Checkbox
+								checked={selectedOrigins.some(
+									(o) => o.value === originOption.value,
+								)}
+								onChange={() => handleSelectOrigin(originOption)}
+							/>
+						}
+						label={originOption.label}
+					/>
+				))}
+			</FormGroup>
+		</Box>
+	);
+};
+
+const CreatedDateFilterList = () => {
+	const { createdDate, handleSelectCreatedDate } = useOrdersSearchAndFilter();
+	const t = useTranslations("Account.Orders");
+
+	return (
+		<Box sx={{ minWidth: "155px" }}>
+			<Typography fontWeight={600} mb={1}>
+				{t("createdDateHeader")}
+			</Typography>
+			<Divider />
+			<RadioGroup value={createdDate?.label ?? ""}>
+				{createdDateOptions.map((createdDateOption, index) => (
+					<div key={index}>
+						<FormControlLabel
+							key={createdDateOption.label}
+							value={createdDateOption.label}
+							control={
+								<Radio
+									onClick={() => {
+										handleSelectCreatedDate(createdDateOption);
+									}}
+								/>
+							}
+							label={createdDateOption.label}
+						/>
+						{createdDateOption.label === "Custom Dates" &&
+							createdDate &&
+							createdDate.label === "Custom Dates" && (
+								<Box mt={1} display="flex" flexDirection="column" gap={2}>
+									<TextField
+										label="From"
+										type="date"
+										value={createdDate?.startValue || ""}
+										onChange={(e) =>
+											handleSelectCreatedDate(
+												{ ...createdDate, startValue: e.target.value },
+												false,
+											)
+										}
+										slotProps={{
+											inputLabel: {
+												shrink: true,
+											},
+										}}
+										variant="outlined"
+									/>
+									<TextField
+										label="To"
+										type="date"
+										value={createdDate?.endValue || ""}
+										onChange={(e) =>
+											handleSelectCreatedDate(
+												{ ...createdDate, endValue: e.target.value },
+												false,
+											)
+										}
+										slotProps={{
+											inputLabel: {
+												shrink: true,
+											},
+										}}
+										variant="outlined"
+									/>
+								</Box>
+							)}
+					</div>
+				))}
+			</RadioGroup>
+		</Box>
+	);
+};
+
+const OrderStatusFilterList = () => {
+	const { orderStatus, handleSelectOrderStatus } = useOrdersSearchAndFilter();
+	const t = useTranslations("Account.Orders");
+
+	return (
+		<Box>
+			<Typography fontWeight={600} mb={1}>
+				{t("orderStatusHeader")}
+			</Typography>
+			<Divider />
+			<RadioGroup value={orderStatus?.value ?? -1}>
+				{orderStatusOptions.map((orderStatusOption) => (
+					<FormControlLabel
+						key={orderStatusOption.label}
+						value={orderStatusOption.value}
+						control={
+							<Radio
+								onClick={() => {
+									handleSelectOrderStatus(orderStatusOption);
+								}}
+							/>
+						}
+						label={orderStatusOption.label}
+					/>
+				))}
+			</RadioGroup>
+		</Box>
+	);
+};
+
+OrdersFilterPanel.Origins = OriginsFilterList;
+OrdersFilterPanel.CreatedDate = CreatedDateFilterList;
+OrdersFilterPanel.OrderStatus = OrderStatusFilterList;
+
+export default OrdersFilterPanel;

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

@@ -0,0 +1,54 @@
+// GLOBAL CUSTOM COMPONENT
+import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
+// CUSTOM UTILS LIBRARY FUNCTION;
+import TableHeader from "@evenicanpm/storefront-core/src/pages/account/table-header";
+import Box from "@mui/material/Box";
+import { useTranslations } from "next-intl";
+import { createContext } from "react";
+
+export const OrderHistoryTableHeaderContext =
+	createContext<undefined>(undefined);
+
+const OrderHistoryTableHeader = ({
+	children,
+}: {
+	children: React.ReactNode;
+}) => {
+	return (
+		<OrderHistoryTableHeaderContext.Provider value={undefined}>
+			<Box>
+				<TableHeader sx={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
+					{children}
+				</TableHeader>
+			</Box>
+		</OrderHistoryTableHeaderContext.Provider>
+	);
+};
+
+OrderHistoryTableHeader.OrderNumber = () => {
+	const t = useTranslations("Account.Orders");
+	return <Paragraph ellipsis>{t("orderNumberHeader")}</Paragraph>;
+};
+
+OrderHistoryTableHeader.OrderStatus = () => {
+	const t = useTranslations("Account.Orders");
+	return <Box textAlign="center">{t("orderStatusHeader")}</Box>;
+};
+
+OrderHistoryTableHeader.TransactionDate = () => {
+	const t = useTranslations("Account.Orders");
+	return (
+		<Paragraph textAlign={{ sm: "center", xs: "left" }}>
+			{t("transactionDateHeader")}
+		</Paragraph>
+	);
+};
+
+OrderHistoryTableHeader.TransactionAmount = () => {
+	const t = useTranslations("Account.Orders");
+	return (
+		<Paragraph textAlign="center">{t("transactionAmountHeader")}</Paragraph>
+	);
+};
+
+export default OrderHistoryTableHeader;

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

@@ -0,0 +1,55 @@
+import { Typography } from "@mui/material";
+import MuiPagination from "@mui/material/Pagination";
+import { Box } from "@mui/system";
+import { useTranslations } from "next-intl";
+import type { ChangeEvent } from "react";
+import { PAGE_SIZE, useOrderHistory } from "./order-history-root";
+
+const OrdersPagination = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<Box sx={{ display: "flex", justifyContent: "space-between" }}>
+			{children}
+		</Box>
+	);
+};
+
+const ResultNumber = () => {
+	const { pageNumber, orders } = useOrderHistory();
+	const t = useTranslations("Account.Orders");
+
+	return (
+		<Typography color="grey.600">
+			{t("showingRange", {
+				start: (pageNumber - 1) * PAGE_SIZE,
+				end: (pageNumber - 1) * PAGE_SIZE + orders.length,
+				total: 500,
+			})}
+		</Typography>
+	);
+};
+
+const PaginationControl = () => {
+	const { pageNumber, setPageNumber } = useOrderHistory();
+
+	const handleMuiPaginationChange = (
+		_event: ChangeEvent<unknown>,
+		newPage: number,
+	) => {
+		setPageNumber(newPage);
+	};
+
+	return (
+		<MuiPagination
+			color="primary"
+			variant="outlined"
+			count={25}
+			page={pageNumber}
+			onChange={handleMuiPaginationChange}
+		/>
+	);
+};
+
+OrdersPagination.ResultNumber = ResultNumber;
+OrdersPagination.PaginationControl = PaginationControl;
+
+export default OrdersPagination;

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

@@ -0,0 +1,125 @@
+import type { SalesOrder } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
+import getOrders from "@evenicanpm/storefront-core/src/api-manager/services/order/queries/get-orders";
+import type {
+	OrderSearchCriteria,
+	SortColumn,
+} from "@msdyn365-commerce/retail-proxy";
+import { createContext, useContext, useMemo, useState } from "react";
+import OrdersSearchAndFilter from "./order-history-search-and-filter";
+import OrdersSort from "./order-history-sort";
+import OrderHistoryTable from "./order-history-table";
+
+export const PAGE_SIZE = 10;
+
+export type OrderHistoryContextType = {
+	orderSearchCriteria: OrderSearchCriteria;
+	setOrderSearchCriteria: (criteria: OrderSearchCriteria) => void;
+	sortColumn: SortColumn;
+	setSortColumn: (sort: SortColumn) => void;
+	pageNumber: number;
+	setPageNumber: (page: number) => void;
+	orders: SalesOrder[];
+	isLoading: boolean;
+};
+
+export const OrderHistoryContext = createContext<
+	OrderHistoryContextType | undefined
+>(undefined);
+
+export const useOrderHistory = () => {
+	const context = useContext(OrderHistoryContext);
+	if (!context) {
+		throw new Error("Context must be used within a OrderHistoryProvider");
+	}
+	return context;
+};
+
+const OrderHistory = ({ children }: { children: React.ReactNode }) => {
+	const [orderSearchCriteria, setOrderSearchCriteria] =
+		useState<OrderSearchCriteria>({});
+	const [pageNumber, setPageNumber] = useState<number>(1);
+	const [sortColumn, setSortColumn] = useState<SortColumn>({
+		ColumnName: "CREATEDDATETIME",
+		IsDescending: true,
+	});
+
+	const { data: orders, isLoading } = getOrders.useData({
+		orderSearchCriteria,
+		paging: {
+			Top: PAGE_SIZE,
+			Skip: (pageNumber - 1) * PAGE_SIZE,
+		},
+		sort: sortColumn,
+	});
+
+	const value = useMemo(
+		() => ({
+			orderSearchCriteria,
+			setOrderSearchCriteria,
+			sortColumn,
+			setSortColumn,
+			pageNumber,
+			setPageNumber,
+			orders: orders ?? [],
+			isLoading,
+		}),
+		[orderSearchCriteria, sortColumn, pageNumber, orders, isLoading],
+	);
+	return (
+		<OrderHistoryContext.Provider value={value}>
+			{children}
+		</OrderHistoryContext.Provider>
+	);
+};
+
+OrderHistory.SearchAndFilter = OrdersSearchAndFilter;
+
+OrderHistory.Sort = () => {
+	const { setSortColumn } = useOrderHistory();
+	return <OrdersSort setSortColumn={setSortColumn} />;
+};
+
+OrderHistory.Table = OrderHistoryTable;
+
+// OrderHistory.Table = () => {
+// 	const { orders, isLoading } = useOrderHistory();
+
+// 	return (
+// 		<OrderHistoryTable>
+// 			<OrderHistoryTable.Header>
+// 				<OrderHistoryTable.Header.OrderNumber />
+// 				<OrderHistoryTable.Header.OrderStatus />
+// 				<OrderHistoryTable.Header.TransactionDate />
+// 				<OrderHistoryTable.Header.TransactionAmount />
+// 			</OrderHistoryTable.Header>
+
+// 			{!isLoading ? (
+// 				orders && orders.length > 0 ? (
+// 					<Fragment>
+// 						{orders.map((order: SalesOrder) => (
+// 							<OrderHistoryTable.Row order={order} key={order.RecordId}>
+// 								<OrderHistoryTable.Row.OrderNumber />
+// 								<OrderHistoryTable.Row.OrderStatus />
+// 								<OrderHistoryTable.Row.TransactionDate />
+// 								<OrderHistoryTable.Row.TransactionAmount />
+// 								<OrderHistoryTable.Row.DetailsIcon />
+// 							</OrderHistoryTable.Row>
+// 						))}
+// 						<OrderHistoryTable.Pagination>
+// 							<OrderHistoryTable.Pagination.ResultNumber />
+// 							<OrderHistoryTable.Pagination.PaginationControl />
+// 						</OrderHistoryTable.Pagination>
+// 					</Fragment>
+// 				) : (
+// 					<NoRecords message="Account.Orders.noOrders" />
+// 				)
+// 			) : (
+// 				<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+// 					<CircularProgress size={30} />
+// 				</Box>
+// 			)}
+// 		</OrderHistoryTable>
+// 	);
+// };
+
+export default OrderHistory;