@shipengine/elements 0.37.3 → 0.37.4

package/index.cjs

@@ -4536,8 +4536,7 @@ const useShipmentMetadata = shipment => {
 };
 
 let _$2 = t => t,
-  _t$2,
-  _t2$2;
+  _t$2;
 const findGenericPackageFromCarriers = carriers => {
   const carrier = carriers.find(c => c.packages.some(p => p.packageCode === "package"));
   return carrier === null || carrier === void 0 ? void 0 : carrier.packages.find(p => p.packageCode === "package");
@@ -4564,17 +4563,14 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
       [c.carrierCode]: partialResults[c.carrierCode] === undefined
     }));
     const genericPackage = findGenericPackageFromCarriers(carriers);
-    const packageOptions = [...(genericPackage ? [{
-      label: t(_t$2 || (_t$2 = _$2`packageCategories.browseRates`)),
-      options: [{
+    const customPackageOptions = [...(genericPackage || (customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
+      label: t(_t$2 || (_t$2 = _$2`packageCategories.customPackages`)),
+      options: [...(genericPackage ? [{
         label: t("packageCodes.package"),
         value: {
           code: "package"
         }
-      }]
-    }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
-      label: t(_t2$2 || (_t2$2 = _$2`packageCategories.myCustomPackages`)),
-      options: customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
+      }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
         dimensions,
         name,
         packageId
@@ -4585,7 +4581,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
             code: packageId
           }
         };
-      })
+      }) : [])]
     }] : [])];
     return carriers.reduce((options, carrier) => {
       if (carrier.packages.length === 0) return options;
@@ -4606,7 +4602,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
         })),
         value: carrier.carrierId
       }];
-    }, packageOptions);
+    }, customPackageOptions);
   }, [carriers, customPackageTypes, isPoBox, isUnsupportedUpsCountry, t]);
 };
 
@@ -14911,15 +14907,29 @@ const SuspendSalesOrder = ({
 };
 
 const styles$2 = createStyles({
+  itemDescription: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px ${theme.spacing(0)}px`
+  }),
   itemDetail: theme => ({
-    padding: `${theme.spacing(0)}px ${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px`
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`,
+    verticalAlign: "top"
   }),
   itemName: theme => ({
-    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`
+    // Set item name to max 3 lines and truncate with ellipsis
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": "3",
+    display: "-webkit-box",
+    lineHeight: `${theme.spacing(2.5)}px`,
+    maxHeight: `${theme.spacing(7.5)}px`,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "normal"
   }),
   numericCell: () => ({
     textAlign: "right",
-    width: "100px"
+    width: "80px"
   }),
   tableWrapper: theme => ({
     "&& > div": {
@@ -14978,23 +14988,18 @@ const ItemsBreakdown = ({
           quantity,
           value,
           totalValue
-        }, index) => jsxRuntime.jsxs(React.Fragment, {
-          children: [jsxRuntime.jsx(giger.TableBaseRow, {
-            children: jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              colSpan: 4,
-              css: styles$2.itemName
+        }, index) => jsxRuntime.jsx(React.Fragment, {
+          children: jsxRuntime.jsxs(giger.TableBaseRow, {
+            children: [jsxRuntime.jsxs(giger.TableBodyCell, Object.assign({
+              css: styles$2.itemDescription
             }, {
-              children: jsxRuntime.jsx(giger.Typography, {
+              children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: styles$2.itemName
+              }, {
                 children: name
-              })
-            }))
-          }), jsxRuntime.jsxs(giger.TableBaseRow, {
-            children: [jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              css: styles$2.itemDetail
-            }, {
-              children: jsxRuntime.jsx(giger.Typography, {
+              })), jsxRuntime.jsx(giger.Typography, {
                 children: detail
-              })
+              })]
             })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
               css: [styles$2.numericCell, styles$2.itemDetail]
             }, {
@@ -15008,7 +15013,7 @@ const ItemsBreakdown = ({
             }, {
               children: totalValue && formatMoney(totalValue)
             }))]
-          })]
+          })
         }, index))
       })
     }))
@@ -16005,6 +16010,7 @@ const ShipmentForm = ({
           }, {
             children: presetCategory.options.map(preset => jsxRuntime.jsx(giger.Option, Object.assign({
               onClick: () => {
+                onDirty(); // bypass rate cache
                 handleApplyPreset(preset.value);
               },
               selected: ___default["default"].isEqual(selectedPreset, preset.value),
@@ -16949,8 +16955,7 @@ var common = {
 		december: "December"
 	},
 	packageCategories: {
-		browseRates: "Browse Rates",
-		myCustomPackages: "My Custom Packages"
+		customPackages: "Custom Packages"
 	},
 	packageCodes: {
 		"package": "Custom"
@@ -18736,13 +18741,18 @@ const PurchaseLabelBySalesOrder = _a => {
     salesOrder,
     warehouseId
   });
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = alchemy.useGetInsuranceAccount("shipsurance");
   return jsxRuntime.jsx(SuspendSalesOrder, Object.assign({
     salesOrder: salesOrder
   }, salesOrderProps, {
-    isLoading: salesOrderLoading || configureShipmentProps.isLoading
+    isLoading: salesOrderLoading || configureShipmentProps.isLoading || insuranceIsLoading
   }, {
     children: salesOrder && jsxRuntime.jsx(ConfigureShipment, Object.assign({
       features: features,
+      insuranceAccount: insuranceAccount,
       salesOrder: salesOrder
     }, configureShipmentProps, props))
   }));
@@ -18811,11 +18821,16 @@ const PurchaseLabelByShipment = _a => {
     void shipmentProps.refetchShipment();
     onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
   };
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = alchemy.useGetInsuranceAccount("shipsurance");
   return jsxRuntime.jsx(SuspendShipment, Object.assign({
     shipment: shipment
   }, shipmentProps, {
     children: shipment && jsxRuntime.jsx(ConfigureShipment, Object.assign({
       errors: shipmentProps.errors,
+      insuranceAccount: insuranceAccount,
       isLoading: shipmentProps.isLoading,
       onShipmentUpdated: handleShipmentUpdated,
       shipment: shipment

package/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useTranslation, Trans } from 'react-i18next';
 import { InlineNotification, NotificationType, Typography, Link, ButtonSize, Spinner, Icon, IconSize, Divider, Skeleton, SkeletonAnimation, SkeletonVariant, Grid, GridChild, Pagination, SkeletonBackgroundColor, RadioGroup, Radio, SpinnerSize, FormField, FieldMessageType, Checkbox, Input, SelectAutocomplete, Select as Select$1, OptionGroup, Option, Button, Switch as Switch$1, Textarea, ChipList, Chip, ButtonVariant, ButtonColor, Tag, TagColor, Stepper, Step, IconTooltip, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, Popover, DropdownOptionList, DatePicker as DatePicker$1, BottomSheet } from '@packlink/giger';
-import alchemy, { SE, logger, useValidateAddresses, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useGetWalletHistory, useGetAccountSettings, useUpdateAccountSettings, AlchemyContext, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, Currency, useUpdateFundingSource, useListFundingSources, useCreateFundingSource, useRegisterCarrier, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useListLabels, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, CodedError, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useCreateShipment, useGetShipment, useGetSalesOrderShipment, useGetLabel, useVoidLabel } from '@shipengine/alchemy';
+import alchemy, { SE, logger, useValidateAddresses, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useGetWalletHistory, useGetAccountSettings, useUpdateAccountSettings, AlchemyContext, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, Currency, useUpdateFundingSource, useListFundingSources, useCreateFundingSource, useRegisterCarrier, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useListLabels, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, CodedError, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetInsuranceAccount, useCreateShipment, useGetShipment, useGetSalesOrderShipment, useGetLabel, useVoidLabel } from '@shipengine/alchemy';
 import axios from 'axios';
 import _$3, { get as get$1, isEqual } from 'lodash';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -4504,8 +4504,7 @@ const useShipmentMetadata = shipment => {
 };
 
 let _$2 = t => t,
-  _t$2,
-  _t2$2;
+  _t$2;
 const findGenericPackageFromCarriers = carriers => {
   const carrier = carriers.find(c => c.packages.some(p => p.packageCode === "package"));
   return carrier === null || carrier === void 0 ? void 0 : carrier.packages.find(p => p.packageCode === "package");
@@ -4532,17 +4531,14 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
       [c.carrierCode]: partialResults[c.carrierCode] === undefined
     }));
     const genericPackage = findGenericPackageFromCarriers(carriers);
-    const packageOptions = [...(genericPackage ? [{
-      label: t(_t$2 || (_t$2 = _$2`packageCategories.browseRates`)),
-      options: [{
+    const customPackageOptions = [...(genericPackage || (customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
+      label: t(_t$2 || (_t$2 = _$2`packageCategories.customPackages`)),
+      options: [...(genericPackage ? [{
         label: t("packageCodes.package"),
         value: {
           code: "package"
         }
-      }]
-    }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
-      label: t(_t2$2 || (_t2$2 = _$2`packageCategories.myCustomPackages`)),
-      options: customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
+      }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
         dimensions,
         name,
         packageId
@@ -4553,7 +4549,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
             code: packageId
           }
         };
-      })
+      }) : [])]
     }] : [])];
     return carriers.reduce((options, carrier) => {
       if (carrier.packages.length === 0) return options;
@@ -4574,7 +4570,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
         })),
         value: carrier.carrierId
       }];
-    }, packageOptions);
+    }, customPackageOptions);
   }, [carriers, customPackageTypes, isPoBox, isUnsupportedUpsCountry, t]);
 };
 
@@ -14879,15 +14875,29 @@ const SuspendSalesOrder = ({
 };
 
 const styles$2 = createStyles({
+  itemDescription: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px ${theme.spacing(0)}px`
+  }),
   itemDetail: theme => ({
-    padding: `${theme.spacing(0)}px ${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px`
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`,
+    verticalAlign: "top"
   }),
   itemName: theme => ({
-    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`
+    // Set item name to max 3 lines and truncate with ellipsis
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": "3",
+    display: "-webkit-box",
+    lineHeight: `${theme.spacing(2.5)}px`,
+    maxHeight: `${theme.spacing(7.5)}px`,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "normal"
   }),
   numericCell: () => ({
     textAlign: "right",
-    width: "100px"
+    width: "80px"
   }),
   tableWrapper: theme => ({
     "&& > div": {
@@ -14946,23 +14956,18 @@ const ItemsBreakdown = ({
           quantity,
           value,
           totalValue
-        }, index) => jsxs(Fragment$1, {
-          children: [jsx(TableBaseRow, {
-            children: jsx(TableBodyCell, Object.assign({
-              colSpan: 4,
-              css: styles$2.itemName
+        }, index) => jsx(Fragment$1, {
+          children: jsxs(TableBaseRow, {
+            children: [jsxs(TableBodyCell, Object.assign({
+              css: styles$2.itemDescription
             }, {
-              children: jsx(Typography, {
+              children: [jsx(Typography, Object.assign({
+                css: styles$2.itemName
+              }, {
                 children: name
-              })
-            }))
-          }), jsxs(TableBaseRow, {
-            children: [jsx(TableBodyCell, Object.assign({
-              css: styles$2.itemDetail
-            }, {
-              children: jsx(Typography, {
+              })), jsx(Typography, {
                 children: detail
-              })
+              })]
             })), jsx(TableBodyCell, Object.assign({
               css: [styles$2.numericCell, styles$2.itemDetail]
             }, {
@@ -14976,7 +14981,7 @@ const ItemsBreakdown = ({
             }, {
               children: totalValue && formatMoney(totalValue)
             }))]
-          })]
+          })
         }, index))
       })
     }))
@@ -15973,6 +15978,7 @@ const ShipmentForm = ({
           }, {
             children: presetCategory.options.map(preset => jsx(Option, Object.assign({
               onClick: () => {
+                onDirty(); // bypass rate cache
                 handleApplyPreset(preset.value);
               },
               selected: _$3.isEqual(selectedPreset, preset.value),
@@ -16917,8 +16923,7 @@ var common = {
 		december: "December"
 	},
 	packageCategories: {
-		browseRates: "Browse Rates",
-		myCustomPackages: "My Custom Packages"
+		customPackages: "Custom Packages"
 	},
 	packageCodes: {
 		"package": "Custom"
@@ -18704,13 +18709,18 @@ const PurchaseLabelBySalesOrder = _a => {
     salesOrder,
     warehouseId
   });
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = useGetInsuranceAccount("shipsurance");
   return jsx(SuspendSalesOrder, Object.assign({
     salesOrder: salesOrder
   }, salesOrderProps, {
-    isLoading: salesOrderLoading || configureShipmentProps.isLoading
+    isLoading: salesOrderLoading || configureShipmentProps.isLoading || insuranceIsLoading
   }, {
     children: salesOrder && jsx(ConfigureShipment, Object.assign({
       features: features,
+      insuranceAccount: insuranceAccount,
       salesOrder: salesOrder
     }, configureShipmentProps, props))
   }));
@@ -18779,11 +18789,16 @@ const PurchaseLabelByShipment = _a => {
     void shipmentProps.refetchShipment();
     onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
   };
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = useGetInsuranceAccount("shipsurance");
   return jsx(SuspendShipment, Object.assign({
     shipment: shipment
   }, shipmentProps, {
     children: shipment && jsx(ConfigureShipment, Object.assign({
       errors: shipmentProps.errors,
+      insuranceAccount: insuranceAccount,
       isLoading: shipmentProps.isLoading,
       onShipmentUpdated: handleShipmentUpdated,
       shipment: shipment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.37.3",
+  "version": "0.37.4",
   "peerDependencies": {
     "@packlink/giger": "*",
     "react-i18next": "*",

package/src/components/items-breakdown/items-breakdown.styles.d.ts

@@ -1,9 +1,22 @@
 export declare const styles: {
+    itemDescription: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        padding: string;
+    };
     itemDetail: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
         padding: string;
+        verticalAlign: string;
     };
     itemName: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
-        padding: string;
+        "-webkit-box-orient": string;
+        "-webkit-line-clamp": string;
+        display: "-webkit-box";
+        lineHeight: string;
+        maxHeight: string;
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "normal";
     };
     numericCell: () => {
         textAlign: "right";

package/src/elements/account-settings/account-settings.d.ts

@@ -684,8 +684,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/configure-shipment/configure-shipment.d.ts

@@ -41,6 +41,7 @@ export type ConfigureShipmentProps = {
     errors?: Templates.ShipmentFormProps["errors"];
     features?: ConfigureShipmentFeatures;
     getPreferredRates?: (shipment: SE.SalesOrderShipment, isInternational: boolean) => Promise<PreferredRatesResponse | undefined>;
+    insuranceAccount?: SE.InsuranceAccount;
     isLoading?: Templates.ShipmentFormProps["isLoading"];
     onAddressValidation?: UseShipmentFormProps["onAddressValidation"];
     onApplyPreset?: UseShipmentFormProps["onApplyPreset"];

package/src/elements/onboarding/onboarding.d.ts

@@ -668,8 +668,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/purchase-label/purchase-label.d.ts

@@ -789,8 +789,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/view-shipment/view-shipment.d.ts

@@ -688,8 +688,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/void-label/void-label.d.ts

@@ -684,8 +684,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/locales/en/index.d.ts

@@ -556,8 +556,7 @@ declare const _default: {
             december: string;
         };
         packageCategories: {
-            browseRates: string;
-            myCustomPackages: string;
+            customPackages: string;
         };
         packageCodes: {
             package: string;