@evenicanpm/storefront-core 1.0.0 → 1.0.2

package/src/pages/account/orders/order-progress.tsx

@@ -0,0 +1,111 @@
+import { Fragment } from "react";
+import { useTranslations } from "next-intl";
+// MUI
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Avatar from "@mui/material/Avatar";
+import styled from "@mui/material/styles/styled";
+import { MdDone as Done } from "react-icons/md";
+// CUSTOM ICON COMPONENTS
+import Delivery from "./icons/delivery";
+import PackageBox from "./icons/package-box";
+import TruckFilled from "./icons/truck-filled";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@/components/_components/Typography";
+import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
+
+// STYLED COMPONENTS
+const StyledFlexbox = styled(FlexBetween)(({ theme }) => ({
+  flexWrap: "wrap",
+  marginTop: "2rem",
+  marginBottom: "2rem",
+  [theme.breakpoints.down("sm")]: { flexDirection: "column" },
+  "& .line": {
+    height: 4,
+    minWidth: 50,
+    flex: "1 1 0",
+    [theme.breakpoints.down("sm")]: { flex: "unset", height: 50, minWidth: 4 },
+  },
+}));
+
+const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  top: -5,
+  right: -5,
+  width: 22,
+  height: 22,
+  position: "absolute",
+  bgcolor: theme.palette.grey[200],
+  color: theme.palette.success.main,
+}));
+
+type Props = {
+  status: number;
+};
+export default function OrderProgress({ status }: Props) {
+  const t = useTranslations("Account.OrderDetails");
+
+  let ORDER_STATUS = "";
+
+  // Map API statuses to ORDER_STATUS_LIST values
+  if ([1, 2, 4, 5].includes(status)) ORDER_STATUS = "Packaging";
+  if ([3].includes(status)) ORDER_STATUS = "Complete";
+
+  const hideDeliveryDate = !![4, 5].includes(status);
+
+  const STEP_ICONS = [PackageBox, TruckFilled, Delivery];
+  const ORDER_STATUS_LIST = ["Packaging", "Shipping", "Delivering", "Complete"];
+
+  const statusIndex = ORDER_STATUS_LIST.indexOf(ORDER_STATUS);
+
+  return (
+    <Card sx={{ p: "2rem 1.5rem", mb: 4 }}>
+      <StyledFlexbox>
+        {STEP_ICONS.map((Icon, index) => (
+          <Fragment key={index}>
+            <Box position="relative">
+              <Avatar
+                alt="shipping"
+                sx={{
+                  width: 64,
+                  height: 64,
+                  color: index <= statusIndex ? "white" : "primary.main",
+                  bgcolor: index <= statusIndex ? "primary.main" : "grey.300",
+                }}
+              >
+                <Icon color="inherit" fontSize="large" />
+              </Avatar>
+
+              {index < statusIndex ? (
+                <StyledAvatar alt="done">
+                  <Done color="inherit" size={16} />
+                </StyledAvatar>
+              ) : null}
+            </Box>
+
+            {index < STEP_ICONS.length - 1 ? (
+              <Box
+                className="line"
+                bgcolor={index < statusIndex ? "primary.main" : "grey.300"}
+              />
+            ) : null}
+          </Fragment>
+        ))}
+      </StyledFlexbox>
+
+      {!hideDeliveryDate && (
+        <FlexBox justifyContent={{ xs: "center", sm: "flex-end" }}>
+          <Paragraph
+            p="0.5rem 1rem"
+            textAlign="center"
+            borderRadius="300px"
+            color="primary.main"
+            bgcolor="primary.light"
+          >
+            {t(statusIndex === 3 ? "deliveredDate" : "estimatedDeliveryDate")}
+            <b> 4th October</b>
+          </Paragraph>
+        </FlexBox>
+      )}
+    </Card>
+  );
+}

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

@@ -0,0 +1,61 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import IconButton from "@mui/material/IconButton";
+import { MdEast as East } from "react-icons/md";
+import { ChipProps } from "@mui/material";
+import { format } from "date-fns";
+// GLOBAL CUSTOM COMPONENT
+import { H6, Paragraph } from "@/components/_components/Typography";
+// Local CUSTOM COMPONENT
+import TableRow from "../table-row";
+// CUSTOM UTILS LIBRARY FUNCTION
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { SalesOrder } from "@/api-manager/schemas/order.schema";
+
+// =================================================
+type Props = { order: SalesOrder };
+// =================================================
+const STATUS_MAP: Record<number, { label: string; color: ChipProps["color"] }> =
+  {
+    1: { label: "Open", color: "secondary" },
+    2: { label: "Processing", color: "secondary" },
+    3: { label: "Complete", color: "success" },
+    4: { label: "On Hold", color: "primary" },
+    5: { label: "Cancelled", color: "primary" },
+  };
+
+const getStatusInfo = (status: number) => {
+  return STATUS_MAP[status] ?? { label: "Unknown", color: "default" };
+};
+export default function OrderRow({ order }: Props) {
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const { label, color } = getStatusInfo(order.StatusValue ?? 0);
+
+  return (
+    <Link href={`/account/orders/${order.Id}`}>
+      <TableRow sx={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
+        <H6 ellipsis>{order?.ChannelReferenceId}</H6>
+
+        <Box textAlign="center">
+          <Chip size="small" label={label} color={color} />
+        </Box>
+
+        <Paragraph textAlign={{ sm: "center", xs: "left" }}>
+          {format(new Date(order.TransactionDate ?? ""), "MMM dd, yyyy")}
+        </Paragraph>
+
+        <Paragraph textAlign="center">
+          {formatCurrency(order.TotalAmount ?? 0)}
+        </Paragraph>
+
+        <Box display={{ sm: "inline-flex", xs: "none" }} justifyContent="end">
+          <IconButton sx={{ color: "grey.500" }}>
+            <East fontSize="large" />
+          </IconButton>
+        </Box>
+      </TableRow>
+    </Link>
+  );
+}

package/src/pages/account/orders/order-summary.tsx

@@ -0,0 +1,83 @@
+import Grid from "@mui/material/Grid2";
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import { useTranslations } from "next-intl";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBetween } from "@/components/_components/flex-box/index";
+import { H5, H6, Paragraph } from "@/components/_components/Typography";
+// CUSTOM UTILS LIBRARY FUNCTION
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { SalesOrder } from "@/api-manager/schemas/order.schema";
+
+// ==============================================================
+type Props = { order: SalesOrder };
+// ==============================================================
+
+function ListItem({ title, value }: { title: string; value: string }) {
+  const t = useTranslations("Account.OrderDetails");
+  return (
+    <FlexBetween mb={1}>
+      <Paragraph color="grey.600">{t(title)}</Paragraph>
+      <H6>{value}</H6>
+    </FlexBetween>
+  );
+}
+
+export default function OrderSummary({ order }: Props) {
+  const t = useTranslations("Account.OrderDetails");
+  const { formatCurrency } = useCurrencyFormatter();
+  const shippingAddress = order.ShippingAddress;
+  return (
+    <Grid container spacing={3}>
+      {/* SHIPMENT ADDRESS SECTION */}
+      <Grid size={{ lg: 6, md: 6, xs: 12 }}>
+        <Card sx={{ p: 3 }}>
+          <H5 mt={0} mb={2}>
+            {t("addressHeading")}
+          </H5>
+
+          {shippingAddress && (
+            <Paragraph fontSize={14} my={0}>
+              {`${shippingAddress.Name}, ${shippingAddress.Street}, ${shippingAddress.City} ${shippingAddress.State} ${shippingAddress.ThreeLetterISORegionName} ${shippingAddress.ZipCode}`}
+            </Paragraph>
+          )}
+        </Card>
+      </Grid>
+
+      {/* TOTAL SUMMERY SECTION */}
+      <Grid size={{ lg: 6, md: 6, xs: 12 }}>
+        <Card sx={{ p: 3 }}>
+          <H5 mt={0} mb={2}>
+            {t("headingSummary")}
+          </H5>
+
+          <ListItem
+            title="subTotal"
+            value={formatCurrency(order.SubtotalAmount ?? 0)}
+          />
+          <ListItem
+            title="shippingTotal"
+            value={formatCurrency(order.ShippingChargeAmount ?? 0)}
+          />
+          <ListItem
+            title="taxTotal"
+            value={formatCurrency(order.TaxAmount ?? 0)}
+          />
+          <ListItem
+            title="discountTotal"
+            value={formatCurrency(order.DiscountAmount ?? 0)}
+          />
+
+          <Divider sx={{ mb: 1 }} />
+
+          <FlexBetween mb={2}>
+            <H6>{t("total")}</H6>
+            <H6>{formatCurrency(order.TotalAmount ?? 0)}</H6>
+          </FlexBetween>
+
+          <Paragraph>{t("paidBy")}</Paragraph>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+}

package/src/pages/account/orders/ordered-products.tsx

@@ -0,0 +1,114 @@
+import Card from "@mui/material/Card";
+import Button from "@mui/material/Button";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import { format } from "date-fns";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+// GLOBAL CUSTOM COMPONENTS
+import { H6, Paragraph, Span } from "@/components/_components/Typography";
+import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
+// CUSTOM UTILS LIBRARY FUNCTION
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { SalesLine, SalesOrder } from "@/api-manager/schemas/order.schema";
+import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+import buildDetailUrl from "@/lib/build-detail-url";
+
+// ==============================================================
+type Props = { order: SalesOrder };
+// ==============================================================
+
+export default function OrderedProducts({ order }: Props) {
+  const t = useTranslations("Account.OrderDetails");
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const deliveredDate = "";
+
+  return (
+    <Card sx={{ p: 0, mb: "30px" }}>
+      <FlexBetween px={3} py={2} flexWrap="wrap" bgcolor="grey.200">
+        <Item title="orderId" value={order?.ChannelReferenceId ?? ""} />
+        <Item
+          title="orderDate"
+          value={format(new Date(order?.TransactionDate ?? ""), "dd MMM, yyyy")}
+        />
+        <Item
+          title="deliveredOn"
+          value={
+            deliveredDate
+              ? format(new Date(deliveredDate), "dd MMM, yyyy")
+              : t("deliveredOnValue")
+          }
+        />
+      </FlexBetween>
+
+      <Grid
+        container
+        spacing={2}
+        padding={"20px 15px 10px"}
+        alignItems={"center"}
+      >
+        {order?.SalesLines?.map((item: SalesLine, index: number) => (
+          <Link
+            href={buildDetailUrl(
+              item?.Product?.Name ?? "",
+              item?.Product?.RecordId ?? 0,
+            )}
+            key={index}
+            style={{ display: "contents" }}
+          >
+            <Grid size={{ xs: 12, sm: 5 }}>
+              <FlexBox gap={2.5} alignItems="center" padding={"12px 15px"}>
+                <Avatar
+                  alt={item?.Product?.Name}
+                  src={item?.Product?.PrimaryImageUrl}
+                  sx={{ height: 64, width: 64 }}
+                />
+                <div>
+                  <H6>{item?.Product?.Name}</H6>
+                  <Paragraph color="grey.600">
+                    {formatCurrency(item?.Price ?? 0)} x {item?.Quantity || 1}
+                  </Paragraph>
+                </div>
+              </FlexBox>
+            </Grid>
+
+            <Grid size={{ xs: 8, sm: 4 }}>
+              {item.Product?.Dimensions?.length ? (
+                item.Product.Dimensions.map((dim, dimInd) => (
+                  <Paragraph key={dimInd} paddingLeft={"15px"}>
+                    <Span>
+                      {ProductDimensionType[dim.DimensionTypeValue || 0]}:
+                    </Span>
+                    <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
+                  </Paragraph>
+                ))
+              ) : (
+                <Box />
+              )}
+            </Grid>
+
+            <Grid size={{ xs: 4, sm: 3 }}>
+              <Box justifySelf={"end"}>
+                <Button variant="text" color="primary">
+                  {t("writeReview")}
+                </Button>
+              </Box>
+            </Grid>
+          </Link>
+        ))}
+      </Grid>
+    </Card>
+  );
+}
+
+function Item({ title, value }: { title: string; value: string }) {
+  const t = useTranslations("Account.OrderDetails");
+  return (
+    <FlexBox gap={1} alignItems="center">
+      <Paragraph color="grey.600">{t(title)}</Paragraph>
+      <Paragraph>{value}</Paragraph>
+    </FlexBox>
+  );
+}

package/src/pages/account/profile/profile-button.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
+import ProfileButton from "./profile-button";
+import { getMsalInstance, initializeMsal, getRequestConfig } from "@/auth/msal";
+
+vi.mock("@/auth/msal", () => ({
+  initializeMsal: vi.fn(),
+  getMsalInstance: vi.fn(),
+  getRequestConfig: vi.fn(),
+}));
+
+vi.mock("@/components/T/index", () => ({
+  default: ({ path }: { path: string }) => <span>{path}</span>,
+}));
+
+describe("ProfileButton Component", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders disabled button initially (MSAL not ready)", () => {
+    render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
+    const button = screen.getByRole("button");
+    expect(button).toBeDisabled();
+  });
+
+  it("initializes MSAL on mount", async () => {
+    render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
+    await waitFor(() => {
+      expect(initializeMsal).toHaveBeenCalled();
+    });
+  });
+
+  it("calls MSAL loginRedirect when clicked", async () => {
+    (initializeMsal as ReturnType<typeof vi.fn>).mockImplementation(() =>
+      Promise.resolve(),
+    );
+    (getRequestConfig as ReturnType<typeof vi.fn>).mockReturnValue({
+      scopes: ["user.read"],
+    });
+    (getMsalInstance as ReturnType<typeof vi.fn>).mockReturnValue({
+      loginRedirect: vi.fn(),
+    });
+    render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
+
+    await waitFor(() => {
+      expect(initializeMsal).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(getMsalInstance().loginRedirect).toHaveBeenCalledWith({
+        scopes: ["user.read"],
+      });
+    });
+  });
+});

package/src/pages/account/profile/profile-button.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { getMsalInstance, initializeMsal, getRequestConfig } from "@/auth/msal";
+import { useEffect, useState } from "react";
+import { Button } from "@mui/material";
+import T from "@/components/T/index";
+import { RedirectRequest } from "@azure/msal-browser";
+interface Props {
+  type: string;
+  path: string;
+}
+
+const ProfileButton = ({ type, path }: Props) => {
+  const [isMsalReady, setIsMsalReady] = useState(false);
+
+  useEffect(() => {
+    const initMsal = async () => {
+      await initializeMsal();
+      setIsMsalReady(true);
+    };
+    initMsal();
+  }, []);
+
+  const handleProfile = async () => {
+    if (!isMsalReady) {
+      console.error("MSAL is not initialized yet.");
+      return;
+    }
+
+    try {
+      const req = getRequestConfig(type);
+      await getMsalInstance().loginRedirect(req as RedirectRequest); // "handleRedirectPromise" is in user component.
+    } catch (error) {
+      console.error("Profile update through MSAL failed", error);
+    }
+  };
+
+  return (
+    <Button
+      onClick={() => handleProfile()}
+      disabled={!isMsalReady}
+      color="primary"
+      sx={{ bgcolor: "primary.light", px: 4 }}
+    >
+      <T path={path} />
+    </Button>
+  );
+};
+
+export default ProfileButton;

package/src/pages/account/profile/user-info.tsx

@@ -0,0 +1,59 @@
+import _ from "lodash";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { Theme } from "@mui/material/styles";
+import Card from "@mui/material/Card";
+import { useTranslations } from "next-intl";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@/components/_components/flex-box/flex-box";
+import { Small, Span } from "@/components/_components/Typography";
+// API
+import { User } from "@/api-manager/schemas/user.schema";
+type Props = {
+  user: User;
+};
+export default function UserInfo({ user }: Props) {
+  const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
+
+  return (
+    <Card
+      sx={{
+        mt: 3,
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "5rem",
+        p: "0.75rem 1.5rem",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        ...(downMd && {
+          gap: "1rem",
+          alignItems: "start",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+        }),
+      }}
+    >
+      <TableRowItem
+        title="labelFirstName"
+        value={_.capitalize(user?.FirstName)}
+      />
+      <TableRowItem
+        title="labelLastName"
+        value={_.capitalize(user?.LastName)}
+      />
+      <TableRowItem title="labelEmail" value={user?.Email ?? ""} />
+    </Card>
+  );
+}
+
+function TableRowItem({ title, value = "" }: { title: string; value: string }) {
+  const t = useTranslations("Account.Profile");
+  return (
+    <FlexBox flexDirection="column" p={1}>
+      <Small color="grey.600" mb={0.5}>
+        {t(title)}
+      </Small>
+
+      <Span>{value}</Span>
+    </FlexBox>
+  );
+}

package/src/pages/account/styles.ts

@@ -0,0 +1,32 @@
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+import NavLink from "@/components/_components/nav-link/nav-link";
+
+export const MainContainer = styled(Card)(({ theme }) => ({
+  paddingBottom: "1.5rem",
+  [theme.breakpoints.down("md")]: {
+    boxShadow: "none",
+    overflowY: "auto",
+    height: "calc(100vh - 64px)",
+  },
+}));
+
+export const StyledNavLink = styled(NavLink, {
+  shouldForwardProp: (prop) => prop !== "isCurrentPath",
+})<{ isCurrentPath: boolean }>(({ theme, isCurrentPath }) => ({
+  display: "flex",
+  alignItems: "center",
+  borderLeft: "4px solid",
+  paddingLeft: "1.5rem",
+  paddingRight: "1.5rem",
+  marginBottom: "1.25rem",
+  justifyContent: "space-between",
+  borderColor: isCurrentPath ? theme.palette.primary.main : "transparent",
+  "& .nav-icon": {
+    color: isCurrentPath ? theme.palette.primary.main : theme.palette.grey[600],
+  },
+  "&:hover": {
+    borderColor: theme.palette.primary.main,
+    "& .nav-icon": { color: theme.palette.primary.main },
+  },
+}));

package/src/pages/account/table-row.tsx

@@ -0,0 +1,19 @@
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+const TableRow = styled(Card)(({ theme }) => ({
+  gap: 16,
+  marginBlock: 16,
+  display: "grid",
+  borderRadius: 10,
+  cursor: "pointer",
+  alignItems: "center",
+  padding: ".6rem 1.2rem",
+  gridTemplateColumns: "1.5fr 2fr 1.5fr auto",
+  [theme.breakpoints.down("sm")]: {
+    gap: 8,
+    gridTemplateColumns: "repeat(2, 1fr)",
+  },
+}));
+
+export default TableRow;