@shipengine/elements 0.3.6 → 0.3.11-beta.0

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

@@ -1,10 +1,15 @@
 /// <reference types="react" />
-import SE from "@shipengine/elements-core";
+import SE, { AddressPreference } from "@shipengine/elements-core";
 export declare type ShipmentFormMode = "browse_rates" | "select_service";
+export declare type ShipmentUpdatedOptions = {
+    shouldCalculateRates?: boolean;
+    shouldResetAddressPreference?: boolean;
+};
 export declare type ShipmentFormProps = {
+    addressPreference?: AddressPreference;
     onShipmentDirty: () => void;
-    onShipmentUpdated: (shipment: SE.SalesOrderShipment) => void;
+    onShipmentUpdated: (shipment: SE.SalesOrderShipment, options?: ShipmentUpdatedOptions) => void;
     salesOrder: SE.SalesOrder;
     shipment?: SE.SalesOrderShipment;
 };
-export declare const ShipmentForm: ({ onShipmentDirty, onShipmentUpdated, salesOrder, shipment, }: ShipmentFormProps) => JSX.Element;
+export declare const ShipmentForm: ({ addressPreference, onShipmentDirty, onShipmentUpdated, salesOrder, shipment, }: ShipmentFormProps) => JSX.Element;

package/index.cjs

@@ -2731,14 +2731,13 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 const ShipmentForm = ({
+  addressPreference,
   onShipmentDirty,
   // Must be referentially stable
   onShipmentUpdated,
   salesOrder,
   shipment
 }) => {
-  var _a;
-
   const {
     t
   } = elementsCore.useTranslation(["purchase-label"]);
@@ -2751,46 +2750,73 @@ const ShipmentForm = ({
   const updateShipment = elementsCore.useUpdateShipment({
     shipmentId: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId
   });
-  const validateAddresses = elementsCore.useValidateAddresses();
+  const parseAddress = elementsCore.useParseAddress();
+  const customPackageTypes = elementsCore.useListCustomPackageTypes();
 
-  const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
+  const createOrUpdateShipment = values => __awaiter(void 0, void 0, void 0, function* () {
     try {
-      let newOrUpdatedShipment; // If a shipment exists, update it. Otherwise, create a new shipment.
-
       if (shipment) {
-        newOrUpdatedShipment = yield updateShipment.trigger(values);
+        return yield updateShipment.trigger(values);
       } else {
         if (!salesOrder) throw new Error(t("purchase-label:salesOrderNotLoaded"));
-        newOrUpdatedShipment = yield createShipment.trigger(values);
+        return yield createShipment.trigger(values);
       }
-
-      if (newOrUpdatedShipment) onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(newOrUpdatedShipment);
     } catch (err) {
+      // Swallow error but log it
       logger.error({
         err
       }, "Error updating shipment: %s", err.message);
+      return undefined;
     }
-  }); // Validates the address on the sales order when it loads. The result of the
-  // validation will be available on validateAddresses.data.
+  });
 
+  const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
+    const updatedShipment = yield createOrUpdateShipment(values);
+    if (updatedShipment) onShipmentUpdated(updatedShipment, {
+      shouldCalculateRates: true
+    });
+  }); // Handles any changes to the ship to address as well as handling user
+  // selecting fall-back address
 
-  react.useEffect(() => {
-    if (salesOrder && !validateAddresses.data && !validateAddresses.isMutating) {
-      validateAddresses.trigger({
-        addresses: [salesOrder.shipTo]
+
+  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 && {
+      validateAddress: "validate_and_clean"
+    }));
+
+    if (updatedShipment) {
+      onShipmentUpdated(updatedShipment, {
+        shouldCalculateRates: false,
+        shouldResetAddressPreference: options.shouldValidate
       });
     }
-  }, [validateAddresses, salesOrder]);
+  });
+
+  const handleSubmitParseShipTo = ({
+    fullAddress
+  }) => __awaiter(void 0, void 0, void 0, function* () {
+    const parseResult = yield parseAddress.trigger({
+      text: fullAddress
+    });
+    if (!parseResult) logger.warn("Address parser returned no results");
+    return parseResult;
+  });
+
   const errors = [...(updateShipment.errors || []), ...(createShipment.errors || [])];
   return jsxRuntime.jsx(elementsUi.Templates.ShipmentForm, {
+    addressPreference: addressPreference,
+    carriers: carriers.data,
+    customPackageTypes: customPackageTypes.data,
     errors: errors,
+    onChangeAddress: handleChangeAddress,
     onDirty: onShipmentDirty,
-    shipToValidationStatus: (_a = validateAddresses.data) === null || _a === void 0 ? void 0 : _a[0].status,
     onSubmit: handleSubmit,
-    carriers: carriers.data,
-    warehouses: warehouses.data,
+    onSubmitParseShipTo: handleSubmitParseShipTo,
     salesOrder: salesOrder,
-    shipment: shipment
+    shipment: shipment,
+    warehouses: warehouses.data
   });
 };
 
@@ -2833,7 +2859,8 @@ const RateForm = ({
     onSave: handleSave,
     onSubmit: handleSubmit,
     rates: rates,
-    shipment: shipment
+    shipment: shipment,
+    scrollToOnLoad: true
   });
 };
 
@@ -2845,12 +2872,16 @@ const SalesOrder = ({
   orderSourceCode,
   salesOrderId
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
 
   const {
     t
   } = elementsCore.useTranslation(["common", "purchase-label"]);
   const logger = elementsCore.useLogger();
+  const {
+    addressPreference,
+    resetAddressPreference
+  } = elementsCore.useAddressPreference();
   const carriers = elementsCore.useListCarriers();
   const salesOrders = elementsCore.useListSalesOrders({
     externalOrderId,
@@ -2860,8 +2891,14 @@ const SalesOrder = ({
   const orderSources = elementsCore.useListOrderSources({
     orderSourceCode
   });
+  const warehouses = elementsCore.useListWarehouses();
   const refreshOrderSource = elementsCore.useRefreshOrderSource();
   const calculateRates = elementsCore.useCalculateRates();
+  const validateAddresses = elementsCore.useValidateAddresses();
+  const createShipment = elementsCore.useCreateShipment({
+    salesOrderId: (_b = (_a = salesOrders.data) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.salesOrderId
+  });
+  const customPackageTypes = elementsCore.useListCustomPackageTypes();
   const shipments = elementsCore.useListShipments({
     salesOrderIds: salesOrders.data ? salesOrders.data.map(s => s.salesOrderId) : undefined
   });
@@ -2886,7 +2923,7 @@ const SalesOrder = ({
     refresh();
   }, [orderSourceCode, refreshOrderSource, salesOrders, orderSources]);
   react.useEffect(() => {
-    // Executes the onLoad callback when both the sales order and it's shipments
+    // Executes the onLoad callback when both the sales order and its shipments
     // have been loaded. This can be used to react to various states the order
     // or shipments may be in – for instance, redirecting to a shipment when the
     // order has already been fulfilled.
@@ -2894,26 +2931,91 @@ const SalesOrder = ({
       onLoad(salesOrders.data[0], shipments.data);
     }
   }, [onLoad, salesOrders.data, shipments.data]);
-  const handleShipmentUpdated = react.useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
-    var _e, _f;
+  react.useEffect(() => {
+    // On page load, if no shipment exists, create a shipment with validated and cleaned addresses.
+    // If a shipment already exists, validate and clean the addresses.
+    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({
+            // /v-beta/shipments/sales_order/:salesOrderId requires at minimum
+            // a (warehouseId or shipFrom) and a package with weight defined.
+            packages: [{
+              weight: {
+                value: 0,
+                unit: "pound"
+              }
+            }],
+            validateAddress: "validate_and_clean",
+            warehouseId: (_b = warehouses.data) === null || _b === void 0 ? void 0 : _b[0].warehouseId
+          });
+
+          if (!result) {
+            logger.error("createShipment returned an undefined result");
+          } else if (!result.addressValidation) {
+            logger.error("createShipment returned an undefined addressValidation");
+          } else {
+            yield shipments.mutate();
+            resetAddressPreference({
+              validation: result.addressValidation,
+              fallbackAddress: salesOrders.data[0].shipTo
+            });
+          }
+        } else if (!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]
+          });
+          const addressValidation = result === null || result === void 0 ? void 0 : result[0];
+
+          if (addressValidation) {
+            resetAddressPreference({
+              validation: addressValidation,
+              fallbackAddress: salesOrders.data[0].shipTo
+            });
+          }
+        }
+      }
+    }))();
+  }, [addressPreference, createShipment, logger, salesOrders.data, shipments, shipments.data, resetAddressPreference, validateAddresses, warehouses.data]);
+  const hasCustomPackage = react.useCallback(shipment => {
+    var _a;
+
+    return !!((_a = customPackageTypes.data) === null || _a === void 0 ? void 0 : _a.find(p => p.packageId === shipment.packages[0].packageId));
+  }, [customPackageTypes]);
+  const handleShipmentUpdated = react.useCallback((shipment, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
+    var _g, _h;
 
     yield shipments.mutate();
-    const result = yield calculateRates.trigger({
-      shipmentId: shipment.shipmentId,
-      rateOptions: {
-        carrierIds: shipment.carrierId ? [shipment.carrierId] : (_f = (_e = carriers.data) === null || _e === void 0 ? void 0 : _e.map(c => c.carrierId)) !== null && _f !== void 0 ? _f : [],
-        packageTypes: shipment.packages.map(pkg => pkg.packageCode),
-        serviceCodes: shipment.serviceCode ? [shipment.serviceCode] : undefined
-      }
-    }); // 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) {
-      logger.error({
-        obj: result.errors
-      }, `Rate response had errors`);
+    if (options.shouldResetAddressPreference && shipment.addressValidation) {
+      resetAddressPreference({
+        validation: shipment.addressValidation
+      });
+    }
+
+    if (options.shouldCalculateRates) {
+      const result = yield calculateRates.trigger({
+        shipmentId: shipment.shipmentId,
+        rateOptions: {
+          carrierIds: shipment.carrierId ? [shipment.carrierId] : (_h = (_g = carriers.data) === null || _g === void 0 ? void 0 : _g.map(c => c.carrierId)) !== null && _h !== void 0 ? _h : [],
+          serviceCodes: shipment.serviceCode ? [shipment.serviceCode] : undefined,
+          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
+      // 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) {
+        logger.error({
+          obj: result.errors
+        }, `Rate response had errors`);
+      }
     }
-  }), [calculateRates, carriers.data, logger, shipments]);
+  }), [calculateRates, carriers.data, hasCustomPackage, logger, resetAddressPreference, shipments]);
   const handleShipmentDirty = react.useCallback(() => {
     calculateRates.reset();
   }, [calculateRates]);
@@ -2937,22 +3039,26 @@ const SalesOrder = ({
   });
   if (shipments.errors) throw new Error(shipments.errors.map(e => e.message).join(", "));
   if (!shipments.data) throw new Error(t("errorMessages.unableToLoad.shipment"));
+  if (carriers.isLoading) return jsxRuntime.jsx(deprecatedUi.Spinner, {
+    children: t("loading.carriers")
+  });
   const salesOrder = salesOrders.data[0];
   const shipment = shipments.data.find(s => s.shipmentStatus === "pending");
   return jsxRuntime.jsxs(elementsUi.Templates.SalesOrder, Object.assign({
     salesOrder: salesOrder
   }, {
     children: [jsxRuntime.jsx(ShipmentForm, {
+      addressPreference: addressPreference,
       onShipmentDirty: handleShipmentDirty,
       onShipmentUpdated: handleShipmentUpdated,
       salesOrder: salesOrder,
       shipment: shipment
     }), jsxRuntime.jsx(RateForm, {
-      errors: [...((_a = calculateRates.errors) !== null && _a !== void 0 ? _a : []), ...((_c = (_b = calculateRates.data) === null || _b === void 0 ? void 0 : _b.errors) !== null && _c !== void 0 ? _c : [])],
+      errors: [...((_c = calculateRates.errors) !== null && _c !== void 0 ? _c : []), ...((_e = (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.errors) !== null && _e !== void 0 ? _e : [])],
       loading: calculateRates.isMutating,
       onLabelCreated: handleLabelCreated,
       onRateSaved: handleShipmentUpdated,
-      rates: (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.rates,
+      rates: (_f = calculateRates.data) === null || _f === void 0 ? void 0 : _f.rates,
       shipment: shipment
     })]
   }));

package/index.js

@@ -1,4 +1,4 @@
-import { useTranslation, useLogger, useListWarehouses, useListCarriers, useCreateShipment, useUpdateShipment, useValidateAddresses, useCreateLabel, useListSalesOrders, useListOrderSources, useRefreshOrderSource, useCalculateRates, useListShipments, registerElement, useGetShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/elements-core';
+import { useTranslation, useLogger, useListWarehouses, useListCarriers, useCreateShipment, useUpdateShipment, useParseAddress, useListCustomPackageTypes, useCreateLabel, useAddressPreference, useListSalesOrders, useListOrderSources, useRefreshOrderSource, useCalculateRates, useValidateAddresses, useListShipments, registerElement, useGetShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/elements-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEffect, useCallback } from 'react';
 import { Spinner } from '@shipengine/deprecated-ui';
@@ -2727,14 +2727,13 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 const ShipmentForm = ({
+  addressPreference,
   onShipmentDirty,
   // Must be referentially stable
   onShipmentUpdated,
   salesOrder,
   shipment
 }) => {
-  var _a;
-
   const {
     t
   } = useTranslation(["purchase-label"]);
@@ -2747,46 +2746,73 @@ const ShipmentForm = ({
   const updateShipment = useUpdateShipment({
     shipmentId: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId
   });
-  const validateAddresses = useValidateAddresses();
+  const parseAddress = useParseAddress();
+  const customPackageTypes = useListCustomPackageTypes();
 
-  const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
+  const createOrUpdateShipment = values => __awaiter(void 0, void 0, void 0, function* () {
     try {
-      let newOrUpdatedShipment; // If a shipment exists, update it. Otherwise, create a new shipment.
-
       if (shipment) {
-        newOrUpdatedShipment = yield updateShipment.trigger(values);
+        return yield updateShipment.trigger(values);
       } else {
         if (!salesOrder) throw new Error(t("purchase-label:salesOrderNotLoaded"));
-        newOrUpdatedShipment = yield createShipment.trigger(values);
+        return yield createShipment.trigger(values);
       }
-
-      if (newOrUpdatedShipment) onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(newOrUpdatedShipment);
     } catch (err) {
+      // Swallow error but log it
       logger.error({
         err
       }, "Error updating shipment: %s", err.message);
+      return undefined;
     }
-  }); // Validates the address on the sales order when it loads. The result of the
-  // validation will be available on validateAddresses.data.
+  });
 
+  const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
+    const updatedShipment = yield createOrUpdateShipment(values);
+    if (updatedShipment) onShipmentUpdated(updatedShipment, {
+      shouldCalculateRates: true
+    });
+  }); // Handles any changes to the ship to address as well as handling user
+  // selecting fall-back address
 
-  useEffect(() => {
-    if (salesOrder && !validateAddresses.data && !validateAddresses.isMutating) {
-      validateAddresses.trigger({
-        addresses: [salesOrder.shipTo]
+
+  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 && {
+      validateAddress: "validate_and_clean"
+    }));
+
+    if (updatedShipment) {
+      onShipmentUpdated(updatedShipment, {
+        shouldCalculateRates: false,
+        shouldResetAddressPreference: options.shouldValidate
       });
     }
-  }, [validateAddresses, salesOrder]);
+  });
+
+  const handleSubmitParseShipTo = ({
+    fullAddress
+  }) => __awaiter(void 0, void 0, void 0, function* () {
+    const parseResult = yield parseAddress.trigger({
+      text: fullAddress
+    });
+    if (!parseResult) logger.warn("Address parser returned no results");
+    return parseResult;
+  });
+
   const errors = [...(updateShipment.errors || []), ...(createShipment.errors || [])];
   return jsx(Templates.ShipmentForm, {
+    addressPreference: addressPreference,
+    carriers: carriers.data,
+    customPackageTypes: customPackageTypes.data,
     errors: errors,
+    onChangeAddress: handleChangeAddress,
     onDirty: onShipmentDirty,
-    shipToValidationStatus: (_a = validateAddresses.data) === null || _a === void 0 ? void 0 : _a[0].status,
     onSubmit: handleSubmit,
-    carriers: carriers.data,
-    warehouses: warehouses.data,
+    onSubmitParseShipTo: handleSubmitParseShipTo,
     salesOrder: salesOrder,
-    shipment: shipment
+    shipment: shipment,
+    warehouses: warehouses.data
   });
 };
 
@@ -2829,7 +2855,8 @@ const RateForm = ({
     onSave: handleSave,
     onSubmit: handleSubmit,
     rates: rates,
-    shipment: shipment
+    shipment: shipment,
+    scrollToOnLoad: true
   });
 };
 
@@ -2841,12 +2868,16 @@ const SalesOrder = ({
   orderSourceCode,
   salesOrderId
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
 
   const {
     t
   } = useTranslation(["common", "purchase-label"]);
   const logger = useLogger();
+  const {
+    addressPreference,
+    resetAddressPreference
+  } = useAddressPreference();
   const carriers = useListCarriers();
   const salesOrders = useListSalesOrders({
     externalOrderId,
@@ -2856,8 +2887,14 @@ const SalesOrder = ({
   const orderSources = useListOrderSources({
     orderSourceCode
   });
+  const warehouses = useListWarehouses();
   const refreshOrderSource = useRefreshOrderSource();
   const calculateRates = useCalculateRates();
+  const validateAddresses = useValidateAddresses();
+  const createShipment = useCreateShipment({
+    salesOrderId: (_b = (_a = salesOrders.data) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.salesOrderId
+  });
+  const customPackageTypes = useListCustomPackageTypes();
   const shipments = useListShipments({
     salesOrderIds: salesOrders.data ? salesOrders.data.map(s => s.salesOrderId) : undefined
   });
@@ -2882,7 +2919,7 @@ const SalesOrder = ({
     refresh();
   }, [orderSourceCode, refreshOrderSource, salesOrders, orderSources]);
   useEffect(() => {
-    // Executes the onLoad callback when both the sales order and it's shipments
+    // Executes the onLoad callback when both the sales order and its shipments
     // have been loaded. This can be used to react to various states the order
     // or shipments may be in – for instance, redirecting to a shipment when the
     // order has already been fulfilled.
@@ -2890,26 +2927,91 @@ const SalesOrder = ({
       onLoad(salesOrders.data[0], shipments.data);
     }
   }, [onLoad, salesOrders.data, shipments.data]);
-  const handleShipmentUpdated = useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
-    var _e, _f;
+  useEffect(() => {
+    // On page load, if no shipment exists, create a shipment with validated and cleaned addresses.
+    // If a shipment already exists, validate and clean the addresses.
+    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({
+            // /v-beta/shipments/sales_order/:salesOrderId requires at minimum
+            // a (warehouseId or shipFrom) and a package with weight defined.
+            packages: [{
+              weight: {
+                value: 0,
+                unit: "pound"
+              }
+            }],
+            validateAddress: "validate_and_clean",
+            warehouseId: (_b = warehouses.data) === null || _b === void 0 ? void 0 : _b[0].warehouseId
+          });
+
+          if (!result) {
+            logger.error("createShipment returned an undefined result");
+          } else if (!result.addressValidation) {
+            logger.error("createShipment returned an undefined addressValidation");
+          } else {
+            yield shipments.mutate();
+            resetAddressPreference({
+              validation: result.addressValidation,
+              fallbackAddress: salesOrders.data[0].shipTo
+            });
+          }
+        } else if (!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]
+          });
+          const addressValidation = result === null || result === void 0 ? void 0 : result[0];
+
+          if (addressValidation) {
+            resetAddressPreference({
+              validation: addressValidation,
+              fallbackAddress: salesOrders.data[0].shipTo
+            });
+          }
+        }
+      }
+    }))();
+  }, [addressPreference, createShipment, logger, salesOrders.data, shipments, shipments.data, resetAddressPreference, validateAddresses, warehouses.data]);
+  const hasCustomPackage = useCallback(shipment => {
+    var _a;
+
+    return !!((_a = customPackageTypes.data) === null || _a === void 0 ? void 0 : _a.find(p => p.packageId === shipment.packages[0].packageId));
+  }, [customPackageTypes]);
+  const handleShipmentUpdated = useCallback((shipment, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
+    var _g, _h;
 
     yield shipments.mutate();
-    const result = yield calculateRates.trigger({
-      shipmentId: shipment.shipmentId,
-      rateOptions: {
-        carrierIds: shipment.carrierId ? [shipment.carrierId] : (_f = (_e = carriers.data) === null || _e === void 0 ? void 0 : _e.map(c => c.carrierId)) !== null && _f !== void 0 ? _f : [],
-        packageTypes: shipment.packages.map(pkg => pkg.packageCode),
-        serviceCodes: shipment.serviceCode ? [shipment.serviceCode] : undefined
-      }
-    }); // 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) {
-      logger.error({
-        obj: result.errors
-      }, `Rate response had errors`);
+    if (options.shouldResetAddressPreference && shipment.addressValidation) {
+      resetAddressPreference({
+        validation: shipment.addressValidation
+      });
+    }
+
+    if (options.shouldCalculateRates) {
+      const result = yield calculateRates.trigger({
+        shipmentId: shipment.shipmentId,
+        rateOptions: {
+          carrierIds: shipment.carrierId ? [shipment.carrierId] : (_h = (_g = carriers.data) === null || _g === void 0 ? void 0 : _g.map(c => c.carrierId)) !== null && _h !== void 0 ? _h : [],
+          serviceCodes: shipment.serviceCode ? [shipment.serviceCode] : undefined,
+          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
+      // 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) {
+        logger.error({
+          obj: result.errors
+        }, `Rate response had errors`);
+      }
     }
-  }), [calculateRates, carriers.data, logger, shipments]);
+  }), [calculateRates, carriers.data, hasCustomPackage, logger, resetAddressPreference, shipments]);
   const handleShipmentDirty = useCallback(() => {
     calculateRates.reset();
   }, [calculateRates]);
@@ -2933,22 +3035,26 @@ const SalesOrder = ({
   });
   if (shipments.errors) throw new Error(shipments.errors.map(e => e.message).join(", "));
   if (!shipments.data) throw new Error(t("errorMessages.unableToLoad.shipment"));
+  if (carriers.isLoading) return jsx(Spinner, {
+    children: t("loading.carriers")
+  });
   const salesOrder = salesOrders.data[0];
   const shipment = shipments.data.find(s => s.shipmentStatus === "pending");
   return jsxs(Templates.SalesOrder, Object.assign({
     salesOrder: salesOrder
   }, {
     children: [jsx(ShipmentForm, {
+      addressPreference: addressPreference,
       onShipmentDirty: handleShipmentDirty,
       onShipmentUpdated: handleShipmentUpdated,
       salesOrder: salesOrder,
       shipment: shipment
     }), jsx(RateForm, {
-      errors: [...((_a = calculateRates.errors) !== null && _a !== void 0 ? _a : []), ...((_c = (_b = calculateRates.data) === null || _b === void 0 ? void 0 : _b.errors) !== null && _c !== void 0 ? _c : [])],
+      errors: [...((_c = calculateRates.errors) !== null && _c !== void 0 ? _c : []), ...((_e = (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.errors) !== null && _e !== void 0 ? _e : [])],
       loading: calculateRates.isMutating,
       onLabelCreated: handleLabelCreated,
       onRateSaved: handleShipmentUpdated,
-      rates: (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.rates,
+      rates: (_f = calculateRates.data) === null || _f === void 0 ? void 0 : _f.rates,
       shipment: shipment
     })]
   }));

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.3.6",
+  "version": "0.3.11-beta.0",
   "module": "./index.js",
   "main": "./index.cjs",
   "type": "module",
   "types": "./index.d.ts",
   "dependencies": {
-    "@shipengine/elements-core": "0.3.6",
-    "@shipengine/elements-ui": "0.3.6",
+    "@shipengine/elements-core": "0.3.11-beta.0",
+    "@shipengine/elements-ui": "0.3.11-beta.0",
     "react": "^18.2.0",
-    "@shipengine/deprecated-ui": "0.3.6"
+    "@shipengine/deprecated-ui": "0.3.11-beta.0"
   },
   "peerDependencies": {}
 }