@shipengine/elements 0.26.7 → 0.26.12

package/index.cjs

@@ -10805,8 +10805,10 @@ const styles$9 = createStyles({
 });
 
 const CarrierBalance = ({
+  balance,
   carrierId
 }) => {
+  var _a;
   const {
     t
   } = reactI18next.useTranslation();
@@ -10815,16 +10817,16 @@ const CarrierBalance = ({
     isLoading: isLoadingCarrier,
     isRefetching: isRefetchingCarrier
   } = alchemy.useGetCarrierById(carrierId);
-  const balance = carrier === null || carrier === void 0 ? void 0 : carrier.balance;
+  const carrierBalance = (_a = carrier === null || carrier === void 0 ? void 0 : carrier.balance) !== null && _a !== void 0 ? _a : balance;
   return jsxRuntime.jsx(InlineLabel, Object.assign({
     label: t("manage-funding:currentBalance")
   }, {
     children: isLoadingCarrier || isRefetchingCarrier ? jsxRuntime.jsx(giger.Spinner, {}) : jsxRuntime.jsx(giger.Typography, Object.assign({
       bold: true,
-      css: styles$9.getBalanceText(balance)
+      css: styles$9.getBalanceText(carrierBalance)
     }, {
-      children: balance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
-        amount: balance,
+      children: carrierBalance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
+        amount: carrierBalance,
         currency: alchemy.SE.Currency.USD
       })
     }))
@@ -10872,6 +10874,7 @@ const styles$8 = createStyles({
  * to submit the funding form followed by the purchase form.
  */
 const FundAndPurchase = ({
+  balance: uspsBalance,
   carrierId,
   className,
   control,
@@ -10947,13 +10950,23 @@ const FundAndPurchase = ({
       }))]
     }))]
   });
-  // Render: not a walleted carrier;
-  //         don't show balance or funding form
-  if (!isFundingRequired) return jsxRuntime.jsx("div", Object.assign({
+  // render when no rate has been selected yet
+  if (!carrierId) return jsxRuntime.jsxs("div", Object.assign({
     className: className,
     css: styles$8.container
   }, {
-    children: renderActionButtons()
+    children: [jsxRuntime.jsxs(Spread, {
+      children: [jsxRuntime.jsx(CarrierBalance, {
+        balance: uspsBalance
+      }), isFundingEnabled ? jsxRuntime.jsx(LinkAction, {
+        icon: "add",
+        isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      }) : null]
+    }), jsxRuntime.jsx(Spacer, {
+      multiplier: 2
+    }), renderActionButtons()]
   }));
   if (isLoadingCarrier) return jsxRuntime.jsx(Loader, {
     message: t("loading.carrier")
@@ -11652,6 +11665,10 @@ const RateForm = ({
       }, 0);
     }
   }, [form, rateOptions, errors === null || errors === void 0 ? void 0 : errors.length]);
+  const balance = React.useMemo(() => {
+    var _a;
+    return (_a = carriers === null || carriers === void 0 ? void 0 : carriers.find(carrier => carrier.carrierCode === "usps")) === null || _a === void 0 ? void 0 : _a.balance;
+  }, [carriers]);
   return jsxRuntime.jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -11717,6 +11734,7 @@ const RateForm = ({
         display: "purchase"
       })
     })), jsxRuntime.jsx(FundAndPurchase, {
+      balance: balance,
       carrierId: selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId,
       control: form.control,
       css: styles$4.fundAndPurchase,

package/index.js

@@ -10773,8 +10773,10 @@ const styles$9 = createStyles({
 });
 
 const CarrierBalance = ({
+  balance,
   carrierId
 }) => {
+  var _a;
   const {
     t
   } = useTranslation();
@@ -10783,16 +10785,16 @@ const CarrierBalance = ({
     isLoading: isLoadingCarrier,
     isRefetching: isRefetchingCarrier
   } = useGetCarrierById(carrierId);
-  const balance = carrier === null || carrier === void 0 ? void 0 : carrier.balance;
+  const carrierBalance = (_a = carrier === null || carrier === void 0 ? void 0 : carrier.balance) !== null && _a !== void 0 ? _a : balance;
   return jsx(InlineLabel, Object.assign({
     label: t("manage-funding:currentBalance")
   }, {
     children: isLoadingCarrier || isRefetchingCarrier ? jsx(Spinner, {}) : jsx(Typography, Object.assign({
       bold: true,
-      css: styles$9.getBalanceText(balance)
+      css: styles$9.getBalanceText(carrierBalance)
     }, {
-      children: balance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
-        amount: balance,
+      children: carrierBalance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
+        amount: carrierBalance,
         currency: SE.Currency.USD
       })
     }))
@@ -10840,6 +10842,7 @@ const styles$8 = createStyles({
  * to submit the funding form followed by the purchase form.
  */
 const FundAndPurchase = ({
+  balance: uspsBalance,
   carrierId,
   className,
   control,
@@ -10915,13 +10918,23 @@ const FundAndPurchase = ({
       }))]
     }))]
   });
-  // Render: not a walleted carrier;
-  //         don't show balance or funding form
-  if (!isFundingRequired) return jsx("div", Object.assign({
+  // render when no rate has been selected yet
+  if (!carrierId) return jsxs("div", Object.assign({
     className: className,
     css: styles$8.container
   }, {
-    children: renderActionButtons()
+    children: [jsxs(Spread, {
+      children: [jsx(CarrierBalance, {
+        balance: uspsBalance
+      }), isFundingEnabled ? jsx(LinkAction, {
+        icon: "add",
+        isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      }) : null]
+    }), jsx(Spacer, {
+      multiplier: 2
+    }), renderActionButtons()]
   }));
   if (isLoadingCarrier) return jsx(Loader, {
     message: t("loading.carrier")
@@ -11620,6 +11633,10 @@ const RateForm = ({
       }, 0);
     }
   }, [form, rateOptions, errors === null || errors === void 0 ? void 0 : errors.length]);
+  const balance = useMemo(() => {
+    var _a;
+    return (_a = carriers === null || carriers === void 0 ? void 0 : carriers.find(carrier => carrier.carrierCode === "usps")) === null || _a === void 0 ? void 0 : _a.balance;
+  }, [carriers]);
   return jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -11685,6 +11702,7 @@ const RateForm = ({
         display: "purchase"
       })
     })), jsx(FundAndPurchase, {
+      balance: balance,
       carrierId: selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId,
       control: form.control,
       css: styles$4.fundAndPurchase,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.26.7",
+  "version": "0.26.12",
   "typedoc": {
     "entryPoint": "./src/index.ts",
     "readmeFile": "../../README.md",

package/src/components/carrier-balance/carrier-balance.d.ts

@@ -1,4 +1,5 @@
 export type CarrierBalanceProps = {
-    carrierId: string;
+    balance?: number;
+    carrierId?: string;
 };
-export declare const CarrierBalance: ({ carrierId }: CarrierBalanceProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CarrierBalance: ({ balance, carrierId }: CarrierBalanceProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/components/fund-and-purchase/fund-and-purchase.d.ts

@@ -1,5 +1,6 @@
 import { Control } from "react-hook-form";
 export type FundAndPurchaseProps = {
+    balance?: number;
     carrierId?: string;
     className?: string;
     control: Control<any, any>;
@@ -15,4 +16,4 @@ export type FundAndPurchaseProps = {
  * 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.
  */
-export declare const FundAndPurchase: ({ carrierId, className, control, disabled, isFundingEnabled, isFundingRequired, onSave, purchaseAmount, onPurchase, }: FundAndPurchaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FundAndPurchase: ({ balance: uspsBalance, carrierId, className, control, disabled, isFundingEnabled, isFundingRequired, onSave, purchaseAmount, onPurchase, }: FundAndPurchaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;