@shipengine/elements 0.10.0 → 0.10.2

package/components/configure-shipment/hooks/use-address.d.ts

@@ -9,6 +9,6 @@ export type UseAddressProps = {
 export declare const useAddress: ({ onChange, onValidation, salesOrder, shipment }: UseAddressProps) => {
     addressErrors: SE.CodedError[] | undefined;
     addressPreference: Templates.AddressPreference | undefined;
-    handleChangeAddress: (shipTo: SE.Address, { shouldValidate }: Templates.OnChangeAddressOptions) => Promise<void>;
+    handleChangeAddress: (shipTo: SE.Address, { shouldValidate }: Templates.OnChangeAddressOptions) => Promise<SE.SalesOrderShipment | undefined>;
     handleParseShipTo: ({ fullAddress }: Templates.AddressParserPayload) => Promise<SE.AddressParseResponse | undefined>;
 };

package/components/configure-shipment/hooks/use-rates-form.d.ts

@@ -13,11 +13,13 @@ export type UseRatesFormProps = {
 export declare const useRatesForm: ({ onBeforeLabelCreate, onLabelCreateFailure, onLabelCreateSuccess, onRateSaved, onRatesCalculated, onShipmentUpdated, printLabelLayout, shipment, }: UseRatesFormProps) => {
     carriers: SE.Carrier[] | undefined;
     errors: SE.CodedError[] | undefined;
+    labelErrors: SE.CodedError[] | undefined;
     isLoading: boolean;
     onSave: ({ carrierId, serviceCode }: Pick<SE.Rate, "carrierId" | "serviceCode">) => Promise<void>;
     onSubmit: (rateId: string) => Promise<void>;
     rates: SE.Rate[] | undefined;
     requestRates: (shipment: SE.SalesOrderShipment) => Promise<void>;
+    resetLabel: () => void;
     resetRates: () => void;
     shipment: SE.SalesOrderShipment | undefined;
 };

package/components/configure-shipment/hooks/use-shipment-form.d.ts

@@ -17,7 +17,7 @@ export declare const useShipmentForm: ({ onAddressValidation, onApplyPreset, onC
     customPackageTypes: SE.Package[] | undefined;
     errors: SE.CodedError[] | undefined;
     onApplyPreset: (preset: ShippingPreset) => Promise<void>;
-    onChangeAddress: (shipTo: SE.Address, { shouldValidate }: import("dist/elements-ui/components/templates").OnChangeAddressOptions) => Promise<void>;
+    onChangeAddress: (shipTo: SE.Address, { shouldValidate }: import("dist/elements-ui/components/templates").OnChangeAddressOptions) => Promise<SE.SalesOrderShipment | undefined>;
     onSubmit: (values: Partial<SE.SalesOrderShipment>) => Promise<SE.SalesOrderShipment | undefined>;
     onSubmitParseShipTo: ({ fullAddress }: {
         fullAddress: string;

package/index.cjs

@@ -18962,7 +18962,7 @@ const useAddress = ({
     shouldValidate
   }) => __awaiter(void 0, void 0, void 0, function* () {
     if (!shipment) return;
-    yield updateShipment(Object.assign(Object.assign({}, shipment), {
+    const updatedShipment = yield updateShipment(Object.assign(Object.assign({}, shipment), {
       shipTo
     }));
     yield onChange === null || onChange === void 0 ? void 0 : onChange(shipment, Object.assign(Object.assign({}, shipment), {
@@ -18971,6 +18971,7 @@ const useAddress = ({
     if (shouldValidate) {
       yield handleValidateAddress(shipTo);
     }
+    return updatedShipment;
   }), [handleValidateAddress, onChange, shipment, updateShipment]);
   react.useEffect(() => {
     if (!addressPreference && (shipment === null || shipment === void 0 ? void 0 : shipment.shipTo)) {
@@ -19339,6 +19340,8 @@ const useRatesForm = ({
     shipmentId: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId
   });
   const {
+    errors: labelErrors,
+    reset: resetLabel,
     trigger: createLabel
   } = elementsCore.useCreateLabel(printLabelLayout);
   const {
@@ -19389,10 +19392,11 @@ const useRatesForm = ({
       serviceCode
     }));
     if (updatedShipment) {
+      yield requestRates(updatedShipment);
       yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(updatedShipment);
       yield onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(updatedShipment);
     }
-  }), [onRateSaved, onShipmentUpdated, shipment, updateShipment]);
+  }), [onRateSaved, onShipmentUpdated, requestRates, shipment, updateShipment]);
   let errors = [...(ratesErrors !== null && ratesErrors !== void 0 ? ratesErrors : []), ...((_a = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.errors) !== null && _a !== void 0 ? _a : [])];
   if (beforeCreateError) errors = [...errors, beforeCreateError];
   // Sometimes no rates are returned and no top-level errors are returned
@@ -19409,11 +19413,13 @@ const useRatesForm = ({
   return {
     carriers,
     errors: errors.length > 0 ? errors : undefined,
+    labelErrors: (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) ? labelErrors : undefined,
     isLoading: ratesCalculating,
     onSave: handleSave,
     onSubmit: handleSubmit,
     rates: ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.rates,
     requestRates,
+    resetLabel,
     resetRates,
     shipment
   };
@@ -19516,21 +19522,27 @@ const ConfigureShipment = _a => {
       shipment
     } = _a,
     props = __rest(_a, ["features", "onAddressValidation", "onApplyPreset", "onBeforeLabelCreate", "onChangeAddress", "onLabelCreateFailure", "onLabelCreateSuccess", "onRateSaved", "onRatesCalculated", "onShipmentUpdated", "printLabelLayout", "salesOrder", "shipment"]);
+  const hydrateRef = react.useRef();
   const _b = useRatesForm({
       onBeforeLabelCreate,
       onLabelCreateFailure,
       onLabelCreateSuccess,
-      onRateSaved,
+      onRateSaved: updatedShipment => {
+        var _a;
+        (_a = hydrateRef.current) === null || _a === void 0 ? void 0 : _a.call(hydrateRef, updatedShipment);
+        onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(updatedShipment);
+      },
       onRatesCalculated,
       onShipmentUpdated,
       printLabelLayout,
       shipment
     }),
     {
+      requestRates,
       resetRates,
-      requestRates
+      resetLabel
     } = _b,
-    rateFormProps = __rest(_b, ["resetRates", "requestRates"]);
+    rateFormProps = __rest(_b, ["requestRates", "resetRates", "resetLabel"]);
   const shipmentFormProps = useShipmentForm({
     onAddressValidation,
     onApplyPreset: react.useCallback((_preset, shipment) => __awaiter(void 0, void 0, void 0, function* () {
@@ -19554,14 +19566,20 @@ const ConfigureShipment = _a => {
       setRateFormDisabled(false);
     }
   }, []);
+  const handleOnDirty = react.useCallback(() => {
+    resetRates();
+    resetLabel();
+  }, [resetRates, resetLabel]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(elementsUi.Templates.ShipmentForm, Object.assign({}, shipmentFormProps, props, {
-      onDirty: resetRates,
+      hydrateRef: hydrateRef,
+      onDirty: handleOnDirty,
       onCharsetWarning: handleCharsetWarning,
       features: features === null || features === void 0 ? void 0 : features.shipmentForm
     })), jsxRuntime.jsx(elementsUi.Templates.RateForm, Object.assign({}, rateFormProps, {
       disabled: rateFormDisabled,
-      features: features === null || features === void 0 ? void 0 : features.rateForm
+      features: features === null || features === void 0 ? void 0 : features.rateForm,
+      onSelectRate: resetLabel
     }))]
   });
 };

package/index.js

@@ -1,7 +1,7 @@
 import { useValidateAddresses, useUpdateShipment, useParseAddress, isDomesticAddress, useListCarriers, useListCustomPackageTypes, useCalculateRates, useCreateLabel, useListWarehouses, useListShipments, useCreateShipment, getPendingShipment, getIsCustomsRequiredForSalesOrder, getCustomsFromSalesOrder, useListSalesOrders, useListOrderSources, useRefreshOrderSource, registerElement, useGetShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/elements-core';
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { Templates, Loader } from '@shipengine/elements-ui';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18958,7 +18958,7 @@ const useAddress = ({
     shouldValidate
   }) => __awaiter(void 0, void 0, void 0, function* () {
     if (!shipment) return;
-    yield updateShipment(Object.assign(Object.assign({}, shipment), {
+    const updatedShipment = yield updateShipment(Object.assign(Object.assign({}, shipment), {
       shipTo
     }));
     yield onChange === null || onChange === void 0 ? void 0 : onChange(shipment, Object.assign(Object.assign({}, shipment), {
@@ -18967,6 +18967,7 @@ const useAddress = ({
     if (shouldValidate) {
       yield handleValidateAddress(shipTo);
     }
+    return updatedShipment;
   }), [handleValidateAddress, onChange, shipment, updateShipment]);
   useEffect(() => {
     if (!addressPreference && (shipment === null || shipment === void 0 ? void 0 : shipment.shipTo)) {
@@ -19335,6 +19336,8 @@ const useRatesForm = ({
     shipmentId: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId
   });
   const {
+    errors: labelErrors,
+    reset: resetLabel,
     trigger: createLabel
   } = useCreateLabel(printLabelLayout);
   const {
@@ -19385,10 +19388,11 @@ const useRatesForm = ({
       serviceCode
     }));
     if (updatedShipment) {
+      yield requestRates(updatedShipment);
       yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(updatedShipment);
       yield onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(updatedShipment);
     }
-  }), [onRateSaved, onShipmentUpdated, shipment, updateShipment]);
+  }), [onRateSaved, onShipmentUpdated, requestRates, shipment, updateShipment]);
   let errors = [...(ratesErrors !== null && ratesErrors !== void 0 ? ratesErrors : []), ...((_a = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.errors) !== null && _a !== void 0 ? _a : [])];
   if (beforeCreateError) errors = [...errors, beforeCreateError];
   // Sometimes no rates are returned and no top-level errors are returned
@@ -19405,11 +19409,13 @@ const useRatesForm = ({
   return {
     carriers,
     errors: errors.length > 0 ? errors : undefined,
+    labelErrors: (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) ? labelErrors : undefined,
     isLoading: ratesCalculating,
     onSave: handleSave,
     onSubmit: handleSubmit,
     rates: ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.rates,
     requestRates,
+    resetLabel,
     resetRates,
     shipment
   };
@@ -19512,21 +19518,27 @@ const ConfigureShipment = _a => {
       shipment
     } = _a,
     props = __rest(_a, ["features", "onAddressValidation", "onApplyPreset", "onBeforeLabelCreate", "onChangeAddress", "onLabelCreateFailure", "onLabelCreateSuccess", "onRateSaved", "onRatesCalculated", "onShipmentUpdated", "printLabelLayout", "salesOrder", "shipment"]);
+  const hydrateRef = useRef();
   const _b = useRatesForm({
       onBeforeLabelCreate,
       onLabelCreateFailure,
       onLabelCreateSuccess,
-      onRateSaved,
+      onRateSaved: updatedShipment => {
+        var _a;
+        (_a = hydrateRef.current) === null || _a === void 0 ? void 0 : _a.call(hydrateRef, updatedShipment);
+        onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(updatedShipment);
+      },
       onRatesCalculated,
       onShipmentUpdated,
       printLabelLayout,
       shipment
     }),
     {
+      requestRates,
       resetRates,
-      requestRates
+      resetLabel
     } = _b,
-    rateFormProps = __rest(_b, ["resetRates", "requestRates"]);
+    rateFormProps = __rest(_b, ["requestRates", "resetRates", "resetLabel"]);
   const shipmentFormProps = useShipmentForm({
     onAddressValidation,
     onApplyPreset: useCallback((_preset, shipment) => __awaiter(void 0, void 0, void 0, function* () {
@@ -19550,14 +19562,20 @@ const ConfigureShipment = _a => {
       setRateFormDisabled(false);
     }
   }, []);
+  const handleOnDirty = useCallback(() => {
+    resetRates();
+    resetLabel();
+  }, [resetRates, resetLabel]);
   return jsxs(Fragment, {
     children: [jsx(Templates.ShipmentForm, Object.assign({}, shipmentFormProps, props, {
-      onDirty: resetRates,
+      hydrateRef: hydrateRef,
+      onDirty: handleOnDirty,
       onCharsetWarning: handleCharsetWarning,
       features: features === null || features === void 0 ? void 0 : features.shipmentForm
     })), jsx(Templates.RateForm, Object.assign({}, rateFormProps, {
       disabled: rateFormDisabled,
-      features: features === null || features === void 0 ? void 0 : features.rateForm
+      features: features === null || features === void 0 ? void 0 : features.rateForm,
+      onSelectRate: resetLabel
     }))]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "peerDependencies": {
     "@packlink/giger": "*",
     "react-i18next": "*",
@@ -12,9 +12,9 @@
   "types": "./index.d.ts",
   "dependencies": {
     "react": "^18.2.0",
-    "@shipengine/elements-core": "0.10.0",
-    "@shipengine/elements-ui": "0.10.0",
-    "@shipengine/types": "0.10.0",
+    "@shipengine/elements-core": "0.10.2",
+    "@shipengine/elements-ui": "0.10.2",
+    "@shipengine/types": "0.10.2",
     "@emotion/react": "^11.10.0",
     "@packlink/brands": "^3.18.0"
   }