@wix/form-public 0.48.0 → 0.49.0

package/dist/index.cjs

@@ -16139,7 +16139,18 @@ function useBi() {
   }
   return context;
 }
+var ForcedState = /* @__PURE__ */ (function(ForcedState2) {
+  ForcedState2["BUTTONS_HOVER"] = "BUTTONS_HOVER";
+  ForcedState2["NEXT_BUTTON_HOVER"] = "NEXT_BUTTON_HOVER";
+  ForcedState2["PREVIOUS_BUTTON_HOVER"] = "PREVIOUS_BUTTON_HOVER";
+  ForcedState2["SUBMIT_BUTTON_HOVER"] = "SUBMIT_BUTTON_HOVER";
+  ForcedState2["INPUT_FIELDS_HOVER"] = "INPUT_FIELDS_HOVER";
+  ForcedState2["INPUT_FIELDS_FOCUS"] = "INPUT_FIELDS_FOCUS";
+  ForcedState2["INPUT_FIELDS_ERROR"] = "INPUT_FIELDS_ERROR";
+  return ForcedState2;
+})({});
 var ForcedStateContext = /* @__PURE__ */ React14.createContext([]);
+var useForcedState = () => React14.useContext(ForcedStateContext) || [];
 var FALLBACK = {};
 var ExternalDataContext = /* @__PURE__ */ React14.createContext(void 0);
 var ExternalDataProvider = (_ref) => {
@@ -16193,8 +16204,214 @@ function formFieldFocus(params) {
 var FieldValidationContext = /* @__PURE__ */ React14.createContext(null);
 var useFieldValidation = () => React14.useContext(FieldValidationContext) || {};
 
+// ../form-fields/dist/esm/field-error/error-types.js
+init_esm();
+
+// ../form-fields/dist/esm/constants/locale.js
+var TRANSLATIONS_NAMESPACE = "form-viewer";
+
+// ../form-fields/dist/esm/field-error/get-translated-error.js
+var defaultErrorKeys = {
+  [ErrorType.UNKNOWN_ERROR]: "input.error.message.unknown-error",
+  [ErrorType.TYPE_ERROR]: "input.error.message.type-error",
+  [ErrorType.REQUIRED_VALUE_ERROR]: "input.error.message.required-error",
+  [ErrorType.UNKNOWN_VALUE_ERROR]: "input.error.message.unknown-value-error",
+  [ErrorType.MAX_LENGTH_ERROR]: "input.error.message.max-length-error",
+  [ErrorType.MIN_LENGTH_ERROR]: "input.error.message.min-length-error",
+  [ErrorType.PATTERN_ERROR]: "input.error.message.pattern-error",
+  [ErrorType.FORMAT_ERROR]: "input.error.message.format-error",
+  [ErrorType.MAX_VALUE_ERROR]: "input.error.message.max-value-error",
+  [ErrorType.MIN_VALUE_ERROR]: "input.error.message.min-value-error",
+  [ErrorType.MULTIPLE_OF_VALUE_ERROR]: "input.error.message.multiple-of-value-error",
+  [ErrorType.MIN_ITEMS_ERROR]: "input.error.message.min-items-error",
+  [ErrorType.MAX_ITEMS_ERROR]: "input.error.message.max-items-error",
+  [ErrorType.NOT_ALLOWED_VALUE_ERROR]: "input.error.message.not-allowed-value",
+  [ErrorType.FIELDS_COMPATIBILITY_ERROR]: "input.error.fields-compatibility-error",
+  [ErrorType.FIELDS_COUNT_RESTRICTIONS_ERROR]: "input.error.fields-count-restrictions-error",
+  [ErrorType.FORMS_COUNT_RESTRICTIONS_ERROR]: "input.error.forms-count-restrictions-error",
+  [ErrorType.STEPS_COUNT_RESTRICTIONS_ERROR]: "input.error.steps-count-restrictions-error",
+  [ErrorType.RULES_COUNT_RESTRICTIONS_ERROR]: "input.error.rules-count-restrictions-error",
+  [ErrorType.FILE_UPLOAD_RESTRICTIONS_ERROR]: "input.error.file-upload-restrictions-error",
+  [ErrorType.DISABLED_FORM_ERROR]: "input.error.disabled-form-error",
+  [ErrorType.INVALID_PHONE_COUNTRY_CODE_ERROR]: "input.error.message.invalid-phone-country-code-error",
+  [ErrorType.INVALID_STAFF_ID_ERROR]: "input.error.message.invalid-staff-id-error",
+  [ErrorType.INVALID_LOCATION_ID_ERROR]: "input.error.message.invalid-location-id-error",
+  [ErrorType.MISSING_SERVICE_OPTION_ERROR]: "TBD",
+  [ErrorType.INVALID_SERVICE_OPTIONS_ERROR]: "TBD",
+  [ErrorType.NO_AVAILABLE_SERVICE_OPTIONS_ERROR]: "TBD",
+  [ErrorType.EXACT_CHARACTER_LENGTH_ERROR]: "input.error.message.exact-character-length-error",
+  [ErrorType.CHARACTER_LENGTH_RANGE_ERROR]: "input.error.message.character-length-range-error",
+  [ErrorType.VALUE_RANGE_ERROR]: "input.error.message.value-range-error",
+  [ErrorType.EXACT_ITEMS_NUMBER_ERROR]: "input.error.message.exact-items-number-error",
+  [ErrorType.DECIMAL_POINT_ERROR]: "input.error.message.decimal_point_error",
+  [ErrorType.INCOMPLETE_DATE_ERROR]: "input.error.message.incomplete-date-error",
+  [ErrorType.INVALID_VALUE_FOR_PATTERN_ERROR]: "input.error.message.invalid-value-for-pattern"
+};
+var getTranslatedError = (_ref) => {
+  let {
+    translation,
+    error,
+    fieldType,
+    suffix,
+    currency
+  } = _ref;
+  const {
+    t,
+    i18n
+  } = translation;
+  const formattedFieldType = getFormattedFieldType(fieldType ?? "");
+  const errorKey = defaultErrorKeys[error.errorType];
+  const params = {
+    ...error.params,
+    currency
+  };
+  const fieldErrorKey = `${formattedFieldType}.${errorKey}`;
+  if (suffix) {
+    const fieldErrorKeyWithSuffix = `${fieldErrorKey}.${suffix}`;
+    const errorKeyWithSuffix = `${errorKey}.${suffix}`;
+    if (i18n.exists(`${TRANSLATIONS_NAMESPACE}:${fieldErrorKeyWithSuffix}`)) {
+      return t(fieldErrorKeyWithSuffix, params);
+    }
+    if (i18n.exists(`${TRANSLATIONS_NAMESPACE}:${errorKeyWithSuffix}`)) {
+      return t(errorKeyWithSuffix, params);
+    }
+  }
+  if (i18n.exists(`${TRANSLATIONS_NAMESPACE}:${fieldErrorKey}`)) {
+    return t(fieldErrorKey, params);
+  }
+  return t(defaultErrorKeys[error.errorType], params);
+};
+var getFormattedFieldType = (string) => string.toLowerCase().replace(/_/g, "-");
+
+// ../form-fields/dist/esm/ui/date-field/date-field-utils.js
+var isDateFieldValidationError2 = (error) => {
+  return (error == null ? void 0 : error.errorType) === ErrorType.INCOMPLETE_DATE_ERROR;
+};
+var getDateValidationErrorSuffix = (error) => isDateFieldValidationError2(error) ? error.params.suffix : void 0;
+
+// ../form-fields/dist/esm/ui/date-time-field/date-time-field-utils.js
+var isDateTimeFieldValidationError2 = (error) => {
+  return (error == null ? void 0 : error.errorType) === ErrorType.INCOMPLETE_DATE_ERROR;
+};
+var getDateTimeValidationErrorSuffix = (error) => isDateTimeFieldValidationError2(error) ? error.params.suffix : void 0;
+
+// ../form-fields/dist/esm/field-error/use-error.js
+var getErrorSuffix = (_ref) => {
+  let {
+    fieldType,
+    error,
+    properties
+  } = _ref;
+  switch (fieldType) {
+    case INPUT_FIELD_TYPES.DATE_TIME_INPUT:
+      return getDateTimeValidationErrorSuffix(error);
+    case INPUT_FIELD_TYPES.CONTACTS_BIRTHDATE:
+    case INPUT_FIELD_TYPES.DATE_INPUT:
+      return getDateValidationErrorSuffix(error);
+    case INPUT_FIELD_TYPES.TEXT_INPUT:
+    case INPUT_FIELD_TYPES.QUIZ_SHORT_TEXT:
+    case INPUT_FIELD_TYPES.DEXT_TEXT_INPUT:
+    case INPUT_FIELD_TYPES.DEXT_EMAIL:
+    case INPUT_FIELD_TYPES.CONTACTS_TAX_ID:
+    case INPUT_FIELD_TYPES.CONTACTS_POSITION:
+    case INPUT_FIELD_TYPES.CONTACTS_LAST_NAME:
+    case INPUT_FIELD_TYPES.CONTACTS_FIRST_NAME:
+    case INPUT_FIELD_TYPES.CONTACTS_EMAIL:
+    case INPUT_FIELD_TYPES.CONTACTS_COMPANY:
+    case INPUT_FIELD_TYPES.CONTACTS_ADDRESS:
+    case INPUT_FIELD_TYPES.BOOKINGS_LAST_NAME:
+    case INPUT_FIELD_TYPES.BOOKINGS_FIRST_NAME:
+    case INPUT_FIELD_TYPES.BOOKINGS_EMAIL:
+    case INPUT_FIELD_TYPES.ECOM_PHONE:
+    case INPUT_FIELD_TYPES.ECOM_EMAIL:
+    case INPUT_FIELD_TYPES.ECOM_COMPANY_NAME:
+    case INPUT_FIELD_TYPES.ECOM_ADDITIONAL_INFO:
+    case INPUT_FIELD_TYPES.FULL_NAME_LAST_NAME:
+    case INPUT_FIELD_TYPES.FULL_NAME_FIRST_NAME:
+    case INPUT_FIELD_TYPES.MLA_STREET_NAME:
+    case INPUT_FIELD_TYPES.MLA_ADDRESS_LINE:
+    case INPUT_FIELD_TYPES.MLA_STREET_NUMBER:
+    case INPUT_FIELD_TYPES.MLA_POSTAL_CODE:
+    case INPUT_FIELD_TYPES.MLA_CITY:
+    case INPUT_FIELD_TYPES.MLA_APARTMENT:
+    case INPUT_FIELD_TYPES.MLA_ADDRESS_LINE_2:
+    case INPUT_FIELD_TYPES.IDENTITY_PASSWORD:
+    case INPUT_FIELD_TYPES.RATING_INPUT:
+    case INPUT_FIELD_TYPES.DEXT_RATING_INPUT:
+    case INPUT_FIELD_TYPES.MLA_COUNTRY:
+    case INPUT_FIELD_TYPES.MLA_SUBDIVISION:
+      if (properties && "countryCode" in properties) {
+        const countryCode = properties.countryCode;
+        return typeof countryCode === "string" ? countryCode.toLocaleLowerCase() : void 0;
+      }
+      return void 0;
+    case INPUT_FIELD_TYPES.VAT_ID:
+      if (properties && "country" in properties) {
+        const country = properties.country;
+        return typeof country === "string" ? country.toLocaleLowerCase() : void 0;
+      }
+      return void 0;
+    case INPUT_FIELD_TYPES.SIGNATURE:
+      if (properties && "uploadEnabled" in properties) {
+        return properties.uploadEnabled ? "with-upload" : void 0;
+      }
+      return void 0;
+    default:
+      return void 0;
+  }
+};
+var useError = (_ref2) => {
+  let {
+    error,
+    customErrors,
+    fieldType,
+    properties,
+    validationError
+  } = _ref2;
+  const {
+    currency
+  } = useConfig();
+  const {
+    t,
+    i18n
+  } = useTranslation();
+  const forcedState = useForcedState();
+  if (forcedState.includes(ForcedState.INPUT_FIELDS_ERROR)) {
+    return {
+      hasError: true,
+      errorMessage: t("input.error.message.required-error-forced")
+    };
+  }
+  if (!error) {
+    return {
+      hasError: false
+    };
+  }
+  const customErrorMessage = (error == null ? void 0 : error.useCustomErrorMessage) && (error == null ? void 0 : error.errorMessage) || (customErrors == null ? void 0 : customErrors[error.errorType]);
+  const suffix = fieldType ? getErrorSuffix({
+    fieldType,
+    error: validationError,
+    properties
+  }) : void 0;
+  const errorMessage = customErrorMessage ?? getTranslatedError({
+    translation: {
+      i18n,
+      t
+    },
+    error,
+    fieldType,
+    suffix,
+    currency: currency == null ? void 0 : currency.sign
+  });
+  return {
+    hasError: true,
+    errorMessage
+  };
+};
+
 // ../form-fields/dist/esm/ui/form/components/form/input-field.js
 var InputField = (_ref) => {
+  var _field$properties;
   let {
     field,
     errors,
@@ -16249,6 +16466,16 @@ var InputField = (_ref) => {
     }
     onFieldChange == null || onFieldChange(field.target, value);
   }, [onFieldChange, field, fieldError, validateFields2]);
+  const {
+    hasError,
+    errorMessage
+  } = useError({
+    error: fieldError,
+    customErrors: (_field$properties = field.properties) == null ? void 0 : _field$properties.customErrors,
+    fieldType: field.fieldType,
+    properties: field.properties,
+    validationError: fieldError
+  });
   const FieldComponent = componentsById[field.fieldType];
   if (!FieldComponent) {
     return null;
@@ -16257,6 +16484,8 @@ var InputField = (_ref) => {
     onChange: handleChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
+    hasError,
+    errorMessage,
     error: fieldError,
     errors: fieldErrors,
     value: fieldValue,