@shipengine/elements 1.4.0 → 1.5.0

package/index.cjs

@@ -2836,6 +2836,11 @@ const featureFlags = {
      * `<PurchaseLabel />` element.
      */
     shipmentForm: {
+      /**
+       * `addOns` enables the `Add-Ons` section of the shipment form. This allows users to
+       * add additional services to their shipment such as delivery confirmation and insurance.
+       */
+      addOns: true,
       /**
        * `browseRates` enables the `browse rates` button in the shipment form. This allows users
        * to browse rates for a shipment with varying shipment configurations. This is useful for
@@ -15307,7 +15312,7 @@ const Component$8 = ({
   }, [isAddingCarrier, connectedCarriersFetching]);
   const carrierList = React.useMemo(() => {
     const carriers = [];
-    connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.forEach(carrier => {
+    connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.filter(carrier => !carrier.requiresFundedAmount).forEach(carrier => {
       const metadata = carrierMetadata === null || carrierMetadata === void 0 ? void 0 : carrierMetadata.find(m => m.carrierName === carrier.carrierCode);
       if (metadata) {
         carriers.push({
@@ -16366,24 +16371,19 @@ const ManageWarehouses = ({
         }),
         submitButtonTitle: t("actions.save")
       })
-    })) : jsxRuntime.jsx(ButtonGroup, Object.assign({
-      justify: "end"
-    }, {
-      children: jsxRuntime.jsxs(giger.Button, Object.assign({
-        bold: false,
-        onClick: () => toggleShowAddNewWarehouseForm(true),
-        type: "button",
-        variant: giger.ButtonVariant.TEXT
+    })) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(ButtonGroup, Object.assign({
+        justify: "end"
       }, {
-        children: [t("manage-warehouses:addNew"), jsxRuntime.jsx(giger.Icon, {
-          css: {
-            paddingLeft: 6
-          },
-          name: gigerTheme.IconNames.ADD,
-          size: giger.IconSize.SIZE_SMALL
-        })]
-      }))
-    })), jsxRuntime.jsx("div", Object.assign({
+        children: jsxRuntime.jsx(LinkAction, {
+          icon: "add",
+          onClick: () => toggleShowAddNewWarehouseForm(true),
+          title: t("manage-warehouses:addNew")
+        })
+      })), jsxRuntime.jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), jsxRuntime.jsx("div", Object.assign({
       css: styles$i.cardSpacing
     }, {
       children: warehouses.map(warehouse => {
@@ -19123,6 +19123,7 @@ const ShipmentForm = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   features = Object.assign({
+    addOns: true,
     browseRates: true,
     includeShipsuranceInsurance: true,
     includeThirdPartyInsurance: true,
@@ -19808,82 +19809,84 @@ const ShipmentForm = ({
         hint: t("purchase-label:hints.contentDescription"),
         label: t("purchase-label:fields.contentDescription"),
         name: "packages.0.contentDescription"
-      }), jsxRuntime.jsx(giger.Divider, {}), jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsxs(FieldLabel, Object.assign({
-        label: "purchase-label:fields.addOns"
-      }, {
-        children: [jsxRuntime.jsx(Switch, Object.assign({
-          defaultChecked: ((_g = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none",
-          label: t("purchase-label:fields.confirmation"),
-          name: "confirmationEnabled",
-          onChange: e => form.setValue("confirmation", e.target.checked ? alchemy.SE.ConfirmationType.DELIVERY : undefined, {
-            shouldDirty: true
-          }),
-          shouldUnmount: true,
-          value: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none"
+      }), features.addOns && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Divider, {}), jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsxs(FieldLabel, Object.assign({
+          label: "purchase-label:fields.addOns"
         }, {
-          children: jsxRuntime.jsx(Select, {
-            control: form.control,
-            defaultValue: alchemy.SE.ConfirmationType.DELIVERY,
-            displayLabel: false,
+          children: [jsxRuntime.jsx(Switch, Object.assign({
+            defaultChecked: ((_g = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none",
             label: t("purchase-label:fields.confirmation"),
-            name: "confirmation",
-            options: confirmationOptions,
-            shouldUnregister: true
-          })
-        })), jsxRuntime.jsxs(Switch, Object.assign({
-          defaultChecked: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _j !== void 0 ? _j : "none") !== "none",
-          label: t("purchase-label:fields.insurance"),
-          name: "insuranceEnabled",
-          onChange: e => {
-            setInsuranceEnabled(e.target.checked);
-            form.setValue("insuranceProvider", e.target.checked ? alchemy.SE.InsuranceProviderType.CARRIER : undefined, {
+            name: "confirmationEnabled",
+            onChange: e => form.setValue("confirmation", e.target.checked ? alchemy.SE.ConfirmationType.DELIVERY : undefined, {
               shouldDirty: true
-            });
-          },
-          shouldUnmount: true,
-          value: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _k !== void 0 ? _k : "none") !== "none"
-        }, {
-          children: [insuranceProviderOptions.length === 1 && insuranceProviderOptions[0].value === "carrier" ? null : jsxRuntime.jsx(Select, {
-            control: form.control,
-            defaultValue: insuranceEnabled ? alchemy.SE.InsuranceProviderType.CARRIER : alchemy.SE.InsuranceProviderType.NONE,
-            displayLabel: false,
-            label: t("purchase-label:fields.insuranceProvider"),
-            name: "insuranceProvider",
-            options: insuranceProviderOptions,
-            shouldUnregister: true
-          }), jsxRuntime.jsx(MoneyInput, {
-            control: form.control,
-            defaultValue: {
-              amount: undefined,
-              currency
+            }),
+            shouldUnmount: true,
+            value: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none"
+          }, {
+            children: jsxRuntime.jsx(Select, {
+              control: form.control,
+              defaultValue: alchemy.SE.ConfirmationType.DELIVERY,
+              displayLabel: false,
+              label: t("purchase-label:fields.confirmation"),
+              name: "confirmation",
+              options: confirmationOptions,
+              shouldUnregister: true
+            })
+          })), jsxRuntime.jsxs(Switch, Object.assign({
+            defaultChecked: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _j !== void 0 ? _j : "none") !== "none",
+            label: t("purchase-label:fields.insurance"),
+            name: "insuranceEnabled",
+            onChange: e => {
+              setInsuranceEnabled(e.target.checked);
+              form.setValue("insuranceProvider", e.target.checked ? alchemy.SE.InsuranceProviderType.CARRIER : undefined, {
+                shouldDirty: true
+              });
             },
-            displayLabel: false,
-            label: t("purchase-label:fields.insuredValue"),
-            name: "packages.0.insuredValue",
-            placeholder: t("purchase-label:fields.insuredValue"),
-            shouldUnregister: true,
-            showCurrencySymbol: true
+            shouldUnmount: true,
+            value: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _k !== void 0 ? _k : "none") !== "none"
+          }, {
+            children: [insuranceProviderOptions.length === 1 && insuranceProviderOptions[0].value === "carrier" ? null : jsxRuntime.jsx(Select, {
+              control: form.control,
+              defaultValue: insuranceEnabled ? alchemy.SE.InsuranceProviderType.CARRIER : alchemy.SE.InsuranceProviderType.NONE,
+              displayLabel: false,
+              label: t("purchase-label:fields.insuranceProvider"),
+              name: "insuranceProvider",
+              options: insuranceProviderOptions,
+              shouldUnregister: true
+            }), jsxRuntime.jsx(MoneyInput, {
+              control: form.control,
+              defaultValue: {
+                amount: undefined,
+                currency
+              },
+              displayLabel: false,
+              label: t("purchase-label:fields.insuredValue"),
+              name: "packages.0.insuredValue",
+              placeholder: t("purchase-label:fields.insuredValue"),
+              shouldUnregister: true,
+              showCurrencySymbol: true
+            })]
+          })), hasUpsOptions && jsxRuntime.jsx(Switch, {
+            defaultChecked: ((_l = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _l === void 0 ? void 0 : _l.additionalHandling) || false,
+            label: jsxRuntime.jsx(reactI18next.Trans, {
+              components: {
+                Link: jsxRuntime.jsx(giger.Link, {
+                  href: "https://help.paypal.shipstation.com/hc/en-us/articles/13823149193755-UPS-Additional-Handling",
+                  rel: "noopener noreferrer",
+                  target: "_blank"
+                })
+              },
+              i18nKey: "purchase-label:fields.requires-additional-handling",
+              t: t
+            }),
+            name: "advancedOptions.additionalHandling",
+            onChange: e => form.setValue("advancedOptions.additionalHandling", e.target.checked, {
+              shouldDirty: true
+            }),
+            value: form.getValues("advancedOptions.additionalHandling") || false
           })]
-        })), hasUpsOptions && jsxRuntime.jsx(Switch, {
-          defaultChecked: ((_l = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _l === void 0 ? void 0 : _l.additionalHandling) || false,
-          label: jsxRuntime.jsx(reactI18next.Trans, {
-            components: {
-              Link: jsxRuntime.jsx(giger.Link, {
-                href: "https://help.paypal.shipstation.com/hc/en-us/articles/13823149193755-UPS-Additional-Handling",
-                rel: "noopener noreferrer",
-                target: "_blank"
-              })
-            },
-            i18nKey: "purchase-label:fields.requires-additional-handling",
-            t: t
-          }),
-          name: "advancedOptions.additionalHandling",
-          onChange: e => form.setValue("advancedOptions.additionalHandling", e.target.checked, {
-            shouldDirty: true
-          }),
-          value: form.getValues("advancedOptions.additionalHandling") || false
-        })]
-      })), jsxRuntime.jsx("div", Object.assign({
+        }))]
+      }), jsxRuntime.jsx("div", Object.assign({
         css: {
           display: "flex",
           justifyContent: "flex-end"

package/index.js

@@ -2802,6 +2802,11 @@ const featureFlags = {
      * `<PurchaseLabel />` element.
      */
     shipmentForm: {
+      /**
+       * `addOns` enables the `Add-Ons` section of the shipment form. This allows users to
+       * add additional services to their shipment such as delivery confirmation and insurance.
+       */
+      addOns: true,
       /**
        * `browseRates` enables the `browse rates` button in the shipment form. This allows users
        * to browse rates for a shipment with varying shipment configurations. This is useful for
@@ -15273,7 +15278,7 @@ const Component$8 = ({
   }, [isAddingCarrier, connectedCarriersFetching]);
   const carrierList = useMemo(() => {
     const carriers = [];
-    connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.forEach(carrier => {
+    connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.filter(carrier => !carrier.requiresFundedAmount).forEach(carrier => {
       const metadata = carrierMetadata === null || carrierMetadata === void 0 ? void 0 : carrierMetadata.find(m => m.carrierName === carrier.carrierCode);
       if (metadata) {
         carriers.push({
@@ -16332,24 +16337,19 @@ const ManageWarehouses = ({
         }),
         submitButtonTitle: t("actions.save")
       })
-    })) : jsx(ButtonGroup, Object.assign({
-      justify: "end"
-    }, {
-      children: jsxs(Button, Object.assign({
-        bold: false,
-        onClick: () => toggleShowAddNewWarehouseForm(true),
-        type: "button",
-        variant: ButtonVariant.TEXT
+    })) : jsxs(Fragment, {
+      children: [jsx(ButtonGroup, Object.assign({
+        justify: "end"
       }, {
-        children: [t("manage-warehouses:addNew"), jsx(Icon, {
-          css: {
-            paddingLeft: 6
-          },
-          name: IconNames.ADD,
-          size: IconSize.SIZE_SMALL
-        })]
-      }))
-    })), jsx("div", Object.assign({
+        children: jsx(LinkAction, {
+          icon: "add",
+          onClick: () => toggleShowAddNewWarehouseForm(true),
+          title: t("manage-warehouses:addNew")
+        })
+      })), jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), jsx("div", Object.assign({
       css: styles$i.cardSpacing
     }, {
       children: warehouses.map(warehouse => {
@@ -19089,6 +19089,7 @@ const ShipmentForm = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   features = Object.assign({
+    addOns: true,
     browseRates: true,
     includeShipsuranceInsurance: true,
     includeThirdPartyInsurance: true,
@@ -19774,82 +19775,84 @@ const ShipmentForm = ({
         hint: t("purchase-label:hints.contentDescription"),
         label: t("purchase-label:fields.contentDescription"),
         name: "packages.0.contentDescription"
-      }), jsx(Divider, {}), jsx(Spacer, {}), jsxs(FieldLabel, Object.assign({
-        label: "purchase-label:fields.addOns"
-      }, {
-        children: [jsx(Switch, Object.assign({
-          defaultChecked: ((_g = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none",
-          label: t("purchase-label:fields.confirmation"),
-          name: "confirmationEnabled",
-          onChange: e => form.setValue("confirmation", e.target.checked ? SE.ConfirmationType.DELIVERY : undefined, {
-            shouldDirty: true
-          }),
-          shouldUnmount: true,
-          value: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none"
+      }), features.addOns && jsxs(Fragment, {
+        children: [jsx(Divider, {}), jsx(Spacer, {}), jsxs(FieldLabel, Object.assign({
+          label: "purchase-label:fields.addOns"
         }, {
-          children: jsx(Select, {
-            control: form.control,
-            defaultValue: SE.ConfirmationType.DELIVERY,
-            displayLabel: false,
+          children: [jsx(Switch, Object.assign({
+            defaultChecked: ((_g = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none",
             label: t("purchase-label:fields.confirmation"),
-            name: "confirmation",
-            options: confirmationOptions,
-            shouldUnregister: true
-          })
-        })), jsxs(Switch, Object.assign({
-          defaultChecked: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _j !== void 0 ? _j : "none") !== "none",
-          label: t("purchase-label:fields.insurance"),
-          name: "insuranceEnabled",
-          onChange: e => {
-            setInsuranceEnabled(e.target.checked);
-            form.setValue("insuranceProvider", e.target.checked ? SE.InsuranceProviderType.CARRIER : undefined, {
+            name: "confirmationEnabled",
+            onChange: e => form.setValue("confirmation", e.target.checked ? SE.ConfirmationType.DELIVERY : undefined, {
               shouldDirty: true
-            });
-          },
-          shouldUnmount: true,
-          value: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _k !== void 0 ? _k : "none") !== "none"
-        }, {
-          children: [insuranceProviderOptions.length === 1 && insuranceProviderOptions[0].value === "carrier" ? null : jsx(Select, {
-            control: form.control,
-            defaultValue: insuranceEnabled ? SE.InsuranceProviderType.CARRIER : SE.InsuranceProviderType.NONE,
-            displayLabel: false,
-            label: t("purchase-label:fields.insuranceProvider"),
-            name: "insuranceProvider",
-            options: insuranceProviderOptions,
-            shouldUnregister: true
-          }), jsx(MoneyInput, {
-            control: form.control,
-            defaultValue: {
-              amount: undefined,
-              currency
+            }),
+            shouldUnmount: true,
+            value: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none"
+          }, {
+            children: jsx(Select, {
+              control: form.control,
+              defaultValue: SE.ConfirmationType.DELIVERY,
+              displayLabel: false,
+              label: t("purchase-label:fields.confirmation"),
+              name: "confirmation",
+              options: confirmationOptions,
+              shouldUnregister: true
+            })
+          })), jsxs(Switch, Object.assign({
+            defaultChecked: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _j !== void 0 ? _j : "none") !== "none",
+            label: t("purchase-label:fields.insurance"),
+            name: "insuranceEnabled",
+            onChange: e => {
+              setInsuranceEnabled(e.target.checked);
+              form.setValue("insuranceProvider", e.target.checked ? SE.InsuranceProviderType.CARRIER : undefined, {
+                shouldDirty: true
+              });
             },
-            displayLabel: false,
-            label: t("purchase-label:fields.insuredValue"),
-            name: "packages.0.insuredValue",
-            placeholder: t("purchase-label:fields.insuredValue"),
-            shouldUnregister: true,
-            showCurrencySymbol: true
+            shouldUnmount: true,
+            value: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _k !== void 0 ? _k : "none") !== "none"
+          }, {
+            children: [insuranceProviderOptions.length === 1 && insuranceProviderOptions[0].value === "carrier" ? null : jsx(Select, {
+              control: form.control,
+              defaultValue: insuranceEnabled ? SE.InsuranceProviderType.CARRIER : SE.InsuranceProviderType.NONE,
+              displayLabel: false,
+              label: t("purchase-label:fields.insuranceProvider"),
+              name: "insuranceProvider",
+              options: insuranceProviderOptions,
+              shouldUnregister: true
+            }), jsx(MoneyInput, {
+              control: form.control,
+              defaultValue: {
+                amount: undefined,
+                currency
+              },
+              displayLabel: false,
+              label: t("purchase-label:fields.insuredValue"),
+              name: "packages.0.insuredValue",
+              placeholder: t("purchase-label:fields.insuredValue"),
+              shouldUnregister: true,
+              showCurrencySymbol: true
+            })]
+          })), hasUpsOptions && jsx(Switch, {
+            defaultChecked: ((_l = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _l === void 0 ? void 0 : _l.additionalHandling) || false,
+            label: jsx(Trans, {
+              components: {
+                Link: jsx(Link, {
+                  href: "https://help.paypal.shipstation.com/hc/en-us/articles/13823149193755-UPS-Additional-Handling",
+                  rel: "noopener noreferrer",
+                  target: "_blank"
+                })
+              },
+              i18nKey: "purchase-label:fields.requires-additional-handling",
+              t: t
+            }),
+            name: "advancedOptions.additionalHandling",
+            onChange: e => form.setValue("advancedOptions.additionalHandling", e.target.checked, {
+              shouldDirty: true
+            }),
+            value: form.getValues("advancedOptions.additionalHandling") || false
           })]
-        })), hasUpsOptions && jsx(Switch, {
-          defaultChecked: ((_l = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _l === void 0 ? void 0 : _l.additionalHandling) || false,
-          label: jsx(Trans, {
-            components: {
-              Link: jsx(Link, {
-                href: "https://help.paypal.shipstation.com/hc/en-us/articles/13823149193755-UPS-Additional-Handling",
-                rel: "noopener noreferrer",
-                target: "_blank"
-              })
-            },
-            i18nKey: "purchase-label:fields.requires-additional-handling",
-            t: t
-          }),
-          name: "advancedOptions.additionalHandling",
-          onChange: e => form.setValue("advancedOptions.additionalHandling", e.target.checked, {
-            shouldDirty: true
-          }),
-          value: form.getValues("advancedOptions.additionalHandling") || false
-        })]
-      })), jsx("div", Object.assign({
+        }))]
+      }), jsx("div", Object.assign({
         css: {
           display: "flex",
           justifyContent: "flex-end"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "peerDependencies": {
     "@shipengine/alchemy": "5.x.x",
     "@emotion/react": "11.x",

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 ShipmentFormFeatures = {
+    addOns?: boolean;
     browseRates?: boolean;
     includeShipsuranceInsurance?: boolean;
     includeThirdPartyInsurance?: boolean;

package/src/elements/shipengine-workflow/label-workflow.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { Shipment } from "@shipengine/js-api";
+import { PurchaseLabel } from "../purchase-label";
+import { ViewShipment } from "../view-shipment";
+import { VoidLabel } from "../void-label";
 /**
  * @internal
  *
@@ -26,7 +29,7 @@ export type LabelWorkflowProps = {
     /**
      * `features` is a set of feature flags you would like to enable or disable in this component.
      */
-    features: any;
+    features: PurchaseLabel.PurchaseLabelCommonProps["features"] & ViewShipment.ComponentProps["features"] & VoidLabel.ComponentProps["features"];
     /**
      * `labelId` is the unique identifier for the label you wish to view.
      */

package/src/utilities/feature-flags.d.ts

@@ -115,6 +115,11 @@ export declare const featureFlags: {
          * `<PurchaseLabel />` element.
          */
         readonly shipmentForm: {
+            /**
+             * `addOns` enables the `Add-Ons` section of the shipment form. This allows users to
+             * add additional services to their shipment such as delivery confirmation and insurance.
+             */
+            readonly addOns: true;
             /**
              * `browseRates` enables the `browse rates` button in the shipment form. This allows users
              * to browse rates for a shipment with varying shipment configurations. This is useful for