@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,114 +0,0 @@
-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 "@evenicanpm/storefront-core/src/components/_components/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/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

@@ -1,64 +0,0 @@
-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 "@evenicanpm/storefront-core/src/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

@@ -1,87 +0,0 @@
-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 "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import {
-  H5,
-  H6,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/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

@@ -1,121 +0,0 @@
-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 "@evenicanpm/storefront-core/src/components/_components/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/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

@@ -1,59 +0,0 @@
-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

@@ -1,50 +0,0 @@
-"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

@@ -1,62 +0,0 @@
-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 "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-import {
-  Small,
-  Span,
-} from "@evenicanpm/storefront-core/src/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

@@ -1,32 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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;