@shipengine/elements 0.3.4 → 0.3.6

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import SE from "@shipengine/elements-core";
 export declare type RateFormProps = {
-    rates?: SE.Rate[];
-    loading?: boolean;
     errors?: SE.CodedError[];
+    loading?: boolean;
     onLabelCreated?: (label: SE.Label) => void;
+    onRateSaved?: (shipment: SE.SalesOrderShipment) => void;
+    rates?: SE.Rate[];
+    shipment?: SE.SalesOrderShipment;
 };
-export declare const RateForm: ({ rates, loading, errors, onLabelCreated }: RateFormProps) => JSX.Element;
+export declare const RateForm: ({ errors, loading, onLabelCreated, onRateSaved, rates, shipment, }: RateFormProps) => JSX.Element;

package/index.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var elementsCore = require('@shipengine/elements-core');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var deprecatedUi = require('@shipengine/deprecated-ui');
 var elementsUi = require('@shipengine/elements-ui');
-var elementsUncontrolled = require('@shipengine/elements-uncontrolled');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2782,7 +2782,7 @@ const ShipmentForm = ({
     }
   }, [validateAddresses, salesOrder]);
   const errors = [...(updateShipment.errors || []), ...(createShipment.errors || [])];
-  return jsxRuntime.jsx(elementsUncontrolled.UncontrolledShipmentForm, {
+  return jsxRuntime.jsx(elementsUi.Templates.ShipmentForm, {
     errors: errors,
     onDirty: onShipmentDirty,
     shipToValidationStatus: (_a = validateAddresses.data) === null || _a === void 0 ? void 0 : _a[0].status,
@@ -2795,28 +2795,45 @@ const ShipmentForm = ({
 };
 
 const RateForm = ({
-  rates,
-  loading: _loading = false,
   errors,
-  onLabelCreated
+  loading: _loading = false,
+  onLabelCreated,
+  onRateSaved,
+  rates,
+  shipment
 }) => {
   var _a;
 
   const createLabel = elementsCore.useCreateLabel();
+  const updateShipment = elementsCore.useUpdateShipment({
+    shipmentId: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId
+  });
 
   const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
     const label = yield createLabel.trigger(values);
     if (label) onLabelCreated === null || onLabelCreated === void 0 ? void 0 : onLabelCreated(label);
   });
 
+  const handleSave = rate => __awaiter(void 0, void 0, void 0, function* () {
+    if (shipment) {
+      const updatedShipment = yield updateShipment.trigger(Object.assign(Object.assign({}, shipment), {
+        carrierId: rate.carrierId,
+        serviceCode: rate.serviceCode
+      }));
+      if (updatedShipment) onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(updatedShipment);
+    }
+  });
+
   const carriers = elementsCore.useListCarriers();
   const mergedErrors = [...(errors !== null && errors !== void 0 ? errors : []), ...((_a = createLabel.errors) !== null && _a !== void 0 ? _a : [])];
-  return jsxRuntime.jsx(elementsUncontrolled.UncontrolledRateForm, {
-    errors: mergedErrors,
-    rates: rates,
+  return jsxRuntime.jsx(elementsUi.Templates.RateForm, {
     carriers: carriers.data,
+    errors: mergedErrors,
+    loading: _loading,
+    onSave: handleSave,
     onSubmit: handleSubmit,
-    loading: _loading
+    rates: rates,
+    shipment: shipment
   });
 };
 
@@ -2880,6 +2897,7 @@ const SalesOrder = ({
   const handleShipmentUpdated = react.useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
     var _e, _f;
 
+    yield shipments.mutate();
     const result = yield calculateRates.trigger({
       shipmentId: shipment.shipmentId,
       rateOptions: {
@@ -2895,33 +2913,33 @@ const SalesOrder = ({
         obj: result.errors
       }, `Rate response had errors`);
     }
-  }), [calculateRates, carriers.data, logger]);
+  }), [calculateRates, carriers.data, logger, shipments]);
   const handleShipmentDirty = react.useCallback(() => {
     calculateRates.reset();
   }, [calculateRates]);
   const handleLabelCreated = react.useCallback(label => __awaiter(void 0, void 0, void 0, function* () {
     if (label) onPurchase === null || onPurchase === void 0 ? void 0 : onPurchase(label);
   }), [onPurchase]);
-  if (salesOrders.isLoading) return jsxRuntime.jsx(elementsUi.Spinner, {
+  if (salesOrders.isLoading) return jsxRuntime.jsx(deprecatedUi.Spinner, {
     children: t("loading.salesOrder")
   });
   if (salesOrders.errors) throw new Error(salesOrders.errors.map(e => e.message).join(", "));
-  if (orderSources.isLoading) return jsxRuntime.jsx(elementsUi.Spinner, {
+  if (orderSources.isLoading) return jsxRuntime.jsx(deprecatedUi.Spinner, {
     children: t("loading.importingSalesOrder")
   });
   if (orderSources.errors) throw new Error(orderSources.errors.map(e => e.message).join(", "));
   if (!salesOrders.data) throw new Error(t("errorMessages.unableToLoad.salesOrder"));
-  if (salesOrders.data.length === 0) return jsxRuntime.jsx(elementsUi.Spinner, {
+  if (salesOrders.data.length === 0) return jsxRuntime.jsx(deprecatedUi.Spinner, {
     children: t("loading.importingSalesOrder")
   });
-  if (shipments.isLoading) return jsxRuntime.jsx(elementsUi.Spinner, {
+  if (shipments.isLoading) return jsxRuntime.jsx(deprecatedUi.Spinner, {
     children: t("loading.shipment")
   });
   if (shipments.errors) throw new Error(shipments.errors.map(e => e.message).join(", "));
   if (!shipments.data) throw new Error(t("errorMessages.unableToLoad.shipment"));
   const salesOrder = salesOrders.data[0];
   const shipment = shipments.data.find(s => s.shipmentStatus === "pending");
-  return jsxRuntime.jsxs(elementsUncontrolled.UncontrolledSalesOrder, Object.assign({
+  return jsxRuntime.jsxs(elementsUi.Templates.SalesOrder, Object.assign({
     salesOrder: salesOrder
   }, {
     children: [jsxRuntime.jsx(ShipmentForm, {
@@ -2933,16 +2951,14 @@ const SalesOrder = ({
       errors: [...((_a = calculateRates.errors) !== null && _a !== void 0 ? _a : []), ...((_c = (_b = calculateRates.data) === null || _b === void 0 ? void 0 : _b.errors) !== null && _c !== void 0 ? _c : [])],
       loading: calculateRates.isMutating,
       onLabelCreated: handleLabelCreated,
-      rates: (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.rates
+      onRateSaved: handleShipmentUpdated,
+      rates: (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.rates,
+      shipment: shipment
     })]
   }));
 };
 
-var config = {
-  sentryDSN: "https://94ade54a9f5046d5a9c84a93874fcc75@o106853.ingest.sentry.io/6624796"
-};
-
-const Element$2 = elementsCore.registerElement("purchase-label", SalesOrder, config);
+const Element$2 = elementsCore.registerElement("purchase-label", SalesOrder);
 
 const Shipment = ({
   shipmentId,
@@ -2965,7 +2981,7 @@ const Shipment = ({
   });
   const warehouses = elementsCore.useListWarehouses();
   const carriers = elementsCore.useListCarriers();
-  if (!shipment.data && !shipment.errors) return jsxRuntime.jsx(elementsUi.Spinner, {
+  if (!shipment.data && !shipment.errors) return jsxRuntime.jsx(deprecatedUi.Spinner, {
     children: t("loading.shipment")
   });
   if (shipment.errors) throw new Error(shipment.errors.map(e => e.message).join(", "));
@@ -2976,7 +2992,7 @@ const Shipment = ({
     return w.warehouseId === ((_a = shipment.data) === null || _a === void 0 ? void 0 : _a.warehouseId);
   });
   const salesOrder = (_c = salesOrders.data) === null || _c === void 0 ? void 0 : _c[0];
-  return jsxRuntime.jsx(elementsUncontrolled.UncontrolledShipment, {
+  return jsxRuntime.jsx(elementsUi.Templates.Shipment, {
     carriers: carriers.data,
     labels: labels.data,
     onClickPurchaseLabel: onClickPurchaseLabel,
@@ -3011,7 +3027,7 @@ const VoidLabel = ({
     yield voidLabel.trigger(label.data);
   });
 
-  return jsxRuntime.jsx(elementsUncontrolled.UncontrolledVoidLabel, {
+  return jsxRuntime.jsx(elementsUi.Templates.VoidLabel, {
     salesOrder: (_c = salesOrders.data) === null || _c === void 0 ? void 0 : _c[0],
     shipment: shipment.data,
     onComplete: onComplete,
@@ -3021,9 +3037,9 @@ const VoidLabel = ({
   });
 };
 
-const Element$1 = elementsCore.registerElement("view-shipment", Shipment, config);
+const Element$1 = elementsCore.registerElement("view-shipment", Shipment);
 
-const Element = elementsCore.registerElement("void-label", VoidLabel, config);
+const Element = elementsCore.registerElement("void-label", VoidLabel);
 
 exports.PurchaseLabel = Element$2;
 exports.ViewShipment = Element$1;

package/index.js

@@ -1,8 +1,8 @@
 import { useTranslation, useLogger, useListWarehouses, useListCarriers, useCreateShipment, useUpdateShipment, useValidateAddresses, useCreateLabel, useListSalesOrders, useListOrderSources, useRefreshOrderSource, useCalculateRates, useListShipments, registerElement, useGetShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/elements-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEffect, useCallback } from 'react';
-import { Spinner } from '@shipengine/elements-ui';
-import { UncontrolledShipmentForm, UncontrolledRateForm, UncontrolledSalesOrder, UncontrolledShipment, UncontrolledVoidLabel } from '@shipengine/elements-uncontrolled';
+import { Spinner } from '@shipengine/deprecated-ui';
+import { Templates } from '@shipengine/elements-ui';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2778,7 +2778,7 @@ const ShipmentForm = ({
     }
   }, [validateAddresses, salesOrder]);
   const errors = [...(updateShipment.errors || []), ...(createShipment.errors || [])];
-  return jsx(UncontrolledShipmentForm, {
+  return jsx(Templates.ShipmentForm, {
     errors: errors,
     onDirty: onShipmentDirty,
     shipToValidationStatus: (_a = validateAddresses.data) === null || _a === void 0 ? void 0 : _a[0].status,
@@ -2791,28 +2791,45 @@ const ShipmentForm = ({
 };
 
 const RateForm = ({
-  rates,
-  loading: _loading = false,
   errors,
-  onLabelCreated
+  loading: _loading = false,
+  onLabelCreated,
+  onRateSaved,
+  rates,
+  shipment
 }) => {
   var _a;
 
   const createLabel = useCreateLabel();
+  const updateShipment = useUpdateShipment({
+    shipmentId: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId
+  });
 
   const handleSubmit = values => __awaiter(void 0, void 0, void 0, function* () {
     const label = yield createLabel.trigger(values);
     if (label) onLabelCreated === null || onLabelCreated === void 0 ? void 0 : onLabelCreated(label);
   });
 
+  const handleSave = rate => __awaiter(void 0, void 0, void 0, function* () {
+    if (shipment) {
+      const updatedShipment = yield updateShipment.trigger(Object.assign(Object.assign({}, shipment), {
+        carrierId: rate.carrierId,
+        serviceCode: rate.serviceCode
+      }));
+      if (updatedShipment) onRateSaved === null || onRateSaved === void 0 ? void 0 : onRateSaved(updatedShipment);
+    }
+  });
+
   const carriers = useListCarriers();
   const mergedErrors = [...(errors !== null && errors !== void 0 ? errors : []), ...((_a = createLabel.errors) !== null && _a !== void 0 ? _a : [])];
-  return jsx(UncontrolledRateForm, {
-    errors: mergedErrors,
-    rates: rates,
+  return jsx(Templates.RateForm, {
     carriers: carriers.data,
+    errors: mergedErrors,
+    loading: _loading,
+    onSave: handleSave,
     onSubmit: handleSubmit,
-    loading: _loading
+    rates: rates,
+    shipment: shipment
   });
 };
 
@@ -2876,6 +2893,7 @@ const SalesOrder = ({
   const handleShipmentUpdated = useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
     var _e, _f;
 
+    yield shipments.mutate();
     const result = yield calculateRates.trigger({
       shipmentId: shipment.shipmentId,
       rateOptions: {
@@ -2891,7 +2909,7 @@ const SalesOrder = ({
         obj: result.errors
       }, `Rate response had errors`);
     }
-  }), [calculateRates, carriers.data, logger]);
+  }), [calculateRates, carriers.data, logger, shipments]);
   const handleShipmentDirty = useCallback(() => {
     calculateRates.reset();
   }, [calculateRates]);
@@ -2917,7 +2935,7 @@ const SalesOrder = ({
   if (!shipments.data) throw new Error(t("errorMessages.unableToLoad.shipment"));
   const salesOrder = salesOrders.data[0];
   const shipment = shipments.data.find(s => s.shipmentStatus === "pending");
-  return jsxs(UncontrolledSalesOrder, Object.assign({
+  return jsxs(Templates.SalesOrder, Object.assign({
     salesOrder: salesOrder
   }, {
     children: [jsx(ShipmentForm, {
@@ -2929,16 +2947,14 @@ const SalesOrder = ({
       errors: [...((_a = calculateRates.errors) !== null && _a !== void 0 ? _a : []), ...((_c = (_b = calculateRates.data) === null || _b === void 0 ? void 0 : _b.errors) !== null && _c !== void 0 ? _c : [])],
       loading: calculateRates.isMutating,
       onLabelCreated: handleLabelCreated,
-      rates: (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.rates
+      onRateSaved: handleShipmentUpdated,
+      rates: (_d = calculateRates.data) === null || _d === void 0 ? void 0 : _d.rates,
+      shipment: shipment
     })]
   }));
 };
 
-var config = {
-  sentryDSN: "https://94ade54a9f5046d5a9c84a93874fcc75@o106853.ingest.sentry.io/6624796"
-};
-
-const Element$2 = registerElement("purchase-label", SalesOrder, config);
+const Element$2 = registerElement("purchase-label", SalesOrder);
 
 const Shipment = ({
   shipmentId,
@@ -2972,7 +2988,7 @@ const Shipment = ({
     return w.warehouseId === ((_a = shipment.data) === null || _a === void 0 ? void 0 : _a.warehouseId);
   });
   const salesOrder = (_c = salesOrders.data) === null || _c === void 0 ? void 0 : _c[0];
-  return jsx(UncontrolledShipment, {
+  return jsx(Templates.Shipment, {
     carriers: carriers.data,
     labels: labels.data,
     onClickPurchaseLabel: onClickPurchaseLabel,
@@ -3007,7 +3023,7 @@ const VoidLabel = ({
     yield voidLabel.trigger(label.data);
   });
 
-  return jsx(UncontrolledVoidLabel, {
+  return jsx(Templates.VoidLabel, {
     salesOrder: (_c = salesOrders.data) === null || _c === void 0 ? void 0 : _c[0],
     shipment: shipment.data,
     onComplete: onComplete,
@@ -3017,8 +3033,8 @@ const VoidLabel = ({
   });
 };
 
-const Element$1 = registerElement("view-shipment", Shipment, config);
+const Element$1 = registerElement("view-shipment", Shipment);
 
-const Element = registerElement("void-label", VoidLabel, config);
+const Element = registerElement("void-label", VoidLabel);
 
 export { Element$2 as PurchaseLabel, Element$1 as ViewShipment, Element as VoidLabel };

package/package.json

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

package/config.d.ts

@@ -1,4 +0,0 @@
-declare const _default: {
-    sentryDSN: string;
-};
-export default _default;