@shipengine/elements 2.20.0 → 2.22.0

package/cjs/elements/labels-grid/labels-grid.cjs

@@ -0,0 +1,461 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useSortableQuery = require('../../hooks/use-sortable-query.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var useLabelsGrid = require('./hooks/use-labels-grid.cjs');
+var labelsGrid_styles = require('./labels-grid.styles.cjs');
+var sortableHeader = require('../../components/grid-controller/sortable-header/sortable-header.cjs');
+var cellFormattedDate = require('../../components/grid-controller/cell-formatted-date.cjs');
+var actionsMenu = require('../../components/actions-menu/actions-menu.cjs');
+var errorState = require('../../components/error-state/error-state.cjs');
+var gridController = require('../../components/grid-controller/grid-controller.cjs');
+var gridFilters = require('../../components/grid-filters/grid-filters.cjs');
+var gridFooter = require('../../components/grid-controller/grid-footer.cjs');
+var index = require('../../locales/en/index.cjs');
+var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
+var spacer = require('../../components/spacer/spacer.cjs');
+var poweredByShipengine = require('../../components/powered-by-shipengine/powered-by-shipengine.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+const Component = ({
+  labelStatus,
+  features,
+  onClickPrintLabel,
+  onClickVoidLabel,
+  onClickPrintForms,
+  onClickViewDetails,
+  onRowClick,
+  onClickExternalOrderId,
+  onClickExternalShipmentId,
+  onClickShipmentNumber
+}) => {
+  var _a, _b;
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "list-labels"]);
+  const {
+    globalFeatures,
+    getFeatures
+  } = elementsContextProvider.useElements();
+  const defaultFeatures = getFeatures("labelsGridFeatures");
+  const prevStatus = React.useRef(labelStatus);
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery.useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
+  features = Object.assign(Object.assign({}, defaultFeatures), features !== null && features !== void 0 ? features : {});
+  const labelIdColumn = React.useMemo(() => {
+    var _a;
+    return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "labelId");
+  }, [features]);
+  const shipmentIdColumn = React.useMemo(() => {
+    var _a;
+    return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "shipmentId");
+  }, [features]);
+  const trackingStatusColumn = React.useMemo(() => {
+    var _a;
+    return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "trackingStatus");
+  }, [features]);
+  const shipmentNumberColumn = React.useMemo(() => {
+    var _a;
+    return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "shipmentNumber");
+  }, [features]);
+  const showLabelIdFilter = labelIdColumn && ((_a = labelIdColumn.allowFilter) !== null && _a !== void 0 ? _a : true);
+  const showShipmentIdFilter = shipmentIdColumn && ((_b = shipmentIdColumn.allowFilter) !== null && _b !== void 0 ? _b : true);
+  const showTrackingStatusFilter = trackingStatusColumn && !!trackingStatusColumn.allowFilter;
+  const {
+    labels,
+    getGridData,
+    isError,
+    isLoading,
+    isFetchingNextPage,
+    hasMoreUnfetchedResults,
+    filters,
+    setFilters,
+    pageConfig,
+    isAnyFilterActive,
+    shouldShowFilters,
+    clearAllFilters
+  } = useLabelsGrid.useLabelsGrid({
+    fetchShipments: !!shipmentNumberColumn,
+    labelStatus,
+    showLabelIdFilter,
+    showShipmentIdFilter,
+    showTrackingStatusFilter,
+    sortDir: sortState.dir
+  });
+  React.useEffect(() => {
+    if (prevStatus.current !== labelStatus) {
+      pageConfig.pagerProps.resetCurrentPage();
+    }
+    prevStatus.current = labelStatus;
+  }, [labelStatus, pageConfig.pagerProps]);
+  const gridFilters$1 = React.useMemo(() => {
+    return {
+      labelId: Object.assign(Object.assign({}, filters.labelId), {
+        nickname: labelIdColumn === null || labelIdColumn === void 0 ? void 0 : labelIdColumn.nickname
+      }),
+      shipmentId: Object.assign(Object.assign({}, filters.shipmentId), {
+        nickname: shipmentIdColumn === null || shipmentIdColumn === void 0 ? void 0 : shipmentIdColumn.nickname
+      }),
+      trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
+        nickname: trackingStatusColumn === null || trackingStatusColumn === void 0 ? void 0 : trackingStatusColumn.nickname
+      })
+    };
+  }, [filters, labelIdColumn, shipmentIdColumn, trackingStatusColumn]);
+  const toggleCreatedDateSort = React.useCallback(() => {
+    toggleSort("created_at");
+  }, [toggleSort]);
+  const columns = React.useMemo(() => {
+    var _a;
+    const labelTags = {
+      completed: {
+        color: giger.TagColor.SUCCESS,
+        text: t("list-labels:status.completed")
+      },
+      error: {
+        color: giger.TagColor.ERROR,
+        text: t("list-labels:status.error")
+      },
+      processing: {
+        color: giger.TagColor.INFO,
+        text: t("list-labels:status.processing")
+      },
+      voided: {
+        color: giger.TagColor.INFO,
+        text: t("list-labels:status.voided")
+      }
+    };
+    const trackingTags = {
+      delivered: {
+        color: giger.TagColor.SUCCESS,
+        text: t("list-labels:trackingStatus.delivered")
+      },
+      error: {
+        color: giger.TagColor.ERROR,
+        text: t("list-labels:trackingStatus.error")
+      },
+      in_transit: {
+        color: giger.TagColor.GRAY,
+        text: t("list-labels:trackingStatus.inTransit")
+      },
+      unknown: {
+        color: giger.TagColor.ALERT,
+        text: t("list-labels:trackingStatus.unknown")
+      }
+    };
+    const columnMap = {
+      createdDate: {
+        headerContent: jsxRuntime.jsx(sortableHeader.SortableHeader, {
+          headerText: t("list-labels:headers.created"),
+          onToggleSort: toggleCreatedDateSort,
+          sortDirection: sortState.createdAtDir
+        }),
+        renderCellContent: label => {
+          return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
+            date: label.createdAt,
+            short: true
+          });
+        }
+      },
+      externalOrderId: {
+        headerContent: t("list-labels:headers.externalOrderId"),
+        renderCellContent: label => {
+          return label.externalOrderId && onClickExternalOrderId ? jsxRuntime.jsx(giger.Next.Link, Object.assign({
+            bold: false,
+            onClick: () => {
+              var _a;
+              return onClickExternalOrderId === null || onClickExternalOrderId === void 0 ? void 0 : onClickExternalOrderId((_a = label.externalOrderId) !== null && _a !== void 0 ? _a : undefined);
+            }
+          }, {
+            children: label.externalOrderId
+          })) : jsxRuntime.jsx(giger.Typography, Object.assign({
+            component: "span",
+            variant: "body2"
+          }, {
+            children: label.externalOrderId
+          }));
+        }
+      },
+      externalShipmentId: {
+        headerContent: t("list-labels:headers.externalShipmentId"),
+        renderCellContent: label => {
+          return label.externalShipmentId && onClickExternalShipmentId ? jsxRuntime.jsx(giger.Next.Link, Object.assign({
+            bold: false,
+            onClick: () => {
+              var _a;
+              return onClickExternalShipmentId === null || onClickExternalShipmentId === void 0 ? void 0 : onClickExternalShipmentId((_a = label.externalShipmentId) !== null && _a !== void 0 ? _a : undefined);
+            }
+          }, {
+            children: label.externalShipmentId
+          })) : jsxRuntime.jsx(giger.Typography, Object.assign({
+            component: "span",
+            variant: "body2"
+          }, {
+            children: label.externalShipmentId
+          }));
+        }
+      },
+      labelId: {
+        headerContent: t("list-labels:headers.labelId"),
+        renderCellContent: label => {
+          return jsxRuntime.jsx(giger.Typography, Object.assign({
+            component: "span",
+            variant: "body2"
+          }, {
+            children: label.labelId
+          }));
+        }
+      },
+      packages: {
+        headerContent: t("list-labels:headers.parcels"),
+        renderCellContent: label => {
+          return jsxRuntime.jsx(giger.Typography, Object.assign({
+            component: "span",
+            variant: "body2"
+          }, {
+            children: label.packages.length
+          }));
+        }
+      },
+      recipient: {
+        headerContent: t("list-labels:headers.recipient"),
+        renderCellContent: label => {
+          return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+              component: "p",
+              css: labelsGrid_styles.styles.tableParagraph,
+              variant: "body2"
+            }, {
+              children: label.shipTo.name
+            })), jsxRuntime.jsxs(giger.Typography, Object.assign({
+              component: "p",
+              css: labelsGrid_styles.styles.tableParagraph,
+              variant: "body2"
+            }, {
+              children: [label.shipTo.postalCode, ", ", label.shipTo.cityLocality]
+            }))]
+          });
+        }
+      },
+      shipDate: {
+        headerContent: t("list-labels:headers.shipDate"),
+        renderCellContent: label => {
+          return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
+            date: label.shipDate,
+            short: true
+          });
+        }
+      },
+      shipmentId: {
+        headerContent: t("list-labels:headers.shipmentId"),
+        renderCellContent: label => {
+          return jsxRuntime.jsx(giger.Typography, Object.assign({
+            component: "span",
+            variant: "body2"
+          }, {
+            children: label.shipmentId
+          }));
+        }
+      },
+      shipmentNumber: {
+        headerContent: t("list-labels:headers.shipmentNumber"),
+        renderCellContent: label => {
+          return label.shipmentNumber && onClickShipmentNumber ? jsxRuntime.jsx(giger.Next.Link, Object.assign({
+            bold: false,
+            onClick: () => {
+              var _a;
+              return onClickShipmentNumber === null || onClickShipmentNumber === void 0 ? void 0 : onClickShipmentNumber((_a = label.shipmentNumber) !== null && _a !== void 0 ? _a : undefined);
+            }
+          }, {
+            children: label.shipmentNumber
+          })) : jsxRuntime.jsx(giger.Typography, Object.assign({
+            component: "span",
+            variant: "body2"
+          }, {
+            children: label.shipmentNumber
+          }));
+        }
+      },
+      shippingService: {
+        headerContent: t("list-labels:headers.shipping"),
+        renderCellContent: label => {
+          return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+              component: "p",
+              css: labelsGrid_styles.styles.tableParagraph,
+              variant: "body2"
+            }, {
+              children: label.serviceName || label.serviceCode
+            })), label.trackable && jsxRuntime.jsx(giger.Next.Link, Object.assign({
+              bold: false,
+              href: label.trackingUrl,
+              isExternal: true,
+              target: "_blank"
+            }, {
+              children: label.trackingNumber
+            }))]
+          });
+        }
+      },
+      status: {
+        headerContent: t("list-labels:headers.status"),
+        renderCellContent: label => {
+          return jsxRuntime.jsx(giger.Tag, Object.assign({
+            color: labelTags[label.status].color,
+            variant: giger.TagVariant.LINEAL_FILLED
+          }, {
+            children: labelTags[label.status].text
+          }));
+        }
+      },
+      trackingStatus: {
+        headerContent: t("list-labels:headers.trackingStatus"),
+        renderCellContent: label => {
+          return label.status === "voided" ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [t("list-labels:status.voided") + " ", jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
+              date: label.createdAt,
+              short: true
+            })]
+          }) : jsxRuntime.jsx(giger.Tag, Object.assign({
+            color: trackingTags[label.trackingStatus].color,
+            variant: giger.TagVariant.LINEAL_FILLED
+          }, {
+            children: trackingTags[label.trackingStatus].text
+          }));
+        }
+      }
+    };
+    const cols = [];
+    (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.forEach(c => {
+      if (columnMap[c.name]) {
+        if (c.nickname) {
+          cols.push(Object.assign(Object.assign({}, columnMap[c.name]), {
+            headerContent: c.nickname
+          }));
+        } else {
+          cols.push(columnMap[c.name]);
+        }
+      }
+    });
+    // Actual actions are only allowed for completed labels
+    if ((features === null || features === void 0 ? void 0 : features.showActions) && labels.some(label => label.status === "completed")) {
+      cols.push({
+        headerContent: "",
+        renderCellContent: label => {
+          var _a, _b;
+          const isLabelDelivered = label.trackingStatus === "delivered";
+          const isReprintAllowed = !!((_a = label.labelDownload) === null || _a === void 0 ? void 0 : _a.href) && label.status === "completed";
+          const isVoidAllowed = !!onClickVoidLabel && label.status === "completed";
+          const isPrintFormsAllowed = !!((_b = label.formDownload) === null || _b === void 0 ? void 0 : _b.href) && label.status === "completed";
+          const isViewDetailsAllowed = !!onClickViewDetails;
+          const allowActionsMenu = isReprintAllowed || isVoidAllowed || isPrintFormsAllowed || isViewDetailsAllowed;
+          if (isLabelDelivered || !allowActionsMenu) {
+            return null;
+          }
+          const actions = [...(isViewDetailsAllowed ? [actionsMenu.Actions.VIEW_DETAILS] : []), ...(isReprintAllowed ? [actionsMenu.Actions.PRINT_LABEL] : []), ...(isVoidAllowed ? [actionsMenu.Actions.VOID_LABEL] : []), ...(isPrintFormsAllowed ? [actionsMenu.Actions.PRINT_FORMS] : [])];
+          return jsxRuntime.jsx(actionsMenu.ActionsMenu, {
+            allowedActions: actions,
+            onActionClick: action => {
+              if (action === actionsMenu.Actions.PRINT_LABEL) {
+                onClickPrintLabel === null || onClickPrintLabel === void 0 ? void 0 : onClickPrintLabel();
+                window.open(label.labelDownload.href, "_blank", "noopener, noreferrer");
+              }
+              if (action === actionsMenu.Actions.VOID_LABEL) {
+                onClickVoidLabel === null || onClickVoidLabel === void 0 ? void 0 : onClickVoidLabel(label);
+              }
+              if (action === actionsMenu.Actions.PRINT_FORMS) {
+                onClickPrintForms === null || onClickPrintForms === void 0 ? void 0 : onClickPrintForms();
+                window.open(label.formDownload.href, "_blank", "noopener, noreferrer");
+              }
+              if (action === actionsMenu.Actions.VIEW_DETAILS) {
+                onClickViewDetails === null || onClickViewDetails === void 0 ? void 0 : onClickViewDetails(label);
+              }
+            }
+          });
+        }
+      });
+    }
+    return cols;
+  }, [t, toggleCreatedDateSort, sortState.createdAtDir, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickShipmentNumber, onClickVoidLabel, onClickViewDetails, onClickPrintLabel, onClickPrintForms]);
+  const emptyContentComponent = React.useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsxRuntime.jsx(giger.EmptyState, Object.assign({
+        isElevated: false,
+        subtitle: t("list-labels:emptyWithFilters.subtitle"),
+        title: t("list-labels:emptyWithFilters.title")
+      }, {
+        children: jsxRuntime.jsx(giger.Button, Object.assign({
+          onClick: clearAllFilters
+        }, {
+          children: t("list-labels:emptyWithFilters.button")
+        }))
+      }));
+    } else {
+      return jsxRuntime.jsx(giger.EmptyState, {
+        isElevated: false,
+        subtitle: t("list-labels:empty.subtitle"),
+        title: t("list-labels:empty.title")
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
+  if (isError) {
+    return jsxRuntime.jsx(errorState.ErrorState, {
+      css: labelsGrid_styles.styles.errorState,
+      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
+      title: t("list-labels:errorMessages.title")
+    });
+  }
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(gridController.GridController, {
+      columns: columns,
+      data: getGridData(),
+      emptyContent: emptyContentComponent,
+      filters: shouldShowFilters && jsxRuntime.jsx(gridFilters.GridFilters, {
+        filters: gridFilters$1,
+        filtersDisabled: isLoading,
+        onClearAllFilters: clearAllFilters,
+        onFiltersUpdated: setFilters
+      }),
+      footerContent: jsxRuntime.jsx(gridFooter.GridFooter, {
+        hasMoreUnfetchedResults: hasMoreUnfetchedResults,
+        isLoadingMore: isFetchingNextPage,
+        onPageChange: pageConfig.pagerProps.onPageSelect,
+        page: pageConfig.currentPage,
+        pages: pageConfig.pagesAmount,
+        pageSize: pageConfig.pageSize,
+        showPagination: pageConfig.showPagination,
+        total: pageConfig.totalElements
+      }),
+      isLoading: isLoading,
+      onRowClick: onRowClick
+    }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]
+    })]
+  });
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  css: {
+    height: "100%",
+    minWidth: "440px",
+    width: "100%"
+  },
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/labels-grid/labels-grid.styles.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  errorState: theme => Object.assign({
+    backgroundColor: styles$1.scopeTheme(theme).palette.white
+  }, styles$1.scopeTheme(theme).getComponentOverride("Table")),
+  tableParagraph: {
+    margin: 0
+  }
+});
+
+exports.styles = styles;

package/cjs/elements/manage-carriers/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var manageCarriers = require('./manage-carriers.cjs');
+
+
+
+exports.ManageCarriers = manageCarriers;

package/cjs/elements/manage-carriers/manage-carriers.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactApi = require('@shipengine/react-api');
+var manageCarriers$1 = require('../../features/manage-carriers/manage-carriers.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var index = require('../../locales/en/index.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+/**
+ * # Manage-Carriers Element
+ *
+ * @param ComponentProps The base props that will be passed into the `<ManageCarriers />` component.
+ *
+ * @returns Element A React element that renders the `<ManageCarriers />` component allowing users
+ * to view a list of carriers that are connected to their ShipEngine account. This component is
+ * composed in the `<AccountSettings />` Element.
+ *
+ * @example
+ * ```tsx
+ * (() => {
+ *   const features = useFeatures("Global");
+ *
+ *   return <ManageCarriers.Element features={features} />;
+ * })();
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link ManageCarriers.ComponentProps | The props that are passed into the `<ManageCarriers />` component}
+ * @see {@link AccountSettings.Element | The `<AccountSettings />` component renders the `<ManageCarriers />` component}
+ */
+const Component = ({
+  onRedirectToOnboarding,
+  showFunds
+}) => {
+  const {
+    mutateAsync: addFunds,
+    error: addFundsErrors
+  } = reactApi.useFundingSourcesAddFunds();
+  const handleAddFunds = React.useCallback(payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+      yield addFunds(payload);
+    } catch (error) {
+      console.log(error);
+    }
+  }), [addFunds]);
+  return jsxRuntime.jsx(manageCarriers$1.ShipEngineCarriers, {
+    addFunds: handleAddFunds,
+    addFundsError: addFundsErrors,
+    onRedirectToOnboarding: onRedirectToOnboarding,
+    showFunds: showFunds
+  });
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/manage-external-carriers/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var manageExternalCarriers = require('./manage-external-carriers.cjs');
+
+
+
+exports.ManageExternalCarriers = manageExternalCarriers;

package/cjs/elements/manage-external-carriers/manage-external-carriers.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useManageExternalCarriers = require('../../features/manage-external-carriers/use-manage-external-carriers.cjs');
+var manageExternalCarriers$1 = require('../../features/manage-external-carriers/manage-external-carriers.cjs');
+var index = require('../../locales/en/index.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+/**
+ * # ManageExternalCarriers Element
+ *
+ * @param ComponentProps The base props that will be passed into the `<ManageExternalCarriers />` component.
+ *
+ * @returns Element A React element that renders the `<ManageExternalCarriers />` component allowing users
+ * to view a list of their own carrier accounts that have been connected to their ShipEngine account,
+ * and to add additional carriers.
+ * This component is composed in the `<AccountSettings />` Element.
+ *
+ * @example
+ * ```tsx
+ * (() => {
+ *   return <ManageExternalCarriers.Element isModalFullScreen={false} />;
+ * })();
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link ManageExternalCarriers.ComponentProps | The props that are passed into the `<ManageExternalCarriers />` component}
+ * @see {@link AccountSettings.Element | The `<AccountSettings />` component renders the `<ManageExternalCarriers />` component}
+ */
+const Component = ({
+  isModalFullScreen
+}) => {
+  const props = tslib.__rest(useManageExternalCarriers.useManageExternalCarriers(), []);
+  return jsxRuntime.jsx(manageExternalCarriers$1.ExternalCarriers, Object.assign({
+    isModalFullScreen: isModalFullScreen
+  }, props));
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/manage-funding/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var manageFundingElement = require('./manage-funding-element.cjs');
+
+
+
+exports.ManageFunding = manageFundingElement;

package/cjs/elements/manage-funding/manage-funding-element.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var reactApi = require('@shipengine/react-api');
+var manageFunding = require('../../features/manage-funding/manage-funding.cjs');
+var index = require('../../locales/en/index.cjs');
+var loader = require('../../components/loader/loader.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+const Component = ({
+  onRedirectToOnboarding
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "purchase-label"]);
+  const {
+    data: fundingSources,
+    refetch: refetchFundingSource,
+    isInitialLoading: loadingFundingSource,
+    isFetching: isFetchingFundingSource,
+    isStale
+  } = reactApi.useListFundingSources();
+  const {
+    mutateAsync: addFunds,
+    error: addFundsErrors
+  } = reactApi.useFundingSourcesAddFunds();
+  const handleAddFunds = React.useCallback(payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+      // somewhat unnecessary check to satisfy TS
+      if (!fundingSources || !fundingSources.length) throw new Error("No Funding Source found");
+      yield addFunds({
+        fundingSourceId: fundingSources[0].fundingSourceId,
+        funds: payload
+      });
+      yield refetchFundingSource();
+    } catch (error) {
+      console.log(error);
+    }
+  }), [addFunds, fundingSources, refetchFundingSource]);
+  if (loadingFundingSource || isFetchingFundingSource && isStale) return jsxRuntime.jsx(loader.Loader, {
+    message: t("loading.carriers")
+  });
+  if (!fundingSources || !fundingSources.length) {
+    throw new Error("errorMessages.unableToLoad.shipment");
+  }
+  return jsxRuntime.jsx(manageFunding.ManageFunding, {
+    addFunds: handleAddFunds,
+    addFundsError: addFundsErrors,
+    fundingSource: fundingSources[0],
+    onRedirectToOnboarding: onRedirectToOnboarding
+  });
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;