@shipengine/elements 2.19.0 → 2.21.0

package/esm/themes/fallback.js

@@ -0,0 +1,357 @@
+const fallbackThemeData = {
+  borderRadius: {
+    L: "16px",
+    M: "8px",
+    S: "4px",
+    XL: "32px",
+    XS: "2px"
+  },
+  breakPoints: {
+    desktop: 1280,
+    mobileLarge: 480,
+    tablet: 768,
+    tabletLarge: 960
+  },
+  card: {
+    borderRadius: {
+      desktop: "8px",
+      mobile: "4px",
+      tablet: "8px"
+    }
+  },
+  components: {
+    Button: {
+      borderRadius: "4px"
+    },
+    Checkbox: {
+      borderRadius: "2px",
+      square: false
+    },
+    Chip: {
+      backgroundColor: "#f4f4f4",
+      border: "none",
+      borderRadius: "16px",
+      color: "#706f6f",
+      fontWeight: 600,
+      isSelected: {
+        backgroundColor: "#EDEDED",
+        border: "none",
+        color: "#7A7A7A"
+      },
+      padding: "4px 16px"
+    },
+    Dialog: {
+      action: {
+        justifyContent: "center"
+      },
+      content: {
+        padding: 24,
+        textAlign: "center"
+      },
+      dialog: {
+        backgroundColor: "rgba(0, 0, 0, 0.26)",
+        borderRadius: "4px"
+      },
+      header: {
+        borderBottom: "2px solid #d3d3d3",
+        padding: 24,
+        titleColor: "#616161"
+      }
+    },
+    Field: {
+      color: "#373737",
+      fontWeight: 700,
+      placeholder: {
+        fontWeight: 700
+      }
+    },
+    FieldContainer: {
+      borderRadius: "4px"
+    },
+    Link: {
+      activeColor: "#787878",
+      defaultColor: "#616161",
+      hoverColor: "#303030",
+      isDark: {
+        activeColor: "#787878",
+        defaultColor: "#fff",
+        hoverColor: "#fff",
+        visitedColor: "#fff"
+      },
+      visitedColor: "#303030"
+    },
+    Table: {
+      border: "none",
+      borderRadius: "4px",
+      boxShadow: "0 0 12px rgba(0, 0, 0, 0.1)"
+    },
+    Typography: {
+      body1: {
+        fontSize: "16px",
+        fontWeight: 400,
+        letterSpacing: 0,
+        lineHeight: "24px"
+      },
+      body2: {
+        fontSize: "14px",
+        fontWeight: 400,
+        letterSpacing: 3,
+        lineHeight: "20px"
+      },
+      heading1: {
+        fontSize: "48px",
+        fontWeight: 700,
+        letterSpacing: 0,
+        lineHeight: "72px"
+      },
+      heading2: {
+        fontSize: "32px",
+        fontWeight: 700,
+        letterSpacing: 1,
+        lineHeight: "48px"
+      },
+      heading3: {
+        fontSize: "24px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "48px"
+      },
+      heading4: {
+        fontSize: "20px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "32px"
+      },
+      heading5: {
+        fontSize: "18px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "28px"
+      },
+      heading6: {
+        fontSize: "16px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "24px"
+      },
+      small: {
+        fontSize: "12px",
+        fontWeight: 400,
+        letterSpacing: 5,
+        lineHeight: "20px"
+      },
+      subtitle1: {
+        fontSize: "16px",
+        fontWeight: 600,
+        letterSpacing: 3,
+        lineHeight: "24px"
+      },
+      subtitle2: {
+        fontSize: "14px",
+        fontWeight: 600,
+        letterSpacing: 5,
+        lineHeight: "20px"
+      }
+    }
+  },
+  defaultFontFamily: "Arial",
+  elevations: {
+    above: {
+      boxShadow: "0 0 12px rgba(0, 0, 0, 0.1)",
+      zIndex: 1000
+    },
+    backdrop: {
+      boxShadow: "none",
+      zIndex: 1007
+    },
+    flat1: {
+      boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)",
+      zIndex: 1
+    },
+    flat2: {
+      boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)",
+      zIndex: 1000
+    },
+    overlay1: {
+      boxShadow: "0 0 24px rgba(0, 0, 0, 0.1)",
+      zIndex: 1006
+    },
+    overlay2: {
+      boxShadow: "0 0 24px rgba(0, 0, 0, 0.1)",
+      zIndex: 1008
+    },
+    popout1: {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.1)",
+      zIndex: 1004
+    },
+    popout2: {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.1)",
+      zIndex: 1005
+    },
+    raised: {
+      boxShadow: "0 8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1002
+    },
+    raisedInverted1: {
+      boxShadow: "0 -8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1002
+    },
+    raisedInverted2: {
+      boxShadow: "0 -8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1003
+    },
+    sticky: {
+      boxShadow: "none",
+      zIndex: 1001
+    }
+  },
+  fontFaces: [],
+  grid: {
+    desktop: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    desktopLarge: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    mobile: {
+      columns: 4,
+      gutter: 16,
+      horizontalSpace: 16,
+      verticalSpace: 16
+    },
+    mobileLarge: {
+      columns: 4,
+      gutter: 16,
+      horizontalSpace: 16,
+      verticalSpace: 16
+    },
+    tablet: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    tabletLarge: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    }
+  },
+  iconSize: {
+    extra_large: "48px",
+    large: "32px",
+    medium: "20px",
+    regular: "24px",
+    small: "16px"
+  },
+  palette: {
+    alert: {
+      light: "#ffe7ca",
+      main: "#725200"
+    },
+    black: "#000",
+    dataVisualization: {
+      highContrast: {
+        blue: "#3970C1",
+        blueDark: "#002039",
+        coral: "#F95D6A",
+        cyan: "#45CEE0",
+        green: "#B3D849",
+        orange: "#FFA600",
+        orangeDark: "#FF7C43",
+        pink: "#D12771",
+        purple: "#A05195",
+        purpleDark: "#665191"
+      },
+      lowContrast: {
+        blue: "#96B3DE",
+        blueDark: "#5283AB",
+        coral: "#FCA6AD",
+        cyan: "#BAE6FF",
+        green: "#DEF895",
+        orange: "#FDDFA5",
+        orangeDark: "#FCC2A9",
+        pink: "#E995BA",
+        purple: "#D4BBFF",
+        purpleDark: "#B1A2D0"
+      }
+    },
+    error: {
+      light: "#fee5e4",
+      main: "#a72514"
+    },
+    gray: {
+      dark: "#373737",
+      light: "#d3d3d3",
+      main: "#706f6f",
+      megaLight: "#f4f4f4",
+      ultraLight: "#f4f4f4"
+    },
+    info: {
+      light: "#dbedfd",
+      main: "#195f7f"
+    },
+    primary: {
+      dark: "#626262",
+      light: "#D6D6D6",
+      main: "#7A7A7A",
+      ultraLight: "#EDEDED"
+    },
+    secondary: {
+      dark: "#303030",
+      light: "#787878",
+      main: "#616161",
+      ultraLight: "#F4F4F4"
+    },
+    success: {
+      light: "#dcfddb",
+      main: "#286327"
+    },
+    white: "#fff"
+  },
+  spacingBase: 8,
+  typography: {
+    fontSize: {
+      L: "18px",
+      M: "16px",
+      S: "14px",
+      XL: "20px",
+      XS: "12px",
+      XXL: "24px",
+      XXS: "10px",
+      XXXL: "32px",
+      XXXXL: "48px"
+    },
+    fontWeight: {
+      bold: 700,
+      light: 200,
+      normal: 400,
+      semibold: 600
+    },
+    letterSpacing: {
+      L: 3,
+      M: 1,
+      S: 0,
+      XL: 5,
+      XXL: 8,
+      XXXL: 12
+    },
+    lineHeight: {
+      L: "28px",
+      M: "24px",
+      S: "20px",
+      XL: "32px",
+      XXL: "48px",
+      XXXL: "72px"
+    }
+  }
+};
+
+export { fallbackThemeData as default };

package/esm/themes/index.js

@@ -0,0 +1,9 @@
+import auctaneThemeData from './auctane.js';
+import fallbackThemeData from './fallback.js';
+
+const themeData = {
+  auctane: auctaneThemeData,
+  fallback: fallbackThemeData
+};
+
+export { themeData as default };

package/esm/types/canada-ddp.js

@@ -0,0 +1,7 @@
+var CanadaDeliveredDutyOptions;
+(function (CanadaDeliveredDutyOptions) {
+  CanadaDeliveredDutyOptions["RECIPIENT_PAYS"] = "recipient_pays";
+  CanadaDeliveredDutyOptions["SENDER_PREPAY"] = "sender_prepay";
+})(CanadaDeliveredDutyOptions || (CanadaDeliveredDutyOptions = {}));
+
+export { CanadaDeliveredDutyOptions };

package/esm/types/pudo.js

@@ -0,0 +1,12 @@
+/**
+ * @internal
+ *
+ * PUDO type
+ */
+var PudoType;
+(function (PudoType) {
+  PudoType["PICKUP"] = "pick_up";
+  PudoType["DROPOFF"] = "drop_off";
+})(PudoType || (PudoType = {}));
+
+export { PudoType };

package/esm/utilities/assertions.js

@@ -0,0 +1,8 @@
+function assert(condition, errorMessage) {
+  if (!condition) throw new Error(errorMessage);
+}
+function raise(errorMessage) {
+  throw new Error(errorMessage);
+}
+
+export { assert, raise };

package/esm/utilities/checks.js

@@ -0,0 +1,51 @@
+import { jwtDecode } from 'jwt-decode';
+import isEqual from 'lodash/isEqual.js';
+import { shipFromAddressFormSchema } from '../components/forms/ship-from-address-form/ship-from-address-form-schema.js';
+
+const isOnboarded = (warehouses, carriers) => {
+  if (!(warehouses === null || warehouses === void 0 ? void 0 : warehouses.length)) return false;
+  // Ensure there is a carrier that is not the free trial carrier
+  // Free trial carriers are stamps_com and have no account number
+  if (!carriers || !carriers.find(c => !(!c.accountNumber && c.carrierCode === "stamps_com"))) return false;
+  return true;
+};
+const getSellerIdFromToken = token => {
+  try {
+    const decoded = jwtDecode(token);
+    return decoded.tenant;
+  } catch (_a) {
+    return undefined;
+  }
+};
+/**
+ * Validates a ship-from address against the shipFromAddressFormSchema.
+ *
+ * @param shipFromAddress The ship-from address to validate.
+ * @returns An object indicating validation status and any error messages.
+ *
+ * @example
+ * const result = validateShipFromAddress(myAddress);
+ * if (result.isValid) {
+ * console.log("Address is valid.");
+ * } else {
+ * console.error("Address is invalid:", result.errors);
+ * }
+ */
+const validateShipFromAddress = shipFromAddress => {
+  try {
+    shipFromAddressFormSchema.parse(Object.assign(Object.assign({}, shipFromAddress), {
+      returnToAddressIsDifferent: !isEqual(shipFromAddress === null || shipFromAddress === void 0 ? void 0 : shipFromAddress.originAddress, shipFromAddress === null || shipFromAddress === void 0 ? void 0 : shipFromAddress.returnAddress)
+    }));
+  } catch (error) {
+    return {
+      errors: error,
+      isValid: false
+    };
+  }
+  return {
+    errors: null,
+    isValid: true
+  };
+};
+
+export { getSellerIdFromToken, isOnboarded, validateShipFromAddress };

package/esm/utilities/create-dictionary.js

@@ -0,0 +1,13 @@
+/**
+ * @internal
+ *
+ * # Create Dictionary Utility Function
+ *
+ * @category Utilities
+ */
+const createDictionary = (items, getEntry) => {
+  var _a;
+  return (_a = items === null || items === void 0 ? void 0 : items.reduce((results, item) => Object.assign(Object.assign({}, results), getEntry(item, results)), {})) !== null && _a !== void 0 ? _a : {};
+};
+
+export { createDictionary };

package/esm/utilities/date.js

@@ -0,0 +1,205 @@
+import { format } from 'date-fns/format';
+import { ca, de, enAU, enGB, enUS, es, fr, it, pt } from 'date-fns/locale';
+import { parse } from 'date-fns/parse';
+
+/**
+ * @internal
+ *
+ * # Date Utils - Formats a date to the current locale
+ *
+ * @category Utilities
+ */
+const formatDate = (date, locale = "en-US") => new Date(date).toLocaleDateString(locale, {
+  day: "numeric",
+  month: "long",
+  year: "numeric"
+});
+/**
+ * @internal
+ * Get the locale data for a given locale string.
+ * @param locale string i.e. "en-US"
+ * @returns locale data
+ */
+const findDateLocale = (locale = "en-US") => {
+  const loadableLocale = locale.replaceAll("-", "");
+  const rootLocale = locale.split("-")[0];
+  const Locales = {
+    ca,
+    de,
+    enAU,
+    enGB,
+    enUS,
+    es,
+    fr,
+    it,
+    pt
+  };
+  const targetLocale = loadableLocale in Locales ? loadableLocale : rootLocale;
+  return Locales[targetLocale];
+};
+/**
+ * @internal
+ * Given a date and a locale, format the date to the locale's date format.
+ * @param date
+ * @param locale string i.e. "en-US"
+ * @param dateFormat string. See https://date-fns.org/v3.3.1/docs/format
+ * @returns formatted date string
+ */
+const formatByDateAndLocale = (date, locale = "en-US", dateFormat) => {
+  const localeData = findDateLocale(locale);
+  const localeDateFormat = getlocaleDateStringFormat(locale);
+  return format(date, dateFormat !== null && dateFormat !== void 0 ? dateFormat : localeDateFormat, {
+    locale: localeData
+  });
+};
+/**
+ * @internal
+ * Parse a string in the CURRENT locale into a Date object.
+ * @param date string
+ * @param locale
+ * @returns date
+ */
+const parseLocaleDate = (date, locale = "en-US", dateFormat = "P") => {
+  const localeData = findDateLocale(locale);
+  return parse(date, dateFormat, new Date(), {
+    locale: localeData
+  });
+};
+/**
+ * @internal
+ *
+ * # Date Utils - formatDateDDMMYY
+ *
+ * @category Utilities
+ */
+const formatDateDDMMYY = (date, locale = "en-US") => new Date(date).toLocaleDateString(locale, {
+  day: "2-digit",
+  month: "2-digit",
+  year: "2-digit"
+});
+/**
+ * @internal
+ *
+ * # Date Utils - formatDateDDMMYYYY
+ *
+ * @category Utilities
+ */
+const formatDateDDMMYYYY = (date, locale = "en-US") => new Date(date).toLocaleDateString(locale, {
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric"
+});
+/**
+ * @internal
+ *
+ * Get the date format in the current locale i.e., "MM/DD/YYYY"
+ *
+ * @category Utilities
+ * @returns Date format as string
+ */
+const getlocaleDateStringFormat = (locale = "en-US") => {
+  var _a;
+  const localeData = findDateLocale(locale) || findDateLocale("en-US");
+  const dateFormatString = (_a = localeData.formatLong) === null || _a === void 0 ? void 0 : _a.date({
+    width: "short"
+  });
+  return dateFormatString;
+};
+/**
+ * @internal
+ *
+ * # Date Utils - Get the date a number of days after a given date
+ *
+ * @category Utilities
+ */
+const daysAfter = (days, date = new Date()) => {
+  date = new Date(date);
+  date.setDate(date.getDate() + days);
+  return date;
+};
+/**
+ * @internal
+ *
+ * # Date Utils - Get a cutoff date for a given date or the current date
+ *
+ * @category Utilities
+ */
+const nextDayCutoff = (cutoff, date = new Date()) => date.getHours() >= cutoff ? daysAfter(1, new Date(date)) : new Date(date);
+/**
+ * @internal
+ *
+ * # Date Utils - get the most recent date from a list of dates
+ *
+ * @category Utilities
+ */
+const mostRecent = (...dates) => new Date(Math.max(...dates.map(Number)));
+/**
+ * @internal
+ *
+ * # Date Utils - Given a date, return a new date with the time set to 00:00:00
+ *
+ * @category Utilities
+ */
+const omitTime = shipDate => {
+  const date = shipDate ? new Date(shipDate) : new Date();
+  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+};
+/**
+ * @internal
+ *
+ * # Date Utils - getExpirationYears
+ *
+ * @category Utilities
+ */
+const getExpirationYears = yearsValid => {
+  const currentYear = new Date().getFullYear();
+  const years = [];
+  for (let i = 0; i < yearsValid; i++) {
+    years.push(`${currentYear + i}`);
+  }
+  return years;
+};
+/**
+ * @internal
+ *
+ * # Date Utilities - sortByCreationDate
+ *
+ * @category Utilities
+ */
+const sortByCreationDate = (a, b, order = "desc") => {
+  const [x, y] = order === "asc" ? [a, b] : [b, a];
+  return new Date(x.createdAt).getTime() - new Date(y.createdAt).getTime();
+};
+/**
+ * @internal
+ *
+ * # Date Utilities - isNowOrInTheFuture
+ *
+ * @category Utilities
+ */
+const isNowOrInTheFuture = date => {
+  if (date) {
+    return (typeof date === "string" ? new Date(date) : date) >= new Date();
+  }
+  return false;
+};
+/**
+ * @internal
+ *
+ * # Date Utilities - getRelativeDates
+ *
+ * @category Utilities
+ */
+const getRelativeDates = from => {
+  const origin = from !== null && from !== void 0 ? from : new Date();
+  return {
+    firstDayOfMonth: new Date(origin.getFullYear(), origin.getMonth(), 1),
+    lastDayOfTheMonth: new Date(origin.getFullYear(), origin.getMonth() + 1, 0),
+    origin,
+    previousMonthFirstDay: new Date(origin.getFullYear(), origin.getMonth() - 1, 1),
+    previousMonthLastDay: new Date(origin.getFullYear(), origin.getMonth() - 1 + 1, 0),
+    thirtyDaysAgo: new Date(new Date().setDate(origin.getDate() - 30))
+  };
+};
+
+export { daysAfter, findDateLocale, formatByDateAndLocale, formatDate, formatDateDDMMYY, formatDateDDMMYYYY, getExpirationYears, getRelativeDates, getlocaleDateStringFormat, isNowOrInTheFuture, mostRecent, nextDayCutoff, omitTime, parseLocaleDate, sortByCreationDate };

package/esm/utilities/error.js

@@ -0,0 +1,45 @@
+import axios from 'axios';
+
+/**
+ * @internal
+ *
+ * # Create Coded Errors Utlity Function
+ *
+ * - This function extracts errors from our `Axios Responses`.
+ *
+ * @category Utilities
+ */
+const createCodedErrors = err => {
+  var _a;
+  if (axios.isAxiosError(err)) {
+    return (_a = err.response) === null || _a === void 0 ? void 0 : _a.data;
+  }
+  return [{
+    errorCode: "unknown",
+    errorSource: "elements",
+    errorType: "unknown",
+    message: err.message
+  }];
+};
+/**
+ * @internal
+ *
+ * - Joins a list of error-like object's messages and throws them as a single error.
+ *
+ * @category Utilities
+ */
+function throwJoinedMessages(errors) {
+  throw new Error(errors.map(e => e.message).join(", "));
+}
+/**
+ * @internal
+ *
+ * - If any CodedErrors exist, throw them all as a single error, otherwise assert errors is null.
+ *
+ * @category Utilities
+ */
+function throwAny(errors) {
+  if (errors) throwJoinedMessages(errors);
+}
+
+export { createCodedErrors, throwAny, throwJoinedMessages };