@shipengine/elements 2.26.5 → 2.28.0

package/dist/esm/components/field/rate-select/rate-card/rate-attribute-item/rate-attribute-item.styles.js

@@ -0,0 +1,25 @@
+import { createStyles, scopeTheme } from '../../../../../utilities/styles.js';
+
+const borderRadius = "7px";
+const styles = createStyles({
+  attribute: theme => ({
+    color: scopeTheme(theme).palette.white,
+    padding: `2px ${scopeTheme(theme).spacing()}px`,
+    backgroundColor: scopeTheme(theme).palette.info.main,
+    display: "flex",
+    alignItems: "center",
+    ":first-of-type": {
+      borderTopLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius
+    },
+    ":not(:first-of-type)": {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius
+    }
+  }),
+  attributeIcon: theme => ({
+    marginLeft: scopeTheme(theme).spacing(0.5)
+  })
+});
+
+export { styles };

package/dist/esm/components/field/rate-select/rate-card/rate-card.js

@@ -6,6 +6,7 @@ import { useMemo } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { ServiceCardContainer, ServiceCardHeader, ServiceCardFooter } from '../../../service-card/service-card.js';
 import { styles } from './rate-card.styles.js';
+import { RateAttributeItem } from './rate-attribute-item/rate-attribute-item.js';
 import { ServicePoints } from '../../../service-points/service-points.js';
 
 const getDeliveryDaysLabel = deliveryDays => {
@@ -85,6 +86,7 @@ const RateCard = ({
   onPaperlessAcknowledgementChange,
   onSelectServicePoint,
   otherAmount,
+  rateAttributes,
   rateId,
   requiresAcknowledgement,
   rateAcknowledgementMessage,
@@ -160,47 +162,56 @@ const RateCard = ({
     className: className,
     onClick: onRateCardClick,
     selected: selected,
-    children: [isPreferredRate && jsx("section", {
-      "aria-label": "Rate Savings",
-      css: styles.rateSavingsSection,
-      children: rateSavings ? jsx("div", {
-        css: styles.rateSavings,
-        children: t("purchase-label:rates.rateSavings", {
-          amount: rateSavings
-        })
-      }) : selected ? jsx("div", {
-        css: styles.rateSavings,
-        children: jsx(Icon, {
-          name: IconNames.CHECK_MARK,
-          size: IconSize.SIZE_SMALL
-        })
-      }) : null
-    }), jsx(ServiceCardHeader, {
-      carrierCode: carrierCode,
-      carrierFriendlyName: carrierFriendlyName,
-      costBreakdownProps: costBreakdownCommonProps,
-      rateDetailsProps: showRateDetails ? {
-        rateDetails
-      } : undefined,
-      rightContentCss: Object.assign({}, (isPreferredRate && rateSavings || selected && isPreferredRate) && {
-        paddingTop: "1rem"
-      }),
-      serviceInfo: {
-        line1: carrierNickname,
-        line2: getDeliveryDaysLabel(deliveryDays),
-        line3: paperlessDisplaySchemes && paperlessDisplaySchemes.length > 0 ? jsxs("div", {
-          "aria-label": t("purchase-label:paperlessAvailable"),
-          css: styles.paperlessText,
-          children: [jsx(Icon, {
-            name: IconNames.SCAN_QR,
-            size: IconSize.SIZE_MEDIUM
-          }), jsx(Typography, {
-            variant: "small",
-            children: t("purchase-label:paperlessAvailable")
-          })]
-        }) : undefined,
-        type: serviceType
-      }
+    children: [!!(rateAttributes === null || rateAttributes === void 0 ? void 0 : rateAttributes.length) && jsx("ul", {
+      css: styles.attributeList,
+      children: rateAttributes.map((attr, index) => jsx(RateAttributeItem, {
+        attribute: attr,
+        tooltipId: `rate-attribute-tooltip-${rateId}-${index}`
+      }, attr))
+    }), jsxs("div", {
+      children: [isPreferredRate && jsx("section", {
+        "aria-label": "Rate Savings",
+        css: styles.rateSavingsSection,
+        children: rateSavings ? jsx("div", {
+          css: styles.rateSavings,
+          children: t("purchase-label:rates.rateSavings", {
+            amount: rateSavings
+          })
+        }) : selected ? jsx("div", {
+          css: styles.rateSavings,
+          children: jsx(Icon, {
+            name: IconNames.CHECK_MARK,
+            size: IconSize.SIZE_SMALL
+          })
+        }) : null
+      }), jsx(ServiceCardHeader, {
+        carrierCode: carrierCode,
+        carrierFriendlyName: carrierFriendlyName,
+        costBreakdownProps: costBreakdownCommonProps,
+        hasRateAttributes: !!(rateAttributes === null || rateAttributes === void 0 ? void 0 : rateAttributes.length),
+        rateDetailsProps: showRateDetails ? {
+          rateDetails
+        } : undefined,
+        rightContentCss: Object.assign({}, (isPreferredRate && rateSavings || selected && isPreferredRate) && {
+          paddingTop: "1rem"
+        }),
+        serviceInfo: {
+          line1: carrierNickname,
+          line2: getDeliveryDaysLabel(deliveryDays),
+          line3: paperlessDisplaySchemes && paperlessDisplaySchemes.length > 0 ? jsxs("div", {
+            "aria-label": t("purchase-label:paperlessAvailable"),
+            css: styles.paperlessText,
+            children: [jsx(Icon, {
+              name: IconNames.SCAN_QR,
+              size: IconSize.SIZE_MEDIUM
+            }), jsx(Typography, {
+              variant: "small",
+              children: t("purchase-label:paperlessAvailable")
+            })]
+          }) : undefined,
+          type: serviceType
+        }
+      })]
     }), servicePoints && jsxs(Fragment, {
       children: [jsx(Divider, {
         css: styles.divider
@@ -229,7 +240,7 @@ const RateCard = ({
         "data-testid": "paperless-acknowledgement",
         label: t("purchase-label:usePaperlessLabel"),
         onChange: e => {
-          onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(e.target.checked, "qr_code");
+          onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(e.target.checked, e.target.checked ? "qr_code" : "label");
         }
       })]
     })]

package/dist/esm/components/field/rate-select/rate-card/rate-card.styles.js

@@ -6,6 +6,10 @@ const styles = createStyles({
     color: scopeTheme(theme).palette.gray.main,
     display: "flex"
   }),
+  attributeList: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing(0.5)
+  }),
   divider: theme => ({
     borderColor: scopeTheme(theme).palette.primary.main,
     margin: "0 auto",

package/dist/esm/components/field/rate-select/rate-select.js

@@ -15,6 +15,37 @@ const optionWithEnabledData = option => {
   const optionWithEnabledData = __rest(option, ["carrierNickname"]);
   return optionWithEnabledData;
 };
+/**
+ * Helper function to determine the priority of a rate attribute
+ * Priority order: best_value (0) > cheapest (1) > fastest (2) > none (3)
+ */
+const getAttributePriority = rateAttributes => {
+  if (!rateAttributes) return 3;
+  if (rateAttributes.includes("best_value")) return 0;
+  if (rateAttributes.includes("cheapest")) return 1;
+  if (rateAttributes.includes("fastest")) return 2;
+  return 3;
+};
+/**
+ * Sorts rates by their attributes, placing rates with special attributes first
+ * Sort order: best_value > cheapest > fastest > remaining rates
+ */
+const sortRatesByAttributes = rates => {
+  const ratesWithAttributes = rates.filter(rate => {
+    var _a;
+    return !!((_a = rate.rateAttributes) === null || _a === void 0 ? void 0 : _a.length);
+  });
+  const ratesWithoutAttributes = rates.filter(rate => {
+    var _a;
+    return !((_a = rate.rateAttributes) === null || _a === void 0 ? void 0 : _a.length);
+  });
+  ratesWithAttributes.sort((a, b) => {
+    const priorityA = getAttributePriority(a.rateAttributes);
+    const priorityB = getAttributePriority(b.rateAttributes);
+    return priorityA - priorityB;
+  });
+  return [...ratesWithAttributes, ...ratesWithoutAttributes];
+};
 const RateSelect = _a => {
   var {
       nicknameFeature,
@@ -35,58 +66,58 @@ const RateSelect = _a => {
           options
         } = _a,
         field = __rest(_a, ["options"]);
+      // Sort rates by attributes: best_value > cheapest > fastest > remaining
+      const sortedOptions = options ? sortRatesByAttributes(options) : [];
       return jsx("div", {
         "aria-label": "Rate Selection",
         role: "radiogroup",
-        children: options === null || options === void 0 ? void 0 : options.map(option => {
-          return createElement(RateCard, Object.assign({
-            mapViewEnabled: mapViewEnabled
-          }, optionWithEnabledData(option), {
-            carrierNickname: nicknameFeature ? option.carrierNickname || `ID: ${option.carrierId}` : undefined,
-            css: styles.rateCardOptionStyles,
-            isAcknowledged: field.value.isAcknowledged,
-            isLoading: isLoading,
-            isPreferredRate: preferredServiceCodes && preferredServiceCodes.includes(option.serviceCode),
-            key: option.rateId,
-            onClick: rateId => {
-              var _a;
-              onClick === null || onClick === void 0 ? void 0 : onClick(rateId);
-              // if the rate supports "label_and_paperless" display scheme, use it by default
-              if ((_a = option.paperlessDisplaySchemes) === null || _a === void 0 ? void 0 : _a.includes("label_and_paperless")) {
-                field.onChange({
-                  usePaperlessLabel: true,
-                  labelDisplayScheme: "label_and_paperless",
-                  isAcknowledged: !option.requiresAcknowledgement,
-                  rateId
-                });
-              } else {
-                field.onChange({
-                  isAcknowledged: !option.requiresAcknowledgement,
-                  rateId
-                });
-              }
-              setSelectedRateCost(getTotalRateAmount(option));
-            },
-            onClickAcknowledgement: isAcknowledged => field.onChange(Object.assign(Object.assign({}, field.value), {
-              isAcknowledged
-            })),
-            onPaperlessAcknowledgementChange: (usePaperless, labelDisplayScheme) => {
-              field.onChange(Object.assign(Object.assign({}, field.value), {
-                usePaperlessLabel: usePaperless,
-                labelDisplayScheme
-              }));
-              onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(usePaperless, labelDisplayScheme);
-            },
-            onSelectServicePoint: onSelectServicePoint,
-            paperlessDisplaySchemes: option.paperlessDisplaySchemes,
-            paperlessLabelChecked: field.value.usePaperlessLabel,
-            rateDetails: option.rateDetails,
-            selected: option.rateId === field.value.rateId,
-            selectedRateCost: selectedRateCost,
-            servicePoints: option.servicePoints,
-            showVatFeatures: showVatFeatures
-          }));
-        })
+        children: sortedOptions.map(option => createElement(RateCard, Object.assign({
+          mapViewEnabled: mapViewEnabled
+        }, optionWithEnabledData(option), {
+          carrierNickname: nicknameFeature ? option.carrierNickname || `ID: ${option.carrierId}` : undefined,
+          css: styles.rateCardOptionStyles,
+          isAcknowledged: field.value.isAcknowledged,
+          isLoading: isLoading,
+          isPreferredRate: preferredServiceCodes && preferredServiceCodes.includes(option.serviceCode),
+          key: option.rateId,
+          onClick: rateId => {
+            var _a;
+            onClick === null || onClick === void 0 ? void 0 : onClick(rateId);
+            // if the rate supports "label_and_paperless" display scheme, use it by default
+            if ((_a = option.paperlessDisplaySchemes) === null || _a === void 0 ? void 0 : _a.includes("label_and_paperless")) {
+              field.onChange({
+                usePaperlessLabel: true,
+                labelDisplayScheme: "label_and_paperless",
+                isAcknowledged: !option.requiresAcknowledgement,
+                rateId
+              });
+            } else {
+              field.onChange({
+                isAcknowledged: !option.requiresAcknowledgement,
+                rateId
+              });
+            }
+            setSelectedRateCost(getTotalRateAmount(option));
+          },
+          onClickAcknowledgement: isAcknowledged => field.onChange(Object.assign(Object.assign({}, field.value), {
+            isAcknowledged
+          })),
+          onPaperlessAcknowledgementChange: (usePaperless, labelDisplayScheme) => {
+            field.onChange(Object.assign(Object.assign({}, field.value), {
+              usePaperlessLabel: usePaperless,
+              labelDisplayScheme
+            }));
+            onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(usePaperless, labelDisplayScheme);
+          },
+          onSelectServicePoint: onSelectServicePoint,
+          paperlessDisplaySchemes: option.paperlessDisplaySchemes,
+          paperlessLabelChecked: field.value.usePaperlessLabel,
+          rateDetails: option.rateDetails,
+          selected: option.rateId === field.value.rateId,
+          selectedRateCost: selectedRateCost,
+          servicePoints: option.servicePoints,
+          showVatFeatures: showVatFeatures
+        })))
       });
     }
   }));

package/dist/esm/components/forms/register-funding-source-insurance-form/register-funding-source-insurance-form.js

@@ -71,7 +71,7 @@ const RegisterFundingSourceInsuranceForm = ({
           children: [t(`sections.insuranceProviders.${insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.provider}.terms`), jsxs(Link, {
             "aria-label": "Opens in a new tab",
             css: styles.termsLink,
-            href: insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.terms.links[0].link,
+            href: insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.terms[0].links[0].link,
             isExternal: true,
             rel: "noreferrer",
             target: "_blank",

package/dist/esm/components/forms/warehouse-form/warehouse-form.js

@@ -97,13 +97,22 @@ const WarehouseForm = ({
       form: form,
       formatFieldName: fieldName => `originAddress.${fieldName}`,
       optionalFields: ["addressLine2", ...(requireEmail ? [] : ["email"])]
-    }), !shouldForceDefault && jsx(CheckboxInput, {
+    }), !shouldForceDefault ? jsx(CheckboxInput, {
       ariaLabel: "Is Default Warehouse",
       checkboxLabel: t("manage-warehouses:isDefault"),
       control: form.control,
       form: formId,
       label: "isDefault",
       name: "isDefault"
+    }) : jsx(CheckboxInput, {
+      ariaLabel: "Is Default Warehouse",
+      checkboxLabel: warehouse ? t("manage-warehouses:forcedDefault") : t("manage-warehouses:forcedDefaultNew"),
+      control: form.control,
+      defaultValue: true,
+      disabled: true,
+      form: formId,
+      label: "isDefault",
+      name: "isDefault"
     }), jsx(CheckboxInput, {
       ariaLabel: "Return To Address Is Different",
       checkboxLabel: t("manage-warehouses:returnToAddressIsDifferent"),

package/dist/esm/components/service-card/service-card.js

@@ -35,7 +35,8 @@ const ServiceCardHeader = ({
   rateDetailsProps,
   costBreakdownProps,
   rightContentCss,
-  voided
+  voided,
+  hasRateAttributes
 }) => {
   const {
     type,
@@ -46,7 +47,7 @@ const ServiceCardHeader = ({
   return jsxs("div", {
     "data-testid": "service-card-header",
     children: [jsxs("section", {
-      css: styles.section,
+      css: styles.getSectionStyles(hasRateAttributes),
       children: [carrierCode && jsx("div", {
         css: styles.carrierImage,
         children: jsx(CarrierIcon, {

package/dist/esm/components/service-card/service-card.styles.js

@@ -45,12 +45,14 @@ const styles = createStyles({
   headerChildren: theme => ({
     padding: `${scopeTheme(theme).spacing(0)}px ${scopeTheme(theme).spacing(2)}px ${scopeTheme(theme).spacing(2)}px ${scopeTheme(theme).spacing(2)}px`
   }),
-  section: theme => ({
+  getSectionStyles: hasRateAttributes => theme => Object.assign({
     alignItems: "flex-start",
     display: "flex",
     flexDirection: "row",
     flexWrap: "nowrap",
-    padding: scopeTheme(theme).spacing(2)
+    padding: scopeTheme(theme).spacing(1.5)
+  }, hasRateAttributes && {
+    paddingTop: scopeTheme(theme).spacing(0.75)
   }),
   serviceInfo: theme => ({
     display: "flex",

package/dist/esm/data/insurance-provider-metadatas.json.js

@@ -2,13 +2,18 @@ var parcelguard_terms = {
 	friendlyName: "ParcelGuard",
 	provider: "parcelguard"
 };
-var x_cover_terms = {
+var xcover_terms = {
 	friendlyName: "XCover",
-	provider: "x_cover"
+	provider: "xcover"
+};
+var xcover_information = {
+	friendlyName: "XCover",
+	provider: "xcover"
 };
 var _insuranceProviderMetadata = {
 	parcelguard_terms: parcelguard_terms,
-	x_cover_terms: x_cover_terms
+	xcover_terms: xcover_terms,
+	xcover_information: xcover_information
 };
 
-export { _insuranceProviderMetadata as default, parcelguard_terms, x_cover_terms };
+export { _insuranceProviderMetadata as default, parcelguard_terms, xcover_information, xcover_terms };