@evenicanpm/storefront-core 1.0.4 → 1.0.6

package/src/pages-v2/account/navigation.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import { Fragment } from "react";
-import { useTranslations } from "next-intl";
-
-// ICON COMPONENTS
-import {
-  MdOutlineShoppingBag as ShoppingBagOutlined,
-  MdFavoriteBorder as FavoriteBorder,
-  MdPerson as Person,
-  MdPlace as Place,
-} from "react-icons/md";
-
-// GLOBAL CUSTOM COMPONENTS
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-import {
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-// API
-import getUser from "@/api-manager/services/user/queries/get-user";
-import getUserCounts from "@/api-manager/services/user/queries/get-user-counts";
-
-// STYLED COMPONENTS
-import { MainContainer, StyledNavLink } from "./styles";
-
-const MENU_ITEMS = [
-  {
-    title: "DASHBOARD",
-    list: [
-      {
-        href: "/account/orders",
-        title: "orders",
-        Icon: ShoppingBagOutlined,
-        count: 0,
-      },
-      { href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
-    ],
-  },
-  {
-    title: "ACCOUNT SETTINGS",
-    list: [
-      { href: "/account/profile", title: "profile", Icon: Person },
-      { href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
-    ],
-  },
-];
-
-export default function Navigation() {
-  const pathname = usePathname();
-  const t = useTranslations("Account.Menu");
-
-  const { data: user } = getUser.useData();
-  const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
-
-  MENU_ITEMS[0].list[0].count = counts?.orderCount;
-  MENU_ITEMS[1].list[1].count = counts?.addressCount;
-
-  return (
-    <MainContainer>
-      {MENU_ITEMS.map((item) => (
-        <Fragment key={item.title}>
-          <Paragraph p="26px 30px 1rem" color="grey.600" fontSize={12}>
-            {item.title}
-          </Paragraph>
-
-          {item.list.map(({ Icon, count, href, title }) => (
-            <StyledNavLink
-              href={href}
-              key={title}
-              isCurrentPath={pathname.includes(href)}
-            >
-              <FlexBox alignItems="center" gap={1}>
-                <Icon color="inherit" fontSize="large" className="nav-icon" />
-                <Span>{t(title)}</Span>
-              </FlexBox>
-
-              <Span>{count}</Span>
-            </StyledNavLink>
-          ))}
-        </Fragment>
-      ))}
-    </MainContainer>
-  );
-}

package/src/pages-v2/checkout/checkout-alt-form/address-card.tsx

@@ -1,76 +0,0 @@
-import { ModeEditOutline, DeleteOutline } from "@mui/icons-material";
-import { Card, IconButton } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import { Address } from "@/api-manager/schemas/address.schema";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import {
-  H6,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-interface Props {
-  address: Address;
-  isCartAddress: boolean;
-  hideControls?: boolean;
-  onEdit?: () => void;
-  onSelect?: () => void;
-  onDelete?: () => void;
-}
-
-export default function AddressCard({
-  address,
-  isCartAddress,
-  hideControls,
-  onEdit,
-  onSelect,
-  onDelete,
-}: Props) {
-  return (
-    <Grid onClick={() => onSelect?.()}>
-      <Card
-        sx={{
-          padding: 2,
-          boxShadow: "none",
-          cursor: onSelect ? "pointer" : "default",
-          border: "1px solid",
-          position: "relative",
-          backgroundColor: "grey.100",
-          borderColor: isCartAddress ? "secondary.main" : "transparent",
-        }}
-      >
-        {!hideControls && (
-          <FlexBox position="absolute" top={5} right={5}>
-            <IconButton
-              size="small"
-              onClick={(e) => {
-                e.stopPropagation();
-                onEdit?.();
-              }}
-            >
-              <ModeEditOutline fontSize="inherit" />
-            </IconButton>
-            <IconButton
-              size="small"
-              color="error"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete?.();
-              }}
-              disabled={isCartAddress}
-            >
-              <DeleteOutline fontSize="inherit" />
-            </IconButton>
-          </FlexBox>
-        )}
-        <H6 mb={0.5}>{address.Name}</H6>
-        <Paragraph color="grey.700">{address.Street}</Paragraph>
-        <Paragraph color="grey.700">{address.City}</Paragraph>
-        <Paragraph color="grey.700">
-          {address.State}, {address.ThreeLetterISORegionName}
-        </Paragraph>
-        <Paragraph color="grey.700">{address.ZipCode}</Paragraph>
-        <Paragraph color="grey.700">{address.Phone}</Paragraph>
-      </Card>
-    </Grid>
-  );
-}

package/src/pages-v2/checkout/checkout-alt-form/customer-information.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-import TextField from "@mui/material/TextField";
-import useUpdateCart from "@/api-manager/services/cart/mutations/update-cart";
-import { useTranslations } from "next-intl";
-import { CheckoutStepComponentProps } from "./checkout-step";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import * as yup from "yup";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-
-export default function CustomerInformation(props: CheckoutStepComponentProps) {
-  const {
-    stepViewState,
-    cart: { Id: cartId, ReceiptEmail: email },
-    stepSubmissionState,
-    setStepSubmissionState,
-  } = props;
-  const { mutateAsync: updateCart } = useUpdateCart();
-  const formRef = React.useRef<HTMLFormElement>(null);
-  const t = useTranslations("Checkout.CustomerInformation");
-
-  const validationSchema = yup.object({
-    email: yup.string().email(t("emailInvalid")).required(t("emailRequired")),
-  });
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitted },
-    setValue,
-  } = useForm({
-    defaultValues: { email: email || "" },
-    resolver: yupResolver(validationSchema),
-  });
-
-  React.useEffect(() => {
-    setValue("email", email || "");
-  }, [email, setValue]);
-
-  const handleSave = React.useCallback(
-    (formData: { email: string }) => {
-      updateCart({
-        cart: { ReceiptEmail: formData.email, Id: cartId },
-      })
-        .then(() => {
-          props.handleStepCompletion && props.handleStepCompletion();
-          setStepSubmissionState("idle");
-        })
-        .catch(() => {
-          setStepSubmissionState("error");
-        });
-    },
-    [cartId, props, setStepSubmissionState, updateCart],
-  );
-
-  React.useEffect(() => {
-    if (stepSubmissionState === "submitting") {
-      handleSubmit(handleSave)();
-    }
-  }, [handleSave, handleSubmit, stepSubmissionState]);
-
-  React.useEffect(() => {
-    if (errors && isSubmitted) {
-      setStepSubmissionState("error");
-    }
-  }, [errors, isSubmitted, setStepSubmissionState]);
-  if (stepViewState === "preview") {
-    return (
-      <Box ml={2}>
-        <Paragraph>
-          {t("emailLabel")}: {email}
-        </Paragraph>
-      </Box>
-    );
-  }
-  return (
-    <form onSubmit={handleSubmit(handleSave)} ref={formRef}>
-      <Grid size={{ sm: 5, xs: 5 }}>
-        <TextField
-          {...register("email")}
-          fullWidth
-          sx={{ flexGrow: 1 }}
-          type="email"
-          name={"email"}
-          label={t("emailLabel")}
-          variant="outlined"
-          error={Boolean(!!errors.email && errors.email.message)}
-          helperText={errors.email?.message}
-        />
-      </Grid>
-    </form>
-  );
-}

package/src/pages-v2/checkout/checkout-alt-form/delivery-address.tsx

@@ -1,174 +0,0 @@
-import { useEffect, useState } from "react";
-import { useLocale, useTranslations } from "next-intl";
-import React from "react";
-import NewAddressForm from "./new-address-form";
-import { Address } from "@/api-manager/schemas/address.schema";
-import AddressCard from "./address-card";
-
-import getUser from "@/api-manager/services/user/queries/get-user";
-import useCreateAddress from "@/api-manager/services/address/mutations/create-address";
-import useUpdateAddress from "@/api-manager/services/address/mutations/update-address";
-import useDeleteAddress from "@/api-manager/services/address/mutations/delete-address";
-import getCountries from "@/api-manager/services/address/queries/get-countries";
-import useUpdateCart from "@/api-manager/services/cart/mutations/update-cart";
-import { CheckoutStepComponentProps } from "./checkout-step";
-import Grid from "@mui/material/Grid2";
-import useUpdateCartLines from "@/api-manager/services/cart/mutations/update-cart-lines";
-import { cloneDeep } from "lodash";
-
-export default function DeliveryAddress({
-  cart,
-  handleStepCompletion,
-  stepSubmissionState,
-  setStepSubmissionState,
-  stepViewState,
-}: CheckoutStepComponentProps) {
-  const t = useTranslations("Checkout.Address");
-  const locale = useLocale();
-
-  const { data: user, isLoading: userLoading } = getUser.useData();
-  const isGuest = !userLoading && !user?.RecordId;
-
-  const [addressList, setAddressList] = useState<Address[]>([]);
-  useEffect(() => {
-    if (!isGuest && user?.Addresses?.length) {
-      setAddressList(user.Addresses);
-    } else if (cart.ShippingAddress) {
-      setAddressList([cart.ShippingAddress]);
-    } else {
-      setAddressList([]);
-    }
-  }, [isGuest, user, cart.ShippingAddress]);
-
-  const { data: countries } = getCountries.useData({ locale });
-
-  const { mutateAsync: updateCart } = useUpdateCart();
-  const { mutateAsync: updateCartLines } = useUpdateCartLines();
-
-  const { mutateAsync: createAddress } = useCreateAddress();
-  const { mutateAsync: updateAddress } = useUpdateAddress();
-  const { mutateAsync: deleteAddress } = useDeleteAddress();
-
-  const [modalOpen, setModalOpen] = useState(false);
-  const [editAddress, setEditAddress] = useState<Address | undefined>(
-    undefined,
-  );
-  const openNew = () => {
-    setEditAddress(undefined);
-    setModalOpen(true);
-  };
-  const openEdit = (addr: Address) => {
-    setEditAddress(addr);
-    setModalOpen(true);
-  };
-  const closeModal = () => setModalOpen(false);
-
-  const saveToCart = async (address: Address) => {
-    const lines = cloneDeep(cart.CartLines ?? []).map((l) => ({
-      ...l,
-      DeliveryMode: "",
-    }));
-    await updateCartLines({
-      cartId: cart.Id,
-      cartLine: lines,
-      version: cart.Version,
-    });
-    await updateCart({ cart: { Id: cart.Id, ShippingAddress: address } });
-  };
-
-  const handleGuestFlow = async (address: Address) => {
-    await saveToCart(address);
-    setStepSubmissionState("submitting");
-    closeModal();
-  };
-
-  const handleAuthFlow = async (address: Address) => {
-    const isNew = !address.Id;
-    const saved = isNew
-      ? await createAddress(address)
-      : await updateAddress(address);
-    // Update local list
-    if (isNew) {
-      setAddressList((prev) => [...prev, saved]);
-    } else {
-      setAddressList((prev) =>
-        prev.map((a) => (a.Id === saved.Id ? saved : a)),
-      );
-    }
-    await saveToCart(saved);
-    if (isNew) setStepSubmissionState("submitting");
-    closeModal();
-  };
-
-  const handleSaveAddress = (address: Address) => {
-    return isGuest ? handleGuestFlow(address) : handleAuthFlow(address);
-  };
-
-  const handleDelete = async (address: Address) => {
-    if (!isGuest && address.Id) {
-      await deleteAddress(address.Id);
-    }
-    setAddressList((prev) => prev.filter((a) => a.Id !== address.Id));
-  };
-
-  useEffect(() => {
-    if (stepSubmissionState === "submitting") {
-      handleStepCompletion();
-      setStepSubmissionState("idle");
-    }
-  }, [stepSubmissionState, handleStepCompletion, setStepSubmissionState]);
-
-  if (stepViewState === "pending" || !countries) return null;
-  if (stepViewState === "preview") {
-    const sel = cart.ShippingAddress;
-    if (!sel) return null;
-    return <AddressCard address={sel} hideControls isCartAddress />;
-  }
-
-  return (
-    <Grid container spacing={2}>
-      <NewAddressForm
-        countries={countries}
-        open={modalOpen}
-        isGuest={isGuest}
-        address={editAddress}
-        cartId={cart.Id}
-        handleClose={closeModal}
-        handleCreateOrUpdateAddress={handleSaveAddress}
-      />
-
-      {addressList.map((addr) => (
-        <Grid key={addr.Id || addr.RecordId} size={{ md: 4, sm: 6, xs: 12 }}>
-          <AddressCard
-            address={addr}
-            isCartAddress={cart.ShippingAddress?.Id === addr.Id}
-            onEdit={() => openEdit(addr)}
-            onSelect={() => handleSaveAddress(addr)}
-            onDelete={() => handleDelete(addr)}
-          />
-        </Grid>
-      ))}
-
-      <Grid
-        size={{ md: 4, sm: 6, xs: 12 }}
-        onClick={openNew}
-        data-testid="addr-new"
-      >
-        <AddressCard
-          address={{
-            Id: "new",
-            Name: t("createNewAddress"),
-            Street: "",
-            City: "",
-            State: "",
-            ZipCode: "",
-            Phone: "",
-          }}
-          hideControls
-          isCartAddress={false}
-          onSelect={openNew}
-        />
-      </Grid>
-    </Grid>
-  );
-}

package/src/pages-v2/checkout/checkout-alt-form/edit-address-form.tsx

@@ -1,130 +0,0 @@
-import { useState } from "react";
-import Grid from "@mui/material/Grid2";
-import Dialog from "@mui/material/Dialog";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import DialogContent from "@mui/material/DialogContent";
-import { useFormik } from "formik";
-import * as yup from "yup";
-// GLOBAL CUSTOM COMPONENT
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-import { Address } from "./types";
-
-const validationSchema = yup.object({
-  address2: yup.string(),
-  name: yup.string().required("Name is required!"),
-  address1: yup.string().required("Address is required!"),
-  phone: yup.number().required("Phone is required!"),
-});
-
-// ================================================================
-interface Props {
-  active: boolean;
-  address: Address;
-  changeEditAddressId: () => void;
-  handleEditAddress: (id: number, data: Address) => void;
-}
-// ================================================================
-
-export default function EditAddressForm(props: Props) {
-  const { active, address, changeEditAddressId, handleEditAddress } = props;
-
-  const [openModal, setOpenModal] = useState(active);
-
-  const handleCloseModal = () => {
-    setOpenModal(false);
-    changeEditAddressId();
-  };
-
-  const initialValues = {
-    name: address.name,
-    phone: address.phone,
-    street1: address.street1,
-    street2: address.street2,
-  };
-
-  const { values, touched, errors, handleBlur, handleChange, handleSubmit } =
-    useFormik({
-      initialValues,
-      validationSchema,
-      onSubmit: (values) => {
-        handleEditAddress(address.id, { ...values, id: address.id });
-        handleCloseModal();
-      },
-    });
-
-  return (
-    <Dialog open={openModal} onClose={handleCloseModal} sx={{ zIndex: 99999 }}>
-      <DialogContent>
-        <H5 mb={4}>Edit Address Information</H5>
-
-        <form onSubmit={handleSubmit}>
-          <Grid container spacing={3}>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                fullWidth
-                name="name"
-                type="text"
-                label="Enter Your Name"
-                value={values.name}
-                onBlur={handleBlur}
-                onChange={handleChange}
-                helperText={touched.name && errors.name}
-                error={touched.name && Boolean(errors.name)}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                fullWidth
-                type="text"
-                name="street1"
-                label="Address line 1"
-                onBlur={handleBlur}
-                value={values.street1}
-                onChange={handleChange}
-                helperText={touched.street1 && errors.street1}
-                error={touched.street1 && Boolean(errors.street1)}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                fullWidth
-                type="text"
-                name="street2"
-                label="Address line 2"
-                onBlur={handleBlur}
-                value={values.street2}
-                onChange={handleChange}
-                helperText={touched.street2 && errors.street2}
-                error={touched.street2 && Boolean(errors.street2)}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                fullWidth
-                type="text"
-                name="phone"
-                label="Enter Your Phone"
-                onBlur={handleBlur}
-                value={values.phone}
-                onChange={handleChange}
-                helperText={touched.phone && errors.phone}
-                error={touched.phone && Boolean(errors.phone)}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <Button color="primary" variant="contained" type="submit">
-                Save
-              </Button>
-            </Grid>
-          </Grid>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}