@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components/_components/service-cards/service-card-2/service-card-2.tsx

@@ -1,34 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { H3, Span } from "@/components/_components/Typography";
-import FlexBox from "@/components/_components/flex-box/flex-box";
-// LOCAL CUSTOM COMPONENTS
-import IconComponent from "../icon-component";
-
-// ==============================================================
-interface Props {
-  icon: string;
-  title: string;
-  description: string;
-}
-// ==============================================================
-
-export default function ServiceCard2({ icon, title, description }: Props) {
-  return (
-    <FlexBox gap={1} p="1rem">
-      <IconComponent
-        icon={icon}
-        color="inherit"
-        fontSize="inherit"
-        sx={{ color: "grey.900", fontSize: "40px" }}
-      />
-
-      <div>
-        <H3 color="grey.900" lineHeight={1.3}>
-          {title}
-        </H3>
-
-        <Span color="grey.600">{description}</Span>
-      </div>
-    </FlexBox>
-  );
-}

package/src/components/_components/service-cards/service-card-3/index.ts

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

package/src/components/_components/service-cards/service-card-3/service-card-3.tsx

@@ -1,25 +0,0 @@
-import IconComponent from "../icon-component";
-import { H4, Span } from "@/components/_components/Typography";
-// STYLED COMPONENTS
-import { StyledRoot } from "./styles";
-
-// ==============================================================
-interface Props {
-  icon: string;
-  title: string;
-  description: string;
-}
-// ==============================================================
-
-export default function ServiceCard3({ icon, title, description }: Props) {
-  return (
-    <StyledRoot>
-      <IconComponent icon={icon} sx={{ fontSize: 40 }} />
-
-      <div>
-        <H4 lineHeight={1.3}>{title}</H4>
-        <Span color="grey.600">{description}</Span>
-      </div>
-    </StyledRoot>
-  );
-}

package/src/components/_components/service-cards/service-card-3/styles.ts

@@ -1,23 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENTS
-export const StyledRoot = styled("div")(({ theme }) => ({
-  gap: 16,
-  flexGrow: 1,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRight: `1px solid ${theme.palette.grey[400]}`,
-  ":last-child": { borderRight: 0 },
-
-  [theme.breakpoints.down("md")]: {
-    ":nth-of-type(even)": { borderRight: 0 },
-  },
-
-  [theme.breakpoints.down("sm")]: {
-    borderRight: 0,
-    justifyContent: "flex-start",
-  },
-}));

package/src/components/_components/settings/index.ts

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

package/src/components/_components/settings/setting.tsx

@@ -1,141 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-// MUI
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import Tooltip from "@mui/material/Tooltip";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-// MUI ICON COMPONENTS
-import Close from "@mui/icons-material/Close";
-import Settings from "@mui/icons-material/Settings";
-// LOCAL CUSTOM COMPONENTS
-import { H6 } from "@/components/_components/Typography";
-import Scrollbar from "@/components/_components/scrollbar/scrollbar";
-import FlexBox from "@/components/_components/flex-box/flex-box";
-// GLOBAL CUSTOM HOOK
-import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
-// STYLED COMPONENTS
-import {
-  BodyWrapper,
-  MainContainer,
-  StyledAvatar,
-  StyledIconButton,
-} from "./styles";
-
-export default function Setting() {
-  const { push } = useRouter();
-  const { updateSettings, settings } = useSettings();
-  const [showBody, setShowBody] = useState(false);
-
-  return (
-    <ClickAwayListener onClickAway={() => setShowBody(false)}>
-      <MainContainer>
-        <Tooltip title="Settings & Demos" placement="left">
-          <StyledIconButton onClick={() => setShowBody((state) => !state)}>
-            {!showBody && <Settings />}
-            {showBody && <Close />}
-          </StyledIconButton>
-        </Tooltip>
-
-        <BodyWrapper showBody={showBody ? 1 : 0}>
-          <Scrollbar sx={{ maxHeight: showBody ? "calc(100vh - 200px)" : 0 }}>
-            <FlexBox gap={2}>
-              <Button
-                fullWidth
-                onClick={() => updateSettings({ direction: "rtl" })}
-                color={settings.direction === "rtl" ? "primary" : "secondary"}
-                variant={
-                  settings.direction === "rtl" ? "contained" : "outlined"
-                }
-              >
-                RTL
-              </Button>
-
-              <Button
-                fullWidth
-                onClick={() => updateSettings({ direction: "ltr" })}
-                color={settings.direction === "ltr" ? "primary" : "secondary"}
-                variant={
-                  settings.direction === "ltr" ? "contained" : "outlined"
-                }
-              >
-                LTR
-              </Button>
-            </FlexBox>
-
-            <Divider sx={{ my: 3 }} />
-
-            <H6 textAlign="center" mb={2}>
-              Bazaar Demos
-            </H6>
-
-            <FlexBox gap={2} flexWrap="wrap">
-              {demos.map((demo) => (
-                <StyledAvatar
-                  key={demo.id}
-                  src={demo.img}
-                  onClick={() => push(demo.path)}
-                />
-              ))}
-            </FlexBox>
-          </Scrollbar>
-        </BodyWrapper>
-      </MainContainer>
-    </ClickAwayListener>
-  );
-}
-
-const demos = [
-  {
-    id: 17,
-    path: "/furniture-3",
-    img: "/assets/images/landing/home/furniture-3.jpg",
-  },
-  {
-    id: 16,
-    path: "/gadget-3",
-    img: "/assets/images/landing/home/gadget-3.jpg",
-  },
-  {
-    id: 15,
-    path: "/grocery-4",
-    img: "/assets/images/landing/home/grocery-4.jpg",
-  },
-  {
-    id: 12,
-    path: "/furniture-2",
-    img: "/assets/images/landing/home/furniture-2.jpg",
-  },
-  {
-    id: 13,
-    path: "/gadget-2",
-    img: "/assets/images/landing/home/gadget-2.png",
-  },
-  { id: 14, path: "/medical", img: "/assets/images/landing/home/medical.png" },
-  {
-    id: 5,
-    path: "/fashion-3",
-    img: "/assets/images/landing/home/fashion-3.jpg",
-  },
-  { id: 0, path: "/market-1", img: "/assets/images/landing/page-1.png" },
-  { id: 1, path: "/market-2", img: "/assets/images/landing/home/market-2.jpg" },
-  { id: 9, path: "/grocery-1", img: "/assets/images/landing/grocery1.png" },
-  { id: 2, path: "/grocery-2", img: "/assets/images/landing/page-2.png" },
-  { id: 10, path: "/grocery-3", img: "/assets/images/landing/grocery3.png" },
-  { id: 3, path: "/fashion-1", img: "/assets/images/landing/page-3.png" },
-  {
-    id: 4,
-    path: "/fashion-2",
-    img: "/assets/images/landing/home/fashion-2.jpg",
-  },
-  { id: 6, path: "/gadget-1", img: "/assets/images/landing/page-4.png" },
-  { id: 7, path: "/furniture-1", img: "/assets/images/landing/furniture.png" },
-  { id: 8, path: "/gift-shop", img: "/assets/images/landing/gift-shop.png" },
-  {
-    id: 11,
-    path: "/health-beauty",
-    img: "/assets/images/landing/healthbeauty.png",
-  },
-];

package/src/components/_components/settings/styles.ts

@@ -1,57 +0,0 @@
-import Avatar from "@mui/material/Avatar";
-import styled from "@mui/material/styles/styled";
-import IconButton from "@mui/material/IconButton";
-
-export const MainContainer = styled("div")(({ theme }) => ({
-  top: 50,
-  right: 50,
-  zIndex: 1501,
-  position: "fixed",
-  [theme.breakpoints.down("md")]: { display: "none" },
-}));
-
-export const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  right: 50,
-  zIndex: 99,
-  bottom: 50,
-  padding: 12,
-  color: "#fff",
-  position: "fixed",
-  borderRadius: "50%",
-  boxShadow: theme.shadows[12],
-  backgroundColor: theme.palette.primary.main,
-  ":hover": { backgroundColor: theme.palette.primary.main },
-}));
-
-export const BodyWrapper = styled("div", {
-  shouldForwardProp: (props) => props !== "showBody",
-})<{ showBody: number }>(({ theme, showBody }) => ({
-  borderRadius: "4px",
-  backgroundColor: "white",
-  opacity: showBody ? 1 : 0,
-  width: showBody ? 300 : 0,
-  padding: showBody ? 24 : 0,
-  boxShadow: theme.shadows[3],
-  transition: "transform 0.4s",
-  // maxHeight: showBody ? "calc(100vh - 100px)" : 0,
-  transform: `translateY(${showBody ? 0 : "10px"})`,
-}));
-
-export const StyledAvatar = styled(Avatar)({
-  flexGrow: 1,
-  height: 100,
-  width: "45%",
-  cursor: "pointer",
-  borderRadius: "10px",
-  ":last-of-type": { flexGrow: 0 },
-  ":hover": { "&::after": { opacity: 0.5 } },
-  "::after": {
-    opacity: 0,
-    content: '""',
-    width: "100%",
-    height: "100%",
-    background: "black",
-    position: "absolute",
-    transition: "all 0.3s",
-  },
-});

package/src/components/_components/shop-card/index.ts

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

package/src/components/_components/shop-card/shop-card.tsx

@@ -1,152 +0,0 @@
-import Card from "@mui/material/Card";
-
-import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
-import Place from "@mui/icons-material/Place";
-import InventoryIcon from "@mui/icons-material/Inventory";
-// GLOBAL CUSTOM COMPONENTS
-import { H3, Span } from "../Typography";
-import { FlexBetween, FlexBox } from "../flex-box/index";
-// STYLED COMPONENT
-import { ContentWrapper } from "./styles";
-import {
-  ProductWarehouseInventoryAvailability,
-  StoreHours,
-} from "@msdyn365-commerce/retail-proxy";
-import {
-  buildStoreHours,
-  IHoursDisplayInfo,
-  IStoreSelectorLocationLineItemResources,
-} from "@/lib/store-hours-helper";
-import { Box } from "@mui/system";
-import { useTranslations } from "next-intl";
-
-type Props = {
-  name: string;
-  address: string;
-  actionArea: React.ReactNode;
-  openFrom: number;
-  openTo: number;
-  storeHours: StoreHours;
-  inventoryRecord: ProductWarehouseInventoryAvailability | undefined;
-};
-
-export default function ShopCard(props: Props) {
-  const { name, address, actionArea, openFrom, openTo, storeHours } =
-    props || {};
-  const daysTrans = useTranslations("StoreHours");
-
-  const convertNumberToTime = (numberinSeconds: number) => {
-    const date = new Date(numberinSeconds * 1000);
-    const hours = date.getUTCHours();
-    const minutes = date.getUTCMinutes();
-    const ampm = hours >= 12 ? "PM" : "AM";
-    const formattedHours = hours % 12 || 12; // Convert to 12-hour format
-    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
-    return `${formattedHours}:${formattedMinutes} ${ampm}`;
-  };
-
-  const resources: IStoreSelectorLocationLineItemResources = {
-    days: {
-      monday: daysTrans("mon"),
-      tuesday: daysTrans("tue"),
-      wednesday: daysTrans("wed"),
-      thursday: daysTrans("thu"),
-      friday: daysTrans("fri"),
-      saturday: daysTrans("sat"),
-      sunday: daysTrans("sun"),
-      mondayFull: daysTrans("monday"),
-      tuesdayFull: daysTrans("tuesday"),
-      wednesdayFull: daysTrans("wednesday"),
-      thursdayFull: daysTrans("thursday"),
-      fridayFull: daysTrans("friday"),
-      saturdayFull: daysTrans("saturday"),
-      sundayFull: daysTrans("sunday"),
-    },
-    closedText: daysTrans("closed"),
-  };
-
-  const renderStoreHours = () => {
-    if (storeHours?.RegularStoreHours) {
-      const storeHoursList: IHoursDisplayInfo[] = buildStoreHours(
-        storeHours.RegularStoreHours,
-        resources,
-      );
-      return (
-        <div className="ms-store-select__store-hours-details-group">
-          {storeHoursList.map((displayTime) => (
-            <div
-              className="ms-store-select__store-hours-details"
-              key={JSON.stringify(displayTime)}
-            >
-              {displayTime.endDayShort ? (
-                <Box>
-                  <Span>
-                    <abbr title={displayTime.startDayFull}>
-                      {displayTime.startDayShort}
-                    </abbr>
-                  </Span>
-                  –
-                  <Span>
-                    <abbr title={displayTime.endDayFull}>
-                      {displayTime.endDayShort}
-                    </abbr>
-                  </Span>
-                </Box>
-              ) : (
-                <Box>
-                  <Span>
-                    <abbr title={displayTime.startDayFull}>
-                      {displayTime.startDayShort}
-                    </abbr>
-                  </Span>
-                </Box>
-              )}
-              <Box>{displayTime.timeRange}</Box>
-            </div>
-          ))}
-        </div>
-      );
-    }
-    return (
-      <Span color="white">
-        {convertNumberToTime(openFrom)} - {convertNumberToTime(openTo)}
-      </Span>
-    );
-  };
-
-  return (
-    <Card sx={{ marginBottom: 2 }}>
-      <ContentWrapper img={""}>
-        <H3 fontWeight="600" mb={1}>
-          {name}
-        </H3>
-
-        {/* <Rating value={rating || 0} color="warn" size="small" readOnly className="mb-1" /> */}
-
-        <FlexBox mb={1} gap={1}>
-          <Place fontSize="small" sx={{ fontSize: 17, mt: "3px" }} />
-          <Span color="white">{address}</Span>
-        </FlexBox>
-
-        <FlexBox alignItems="center" gap={1}>
-          <AccessTimeFilledIcon
-            fontSize="small"
-            sx={{ fontSize: 17, mt: "3px" }}
-          />
-          {renderStoreHours()}
-        </FlexBox>
-
-        <FlexBox my={1} gap={1}>
-          <InventoryIcon fontSize="small" sx={{ fontSize: 17, mt: "3px" }} />
-          <Span color="white">
-            {props.inventoryRecord?.TotalAvailableInventoryLevelLabel}
-          </Span>
-        </FlexBox>
-      </ContentWrapper>
-
-      <FlexBetween pl={3} pr={1} justifyContent={"flex-end"}>
-        {actionArea}
-      </FlexBetween>
-    </Card>
-  );
-}

package/src/components/_components/shop-card/styles.ts

@@ -1,33 +0,0 @@
-"use client";
-
-import Avatar from "@mui/material/Avatar";
-import IconButton from "@mui/material/IconButton";
-import { alpha, styled } from "@mui/material/styles";
-
-// STYLED COMPONENT
-export const ContentWrapper = styled("div", {
-  shouldForwardProp: (prop) => prop !== "img",
-})<{ img: string }>(({ theme, img }) => ({
-  color: "white",
-  backgroundSize: "cover",
-  padding: "17px 30px 56px",
-  backgroundPosition: "center",
-  backgroundImage: `linear-gradient(to bottom,
-    ${alpha(theme.palette.grey[900], 0.8)}, ${alpha(theme.palette.grey[900], 0.8)}), 
-    url(${img})`,
-}));
-
-export const StyledAvatar = styled(Avatar)(({ theme }) => ({
-  width: 64,
-  height: 64,
-  marginTop: "-32px",
-  border: `3px solid ${theme.palette.grey[100]}`,
-}));
-
-export const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  marginBlock: 4,
-  ".icon": {
-    fontSize: 19,
-    transform: theme.direction === "rtl" ? "180deg" : "0deg",
-  },
-}));

package/src/components/_components/side-nav/index.ts

@@ -1 +0,0 @@
-export { default } from "./side-nav";

package/src/components/_components/side-nav/side-nav.tsx

@@ -1,49 +0,0 @@
-import { useEffect, useState, ReactNode } from "react";
-import Drawer from "@mui/material/Drawer";
-// GLOBAL CUSTOM COMPONENT
-import Scrollbar from "@/components/_components/scrollbar/index";
-
-// ================================================================
-interface Props {
-  open?: boolean;
-  width?: number;
-  children: ReactNode;
-  toggle?: () => void;
-  position?: "left" | "right";
-  handler: (event: () => void) => ReactNode;
-}
-// ================================================================
-
-export default function SideNav(props: Props) {
-  const {
-    position = "left",
-    open = false,
-    width = 280,
-    children,
-    handler,
-    toggle,
-  } = props;
-
-  const [sideNavOpen, setSideNavOpen] = useState(open);
-  const handleToggleSideNav = () => setSideNavOpen(!sideNavOpen);
-
-  useEffect(() => setSideNavOpen(open), [open]);
-
-  const handleClose = toggle || handleToggleSideNav;
-
-  return (
-    <div>
-      <Drawer
-        anchor={position}
-        open={sideNavOpen}
-        onClose={handleClose}
-        SlideProps={{ style: { width } }}
-        sx={{ zIndex: 15001 }}
-      >
-        <Scrollbar autoHide={false}>{children}</Scrollbar>
-      </Drawer>
-
-      {handler(handleClose)}
-    </div>
-  );
-}

package/src/components/_components/site-logo.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import Link from "next/link";
-
-interface SiteLogoProps {
-  height?: string;
-}
-
-const SiteLogo: React.FC<SiteLogoProps> = () => {
-  return (
-    <Link href="/">
-      <img src={"/logo-blue.png"} alt="E4 Logo" height={54} />
-    </Link>
-  );
-};
-
-export default SiteLogo;

package/src/components/_components/sticky/Sticky.tsx

@@ -1,62 +0,0 @@
-import { useCallback, useEffect, useRef, useState, ReactNode } from "react";
-import clsx from "clsx";
-import { StyledBox } from "./styles";
-
-// ============================================================
-interface Props {
-  fixedOn: number;
-  children: ReactNode;
-  scrollDistance?: number;
-  onSticky?: (isFixed: boolean) => void;
-}
-
-// ============================================================
-
-export default function Sticky({
-  fixedOn,
-  children,
-  onSticky,
-  scrollDistance = 0,
-}: Props) {
-  const [fixed, setFixed] = useState(false);
-  const elementRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-
-  const scrollListener = useCallback(() => {
-    if (!window) return;
-
-    const isFixed = window.scrollY >= fixedOn + scrollDistance;
-    setFixed(isFixed);
-  }, [fixedOn, scrollDistance]);
-
-  useEffect(() => {
-    if (!window) return;
-
-    window.addEventListener("scroll", scrollListener);
-    window.addEventListener("resize", scrollListener);
-
-    return () => {
-      window.removeEventListener("scroll", scrollListener);
-      window.removeEventListener("resize", scrollListener);
-    };
-  }, [scrollListener]);
-
-  useEffect(() => {
-    if (onSticky) onSticky(fixed);
-  }, [fixed, onSticky]);
-
-  useEffect(() => {
-    if (elementRef.current) {
-      setHeight(elementRef.current.offsetHeight);
-      scrollListener();
-    }
-  }, [scrollListener]);
-
-  return (
-    <StyledBox fixedOn={fixedOn} componentHeight={height} fixed={fixed}>
-      <div className={clsx({ hold: !fixed, fixed: fixed })} ref={elementRef}>
-        {children}
-      </div>
-    </StyledBox>
-  );
-}

package/src/components/_components/sticky/index.ts

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

package/src/components/_components/sticky/styles.ts

@@ -1,38 +0,0 @@
-import { keyframes, styled } from "@mui/material/styles";
-
-// ==============================================================
-interface Props {
-  fixed?: boolean;
-  fixedOn?: number;
-  componentHeight?: number;
-}
-// ==============================================================
-
-const slideDown = keyframes`
-    from {transform: translateY(-200%)}
-    to {transform: translateY(0)}
-`;
-
-export const StyledBox = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "componentHeight" && prop !== "fixed" && prop !== "fixedOn",
-})<Props>(({ theme, componentHeight, fixedOn, fixed }) => ({
-  paddingTop: fixed ? componentHeight : 0,
-
-  "& .hold": {
-    zIndex: 5,
-    boxShadow: "none",
-    position: "relative",
-  },
-
-  "& .fixed": {
-    left: 0,
-    right: 0,
-    zIndex: 1500,
-    position: "fixed",
-    top: `${fixedOn}px`,
-    boxShadow: theme.shadows[2],
-    transition: "all 350ms ease-in-out",
-    animation: `${slideDown} 400ms ${theme.transitions.easing.easeInOut}`,
-  },
-}));

package/src/components/_components/sticky-wrapper/index.ts

@@ -1 +0,0 @@
-export { default } from "./sticky-wrapper";

package/src/components/_components/sticky-wrapper/sticky-wrapper.tsx

@@ -1,21 +0,0 @@
-import { PropsWithChildren, ReactNode } from "react";
-import Container from "@mui/material/Container";
-// STYLED COMPONENTS
-import { ContentWrapper } from "./styles";
-
-// ==============================================================
-interface Props extends PropsWithChildren {
-  SideNav: ReactNode;
-}
-// ==============================================================
-
-export default function StickyWrapper({ SideNav, children }: Props) {
-  return (
-    <Container>
-      <ContentWrapper>
-        <div className="sidebar">{SideNav}</div>
-        <div className="content">{children}</div>
-      </ContentWrapper>
-    </Container>
-  );
-}