@shipengine/elements 2.20.0 → 2.22.0

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/tax-ids.cjs

@@ -0,0 +1,172 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useNestedForm = require('../../../../../hooks/use-nested-form.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var taxIdForm = require('./tax-id-form.cjs');
+var taxIdList = require('./tax-id-list.cjs');
+var taxIds_styles = require('./tax-ids.styles.cjs');
+var actionsMenu = require('../../../../../components/actions-menu/actions-menu.cjs');
+var linkAction = require('../../../../../components/link-action/link-action.cjs');
+
+const mapTaxIdFormValuesToApi = values => ({
+  identifierType: values.tax.type,
+  issuingAuthority: values.issuingAuthority,
+  taxableEntityType: values.entityType,
+  value: values.tax.value
+});
+const TaxIds = ({
+  shipment,
+  onUpdateTaxableIds,
+  onDirty
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation(["purchase-label", "common"]);
+  const [indexLoading, setIndexLoading] = React.useState();
+  const [taxIdToEdit, setTaxIdToEdit] = React.useState();
+  const [taxIdUpdateError, setTaxIdUpdateError] = React.useState();
+  const updateShipmentTaxIdentifiersAPIUpdate = React.useCallback(taxIds => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    setTaxIdUpdateError(undefined);
+    yield onUpdateTaxableIds === null || onUpdateTaxableIds === void 0 ? void 0 : onUpdateTaxableIds(taxIds, errors => {
+      setTaxIdUpdateError(errors[0].message);
+    });
+    onDirty();
+  }), [onDirty, onUpdateTaxableIds]);
+  const handleTaxIdCreation = React.useCallback(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield updateShipmentTaxIdentifiersAPIUpdate([...(shipment.taxIdentifiers || []), mapTaxIdFormValuesToApi(values)]);
+  }), [shipment.taxIdentifiers, updateShipmentTaxIdentifiersAPIUpdate]);
+  const handleTaxIdUpdate = React.useCallback(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    var _b;
+    const newTaxIds = (_b = shipment.taxIdentifiers) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+      if (index === (taxIdToEdit === null || taxIdToEdit === void 0 ? void 0 : taxIdToEdit.index)) {
+        return mapTaxIdFormValuesToApi(values);
+      }
+      return item;
+    });
+    if (newTaxIds) {
+      yield updateShipmentTaxIdentifiersAPIUpdate(newTaxIds);
+      setTaxIdToEdit(undefined);
+    }
+  }), [shipment.taxIdentifiers, taxIdToEdit === null || taxIdToEdit === void 0 ? void 0 : taxIdToEdit.index, updateShipmentTaxIdentifiersAPIUpdate]);
+  const handleFormSubmit = React.useCallback(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (taxIdToEdit) {
+      yield handleTaxIdUpdate(values);
+    } else {
+      yield handleTaxIdCreation(values);
+    }
+  }), [handleTaxIdCreation, handleTaxIdUpdate, taxIdToEdit]);
+  const [taxableIdsForm, taxIdFormOpen, toggleTaxIdFormOpen] = useNestedForm.useNestedForm(taxIdForm.TaxIdForm, {
+    formId: taxIdForm.FormID,
+    onCancel: () => {
+      setTaxIdToEdit(undefined);
+      setTaxIdUpdateError(undefined);
+    },
+    onSubmit: handleFormSubmit,
+    taxIdToEdit: taxIdToEdit === null || taxIdToEdit === void 0 ? void 0 : taxIdToEdit.tax
+  });
+  const handleActionsClick = selectedIndex => action => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    var _c, _d;
+    switch (action) {
+      case actionsMenu.Actions.REMOVE:
+        {
+          setIndexLoading(selectedIndex);
+          const newTaxIdentifiers = ((_c = shipment.taxIdentifiers) === null || _c === void 0 ? void 0 : _c.filter((_item, index) => index !== selectedIndex)) || [];
+          yield updateShipmentTaxIdentifiersAPIUpdate(newTaxIdentifiers).finally(() => {
+            setIndexLoading(undefined);
+          });
+        }
+        break;
+      case actionsMenu.Actions.EDIT:
+        {
+          setTaxIdToEdit({
+            index: selectedIndex,
+            tax: (_d = shipment.taxIdentifiers) === null || _d === void 0 ? void 0 : _d.find((_item, index) => index === selectedIndex)
+          });
+          toggleTaxIdFormOpen();
+        }
+    }
+  });
+  const handleAddTaxIdClick = () => {
+    setTaxIdToEdit(undefined);
+    toggleTaxIdFormOpen();
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(giger.Grid, Object.assign({
+      css: taxIds_styles.styles.section,
+      noPadding: true
+    }, {
+      children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxRuntime.jsxs("div", Object.assign({
+          css: taxIds_styles.styles.addTaxIdTitleWrapper
+        }, {
+          children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+            bold: true
+          }, {
+            children: t("customs.taxIds.sectionTitle")
+          })), jsxRuntime.jsx(giger.IconTooltip, Object.assign({
+            css: taxIds_styles.styles.iconTooltip,
+            icon: gigerTheme.IconNames.INFO_FILLED,
+            size: giger.IconSize.SIZE_MEDIUM
+          }, {
+            children: jsxRuntime.jsx("div", Object.assign({
+              css: taxIds_styles.styles.tooltipContainer
+            }, {
+              children: t("customs.taxIds.sectionTitleTooltip")
+            }))
+          }))]
+        }))
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxRuntime.jsx(linkAction.LinkAction, {
+          css: [taxIds_styles.styles.addTaxIdLink, taxIdFormOpen && taxIds_styles.styles.addTaxIdLinkOpened],
+          icon: "add",
+          isDisabled: taxIdFormOpen,
+          onClick: handleAddTaxIdClick,
+          title: t("customs.taxIds.addTaxId")
+        })
+      }))]
+    })), jsxRuntime.jsxs(giger.Grid, Object.assign({
+      noPadding: true
+    }, {
+      children: [((_a = shipment.taxIdentifiers) === null || _a === void 0 ? void 0 : _a.length) && jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx(taxIdList.TaxIdList, {
+          handleActionsClick: handleActionsClick,
+          itemIndexLoading: indexLoading,
+          taxIdItems: shipment.taxIdentifiers
+        })
+      })), taxIdUpdateError && jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+          title: "Error saving Tax ID",
+          type: giger.NotificationType.ERROR
+        }, {
+          children: taxIdUpdateError
+        }))
+      })), taxIdFormOpen && jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx("section", Object.assign({
+          css: taxIds_styles.styles.taxIdFormSection
+        }, {
+          children: taxableIdsForm
+        }))
+      }))]
+    }))]
+  });
+};
+
+exports.TaxIds = TaxIds;

package/cjs/elements/purchase-label/components/customs-forms/tax-ids/tax-ids.styles.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  addTaxIdLink: theme => ({
+    alignSelf: "end",
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+  }),
+  addTaxIdLinkOpened: theme => ({
+    ":hover": {
+      color: styles$1.scopeTheme(theme).palette.gray.main
+    },
+    color: styles$1.scopeTheme(theme).palette.gray.main
+  }),
+  addTaxIdTitleWrapper: () => ({
+    alignItems: "center",
+    display: "flex"
+  }),
+  iconTooltip: theme => ({
+    color: styles$1.scopeTheme(theme).palette.info.main,
+    marginLeft: styles$1.scopeTheme(theme).spacing(0.5)
+  }),
+  section: theme => ({
+    marginBottom: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  taxIdFormSection: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  taxIdList: () => ({
+    listStyle: "none"
+  }),
+  taxIdListItem: theme => ({
+    // First item when more than 1
+    ":first-of-type:nth-last-child(n+2)": {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    // Last item
+    ":not(:first-of-type)": {
+      borderTop: 0,
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    },
+    // Items in the middle
+    ":not(:first-of-type):not(:last-child)": {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.dark}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.S,
+    display: "flex",
+    justifyContent: "space-between",
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  taxIdListItemAuthorityTag: theme => ({
+    marginRight: styles$1.scopeTheme(theme).spacing()
+  }),
+  taxIdListItemAuthorityText: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main
+  }),
+  taxIdListItemAuthorityWrapper: () => ({
+    alignItems: "center",
+    display: "flex"
+  }),
+  taxIdListItemIdentifier: theme => ({
+    marginRight: styles$1.scopeTheme(theme).spacing()
+  }),
+  tooltipContainer: () => ({
+    textAlign: "left",
+    width: 200
+  }),
+  tooltipList: theme => ({
+    paddingLeft: styles$1.scopeTheme(theme).spacing(3)
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/purchase-label/components/customs-forms/windsor-framework/windsor-framework.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var windsorFramework_styles = require('./windsor-framework.styles.cjs');
+var useMovementIndicatorOptions = require('../../../hooks/use-movement-indicator-options.cjs');
+var select = require('../../../../../components/field/select/select.cjs');
+var checkboxInput = require('../../../../../components/field/checkbox-input/checkbox-input.cjs');
+
+const WindsorFramework = ({
+  form
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["purchase-label", "common"]);
+  const movementIndicatorOptions = useMovementIndicatorOptions.useMovementIndicatorOptions();
+  const movementIndicator = form.watch("advancedOptions.windsorFrameworkDetails.movementIndicator");
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: windsorFramework_styles.styles.windsorFrameworkContainer
+  }, {
+    children: [jsxRuntime.jsx(select.Select, {
+      control: form.control,
+      label: t("windsorFramework.movementIndicator"),
+      name: "advancedOptions.windsorFrameworkDetails.movementIndicator",
+      options: movementIndicatorOptions,
+      shouldUnregister: true
+    }), jsxRuntime.jsxs("div", Object.assign({
+      css: windsorFramework_styles.styles.notAtRiskContainer
+    }, {
+      children: [jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+        ariaLabel: "Is the shipment at risk",
+        checkboxLabel: t("windsorFramework.notAtRisk"),
+        control: form.control,
+        disabled: movementIndicator !== "b2b" || !movementIndicator,
+        label: "notAtRisk",
+        name: "advancedOptions.windsorFrameworkDetails.notAtRisk",
+        shouldUnregister: true
+      }), jsxRuntime.jsx(giger.IconTooltip, Object.assign({
+        css: windsorFramework_styles.styles.notAtRiskToolTip,
+        icon: gigerTheme.IconNames.INFO_FILLED,
+        size: giger.IconSize.SIZE_MEDIUM
+      }, {
+        children: jsxRuntime.jsx("div", Object.assign({
+          css: windsorFramework_styles.styles.tooltipContainer
+        }, {
+          children: t("windsorFramework.notAtRiskShipmentTootip")
+        }))
+      }))]
+    }))]
+  }));
+};
+
+exports.WindsorFramework = WindsorFramework;

package/cjs/elements/purchase-label/components/customs-forms/windsor-framework/windsor-framework.styles.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  notAtRiskContainer: theme => ({
+    display: "flex",
+    marginLeft: styles$1.scopeTheme(theme).spacing(14.625),
+    textAlign: "center",
+    width: styles$1.scopeTheme(theme).spacing(15.25)
+  }),
+  notAtRiskToolTip: theme => ({
+    color: styles$1.scopeTheme(theme).palette.info.main,
+    marginLeft: styles$1.scopeTheme(theme).spacing(0.5)
+  }),
+  tooltipContainer: () => ({
+    textAlign: "left",
+    width: 200
+  }),
+  windsorFrameworkContainer: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+
+exports.styles = styles;

package/cjs/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.cjs

@@ -0,0 +1,295 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useBalanceServices = require('../../../../hooks/use-balance-services.cjs');
+var useReplaceSupportEmail = require('../../../../hooks/use-replace-support-email.cjs');
+var money = require('../../../../utilities/money.cjs');
+var rates = require('../../../../utilities/rates.cjs');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var fundAndPurchase_styles = require('./fund-and-purchase.styles.cjs');
+var rateDetails = require('../../../../components/rate-details/rate-details.cjs');
+var addFundsForm = require('../../../../components/forms/add-funds-form/add-funds-form.cjs');
+var spread = require('../../../../components/spread/spread.cjs');
+var carrierBalance = require('../../../../components/carrier-balance/carrier-balance.cjs');
+var linkAction = require('../../../../components/link-action/link-action.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+var inlineLabel = require('../../../../components/inline-label/inline-label.cjs');
+var buttonGroup = require('../../../../components/button-group/button-group.cjs');
+
+/**
+ * @internal
+ *
+ * # Fund And Purchase Component
+ *
+ * Fund and Purchase handles the label purchase submission UX, ensuring that a user
+ * has the necessary funds available and can add them if not. It allows a single button
+ * to submit the funding form followed by the purchase form.
+ *
+ * @see {@link FundAndPurchaseProps | The props that are passed into the `<FundAndPurchase />` component}
+ */
+const FundAndPurchase = ({
+  control,
+  currency,
+  disabled,
+  isFundingEnabled,
+  isInvalidatedByError,
+  onPurchase,
+  onSave,
+  onVatRegistrationComplete,
+  rateData,
+  showVatSettings
+}) => {
+  var _a, _b, _c;
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    errors,
+    isLoadingBalance,
+    addFundsMutation,
+    resetAddFundsMutationState,
+    fundingOrigin
+  } = useBalanceServices.useBalanceServices({
+    carrierId: (_a = rateData === null || rateData === void 0 ? void 0 : rateData.rate) === null || _a === void 0 ? void 0 : _a.carrierId
+  });
+  const {
+    isSubmitting: isRateFormSubmitting,
+    isValid: isRateFormValid
+  } = reactHookForm.useFormState({
+    control
+  });
+  const {
+    replaceEmailInString
+  } = useReplaceSupportEmail.useReplaceSupportEmail();
+  const {
+    rate,
+    isPreferredRate
+  } = rateData !== null && rateData !== void 0 ? rateData : {};
+  const isFundingRequired = (rate === null || rate === void 0 ? void 0 : rate.balance) !== undefined && !!rate.requiresFundedAmount;
+  const purchaseAmount = rates.getTotalRateAmount(rate);
+  const [isSavingRate, setIsSavingRate] = React.useState(false);
+  const [isSavingError, setIsSavingError] = React.useState(false);
+  const purchaseRequiresAddingFunds = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError;
+  const [isFormManuallyToggled, setIsFormManuallyToggled] = React.useState(false);
+  const isAddFundsFormOpen = purchaseRequiresAddingFunds || isFormManuallyToggled;
+  const toggleAddFundsForm = () => {
+    if (!purchaseRequiresAddingFunds) {
+      // If the label can be purchased without adding funds, allow manual toggling of the form
+      setIsFormManuallyToggled(!isFormManuallyToggled);
+    } else if (isFormManuallyToggled) {
+      // If the form is already open, close it
+      setIsFormManuallyToggled(false);
+    }
+  };
+  React.useEffect(() => {
+    resetAddFundsMutationState();
+  }, [isAddFundsFormOpen, resetAddFundsMutationState]);
+  const handleSaveRate = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    setIsSavingRate(true);
+    setIsSavingError(false);
+    try {
+      yield onSave === null || onSave === void 0 ? void 0 : onSave();
+    } catch (e) {
+      setIsSavingError(true);
+    } finally {
+      setIsSavingRate(false);
+    }
+  });
+  const renderActionButtons = (addFundsForm = {}) => {
+    const disableSaveButton = disabled || !rate || isPreferredRate && !isRateFormValid || addFundsForm.isSubmitting || isRateFormSubmitting;
+    const disablePurchaseButton = disabled || !rate && !isPreferredRate || !isRateFormValid || isFundingEnabled && isFundingRequired && isAddFundsFormOpen && addFundsForm.isSubmitted && !addFundsForm.isValid;
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [isSavingError && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+          title: t("purchase-label:errorMessages.saveRateFailedTitle"),
+          type: giger.NotificationType.ERROR
+        }, {
+          children: jsxRuntime.jsx(giger.Typography, {
+            children: t("purchase-label:errorMessages.saveRateFailedMessage")
+          })
+        })), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        })]
+      }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+        breakpoint: "mobileLarge",
+        justify: "end"
+      }, {
+        children: [onSave && jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          css: fundAndPurchase_styles.styles.saveRateButton,
+          disabled: disableSaveButton,
+          isLoading: isSavingRate,
+          onClick: handleSaveRate,
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("purchase-label:actions.saveRate")
+        })), jsxRuntime.jsx(giger.Button, Object.assign({
+          "data-testid": "submit-fund-and-purchase",
+          disabled: disablePurchaseButton,
+          isLoading: addFundsForm.isSubmitting || isRateFormSubmitting,
+          onClick: isAddFundsFormOpen ? addFundsForm.submit : onPurchase
+        }, {
+          children: isAddFundsFormOpen ? t("manage-funding:actions.addFundsAndPurchase") : t("purchase-label:actions.purchaseNow")
+        }))]
+      }))]
+    });
+  };
+  // Render when no rate has been selected yet. Defaults to funding source balance or "----" zero state if no funding source is available.
+  if (!rate) {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsxs(spread.Spread, {
+        children: [jsxRuntime.jsx(carrierBalance.CarrierBalance, {
+          balance: fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance,
+          currency: currency,
+          isLoading: isLoadingBalance
+        }), isFundingEnabled ? jsxRuntime.jsx(linkAction.LinkAction, {
+          icon: "add",
+          isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
+          onClick: toggleAddFundsForm,
+          title: t("manage-funding:actions.addFunds")
+        }) : null]
+      }), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      }), renderActionButtons()]
+    });
+  } else {
+    /**
+     * If the selected rate is a preferred rate, we won't be able to show a balance.
+     * Instead, we'll show the funding source balance, until the user either purchases or saves the rate.
+     * During purchase or save, the callback functions to handle preferred rates will be called,
+     * and the shipment will bw re-rated with the new service attached to the users account.
+     */
+    if (isPreferredRate) {
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [showVatSettings && !!rate.rateDetails.length && jsxRuntime.jsx(rateDetails.RateDetails, {
+          onVatRegistrationComplete: onVatRegistrationComplete,
+          rateDetails: rate.rateDetails,
+          registerVatAllowed: true
+        }), jsxRuntime.jsx(carrierBalance.CarrierBalance, {
+          balance: fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance,
+          currency: currency,
+          isLoading: isLoadingBalance
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        }), renderActionButtons()]
+      });
+    }
+    // A rate has been selected. Show the balance and add funds form if walleted carrier with funding enabled
+    if (rate.requiresFundedAmount) {
+      // Satisfy TS. Error is throw before we get to this point.
+      const balance = (_b = fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== null && _b !== void 0 ? _b : 0;
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [showVatSettings && !!rate.rateDetails.length && jsxRuntime.jsx(rateDetails.RateDetails, {
+          onVatRegistrationComplete: onVatRegistrationComplete,
+          rateDetails: rate.rateDetails,
+          registerVatAllowed: true
+        }), jsxRuntime.jsxs(spread.Spread, {
+          children: [jsxRuntime.jsx(carrierBalance.CarrierBalance, {
+            balance: balance,
+            currency: currency,
+            isLoading: isLoadingBalance
+          }), isFundingEnabled && jsxRuntime.jsx(linkAction.LinkAction, {
+            icon: "add",
+            isDisabled: isAddFundsFormOpen || isRateFormSubmitting,
+            onClick: toggleAddFundsForm,
+            title: t("manage-funding:actions.addFunds")
+          })]
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        }), balance < 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+            title: t("manage-funding:fundAndPurchase.negativeBalanceTitle"),
+            type: giger.NotificationType.ALERT
+          }, {
+            children: t("manage-funding:fundAndPurchase.negativeBalance")
+          })), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          })]
+        }), isAddFundsFormOpen ? jsxRuntime.jsx(addFundsForm.AddFundsForm, Object.assign({
+          addFunds: addFundsMutation,
+          addFundsError: errors.addFundsErrors,
+          balance: balance,
+          currency: currency,
+          minimumAmount: purchaseAmount - balance,
+          onSuccess: () => {
+            setIsFormManuallyToggled(false);
+            onPurchase();
+          }
+        }, {
+          children: addFundsForm => {
+            var _a, _b;
+            return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsxs("section", Object.assign({
+                css: fundAndPurchase_styles.styles.getFormExtension(addFundsForm.isCustomAmount)
+              }, {
+                children: [jsxRuntime.jsx(inlineLabel.InlineLabel, Object.assign({
+                  label: t("manage-funding:fundAndPurchase.newBalance")
+                }, {
+                  children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                    css: fundAndPurchase_styles.styles.balanceText
+                  }, {
+                    children: money.formatMoney({
+                      amount: (balance !== null && balance !== void 0 ? balance : 0) + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
+                      currency
+                    })
+                  }))
+                })), jsxRuntime.jsx(inlineLabel.InlineLabel, Object.assign({
+                  label: t("manage-funding:fundAndPurchase.finalBalance")
+                }, {
+                  children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                    css: fundAndPurchase_styles.styles.balanceText
+                  }, {
+                    children: money.formatMoney({
+                      amount: (balance !== null && balance !== void 0 ? balance : 0) + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
+                      currency
+                    })
+                  }))
+                })), (balance !== null && balance !== void 0 ? balance : 0) >= purchaseAmount && jsxRuntime.jsx(buttonGroup.ButtonGroup, Object.assign({
+                  justify: "end"
+                }, {
+                  children: jsxRuntime.jsx(giger.Button, Object.assign({
+                    disabled: addFundsForm.isSubmitting || isRateFormSubmitting,
+                    onClick: () => setIsFormManuallyToggled(false),
+                    variant: giger.ButtonVariant.TEXT
+                  }, {
+                    children: t("actions.cancel")
+                  }))
+                }))]
+              })), jsxRuntime.jsx(spacer.Spacer, {
+                multiplier: 2
+              }), addFundsForm.error && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+                  title: t("manage-funding:addFunds.error.title"),
+                  type: giger.NotificationType.ERROR
+                }, {
+                  children: replaceEmailInString(addFundsForm.error[0].message)
+                })), jsxRuntime.jsx(spacer.Spacer, {
+                  multiplier: 2
+                })]
+              }), renderActionButtons(addFundsForm)]
+            });
+          }
+        }), purchaseAmount) : renderActionButtons()]
+      });
+    } else {
+      // The selected rate is not Walleted, show BYOC message instead of balance
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Typography, {
+          children: t("manage-funding:byoc.invoiceNotification", {
+            carrierNickname: (_c = rate.carrierNickname) !== null && _c !== void 0 ? _c : rate.carrierFriendlyName
+          })
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        }), renderActionButtons()]
+      });
+    }
+  }
+};
+
+exports.FundAndPurchase = FundAndPurchase;

package/cjs/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.styles.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  balanceText: theme => ({
+    color: styles$1.scopeTheme(theme).palette.secondary.dark
+  }),
+  container: theme => ({
+    padding: `${styles$1.scopeTheme(theme).spacing(3)}px ${styles$1.scopeTheme(theme).spacing(4)}px`
+  }),
+  getFormExtension: isCustomAmount => theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    // Negative margin is to compensate for the padding on AddFundsForm, since we want this
+    // section to seemlessly extend the form's well.
+    marginTop: styles$1.scopeTheme(theme).spacing(isCustomAmount ? -1.5 : -1),
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    paddingTop: 0
+  }),
+  saveRateButton: {
+    whiteSpace: "nowrap"
+  }
+});
+
+exports.styles = styles;

package/cjs/elements/purchase-label/components/fund-and-purchase/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fundAndPurchase = require('./fund-and-purchase.cjs');
+
+
+
+exports.FundAndPurchase = fundAndPurchase.FundAndPurchase;