@ikas/storefront 4.0.0-alpha.78 → 4.0.0-alpha.8

package/src/models/ui/validator/form/customer-review.ts

@@ -0,0 +1,132 @@
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { IkasBaseStore } from "../../../../store";
+import { RequiredRule, MinRule, MaxRule } from "../rules";
+
+type CustomerReviewFormProps<T> = {
+  productId: string;
+  message: {
+    starRule: ((model: T) => string) | string;
+  };
+};
+
+type CustomerReviewFormModel = {
+  title: string;
+  comment: string;
+  star: number;
+};
+
+export class CustomerReviewForm {
+  private productId: string;
+  private model: CustomerReviewFormModel = {
+    title: "",
+    comment: "",
+    star: 0,
+  };
+  private validator: Validator;
+
+  constructor(props: CustomerReviewFormProps<CustomerReviewFormModel>) {
+    makeObservable<this, "model">(this, {
+      starErrorMessage: computed,
+      hasError: computed,
+      model: observable,
+      validateAll: action,
+      submit: action,
+    });
+    this.productId = props.productId;
+    this.validator = new Validator(this.model, [
+      new RequiredRule({
+        fieldKey: "star",
+        valuePath: "star",
+        message: props.message.starRule,
+      }),
+      new MinRule({
+        fieldKey: "star",
+        valuePath: "star",
+        minValue: 1,
+        message: props.message.starRule,
+      }),
+      new MaxRule({
+        fieldKey: "star",
+        valuePath: "star",
+        maxValue: 5,
+        message: props.message.starRule,
+      }),
+    ]);
+  }
+
+  get title() {
+    return this.model.title;
+  }
+
+  set title(value: string) {
+    this.model.title = value;
+  }
+
+  get comment() {
+    return this.model.comment;
+  }
+
+  set comment(value: string) {
+    this.model.comment = value;
+  }
+
+  get star() {
+    return this.model.star;
+  }
+
+  set star(value: number) {
+    this.model.star = value;
+  }
+
+  get hasError() {
+    return this.validator.hasError;
+  }
+
+  get starErrorMessage() {
+    return this.validator.results.star.errorMessage;
+  }
+
+  onTitleChange = (value: string) => {
+    this.title = value;
+  };
+
+  onCommentChange = (value: string) => {
+    this.comment = value;
+  };
+
+  onStarChange = (value: number) => {
+    this.star = value;
+  };
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async submit() {
+    const response = { isFormError: false, isSuccess: false };
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    try {
+      const isContactFormSuccess =
+        await IkasBaseStore.getInstance().customerStore.sendReview({
+          title: this.model.title,
+          comment: this.model.comment,
+          star: this.model.star,
+          productId: this.productId,
+        });
+      if (isContactFormSuccess) {
+        response.isSuccess = true;
+      }
+
+      return response;
+    } catch {
+      return response;
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { IkasBaseStore } from "../../../../store";
+import { EmailRule, RequiredRule } from "../rules";
+
+type ForgotPasswordProps<T> = {
+  message: {
+    requiredRule: ((model: T) => string) | string;
+    emailRule: ((model: T) => string) | string;
+  };
+};
+
+type ForgotPasswordFormModel = {
+  email: string;
+};
+
+export class ForgotPasswordForm {
+  private model: ForgotPasswordFormModel = { email: "" };
+  private validator: Validator;
+
+  constructor(props: ForgotPasswordProps<ForgotPasswordFormModel>) {
+    makeObservable<this, "model">(this, {
+      emailErrorMessage: computed,
+      hasValidatorError: computed,
+      redirect: computed,
+      email: computed,
+      model: observable,
+      validateAll: action,
+      submit: action,
+    });
+    this.validator = new Validator(this.model, [
+      new RequiredRule({
+        fieldKey: "email",
+        valuePath: "email",
+        message: props.message.requiredRule,
+      }),
+      new EmailRule({
+        fieldKey: "email",
+        valuePath: "email",
+        message: props.message.emailRule,
+      }),
+    ]);
+  }
+
+  get email() {
+    return this.model.email;
+  }
+
+  set email(value: string) {
+    this.model.email = value;
+  }
+
+  onEmailChange = (value: string) => {
+    this.email = value;
+  };
+
+  get hasValidatorError() {
+    return this.validator.hasError;
+  }
+
+  get emailErrorMessage() {
+    return this.validator.results.email.errorMessage;
+  }
+
+  get redirect() {
+    if (typeof window !== "undefined") {
+      const urlSearch = new URLSearchParams(window.location.search);
+      return urlSearch.get("redirect");
+    }
+  }
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async submit() {
+    const response = { isFormError: false, isSuccess: false };
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    try {
+      const forgotPasswordResponse =
+        await IkasBaseStore.getInstance().customerStore.forgotPassword(
+          this.model.email
+        );
+      if (forgotPasswordResponse) response.isSuccess = true;
+      return response;
+    } catch {
+      return response;
+    }
+  }
+}

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

@@ -0,0 +1,128 @@
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { IkasBaseStore } from "../../../../store";
+import { EmailRule, MinRule, RequiredRule } from "../rules";
+
+type LoginFormProps<T> = {
+  message: {
+    requiredRule: ((model: T) => string) | string;
+    emailRule: ((model: T) => string) | string;
+    minRule: ((model: T) => string) | string;
+  };
+};
+
+type LoginFormModel = {
+  email: string;
+  password: string;
+};
+
+export class LoginForm {
+  private model: LoginFormModel = { email: "", password: "" };
+  private validator: Validator;
+
+  constructor(props: LoginFormProps<LoginFormModel>) {
+    makeObservable<this, "model">(this, {
+      emailErrorMessage: computed,
+      passwordErrorMessage: computed,
+      hasError: computed,
+      redirect: computed,
+      email: computed,
+      password: computed,
+      model: observable,
+      validateAll: action,
+      login: action,
+    });
+    this.validator = new Validator(this.model, [
+      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 hasError() {
+    return this.validator.hasError;
+  }
+
+  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 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");
+    }
+  }
+
+  onEmailChange = (value: string) => {
+    this.email = value;
+  };
+
+  onPasswordChange = (value: string) => {
+    this.password = value;
+  };
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async login() {
+    const response = { isFormError: false, isSuccess: false };
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    try {
+      const isLoginSuccess =
+        await IkasBaseStore.getInstance().customerStore.login(
+          this.model.email,
+          this.model.password
+        );
+      if (isLoginSuccess) response.isSuccess = true;
+      return response;
+    } catch {
+      return response;
+    }
+  }
+}

package/src/models/ui/validator/form/raffle-form.ts

@@ -0,0 +1,276 @@
+import { saveRaffleParticipant } from "@ikas/storefront-api";
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { IkasBaseStore } from "../../../../store";
+import { IkasRaffle } from "../../../data";
+import {
+  EmailRule,
+  RequiredRule,
+  PhoneRule,
+  MinRule,
+  MaxRule,
+  IdentityNumberRule,
+} from "../rules";
+
+type RaffleFormProps<T> = {
+  message: {
+    requiredRule: ((model: T) => string) | string;
+    emailRule: ((model: T) => string) | string;
+    phoneRule?: ((model: T) => string) | string;
+    birthdayRule?: ((model: T) => string) | string;
+    identityNumberRule?: ((model: T) => string) | string;
+  };
+  raffle: IkasRaffle;
+};
+
+type RaffleFormModel = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  extraData: {
+    birthYear: number | null;
+    identityNumber: number | null;
+  };
+  phone: string;
+};
+
+export class RaffleForm {
+  private model: RaffleFormModel = {
+    firstName:
+      IkasBaseStore.getInstance().customerStore.customer?.firstName || "",
+    lastName:
+      IkasBaseStore.getInstance().customerStore.customer?.lastName || "",
+    email: IkasBaseStore.getInstance().customerStore.customer?.email || "",
+    extraData: {
+      birthYear: null,
+      identityNumber: null,
+    },
+    phone: "",
+  };
+  private validator: Validator;
+  private raffle: IkasRaffle;
+
+  constructor(props: RaffleFormProps<RaffleFormModel>) {
+    makeObservable<this, "model">(this, {
+      emailErrorMessage: computed,
+      firstNameErrorMessage: computed,
+      lastNameErrorMessage: computed,
+      birthYearErrorMessage: computed,
+      identityNumberErrorMessage: computed,
+      hasValidatorError: computed,
+      results: computed,
+      redirect: computed,
+      model: observable,
+      validateAll: action,
+    });
+    this.raffle = props.raffle;
+    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: "birthYear",
+        valuePath: "extraData.birthYear",
+        message: props.message.requiredRule,
+      }),
+      new RequiredRule({
+        fieldKey: "identityNumber",
+        valuePath: "extraData.identityNumber",
+        message: props.message.requiredRule,
+      }),
+      new EmailRule({
+        fieldKey: "email",
+        valuePath: "email",
+        message: props.message.emailRule,
+      }),
+      new PhoneRule({
+        fieldKey: "phone",
+        valuePath: "phone",
+        message: props.message.phoneRule,
+      }),
+      new MinRule({
+        fieldKey: "birthYear",
+        valuePath: "extraData.birthYear",
+        message: props.message.birthdayRule,
+        minValue: 1000,
+      }),
+      new MaxRule({
+        fieldKey: "birthYear",
+        valuePath: "extraData.birthYear",
+        message: props.message.birthdayRule,
+        maxValue: 9999,
+      }),
+      new IdentityNumberRule({
+        fieldKey: "identityNumber",
+        valuePath: "extraData.identityNumber",
+        message: props.message.identityNumberRule,
+      }),
+    ]);
+  }
+
+  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 birthYear() {
+    return this.model.extraData.birthYear;
+  }
+
+  set birthYear(value: number | null) {
+    this.model.extraData.birthYear = value;
+  }
+
+  get identityNumber() {
+    return this.model.extraData.identityNumber;
+  }
+
+  set identityNumber(value: number | null) {
+    this.model.extraData.identityNumber = value;
+  }
+
+  get phone() {
+    return this.model.phone;
+  }
+
+  set phone(value: string) {
+    this.model.phone = value;
+  }
+
+  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 birthYearErrorMessage() {
+    return this.validator.results.birthYear.errorMessage;
+  }
+
+  get identityNumberErrorMessage() {
+    return this.validator.results.identityNumber.errorMessage;
+  }
+
+  get phoneErrorMessage() {
+    return this.validator.results.phone.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;
+  };
+
+  onBirthYearChange = (value: number) => {
+    this.birthYear = value;
+  };
+
+  onIdentityNumberChange = (value: number) => {
+    this.identityNumber = value;
+  };
+
+  onPhoneChange = (value: string) => {
+    this.phone = value;
+  };
+
+  get hasValidatorError() {
+    return this.validator.hasError || !this.raffle.variants?.length;
+  }
+
+  get results() {
+    return this.validator.results;
+  }
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async submit() {
+    const response = { isFormError: false, isSuccess: false };
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    try {
+      const selectedVariant = this.raffle.products[0].selectedVariant;
+      const isRaffleFormSuccess = await saveRaffleParticipant({
+        input: {
+          appliedProduct: {
+            productId: selectedVariant.productId,
+            variantId: selectedVariant.id,
+          },
+          email: this.email,
+          firstName: this.firstName,
+          lastName: this.lastName,
+          raffleId: this.raffle.id,
+          extraData: {
+            birthYear: this.birthYear,
+            identityNumber: this.identityNumber,
+          },
+          phone: this.phone,
+        },
+      });
+
+      if (isRaffleFormSuccess) {
+        response.isSuccess = true;
+      }
+
+      return response;
+    } catch (error) {
+      return response;
+    }
+  }
+}