@evenicanpm/storefront-core 2.2.0 → 2.3.0

package/src/pages/account/account-navigation.tsx

@@ -9,6 +9,11 @@ import {
 	Paragraph,
 	Span,
 } from "@evenicanpm/storefront-core/src/components/Typography";
+import {
+	type AccountRoute,
+	type AccountRouteOverrides,
+	createAccountRoutes,
+} from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // STYLED COMPONENTS
 import {
 	MainContainer,
@@ -17,88 +22,114 @@ import {
 import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { createContext, Fragment, type ReactNode } from "react";
-// ICON COMPONENTS
-import {
-	MdFavoriteBorder as FavoriteBorder,
-	MdPerson as Person,
-	MdPlace as Place,
-	MdOutlineShoppingBag as ShoppingBagOutlined,
-} from "react-icons/md";
+import type { IconType } from "react-icons";
 
 /**
  * 
  *** Extend menu: 
 <AccountNavigation
-  items={[
-    ...DEFAULT_MENU_ITEMS,
-    {
-      title: "EXTRAS",
-      list: [
-        {
-          href: "/account/rewards",
-          title: "rewards",
-          Icon: RewardsIcon,
-          count: 5,
-        },
-      ],
-    },
-  ]}
+	items={[
+		...DEFAULT_MENU_ITEMS,
+		{
+			title: "EXTRAS",
+			list: [
+				{
+					href: "/account/rewards",
+					title: "rewards",
+					Icon: RewardsIcon,
+					count: 5,
+				},
+			],
+		},
+	]}
 />;
 
 *** Override completely:
 <AccountNavigation>
-  <AccountNavigation.Section title="Custom Section">
-    <AccountNavigation.Item
-      href="/custom"
-      Icon={CustomIcon}
-      label="Custom Page"
-    />
-  </AccountNavigation.Section>
+	<AccountNavigation.Section title="Custom Section">
+		<AccountNavigation.Item
+			href="/custom"
+			Icon={CustomIcon}
+			label="Custom Page"
+		/>
+	</AccountNavigation.Section>
 </AccountNavigation>;
  */
 
-export const DEFAULT_MENU_ITEMS = [
-	{
-		title: "DASHBOARD",
-		list: [
-			{
-				href: "/account/orders",
-				title: "orders",
-				Icon: ShoppingBagOutlined,
-				count: 0,
-			},
-			{ href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
-		],
-	},
-	{
-		title: "ACCOUNT SETTINGS",
-		list: [
-			{ href: "/account/profile", title: "profile", Icon: Person },
-			{ href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
-		],
-	},
-];
+interface NavItem {
+	href: string;
+	title: string;
+	Icon: IconType;
+	count?: number;
+}
+
+interface NavSection {
+	title: string;
+	list: NavItem[];
+}
+
+/**
+ *
+ * @param route
+ * @returns
+ */
+const routeToNavItem = (route: AccountRoute): NavItem => {
+	return {
+		href: route.href,
+		title: route.titleKey,
+		Icon: route.Icon,
+		count: route.count,
+	};
+};
+
+export const DEFAULT_MENU_ITEMS = (
+	overrides?: AccountRouteOverrides,
+): NavSection[] => {
+	const routes = createAccountRoutes(overrides);
+	return [
+		{
+			title: "DASHBOARD",
+			list: [
+				routeToNavItem(routes.orders),
+				routeToNavItem(routes.wishlists),
+				routeToNavItem(routes.invoices),
+			],
+		},
+		{
+			title: "ACCOUNT SETTINGS",
+			list: [routeToNavItem(routes.profile), routeToNavItem(routes.addresses)],
+		},
+	];
+};
 
 interface AccountNavigationContextValue {
-	items: typeof DEFAULT_MENU_ITEMS;
+	items: NavSection[];
 }
 
 const AccountNavigationContext =
 	createContext<AccountNavigationContextValue | null>(null);
+
 interface AccountNavigationProps {
-	items?: typeof DEFAULT_MENU_ITEMS;
+	items?: NavSection[];
 	children?: ReactNode;
+	routeOverrides?: AccountRouteOverrides;
 }
 
-const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
+const AccountNavigation = ({
+	items,
+	children,
+	routeOverrides,
+}: AccountNavigationProps) => {
 	const pathname = usePathname();
 	const t = useTranslations("Account.Menu");
 
 	const { data: user } = getUser.useData();
 	const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
 
-	// Merge default items with provided overrides
-	const mergedItems = (items || DEFAULT_MENU_ITEMS).map((section) => ({
+	const defaultItems = DEFAULT_MENU_ITEMS(routeOverrides);
+
+	// Render either the props items or the default items
+	const itemsWCounts = (items || defaultItems).map((section) => ({
 		...section,
 		list: section.list.map((item) => {
 			if (item.href === "/account/orders") {
@@ -112,10 +143,10 @@ const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
 	}));
 
 	return (
-		<AccountNavigationContext.Provider value={{ items: mergedItems }}>
+		<AccountNavigationContext.Provider value={{ items: itemsWCounts }}>
 			<MainContainer>
 				{children ||
-					mergedItems.map((section) => (
+					itemsWCounts.map((section) => (
 						<AccountNavigation.Section
 							key={section.title}
 							title={section.title}
@@ -151,10 +182,7 @@ AccountNavigation.Section = ({ title, children }: SectionProps) => {
 	);
 };
 
-interface ItemProps {
-	href: string;
-	Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-	count?: number;
+interface ItemProps extends Pick<NavItem, "href" | "Icon" | "count"> {
 	label: string;
 	isActive?: boolean;
 }

package/src/pages/account/account-routes.ts

@@ -0,0 +1,52 @@
+import type { IconType } from "react-icons";
+import {
+	MdFavoriteBorder as FavoriteBorder,
+	MdDocumentScanner as InvoicesIcon,
+	MdPerson as Person,
+	MdPlace as Place,
+	MdOutlineShoppingBag as ShoppingBagOutlined,
+} from "react-icons/md";
+
+export interface AccountRoute {
+	href: string;
+	titleKey: string;
+	Icon: IconType;
+	count?: number;
+}
+
+export interface AccountRouteOverrides {
+	wishlists?: { href?: string; titleKey?: string };
+}
+
+const defaults = {
+	orders: {
+		href: "/account/orders",
+		titleKey: "orders",
+		Icon: ShoppingBagOutlined,
+		count: 0,
+	},
+	wishlists: {
+		href: "/account/wish-lists",
+		titleKey: "wishlists",
+		Icon: FavoriteBorder,
+	},
+	invoices: {
+		href: "/account/invoices",
+		titleKey: "invoices",
+		Icon: InvoicesIcon,
+	},
+	profile: { href: "/account/profile", titleKey: "profile", Icon: Person },
+	addresses: {
+		href: "/account/addresses",
+		titleKey: "addresses",
+		Icon: Place,
+		count: 0,
+	},
+} as const satisfies Record<string, AccountRoute>;
+
+export type AccountRouteKey = keyof typeof defaults;
+
+export const createAccountRoutes = (overrides?: AccountRouteOverrides) => ({
+	...defaults,
+	wishlists: { ...defaults.wishlists, ...overrides?.wishlists },
+});

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;