@ikas/storefront 4.0.0-alpha.6 → 4.0.0-alpha.60

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

@@ -1,490 +0,0 @@
-import { action, computed, makeObservable, observable } from "mobx";
-import _cloneDeep from "lodash/cloneDeep";
-
-import { Validator } from "..";
-import { PhoneRule, RequiredRule } from "../rules";
-
-import {
-  listCity,
-  listCountry,
-  listDistrict,
-  listState,
-} from "@ikas/storefront-api";
-import { IkasStorefrontConfig } from "@ikas/storefront-config";
-import { FREE_TEXT_CITY_COUNTRY_LIST } from "../../../../utils/constants";
-import { IkasBaseStore } from "../../../../store";
-import {
-  IkasCity,
-  IkasCountry,
-  IkasCustomerAddress,
-  IkasDistrict,
-  IkasState,
-} from "../../../data";
-
-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;
-};
-
-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 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,
-      isFreeTextCity: computed,
-      isFreeTextDistrict: 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 ||
-      new IkasCustomerAddress({
-        addressLine1: "",
-        addressLine2: null,
-        attributes: null,
-        company: null,
-        firstName: "",
-        identityNumber: null,
-        isDefault: null,
-        lastName: "",
-        phone: null,
-        postalCode: null,
-        taxNumber: null,
-        taxOffice: null,
-        title: "",
-        country: null,
-        state: null,
-        city: null,
-        district: null,
-        id: "",
-        createdAt: 0,
-        updatedAt: 0,
-      });
-    this.message = props.message;
-    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 || null,
-      name: country?.name || "",
-      code: country?.iso3 || null,
-      iso2: null,
-      iso3: null,
-    };
-
-    this.address.state = null;
-    this.address.city = null;
-    this.address.district = null;
-
-    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 = null;
-    this.address.district = null;
-
-    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,
-      code: null,
-    };
-
-    this.address.district = null;
-    this.districts = [];
-    this.listDistricts();
-  };
-
-  onCityInputChange = (value: string) => {
-    this.districts = [];
-    this.address.city = {
-      id: null,
-      name: value,
-      code: null,
-    };
-  };
-
-  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,
-      code: null,
-    };
-  };
-
-  onDistrictInputChange = (value: string) => {
-    this.address.district = {
-      id: null,
-      name: value,
-      code: null,
-    };
-  };
-
-  listCountries = async () => {
-    try {
-      this._isCountriesPending = true;
-      const countryResponse = await listCountry({});
-      const currentRouting = IkasStorefrontConfig.getCurrentRouting();
-
-      let countries = countryResponse.data || [];
-      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 statesResponse = await listState({
-        countryId: { eq: this.address.country.id },
-      });
-
-      this.states = statesResponse.data || [];
-      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 citiesResponse = await listCity({
-        stateId: { eq: this.address.state.id },
-        countryId: this.address.country?.id
-          ? { eq: this.address.country?.id }
-          : undefined,
-      });
-      this.cities = citiesResponse.data || [];
-    } catch (err) {
-    } finally {
-      this._isCitiesPending = false;
-    }
-  };
-
-  listDistricts = async () => {
-    if (!this.address.city?.id) return;
-    try {
-      this._isDistrictsPending = true;
-      const districtsResponse = await listDistrict({
-        cityId: { eq: this.address.city.id },
-        stateId: this.address.state?.id
-          ? { eq: this.address.state?.id }
-          : undefined,
-      });
-      this.districts = districtsResponse.data || [];
-    } catch (err) {
-    } finally {
-      this._isDistrictsPending = false;
-    }
-  };
-
-  get isFreeTextCity() {
-    return FREE_TEXT_CITY_COUNTRY_LIST.some(
-      (iso2) => this.address.country?.iso2?.toLowerCase() === iso2.toLowerCase()
-    );
-  }
-
-  get isFreeTextDistrict() {
-    return !this.districtOptions.length;
-  }
-
-  get isEdit() {
-    return this.editingAddressIndex !== -1;
-  }
-
-  private get editingAddressIndex() {
-    return (
-      IkasBaseStore.getInstance().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;
-    }
-
-    const customer = _cloneDeep(
-      IkasBaseStore.getInstance().customerStore.customer
-    );
-    if (!customer || !this.address) return response;
-
-    if (!customer?.addresses) customer.addresses = [];
-
-    if (this.isEdit) {
-      customer.addresses[this.editingAddressIndex] = this.address;
-    } else {
-      customer.addresses.push(this.address);
-    }
-
-    try {
-      const saveCustomerResponse =
-        await IkasBaseStore.getInstance().customerStore.saveCustomer(customer);
-      if (saveCustomerResponse) response.isSuccess = true;
-      return response;
-    } catch {
-      return response;
-    }
-  };
-}

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

@@ -1,177 +0,0 @@
-import { action, computed, makeObservable, observable } from "mobx";
-
-import { Validator } from "..";
-import { IkasBaseStore } from "../../../../store";
-import { EmailRule, RequiredRule } from "../rules";
-
-type ContactFormProps<T> = {
-  message: {
-    requiredRule: ((model: T) => string) | string;
-    emailRule: ((model: T) => string) | string;
-    minRule: ((model: T) => string) | string;
-  };
-};
-
-type ContactFormModel = {
-  firstName: string;
-  lastName: string;
-  email: string;
-  message: string;
-};
-
-export class ContactForm {
-  private model: ContactFormModel = {
-    firstName: "",
-    lastName: "",
-    email: "",
-    message: "",
-  };
-  private validator: Validator;
-
-  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.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 IkasBaseStore.getInstance().customerStore.saveContactForm({
-          firstName: this.model.firstName,
-          lastName: this.model.lastName,
-          email: this.model.email,
-          message: this.model.message,
-          referer: window.location.href,
-        });
-      if (isContactFormSuccess) {
-        response.isSuccess = true;
-      }
-
-      return response;
-    } catch {
-      return response;
-    }
-  }
-}