@springmicro/cart 0.3.2 → 0.3.5

package/src/checkout/components/Address.tsx

@@ -1,265 +1,261 @@
-import { FormikProps } from "formik";
-import {
-  allCountries,
-  allProvinces,
-  allCountriesReverse,
-  getRegionLabel,
-  getPostalCodeLabel,
-  getPostalCodeDefault,
-  provinces,
-} from "@springmicro/utils/address";
-import type { Alpha2Code, Province } from "@springmicro/utils/address";
-import React from "react";
-import { useEffect, useState } from "react";
-import { SxProps } from "@mui/material";
-import MenuItem from "@mui/material/MenuItem";
-import Box from "@mui/material/Box";
-import TextField, { StandardTextFieldProps } from "@mui/material/TextField";
-import Autocomplete from "@mui/material/Autocomplete";
-
-export type AddressValues = {
-  country: string;
-  region: string;
-  line1: string;
-  line2?: string;
-  organization?: string;
-  email: string;
-  city: string;
-  postal_code: string;
-};
-
-export type AddressFieldProps = {
-  formik: FormikProps<AddressValues & any>; // formik object might contain other values in addition to address
-  name: keyof AddressValues;
-  sx?: SxProps;
-};
-
-export function AddressCountryField({ formik, name, sx }: AddressFieldProps) {
-  /**
-   * Selects the full country name, need to do a reverse lookup for the Alpha2Code.
-   */
-  const [inputValue, setInputValue] = useState(formik.values[name] as string);
-
-  return (
-    <Autocomplete
-      sx={{ width: 300, ...sx }}
-      options={Object.values(allCountries)}
-      autoHighlight
-      getOptionLabel={(option) => option}
-      value={formik.values[name] as string}
-      onChange={(e, newValue) => {
-        // console.log(newValue)
-        formik.setValues({
-          ...formik.values,
-          region: "",
-          country: newValue as string,
-          line1: "",
-          line2: "",
-          organization: "",
-          city: "",
-          postal_code: "",
-        });
-      }}
-      onBlur={formik.handleBlur}
-      inputValue={inputValue}
-      onInputChange={(event, newInputValue) => {
-        setInputValue(newInputValue);
-      }}
-      renderOption={(props, option) => (
-        <Box
-          component="li"
-          sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
-          {...props}
-        >
-          <img
-            loading="lazy"
-            width="20"
-            src={`https://flagcdn.com/w20/${allCountriesReverse[
-              option
-            ].toLowerCase()}.png`}
-            srcSet={`https://flagcdn.com/w40/${allCountriesReverse[
-              option
-            ].toLowerCase()}.png 2x`}
-            alt=""
-          />
-          {option}
-        </Box>
-      )}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          required={true}
-          name={name as string}
-          label="Country"
-        />
-      )}
-    />
-  );
-}
-
-export function AddressRegionField({ formik, name, sx }: AddressFieldProps) {
-  const [addressRegionFieldOptional, setAddressRegionFieldOptional] =
-    useState<boolean>(false);
-  const country2code = allCountriesReverse[
-    formik.values["country"] as string
-  ] as Alpha2Code;
-
-  useEffect(() => {
-    setAddressRegionFieldOptional(
-      provinces.filter(
-        (province: Province) => province.country === country2code
-      ).length === 0
-    );
-  }, [country2code]);
-
-  const baseProps = {
-    sx: { width: 300, ...sx },
-    label: getRegionLabel(country2code),
-    name: name as string,
-    id: name as string,
-    value: formik.values[name],
-    onChange: formik.handleChange,
-    onBlur: formik.handleBlur,
-  };
-
-  if (!country2code || !getRegionLabel(country2code)) {
-    return <></>;
-  }
-
-  if (addressRegionFieldOptional) {
-    return (
-      <TextField
-        {...baseProps}
-        required={false}
-        sx={{ display: "block", ...baseProps.sx }}
-      />
-    );
-  } else {
-    return (
-      <TextField {...baseProps} select required={true}>
-        {allProvinces
-          .filter((val) => val.country === country2code)
-          .map((province, i) => (
-            <MenuItem key={i} value={province.value}>
-              {province.name}
-            </MenuItem>
-          ))}
-      </TextField>
-    );
-  }
-}
-
-export function AddressStreetField({
-  formik,
-  name,
-  sx,
-  required = true,
-  lineNo,
-}: AddressFieldProps & {
-  required?: boolean;
-  lineNo?: "1" | "2" | "3" | undefined;
-}) {
-  return (
-    <>
-      <TextField
-        label={lineNo ? `Street Address ${lineNo}` : "Street Address"}
-        sx={{ width: 400, display: "block", ...sx }}
-        name={name as string}
-        id={name as string}
-        value={formik.values[name]}
-        onChange={formik.handleChange}
-        onBlur={formik.handleBlur}
-        required={required}
-      />
-    </>
-  );
-}
-
-export function AddressEmailField({ formik, name, sx }: AddressFieldProps) {
-  return (
-    <>
-      <TextField
-        label={"Email"}
-        sx={{ width: 400, display: "block", ...sx }}
-        name={name as string}
-        id={name as string}
-        value={formik.values[name]}
-        onChange={formik.handleChange}
-        onBlur={formik.handleBlur}
-        type="email"
-        required={true}
-      />
-    </>
-  );
-}
-
-export function AddressOrganizationNameField({
-  formik,
-  name,
-  sx,
-}: AddressFieldProps) {
-  return (
-    <TextField
-      label="Organization Name"
-      sx={{ width: 400, display: "block", ...sx }}
-      name={name as string}
-      id={name as string}
-      value={formik.values[name]}
-      onChange={formik.handleChange}
-      onBlur={formik.handleBlur}
-      required={false}
-      helperText="Only include organization name if you want it included on the address."
-    />
-  );
-}
-
-export function AddressCityField({ formik, name, sx }: AddressFieldProps) {
-  return (
-    <TextField
-      label="City"
-      sx={{ width: 400, display: "block", ...sx }}
-      name={name as string}
-      id={name as string}
-      value={formik.values[name]}
-      onChange={formik.handleChange}
-      onBlur={formik.handleBlur}
-      required={true}
-    />
-  );
-}
-
-export function AddressPostalCodeField({
-  formik,
-  name,
-  sx,
-}: AddressFieldProps) {
-  const country2code = allCountriesReverse[
-    formik.values["country"] as string
-  ] as Alpha2Code;
-
-  React.useEffect(() => {
-    if (getPostalCodeDefault(country2code)) {
-      formik
-        .setFieldValue(name, getPostalCodeDefault(country2code))
-        .then(() => formik.setFieldTouched(name, true));
-    }
-  }, [country2code]);
-
-  return (
-    <TextField
-      label={getPostalCodeLabel(country2code)}
-      sx={{ width: 400, display: "block", ...sx }}
-      name={name as string}
-      id={name as string}
-      value={formik.values[name]}
-      onChange={formik.handleChange}
-      onBlur={formik.handleBlur}
-      required={true}
-      helperText={
-        getPostalCodeDefault(country2code)
-          ? 'Our records indicate that your country does not have a postal code system, so "00000" will be used by default.'
-          : ""
-      }
-    />
-  );
-}
+import { FormikProps } from "formik";
+import {
+  allCountries,
+  allProvinces,
+  allCountriesReverse,
+  getRegionLabel,
+  getPostalCodeLabel,
+  getPostalCodeDefault,
+  provinces,
+} from "@springmicro/utils/address";
+import type { Alpha2Code, Province } from "@springmicro/utils/address";
+import React from "react";
+import { useEffect, useState } from "react";
+import { SxProps } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import Box from "@mui/material/Box";
+import TextField, { StandardTextFieldProps } from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+
+export type AddressValues = {
+  country: string;
+  region: string;
+  line1: string;
+  line2?: string;
+  organization?: string;
+  email: string;
+  city: string;
+  postal_code: string;
+};
+
+export type AddressFieldProps = {
+  formik: FormikProps<AddressValues & any>; // formik object might contain other values in addition to address
+  name: keyof AddressValues;
+  sx?: SxProps;
+};
+
+export function AddressCountryField({ formik, name, sx }: AddressFieldProps) {
+  /**
+   * Selects the full country name, need to do a reverse lookup for the Alpha2Code.
+   */
+  const [inputValue, setInputValue] = useState(formik.values[name] as string);
+
+  return (
+    <Autocomplete
+      sx={{ width: 300, ...sx }}
+      options={Object.keys(allCountries)}
+      autoHighlight
+      getOptionLabel={(option) => allCountries[option]}
+      value={formik.values[name] as string}
+      onChange={(e, newValue) => {
+        // console.log(newValue)
+        formik.setValues({
+          ...formik.values,
+          region: "",
+          country: newValue as string,
+          line1: "",
+          line2: "",
+          organization: "",
+          city: "",
+          postal_code: "",
+        });
+      }}
+      onBlur={formik.handleBlur}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      renderOption={(props, option) => (
+        <Box
+          component="li"
+          sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
+          {...props}
+        >
+          <img
+            loading="lazy"
+            width="20"
+            src={`https://flagcdn.com/w20/${allCountriesReverse[
+              allCountries[option]
+            ].toLowerCase()}.png`}
+            srcSet={`https://flagcdn.com/w40/${allCountriesReverse[
+              allCountries[option]
+            ].toLowerCase()}.png 2x`}
+            alt=""
+          />
+          {allCountries[option]}
+        </Box>
+      )}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          required={true}
+          name={name as string}
+          label="Country"
+        />
+      )}
+    />
+  );
+}
+
+export function AddressRegionField({ formik, name, sx }: AddressFieldProps) {
+  const [addressRegionFieldOptional, setAddressRegionFieldOptional] =
+    useState<boolean>(false);
+  const country2code = formik.values["country"] as Alpha2Code;
+
+  useEffect(() => {
+    setAddressRegionFieldOptional(
+      provinces.filter(
+        (province: Province) => province.country === country2code
+      ).length === 0
+    );
+  }, [country2code]);
+
+  const baseProps = {
+    sx: { width: 300, ...sx },
+    label: getRegionLabel(country2code),
+    name: name as string,
+    id: name as string,
+    value: formik.values[name],
+    onChange: formik.handleChange,
+    onBlur: formik.handleBlur,
+  };
+
+  if (!country2code || !getRegionLabel(country2code)) {
+    return <></>;
+  }
+
+  if (addressRegionFieldOptional) {
+    return (
+      <TextField
+        {...baseProps}
+        required={false}
+        sx={{ display: "block", ...baseProps.sx }}
+      />
+    );
+  } else {
+    return (
+      <TextField {...baseProps} select required={true}>
+        {allProvinces
+          .filter((val) => val.country === country2code)
+          .map((province, i) => (
+            <MenuItem key={i} value={province.value}>
+              {province.name}
+            </MenuItem>
+          ))}
+      </TextField>
+    );
+  }
+}
+
+export function AddressStreetField({
+  formik,
+  name,
+  sx,
+  required = true,
+  lineNo,
+}: AddressFieldProps & {
+  required?: boolean;
+  lineNo?: "1" | "2" | "3" | undefined;
+}) {
+  return (
+    <>
+      <TextField
+        label={lineNo ? `Street Address ${lineNo}` : "Street Address"}
+        sx={{ width: 400, display: "block", ...sx }}
+        name={name as string}
+        id={name as string}
+        value={formik.values[name]}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        required={required}
+      />
+    </>
+  );
+}
+
+export function AddressEmailField({ formik, name, sx }: AddressFieldProps) {
+  return (
+    <>
+      <TextField
+        label={"Email"}
+        sx={{ width: 400, display: "block", ...sx }}
+        name={name as string}
+        id={name as string}
+        value={formik.values[name]}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        type="email"
+        required={true}
+      />
+    </>
+  );
+}
+
+export function AddressOrganizationNameField({
+  formik,
+  name,
+  sx,
+}: AddressFieldProps) {
+  return (
+    <TextField
+      label="Organization Name"
+      sx={{ width: 400, display: "block", ...sx }}
+      name={name as string}
+      id={name as string}
+      value={formik.values[name]}
+      onChange={formik.handleChange}
+      onBlur={formik.handleBlur}
+      required={false}
+      helperText="Only include organization name if you want it included on the address."
+    />
+  );
+}
+
+export function AddressCityField({ formik, name, sx }: AddressFieldProps) {
+  return (
+    <TextField
+      label="City"
+      sx={{ width: 400, display: "block", ...sx }}
+      name={name as string}
+      id={name as string}
+      value={formik.values[name]}
+      onChange={formik.handleChange}
+      onBlur={formik.handleBlur}
+      required={true}
+    />
+  );
+}
+
+export function AddressPostalCodeField({
+  formik,
+  name,
+  sx,
+}: AddressFieldProps) {
+  const country2code = formik.values["country"] as Alpha2Code;
+
+  React.useEffect(() => {
+    if (getPostalCodeDefault(country2code)) {
+      formik
+        .setFieldValue(name, getPostalCodeDefault(country2code))
+        .then(() => formik.setFieldTouched(name, true));
+    }
+  }, [country2code]);
+
+  return (
+    <TextField
+      label={getPostalCodeLabel(country2code)}
+      sx={{ width: 400, display: "block", ...sx }}
+      name={name as string}
+      id={name as string}
+      value={formik.values[name]}
+      onChange={formik.handleChange}
+      onBlur={formik.handleBlur}
+      required={true}
+      helperText={
+        getPostalCodeDefault(country2code)
+          ? 'Our records indicate that your country does not have a postal code system, so "00000" will be used by default.'
+          : ""
+      }
+    />
+  );
+}

package/src/checkout/components/CartList.tsx

@@ -0,0 +1,151 @@
+import { Box, Button, Tooltip, Typography } from "@mui/material";
+import { CartProductCard } from "./CartProductCard";
+
+function formatPrice(cents) {
+  if (typeof cents === "string") return cents;
+  return `$${(cents / 100).toFixed(2)}`;
+}
+
+export function CartList({
+  status,
+  cart,
+  subtotal,
+  tax,
+  shipping,
+  discount,
+  prices,
+  disableMissingImage,
+  disableProductLink,
+  formik,
+  formDisabled,
+  formError,
+}) {
+  return (
+    <form
+      style={{ flexGrow: 1 }}
+      onSubmit={(e) => {
+        e.preventDefault();
+        formik.handleSubmit(e);
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          flexGrow: 1,
+          mb: { xs: 4, xl: undefined },
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            maxWidth: 650,
+            alignItems: "center",
+            boxShadow: "0px 2px 5px 2px #dfdfdfff",
+            margin: "4px",
+            padding: "2rem 0",
+            borderRadius: "8px",
+            flexGrow: 1,
+          }}
+        >
+          <Typography style={{ fontSize: "30px", fontWeight: "bold" }}>
+            Checkout
+          </Typography>
+          <Box
+            sx={{
+              width: "50%",
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography sx={{ fontSize: "20px", p: 1 }}>
+              Subtotal: {formatPrice(subtotal)}
+            </Typography>
+            {tax.error ? (
+              <Tooltip
+                disableInteractive
+                title={`Tax could not be calculated. Error: ${tax.error}`}
+              >
+                <Typography
+                  sx={{
+                    fontSize: "20px",
+                    bgcolor: "#ff000040",
+                    borderRadius: 2,
+                    p: 1,
+                    textDecoration: "underline dotted",
+                    cursor: "help",
+                  }}
+                >
+                  Taxes: {formatPrice(tax.tax_amount)}
+                </Typography>
+              </Tooltip>
+            ) : (
+              <Typography sx={{ fontSize: "20px", p: 1 }}>
+                Taxes: {formatPrice(tax.tax_amount)}
+              </Typography>
+            )}
+          </Box>
+          {(discount != 0 || shipping != 0) && (
+            <Box
+              sx={{
+                width: "50%",
+                display: "flex",
+                justifyContent: "space-between",
+              }}
+            >
+              <Typography sx={{ fontSize: "20px", p: 1 }}>
+                {shipping && <>Shipping: {formatPrice(shipping)}</>}
+              </Typography>
+              <Typography sx={{ fontSize: "20px", p: 1 }}>
+                {discount && <>Discount: {formatPrice(discount)}</>}
+              </Typography>
+            </Box>
+          )}
+          <Box>
+            <Typography style={{ fontSize: "26px" }}>
+              Total:{" "}
+              {typeof subtotal === "number"
+                ? formatPrice(
+                    subtotal +
+                      (tax.tax_amount === "TBD" ? 0 : tax.tax_amount) +
+                      shipping -
+                      discount
+                  )
+                : subtotal}
+            </Typography>
+          </Box>
+          {formError && (
+            <Typography color="red">
+              Could not confirm payment. Your card info may have been entered
+              incorrectly.
+            </Typography>
+          )}
+          {status === 1 && (
+            <Button
+              variant="contained"
+              sx={{ mt: 2 }}
+              type="submit"
+              disabled={formDisabled}
+              color={formError ? "error" : undefined}
+            >
+              Confirm Order
+            </Button>
+          )}
+          <Box className="checkout-list">
+            {cart.items.map((p, i) => (
+              <CartProductCard
+                product={p}
+                i={i}
+                price={prices[p.price_id]}
+                disableProductLink={disableProductLink}
+                disableMissingImage={disableMissingImage}
+                disableModification={status != 0}
+              />
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </form>
+  );
+}