@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/pages-v2/account/addresses/address-form.tsx

@@ -0,0 +1,289 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  InputLabel,
+  TextField,
+  MenuItem,
+  Select,
+  OutlinedInput,
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useLocale, useTranslations } from "next-intl";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { useRouter } from "next/navigation";
+// Forms
+import { useFormik } from "formik";
+import { z } from "zod";
+import { withZodSchema } from "formik-validator-zod";
+// API and Interfaces
+import { Address } from "@/api-manager/schemas/address.schema";
+import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import getCountries from "@/api-manager/services/address/queries/get-countries";
+import getStates from "@/api-manager/services/address/queries/get-states";
+import useCreateAddress from "@/api-manager/services/address/mutations/create-address";
+import useUpdateAddress from "@/api-manager/services/address/mutations/update-address";
+
+// =============================================================
+type Props = { address: Address };
+// =============================================================
+export default function AddressForm({ address }: Props) {
+  const [tn, t] = ["Account.Addresses", "Address"].map(useTranslations);
+  const { setNotification } = useNotification();
+  const router = useRouter();
+  const locale = useLocale();
+
+  const { data: countries } = getCountries.useData({ locale });
+  const defaultCountry = countries?.find(
+    (c) => c.CountryRegionId === address?.ThreeLetterISORegionName,
+  );
+  const [selectedCountry, setSelectedCountry] =
+    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
+  const { data: states } = getStates.useData({
+    countryId: selectedCountry?.CountryRegionId,
+  });
+
+  const { mutateAsync: createAddress } = useCreateAddress();
+  const { mutateAsync: updateAddress } = useUpdateAddress();
+
+  React.useEffect(() => {
+    if (!selectedCountry && defaultCountry) {
+      setSelectedCountry(defaultCountry);
+    }
+  }, [defaultCountry, selectedCountry]);
+
+  const FormSchema = z.object({
+    Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
+    Street: z
+      .string()
+      .nonempty(t("Validation.required", { field: t("street") })),
+    City: z.string().nonempty(t("Validation.required", { field: t("city") })),
+    State: z.string().nonempty(t("Validation.required", { field: t("state") })),
+    ZipCode: z
+      .string()
+      .nonempty(t("Validation.required", { field: t("zipCode") })),
+    Country: z
+      .string()
+      .nonempty(t("Validation.required", { field: t("country") })),
+    Phone: z.string().optional().default(""),
+  });
+  type FormSchemaType = z.infer<typeof FormSchema>;
+
+  const handleSubmit = async (values: FormSchemaType) => {
+    let newAddress: Address = {
+      Name: values.Name,
+      Street: values.Street,
+      City: values.City,
+      State: values.State,
+      ZipCode: values.ZipCode,
+      TwoLetterISORegionName: selectedCountry?.ISOCode,
+      ThreeLetterISORegionName: selectedCountry?.CountryRegionId,
+      Phone: values.Phone || undefined,
+    };
+
+    try {
+      if (address?.Id && address?.Id !== "new") {
+        newAddress = { ...newAddress, Id: address?.Id };
+        await updateAddress(newAddress);
+      } else {
+        await createAddress(newAddress);
+      }
+      setNotification({
+        message: tn("addressSuccess"),
+        severity: "success",
+      });
+      router.push("/account/addresses");
+    } catch (error) {
+      setNotification({
+        message: tn("addressFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  const setValues = (address: Address) => {
+    return {
+      Name: address?.Name || "",
+      Street: address?.Street || "",
+      City: address?.City || "",
+      State: address?.State || "",
+      ZipCode: address?.ZipCode || "",
+      Country: address?.ThreeLetterISORegionName || "",
+      Phone: address?.Phone || "",
+    };
+  };
+
+  const intialValues = setValues(address);
+
+  const formik = useFormik<FormSchemaType>({
+    initialValues: intialValues,
+    onSubmit: handleSubmit,
+    validate: withZodSchema(FormSchema),
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <Grid container spacing={3}>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="Name"
+            fullWidth
+            autoComplete="off"
+            label={t("name")}
+            value={formik.values.Name}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.Name && Boolean(formik.errors.Name)}
+            helperText={formik.touched.Name && formik.errors.Name}
+            required
+          />
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="Street"
+            fullWidth
+            autoComplete="off"
+            label={t("street")}
+            value={formik.values.Street}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.Street && Boolean(formik.errors.Street)}
+            helperText={formik.touched.Street && formik.errors.Street}
+            required
+          />
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="City"
+            fullWidth
+            autoComplete="off"
+            label={t("city")}
+            value={formik.values.City}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.City && Boolean(formik.errors.City)}
+            helperText={formik.touched.City && formik.errors.City}
+            required
+          />
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <FormControl
+            fullWidth
+            size="small"
+            error={formik.touched.Country && Boolean(formik.errors.Country)}
+          >
+            <InputLabel required id="Country">
+              {t("country")}
+            </InputLabel>
+            <Select
+              labelId="Country"
+              name="Country"
+              input={<OutlinedInput label={t("country")} />}
+              value={formik.values.Country}
+              onChange={(event) => {
+                const countryId = event.target.value;
+
+                // Update selected country
+                const selected =
+                  countries?.find((c) => c.CountryRegionId === countryId) ||
+                  null;
+                setSelectedCountry(selected);
+
+                formik.setFieldValue("Country", countryId);
+                // Reset state field when country changes
+                formik.setFieldValue("State", "");
+              }}
+              onBlur={formik.handleBlur}
+              required
+            >
+              <MenuItem value="">Select Country</MenuItem>
+              {countries?.map(({ ShortName, CountryRegionId }, index) => (
+                <MenuItem value={CountryRegionId} key={index}>
+                  {ShortName}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.Country && formik.errors.Country && (
+              <Box
+                component="span"
+                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
+              >
+                {formik.errors.Country}
+              </Box>
+            )}
+          </FormControl>
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <FormControl
+            fullWidth
+            size="small"
+            error={formik.touched.State && Boolean(formik.errors.State)}
+          >
+            <InputLabel required id="State">
+              {t("state")}
+            </InputLabel>
+            <Select
+              labelId="State"
+              name="State"
+              input={<OutlinedInput label={t("state")} />}
+              value={formik.values.State}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              required
+            >
+              <MenuItem value="">Select a state</MenuItem>
+              {states?.map(({ StateName, StateId }, index) => (
+                <MenuItem value={StateId} key={index}>
+                  {StateName}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.State && formik.errors.State && (
+              <Box
+                component="span"
+                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
+              >
+                {formik.errors.State}
+              </Box>
+            )}
+          </FormControl>
+        </Grid>
+
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="ZipCode"
+            fullWidth
+            autoComplete="off"
+            label={t("zipCode")}
+            value={formik.values.ZipCode}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.ZipCode && Boolean(formik.errors.ZipCode)}
+            helperText={formik.touched.ZipCode && formik.errors.ZipCode}
+            required
+          />
+        </Grid>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <TextField
+            name="Phone"
+            fullWidth
+            autoComplete="off"
+            label={t("phone")}
+            value={formik.values.Phone}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.Phone && Boolean(formik.errors.Phone)}
+            helperText={formik.touched.Phone && formik.errors.Phone}
+            required
+          />
+        </Grid>
+      </Grid>
+      <Grid size={{ sm: 6, xs: 12 }} sx={{ mt: 3 }}>
+        <Button type="submit" variant="contained" color="primary">
+          {t("save")}
+        </Button>
+      </Grid>
+    </form>
+  );
+}

package/src/pages-v2/account/addresses/address-item.tsx

@@ -0,0 +1,104 @@
+import IconButton from "@mui/material/IconButton";
+import { Button, Box, Chip } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+// MUI ICON COMPONENTS
+import { MdEdit as Edit } from "react-icons/md";
+import { MdDelete as Delete } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM COMPONENT
+import TableRow from "../table-row";
+// API
+import useDeleteAddress from "@/api-manager/services/address/mutations/delete-address";
+import useUpdateUser from "@/api-manager/services/user/mutations/update-user";
+import { Address } from "@/api-manager/schemas/address.schema";
+
+interface Props {
+  address: Address;
+}
+
+export default function AddressListItem({ address }: Props) {
+  const router = useRouter();
+  const t = useTranslations("Account.Addresses");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: updateUser } = useUpdateUser();
+  const { mutateAsync: deleteAddress } = useDeleteAddress();
+
+  const setPrimaryAddress = (id: string) => {
+    updateUser({ AccountNumber: "", DefaultShippingAddressId: id });
+  };
+
+  const editAddress = (id: string) => {
+    router.push(`/account/addresses/${id}`);
+  };
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteAddress(id);
+      setNotification({
+        message: t("deleteAddressSuccess"),
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: t("deleteAddressFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  return (
+    <TableRow
+      sx={{
+        display: "grid",
+        gridTemplateColumns: "1fr 2fr 1fr 1.5fr", // Define equal column structure
+        alignItems: "center",
+        gap: 2,
+        padding: "10px 15px",
+      }}
+    >
+      <Paragraph ellipsis>{address?.Name}</Paragraph>
+      <Paragraph ellipsis>{address?.FullAddress}</Paragraph>
+      <Paragraph ellipsis>{address?.Phone}</Paragraph>
+
+      {/* Actions Column */}
+      <Box display="flex" alignItems="center" gap={1} justifySelf="end">
+        {address?.IsPrimary ? (
+          <Chip size="small" label={t("primaryFlag")} color="primary" />
+        ) : (
+          <Button
+            color="secondary"
+            variant="outlined"
+            size="small"
+            onClick={() => {
+              const rid = address.RecordId?.toString();
+              setPrimaryAddress(address.Id ?? rid ?? "");
+            }}
+          >
+            {t("btnPrimaryAddress")}
+          </Button>
+        )}
+
+        <IconButton
+          onClick={() => {
+            const rid = address.RecordId?.toString();
+            editAddress(address.Id ?? rid ?? "");
+          }}
+        >
+          <Edit fontSize="large" color="inherit" />
+        </IconButton>
+
+        <IconButton
+          onClick={() => {
+            const rid = address.RecordId?.toString();
+            handleDelete(address.Id ?? rid ?? "");
+          }}
+        >
+          <Delete fontSize="large" color="inherit" />
+        </IconButton>
+      </Box>
+    </TableRow>
+  );
+}

package/src/pages-v2/account/dashboard-header.tsx

@@ -0,0 +1,123 @@
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import { Box, Button, IconButton, Theme, styled } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+// ICON COMPONENTS
+import { MdMenu as Menu } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import SideNav from "@evenicanpm/storefront-core/src/components-v2/side-nav/index";
+import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENTS
+import Navigation from "./navigation";
+import { IconType } from "react-icons";
+
+// STYLED COMPONENT
+const StyledBox = styled("div")(({ theme }) => ({
+  display: "flex",
+  marginTop: theme.spacing(-2),
+  marginBottom: theme.spacing(3),
+  "& .headerHold": {
+    flexGrow: 1,
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  [theme.breakpoints.up("md")]: {
+    "& .sidenav": { display: "none" },
+  },
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+  },
+}));
+
+// ==============================================================
+
+type WithButtons = {
+  title: string;
+  titleMessage?: string;
+  buttons: ReactNode;
+  Icon: IconType;
+  href?: never;
+  buttonText?: never;
+};
+
+type WithGeneratedButton = {
+  title: string;
+  titleMessage?: string;
+  href?: string;
+  buttonText?: string;
+  Icon: IconType;
+  buttons?: ReactNode;
+};
+
+type Props = WithButtons | WithGeneratedButton;
+
+// ==============================================================
+
+export default function DashboardHeader({
+  title,
+  titleMessage,
+  buttons,
+  href,
+  buttonText,
+  Icon,
+}: Props) {
+  const t = useTranslations();
+  const isTablet = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(1025),
+  );
+
+  const GENERATED_BUTTON = href ? (
+    <Button
+      href={href}
+      color="primary"
+      LinkComponent={Link}
+      sx={{ bgcolor: "primary.light", px: 4 }}
+    >
+      {t(buttonText)}
+    </Button>
+  ) : null;
+
+  const HEADER_LINKS = (
+    <FlexBox gap={1} justifyContent="flex-end">
+      {buttons || GENERATED_BUTTON}
+    </FlexBox>
+  );
+
+  return (
+    <StyledBox>
+      <FlexBox mt={2} className="headerHold">
+        <FlexBox alignItems="center" gap={0.5}>
+          {Icon && (
+            <IconButton color="primary">
+              <Icon />
+            </IconButton>
+          )}
+          <H2 my={0} lineHeight={1} ellipsis>
+            {titleMessage ? titleMessage : t(title)}
+          </H2>
+        </FlexBox>
+
+        <FlexBox className="button-container" justifyContent="flex-end">
+          {!isTablet && HEADER_LINKS}
+        </FlexBox>
+
+        <div className="sidenav">
+          <SideNav
+            position="left"
+            handler={(close) => (
+              <IconButton onClick={close}>
+                <Menu fontSize="small" />
+              </IconButton>
+            )}
+          >
+            <Navigation />
+          </SideNav>
+        </div>
+      </FlexBox>
+
+      {isTablet ? <Box mt={2}>{HEADER_LINKS}</Box> : null}
+    </StyledBox>
+  );
+}

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

@@ -0,0 +1,87 @@
+"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/account/no-records.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+
+type Props = { message: string };
+
+export default function NoRecords({ message }: Props) {
+  const t = useTranslations();
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height="50vh"
+    >
+      <H4 color="grey.500">{t(message)}</H4>
+    </Box>
+  );
+}

package/src/pages-v2/account/orders/icons/delivery.tsx

@@ -0,0 +1,14 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Delivery = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 32 32">
+    <path d="M24.0531 1.69349L23.7031 2.33374C23.5704 2.57647 23.3708 2.77603 23.1281 2.90874L22.4878 3.25874C22.4584 3.27482 22.4339 3.29852 22.4167 3.32735C22.3996 3.35619 22.3906 3.38909 22.3906 3.42262C22.3906 3.45614 22.3996 3.48905 22.4167 3.51788C22.4339 3.54671 22.4584 3.57041 22.4878 3.58649L23.1281 3.93649C23.3708 4.0692 23.5704 4.26876 23.7031 4.51149L24.0531 5.15174C24.0691 5.18122 24.0928 5.20583 24.1217 5.22297C24.1506 5.24011 24.1835 5.24916 24.2171 5.24916C24.2506 5.24916 24.2836 5.24011 24.3124 5.22297C24.3413 5.20583 24.365 5.18122 24.3811 5.15174L24.7311 4.51149C24.8639 4.26884 25.0634 4.0693 25.3061 3.93649L25.9463 3.58649C25.9757 3.57041 26.0003 3.54671 26.0174 3.51788C26.0345 3.48905 26.0435 3.45614 26.0435 3.42262C26.0435 3.38909 26.0345 3.35619 26.0174 3.32735C26.0003 3.29852 25.9757 3.27482 25.9463 3.25874L25.3061 2.90874C25.0634 2.77593 24.8639 2.5764 24.7311 2.33374L24.3811 1.69349C24.365 1.66401 24.3413 1.63941 24.3124 1.62226C24.2836 1.60512 24.2506 1.59607 24.2171 1.59607C24.1835 1.59607 24.1506 1.60512 24.1217 1.62226C24.0928 1.63941 24.0691 1.66401 24.0531 1.69349Z" />
+    <path d="M27.4868 6.42496L27.2408 6.87496C27.1475 7.04555 27.0072 7.18577 26.8366 7.27896L26.3866 7.52496C26.3659 7.53626 26.3487 7.55292 26.3367 7.57317C26.3247 7.59343 26.3184 7.61654 26.3184 7.64008C26.3184 7.66363 26.3247 7.68674 26.3367 7.70699C26.3487 7.72725 26.3659 7.7439 26.3866 7.75521L26.8366 8.00121C27.0072 8.0944 27.1475 8.23462 27.2408 8.40521L27.4868 8.85521C27.4981 8.87593 27.5147 8.89323 27.535 8.90528C27.5552 8.91733 27.5784 8.9237 27.602 8.9237C27.6255 8.9237 27.6487 8.91733 27.6689 8.90528C27.6892 8.89323 27.7058 8.87593 27.7171 8.85521L27.9631 8.40521C28.0562 8.23422 28.1964 8.09357 28.3671 7.99996L28.8171 7.75396C28.8377 7.74265 28.855 7.726 28.867 7.70574C28.879 7.68549 28.8853 7.66238 28.8853 7.63883C28.8853 7.61529 28.879 7.59218 28.867 7.57192C28.855 7.55167 28.8377 7.53501 28.8171 7.52371L28.3671 7.27771C28.1966 7.18443 28.0564 7.04423 27.9631 6.87371L27.7171 6.42371C27.7057 6.40305 27.689 6.38584 27.6687 6.37389C27.6483 6.36195 27.6252 6.35571 27.6016 6.35584C27.578 6.35596 27.5549 6.36245 27.5347 6.37462C27.5145 6.38678 27.498 6.40417 27.4868 6.42496Z" />
+    <path d="M22.72 27.117C22.2155 26.7778 21.395 26.9463 20.616 27.144C20.3484 27.2145 20.0852 27.3007 19.8278 27.402C19.3339 27.6067 18.806 27.717 18.2715 27.727C17.6673 27.717 16.961 27.5575 16.5123 27.8078C16.4668 27.8331 16.4165 27.8487 16.3647 27.8536C16.3129 27.8584 16.2606 27.8524 16.2112 27.8359C16.1618 27.8195 16.1164 27.7929 16.0779 27.7579C16.0393 27.723 16.0084 27.6803 15.9873 27.6328C15.951 27.541 15.9505 27.439 15.9859 27.3469C16.0214 27.2548 16.0901 27.1794 16.1785 27.1355C16.8433 26.7855 17.6623 27.0173 18.3395 27.1148C18.742 27.1795 19.1513 27.1907 19.5568 27.1483C19.6799 27.1304 19.7915 27.066 19.8685 26.9684C19.9456 26.8707 19.9823 26.7472 19.971 26.6233C19.9497 26.5028 19.8999 26.3892 19.8257 26.2919C19.7515 26.1946 19.6551 26.1165 19.5445 26.064C19.1475 25.8553 17.709 25.464 16.7735 25.273C15.285 24.9739 13.739 25.1859 12.386 25.8748C11.6408 26.2278 9.50876 27.6795 8.98101 28.504C8.90689 28.6092 8.8747 28.7382 8.89076 28.8658C8.94426 29.3465 10.3875 30.7326 10.8303 30.8761C10.9111 30.9062 10.9981 30.9159 11.0836 30.9044C11.1692 30.8929 11.2505 30.8605 11.3205 30.8101C11.5873 30.6386 12.174 30.0625 12.765 29.855C13.8595 29.47 15.6748 29.8025 16.5585 29.7815C17.8585 29.7503 22.201 28.6373 22.8718 28.0315C23.1388 27.7913 23.0415 27.333 22.72 27.117Z" />
+    <path d="M13.1345 8.16596L13.8048 5.48721H17.1298L17.799 8.16596H24.5925L21.679 5.69996C21.5161 5.56197 21.3095 5.48623 21.096 5.48621H9.8383C9.62479 5.48623 9.41822 5.56197 9.2553 5.69996L6.3418 8.16596H13.1345Z" />
+    <path d="M17.8989 8.91602V14.55C17.899 14.6265 17.8796 14.7017 17.8426 14.7686C17.8056 14.8355 17.7523 14.8919 17.6875 14.9325C17.6228 14.9731 17.5488 14.9967 17.4725 15.0009C17.3961 15.0051 17.32 14.9898 17.2512 14.9565L15.7702 14.13C15.6883 14.0597 15.584 14.0211 15.476 14.0211C15.3681 14.0211 15.2638 14.0597 15.1819 14.13L13.6854 14.9598C13.6166 14.9926 13.5406 15.0075 13.4645 15.003C13.3884 14.9986 13.3146 14.9749 13.2501 14.9342C13.1856 14.8936 13.1325 14.8373 13.0956 14.7705C13.0588 14.7038 13.0395 14.6288 13.0394 14.5525V8.91602H5.95117V22.7145C5.95117 22.9143 6.03052 23.1059 6.17178 23.2472C6.31303 23.3885 6.50462 23.468 6.70442 23.468H24.2347C24.4345 23.468 24.6262 23.3886 24.7675 23.2473C24.9088 23.106 24.9882 22.9144 24.9882 22.7145V8.91602H17.8989Z" />
+  </svg>,
+  "Delivery",
+);
+
+export default Delivery;

package/src/pages-v2/account/orders/icons/package-box.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const PackageBox = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 32 32">
+    <path d="M7.40692 11.3465L20.5779 4.304L16.0004 2L2.41992 8.836L7.40692 11.3465Z" />
+    <path d="M24.5773 6.3175L11.4062 13.36L15.9998 15.6725L29.5803 8.83601L24.5773 6.3175Z" />
+    <path d="M15.625 16.3275L11 13.9995V19.1145L9 17.101H7V11.986L2 9.46948V23.1415L15.625 30V16.3275Z" />
+    <path d="M16.375 16.3275V30L30 23.1415V9.46948L16.375 16.3275Z" />
+  </svg>,
+  "PackageBox",
+);
+
+export default PackageBox;

package/src/pages-v2/account/orders/icons/truck-filled.tsx

@@ -0,0 +1,14 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const TruckFilled = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 36 36">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.1302 7.5H22.4118C22.8992 7.5 23.2941 7.89504 23.2941 8.38236V10.1471H28.322C28.8735 10.1471 29.3583 10.5127 29.5098 11.043L31.0223 16.3368C31.1997 16.368 31.3647 16.4529 31.4937 16.5819L32.7416 17.8298C32.907 17.9952 33 18.2198 33 18.4538V24.2648C33 24.752 32.6049 25.1471 32.1177 25.1471H29.4707C29.4707 27.0963 27.8904 28.6764 25.9412 28.6764C23.9919 28.6764 22.4118 27.0963 22.4118 25.1471H13.5882C13.5882 27.0963 12.0081 28.6764 10.0588 28.6764C8.10959 28.6764 6.52941 27.0963 6.52941 25.1471H3.88236C3.39504 25.1471 3 24.752 3 24.2648V9.63019C3 9.39618 3.09296 9.17175 3.25844 9.00627L4.50627 7.75843C4.67175 7.59295 4.89618 7.5 5.1302 7.5ZM29.1833 16.3236L27.9227 11.9118H23.2941V15.4412C23.2941 15.9285 23.6892 16.3236 24.1764 16.3236H29.1833ZM25.9412 23.3823C26.9159 23.3823 27.7059 24.1725 27.7059 25.1471C27.7059 26.1218 26.9159 26.9118 25.9412 26.9118C24.9666 26.9118 24.1764 26.1218 24.1764 25.1471C24.1764 24.1725 24.9666 23.3823 25.9412 23.3823ZM8.29412 25.1471C8.29412 26.1218 9.08421 26.9118 10.0588 26.9118C11.0334 26.9118 11.8235 26.1218 11.8235 25.1471C11.8235 24.1725 11.0334 23.3823 10.0588 23.3823C9.08421 23.3823 8.29412 24.1725 8.29412 25.1471Z"
+    />
+  </svg>,
+  "TruckFilled",
+);
+
+export default TruckFilled;