@shipengine/elements 2.18.0 → 2.20.0

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

@@ -0,0 +1,1101 @@
+import { __awaiter, __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useManageFundingSourceInsurance } from '../../../../hooks/use-manage-funding-source-insurance.js';
+import { useNestedForm } from '../../../../hooks/use-nested-form.js';
+import { nextDayCutoff, daysAfter, formatByDateAndLocale, mostRecent, omitTime, parseLocaleDate, formatDate } from '../../../../utilities/date.js';
+import { formLogger } from '../../../../utilities/form-logger.js';
+import { formatMoney } from '../../../../utilities/money.js';
+import { getSavedShipFromAddressId, isEmptyAddress } from '../../../../utilities/shipengine/address.js';
+import { convertDimensions } from '../../../../utilities/shipengine/dimensions.js';
+import { isFlatRatePackageCode } from '../../../../utilities/shipengine/package.js';
+import { getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment } from '../../../../utilities/shipengine/sales-order.js';
+import { getIsCustomsRequiredForShipment } from '../../../../utilities/shipengine/shipment.js';
+import { getDefaultWarehouse } from '../../../../utilities/shipengine/warehouses.js';
+import { formatFractionalWeight, convertWeight, isMetricWeightUnit } from '../../../../utilities/shipengine/weight.js';
+import { scopeTheme } from '../../../../utilities/styles.js';
+import { validationResolver } from '../../../../utilities/validation.js';
+import isEqual from 'lodash/isEqual.js';
+import mergeWith from 'lodash/mergeWith.js';
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation, Trans } from 'react-i18next';
+import { Typography, Link, Button, ButtonVariant, Skeleton, SkeletonAnimation, SkeletonBackgroundColor, SkeletonVariant, InlineNotification, NotificationType, Icon, DropdownOptionList, OptionGroup, Option, Divider } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { SE } from '@shipengine/react-api';
+import { styles } from './shipment-form.styles.js';
+import { getShipmentSchema } from './shipment-schema.js';
+import { useShipmentMetadata } from '../../../../hooks/options/use-shipment-metadata.js';
+import { useWindsorFramework } from '../../hooks/use-windsor-framework.js';
+import { useManageWarehouses } from '../../../../features/manage-warehouses/use-manage-warehouses.js';
+import { useConfirmationOptions } from '../../hooks/use-confirmation-options.js';
+import { useInsuranceProviderOptions } from '../../hooks/use-insurance-provider-options.js';
+import { usePackageOptions } from '../../hooks/use-package-options/use-package-options.js';
+import { useServiceCodeOptions } from '../../hooks/use-service-code-options/use-service-code-options.js';
+import { useShippingPresetsOptions } from '../../hooks/use-shipping-presets-options.js';
+import { useShipFromAddressOptions } from '../../hooks/use-ship-from-address-options.js';
+import { AddressForm } from '../../../../components/forms/address-form/address-form.js';
+import { ShipFromAddressForm } from '../../../../components/forms/ship-from-address-form/ship-from-address-form.js';
+import { WarehouseForm } from '../../../../components/forms/warehouse-form/warehouse-form.js';
+import { RegisterFundingSourceInsuranceForm } from '../../../../components/forms/register-funding-source-insurance-form/register-funding-source-insurance-form.js';
+import { AddressPreferenceDisplay } from '../../../../components/address-preference-display/address-preference-display.js';
+import { ItemsBreakdown } from '../../../../components/items-breakdown/items-breakdown.js';
+import { CustomsForms } from '../customs-forms/customs-forms.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { CanadaDeliveredDutyOptions } from '../../../../types/canada-ddp.js';
+import { Loader } from '../../../../components/loader/loader.js';
+import { Section } from '../../../../components/section/section.js';
+import { DatePicker } from '../../../../components/field/date-picker/date-picker.js';
+import { AddressPreferenceProvider } from '../../../../components/address-preference-context/address-preference-context.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { SelectWithCategories } from '../../../../components/field/select/select-with-categories.js';
+import { FieldLabel } from '../../../../components/field-label/field-label.js';
+import { AddressDisplay } from '../../../../components/address-display/address-display.js';
+import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+import { InputGroup } from '../../../../components/field/input-group/input-group.js';
+import { NumberInput } from '../../../../components/field/number-input/number-input.js';
+import { TextInput } from '../../../../components/field/text-input/text-input.js';
+import { Switch } from '../../../../components/field/switch/switch.js';
+import { Select } from '../../../../components/field/select/select.js';
+import { MoneyInput } from '../../../../components/field/money-input/money-input.js';
+import { SubmitButton } from '../../../../components/field/submit-button/submit-button.js';
+
+const minimumShipDate = nextDayCutoff(17);
+const maximumShipDate = daysAfter(7, minimumShipDate);
+const ShipmentForm = ({
+  accountSettings,
+  addressLoading,
+  shipToAddressPreference,
+  charsetWarning,
+  carriers,
+  customPackageTypes,
+  currency,
+  defaultFeatures,
+  disabledShippingServices,
+  features,
+  harmonizedTariffCodes,
+  hasShipFromAddressErrors,
+  hydrateRef,
+  insuranceAccount,
+  isLoading,
+  onApplyPreset,
+  onChangeAddress,
+  onChangeMode,
+  onChangeShipFromAddress,
+  onDirty,
+  onSubmit,
+  onSubmitParseAddress,
+  onToggleAddressPreferenceDisclosure,
+  onUpdateCustoms,
+  onUpdateTaxableIds,
+  parseAddressErrors,
+  resetParseAddress,
+  salesOrder,
+  shipment,
+  shipFromAddresses,
+  shippingPresets,
+  warehouseId,
+  warehouses
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  const {
+    locale: defaultLocale,
+    globalFeatures: {
+      enableParcelGuard
+    }
+  } = useElements();
+  const {
+    t
+  } = useTranslation(["purchase-label", "common"]);
+  const [requireMeasurements, setRequireMeasurements] = useState(!isFlatRatePackageCode((_a = shipment === null || shipment === void 0 ? void 0 : shipment.packages[0]) === null || _a === void 0 ? void 0 : _a.packageCode));
+  const [insuranceEnabled, setInsuranceEnabled] = useState(false);
+  const [hydratedShipmentId, setHydratedShipmentId] = useState(undefined);
+  const {
+    isContentDescriptionRequired,
+    isCustomsRequired,
+    hasAllZeroMeasurements,
+    isCanadaDeliveredDutyEligible
+  } = useShipmentMetadata(shipment);
+  const {
+    requiresWindsorFramework
+  } = useWindsorFramework(shipment, defaultFeatures === null || defaultFeatures === void 0 ? void 0 : defaultFeatures.betaEnableWindsorFramework);
+  const packageDimensions = shipment === null || shipment === void 0 ? void 0 : shipment.packages[0].dimensions;
+  const packageWeight = shipment === null || shipment === void 0 ? void 0 : shipment.packages[0].weight;
+  // if package specs are all zeroes, assume it is a custom package and default to account settings units
+  const [dimensionsUnit, weightUnit] = useMemo(() => hasAllZeroMeasurements ? [accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.dimensionsUnit, accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.weightUnit] : [packageDimensions === null || packageDimensions === void 0 ? void 0 : packageDimensions.unit, packageWeight === null || packageWeight === void 0 ? void 0 : packageWeight.unit], [packageDimensions, packageWeight, hasAllZeroMeasurements, accountSettings]);
+  const hasMeasurementUnits = useMemo(() => !!dimensionsUnit && !!weightUnit, [dimensionsUnit, weightUnit]);
+  const canInputMeasurements = hasMeasurementUnits && requireMeasurements;
+  const shipmentSchema = useMemo(() => getShipmentSchema({
+    dimensionsUnit,
+    isContentDescriptionRequired,
+    isCustomsRequired,
+    requireMeasurements,
+    requiresWindsorFramework,
+    weightUnit
+  }), [isCustomsRequired, requireMeasurements, requiresWindsorFramework, isContentDescriptionRequired, weightUnit, dimensionsUnit]);
+  const {
+    updateWarehouse,
+    refreshListWarehouses
+  } = useManageWarehouses();
+  const {
+    fundingSourceCountryCode,
+    hasInsuranceToRegister,
+    insuranceProviderProfiles,
+    registerInsuranceProvider
+  } = useManageFundingSourceInsurance();
+  const requestedServices = useMemo(() => getRequestedServices(salesOrder), [salesOrder]);
+  const form = useForm({
+    defaultValues: {
+      __mode: (features === null || features === void 0 ? void 0 : features.browseRates) ? "browse_rates" : "select_service",
+      shipDate: formatByDateAndLocale(minimumShipDate || new Date(), defaultLocale)
+    },
+    resolver: validationResolver(shipmentSchema)
+  });
+  form.register("__mode");
+  form.register("carrierId");
+  form.register("shipmentId");
+  const {
+    errors: {
+      packages: packageErrors
+    },
+    isDirty
+  } = form.formState;
+  const defaultMode = useMemo(() => (shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode) ? "select_service" : "browse_rates", [shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode]);
+  const selectedMode = form.watch("__mode");
+  const selectedCarrierId = form.watch("carrierId");
+  const selectedPackage = form.watch("packages.0.type");
+  const allCarrierIds = useMemo(() => (carriers || []).map(c => c.carrierId), [carriers]);
+  const carrierIds = useMemo(() => selectedCarrierId ? [selectedCarrierId] : allCarrierIds, [allCarrierIds, selectedCarrierId]);
+  const selectedCarriers = useMemo(() => {
+    if (selectedMode === "browse_rates") return carriers;
+    return (carriers !== null && carriers !== void 0 ? carriers : []).filter(c => carrierIds.includes(c.carrierId));
+  }, [carrierIds, carriers, selectedMode]);
+  const confirmationOptions = useConfirmationOptions();
+  const {
+    insuranceProviderOptions,
+    refetchInsuranceAcceptedTerms
+  } = useInsuranceProviderOptions(insuranceAccount, fundingSourceCountryCode === "US" ? {
+    includeCarrierInsurance: features === null || features === void 0 ? void 0 : features.includeCarrierInsurance,
+    includeShipsuranceInsurance: features === null || features === void 0 ? void 0 : features.includeShipsuranceInsurance,
+    includeThirdPartyInsurance: features === null || features === void 0 ? void 0 : features.includeThirdPartyInsurance
+  } :
+  // if the funding source is not in the US, exclude carrier and third party insurance options
+  undefined);
+  const packageOptions = usePackageOptions(selectedCarriers, customPackageTypes, shipment);
+  const serviceCodeOptions = useServiceCodeOptions(carriers, shipment, disabledShippingServices);
+  const shippingPresetOptions = useShippingPresetsOptions(shippingPresets, shipment);
+  const shipFromAddressOptions = useShipFromAddressOptions(warehouses, shipFromAddresses, shipment);
+  const [showItems, setShowItems] = useState(false);
+  const shipFromAddressOnShipmentId = useMemo(() => getSavedShipFromAddressId(shipment, shipFromAddresses), [shipFromAddresses, shipment]);
+  const [editShipFromAddressId, setEditShipFromAddressId] = useState((_b = shipment === null || shipment === void 0 ? void 0 : shipment.warehouseId) !== null && _b !== void 0 ? _b : shipFromAddressOnShipmentId);
+  // Set the correct addressId for the edit ship from address workflow
+  useEffect(() => {
+    var _a, _b, _c;
+    if (!editShipFromAddressId && (warehouses || warehouseId || shipFromAddressOnShipmentId || (shipment === null || shipment === void 0 ? void 0 : shipment.warehouseId))) {
+      const defaultWarehouse = getDefaultWarehouse(warehouses);
+      setEditShipFromAddressId((_c = (_b = (_a = shipment === null || shipment === void 0 ? void 0 : shipment.warehouseId) !== null && _a !== void 0 ? _a : shipFromAddressOnShipmentId) !== null && _b !== void 0 ? _b : warehouseId) !== null && _c !== void 0 ? _c : defaultWarehouse === null || defaultWarehouse === void 0 ? void 0 : defaultWarehouse.warehouseId);
+    }
+  }, [editShipFromAddressId, shipFromAddressOnShipmentId, shipment, warehouseId, warehouses]);
+  const [showApplyPreset, setShowApplyPreset] = useState(false);
+  const [selectedPreset, setSelectedPreset] = useState();
+  const applyPresetRef = useRef(null);
+  const findCustomPackage = useCallback(packageId => customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.find(pkg => pkg.packageId === packageId), [customPackageTypes]);
+  const handleBlurWeight = useCallback(() => {
+    const weight = form.getValues().packages[0].weight;
+    const {
+      whole,
+      fractional
+    } = formatFractionalWeight(weight, weightUnit);
+    form.setValue("packages.0.weight.whole", whole === 0 ? null : whole);
+    form.setValue("packages.0.weight.fractional", fractional === 0 ? null : fractional);
+  }, [form, weightUnit]);
+  const setFormMode = useCallback((nextMode, source = "form") => {
+    // Make sure we are using an allowed mode
+    nextMode = (features === null || features === void 0 ? void 0 : features.browseRates) ? nextMode : "select_service";
+    nextMode = (features === null || features === void 0 ? void 0 : features.selectService) ? nextMode : "browse_rates";
+    void (onChangeMode === null || onChangeMode === void 0 ? void 0 : onChangeMode({
+      defaultMode,
+      previousMode: selectedMode,
+      selectedMode: nextMode,
+      source
+    }));
+    form.setValue("__mode", nextMode);
+  }, [form, features === null || features === void 0 ? void 0 : features.browseRates, features === null || features === void 0 ? void 0 : features.selectService, selectedMode, defaultMode, onChangeMode]);
+  const handleChangeMode = useCallback(nextMode => __awaiter(void 0, void 0, void 0, function* () {
+    if (selectedCarrierId && selectedPackage.carrierId !== selectedCarrierId) {
+      // Only clear carrierId if package carrier doesn't match
+      form.setValue("carrierId", null, {
+        shouldDirty: true
+      });
+      form.setValue("packages.0.type", {
+        code: "package"
+      });
+    }
+    form.setValue("service", null, {
+      shouldDirty: true
+    });
+    setFormMode(nextMode, "user");
+  }), [form, selectedCarrierId, selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.carrierId, setFormMode]);
+  // Hydrate the entire shipment form
+  const hydrateShipment = useCallback(updatedShipment => {
+    var _a, _b, _c, _d, _e;
+    const customPackage = findCustomPackage(updatedShipment.packages[0].packageId);
+    const addressId = getSavedShipFromAddressId(updatedShipment, shipFromAddresses);
+    form.reset(Object.assign(Object.assign({
+      __mode: updatedShipment.serviceCode ? "select_service" : "browse_rates",
+      advancedOptions: Object.assign({
+        additionalHandling: ((_a = updatedShipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.additionalHandling) || false,
+        canadaDeliveredDuty: isCanadaDeliveredDutyEligible ? ((_b = updatedShipment.advancedOptions) === null || _b === void 0 ? void 0 : _b.canadaDeliveredDuty) ? CanadaDeliveredDutyOptions.SENDER_PREPAY : CanadaDeliveredDutyOptions.RECIPIENT_PAYS : null
+      }, requiresWindsorFramework && ((_c = updatedShipment.advancedOptions) === null || _c === void 0 ? void 0 : _c.windsorFrameworkDetails) && {
+        windsorFrameworkDetails: {
+          movementIndicator: (_d = updatedShipment.advancedOptions) === null || _d === void 0 ? void 0 : _d.windsorFrameworkDetails.movementIndicator,
+          notAtRisk: (_e = updatedShipment.advancedOptions) === null || _e === void 0 ? void 0 : _e.windsorFrameworkDetails.notAtRisk
+        }
+      }),
+      carrierId: updatedShipment.carrierId
+    }, (isCustomsRequired || requiresWindsorFramework) && {
+      customs: updatedShipment.customs
+    }), {
+      addressId: updatedShipment.warehouseId || addressId,
+      confirmation: updatedShipment.confirmation === "none" ? SE.ConfirmationType.NONE : updatedShipment.confirmation,
+      insuranceProvider: updatedShipment.insuranceProvider === "none" ? undefined : updatedShipment.insuranceProvider,
+      packages: updatedShipment.packages.map(pkg => {
+        var _a, _b;
+        return Object.assign(Object.assign(Object.assign({
+          contentDescription: isContentDescriptionRequired ? pkg.contentDescription : null
+        }, {
+          dimensions: !requireMeasurements || !pkg.dimensions ? null : convertDimensions(pkg.dimensions)
+        }), updatedShipment.insuranceProvider !== "none" && pkg.insuredValue && {
+          insuredValue: {
+            amount: (_a = pkg.insuredValue.amount) !== null && _a !== void 0 ? _a : null,
+            currency: pkg.insuredValue.currency
+          }
+        }), {
+          products: pkg.products,
+          type: Object.assign(Object.assign({}, !customPackage && pkg.packageCode !== "package" && {
+            carrierId: updatedShipment.carrierId
+          }), {
+            code: customPackage ? customPackage.packageId : (_b = pkg.packageCode) !== null && _b !== void 0 ? _b : "package"
+          }),
+          // If the weight is all zeros, we assume this is a freshly created draft shipment
+          weight: !requireMeasurements || Object.values(convertWeight(pkg.weight)).every(v => v === 0) ? null : convertWeight(pkg.weight)
+        });
+      }),
+      service: updatedShipment.serviceCode && updatedShipment.carrierId ? {
+        carrierId: updatedShipment.carrierId,
+        serviceCode: updatedShipment.serviceCode
+      } : undefined,
+      shipDate: formatByDateAndLocale(mostRecent(omitTime(updatedShipment.shipDate), minimumShipDate), defaultLocale),
+      shipmentId: updatedShipment.shipmentId
+    }));
+    setFormMode(updatedShipment.serviceCode ? "select_service" : "browse_rates");
+  }, [requireMeasurements, findCustomPackage, shipFromAddresses, form, isCanadaDeliveredDutyEligible, requiresWindsorFramework, isCustomsRequired, defaultLocale, setFormMode, isContentDescriptionRequired]);
+  // Allow us to imperatively trigger hydrateShipment from parent component
+  hydrateRef.current = hydrateShipment;
+  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+    var _m;
+    try {
+      const _o = values,
+        {
+          __mode: discard,
+          shipDate: payloadShipDate,
+          addressId,
+          advancedOptions: payloadAdvancedOptions
+        } = _o,
+        payload = __rest(_o, ["__mode", "shipDate", "addressId", "advancedOptions"]);
+      let advancedOptions = payloadAdvancedOptions;
+      if (isCanadaDeliveredDutyEligible && (payloadAdvancedOptions === null || payloadAdvancedOptions === void 0 ? void 0 : payloadAdvancedOptions.canadaDeliveredDuty)) {
+        advancedOptions = Object.assign(Object.assign({}, advancedOptions), {
+          canadaDeliveredDuty: (advancedOptions === null || advancedOptions === void 0 ? void 0 : advancedOptions.canadaDeliveredDuty) === CanadaDeliveredDutyOptions.SENDER_PREPAY ? CanadaDeliveredDutyOptions.SENDER_PREPAY : undefined
+        });
+      }
+      let shipDate = payloadShipDate;
+      if (defaultLocale !== "en-US") {
+        // formate shipDate to en-US format before updating the shipment
+        const date = parseLocaleDate(shipDate, defaultLocale);
+        shipDate = formatByDateAndLocale(date, "en-US", "MM/dd/yyyy");
+      }
+      const isWarehouseId = addressId === null || addressId === void 0 ? void 0 : addressId.includes("se-");
+      const updatedShipment = yield onSubmit(
+      // using mergeWith to get a deep merge and also respect undefined values
+      mergeWith(shipment, Object.assign({
+        advancedOptions,
+        shipDate,
+        shipTo: (_m = shipToAddressPreference === null || shipToAddressPreference === void 0 ? void 0 : shipToAddressPreference.selection) !== null && _m !== void 0 ? _m : shipment === null || shipment === void 0 ? void 0 : shipment.shipTo,
+        warehouseId: isWarehouseId ? addressId : undefined
+      }, payload), (objValue, srcValue, key, obj) => {
+        if (objValue !== srcValue && typeof srcValue === "undefined") {
+          obj[key] = srcValue;
+        }
+      }));
+      // Defer shipment hydration to the task queue so that the submission promise resolves first, otherwise the
+      // submission count will increment after hydration resets the form, keeping it in revalidate mode
+      if (updatedShipment) setTimeout(() => hydrateShipment(updatedShipment), 0);
+    } catch (_p) {
+      // Reset the form to its current state, but as a side effect this sets isDirty to false
+      // That way, form lifecycle contract is upheld
+      form.reset(form.getValues());
+    }
+  }));
+  // When shipment is first loaded, hydrate the entire form
+  if (shipment && shipment.shipmentId !== hydratedShipmentId) {
+    setHydratedShipmentId(shipment.shipmentId);
+    hydrateShipment(shipment);
+  }
+  useEffect(() => {
+    if (isDirty) onDirty();
+  }, [isDirty, onDirty]);
+  // Autopopulate package dimensions if user selects a custom package
+  useEffect(() => {
+    const customPackage = findCustomPackage(selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.packageId);
+    if ((customPackage === null || customPackage === void 0 ? void 0 : customPackage.dimensions) && !isEqual(customPackage === null || customPackage === void 0 ? void 0 : customPackage.dimensions, form.getValues("packages.0.dimensions"))) {
+      const {
+        length,
+        width,
+        height
+      } = customPackage.dimensions;
+      form.setValue("packages.0.dimensions.length", length);
+      form.setValue("packages.0.dimensions.width", width);
+      form.setValue("packages.0.dimensions.height", height);
+    }
+  }, [findCustomPackage, form, selectedPackage]);
+  useEffect(() => {
+    const selectedPackageRequiresMeasurements = !isFlatRatePackageCode(selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.code);
+    // check that the state has changed to prevent unnecessary form resets
+    if (selectedPackageRequiresMeasurements !== requireMeasurements) {
+      setRequireMeasurements(selectedPackageRequiresMeasurements);
+      // if the new package or preset does not require measurements, nullify the form values
+      if (!selectedPackageRequiresMeasurements) {
+        form.reset(Object.assign(Object.assign({}, form.getValues()), {
+          packages: [Object.assign(Object.assign({}, form.getValues().packages[0]), {
+            dimensions: {
+              height: null,
+              length: null,
+              width: null
+            },
+            weight: {
+              fractional: null,
+              whole: null
+            }
+          })]
+        }));
+      }
+    }
+  }, [selectedPackage, form, selectedPreset, requireMeasurements]);
+  const handleApplyPreset = useCallback(preset => __awaiter(void 0, void 0, void 0, function* () {
+    const {
+      length,
+      width,
+      height
+    } = preset.dimensions || {};
+    const convertedWeight = preset.weight ? convertWeight(preset.weight) : undefined;
+    const validInsuranceProvider = insuranceProviderOptions.some(option => option.value === preset.insuranceProvider);
+    const isFlateRate = isFlatRatePackageCode(preset.packageCode);
+    const validatedPreset = Object.assign(Object.assign({}, preset), {
+      confirmation: preset.confirmation || SE.ConfirmationType.NONE,
+      insuranceProvider: validInsuranceProvider ? preset.insuranceProvider : SE.InsuranceProviderType.NONE,
+      insuredValue: validInsuranceProvider ? preset.insuredValue : undefined
+    });
+    form.reset({
+      confirmation: validatedPreset.confirmation,
+      insuranceProvider: validatedPreset.insuranceProvider,
+      packages: [{
+        dimensions: {
+          height,
+          length,
+          width
+        },
+        insuredValue: validatedPreset.insuredValue,
+        type: Object.assign(Object.assign({}, isFlateRate ? {
+          carrierId: validatedPreset.carrierId
+        } : {}), {
+          code: validatedPreset.packageCode
+        }),
+        weight: {
+          fractional: (convertedWeight === null || convertedWeight === void 0 ? void 0 : convertedWeight.fractional) || null,
+          whole: (convertedWeight === null || convertedWeight === void 0 ? void 0 : convertedWeight.whole) || null
+        }
+      }],
+      service: validatedPreset.serviceCode && validatedPreset.carrierId ? {
+        carrierId: validatedPreset.carrierId,
+        serviceCode: validatedPreset.serviceCode
+      } : undefined
+    }, {
+      keepDefaultValues: true
+    });
+    if (validatedPreset.serviceCode && validatedPreset.carrierId) {
+      setFormMode("select_service");
+    } else {
+      setFormMode("browse_rates");
+    }
+    setSelectedPreset(preset);
+    yield onApplyPreset === null || onApplyPreset === void 0 ? void 0 : onApplyPreset(validatedPreset);
+  }), [form, insuranceProviderOptions, onApplyPreset, setFormMode]);
+  const handleChangePreference = useCallback(selectedAddress => __awaiter(void 0, void 0, void 0, function* () {
+    yield onChangeAddress(selectedAddress, {
+      shouldValidate: false
+    });
+    onDirty();
+  }), [onChangeAddress, onDirty]);
+  const handleSubmitEditShipTo = useCallback(payload => __awaiter(void 0, void 0, void 0, function* () {
+    const wasCustomsRequired = shipment && getIsCustomsRequiredForShipment(shipment);
+    const result = yield onChangeAddress(payload, {
+      shouldValidate: true
+    });
+    if (result) {
+      const customsRequired = getIsCustomsRequiredForShipment(result);
+      if (!wasCustomsRequired && customsRequired) {
+        // If customs wasn't previously required
+        // Hydrate customs object with default values
+        form.setValue("customs", {
+          contents: SE.CustomsContentsType.MERCHANDISE,
+          nonDelivery: SE.CustomsNonDeliveryType.RETURN_TO_SENDER
+        });
+        form.setValue("packages.0.products", []);
+      } else if (wasCustomsRequired && !customsRequired) {
+        // If customs is no longer required, clear customs object from schema
+        form.setValue("customs", undefined);
+      }
+    }
+  }), [form, onChangeAddress, shipment]);
+  const handleSubmitEditWarehouse = useCallback((payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
+    yield updateWarehouse({
+      isDefault: payload.isDefault,
+      name: payload.name,
+      originAddress: payload.originAddress,
+      returnAddress: payload.returnAddress,
+      warehouseId: warehouseId
+    });
+    yield refreshListWarehouses();
+  }), [refreshListWarehouses, updateWarehouse]);
+  const [editShipToForm, isEditShipToFormOpen, toggleIsEditShipToFormOpen] = useNestedForm(AddressForm, {
+    address: (_d = (_c = shipToAddressPreference === null || shipToAddressPreference === void 0 ? void 0 : shipToAddressPreference.selection) !== null && _c !== void 0 ? _c : shipment === null || shipment === void 0 ? void 0 : shipment.shipTo) !== null && _d !== void 0 ? _d : salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo,
+    formId: "edit-ship-to-form",
+    isShipToForm: true,
+    onSubmit: handleSubmitEditShipTo,
+    onSubmitParse: onSubmitParseAddress,
+    parseAddressErrors,
+    resetParseAddress
+  });
+  const [editShipFromAddressForm, isEditShipFromAddressFormOpen, toggleIsEditShipFromAddressFormOpen] = useNestedForm(ShipFromAddressForm, {
+    formId: "edit-ship-from-address-form",
+    onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
+      yield onChangeShipFromAddress(undefined, payload);
+    }),
+    onSubmitParse: onSubmitParseAddress,
+    parseAddressErrors,
+    preValidationErrors: hasShipFromAddressErrors,
+    resetParseAddress,
+    shipFromAddress: {
+      isDefault: false,
+      originAddress: shipment === null || shipment === void 0 ? void 0 : shipment.shipFrom,
+      returnAddress: shipment === null || shipment === void 0 ? void 0 : shipment.returnTo
+    }
+  });
+  useEffect(() => {
+    hasShipFromAddressErrors && toggleIsEditShipFromAddressFormOpen();
+  }, [hasShipFromAddressErrors, toggleIsEditShipFromAddressFormOpen]);
+  const [editWarehouseForm, isEditWarehouseFormOpen, toggleIsEditWarehouseFormOpen] = useNestedForm(WarehouseForm, {
+    formId: "edit-warehouse-form",
+    onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
+      editShipFromAddressId && (yield handleSubmitEditWarehouse(payload, editShipFromAddressId));
+    }),
+    submitButtonTitle: t("actions.save"),
+    warehouse: warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.warehouseId === editShipFromAddressId)
+  });
+  const getFundingSourceInsuranceProviderKey = useCallback(provider => {
+    if (provider === "parcelguard") {
+      return "PARCELGUARD";
+    } else if (provider === "x_cover") {
+      return "X_COVER";
+    }
+    return undefined;
+  }, []);
+  const insuranceProviderKey = useMemo(() => {
+    var _a, _b, _c;
+    if (enableParcelGuard && !hasInsuranceToRegister) {
+      const provider = (_a = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles[0]) === null || _a === void 0 ? void 0 : _a.provider;
+      const fundingSourceProviderKey = getFundingSourceInsuranceProviderKey(provider);
+      if (fundingSourceProviderKey) {
+        return fundingSourceProviderKey;
+      }
+    }
+    return (_c = (_b = insuranceProviderOptions[0]) === null || _b === void 0 ? void 0 : _b.value.toUpperCase()) !== null && _c !== void 0 ? _c : "NONE";
+  }, [enableParcelGuard, hasInsuranceToRegister, insuranceProviderOptions, insuranceProviderProfiles, getFundingSourceInsuranceProviderKey]);
+  const [registerInsuranceForm, isRegisterInsuranceFormOpen, toggleisRegisterInsuranceFormOpen] = useNestedForm(RegisterFundingSourceInsuranceForm, {
+    formId: "register-funding-source-insurance-form",
+    insuranceProviderProfile: insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles[0],
+    onCancel: useCallback(() => {
+      setInsuranceEnabled(false);
+    }, []),
+    onSubmit: useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+      var _q, _r;
+      const attachmentResult = yield registerInsuranceProvider();
+      yield refetchInsuranceAcceptedTerms();
+      setInsuranceEnabled(true);
+      form.setValue("insuranceProvider", attachmentResult.isSuccessful ? SE.InsuranceProviderType[(_r = getFundingSourceInsuranceProviderKey((_q = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles[0]) === null || _q === void 0 ? void 0 : _q.provider)) !== null && _r !== void 0 ? _r : "NONE"] : SE.InsuranceProviderType[insuranceProviderKey]);
+      return attachmentResult;
+    }), [form, getFundingSourceInsuranceProviderKey, insuranceProviderKey, insuranceProviderProfiles, refetchInsuranceAcceptedTerms, registerInsuranceProvider]),
+    showDescription: true
+  });
+  const handleInsuranceSwitchChange = useCallback(e => {
+    setInsuranceEnabled(e.target.checked);
+    if (insuranceProviderOptions.length === 0 && hasInsuranceToRegister) {
+      toggleisRegisterInsuranceFormOpen();
+    }
+    form.setValue("insuranceProvider", e.target.checked ? SE.InsuranceProviderType[insuranceProviderKey] : undefined, {
+      shouldDirty: true
+    });
+  }, [insuranceProviderOptions.length, hasInsuranceToRegister, form, insuranceProviderKey, toggleisRegisterInsuranceFormOpen]);
+  const customsItemErrorScrollToRef = useRef(null);
+  useEffect(() => {
+    var _a, _b;
+    if (((_b = (_a = (packageErrors !== null && packageErrors !== void 0 ? packageErrors : [])[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.type) === "too_small") {
+      setTimeout(() => {
+        var _a;
+        (_a = customsItemErrorScrollToRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }, 0);
+    }
+  }, [packageErrors]);
+  useEffect(() => {
+    const {
+      __mode
+    } = form.getValues();
+    // This function automatically limits value based on updated features
+    setFormMode(__mode);
+  }, [form, features === null || features === void 0 ? void 0 : features.browseRates, features === null || features === void 0 ? void 0 : features.selectService, setFormMode]);
+  const salesOrderItems = useMemo(() => getSalesOrderItemsFromSalesOrderOrShipment({
+    salesOrder,
+    shipment
+  }), [salesOrder, shipment]);
+  const upsCarrierId = (_e = carriers === null || carriers === void 0 ? void 0 : carriers.find(c => c.carrierCode === "ups")) === null || _e === void 0 ? void 0 : _e.carrierId;
+  const hasUpsOptions = useMemo(() => {
+    return (packageOptions === null || packageOptions === void 0 ? void 0 : packageOptions.some(option => option.label === "UPS")) && ((selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.code) === "package" || selectedCarrierId === upsCarrierId);
+  }, [packageOptions, selectedPackage, selectedCarrierId, upsCarrierId]);
+  const insuranceProvider = form.getValues("insuranceProvider");
+  const formHasInsuranceOrRegistrationFormOpen = useMemo(() => {
+    return isRegisterInsuranceFormOpen || (insuranceProvider !== null && insuranceProvider !== void 0 ? insuranceProvider : "none") !== "none";
+  }, [isRegisterInsuranceFormOpen, insuranceProvider]);
+  if (isLoading) return jsx(Loader, {
+    message: t("loading.shipment")
+  });
+  if (!shipment) throw new Error("errorMessages.unableToLoad.shipment");
+  const addressPreferenceIsEmpty = !addressLoading && isEmptyAddress(shipToAddressPreference === null || shipToAddressPreference === void 0 ? void 0 : shipToAddressPreference.selection); // undefined means it's still loading
+  return jsxs("form", Object.assign({
+    id: "shipment-form",
+    onSubmit: formLogger.capture(handleSubmit)
+  }, {
+    children: [jsxs(Section, Object.assign({
+      "data-testid": "orderDetail"
+    }, {
+      children: [jsx(DatePicker, {
+        control: form.control,
+        label: t("purchase-label:fields.shipDate"),
+        maxDate: maximumShipDate,
+        minDate: minimumShipDate,
+        name: "shipDate",
+        placeholderText: t("purchase-label:fields.today")
+      }), isEditWarehouseFormOpen || isEditShipFromAddressFormOpen ? jsxs(Fragment, {
+        children: [jsxs(AddressPreferenceProvider, Object.assign({
+          css: styles.well,
+          formHeader: isEditWarehouseFormOpen ? jsxs("div", Object.assign({
+            css: styles.header
+          }, {
+            children: [jsx(Typography, Object.assign({
+              variant: "subtitle1"
+            }, {
+              children: t("manage-warehouses:editWarehouse")
+            })), jsx(Spacer, {
+              multiplier: 1
+            })]
+          })) : null,
+          onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
+            const {
+                passengerData: warehouseData
+              } = payload,
+              rest = __rest(payload, ["passengerData"]);
+            if (warehouseData) {
+              yield handleSubmitEditWarehouse(Object.assign(Object.assign({}, rest), warehouseData), editShipFromAddressId);
+              toggleIsEditWarehouseFormOpen();
+            } else {
+              yield onChangeShipFromAddress(undefined, rest);
+              toggleIsEditShipFromAddressFormOpen();
+            }
+            setEditShipFromAddressId(undefined);
+          })
+        }, {
+          children: [editWarehouseForm, editShipFromAddressForm]
+        })), jsx(Spacer, {})]
+      }) : jsx("div", Object.assign({
+        css: styles.shipFromSelectContainer
+      }, {
+        children: (features === null || features === void 0 ? void 0 : features.useWarehouses) || !!(shipFromAddresses === null || shipFromAddresses === void 0 ? void 0 : shipFromAddresses.length) ? jsxs(Fragment, {
+          children: [jsx(SelectWithCategories, {
+            control: form.control,
+            disabled: !shipFromAddressOptions,
+            isInvalid: !!hasShipFromAddressErrors,
+            label: t("purchase-label:fields.warehouse"),
+            name: "addressId",
+            onChange: id => __awaiter(void 0, void 0, void 0, function* () {
+              if (!id) {
+                return;
+              }
+              setEditShipFromAddressId(id);
+              yield onChangeShipFromAddress(id, {
+                isDefault: false,
+                originAddress: shipment.shipFrom,
+                returnAddress: shipment.returnTo
+              });
+            }),
+            options: shipFromAddressOptions || []
+          }), jsx(Link, Object.assign({
+            css: styles.shipFromEditButton,
+            onClick: event => {
+              event.preventDefault();
+              if (editShipFromAddressId === null || editShipFromAddressId === void 0 ? void 0 : editShipFromAddressId.includes("custom")) {
+                toggleIsEditShipFromAddressFormOpen();
+              } else {
+                toggleIsEditWarehouseFormOpen();
+              }
+            },
+            onKeyDown: event => {
+              if (event.key === "Enter") {
+                if (editShipFromAddressId === null || editShipFromAddressId === void 0 ? void 0 : editShipFromAddressId.includes("custom")) {
+                  toggleIsEditShipFromAddressFormOpen();
+                } else {
+                  toggleIsEditWarehouseFormOpen();
+                }
+              }
+            },
+            role: "button",
+            tabIndex: 0
+          }, {
+            children: t("actions.edit")
+          }))]
+        }) : jsx(FieldLabel, Object.assign({
+          label: isEditShipFromAddressFormOpen ? "" : t("purchase-label:fields.warehouse")
+        }, {
+          children: jsx(AddressDisplay, {
+            address: shipment.shipFrom,
+            onEdit: () => {
+              // Mark the form as dirty to disallow purchasing while editing the address
+              onDirty();
+              toggleIsEditShipFromAddressFormOpen();
+            }
+          })
+        }))
+      })), jsx(FieldLabel, Object.assign({
+        label: !isEditShipToFormOpen ? "purchase-label:fields.shipTo" : ""
+      }, {
+        children: !isEditShipToFormOpen && (addressPreferenceIsEmpty ? jsx(Button, Object.assign({
+          onClick: toggleIsEditShipToFormOpen,
+          variant: ButtonVariant.OUTLINED
+        }, {
+          children: t("purchase-label:fields:addShipToAddress")
+        })) : shipToAddressPreference ? jsx(AddressPreferenceDisplay, {
+          addressPreference: shipToAddressPreference,
+          onChangePreference: handleChangePreference,
+          onEditAddress: () => {
+            // Mark the form as dirty to disallow purchasing while editing the address
+            onDirty === null || onDirty === void 0 ? void 0 : onDirty();
+            toggleIsEditShipToFormOpen();
+          },
+          onToggleDisclosure: onToggleAddressPreferenceDisclosure
+        }) : jsxs(Fragment, {
+          children: [jsx(Skeleton, {
+            animation: SkeletonAnimation.WAVE,
+            backgroundColor: SkeletonBackgroundColor.LIGHT,
+            height: 24,
+            variant: SkeletonVariant.TEXT
+          }), jsx("br", {}), jsx(Skeleton, {
+            animation: SkeletonAnimation.WAVE,
+            backgroundColor: SkeletonBackgroundColor.LIGHT,
+            height: 24,
+            variant: SkeletonVariant.TEXT
+          })]
+        }))
+      })), charsetWarning && jsxs(Fragment, {
+        children: [jsx(Spacer, {
+          multiplier: 1
+        }), jsx(InlineNotification, Object.assign({
+          title: charsetWarning.title || undefined,
+          type: charsetWarning.title ? NotificationType.ERROR : NotificationType.ALERT
+        }, {
+          children: charsetWarning.message
+        }))]
+      }), editShipToForm, (salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.orderDate) && jsxs(FieldLabel, Object.assign({
+        label: t("purchase-label:fields.orderDate")
+      }, {
+        children: [jsx(Typography, {
+          children: formatDate(salesOrder.orderDate, defaultLocale)
+        }), jsx(Spacer, {})]
+      })), ((_f = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.paymentDetails) === null || _f === void 0 ? void 0 : _f.grandTotal) && jsxs(FieldLabel, Object.assign({
+        label: t("purchase-label:fields.orderValue")
+      }, {
+        children: [jsx(Typography, {
+          children: formatMoney(salesOrder.paymentDetails.grandTotal)
+        }), jsx(Spacer, {})]
+      })), !!requestedServices.length && jsxs(FieldLabel, Object.assign({
+        label: t("purchase-label:fields.requestedShipping")
+      }, {
+        children: [jsx(Typography, {
+          children: requestedServices.length > 1 ? t("purchase-label:multipleShippingServices") : requestedServices[0].toString()
+        }), jsx(Spacer, {})]
+      })), salesOrder && salesOrder.paymentDetails.estimatedShipping.amount > 0 && jsxs(FieldLabel, Object.assign({
+        label: t("purchase-label:fields.estimatedShipping")
+      }, {
+        children: [jsx(Typography, {
+          children: formatMoney(salesOrder.paymentDetails.estimatedShipping)
+        }), jsx(Spacer, {})]
+      })), salesOrder && salesOrderItems.length > 0 && jsx(FieldLabel, Object.assign({
+        label: t("purchase-label:fields.items")
+      }, {
+        children: jsxs("div", Object.assign({
+          css: {
+            display: "flex",
+            justifyContent: "space-between"
+          }
+        }, {
+          children: [jsx(Typography, {
+            children: salesOrder.salesOrderItems.reduce((total, i) => i.quantity + total, 0).toString()
+          }), jsxs(Link, Object.assign({
+            css: theme => ({
+              alignItems: "center",
+              display: "flex",
+              fontWeight: scopeTheme(theme).typography.fontWeight.normal
+            }),
+            onClick: event => {
+              event.preventDefault();
+              setShowItems(!showItems);
+            },
+            onKeyDown: event => {
+              if (event.key === "Enter") {
+                setShowItems(!showItems);
+              }
+            },
+            role: "button",
+            tabIndex: 0
+          }, {
+            children: [showItems ? t("purchase-label:actions.hideItems") : t("purchase-label:actions.showItems"), jsx(Icon, {
+              name: showItems ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
+            })]
+          }))]
+        }))
+      })), showItems && jsx(ItemsBreakdown, {
+        items: salesOrderItems
+      })]
+    })), jsx("div", {
+      ref: customsItemErrorScrollToRef
+    }), shipment && (isCustomsRequired || requiresWindsorFramework) && jsx(CustomsForms, {
+      currency: currency,
+      form: form,
+      harmonizedTariffCodes: harmonizedTariffCodes,
+      isCanadaDeliveredDutyEligible: isCanadaDeliveredDutyEligible,
+      onDirty: onDirty,
+      onUpdateCustoms: onUpdateCustoms,
+      onUpdateTaxableIds: onUpdateTaxableIds,
+      requiresWindsorFramework: requiresWindsorFramework,
+      shipment: shipment
+    }), jsxs(Section, Object.assign({
+      "data-testid": "packageDetail",
+      rightContent: (features === null || features === void 0 ? void 0 : features.shippingPresets) && shippingPresetOptions.length > 0 ? jsxs(Fragment, {
+        children: [jsxs(Link, Object.assign({
+          css: theme => ({
+            alignItems: "center",
+            display: "flex",
+            fontWeight: scopeTheme(theme).typography.fontWeight.normal
+          }),
+          onClick: event => {
+            event.preventDefault();
+            setShowApplyPreset(!showApplyPreset);
+          },
+          onKeyDown: event => {
+            if (event.key === "Enter") {
+              setShowApplyPreset(!showApplyPreset);
+            }
+          },
+          ref: applyPresetRef,
+          role: "button",
+          tabIndex: 0
+        }, {
+          children: [t("shippingPresets.apply"), jsx(Icon, {
+            name: showApplyPreset ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
+          })]
+        })), jsx(DropdownOptionList, Object.assign({
+          "data-id": "dropdown",
+          dropdownWidth: "400px",
+          hideWhenReferenceNotVisible: true,
+          isOpen: showApplyPreset,
+          onChange: () => setShowApplyPreset(false),
+          onClickAway: e => {
+            var _a;
+            if (applyPresetRef && ((_a = applyPresetRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+              return;
+            }
+            setShowApplyPreset(false);
+          },
+          reference: applyPresetRef.current
+        }, {
+          children: shippingPresetOptions.filter(preset => preset.options.length > 0).map(presetCategory => jsx(OptionGroup, Object.assign({
+            label: presetCategory.categoryName
+          }, {
+            children: presetCategory.options.map(preset => jsx(Option, Object.assign({
+              onClick: () => {
+                onDirty(); // bypass rate cache
+                void handleApplyPreset(preset.value);
+              },
+              selected: isEqual(selectedPreset, preset.value),
+              value: JSON.stringify(preset.value)
+            }, {
+              children: preset.description
+            }), JSON.stringify(preset.value)))
+          }), presetCategory.categoryName))
+        }))]
+      }) : undefined,
+      title: t("purchase-label:sections.shipment")
+    }, {
+      children: [(features === null || features === void 0 ? void 0 : features.browseRates) && (features === null || features === void 0 ? void 0 : features.selectService) && jsxs(Fragment, {
+        children: [jsxs(ButtonGroup, Object.assign({
+          toolbar: true
+        }, {
+          children: [jsx(Button, Object.assign({
+            bold: false,
+            css: () => ({
+              transition: "none"
+            }),
+            isFullWidth: true,
+            onClick: () => handleChangeMode("browse_rates"),
+            variant: selectedMode === "browse_rates" ? undefined : ButtonVariant.OUTLINED
+          }, {
+            children: t("purchase-label:modes.browseRates")
+          })), jsx(Button, Object.assign({
+            bold: false,
+            css: () => ({
+              transition: "none"
+            }),
+            isFullWidth: true,
+            onClick: () => handleChangeMode("select_service"),
+            variant: selectedMode === "select_service" ? undefined : ButtonVariant.OUTLINED
+          }, {
+            children: t("purchase-label:modes.selectService")
+          }))]
+        })), jsx(Spacer, {})]
+      }), selectedMode === "select_service" && jsx(SelectWithCategories, {
+        control: form.control,
+        disabled: !serviceCodeOptions.length,
+        label: t("purchase-label:fields.service"),
+        name: "service",
+        onCategoryChange: value => {
+          const carrierId = value;
+          form.setValue("carrierId", carrierId);
+          if (carrierId && !(carrierIds === null || carrierIds === void 0 ? void 0 : carrierIds.includes(carrierId))) {
+            form.setValue("packages.0.type", {
+              code: "package"
+            });
+          }
+          // we have deviated from preset so we need to clear it in order to keep required dims and weight fields in sync
+          setSelectedPreset(undefined);
+        },
+        options: serviceCodeOptions,
+        shouldUnregister: true
+      }), jsx(SelectWithCategories, {
+        control: form.control,
+        defaultValue: {
+          code: "package"
+        },
+        disabled: !packageOptions,
+        label: t("purchase-label:fields.packageCode"),
+        name: "packages.0.type",
+        onCategoryChange: value => {
+          form.setValue("carrierId", value);
+          // we have deviated from preset so we need to clear it in order to keep required dims and weight fields in sync
+          setSelectedPreset(undefined);
+        },
+        options: packageOptions
+      }), jsxs(InputGroup, Object.assign({
+        control: form.control,
+        disabled: !!findCustomPackage(selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.code) || !canInputMeasurements,
+        label: `${t("purchase-label:fields.dimensionsGroup")}${dimensionsUnit ? ` (${t(`units.${dimensionsUnit}`)})` : ""}`,
+        name: "packages.0.dimensions",
+        trigger: form.trigger
+      }, {
+        children: [jsx(NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.dimensions.length"),
+          name: "packages.0.dimensions.length",
+          placeholder: "L"
+        }), jsx(NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.dimensions.width"),
+          name: "packages.0.dimensions.width",
+          placeholder: "W"
+        }), jsx(NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.dimensions.height"),
+          name: "packages.0.dimensions.height",
+          placeholder: "H"
+        })]
+      })), weightUnit && isMetricWeightUnit(weightUnit) ? jsx(NumberInput, {
+        control: form.control,
+        disabled: !canInputMeasurements,
+        label: t("purchase-label:fields.weightGroup"),
+        name: "packages.0.weight.whole",
+        onBlur: handleBlurWeight,
+        rightContent: t(`units.${weightUnit}`)
+      }) : jsxs(InputGroup, Object.assign({
+        control: form.control,
+        disabled: !canInputMeasurements,
+        label: t("purchase-label:fields.weightGroup"),
+        name: "packages.0.weight",
+        trigger: form.trigger
+      }, {
+        children: [jsx(NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.weight.whole"),
+          name: "packages.0.weight.whole",
+          onBlur: handleBlurWeight,
+          rightContent: t("units.lbs")
+        }), jsx(NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.weight.fractional"),
+          name: "packages.0.weight.fractional",
+          onBlur: handleBlurWeight,
+          rightContent: t("units.oz")
+        })]
+      })), isContentDescriptionRequired && jsx(TextInput, {
+        control: form.control,
+        hint: t("purchase-label:hints.contentDescription"),
+        label: t("purchase-label:fields.contentDescription"),
+        name: "packages.0.contentDescription"
+      }), (features === null || features === void 0 ? void 0 : features.addOns) && jsxs(Fragment, {
+        children: [jsx(Divider, {
+          "aria-hidden": true
+        }), jsx(Spacer, {}), jsxs(FieldLabel, Object.assign({
+          label: "purchase-label:fields.addOns"
+        }, {
+          children: [jsx(Switch, Object.assign({
+            defaultChecked: ((_g = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none",
+            label: t("purchase-label:fields.confirmation"),
+            name: "confirmationEnabled",
+            onChange: e => form.setValue("confirmation", e.target.checked ? SE.ConfirmationType.DELIVERY : undefined, {
+              shouldDirty: true
+            }),
+            shouldUnmount: true,
+            value: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none" || ((_j = form.getValues("confirmation")) !== null && _j !== void 0 ? _j : "none") !== "none"
+          }, {
+            children: jsx(Select, {
+              control: form.control,
+              defaultValue: SE.ConfirmationType.DELIVERY,
+              displayLabel: false,
+              label: t("purchase-label:fields.confirmation"),
+              name: "confirmation",
+              options: confirmationOptions,
+              shouldUnregister: true
+            })
+          })), hasUpsOptions && jsx(Switch, {
+            defaultChecked: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _k === void 0 ? void 0 : _k.additionalHandling) || false,
+            label: jsx(Trans, {
+              components: {
+                Link: jsx(Link, {
+                  href: "https://help.paypal.shipstation.com/hc/en-us/articles/13823149193755-UPS-Additional-Handling",
+                  rel: "noopener noreferrer",
+                  target: "_blank"
+                })
+              },
+              i18nKey: "purchase-label:fields.requires-additional-handling",
+              t: t
+            }),
+            name: "advancedOptions.additionalHandling",
+            onChange: e => form.setValue("advancedOptions.additionalHandling", e.target.checked, {
+              shouldDirty: true
+            }),
+            value: form.getValues("advancedOptions.additionalHandling") || false
+          }), (insuranceProviderOptions.length > 0 || hasInsuranceToRegister) && jsxs(Fragment, {
+            children: [jsx(Switch, Object.assign({
+              defaultChecked: ((_l = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _l !== void 0 ? _l : "none") !== "none",
+              label: t("purchase-label:fields.insurance"),
+              name: "insuranceEnabled",
+              onChange: handleInsuranceSwitchChange,
+              shouldUnmount: true,
+              value: formHasInsuranceOrRegistrationFormOpen
+            }, {
+              children: insuranceProviderOptions.length > 0 ? jsxs(Fragment, {
+                children: [jsx(Select, {
+                  control: form.control,
+                  defaultValue: insuranceEnabled ? SE.InsuranceProviderType[insuranceProviderKey] : SE.InsuranceProviderType.NONE,
+                  displayLabel: false,
+                  label: t("purchase-label:fields.insuranceProvider"),
+                  name: "insuranceProvider",
+                  options: insuranceProviderOptions,
+                  shouldUnregister: true
+                }), jsx(MoneyInput, {
+                  control: form.control,
+                  defaultValue: {
+                    amount: undefined,
+                    currency
+                  },
+                  displayLabel: false,
+                  label: t("purchase-label:fields.insuredValue"),
+                  name: "packages.0.insuredValue",
+                  placeholder: t("purchase-label:fields.insuredValue"),
+                  shouldUnregister: true,
+                  showCurrencySymbol: true
+                })]
+              }) : null
+            })), hasInsuranceToRegister && !isRegisterInsuranceFormOpen ? jsxs(Fragment, {
+              children: [jsx(InlineNotification, Object.assign({
+                showIcon: false,
+                type: NotificationType.INFO
+              }, {
+                children: jsxs("div", Object.assign({
+                  css: styles.enableInsuranceNotification
+                }, {
+                  children: [jsx(Icon, {
+                    css: styles.featuredIcon,
+                    name: IconNames.FEATURED
+                  }), jsx("span", {
+                    children: jsx(Trans, Object.assign({
+                      i18nKey: `purchase-label:cta.${insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles[0].provider}`
+                    }, {
+                      children: jsx(Link, {
+                        "aria-label": "Enable Insurance",
+                        css: styles.link,
+                        onClick: toggleisRegisterInsuranceFormOpen
+                      })
+                    }))
+                  })]
+                }))
+              })), jsx(Spacer, {})]
+            }) : null]
+          })]
+        })), isRegisterInsuranceFormOpen && jsxs(Fragment, {
+          children: [jsx("div", Object.assign({
+            css: styles.registerInsuranceFormContainer
+          }, {
+            children: registerInsuranceForm
+          })), jsx(Spacer, {})]
+        })]
+      }), jsx("div", Object.assign({
+        css: {
+          display: "flex",
+          justifyContent: "flex-end"
+        },
+        "data-testid": "actions"
+      }, {
+        children: jsx(SubmitButton, Object.assign({
+          control: form.control,
+          disabled: addressLoading || isEditShipToFormOpen || addressPreferenceIsEmpty,
+          variant: ButtonVariant.OUTLINED
+        }, {
+          children: t("purchase-label:actions.calculateRates", {
+            count: selectedMode === "browse_rates" ? 0 : 1
+          })
+        }))
+      }))]
+    }))]
+  }));
+};
+
+export { ShipmentForm };