@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/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-v2/stories/story-item/index.ts

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

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

@@ -0,0 +1,24 @@
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/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-v2/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-v2/stories/story-viewer/index.ts

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

package/src/components-v2/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-v2/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-v2/subscribe-input/index.ts

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

package/src/components-v2/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,
+});

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

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

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

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

@@ -0,0 +1,55 @@
+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 "@evenicanpm/storefront-core/src/components-v2/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-v2/topbar/top-bar.tsx

@@ -0,0 +1,115 @@
+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-v2/Typography";
+import BazaarMenu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/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-v2/utils/constants.ts

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

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

@@ -0,0 +1,161 @@
+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 "./components/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>
+  );
+}