@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/pages-v2/cart/checkout-form.tsx

@@ -1,23 +1,47 @@
+"use client";
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import Link from "next/link";
-// MUI
 import Card from "@mui/material/Card";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import TextField from "@mui/material/TextField";
-// GLOBAL CUSTOM COMPONENTS
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
   FlexBetween,
   FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import { useFormatter, useTranslations } from "next-intl";
 import { CountryRegionInfo, Coupon } from "@msdyn365-commerce/retail-proxy";
 import getStates from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-states";
 import { debounce } from "lodash";
-import EstimateShipping from "./estimate-shipping";
-import CouponEntry from "./coupon-entry";
-import React from "react";
+import EstimateShipping from "@evenicanpm/storefront-core/src/pages-v2/cart/estimate-shipping";
+import CouponEntry from "@evenicanpm/storefront-core/src/pages-v2/cart/coupon-entry";
 
+interface CheckoutFormContextValue {
+  cartId: string;
+  cartLineIds: string[];
+  cartTotal: number;
+  countries: CountryRegionInfo[];
+  appliedCoupons: Coupon[];
+  commentFromData: string;
+  checkoutDisabled?: boolean;
+  selectedCountry: CountryRegionInfo | undefined;
+  setSelectedCountry: (c: CountryRegionInfo | undefined) => void;
+  states: CountryRegionInfo[] | undefined;
+  updateCartComment: (comment: string) => void;
+  textRef: React.RefObject<HTMLTextAreaElement>;
+}
+
+const CheckoutFormContext = createContext<CheckoutFormContextValue | null>(
+  null,
+);
 interface CheckoutFormProps {
   cartId: string;
   cartLineIds: string[];
@@ -27,57 +51,91 @@ interface CheckoutFormProps {
   appliedCoupons: Coupon[];
   commentFromData: string;
   checkoutDisabled?: boolean;
+  children: React.ReactNode;
 }
 
-export default function CheckoutForm({
+const CheckoutForm = ({
+  cartId,
+  cartLineIds,
   cartTotal,
   countries,
   updateCartComment,
-  commentFromData,
   appliedCoupons,
-  cartId,
-  cartLineIds,
+  commentFromData,
   checkoutDisabled,
-}: CheckoutFormProps) {
-  const { number } = useFormatter();
-  const t = useTranslations("Cart.Sidebar");
-  const textRef = React.useRef<HTMLTextAreaElement>();
-  const [selectedCountry, setSelectedCountry] = React.useState<
-    CountryRegionInfo | undefined
-  >(undefined);
+  children,
+}: CheckoutFormProps) => {
+  const [selectedCountry, setSelectedCountry] = useState<CountryRegionInfo>();
   const { data: states } = getStates.useData({
     countryId: selectedCountry?.CountryRegionId,
   });
 
-  const handleCommentUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
-    updateCartComment(e.target.value);
-  };
+  const textRef = useRef<HTMLTextAreaElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (textRef.current) {
       textRef.current.value = commentFromData;
     }
   }, [commentFromData]);
 
-  const debounceCommentUpdate = debounce(handleCommentUpdate, 2500);
+  return (
+    <CheckoutFormContext.Provider
+      value={{
+        cartId,
+        cartLineIds,
+        cartTotal,
+        countries,
+        appliedCoupons,
+        commentFromData,
+        checkoutDisabled,
+        selectedCountry,
+        setSelectedCountry,
+        states,
+        updateCartComment,
+        textRef,
+      }}
+    >
+      <Card sx={{ padding: 3 }}>{children}</Card>
+    </CheckoutFormContext.Provider>
+  );
+};
+
+CheckoutForm.Total = () => {
+  const ctx = useContext(CheckoutFormContext);
+  if (!ctx) return null;
+  const { cartTotal } = ctx;
+  const { number } = useFormatter();
+  const t = useTranslations("Cart.Sidebar");
 
   return (
-    <Card sx={{ padding: 3 }}>
+    <>
       <FlexBetween mb={2}>
         <Span color="grey.600">{t("total")}:</Span>
-
         <Span fontSize={18} fontWeight={600} lineHeight="1">
           {number(cartTotal, { style: "currency", currency: "USD" })}
         </Span>
       </FlexBetween>
-
       <Divider sx={{ mb: 2 }} />
+    </>
+  );
+};
 
+CheckoutForm.Notes = () => {
+  const ctx = useContext(CheckoutFormContext);
+  if (!ctx) return null;
+  const { updateCartComment, textRef } = ctx;
+  const t = useTranslations("Cart.Sidebar");
+  const debounceCommentUpdate = debounce(
+    (e: React.ChangeEvent<HTMLInputElement>) =>
+      updateCartComment(e.target.value),
+    2500,
+  );
+
+  return (
+    <>
       <FlexBox alignItems="center" columnGap={1} mb={2}>
         <Span fontWeight="600">{t("notes")}</Span>
       </FlexBox>
-
-      {/* COMMENTS TEXT FIELD */}
       <TextField
         variant="outlined"
         rows={6}
@@ -85,38 +143,73 @@ export default function CheckoutForm({
         multiline
         onChange={debounceCommentUpdate}
         inputRef={textRef}
-        inputProps={{
-          ["data-testid"]: "cart-comment",
-        }}
+        inputProps={{ ["data-testid"]: "cart-comment" }}
       />
-
       <Divider sx={{ mb: 2 }} />
+    </>
+  );
+};
 
-      {/* APPLY VOUCHER TEXT FIELD */}
-      <CouponEntry appliedCoupons={appliedCoupons} cartId={cartId} />
+CheckoutForm.Coupons = () => {
+  const ctx = useContext(CheckoutFormContext);
+  if (!ctx) return null;
+  const { appliedCoupons, cartId } = ctx;
 
+  return (
+    <>
+      <CouponEntry appliedCoupons={appliedCoupons} cartId={cartId}>
+        <CouponEntry.Input />
+        <CouponEntry.ApplyButton />
+        <CouponEntry.AppliedList />
+      </CouponEntry>
       <Divider sx={{ mb: 2 }} />
-      {/* COUNTRY TEXT FIELD */}
+    </>
+  );
+};
+
+CheckoutForm.EstimateShipping = () => {
+  const ctx = useContext(CheckoutFormContext);
+  if (!ctx) return null;
+  const { countries, states, setSelectedCountry, cartId, cartLineIds } = ctx;
+
+  return (
+    <>
       <EstimateShipping
         countries={countries}
         states={states || []}
         setCountry={setSelectedCountry}
         cartId={cartId}
         cartLineIds={cartLineIds}
-      />
-
+      >
+        <EstimateShipping.Country />
+        <EstimateShipping.State />
+        <EstimateShipping.ZipCode />
+        <EstimateShipping.Submit />
+        <EstimateShipping.Options />
+      </EstimateShipping>
       <Divider sx={{ mb: 2 }} />
+    </>
+  );
+};
 
-      <Button
-        fullWidth
-        color="primary"
-        href="/checkout"
-        variant="contained"
-        LinkComponent={Link}
-        disabled={checkoutDisabled}
-      >
-        {t("checkoutButton")}
-      </Button>
-    </Card>
+CheckoutForm.CheckoutButton = () => {
+  const ctx = useContext(CheckoutFormContext);
+  if (!ctx) return null;
+  const { checkoutDisabled } = ctx;
+  const t = useTranslations("Cart.Sidebar");
+
+  return (
+    <Button
+      fullWidth
+      color="primary"
+      href="/checkout"
+      variant="contained"
+      LinkComponent={Link}
+      disabled={checkoutDisabled}
+    >
+      {t("checkoutButton")}
+    </Button>
   );
-}
+};
+
+export default CheckoutForm;

package/src/pages-v2/cart/coupon-entry.tsx

@@ -1,5 +1,6 @@
-import useAddDiscountCode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-discount-code";
-import { Coupon } from "@msdyn365-commerce/retail-proxy";
+"use client";
+
+import React, { createContext, useContext, useState } from "react";
 import {
   Box,
   Button,
@@ -9,30 +10,40 @@ import {
   ListItemText,
   TextField,
 } from "@mui/material";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
 import Close from "@mui/icons-material/Close";
-import React from "react";
+import { Coupon } from "@msdyn365-commerce/retail-proxy";
+import useAddDiscountCode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-discount-code";
 import useRemoveDiscountcode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/remove-discount-code";
+interface CouponContextValue {
+  textValue: string;
+  setTextValue: (v: string) => void;
+  appliedCoupons: Coupon[];
+  handleApplyCoupon: () => void;
+  handleRemoveCoupon: (coupon: string) => void;
+  cartId: string;
+}
 
+const CouponContext = createContext<CouponContextValue | null>(null);
 interface CouponEntryProps {
   appliedCoupons: Coupon[];
   cartId: string;
+  children: React.ReactNode;
 }
 
-export default function CouponEntry(props: CouponEntryProps) {
-  const { appliedCoupons, cartId } = props;
-  const [textValue, setTextValue] = React.useState<string>("");
+const CouponEntry = ({
+  appliedCoupons,
+  cartId,
+  children,
+}: CouponEntryProps) => {
+  const [textValue, setTextValue] = useState("");
   const { mutate: updateCoupon } = useAddDiscountCode();
   const { mutate: removeCoupon } = useRemoveDiscountcode();
-  const t = useTranslations("Cart.Coupons");
-
-  const handleUpdateTextValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTextValue(e.target.value);
-  };
 
   const handleApplyCoupon = () => {
+    if (!textValue) return;
     updateCoupon({ discountCode: textValue, cartId });
     setTextValue("");
   };
@@ -40,51 +51,103 @@ export default function CouponEntry(props: CouponEntryProps) {
   const handleRemoveCoupon = (coupon: string) => {
     removeCoupon({ discountCode: coupon, cartId });
   };
+
   return (
-    <Box>
-      <TextField
-        fullWidth
-        size="small"
-        label={t("coupon")}
-        variant="outlined"
-        placeholder={t("coupon")}
-        value={textValue}
-        onChange={handleUpdateTextValue}
-      />
-      <Button
-        variant="outlined"
-        color="primary"
-        fullWidth
-        sx={{ mt: 2, mb: 4 }}
-        onClick={handleApplyCoupon}
-      >
-        {t("applyCouponButton")}
-      </Button>
-      {appliedCoupons.length > 0 && (
-        <>
-          <FlexBox alignItems="center" columnGap={1} mb={2}>
-            <Span fontWeight="600">{t("appliedCoupons")}</Span>
-          </FlexBox>
-          {appliedCoupons.map((coupon) => (
-            <List key={coupon.Code}>
-              <ListItem
-                secondaryAction={
-                  <IconButton
-                    edge="end"
-                    aria-label="delete"
-                    onClick={() => handleRemoveCoupon(coupon.Code ?? "")}
-                    title={"Remove Coupon"}
-                  >
-                    <Close />
-                  </IconButton>
-                }
-              >
-                <ListItemText primary={coupon.Code} />
-              </ListItem>
-            </List>
-          ))}
-        </>
-      )}
-    </Box>
+    <CouponContext.Provider
+      value={{
+        textValue,
+        setTextValue,
+        appliedCoupons,
+        handleApplyCoupon,
+        handleRemoveCoupon,
+        cartId,
+      }}
+    >
+      <Box>{children}</Box>
+    </CouponContext.Provider>
   );
-}
+};
+
+CouponEntry.Input = () => {
+  const ctx = useContext(CouponContext);
+  if (!ctx) return null;
+  const { textValue, setTextValue } = ctx;
+  const t = useTranslations("Cart.Coupons");
+
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      label={t("coupon")}
+      variant="outlined"
+      placeholder={t("coupon")}
+      value={textValue}
+      onChange={(e) => setTextValue(e.target.value)}
+    />
+  );
+};
+
+CouponEntry.ApplyButton = () => {
+  const ctx = useContext(CouponContext);
+  if (!ctx) return null;
+  const { handleApplyCoupon } = ctx;
+  const t = useTranslations("Cart.Coupons");
+
+  return (
+    <Button
+      variant="outlined"
+      color="primary"
+      fullWidth
+      sx={{ mt: 2, mb: 4 }}
+      onClick={handleApplyCoupon}
+    >
+      {t("applyCouponButton")}
+    </Button>
+  );
+};
+
+CouponEntry.AppliedList = () => {
+  const ctx = useContext(CouponContext);
+  if (!ctx) return null;
+  const { appliedCoupons } = ctx;
+  const t = useTranslations("Cart.Coupons");
+
+  if (!appliedCoupons.length) return null;
+
+  return (
+    <>
+      <FlexBox alignItems="center" columnGap={1} mb={2}>
+        <Span fontWeight="600">{t("appliedCoupons")}</Span>
+      </FlexBox>
+      <List>
+        {appliedCoupons.map((coupon) => (
+          <CouponEntry.AppliedItem key={coupon.Code} coupon={coupon} />
+        ))}
+      </List>
+    </>
+  );
+};
+
+CouponEntry.AppliedItem = ({ coupon }: { coupon: Coupon }) => {
+  const ctx = useContext(CouponContext);
+  if (!ctx) return null;
+  const { handleRemoveCoupon } = ctx;
+  return (
+    <ListItem
+      secondaryAction={
+        <IconButton
+          edge="end"
+          aria-label="delete"
+          onClick={() => handleRemoveCoupon(coupon.Code ?? "")}
+          title="Remove Coupon"
+        >
+          <Close />
+        </IconButton>
+      }
+    >
+      <ListItemText primary={coupon.Code} />
+    </ListItem>
+  );
+};
+
+export default CouponEntry;