@shipengine/elements 2.19.0 → 2.20.0

package/esm/elements/purchase-label/components/shipment-form/shipment-form.styles.js

@@ -0,0 +1,44 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  enableInsuranceNotification: theme => ({
+    alignItems: "top",
+    display: "flex",
+    justifyContent: "left",
+    marginLeft: `-${scopeTheme(theme).spacing(2)}px`
+  }),
+  featuredIcon: theme => ({
+    color: scopeTheme(theme).palette.info.main,
+    marginRight: scopeTheme(theme).spacing(1)
+  }),
+  header: {
+    textAlign: "left"
+  },
+  link: theme => ({
+    "&:visited": {
+      color: scopeTheme(theme).palette.secondary.main
+    },
+    fontWeight: scopeTheme(theme).typography.fontWeight.normal
+  }),
+  registerInsuranceFormContainer: theme => ({
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    padding: scopeTheme(theme).spacing(2)
+  }),
+  shipFromEditButton: theme => ({
+    border: 0,
+    fontWeight: scopeTheme(theme).typography.fontWeight.normal,
+    marginTop: scopeTheme(theme).spacing(1.75)
+  }),
+  shipFromSelectContainer: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing(1.375),
+    justifyContent: "space-between",
+    marginBottom: scopeTheme(theme).spacing(1.75)
+  }),
+  well: theme => ({
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    padding: scopeTheme(theme).spacing(2)
+  })
+});
+
+export { styles };

package/esm/elements/purchase-label/components/shipment-form/shipment-schema.js

@@ -0,0 +1,156 @@
+import { __rest } from 'tslib';
+import { convertDimensions } from '../../../../utilities/shipengine/dimensions.js';
+import { convertWeight } from '../../../../utilities/shipengine/weight.js';
+import { z } from 'zod';
+import { SE } from '@shipengine/react-api';
+import { extendZod } from '../../../../extensions/zod.js';
+import { CanadaDeliveredDutyOptions } from '../../../../types/canada-ddp.js';
+import { moneySchema } from '../../../../schemas/shipengine/money.js';
+
+extendZod();
+const getShipmentSchema = ({
+  dimensionsUnit,
+  isContentDescriptionRequired: _isContentDescriptionRequired = false,
+  requiresWindsorFramework: _requiresWindsorFramework = false,
+  isCustomsRequired: _isCustomsRequired = false,
+  requireMeasurements: _requireMeasurements = false,
+  weightUnit
+} = {}) => {
+  const buildDimensionSchema = field => {
+    const baseSchema = z.number().positive().max(999, `schemaErrors.${field}Exceeded`);
+    return _requireMeasurements ? baseSchema : baseSchema.nullishDefault(0);
+  };
+  const baseSchema = z.object({
+    addressId: z.string().nullish(),
+    advancedOptions: z.object({
+      additionalHandling: z.boolean().optional(),
+      canadaDeliveredDuty: z.nativeEnum(CanadaDeliveredDutyOptions).default(CanadaDeliveredDutyOptions.RECIPIENT_PAYS).nullish(),
+      windsorFrameworkDetails: _requiresWindsorFramework ? z.object({
+        movementIndicator: z.nativeEnum(SE.MovementIndicator),
+        notAtRisk: z.boolean().optional().default(false)
+      }) : z.object({
+        movementIndicator: z.nativeEnum(SE.MovementIndicator),
+        notAtRisk: z.boolean().optional().default(false)
+      }).optional()
+    }).nullish(),
+    carrierId: z.string().nullish(),
+    confirmation: z.nativeEnum(SE.ConfirmationType).default(SE.ConfirmationType.NONE),
+    customs: z.object({
+      contents: z.nativeEnum(SE.CustomsContentsType),
+      nonDelivery: z.nativeEnum(SE.CustomsNonDeliveryType)
+    }).nullish(),
+    insuranceProvider: z.nativeEnum(SE.InsuranceProviderType).default(SE.InsuranceProviderType.NONE),
+    packages: z.object({
+      contentDescription: _isContentDescriptionRequired ? z.string().min(1).max(36, "Maximum 36 characters") : z.string().optional().nullable(),
+      dimensions: z.object({
+        height: buildDimensionSchema("height"),
+        length: buildDimensionSchema("length"),
+        width: buildDimensionSchema("width")
+      }).nullish().transform(dims => dims ? convertDimensions(Object.assign(Object.assign({}, dims), {
+        unit: dimensionsUnit !== null && dimensionsUnit !== void 0 ? dimensionsUnit : "inch"
+      })) : undefined),
+      insuredValue: moneySchema.extend({
+        amount: z.number().positive()
+      }).nullishDefault(null),
+      products: _isCustomsRequired ? z.object({
+        countryOfOrigin: z.string().nullishDefault(undefined),
+        description: z.string().nullishDefault(undefined),
+        harmonizedTariffCode: z.string().nullishDefault(undefined),
+        quantity: z.number().int(),
+        value: moneySchema
+      }).array().min(1) : z.object({
+        countryOfOrigin: z.string().nullishDefault(undefined),
+        description: z.string().nullishDefault(undefined),
+        harmonizedTariffCode: z.string().nullishDefault(undefined),
+        quantity: z.number().int(),
+        value: moneySchema
+      }).array().nullish(),
+      type: z.object({
+        carrierId: z.string().nullish(),
+        code: z.string().nullish(),
+        packageId: z.string().nullish()
+      }),
+      weight: (_requireMeasurements ? z.object({
+        fractional: z.number().nonnegative().nullishDefault(0),
+        whole: z.number().nonnegative().nullishDefault(0)
+      }).refine(({
+        whole,
+        fractional
+      }) => whole || fractional, "schemaErrors.required") : z.object({
+        fractional: z.number().nonnegative().nullishDefault(0),
+        whole: z.number().nonnegative().nullishDefault(0)
+      }).nullish()).transform(weight => weight ? convertWeight(weight, weightUnit) : undefined)
+    }).array().min(1),
+    service: z.object({
+      carrierId: z.string().nullish(),
+      serviceCode: z.string().nullish()
+    }).nullish(),
+    shipDate: z.string(),
+    shipmentId: z.string().nullishDefault(undefined)
+  });
+  const browseRatesSchema = baseSchema.extend({
+    __mode: z.literal("browse_rates")
+  });
+  const selectServiceSchema = baseSchema.extend({
+    __mode: z.literal("select_service"),
+    packages: baseSchema.shape.packages.element.extend({
+      dimensions: z.object({
+        height: buildDimensionSchema("height"),
+        length: buildDimensionSchema("length"),
+        width: buildDimensionSchema("width")
+      }).refine(({
+        length,
+        width,
+        height
+      }) => [length, width, height].every(d => d === 0) || [length, width, height].every(d => d !== 0), "schemaErrors.group.allMeasurementsOrNone").nullish().transform(dims => !dims || Object.values(dims).every(d => d === 0) ? undefined : convertDimensions(Object.assign(Object.assign({}, dims), {
+        unit: dimensionsUnit !== null && dimensionsUnit !== void 0 ? dimensionsUnit : "inch"
+      })))
+    }).array().min(1),
+    service: z.object({
+      carrierId: z.string(),
+      serviceCode: z.string()
+    })
+  });
+  return z.discriminatedUnion("__mode", [browseRatesSchema, selectServiceSchema]).transform(_a => {
+    var _b, _c, _d;
+    var {
+        service
+      } = _a,
+      schema = __rest(_a, ["service"]);
+    const _e = schema.packages[0],
+      {
+        dimensions,
+        type: {
+          carrierId,
+          code
+        }
+      } = _e,
+      pkg = __rest(_e, ["dimensions", "type"]);
+    return Object.assign(Object.assign({}, schema), {
+      carrierId: (_b = schema.carrierId) !== null && _b !== void 0 ? _b : undefined,
+      // Clear customs if not required
+      customs: _isCustomsRequired ? schema.customs : undefined,
+      packages: [Object.assign(Object.assign(Object.assign(Object.assign({}, pkg), !_requireMeasurements && !((_c = pkg.weight) === null || _c === void 0 ? void 0 : _c.value) && {
+        weight: {
+          unit: "ounce",
+          value: 16
+        }
+      }), carrierId || code === "package" ? {
+        // provide dimensions for a standard package
+        dimensions,
+        // set the value for packageCode if it has a carrier (standard package)
+        packageCode: code
+      } : {
+        dimensions,
+        // set the value for packageId if it doesn't have a carrier (custom package)
+        packageId: code
+      }), {
+        // Clear products if customs not required
+        products: _isCustomsRequired ? schema.packages[0].products : []
+      })],
+      serviceCode: (_d = service === null || service === void 0 ? void 0 : service.serviceCode) !== null && _d !== void 0 ? _d : undefined
+    });
+  });
+};
+
+export { getShipmentSchema };

package/esm/elements/purchase-label/configure-shipment.js

@@ -0,0 +1,175 @@
+import { __rest, __awaiter } from 'tslib';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { useShipmentMetadata } from '../../hooks/options/use-shipment-metadata.js';
+import { isFlatRatePackageCode } from '../../utilities/shipengine/package.js';
+import merge from 'lodash/merge.js';
+import { useRef, useCallback, useState, useMemo } from 'react';
+import { useRatesForm } from './hooks/use-rates-form.js';
+import { useShipmentForm } from './hooks/use-shipment-form.js';
+import { ShipmentForm } from './components/shipment-form/shipment-form.js';
+import { RateForm } from './components/rate-form/rate-form.js';
+import { useElements } from '../../elements-provider/elements-context-provider.js';
+
+const ConfigureShipment = _a => {
+  var _b, _c;
+  var {
+      errors,
+      features,
+      currency,
+      getPreferredRates,
+      onAddressValidation,
+      onApplyPreset,
+      onBeforeLabelCreate,
+      onChangeAddress,
+      onChangeShipmentFormMode,
+      onLabelCreateFailure,
+      onLabelCreateSuccess,
+      onRateSaved,
+      onRatesCalculated,
+      onShipmentUpdated,
+      printLabelLayout,
+      preferredServiceCodes,
+      salesOrder,
+      shipment,
+      onBeforeRateSaved,
+      shipFromAddresses
+    } = _a,
+    props = __rest(_a, ["errors", "features", "currency", "getPreferredRates", "onAddressValidation", "onApplyPreset", "onBeforeLabelCreate", "onChangeAddress", "onChangeShipmentFormMode", "onLabelCreateFailure", "onLabelCreateSuccess", "onRateSaved", "onRatesCalculated", "onShipmentUpdated", "printLabelLayout", "preferredServiceCodes", "salesOrder", "shipment", "onBeforeRateSaved", "shipFromAddresses"]);
+  const hydrateRef = useRef();
+  const {
+    isInternational
+  } = useShipmentMetadata(shipment);
+  const {
+    getFeatures
+  } = useElements();
+  const defaultFeatures = getFeatures("purchaseLabelFeatures");
+  features = merge(defaultFeatures, features);
+  const _d = useRatesForm({
+      disabledShippingServices: features.disabledShippingServices,
+      getPreferredRates,
+      onBeforeLabelCreate,
+      onBeforeRateSaved,
+      onLabelCreateFailure,
+      onLabelCreateSuccess,
+      onRateSaved: updatedShipment => {
+        var _a;
+        (_a = hydrateRef.current) === null || _a === void 0 ? void 0 : _a.call(hydrateRef, updatedShipment);
+        void (onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(updatedShipment));
+      },
+      onRatesCalculated,
+      onShipmentUpdated,
+      printLabelLayout,
+      shipment
+    }),
+    {
+      displayableRateErrors,
+      requestRates,
+      fetchServicePoints,
+      resetRates,
+      resetLabel,
+      preferredRates
+    } = _d,
+    rateFormProps = __rest(_d, ["displayableRateErrors", "requestRates", "fetchServicePoints", "resetRates", "resetLabel", "preferredRates"]);
+  const _e = useShipmentForm({
+      compatibleCountryCodes: features === null || features === void 0 ? void 0 : features.compatibleCountryCodes,
+      onAddressValidation,
+      onApplyPreset,
+      onChangeAddress: useCallback((oldShipment, newShipment) => __awaiter(void 0, void 0, void 0, function* () {
+        var _f;
+        (_f = hydrateRef.current) === null || _f === void 0 ? void 0 : _f.call(hydrateRef, newShipment);
+        yield onChangeAddress === null || onChangeAddress === void 0 ? void 0 : onChangeAddress(oldShipment, newShipment);
+      }), [onChangeAddress]),
+      onShipmentUpdated: useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
+        var _g;
+        if (shipment.packages[0].weight.value || isFlatRatePackageCode(shipment.packages[0].packageCode)) {
+          yield requestRates(shipment, isInternational);
+          (_g = hydrateRef.current) === null || _g === void 0 ? void 0 : _g.call(hydrateRef, shipment);
+        }
+        void (onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment));
+      }), [isInternational, onShipmentUpdated, requestRates]),
+      onSubmit: useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
+        var _h;
+        fetchServicePoints((_h = shipment.shipFrom) === null || _h === void 0 ? void 0 : _h.postalCode);
+        yield requestRates(shipment, isInternational);
+      }), [requestRates, isInternational, fetchServicePoints]),
+      salesOrder,
+      shipFromAddresses,
+      shipment,
+      useWarehouses: (_b = features === null || features === void 0 ? void 0 : features.shipmentForm) === null || _b === void 0 ? void 0 : _b.useWarehouses
+    }),
+    {
+      charsetWarning,
+      resetSalesOrderShipment,
+      shipFromAddresses: shipFromAddressesWithIds,
+      errors: shipmentFormErrors,
+      warehouses
+    } = _e,
+    shipmentFormProps = __rest(_e, ["charsetWarning", "resetSalesOrderShipment", "shipFromAddresses", "errors", "warehouses"]);
+  const [currentMode, setCurrentMode] = useState();
+  const handleChangeMode = useCallback(trackMode => {
+    setCurrentMode(trackMode.selectedMode);
+    void (onChangeShipmentFormMode === null || onChangeShipmentFormMode === void 0 ? void 0 : onChangeShipmentFormMode(trackMode));
+  }, [onChangeShipmentFormMode]);
+  const handleOnDirty = useCallback(() => {
+    resetRates();
+    resetLabel();
+    resetSalesOrderShipment();
+  }, [resetRates, resetLabel, resetSalesOrderShipment]);
+  // combines the preffered service codes provided in the props with the returned service codes from getPreferredRates
+  const mergedPreferredServiceCodes = useMemo(() => {
+    var _a;
+    // Get preferred rates service codes
+    const preferredRatesServiceCodes = [...((_a = preferredRates === null || preferredRates === void 0 ? void 0 : preferredRates.map(r => r === null || r === void 0 ? void 0 : r.rate.serviceCode)) !== null && _a !== void 0 ? _a : [])];
+    const serviceCodes = [...(preferredServiceCodes !== null && preferredServiceCodes !== void 0 ? preferredServiceCodes : []), ...preferredRatesServiceCodes];
+    if (!serviceCodes.length) {
+      return;
+    }
+    // remove duplicate service codes
+    return serviceCodes.filter((item, pos, self) => {
+      return self.indexOf(item) === pos;
+    });
+  }, [preferredRates, preferredServiceCodes]);
+  if ((features === null || features === void 0 ? void 0 : features.enableErrorWhenShipmentCancelled) && (errors === null || errors === void 0 ? void 0 : errors.filter(e => e.message === "shipment_cancelled"))) {
+    throw new Error("errorMessages.shipmentCancelled");
+  }
+  const handleVatRegistrationComplete = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (shipment && shipment.packages[0].weight.value) {
+      yield requestRates(shipment, isInternational);
+    }
+  });
+  // Capture ship from address schema validation error to toggle form and display error message
+  const hasShipFromAddressErrors = useMemo(() => !!(shipmentFormErrors === null || shipmentFormErrors === void 0 ? void 0 : shipmentFormErrors.filter(error => error.errorCode === "invalid_address")), [shipmentFormErrors]);
+  return jsxs(Fragment, {
+    children: [jsx(ShipmentForm, Object.assign({}, shipmentFormProps, props, ((_c = features === null || features === void 0 ? void 0 : features.shipmentForm) === null || _c === void 0 ? void 0 : _c.useWarehouses) && {
+      warehouses
+    }, {
+      charsetWarning: charsetWarning,
+      currency: currency,
+      defaultFeatures: defaultFeatures,
+      disabledShippingServices: features === null || features === void 0 ? void 0 : features.disabledShippingServices,
+      features: features.shipmentForm,
+      hasShipFromAddressErrors: hasShipFromAddressErrors,
+      hydrateRef: hydrateRef,
+      onChangeMode: handleChangeMode,
+      onDirty: handleOnDirty,
+      shipFromAddresses: shipFromAddressesWithIds
+    })), jsx(RateForm, Object.assign({}, rateFormProps, {
+      currency: currency,
+      defaultFeatures: defaultFeatures,
+      disabled: charsetWarning === null || charsetWarning === void 0 ? void 0 : charsetWarning.error,
+      // Only show rate errors in Select Service mode
+      displayableRateErrors: currentMode === "select_service" ? displayableRateErrors : undefined,
+      displayableShipmentErrors: shipmentFormProps.displayableErrors,
+      features: features === null || features === void 0 ? void 0 : features.rateForm,
+      fetchServicePoints: fetchServicePoints,
+      hasShipFromAddressErrors: hasShipFromAddressErrors,
+      onSelectRate: resetLabel,
+      onVatRegistrationComplete: handleVatRegistrationComplete,
+      preferredRates: preferredRates,
+      preferredServiceCodes: mergedPreferredServiceCodes,
+      salesOrder: salesOrder
+    }))]
+  });
+};
+
+export { ConfigureShipment };

package/esm/elements/purchase-label/hooks/index.js

@@ -0,0 +1,20 @@
+export { useAddress } from './use-address.js';
+export { useCustoms } from './use-customs.js';
+export { usePresets } from './use-presets.js';
+export { useRatesForm } from './use-rates-form.js';
+export { useShipmentForm } from './use-shipment-form.js';
+export { useRatesWithCache } from './use-rates-with-cache.js';
+export { useRequestRates } from './use-request-rates.js';
+export { useRequestPreferredRates } from './use-request-preferred-rates.js';
+export { useShipFromAddressOptions } from './use-ship-from-address-options.js';
+export { useServicePoints } from './use-service-points.js';
+export { useWindsorFramework } from './use-windsor-framework.js';
+export { useRateOptions } from './use-rate-options.js';
+export { usePackageOptions } from './use-package-options/use-package-options.js';
+export { useInsuranceProviderOptions } from './use-insurance-provider-options.js';
+export { useMovementIndicatorOptions } from './use-movement-indicator-options.js';
+export { useCustomsNonDeliveryOptions } from './use-customs-non-delivery-options.js';
+export { useCustomsContentsOptions } from './use-customs-contents-options.js';
+export { useConfirmationOptions } from './use-confirmation-options.js';
+export { useShippingPresetsOptions } from './use-shipping-presets-options.js';
+export { useServiceCodeOptions } from './use-service-code-options/use-service-code-options.js';

package/esm/elements/purchase-label/hooks/use-address.js

@@ -0,0 +1,190 @@
+import { __awaiter } from 'tslib';
+import { isNowOrInTheFuture } from '../../../utilities/date.js';
+import { isDomesticAddress, addEmailToValidation, isEmptyAddress } from '../../../utilities/shipengine/address.js';
+import isEqual from 'lodash/isEqual.js';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useValidateAddresses, useUpdateSalesOrderShipment, useParseAddress } from '@shipengine/react-api';
+
+const useAddress = ({
+  compatibleCountryCodes,
+  onChange,
+  onValidation,
+  salesOrder,
+  shipment
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    error: validateAddressErrors,
+    mutateAsync: validateAddresses
+  } = useValidateAddresses();
+  const {
+    error: updateShipmentErrors,
+    mutateAsync: updateShipment
+  } = useUpdateSalesOrderShipment();
+  const {
+    error: parseAddressErrors,
+    mutateAsync: parseAddress,
+    reset: resetParseAddress
+  } = useParseAddress();
+  const [addressPreference, _setAddressPreference] = useState();
+  const [loading, setLoading] = useState(true);
+  const [currentShipmentId, setCurrentShipmentId] = useState(shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId);
+  const setAddressPreference = useCallback((...args) => {
+    _setAddressPreference(...args);
+    if (args.length > 0 && args[0]) {
+      setLoading(false);
+    }
+  }, [_setAddressPreference]);
+  const toggle = useCallback(() => {
+    let updatedSelection = undefined;
+    setAddressPreference(prevState => {
+      if (!prevState) throw new Error("Cannot update address preference before it is set.");
+      updatedSelection = prevState.alternative;
+      if (!updatedSelection) throw new Error("Cannot select an undefined address.");
+      return Object.assign(Object.assign({}, prevState), {
+        alternative: prevState.selection,
+        alternativeSource: prevState.selectionSource,
+        selection: updatedSelection,
+        selectionSource: prevState.alternativeSource
+      });
+    });
+    if (!updatedSelection) throw new Error("Cannot select an undefined address.");
+    return updatedSelection;
+  }, [setAddressPreference]);
+  const resetAddressPreference = useCallback((validation, fallbackAddress) => {
+    const {
+      matchedAddress,
+      originalAddress,
+      status
+    } = validation;
+    // If the address is domestic, we always default to the matchedAddress if it exists.
+    // If the address is international, we always default to the original due to issues with SE-API's validation
+    const selectionSource = isDomesticAddress(originalAddress) && status !== "error" ? matchedAddress ? "matchedAddress" : "originalAddress" : "originalAddress";
+    const alternativeSource = selectionSource === "matchedAddress" ? "originalAddress" : "matchedAddress";
+    const newAddressPreference = Object.assign(Object.assign(Object.assign({}, validation), isEqual(originalAddress, matchedAddress) ? {
+      // An exact match in SE-API will *sometimes* return a matchedAddress exactly mirroring the originalAddress,
+      // but it's supposed to return no matchedAddress at all. We handle this case by placing the fallbackAddress
+      // (if given) into the originalAddress slot.
+      isModified: true,
+      originalAddress: fallbackAddress !== null && fallbackAddress !== void 0 ? fallbackAddress : originalAddress
+    } : {
+      // Original and matched addresses are different
+      isModified: !!matchedAddress
+    }), {
+      alternativeSource,
+      selectionSource,
+      toggle
+    });
+    const alternative = newAddressPreference[alternativeSource];
+    const selection = newAddressPreference[selectionSource];
+    if (!selection) throw new Error("Cannot select an undefined address.");
+    const updatedAddressPreference = Object.assign(Object.assign({}, newAddressPreference), {
+      alternative,
+      selection
+    });
+    setAddressPreference(updatedAddressPreference);
+    return updatedAddressPreference;
+  }, [setAddressPreference, toggle]);
+  const handleParseAddress = ({
+    fullAddress
+  }) => __awaiter(void 0, void 0, void 0, function* () {
+    const parseResult = yield parseAddress({
+      text: fullAddress
+    });
+    return parseResult;
+  });
+  const handleValidateAddress = useCallback((address, fallbackAddress) => __awaiter(void 0, void 0, void 0, function* () {
+    if (compatibleCountryCodes && !compatibleCountryCodes.includes(address.countryCode)) {
+      resetAddressPreference({
+        messages: [],
+        originalAddress: address,
+        status: "unverified"
+      });
+      return;
+    }
+    const result = yield validateAddresses([address]);
+    const [addressValidation] = result !== null && result !== void 0 ? result : [];
+    const addressValidationWithEmail = addEmailToValidation(addressValidation, address === null || address === void 0 ? void 0 : address.email);
+    if (addressValidationWithEmail) {
+      const updatedAddressPreference = resetAddressPreference(addressValidationWithEmail, fallbackAddress);
+      yield onValidation === null || onValidation === void 0 ? void 0 : onValidation(updatedAddressPreference);
+      return updatedAddressPreference;
+    } else {
+      // validate_and_clean failure is preventing the address preference object
+      // from being refreshed. Manualy set the address preference to an error state.
+      // with the original address set to the newly updated shipment ship to
+      // This will display the not validated error message with the edited address to the user.
+      resetAddressPreference({
+        messages: [],
+        originalAddress: address,
+        status: "error"
+      });
+      return;
+    }
+  }), [compatibleCountryCodes, onValidation, resetAddressPreference, validateAddresses]);
+  const handleChangeAddress = useCallback((shipTo, {
+    shouldValidate
+  }) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    if (!shipment) throw new Error("shipment not found");
+    let updatedAddressPreference;
+    if (shouldValidate) {
+      updatedAddressPreference = yield handleValidateAddress(shipTo);
+    }
+    const updatedShipment = yield updateShipment(Object.assign(Object.assign({}, shipment), {
+      shipDate: isNowOrInTheFuture(shipment.shipDate) ? shipment.shipDate : undefined,
+      shipTo: (_a = updatedAddressPreference === null || updatedAddressPreference === void 0 ? void 0 : updatedAddressPreference.selection) !== null && _a !== void 0 ? _a : shipTo
+    }));
+    yield onChange === null || onChange === void 0 ? void 0 : onChange(shipment, updatedShipment);
+    return updatedShipment;
+  }), [handleValidateAddress, onChange, shipment, updateShipment]);
+  useEffect(() => {
+    if ((!addressPreference || (shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId) !== currentShipmentId) && (shipment === null || shipment === void 0 ? void 0 : shipment.shipTo) &&
+    // without this check it will keep reverting a one-off label's address preference back to empty for some reason
+    !isEmptyAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo)) {
+      setLoading(true);
+      void handleValidateAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo);
+      setCurrentShipmentId(shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId);
+    } else {
+      setLoading(false);
+    }
+  }, [addressPreference, currentShipmentId, handleValidateAddress, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo, shipment === null || shipment === void 0 ? void 0 : shipment.shipTo, shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId]);
+  const charsetWarning = useMemo(() => {
+    var _a;
+    const rest = (_a = addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection) !== null && _a !== void 0 ? _a : {};
+    const addressMinusGeolocation = rest;
+    return Object.keys(addressMinusGeolocation || {}).reduce((warning, key) => {
+      if (warning && warning.error) return warning;
+      const value = addressMinusGeolocation[key];
+      if (!value) return warning;
+      if (/^(?:[\t-\r -~\xA0-\xAC\xAE-\xB1\xB4\xB6-\xB8\xBA\xBB\xBF-\u02B8\u02C2-\u02C5\u02D2-\u02EB\u02ED\u02EF-\u02FF\u0375\u037E\u0384\u0385\u0387\u03F6\u0482\u055A-\u055F\u0589\u058A\u058D-\u058F\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0606-\u060F\u061B\u061D-\u061F\u066A-\u066D\u06D4\u06DE\u06E9\u06FD\u06FE\u0700-\u070D\u07F6-\u07F9\u07FE\u07FF\u0830-\u083E\u085E\u0888\u0964\u0965\u0970\u09F2\u09F3\u09FA\u09FB\u09FD\u0A76\u0AF0\u0AF1\u0B70\u0BF3-\u0BFA\u0C77\u0C7F\u0C84\u0D4F\u0D79\u0DF4\u0E3F\u0E4F\u0E5A\u0E5B\u0F01-\u0F17\u0F1A-\u0F1F\u0F34\u0F36\u0F38\u0F3A-\u0F3D\u0F85\u0FBE-\u0FC5\u0FC7-\u0FCC\u0FCE-\u0FDA\u104A-\u104F\u109E\u109F\u10FB\u1360-\u1368\u1390-\u1399\u1400\u166D\u166E\u1680\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DB\u1800-\u180A\u1940\u1944\u1945\u19DE-\u19FF\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B6A\u1B74-\u1B7E\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u1D00-\u1D25\u1D2C-\u1D5C\u1D62-\u1D65\u1D6B-\u1D77\u1D79-\u1DBE\u1E00-\u1EFF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2000-\u200A\u2010-\u2029\u202F-\u205F\u2071\u207A-\u207F\u208A-\u208E\u2090-\u209C\u20A0-\u20C0\u2100\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129-\u212B\u212E\u2132\u213A\u213B\u2140-\u2144\u214A-\u214F\u2160-\u2188\u218A\u218B\u2190-\u2426\u2440-\u244A\u249C-\u24E9\u2500-\u2775\u2794-\u2B73\u2B76-\u2B95\u2B97-\u2BFF\u2C60-\u2C7F\u2CE5-\u2CEA\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E5D\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3000-\u3004\u3008-\u3020\u3030\u3036\u3037\u303D-\u303F\u309B\u309C\u30A0\u30FB\u3190\u3191\u3196-\u319F\u31C0-\u31E3\u3200-\u321E\u322A-\u3247\u3250\u3260-\u327F\u328A-\u32B0\u32C0-\u33FF\u4DC0-\u4DFF\uA490-\uA4C6\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA700-\uA716\uA720-\uA787\uA789-\uA7CA\uA7D0\uA7D1\uA7D3\uA7D5-\uA7D9\uA7F2-\uA7FF\uA828-\uA82B\uA836-\uA839\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAA77-\uAA79\uAADE\uAADF\uAAF0\uAAF1\uAB30-\uAB64\uAB66-\uAB6B\uABEB\uFB00-\uFB06\uFB29\uFBB2-\uFBC2\uFD3E-\uFD4F\uFDCF\uFDFC-\uFDFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFEFF\uFF01-\uFF0F\uFF1A-\uFF65\uFFE0-\uFFE6\uFFE8-\uFFEE\uFFFC\uFFFD]|\uD800[\uDD00-\uDD02\uDD37-\uDD3F\uDD79-\uDD89\uDD8C-\uDD8E\uDD90-\uDD9C\uDDA0\uDDD0-\uDDFC\uDF9F\uDFD0]|\uD801[\uDD6F\uDF80-\uDF85\uDF87-\uDFB0\uDFB2-\uDFBA]|\uD802[\uDC57\uDC77\uDC78\uDD1F\uDD3F\uDE50-\uDE58\uDE7F\uDEC8\uDEF0-\uDEF6\uDF39-\uDF3F\uDF99-\uDF9C]|\uD803[\uDEAD\uDF55-\uDF59\uDF86-\uDF89]|\uD804[\uDC47-\uDC4D\uDCBB\uDCBC\uDCBE-\uDCC1\uDD40-\uDD43\uDD74\uDD75\uDDC5-\uDDC8\uDDCD\uDDDB\uDDDD-\uDDDF\uDE38-\uDE3D\uDEA9]|\uD805[\uDC4B-\uDC4F\uDC5A\uDC5B\uDC5D\uDCC6\uDDC1-\uDDD7\uDE41-\uDE43\uDE60-\uDE6C\uDEB9\uDF3C-\uDF3F]|\uD806[\uDC3B\uDD44-\uDD46\uDDE2\uDE3F-\uDE46\uDE9A-\uDE9C\uDE9E-\uDEA2\uDF00-\uDF09]|\uD807[\uDC41-\uDC45\uDC70\uDC71\uDEF7\uDEF8\uDF43-\uDF4F\uDFD5-\uDFF1\uDFFF]|\uD809[\uDC70-\uDC74]|\uD80B[\uDFF1\uDFF2]|\uD81A[\uDE6E\uDE6F\uDEF5\uDF37-\uDF3F\uDF44\uDF45]|\uD81B[\uDE97-\uDE9A\uDFE2]|\uD82F[\uDC9C\uDC9F]|\uD833[\uDF50-\uDFC3]|\uD834[\uDC00-\uDCF5\uDD00-\uDD26\uDD29-\uDD64\uDD6A-\uDD6C\uDD83\uDD84\uDD8C-\uDDA9\uDDAE-\uDDEA\uDE00-\uDE41\uDE45\uDF00-\uDF56]|\uD835[\uDEC1\uDEDB\uDEFB\uDF15\uDF35\uDF4F\uDF6F\uDF89\uDFA9\uDFC3]|\uD836[\uDC00-\uDDFF\uDE37-\uDE3A\uDE6D-\uDE74\uDE76-\uDE83\uDE85-\uDE8B]|\uD837[\uDF00-\uDF1E\uDF25-\uDF2A]|\uD838[\uDD4F\uDEFF]|\uD83A[\uDD5E\uDD5F]|\uD83B[\uDCAC\uDCB0\uDD2E\uDEF0\uDEF1]|\uD83C[\uDC00-\uDC2B\uDC30-\uDC93\uDCA0-\uDCAE\uDCB1-\uDCBF\uDCC1-\uDCCF\uDCD1-\uDCF5\uDD0D-\uDDAD\uDDE6-\uDE02\uDE10-\uDE3B\uDE40-\uDE48\uDE50\uDE51\uDE60-\uDE65\uDF00-\uDFFF]|\uD83D[\uDC00-\uDED7\uDEDC-\uDEEC\uDEF0-\uDEFC\uDF00-\uDF76\uDF7B-\uDFD9\uDFE0-\uDFEB\uDFF0]|\uD83E[\uDC00-\uDC0B\uDC10-\uDC47\uDC50-\uDC59\uDC60-\uDC87\uDC90-\uDCAD\uDCB0\uDCB1\uDD00-\uDE53\uDE60-\uDE6D\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC5\uDECE-\uDEDB\uDEE0-\uDEE8\uDEF0-\uDEF8\uDF00-\uDF92\uDF94-\uDFCA])+$/.test(value)) return warning;
+      if (key === "name" || key === "companyName") {
+        return {
+          error: false,
+          message: t("charsetWarnings.name.message")
+        };
+      }
+      return {
+        error: true,
+        message: t("charsetWarnings.address.message"),
+        title: t("charsetWarnings.address.title")
+      };
+    }, undefined);
+  }, [addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection, t]);
+  const errors = [...(validateAddressErrors !== null && validateAddressErrors !== void 0 ? validateAddressErrors : []), ...(updateShipmentErrors !== null && updateShipmentErrors !== void 0 ? updateShipmentErrors : [])];
+  return {
+    addressErrors: errors.length > 0 ? errors : undefined,
+    addressLoading: loading,
+    addressPreference,
+    charsetWarning,
+    handleChangeAddress,
+    handleParseAddress,
+    parseAddressErrors: parseAddressErrors !== null && parseAddressErrors !== void 0 ? parseAddressErrors : undefined,
+    resetParseAddress
+  };
+};
+
+export { useAddress };

package/esm/elements/purchase-label/hooks/use-confirmation-options.js

@@ -0,0 +1,25 @@
+import { camelize } from 'humps';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SE } from '@shipengine/react-api';
+
+/**
+ * @internal
+ *
+ * # Delivery Confirmation Options Hook
+ *
+ * @category Hooks
+ */
+const useConfirmationOptions = () => {
+  const {
+    t
+  } = useTranslation("common");
+  return useMemo(() => Object.values(SE.ConfirmationType)
+  // TODO: Remove this filter once these options are better supported by UpdateShipment
+  .filter(v => v !== SE.ConfirmationType.DELIVERY_MAILED && v !== SE.ConfirmationType.DIRECT_SIGNATURE && v !== SE.ConfirmationType.VERBAL_CONFIRMATION).flatMap(v => v === "none" ? [] : {
+    label: t(`confirmationTypes.${camelize(v)}`),
+    value: v
+  }), [t]);
+};
+
+export { useConfirmationOptions };

package/esm/elements/purchase-label/hooks/use-customs-contents-options.js

@@ -0,0 +1,23 @@
+import { camelize } from 'humps';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SE } from '@shipengine/react-api';
+
+/**
+ * @internal
+ *
+ * # Customs Contents Options Hook
+ *
+ * @category Hooks
+ */
+const useCustomsContentsOptions = () => {
+  const {
+    t
+  } = useTranslation("common");
+  return useMemo(() => Object.values(SE.CustomsContentsType).flatMap(v => ({
+    label: t(`customs.contents.${camelize(v)}`),
+    value: v
+  })), [t]);
+};
+
+export { useCustomsContentsOptions };

package/esm/elements/purchase-label/hooks/use-customs-non-delivery-options.js

@@ -0,0 +1,23 @@
+import { camelize } from 'humps';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SE } from '@shipengine/react-api';
+
+/**
+ * @internal
+ *
+ * # Customs Non-Delivery Options Hooks
+ *
+ * @category Hooks
+ */
+const useCustomsNonDeliveryOptions = () => {
+  const {
+    t
+  } = useTranslation("common");
+  return useMemo(() => Object.values(SE.CustomsNonDeliveryType).flatMap(v => ({
+    label: t(`customs.nonDelivery.${camelize(v)}`),
+    value: v
+  })), [t]);
+};
+
+export { useCustomsNonDeliveryOptions };