@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/categories/mega-menu/column-list.tsx

@@ -0,0 +1,70 @@
+import { PropsWithChildren } from "react";
+import Link from "next/link";
+// MUI
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+// STYLED COMPONENTS
+import { StyledRoot } from "./styles";
+// DATA TYPES
+import { CategoryItemOffer } from "../types";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+// ==============================================================
+interface Props extends PropsWithChildren {
+  minWidth?: number;
+  list: CategoryHierarchy[];
+  banner?: CategoryItemOffer;
+}
+// ==============================================================
+
+export default function ColumnList({
+  list,
+  children,
+  banner,
+  minWidth = 760,
+}: Props) {
+  return (
+    <StyledRoot elevation={2} sx={{ minWidth }}>
+      <FlexBox px={2.5}>
+        <Box flex="1 1 0">
+          <Grid container spacing={4}>
+            {list.map((item, ind) => (
+              <Grid size={3} key={ind}>
+                <div className="title-link">{item.Name}</div>
+
+                {item.Children?.map((sub, ind) => (
+                  <NavLink
+                    className="child-link"
+                    href={`/products/${sub.Url}`}
+                    key={ind}
+                  >
+                    {sub.Name}
+                  </NavLink>
+                ))}
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+
+        {banner?.position === "right" ? (
+          <Box mt={1.5}>
+            <Link href={banner.href}>
+              <LazyImage
+                src={banner.url}
+                width={137}
+                height={318}
+                alt="banner"
+              />
+            </Link>
+          </Box>
+        ) : null}
+      </FlexBox>
+
+      {children}
+    </StyledRoot>
+  );
+}

package/src/components-v2/categories/mega-menu/mega-menu-1.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+// MUI
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+// LOCAL CUSTOM COMPONENTS
+import ColumnList from "./column-list";
+// DATA TYPE
+import { CategoryItemOffer } from "../types";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+// =========================================================
+interface Props {
+  minWidth?: string;
+  data: CategoryHierarchy[];
+  banner?: CategoryItemOffer;
+}
+// =========================================================
+
+export default function MegaMenu1({ banner, data }: Props) {
+  return (
+    <ColumnList list={data} banner={banner}>
+      {banner?.position === "bottom" ? (
+        <Link href={banner.href}>
+          <Box position="relative" height={150} width="100%">
+            <LazyImage
+              fill
+              alt="banner"
+              src={banner.url}
+              style={{ objectFit: "cover", objectPosition: "center center" }}
+            />
+          </Box>
+        </Link>
+      ) : null}
+    </ColumnList>
+  );
+}

package/src/components-v2/categories/mega-menu/mega-menu-2.tsx

@@ -0,0 +1,37 @@
+// LOCAL CUSTOM COMPONENTS
+import OfferBanner from "./banner";
+import ColumnList from "./column-list";
+import CategoryMenuItem from "../category-list-item/index";
+// STYLED COMPONENT
+import { StyledRoot } from "./styles";
+// DATA TYPE
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+// =======================================================================
+interface Props {
+  data: CategoryHierarchy[];
+}
+// =======================================================================
+
+export default function MegaMenu2({ data }: Props) {
+  return (
+    <StyledRoot elevation={2}>
+      {data.map((item) => (
+        <CategoryMenuItem
+          href={`/products/${item.Url}`}
+          //icon={item.icon} // No icon information
+          key={item.RecordId}
+          title={item.Name ?? ""}
+          caret={!!(item.Children && item.Children.length)}
+          render={
+            item.Children?.length ? (
+              <ColumnList minWidth={550} list={item.Children}>
+                <OfferBanner />
+              </ColumnList>
+            ) : null
+          }
+        />
+      ))}
+    </StyledRoot>
+  );
+}

package/src/components-v2/categories/mega-menu/styles.ts

@@ -0,0 +1,25 @@
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+export const StyledRoot = styled(Card)(({ theme }) => ({
+  marginLeft: "1rem",
+  paddingBlock: "0.5rem",
+  "& .title-link, & .child-link": {
+    color: "inherit",
+    fontWeight: 600,
+    display: "block",
+    padding: "0.5rem 0px",
+  },
+  "& .child-link": {
+    fontWeight: 400,
+  },
+  "& .mega-menu-content": {
+    borderRadius: 4,
+    marginLeft: "1rem",
+    padding: "0.5rem 0px",
+    boxShadow: theme.shadows[3],
+    transition: "all 250ms ease-in-out",
+    backgroundColor: theme.palette.background.paper,
+  },
+}));

package/src/components-v2/categories/types.ts

@@ -0,0 +1,16 @@
+import { SvgIconComponent } from "@mui/icons-material";
+
+export interface CategoryItemOffer {
+  url: string;
+  href: string;
+  position: "right" | "bottom";
+}
+
+export interface CategoryItem {
+  href: string;
+  title: string;
+  component?: string;
+  icon?: SvgIconComponent;
+  children?: CategoryItem[];
+  offer?: CategoryItemOffer;
+}

package/src/components-v2/category-cards/category-card-1/category-card-1.tsx

@@ -0,0 +1,21 @@
+// GLOBAL CUSTOM COMPONENTS
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+// STYLED COMPONENTS
+import { CategoryTitle, Wrapper } from "./styles";
+
+// ============================================================
+type Props = { image: string; title: string };
+// ============================================================
+
+export default function CategoryCard1({ image, title }: Props) {
+  return (
+    <Wrapper>
+      <LazyImage src={image} width={213} height={213} alt="category" />
+
+      <CategoryTitle className="category-title">
+        <H4>{title}</H4>
+      </CategoryTitle>
+    </Wrapper>
+  );
+}

package/src/components-v2/category-cards/category-card-1/index.ts

@@ -0,0 +1 @@
+export { default } from "./category-card-1";

package/src/components-v2/category-cards/category-card-1/styles.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENTS
+export const Wrapper = styled("div")(({ theme }) => ({
+  height: "100%",
+  cursor: "pointer",
+  overflow: "hidden",
+  borderRadius: "4px",
+  position: "relative",
+  img: {
+    height: "100%",
+    objectFit: "cover",
+    transition: "all 0.3s",
+    objectPosition: "center center",
+  },
+  ":hover": {
+    img: { transform: "scale(1.1)" },
+    ".category-title": {
+      color: theme.palette.common.white,
+      backgroundColor: theme.palette.primary.dark,
+    },
+  },
+}));
+
+export const CategoryTitle = styled("div")({
+  left: 10,
+  right: 10,
+  bottom: 10,
+  padding: 8,
+  textAlign: "center",
+  borderRadius: "2px",
+  position: "absolute",
+  transition: "all 0.3s",
+  backgroundColor: "rgba(255,255,255, .67)",
+});

package/src/components-v2/countdown/count-box.tsx

@@ -0,0 +1,19 @@
+import {
+  H3,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+// ==============================================================
+type Props = { digit: number; title: string };
+// ==============================================================
+
+export default function CountBox({ digit = 365, title = "DAYS" }: Props) {
+  return (
+    <H3>
+      {digit}{" "}
+      <Span color="grey.600" fontSize={14} fontWeight={600}>
+        {title}
+      </Span>
+    </H3>
+  );
+}

package/src/components-v2/countdown/count-down.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+// GLOBAL CUSTOM COMPONENT
+import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+// Local CUSTOM COMPONENT
+import CountBox from "./count-box";
+import useCountDown from "./useCountDown";
+
+// ==============================================================
+type Props = { expireDate: number };
+// ==============================================================
+
+export default function Countdown({ expireDate }: Props) {
+  const { timeLeft } = useCountDown({ expireDate });
+
+  return (
+    <FlexBetween width="90%" height="auto">
+      <CountBox digit={timeLeft.days} title="DAYS" />
+      <CountBox digit={timeLeft.hours} title="HOURS" />
+      <CountBox digit={timeLeft.minutes} title="MINS" />
+      <CountBox digit={timeLeft.seconds} title="SECS" />
+    </FlexBetween>
+  );
+}

package/src/components-v2/countdown/index.tsx

@@ -0,0 +1,2 @@
+export { default as Countdown } from "./count-down";
+export { default as useCountDown } from "./useCountDown";

package/src/components-v2/countdown/useCountDown.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+const initialState = {
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
+};
+
+// ==============================================================
+type Props = { expireDate: number };
+// ==============================================================
+
+export default function useCountDown({ expireDate }: Props) {
+  const [timeLeft, setTimeLeft] = useState(initialState);
+
+  const calculateTimeLeft = useCallback(() => {
+    const distance = expireDate - new Date().getTime();
+    // if date expire
+    if (distance < 0) return initialState;
+
+    return {
+      days: Math.floor(distance / (1000 * 60 * 60 * 24)),
+      hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+      minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
+      seconds: Math.floor((distance % (1000 * 60)) / 1000),
+    };
+  }, [expireDate]);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [calculateTimeLeft]);
+
+  return { timeLeft };
+}

package/src/components-v2/countries-input.tsx

@@ -0,0 +1,73 @@
+import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import {
+  Autocomplete,
+  AutocompleteRenderInputParams,
+  Box,
+  TextField,
+} from "@mui/material";
+import React from "react";
+
+interface Props {
+  countries: CountryRegionInfo[];
+  label: string;
+  selectedCountry: CountryRegionInfo | null;
+  setSelectedCountry: (country: CountryRegionInfo | null) => void;
+}
+
+export default function CountryInput({
+  countries,
+  label,
+  setSelectedCountry,
+  selectedCountry,
+}: Props) {
+  const [countryInputValue, setCountryInputValue] = React.useState<string>("");
+  const handleAutoCompleteChange = (
+    _event: React.SyntheticEvent<Element, Event>,
+    value: string,
+  ) => setCountryInputValue(value);
+
+  const renderOption = (
+    props: React.HTMLAttributes<HTMLLIElement> & {
+      key: any;
+    },
+    option: CountryRegionInfo,
+  ) => {
+    const { key, ...optionProps } = props;
+    return (
+      <Box key={key} component="li" {...optionProps}>
+        {option.ShortName}
+      </Box>
+    );
+  };
+  const renderInput = (params: AutocompleteRenderInputParams) => (
+    <TextField
+      {...params}
+      size="small"
+      label={label}
+      variant="outlined"
+      data-testid="country-input"
+      placeholder="Select Country"
+    />
+  );
+
+  const getOptionLabel = (option: CountryRegionInfo) => option.ShortName || "";
+
+  const renderAutocomplete = () => (
+    <Autocomplete
+      fullWidth
+      value={selectedCountry}
+      options={countries}
+      onChange={(_event, newValue) => {
+        setSelectedCountry(newValue);
+      }}
+      data-testid="country-autocomplete"
+      inputValue={countryInputValue}
+      onInputChange={handleAutoCompleteChange}
+      renderOption={(props, option) => renderOption(props, option)}
+      renderInput={renderInput}
+      getOptionLabel={getOptionLabel}
+    />
+  );
+
+  return renderAutocomplete();
+}

package/src/components-v2/data-table/index.ts

@@ -0,0 +1,2 @@
+export { default as TableHeader } from "./table-header";
+export { default as TablePagination } from "./table-pagination";

package/src/components-v2/data-table/table-header.tsx

@@ -0,0 +1,91 @@
+import { ChangeEvent } from "react";
+import styled from "@mui/material/styles/styled";
+import Checkbox from "@mui/material/Checkbox";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableSortLabel from "@mui/material/TableSortLabel";
+// CUSTOM ICON COMPONENT
+import UpDown from "@evenicanpm/storefront-core/src/components-v2/icons/up-down";
+
+// STYLED COMPONENTS
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  fontWeight: 600,
+  padding: "16px 20px",
+  color: theme.palette.grey[900],
+}));
+
+// ----------------------------------------------------------------------
+interface Props {
+  heading: Headings[];
+  orderBy: string;
+  rowCount: number;
+  numSelected: number;
+  order: "asc" | "desc";
+  hideSelectBtn?: boolean;
+  onRequestSort: (id: string) => void;
+  onSelectAllClick?: (checked: boolean, defaultSelect: string) => void;
+}
+// ----------------------------------------------------------------------
+export type Key = string | number | bigint;
+export type Align = "inherit" | "left" | "center" | "right" | "justify";
+export type SortDirection = "asc" | "desc" | false;
+
+export type Headings = {
+  label: string;
+  align: Align;
+  key: Key;
+  sortDirection: SortDirection;
+  id: string;
+};
+// ----------------------------------------------------------------------
+export default function TableHeader(props: Props) {
+  const {
+    order,
+    heading,
+    orderBy,
+    rowCount,
+    numSelected,
+    onRequestSort,
+    onSelectAllClick,
+    hideSelectBtn = false,
+  } = props;
+
+  return (
+    <TableHead sx={{ backgroundColor: "grey.200" }}>
+      <TableRow>
+        {!hideSelectBtn ? (
+          <StyledTableCell align="left">
+            <Checkbox
+              color="info"
+              checked={rowCount > 0 && numSelected === rowCount}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                onSelectAllClick?.(event.target.checked, "product")
+              }
+            />
+          </StyledTableCell>
+        ) : null}
+
+        {heading.map((headCell) => (
+          <StyledTableCell
+            key={headCell.id}
+            align={headCell.align}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              onClick={() => onRequestSort(headCell.id)}
+              direction={orderBy === headCell.id ? order : "asc"}
+              sx={{ "& .MuiTableSortLabel-icon": { opacity: 1 } }}
+              IconComponent={() => (
+                <UpDown sx={{ fontSize: 14, ml: 1, color: "grey.600" }} />
+              )}
+            >
+              {headCell.label}
+            </TableSortLabel>
+          </StyledTableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}

package/src/components-v2/data-table/table-pagination.tsx

@@ -0,0 +1,36 @@
+import Pagination, { PaginationProps } from "@mui/material/Pagination";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+const StyledPagination = styled(Pagination)(({ theme }) => ({
+  "& .MuiPaginationItem-root": {
+    fontSize: 14,
+    fontWeight: 500,
+    color: theme.palette.grey[900],
+    border: `1px solid transparent`,
+  },
+  "& .MuiPaginationItem-page:hover": {
+    borderRadius: 20,
+    backgroundColor: "transparent",
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+  },
+  "& .MuiPaginationItem-page.Mui-selected": {
+    borderRadius: 20,
+    backgroundColor: "transparent",
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+    ":hover": { backgroundColor: "transparent" },
+  },
+  "& .MuiPaginationItem-previousNext": {
+    margin: 10,
+    borderRadius: 20,
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+    "&:hover": { backgroundColor: "transparent" },
+  },
+}));
+
+export default function TablePagination(props: PaginationProps) {
+  return <StyledPagination {...props} />;
+}

package/src/components-v2/flex-box/flex-between.tsx

@@ -0,0 +1,14 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexBetween({ children, ...props }: BoxProps) {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components-v2/flex-box/flex-box.tsx

@@ -0,0 +1,9 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexBox({ children, ...props }: BoxProps) {
+  return (
+    <Box display="flex" {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/components-v2/flex-box/flex-row-center.tsx

@@ -0,0 +1,9 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexRowCenter({ children, ...props }: BoxProps) {
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/components-v2/flex-box/index.ts

@@ -0,0 +1,5 @@
+import FlexBox from "./flex-box";
+import FlexBetween from "./flex-between";
+import FlexRowCenter from "./flex-row-center";
+
+export { FlexBox, FlexBetween, FlexRowCenter };

package/src/components-v2/footer/components/about-links.tsx

@@ -0,0 +1,23 @@
+import { Fragment } from "react";
+import { Heading, StyledLink } from "../styles/index";
+import { ABOUT_LINKS } from "../data/index";
+
+// ==============================================================
+type Props = { isDark?: boolean };
+// ==============================================================
+
+export default function AboutLinks({ isDark }: Props) {
+  return (
+    <Fragment>
+      <Heading>About Us</Heading>
+
+      <div>
+        {ABOUT_LINKS.map((item, ind) => (
+          <StyledLink isDark={isDark} href="/" key={ind}>
+            {item}
+          </StyledLink>
+        ))}
+      </div>
+    </Fragment>
+  );
+}

package/src/components-v2/footer/components/app-store.tsx

@@ -0,0 +1,38 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENT
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// CUSTOM ICON COMPONENTS
+import { PLAY_APP_STORE_DATA } from "../data/index";
+
+export default function AppStore() {
+  return (
+    <FlexBox flexWrap="wrap" m={-1}>
+      {PLAY_APP_STORE_DATA.map(({ icon: Icon, subtitle, title, url }) => (
+        <a href={url} key={title} target="_blank" rel="noreferrer noopener">
+          <Box
+            m={1}
+            gap={1}
+            p="10px 16px"
+            color="white"
+            display="flex"
+            bgcolor="#161d2b"
+            borderRadius="5px"
+            alignItems="center"
+          >
+            <Icon />
+
+            <div>
+              <Box fontSize="8px" fontWeight="600" lineHeight="1">
+                {subtitle}
+              </Box>
+
+              <Box fontSize="14px" fontWeight="700">
+                {title}
+              </Box>
+            </div>
+          </Box>
+        </a>
+      ))}
+    </FlexBox>
+  );
+}

package/src/components-v2/footer/components/customer-care-links.tsx

@@ -0,0 +1,21 @@
+import { Fragment } from "react";
+import { Heading, StyledLink } from "../styles/index";
+import { CUSTOMER_CARE_LINKS } from "../data/index";
+
+// ==============================================================
+type Props = { isDark?: boolean };
+// ==============================================================
+
+export default function CustomerCareLinks({ isDark }: Props) {
+  return (
+    <Fragment>
+      <Heading>Customer Care</Heading>
+
+      {CUSTOMER_CARE_LINKS.map((item, ind) => (
+        <StyledLink isDark={isDark} href="/" key={ind}>
+          {item}
+        </StyledLink>
+      ))}
+    </Fragment>
+  );
+}