@evenicanpm/storefront-core 2.2.0 → 2.3.0

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;

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;