@shipengine/elements 2.20.0 → 2.22.0

package/cjs/components/forms/address-form/address-form-schema.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var min = require('libphonenumber-js/min');
+var addressSchema = require('./address-schema.cjs');
+var address = require('../../../constants/shipengine/address.cjs');
+var zod = require('../../../extensions/zod.cjs');
+
+zod.extendZod();
+const refineName = n => n.match(/^[a-zA-Z']/);
+const refineNameStrict = n => n.match(address.addressNameRegex);
+const shipToAddressSchema = addressSchema.addressSchema.refine(schema => {
+  return refineName(schema.name);
+}, {
+  message: "schemaErrors.invalidAddressName",
+  path: ["name"]
+}).refine(schema => !schema.phone || min.isValidPhoneNumber(schema.phone, schema.countryCode), {
+  message: "schemaErrors.notAValidPhoneNumber",
+  path: ["phone"]
+}).refine(schema => {
+  if (schema.countryCode === "US") {
+    return schema.stateProvince && address.usStateCodes.includes(schema.stateProvince);
+  }
+  return true;
+}, {
+  message: "schemaErrors.invalidStateProvince",
+  path: ["stateProvince"]
+}).refine(schema => {
+  if (schema.countryCode === "US") {
+    return address.postalCodeRegex.test(schema.postalCode);
+  }
+  return true;
+}, {
+  message: "schemaErrors.invalidPostalCode",
+  path: ["postalCode"]
+});
+const addressFormSchema = shipToAddressSchema.refine(schema => {
+  return refineNameStrict(schema.name);
+}, {
+  message: "schemaErrors.invalidAddressNameStrict",
+  path: ["name"]
+});
+
+exports.addressFormSchema = addressFormSchema;
+exports.shipToAddressSchema = shipToAddressSchema;

package/cjs/components/forms/address-form/address-form.cjs

@@ -0,0 +1,119 @@
+'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 addressFields = require('./address-fields.cjs');
+var addressFormSchema = require('./address-form-schema.cjs');
+var addressForm_styles = require('./address-form.styles.cjs');
+var addressParser = require('../../address-parser/address-parser.cjs');
+var linkAction = require('../../link-action/link-action.cjs');
+var buttonGroup = require('../../button-group/button-group.cjs');
+var submitButton = require('../../field/submit-button/submit-button.cjs');
+var portal = require('../../portal/portal.cjs');
+
+const AddressForm = ({
+  address,
+  formId,
+  isShipToForm,
+  onCancel,
+  onCancelParse,
+  onSubmit,
+  onSubmitParse,
+  parseAddressErrors,
+  portalRef,
+  resetParseAddress
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const form = reactHookForm.useForm({
+    defaultValues: Object.assign({}, address && address),
+    resolver: validation.validationResolver(isShipToForm ? addressFormSchema.shipToAddressSchema : addressFormSchema.addressFormSchema)
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const payload = tslib.__rest(values, []);
+    yield onSubmit(payload);
+  }));
+  const handleSubmitParse = React.useCallback(payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const parseResult = yield onSubmitParse === null || onSubmitParse === void 0 ? void 0 : onSubmitParse(payload);
+    const _b = (_a = parseResult === null || parseResult === void 0 ? void 0 : parseResult.address) !== null && _a !== void 0 ? _a : {},
+      updatedFields = tslib.__rest(_b, ["addressResidentialIndicator"]);
+    form.reset(Object.assign(Object.assign({}, form.getValues()), updatedFields), {
+      keepDefaultValues: true
+    });
+  }), [form, onSubmitParse]);
+  const [addressParser$1, isAddressParserOpen, toggleIsAddressParserOpen] = useNestedForm.useNestedForm(addressParser.AddressParser, {
+    errors: parseAddressErrors,
+    formId: `${formId !== null && formId !== void 0 ? formId : ""}-address-parser`,
+    onCancel: onCancelParse,
+    onSubmit: handleSubmitParse,
+    reset: resetParseAddress
+  });
+  const formInterface = jsxRuntime.jsxs("div", Object.assign({
+    css: addressForm_styles.styles.formWrapper
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: addressForm_styles.styles.getHeaderWrapper(isAddressParserOpen)
+    }, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true,
+        component: "div",
+        css: addressForm_styles.styles.getHeaderTypography(isAddressParserOpen)
+      }, {
+        children: t("purchase-label:fields.shipTo")
+      })), addressParser$1, !isAddressParserOpen && onSubmitParse && jsxRuntime.jsx("div", Object.assign({
+        css: addressForm_styles.styles.pasteWrapper
+      }, {
+        children: jsxRuntime.jsx(linkAction.LinkAction, {
+          css: addressForm_styles.styles.pasteList,
+          onClick: toggleIsAddressParserOpen,
+          title: t("address.paste")
+        })
+      }))]
+    })), jsxRuntime.jsx(addressFields.AddressFields, {
+      form: form,
+      formId: formId,
+      optionalFields: ["email"]
+    }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+      justify: "end"
+    }, {
+      children: [onCancel && jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        onClick: onCancel,
+        type: "button",
+        variant: giger.ButtonVariant.TEXT
+      }, {
+        children: t("actions.cancel")
+      })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+        control: form.control,
+        form: formId,
+        requireDirty: true,
+        variant: giger.ButtonVariant.OUTLINED
+      }, {
+        children: t("actions.save")
+      }))]
+    }))]
+  }));
+  return jsxRuntime.jsx("form", Object.assign({
+    id: formId,
+    onSubmit: formLogger.formLogger.capture(handleSubmit)
+  }, {
+    children: portalRef !== undefined ? jsxRuntime.jsx(portal.Portal, Object.assign({
+      target: portalRef
+    }, {
+      children: formInterface
+    })) : formInterface
+  }));
+};
+
+exports.AddressForm = AddressForm;

package/cjs/components/forms/address-form/address-form.styles.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  formWrapper: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    marginBottom: styles$1.scopeTheme(theme).spacing(4),
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  getHeaderTypography: isAddressParserOpen => theme => Object.assign({
+    width: "100%"
+  }, isAddressParserOpen && {
+    marginBottom: styles$1.scopeTheme(theme).spacing()
+  }),
+  getHeaderWrapper: isAddressParserOpen => theme => ({
+    display: "flex",
+    flexDirection: isAddressParserOpen ? "column" : "row",
+    paddingBottom: styles$1.scopeTheme(theme).spacing(4),
+    width: "100%"
+  }),
+  pasteList: () => ({
+    flexShrink: 0
+  }),
+  pasteWrapper: () => ({
+    flexShrink: 0
+  })
+});
+
+exports.styles = styles;

package/cjs/components/forms/address-form/address-schema.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod$1 = require('zod');
+var zod = require('../../../extensions/zod.cjs');
+var address = require('../../../constants/shipengine/address.cjs');
+
+zod.extendZod();
+const addressLine1Schema = zod$1.z.string().trim().min(1);
+const addressLine2Schema = zod$1.z.string().trim().nullishDefault(undefined);
+const companyNameSchema = zod$1.z.string().trim().min(2).max(40).nullishDefault(undefined).or(zod$1.z.literal("")).transform(companyName => companyName || undefined);
+const addressSchema = zod$1.z.object({
+  addressLine1: addressLine1Schema,
+  addressLine2: addressLine2Schema,
+  cityLocality: zod$1.z.string().trim().min(1),
+  companyName: companyNameSchema,
+  countryCode: zod$1.z.enum(address.countryCodes),
+  email: zod$1.z.string().email().trim().nullishDefault(undefined),
+  name: zod$1.z.string().trim().min(1),
+  phone: zod$1.z.string().trim().nullishDefault(""),
+  postalCode: zod$1.z.string().trim(),
+  stateProvince: zod$1.z.string().trim().nullishDefault("")
+});
+
+exports.addressLine1Schema = addressLine1Schema;
+exports.addressLine2Schema = addressLine2Schema;
+exports.addressSchema = addressSchema;
+exports.companyNameSchema = companyNameSchema;

package/cjs/components/forms/address-form/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addressForm = require('./address-form.cjs');
+var addressFormSchema = require('./address-form-schema.cjs');
+var addressFields = require('./address-fields.cjs');
+var addressSchema = require('./address-schema.cjs');
+
+
+
+exports.AddressForm = addressForm.AddressForm;
+exports.addressFormSchema = addressFormSchema.addressFormSchema;
+exports.AddressFields = addressFields.AddressFields;
+exports.addressLine1Schema = addressSchema.addressLine1Schema;
+exports.addressLine2Schema = addressSchema.addressLine2Schema;
+exports.addressSchema = addressSchema.addressSchema;
+exports.companyNameSchema = addressSchema.companyNameSchema;

package/cjs/components/forms/auto-funding-form/auto-funding-form.cjs

@@ -0,0 +1,241 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+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 reactApi = require('@shipengine/react-api');
+var autoFundingForm_styles = require('./auto-funding-form.styles.cjs');
+var autoFundingSchema = require('./auto-funding-schema.cjs');
+var spread = require('../../spread/spread.cjs');
+var moneyInput = require('../../field/money-input/money-input.cjs');
+var loader = require('../../loader/loader.cjs');
+var _switch = require('../../field/switch/switch.cjs');
+var linkAction = require('../../link-action/link-action.cjs');
+var spacer = require('../../spacer/spacer.cjs');
+var numberInput = require('../../field/number-input/number-input.cjs');
+var buttonGroup = require('../../button-group/button-group.cjs');
+var submitButton = require('../../field/submit-button/submit-button.cjs');
+
+/**
+ * @internal
+ *
+ * # Auto Funding Form Component
+ *
+ * This form that allows users to enable or disable auto funding, and
+ * configure auto funding rules in ShipEngine API.
+ *
+ * @param carrierId The carrierId of the carrier provider you wish to configure auto-funding rules for.
+ *
+ * @returns Element A React element that renders the Auto Funding Form allowing users to configure
+ * auto-funding rules for a given carrier provider.
+ *
+ * @see {@link AutoFundingFormProps | The props that are passed into the `<AutoFundingForm />` component}
+ */
+const AutoFundingForm = ({
+  carrierId,
+  currency
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    mutate: updateAutoFunding,
+    isLoading: updateAutoFundingIsLoading
+  } = reactApi.useUpdateAutoFunding();
+  const {
+    // TODO: fix this datatype in alchemy the enabled field is outdated
+    data: autoFundingConfig,
+    refetch: autoFundingConfigRefetch,
+    isInitialLoading: isLoadingAutoFundingConfig,
+    error: autoFundingConfigErrors
+  } = reactApi.useGetAutoFundingConfiguration(carrierId);
+  // TODO: Remove this cast when fixed in alchemy
+  const castedAutoFundingConfig = autoFundingConfig;
+  const [showForm, setShowForm] = React.useState(false);
+  const [isSwitchOn, setIsSwitchOn] = React.useState((_a = castedAutoFundingConfig === null || castedAutoFundingConfig === void 0 ? void 0 : castedAutoFundingConfig.isEnabled) !== null && _a !== void 0 ? _a : false);
+  React.useEffect(() => {
+    if (castedAutoFundingConfig !== undefined) {
+      setIsSwitchOn(castedAutoFundingConfig.isEnabled);
+    }
+  }, [castedAutoFundingConfig]);
+  const form = reactHookForm.useForm({
+    resolver: validation.validationResolver(autoFundingSchema.autoFundingSchema)
+  });
+  const watchIsEnabled = form.watch("isEnabled");
+  const formReset = isEnabled => form.reset(values => Object.assign(Object.assign({}, values), {
+    isEnabled
+  }), {
+    keepDirty: true
+  });
+  const handleSubmit = formLogger.formLogger.capture(form.handleSubmit(values => {
+    setShowForm(prev => !prev);
+    setIsSwitchOn(true);
+    const payload = values;
+    updateAutoFunding(Object.assign({
+      carrierId
+    }, payload), {
+      onSuccess: () => autoFundingConfigRefetch()
+    });
+  }));
+  const handleCancel = () => {
+    setShowForm(false);
+    // The default is if a user cancels out of the form it should not disable auto funding - in case the user tried to edit an already established rule
+    // this handles the scenario where you cancel with no rule having been established - in which case we want to disable auto-funding.
+    !(castedAutoFundingConfig === null || castedAutoFundingConfig === void 0 ? void 0 : castedAutoFundingConfig.isEnabled) && setIsSwitchOn(false);
+  };
+  /**
+   * This function toggles the form visibility and conditionally disables auto-funding
+   * when falsy. This is because when someone toggles the enable auto-funding switch
+   * off, they do not want to have auto-funding enabled at all.
+   */
+  const handleToggle = isEnabled => {
+    setIsSwitchOn(isEnabled);
+    setShowForm(isEnabled);
+    formReset(isEnabled);
+    if (!isEnabled) {
+      setIsSwitchOn(isEnabled);
+      updateAutoFunding(Object.assign({
+        carrierId
+      }, form.getValues()), {
+        onSuccess: () => autoFundingConfigRefetch()
+      });
+    }
+  };
+  if (isLoadingAutoFundingConfig || updateAutoFundingIsLoading) {
+    return jsxRuntime.jsx(loader.Loader, {
+      message: t("manage-funding:autoFunding.isLoading")
+    });
+  }
+  if (!autoFundingConfig) {
+    throw new Error(t("errorMessages:unableToLoad.autoFundingSettings"));
+  }
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(spread.Spread, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: !!(autoFundingConfig === null || autoFundingConfig === void 0 ? void 0 : autoFundingConfig.isAutoPurchaseEnabled),
+        variant: "body1"
+      }, {
+        children: t("manage-funding:autoFunding:isEnabledCTA")
+      })), jsxRuntime.jsx(_switch.Switch, {
+        "data-testid": "auto-funding-toggle",
+        defaultChecked: isSwitchOn,
+        name: "isEnabled",
+        onChange: e => handleToggle(e.target.checked),
+        value: isSwitchOn
+      })]
+    }), !!(castedAutoFundingConfig === null || castedAutoFundingConfig === void 0 ? void 0 : castedAutoFundingConfig.isEnabled) && !showForm && jsxRuntime.jsxs(spread.Spread, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        variant: "body1"
+      }, {
+        children: t("manage-funding:autoFunding.readSettings", {
+          // TODO: look into plural feature of translate and use count (couldn't get it to work at the time of this work)
+          autoPurchaseAmount: moneyInput.transform.in(castedAutoFundingConfig === null || castedAutoFundingConfig === void 0 ? void 0 : castedAutoFundingConfig.purchaseAmount).amount,
+          autoPurchaseCutoff: castedAutoFundingConfig === null || castedAutoFundingConfig === void 0 ? void 0 : castedAutoFundingConfig.maximumPurchasesPerDay,
+          autoPurchaseThreshold: moneyInput.transform.in(castedAutoFundingConfig === null || castedAutoFundingConfig === void 0 ? void 0 : castedAutoFundingConfig.lowBalancePurchaseThreshold).amount,
+          pluralTimes: (castedAutoFundingConfig === null || castedAutoFundingConfig === void 0 ? void 0 : castedAutoFundingConfig.maximumPurchasesPerDay) === 1 ? "" : "s"
+        })
+      })), jsxRuntime.jsx(linkAction.LinkAction, {
+        css: autoFundingForm_styles.styles.edit,
+        onClick: () => handleToggle(true),
+        title: t("manage-funding:autoFunding:edit")
+      })]
+    }), jsxRuntime.jsxs("form", Object.assign({
+      css: autoFundingForm_styles.styles.getForm(showForm),
+      "data-testid": "auto-funding-form",
+      id: "auto-funding-form",
+      onSubmit: handleSubmit
+    }, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true,
+        variant: "body1"
+      }, {
+        children: t("manage-funding:autoFunding:editSettings")
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 1
+      }), jsxRuntime.jsx("div", Object.assign({
+        css: autoFundingForm_styles.styles.marginLeft
+      }, {
+        children: jsxRuntime.jsx(moneyInput.MoneyInput, {
+          control: form.control,
+          "data-testid": "auto-funding-threshold-input",
+          defaultValue: {
+            amount: 10,
+            currency
+          },
+          disabled: !watchIsEnabled,
+          label: t("manage-funding:autoFunding.lowBalancePurchaseThreshold"),
+          labelWeight: "normal",
+          labelWidth: 180,
+          name: "lowBalancePurchaseThreshold",
+          showCurrencySymbol: true
+        })
+      })), jsxRuntime.jsx("div", Object.assign({
+        css: autoFundingForm_styles.styles.marginLeft
+      }, {
+        children: jsxRuntime.jsx(moneyInput.MoneyInput, {
+          control: form.control,
+          "data-testid": "auto-funding-purchase-amount-input",
+          defaultValue: {
+            amount: 10,
+            currency
+          },
+          disabled: !watchIsEnabled,
+          label: t("manage-funding:autoFunding.purchaseAmount"),
+          labelWeight: "normal",
+          labelWidth: 180,
+          name: "purchaseAmount",
+          showCurrencySymbol: true
+        })
+      })), jsxRuntime.jsx("div", Object.assign({
+        css: autoFundingForm_styles.styles.marginLeft
+      }, {
+        children: jsxRuntime.jsx(numberInput.NumberInput, {
+          control: form.control,
+          "data-testid": "auto-funding-max-per-day-input",
+          defaultValue: autoFundingConfig === null || autoFundingConfig === void 0 ? void 0 : autoFundingConfig.autoPurchaseCutoff,
+          disabled: !watchIsEnabled,
+          isInteger: true,
+          label: t("manage-funding:autoFunding.maximumPurchasesPerDay"),
+          labelWeight: "normal",
+          labelWidth: 180,
+          name: "maximumPurchasesPerDay"
+        })
+      })), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: [jsxRuntime.jsx(giger.Button, Object.assign({
+          onClick: handleCancel,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+          control: form.control,
+          "data-testid": "submit-auto-funding",
+          disabled: !watchIsEnabled,
+          requireDirty: true,
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("manage-funding:actions.saveRule")
+        }))]
+      }))]
+    })), autoFundingConfigErrors && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 1
+      }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        title: t("manage-funding:autoFunding.error.title"),
+        type: giger.NotificationType.ERROR
+      }, {
+        children: autoFundingConfigErrors[0].message
+      }))]
+    })]
+  });
+};
+
+exports.AutoFundingForm = AutoFundingForm;

package/cjs/components/forms/auto-funding-form/auto-funding-form.styles.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  edit: theme => ({
+    color: styles$1.scopeTheme(theme).palette.primary.main,
+    padding: `0 ${styles$1.scopeTheme(theme).spacing(2)}`
+  }),
+  getForm: showForm => theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    display: showForm ? "flex" : "none",
+    flexDirection: "column",
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  marginLeft: theme => ({
+    marginLeft: styles$1.scopeTheme(theme).spacing(4)
+  })
+});
+
+exports.styles = styles;

package/cjs/components/forms/auto-funding-form/auto-funding-schema.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+var money = require('../../../schemas/shipengine/money.cjs');
+
+/**
+ * @internal
+ *
+ * # Auto Funding Form Schema
+ *
+ * @see {@link AutoFundingForm | Auto Funding Form component using this schema}
+ * */
+const autoFundingSchema = zod.z.object({
+  isEnabled: zod.z.boolean(),
+  lowBalancePurchaseThreshold: money.moneySchema.extend({
+    amount: zod.z.number().min(10)
+  }),
+  maximumPurchasesPerDay: zod.z.number().min(1),
+  purchaseAmount: money.moneySchema.extend({
+    amount: zod.z.number().min(10).max(10000)
+  })
+});
+
+exports.autoFundingSchema = autoFundingSchema;

package/cjs/components/forms/auto-funding-form/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var autoFundingForm = require('./auto-funding-form.cjs');
+
+
+
+exports.AutoFundingForm = autoFundingForm.AutoFundingForm;

package/cjs/components/forms/edit-billing-form/edit-billing-form.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var formLogger = require('../../../utilities/form-logger.cjs');
+var validation = require('../../../utilities/validation.cjs');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var billingFields = require('../wallet-form/billing-fields.cjs');
+var editBillingForm_styles = require('./edit-billing-form.styles.cjs');
+var walletSchema = require('../wallet-form/wallet-schema.cjs');
+var addressFields = require('../address-form/address-fields.cjs');
+var buttonGroup = require('../../button-group/button-group.cjs');
+var submitButton = require('../../field/submit-button/submit-button.cjs');
+
+const EditBillingForm = ({
+  onCancel,
+  onSubmit,
+  isLoading
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const form = reactHookForm.useForm({
+    resolver: validation.validationResolver(walletSchema.getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"])
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const {
+      address,
+      creditCard
+    } = values;
+    const billingInfo = Object.assign(Object.assign({}, address), {
+      company: address.companyName ? address.companyName : "",
+      email: address.email,
+      fullName: address.name
+    });
+    onSubmit(billingInfo, creditCard);
+  }));
+  return jsxRuntime.jsx("form", Object.assign({
+    onSubmit: formLogger.formLogger.capture(handleSubmit)
+  }, {
+    children: jsxRuntime.jsxs(giger.Grid, Object.assign({
+      css: editBillingForm_styles.styles.container
+    }, {
+      children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12,
+        css: editBillingForm_styles.styles.subtitle
+      }, {
+        children: jsxRuntime.jsx(giger.Typography, Object.assign({
+          variant: "subtitle1"
+        }, {
+          children: t("register-wallet:settings.billing.subtitleCard")
+        }))
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx(billingFields.BillingFields, {
+          form: form
+        })
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12,
+        css: editBillingForm_styles.styles.subtitle
+      }, {
+        children: jsxRuntime.jsx(giger.Typography, Object.assign({
+          variant: "subtitle1"
+        }, {
+          children: t("register-wallet:settings.billing.subtitleBilling")
+        }))
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx(addressFields.AddressFields, {
+          form: form,
+          formatFieldName: fieldName => `address.${fieldName}`,
+          optionalFields: ["addressLine2"]
+        })
+      })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+          justify: "end"
+        }, {
+          children: [jsxRuntime.jsx(giger.Button, Object.assign({
+            color: giger.ButtonColor.SECONDARY,
+            onClick: onCancel,
+            variant: giger.ButtonVariant.TEXT
+          }, {
+            children: t("actions.cancel")
+          })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+            control: form.control,
+            css: editBillingForm_styles.styles.boldLink,
+            isLoading: isLoading,
+            variant: giger.ButtonVariant.OUTLINED
+          }, {
+            children: t("actions.save")
+          }))]
+        }))
+      }))]
+    }))
+  }));
+};
+
+exports.EditBillingForm = EditBillingForm;

package/cjs/components/forms/edit-billing-form/edit-billing-form.styles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  boldLink: theme => ({
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.bold
+  }),
+  container: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    rowGap: "0 !important"
+  }),
+  heading: {
+    textAlign: "center"
+  },
+  subtitle: theme => ({
+    paddingBottom: styles$1.scopeTheme(theme).spacing(2),
+    textAlign: "left"
+  })
+});
+
+exports.styles = styles;