@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/models/ui/validator/form/recover-password.ts

@@ -0,0 +1,150 @@
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { EqualsRule, RequiredRule, MinRule } from "../rules";
+import { IkasBaseStore } from "../../../../store";
+
+type RecoverPasswordFormProps<T> = {
+  message: {
+    requiredRule: ((model: T) => string) | string;
+    minRule: ((model: T) => string) | string;
+    equalsRule: ((model: T) => string) | string;
+  };
+  store: IkasBaseStore;
+};
+
+type RecoverPasswordFormModel = {
+  password: string;
+  passwordAgain: string;
+};
+
+export class RecoverPasswordForm {
+  private model: RecoverPasswordFormModel = { password: "", passwordAgain: "" };
+  private validator: Validator;
+  private store: IkasBaseStore;
+
+  constructor(props: RecoverPasswordFormProps<RecoverPasswordFormModel>) {
+    makeObservable<this, "model">(this, {
+      passwordErrorMessage: computed,
+      passwordAgainErrorMessage: computed,
+      hasError: computed,
+      redirect: computed,
+      password: computed,
+      passwordAgain: computed,
+      model: observable,
+      validateAll: action,
+      submit: action,
+      resetModel: action,
+    });
+    this.store = props.store;
+    this.validator = new Validator(this.model, [
+      new RequiredRule({
+        fieldKey: "password",
+        valuePath: "password",
+        message: props.message.requiredRule,
+      }),
+      new RequiredRule({
+        fieldKey: "passwordAgain",
+        valuePath: "passwordAgain",
+        message: props.message.requiredRule,
+      }),
+      new MinRule({
+        fieldKey: "password",
+        valuePath: "password",
+        minValue: 6,
+        message: props.message.minRule,
+      }),
+      new MinRule({
+        fieldKey: "passwordAgain",
+        valuePath: "passwordAgain",
+        minValue: 6,
+        message: props.message.minRule,
+      }),
+      new EqualsRule({
+        fieldKey: "passwordAgain",
+        valuePath: "passwordAgain",
+        equalsValuePath: "password",
+        message: props.message.equalsRule,
+      }),
+    ]);
+  }
+
+  resetModel() {
+    this.model.password = "";
+    this.model.passwordAgain = "";
+  }
+
+  get password() {
+    return this.model.password;
+  }
+
+  set password(value: string) {
+    this.model.password = value;
+  }
+
+  get passwordAgain() {
+    return this.model.passwordAgain;
+  }
+
+  set passwordAgain(value: string) {
+    this.model.passwordAgain = value;
+  }
+
+  get hasError() {
+    return this.validator.hasError;
+  }
+
+  get passwordErrorMessage() {
+    return this.validator.results.password.errorMessage;
+  }
+
+  get passwordAgainErrorMessage() {
+    return this.validator.results.passwordAgain.errorMessage;
+  }
+
+  get redirect() {
+    if (typeof window !== "undefined") {
+      const urlSearch = new URLSearchParams(window.location.search);
+      return urlSearch.get("redirect");
+    }
+  }
+
+  onPasswordChange = (value: string) => {
+    this.password = value;
+  };
+
+  onPasswordAgainChange = (value: string) => {
+    this.passwordAgain = value;
+  };
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async submit() {
+    let token = "";
+    const response = { isFormError: false, isSuccess: false };
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    if (typeof window !== "undefined") {
+      const urlParams = new URLSearchParams(window.location.search);
+      token = urlParams.get("token") || "";
+    }
+
+    try {
+      const recoverPasswordResponse = await this.store.customerStore.recoverPassword(
+        this.model.password,
+        this.model.passwordAgain,
+        token
+      );
+      if (recoverPasswordResponse) response.isSuccess = true;
+      return response;
+    } catch {
+      return response;
+    }
+  }
+}

package/src/models/ui/validator/form/register.ts

@@ -0,0 +1,200 @@
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { EmailRule, MinRule, RequiredRule } from "../rules";
+import { IkasBaseStore } from "../../../../store";
+import { Analytics } from "../../../../analytics";
+
+type RegisterFormProps<T> = {
+  message: {
+    requiredRule: ((model: T) => string) | string;
+    emailRule: ((model: T) => string) | string;
+    minRule: ((model: T) => string) | string;
+  };
+  store: IkasBaseStore;
+};
+
+type RegisterFormModel = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  isMarketingAccepted?: boolean;
+};
+
+export class RegisterForm {
+  private model: RegisterFormModel = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    isMarketingAccepted: false,
+  };
+  private validator: Validator;
+  private store: IkasBaseStore;
+
+  constructor(props: RegisterFormProps<RegisterFormModel>) {
+    makeObservable<this, "model">(this, {
+      emailErrorMessage: computed,
+      passwordErrorMessage: computed,
+      firstNameErrorMessage: computed,
+      lastNameErrorMessage: computed,
+      hasError: computed,
+      redirect: computed,
+      model: observable,
+      validateAll: action,
+      register: action,
+    });
+    this.store = props.store;
+    this.validator = new Validator(this.model, [
+      new RequiredRule({
+        fieldKey: "firstName",
+        valuePath: "firstName",
+        message: props.message.requiredRule,
+      }),
+      new RequiredRule({
+        fieldKey: "lastName",
+        valuePath: "lastName",
+        message: props.message.requiredRule,
+      }),
+      new RequiredRule({
+        fieldKey: "email",
+        valuePath: "email",
+        message: props.message.requiredRule,
+      }),
+      new RequiredRule({
+        fieldKey: "password",
+        valuePath: "password",
+        message: props.message.requiredRule,
+      }),
+      new EmailRule({
+        fieldKey: "email",
+        valuePath: "email",
+        message: props.message.emailRule,
+      }),
+      new MinRule({
+        fieldKey: "password",
+        valuePath: "password",
+        minValue: 6,
+        message: props.message.minRule,
+      }),
+    ]);
+  }
+
+  get firstName() {
+    return this.model.firstName;
+  }
+
+  set firstName(value: string) {
+    this.model.firstName = value;
+  }
+
+  get lastName() {
+    return this.model.lastName;
+  }
+
+  set lastName(value: string) {
+    this.model.lastName = value;
+  }
+
+  get email() {
+    return this.model.email;
+  }
+
+  set email(value: string) {
+    this.model.email = value;
+  }
+
+  get password() {
+    return this.model.password;
+  }
+
+  set password(value: string) {
+    this.model.password = value;
+  }
+
+  get isMarketingAccepted() {
+    return this.model.isMarketingAccepted;
+  }
+
+  set isMarketingAccepted(value: boolean | undefined) {
+    this.model.isMarketingAccepted = value;
+  }
+
+  get hasError() {
+    return this.validator.hasError;
+  }
+
+  get firstNameErrorMessage() {
+    return this.validator.results.firstName.errorMessage;
+  }
+
+  get lastNameErrorMessage() {
+    return this.validator.results.lastName.errorMessage;
+  }
+
+  get emailErrorMessage() {
+    return this.validator.results.email.errorMessage;
+  }
+
+  get passwordErrorMessage() {
+    return this.validator.results.password.errorMessage;
+  }
+
+  get redirect() {
+    if (typeof window !== "undefined") {
+      const urlSearch = new URLSearchParams(window.location.search);
+      return urlSearch.get("redirect");
+    }
+  }
+
+  onFirstNameChange = (value: string) => {
+    this.firstName = value;
+  };
+
+  onLastNameChange = (value: string) => {
+    this.lastName = value;
+  };
+
+  onEmailChange = (value: string) => {
+    this.email = value;
+  };
+
+  onPasswordChange = (value: string) => {
+    this.password = value;
+  };
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async register() {
+    const response = { isFormError: false, isSuccess: false };
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    try {
+      const isRegisterSuccess = await this.store.customerStore.register(
+        this.model.firstName,
+        this.model.lastName,
+        this.model.email,
+        this.model.password,
+        this.model.isMarketingAccepted
+      );
+      if (isRegisterSuccess) {
+        response.isSuccess = true;
+        Analytics.completeRegistration(
+          this.model.email,
+          this.store.customerStore.customer?.id
+        );
+      }
+
+      return response;
+    } catch {
+      return response;
+    }
+  }
+}

package/src/models/ui/validator/index.ts

@@ -0,0 +1,121 @@
+import { makeAutoObservable } from "mobx";
+import _groupBy from "lodash/groupBy";
+
+import { ValidatorErrorType, ValidationRule } from "./rules";
+
+export type ValidationResults = { [fieldKey: string]: ValidationResult };
+export type ValidationStatus = "success" | "warning" | "error" | "validating";
+
+export class Validator<T = any> {
+  model: T;
+  rules: ValidationRule[];
+  results: ValidationResults = {};
+
+  constructor(model: T, rules: ValidationRule[]) {
+    this.model = model;
+    this.rules = [];
+    this.setRules(rules);
+
+    makeAutoObservable(this, { model: false });
+  }
+
+  get hasError() {
+    return Object.values(this.results).some((r) => r.status === "error");
+  }
+
+  onValueChange = (validationRule: ValidationRule) => {
+    const validationResult = this.results[validationRule.fieldKey];
+    if (validationResult && validationResult.status === "error") {
+      this.runRules(validationRule.fieldKey, [validationRule]);
+    }
+  };
+
+  setRules(rules: ValidationRule[]) {
+    this.rules.forEach((rule) => rule.disposer && rule.disposer());
+    this.rules = rules;
+    this.rules.forEach((rule) => {
+      this.results[rule.fieldKey] = new ValidationResult(rule.fieldKey);
+      rule.model = this.model;
+      rule.onValueChange = this.onValueChange;
+    });
+
+    const resultsToDelete: string[] = [];
+    Object.keys(this.results).forEach((fieldKey) => {
+      const exists = this.rules.some((r) => r.fieldKey === fieldKey);
+      if (!exists) resultsToDelete.push(fieldKey);
+    });
+
+    resultsToDelete.forEach((fieldKey) => {
+      delete this.results[fieldKey];
+    });
+  }
+
+  async validateAll(): Promise<boolean> {
+    const groupedRules = _groupBy(this.rules, "fieldKey");
+    const fieldKeys = Object.keys(groupedRules);
+
+    for (let i = 0; i < fieldKeys.length; i++) {
+      const fieldKey = fieldKeys[i];
+      const rules = groupedRules[fieldKey];
+      await this.runRules(fieldKey, rules);
+    }
+
+    return this.hasError;
+  }
+
+  async validateFieldRules(fieldKey: string) {
+    const rules = this.rules.filter((rule) => rule.fieldKey === fieldKey);
+    await this.runRules(fieldKey, rules);
+  }
+
+  private async runRules(fieldKey: string, rules: ValidationRule[]) {
+    const errorTypes: ValidatorErrorType[] = [];
+    const errorMessages: string[] = [];
+    let hasError = false;
+
+    for (let i = 0; i < rules.length; i++) {
+      const rule = rules[i];
+      const isValid = await rule.run();
+      if (!isValid) {
+        hasError = true;
+        if (rule.errorType) errorTypes.push(rule.errorType);
+        errorMessages.push(rule.errorMessage);
+      }
+    }
+
+    if (this.results[fieldKey]) {
+      this.results[fieldKey].errorTypes = errorTypes;
+      this.results[fieldKey].messages = errorMessages;
+      this.results[fieldKey].status = hasError ? "error" : undefined;
+    }
+  }
+}
+
+class ValidationResult {
+  fieldKey: string;
+  status?: ValidationStatus;
+  messages: string[];
+  errorTypes: ValidatorErrorType[];
+
+  constructor(
+    fieldKey: string,
+    status?: ValidationStatus,
+    messages: string[] = [],
+    errorTypes: ValidatorErrorType[] = []
+  ) {
+    this.fieldKey = fieldKey;
+    this.status = status;
+    this.messages = messages;
+    this.errorTypes = errorTypes;
+
+    makeAutoObservable(this);
+  }
+
+  get errorMessage() {
+    return this.messages.length ? this.messages[0] : undefined;
+  }
+
+  get errorType() {
+    return this.errorTypes.length ? this.errorTypes[0] : undefined;
+  }
+}