@shipengine/elements 0.28.0 → 0.29.0

package/index.cjs

@@ -13757,6 +13757,7 @@ const getShipmentSchema = ({
 const minimumShipDate = nextDayCutoff(17);
 const maximumShipDate = daysAfter(7, minimumShipDate);
 const ShipmentForm = ({
+  addressLoading,
   addressPreference,
   charsetWarning,
   carriers,
@@ -14103,9 +14104,7 @@ const ShipmentForm = ({
   });
   if (errors) throw new Error(errors.map(e => e.message).join(", "));
   if (!shipment) throw new Error("errorMessages.unableToLoad.shipment");
-  const addressPreferenceIsEmpty =
-  // undefined means it's still loading
-  addressPreference !== undefined && isEmptyAddress(addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection);
+  const addressPreferenceIsEmpty = !addressLoading && isEmptyAddress(addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection); // undefined means it's still loading
   return jsxRuntime.jsxs("form", Object.assign({
     id: "shipment-form",
     onSubmit: formLogger.capture(handleSubmit)
@@ -14504,7 +14503,7 @@ const ShipmentForm = ({
       }, {
         children: jsxRuntime.jsx(SubmitButton, Object.assign({
           control: form.control,
-          disabled: isEditShipFormToOpen,
+          disabled: addressLoading || isEditShipFormToOpen || addressPreferenceIsEmpty,
           variant: giger.ButtonVariant.OUTLINED
         }, {
           children: t("purchase-label:actions.calculateRates", {
@@ -15966,7 +15965,12 @@ const useAddress = ({
     error: parseAddressErrors,
     mutateAsync: parseAddress
   } = alchemy.useParseAddress();
-  const [addressPreference, setAddressPreference] = React.useState();
+  const [addressPreference, _setAddressPreference] = React.useState();
+  const [loading, setLoading] = React.useState(true);
+  const setAddressPreference = React.useCallback((...args) => {
+    setLoading(false);
+    _setAddressPreference(...args);
+  }, [_setAddressPreference]);
   const toggle = React.useCallback(() => {
     let updatedSelection = undefined;
     setAddressPreference(prevState => {
@@ -16071,6 +16075,8 @@ const useAddress = ({
     // without this check it will keep reverting a one-off label's address preference back to empty for some reason
     !isEmptyAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo)) {
       void handleValidateAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo);
+    } else {
+      setLoading(false);
     }
   }, [addressPreference, handleValidateAddress, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo, shipment === null || shipment === void 0 ? void 0 : shipment.shipTo]);
   const charsetWarning = React.useMemo(() => Object.keys((addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection) || {}).reduce((warning, key) => {
@@ -16092,6 +16098,7 @@ const useAddress = ({
   }, undefined), [addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection, t]);
   const errors = [...(validateAddressErrors !== null && validateAddressErrors !== void 0 ? validateAddressErrors : []), ...(updateShipmentErrors !== null && updateShipmentErrors !== void 0 ? updateShipmentErrors : []), ...(parseAddressErrors !== null && parseAddressErrors !== void 0 ? parseAddressErrors : [])];
   return {
+    addressLoading: loading,
     addressErrors: errors.length > 0 ? errors : undefined,
     addressPreference,
     charsetWarning,
@@ -16508,6 +16515,7 @@ const useShipmentForm = ({
     reset: resetSalesOrderShipment
   } = alchemy.useUpdateSalesOrderShipment();
   const {
+    addressLoading,
     addressErrors,
     addressPreference,
     charsetWarning,
@@ -16558,6 +16566,7 @@ const useShipmentForm = ({
     scrubber: React.useCallback(() => "common:errorMessages.noRatesAvailable", [])
   });
   return {
+    addressLoading,
     addressPreference,
     carriers,
     charsetWarning,
@@ -16860,13 +16869,14 @@ const getDefaultWarehouse = warehouses => {
   return (_a = warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.isDefault)) !== null && _a !== void 0 ? _a : warehouses === null || warehouses === void 0 ? void 0 : warehouses[0];
 };
 
-const useGetOrCreateShipment = shipmentId => {
+const useGetOrCreateShipment = (onShipmentUpdated, shipmentId) => {
   var _a, _b;
   const {
     data: warehouses
   } = alchemy.useListWarehouses({
     enabled: shipmentId === undefined
   });
+  const [shouldTriggerUpdate, setShouldTriggerUpdate] = React.useState(false);
   const createShipment = alchemy.useCreateShipment();
   // useCreateShipment as called by this hook will only ever create one shipment at a time,
   // lens it for convenience
@@ -16880,9 +16890,16 @@ const useGetOrCreateShipment = shipmentId => {
       createShipment.mutate({
         warehouseId: getDefaultWarehouse(warehouses).warehouseId
       });
+      setShouldTriggerUpdate(true);
     }
   }, [warehouses, shipmentId, createShipment, createdShipment]);
   const getShipment = alchemy.useGetShipment(shipmentId !== null && shipmentId !== void 0 ? shipmentId : createdShipment === null || createdShipment === void 0 ? void 0 : createdShipment.shipmentId);
+  React.useEffect(() => {
+    if (shouldTriggerUpdate && getShipment.data) {
+      onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(getShipment.data);
+      setShouldTriggerUpdate(false);
+    }
+  }, [shouldTriggerUpdate, getShipment]);
   const errors = [...((_a = getShipment.error) !== null && _a !== void 0 ? _a : []), ...((_b = createShipment.error) !== null && _b !== void 0 ? _b : [])];
   return {
     errors: errors.length > 0 ? errors : undefined,
@@ -16901,7 +16918,7 @@ const PurchaseLabelByShipment = _a => {
       shipmentId
     } = _a,
     props = __rest(_a, ["onLoad", "onShipmentUpdated", "shipmentId"]);
-  const _b = useGetOrCreateShipment(shipmentId),
+  const _b = useGetOrCreateShipment(onShipmentUpdated, shipmentId),
     {
       shipment
     } = _b,

package/index.js

@@ -13725,6 +13725,7 @@ const getShipmentSchema = ({
 const minimumShipDate = nextDayCutoff(17);
 const maximumShipDate = daysAfter(7, minimumShipDate);
 const ShipmentForm = ({
+  addressLoading,
   addressPreference,
   charsetWarning,
   carriers,
@@ -14071,9 +14072,7 @@ const ShipmentForm = ({
   });
   if (errors) throw new Error(errors.map(e => e.message).join(", "));
   if (!shipment) throw new Error("errorMessages.unableToLoad.shipment");
-  const addressPreferenceIsEmpty =
-  // undefined means it's still loading
-  addressPreference !== undefined && isEmptyAddress(addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection);
+  const addressPreferenceIsEmpty = !addressLoading && isEmptyAddress(addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection); // undefined means it's still loading
   return jsxs("form", Object.assign({
     id: "shipment-form",
     onSubmit: formLogger.capture(handleSubmit)
@@ -14472,7 +14471,7 @@ const ShipmentForm = ({
       }, {
         children: jsx(SubmitButton, Object.assign({
           control: form.control,
-          disabled: isEditShipFormToOpen,
+          disabled: addressLoading || isEditShipFormToOpen || addressPreferenceIsEmpty,
           variant: ButtonVariant.OUTLINED
         }, {
           children: t("purchase-label:actions.calculateRates", {
@@ -15934,7 +15933,12 @@ const useAddress = ({
     error: parseAddressErrors,
     mutateAsync: parseAddress
   } = useParseAddress();
-  const [addressPreference, setAddressPreference] = useState();
+  const [addressPreference, _setAddressPreference] = useState();
+  const [loading, setLoading] = useState(true);
+  const setAddressPreference = useCallback((...args) => {
+    setLoading(false);
+    _setAddressPreference(...args);
+  }, [_setAddressPreference]);
   const toggle = useCallback(() => {
     let updatedSelection = undefined;
     setAddressPreference(prevState => {
@@ -16039,6 +16043,8 @@ const useAddress = ({
     // without this check it will keep reverting a one-off label's address preference back to empty for some reason
     !isEmptyAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo)) {
       void handleValidateAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo);
+    } else {
+      setLoading(false);
     }
   }, [addressPreference, handleValidateAddress, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo, shipment === null || shipment === void 0 ? void 0 : shipment.shipTo]);
   const charsetWarning = useMemo(() => Object.keys((addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection) || {}).reduce((warning, key) => {
@@ -16060,6 +16066,7 @@ const useAddress = ({
   }, undefined), [addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection, t]);
   const errors = [...(validateAddressErrors !== null && validateAddressErrors !== void 0 ? validateAddressErrors : []), ...(updateShipmentErrors !== null && updateShipmentErrors !== void 0 ? updateShipmentErrors : []), ...(parseAddressErrors !== null && parseAddressErrors !== void 0 ? parseAddressErrors : [])];
   return {
+    addressLoading: loading,
     addressErrors: errors.length > 0 ? errors : undefined,
     addressPreference,
     charsetWarning,
@@ -16476,6 +16483,7 @@ const useShipmentForm = ({
     reset: resetSalesOrderShipment
   } = useUpdateSalesOrderShipment();
   const {
+    addressLoading,
     addressErrors,
     addressPreference,
     charsetWarning,
@@ -16526,6 +16534,7 @@ const useShipmentForm = ({
     scrubber: useCallback(() => "common:errorMessages.noRatesAvailable", [])
   });
   return {
+    addressLoading,
     addressPreference,
     carriers,
     charsetWarning,
@@ -16828,13 +16837,14 @@ const getDefaultWarehouse = warehouses => {
   return (_a = warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.isDefault)) !== null && _a !== void 0 ? _a : warehouses === null || warehouses === void 0 ? void 0 : warehouses[0];
 };
 
-const useGetOrCreateShipment = shipmentId => {
+const useGetOrCreateShipment = (onShipmentUpdated, shipmentId) => {
   var _a, _b;
   const {
     data: warehouses
   } = useListWarehouses({
     enabled: shipmentId === undefined
   });
+  const [shouldTriggerUpdate, setShouldTriggerUpdate] = useState(false);
   const createShipment = useCreateShipment();
   // useCreateShipment as called by this hook will only ever create one shipment at a time,
   // lens it for convenience
@@ -16848,9 +16858,16 @@ const useGetOrCreateShipment = shipmentId => {
       createShipment.mutate({
         warehouseId: getDefaultWarehouse(warehouses).warehouseId
       });
+      setShouldTriggerUpdate(true);
     }
   }, [warehouses, shipmentId, createShipment, createdShipment]);
   const getShipment = useGetShipment(shipmentId !== null && shipmentId !== void 0 ? shipmentId : createdShipment === null || createdShipment === void 0 ? void 0 : createdShipment.shipmentId);
+  useEffect(() => {
+    if (shouldTriggerUpdate && getShipment.data) {
+      onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(getShipment.data);
+      setShouldTriggerUpdate(false);
+    }
+  }, [shouldTriggerUpdate, getShipment]);
   const errors = [...((_a = getShipment.error) !== null && _a !== void 0 ? _a : []), ...((_b = createShipment.error) !== null && _b !== void 0 ? _b : [])];
   return {
     errors: errors.length > 0 ? errors : undefined,
@@ -16869,7 +16886,7 @@ const PurchaseLabelByShipment = _a => {
       shipmentId
     } = _a,
     props = __rest(_a, ["onLoad", "onShipmentUpdated", "shipmentId"]);
-  const _b = useGetOrCreateShipment(shipmentId),
+  const _b = useGetOrCreateShipment(onShipmentUpdated, shipmentId),
     {
       shipment
     } = _b,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "typedoc": {
     "entryPoint": "./src/index.ts",
     "readmeFile": "../../README.md",

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

@@ -9,6 +9,7 @@ export type OnChangeAddressOptions = {
 };
 export type ShipmentFormMode = "browse_rates" | "select_service";
 export type ShipmentFormProps = {
+    addressLoading: boolean;
     addressPreference?: AddressPreference;
     carriers?: SE.Carrier[];
     charsetWarning?: CharsetWarning;
@@ -48,4 +49,4 @@ export type ShipmentFormFeatures = {
     selectService?: boolean;
     shippingPresets?: boolean;
 };
-export declare const ShipmentForm: ({ addressPreference, charsetWarning, carriers, customPackageTypes, errors, features, hydrateRef, insuranceAccount, isLoading, onApplyPreset, onChangeAddress, onChangeMode, onDirty, onSubmit, onSubmitParseShipTo, onToggleAddressPreferenceDisclosure, onUpdateCustoms, salesOrder, shipment, shippingPresets, warehouseId, warehouses, }: ShipmentFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ShipmentForm: ({ addressLoading, addressPreference, charsetWarning, carriers, customPackageTypes, errors, features, hydrateRef, insuranceAccount, isLoading, onApplyPreset, onChangeAddress, onChangeMode, onDirty, onSubmit, onSubmitParseShipTo, onToggleAddressPreferenceDisclosure, onUpdateCustoms, salesOrder, shipment, shippingPresets, warehouseId, warehouses, }: ShipmentFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/elements/configure-shipment/hooks/use-address.d.ts

@@ -9,6 +9,7 @@ export type UseAddressProps = {
     shipment?: SE.SalesOrderShipment;
 };
 export declare const useAddress: ({ compatibleCountryCodes, onChange, onValidation, salesOrder, shipment, }: UseAddressProps) => {
+    addressLoading: boolean;
     addressErrors: SE.CodedError[] | undefined;
     addressPreference: Templates.AddressPreference | undefined;
     charsetWarning: Templates.CharsetWarning | undefined;

package/src/elements/configure-shipment/hooks/use-shipment-form.d.ts

@@ -13,6 +13,7 @@ export type UseShipmentFormProps = {
     shipment?: SE.SalesOrderShipment;
 };
 export declare const useShipmentForm: ({ compatibleCountryCodes, onAddressValidation, onApplyPreset, onChangeAddress, onShipmentUpdated, onSubmit, salesOrder, shipment, }: UseShipmentFormProps) => {
+    addressLoading: boolean;
     addressPreference: import("../../../components/templates").AddressPreference | undefined;
     carriers: SE.Carrier[] | undefined;
     charsetWarning: import("../../../components/templates").CharsetWarning | undefined;

package/src/hooks/use-get-or-create-shipment.d.ts

@@ -1,6 +1,7 @@
-export declare const useGetOrCreateShipment: (shipmentId?: string) => {
+import { SalesOrderShipment } from "@shipengine/alchemy";
+export declare const useGetOrCreateShipment: (onShipmentUpdated: ((shipment: SalesOrderShipment) => void | Promise<void>) | undefined, shipmentId?: string) => {
     errors: import("@shipengine/alchemy").CodedError[] | undefined;
     isLoading: boolean;
-    refetchShipment: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@shipengine/alchemy").SalesOrderShipment, import("@shipengine/alchemy").CodedError[]>>;
-    shipment: import("@shipengine/alchemy").SalesOrderShipment | undefined;
+    refetchShipment: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<SalesOrderShipment, import("@shipengine/alchemy").CodedError[]>>;
+    shipment: SalesOrderShipment | undefined;
 };