@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/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/_components/shop-card/index.ts

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

package/src/components/_components/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/_components/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/_components/side-nav/index.ts

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

package/src/components/_components/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 "@/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

@@ -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/_components/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/_components/sticky/index.ts

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

package/src/components/_components/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/_components/sticky-wrapper/index.ts

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

package/src/components/_components/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/_components/sticky-wrapper/styles.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+import { layoutConstant } from "@/components/_components/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/_components/stories/story-content/index.ts

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

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

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import LazyImage from "@/components/_components/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>
+  );
+}

package/src/components/_components/stories/story-content/styles.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import Button from "@mui/material/Button";
+import styled from "@mui/material/styles/styled";
+
+export const StyledRoot = styled("div")(() => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  position: "relative",
+}));
+
+export const StyledButton = styled(Button)(() => ({
+  bottom: 30,
+  left: "50%",
+  zIndex: 1111,
+  color: "white",
+  fontWeight: 400,
+  position: "absolute",
+  paddingInline: "2rem",
+  transform: "translateX(-50%)",
+}));

package/src/components/_components/stories/story-item/index.ts

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

package/src/components/_components/stories/story-item/story-item.tsx

@@ -0,0 +1,24 @@
+import LazyImage from "@/components/_components/LazyImage";
+// STYLED COMPONENT
+import { StyledRoot } from "./styles";
+
+// ==============================================================
+interface Props {
+  image: string;
+  handleClick: () => void;
+}
+// ==============================================================
+
+export default function StoryItem({ image, handleClick }: Props) {
+  return (
+    <StyledRoot>
+      <LazyImage
+        src={image}
+        alt="Story"
+        width={164}
+        height={300}
+        onClick={handleClick}
+      />
+    </StyledRoot>
+  );
+}

package/src/components/_components/stories/story-item/styles.ts

@@ -0,0 +1,11 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const StyledRoot = styled("div")({
+  outline: 0,
+  display: "flex",
+  borderRadius: 4,
+  cursor: "pointer",
+  overflow: "hidden",
+});

package/src/components/_components/stories/story-viewer/index.ts

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

package/src/components/_components/stories/story-viewer/story-viewer.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Modal from "@mui/material/Modal";
+import Stories from "react-insta-stories";
+// STYLED COMPONENTS
+import { ModalWrapper } from "./styles";
+import {
+  ReactInstaStoriesProps,
+  Story,
+} from "react-insta-stories/dist/interfaces";
+
+// ==============================================================
+interface Props extends ReactInstaStoriesProps {
+  open: boolean;
+  handleClose: () => void;
+  stories: Story[];
+  currentIndex: number;
+}
+// ==============================================================
+
+export default function StoryViewer({
+  open,
+  handleClose,
+  stories,
+  currentIndex,
+}: Props) {
+  return (
+    <Modal open={open} onClose={handleClose}>
+      <ModalWrapper>
+        <Stories
+          stories={stories}
+          currentIndex={currentIndex}
+          onAllStoriesEnd={handleClose}
+          progressStyles={{ height: 3, borderRadius: 10 }}
+          progressWrapperStyles={{
+            height: 3,
+            borderRadius: 10,
+            background: "#373F50",
+          }}
+        />
+      </ModalWrapper>
+    </Modal>
+  );
+}

package/src/components/_components/stories/story-viewer/styles.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const ModalWrapper = styled("div")(() => ({
+  top: "50%",
+  outline: 0,
+  left: "50%",
+  borderRadius: 4,
+  overflow: "hidden",
+  aspectRatio: "9/16",
+  position: "absolute",
+  backgroundColor: "white",
+  transform: "translate(-50%, -50%)",
+}));

package/src/components/_components/subscribe-input/index.ts

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

package/src/components/_components/subscribe-input/styles.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import ButtonBase from "@mui/material/ButtonBase";
+import styled from "@mui/material/styles/styled";
+
+export const StyledButton = styled(ButtonBase)({
+  height: "100%",
+  color: "white",
+  fontWeight: 600,
+  padding: ".75rem 1.5rem",
+  backgroundColor: "black",
+  borderTopRightRadius: 8,
+  borderBottomRightRadius: 8,
+});