@shipengine/elements 2.20.0 → 2.21.0

package/cjs/features/manage-carriers/manage-carriers.cjs

@@ -0,0 +1,198 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useBlackBoxDetection = require('../../hooks/use-black-box-detection.cjs');
+var jsBase64 = require('js-base64');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var reactApi = require('@shipengine/react-api');
+var manageCarriers_styles = require('./manage-carriers.styles.cjs');
+var useListFundingSourceCarriers = require('./hooks/use-list-funding-source-carriers.cjs');
+var skeletonCarrierRow = require('../../components/skeleton/skeleton-carrier-row.cjs');
+var manageFunding = require('../manage-funding/manage-funding.cjs');
+var manageCarriersRow = require('./manage-carriers-row/manage-carriers-row.cjs');
+var manageInsuranceProviderRow = require('./manage-insurance-provider-row/manage-insurance-provider-row.cjs');
+var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
+var zeroState = require('../../components/zero-state/zero-state.cjs');
+var spacer = require('../../components/spacer/spacer.cjs');
+
+const ShipEngineCarriers = ({
+  showFunds,
+  onRedirectToOnboarding,
+  addFunds,
+  addFundsError
+}) => {
+  var _a;
+  const {
+    globalFeatures
+  } = elementsContextProvider.useElements();
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [carrierToConnect, setCarrierToConnect] = React.useState();
+  const {
+    data: fundingSources
+  } = reactApi.useListFundingSources();
+  const {
+    data: fundingSourceCarriers,
+    error: listCarriersErrors,
+    isLoading,
+    insuranceProviderProfiles,
+    refetch: refetchCarriers,
+    refetchInsuranceProviderAcceptedTerms
+  } = useListFundingSourceCarriers.useListFundingSourceCarriers();
+  const hasConnectedCarriers = React.useMemo(() => fundingSourceCarriers === null || fundingSourceCarriers === void 0 ? void 0 : fundingSourceCarriers.some(c => c.isConnected), [fundingSourceCarriers]);
+  const {
+    data: warehouses
+  } = reactApi.useListWarehouses();
+  const defaultWarehouse = React.useMemo(() => {
+    var _a;
+    return (_a = warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.isDefault)) !== null && _a !== void 0 ? _a : warehouses === null || warehouses === void 0 ? void 0 : warehouses[0];
+  }, [warehouses]);
+  const {
+    error: registerCarrierErrors,
+    mutateAsync: registerCarrier
+  } = reactApi.useRegisterCarrier();
+  const fundingSourceId = (_a = fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources[0]) === null || _a === void 0 ? void 0 : _a.fundingSourceId;
+  const [iovationBlackBox, setIovationBlackBox] = React.useState();
+  const [iovationBlackBoxErrors, setIovationBlackBoxErrors] = React.useState();
+  useBlackBoxDetection.useBlackboxDetection({
+    onError: React.useCallback(() => {
+      setIovationBlackBoxErrors(errors => {
+        const blackBoxError = {
+          errorCode: "unspecified",
+          errorSource: "client",
+          errorType: "unknown",
+          message: t("register-wallet:sections.notifications.blackBox.description")
+        };
+        return [...(errors !== null && errors !== void 0 ? errors : []), blackBoxError];
+      });
+    }, [t]),
+    onSuccess: React.useCallback(bb => setIovationBlackBox(bb), [])
+  });
+  const codedErrors = React.useMemo(() => {
+    return [...(listCarriersErrors !== null && listCarriersErrors !== void 0 ? listCarriersErrors : []), ...(registerCarrierErrors !== null && registerCarrierErrors !== void 0 ? registerCarrierErrors : []), ...(iovationBlackBoxErrors !== null && iovationBlackBoxErrors !== void 0 ? iovationBlackBoxErrors : [])];
+  }, [listCarriersErrors, registerCarrierErrors, iovationBlackBoxErrors]);
+  const handleRegistration = React.useCallback(args => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    let attachmentResult;
+    try {
+      attachmentResult = yield registerCarrier(Object.assign({}, args));
+    } catch (error) {
+      console.error(error);
+    }
+    if (args.insuranceProviders) {
+      yield refetchInsuranceProviderAcceptedTerms();
+    } else {
+      yield refetchCarriers();
+    }
+    return attachmentResult;
+  }), [refetchCarriers, refetchInsuranceProviderAcceptedTerms, registerCarrier]);
+  const handleAddFunds = React.useCallback(payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield addFunds({
+      // We need to stop doing this `?? ""`
+      fundingSourceId: fundingSourceId !== null && fundingSourceId !== void 0 ? fundingSourceId : "",
+      funds: payload
+    });
+  }), [addFunds, fundingSourceId]);
+  const enabledCarriers = fundingSourceCarriers === null || fundingSourceCarriers === void 0 ? void 0 : fundingSourceCarriers.filter(carrier => {
+    var _a;
+    return carrier.carrier.carrierProfile.carrierCode === "stamps_com" || ((_a = globalFeatures.enabledShipEngineCarriers) === null || _a === void 0 ? void 0 : _a.includes(carrier.carrier.carrierProfile.carrierCode));
+  });
+  const handleRegisterProvider = React.useCallback(p => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    return yield handleRegistration({
+      insuranceProviders: [{
+        acceptedTerms: [{
+          termType: p.terms.termType,
+          version: p.terms.version
+        }],
+        agreeToTerms: true,
+        fundingSourceId: fundingSourceId !== null && fundingSourceId !== void 0 ? fundingSourceId : "",
+        provider: p.provider
+      }]
+    });
+  }), [handleRegistration, fundingSourceId]);
+  if (!fundingSources || fundingSources.length === 0) return onRedirectToOnboarding ? jsxRuntime.jsx(zeroState.ZeroState, {
+    description: t("account-settings:messages.noFundingSourceDescription", {
+      section: "ShipEngine Carriers"
+    }),
+    showLinkAction: {
+      icon: "add",
+      onClick: () => onRedirectToOnboarding(),
+      title: t("account-settings:messages.noFundingSourceAction")
+    }
+  }) : jsxRuntime.jsx(zeroState.ZeroState, {
+    description: t("account-settings:messages.noFundingSourceDescription", {
+      section: "ShipEngine Carriers"
+    })
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!isLoading && !!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("div", Object.assign({
+        "data-testid": "loading-error"
+      }, {
+        children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+          title: t("register-carrier:notifications.error.title"),
+          type: giger.NotificationType.ERROR
+        }, {
+          children: codedErrors.map(e => t(jsBase64.encode(e.message), {
+            defaultValue: e.message
+          })).join(" ")
+        }))
+      })), jsxRuntime.jsx(spacer.Spacer, {})]
+    }), jsxRuntime.jsx("ul", Object.assign({
+      css: manageCarriers_styles.styles.carriersList,
+      "data-testid": "carriers-list"
+    }, {
+      children: isLoading ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(skeletonCarrierRow.SkeletonCarrierRow, {}), jsxRuntime.jsx(skeletonCarrierRow.SkeletonCarrierRow, {}), jsxRuntime.jsx(skeletonCarrierRow.SkeletonCarrierRow, {})]
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [showFunds && hasConnectedCarriers && jsxRuntime.jsx("li", {
+          children: jsxRuntime.jsx("div", Object.assign({
+            css: {
+              padding: "16px"
+            }
+          }, {
+            children: jsxRuntime.jsx(manageFunding.ManageFunding, {
+              addFunds: handleAddFunds,
+              addFundsError: addFundsError,
+              fundingSource: fundingSources[0]
+            })
+          }))
+        }), enabledCarriers === null || enabledCarriers === void 0 ? void 0 : enabledCarriers.map(carrier => jsxRuntime.jsx("li", {
+          children: jsxRuntime.jsx(manageCarriersRow.ManageCarriersRow, {
+            address: defaultWarehouse === null || defaultWarehouse === void 0 ? void 0 : defaultWarehouse.originAddress,
+            carrierToConnect: carrierToConnect,
+            fundingSourceCarrier: carrier,
+            registerCarrier: values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+              var _b;
+              yield handleRegistration({
+                carriers: [Object.assign(Object.assign({}, values), {
+                  acceptedTerms: carrier.carrier.carrierProfile.requiredTerms.map(term => ({
+                    termType: term.termType,
+                    version: term.version
+                  })),
+                  agreeToTerms: (_b = values === null || values === void 0 ? void 0 : values.agreeToTerms) !== null && _b !== void 0 ? _b : false,
+                  carrierCode: carrier.carrier.carrierProfile.carrierCode,
+                  fundingSourceId: fundingSourceId !== null && fundingSourceId !== void 0 ? fundingSourceId : "",
+                  iovationBlackBox: iovationBlackBox !== null && iovationBlackBox !== void 0 ? iovationBlackBox : ""
+                })]
+              });
+            }),
+            setCarrierToConnect: setCarrierToConnect
+          })
+        }, carrier.carrier.carrierProfile.carrierCode)), globalFeatures.enableParcelGuard && (insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.map(p => jsxRuntime.jsx("li", {
+          children: jsxRuntime.jsx(manageInsuranceProviderRow.ManageInsuranceProviderRow, {
+            insuranceProviderProfile: p,
+            registerProvider: handleRegisterProvider
+          })
+        }, p.terms.termType)))]
+      })
+    }))]
+  });
+};
+
+exports.ShipEngineCarriers = ShipEngineCarriers;

package/cjs/features/manage-carriers/manage-carriers.styles.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  carriersList: theme => ({
+    "& > li:not(:last-of-type)": {
+      borderBottom: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`
+    },
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.S,
+    display: "flex",
+    flexDirection: "column",
+    listStyle: "none"
+  })
+});
+
+exports.styles = styles;

package/cjs/features/manage-carriers/manage-insurance-provider-row/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var manageInsuranceProviderRow = require('./manage-insurance-provider-row.cjs');
+
+
+
+exports.ManageInsuranceProviderRow = manageInsuranceProviderRow.ManageInsuranceProviderRow;

package/cjs/features/manage-carriers/manage-insurance-provider-row/info-popover.cjs

@@ -0,0 +1,56 @@
+'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 manageInsuranceProviderRow_styles = require('./manage-insurance-provider-row.styles.cjs');
+var spacer = require('../../../components/spacer/spacer.cjs');
+
+const InfoPopover = ({
+  insuranceProvider,
+  iconRef,
+  toggleIsOpen,
+  isOpen
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  if (insuranceProvider === "parcelguard") {
+    return jsxRuntime.jsxs(giger.Popover, Object.assign({
+      css: manageInsuranceProviderRow_styles.styles.popover,
+      isOpen: isOpen,
+      onClickAway: toggleIsOpen,
+      placement: "bottom",
+      reference: iconRef.current
+    }, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true,
+        variant: "body2"
+      }, {
+        children: t(`register-wallet:sections.insuranceProviders.parcelguard.popover.title`)
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 1
+      }), jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+        i18nKey: `register-wallet:sections.insuranceProviders.parcelguard.popover.description`
+      }, {
+        children: ["Just add ParcelGuard as the insurance provider to your shipments for greater peace of mind.", jsxRuntime.jsx(giger.Link, Object.assign({
+          "aria-label": "Opens in a new tab",
+          css: manageInsuranceProviderRow_styles.styles.link,
+          href: "https://help.shipengine.com/hc/en-us/articles/26099415057435-ParcelGuard",
+          isExternal: true,
+          rel: "noreferrer",
+          target: "_blank"
+        }, {
+          children: "Learn more."
+        }))]
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 1
+      })]
+    }));
+  }
+  return null;
+};
+
+exports.InfoPopover = InfoPopover;

package/cjs/features/manage-carriers/manage-insurance-provider-row/manage-insurance-provider-row.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../../hooks/use-toggle.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var infoPopover = require('./info-popover.cjs');
+var manageInsuranceProviderRow_styles = require('./manage-insurance-provider-row.styles.cjs');
+var registerFundingSourceInsuranceForm = require('../../../components/forms/register-funding-source-insurance-form/register-funding-source-insurance-form.cjs');
+var carrierIcon = require('../../../components/carrier-icon/carrier-icon.cjs');
+var linkAction = require('../../../components/link-action/link-action.cjs');
+
+const ManageInsuranceProviderRow = ({
+  registerProvider,
+  insuranceProviderProfile
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["manage-carriers"]);
+  const [showDropDown, setShowDropDown] = React.useState(false);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [showPopover, toggleShowPopover] = useToggle.useToggle(false);
+  const isConnected = React.useMemo(() => {
+    return insuranceProviderProfile.agreedToTerms;
+  }, [insuranceProviderProfile.agreedToTerms]);
+  const iconRef = React.useRef(null);
+  const handleRegister = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    setIsSubmitting(true);
+    const attachmentResult = yield registerProvider(insuranceProviderProfile);
+    const isSuccessful = !!((_a = attachmentResult === null || attachmentResult === void 0 ? void 0 : attachmentResult.insuranceProviderAttachmentResults) === null || _a === void 0 ? void 0 : _a[0].isSuccessful);
+    isSuccessful && showDropDown && setShowDropDown(false);
+    setIsSubmitting(false);
+    return {
+      isSuccessful
+    };
+  }), [insuranceProviderProfile, registerProvider, showDropDown]);
+  const handleClickConnect = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    setShowDropDown(true);
+  }), []);
+  const handleCancelRegistration = React.useCallback(() => {
+    setShowDropDown(false);
+  }, []);
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: manageInsuranceProviderRow_styles.styles.container,
+    "data-testid": "carrier-row"
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: manageInsuranceProviderRow_styles.styles.rowContainer
+    }, {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        css: manageInsuranceProviderRow_styles.styles.logoContainer
+      }, {
+        children: [jsxRuntime.jsx("div", {
+          children: jsxRuntime.jsx(carrierIcon.CarrierIcon, {
+            carrierCode: insuranceProviderProfile.provider,
+            carrierName: insuranceProviderProfile.friendlyName,
+            size: giger.IconSize.SIZE_REGULAR
+          })
+        }), jsxRuntime.jsx(giger.Typography, Object.assign({
+          variant: "subtitle1"
+        }, {
+          children: insuranceProviderProfile.friendlyName
+        })), isConnected && jsxRuntime.jsx(giger.Icon, {
+          css: {
+            ":hover": {
+              cursor: "pointer"
+            }
+          },
+          name: gigerTheme.IconNames.INFO,
+          onClick: toggleShowPopover,
+          ref: iconRef,
+          size: giger.IconSize.SIZE_SMALL
+        })]
+      })), jsxRuntime.jsx(infoPopover.InfoPopover, {
+        iconRef: iconRef,
+        insuranceProvider: insuranceProviderProfile.provider,
+        isOpen: showPopover,
+        toggleIsOpen: toggleShowPopover
+      }), !showDropDown && jsxRuntime.jsx(linkAction.LinkAction, {
+        css: manageInsuranceProviderRow_styles.styles.getConnectButton(isConnected),
+        isDisabled: isConnected,
+        isLoading: isSubmitting,
+        onClick: handleClickConnect,
+        title: isConnected ? t("manage-carriers:actions.status.connected") : t("manage-carriers:actions.status.notConnected")
+      })]
+    })), showDropDown && jsxRuntime.jsx("div", Object.assign({
+      css: manageInsuranceProviderRow_styles.styles.formContainer
+    }, {
+      children: jsxRuntime.jsx(registerFundingSourceInsuranceForm.RegisterFundingSourceInsuranceForm, {
+        insuranceProviderProfile: insuranceProviderProfile,
+        onCancel: handleCancelRegistration,
+        onSubmit: handleRegister,
+        showDescription: true
+      })
+    }))]
+  }));
+};
+
+exports.ManageInsuranceProviderRow = ManageInsuranceProviderRow;

package/cjs/features/manage-carriers/manage-insurance-provider-row/manage-insurance-provider-row.styles.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  formContainer: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  getConnectButton: isConnected => theme => Object.assign({
+    padding: `0 ${styles$1.scopeTheme(theme).spacing(0.5)}px`
+  }, isConnected && {
+    backgroundColor: styles$1.scopeTheme(theme).palette.success.main,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.XS,
+    color: styles$1.scopeTheme(theme).palette.white
+  }),
+  link: theme => ({
+    "&:visited": {
+      color: styles$1.scopeTheme(theme).palette.secondary.main
+    },
+    cursor: "pointer",
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+  }),
+  logoContainer: theme => ({
+    alignItems: "center",
+    columnGap: `${styles$1.scopeTheme(theme).spacing(1)}px`,
+    display: "flex"
+  }),
+  popover: theme => ({
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S
+  }),
+  rowContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px`
+  })
+});
+
+exports.styles = styles;

package/cjs/features/manage-carriers/register-funding-source-carrier-form/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var registerFundingSourceCarrierForm = require('./register-funding-source-carrier-form.cjs');
+var registerFundingSourceCarrierSchema = require('./register-funding-source-carrier-schema.cjs');
+
+
+
+exports.RegisterFundingSourceCarrierForm = registerFundingSourceCarrierForm.RegisterFundingSourceCarrierForm;
+exports.getRegisterFundingSourceCarrierSchema = registerFundingSourceCarrierSchema.getRegisterFundingSourceCarrierSchema;

package/cjs/features/manage-carriers/register-funding-source-carrier-form/register-funding-source-carrier-form.cjs

@@ -0,0 +1,212 @@
+'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 formLogger = require('../../../utilities/form-logger.cjs');
+var validation = require('../../../utilities/validation.cjs');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var jsApi = require('@shipengine/js-api');
+var registerFundingSourceCarrierForm_styles = require('./register-funding-source-carrier-form.styles.cjs');
+var registerFundingSourceCarrierSchema = require('./register-funding-source-carrier-schema.cjs');
+var editWalletAddressForm = require('../../../components/forms/edit-wallet-address-form/edit-wallet-address-form.cjs');
+var addressFields = require('../../../components/forms/address-form/address-fields.cjs');
+var displayTerm = require('../../../components/display-term/display-term.cjs');
+var addressPreferenceContext = require('../../../components/address-preference-context/address-preference-context.cjs');
+var spacer = require('../../../components/spacer/spacer.cjs');
+var addressDisplay = require('../../../components/address-display/address-display.cjs');
+var checkboxInput = require('../../../components/field/checkbox-input/checkbox-input.cjs');
+var buttonGroup = require('../../../components/button-group/button-group.cjs');
+var submitButton = require('../../../components/field/submit-button/submit-button.cjs');
+
+const RegisterFundingSourceCarrierForm = ({
+  terms,
+  defaultAddress,
+  onSubmit,
+  onCancel,
+  requirementTypes
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["register-wallet", "common"]);
+  const {
+    validateAddress
+  } = addressPreferenceContext.useAddressPreference();
+  const [showTerms, setShowTerms] = React.useState(false);
+  const addressRequired = !!(requirementTypes === null || requirementTypes === void 0 ? void 0 : requirementTypes.includes(jsApi.MetadataRequirement.PickupAddress));
+  const form = reactHookForm.useForm({
+    defaultValues: Object.assign({
+      agreeToTerms: false
+    }, addressRequired && defaultAddress && {
+      pickupAddress: Object.assign(Object.assign({}, defaultAddress), {
+        countryCode: defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.countryCode
+      })
+    }),
+    resolver: validation.validationResolver(registerFundingSourceCarrierSchema.getRegisterFundingSourceCarrierSchema(addressRequired))
+  });
+  const watchAddress = form.watch("pickupAddress");
+  const [editWalletAddressForm$1, isEditWalletAddressFormOpen, toggleIsEditWalletAddressFormOpen] = useNestedForm.useNestedForm(editWalletAddressForm.EditWalletAddressForm, {
+    address: watchAddress,
+    formId: "edit-address-form",
+    onSubmit: payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      return form.setValue("pickupAddress", Object.assign({}, payload));
+    })
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const payload = values;
+    addressRequired ? yield validateAddress({
+      addresses: {
+        originAddress: payload.pickupAddress
+      },
+      data: {
+        agreeToTerms: payload.agreeToTerms
+      },
+      onValid: validatedAddressesPayload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+        yield onSubmit({
+          agreeToTerms: payload.agreeToTerms,
+          pickupAddress: Object.assign(Object.assign({}, validatedAddressesPayload.originAddress), {
+            company: validatedAddressesPayload.originAddress.companyName,
+            email: validatedAddressesPayload.originAddress.email,
+            fullName: validatedAddressesPayload.originAddress.name
+          })
+        });
+      })
+    }) : yield onSubmit({
+      agreeToTerms: payload.agreeToTerms
+    });
+  }));
+  const getFormTitle = React.useCallback(() => isEditWalletAddressFormOpen ? t("register-carrier:formTitle.edit") : defaultAddress ? t("register-carrier:formTitle.default") : t("register-carrier:formTitle.new"), [isEditWalletAddressFormOpen, defaultAddress, t]);
+  return jsxRuntime.jsx("form", Object.assign({
+    "data-testid": "register-funding-source-carrier-form",
+    id: "register-funding-source-carrier-form",
+    onSubmit: formLogger.formLogger.capture(handleSubmit)
+  }, {
+    children: jsxRuntime.jsxs(giger.Grid, Object.assign({
+      noPadding: true
+    }, {
+      children: [addressRequired && jsxRuntime.jsxs(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          css: registerFundingSourceCarrierForm_styles.styles.getFormHeaderStyles(isEditWalletAddressFormOpen || !defaultAddress),
+          variant: "subtitle1"
+        }, {
+          children: getFormTitle()
+        })), defaultAddress ? jsxRuntime.jsxs("div", Object.assign({
+          "data-testid": "register-carrier-address-display"
+        }, {
+          children: [!isEditWalletAddressFormOpen && jsxRuntime.jsxs(giger.GridChild, Object.assign({
+            colSpan: 12
+          }, {
+            children: [jsxRuntime.jsx(spacer.Spacer, {
+              multiplier: 2
+            }), jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+              address: form.getValues("pickupAddress"),
+              onEdit: !isEditWalletAddressFormOpen ? () => toggleIsEditWalletAddressFormOpen() : undefined
+            })]
+          })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+            colSpan: 12,
+            css: registerFundingSourceCarrierForm_styles.styles.editAddressForm
+          }, {
+            children: editWalletAddressForm$1
+          }))]
+        })) : jsxRuntime.jsxs(giger.GridChild, Object.assign({
+          colSpan: 12,
+          css: registerFundingSourceCarrierForm_styles.styles.newAddressForm,
+          "data-testid": "address-fields"
+        }, {
+          children: [jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(addressFields.AddressFields, {
+            form: form,
+            formatFieldName: fieldName => `pickupAddress.${fieldName}`,
+            optionalFields: ["addressLine2", "email", "companyName", "phone"]
+          })]
+        }))]
+      })), jsxRuntime.jsxs(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: [jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+          ariaLabel: "I agree to the Terms of Service",
+          checkboxLabel: jsxRuntime.jsx(reactI18next.Trans, {
+            components: {
+              icon: jsxRuntime.jsx(giger.Icon, {
+                name: showTerms ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+                size: giger.IconSize.SIZE_SMALL
+              }),
+              terms: jsxRuntime.jsx(giger.Link, {
+                css: registerFundingSourceCarrierForm_styles.styles.expanderLink,
+                "data-testid": "terms-link",
+                onClick: e => {
+                  e.preventDefault();
+                  setShowTerms(prev => !prev);
+                },
+                role: "button"
+              })
+            },
+            defaults: "I agree to the <terms>Terms of Service</terms>",
+            i18nKey: "terms.agreeToTerms"
+          }),
+          control: form.control,
+          "data-testid": "fields.agreeToTerms",
+          label: t("terms.fields.agreeToTerms"),
+          name: "agreeToTerms"
+        }), showTerms && jsxRuntime.jsxs("div", Object.assign({
+          css: registerFundingSourceCarrierForm_styles.styles.termsWell
+        }, {
+          children: [jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+              variant: "heading4"
+            }, {
+              children: t("terms.carriersTitle")
+            })), terms.map((term, index) => jsxRuntime.jsx(displayTerm.DisplayTerm, {
+              term: term
+            }, index))]
+          }), jsxRuntime.jsx(buttonGroup.ButtonGroup, Object.assign({
+            justify: "end"
+          }, {
+            children: jsxRuntime.jsx(giger.Button, Object.assign({
+              onClick: () => setShowTerms(false),
+              variant: giger.ButtonVariant.OUTLINED
+            }, {
+              children: t("actions.close")
+            }))
+          }))]
+        }))]
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+          justify: "end"
+        }, {
+          children: [jsxRuntime.jsx(giger.Button, Object.assign({
+            bold: true,
+            color: giger.ButtonColor.SECONDARY,
+            "data-testid": "actions.cancel",
+            form: "register-funding-source-carrier-form",
+            onClick: onCancel,
+            type: "button",
+            variant: giger.ButtonVariant.TEXT
+          }, {
+            children: t("actions.cancel")
+          })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+            alwaysRequireValidity: true,
+            control: form.control,
+            form: "register-funding-source-carrier-form",
+            variant: giger.ButtonVariant.FILLED
+          }, {
+            children: t("actions.continue")
+          }))]
+        }))
+      }))]
+    }))
+  }));
+};
+
+exports.RegisterFundingSourceCarrierForm = RegisterFundingSourceCarrierForm;