@evenicanpm/storefront-core 1.0.4 → 1.0.6

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

@@ -1,120 +1,171 @@
 import Card from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import Heading from "./heading";
 import { Button, useTheme } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React from "react";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import React, { createContext, useContext } from "react";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/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>;
-}
+import StepHeading from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/step-heading";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 
 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;
+  children?: React.ReactNode;
 }
 
-function CheckoutStep({
-  component: Component,
+interface CheckoutStepProps {
+  title: string;
+  stepNumber: number;
+  activeStep: number;
+  setActiveStep: (newStep: number) => void;
+  cart: Cart;
+  children: React.ReactNode;
+}
+interface StepContextType extends CheckoutStepComponentProps {
+  title: string;
+  stepNumber: number;
+  activeStep: number;
+  setActiveStep: (n: number) => void;
+  hasCompleted: boolean;
+}
+const StepContext = createContext<StepContextType | null>(null);
+
+const CheckoutStep = ({
   title,
   stepNumber,
   activeStep,
   setActiveStep,
   cart,
-}: Props) {
-  const t = useTranslations("Checkout.Steps");
-  const [hasCompleted, setHasCompleted] = React.useState<boolean>(false);
+  children,
+}: CheckoutStepProps) => {
+  const [hasCompleted, setHasCompleted] = React.useState(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";
-    }
+    if (activeStep === stepNumber) return "active";
+    if (hasCompleted) return "preview";
     return "pending";
   };
-  const componentProps: CheckoutStepComponentProps = {
+
+  const ctx: StepContextType = {
+    title,
+    stepNumber,
+    activeStep,
+    setActiveStep,
+    cart,
+    hasCompleted,
     stepSubmissionState,
-    stepViewState: getStepViewState(),
-    handleStepCompletion: handleStepCompletion,
     setStepSubmissionState,
-    cart,
+    stepViewState: getStepViewState(),
+    handleStepCompletion,
   };
 
-  const handleSubmitChildComponent = () => setStepSubmissionState("submitting");
+  return (
+    <StepContext.Provider value={ctx}>
+      <Card
+        sx={{ p: 3, mb: 3 }}
+        style={
+          stepSubmissionState === "error"
+            ? { border: `1px solid ${theme.palette.error.main}` }
+            : {}
+        }
+      >
+        {children}
+      </Card>
+    </StepContext.Provider>
+  );
+};
+
+CheckoutStep.Header = () => {
+  const ctx = useContext(StepContext);
+  if (!ctx) return null;
+  const { title, stepNumber, stepViewState, hasCompleted, setActiveStep } = ctx;
+  const t = useTranslations("Checkout.Steps");
+
+  return (
+    <FlexBox justifyContent="space-between">
+      <StepHeading
+        number={stepNumber}
+        title={title}
+        stepViewState={stepViewState}
+      />
+      {stepViewState !== "active" && hasCompleted && (
+        <Span
+          sx={{ textDecoration: "underline", cursor: "pointer" }}
+          role="button"
+          component="a"
+          onClick={() => setActiveStep(stepNumber)}
+        >
+          {t("editButton")}
+        </Span>
+      )}
+    </FlexBox>
+  );
+};
 
+CheckoutStep.Body = ({
+  component: Component,
+  componentProps,
+}: {
+  component: React.FC<CheckoutStepComponentProps>;
+  componentProps?: Partial<CheckoutStepComponentProps>;
+}) => {
+  const ctx = useContext(StepContext);
+  if (!ctx) return null;
+  const {
+    stepSubmissionState,
+    setStepSubmissionState,
+    stepViewState,
+    handleStepCompletion,
+    cart,
+  } = ctx;
   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
+        stepSubmissionState={stepSubmissionState}
+        setStepSubmissionState={setStepSubmissionState}
+        stepViewState={stepViewState}
+        handleStepCompletion={handleStepCompletion}
+        cart={cart}
+        {...(componentProps ?? {})}
+      />
+    </Grid>
+  );
+};
 
-      <Grid spacing={1}>
-        <Component {...componentProps} />
-      </Grid>
-      <Grid
-        container
-        justifyContent={"flex-end"}
-        mt={3}
-        sx={{ display: getStepViewState() === "active" ? "flex" : "none" }}
+CheckoutStep.Actions = () => {
+  const ctx = useContext(StepContext);
+  if (!ctx) return null;
+  const { stepViewState, setStepSubmissionState } = ctx;
+  const t = useTranslations("Checkout.Steps");
+
+  if (stepViewState !== "active") return null;
+
+  return (
+    <Grid container justifyContent="flex-end" mt={3}>
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={() => setStepSubmissionState("submitting")}
       >
-        <Button
-          color={"primary"}
-          variant={"contained"}
-          onClick={handleSubmitChildComponent}
-        >
-          {t("saveButton")}
-        </Button>
-      </Grid>
-    </Card>
+        {t("saveButton")}
+      </Button>
+    </Grid>
   );
-}
+};
 
-export default React.memo(CheckoutStep);
+export default CheckoutStep;

package/src/pages-v2/checkout/checkout-alt-form/index.ts

@@ -1 +1 @@
-export { default as CheckoutForm } from "./checkout-form";
+export { default as CheckoutForm } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-form";

package/src/pages-v2/checkout/checkout-alt-form/{heading.tsx → step-heading.tsx}

@@ -2,7 +2,7 @@ import { BoxProps } from "@mui/material/Box";
 import Avatar from "@mui/material/Avatar";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { StepViewState } from "./checkout-step";
+import { StepViewState } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
 
 // ==============================================================
 interface Props extends BoxProps {

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

@@ -0,0 +1,131 @@
+import { ModeEditOutline, DeleteOutline } from "@mui/icons-material";
+import { Card, IconButton } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import {
+  H6,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { Address } from "@/api-manager/schemas/address.schema";
+import React from "react";
+
+interface AddressCardProps {
+  address: Address;
+  isCartAddress: boolean;
+  onEdit?: () => void;
+  onSelect?: () => void;
+  onDelete?: () => void;
+  children?: React.ReactNode;
+}
+
+const AddressCardContext = React.createContext<AddressCardProps | null>(null);
+
+const AddressCard = ({
+  address,
+  isCartAddress,
+  onEdit,
+  onSelect,
+  onDelete,
+  children,
+}) => {
+  const contextValue = React.useMemo(
+    () => ({ address, isCartAddress, onEdit, onSelect, onDelete }),
+    [address, isCartAddress, onEdit, onSelect, onDelete],
+  );
+
+  const hasCustomChildren = React.Children.count(children) > 0;
+
+  return (
+    <AddressCardContext.Provider value={contextValue}>
+      <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",
+          }}
+        >
+          {hasCustomChildren ? (
+            children
+          ) : (
+            <>
+              <AddressCard.Controls />
+              <AddressCard.Header />
+              <AddressCard.Body />
+            </>
+          )}
+        </Card>
+      </Grid>
+    </AddressCardContext.Provider>
+  );
+};
+
+AddressCard.Controls = () => {
+  const ctx = React.useContext(AddressCardContext);
+  if (!ctx) return null;
+
+  const { onEdit, onDelete, isCartAddress } = ctx;
+
+  if (!onEdit && !onDelete) return null;
+
+  return (
+    <FlexBox position="absolute" top={5} right={5}>
+      {onEdit && (
+        <IconButton
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit();
+          }}
+        >
+          <ModeEditOutline fontSize="inherit" />
+        </IconButton>
+      )}
+      {onDelete && (
+        <IconButton
+          size="small"
+          color="error"
+          disabled={isCartAddress}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+        >
+          <DeleteOutline fontSize="inherit" />
+        </IconButton>
+      )}
+    </FlexBox>
+  );
+};
+
+AddressCard.Header = () => {
+  const ctx = React.useContext(AddressCardContext);
+  if (!ctx) return null;
+
+  const { address } = ctx;
+  return <H6 mb={0.5}>{address.Name}</H6>;
+};
+
+AddressCard.Body = () => {
+  const ctx = React.useContext(AddressCardContext);
+  if (!ctx) return null;
+
+  const { address } = ctx;
+  return (
+    <>
+      <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>
+    </>
+  );
+};
+
+export default AddressCard;