@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

package/src/pages/account/orders/icons/package-box.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const PackageBox = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 32 32">
+    <path d="M7.40692 11.3465L20.5779 4.304L16.0004 2L2.41992 8.836L7.40692 11.3465Z" />
+    <path d="M24.5773 6.3175L11.4062 13.36L15.9998 15.6725L29.5803 8.83601L24.5773 6.3175Z" />
+    <path d="M15.625 16.3275L11 13.9995V19.1145L9 17.101H7V11.986L2 9.46948V23.1415L15.625 30V16.3275Z" />
+    <path d="M16.375 16.3275V30L30 23.1415V9.46948L16.375 16.3275Z" />
+  </svg>,
+  "PackageBox",
+);
+
+export default PackageBox;

package/src/pages/account/orders/icons/truck-filled.tsx

@@ -0,0 +1,14 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const TruckFilled = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 36 36">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.1302 7.5H22.4118C22.8992 7.5 23.2941 7.89504 23.2941 8.38236V10.1471H28.322C28.8735 10.1471 29.3583 10.5127 29.5098 11.043L31.0223 16.3368C31.1997 16.368 31.3647 16.4529 31.4937 16.5819L32.7416 17.8298C32.907 17.9952 33 18.2198 33 18.4538V24.2648C33 24.752 32.6049 25.1471 32.1177 25.1471H29.4707C29.4707 27.0963 27.8904 28.6764 25.9412 28.6764C23.9919 28.6764 22.4118 27.0963 22.4118 25.1471H13.5882C13.5882 27.0963 12.0081 28.6764 10.0588 28.6764C8.10959 28.6764 6.52941 27.0963 6.52941 25.1471H3.88236C3.39504 25.1471 3 24.752 3 24.2648V9.63019C3 9.39618 3.09296 9.17175 3.25844 9.00627L4.50627 7.75843C4.67175 7.59295 4.89618 7.5 5.1302 7.5ZM29.1833 16.3236L27.9227 11.9118H23.2941V15.4412C23.2941 15.9285 23.6892 16.3236 24.1764 16.3236H29.1833ZM25.9412 23.3823C26.9159 23.3823 27.7059 24.1725 27.7059 25.1471C27.7059 26.1218 26.9159 26.9118 25.9412 26.9118C24.9666 26.9118 24.1764 26.1218 24.1764 25.1471C24.1764 24.1725 24.9666 23.3823 25.9412 23.3823ZM8.29412 25.1471C8.29412 26.1218 9.08421 26.9118 10.0588 26.9118C11.0334 26.9118 11.8235 26.1218 11.8235 25.1471C11.8235 24.1725 11.0334 23.3823 10.0588 23.3823C9.08421 23.3823 8.29412 24.1725 8.29412 25.1471Z"
+    />
+  </svg>,
+  "TruckFilled",
+);
+
+export default TruckFilled;

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;