@shipengine/elements 2.20.0 → 2.21.0

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var editBillingForm = require('./edit-billing-form.cjs');
+
+
+
+exports.EditBillingForm = editBillingForm.EditBillingForm;

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

@@ -0,0 +1,82 @@
+'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 styles = require('../../../utilities/styles.cjs');
+var validation = require('../../../utilities/validation.cjs');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var addressFields = require('../address-form/address-fields.cjs');
+var walletSchema = require('../wallet-form/wallet-schema.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 EditWalletAddressForm = ({
+  address,
+  formId,
+  onCancel,
+  onSubmit,
+  portalRef
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const form = reactHookForm.useForm({
+    defaultValues: Object.assign({}, address && address),
+    resolver: validation.validationResolver(walletSchema.getBillingAddressSchema("emailOptional"))
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const payload = tslib.__rest(values, []);
+    onSubmit(payload);
+  }));
+  const formInterface = jsxRuntime.jsxs("div", Object.assign({
+    css: theme => ({
+      backgroundColor: styles.scopeTheme(theme).palette.gray.ultraLight,
+      marginBottom: styles.scopeTheme(theme).spacing(4),
+      marginLeft: -styles.scopeTheme(theme).spacing(2),
+      marginRight: -styles.scopeTheme(theme).spacing(2),
+      padding: styles.scopeTheme(theme).spacing(2)
+    })
+  }, {
+    children: [jsxRuntime.jsx(addressFields.AddressFields, {
+      form: form,
+      formId: formId,
+      optionalFields: ["addressLine2", "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.EditWalletAddressForm = EditWalletAddressForm;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var editWalletAddressForm = require('./edit-wallet-address-form.cjs');
+
+
+
+exports.EditWalletAddressForm = editWalletAddressForm.EditWalletAddressForm;

package/cjs/components/forms/register-funding-source-insurance-form/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var registerFundingSourceInsuranceForm = require('./register-funding-source-insurance-form.cjs');
+
+
+
+exports.RegisterFundingSourceInsuranceForm = registerFundingSourceInsuranceForm.RegisterFundingSourceInsuranceForm;

package/cjs/components/forms/register-funding-source-insurance-form/register-funding-source-insurance-form-schema.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+
+const registerFundingSourceInsuranceSchema = zod.z.object({
+  agreeToTerms: zod.z.literal(true)
+});
+
+exports.registerFundingSourceInsuranceSchema = registerFundingSourceInsuranceSchema;

package/cjs/components/forms/register-funding-source-insurance-form/register-funding-source-insurance-form.cjs

@@ -0,0 +1,137 @@
+'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 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 registerFundingSourceInsuranceFormSchema = require('./register-funding-source-insurance-form-schema.cjs');
+var registerFundingSourceInsuranceFrom_styles = require('./register-funding-source-insurance-from.styles.cjs');
+var spacer = require('../../spacer/spacer.cjs');
+var checkboxInput = require('../../field/checkbox-input/checkbox-input.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 RegisterFundingSourceInsuranceForm = ({
+  formId,
+  portalRef,
+  insuranceProviderProfile,
+  onSubmit,
+  onCancel,
+  showDescription
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["register-wallet", "common"]);
+  const [connectionFailed, setConnectionFailed] = React.useState(false);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      agreeToTerms: false
+    },
+    resolver: validation.validationResolver(registerFundingSourceInsuranceFormSchema.registerFundingSourceInsuranceSchema)
+  });
+  const handleSubmit = form.handleSubmit(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const response = yield onSubmit();
+    if (!(response === null || response === void 0 ? void 0 : response.isSuccessful)) {
+      setConnectionFailed(true);
+    }
+  }));
+  const formInterface = jsxRuntime.jsxs(giger.Grid, Object.assign({
+    css: {
+      gap: "0 !important"
+    },
+    noPadding: true
+  }, {
+    children: [connectionFailed && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+          title: t("sections.insuranceProviders.connectionError.title"),
+          type: giger.NotificationType.ERROR
+        }, {
+          children: t("sections.insuranceProviders.connectionError.description")
+        }))
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      })]
+    }), showDescription && jsxRuntime.jsxs(giger.GridChild, Object.assign({
+      colSpan: 12,
+      css: registerFundingSourceInsuranceFrom_styles.styles.formDescription
+    }, {
+      children: [jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: t(`sections.insuranceProviders.${insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.provider}.description`)
+      }), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      })]
+    })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+      colSpan: 12
+    }, {
+      children: jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+        ariaLabel: "I agree to the Terms of Service",
+        checkboxLabel: jsxRuntime.jsxs(reactI18next.Trans, {
+          children: [t(`sections.insuranceProviders.${insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.provider}.terms`), jsxRuntime.jsxs(giger.Link, Object.assign({
+            "aria-label": "Opens in a new tab",
+            css: registerFundingSourceInsuranceFrom_styles.styles.termsLink,
+            href: insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.terms.links[0].link,
+            isExternal: true,
+            rel: "noreferrer",
+            target: "_blank"
+          }, {
+            children: ["\u00A0", t(`sections.insuranceProviders.${insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.provider}.termsLink`), "\u00A0 ", jsxRuntime.jsx(giger.Icon, {
+              name: gigerTheme.IconNames.NEW_WINDOW,
+              size: giger.IconSize.SIZE_SMALL
+            })]
+          }))]
+        }),
+        control: form.control,
+        "data-testid": "fields.agreeToTerms",
+        label: t("terms.agreeToTerms"),
+        name: "agreeToTerms"
+      })
+    })), 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: formId,
+          onClick: onCancel,
+          type: "button",
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+          alwaysRequireValidity: true,
+          control: form.control,
+          form: formId
+        }, {
+          children: t("actions.enable")
+        }))]
+      }))
+    }))]
+  }));
+  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.RegisterFundingSourceInsuranceForm = RegisterFundingSourceInsuranceForm;

package/cjs/components/forms/register-funding-source-insurance-form/register-funding-source-insurance-from.styles.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  formDescription: theme => ({
+    display: "inline",
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S,
+    letterSpacing: "0.03em",
+    lineHeight: styles$1.scopeTheme(theme).typography.lineHeight.S
+  }),
+  termsLink: theme => ({
+    "&:visited": {
+      color: styles$1.scopeTheme(theme).palette.secondary.main
+    },
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+  })
+});
+
+exports.styles = styles;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shipFromAddressForm = require('./ship-from-address-form.cjs');
+var shipFromAddressFormSchema = require('./ship-from-address-form-schema.cjs');
+
+
+
+exports.ShipFromAddressForm = shipFromAddressForm.ShipFromAddressForm;
+exports.shipFromAddressFormSchema = shipFromAddressFormSchema.shipFromAddressFormSchema;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+var warehouseFormSchema = require('../warehouse-form/warehouse-form-schema.cjs');
+
+const shipFromAddressSchema = warehouseFormSchema.getWarehouseAddressSchema(true, false, false);
+const shipFromAddressFormSchema = zod.z.discriminatedUnion("returnToAddressIsDifferent", [zod.z.object({
+  originAddress: shipFromAddressSchema,
+  returnAddress: shipFromAddressSchema,
+  returnToAddressIsDifferent: zod.z.literal(true)
+}), zod.z.object({
+  originAddress: shipFromAddressSchema,
+  returnToAddressIsDifferent: zod.z.literal(false)
+})]);
+
+exports.shipFromAddressFormSchema = shipFromAddressFormSchema;

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

@@ -0,0 +1,191 @@
+'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 isEqual = require('lodash/isEqual.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var shipFromAddressFormSchema = require('./ship-from-address-form-schema.cjs');
+var shipFromAddressForm_styles = require('./ship-from-address-form.styles.cjs');
+var addressFields = require('../address-form/address-fields.cjs');
+var addressPreferenceContext = require('../../address-preference-context/address-preference-context.cjs');
+var addressParser = require('../../address-parser/address-parser.cjs');
+var linkAction = require('../../link-action/link-action.cjs');
+var checkboxInput = require('../../field/checkbox-input/checkbox-input.cjs');
+var buttonGroup = require('../../button-group/button-group.cjs');
+var submitButton = require('../../field/submit-button/submit-button.cjs');
+var portal = require('../../portal/portal.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+const ShipFromAddressForm = ({
+  shipFromAddress,
+  onSubmit,
+  onSubmitParse,
+  resetParseAddress,
+  onCancelParse,
+  parseAddressErrors,
+  preValidationErrors,
+  onCancel,
+  formId,
+  portalRef
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "manage-warehouses"]);
+  const {
+    validateAddress,
+    userInput
+  } = addressPreferenceContext.useAddressPreference();
+  const hasDefaultValues = !!shipFromAddress || !!userInput;
+  const form = reactHookForm.useForm({
+    defaultValues: shipFromAddress ? {
+      originAddress: Object.assign(Object.assign({}, shipFromAddress.originAddress), {
+        countryCode: shipFromAddress.originAddress.countryCode
+      }),
+      returnAddress: Object.assign(Object.assign({}, shipFromAddress.returnAddress), {
+        countryCode: shipFromAddress.returnAddress.countryCode
+      }),
+      returnToAddressIsDifferent: !isEqual__default["default"](shipFromAddress.originAddress, shipFromAddress.returnAddress)
+    } : userInput ? {
+      originAddress: Object.assign(Object.assign({}, userInput.originAddress), {
+        countryCode: userInput.originAddress.countryCode
+      }),
+      returnAddress: Object.assign(Object.assign({}, userInput.returnAddress), {
+        countryCode: (_a = userInput.returnAddress) === null || _a === void 0 ? void 0 : _a.countryCode
+      }),
+      returnToAddressIsDifferent: !!userInput.returnAddress
+    } : {
+      returnToAddressIsDifferent: false
+    },
+    resolver: validation.validationResolver(shipFromAddressFormSchema.shipFromAddressFormSchema)
+  });
+  const handleSubmitParse = React.useCallback(payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    var _b;
+    const parseResult = yield onSubmitParse === null || onSubmitParse === void 0 ? void 0 : onSubmitParse(payload);
+    const _c = (_b = parseResult === null || parseResult === void 0 ? void 0 : parseResult.address) !== null && _b !== void 0 ? _b : {},
+      updatedFields = tslib.__rest(_c, ["addressResidentialIndicator"]);
+    form.reset(Object.assign(Object.assign({}, form.getValues()), {
+      originAddress: updatedFields
+    }), {
+      keepDefaultValues: true
+    });
+  }), [form, onSubmitParse]);
+  const [addressParser$1, isAddressParserOpen, toggleIsAddressParserOpen] = useNestedForm.useNestedForm(addressParser.AddressParser, {
+    errors: parseAddressErrors,
+    formId: `${formId}-address-parser`,
+    onCancel: onCancelParse,
+    onSubmit: handleSubmitParse,
+    reset: resetParseAddress
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const _d = values,
+      payload = tslib.__rest(_d, ["returnToAddressIsDifferent"]);
+    yield validateAddress({
+      addresses: payload,
+      onValid: validatedAddressesPayload => {
+        onSubmit(validatedAddressesPayload);
+      }
+    });
+  }));
+  React.useEffect(() => {
+    // if there are pre-validation errors, trigger the form to show the errors to the user
+    preValidationErrors && void form.trigger();
+  }, [form, preValidationErrors]);
+  const formInterface = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: shipFromAddressForm_styles.styles.getHeaderWrapper(isAddressParserOpen)
+    }, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true,
+        component: "div",
+        css: shipFromAddressForm_styles.styles.getHeaderTypography(isAddressParserOpen)
+      }, {
+        children: t("purchase-label:fields.warehouse")
+      })), addressParser$1, !isAddressParserOpen && onSubmitParse && jsxRuntime.jsx("div", Object.assign({
+        css: shipFromAddressForm_styles.styles.pasteWrapper
+      }, {
+        children: jsxRuntime.jsx(linkAction.LinkAction, {
+          css: shipFromAddressForm_styles.styles.pasteList,
+          onClick: toggleIsAddressParserOpen,
+          title: t("address.paste")
+        })
+      }))]
+    })), jsxRuntime.jsx(addressFields.AddressFields, {
+      form: form,
+      formatFieldName: fieldName => `originAddress.${fieldName}`,
+      optionalFields: ["addressLine2", "email"]
+    }), jsxRuntime.jsx(checkboxInput.CheckboxInput, {
+      ariaLabel: "Return To Address Is Different",
+      checkboxLabel: t("manage-warehouses:returnToAddressIsDifferent"),
+      control: form.control,
+      "data-testid": "returnToAddressIsDifferent",
+      form: formId,
+      label: "returnToAddressIsDifferent",
+      name: "returnToAddressIsDifferent",
+      onClick: e => {
+        if (e.currentTarget.checked) {
+          form.reset(formValues => Object.assign(Object.assign({}, formValues), {
+            returnAddress: Object.assign(Object.assign({}, {}), {
+              addressResidentialIndicator: false,
+              companyName: "",
+              countryCode: "US"
+            }),
+            returnToAddressIsDifferent: true
+          }), {
+            keepErrors: true
+          });
+        }
+      }
+    }), form.watch("returnToAddressIsDifferent") && jsxRuntime.jsx(addressFields.AddressFields, {
+      form: form,
+      formatFieldName: fieldName => `returnAddress.${fieldName}`,
+      optionalFields: ["addressLine2"]
+    }), jsxRuntime.jsx(buttonGroup.ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+        justify: onCancel ? "end" : "center"
+      }, {
+        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,
+          "data-testid": "warehouseFormSubmitButton",
+          form: formId,
+          requireDirty: !hasDefaultValues,
+          variant: onCancel ? giger.ButtonVariant.OUTLINED : giger.ButtonVariant.FILLED
+        }, {
+          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.ShipFromAddressForm = ShipFromAddressForm;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  getHeaderTypography: isAddressParserOpen => theme => Object.assign({
+    width: "100%"
+  }, isAddressParserOpen && {
+    marginBottom: styles$1.scopeTheme(theme).spacing()
+  }),
+  getHeaderWrapper: isAddressParserOpen => theme => ({
+    display: "flex",
+    flexDirection: isAddressParserOpen ? "column" : "row",
+    justifyContent: "space-between",
+    paddingBottom: styles$1.scopeTheme(theme).spacing(4),
+    width: "100%"
+  }),
+  pasteList: theme => ({
+    flexShrink: 0,
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+  }),
+  pasteWrapper: () => ({
+    flexShrink: 0
+  })
+});
+
+exports.styles = styles;

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+var address = require('../../../constants/shipengine/address.cjs');
+
+const vatSchema = zod.z.object({
+  issuingAuthority: zod.z.enum(address.countryCodes),
+  vat: zod.z.object({
+    number: zod.z.string().trim().min(1),
+    type: zod.z.string()
+  })
+});
+
+exports.vatSchema = vatSchema;