@shipengine/elements 2.19.0 → 2.21.0

package/esm/workflows/onboarding/components/completion-page/completion-page.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { Typography, Button, ButtonColor, ButtonVariant } from '@shipengine/giger';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+
+const CompletionPage = ({
+  onContinue
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "onboarding"]);
+  return jsxs("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column"
+    },
+    "data-testid": "onboarding-complete"
+  }, {
+    children: [jsx(Typography, Object.assign({
+      variant: "heading4"
+    }, {
+      children: t("onboarding:success.title")
+    })), jsx(Spacer, {
+      multiplier: 2
+    }), jsx(Typography, Object.assign({
+      variant: "subtitle1"
+    }, {
+      children: t("onboarding:success.subtitle")
+    })), jsx(Spacer, {
+      multiplier: 10
+    }), jsxs("svg", Object.assign({
+      fill: "none",
+      height: "86",
+      viewBox: "0 0 86 86",
+      width: "86",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, {
+      children: [jsx("circle", {
+        cx: "43",
+        cy: "43.3379",
+        fill: "#E8F6FF",
+        r: "42.5"
+      }), jsx("path", {
+        d: "M56.6583 26.4724C57.2882 25.8425 58.3095 25.8425 58.9393 26.4724L64.1038 31.6369C64.7337 32.2668 64.7337 33.288 64.1038 33.9179L37.8303 60.1915L30.3848 52.746L56.6583 26.4724Z",
+        fill: "#006FBB"
+      }), jsx("path", {
+        d: "M21.4724 43.8446C20.8425 43.2147 20.8425 42.1935 21.4724 41.5636L26.4689 36.5671C27.0988 35.9372 28.12 35.9372 28.7499 36.5671L45.1032 52.9204L37.8257 60.1979L21.4724 43.8446Z",
+        fill: "#006FBB"
+      })]
+    })), jsx(Spacer, {
+      multiplier: 10
+    }), jsx(ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: jsx(Button, Object.assign({
+        bold: false,
+        color: ButtonColor.PRIMARY,
+        onClick: onContinue,
+        type: "button",
+        variant: ButtonVariant.FILLED
+      }, {
+        children: t("onboarding:success.action")
+      }))
+    }))]
+  }));
+};
+
+export { CompletionPage };

package/esm/workflows/onboarding/components/completion-page/index.js

@@ -0,0 +1 @@
+export { CompletionPage } from './completion-page.js';

package/esm/workflows/onboarding/components/confirmation-and-submission-step/confirmation-and-submission-step.js

@@ -0,0 +1,227 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useBlackboxDetection } from '../../../../hooks/use-black-box-detection.js';
+import { scopeTheme } from '../../../../utilities/styles.js';
+import { useState, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, NotificationType, Typography, Grid, GridChild, Button, ButtonColor, ButtonVariant } from '@shipengine/giger';
+import { StepHeader } from '../step-header/step-header.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { AddressDisplay } from '../../../../components/address-display/address-display.js';
+import { LinkAction } from '../../../../components/link-action/link-action.js';
+import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+import { CcProviderLogo } from '../../../../components/cc-provider-logo/cc-provider-logo.js';
+
+const ConfirmationAndSubmissionStep = ({
+  createFundingSourceErrors,
+  fundingSourcePaymentInfo,
+  onEdit,
+  onSubmit,
+  registerCarrierErrors,
+  updatePaymentMethodErrors,
+  walletPayload,
+  warehousePayload
+}) => {
+  const {
+    t
+  } = useTranslation(["onboarding"]);
+  const [iovationBlackBox, setIovationBlackBox] = useState();
+  // if a user has a payment method and did not update the billing info to create a walletPayload
+  // capture an individual iovationBlackbox to register carriers to existing funding source after confirmation submission
+  useBlackboxDetection({
+    onError: () => {
+      setIovationBlackBox(undefined);
+    },
+    onSuccess: blackbox => {
+      setIovationBlackBox(blackbox);
+    }
+  });
+  const handleSubmit = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    walletPayload ? yield onSubmit(warehousePayload, walletPayload) : yield onSubmit(warehousePayload, undefined, iovationBlackBox);
+  }), [onSubmit, walletPayload, warehousePayload, iovationBlackBox]);
+  const showBillingAddress = useMemo(() => {
+    const originAddress = warehousePayload.originAddress;
+    if (!originAddress) return false;
+    if (fundingSourcePaymentInfo === null || fundingSourcePaymentInfo === void 0 ? void 0 : fundingSourcePaymentInfo.billingInfo) {
+      const {
+        addressLine1,
+        fullName
+      } = fundingSourcePaymentInfo.billingInfo;
+      return addressLine1 !== originAddress.addressLine1 || fullName !== originAddress.name;
+    }
+    if (walletPayload === null || walletPayload === void 0 ? void 0 : walletPayload.address) {
+      const {
+        addressLine1,
+        name
+      } = walletPayload.address;
+      return addressLine1 !== originAddress.addressLine1 || name !== originAddress.name;
+    }
+    return false;
+  }, [walletPayload, warehousePayload.originAddress, fundingSourcePaymentInfo]);
+  const CreditCardDisplay = ({
+    provider,
+    last4
+  }) => {
+    return jsxs("div", Object.assign({
+      css: theme => ({
+        alignItems: "center",
+        display: "flex",
+        gap: scopeTheme(theme).spacing(1),
+        marginTop: scopeTheme(theme).spacing(1)
+      })
+    }, {
+      children: [jsx(CcProviderLogo, {
+        provider: provider,
+        width: 36
+      }), jsx(Typography, Object.assign({
+        variant: "body2"
+      }, {
+        children: `**** **** **** ${last4 !== null && last4 !== void 0 ? last4 : "****"}`
+      }))]
+    }));
+  };
+  const PaymentInfoDisplay = () => {
+    var _a, _b;
+    return jsx(GridChild, Object.assign({
+      colSpan: 9
+    }, {
+      children: walletPayload ? jsxs(Fragment, {
+        children: [jsx(CreditCardDisplay, {
+          last4: walletPayload.creditCard.cardNumber.slice(-4),
+          provider: walletPayload.creditCard.provider
+        }), showBillingAddress && jsxs(Fragment, {
+          children: [jsx(Spacer, {
+            multiplier: 1
+          }), jsx(Typography, Object.assign({
+            variant: "subtitle2"
+          }, {
+            children: t("confirmation.billingAddress")
+          })), jsx(AddressDisplay, {
+            address: walletPayload.address
+          })]
+        })]
+      }) : fundingSourcePaymentInfo ? jsxs(Fragment, {
+        children: [jsx(CreditCardDisplay, {
+          last4: (_a = fundingSourcePaymentInfo.paymentMethod.creditCardInfo) === null || _a === void 0 ? void 0 : _a.cardNumberLastFour,
+          provider: (_b = fundingSourcePaymentInfo.paymentMethod.creditCardInfo) === null || _b === void 0 ? void 0 : _b.provider
+        }), jsx(Spacer, {
+          multiplier: 1
+        }), jsx(Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: t("confirmation.billingAddress")
+        })), jsx(AddressDisplay, {
+          address: Object.assign(Object.assign({}, fundingSourcePaymentInfo.billingInfo), {
+            companyName: fundingSourcePaymentInfo.billingInfo.company,
+            name: fundingSourcePaymentInfo.billingInfo.fullName
+          })
+        })]
+      }) : jsx(Typography, Object.assign({
+        variant: "body2"
+      }, {
+        children: t("confirmation.noPaymentMethod")
+      }))
+    }));
+  };
+  return jsxs("div", Object.assign({
+    "data-testid": "confirmation-step"
+  }, {
+    children: [jsx(StepHeader, {
+      title: t("confirmation.title")
+    }), !!(updatePaymentMethodErrors === null || updatePaymentMethodErrors === void 0 ? void 0 : updatePaymentMethodErrors.length) && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), jsx(InlineNotification, Object.assign({
+        title: t("register-wallet:sections.notifications.error.title"),
+        type: NotificationType.ERROR
+      }, {
+        children: updatePaymentMethodErrors.map(({
+          message
+        }) => message).join(" ")
+      })), jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), !!(createFundingSourceErrors === null || createFundingSourceErrors === void 0 ? void 0 : createFundingSourceErrors.length) && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), jsx(InlineNotification, Object.assign({
+        title: t("register-wallet:sections.notifications.error.title"),
+        type: NotificationType.ERROR
+      }, {
+        children: createFundingSourceErrors.map(({
+          message
+        }) => message).join(" ")
+      })), jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), !!(registerCarrierErrors === null || registerCarrierErrors === void 0 ? void 0 : registerCarrierErrors.length) && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), jsx(InlineNotification, Object.assign({
+        title: t("register-wallet:sections.notifications.error.title"),
+        type: NotificationType.ERROR
+      }, {
+        children: registerCarrierErrors.map(({
+          message
+        }) => message).join(" ")
+      })), jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), jsxs("section", {
+      children: [jsx(Typography, Object.assign({
+        css: {
+          textAlign: "left"
+        },
+        variant: "subtitle2"
+      }, {
+        children: t("confirmation.warehouse")
+      })), jsx(AddressDisplay, {
+        address: warehousePayload.originAddress,
+        onEdit: () => onEdit(1),
+        showEmail: true
+      })]
+    }), jsx(Spacer, {
+      multiplier: 3
+    }), jsxs("section", {
+      children: [jsx(Typography, Object.assign({
+        variant: "subtitle2"
+      }, {
+        children: t("confirmation.paymentMethod")
+      })), jsxs(Grid, Object.assign({
+        "data-testid": "address-display",
+        noPadding: true
+      }, {
+        children: [jsx(PaymentInfoDisplay, {}), jsx(GridChild, Object.assign({
+          colSpan: 3,
+          css: {
+            textAlign: "right"
+          }
+        }, {
+          children: jsx(LinkAction, {
+            css: {
+              alignSelf: "end"
+            },
+            onClick: () => onEdit(2),
+            title: t("actions.edit")
+          })
+        }))]
+      }))]
+    }), jsx(Spacer, {
+      multiplier: 4
+    }), jsx(ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: jsx(Button, Object.assign({
+        bold: false,
+        color: ButtonColor.PRIMARY,
+        onClick: handleSubmit,
+        type: "button",
+        variant: ButtonVariant.FILLED
+      }, {
+        children: t("confirmation.action")
+      }))
+    }))]
+  }));
+};
+
+export { ConfirmationAndSubmissionStep };

package/esm/workflows/onboarding/components/confirmation-and-submission-step/index.js

@@ -0,0 +1,2 @@
+export { ConfirmationAndSubmissionStep } from './confirmation-and-submission-step.js';
+export { useConfirmationAndSubmissionStep } from './use-confirmation-and-submission-step.js';

package/esm/workflows/onboarding/components/confirmation-and-submission-step/use-confirmation-and-submission-step.js

@@ -0,0 +1,311 @@
+import { __awaiter } from 'tslib';
+import { getSellerIdFromToken } from '../../../../utilities/checks.js';
+import { getDefaultWarehouse } from '../../../../utilities/shipengine/warehouses.js';
+import { useState, useCallback } from 'react';
+import { useAddSandboxCarriers, useCreateFundingSource, useUpdateFundingSource, useRegisterCarrier } from '@shipengine/react-api';
+import { useManageWarehouses } from '../../../../features/manage-warehouses/use-manage-warehouses.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+
+const useConfirmationAndSubmissionStep = ({
+  onStepComplete
+}) => {
+  const {
+    globalFeatures,
+    getToken
+  } = useElements();
+  const [isSubmittingOnboarding, setIsSubmittingOnboarding] = useState(false);
+  const {
+    createWarehouse,
+    updateWarehouse,
+    updateWarehouseErrors,
+    refreshListWarehouses,
+    warehouses,
+    isCreatingWarehouse,
+    isUpdatingWarehouse,
+    isLoadingWarehouses
+  } = useManageWarehouses();
+  const {
+    mutateAsync: addSandboxCarriers
+  } = useAddSandboxCarriers();
+  const {
+    error: createFundingSourceErrors,
+    isLoading: isCreatingFundingSource,
+    mutateAsync: createFundingSource,
+    reset: resetCreateFundingSource
+  } = useCreateFundingSource();
+  const {
+    error: updatePaymentMethodErrors,
+    isLoading: isUpdatingPaymentMethod,
+    mutateAsync: updatePaymentMethod
+  } = useUpdateFundingSource();
+  // TODO - This endpoint registers an array of carriers; shouldn't it be named useRegisterCarriers?
+  const {
+    error: registerCarrierErrors,
+    mutateAsync: registerCarrier,
+    isLoading: isRegisteringCarriers,
+    reset: resetRegisterCarrier
+  } = useRegisterCarrier();
+  const resetMutations = useCallback(() => {
+    resetCreateFundingSource();
+    resetRegisterCarrier();
+  }, [resetCreateFundingSource, resetRegisterCarrier]);
+  const createOrUpdateWarehouse = useCallback(warehousePayload => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      if (warehousePayload.warehouseId) {
+        yield updateWarehouse(Object.assign(Object.assign({}, warehousePayload), {
+          warehouseId: warehousePayload.warehouseId
+        }));
+        if (!(updateWarehouseErrors === null || updateWarehouseErrors === void 0 ? void 0 : updateWarehouseErrors.length)) {
+          return warehousePayload;
+        }
+      }
+      // Ex: partner provides a defaultShipFromAddress, but the seller has existing warehouses
+      // update the default warehouse instead of creating a new one
+      const defaultWarehouse = getDefaultWarehouse(warehouses);
+      const shouldUpdateDefaultWarehouse = (warehouses === null || warehouses === void 0 ? void 0 : warehouses.length) && (defaultWarehouse === null || defaultWarehouse === void 0 ? void 0 : defaultWarehouse.warehouseId) && warehousePayload.isDefault;
+      if (shouldUpdateDefaultWarehouse) {
+        yield updateWarehouse(Object.assign(Object.assign({}, warehousePayload), {
+          warehouseId: defaultWarehouse.warehouseId
+        }));
+        if (!(updateWarehouseErrors === null || updateWarehouseErrors === void 0 ? void 0 : updateWarehouseErrors.length)) {
+          return warehousePayload;
+        }
+      }
+      // create a new warehouse if the seller doesn't have any warehouses
+      // or, if payload isDefault is false
+      const result = yield createWarehouse(warehousePayload);
+      return result;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    } finally {
+      yield refreshListWarehouses();
+    }
+  }), [updateWarehouse, updateWarehouseErrors, warehouses, createWarehouse, refreshListWarehouses]);
+  const createHandleCarrierConnections = useCallback(({
+    carrierProfiles,
+    defaultWarehouse,
+    insuranceProviderProfiles
+  }) => (fundingSourceId, {
+    address,
+    iovationBlackbox
+  }) => __awaiter(void 0, void 0, void 0, function* () {
+    const addressToRegister = address !== null && address !== void 0 ? address : defaultWarehouse.originAddress;
+    // parcel guard check
+    const insuranceProviders = globalFeatures.enableParcelGuard ? insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.map(p => ({
+      acceptedTerms: [{
+        termType: p.terms.termType,
+        version: p.terms.version
+      }],
+      agreeToTerms: true,
+      fundingSourceId,
+      provider: p.provider
+    })) : undefined;
+    try {
+      yield registerCarrier({
+        carriers: carrierProfiles.map(c => ({
+          acceptedTerms: c.requiredTerms.map(({
+            termType,
+            version
+          }) => ({
+            termType,
+            version
+          })),
+          agreeToTerms: true,
+          carrierCode: c.carrierCode,
+          fundingSourceId,
+          // TODO - Annoying; we should capitalize `Box` in WalletPayload so we can shorthand this property
+          iovationBlackBox: iovationBlackbox,
+          pickupAddress: Object.assign(Object.assign({}, addressToRegister), {
+            company: addressToRegister.companyName || "",
+            email: defaultWarehouse.originAddress.email,
+            fullName: addressToRegister.name,
+            // This is a hack to get around the fact that the API will only accept the 5 digit zip code for US addresses
+            postalCode: addressToRegister.postalCode.length === 10 ? addressToRegister.postalCode.slice(0, -5) : addressToRegister.postalCode
+          })
+        })),
+        insuranceProviders
+      });
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }), [registerCarrier, globalFeatures.enableParcelGuard]);
+  const onboardSeller = useCallback(({
+    carrierProfiles,
+    fundingSourceRequiredTerms,
+    insuranceProviderProfiles
+  }) => ({
+    address,
+    creditCard,
+    iovationBlackbox
+  }, warehousePayload) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const warehouse = yield createOrUpdateWarehouse(warehousePayload);
+    if (globalFeatures.isSandbox) {
+      try {
+        // Sandbox seller
+        const token = yield getToken();
+        const sellerId = (_a = getSellerIdFromToken(token)) !== null && _a !== void 0 ? _a : "";
+        yield addSandboxCarriers({
+          sellerId,
+          tryReuseCarrierConnection: true
+        });
+      } catch (error) {
+        console.error(error);
+        throw error;
+      }
+    } else {
+      // Standard seller
+      let fundingSource;
+      try {
+        fundingSource = yield createFundingSource({
+          acceptedTerms: fundingSourceRequiredTerms.map(({
+            termType,
+            version
+          }) => ({
+            termType,
+            version
+          })),
+          agreeToTerms: true,
+          billingInfo: Object.assign(Object.assign({}, address), {
+            company: address.companyName || "",
+            email: (_b = address.email) !== null && _b !== void 0 ? _b : warehousePayload.originAddress.email,
+            fullName: address.name
+          }),
+          iovationBlackBox: iovationBlackbox,
+          paymentMethod: {
+            creditCardInfo: Object.assign({}, creditCard)
+          }
+        });
+      } catch (error) {
+        console.error(error);
+        throw error;
+      }
+      // TODO - need to be more programmatic for funding source required-fields
+      // https://auctane.atlassian.net/wiki/spaces/SE/pages/3628370266/ShipEngine+Funding+Sources+API
+      if (warehouse && fundingSource) {
+        try {
+          yield createHandleCarrierConnections({
+            carrierProfiles,
+            defaultWarehouse: warehouse,
+            insuranceProviderProfiles: globalFeatures.enableParcelGuard ? insuranceProviderProfiles : undefined
+          })(fundingSource.fundingSource.fundingSourceId, {
+            iovationBlackbox
+          });
+        } catch (error) {
+          console.error(error);
+          throw error;
+        }
+      }
+    }
+  }), [addSandboxCarriers, createFundingSource, createHandleCarrierConnections, createOrUpdateWarehouse, getToken, globalFeatures.enableParcelGuard, globalFeatures.isSandbox]);
+  const updateExistingFundingSource = useCallback(({
+    carrierProfiles,
+    fundingSource,
+    insuranceProviderProfiles
+  }) => (warehousePayload, walletPayload, iovationBlackBox) => __awaiter(void 0, void 0, void 0, function* () {
+    var _c, _d;
+    if (!fundingSource) return;
+    const {
+      fundingSourceId
+    } = fundingSource;
+    // Create register carrier payload from either wallet payload or existing funding source
+    const registerCarrierPayload = walletPayload ? {
+      address: walletPayload.address,
+      iovationBlackbox: walletPayload.iovationBlackbox
+    } : {
+      address: Object.assign(Object.assign({}, fundingSource.billingInfo), {
+        company: fundingSource.billingInfo.company,
+        email: fundingSource.billingInfo.email,
+        name: fundingSource.billingInfo.fullName
+      }),
+      iovationBlackbox: iovationBlackBox !== null && iovationBlackBox !== void 0 ? iovationBlackBox : ""
+    };
+    try {
+      // User updated their payment method in the previous step
+      // Update the funding source with the new payment method
+      if (walletPayload) {
+        yield updatePaymentMethod({
+          billingInfo: Object.assign(Object.assign({}, walletPayload.address), {
+            company: walletPayload.address.companyName,
+            email: (_c = walletPayload.address.email) !== null && _c !== void 0 ? _c : "",
+            fullName: walletPayload.address.name
+          }),
+          creditCardInfo: walletPayload.creditCard,
+          fundingSourceId
+        });
+      }
+      // User is missing some or all walleted carriers/insurance providers
+      // Register the missing carriers/insurance providers
+      const hasCarriersToRegister = carrierProfiles.length > 0 || ((_d = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) !== null && _d !== void 0 ? _d : 0) > 0;
+      if (hasCarriersToRegister) {
+        yield createHandleCarrierConnections({
+          carrierProfiles,
+          defaultWarehouse: warehousePayload,
+          insuranceProviderProfiles
+        })(fundingSourceId, registerCarrierPayload);
+      }
+      // Create or update warehouse
+      yield createOrUpdateWarehouse(warehousePayload);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }), [createHandleCarrierConnections, createOrUpdateWarehouse, updatePaymentMethod]);
+  const createOnboardingSubmissionHandler = useCallback(({
+    carrierProfiles,
+    fundingSourceRequiredTerms,
+    insuranceProviderProfiles,
+    fundingSource
+  }) => (warehousePayload, walletPayload, iovationBlackBox) => __awaiter(void 0, void 0, void 0, function* () {
+    let hasSubmissionError = false;
+    setIsSubmittingOnboarding(true);
+    // no funding source, onboard the seller
+    if (!fundingSource && walletPayload) {
+      try {
+        yield onboardSeller({
+          carrierProfiles,
+          fundingSourceRequiredTerms,
+          insuranceProviderProfiles
+        })(walletPayload, warehousePayload);
+      } catch (error) {
+        hasSubmissionError = true;
+      }
+    }
+    // handle seller with existing funding source
+    if (fundingSource) {
+      try {
+        yield updateExistingFundingSource({
+          carrierProfiles,
+          fundingSource,
+          insuranceProviderProfiles
+        })(warehousePayload, walletPayload, iovationBlackBox);
+      } catch (error) {
+        hasSubmissionError = true;
+      }
+    }
+    const hasErrors = !!((createFundingSourceErrors === null || createFundingSourceErrors === void 0 ? void 0 : createFundingSourceErrors.length) || (registerCarrierErrors === null || registerCarrierErrors === void 0 ? void 0 : registerCarrierErrors.length) || (updatePaymentMethodErrors === null || updatePaymentMethodErrors === void 0 ? void 0 : updatePaymentMethodErrors.length) || (updateWarehouseErrors === null || updateWarehouseErrors === void 0 ? void 0 : updateWarehouseErrors.length) || hasSubmissionError);
+    if (!hasErrors) {
+      onStepComplete();
+    }
+    setIsSubmittingOnboarding(false);
+  }), [onboardSeller, updateExistingFundingSource, onStepComplete, createFundingSourceErrors, registerCarrierErrors, updatePaymentMethodErrors, updateWarehouseErrors]);
+  return {
+    createFundingSourceErrors,
+    createOnboardingSubmissionHandler,
+    isLoading: {
+      connectingCarriers: isRegisteringCarriers,
+      creatingFundingSource: isCreatingFundingSource,
+      submittingOnboarding: isSubmittingOnboarding,
+      submittingWarehouse: isCreatingWarehouse || isUpdatingWarehouse || isLoadingWarehouses,
+      updatingPaymentMethod: isUpdatingPaymentMethod
+    },
+    registerCarrierErrors,
+    resetMutations,
+    updatePaymentMethodErrors,
+    updateWarehouseErrors
+  };
+};
+
+export { useConfirmationAndSubmissionStep };

package/esm/workflows/onboarding/components/funding-step/funding-step.js

@@ -0,0 +1,73 @@
+import { __awaiter, __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { WalletForm } from '../../../../components/forms/wallet-form/wallet-form.js';
+import { AddressPreferenceProvider } from '../../../../components/address-preference-context/address-preference-context.js';
+import { StepHeader } from '../step-header/step-header.js';
+
+const FundingStep = ({
+  address,
+  onSubmit,
+  showVatSettings
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "register-wallet"]);
+  // TODO - Are we expecting to onboard folks that already have a wallet?
+  // if (!hasStampsWallet)
+  return jsx(AddressPreferenceProvider, Object.assign({
+    formHeader: jsx("header", {
+      children: jsx(StepHeader, {
+        title: t("register-wallet:sections.billing.title"),
+        tooltipMessage: t("register-wallet:sections.notifications.info.description")
+      })
+    }),
+    onSubmit: _a => __awaiter(void 0, void 0, void 0, function* () {
+      var {
+          passengerData
+        } = _a,
+        rest = __rest(_a, ["passengerData"]);
+      return yield onSubmit(Object.assign(Object.assign({}, passengerData), {
+        address: rest.originAddress
+      }));
+    })
+  }, {
+    children: jsx(WalletForm, {
+      address: address,
+      onSubmit: onSubmit,
+      showVatSettings: showVatSettings
+    })
+  }));
+  // TODO - Are these still needed? Suggest we programmatically handle all failed carrier registrations
+  // Step 4.1: Handle UPS Registration Errors
+  // if (upsEnabled && !hasUps && fundingSourceId) {
+  //   return (
+  //     <CarrierRecoveryForm
+  //       address={address}
+  //       carrierFriendlyName={"cool"}
+  //       carrierMetadata={{}}
+  //       errors={registerCarrierErrors}
+  //       fundingSourceId={fundingSourceId}
+  //       // onSkip={() => setOnboardingComplete(true)}
+  //       onSkip={() => {}}
+  //       // onSubmit={handleRegisterCarriers}
+  //       onSubmit={async () => {}}
+  //     />
+  //   );
+  // }
+  // // Step 4.2 Handle DHL Registration Errors
+  // if (!hasDhl && fundingSourceId) {
+  //   return (
+  //     <CarrierRecoveryForm
+  //       errors={registerCarrierErrors}
+  //       fundingSourceId={fundingSourceId}
+  //       // onSkip={() => setOnboardingComplete(true)}
+  //       onSkip={() => {}}
+  //       // onSubmit={handleRegisterCarriers}
+  //       onSubmit={async () => {}}
+  //     />
+  //   );
+  // }
+};
+
+export { FundingStep };

package/esm/workflows/onboarding/components/funding-step/index.js

@@ -0,0 +1 @@
+export { FundingStep } from './funding-step.js';