@evenicanpm/storefront-core 1.0.0 → 1.0.1

package/src/pages/account/no-records.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { H4 } from "@/components/_components/Typography";
+import { useTranslations } from "next-intl";
+
+type Props = { message: string };
+
+export default function NoRecords({ message }: Props) {
+  const t = useTranslations();
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height="50vh"
+    >
+      <H4 color="grey.500">{t(message)}</H4>
+    </Box>
+  );
+}

package/src/pages/account/orders/icons/delivery.tsx

@@ -0,0 +1,14 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Delivery = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 32 32">
+    <path d="M24.0531 1.69349L23.7031 2.33374C23.5704 2.57647 23.3708 2.77603 23.1281 2.90874L22.4878 3.25874C22.4584 3.27482 22.4339 3.29852 22.4167 3.32735C22.3996 3.35619 22.3906 3.38909 22.3906 3.42262C22.3906 3.45614 22.3996 3.48905 22.4167 3.51788C22.4339 3.54671 22.4584 3.57041 22.4878 3.58649L23.1281 3.93649C23.3708 4.0692 23.5704 4.26876 23.7031 4.51149L24.0531 5.15174C24.0691 5.18122 24.0928 5.20583 24.1217 5.22297C24.1506 5.24011 24.1835 5.24916 24.2171 5.24916C24.2506 5.24916 24.2836 5.24011 24.3124 5.22297C24.3413 5.20583 24.365 5.18122 24.3811 5.15174L24.7311 4.51149C24.8639 4.26884 25.0634 4.0693 25.3061 3.93649L25.9463 3.58649C25.9757 3.57041 26.0003 3.54671 26.0174 3.51788C26.0345 3.48905 26.0435 3.45614 26.0435 3.42262C26.0435 3.38909 26.0345 3.35619 26.0174 3.32735C26.0003 3.29852 25.9757 3.27482 25.9463 3.25874L25.3061 2.90874C25.0634 2.77593 24.8639 2.5764 24.7311 2.33374L24.3811 1.69349C24.365 1.66401 24.3413 1.63941 24.3124 1.62226C24.2836 1.60512 24.2506 1.59607 24.2171 1.59607C24.1835 1.59607 24.1506 1.60512 24.1217 1.62226C24.0928 1.63941 24.0691 1.66401 24.0531 1.69349Z" />
+    <path d="M27.4868 6.42496L27.2408 6.87496C27.1475 7.04555 27.0072 7.18577 26.8366 7.27896L26.3866 7.52496C26.3659 7.53626 26.3487 7.55292 26.3367 7.57317C26.3247 7.59343 26.3184 7.61654 26.3184 7.64008C26.3184 7.66363 26.3247 7.68674 26.3367 7.70699C26.3487 7.72725 26.3659 7.7439 26.3866 7.75521L26.8366 8.00121C27.0072 8.0944 27.1475 8.23462 27.2408 8.40521L27.4868 8.85521C27.4981 8.87593 27.5147 8.89323 27.535 8.90528C27.5552 8.91733 27.5784 8.9237 27.602 8.9237C27.6255 8.9237 27.6487 8.91733 27.6689 8.90528C27.6892 8.89323 27.7058 8.87593 27.7171 8.85521L27.9631 8.40521C28.0562 8.23422 28.1964 8.09357 28.3671 7.99996L28.8171 7.75396C28.8377 7.74265 28.855 7.726 28.867 7.70574C28.879 7.68549 28.8853 7.66238 28.8853 7.63883C28.8853 7.61529 28.879 7.59218 28.867 7.57192C28.855 7.55167 28.8377 7.53501 28.8171 7.52371L28.3671 7.27771C28.1966 7.18443 28.0564 7.04423 27.9631 6.87371L27.7171 6.42371C27.7057 6.40305 27.689 6.38584 27.6687 6.37389C27.6483 6.36195 27.6252 6.35571 27.6016 6.35584C27.578 6.35596 27.5549 6.36245 27.5347 6.37462C27.5145 6.38678 27.498 6.40417 27.4868 6.42496Z" />
+    <path d="M22.72 27.117C22.2155 26.7778 21.395 26.9463 20.616 27.144C20.3484 27.2145 20.0852 27.3007 19.8278 27.402C19.3339 27.6067 18.806 27.717 18.2715 27.727C17.6673 27.717 16.961 27.5575 16.5123 27.8078C16.4668 27.8331 16.4165 27.8487 16.3647 27.8536C16.3129 27.8584 16.2606 27.8524 16.2112 27.8359C16.1618 27.8195 16.1164 27.7929 16.0779 27.7579C16.0393 27.723 16.0084 27.6803 15.9873 27.6328C15.951 27.541 15.9505 27.439 15.9859 27.3469C16.0214 27.2548 16.0901 27.1794 16.1785 27.1355C16.8433 26.7855 17.6623 27.0173 18.3395 27.1148C18.742 27.1795 19.1513 27.1907 19.5568 27.1483C19.6799 27.1304 19.7915 27.066 19.8685 26.9684C19.9456 26.8707 19.9823 26.7472 19.971 26.6233C19.9497 26.5028 19.8999 26.3892 19.8257 26.2919C19.7515 26.1946 19.6551 26.1165 19.5445 26.064C19.1475 25.8553 17.709 25.464 16.7735 25.273C15.285 24.9739 13.739 25.1859 12.386 25.8748C11.6408 26.2278 9.50876 27.6795 8.98101 28.504C8.90689 28.6092 8.8747 28.7382 8.89076 28.8658C8.94426 29.3465 10.3875 30.7326 10.8303 30.8761C10.9111 30.9062 10.9981 30.9159 11.0836 30.9044C11.1692 30.8929 11.2505 30.8605 11.3205 30.8101C11.5873 30.6386 12.174 30.0625 12.765 29.855C13.8595 29.47 15.6748 29.8025 16.5585 29.7815C17.8585 29.7503 22.201 28.6373 22.8718 28.0315C23.1388 27.7913 23.0415 27.333 22.72 27.117Z" />
+    <path d="M13.1345 8.16596L13.8048 5.48721H17.1298L17.799 8.16596H24.5925L21.679 5.69996C21.5161 5.56197 21.3095 5.48623 21.096 5.48621H9.8383C9.62479 5.48623 9.41822 5.56197 9.2553 5.69996L6.3418 8.16596H13.1345Z" />
+    <path d="M17.8989 8.91602V14.55C17.899 14.6265 17.8796 14.7017 17.8426 14.7686C17.8056 14.8355 17.7523 14.8919 17.6875 14.9325C17.6228 14.9731 17.5488 14.9967 17.4725 15.0009C17.3961 15.0051 17.32 14.9898 17.2512 14.9565L15.7702 14.13C15.6883 14.0597 15.584 14.0211 15.476 14.0211C15.3681 14.0211 15.2638 14.0597 15.1819 14.13L13.6854 14.9598C13.6166 14.9926 13.5406 15.0075 13.4645 15.003C13.3884 14.9986 13.3146 14.9749 13.2501 14.9342C13.1856 14.8936 13.1325 14.8373 13.0956 14.7705C13.0588 14.7038 13.0395 14.6288 13.0394 14.5525V8.91602H5.95117V22.7145C5.95117 22.9143 6.03052 23.1059 6.17178 23.2472C6.31303 23.3885 6.50462 23.468 6.70442 23.468H24.2347C24.4345 23.468 24.6262 23.3886 24.7675 23.2473C24.9088 23.106 24.9882 22.9144 24.9882 22.7145V8.91602H17.8989Z" />
+  </svg>,
+  "Delivery",
+);
+
+export default Delivery;

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;