@shipengine/elements 2.20.0 → 2.22.0

package/cjs/elements/purchase-label/components/shipment-form/shipment-form.cjs

@@ -0,0 +1,1067 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useManageFundingSourceInsurance = require('../../../../hooks/use-manage-funding-source-insurance.cjs');
+var useNestedForm = require('../../../../hooks/use-nested-form.cjs');
+var date = require('../../../../utilities/date.cjs');
+var formLogger = require('../../../../utilities/form-logger.cjs');
+var money = require('../../../../utilities/money.cjs');
+var address = require('../../../../utilities/shipengine/address.cjs');
+var dimensions = require('../../../../utilities/shipengine/dimensions.cjs');
+var _package = require('../../../../utilities/shipengine/package.cjs');
+var salesOrder = require('../../../../utilities/shipengine/sales-order.cjs');
+var shipment = require('../../../../utilities/shipengine/shipment.cjs');
+var warehouses = require('../../../../utilities/shipengine/warehouses.cjs');
+var weight = require('../../../../utilities/shipengine/weight.cjs');
+var styles = require('../../../../utilities/styles.cjs');
+var validation = require('../../../../utilities/validation.cjs');
+var isEqual = require('lodash/isEqual.js');
+var mergeWith = require('lodash/mergeWith.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var reactApi = require('@shipengine/react-api');
+var shipmentForm_styles = require('./shipment-form.styles.cjs');
+var shipmentSchema = require('./shipment-schema.cjs');
+var useShipmentMetadata = require('../../../../hooks/options/use-shipment-metadata.cjs');
+var useWindsorFramework = require('../../hooks/use-windsor-framework.cjs');
+var useManageWarehouses = require('../../../../features/manage-warehouses/use-manage-warehouses.cjs');
+var useConfirmationOptions = require('../../hooks/use-confirmation-options.cjs');
+var useInsuranceProviderOptions = require('../../hooks/use-insurance-provider-options.cjs');
+var usePackageOptions = require('../../hooks/use-package-options/use-package-options.cjs');
+var useServiceCodeOptions = require('../../hooks/use-service-code-options/use-service-code-options.cjs');
+var useShippingPresetsOptions = require('../../hooks/use-shipping-presets-options.cjs');
+var useShipFromAddressOptions = require('../../hooks/use-ship-from-address-options.cjs');
+var addressForm = require('../../../../components/forms/address-form/address-form.cjs');
+var shipFromAddressForm = require('../../../../components/forms/ship-from-address-form/ship-from-address-form.cjs');
+var warehouseForm = require('../../../../components/forms/warehouse-form/warehouse-form.cjs');
+var registerFundingSourceInsuranceForm = require('../../../../components/forms/register-funding-source-insurance-form/register-funding-source-insurance-form.cjs');
+var addressPreferenceDisplay = require('../../../../components/address-preference-display/address-preference-display.cjs');
+var itemsBreakdown = require('../../../../components/items-breakdown/items-breakdown.cjs');
+var customsForms = require('../customs-forms/customs-forms.cjs');
+var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
+var canadaDdp = require('../../../../types/canada-ddp.cjs');
+var loader = require('../../../../components/loader/loader.cjs');
+var section = require('../../../../components/section/section.cjs');
+var datePicker = require('../../../../components/field/date-picker/date-picker.cjs');
+var addressPreferenceContext = require('../../../../components/address-preference-context/address-preference-context.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+var selectWithCategories = require('../../../../components/field/select/select-with-categories.cjs');
+var linkAction = require('../../../../components/link-action/link-action.cjs');
+var fieldLabel = require('../../../../components/field-label/field-label.cjs');
+var addressDisplay = require('../../../../components/address-display/address-display.cjs');
+var segementedControl = require('../../../../components/segmented-control/segemented-control.cjs');
+var inputGroup = require('../../../../components/field/input-group/input-group.cjs');
+var numberInput = require('../../../../components/field/number-input/number-input.cjs');
+var textInput = require('../../../../components/field/text-input/text-input.cjs');
+var _switch = require('../../../../components/field/switch/switch.cjs');
+var select = require('../../../../components/field/select/select.cjs');
+var moneyInput = require('../../../../components/field/money-input/money-input.cjs');
+var submitButton = require('../../../../components/field/submit-button/submit-button.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var mergeWith__default = /*#__PURE__*/_interopDefaultLegacy(mergeWith);
+
+const minimumShipDate = date.nextDayCutoff(17);
+const maximumShipDate = date.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: salesOrder$1,
+  shipment: shipment$1,
+  shipFromAddresses,
+  shippingPresets,
+  warehouseId,
+  warehouses: warehouses$1
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  const {
+    locale: defaultLocale,
+    globalFeatures: {
+      enableParcelGuard
+    }
+  } = elementsContextProvider.useElements();
+  const {
+    t
+  } = reactI18next.useTranslation(["purchase-label", "common"]);
+  const [requireMeasurements, setRequireMeasurements] = React.useState(!_package.isFlatRatePackageCode((_a = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.packages[0]) === null || _a === void 0 ? void 0 : _a.packageCode));
+  const [insuranceEnabled, setInsuranceEnabled] = React.useState(false);
+  const [hydratedShipmentId, setHydratedShipmentId] = React.useState(undefined);
+  const {
+    isContentDescriptionRequired,
+    isCustomsRequired,
+    hasAllZeroMeasurements,
+    isCanadaDeliveredDutyEligible
+  } = useShipmentMetadata.useShipmentMetadata(shipment$1);
+  const {
+    requiresWindsorFramework
+  } = useWindsorFramework.useWindsorFramework(shipment$1, defaultFeatures === null || defaultFeatures === void 0 ? void 0 : defaultFeatures.betaEnableWindsorFramework);
+  const packageDimensions = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.packages[0].dimensions;
+  const packageWeight = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.packages[0].weight;
+  // if package specs are all zeroes, assume it is a custom package and default to account settings units
+  const [dimensionsUnit, weightUnit] = React.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 = React.useMemo(() => !!dimensionsUnit && !!weightUnit, [dimensionsUnit, weightUnit]);
+  const canInputMeasurements = hasMeasurementUnits && requireMeasurements;
+  const shipmentSchema$1 = React.useMemo(() => shipmentSchema.getShipmentSchema({
+    dimensionsUnit,
+    isContentDescriptionRequired,
+    isCustomsRequired,
+    requireMeasurements,
+    requiresWindsorFramework,
+    weightUnit
+  }), [isCustomsRequired, requireMeasurements, requiresWindsorFramework, isContentDescriptionRequired, weightUnit, dimensionsUnit]);
+  const {
+    updateWarehouse,
+    refreshListWarehouses
+  } = useManageWarehouses.useManageWarehouses();
+  const {
+    fundingSourceCountryCode,
+    hasInsuranceToRegister,
+    insuranceProviderProfiles,
+    registerInsuranceProvider
+  } = useManageFundingSourceInsurance.useManageFundingSourceInsurance();
+  const requestedServices = React.useMemo(() => salesOrder.getRequestedServices(salesOrder$1), [salesOrder$1]);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      __mode: (features === null || features === void 0 ? void 0 : features.browseRates) ? "browse_rates" : "select_service",
+      shipDate: date.formatByDateAndLocale(minimumShipDate || new Date(), defaultLocale)
+    },
+    resolver: validation.validationResolver(shipmentSchema$1)
+  });
+  form.register("__mode");
+  form.register("carrierId");
+  form.register("shipmentId");
+  const {
+    errors: {
+      packages: packageErrors
+    },
+    isDirty
+  } = form.formState;
+  const defaultMode = React.useMemo(() => (shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.serviceCode) ? "select_service" : "browse_rates", [shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.serviceCode]);
+  const selectedMode = form.watch("__mode");
+  const selectedCarrierId = form.watch("carrierId");
+  const selectedPackage = form.watch("packages.0.type");
+  const allCarrierIds = React.useMemo(() => (carriers || []).map(c => c.carrierId), [carriers]);
+  const carrierIds = React.useMemo(() => selectedCarrierId ? [selectedCarrierId] : allCarrierIds, [allCarrierIds, selectedCarrierId]);
+  const selectedCarriers = React.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.useConfirmationOptions();
+  const {
+    insuranceProviderOptions,
+    refetchInsuranceAcceptedTerms
+  } = useInsuranceProviderOptions.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.usePackageOptions(selectedCarriers, customPackageTypes, shipment$1);
+  const serviceCodeOptions = useServiceCodeOptions.useServiceCodeOptions(carriers, shipment$1, disabledShippingServices);
+  const shippingPresetOptions = useShippingPresetsOptions.useShippingPresetsOptions(shippingPresets, shipment$1);
+  const shipFromAddressOptions = useShipFromAddressOptions.useShipFromAddressOptions(warehouses$1, shipFromAddresses, shipment$1);
+  const [showItems, setShowItems] = React.useState(false);
+  const shipFromAddressOnShipmentId = React.useMemo(() => address.getSavedShipFromAddressId(shipment$1, shipFromAddresses), [shipFromAddresses, shipment$1]);
+  const [editShipFromAddressId, setEditShipFromAddressId] = React.useState((_b = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.warehouseId) !== null && _b !== void 0 ? _b : shipFromAddressOnShipmentId);
+  // Set the correct addressId for the edit ship from address workflow
+  React.useEffect(() => {
+    var _a, _b, _c;
+    if (!editShipFromAddressId && (warehouses$1 || warehouseId || shipFromAddressOnShipmentId || (shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.warehouseId))) {
+      const defaultWarehouse = warehouses.getDefaultWarehouse(warehouses$1);
+      setEditShipFromAddressId((_c = (_b = (_a = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.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$1, warehouseId, warehouses$1]);
+  const [showApplyPreset, setShowApplyPreset] = React.useState(false);
+  const [selectedPreset, setSelectedPreset] = React.useState();
+  const applyPresetRef = React.useRef(null);
+  const findCustomPackage = React.useCallback(packageId => customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.find(pkg => pkg.packageId === packageId), [customPackageTypes]);
+  const handleBlurWeight = React.useCallback(() => {
+    const weight$1 = form.getValues().packages[0].weight;
+    const {
+      whole,
+      fractional
+    } = weight.formatFractionalWeight(weight$1, 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 = React.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 = React.useCallback(nextMode => tslib.__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 = React.useCallback(updatedShipment => {
+    var _a, _b, _c, _d, _e;
+    const customPackage = findCustomPackage(updatedShipment.packages[0].packageId);
+    const addressId = address.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) ? canadaDdp.CanadaDeliveredDutyOptions.SENDER_PREPAY : canadaDdp.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" ? reactApi.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 : dimensions.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(weight.convertWeight(pkg.weight)).every(v => v === 0) ? null : weight.convertWeight(pkg.weight)
+        });
+      }),
+      service: updatedShipment.serviceCode && updatedShipment.carrierId ? {
+        carrierId: updatedShipment.carrierId,
+        serviceCode: updatedShipment.serviceCode
+      } : undefined,
+      shipDate: date.formatByDateAndLocale(date.mostRecent(date.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 => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    var _m;
+    try {
+      const _o = values,
+        {
+          __mode: discard,
+          shipDate: payloadShipDate,
+          addressId,
+          advancedOptions: payloadAdvancedOptions
+        } = _o,
+        payload = tslib.__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) === canadaDdp.CanadaDeliveredDutyOptions.SENDER_PREPAY ? canadaDdp.CanadaDeliveredDutyOptions.SENDER_PREPAY : undefined
+        });
+      }
+      let shipDate = payloadShipDate;
+      if (defaultLocale !== "en-US") {
+        // formate shipDate to en-US format before updating the shipment
+        const date$1 = date.parseLocaleDate(shipDate, defaultLocale);
+        shipDate = date.formatByDateAndLocale(date$1, "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__default["default"](shipment$1, Object.assign({
+        advancedOptions,
+        shipDate,
+        shipTo: (_m = shipToAddressPreference === null || shipToAddressPreference === void 0 ? void 0 : shipToAddressPreference.selection) !== null && _m !== void 0 ? _m : shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.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$1 && shipment$1.shipmentId !== hydratedShipmentId) {
+    setHydratedShipmentId(shipment$1.shipmentId);
+    hydrateShipment(shipment$1);
+  }
+  React.useEffect(() => {
+    if (isDirty) onDirty();
+  }, [isDirty, onDirty]);
+  // Autopopulate package dimensions if user selects a custom package
+  React.useEffect(() => {
+    const customPackage = findCustomPackage(selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.packageId);
+    if ((customPackage === null || customPackage === void 0 ? void 0 : customPackage.dimensions) && !isEqual__default["default"](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]);
+  React.useEffect(() => {
+    const selectedPackageRequiresMeasurements = !_package.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 = React.useCallback(preset => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const {
+      length,
+      width,
+      height
+    } = preset.dimensions || {};
+    const convertedWeight = preset.weight ? weight.convertWeight(preset.weight) : undefined;
+    const validInsuranceProvider = insuranceProviderOptions.some(option => option.value === preset.insuranceProvider);
+    const isFlateRate = _package.isFlatRatePackageCode(preset.packageCode);
+    const validatedPreset = Object.assign(Object.assign({}, preset), {
+      confirmation: preset.confirmation || reactApi.SE.ConfirmationType.NONE,
+      insuranceProvider: validInsuranceProvider ? preset.insuranceProvider : reactApi.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 = React.useCallback(selectedAddress => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield onChangeAddress(selectedAddress, {
+      shouldValidate: false
+    });
+    onDirty();
+  }), [onChangeAddress, onDirty]);
+  const handleSubmitEditShipTo = React.useCallback(payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const wasCustomsRequired = shipment$1 && shipment.getIsCustomsRequiredForShipment(shipment$1);
+    const result = yield onChangeAddress(payload, {
+      shouldValidate: true
+    });
+    if (result) {
+      const customsRequired = shipment.getIsCustomsRequiredForShipment(result);
+      if (!wasCustomsRequired && customsRequired) {
+        // If customs wasn't previously required
+        // Hydrate customs object with default values
+        form.setValue("customs", {
+          contents: reactApi.SE.CustomsContentsType.MERCHANDISE,
+          nonDelivery: reactApi.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$1]);
+  const handleSubmitEditWarehouse = React.useCallback((payload, warehouseId) => tslib.__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.useNestedForm(addressForm.AddressForm, {
+    address: (_d = (_c = shipToAddressPreference === null || shipToAddressPreference === void 0 ? void 0 : shipToAddressPreference.selection) !== null && _c !== void 0 ? _c : shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipTo) !== null && _d !== void 0 ? _d : salesOrder$1 === null || salesOrder$1 === void 0 ? void 0 : salesOrder$1.shipTo,
+    formId: "edit-ship-to-form",
+    isShipToForm: true,
+    onSubmit: handleSubmitEditShipTo,
+    onSubmitParse: onSubmitParseAddress,
+    parseAddressErrors,
+    resetParseAddress
+  });
+  const [editShipFromAddressForm, isEditShipFromAddressFormOpen, toggleIsEditShipFromAddressFormOpen] = useNestedForm.useNestedForm(shipFromAddressForm.ShipFromAddressForm, {
+    formId: "edit-ship-from-address-form",
+    onSubmit: payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      yield onChangeShipFromAddress(undefined, payload);
+    }),
+    onSubmitParse: onSubmitParseAddress,
+    parseAddressErrors,
+    preValidationErrors: hasShipFromAddressErrors,
+    resetParseAddress,
+    shipFromAddress: {
+      isDefault: false,
+      originAddress: shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipFrom,
+      returnAddress: shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.returnTo
+    }
+  });
+  React.useEffect(() => {
+    hasShipFromAddressErrors && toggleIsEditShipFromAddressFormOpen();
+  }, [hasShipFromAddressErrors, toggleIsEditShipFromAddressFormOpen]);
+  const [editWarehouseForm, isEditWarehouseFormOpen, toggleIsEditWarehouseFormOpen] = useNestedForm.useNestedForm(warehouseForm.WarehouseForm, {
+    formId: "edit-warehouse-form",
+    onSubmit: payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      editShipFromAddressId && (yield handleSubmitEditWarehouse(payload, editShipFromAddressId));
+    }),
+    submitButtonTitle: t("actions.save"),
+    warehouse: warehouses$1 === null || warehouses$1 === void 0 ? void 0 : warehouses$1.find(w => w.warehouseId === editShipFromAddressId)
+  });
+  const getFundingSourceInsuranceProviderKey = React.useCallback(provider => {
+    if (provider === "parcelguard") {
+      return "PARCELGUARD";
+    } else if (provider === "x_cover") {
+      return "X_COVER";
+    }
+    return undefined;
+  }, []);
+  const insuranceProviderKey = React.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.useNestedForm(registerFundingSourceInsuranceForm.RegisterFundingSourceInsuranceForm, {
+    formId: "register-funding-source-insurance-form",
+    insuranceProviderProfile: insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles[0],
+    onCancel: React.useCallback(() => {
+      setInsuranceEnabled(false);
+    }, []),
+    onSubmit: React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      var _q, _r;
+      const attachmentResult = yield registerInsuranceProvider();
+      yield refetchInsuranceAcceptedTerms();
+      setInsuranceEnabled(true);
+      form.setValue("insuranceProvider", attachmentResult.isSuccessful ? reactApi.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"] : reactApi.SE.InsuranceProviderType[insuranceProviderKey]);
+      return attachmentResult;
+    }), [form, getFundingSourceInsuranceProviderKey, insuranceProviderKey, insuranceProviderProfiles, refetchInsuranceAcceptedTerms, registerInsuranceProvider]),
+    showDescription: true
+  });
+  const handleInsuranceSwitchChange = React.useCallback(e => {
+    setInsuranceEnabled(e.target.checked);
+    if (insuranceProviderOptions.length === 0 && hasInsuranceToRegister) {
+      toggleisRegisterInsuranceFormOpen();
+    }
+    form.setValue("insuranceProvider", e.target.checked ? reactApi.SE.InsuranceProviderType[insuranceProviderKey] : undefined, {
+      shouldDirty: true
+    });
+  }, [insuranceProviderOptions.length, hasInsuranceToRegister, form, insuranceProviderKey, toggleisRegisterInsuranceFormOpen]);
+  const customsItemErrorScrollToRef = React.useRef(null);
+  React.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]);
+  React.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 = React.useMemo(() => salesOrder.getSalesOrderItemsFromSalesOrderOrShipment({
+    salesOrder: salesOrder$1,
+    shipment: shipment$1
+  }), [salesOrder$1, shipment$1]);
+  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 = React.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 = React.useMemo(() => {
+    return isRegisterInsuranceFormOpen || (insuranceProvider !== null && insuranceProvider !== void 0 ? insuranceProvider : "none") !== "none";
+  }, [isRegisterInsuranceFormOpen, insuranceProvider]);
+  if (isLoading) return jsxRuntime.jsx(loader.Loader, {
+    message: t("loading.shipment")
+  });
+  if (!shipment$1) throw new Error("errorMessages.unableToLoad.shipment");
+  const addressPreferenceIsEmpty = !addressLoading && address.isEmptyAddress(shipToAddressPreference === null || shipToAddressPreference === void 0 ? void 0 : shipToAddressPreference.selection); // undefined means it's still loading
+  return jsxRuntime.jsxs("form", Object.assign({
+    id: "shipment-form",
+    onSubmit: formLogger.formLogger.capture(handleSubmit)
+  }, {
+    children: [jsxRuntime.jsxs(section.Section, Object.assign({
+      "data-testid": "orderDetail"
+    }, {
+      children: [jsxRuntime.jsx(datePicker.DatePicker, {
+        control: form.control,
+        label: t("purchase-label:fields.shipDate"),
+        maxDate: maximumShipDate,
+        minDate: minimumShipDate,
+        name: "shipDate",
+        placeholderText: t("purchase-label:fields.today")
+      }), isEditWarehouseFormOpen || isEditShipFromAddressFormOpen ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsxs(addressPreferenceContext.AddressPreferenceProvider, Object.assign({
+          css: shipmentForm_styles.styles.well,
+          formHeader: isEditWarehouseFormOpen ? jsxRuntime.jsxs("div", Object.assign({
+            css: shipmentForm_styles.styles.header
+          }, {
+            children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+              variant: "subtitle1"
+            }, {
+              children: t("manage-warehouses:editWarehouse")
+            })), jsxRuntime.jsx(spacer.Spacer, {
+              multiplier: 1
+            })]
+          })) : null,
+          onSubmit: payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+            const {
+                passengerData: warehouseData
+              } = payload,
+              rest = tslib.__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]
+        })), jsxRuntime.jsx(spacer.Spacer, {})]
+      }) : jsxRuntime.jsx("div", Object.assign({
+        css: shipmentForm_styles.styles.shipFromSelectContainer
+      }, {
+        children: (features === null || features === void 0 ? void 0 : features.useWarehouses) || !!(shipFromAddresses === null || shipFromAddresses === void 0 ? void 0 : shipFromAddresses.length) ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(selectWithCategories.SelectWithCategories, {
+            control: form.control,
+            disabled: !shipFromAddressOptions,
+            isInvalid: !!hasShipFromAddressErrors,
+            label: t("purchase-label:fields.warehouse"),
+            name: "addressId",
+            onChange: id => tslib.__awaiter(void 0, void 0, void 0, function* () {
+              if (!id) {
+                return;
+              }
+              setEditShipFromAddressId(id);
+              yield onChangeShipFromAddress(id, {
+                isDefault: false,
+                originAddress: shipment$1.shipFrom,
+                returnAddress: shipment$1.returnTo
+              });
+            }),
+            options: shipFromAddressOptions || []
+          }), jsxRuntime.jsx(linkAction.LinkAction, {
+            css: shipmentForm_styles.styles.shipFromEditButton,
+            onClick: event => {
+              event.preventDefault();
+              if (editShipFromAddressId === null || editShipFromAddressId === void 0 ? void 0 : editShipFromAddressId.includes("custom")) {
+                toggleIsEditShipFromAddressFormOpen();
+              } else {
+                toggleIsEditWarehouseFormOpen();
+              }
+            },
+            title: t("actions.edit")
+          })]
+        }) : jsxRuntime.jsx(fieldLabel.FieldLabel, Object.assign({
+          label: isEditShipFromAddressFormOpen ? "" : t("purchase-label:fields.warehouse")
+        }, {
+          children: jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+            address: shipment$1.shipFrom,
+            onEdit: () => {
+              // Mark the form as dirty to disallow purchasing while editing the address
+              onDirty();
+              toggleIsEditShipFromAddressFormOpen();
+            }
+          })
+        }))
+      })), jsxRuntime.jsx(fieldLabel.FieldLabel, Object.assign({
+        label: !isEditShipToFormOpen ? "purchase-label:fields.shipTo" : ""
+      }, {
+        children: !isEditShipToFormOpen && (addressPreferenceIsEmpty ? jsxRuntime.jsx(giger.Button, Object.assign({
+          onClick: toggleIsEditShipToFormOpen,
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("purchase-label:fields:addShipToAddress")
+        })) : shipToAddressPreference ? jsxRuntime.jsx(addressPreferenceDisplay.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
+        }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(giger.Skeleton, {
+            animation: giger.SkeletonAnimation.WAVE,
+            backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+            height: 24,
+            variant: giger.SkeletonVariant.TEXT
+          }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(giger.Skeleton, {
+            animation: giger.SkeletonAnimation.WAVE,
+            backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+            height: 24,
+            variant: giger.SkeletonVariant.TEXT
+          })]
+        }))
+      })), charsetWarning && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 1
+        }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+          title: charsetWarning.title || undefined,
+          type: charsetWarning.title ? giger.NotificationType.ERROR : giger.NotificationType.ALERT
+        }, {
+          children: charsetWarning.message
+        }))]
+      }), editShipToForm, (salesOrder$1 === null || salesOrder$1 === void 0 ? void 0 : salesOrder$1.orderDate) && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        label: t("purchase-label:fields.orderDate")
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, {
+          children: date.formatDate(salesOrder$1.orderDate, defaultLocale)
+        }), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), ((_f = salesOrder$1 === null || salesOrder$1 === void 0 ? void 0 : salesOrder$1.paymentDetails) === null || _f === void 0 ? void 0 : _f.grandTotal) && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        label: t("purchase-label:fields.orderValue")
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, {
+          children: money.formatMoney(salesOrder$1.paymentDetails.grandTotal)
+        }), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), !!requestedServices.length && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        label: t("purchase-label:fields.requestedShipping")
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, {
+          children: requestedServices.length > 1 ? t("purchase-label:multipleShippingServices") : requestedServices[0].toString()
+        }), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), salesOrder$1 && salesOrder$1.paymentDetails.estimatedShipping.amount > 0 && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        label: t("purchase-label:fields.estimatedShipping")
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, {
+          children: money.formatMoney(salesOrder$1.paymentDetails.estimatedShipping)
+        }), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), salesOrder$1 && salesOrderItems.length > 0 && jsxRuntime.jsx(fieldLabel.FieldLabel, Object.assign({
+        label: t("purchase-label:fields.items")
+      }, {
+        children: jsxRuntime.jsxs("div", Object.assign({
+          css: {
+            display: "flex",
+            justifyContent: "space-between"
+          }
+        }, {
+          children: [jsxRuntime.jsx(giger.Typography, {
+            children: salesOrder$1.salesOrderItems.reduce((total, i) => i.quantity + total, 0).toString()
+          }), jsxRuntime.jsx(linkAction.LinkAction, {
+            css: theme => ({
+              fontWeight: styles.scopeTheme(theme).typography.fontWeight.normal
+            }),
+            icon: showItems ? "chevronTop" : "chevronBottom",
+            iconPlacement: "right",
+            onClick: event => {
+              event.preventDefault();
+              setShowItems(!showItems);
+            },
+            title: showItems ? t("purchase-label:actions.hideItems") : t("purchase-label:actions.showItems")
+          })]
+        }))
+      })), showItems && jsxRuntime.jsx(itemsBreakdown.ItemsBreakdown, {
+        items: salesOrderItems
+      })]
+    })), jsxRuntime.jsx("div", {
+      ref: customsItemErrorScrollToRef
+    }), shipment$1 && (isCustomsRequired || requiresWindsorFramework) && jsxRuntime.jsx(customsForms.CustomsForms, {
+      currency: currency,
+      form: form,
+      harmonizedTariffCodes: harmonizedTariffCodes,
+      isCanadaDeliveredDutyEligible: isCanadaDeliveredDutyEligible,
+      onDirty: onDirty,
+      onUpdateCustoms: onUpdateCustoms,
+      onUpdateTaxableIds: onUpdateTaxableIds,
+      requiresWindsorFramework: requiresWindsorFramework,
+      shipment: shipment$1
+    }), jsxRuntime.jsxs(section.Section, Object.assign({
+      "data-testid": "packageDetail",
+      rightContent: (features === null || features === void 0 ? void 0 : features.shippingPresets) && shippingPresetOptions.length > 0 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(linkAction.LinkAction, {
+          icon: showApplyPreset ? "chevronTop" : "chevronBottom",
+          iconPlacement: "right",
+          onClick: event => {
+            event.preventDefault();
+            setShowApplyPreset(!showApplyPreset);
+          },
+          ref: applyPresetRef,
+          title: t("shippingPresets.apply")
+        }), jsxRuntime.jsx(giger.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 => jsxRuntime.jsx(giger.OptionGroup, Object.assign({
+            label: presetCategory.categoryName
+          }, {
+            children: presetCategory.options.map(preset => jsxRuntime.jsx(giger.Option, Object.assign({
+              onClick: () => {
+                onDirty(); // bypass rate cache
+                void handleApplyPreset(preset.value);
+              },
+              selected: isEqual__default["default"](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) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(segementedControl.SegmentedControl, {
+          fullWidth: true,
+          onSelect: value => {
+            void handleChangeMode(value);
+          },
+          segments: [{
+            label: t("purchase-label:modes.browseRates"),
+            value: "browse_rates"
+          }, {
+            label: t("purchase-label:modes.selectService"),
+            value: "select_service"
+          }],
+          selectedSegment: selectedMode
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 3
+        })]
+      }), selectedMode === "select_service" && jsxRuntime.jsx(selectWithCategories.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
+      }), jsxRuntime.jsx(selectWithCategories.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
+      }), jsxRuntime.jsxs(inputGroup.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: [jsxRuntime.jsx(numberInput.NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.dimensions.length"),
+          name: "packages.0.dimensions.length",
+          placeholder: "L"
+        }), jsxRuntime.jsx(numberInput.NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.dimensions.width"),
+          name: "packages.0.dimensions.width",
+          placeholder: "W"
+        }), jsxRuntime.jsx(numberInput.NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.dimensions.height"),
+          name: "packages.0.dimensions.height",
+          placeholder: "H"
+        })]
+      })), weightUnit && weight.isMetricWeightUnit(weightUnit) ? jsxRuntime.jsx(numberInput.NumberInput, {
+        control: form.control,
+        disabled: !canInputMeasurements,
+        label: t("purchase-label:fields.weightGroup"),
+        name: "packages.0.weight.whole",
+        onBlur: handleBlurWeight,
+        rightContent: t(`units.${weightUnit}`)
+      }) : jsxRuntime.jsxs(inputGroup.InputGroup, Object.assign({
+        control: form.control,
+        disabled: !canInputMeasurements,
+        label: t("purchase-label:fields.weightGroup"),
+        name: "packages.0.weight",
+        trigger: form.trigger
+      }, {
+        children: [jsxRuntime.jsx(numberInput.NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.weight.whole"),
+          name: "packages.0.weight.whole",
+          onBlur: handleBlurWeight,
+          rightContent: t("units.lbs")
+        }), jsxRuntime.jsx(numberInput.NumberInput, {
+          control: form.control,
+          label: t("purchase-label:fields.weight.fractional"),
+          name: "packages.0.weight.fractional",
+          onBlur: handleBlurWeight,
+          rightContent: t("units.oz")
+        })]
+      })), isContentDescriptionRequired && jsxRuntime.jsx(textInput.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) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Divider, {
+          "aria-hidden": true
+        }), jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+          label: "purchase-label:fields.addOns"
+        }, {
+          children: [jsxRuntime.jsx(_switch.Switch, Object.assign({
+            defaultChecked: ((_g = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none",
+            label: t("purchase-label:fields.confirmation"),
+            name: "confirmationEnabled",
+            onChange: e => form.setValue("confirmation", e.target.checked ? reactApi.SE.ConfirmationType.DELIVERY : undefined, {
+              shouldDirty: true
+            }),
+            shouldUnmount: true,
+            value: ((_h = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none" || ((_j = form.getValues("confirmation")) !== null && _j !== void 0 ? _j : "none") !== "none"
+          }, {
+            children: jsxRuntime.jsx(select.Select, {
+              control: form.control,
+              defaultValue: reactApi.SE.ConfirmationType.DELIVERY,
+              displayLabel: false,
+              label: t("purchase-label:fields.confirmation"),
+              name: "confirmation",
+              options: confirmationOptions,
+              shouldUnregister: true
+            })
+          })), hasUpsOptions && jsxRuntime.jsx(_switch.Switch, {
+            defaultChecked: ((_k = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.advancedOptions) === null || _k === void 0 ? void 0 : _k.additionalHandling) || false,
+            label: jsxRuntime.jsx(reactI18next.Trans, {
+              components: {
+                Link: jsxRuntime.jsx(giger.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) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(_switch.Switch, Object.assign({
+              defaultChecked: ((_l = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.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 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [jsxRuntime.jsx(select.Select, {
+                  control: form.control,
+                  defaultValue: insuranceEnabled ? reactApi.SE.InsuranceProviderType[insuranceProviderKey] : reactApi.SE.InsuranceProviderType.NONE,
+                  displayLabel: false,
+                  label: t("purchase-label:fields.insuranceProvider"),
+                  name: "insuranceProvider",
+                  options: insuranceProviderOptions,
+                  shouldUnregister: true
+                }), jsxRuntime.jsx(moneyInput.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 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+                showIcon: false,
+                type: giger.NotificationType.INFO
+              }, {
+                children: jsxRuntime.jsxs("div", Object.assign({
+                  css: shipmentForm_styles.styles.enableInsuranceNotification
+                }, {
+                  children: [jsxRuntime.jsx(giger.Icon, {
+                    css: shipmentForm_styles.styles.featuredIcon,
+                    name: gigerTheme.IconNames.FEATURED
+                  }), jsxRuntime.jsx("span", {
+                    children: jsxRuntime.jsx(reactI18next.Trans, Object.assign({
+                      i18nKey: `purchase-label:cta.${insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles[0].provider}`
+                    }, {
+                      children: jsxRuntime.jsx(giger.Link, {
+                        "aria-label": "Enable Insurance",
+                        css: shipmentForm_styles.styles.link,
+                        onClick: toggleisRegisterInsuranceFormOpen
+                      })
+                    }))
+                  })]
+                }))
+              })), jsxRuntime.jsx(spacer.Spacer, {})]
+            }) : null]
+          })]
+        })), isRegisterInsuranceFormOpen && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx("div", Object.assign({
+            css: shipmentForm_styles.styles.registerInsuranceFormContainer
+          }, {
+            children: registerInsuranceForm
+          })), jsxRuntime.jsx(spacer.Spacer, {})]
+        })]
+      }), jsxRuntime.jsx("div", Object.assign({
+        css: {
+          display: "flex",
+          justifyContent: "flex-end"
+        },
+        "data-testid": "actions"
+      }, {
+        children: jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+          control: form.control,
+          disabled: addressLoading || isEditShipToFormOpen || addressPreferenceIsEmpty,
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("purchase-label:actions.calculateRates", {
+            count: selectedMode === "browse_rates" ? 0 : 1
+          })
+        }))
+      }))]
+    }))]
+  }));
+};
+
+exports.ShipmentForm = ShipmentForm;