@evenicanpm/storefront-core 1.0.4 → 1.0.6

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

@@ -1,299 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid2";
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import TextField from "@mui/material/TextField";
-import DialogContent from "@mui/material/DialogContent";
-// React hook form
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import z from "zod";
-// LOCAL CUSTOM COMPONENT
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { Address } from "@/api-manager/schemas/address.schema";
-import { useTranslations } from "use-intl";
-import { Box, FormControl, InputLabel, MenuItem, Select } from "@mui/material";
-import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
-import getStates from "@/api-manager/services/address/queries/get-states";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { merge } from "lodash";
-
-interface Props {
-  address?: Address;
-  countries: CountryRegionInfo[];
-  cartId: string;
-  open: boolean;
-  handleClose: () => void;
-  handleCreateOrUpdateAddress: (address: Address) => void;
-  isGuest: boolean;
-}
-
-type AddressFormInput = {
-  name: string;
-  street: string;
-  city: string;
-  state: string;
-  zipCode: string;
-  country: string;
-  phone: string | null;
-};
-
-export default function NewAddressForm({
-  address,
-  countries,
-  isGuest,
-  open,
-  handleClose,
-  handleCreateOrUpdateAddress,
-}: Props) {
-  const t = useTranslations("Address");
-  const defaultCountry = React.useMemo(
-    () =>
-      countries.find(
-        (c) => c.CountryRegionId === (address?.ThreeLetterISORegionName ?? ""),
-      ),
-    [countries, address],
-  );
-
-  const [selectedCountry, setSelectedCountry] =
-    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
-
-  const { data: states } = getStates.useData({
-    countryId: selectedCountry?.CountryRegionId,
-  });
-
-  React.useEffect(() => {
-    if (address && defaultCountry) {
-      setSelectedCountry(defaultCountry);
-    }
-  }, [address, defaultCountry]);
-
-  const validationSchema = z.object({
-    name: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("name") }) }),
-    street: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("street") }) }),
-    city: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("city") }) }),
-    state: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("state") }) }),
-    zipCode: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("zipCode") }) }),
-    country: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("country") }) }),
-    phone: z.string().optional().default(""),
-  });
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    control,
-    setValue,
-    reset,
-  } = useForm<AddressFormInput>({
-    defaultValues: {
-      name: "",
-      street: "",
-      city: "",
-      state: "0",
-      zipCode: "",
-      phone: "",
-      country: selectedCountry?.CountryRegionId || "",
-    },
-    resolver: zodResolver(validationSchema),
-  });
-
-  React.useEffect(() => {
-    setValue("country", selectedCountry?.CountryRegionId || "");
-    if (!address) {
-      setValue("state", "0");
-    }
-  }, [selectedCountry, setValue, address]);
-
-  React.useEffect(() => {
-    if (!open) {
-      reset();
-      setSelectedCountry(defaultCountry ?? null);
-    }
-  }, [defaultCountry, open, reset]);
-
-  React.useEffect(() => {
-    if (address) {
-      setValue("name", address.Name || "");
-      setValue("street", address.Street || "");
-      setValue("city", address.City || "");
-      setValue("state", address.State || "0");
-      setValue("zipCode", address.ZipCode || "");
-      setValue("phone", address.Phone || "");
-      setValue("country", address.ThreeLetterISORegionName || "");
-    } else {
-      reset();
-    }
-  }, [address, setValue, reset]);
-
-  const onFormSubmit = (data: AddressFormInput) => {
-    const tempAddress: Address = {
-      Name: data.name,
-      Street: data.street,
-      City: data.city,
-      State: data.state,
-      ZipCode: data.zipCode,
-      TwoLetterISORegionName: selectedCountry?.ISOCode,
-      ThreeLetterISORegionName: selectedCountry?.CountryRegionId,
-      Phone: data.phone || undefined,
-    };
-    const newAddress = merge({}, address || {}, tempAddress);
-    handleCreateOrUpdateAddress(newAddress);
-    handleClose();
-  };
-
-  return (
-    <Dialog open={open} onClose={handleClose}>
-      <DialogContent>
-        <H5 mb={4}>{t("title")}</H5>
-        {isGuest && !address && (
-          <FlexBox justifyContent="center" mb={2}>
-            <Paragraph color={(theme) => theme.palette.error.main}>
-              {t("guestCartAddressWarning")}
-            </Paragraph>
-          </FlexBox>
-        )}
-        <Box component="form" onSubmit={handleSubmit(onFormSubmit)}>
-          <Grid container spacing={3}>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("name")}
-                label={t("name")}
-                fullWidth
-                error={!!errors.name}
-                helperText={errors.name?.message}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("street")}
-                label={t("street")}
-                fullWidth
-                error={!!errors.street}
-                helperText={errors.street?.message}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("city")}
-                label={t("city")}
-                fullWidth
-                error={!!errors.city}
-                helperText={errors.city?.message}
-              />
-            </Grid>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <FormControl fullWidth size={"small"} error={!!errors.country}>
-                <InputLabel id="country-label">{t("country")}</InputLabel>
-                <Controller
-                  name="country"
-                  control={control}
-                  render={({ field: { value } }) => (
-                    <Select
-                      labelId="country-label"
-                      value={value}
-                      onChange={(e) => {
-                        const cid = e.target.value as string;
-                        const sel =
-                          countries.find((c) => c.CountryRegionId === cid) ||
-                          null;
-                        setSelectedCountry(sel);
-                      }}
-                    >
-                      <MenuItem value="">Select country</MenuItem>
-                      {countries.map((c) => (
-                        <MenuItem
-                          key={c.CountryRegionId}
-                          value={c.CountryRegionId}
-                        >
-                          {c.ShortName}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  )}
-                />
-              </FormControl>
-            </Grid>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <FormControl fullWidth size={"small"} error={!!errors.state}>
-                <InputLabel id="state-label">{t("state")}</InputLabel>
-                <Controller
-                  name="state"
-                  control={control}
-                  render={({ field: { value, onChange } }) => (
-                    <Select
-                      labelId="state-label"
-                      value={value}
-                      onChange={onChange}
-                    >
-                      <MenuItem value="0">Select a state</MenuItem>
-                      {states &&
-                        states.length > 0 &&
-                        states.map(({ StateName, StateId }) => (
-                          <MenuItem key={StateId} value={StateId}>
-                            {StateName}
-                          </MenuItem>
-                        ))}
-                    </Select>
-                  )}
-                />
-              </FormControl>
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("zipCode")}
-                label={t("zipCode")}
-                fullWidth
-                error={!!errors.zipCode}
-                helperText={errors.zipCode?.message}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("phone")}
-                label={t("phone")}
-                fullWidth
-                error={!!errors.phone}
-                helperText={errors.phone?.message}
-              />
-            </Grid>
-            <Grid
-              size={{ sm: 6, xs: 12 }}
-              display="flex"
-              justifyContent="space-around"
-            >
-              <Button
-                type="submit"
-                color="primary"
-                variant="contained"
-                data-testid="new-address-btn"
-              >
-                {t("save")}
-              </Button>
-              <Button onClick={handleClose} color="primary" variant="outlined">
-                {t("cancel")}
-              </Button>
-            </Grid>
-          </Grid>
-        </Box>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/pages-v2/quickorder/quick-order-form.tsx

@@ -1,346 +0,0 @@
-"use client";
-
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import {
-  Button,
-  Container,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from "@mui/material";
-import QuickOrderRow, { QuickOrderRowData } from "./quick-order-row";
-import { useCallback, useEffect, useState } from "react";
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
-import useSearchProducts from "@/api-manager/services/product/mutations/search-products";
-import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
-import {
-  H2,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
-import OrderUpload, { OrderUploadItem } from "./order-upload";
-import { useTranslations } from "next-intl";
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-
-export enum RowError {
-  ProductNotFound,
-  InvalidQuantity,
-  OutOfStock,
-  None,
-}
-
-export default function QuickOrderForm() {
-  const [rows, setRows] = useState<QuickOrderRowData[]>([]);
-  const { mutateAsync: searchProducts } = useSearchProducts();
-  const { mutateAsync: addToCart } = useAddToCart();
-  const { data: cart } = getCart.useData();
-
-  const t = useTranslations("QuickOrder");
-
-  const _generateEmptyRow = (id: number) => {
-    return {
-      id,
-      value: "",
-      quantity: "1",
-      product: null,
-      rowError: RowError.None,
-    };
-  };
-
-  // initialize the table with 3 empty rows
-  const _tableInit = useCallback(() => {
-    const numEmptyRows = 3;
-    const rows: QuickOrderRowData[] = [];
-    for (let i = 0; i < numEmptyRows; i++) {
-      rows.push(_generateEmptyRow(i + 1));
-    }
-    setRows(rows);
-  }, []);
-
-  const _handleRowDelete = (id: number) => {
-    const currentRows = [...rows];
-    const idx = currentRows.findIndex((r) => r.id === id);
-    if (idx > -1) {
-      currentRows.splice(idx, 1);
-      const newRowId = currentRows[currentRows.length - 1].id + 1;
-      if (currentRows.length < 3) {
-        currentRows.push(_generateEmptyRow(newRowId));
-      }
-      setRows(currentRows);
-    }
-  };
-
-  const _handleRowUpdate = async (
-    id: number,
-    value: string,
-    quantity: string,
-  ) => {
-    const currentRows = [...rows];
-    const idx = currentRows.findIndex((row) => row.id === id);
-
-    // if value changes and is beyond the min characters, do a search for the product
-    let product = currentRows[idx].product;
-    let foundProduct = false;
-    if (currentRows[idx].value !== value) {
-      currentRows[idx].value = value;
-      const response = await searchProductByRow(id, value);
-      product = (response && response[0]) || null;
-    }
-    foundProduct = !!product;
-    currentRows[idx] = _generateRowData(
-      product,
-      id,
-      value,
-      foundProduct,
-      quantity,
-    );
-    setRows(currentRows);
-  };
-
-  const searchProductByRow = async (_id: number, searchText: string) => {
-    // call getProductSearchResults with a single entry in an array
-    const minQueryLength = 5;
-    let response;
-    if (searchText.length >= minQueryLength) {
-      response = await getProductSearchResults([searchText]);
-    }
-    return response;
-  };
-
-  const getProductSearchResults = useCallback(
-    async (itemIds: string[]) => {
-      // API call to retrieve matching products from database
-      const results = await searchProducts({ itemIds });
-      return results;
-    },
-    [searchProducts],
-  );
-
-  const searchProductsMultiple = useCallback(
-    async (itemIds: string[]) => {
-      // call getProductSearchResults for all item ids
-      let response;
-      const minQueryLength = 5;
-      const validItemIds = itemIds.filter((it) => it.length >= minQueryLength);
-      if (validItemIds) {
-        response = await getProductSearchResults(validItemIds);
-      }
-      return response;
-    },
-    [getProductSearchResults],
-  );
-
-  const _generateRowData = useCallback(
-    (
-      product: ProductSearchResult | null,
-      rowId: number,
-      searchText: string,
-      foundProduct: boolean,
-      quantity: string,
-    ) => {
-      let rowError = RowError.None;
-      if (
-        Number.isNaN(Number(quantity)) ||
-        Number(quantity) < 1 ||
-        !Number.isInteger(Number(quantity))
-      ) {
-        rowError = RowError.InvalidQuantity;
-      } else if (!foundProduct) {
-        rowError = RowError.ProductNotFound;
-      }
-      // TODO: Out of Stock
-      const row: QuickOrderRowData = {
-        ..._generateEmptyRow(rowId),
-        product: foundProduct ? product : null,
-        value: searchText,
-        quantity: quantity.toString(),
-        rowError: rowError,
-      };
-      return row;
-    },
-    [],
-  );
-
-  const _handleAddRows = () => {
-    const currentRows = [...rows];
-
-    const maxRowId = currentRows.reduce(
-      (max, row) => (row.id > max ? row.id : max),
-      0,
-    );
-    const newRowId = maxRowId + 1;
-    currentRows.push(_generateEmptyRow(newRowId));
-    currentRows.push(_generateEmptyRow(newRowId + 1));
-
-    setRows(currentRows);
-  };
-
-  const _generateFile = () => {
-    if (rows.length === 0) return;
-
-    const header = "SKU,Quantity\n";
-
-    // parse data into CSV format
-    const csvContent =
-      "data:text/csv;charset=utf-8," +
-      header +
-      rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
-    const encodedUri = encodeURI(csvContent);
-    const link = document.createElement("a");
-    link.setAttribute("href", encodedUri);
-    link.setAttribute("download", "quick_order.csv");
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  const _generateRow = (row: QuickOrderRowData, isLast: boolean) => {
-    return (
-      <QuickOrderRow
-        key={row.id}
-        id={row.id}
-        value={row.value}
-        quantity={row.quantity}
-        product={row.product}
-        onRowDelete={_handleRowDelete}
-        onRowChange={_handleRowUpdate}
-        onAddRows={_handleAddRows}
-        isLastRow={isLast}
-        rowError={row.rowError}
-      />
-    );
-  };
-
-  const handleAddToCart = async () => {
-    // add all rows that have a RowError of type None with requested quantities
-    if (!cart) return;
-
-    const products = rows
-      .filter((row) => row.product && row.rowError === RowError.None)
-      .map((productRow) => ({
-        ProductId: Number(productRow.product?.RecordId),
-        Quantity: Number(productRow.quantity),
-      }));
-    if (products.length > 0) {
-      await addToCart({
-        cartId: cart.Id,
-        version: cart.Version,
-        cartLine: products,
-      });
-      _tableInit();
-    }
-  };
-
-  const handleUploadedItems = useCallback(
-    async (items: OrderUploadItem[]) => {
-      const itemIds = items.map((it) => it.itemId.toString());
-      const response = await searchProductsMultiple(itemIds);
-
-      // add items to table
-      let currRows = [...rows];
-      const idx = currRows.findIndex((r) => !r.value);
-      if (idx > -1) {
-        currRows = currRows.slice(0, idx);
-      }
-      let rowId =
-        currRows.reduce((max, row) => (row.id > max ? row.id : max), 0) + 1;
-
-      items.forEach((it) => {
-        const product = response?.find((r) => {
-          const itemId = it.itemId.toString().toLowerCase();
-          const searchText = r.ItemId?.toLowerCase();
-          return itemId === searchText;
-        });
-        const qty = it.qty || 1;
-        const rowData = _generateRowData(
-          product || null,
-          rowId++,
-          it.itemId,
-          !!product,
-          qty.toString(),
-        );
-        currRows.push(rowData);
-      });
-      while (currRows.length < 3) {
-        currRows.push({ ..._generateEmptyRow(rowId++) });
-      }
-      setRows(currRows);
-    },
-    [_generateRowData, rows, searchProductsMultiple],
-  );
-
-  useEffect(() => {
-    _tableInit();
-  }, [_tableInit]);
-
-  return (
-    <Container>
-      <BorderShadowCard>
-        <FlexBox justifyContent="left" px={3}>
-          <H2>{t("title")}</H2>
-        </FlexBox>
-        <FlexBox justifyContent="left" px={3}>
-          <Span>{t("entryBySku")}</Span>
-        </FlexBox>
-      </BorderShadowCard>
-      <BorderShadowCard sx={{ padding: 0 }}>
-        <TableContainer sx={{ borderRadius: "4px" }}>
-          <Table>
-            <TableHead sx={{ backgroundColor: "#323337" }}>
-              <TableRow>
-                <TableCell sx={{ color: "white", width: { xs: "30%" } }}>
-                  {t("Table.itemNo")}
-                </TableCell>
-                <TableCell sx={{ color: "white", width: { xs: "20%" } }}>
-                  {t("Table.quantity")}
-                </TableCell>
-                <TableCell sx={{ color: "white" }}>
-                  {t("Table.itemName")}
-                </TableCell>
-                <TableCell
-                  sx={{
-                    color: "white",
-                    display: { xs: "none", sm: "table-cell" },
-                  }}
-                >
-                  {t("Table.price")}
-                </TableCell>
-                <TableCell sx={{ color: "white" }}>
-                  {t("Table.delete")}
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((r, i) => _generateRow(r, i === rows.length - 1))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </BorderShadowCard>
-      <BorderShadowCard>
-        <FlexBox sx={{ justifyContent: "center", gap: { xs: 2, sm: 20 } }}>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={handleAddToCart}
-          >
-            {t("addToCartBtn")}
-          </Button>
-          <Button variant="contained" color="secondary" onClick={_tableInit}>
-            {t("resetFormBtn")}
-          </Button>
-          <Button variant="contained" color="secondary" onClick={_generateFile}>
-            {t("downloadFileBtn")}
-          </Button>
-        </FlexBox>
-      </BorderShadowCard>
-      <BorderShadowCard>
-        <FlexBox justifyContent="center" gap={2} flexDirection="column" px={2}>
-          <OrderUpload onUploadItems={handleUploadedItems} />
-        </FlexBox>
-      </BorderShadowCard>
-    </Container>
-  );
-}