@ikas/storefront 1.0.21 → 2.0.0-alpha.1

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

@@ -0,0 +1,436 @@
+import { action, computed, makeObservable, observable } from "mobx";
+import _cloneDeep from "lodash/cloneDeep";
+
+import {
+  IkasCityAPI,
+  IkasCountryAPI,
+  IkasDistrictAPI,
+  IkasStateAPI,
+} from "../../../../api";
+import {
+  IkasCity,
+  IkasCountry,
+  IkasCustomerAddress,
+  IkasDistrict,
+  IkasState,
+} from "../../../../models/data";
+import { IkasBaseStore } from "../../../../store";
+import { Validator } from "..";
+import { PhoneRule, RequiredRule } from "../rules";
+import { IkasStorefrontConfig } from "../../../../storefront";
+
+const alphabeticSort = (list: Array<{ label: string; value: string }>) => {
+  return list.sort((a, b) => a.label.localeCompare(b.label));
+};
+
+const modelToOption = (
+  model: IkasCountry | IkasState | IkasCity | IkasDistrict
+) => {
+  return {
+    label: model.name,
+    value: model.id + "",
+  };
+};
+
+type AddressFormPropsValidatorMessage<T> = {
+  requiredRule: ((model: T) => string) | string;
+  phoneRule?: ((model: T) => string) | string;
+};
+
+type AddressFormProps<T> = {
+  message: AddressFormPropsValidatorMessage<T>;
+  address: IkasCustomerAddress;
+  store: IkasBaseStore;
+};
+
+export class AddressForm {
+  address: IkasCustomerAddress;
+
+  countries: IkasCountry[] = [];
+  states: IkasState[] = [];
+  cities: IkasCity[] = [];
+  districts: IkasDistrict[] = [];
+  private _isCountriesPending = true;
+  private _isStatesPending = false;
+  private _isCitiesPending = false;
+  private _isDistrictsPending = false;
+
+  private store: IkasBaseStore;
+  private validator: Validator;
+  private message: AddressFormPropsValidatorMessage<IkasCustomerAddress>;
+
+  constructor(props: AddressFormProps<IkasCustomerAddress>) {
+    makeObservable<
+      this,
+      | "_isCountriesPending"
+      | "_isStatesPending"
+      | "_isCitiesPending"
+      | "_isDistrictsPending"
+      | "editingAddressIndex"
+    >(this, {
+      hasValidatorError: computed,
+      isEdit: computed,
+      results: computed,
+      editingAddressIndex: computed,
+      countries: observable,
+      states: observable,
+      cities: observable,
+      districts: observable,
+      _isCountriesPending: observable,
+      _isStatesPending: observable,
+      _isCitiesPending: observable,
+      _isDistrictsPending: observable,
+      isCountriesPending: computed,
+      isStatesPending: computed,
+      isCitiesPending: computed,
+      isDistrictsPending: computed,
+      onCountryChange: action,
+      validateAll: action,
+      submit: action,
+    });
+    this.address = props.address;
+    this.message = props.message;
+    this.store = props.store;
+    this.validator = new Validator(this.address, this.validatorRules());
+    this.listCountries();
+    if (this.address.state) this.listStates();
+    if (this.address.country) this.listCities();
+    if (this.address.city) this.listDistricts();
+  }
+
+  validatorRules = (includePhoneRule = false) => {
+    const rules = [
+      new RequiredRule({
+        model: this.address,
+        fieldKey: "firstName",
+        valuePath: "firstName",
+        message: this.message.requiredRule,
+      }),
+      new RequiredRule({
+        model: this.address,
+        fieldKey: "lastName",
+        valuePath: "lastName",
+        message: this.message.requiredRule,
+      }),
+      new RequiredRule({
+        model: this.address,
+        fieldKey: "addressLine1",
+        valuePath: "addressLine1",
+        message: this.message.requiredRule,
+      }),
+      new RequiredRule({
+        model: this.address,
+        fieldKey: "country",
+        valuePath: "country",
+        message: this.message.requiredRule,
+      }),
+      new RequiredRule({
+        model: this.address,
+        fieldKey: "state",
+        valuePath: "state",
+        message: this.message.requiredRule,
+      }),
+      new RequiredRule({
+        model: this.address,
+        fieldKey: "city",
+        valuePath: "city",
+        message: this.message.requiredRule,
+      }),
+      new RequiredRule({
+        model: this.address,
+        fieldKey: "title",
+        valuePath: "title",
+        message: this.message.requiredRule,
+      }),
+      ...(includePhoneRule
+        ? [
+            new PhoneRule({
+              model: this.address,
+              fieldKey: "phone",
+              valuePath: "phone",
+              message: this.message.phoneRule,
+            }),
+          ]
+        : []),
+    ];
+
+    return rules;
+  };
+
+  onTitleChange = (value: string) => {
+    this.address.title = value;
+  };
+
+  onFirstNameChange = (value: string) => {
+    this.address.firstName = value;
+  };
+
+  onLastNameChange = (value: string) => {
+    this.address.lastName = value;
+  };
+
+  onPhoneChange = (value: string) => {
+    this.address.phone = value;
+    if (!value) this.validator.setRules(this.validatorRules());
+  };
+
+  onAddressLine1Change = (value: string) => {
+    this.address.addressLine1 = value;
+  };
+
+  onAddressLine2Change = (value: string) => {
+    this.address.addressLine2 = value;
+  };
+
+  onAddressPostalCodeChange = (value: string) => {
+    this.address.postalCode = value;
+  };
+
+  onCountryChange = (countryId: string) => {
+    const isDifferentCountry = this.address.country?.id !== countryId;
+    if (!isDifferentCountry) return;
+
+    const country = this.countries.find((c) => c.id === countryId);
+    this.address.country = {
+      id: country?.id,
+      name: country?.name,
+      code: country?.iso3,
+    };
+
+    this.address.state = undefined;
+    this.address.city = undefined;
+    this.address.district = undefined;
+
+    this.states = [];
+    this.cities = [];
+    this.districts = [];
+
+    this.listStates();
+  };
+
+  onStateChange = (stateId: string) => {
+    const isDifferentState = this.address.state?.id !== stateId;
+    if (!isDifferentState) return;
+
+    const state = this.states.find((s) => s.id === stateId)!;
+    this.address.state = {
+      id: state.id,
+      name: state?.name,
+      code: state?.stateCode,
+    };
+
+    this.address.city = undefined;
+    this.address.district = undefined;
+
+    this.cities = [];
+    this.districts = [];
+
+    this.listCities();
+  };
+
+  onCityChange = (cityId: string) => {
+    const isDifferentCity = this.address.city?.id !== cityId;
+    if (!isDifferentCity) return;
+
+    const city = this.cities.find((c) => c.id === cityId)!;
+    this.address.city = {
+      id: city.id,
+      name: city.name,
+    };
+
+    this.address.district = undefined;
+    this.districts = [];
+    this.listDistricts();
+  };
+
+  onDistrictChange = (districtId: string) => {
+    const isDifferentDistrict = this.address.district?.id !== districtId;
+    if (!isDifferentDistrict) return;
+
+    const district = this.districts.find((d) => d.id === districtId)!;
+    this.address.district = {
+      id: district.id,
+      name: district.name,
+    };
+  };
+
+  onDistrictInputChange = (value: string) => {
+    this.address.district = {
+      id: undefined,
+      name: value,
+    };
+  };
+
+  listCountries = async () => {
+    try {
+      this._isCountriesPending = true;
+      let countries = await IkasCountryAPI.listCountries();
+
+      const currentRouting = IkasStorefrontConfig.routings.find(
+        (r) => r.id === IkasStorefrontConfig.storefrontRoutingId
+      );
+
+      if (currentRouting?.countryCodes?.length) {
+        countries = countries.filter(
+          (c) => c.iso2 && currentRouting.countryCodes?.includes(c.iso2)
+        );
+      }
+
+      this.countries = countries;
+
+      if (this.countries.length === 1 && !this.address.country)
+        this.onCountryChange(this.countries[0].id);
+
+      this.countries = countries;
+    } catch (err) {
+    } finally {
+      this._isCountriesPending = false;
+    }
+  };
+
+  listStates = async () => {
+    if (!this.address.country?.id) return;
+
+    try {
+      this._isStatesPending = true;
+      const states = await IkasStateAPI.listStates(this.address.country.id);
+
+      this.states = states;
+      if (!this.hasState) {
+        this.onStateChange(this.states[0].id);
+      }
+    } catch (err) {
+    } finally {
+      this._isStatesPending = false;
+    }
+  };
+
+  listCities = async () => {
+    if (!this.address.state?.id) return;
+    try {
+      this._isCitiesPending = true;
+      const cities = await IkasCityAPI.listCities(
+        this.address.state.id,
+        this.address.country?.id
+      );
+      this.cities = cities;
+    } catch (err) {
+    } finally {
+      this._isCitiesPending = false;
+    }
+  };
+
+  listDistricts = async () => {
+    if (!this.address.city?.id) return;
+    try {
+      this._isDistrictsPending = true;
+      const districts = await IkasDistrictAPI.listDistricts(
+        this.address.city.id,
+        this.address.state?.id
+      );
+      this.districts = districts;
+    } catch (err) {
+    } finally {
+      this._isDistrictsPending = false;
+    }
+  };
+
+  get isEdit() {
+    return this.editingAddressIndex !== -1;
+  }
+
+  private get editingAddressIndex() {
+    return (
+      this.store.customerStore.customer?.addresses.findIndex(
+        (address) => address.id === this.address.id
+      ) ?? -1
+    );
+  }
+
+  get countryOptions() {
+    const list = this.countries.map(modelToOption);
+    return alphabeticSort(list);
+  }
+
+  get stateOptions() {
+    const list = this.states.map(modelToOption);
+    return alphabeticSort(list);
+  }
+
+  get cityOptions() {
+    const list = this.cities.map(modelToOption);
+    return alphabeticSort(list);
+  }
+
+  get districtOptions() {
+    const list = this.districts.map(modelToOption);
+    return alphabeticSort(list);
+  }
+
+  get hasState() {
+    return this.states.length > 1;
+  }
+
+  get isCountriesPending() {
+    return this._isCountriesPending;
+  }
+
+  get isStatesPending() {
+    return this.isCountriesPending || this._isStatesPending;
+  }
+
+  get isCitiesPending() {
+    return this.isStatesPending || this._isCitiesPending;
+  }
+
+  get isDistrictsPending() {
+    return this.isCitiesPending || this._isDistrictsPending;
+  }
+
+  get hasValidatorError() {
+    return this.validator.hasError;
+  }
+
+  get results() {
+    return this.validator.results;
+  }
+
+  validateAll = () => {
+    return this.validator.validateAll();
+  };
+
+  submit = async () => {
+    const response = {
+      isFormError: false,
+      isSuccess: false,
+    };
+
+    if (this.address.phone) this.validator.setRules(this.validatorRules(true));
+
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    if (!this.store.customerStore.customer || !this.address) return response;
+
+    const customer = _cloneDeep(this.store.customerStore.customer);
+
+    if (this.isEdit) {
+      customer.addresses[this.editingAddressIndex] = this.address;
+    } else {
+      customer.addresses.push(this.address);
+    }
+
+    try {
+      const saveCustomerResponse = await this.store.customerStore.saveCustomer(
+        customer
+      );
+      if (saveCustomerResponse) response.isSuccess = true;
+      return response;
+    } catch {
+      return response;
+    }
+  };
+}

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

@@ -0,0 +1,180 @@
+import { action, computed, makeObservable, observable } from "mobx";
+
+import { Validator } from "..";
+import { EmailRule, RequiredRule } from "../rules";
+import { IkasBaseStore } from "../../../../store";
+
+type ContactFormProps<T> = {
+  message: {
+    requiredRule: ((model: T) => string) | string;
+    emailRule: ((model: T) => string) | string;
+    minRule: ((model: T) => string) | string;
+  };
+  store: IkasBaseStore;
+};
+
+type ContactFormModel = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  message: string;
+};
+
+export class ContactForm {
+  private model: ContactFormModel = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    message: "",
+  };
+  private validator: Validator;
+  private store: IkasBaseStore;
+
+  constructor(props: ContactFormProps<ContactFormModel>) {
+    makeObservable<this, "model">(this, {
+      emailErrorMessage: computed,
+      messageErrorMessage: computed,
+      firstNameErrorMessage: computed,
+      lastNameErrorMessage: computed,
+      hasError: computed,
+      redirect: computed,
+      model: observable,
+      validateAll: action,
+      saveContactForm: 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: "message",
+        valuePath: "message",
+        message: props.message.requiredRule,
+      }),
+      new EmailRule({
+        fieldKey: "email",
+        valuePath: "email",
+        message: props.message.emailRule,
+      }),
+    ]);
+  }
+
+  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 message() {
+    return this.model.message;
+  }
+
+  set message(value: string) {
+    this.model.message = 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 messageErrorMessage() {
+    return this.validator.results.message.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;
+  };
+
+  onMessageChange = (value: string) => {
+    this.message = value;
+  };
+
+  validateAll() {
+    return this.validator.validateAll();
+  }
+
+  async saveContactForm() {
+    const response = { isFormError: false, isSuccess: false };
+    const hasFormError = await this.validateAll();
+    if (hasFormError) {
+      response.isFormError = true;
+      return response;
+    }
+
+    try {
+      const isContactFormSuccess = await this.store.customerStore.saveContactForm(
+        {
+          firstName: this.model.firstName,
+          lastName: this.model.lastName,
+          email: this.model.email,
+          message: this.model.message,
+        }
+      );
+      if (isContactFormSuccess) {
+        response.isSuccess = true;
+      }
+
+      return response;
+    } catch {
+      return response;
+    }
+  }
+}