@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,23 @@
+"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-v2/settings/index.ts

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

package/src/components-v2/settings/setting.tsx

@@ -0,0 +1,141 @@
+"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 "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/scrollbar";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/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-v2/settings/styles.ts

@@ -0,0 +1,57 @@
+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-v2/shop-card/index.ts

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

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

@@ -0,0 +1,152 @@
+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-v2/shop-card/styles.ts

@@ -0,0 +1,33 @@
+"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-v2/side-nav/index.ts

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

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

@@ -0,0 +1,49 @@
+import { useEffect, useState, ReactNode } from "react";
+import Drawer from "@mui/material/Drawer";
+// GLOBAL CUSTOM COMPONENT
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/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-v2/site-logo.tsx

@@ -0,0 +1,17 @@
+"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-v2/sticky/Sticky.tsx

@@ -0,0 +1,62 @@
+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-v2/sticky/index.ts

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

package/src/components-v2/sticky/styles.ts

@@ -0,0 +1,38 @@
+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-v2/sticky-wrapper/index.ts

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

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

@@ -0,0 +1,21 @@
+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>
+  );
+}

package/src/components-v2/sticky-wrapper/styles.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
+
+export const ContentWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  position: "relative",
+
+  ".sidebar": {
+    width: "100%",
+    height: "100%",
+    position: "sticky",
+    top: layoutConstant.headerHeight + 15,
+    maxWidth: layoutConstant.grocerySidenavWidth,
+    [theme.breakpoints.down("md")]: { display: "none" },
+  },
+
+  ".content": {
+    width: "100%",
+    paddingLeft: "2rem",
+    maxWidth: `calc(100% - ${layoutConstant.grocerySidenavWidth}px)`,
+    [theme.breakpoints.down("md")]: { maxWidth: "100%", paddingLeft: 0 },
+  },
+}));

package/src/components-v2/stories/story-content/index.ts

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

package/src/components-v2/stories/story-content/story-content.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+// STYLED COMPONENT
+import { StyledButton, StyledRoot } from "./styles";
+
+// ==============================================================
+interface Props {
+  image: string;
+  url?: string;
+}
+// ==============================================================
+
+export default function StoryContent({ image, url }: Props) {
+  return (
+    <StyledRoot>
+      <LazyImage src={image} width={450} height={824} alt="Story" />
+
+      <StyledButton
+        color="primary"
+        variant="contained"
+        LinkComponent={Link}
+        href={url}
+      >
+        View More
+      </StyledButton>
+    </StyledRoot>
+  );
+}