@wix/form-public 0.45.0 → 0.47.0

package/dist/index.js

@@ -900,6 +900,13 @@ var init_types_impl2 = __esm({
       ErrorType2["MISSING_SERVICE_OPTION_ERROR"] = "MISSING_SERVICE_OPTION_ERROR";
       ErrorType2["INVALID_SERVICE_OPTIONS_ERROR"] = "INVALID_SERVICE_OPTIONS_ERROR";
       ErrorType2["NO_AVAILABLE_SERVICE_OPTIONS_ERROR"] = "NO_AVAILABLE_SERVICE_OPTIONS_ERROR";
+      ErrorType2["EXACT_CHARACTER_LENGTH_ERROR"] = "EXACT_CHARACTER_LENGTH_ERROR";
+      ErrorType2["CHARACTER_LENGTH_RANGE_ERROR"] = "CHARACTER_LENGTH_RANGE_ERROR";
+      ErrorType2["VALUE_RANGE_ERROR"] = "VALUE_RANGE_ERROR";
+      ErrorType2["EXACT_ITEMS_NUMBER_ERROR"] = "EXACT_ITEMS_NUMBER_ERROR";
+      ErrorType2["DECIMAL_POINT_ERROR"] = "DECIMAL_POINT_ERROR";
+      ErrorType2["INCOMPLETE_DATE_ERROR"] = "INCOMPLETE_DATE_ERROR";
+      ErrorType2["INVALID_VALUE_FOR_PATTERN_ERROR"] = "INVALID_VALUE_FOR_PATTERN_ERROR";
     })(ErrorType || (ErrorType = {}));
     (function(Format6) {
       Format6["UNDEFINED"] = "UNDEFINED";
@@ -1712,6 +1719,267 @@ var init_errors = __esm({
   }
 });
 
+// ../form-validator/dist/esm/lib/error-derivation/types.js
+var DateFieldErrorSuffix, DateTimeFieldErrorSuffix;
+var init_types = __esm({
+  "../form-validator/dist/esm/lib/error-derivation/types.js"() {
+    (function(DateFieldErrorSuffix2) {
+      DateFieldErrorSuffix2["YEAR_MONTH"] = "year-month";
+      DateFieldErrorSuffix2["YEAR_DAY"] = "year-day";
+      DateFieldErrorSuffix2["MONTH_DAY"] = "month-day";
+      DateFieldErrorSuffix2["YEAR"] = "year";
+      DateFieldErrorSuffix2["MONTH"] = "month";
+      DateFieldErrorSuffix2["DAY"] = "day";
+    })(DateFieldErrorSuffix || (DateFieldErrorSuffix = {}));
+    (function(DateTimeFieldErrorSuffix2) {
+      DateTimeFieldErrorSuffix2["YEAR_MONTH_TIME"] = "year-month-time";
+      DateTimeFieldErrorSuffix2["YEAR_DAY_TIME"] = "year-day-time";
+      DateTimeFieldErrorSuffix2["MONTH_DAY_TIME"] = "month-day-time";
+      DateTimeFieldErrorSuffix2["YEAR_TIME"] = "year-time";
+      DateTimeFieldErrorSuffix2["MONTH_TIME"] = "month-time";
+      DateTimeFieldErrorSuffix2["DAY_TIME"] = "day-time";
+      DateTimeFieldErrorSuffix2["TIME"] = "time";
+    })(DateTimeFieldErrorSuffix || (DateTimeFieldErrorSuffix = {}));
+  }
+});
+
+// ../form-validator/dist/esm/lib/error-derivation/helpers.js
+function getDecimalPlacesCount(multipleOf) {
+  return String(multipleOf).split(".")?.[1]?.length || 0;
+}
+function deserializeDate(value) {
+  if (!value) {
+    return {};
+  }
+  const parts = value.split("-");
+  if (parts.length === 3) {
+    const [year, month, day] = parts;
+    return {
+      YEAR: year || void 0,
+      MONTH: month || void 0,
+      DAY: day || void 0
+    };
+  }
+  return {};
+}
+function parseDateTimeValue(value) {
+  if (!value) {
+    return ["", ""];
+  }
+  const separator = value.indexOf("T") > -1 ? "T" : " ";
+  const [date, time] = value.split(separator);
+  return [date || "", time || ""];
+}
+function isTimeComplete(time) {
+  if (!time) {
+    return false;
+  }
+  const [hours, minutes] = time.split(":");
+  return !!hours && !!minutes;
+}
+var init_helpers = __esm({
+  "../form-validator/dist/esm/lib/error-derivation/helpers.js"() {
+  }
+});
+
+// ../form-validator/dist/esm/lib/error-derivation/error-derivers.js
+function deriveError(validation, error, options) {
+  if (!error) {
+    return error;
+  }
+  return derivePatternError(error) ?? deriveCharacterLengthError(validation, error) ?? deriveItemsCountError(validation, error) ?? deriveNumericValueError(validation, error) ?? deriveDateFieldError(validation, error, options?.value) ?? deriveDateTimeFieldError(validation, error, options?.value) ?? error;
+}
+function derivePatternError(error) {
+  if (!error || error.errorType !== ErrorType.PATTERN_ERROR) {
+    return void 0;
+  }
+  return {
+    ...error,
+    errorType: ErrorType.INVALID_VALUE_FOR_PATTERN_ERROR
+  };
+}
+function deriveCharacterLengthError(validation, error) {
+  if (!error) {
+    return void 0;
+  }
+  const isMinMaxLengthError = error.errorType === ErrorType.MIN_LENGTH_ERROR || error.errorType === ErrorType.MAX_LENGTH_ERROR;
+  if (!isMinMaxLengthError) {
+    return void 0;
+  }
+  const minLength = validation?.string?.minLength;
+  const maxLength = validation?.string?.maxLength;
+  const hasMinMax = minLength && maxLength;
+  if (hasMinMax && minLength === maxLength) {
+    return {
+      ...error,
+      errorType: ErrorType.EXACT_CHARACTER_LENGTH_ERROR,
+      errorMessage: `must have exactly ${minLength} characters`
+    };
+  }
+  if (hasMinMax && minLength !== maxLength) {
+    return {
+      ...error,
+      errorType: ErrorType.CHARACTER_LENGTH_RANGE_ERROR,
+      errorMessage: `must have between ${minLength} and ${maxLength} characters`,
+      params: {
+        minLimit: minLength,
+        maxLimit: maxLength
+      }
+    };
+  }
+  return void 0;
+}
+function deriveItemsCountError(validation, error) {
+  if (!error) {
+    return void 0;
+  }
+  const isMinMaxItemsError = error.errorType === ErrorType.MIN_ITEMS_ERROR || error.errorType === ErrorType.MAX_ITEMS_ERROR;
+  if (!isMinMaxItemsError) {
+    return void 0;
+  }
+  const minItems = validation?.array?.minItems;
+  const maxItems = validation?.array?.maxItems;
+  const hasMinMax = minItems && maxItems;
+  if (hasMinMax && minItems === maxItems) {
+    return {
+      ...error,
+      errorType: ErrorType.EXACT_ITEMS_NUMBER_ERROR,
+      errorMessage: `must choose ${minItems} options`
+    };
+  }
+  return void 0;
+}
+function deriveNumericValueError(validation, error) {
+  if (!error) {
+    return void 0;
+  }
+  const isMinMaxValueError = error.errorType === ErrorType.MIN_VALUE_ERROR || error.errorType === ErrorType.MAX_VALUE_ERROR;
+  const isMultipleOfValueError = error.errorType === ErrorType.MULTIPLE_OF_VALUE_ERROR;
+  if (isMinMaxValueError) {
+    const { minPrice, maxPrice } = validation?.predefined?.paymentOptions?.products?.[0]?.dynamicPriceOptions ?? {};
+    const minimum = validation?.number?.minimum ?? minPrice;
+    const maximum = validation?.number?.maximum ?? maxPrice;
+    const hasMinMax = minimum !== void 0 && maximum !== void 0;
+    if (hasMinMax && minimum !== maximum) {
+      return {
+        ...error,
+        errorType: ErrorType.VALUE_RANGE_ERROR,
+        errorMessage: `must be from ${minimum} to ${maximum}`,
+        params: {
+          minLimit: minimum,
+          maxLimit: maximum
+        }
+      };
+    }
+  }
+  if (isMultipleOfValueError) {
+    const multipleOf = validation?.number?.multipleOf;
+    if (multipleOf) {
+      const decimalPlaces = getDecimalPlacesCount(multipleOf);
+      return {
+        ...error,
+        errorType: ErrorType.DECIMAL_POINT_ERROR,
+        errorMessage: `must have ${decimalPlaces} number(s) after the decimal point`,
+        params: {
+          number: decimalPlaces
+        }
+      };
+    }
+  }
+  return void 0;
+}
+function deriveDateFieldError(_validation, error, value) {
+  const isFormatError = error?.errorType === ErrorType.FORMAT_ERROR;
+  if (!error || !isFormatError) {
+    return void 0;
+  }
+  const { YEAR: _YEAR, MONTH, DAY } = deserializeDate(value);
+  const YEAR = _YEAR?.length === 4;
+  if (!YEAR && !MONTH && !DAY) {
+    return void 0;
+  }
+  const withErrorSuffix = (suffix) => ({
+    ...error,
+    errorType: ErrorType.INCOMPLETE_DATE_ERROR,
+    params: {
+      suffix
+    }
+  });
+  if (!YEAR && !MONTH) {
+    return withErrorSuffix(DateFieldErrorSuffix.YEAR_MONTH);
+  } else if (!YEAR && !DAY) {
+    return withErrorSuffix(DateFieldErrorSuffix.YEAR_DAY);
+  } else if (!MONTH && !DAY) {
+    return withErrorSuffix(DateFieldErrorSuffix.MONTH_DAY);
+  } else if (!YEAR) {
+    return withErrorSuffix(DateFieldErrorSuffix.YEAR);
+  } else if (!MONTH) {
+    return withErrorSuffix(DateFieldErrorSuffix.MONTH);
+  } else if (!DAY) {
+    return withErrorSuffix(DateFieldErrorSuffix.DAY);
+  } else {
+    return void 0;
+  }
+}
+function deriveDateTimeFieldError(validation, error, value) {
+  const isFormatError = error?.errorType === ErrorType.FORMAT_ERROR;
+  if (!error || !isFormatError) {
+    return void 0;
+  }
+  const [date, time] = parseDateTimeValue(value);
+  const dateValidationError = deriveDateFieldError(validation, error, date);
+  const { YEAR, MONTH, DAY } = deserializeDate(date);
+  const timeComplete = isTimeComplete(time);
+  if (!timeComplete && YEAR?.length !== 4 && !MONTH && !DAY) {
+    return void 0;
+  }
+  if (!timeComplete) {
+    const withErrorSuffix = (suffix) => ({
+      ...error,
+      errorType: ErrorType.INCOMPLETE_DATE_ERROR,
+      params: {
+        suffix
+      }
+    });
+    const isDateFieldError = (validationError) => {
+      return validationError?.errorType === ErrorType.INCOMPLETE_DATE_ERROR;
+    };
+    if (isDateFieldError(dateValidationError)) {
+      switch (dateValidationError.params.suffix) {
+        case DateFieldErrorSuffix.YEAR_MONTH:
+          return withErrorSuffix(DateTimeFieldErrorSuffix.YEAR_MONTH_TIME);
+        case DateFieldErrorSuffix.YEAR_DAY:
+          return withErrorSuffix(DateTimeFieldErrorSuffix.YEAR_DAY_TIME);
+        case DateFieldErrorSuffix.MONTH_DAY:
+          return withErrorSuffix(DateTimeFieldErrorSuffix.MONTH_DAY_TIME);
+        case DateFieldErrorSuffix.YEAR:
+          return withErrorSuffix(DateTimeFieldErrorSuffix.YEAR_TIME);
+        case DateFieldErrorSuffix.MONTH:
+          return withErrorSuffix(DateTimeFieldErrorSuffix.MONTH_TIME);
+        case DateFieldErrorSuffix.DAY:
+          return withErrorSuffix(DateTimeFieldErrorSuffix.DAY_TIME);
+      }
+    }
+    return withErrorSuffix(DateTimeFieldErrorSuffix.TIME);
+  }
+  return dateValidationError;
+}
+var init_error_derivers = __esm({
+  "../form-validator/dist/esm/lib/error-derivation/error-derivers.js"() {
+    init_errors();
+    init_types();
+    init_helpers();
+  }
+});
+
+// ../form-validator/dist/esm/lib/error-derivation/index.js
+var init_error_derivation = __esm({
+  "../form-validator/dist/esm/lib/error-derivation/index.js"() {
+    init_error_derivers();
+    init_types();
+  }
+});
+
 // ../../node_modules/ajv/dist/compile/codegen/code.js
 var require_code = __commonJS({
   "../../node_modules/ajv/dist/compile/codegen/code.js"(exports) {
@@ -13308,6 +13576,7 @@ var init_form_validator = __esm({
   "../form-validator/dist/esm/lib/submission-validation/form-validator.js"() {
     init_errors();
     init_types_impl();
+    init_error_derivation();
     init_create_ajv_schema_validator();
     init_form_schema_mapper();
     init_property_schema_mapper();
@@ -13408,10 +13677,11 @@ var init_form_validator = __esm({
           throw new Error(`Missing precompiled schema for form ${formId}`);
         }
         validate2(fieldSubmission);
-        return makeValidationErrors(validate2.errors);
+        const baseErrors = makeValidationErrors(validate2.errors);
+        return this.deriveErrors(formId, baseErrors, fieldSubmission);
       }
       validateSubmissionWithFieldMask(ajv, formId, fieldSubmission, fieldIdMasks) {
-        return fieldIdMasks.reduce((acc, mask) => {
+        const baseErrors = fieldIdMasks.reduce((acc, mask) => {
           const validate2 = ajv.getSchema(`${formId}#/properties/${mask}`);
           if (!validate2) {
             acc.push({
@@ -13427,6 +13697,82 @@ var init_form_validator = __esm({
           }
           return acc;
         }, []);
+        return this.deriveErrors(formId, baseErrors, fieldSubmission);
+      }
+      deriveErrors(formId, errors, submission) {
+        return errors.map((error) => {
+          const validation = this.getFieldValidation(formId, error.errorPath);
+          const value = this.getFieldValue(submission, error.errorPath);
+          return deriveError(validation, error, { value });
+        }).filter((error) => error !== void 0);
+      }
+      getFieldValidation(formId, fieldPath) {
+        const form = this.formSchemas.find((f) => f.id === formId);
+        if (!form) {
+          return void 0;
+        }
+        const pathParts = fieldPath.split("/");
+        const rootFieldId = pathParts[0];
+        const platformisedField = [
+          ...form.formFields ?? [],
+          ...form.deletedFormFields ?? []
+        ].find((f) => {
+          if (f.id === rootFieldId) {
+            return true;
+          }
+          const inputTarget = f.inputOptions?.target;
+          if (inputTarget === rootFieldId) {
+            return true;
+          }
+          return false;
+        });
+        const legacyField = [
+          ...form.fields ?? [],
+          ...form.deletedFields ?? []
+        ].find((f) => {
+          if (f.id === rootFieldId || f.target === rootFieldId) {
+            return true;
+          }
+          return false;
+        });
+        if (platformisedField) {
+          return this.getPlatformisedFieldValidation(platformisedField);
+        } else if (legacyField) {
+          return this.getLegacyFieldValidation(legacyField);
+        } else {
+          return void 0;
+        }
+      }
+      getLegacyFieldValidation(field) {
+        return field.validation;
+      }
+      getPlatformisedFieldValidation(field) {
+        const inputOptions = field.inputOptions;
+        if (!inputOptions) {
+          return void 0;
+        }
+        const validation = {};
+        if (inputOptions.numberOptions?.validation) {
+          validation.number = inputOptions.numberOptions.validation;
+        }
+        if (inputOptions.stringOptions?.validation) {
+          validation.string = inputOptions.stringOptions.validation;
+        }
+        if (inputOptions.arrayOptions?.validation) {
+          validation.array = inputOptions.arrayOptions.validation;
+        }
+        if (Object.keys(validation).length > 0) {
+          return validation;
+        }
+        return void 0;
+      }
+      getFieldValue(submission, fieldPath) {
+        const pathParts = fieldPath.split("/");
+        let value = submission;
+        for (const part of pathParts) {
+          value = value?.[part];
+        }
+        return typeof value === "string" ? value : void 0;
       }
       isFormDisabled(formSchema) {
         const isDeadlinePast = formSchema?.limitationRule?.dateTimeDeadline && new Date(formSchema.limitationRule.dateTimeDeadline).getTime() <= (/* @__PURE__ */ new Date()).getTime();
@@ -13466,7 +13812,7 @@ var init_form_validator = __esm({
 });
 
 // ../form-validator/dist/esm/lib/backward-compatibility/field-utils.js
-function isInputField(field) {
+function isInputField2(field) {
   if (field.validation) {
     asRequired(field.target, field, "target");
   }
@@ -13488,7 +13834,7 @@ function compareSchemaBackwardCompatibility(newSchema, knownSchema) {
   };
 }
 function getNonCompatibleFields(newSchema, knownSchema) {
-  newSchema.fields?.forEach(isInputField);
+  newSchema.fields?.forEach(isInputField2);
   const newFieldsWithTarget = (newSchema.fields ?? []).filter(fieldHasTarget);
   const knownInputFields = [
     ...knownSchema.fields ?? [],
@@ -13847,6 +14193,8 @@ var init_form_schema_validator = __esm({
 var esm_exports = {};
 __export(esm_exports, {
   CALLING_COUNTRY_CODES: () => CALLING_COUNTRY_CODES,
+  DateFieldErrorSuffix: () => DateFieldErrorSuffix,
+  DateTimeFieldErrorSuffix: () => DateTimeFieldErrorSuffix,
   ErrorTypes: () => ErrorType,
   FILE_UPLOAD_FIELD_TYPE: () => FILE_UPLOAD_FIELD_TYPE,
   FormSchemaValidator: () => FormSchemaValidator,
@@ -13864,6 +14212,7 @@ var init_esm = __esm({
     init_form_schema_validator();
     init_errors();
     init_calling_country_codes();
+    init_error_derivation();
   }
 });
 
@@ -15814,7 +16163,7 @@ function useFormFields() {
 var import_extends5 = __toESM(require_extends());
 
 // ../form-fields/dist/esm/ui/form/types/form-view.js
-function isInputField2(field) {
+function isInputField(field) {
   return Boolean(field.target);
 }
 function isNestedFormField(field) {
@@ -16137,7 +16486,7 @@ var FormField = (_ref) => {
       FieldLayout
     }));
   }
-  if (isInputField2(field)) {
+  if (isInputField(field)) {
     return /* @__PURE__ */ React14.createElement(InputField, (0, import_extends5.default)({}, rest, {
       field,
       FieldLayout
@@ -16229,7 +16578,7 @@ var DefaultFieldLayout = (_ref) => {
     layout,
     fieldType
   } = fieldView;
-  const dataHook = `form-field-${isInputField2(fieldView) ? fieldView.target : fieldView.id}`;
+  const dataHook = `form-field-${isInputField(fieldView) ? fieldView.target : fieldView.id}`;
   const dataAttributes = {
     "data-hook": dataHook,
     "data-field-type": fieldType