bfg-common 1.3.11 → 1.3.13

package/components/atoms/wizard/lib/utils/utils.ts

@@ -1,568 +1,568 @@
-import { ref, computed, Ref, ComputedRef } from 'vue'
-import { useDeepCopy } from '~/composables/deepCopy'
-import {
-  UI_I_ErrorFields,
-  UI_I_Loader,
-  UI_I_ValidationReturn,
-  UI_I_WizardStep,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
-
-export default class Wizard {
-  private _initialSteps: Ref<UI_I_WizardStep[]>
-  private _initialStepsScheme: Ref<number[][]>
-  private _steps: Ref<UI_I_WizardStep[]>
-  private _stepsScheme: Ref<number[][]>
-  private _selectedSchemeId: Ref<number>
-  private _wizardLoader: Ref<UI_I_Loader>
-  private _waitingStepId: Ref<number>
-  selectedScheme: ComputedRef<number[]>
-  alertMessages: ComputedRef<string[][]>
-
-  constructor(steps: UI_I_WizardStep[], stepsSchemeInitial: number[][]) {
-    this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
-    this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
-    this._stepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
-    this._initialStepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
-    this._selectedSchemeId = ref<number>(0)
-    this._wizardLoader = ref<UI_I_Loader>({
-      status: false,
-      messages: [],
-    })
-    this._waitingStepId = ref<number>(-1)
-    this.selectedScheme = computed<number[]>(
-      () => this._stepsScheme.value[this._selectedSchemeId.value]
-    )
-    this.alertMessages = computed<string[][]>(() =>
-      this._steps.value.map((step: UI_I_WizardStep) =>
-        Object.values(step.fields).reduce(
-          (result: string[], obj: UI_I_ErrorFields) =>
-            obj.alert ? [...result, obj.alert] : result,
-          []
-        )
-      )
-    )
-  }
-
-  get steps(): UI_I_WizardStep[] {
-    return this._steps.value
-  }
-
-  set steps(newSteps: UI_I_WizardStep[]) {
-    this._steps.value = newSteps
-  }
-
-  set stepsScheme(newStepsScheme: number[][]) {
-    this._stepsScheme.value = newStepsScheme
-  }
-
-  get stepsScheme(): number[][] {
-    return this._stepsScheme.value
-  }
-
-  set selectedSchemeId(newSelectedSchemeId: number) {
-    this._selectedSchemeId.value = newSelectedSchemeId
-  }
-
-  get selectedSchemeId(): number {
-    return this._selectedSchemeId.value
-  }
-
-  set waitingStepId(id: number) {
-    this._waitingStepId.value = id
-  }
-
-  get waitingStepId(): number {
-    return this._waitingStepId.value
-  }
-
-  get wizardLoader(): UI_I_Loader {
-    return this._wizardLoader.value
-  }
-
-  get nextAvailableStep(): number {
-    const currentStepIndex = this.selectedScheme.value.indexOf(
-      this.selectedStepId
-    )
-    return this.selectedScheme.value[currentStepIndex + 1]
-  }
-
-  setLoader(status: boolean, messages?: string[]): void {
-    this._wizardLoader.value.status = status
-
-    if (!messages && !!this._wizardLoader.value?.messages?.length) {
-      this._wizardLoader.value.messages = []
-      return
-    }
-    if (!messages) return
-
-    messages.length > 0 && (this._wizardLoader.value.messages = messages)
-  }
-
-  changeScheme(schemeId: number): void {
-    this.selectedSchemeId = schemeId
-    this.resetAfterSelected()
-  }
-
-  goToFirstInvalidStep(): void {
-    const firstInvalidStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep) => this.isInvalid(step.status)
-    )
-
-    if (!firstInvalidStep) return
-
-    const firstInvalidStepId: number = firstInvalidStep.id
-
-    this.steps = this.steps.map((step: UI_I_WizardStep): UI_I_WizardStep => {
-      if (step.id === firstInvalidStepId) {
-        return { ...step, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-      }
-      if (step.status === UI_E_WIZARD_STATUS.SELECTED) {
-        return { ...step, status: UI_E_WIZARD_STATUS.COMPLETED }
-      }
-
-      return step
-    })
-  }
-
-  goToFirstStoppageStep(stoppageStepId: number): void {
-    console.log('goToFirstStoppageStep', stoppageStepId)
-  }
-
-  hasMessage(stepId: number, field: string): boolean {
-    return (
-      !!this.steps[stepId].fields?.[field].field ||
-      !!this.steps[stepId].fields?.[field].alert
-    )
-  }
-
-  setValidationError(stepId: number, field: string, message: string): void {
-    const invalidStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep): boolean => step.id === stepId
-    )
-
-    if (!invalidStep) return
-
-    invalidStep.fields[field].field = message
-
-    if (message) {
-      invalidStep.isValid = false
-
-      if (this.isSelected(invalidStep.status)) {
-        invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
-        return
-      }
-
-      invalidStep.status = UI_E_WIZARD_STATUS.INVALID
-    } else {
-      invalidStep.isValid = true
-      if (this.isSelected(invalidStep.status)) {
-        invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
-      } else {
-        invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
-      }
-    }
-  }
-
-  setAlertMessage(stepId: number, field: string, message: string): void {
-    this.steps[stepId].fields[field].alert = message
-  }
-
-  removeAlertMessage(
-    stepId: number,
-    field: string,
-    value?: UI_I_WizardStep[]
-  ): UI_I_WizardStep[] {
-    const invalidStep: UI_I_WizardStep = this.steps[stepId]
-
-    invalidStep.fields[field].alert = ''
-    if (!value) return this.steps
-
-    return value.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep =>
-        step.id === invalidStep.id ? invalidStep : step
-    )
-  }
-
-  private removeValidationError(
-    stepId: number,
-    field: string,
-    nextStep: boolean,
-    value?: UI_I_WizardStep[]
-  ): UI_I_WizardStep[] {
-    const invalidStep: UI_I_WizardStep = this.steps[stepId]
-
-    if (!invalidStep) return this.steps
-
-    invalidStep.fields[field].field = ''
-
-    const messages: UI_I_ErrorFields[] = Object.values(
-      invalidStep.fields
-    ).filter((message: UI_I_ErrorFields): boolean => message.field !== '')
-
-    invalidStep.isValid = !messages.length
-
-    if (nextStep && invalidStep.isValid && this.isInvalid(invalidStep.status)) {
-      invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
-    }
-
-    if (
-      !nextStep &&
-      invalidStep.isValid &&
-      invalidStep.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    ) {
-      invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
-    }
-
-    if (nextStep) this.goToFirstInvalidStep()
-
-    if (!value) return this.steps
-
-    return value.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep =>
-        step.id === invalidStep.id ? invalidStep : step
-    )
-  }
-
-  hideAlertMessagesByStepId(stepId: number): UI_I_WizardStep[] {
-    const modifiedStep: UI_I_WizardStep = this.steps[stepId]
-
-    for (const field in modifiedStep.fields) {
-      modifiedStep.fields[field].alert = ''
-    }
-
-    return (this.steps = this.steps.map((step: UI_I_WizardStep) =>
-      step.id === stepId ? modifiedStep : step
-    ))
-  }
-
-  changeStep(value: UI_I_WizardStep[]): void {
-    this.steps = this.steps.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep => ({
-        ...step,
-        ...(value.find(
-          (stepFind: UI_I_WizardStep): boolean => stepFind.id === step.id
-        ) || step),
-      })
-    )
-  }
-
-  isSelected(status: UI_E_WIZARD_STATUS): boolean {
-    return (
-      status === UI_E_WIZARD_STATUS.SELECTED ||
-      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    )
-  }
-
-  isInvalid(status: UI_E_WIZARD_STATUS): boolean {
-    return (
-      status === UI_E_WIZARD_STATUS.INVALID ||
-      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    )
-  }
-
-  get selectedStepId(): number {
-    const selectedStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep) =>
-        step.status === UI_E_WIZARD_STATUS.SELECTED ||
-        step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    )
-
-    return selectedStep !== undefined ? selectedStep.id : this.steps[0].id
-  }
-
-  async changeSteps(
-    value: UI_I_WizardStep[],
-    validationFunc?: (
-      value: UI_I_WizardStep[],
-      currentStep: UI_I_WizardStep,
-      nextStep: UI_I_WizardStep
-    ) => Promise<UI_I_ValidationReturn>,
-    finalValidationFunc?: (
-      value: UI_I_WizardStep[],
-      currentStep: UI_I_WizardStep,
-      nextStep: UI_I_WizardStep
-    ) => Promise<UI_I_ValidationReturn>
-  ): Promise<void> {
-    const currentStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep) => this.isSelected(step.status)
-    )
-
-    const nextStep: UI_I_WizardStep | undefined = value.find(
-      (step: UI_I_WizardStep) => this.isSelected(step.status)
-    )
-
-    if (!currentStep || !nextStep) return
-    if (currentStep.id > nextStep.id) return this.changeStep(value)
-
-    if (validationFunc) {
-      const validation: UI_I_ValidationReturn = await validationFunc(
-        value,
-        currentStep,
-        nextStep
-      )
-
-      if (
-        validation.stepHasError ||
-        validation.stepShouldStop?.ifFromAnyStep ||
-        validation.stepShouldStop?.ifOnCurrentStep
-      ) {
-        validation.stepShouldStop?.ifFromAnyStep &&
-          currentStep.id < validation.stepShouldStop?.stoppageStepId &&
-          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
-
-        validation.stepShouldStop?.ifOnCurrentStep &&
-          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
-
-        validation.stepHasError && this.goToFirstInvalidStep()
-
-        return
-      } else if (this.isLastStep() && finalValidationFunc) {
-        const finalValidation: UI_I_ValidationReturn =
-          await finalValidationFunc(value, currentStep, nextStep)
-
-        if (
-          finalValidation.stepHasError ||
-          finalValidation.stepShouldStop?.ifFromAnyStep ||
-          finalValidation.stepShouldStop?.ifOnCurrentStep
-        ) {
-          finalValidation.stepShouldStop?.ifFromAnyStep &&
-            currentStep.id < finalValidation.stepShouldStop?.stoppageStepId &&
-            this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
-
-          finalValidation.stepShouldStop?.ifOnCurrentStep &&
-            this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
-
-          finalValidation.stepHasError && this.goToFirstInvalidStep()
-
-          return
-        } else {
-          currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
-        }
-
-        this.changeStep(finalValidation.newValue)
-
-        return
-      } else {
-        currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
-      }
-
-      this.changeStep(validation.newValue)
-
-      return
-    }
-
-    this.changeStep(value)
-  }
-
-  selectStepHard(stepId: number): void {
-    const newSteps = this.steps.map((st: UI_I_WizardStep) => {
-      if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-      if (st.id === stepId)
-        return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-
-      return st
-    })
-
-    this.changeStep(newSteps)
-  }
-
-  isValidateForStep(
-    step: number,
-    currentStepId: number,
-    nextStepId: number
-  ): boolean {
-    return (
-      nextStepId > step &&
-      currentStepId <= step &&
-      this.selectedScheme.value.includes(step)
-    )
-  }
-
-  setValidation(
-    stepId: number,
-    field: string,
-    message: {
-      fieldMessage?: string
-      alertMessage?: string
-    }
-  ): true {
-    message.fieldMessage &&
-      this.setValidationError(stepId, field, message.fieldMessage)
-    message.alertMessage &&
-      this.setAlertMessage(stepId, field, message.alertMessage)
-
-    return true
-  }
-
-  removeValidationLocal(stepId: number, field: string): void {
-    this.setValidationError(stepId, field, '')
-    this.setAlertMessage(stepId, field, '')
-  }
-
-  removeValidation(
-    stepId: number,
-    field: string,
-    value: UI_I_WizardStep[]
-  ): UI_I_WizardStep[] {
-    let newValue: UI_I_WizardStep[] = this.removeValidationError(
-      stepId,
-      field,
-      true,
-      value
-    )
-
-    newValue = this.removeAlertMessage(stepId, field, newValue)
-    return newValue
-  }
-
-  reset(): void {
-    this.steps = useDeepCopy(this._initialSteps.value)
-    this.stepsScheme = useDeepCopy(this._initialStepsScheme.value)
-    this.selectedSchemeId = 0
-  }
-
-  setEmptyErrorFields(fields: { [key: string]: UI_I_ErrorFields }): {
-    [key: string]: UI_I_ErrorFields
-  } {
-    const keys: string[] = Object.keys(fields)
-    const obj: { [key: string]: UI_I_ErrorFields } = {}
-
-    keys.forEach((key: string): void => {
-      obj[key] = {
-        alert: '',
-        field: '',
-      }
-    })
-
-    return obj
-  }
-
-  resetAfterSelected(): void {
-    this.steps = this.steps.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep =>
-        step.id > this.selectedStepId
-          ? {
-              ...step,
-              status: UI_E_WIZARD_STATUS.INACTIVE,
-              isValid: true,
-              fields: this.setEmptyErrorFields(step.fields),
-            }
-          : step
-    )
-  }
-
-  activeStepId(): number {
-    const activeStep = this.steps.find(
-      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
-    )?.id
-
-    const invalidStep = this.steps.find(
-      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.INVALID
-    )?.id
-
-    return activeStep || invalidStep || 0
-  }
-
-  wasCompleted(): boolean {
-    return this.activeStepId() > this.selectedStepId
-  }
-
-  isLastStep(): boolean {
-    return (
-      this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
-      this.selectedStepId
-    )
-  }
-
-  isSelectedScheme(schemeId: number): boolean {
-    return schemeId === this.selectedSchemeId
-  }
-
-  getStepIdByFieldName(fieldName: string): number {
-    return this.steps.find((step) => step.fields[fieldName])?.id || -1
-  }
-
-  setDynamicValidationField(fieldName: string | string[]): void {
-    const fields: {
-      [key: string]: UI_I_ErrorFields
-    } = this.steps[this.selectedStepId].fields
-
-    if (typeof fieldName === 'string') {
-      fields[fieldName] = {
-        alert: '',
-        field: '',
-      }
-    } else {
-      fieldName.forEach((name: string) => {
-        fields[name] = {
-          alert: '',
-          field: '',
-        }
-      })
-    }
-
-    this.steps = this.steps.map((step: UI_I_WizardStep) =>
-      step.id === this.selectedStepId
-        ? {
-            ...step,
-            fields,
-          }
-        : step
-    )
-  }
-
-  removeDynamicValidationField(fieldName: string | string[]): void {
-    const newFields: {
-      [key: string]: UI_I_ErrorFields
-    } = this.steps[this.selectedStepId].fields
-
-    if (typeof fieldName === 'string') {
-      delete newFields[fieldName]
-    } else {
-      fieldName.forEach((name: string) => {
-        delete newFields[name]
-      })
-    }
-
-    this.steps = this.steps.map((step: UI_I_WizardStep) =>
-      step.id === this.selectedStepId
-        ? {
-            ...step,
-            fields: newFields,
-          }
-        : step
-    )
-  }
-
-  validateFieldLocal(
-    stepId: number,
-    field: string,
-    rule: boolean | boolean[],
-    fieldMessage: string | string[],
-    alertMessage: string | string[]
-  ): void {
-    if (typeof rule === 'boolean') {
-      if (rule) {
-        this.setValidation(stepId, field, {
-          fieldMessage: fieldMessage as string,
-          alertMessage: alertMessage as string,
-        })
-      } else if (this.hasMessage(stepId, field)) {
-        this.removeValidationLocal(stepId, field)
-      }
-    } else {
-      const ruleIndex = rule.indexOf(true)
-
-      if (ruleIndex !== -1) {
-        this.setValidation(stepId, field, {
-          fieldMessage: fieldMessage[ruleIndex],
-          alertMessage: alertMessage[ruleIndex],
-        })
-      } else if (this.hasMessage(stepId, field)) {
-        this.removeValidationLocal(stepId, field)
-      }
-    }
-  }
-}
+import { ref, computed, Ref, ComputedRef } from 'vue'
+import { useDeepCopy } from '~/composables/deepCopy'
+import {
+  UI_I_ErrorFields,
+  UI_I_Loader,
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
+
+export default class Wizard {
+  private _initialSteps: Ref<UI_I_WizardStep[]>
+  private _initialStepsScheme: Ref<number[][]>
+  private _steps: Ref<UI_I_WizardStep[]>
+  private _stepsScheme: Ref<number[][]>
+  private _selectedSchemeId: Ref<number>
+  private _wizardLoader: Ref<UI_I_Loader>
+  private _waitingStepId: Ref<number>
+  selectedScheme: ComputedRef<number[]>
+  alertMessages: ComputedRef<string[][]>
+
+  constructor(steps: UI_I_WizardStep[], stepsSchemeInitial: number[][]) {
+    this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._stepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
+    this._initialStepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
+    this._selectedSchemeId = ref<number>(0)
+    this._wizardLoader = ref<UI_I_Loader>({
+      status: false,
+      messages: [],
+    })
+    this._waitingStepId = ref<number>(-1)
+    this.selectedScheme = computed<number[]>(
+      () => this._stepsScheme.value[this._selectedSchemeId.value]
+    )
+    this.alertMessages = computed<string[][]>(() =>
+      this._steps.value.map((step: UI_I_WizardStep) =>
+        Object.values(step.fields).reduce(
+          (result: string[], obj: UI_I_ErrorFields) =>
+            obj.alert ? [...result, obj.alert] : result,
+          []
+        )
+      )
+    )
+  }
+
+  get steps(): UI_I_WizardStep[] {
+    return this._steps.value
+  }
+
+  set steps(newSteps: UI_I_WizardStep[]) {
+    this._steps.value = newSteps
+  }
+
+  set stepsScheme(newStepsScheme: number[][]) {
+    this._stepsScheme.value = newStepsScheme
+  }
+
+  get stepsScheme(): number[][] {
+    return this._stepsScheme.value
+  }
+
+  set selectedSchemeId(newSelectedSchemeId: number) {
+    this._selectedSchemeId.value = newSelectedSchemeId
+  }
+
+  get selectedSchemeId(): number {
+    return this._selectedSchemeId.value
+  }
+
+  set waitingStepId(id: number) {
+    this._waitingStepId.value = id
+  }
+
+  get waitingStepId(): number {
+    return this._waitingStepId.value
+  }
+
+  get wizardLoader(): UI_I_Loader {
+    return this._wizardLoader.value
+  }
+
+  get nextAvailableStep(): number {
+    const currentStepIndex = this.selectedScheme.value.indexOf(
+      this.selectedStepId
+    )
+    return this.selectedScheme.value[currentStepIndex + 1]
+  }
+
+  setLoader(status: boolean, messages?: string[]): void {
+    this._wizardLoader.value.status = status
+
+    if (!messages && !!this._wizardLoader.value?.messages?.length) {
+      this._wizardLoader.value.messages = []
+      return
+    }
+    if (!messages) return
+
+    messages.length > 0 && (this._wizardLoader.value.messages = messages)
+  }
+
+  changeScheme(schemeId: number): void {
+    this.selectedSchemeId = schemeId
+    this.resetAfterSelected()
+  }
+
+  goToFirstInvalidStep(): void {
+    const firstInvalidStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) => this.isInvalid(step.status)
+    )
+
+    if (!firstInvalidStep) return
+
+    const firstInvalidStepId: number = firstInvalidStep.id
+
+    this.steps = this.steps.map((step: UI_I_WizardStep): UI_I_WizardStep => {
+      if (step.id === firstInvalidStepId) {
+        return { ...step, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+      }
+      if (step.status === UI_E_WIZARD_STATUS.SELECTED) {
+        return { ...step, status: UI_E_WIZARD_STATUS.COMPLETED }
+      }
+
+      return step
+    })
+  }
+
+  goToFirstStoppageStep(stoppageStepId: number): void {
+    console.log('goToFirstStoppageStep', stoppageStepId)
+  }
+
+  hasMessage(stepId: number, field: string): boolean {
+    return (
+      !!this.steps[stepId].fields?.[field].field ||
+      !!this.steps[stepId].fields?.[field].alert
+    )
+  }
+
+  setValidationError(stepId: number, field: string, message: string): void {
+    const invalidStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep): boolean => step.id === stepId
+    )
+
+    if (!invalidStep) return
+
+    invalidStep.fields[field].field = message
+
+    if (message) {
+      invalidStep.isValid = false
+
+      if (this.isSelected(invalidStep.status)) {
+        invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
+        return
+      }
+
+      invalidStep.status = UI_E_WIZARD_STATUS.INVALID
+    } else {
+      invalidStep.isValid = true
+      if (this.isSelected(invalidStep.status)) {
+        invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
+      } else {
+        invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
+      }
+    }
+  }
+
+  setAlertMessage(stepId: number, field: string, message: string): void {
+    this.steps[stepId].fields[field].alert = message
+  }
+
+  removeAlertMessage(
+    stepId: number,
+    field: string,
+    value?: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    const invalidStep: UI_I_WizardStep = this.steps[stepId]
+
+    invalidStep.fields[field].alert = ''
+    if (!value) return this.steps
+
+    return value.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id === invalidStep.id ? invalidStep : step
+    )
+  }
+
+  private removeValidationError(
+    stepId: number,
+    field: string,
+    nextStep: boolean,
+    value?: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    const invalidStep: UI_I_WizardStep = this.steps[stepId]
+
+    if (!invalidStep) return this.steps
+
+    invalidStep.fields[field].field = ''
+
+    const messages: UI_I_ErrorFields[] = Object.values(
+      invalidStep.fields
+    ).filter((message: UI_I_ErrorFields): boolean => message.field !== '')
+
+    invalidStep.isValid = !messages.length
+
+    if (nextStep && invalidStep.isValid && this.isInvalid(invalidStep.status)) {
+      invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
+    }
+
+    if (
+      !nextStep &&
+      invalidStep.isValid &&
+      invalidStep.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    ) {
+      invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
+    }
+
+    if (nextStep) this.goToFirstInvalidStep()
+
+    if (!value) return this.steps
+
+    return value.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id === invalidStep.id ? invalidStep : step
+    )
+  }
+
+  hideAlertMessagesByStepId(stepId: number): UI_I_WizardStep[] {
+    const modifiedStep: UI_I_WizardStep = this.steps[stepId]
+
+    for (const field in modifiedStep.fields) {
+      modifiedStep.fields[field].alert = ''
+    }
+
+    return (this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === stepId ? modifiedStep : step
+    ))
+  }
+
+  changeStep(value: UI_I_WizardStep[]): void {
+    this.steps = this.steps.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep => ({
+        ...step,
+        ...(value.find(
+          (stepFind: UI_I_WizardStep): boolean => stepFind.id === step.id
+        ) || step),
+      })
+    )
+  }
+
+  isSelected(status: UI_E_WIZARD_STATUS): boolean {
+    return (
+      status === UI_E_WIZARD_STATUS.SELECTED ||
+      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+  }
+
+  isInvalid(status: UI_E_WIZARD_STATUS): boolean {
+    return (
+      status === UI_E_WIZARD_STATUS.INVALID ||
+      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+  }
+
+  get selectedStepId(): number {
+    const selectedStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) =>
+        step.status === UI_E_WIZARD_STATUS.SELECTED ||
+        step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+
+    return selectedStep !== undefined ? selectedStep.id : this.steps[0].id
+  }
+
+  async changeSteps(
+    value: UI_I_WizardStep[],
+    validationFunc?: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>,
+    finalValidationFunc?: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>
+  ): Promise<void> {
+    const currentStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) => this.isSelected(step.status)
+    )
+
+    const nextStep: UI_I_WizardStep | undefined = value.find(
+      (step: UI_I_WizardStep) => this.isSelected(step.status)
+    )
+
+    if (!currentStep || !nextStep) return
+    if (currentStep.id > nextStep.id) return this.changeStep(value)
+
+    if (validationFunc) {
+      const validation: UI_I_ValidationReturn = await validationFunc(
+        value,
+        currentStep,
+        nextStep
+      )
+
+      if (
+        validation.stepHasError ||
+        validation.stepShouldStop?.ifFromAnyStep ||
+        validation.stepShouldStop?.ifOnCurrentStep
+      ) {
+        validation.stepShouldStop?.ifFromAnyStep &&
+          currentStep.id < validation.stepShouldStop?.stoppageStepId &&
+          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
+
+        validation.stepShouldStop?.ifOnCurrentStep &&
+          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
+
+        validation.stepHasError && this.goToFirstInvalidStep()
+
+        return
+      } else if (this.isLastStep() && finalValidationFunc) {
+        const finalValidation: UI_I_ValidationReturn =
+          await finalValidationFunc(value, currentStep, nextStep)
+
+        if (
+          finalValidation.stepHasError ||
+          finalValidation.stepShouldStop?.ifFromAnyStep ||
+          finalValidation.stepShouldStop?.ifOnCurrentStep
+        ) {
+          finalValidation.stepShouldStop?.ifFromAnyStep &&
+            currentStep.id < finalValidation.stepShouldStop?.stoppageStepId &&
+            this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
+
+          finalValidation.stepShouldStop?.ifOnCurrentStep &&
+            this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
+
+          finalValidation.stepHasError && this.goToFirstInvalidStep()
+
+          return
+        } else {
+          currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
+        }
+
+        this.changeStep(finalValidation.newValue)
+
+        return
+      } else {
+        currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
+      }
+
+      this.changeStep(validation.newValue)
+
+      return
+    }
+
+    this.changeStep(value)
+  }
+
+  selectStepHard(stepId: number): void {
+    const newSteps = this.steps.map((st: UI_I_WizardStep) => {
+      if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+      if (st.id === stepId)
+        return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+      return st
+    })
+
+    this.changeStep(newSteps)
+  }
+
+  isValidateForStep(
+    step: number,
+    currentStepId: number,
+    nextStepId: number
+  ): boolean {
+    return (
+      nextStepId > step &&
+      currentStepId <= step &&
+      this.selectedScheme.value.includes(step)
+    )
+  }
+
+  setValidation(
+    stepId: number,
+    field: string,
+    message: {
+      fieldMessage?: string
+      alertMessage?: string
+    }
+  ): true {
+    message.fieldMessage &&
+      this.setValidationError(stepId, field, message.fieldMessage)
+    message.alertMessage &&
+      this.setAlertMessage(stepId, field, message.alertMessage)
+
+    return true
+  }
+
+  removeValidationLocal(stepId: number, field: string): void {
+    this.setValidationError(stepId, field, '')
+    this.setAlertMessage(stepId, field, '')
+  }
+
+  removeValidation(
+    stepId: number,
+    field: string,
+    value: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    let newValue: UI_I_WizardStep[] = this.removeValidationError(
+      stepId,
+      field,
+      true,
+      value
+    )
+
+    newValue = this.removeAlertMessage(stepId, field, newValue)
+    return newValue
+  }
+
+  reset(): void {
+    this.steps = useDeepCopy(this._initialSteps.value)
+    this.stepsScheme = useDeepCopy(this._initialStepsScheme.value)
+    this.selectedSchemeId = 0
+  }
+
+  setEmptyErrorFields(fields: { [key: string]: UI_I_ErrorFields }): {
+    [key: string]: UI_I_ErrorFields
+  } {
+    const keys: string[] = Object.keys(fields)
+    const obj: { [key: string]: UI_I_ErrorFields } = {}
+
+    keys.forEach((key: string): void => {
+      obj[key] = {
+        alert: '',
+        field: '',
+      }
+    })
+
+    return obj
+  }
+
+  resetAfterSelected(): void {
+    this.steps = this.steps.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id > this.selectedStepId
+          ? {
+              ...step,
+              status: UI_E_WIZARD_STATUS.INACTIVE,
+              isValid: true,
+              fields: this.setEmptyErrorFields(step.fields),
+            }
+          : step
+    )
+  }
+
+  activeStepId(): number {
+    const activeStep = this.steps.find(
+      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
+    )?.id
+
+    const invalidStep = this.steps.find(
+      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.INVALID
+    )?.id
+
+    return activeStep || invalidStep || 0
+  }
+
+  wasCompleted(): boolean {
+    return this.activeStepId() > this.selectedStepId
+  }
+
+  isLastStep(): boolean {
+    return (
+      this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
+      this.selectedStepId
+    )
+  }
+
+  isSelectedScheme(schemeId: number): boolean {
+    return schemeId === this.selectedSchemeId
+  }
+
+  getStepIdByFieldName(fieldName: string): number {
+    return this.steps.find((step) => step.fields[fieldName])?.id || -1
+  }
+
+  setDynamicValidationField(fieldName: string | string[]): void {
+    const fields: {
+      [key: string]: UI_I_ErrorFields
+    } = this.steps[this.selectedStepId].fields
+
+    if (typeof fieldName === 'string') {
+      fields[fieldName] = {
+        alert: '',
+        field: '',
+      }
+    } else {
+      fieldName.forEach((name: string) => {
+        fields[name] = {
+          alert: '',
+          field: '',
+        }
+      })
+    }
+
+    this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === this.selectedStepId
+        ? {
+            ...step,
+            fields,
+          }
+        : step
+    )
+  }
+
+  removeDynamicValidationField(fieldName: string | string[]): void {
+    const newFields: {
+      [key: string]: UI_I_ErrorFields
+    } = this.steps[this.selectedStepId].fields
+
+    if (typeof fieldName === 'string') {
+      delete newFields[fieldName]
+    } else {
+      fieldName.forEach((name: string) => {
+        delete newFields[name]
+      })
+    }
+
+    this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === this.selectedStepId
+        ? {
+            ...step,
+            fields: newFields,
+          }
+        : step
+    )
+  }
+
+  validateFieldLocal(
+    stepId: number,
+    field: string,
+    rule: boolean | boolean[],
+    fieldMessage: string | string[],
+    alertMessage: string | string[]
+  ): void {
+    if (typeof rule === 'boolean') {
+      if (rule) {
+        this.setValidation(stepId, field, {
+          fieldMessage: fieldMessage as string,
+          alertMessage: alertMessage as string,
+        })
+      } else if (this.hasMessage(stepId, field)) {
+        this.removeValidationLocal(stepId, field)
+      }
+    } else {
+      const ruleIndex = rule.indexOf(true)
+
+      if (ruleIndex !== -1) {
+        this.setValidation(stepId, field, {
+          fieldMessage: fieldMessage[ruleIndex],
+          alertMessage: alertMessage[ruleIndex],
+        })
+      } else if (this.hasMessage(stepId, field)) {
+        this.removeValidationLocal(stepId, field)
+      }
+    }
+  }
+}