@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -1,114 +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 "@/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

@@ -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,59 +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 "@/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

@@ -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;

package/src/pages/account/wishlist/create-new-list.tsx

@@ -1,167 +0,0 @@
-import React, { useEffect } from "react";
-import isFunction from "lodash/isFunction";
-import { useTranslations } from "next-intl";
-import {
-  Box,
-  Button,
-  TextField,
-  Dialog,
-  DialogContent,
-  FormControlLabel,
-  Checkbox,
-} from "@mui/material";
-import Grid from "@mui/material/Grid2";
-// Global Custom components
-import { H5 } from "@/components/_components/Typography";
-import { useNotification } from "@/components/Notifications/use-notification";
-// Forms
-import { useFormik } from "formik";
-import { z } from "zod";
-import { withZodSchema } from "formik-validator-zod";
-// API
-import useCreateWishlist from "@/api-manager/services/user/mutations/create-wishlist";
-
-interface Props {
-  open: boolean;
-  handleClose: () => void;
-}
-
-export default function CreateNewList(props: Props) {
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-
-  const { mutateAsync: createWishlist } = useCreateWishlist();
-
-  const FormSchema = z.object({
-    Id: z.string(),
-    Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
-    Comment: z.string().optional(),
-    IsPublic: z.boolean().optional(),
-  });
-  type FormSchemaType = z.infer<typeof FormSchema>;
-
-  const handleSubmit = async (values: FormSchemaType) => {
-    try {
-      await createWishlist({ ...values, IsPublic: !values.IsPublic });
-      handleClose();
-      setNotification({
-        message: t("wishlistSuccess"),
-        severity: "success",
-      });
-    } catch (error) {
-      setNotification({
-        message: t("wishlistFailed"),
-        severity: "error",
-      });
-    }
-  };
-
-  const formik = useFormik<FormSchemaType>({
-    initialValues: {
-      Id: "",
-      Name: "",
-      Comment: "",
-      IsPublic: false,
-    },
-    onSubmit: handleSubmit,
-    validate: withZodSchema(FormSchema),
-  });
-
-  // destructure to put in dependency array
-  // of use effect instead of whole formik
-  const { resetForm } = formik;
-
-  useEffect(() => {
-    if (props.open) {
-      resetForm();
-    }
-  }, [props.open, resetForm]);
-
-  const handleClose = () => {
-    if (isFunction(props.handleClose)) {
-      props.handleClose();
-    }
-  };
-
-  return (
-    <Dialog
-      open={props.open}
-      onClose={handleClose}
-      aria-labelledby="form-dialog-title"
-    >
-      <DialogContent>
-        <H5 mb={4}>{t("formTitle")}</H5>
-        <Box component="form" onSubmit={formik.handleSubmit}>
-          <Grid container spacing={3}>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                name="Name"
-                fullWidth
-                label={t("name")}
-                value={formik.values.Name}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.Name && Boolean(formik.errors.Name)}
-                helperText={formik.touched.Name && formik.errors.Name}
-                required
-              />
-            </Grid>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                name="Comment"
-                fullWidth
-                label={t("comment")}
-                value={formik.values.Comment}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                error={formik.touched.Comment && Boolean(formik.errors.Comment)}
-                helperText={formik.touched.Comment && formik.errors.Comment}
-              />
-            </Grid>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="IsPublic"
-                    checked={formik.values.IsPublic}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                  />
-                }
-                label={t("private")}
-              />
-            </Grid>
-            <Grid
-              size={{ sm: 6, xs: 12 }}
-              sx={{
-                display: "flex",
-                justifyContent: "flex-end",
-                alignItems: "center",
-                gap: 2,
-              }}
-            >
-              <Button
-                color="primary"
-                variant="contained"
-                size="small"
-                type="submit"
-                sx={{ height: 30.75 }}
-              >
-                {t("btnSave")}
-              </Button>
-              <Button
-                color="primary"
-                variant="outlined"
-                size="small"
-                onClick={handleClose}
-                sx={{ height: 30.75 }}
-              >
-                {t("btnCancel")}
-              </Button>
-            </Grid>
-          </Grid>
-        </Box>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/pages/account/wishlist/create-wishlist-button.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@mui/material";
-import T from "@/components/T";
-import CreateNewListDialog from "./create-new-list";
-
-interface Props {
-  path: string;
-}
-
-const CreateWishlistButton = ({ path }: Props) => {
-  const [openCreateListDialog, setOpenCreateListDialog] = useState(false);
-
-  const handleCloseDialog = () => {
-    setOpenCreateListDialog(false);
-  };
-
-  const handleCreateNewList = () => {
-    setOpenCreateListDialog(true);
-  };
-
-  return (
-    <>
-      <Button
-        onClick={handleCreateNewList}
-        color="primary"
-        sx={{ bgcolor: "primary.light", px: 4 }}
-      >
-        <T path={path} />
-      </Button>
-      <CreateNewListDialog
-        open={openCreateListDialog}
-        handleClose={handleCloseDialog}
-      />
-    </>
-  );
-};
-
-export default CreateWishlistButton;

package/src/pages/account/wishlist/wishlist-item.tsx

@@ -1,82 +0,0 @@
-import { Box, IconButton } from "@mui/material";
-import { useTranslations } from "next-intl";
-import { useNotification } from "@/components/Notifications/use-notification";
-import { format } from "date-fns";
-// MUI ICON COMPONENTS
-import { MdDelete as Delete } from "react-icons/md";
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@/components/_components/Typography";
-import { NavLink3 } from "@/components/_components/nav-link";
-// LOCAL CUSTOM COMPONENT
-import TableRow from "../table-row";
-// API
-import useDeleteWishlist from "@/api-manager/services/user/mutations/delete-wishlist";
-import {
-  Wishlist,
-  WishlistDetailInput,
-} from "@/api-manager/schemas/user.schema";
-
-interface Props {
-  wishlist: Wishlist;
-}
-
-export default function WishlistItem({ wishlist }: Props) {
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-
-  const { mutateAsync: deleteWishlist } = useDeleteWishlist();
-
-  const handleDelete = async (id: string) => {
-    const wishlistDeleteInput: WishlistDetailInput = { Id: id };
-    try {
-      await deleteWishlist(wishlistDeleteInput);
-      setNotification({
-        message: t("deleteWishlistSuccess"),
-        severity: "success",
-      });
-    } catch (error) {
-      setNotification({
-        message: t("deleteWishlistFailed"),
-        severity: "error",
-      });
-    }
-  };
-
-  return (
-    <TableRow
-      sx={{
-        display: "grid",
-        gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", // Define equal column structure
-        alignItems: "center",
-        gap: 2,
-        padding: "10px 15px",
-      }}
-    >
-      <Paragraph ellipsis>
-        <NavLink3
-          href={`/account/wish-lists/${wishlist?.Id}`}
-          text={wishlist?.Name ?? ""}
-        />
-      </Paragraph>
-      <Paragraph ellipsis>
-        {" "}
-        {format(
-          new Date(wishlist?.CreatedDateTime ?? wishlist?.LastUpdated ?? ""),
-          "MMM dd, yyyy",
-        )}
-      </Paragraph>
-      <Paragraph
-        ellipsis
-      >{`${wishlist?.ProductListLines?.length} ${t("products")}`}</Paragraph>
-      {/* <Paragraph ellipsis>
-        {wishlist?.isPublic ? "Public" : "Private"}
-      </Paragraph> */}
-
-      <Box display="flex" alignItems="center" gap={1} justifySelf="end">
-        <IconButton onClick={() => handleDelete(wishlist?.Id || "")}>
-          <Delete fontSize="large" color="inherit" />
-        </IconButton>
-      </Box>
-    </TableRow>
-  );
-}

package/src/pages/blog/pagination.tsx

@@ -1,38 +0,0 @@
-"use client";
-import {
-  Pagination as MuiPagination,
-  PaginationItem,
-  PaginationRenderItemParams,
-} from "@mui/material";
-import Link from "next/link";
-
-interface Props {
-  page?: number;
-  count: number;
-  pageSize?: number;
-}
-
-const Pagination = ({ count, page, pageSize }: Props) => {
-  const isSinglePage = count <= 1;
-  return (
-    <MuiPagination
-      variant="outlined"
-      color="primary"
-      shape="rounded"
-      page={page}
-      count={count}
-      renderItem={(item: PaginationRenderItemParams) =>
-        isSinglePage ? (
-          // If there's only 1 page, don't wrap with Link
-          <PaginationItem {...item} />
-        ) : (
-          <Link href={`?page=${item.page}&pageSize=${pageSize}`} passHref>
-            <PaginationItem {...item} />
-          </Link>
-        )
-      }
-    />
-  );
-};
-
-export default Pagination;