@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/models/ui/raffle-list/index.ts

@@ -0,0 +1,208 @@
+import { IkasRaffleAPI } from "../../../api";
+import { IkasRaffle } from "../../../models";
+import { makeAutoObservable, runInAction } from "mobx";
+import { populateRaffleProducts } from "../../../providers/helpers/raffles";
+
+export class IkasRaffleList {
+  data: IkasRaffle[];
+  private _limit: number;
+  private _page: number;
+  private _count: number;
+  private _initialized = false;
+  private _minPage?: number | null = null;
+
+  private _start: number | null;
+  private _end: number | null;
+  private _includeDeleted: boolean | null;
+  private _name: string | null;
+  private _search: string | null;
+  private _id: string | null;
+
+  private _isLoading = false;
+
+  constructor(data: IkasRaffleListParams = {}) {
+    this.data = data.data ? data.data.map((r) => new IkasRaffle(r)) : [];
+    this._limit = data.limit || 20;
+    this._page = data.page || 1;
+    this._count = data.count || 0;
+    this._initialized = data.initialized || false;
+    this._minPage = data.minPage || null;
+    this._start = data.start || null;
+    this._end = data.end || null;
+    this._includeDeleted = data.includeDeleted || null;
+    this._name = data.name || null;
+    this._search = data.search || null;
+    this._id = data.id || null;
+
+    makeAutoObservable(this);
+  }
+
+  get limit() {
+    return this._limit;
+  }
+
+  get page() {
+    return this._page;
+  }
+
+  get count() {
+    return this._count;
+  }
+
+  get pageCount() {
+    return Math.ceil(this._count / this._limit);
+  }
+
+  get isInitialized() {
+    return this._initialized;
+  }
+
+  get hasPrev() {
+    if (!this._minPage) return false;
+    return this._minPage > 1;
+  }
+
+  get hasNext() {
+    return this.page * this.limit < this.count;
+  }
+
+  get isLoading() {
+    return this._isLoading;
+  }
+
+  get minPage() {
+    return this._minPage || 1;
+  }
+
+  private async getRaffleList(page: number, limit: number) {
+    const response = await IkasRaffleAPI.listRaffles({
+      start: this._start,
+      end: this._end,
+      includeDeleted: this._includeDeleted || false,
+      name: this._name,
+      id: this._id,
+      search: this._search || undefined,
+      pagination: {
+        limit,
+        page,
+      },
+    });
+
+    await populateRaffleProducts(response.raffles);
+
+    return response;
+  }
+
+  private getInitial = async () => {
+    if (this._isLoading) return;
+    this._isLoading = true;
+
+    try {
+      const response = await this.getRaffleList(this.page, this.limit);
+
+      this.data = response.raffles;
+      this._count = response.count;
+      this._initialized = true;
+      this._minPage = this.page;
+    } catch (err) {
+      console.log(err);
+    } finally {
+      runInAction(() => {
+        this._isLoading = false;
+      });
+    }
+  };
+
+  getPrev = async () => {
+    if (this._isLoading || !this.hasPrev) return;
+
+    this._isLoading = true;
+
+    try {
+      const minPage = this._minPage! - 1;
+      const response = await this.getRaffleList(minPage, this.limit);
+
+      runInAction(() => {
+        this.data = response.raffles.concat(this.data);
+        this._count = response.count;
+        this._minPage = minPage;
+      });
+    } catch (err) {
+      console.log(err);
+    } finally {
+      runInAction(() => {
+        this._isLoading = false;
+      });
+    }
+  };
+
+  getNext = async () => {
+    if (this._isLoading || !this.hasNext) return;
+    this._isLoading = true;
+
+    try {
+      const response = await this.getRaffleList(this.page + 1, this.limit);
+
+      runInAction(() => {
+        this.data = this.data.concat(response.raffles);
+        this._count = response.count;
+        this._page = this.page + 1;
+      });
+    } catch (err) {
+      console.log(err);
+    } finally {
+      runInAction(() => {
+        this._isLoading = false;
+      });
+    }
+  };
+
+  getPage = async (page: number) => {
+    if (this._isLoading) return;
+    this._isLoading = true;
+
+    try {
+      const response = await this.getRaffleList(page, this.limit);
+
+      runInAction(() => {
+        this.data = response.raffles;
+        this._count = response.count;
+        this._page = page;
+        this._minPage = page;
+      });
+    } catch (err) {
+      console.log(err);
+    } finally {
+      runInAction(() => {
+        this._isLoading = false;
+      });
+    }
+  };
+
+  toJSON() {
+    return {
+      data: this.data,
+      limit: this._limit,
+      page: this._page,
+      count: this._count,
+      initialized: this._initialized,
+      minPage: this._minPage,
+    };
+  }
+}
+
+export type IkasRaffleListParams = {
+  data?: IkasRaffle[];
+  limit?: number;
+  page?: number;
+  count?: number;
+  initialized?: boolean;
+  minPage?: number;
+  start?: number;
+  end?: number;
+  includeDeleted?: boolean;
+  name?: string;
+  search?: string;
+  id?: string;
+  customerId?: string;
+};

package/src/models/ui/validator/form/account-info.ts

@@ -0,0 +1,155 @@
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { PhoneRule, RequiredRule } from "../rules";
+import { IkasBaseStore } from "../../../../store";
+import { IkasCustomer } from "../../../../models";
+
+type AccountInfoFormPropsValidatorMessage<T> = {
+  requiredRule: ((model: T) => string) | string;
+  phoneRule?: ((model: T) => string) | string;
+};
+
+type AccountInfoFormProps<T> = {
+  message: AccountInfoFormPropsValidatorMessage<T>;
+  customer: IkasCustomer;
+  store: IkasBaseStore;
+};
+
+export class AccountInfoForm {
+  private customer: IkasCustomer;
+  private validator: Validator;
+  private store: IkasBaseStore;
+  private message: AccountInfoFormPropsValidatorMessage<IkasCustomer>;
+
+  constructor(props: AccountInfoFormProps<IkasCustomer>) {
+    makeObservable(this, {
+      firstNameErrorMessage: computed,
+      lastNameErrorMessage: computed,
+      phoneErrorMessage: computed,
+      hasError: computed,
+      firstName: computed,
+      lastName: computed,
+      phone: computed,
+      validateAll: action,
+      submit: action,
+    });
+    this.customer = props.customer;
+    this.store = props.store;
+    this.message = props.message;
+    this.validator = new Validator(this.customer, this.validatorRules());
+  }
+
+  validatorRules = (includePhoneRule = false) => {
+    const rules = [
+      new RequiredRule({
+        model: this.customer,
+        fieldKey: "firstName",
+        valuePath: "firstName",
+        message: this.message.requiredRule,
+      }),
+      new RequiredRule({
+        model: this.customer,
+        fieldKey: "lastName",
+        valuePath: "lastName",
+        message: this.message.requiredRule,
+      }),
+      ...(includePhoneRule
+        ? [
+            new PhoneRule({
+              model: this.customer,
+              fieldKey: "phone",
+              valuePath: "phone",
+              message: this.message.phoneRule,
+            }),
+          ]
+        : []),
+    ];
+
+    return rules;
+  };
+
+  get hasError() {
+    return this.validator.hasError;
+  }
+
+  get email() {
+    return this.customer.email;
+  }
+
+  get firstName() {
+    return this.customer.firstName;
+  }
+
+  set firstName(value: string) {
+    this.customer.firstName = value;
+  }
+
+  get lastName() {
+    return this.customer.lastName;
+  }
+
+  set lastName(value: string) {
+    this.customer.lastName = value;
+  }
+
+  get phone() {
+    return this.customer.phone || "";
+  }
+
+  set phone(value: string) {
+    this.customer.phone = value;
+  }
+
+  get firstNameErrorMessage() {
+    return this.validator.results?.firstName?.errorMessage;
+  }
+
+  get lastNameErrorMessage() {
+    return this.validator.results?.lastName?.errorMessage;
+  }
+
+  get phoneErrorMessage() {
+    return this.validator.results?.phone?.errorMessage;
+  }
+
+  onFirstNameChange = (value: string) => {
+    this.customer.firstName = value;
+  };
+
+  onLastNameChange = (value: string) => {
+    this.customer.lastName = value;
+  };
+
+  onPhoneChange = (value: string) => {
+    this.customer.phone = value || null;
+
+    if (!value) this.validator.setRules(this.validatorRules());
+  };
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async submit() {
+    const response = { isFormError: false, isSuccess: false };
+
+    if (this.phone) this.validator.setRules(this.validatorRules(true));
+
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    try {
+      const saveResponse = await this.store.customerStore.saveCustomer(
+        this.customer
+      );
+      if (saveResponse) response.isSuccess = true;
+      return response;
+    } catch {
+      return response;
+    }
+  }
+}