@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,25 +0,0 @@
-"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

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

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

@@ -1,28 +0,0 @@
-import Link from "next/link";
-import LazyImage from "@evenicanpm/storefront-core/src/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

@@ -1,22 +0,0 @@
-"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

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

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

@@ -1,24 +0,0 @@
-import LazyImage from "@evenicanpm/storefront-core/src/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

@@ -1,11 +0,0 @@
-"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

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

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

@@ -1,44 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-"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

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

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

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

package/src/components/_components/subscribe-input/subscribe-input.tsx

@@ -1,43 +0,0 @@
-import { SxProps, Theme } from "@mui/material/styles";
-import TextField, { TextFieldProps } from "@mui/material/TextField";
-// STYLED COMPONENT
-import { StyledButton } from "./styles";
-
-// ==============================================================
-interface Props {
-  buttonText?: string;
-  buttonSx?: SxProps<Theme>;
-}
-// ==============================================================
-
-export default function SubscribeInput({
-  fullWidth,
-  InputProps,
-  buttonSx = {},
-  variant = "outlined",
-  buttonText = "SUBSCRIBE",
-  placeholder = "Enter Your Mail Here",
-  ...props
-}: Props & TextFieldProps) {
-  const INPUT_PROPS = {
-    endAdornment: <StyledButton sx={buttonSx}>{buttonText}</StyledButton>,
-    sx: {
-      border: 0,
-      padding: 0,
-      borderRadius: 2,
-      backgroundColor: "white",
-      ...InputProps?.sx,
-    },
-    ...InputProps,
-  };
-
-  return (
-    <TextField
-      variant={variant}
-      fullWidth={fullWidth}
-      placeholder={placeholder}
-      InputProps={INPUT_PROPS}
-      {...props}
-    />
-  );
-}

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

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

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

@@ -1,55 +0,0 @@
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import Container from "@mui/material/Container";
-import styled from "@mui/material/styles/styled";
-
-import { layoutConstant } from "@/components/_components/utils/constants";
-
-export const StyledRoot = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "bgColor" && prop !== "expand",
-})<{ bgColor?: string; expand: number }>(({ theme, bgColor, expand }) => ({
-  fontSize: 12,
-  height: layoutConstant.topbarHeight,
-  color: theme.palette.secondary.contrastText,
-  background: bgColor || theme.palette.grey[900],
-  transition: "height 300ms ease",
-  "& .menuItem": { minWidth: 100 },
-  "& .marginRight": { marginRight: "1.25rem" },
-  "& .expand": { display: "none", padding: 0 },
-  "& .handler": { height: layoutConstant.topbarHeight },
-  "& .menuTitle": { fontSize: 12, marginLeft: "0.5rem", fontWeight: 600 },
-
-  [theme.breakpoints.down("sm")]: {
-    height: expand ? 80 : layoutConstant.topbarHeight,
-
-    "& .MuiSvgIcon-root": { color: "white" },
-
-    "& .topbarRight": {
-      paddingBottom: 5,
-      display: expand ? "flex" : "none",
-    },
-
-    "& .expand": {
-      display: "block",
-      height: layoutConstant.topbarHeight,
-    },
-  },
-}));
-
-export const StyledContainer = styled(Container)(({ theme }) => ({
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  [theme.breakpoints.down("sm")]: {
-    alignItems: "start",
-    flexDirection: "column",
-  },
-}));
-
-export const StyledChip = styled(Chip)(({ theme }) => ({
-  color: "white",
-  fontWeight: 700,
-  backgroundColor: theme.palette.primary.main,
-  "& .MuiChip-label": { paddingInline: ".8rem" },
-}));

package/src/components/_components/topbar/top-bar.tsx

@@ -1,115 +0,0 @@
-import Link from "next/link";
-import { useState } from "react";
-// MUI
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import TouchRipple from "@mui/material/ButtonBase";
-// TRANSLATION
-import { useTranslation } from "react-i18next";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-import Twitter from "@mui/icons-material/Twitter";
-import Facebook from "@mui/icons-material/Facebook";
-import Instagram from "@mui/icons-material/Instagram";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import BazaarMenu from "@evenicanpm/storefront-core/src/components/_components/BazaarMenu";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-// STYLED COMPONENTS
-import { StyledChip, StyledContainer, StyledRoot } from "./styles";
-
-// ==============================================================
-interface LanguageOption {
-  [key: string]: { title: string; value: string };
-}
-// ==============================================================
-
-// LANGUAGE OPTIONS
-const languageOptions: LanguageOption = {
-  en: { title: "EN", value: "en" },
-  es: { title: "DE", value: "de" },
-};
-
-const socialLinks = [
-  { id: 1, Icon: Twitter, url: "#" },
-  { id: 2, Icon: Facebook, url: "#" },
-  { id: 3, Icon: Instagram, url: "#" },
-];
-
-// ===========================================
-type Props = { bgColor?: string };
-// ===========================================
-
-export default function Topbar({ bgColor }: Props) {
-  const { i18n, t } = useTranslation();
-  const [expand, setExpand] = useState<boolean>(false);
-
-  const handleChangeLanguage = (language: string) => {
-    i18n.changeLanguage(language);
-  };
-
-  const selectedLanguage = languageOptions[i18n.language];
-
-  return (
-    <StyledRoot bgColor={bgColor} expand={expand ? 1 : 0}>
-      <StyledContainer>
-        <FlexBetween width="100%">
-          <FlexBox alignItems="center" gap={1}>
-            <StyledChip label={t("HOT")} size="small" />
-            <Span className="title">{t("Free Express Shipping")}</Span>
-          </FlexBox>
-
-          <IconButton
-            disableRipple
-            className="expand"
-            onClick={() => setExpand((state) => !state)}
-          >
-            {expand ? <Remove /> : <Add />}
-          </IconButton>
-        </FlexBetween>
-
-        <FlexBox className="topbarRight" alignItems="center">
-          {/* LANGUAGE MENU SELECTOR */}
-          <BazaarMenu
-            handler={(e) => (
-              <TouchRipple className="handler marginRight" onClick={e}>
-                <Span className="menuTitle">{selectedLanguage.title}</Span>
-                <ExpandMore fontSize="inherit" />
-              </TouchRipple>
-            )}
-            options={(onClose) => {
-              return Object.keys(languageOptions).map((language: string) => (
-                <MenuItem
-                  className="menuItem"
-                  key={languageOptions[language].title}
-                  onClick={() => {
-                    handleChangeLanguage(language);
-                    onClose();
-                  }}
-                >
-                  <Span className="menuTitle">
-                    {languageOptions[language].title}
-                  </Span>
-                </MenuItem>
-              ));
-            }}
-          />
-
-          {/* SOCIAL LINKS AREA */}
-          <FlexBox alignItems="center" gap={1.5}>
-            {socialLinks.map(({ id, Icon, url }) => (
-              <Link href={url} key={id}>
-                <Icon sx={{ fontSize: 16 }} />
-              </Link>
-            ))}
-          </FlexBox>
-        </FlexBox>
-      </StyledContainer>
-    </StyledRoot>
-  );
-}

package/src/components/_components/utils/constants.ts

@@ -1,8 +0,0 @@
-export const layoutConstant = {
-  topbarHeight: 40,
-  headerHeight: 80,
-  mobileNavHeight: 64,
-  containerWidth: 1200,
-  mobileHeaderHeight: 64,
-  grocerySidenavWidth: 280,
-};

package/src/components/_components/wishlist/add-to-wishlist-dialog.tsx

@@ -1,161 +0,0 @@
-import React, { Fragment } from "react";
-import isFunction from "lodash/isFunction";
-import { useTranslations } from "next-intl";
-import { Grid, Button, Dialog, DialogContent } from "@mui/material";
-import { MdFavorite } from "react-icons/md";
-// Global Custom components
-import DashboardHeader from "./components/dashboard-header";
-import CreateWishlistButton from "./components/create-wishlist-button";
-import WishlistModalItem from "./components/wishlist-modal-item";
-import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
-// API
-import {
-  CopyCartToWishlistInput,
-  Wishlist,
-  WishlistLinesInput,
-} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
-import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
-import { useSession } from "next-auth/react";
-import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
-
-interface Props {
-  open: boolean;
-  handleClose: () => void;
-  productId?: number;
-  cart?: Cart;
-  onSuccess?: () => void;
-}
-
-export default function AddToWishlistDialog(props: Props) {
-  const { data: wishlists, isLoading } = getWishlists.useData();
-
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-
-  const { mutateAsync: addToWishlist } = useAddToWishlist();
-  const { mutateAsync: copyCartToWishlist } = useCopyCartToWishlist();
-
-  const { data: session } = useSession();
-  const isAuthenticated = !!session;
-
-  const handleClose = () => {
-    if (isFunction(props.handleClose)) {
-      props.handleClose();
-    }
-  };
-
-  const handleAddToWishlist = async (wishlistId: string) => {
-    if (props.productId) {
-      try {
-        const wishlistLinesInput: WishlistLinesInput = {
-          Id: wishlistId,
-          ProductListLines: [],
-        };
-
-        wishlistLinesInput.ProductListLines.push({
-          ProductListId: wishlistId,
-          ProductId: props.productId,
-          Quantity: 1,
-          UnitOfMeasure: "ea",
-        });
-        await addToWishlist(wishlistLinesInput);
-        setNotification({
-          message: t("wishlistLineAddSuccess"),
-          severity: "success",
-        });
-        if (isFunction(props.onSuccess)) {
-          props.onSuccess();
-        }
-      } catch (error) {
-        setNotification({
-          message: t("wishlistLineAddFailed"),
-          severity: "error",
-        });
-      }
-    } else if (props.cart) {
-      try {
-        const copyCartToWishlistInput: CopyCartToWishlistInput = {
-          Id: wishlistId,
-          CartID: props.cart.Id,
-          IsRewrite: false,
-          IsQuantityAggregate: true,
-        };
-
-        await copyCartToWishlist(copyCartToWishlistInput);
-        setNotification({
-          message: t("wishlistCartCopySuccess"),
-          severity: "success",
-        });
-      } catch (error) {
-        setNotification({
-          message: t("wishlistCartCopyFailed"),
-          severity: "error",
-        });
-      }
-    }
-  };
-
-  return (
-    <Dialog
-      open={props.open}
-      onClose={handleClose}
-      aria-labelledby="form-dialog-title"
-    >
-      <DialogContent>
-        <Fragment>
-          <DashboardHeader
-            title="Account.Wishlists.heading"
-            Icon={MdFavorite}
-            href=""
-            buttonText=""
-            buttons={
-              isAuthenticated && (
-                <CreateWishlistButton path="Account.Wishlists.btnCreateNewList" />
-              )
-            }
-          />
-          {isAuthenticated && !isLoading ? (
-            wishlists && wishlists.length > 0 ? (
-              wishlists?.map((wishlist: Wishlist) => (
-                <WishlistModalItem
-                  key={wishlist.Id}
-                  wishlist={wishlist}
-                  addToWishlist={handleAddToWishlist}
-                />
-              ))
-            ) : (
-              <NoRecords message="Account.Wishlists.noWishlists" />
-            )
-          ) : (
-            <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />
-          )}
-        </Fragment>
-        <Grid container spacing={3}>
-          <Grid
-            item
-            sm={12}
-            xs={12}
-            sx={{
-              display: "flex",
-              justifyContent: "flex-start",
-              gap: 2,
-            }}
-          >
-            <Button
-              color="primary"
-              variant="outlined"
-              size="small"
-              onClick={handleClose}
-              sx={{ height: 30.75 }}
-            >
-              {t("btnCancel")}
-            </Button>
-          </Grid>
-        </Grid>
-      </DialogContent>
-    </Dialog>
-  );
-}