@shipengine/elements 2.18.0 → 2.20.0

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

@@ -0,0 +1,169 @@
+import { __awaiter } from 'tslib';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { useNestedForm } from '../../../../../hooks/use-nested-form.js';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Grid, GridChild, Typography, IconTooltip, IconSize, Link, InlineNotification, NotificationType } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { FormID, TaxIdForm } from './tax-id-form.js';
+import { TaxIdList } from './tax-id-list.js';
+import { styles } from './tax-ids.styles.js';
+import { Actions } from '../../../../../components/actions-menu/actions-menu.js';
+
+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
+  } = useTranslation(["purchase-label", "common"]);
+  const [indexLoading, setIndexLoading] = useState();
+  const [taxIdToEdit, setTaxIdToEdit] = useState();
+  const [taxIdUpdateError, setTaxIdUpdateError] = useState();
+  const updateShipmentTaxIdentifiersAPIUpdate = useCallback(taxIds => __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 = useCallback(values => __awaiter(void 0, void 0, void 0, function* () {
+    yield updateShipmentTaxIdentifiersAPIUpdate([...(shipment.taxIdentifiers || []), mapTaxIdFormValuesToApi(values)]);
+  }), [shipment.taxIdentifiers, updateShipmentTaxIdentifiersAPIUpdate]);
+  const handleTaxIdUpdate = useCallback(values => __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 = useCallback(values => __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(TaxIdForm, {
+    formId: FormID,
+    onSubmit: handleFormSubmit,
+    taxIdToEdit: taxIdToEdit === null || taxIdToEdit === void 0 ? void 0 : taxIdToEdit.tax
+  });
+  const handleActionsClick = selectedIndex => action => __awaiter(void 0, void 0, void 0, function* () {
+    var _c, _d;
+    switch (action) {
+      case 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 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 jsxs(Fragment, {
+    children: [jsxs(Grid, Object.assign({
+      css: styles.section,
+      noPadding: true
+    }, {
+      children: [jsx(GridChild, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxs("div", Object.assign({
+          css: styles.addTaxIdTitleWrapper
+        }, {
+          children: [jsx(Typography, Object.assign({
+            bold: true
+          }, {
+            children: t("customs.taxIds.sectionTitle")
+          })), jsx(IconTooltip, Object.assign({
+            css: styles.iconTooltip,
+            icon: IconNames.INFO_FILLED,
+            size: IconSize.SIZE_MEDIUM
+          }, {
+            children: jsx("div", Object.assign({
+              css: styles.tooltipContainer
+            }, {
+              children: t("customs.taxIds.sectionTitleTooltip")
+            }))
+          }))]
+        }))
+      })), jsx(GridChild, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxs(Link, Object.assign({
+          css: [styles.addTaxIdLink, taxIdFormOpen && styles.addTaxIdLinkOpened],
+          onClick: handleAddTaxIdClick,
+          onKeyDown: e => {
+            if (e.key === "Enter") {
+              handleAddTaxIdClick();
+            }
+          },
+          role: "button",
+          tabIndex: 0
+        }, {
+          children: ["+ ", t("customs.taxIds.addTaxId")]
+        }))
+      }))]
+    })), jsxs(Grid, Object.assign({
+      noPadding: true
+    }, {
+      children: [((_a = shipment.taxIdentifiers) === null || _a === void 0 ? void 0 : _a.length) && jsx(GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsx(TaxIdList, {
+          handleActionsClick: handleActionsClick,
+          itemIndexLoading: indexLoading,
+          taxIdItems: shipment.taxIdentifiers
+        })
+      })), taxIdUpdateError && jsx(GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsx(InlineNotification, Object.assign({
+          title: "Error saving Tax ID",
+          type: NotificationType.ERROR
+        }, {
+          children: taxIdUpdateError
+        }))
+      })), taxIdFormOpen && jsx(GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsx("section", Object.assign({
+          css: styles.taxIdFormSection
+        }, {
+          children: taxableIdsForm
+        }))
+      }))]
+    }))]
+  });
+};
+
+export { TaxIds };

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

@@ -0,0 +1,77 @@
+import { createStyles, scopeTheme } from '../../../../../utilities/styles.js';
+
+const styles = createStyles({
+  addTaxIdLink: theme => ({
+    alignSelf: "end",
+    fontWeight: scopeTheme(theme).typography.fontWeight.normal
+  }),
+  addTaxIdLinkOpened: theme => ({
+    ":hover": {
+      color: scopeTheme(theme).palette.gray.main
+    },
+    color: scopeTheme(theme).palette.gray.main
+  }),
+  addTaxIdTitleWrapper: () => ({
+    alignItems: "center",
+    display: "flex"
+  }),
+  iconTooltip: theme => ({
+    color: scopeTheme(theme).palette.info.main,
+    marginLeft: scopeTheme(theme).spacing(0.5)
+  }),
+  section: theme => ({
+    marginBottom: scopeTheme(theme).spacing(2)
+  }),
+  taxIdFormSection: theme => ({
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    padding: 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 ${scopeTheme(theme).palette.gray.dark}`,
+    borderRadius: scopeTheme(theme).borderRadius.S,
+    display: "flex",
+    justifyContent: "space-between",
+    padding: scopeTheme(theme).spacing(2)
+  }),
+  taxIdListItemAuthorityTag: theme => ({
+    marginRight: scopeTheme(theme).spacing()
+  }),
+  taxIdListItemAuthorityText: theme => ({
+    color: scopeTheme(theme).palette.gray.main
+  }),
+  taxIdListItemAuthorityWrapper: () => ({
+    alignItems: "center",
+    display: "flex"
+  }),
+  taxIdListItemIdentifier: theme => ({
+    marginRight: scopeTheme(theme).spacing()
+  }),
+  tooltipContainer: () => ({
+    textAlign: "left",
+    width: 200
+  }),
+  tooltipList: theme => ({
+    paddingLeft: scopeTheme(theme).spacing(3)
+  })
+});
+
+export { styles };

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

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { IconTooltip, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './windsor-framework.styles.js';
+import { useMovementIndicatorOptions } from '../../../hooks/use-movement-indicator-options.js';
+import { Select } from '../../../../../components/field/select/select.js';
+import { CheckboxInput } from '../../../../../components/field/checkbox-input/checkbox-input.js';
+
+const WindsorFramework = ({
+  form
+}) => {
+  const {
+    t
+  } = useTranslation(["purchase-label", "common"]);
+  const movementIndicatorOptions = useMovementIndicatorOptions();
+  const movementIndicator = form.watch("advancedOptions.windsorFrameworkDetails.movementIndicator");
+  return jsxs("div", Object.assign({
+    css: styles.windsorFrameworkContainer
+  }, {
+    children: [jsx(Select, {
+      control: form.control,
+      label: t("windsorFramework.movementIndicator"),
+      name: "advancedOptions.windsorFrameworkDetails.movementIndicator",
+      options: movementIndicatorOptions,
+      shouldUnregister: true
+    }), jsxs("div", Object.assign({
+      css: styles.notAtRiskContainer
+    }, {
+      children: [jsx(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
+      }), jsx(IconTooltip, Object.assign({
+        css: styles.notAtRiskToolTip,
+        icon: IconNames.INFO_FILLED,
+        size: IconSize.SIZE_MEDIUM
+      }, {
+        children: jsx("div", Object.assign({
+          css: styles.tooltipContainer
+        }, {
+          children: t("windsorFramework.notAtRiskShipmentTootip")
+        }))
+      }))]
+    }))]
+  }));
+};
+
+export { WindsorFramework };

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

@@ -0,0 +1,24 @@
+import { createStyles, scopeTheme } from '../../../../../utilities/styles.js';
+
+const styles = createStyles({
+  notAtRiskContainer: theme => ({
+    display: "flex",
+    marginLeft: scopeTheme(theme).spacing(14.625),
+    textAlign: "center",
+    width: scopeTheme(theme).spacing(15.25)
+  }),
+  notAtRiskToolTip: theme => ({
+    color: scopeTheme(theme).palette.info.main,
+    marginLeft: scopeTheme(theme).spacing(0.5)
+  }),
+  tooltipContainer: () => ({
+    textAlign: "left",
+    width: 200
+  }),
+  windsorFrameworkContainer: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+
+export { styles };

package/esm/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.js

@@ -0,0 +1,281 @@
+import { __awaiter } from 'tslib';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { useBalanceServices } from '../../../../hooks/use-balance-services.js';
+import { useReplaceSupportEmail } from '../../../../hooks/use-replace-support-email.js';
+import { formatMoney } from '../../../../utilities/money.js';
+import { getTotalRateAmount } from '../../../../utilities/rates.js';
+import { useState, useEffect } from 'react';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, NotificationType, Typography, Button, ButtonVariant } from '@shipengine/giger';
+import { styles } from './fund-and-purchase.styles.js';
+import { RateDetails } from '../../../../components/rate-details/rate-details.js';
+import { AddFundsForm } from '../../../../components/forms/add-funds-form/add-funds-form.js';
+import { Spread } from '../../../../components/spread/spread.js';
+import { CarrierBalance } from '../../../../components/carrier-balance/carrier-balance.js';
+import { LinkAction } from '../../../../components/link-action/link-action.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { InlineLabel } from '../../../../components/inline-label/inline-label.js';
+import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+
+/**
+ * @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,
+  showVatSettings,
+  onSave,
+  onPurchase,
+  onVatRegistrationComplete,
+  isInvalidatedByError,
+  rateData
+}) => {
+  var _a, _b;
+  const {
+    t
+  } = useTranslation();
+  const {
+    errors,
+    isLoadingBalance,
+    addFundsMutation,
+    resetAddFundsMutationState,
+    fundingOrigin
+  } = useBalanceServices();
+  const {
+    isSubmitting: isRateFormSubmitting,
+    isValid: isRateFormValid
+  } = useFormState({
+    control
+  });
+  const {
+    replaceEmailInString
+  } = 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 = getTotalRateAmount(rate);
+  const [isSavingRate, setIsSavingRate] = useState(false);
+  const [isSavingError, setIsSavingError] = useState(false);
+  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(() => {
+    var _a;
+    return (_a = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError) !== null && _a !== void 0 ? _a : false;
+  });
+  useEffect(() => {
+    resetAddFundsMutationState();
+  }, [isAddFundsFormOpen, resetAddFundsMutationState]);
+  const handleSaveRate = () => __awaiter(void 0, void 0, void 0, function* () {
+    setIsSavingRate(true);
+    setIsSavingError(false);
+    try {
+      yield 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 jsxs(Fragment, {
+      children: [isSavingError && jsxs(Fragment, {
+        children: [jsx(InlineNotification, Object.assign({
+          title: t("purchase-label:errorMessages.saveRateFailedTitle"),
+          type: NotificationType.ERROR
+        }, {
+          children: jsx(Typography, {
+            children: t("purchase-label:errorMessages.saveRateFailedMessage")
+          })
+        })), jsx(Spacer, {
+          multiplier: 2
+        })]
+      }), jsxs(ButtonGroup, Object.assign({
+        breakpoint: "mobileLarge",
+        justify: "end"
+      }, {
+        children: [jsx(Button, Object.assign({
+          bold: false,
+          css: styles.saveRateButton,
+          disabled: disableSaveButton,
+          isLoading: isSavingRate,
+          onClick: handleSaveRate,
+          variant: ButtonVariant.OUTLINED
+        }, {
+          children: t("purchase-label:actions.saveRate")
+        })), jsx(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 jsxs(Fragment, {
+      children: [jsxs(Spread, {
+        children: [jsx(CarrierBalance, {
+          balance: fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance,
+          currency: currency,
+          isLoading: isLoadingBalance
+        }), isFundingEnabled ? jsx(LinkAction, {
+          icon: "add",
+          isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
+          onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+          title: t("manage-funding:actions.addFunds")
+        }) : null]
+      }), jsx(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 jsxs(Fragment, {
+        children: [showVatSettings && !!rate.rateDetails.length && jsx(RateDetails, {
+          onVatRegistrationComplete: onVatRegistrationComplete,
+          rateDetails: rate.rateDetails,
+          registerVatAllowed: true
+        }), jsx(CarrierBalance, {
+          balance: fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance,
+          currency: currency,
+          isLoading: isLoadingBalance
+        }), jsx(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 = (_a = fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== null && _a !== void 0 ? _a : 0;
+      return jsxs(Fragment, {
+        children: [showVatSettings && !!rate.rateDetails.length && jsx(RateDetails, {
+          onVatRegistrationComplete: onVatRegistrationComplete,
+          rateDetails: rate.rateDetails,
+          registerVatAllowed: true
+        }), jsxs(Spread, {
+          children: [jsx(CarrierBalance, {
+            balance: balance,
+            currency: currency,
+            isLoading: isLoadingBalance
+          }), isFundingEnabled && jsx(LinkAction, {
+            icon: "add",
+            isDisabled: isAddFundsFormOpen || isRateFormSubmitting,
+            onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+            title: t("manage-funding:actions.addFunds")
+          })]
+        }), jsx(Spacer, {
+          multiplier: 2
+        }), balance < 0 && jsxs(Fragment, {
+          children: [jsx(InlineNotification, Object.assign({
+            title: t("manage-funding:fundAndPurchase.negativeBalanceTitle"),
+            type: NotificationType.ALERT
+          }, {
+            children: t("manage-funding:fundAndPurchase.negativeBalance")
+          })), jsx(Spacer, {
+            multiplier: 2
+          })]
+        }), isAddFundsFormOpen ? jsx(AddFundsForm, Object.assign({
+          addFunds: addFundsMutation,
+          addFundsError: errors.addFundsErrors,
+          balance: balance,
+          currency: currency,
+          minimumAmount: purchaseAmount - balance,
+          onSuccess: () => {
+            setIsAddFundsFormOpen(false);
+            onPurchase();
+          }
+        }, {
+          children: addFundsForm => {
+            var _a, _b;
+            return jsxs(Fragment, {
+              children: [jsxs("section", Object.assign({
+                css: styles.getFormExtension(addFundsForm.isCustomAmount)
+              }, {
+                children: [jsx(InlineLabel, Object.assign({
+                  label: t("manage-funding:fundAndPurchase.newBalance")
+                }, {
+                  children: jsx(Typography, Object.assign({
+                    css: styles.balanceText
+                  }, {
+                    children: formatMoney({
+                      amount: (balance !== null && balance !== void 0 ? balance : 0) + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
+                      currency
+                    })
+                  }))
+                })), jsx(InlineLabel, Object.assign({
+                  label: t("manage-funding:fundAndPurchase.finalBalance")
+                }, {
+                  children: jsx(Typography, Object.assign({
+                    css: styles.balanceText
+                  }, {
+                    children: 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 && jsx(ButtonGroup, Object.assign({
+                  justify: "end"
+                }, {
+                  children: jsx(Button, Object.assign({
+                    disabled: addFundsForm.isSubmitting || isRateFormSubmitting,
+                    onClick: () => setIsAddFundsFormOpen(false),
+                    variant: ButtonVariant.TEXT
+                  }, {
+                    children: t("actions.cancel")
+                  }))
+                }))]
+              })), jsx(Spacer, {
+                multiplier: 2
+              }), addFundsForm.error && jsxs(Fragment, {
+                children: [jsx(InlineNotification, Object.assign({
+                  title: t("manage-funding:addFunds.error.title"),
+                  type: NotificationType.ERROR
+                }, {
+                  children: replaceEmailInString(addFundsForm.error[0].message)
+                })), jsx(Spacer, {
+                  multiplier: 2
+                })]
+              }), renderActionButtons(addFundsForm)]
+            });
+          }
+        }), purchaseAmount) : renderActionButtons()]
+      });
+    } else {
+      // The selected rate is not Walleted, show BYOC message instead of balance
+      return jsxs(Fragment, {
+        children: [jsx(Typography, {
+          children: t("manage-funding:byoc.invoiceNotification", {
+            carrierNickname: (_b = rate.carrierNickname) !== null && _b !== void 0 ? _b : rate.carrierFriendlyName
+          })
+        }), jsx(Spacer, {
+          multiplier: 2
+        }), renderActionButtons()]
+      });
+    }
+  }
+};
+
+export { FundAndPurchase };

package/esm/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.styles.js

@@ -0,0 +1,26 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  balanceText: theme => ({
+    color: scopeTheme(theme).palette.secondary.dark
+  }),
+  container: theme => ({
+    padding: `${scopeTheme(theme).spacing(3)}px ${scopeTheme(theme).spacing(4)}px`
+  }),
+  getFormExtension: isCustomAmount => theme => ({
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    display: "flex",
+    flexDirection: "column",
+    gap: 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: scopeTheme(theme).spacing(isCustomAmount ? -1.5 : -1),
+    padding: scopeTheme(theme).spacing(2),
+    paddingTop: 0
+  }),
+  saveRateButton: {
+    whiteSpace: "nowrap"
+  }
+});
+
+export { styles };

package/esm/elements/purchase-label/components/fund-and-purchase/index.js

@@ -0,0 +1 @@
+export { FundAndPurchase } from './fund-and-purchase.js';

package/esm/elements/purchase-label/components/index.js

@@ -0,0 +1,2 @@
+export { RateForm } from './rate-form/rate-form.js';
+export { ShipmentForm } from './shipment-form/shipment-form.js';

package/esm/elements/purchase-label/components/preset-descriptor/index.js

@@ -0,0 +1 @@
+export { PresetDescriptor } from './preset-descriptor.js';

package/esm/elements/purchase-label/components/preset-descriptor/preset-descriptor.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { formatDimensions } from '../../../../utilities/shipengine/dimensions.js';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, NotificationType } from '@shipengine/giger';
+import { styles } from './preset-descriptor.styles.js';
+
+const PresetDescriptor = preset => {
+  const {
+    t
+  } = useTranslation();
+  return jsx("div", Object.assign({
+    css: styles.containerStyles
+  }, {
+    children: jsxs("div", {
+      children: [jsxs("div", {
+        children: [jsx("span", Object.assign({
+          css: styles.presetNameStyles
+        }, {
+          children: preset.name
+        })), jsx("span", Object.assign({
+          css: styles.dimensionStyles
+        }, {
+          children: (preset.dimensions || preset.weight) && " - "
+        })), preset.dimensions && jsx("span", Object.assign({
+          css: styles.dimensionStyles
+        }, {
+          children: `${formatDimensions(preset.dimensions)} ` + t(`units.${preset.dimensions.unit}`)
+        }))]
+      }), jsx("div", Object.assign({
+        css: styles.serviceNameStyles
+      }, {
+        children: preset.serviceName && preset.serviceName
+      })), preset.serviceName && ["USPS Parcel Select Ground", "USPS First Class Mail"].includes(preset.serviceName) && jsx(InlineNotification, {
+        css: styles.warningStyles,
+        type: NotificationType.ALERT
+      })]
+    })
+  }));
+};
+
+export { PresetDescriptor };