@shipengine/elements 0.4.8 → 0.5.1

package/components/rate-form/rate-form.d.ts

@@ -3,9 +3,10 @@ import SE from "@shipengine/elements-core";
 export declare type RateFormProps = {
     errors?: SE.CodedError[];
     loading?: boolean;
-    onLabelCreated?: (label: SE.Label) => void;
+    onLabelCreateFailure?: () => void;
+    onLabelCreateSuccess?: (label: SE.Label, shipment?: SE.SalesOrderShipment) => void;
     onRateSaved?: (shipment: SE.SalesOrderShipment) => void;
     rates?: SE.Rate[];
     shipment?: SE.SalesOrderShipment;
 };
-export declare const RateForm: ({ errors, loading, onLabelCreated, onRateSaved, rates, shipment, }: RateFormProps) => JSX.Element;
+export declare const RateForm: ({ errors, loading, onLabelCreateFailure, onLabelCreateSuccess, onRateSaved, rates, shipment, }: RateFormProps) => JSX.Element;

package/components/sales-order/sales-order.d.ts

@@ -1,11 +1,22 @@
 /// <reference types="react" />
 import SE from "@shipengine/elements-core";
+import { Templates, UseShippingPresetsOptionsProps } from "@shipengine/elements-ui";
+import { ShipmentFormProps } from "../shipment-form";
+import { RateFormProps } from "../rate-form";
 export declare type SalesOrderProps = {
     externalOrderId?: string;
     externalOrderNumber?: string;
+    onAddressValidation?: (addressPreference: Templates.AddressPreference) => void;
+    onChangeAddress?: ShipmentFormProps["onChangeAddress"];
+    onLabelCreateFailure?: RateFormProps["onLabelCreateFailure"];
+    onLabelCreateSuccess?: RateFormProps["onLabelCreateSuccess"];
     onLoad?: (salesOrder: SE.SalesOrder, shipments: SE.SalesOrderShipment[]) => void;
-    onPurchase?: (label: SE.Label) => void;
+    onRateSaved?: RateFormProps["onRateSaved"];
+    onRatesReturned?: (rates: SE.Rate[], shipment: SE.SalesOrderShipment) => void;
+    onChangeShipmentFormMode?: ShipmentFormProps["onChangeShipmentFormMode"];
+    onToggleAddressPreferenceDisclosure?: ShipmentFormProps["onToggleAddressPreferenceDisclosure"];
     orderSourceCode?: string;
     salesOrderId?: string;
+    shippingPresets?: UseShippingPresetsOptionsProps;
 };
-export declare const SalesOrder: ({ externalOrderId, externalOrderNumber, onLoad, onPurchase, orderSourceCode, salesOrderId, }: SalesOrderProps) => JSX.Element;
+export declare const SalesOrder: ({ externalOrderId, externalOrderNumber, onAddressValidation, onChangeAddress, onLabelCreateFailure, onLabelCreateSuccess, onLoad, onRateSaved, onRatesReturned, onChangeShipmentFormMode, onToggleAddressPreferenceDisclosure, orderSourceCode, salesOrderId, shippingPresets, }: SalesOrderProps) => JSX.Element;

package/components/shipment/shipment.d.ts

@@ -2,7 +2,8 @@
 import SE from "@shipengine/elements-core";
 export declare type ShipmentProps = {
     shipmentId?: string;
-    onClickVoidLabel?: (label: SE.Label) => void;
     onClickPurchaseLabel?: (order: SE.SalesOrder) => void;
+    onClickPrintLabel?: () => void;
+    onClickVoidLabel?: (label: SE.Label) => void;
 };
-export declare const Shipment: ({ shipmentId, onClickVoidLabel, onClickPurchaseLabel }: ShipmentProps) => JSX.Element;
+export declare const Shipment: ({ onClickPrintLabel, onClickPurchaseLabel, onClickVoidLabel, shipmentId, }: ShipmentProps) => JSX.Element;

package/components/shipment-form/shipment-form.d.ts

@@ -1,16 +1,23 @@
 /// <reference types="react" />
 import { Templates } from "@shipengine/elements-ui";
 import SE from "@shipengine/elements-core";
+import { UseShippingPresetsOptionsProps } from "@shipengine/elements-ui";
 export declare type ShipmentFormMode = "browse_rates" | "select_service";
 export declare type ShipmentUpdatedOptions = {
     shouldCalculateRates?: boolean;
     shouldResetAddressPreference?: boolean;
 };
+declare type ShipmentFormTemplateProps = React.ComponentProps<typeof Templates.ShipmentForm>;
 export declare type ShipmentFormProps = {
     addressPreference?: Templates.AddressPreference;
+    onChangeAddress?: (addressPreference: Templates.AddressPreference) => any | void;
+    onChangeShipmentFormMode?: ShipmentFormTemplateProps["onChangeMode"];
     onShipmentDirty: () => void;
     onShipmentUpdated: (shipment: SE.SalesOrderShipment, options?: ShipmentUpdatedOptions) => void;
+    onToggleAddressPreferenceDisclosure?: ShipmentFormTemplateProps["onToggleAddressPreferenceDisclosure"];
     salesOrder: SE.SalesOrder;
     shipment?: SE.SalesOrderShipment;
+    shippingPresets?: UseShippingPresetsOptionsProps;
 };
-export declare const ShipmentForm: ({ addressPreference, onShipmentDirty, onShipmentUpdated, salesOrder, shipment, }: ShipmentFormProps) => JSX.Element;
+export declare const ShipmentForm: ({ addressPreference, onChangeAddress, onChangeShipmentFormMode, onShipmentDirty, onShipmentUpdated, onToggleAddressPreferenceDisclosure, salesOrder, shipment, shippingPresets, }: ShipmentFormProps) => JSX.Element;
+export {};

package/hooks/use-address-preference.d.ts

@@ -6,5 +6,21 @@ export declare type ResetAddressPreferenceParams = {
 };
 export declare const useAddressPreference: () => {
     readonly addressPreference: Templates.AddressPreference | undefined;
-    readonly resetAddressPreference: ({ validation, fallbackAddress }: ResetAddressPreferenceParams) => void;
+    readonly resetAddressPreference: ({ validation, fallbackAddress }: ResetAddressPreferenceParams) => {
+        alternative: SE.Address | undefined;
+        selection: SE.Address;
+        status: "unverified" | "verified" | "warning" | "error";
+        originalAddress: SE.Address;
+        matchedAddress?: SE.Address | undefined;
+        messages: {
+            code: "a1000" | "a1001" | "a1002" | "a1003" | "a1004" | "a1005" | "a1006" | "a1007" | "a1008" | "r1000" | "r1001" | "r1002" | "r1003";
+            message: string;
+            type: "warning" | "error" | "info";
+            detailCode: "address_not_found" | "city_locality_changed_or_added" | "city_locality_max_length_exceeded" | "coded_to_community_level" | "coded_to_neighborhood_level" | "coded_to_rooftop_interpolation_level" | "coded_to_rooftop_level" | "coded_to_state_level" | "coded_to_street_lavel" | "company_name_max_length_exceeded" | "country_invalid_length" | "double_dependent_locality_changed_or_added" | "house_number_changed" | "incompatible_paired_labels" | "invalid_box_number" | "invalid_charge_event" | "invalid_house_number" | "invalid_postal_code" | "line1_min_max_length" | "line2_max_length_exceeded" | "line3_max_length_exceeded" | "minimum_postal_code_verification_failed" | "missing_box_number" | "missing_cmra_or_private_mail_box_number" | "missing_house_number" | "multiple_directionals" | "multiple_matches" | "name_max_length_exceeded" | "non_supported_country" | "organization_changed_or_added" | "partially_verified_to_city_level" | "partially_verified_to_premise_level" | "partially_verified_to_state_level" | "partially_verified_to_street_level" | "phone_max_length_exceeded" | "po_box_changed_or_added" | "postal_code_changed_or_added" | "premise_type_changed_or_added" | "state_province_changed_or_added" | "state_province_max_length_exceeded" | "street_direction_changed_or_added" | "street_does_not_match_unique_street_name" | "street_name_spelling_changed_or_added" | "street_name_type_changed_or_added" | "subadministrative_area_changed_or_added" | "subnational_area_changed_or_added" | "suite_has_no_secondaries" | "suite_missing" | "suite_not_valid" | "suite_type_changed_or_added" | "suite_unit_number_changed_or_added" | "unsupported_country" | "urbanization_changed" | "verified_to_city_level" | "verified_to_premise_level" | "verified_to_state_level" | "verified_to_street_level" | "verified_to_suite_level";
+        }[];
+        alternativeSource: "originalAddress" | "matchedAddress";
+        isModified: boolean;
+        toggle: () => SE.Address;
+        selectionSource: "originalAddress" | "matchedAddress";
+    };
 };

package/index.cjs

@@ -2731,11 +2731,15 @@ function __awaiter(thisArg, _arguments, P, generator) {
 
 const ShipmentForm = ({
   addressPreference,
+  onChangeAddress,
+  onChangeShipmentFormMode,
   onShipmentDirty,
   // Must be referentially stable
   onShipmentUpdated,
+  onToggleAddressPreferenceDisclosure,
   salesOrder,
-  shipment
+  shipment,
+  shippingPresets
 }) => {
   const {
     t
@@ -2775,7 +2779,7 @@ const ShipmentForm = ({
   }), [createOrUpdateShipment, onShipmentUpdated]); // Handles any changes to the ship to address as well as handling user
   // selecting fall-back address
 
-  const handleChangeAddress = react.useCallback((payload, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
+  const handleChangeAddress = (payload, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
     const updatedShipment = yield createOrUpdateShipment(Object.assign(Object.assign(Object.assign({}, shipment), {
       shipTo: payload
     }), options.shouldValidate && {
@@ -2788,8 +2792,29 @@ const ShipmentForm = ({
         shouldResetAddressPreference: options.shouldValidate
       });
     }
-  }), [createOrUpdateShipment, onShipmentUpdated, shipment]);
-  const handleSubmitParseShipTo = react.useCallback(({
+  });
+
+  const handleApplyPreset = preset => __awaiter(void 0, void 0, void 0, function* () {
+    const updatedShipment = yield createOrUpdateShipment(Object.assign(Object.assign(Object.assign({}, shipment), preset.serviceCode && preset.carrierId && {
+      carrierId: preset.carrierId,
+      serviceCode: preset.serviceCode
+    }), {
+      confirmation: preset.confirmation,
+      insuranceProvider: preset.insuranceProvider,
+      packages: preset.weight && preset.packageCode ? [{
+        dimensions: preset.dimensions,
+        weight: preset.weight,
+        insuredValue: preset.insuredValue,
+        packageCode: preset.packageCode
+      }] : undefined
+    }));
+    if (updatedShipment) onShipmentUpdated(updatedShipment, {
+      shouldCalculateRates: !!(preset.dimensions && preset.weight),
+      shouldResetAddressPreference: false
+    });
+  });
+
+  const handleSubmitParseShipTo = ({
     fullAddress
   }) => __awaiter(void 0, void 0, void 0, function* () {
     const parseResult = yield parseAddress.trigger({
@@ -2797,19 +2822,35 @@ const ShipmentForm = ({
     });
     if (!parseResult) logger.warn("Address parser returned no results");
     return parseResult;
-  }), [logger, parseAddress]);
-  const errors = react.useMemo(() => [...(updateShipment.errors || []), ...(createShipment.errors || [])], [updateShipment.errors, createShipment.errors]);
+  });
+
+  const handleUpdateCustoms = customs => __awaiter(void 0, void 0, void 0, function* () {
+    const updatedShipment = yield createOrUpdateShipment(Object.assign(Object.assign({}, shipment), {
+      customs
+    }));
+
+    if (updatedShipment) {
+      onShipmentUpdated(updatedShipment);
+    }
+  });
+
+  const errors = [...(updateShipment.errors || []), ...(createShipment.errors || [])];
   return jsxRuntime.jsx(elementsUi.Templates.ShipmentForm, {
     addressPreference: addressPreference,
+    onToggleAddressPreferenceDisclosure: onToggleAddressPreferenceDisclosure,
+    onChangeMode: onChangeShipmentFormMode,
     carriers: carriers.data,
     customPackageTypes: customPackageTypes.data,
     errors: errors,
+    onApplyPreset: handleApplyPreset,
     onChangeAddress: handleChangeAddress,
     onDirty: onShipmentDirty,
     onSubmit: handleSubmit,
+    onUpdateCustoms: handleUpdateCustoms,
     onSubmitParseShipTo: handleSubmitParseShipTo,
     salesOrder: salesOrder,
     shipment: shipment,
+    shippingPresets: shippingPresets,
     warehouses: warehouses.data
   });
 };
@@ -2817,7 +2858,8 @@ const ShipmentForm = ({
 const RateForm = ({
   errors,
   loading: _loading = false,
-  onLabelCreated,
+  onLabelCreateFailure,
+  onLabelCreateSuccess,
   onRateSaved,
   rates,
   shipment
@@ -2830,8 +2872,13 @@ const RateForm = ({
   });
 
   const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
-    const label = yield createLabel.trigger(values);
-    if (label) onLabelCreated === null || onLabelCreated === void 0 ? void 0 : onLabelCreated(label);
+    const label = yield createLabel.trigger(values.rate);
+
+    if (label) {
+      onLabelCreateSuccess === null || onLabelCreateSuccess === void 0 ? void 0 : onLabelCreateSuccess(label, shipment);
+    } else {
+      onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure();
+    }
   });
 
   const handleSave = rate => __awaiter(void 0, void 0, void 0, function* () {
@@ -2845,10 +2892,9 @@ const RateForm = ({
   });
 
   const carriers = elementsCore.useListCarriers();
-  const mergedErrors = [...(errors !== null && errors !== void 0 ? errors : []), ...((_a = createLabel.errors) !== null && _a !== void 0 ? _a : [])];
   return jsxRuntime.jsx(elementsUi.Templates.RateForm, {
     carriers: carriers.data,
-    errors: mergedErrors,
+    errors: [...(errors !== null && errors !== void 0 ? errors : []), ...((_a = createLabel.errors) !== null && _a !== void 0 ? _a : [])],
     loading: _loading,
     onSave: handleSave,
     onSubmit: handleSubmit,
@@ -20108,10 +20154,12 @@ const useAddressPreference = () => {
     const alternative = newAddressPreference[alternativeSource];
     const selection = newAddressPreference[selectionSource];
     if (!selection) throw new Error("Cannot select an undefined address.");
-    setAddressPreference(Object.assign(Object.assign({}, newAddressPreference), {
+    const updatedAddressPreference = Object.assign(Object.assign({}, newAddressPreference), {
       alternative,
       selection
-    }));
+    });
+    setAddressPreference(updatedAddressPreference);
+    return updatedAddressPreference;
   }, [toggle]);
   return {
     addressPreference,
@@ -20122,10 +20170,18 @@ const useAddressPreference = () => {
 const SalesOrder = ({
   externalOrderId,
   externalOrderNumber,
+  onAddressValidation,
+  onChangeAddress,
+  onLabelCreateFailure,
+  onLabelCreateSuccess,
   onLoad,
-  onPurchase,
+  onRateSaved,
+  onRatesReturned,
+  onChangeShipmentFormMode,
+  onToggleAddressPreferenceDisclosure,
   orderSourceCode,
-  salesOrderId
+  salesOrderId,
+  shippingPresets
 }) => {
   var _a, _b, _c, _d, _e;
 
@@ -20192,10 +20248,14 @@ const SalesOrder = ({
     void (() => __awaiter(void 0, void 0, void 0, function* () {
       var _a, _b, _c;
 
-      if (((_a = salesOrders.data) === null || _a === void 0 ? void 0 : _a.length) && shipments.data && !createShipment.data && !createShipment.errors && !createShipment.isMutating) {
-        if (shipments.data.length === 0) {
-          // We don't have a shipment yet; create one.
-          const result = yield createShipment.trigger({
+      if (((_a = salesOrders.data) === null || _a === void 0 ? void 0 : _a.length) && shipments.data && ((_b = warehouses.data) === null || _b === void 0 ? void 0 : _b.length) && !createShipment.data && !createShipment.errors && !createShipment.isMutating) {
+        const currentSalesOrder = salesOrders.data[0];
+        const pendingShipment = shipments.data.find(s => s.shipmentStatus === "pending");
+
+        if (currentSalesOrder && !pendingShipment) {
+          const defaultWarehouse = (_c = warehouses.data) === null || _c === void 0 ? void 0 : _c[0]; // We don't have a shipment yet; create one.
+
+          const result = yield createShipment.trigger(Object.assign({
             // /v-beta/shipments/sales_order/:salesOrderId requires at minimum
             // a (warehouseId or shipFrom) and a package with weight defined.
             packages: [{
@@ -20205,8 +20265,10 @@ const SalesOrder = ({
               }
             }],
             validateAddress: "validate_and_clean",
-            warehouseId: (_b = warehouses.data) === null || _b === void 0 ? void 0 : _b[0].warehouseId
-          });
+            warehouseId: defaultWarehouse.warehouseId
+          }, elementsCore.getIsCustomsRequiredForSalesOrder(currentSalesOrder, defaultWarehouse) && {
+            customs: elementsCore.getCustomsFromSalesOrder(currentSalesOrder, defaultWarehouse)
+          }));
 
           if (!result) {
             logger.error("createShipment returned an undefined result");
@@ -20214,28 +20276,30 @@ const SalesOrder = ({
             logger.error("createShipment returned an undefined addressValidation");
           } else {
             yield shipments.mutate();
-            resetAddressPreference({
+            const updatedAddressPreference = resetAddressPreference({
               validation: result.addressValidation,
-              fallbackAddress: salesOrders.data[0].shipTo
+              fallbackAddress: currentSalesOrder.shipTo
             });
+            onAddressValidation === null || onAddressValidation === void 0 ? void 0 : onAddressValidation(updatedAddressPreference);
           }
-        } else if (!validateAddresses.data && !validateAddresses.errors && !validateAddresses.isMutating) {
+        } else if (currentSalesOrder && pendingShipment && !validateAddresses.data && !validateAddresses.errors && !validateAddresses.isMutating) {
           // We have a preexisting shipment; validate the address
           const result = yield validateAddresses.trigger({
-            addresses: [(_c = shipments.data) === null || _c === void 0 ? void 0 : _c[0].shipTo]
+            addresses: [pendingShipment.shipTo]
           });
           const addressValidation = result === null || result === void 0 ? void 0 : result[0];
 
           if (addressValidation) {
-            resetAddressPreference({
+            const updatedAddressPreference = resetAddressPreference({
               validation: addressValidation,
-              fallbackAddress: salesOrders.data[0].shipTo
+              fallbackAddress: currentSalesOrder.shipTo
             });
+            onAddressValidation === null || onAddressValidation === void 0 ? void 0 : onAddressValidation(updatedAddressPreference);
           }
         }
       }
     }))();
-  }, [addressPreference, createShipment, logger, salesOrders.data, shipments, shipments.data, resetAddressPreference, validateAddresses, warehouses.data]);
+  }, [addressPreference, createShipment, logger, onAddressValidation, resetAddressPreference, salesOrders.data, shipments, shipments.data, validateAddresses, warehouses.data]);
   const hasCustomPackage = react.useCallback(shipment => {
     var _a;
 
@@ -20247,9 +20311,11 @@ const SalesOrder = ({
     yield shipments.mutate();
 
     if (options.shouldResetAddressPreference && shipment.addressValidation) {
-      resetAddressPreference({
+      const updatedAddressPreference = resetAddressPreference({
         validation: shipment.addressValidation
       });
+      onAddressValidation === null || onAddressValidation === void 0 ? void 0 : onAddressValidation(updatedAddressPreference);
+      onChangeAddress === null || onChangeAddress === void 0 ? void 0 : onChangeAddress(updatedAddressPreference);
     }
 
     if (options.shouldCalculateRates) {
@@ -20261,7 +20327,8 @@ const SalesOrder = ({
           packageTypes: hasCustomPackage(shipment) ? ["package"] // Only specify package types for non-custom packages
           : shipment.packages.map(pkg => pkg.packageCode)
         }
-      }); // We are hiding, from the user, any errors in the rate response if the response
+      });
+      result && (onRatesReturned === null || onRatesReturned === void 0 ? void 0 : onRatesReturned(result.rates, shipment)); // We are hiding, from the user, any errors in the rate response if the response
       // contains rates. Log to the console any rate errors if the response has rates.
 
       if ((result === null || result === void 0 ? void 0 : result.errors.length) && result.rates.length) {
@@ -20270,13 +20337,10 @@ const SalesOrder = ({
         }, `Rate response had errors`);
       }
     }
-  }), [calculateRates, carriers.data, hasCustomPackage, logger, resetAddressPreference, shipments]);
+  }), [calculateRates, carriers.data, hasCustomPackage, logger, onChangeAddress, onAddressValidation, onRatesReturned, resetAddressPreference, shipments]);
   const handleShipmentDirty = react.useCallback(() => {
     calculateRates.reset();
   }, [calculateRates]);
-  const handleLabelCreated = react.useCallback(label => __awaiter(void 0, void 0, void 0, function* () {
-    if (label) onPurchase === null || onPurchase === void 0 ? void 0 : onPurchase(label);
-  }), [onPurchase]);
   if (salesOrders.isLoading) return jsxRuntime.jsx(elementsUi.Loader, {
     message: t("loading.salesOrder")
   });
@@ -20304,15 +20368,20 @@ const SalesOrder = ({
   }, {
     children: [jsxRuntime.jsx(ShipmentForm, {
       addressPreference: addressPreference,
+      onChangeAddress: onChangeAddress,
+      onChangeShipmentFormMode: onChangeShipmentFormMode,
       onShipmentDirty: handleShipmentDirty,
       onShipmentUpdated: handleShipmentUpdated,
+      onToggleAddressPreferenceDisclosure: onToggleAddressPreferenceDisclosure,
       salesOrder: salesOrder,
-      shipment: shipment
+      shipment: shipment,
+      shippingPresets: shippingPresets
     }), jsxRuntime.jsx(RateForm, {
       errors: [...((_b = calculateRates.errors) !== null && _b !== void 0 ? _b : []), ...((_d = (_c = calculateRates.data) === null || _c === void 0 ? void 0 : _c.errors) !== null && _d !== void 0 ? _d : [])],
       loading: calculateRates.isMutating,
-      onLabelCreated: handleLabelCreated,
-      onRateSaved: handleShipmentUpdated,
+      onLabelCreateFailure: onLabelCreateFailure,
+      onLabelCreateSuccess: onLabelCreateSuccess,
+      onRateSaved: onRateSaved,
       rates: (_e = calculateRates.data) === null || _e === void 0 ? void 0 : _e.rates,
       shipment: shipment
     })]
@@ -20322,9 +20391,10 @@ const SalesOrder = ({
 const Element$2 = elementsCore.registerElement("purchase-label", SalesOrder);
 
 const Shipment = ({
-  shipmentId,
+  onClickPrintLabel,
+  onClickPurchaseLabel,
   onClickVoidLabel,
-  onClickPurchaseLabel
+  shipmentId
 }) => {
   var _a, _b, _c;
 
@@ -20357,6 +20427,7 @@ const Shipment = ({
     carriers: carriers.data,
     labels: labels.data,
     onClickPurchaseLabel: onClickPurchaseLabel,
+    onClickPrintLabel: onClickPrintLabel,
     onClickVoidLabel: onClickVoidLabel,
     salesOrder: salesOrder,
     shipment: shipment.data,

package/index.js

@@ -1,6 +1,6 @@
-import { useTranslation, useLogger, useListWarehouses, useListCarriers, useCreateShipment, useUpdateShipment, useParseAddress, useListCustomPackageTypes, useCreateLabel, isDomesticAddress, useListSalesOrders, useListOrderSources, useRefreshOrderSource, useCalculateRates, useValidateAddresses, useListShipments, registerElement, useGetShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/elements-core';
+import { useTranslation, useLogger, useListWarehouses, useListCarriers, useCreateShipment, useUpdateShipment, useParseAddress, useListCustomPackageTypes, useCreateLabel, isDomesticAddress, useListSalesOrders, useListOrderSources, useRefreshOrderSource, useCalculateRates, useValidateAddresses, useListShipments, getIsCustomsRequiredForSalesOrder, getCustomsFromSalesOrder, registerElement, useGetShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/elements-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { Templates, Loader } from '@shipengine/elements-ui';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2727,11 +2727,15 @@ function __awaiter(thisArg, _arguments, P, generator) {
 
 const ShipmentForm = ({
   addressPreference,
+  onChangeAddress,
+  onChangeShipmentFormMode,
   onShipmentDirty,
   // Must be referentially stable
   onShipmentUpdated,
+  onToggleAddressPreferenceDisclosure,
   salesOrder,
-  shipment
+  shipment,
+  shippingPresets
 }) => {
   const {
     t
@@ -2771,7 +2775,7 @@ const ShipmentForm = ({
   }), [createOrUpdateShipment, onShipmentUpdated]); // Handles any changes to the ship to address as well as handling user
   // selecting fall-back address
 
-  const handleChangeAddress = useCallback((payload, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
+  const handleChangeAddress = (payload, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
     const updatedShipment = yield createOrUpdateShipment(Object.assign(Object.assign(Object.assign({}, shipment), {
       shipTo: payload
     }), options.shouldValidate && {
@@ -2784,8 +2788,29 @@ const ShipmentForm = ({
         shouldResetAddressPreference: options.shouldValidate
       });
     }
-  }), [createOrUpdateShipment, onShipmentUpdated, shipment]);
-  const handleSubmitParseShipTo = useCallback(({
+  });
+
+  const handleApplyPreset = preset => __awaiter(void 0, void 0, void 0, function* () {
+    const updatedShipment = yield createOrUpdateShipment(Object.assign(Object.assign(Object.assign({}, shipment), preset.serviceCode && preset.carrierId && {
+      carrierId: preset.carrierId,
+      serviceCode: preset.serviceCode
+    }), {
+      confirmation: preset.confirmation,
+      insuranceProvider: preset.insuranceProvider,
+      packages: preset.weight && preset.packageCode ? [{
+        dimensions: preset.dimensions,
+        weight: preset.weight,
+        insuredValue: preset.insuredValue,
+        packageCode: preset.packageCode
+      }] : undefined
+    }));
+    if (updatedShipment) onShipmentUpdated(updatedShipment, {
+      shouldCalculateRates: !!(preset.dimensions && preset.weight),
+      shouldResetAddressPreference: false
+    });
+  });
+
+  const handleSubmitParseShipTo = ({
     fullAddress
   }) => __awaiter(void 0, void 0, void 0, function* () {
     const parseResult = yield parseAddress.trigger({
@@ -2793,19 +2818,35 @@ const ShipmentForm = ({
     });
     if (!parseResult) logger.warn("Address parser returned no results");
     return parseResult;
-  }), [logger, parseAddress]);
-  const errors = useMemo(() => [...(updateShipment.errors || []), ...(createShipment.errors || [])], [updateShipment.errors, createShipment.errors]);
+  });
+
+  const handleUpdateCustoms = customs => __awaiter(void 0, void 0, void 0, function* () {
+    const updatedShipment = yield createOrUpdateShipment(Object.assign(Object.assign({}, shipment), {
+      customs
+    }));
+
+    if (updatedShipment) {
+      onShipmentUpdated(updatedShipment);
+    }
+  });
+
+  const errors = [...(updateShipment.errors || []), ...(createShipment.errors || [])];
   return jsx(Templates.ShipmentForm, {
     addressPreference: addressPreference,
+    onToggleAddressPreferenceDisclosure: onToggleAddressPreferenceDisclosure,
+    onChangeMode: onChangeShipmentFormMode,
     carriers: carriers.data,
     customPackageTypes: customPackageTypes.data,
     errors: errors,
+    onApplyPreset: handleApplyPreset,
     onChangeAddress: handleChangeAddress,
     onDirty: onShipmentDirty,
     onSubmit: handleSubmit,
+    onUpdateCustoms: handleUpdateCustoms,
     onSubmitParseShipTo: handleSubmitParseShipTo,
     salesOrder: salesOrder,
     shipment: shipment,
+    shippingPresets: shippingPresets,
     warehouses: warehouses.data
   });
 };
@@ -2813,7 +2854,8 @@ const ShipmentForm = ({
 const RateForm = ({
   errors,
   loading: _loading = false,
-  onLabelCreated,
+  onLabelCreateFailure,
+  onLabelCreateSuccess,
   onRateSaved,
   rates,
   shipment
@@ -2826,8 +2868,13 @@ const RateForm = ({
   });
 
   const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
-    const label = yield createLabel.trigger(values);
-    if (label) onLabelCreated === null || onLabelCreated === void 0 ? void 0 : onLabelCreated(label);
+    const label = yield createLabel.trigger(values.rate);
+
+    if (label) {
+      onLabelCreateSuccess === null || onLabelCreateSuccess === void 0 ? void 0 : onLabelCreateSuccess(label, shipment);
+    } else {
+      onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure();
+    }
   });
 
   const handleSave = rate => __awaiter(void 0, void 0, void 0, function* () {
@@ -2841,10 +2888,9 @@ const RateForm = ({
   });
 
   const carriers = useListCarriers();
-  const mergedErrors = [...(errors !== null && errors !== void 0 ? errors : []), ...((_a = createLabel.errors) !== null && _a !== void 0 ? _a : [])];
   return jsx(Templates.RateForm, {
     carriers: carriers.data,
-    errors: mergedErrors,
+    errors: [...(errors !== null && errors !== void 0 ? errors : []), ...((_a = createLabel.errors) !== null && _a !== void 0 ? _a : [])],
     loading: _loading,
     onSave: handleSave,
     onSubmit: handleSubmit,
@@ -20104,10 +20150,12 @@ const useAddressPreference = () => {
     const alternative = newAddressPreference[alternativeSource];
     const selection = newAddressPreference[selectionSource];
     if (!selection) throw new Error("Cannot select an undefined address.");
-    setAddressPreference(Object.assign(Object.assign({}, newAddressPreference), {
+    const updatedAddressPreference = Object.assign(Object.assign({}, newAddressPreference), {
       alternative,
       selection
-    }));
+    });
+    setAddressPreference(updatedAddressPreference);
+    return updatedAddressPreference;
   }, [toggle]);
   return {
     addressPreference,
@@ -20118,10 +20166,18 @@ const useAddressPreference = () => {
 const SalesOrder = ({
   externalOrderId,
   externalOrderNumber,
+  onAddressValidation,
+  onChangeAddress,
+  onLabelCreateFailure,
+  onLabelCreateSuccess,
   onLoad,
-  onPurchase,
+  onRateSaved,
+  onRatesReturned,
+  onChangeShipmentFormMode,
+  onToggleAddressPreferenceDisclosure,
   orderSourceCode,
-  salesOrderId
+  salesOrderId,
+  shippingPresets
 }) => {
   var _a, _b, _c, _d, _e;
 
@@ -20188,10 +20244,14 @@ const SalesOrder = ({
     void (() => __awaiter(void 0, void 0, void 0, function* () {
       var _a, _b, _c;
 
-      if (((_a = salesOrders.data) === null || _a === void 0 ? void 0 : _a.length) && shipments.data && !createShipment.data && !createShipment.errors && !createShipment.isMutating) {
-        if (shipments.data.length === 0) {
-          // We don't have a shipment yet; create one.
-          const result = yield createShipment.trigger({
+      if (((_a = salesOrders.data) === null || _a === void 0 ? void 0 : _a.length) && shipments.data && ((_b = warehouses.data) === null || _b === void 0 ? void 0 : _b.length) && !createShipment.data && !createShipment.errors && !createShipment.isMutating) {
+        const currentSalesOrder = salesOrders.data[0];
+        const pendingShipment = shipments.data.find(s => s.shipmentStatus === "pending");
+
+        if (currentSalesOrder && !pendingShipment) {
+          const defaultWarehouse = (_c = warehouses.data) === null || _c === void 0 ? void 0 : _c[0]; // We don't have a shipment yet; create one.
+
+          const result = yield createShipment.trigger(Object.assign({
             // /v-beta/shipments/sales_order/:salesOrderId requires at minimum
             // a (warehouseId or shipFrom) and a package with weight defined.
             packages: [{
@@ -20201,8 +20261,10 @@ const SalesOrder = ({
               }
             }],
             validateAddress: "validate_and_clean",
-            warehouseId: (_b = warehouses.data) === null || _b === void 0 ? void 0 : _b[0].warehouseId
-          });
+            warehouseId: defaultWarehouse.warehouseId
+          }, getIsCustomsRequiredForSalesOrder(currentSalesOrder, defaultWarehouse) && {
+            customs: getCustomsFromSalesOrder(currentSalesOrder, defaultWarehouse)
+          }));
 
           if (!result) {
             logger.error("createShipment returned an undefined result");
@@ -20210,28 +20272,30 @@ const SalesOrder = ({
             logger.error("createShipment returned an undefined addressValidation");
           } else {
             yield shipments.mutate();
-            resetAddressPreference({
+            const updatedAddressPreference = resetAddressPreference({
               validation: result.addressValidation,
-              fallbackAddress: salesOrders.data[0].shipTo
+              fallbackAddress: currentSalesOrder.shipTo
             });
+            onAddressValidation === null || onAddressValidation === void 0 ? void 0 : onAddressValidation(updatedAddressPreference);
           }
-        } else if (!validateAddresses.data && !validateAddresses.errors && !validateAddresses.isMutating) {
+        } else if (currentSalesOrder && pendingShipment && !validateAddresses.data && !validateAddresses.errors && !validateAddresses.isMutating) {
           // We have a preexisting shipment; validate the address
           const result = yield validateAddresses.trigger({
-            addresses: [(_c = shipments.data) === null || _c === void 0 ? void 0 : _c[0].shipTo]
+            addresses: [pendingShipment.shipTo]
           });
           const addressValidation = result === null || result === void 0 ? void 0 : result[0];
 
           if (addressValidation) {
-            resetAddressPreference({
+            const updatedAddressPreference = resetAddressPreference({
               validation: addressValidation,
-              fallbackAddress: salesOrders.data[0].shipTo
+              fallbackAddress: currentSalesOrder.shipTo
             });
+            onAddressValidation === null || onAddressValidation === void 0 ? void 0 : onAddressValidation(updatedAddressPreference);
           }
         }
       }
     }))();
-  }, [addressPreference, createShipment, logger, salesOrders.data, shipments, shipments.data, resetAddressPreference, validateAddresses, warehouses.data]);
+  }, [addressPreference, createShipment, logger, onAddressValidation, resetAddressPreference, salesOrders.data, shipments, shipments.data, validateAddresses, warehouses.data]);
   const hasCustomPackage = useCallback(shipment => {
     var _a;
 
@@ -20243,9 +20307,11 @@ const SalesOrder = ({
     yield shipments.mutate();
 
     if (options.shouldResetAddressPreference && shipment.addressValidation) {
-      resetAddressPreference({
+      const updatedAddressPreference = resetAddressPreference({
         validation: shipment.addressValidation
       });
+      onAddressValidation === null || onAddressValidation === void 0 ? void 0 : onAddressValidation(updatedAddressPreference);
+      onChangeAddress === null || onChangeAddress === void 0 ? void 0 : onChangeAddress(updatedAddressPreference);
     }
 
     if (options.shouldCalculateRates) {
@@ -20257,7 +20323,8 @@ const SalesOrder = ({
           packageTypes: hasCustomPackage(shipment) ? ["package"] // Only specify package types for non-custom packages
           : shipment.packages.map(pkg => pkg.packageCode)
         }
-      }); // We are hiding, from the user, any errors in the rate response if the response
+      });
+      result && (onRatesReturned === null || onRatesReturned === void 0 ? void 0 : onRatesReturned(result.rates, shipment)); // We are hiding, from the user, any errors in the rate response if the response
       // contains rates. Log to the console any rate errors if the response has rates.
 
       if ((result === null || result === void 0 ? void 0 : result.errors.length) && result.rates.length) {
@@ -20266,13 +20333,10 @@ const SalesOrder = ({
         }, `Rate response had errors`);
       }
     }
-  }), [calculateRates, carriers.data, hasCustomPackage, logger, resetAddressPreference, shipments]);
+  }), [calculateRates, carriers.data, hasCustomPackage, logger, onChangeAddress, onAddressValidation, onRatesReturned, resetAddressPreference, shipments]);
   const handleShipmentDirty = useCallback(() => {
     calculateRates.reset();
   }, [calculateRates]);
-  const handleLabelCreated = useCallback(label => __awaiter(void 0, void 0, void 0, function* () {
-    if (label) onPurchase === null || onPurchase === void 0 ? void 0 : onPurchase(label);
-  }), [onPurchase]);
   if (salesOrders.isLoading) return jsx(Loader, {
     message: t("loading.salesOrder")
   });
@@ -20300,15 +20364,20 @@ const SalesOrder = ({
   }, {
     children: [jsx(ShipmentForm, {
       addressPreference: addressPreference,
+      onChangeAddress: onChangeAddress,
+      onChangeShipmentFormMode: onChangeShipmentFormMode,
       onShipmentDirty: handleShipmentDirty,
       onShipmentUpdated: handleShipmentUpdated,
+      onToggleAddressPreferenceDisclosure: onToggleAddressPreferenceDisclosure,
       salesOrder: salesOrder,
-      shipment: shipment
+      shipment: shipment,
+      shippingPresets: shippingPresets
     }), jsx(RateForm, {
       errors: [...((_b = calculateRates.errors) !== null && _b !== void 0 ? _b : []), ...((_d = (_c = calculateRates.data) === null || _c === void 0 ? void 0 : _c.errors) !== null && _d !== void 0 ? _d : [])],
       loading: calculateRates.isMutating,
-      onLabelCreated: handleLabelCreated,
-      onRateSaved: handleShipmentUpdated,
+      onLabelCreateFailure: onLabelCreateFailure,
+      onLabelCreateSuccess: onLabelCreateSuccess,
+      onRateSaved: onRateSaved,
       rates: (_e = calculateRates.data) === null || _e === void 0 ? void 0 : _e.rates,
       shipment: shipment
     })]
@@ -20318,9 +20387,10 @@ const SalesOrder = ({
 const Element$2 = registerElement("purchase-label", SalesOrder);
 
 const Shipment = ({
-  shipmentId,
+  onClickPrintLabel,
+  onClickPurchaseLabel,
   onClickVoidLabel,
-  onClickPurchaseLabel
+  shipmentId
 }) => {
   var _a, _b, _c;
 
@@ -20353,6 +20423,7 @@ const Shipment = ({
     carriers: carriers.data,
     labels: labels.data,
     onClickPurchaseLabel: onClickPurchaseLabel,
+    onClickPrintLabel: onClickPrintLabel,
     onClickVoidLabel: onClickVoidLabel,
     salesOrder: salesOrder,
     shipment: shipment.data,

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.4.8",
+  "version": "0.5.1",
   "module": "./index.js",
   "main": "./index.cjs",
   "type": "module",
   "types": "./index.d.ts",
   "dependencies": {
-    "@shipengine/elements-core": "0.4.8",
-    "@shipengine/elements-ui": "0.4.8",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@shipengine/elements-core": "0.5.1",
+    "react-i18next": "^11.18.4",
+    "i18next": "^21.9.1",
+    "i18next-http-backend": "^1.4.1",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "@shipengine/elements-ui": "0.5.1"
   },
   "peerDependencies": {}
 }