@shipengine/elements 2.24.1 → 2.25.0

package/dist/esm/elements/purchase-label/components/rate-form/rate-form.js

@@ -3,7 +3,7 @@ import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useQueryClient } from '@tanstack/react-query';
 import { formLogger } from '../../../../utilities/form-logger.js';
 import { validationResolver } from '../../../../utilities/validation.js';
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { rateSchema } from './rate-schema.js';
@@ -62,19 +62,28 @@ const RateForm = ({
     defaultValues: {
       rate: {
         isAcknowledged: true,
-        rateId: undefined
+        rateId: undefined,
+        labelDisplayScheme: undefined
       }
     },
     mode: "onChange",
     resolver: validationResolver(rateSchema)
   });
+  const handlePaperlessAcknowledgementChange = useCallback((_usePaperlessLabel, labelDisplayScheme) => {
+    form.setValue("rate.labelDisplayScheme", labelDisplayScheme, {
+      shouldDirty: true
+    });
+  }, [form]);
   const {
     rateId: selectedRateId
   } = form.watch("rate");
   const handleSubmit = formLogger.capture(form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
-    const rateId = values;
+    const {
+      rateId,
+      labelDisplayScheme
+    } = values;
     try {
-      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId, selectedServicePoint);
+      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId, selectedServicePoint, labelDisplayScheme);
     } finally {
       // Invalidate carrier queries after the rate form is submitted, regardless of success.
       // This allows the carrier balance to refresh if the purchase failed but funding succeeded.
@@ -177,6 +186,7 @@ const RateForm = ({
         form: form,
         isCalculatingRates: isCalculatingRates,
         isSavingRate: isSavingRate,
+        onPaperlessAcknowledgementChange: handlePaperlessAcknowledgementChange,
         onSelectRate: rateId => {
           const selectedRate = rateOptions.find(r => r.rateId === rateId);
           if (selectedRate) {

package/dist/esm/elements/purchase-label/components/rate-form/rate-schema.js

@@ -1,10 +1,15 @@
 import { z } from 'zod';
 
+const labelDisplaySchemeEnum = z.enum(["label", "paperless", "qr_code", "label_and_paperless"]);
 const rateSchema = z.object({
   rate: z.object({
     isAcknowledged: z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
-    rateId: z.string()
+    rateId: z.string(),
+    labelDisplayScheme: labelDisplaySchemeEnum.optional()
   })
-}).transform(schema => schema.rate.rateId);
+}).transform(schema => ({
+  rateId: schema.rate.rateId,
+  labelDisplayScheme: schema.rate.labelDisplayScheme
+}));
 
 export { rateSchema };

package/dist/esm/elements/purchase-label/components/rate-form/rate-view.js

@@ -21,6 +21,7 @@ const RateView = ({
   form,
   isCalculatingRates,
   isSavingRate,
+  onPaperlessAcknowledgementChange,
   onSelectRate,
   preferredServiceCodes,
   pudoServicePointDetails = {
@@ -194,6 +195,7 @@ const RateView = ({
         label: "Rate",
         name: "rate",
         onClick: onSelectRate,
+        onPaperlessAcknowledgementChange: onPaperlessAcknowledgementChange,
         onSelectServicePoint: onSelectServicePoint,
         options: showHiddenRates ? expandedRateOptionList : collapsedRateOptionList
       }, rateSelectCommonProps)), expandedRateOptionList.length > COLLAPSED_RATE_VIEW_LIMIT && jsx(LinkAction, {

package/dist/esm/elements/purchase-label/hooks/use-rate-options.js

@@ -9,6 +9,22 @@ import { useWindsorFramework } from './use-windsor-framework.js';
 import { PudoType } from '../../../types/pudo.js';
 import { CanadaDeliveredDutyOptions } from '../../../types/canada-ddp.js';
 
+/* https://auctane.atlassian.net/browse/ENGINE-7329
+ * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
+ * carriersWithPaperless and servicesWithPaperless are hardcoded for iteration one
+ */
+const hermesPaperlessSupportedServices = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
+const paperlessSupportedCarriers = [{
+  carrier: "hermes",
+  services: hermesPaperlessSupportedServices,
+  displaySchemes: ["label_and_paperless"]
+}, {
+  carrier: "usps",
+  displaySchemes: ["qr_code"]
+}, {
+  carrier: "stamps_com",
+  displaySchemes: ["qr_code"]
+}];
 /**
  * @internal
  *
@@ -35,6 +51,17 @@ const useRateOptions = (rates, fundingOrigin, preferredRates, carriers, shipment
     var _a;
     return ((_a = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.canadaDeliveredDuty) === CanadaDeliveredDutyOptions.SENDER_PREPAY;
   }, [(_a = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.canadaDeliveredDuty]);
+  const buildSupportedLabelDisplaySchemes = (carrierCode, serviceCode) => {
+    const carrier = paperlessSupportedCarriers.find(c => c.carrier === carrierCode);
+    if (!carrier || carrier.services && !carrier.services.includes(serviceCode)) {
+      return [];
+    }
+    // Only return USPS/stamps_com display schemes for domestic shipments
+    if ((carrierCode === 'usps' || carrierCode === 'stamps_com') && isInternational) {
+      return [];
+    }
+    return [...carrier.displaySchemes];
+  };
   const rateOptionsFilters = useCallback(carrierCode => {
     return (
       // Filter out non-USPS carriers for Canada Delivered Duty prepaid shipments
@@ -57,7 +84,8 @@ const useRateOptions = (rates, fundingOrigin, preferredRates, carriers, shipment
       messages: r.rate.warningMessages,
       rateAcknowledgementMessage: r.rateAcknowledgementMessage,
       requiresAcknowledgement: !!r.rateAcknowledgementMessage,
-      requiresFundedAmount: false
+      requiresFundedAmount: false,
+      paperlessDisplaySchemes: buildSupportedLabelDisplaySchemes(r.rate.carrierCode, r.rate.serviceCode)
     }));
   }, [preferredRates, rateOptionsFilters]);
   const noRatesForServiceMessage = t("purchase-label:rates.noRateService");
@@ -73,7 +101,8 @@ const useRateOptions = (rates, fundingOrigin, preferredRates, carriers, shipment
         balance: fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance,
         messages: r.warningMessages,
         requiresAcknowledgement: getRateRequiresAcknowledgement(r.serviceCode, r.packageType, !!requireDhlTermsAcknowledgement),
-        requiresFundedAmount
+        requiresFundedAmount,
+        paperlessDisplaySchemes: buildSupportedLabelDisplaySchemes(r.carrierCode, r.serviceCode)
       });
       if (r.shippingAmount.amount === 0 && !r.warningMessages.includes(noRatesForServiceMessage)) {
         baseRateOption.messages.push(noRatesForServiceMessage);

package/dist/esm/elements/purchase-label/hooks/use-rates-form.js

@@ -12,11 +12,6 @@ import { useRatesWithCache } from './use-rates-with-cache.js';
 import { useServicePoints } from './use-service-points.js';
 import { useElements } from '../../../elements-provider/elements-context-provider.js';
 
-/* https://auctane.atlassian.net/browse/ENGINE-7329
- * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
- * carriersWithPaperless and servicesWithPaperless are hardcoded for iteration one
- */
-const servicesWithPaperless = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
 const useRatesForm = ({
   getPreferredRates,
   disabledShippingServices,
@@ -89,17 +84,11 @@ const useRatesForm = ({
     listServicePointsErrors,
     servicePointSearchQuery
   } = useServicePoints(ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.rates, shipment);
-  const isDisplaySchemePaperless = rate => {
-    if ("hermes" === rate.carrierCode) {
-      return !!servicesWithPaperless.find(service => service === rate.serviceCode);
-    }
-    return false;
-  };
-  const purchaseLabel = useCallback((rateId, shipment, rate, servicePoint) => __awaiter(void 0, void 0, void 0, function* () {
+  const purchaseLabel = useCallback((rateId, shipment, rate, servicePoint, displayScheme) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     try {
       const label = yield createLabel({
-        displayScheme: isDisplaySchemePaperless(rate) ? "label_and_paperless" : "label",
+        displayScheme: displayScheme !== null && displayScheme !== void 0 ? displayScheme : "label",
         labelDownloadType: "url",
         labelFormat: "pdf",
         labelLayout: (_a = printLabelLayout === null || printLabelLayout === void 0 ? void 0 : printLabelLayout.toLowerCase()) !== null && _a !== void 0 ? _a : "4x6",
@@ -112,8 +101,15 @@ const useRatesForm = ({
       } else {
         yield onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure(rate, shipment);
       }
-    } catch (_b) {
-      yield onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure(rate, shipment);
+    } catch (error) {
+      // Only return errors from the createLabel mutation in the callback
+      let callbackErrors;
+      if (Array.isArray(error)) {
+        if (error[0] instanceof SE.CodedError) {
+          callbackErrors = error;
+        }
+      }
+      yield onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure(rate, shipment, callbackErrors);
     }
   }), [createLabel, onLabelCreateFailure, onLabelCreateSuccess, printLabelLayout]);
   const onUpdatedShipment = useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
@@ -187,7 +183,7 @@ const useRatesForm = ({
       return;
     }
   }), [onBeforeRateSaved, onUpdatedShipment, resetRates, shipment, updateShipment]);
-  const handleSubmit = useCallback((rateId, servicePoint) => __awaiter(void 0, void 0, void 0, function* () {
+  const handleSubmit = useCallback((rateId, servicePoint, displayScheme) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d;
     setBeforeCreateError(undefined);
     if (!shipment) return;
@@ -235,12 +231,12 @@ const useRatesForm = ({
             });
             throw new Error("Insufficient funds. Please add funds before purchasing and try again.");
           } else {
-            yield purchaseLabel(rate.rateId, updatedShipment !== null && updatedShipment !== void 0 ? updatedShipment : shipment, rate, servicePoint);
+            yield purchaseLabel(rate.rateId, updatedShipment !== null && updatedShipment !== void 0 ? updatedShipment : shipment, rate, servicePoint, displayScheme);
             return;
           }
         }
         // The user has selected a standard rate and no further action is required before purchase
-        yield purchaseLabel(rateId, shipment, rate, servicePoint);
+        yield purchaseLabel(rateId, shipment, rate, servicePoint, displayScheme);
         return;
       } catch (e) {
         if (Array.isArray(e)) {

package/dist/esm/elements/purchase-label/hooks/use-request-rates.js

@@ -2,7 +2,7 @@ import { __awaiter } from '../../../_virtual/_tslib.js';
 import { useListCarriers, useListCustomPackageTypes, useCalculateRates } from '@shipengine/react-api';
 import { omitTime } from '../../../utilities/date.js';
 import { useCallback, useMemo } from 'react';
-import rateMessages from '../../../data/rate-messages.json.js';
+import { buildRateWarningMessages } from '../../../utilities/rate-warning-messages.js';
 import { useRequestPreferredRates } from './use-request-preferred-rates.js';
 import { isShippingServiceServiceDisabled } from '../../../utilities/feature-flags/utils.js';
 
@@ -89,26 +89,26 @@ const useRequestRates = ({
   }, [ratedShipment]);
   const ratesCalculating = getPreferredRates ? preferredRatesCalculating || standardRatesCalculating : standardRatesCalculating;
   ratesResponse = useMemo(() => ratesResponse && Object.assign(Object.assign({}, ratesResponse), {
-    rates: ratesResponse.rates.map(rate => {
-      var _a, _b, _c;
-      return Object.assign(Object.assign({}, rate), {
-        warningMessages: [
-        // add additional rateMessages based on combinations of serviceCode, packageType and shipDay
-        ...((_a = rateMessages[`${rate.serviceCode}:${shipDay}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages[`${rate.serviceCode}:${rate.packageType}`]) !== null && _b !== void 0 ? _b : []), ...((_c = rateMessages[rate.serviceCode]) !== null && _c !== void 0 ? _c : []), ...rate.warningMessages]
-      });
-    })
+    rates: ratesResponse.rates.map(rate => Object.assign(Object.assign({}, rate), {
+      warningMessages: buildRateWarningMessages({
+        serviceCode: rate.serviceCode,
+        packageType: rate.packageType,
+        shipDay,
+        existingWarningMessages: rate.warningMessages
+      })
+    }))
   }), [ratesResponse, shipDay]);
-  const preferredRatesResponse = useMemo(() => preferredResponse && preferredResponse.map(r => {
-    var _a, _b, _c;
-    return {
-      rate: Object.assign(Object.assign({}, r.rate), {
-        warningMessages: [
-        // add additional rateMessages based on combinations of serviceCode, packageType and shipDay
-        ...((_a = rateMessages[`${r.rate.serviceCode}:${shipDay}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages[`${r.rate.serviceCode}:${r.rate.packageType}`]) !== null && _b !== void 0 ? _b : []), ...((_c = rateMessages[r.rate.serviceCode]) !== null && _c !== void 0 ? _c : []), ...r.rate.warningMessages]
-      }),
-      rateAcknowledgementMessage: r.rateAcknowledgementMessage
-    };
-  }), [preferredResponse, shipDay]);
+  const preferredRatesResponse = useMemo(() => preferredResponse && preferredResponse.map(r => ({
+    rate: Object.assign(Object.assign({}, r.rate), {
+      warningMessages: buildRateWarningMessages({
+        serviceCode: r.rate.serviceCode,
+        packageType: r.rate.packageType,
+        shipDay,
+        existingWarningMessages: r.rate.warningMessages
+      })
+    }),
+    rateAcknowledgementMessage: r.rateAcknowledgementMessage
+  })), [preferredResponse, shipDay]);
   return {
     isCalculating: ratesCalculating,
     preferredRatesResponse,

package/dist/esm/elements/purchase-label/purchase-label.js

@@ -63,7 +63,8 @@ const Component = _a => {
     salesOrder,
     refetchPendingSalesOrderShipments,
     isLoading,
-    errors
+    errors,
+    createNewShipmentForNotFound
   } = useConfigureShipment({
     errorWhenShipmentCancelled: features === null || features === void 0 ? void 0 : features.enableErrorWhenShipmentCancelled,
     externalOrderId,
@@ -90,6 +91,8 @@ const Component = _a => {
     data: shipment || salesOrder,
     errors: errors,
     isLoading: isLoading || insuranceIsLoading,
+    onCreateNewShipment: createNewShipmentForNotFound,
+    shipmentId: shipmentId,
     children: jsx(ConfigureShipment, Object.assign({
       currency: currency,
       features: features,

package/dist/esm/elements/shipment-summary/components/label-display/label-card.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useToggle } from '../../../../hooks/use-toggle.js';
-import { Next, ButtonVariant, Icon, IconSize, Typography, Tag } from '@shipengine/giger';
+import { Icon, IconSize, Tag, Next, Typography } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { formatDateDDMMYY } from '../../../../utilities/date.js';
 import { trackingStatusFormatter } from '../../../../utilities/tracking-formatter.js';
-import { useRef } from 'react';
+import { useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { styles } from './label-card.styles.js';
+import { PaperlessLabelDisplay } from './paperless-label-display.js';
 import { ServiceCardContainer, ServiceCardHeader, ServiceCardFooter } from '../../../../components/service-card/service-card.js';
 import { InsurancePopover } from '../../../../components/insurance-popover/insurance-popover.js';
 import { useElements } from '../../../../elements-provider/elements-context-provider.js';
@@ -44,7 +45,8 @@ const LabelCard = ({
     trackable = undefined,
     trackingNumber = undefined,
     trackingStatus = undefined,
-    trackingUrl = undefined
+    trackingUrl = undefined,
+    qrCodeDownload = undefined
   } = !displayAsVoided ? label : {};
   const carrierCode = carrier === null || carrier === void 0 ? void 0 : carrier.carrierCode;
   const carrierFriendlyName = carrier === null || carrier === void 0 ? void 0 : carrier.friendlyName;
@@ -142,6 +144,18 @@ const LabelCard = ({
     shippingAmount,
     showExtendedData: selected
   };
+  const paperlessDownloadProps = useMemo(() => {
+    // USPS paperless labels populate the qrCodeDownload property instead of paperlessDownload, use qrCodeDownload href if available and paperlessDownload is empty
+    if (!paperlessDownload || Object.keys(paperlessDownload).length === 0) {
+      if (qrCodeDownload && qrCodeDownload.href) {
+        return {
+          href: qrCodeDownload.href
+        };
+      }
+      return undefined;
+    }
+    return paperlessDownload;
+  }, [paperlessDownload, qrCodeDownload]);
   return jsxs(ServiceCardContainer, {
     selected: selected,
     voided: displayAsVoided,
@@ -158,36 +172,7 @@ const LabelCard = ({
       },
       voided: displayAsVoided,
       children: trackable && jsx(TrackingNumberDisplay, {})
-    }), paperlessDownload && jsxs("div", {
-      css: styles.paperlessDownloadwrapper,
-      children: [jsxs("div", {
-        css: styles.codewrapper,
-        children: [jsx("img", {
-          alt: "paperless code",
-          css: styles.codeImage,
-          src: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.href
-        }), jsx("div", {
-          css: styles.handoffCode,
-          children: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.handoffCode.toString()
-        }), jsxs(Next.Link, {
-          buttonProps: {
-            variant: ButtonVariant.OUTLINED
-          },
-          css: styles.button,
-          download: true,
-          href: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.href,
-          isButton: true,
-          children: [jsx(Icon, {
-            name: IconNames.PRINTER,
-            size: IconSize.SIZE_SMALL
-          }), jsx("span", {
-            children: t("view-shipment:actions.download")
-          })]
-        })]
-      }), jsx(Typography, {
-        children: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.instructions
-      })]
-    }), showFooter && jsx(ServiceCardFooter, {
+    }), paperlessDownloadProps && "href" in paperlessDownloadProps && jsx(PaperlessLabelDisplay, Object.assign({}, paperlessDownloadProps)), showFooter && jsx(ServiceCardFooter, {
       messages: labelMessages
     })]
   });

package/dist/esm/elements/shipment-summary/components/label-display/label-card.styles.js

@@ -1,31 +1,12 @@
 import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
 
 const styles = createStyles({
-  button: () => ({
-    cursor: "pointer"
-  }),
-  codeImage: () => ({
-    height: "120px",
-    maxWidth: "200px",
-    width: "auto"
-  }),
-  codewrapper: () => ({
-    alignItems: "center",
-    display: "flex",
-    flexDirection: "column"
-  }),
-  handoffCode: theme => ({
-    margin: `${scopeTheme(theme).spacing(2)}px 0`
-  }),
   insuranceInfoIcon: theme => ({
     ":hover": {
       cursor: "pointer"
     },
     marginLeft: scopeTheme(theme).spacing(0.5)
   }),
-  paperlessDownloadwrapper: theme => ({
-    padding: scopeTheme(theme).spacing(2)
-  }),
   trackingNumber: () => ({
     maxWidth: "100%",
     overflow: "hidden",

package/dist/esm/elements/shipment-summary/components/label-display/paperless-label-display.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { Next, ButtonVariant, Icon, IconSize, Typography } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useTranslation } from 'react-i18next';
+import { styles } from './paperless-label-display.styles.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+const PaperlessLabelDisplay = ({
+  handoffCode,
+  href,
+  instructions
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return jsxs("div", {
+    css: styles.paperlessDownloadwrapper,
+    children: [jsxs("div", {
+      css: styles.codewrapper,
+      children: [jsx("img", {
+        alt: "paperless code",
+        css: styles.codeImage,
+        src: href
+      }), handoffCode && jsx("div", {
+        css: styles.handoffCode,
+        children: handoffCode
+      }), jsxs(Next.Link, {
+        buttonProps: {
+          variant: ButtonVariant.OUTLINED
+        },
+        css: styles.button,
+        download: true,
+        href: href,
+        isButton: true,
+        children: [jsx(Icon, {
+          name: IconNames.PRINTER,
+          size: IconSize.SIZE_SMALL
+        }), jsx("span", {
+          children: t("view-shipment:actions.download")
+        })]
+      })]
+    }), instructions && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), " ", jsx(Typography, {
+        children: instructions
+      })]
+    })]
+  });
+};
+
+export { PaperlessLabelDisplay };

package/dist/esm/elements/shipment-summary/components/label-display/paperless-label-display.styles.js

@@ -0,0 +1,25 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  button: () => ({
+    cursor: "pointer"
+  }),
+  codeImage: () => ({
+    height: "120px",
+    maxWidth: "200px",
+    width: "auto"
+  }),
+  codewrapper: () => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column"
+  }),
+  handoffCode: theme => ({
+    margin: `${scopeTheme(theme).spacing(2)}px 0`
+  }),
+  paperlessDownloadwrapper: theme => ({
+    padding: scopeTheme(theme).spacing(2)
+  })
+});
+
+export { styles };

package/dist/esm/features/payment-method-settings/payment-method-settings.js

@@ -1,11 +1,14 @@
 import { __awaiter } from '../../_virtual/_tslib.js';
-import { jsx } from '@emotion/react/jsx-runtime';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { useToggle } from '../../hooks/use-toggle.js';
+import { InlineNotification, NotificationType } from '@shipengine/giger';
 import { useUpdateFundingSource, useListFundingSources } from '@shipengine/react-api';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { EditBillingForm } from '../../components/forms/edit-billing-form/edit-billing-form.js';
 import { WalletCard } from '../../components/wallet-card/wallet-card.js';
+import { useElements } from '../../elements-provider/elements-context-provider.js';
+import { Spacer } from '../../components/spacer/spacer.js';
 import { Loader } from '../../components/loader/loader.js';
 import { ZeroState } from '../../components/zero-state/zero-state.js';
 
@@ -16,37 +19,72 @@ const PaymentMethodSettings = ({
   const {
     t
   } = useTranslation();
+  const {
+    globalFeatures
+  } = useElements();
+  const {
+    supportEmailAddress
+  } = globalFeatures;
   const [showEditBilling, toggleShowEditBilling] = useToggle(false);
   const [isUpdatingBilling, setIsUpdatingBilling] = useState(false);
   const {
-    mutateAsync: updateBilling
+    error: updateBillingError,
+    mutateAsync: updateBilling,
+    reset: resetUpdateFundingSource
   } = useUpdateFundingSource();
   const {
     data: fundingSources,
     refetch: refetchFundingSources,
     isLoading: fundingSourceLoading
   } = useListFundingSources();
-  const fundingSourceId = (_a = fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources[0]) === null || _a === void 0 ? void 0 : _a.fundingSourceId;
+  const {
+    fundingSourceId,
+    billingInfo
+  } = (_a = fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources[0]) !== null && _a !== void 0 ? _a : {};
   const handleUpdateBilling = (billingInfo, creditCardInfo) => __awaiter(void 0, void 0, void 0, function* () {
     if (fundingSourceId) {
-      setIsUpdatingBilling(true);
-      yield updateBilling({
-        billingInfo,
-        creditCardInfo,
-        fundingSourceId
-      });
-      yield refetchFundingSources();
-      toggleShowEditBilling(false);
-      setIsUpdatingBilling(false);
+      try {
+        setIsUpdatingBilling(true);
+        yield updateBilling({
+          billingInfo,
+          creditCardInfo,
+          fundingSourceId
+        });
+        yield refetchFundingSources();
+        toggleShowEditBilling(false);
+      } catch (error) {
+        console.error("Error updating billing:", error);
+        // error is handled by the mutation
+      } finally {
+        setIsUpdatingBilling(false);
+      }
     }
   });
-  if (showEditBilling) return jsx(EditBillingForm, {
-    isLoading: isUpdatingBilling,
-    onCancel: () => {
-      toggleShowEditBilling(false);
-    },
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    onSubmit: handleUpdateBilling
+  if (showEditBilling) return jsxs(Fragment, {
+    children: [jsx(EditBillingForm, {
+      billingInfo: billingInfo,
+      isLoading: isUpdatingBilling,
+      onCancel: () => {
+        toggleShowEditBilling(false);
+        resetUpdateFundingSource();
+      },
+      onSubmit: (billingInfo, creditCardInfo) => {
+        void handleUpdateBilling(billingInfo, creditCardInfo);
+      }
+    }), (updateBillingError === null || updateBillingError === void 0 ? void 0 : updateBillingError.length) && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(InlineNotification, {
+        css: {
+          textAlign: "left"
+        },
+        title: t("account-settings:errors.paymentMethod.title"),
+        type: NotificationType.ERROR,
+        children: t("account-settings:errors.paymentMethod.description", {
+          email: supportEmailAddress
+        })
+      })]
+    })]
   });else {
     if (fundingSourceLoading) return jsx(Loader, {
       message: t("loading.paymentMethod")