@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/pages/cart/wrapper.tsx

@@ -1,30 +0,0 @@
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-export const Wrapper = styled(Card)(({ theme }) => ({
-  display: "flex",
-  overflow: "hidden",
-  alignItems: "center",
-  position: "relative",
-  borderRadius: "10px",
-  marginBottom: "1.5rem",
-  boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.paper,
-
-  "@media only screen and (max-width: 425px)": {
-    flexWrap: "wrap",
-    img: { height: "auto", minWidth: "100%" },
-  },
-  "& .img-wrapper": {
-    width: 150,
-    height: 150,
-    flexShrink: 0,
-    position: "relative",
-    backgroundColor: theme.palette.grey[200],
-
-    "@media only screen and (max-width: 425px)": {
-      width: "100%",
-      height: "auto",
-    },
-  },
-}));

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

@@ -1,73 +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 "@/components/_components/flex-box";
-import { H6, Paragraph } from "@/components/_components/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/checkout/checkout-alt-form/checkout-form.tsx

@@ -1,133 +0,0 @@
-"use client";
-// LOCAL CUSTOM COMPONENTS
-import DeliveryAddress from "./delivery-address";
-
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import CustomerInformation from "./customer-information";
-import { Box, Button } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import DeliveryOptions from "./delivery-options";
-import React from "react";
-import CheckoutStep from "./checkout-step";
-import PaymentDetails from "./payment-details";
-import useCheckout from "@/api-manager/services/cart/mutations/checkout";
-import { useQueryClient } from "@tanstack/react-query";
-import { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
-import { useRouter } from "next/navigation";
-import { PageSlug } from "@/lib/page-slugs";
-import { deleteCartCookie, setCartCookie } from "@/lib/cart-cookie-handler";
-import getChannelConfiguration from "@/api-manager/services/organization/queries/get-channel-configuration";
-import { useTranslations } from "next-intl";
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-import { useNotification } from "@/components/Notifications/use-notification";
-interface Props {
-  cart: Cart;
-}
-
-export default function CheckoutForm({ cart }: Props) {
-  const t = useTranslations("Checkout");
-  const [activeStep, setActiveStep] = React.useState<number>(1);
-  const { mutateAsync: placeOrder } = useCheckout();
-  const { setNotification } = useNotification();
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const { data: channelConfigurationData } = getChannelConfiguration.useData();
-  const isFormComplete = () => activeStep > steps.length;
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const steps = [
-    {
-      title: t("Steps.customerInformation"),
-      component: CustomerInformation,
-    },
-    { title: t("Steps.deliveryAddress"), component: DeliveryAddress },
-    { title: t("Steps.deliveryOptions"), component: DeliveryOptions },
-    { title: t("Steps.payment"), component: PaymentDetails },
-  ];
-  const handleStepChange = (step: number) => {
-    setActiveStep(step);
-  };
-
-  const handlePlaceOrder = async () => {
-    setIsSubmitting(true);
-    const cache = queryClient.getQueryCache();
-    const acceptResultCache = cache.get(
-      JSON.stringify(["paymentAcceptResult", cart.Id]),
-    );
-    const paymentAcceptResult = acceptResultCache?.state
-      .data as CardPaymentAcceptResult;
-    if (!paymentAcceptResult) {
-      return;
-    }
-
-    if (!paymentAcceptResult.TokenizedPaymentCard) {
-      return;
-    }
-    try {
-      const data = await placeOrder({
-        id: cart.Id,
-        receiptEmail: cart.ReceiptEmail ?? "",
-        tokenizedPaymentCard: paymentAcceptResult.TokenizedPaymentCard,
-        currency: channelConfigurationData?.Currency ?? "",
-        amount: cart.TotalAmount || 0,
-      });
-      await cleanupCart(data.Id);
-      setNotification({
-        message: t("placeOrderSuccessMessage"),
-        severity: "success",
-      });
-    } catch (error) {
-      console.error(error);
-      setNotification({
-        message: t("placeOrderErrorMessage"),
-        severity: "error",
-      });
-    }
-    setIsSubmitting(false);
-  };
-
-  const cleanupCart = async (transactionId: string) => {
-    // Clear cached cart data
-    // await deleteCartCookie();
-    // Fetch a new cart
-    // const newCart = await getCart.fetchData(queryClient);
-    // Set new cookie
-    // setCartCookie(newCart.Id);
-    //Go to confirmation page
-    router.push(`${PageSlug.Confirmation}?transactionId=${transactionId}`);
-  };
-
-  const renderFormFooter = () => {
-    return (
-      <Grid container justifyContent="flex-end">
-        <Button
-          disabled={!isFormComplete() || isSubmitting}
-          variant="contained"
-          color="primary"
-          onClick={() => handlePlaceOrder()}
-        >
-          {t("placeOrderButton")}
-        </Button>
-      </Grid>
-    );
-  };
-  return (
-    <Box>
-      {steps.map((step, index) => {
-        const stepNumber = index + 1;
-        return (
-          <CheckoutStep
-            title={step.title}
-            stepNumber={stepNumber}
-            activeStep={activeStep}
-            setActiveStep={handleStepChange}
-            isLastStep={stepNumber === steps.length}
-            key={stepNumber}
-            cart={cart}
-            component={step.component}
-          />
-        );
-      })}
-      {renderFormFooter()}
-    </Box>
-  );
-}

package/src/pages/checkout/checkout-alt-form/checkout-step.tsx

@@ -1,120 +0,0 @@
-import Card from "@/components/_components/BazaarCard";
-import Heading from "./heading";
-import { Button, useTheme } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import React from "react";
-import { Span } from "@/components/_components/Typography";
-import { FlexBox } from "@/components/_components/flex-box";
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import { useTranslations } from "next-intl";
-
-interface Props {
-  title: string;
-  stepNumber: number;
-  activeStep: number;
-  setActiveStep: (newStep: number) => void;
-  isLastStep: boolean;
-  cart: Cart;
-  component: React.FC<CheckoutStepComponentProps>;
-}
-
-export type StepViewState = "active" | "preview" | "pending";
-export type StepSubmissionState = "idle" | "submitting" | "error";
-export interface CheckoutStepComponentProps {
-  stepSubmissionState: StepSubmissionState;
-  setStepSubmissionState: (newState: StepSubmissionState) => void;
-  stepViewState: StepViewState;
-  handleStepCompletion: () => void;
-  cart: Cart;
-}
-
-function CheckoutStep({
-  component: Component,
-  title,
-  stepNumber,
-  activeStep,
-  setActiveStep,
-  cart,
-}: Props) {
-  const t = useTranslations("Checkout.Steps");
-  const [hasCompleted, setHasCompleted] = React.useState<boolean>(false);
-  const [stepSubmissionState, setStepSubmissionState] =
-    React.useState<StepSubmissionState>("idle");
-  const theme = useTheme();
-  const handleStepCompletion = () => {
-    setHasCompleted(true);
-    setActiveStep(stepNumber + 1);
-  };
-
-  const handleActivateStep = () => {
-    setActiveStep(stepNumber);
-  };
-  const getStepViewState = (): StepViewState => {
-    if (activeStep === stepNumber) {
-      return "active";
-    } else if (hasCompleted) {
-      return "preview";
-    } else if (activeStep < stepNumber) {
-      return "pending";
-    }
-    return "pending";
-  };
-  const componentProps: CheckoutStepComponentProps = {
-    stepSubmissionState,
-    stepViewState: getStepViewState(),
-    handleStepCompletion: handleStepCompletion,
-    setStepSubmissionState,
-    cart,
-  };
-
-  const handleSubmitChildComponent = () => setStepSubmissionState("submitting");
-
-  return (
-    <Card
-      sx={{ p: 3, mb: 3 }}
-      style={
-        stepSubmissionState === "error"
-          ? { border: `1px solid ${theme.palette.error.main}` }
-          : {}
-      }
-    >
-      <FlexBox justifyContent={"space-between"}>
-        <Heading
-          number={stepNumber}
-          title={title}
-          stepViewState={getStepViewState()}
-        />
-        {getStepViewState() !== "active" && hasCompleted && (
-          <Span
-            sx={{ textDecoration: "underline", cursor: "pointer" }}
-            role="button"
-            component="a"
-            onClick={handleActivateStep}
-          >
-            {t("editButton")}
-          </Span>
-        )}
-      </FlexBox>
-
-      <Grid spacing={1}>
-        <Component {...componentProps} />
-      </Grid>
-      <Grid
-        container
-        justifyContent={"flex-end"}
-        mt={3}
-        sx={{ display: getStepViewState() === "active" ? "flex" : "none" }}
-      >
-        <Button
-          color={"primary"}
-          variant={"contained"}
-          onClick={handleSubmitChildComponent}
-        >
-          {t("saveButton")}
-        </Button>
-      </Grid>
-    </Card>
-  );
-}
-
-export default React.memo(CheckoutStep);

package/src/pages/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 "@/components/_components/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/checkout/checkout-alt-form/delivery-address.tsx

@@ -1,170 +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>
-  );
-}