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

package/src/components/checkout/components/address-form/model.ts

@@ -0,0 +1,397 @@
+import { makeAutoObservable } from "mobx";
+import { IkasOrderAddress } from "../../../../models/data/order/address";
+import {
+  IkasCountry,
+  IkasState,
+  IkasCity,
+  IkasDistrict,
+  IkasCustomerAddress,
+  IkasOrderAddressCountry,
+  IkasOrderAddressCity,
+  IkasOrderAddressDistrict,
+} from "../../../../models";
+import { stringSorter } from "../../../../utils/helper";
+import {
+  FREE_TEXT_CITY_COUNTRY_LIST,
+  DISTRICT_HIDDEN_COUNTRY_LIST,
+} from "../../../../utils/constants";
+import LocationStore from "../../../../store/location";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+
+type Callback = ((value: string) => void) | null | undefined;
+
+export interface AddressFormViewModelParams {
+  address: IkasOrderAddress | IkasCustomerAddress;
+  isCorporate?: boolean;
+  isErrorsVisible: boolean;
+  isCustomerAddress?: boolean;
+  allowedCountryIds?: string[] | null;
+  allowCorporateInfo?: boolean;
+  allowTitleChange?: boolean;
+  firstNameChangeCallback?: Callback;
+  lastNameChangeCallback?: Callback;
+  deliveryMethod?: "address" | "in-store";
+}
+
+export default class AddressFormViewModel {
+  address: IkasOrderAddress | IkasCustomerAddress;
+  isCorporate = false;
+  isErrorsVisible = false;
+  isCustomerAddress?: boolean;
+  allowedCountryIds?: string[] | null = null;
+  allowCorporateInfo?: boolean = false;
+  allowTitleChange?: boolean = false;
+  firstNameChangeCallback?: Callback = null;
+  lastNameChangeCallback?: Callback = null;
+
+  countries: IkasCountry[] = [];
+  states: IkasState[] = [];
+  cities: IkasCity[] = [];
+  districts: IkasDistrict[] = [];
+
+  myCountryCode?: string | null = null;
+
+  constructor(data: AddressFormViewModelParams) {
+    this.address = data.address;
+    this.isCorporate = data.isCorporate || false;
+    this.isErrorsVisible = data.isErrorsVisible || false;
+    this.isCustomerAddress = data.isCustomerAddress || false;
+    this.allowedCountryIds = data.allowedCountryIds;
+    this.allowCorporateInfo = data.allowCorporateInfo || false;
+    this.allowTitleChange = data.allowTitleChange || false;
+    this.firstNameChangeCallback = data.firstNameChangeCallback || null;
+    this.lastNameChangeCallback = data.lastNameChangeCallback || null;
+
+    makeAutoObservable(this, {
+      firstNameChangeCallback: false,
+      lastNameChangeCallback: false,
+    });
+
+    this.fillDropdownOptions();
+  }
+
+  get firstName() {
+    return this.address.firstName;
+  }
+
+  get lastName() {
+    return this.address.lastName;
+  }
+
+  get phone() {
+    return this.address.phone;
+  }
+
+  get identityNumber() {
+    return this.address.identityNumber;
+  }
+
+  get country() {
+    return this.address.country;
+  }
+
+  get state() {
+    return this.address.state;
+  }
+
+  get city() {
+    return this.address.city;
+  }
+
+  get district() {
+    return this.address.district;
+  }
+
+  get countryOptions() {
+    const list = this.countries.map(this.modelToOption);
+
+    list.sort((a, b) => stringSorter(a.label, b.label));
+
+    return list;
+  }
+
+  get stateOptions() {
+    const list = this.states.map(this.modelToOption);
+
+    list.sort((a, b) => stringSorter(a.label, b.label));
+
+    return list;
+  }
+
+  get cityOptions() {
+    const list = this.cities.map(this.modelToOption);
+
+    // list.sort((a, b) => stringSorter(a.label, b.label));
+
+    return list;
+  }
+
+  get districtOptions() {
+    const list = this.districts.map(this.modelToOption);
+
+    list.sort((a, b) => stringSorter(a.label, b.label));
+
+    return list;
+  }
+
+  get hasState() {
+    // Only default state
+    return this.states.length > 1;
+  }
+
+  get isFreeTextCity() {
+    return FREE_TEXT_CITY_COUNTRY_LIST.some(
+      (iso2) => this.address.country?.iso2?.toLowerCase() === iso2.toLowerCase()
+    );
+  }
+
+  get isDistrictHidden() {
+    return DISTRICT_HIDDEN_COUNTRY_LIST.some(
+      (iso2) => this.address.country?.iso2?.toLowerCase() === iso2.toLowerCase()
+    );
+  }
+
+  fillDropdownOptions = async () => {
+    await this.listCountries();
+    await this.listStates();
+    await this.listCities();
+    await this.listDistricts();
+  };
+
+  listCountries = async () => {
+    try {
+      if (!this.myCountryCode) {
+        const response = await LocationStore.getMyCountry();
+        this.myCountryCode = response.data;
+      }
+
+      const response = await LocationStore.listCountry({
+        id: this.allowedCountryIds?.length
+          ? { in: this.allowedCountryIds }
+          : undefined,
+      });
+      let countries = response.data || [];
+
+      const currentRouting = IkasStorefrontConfig.getCurrentRouting();
+
+      if (currentRouting?.countryCodes?.length) {
+        countries = countries.filter(
+          (c) => c.iso2 && currentRouting.countryCodes?.includes(c.iso2)
+        );
+      } else {
+        const otherRoutings = IkasStorefrontConfig.getRoutings().filter(
+          (r) => r.id !== IkasStorefrontConfig.getStorefrontRoutingId()
+        );
+        countries = countries.filter(
+          (c) =>
+            c.iso2 &&
+            !otherRoutings.some((otherRouting) =>
+              otherRouting.countryCodes?.includes(c.iso2!)
+            )
+        );
+      }
+
+      this.countries = countries;
+
+      if (this.countries.length === 1 && !this.country)
+        this.onCountryChange(this.countries[0].id);
+      else if (this.myCountryCode && !this.country) {
+        const currentCountry = this.countries.find(
+          (c) => c.iso2 === this.myCountryCode
+        );
+        if (currentCountry) {
+          this.onCountryChange(currentCountry.id);
+        }
+      }
+    } catch (err) {}
+  };
+
+  listStates = async () => {
+    if (!this.country?.id) return;
+    try {
+      const response = await LocationStore.listState({
+        countryId: { eq: this.country.id },
+      });
+      this.states = response.data || [];
+      if (!this.hasState) {
+        this.onStateChange(this.states[0].id);
+      }
+    } catch (err) {}
+  };
+
+  listCities = async () => {
+    if (!this.state?.id || !this.country?.id) return;
+
+    try {
+      const response = await LocationStore.listCity({
+        stateId: { eq: this.state.id },
+        countryId: { eq: this.country.id },
+      });
+      this.cities = response.data || [];
+    } catch (err) {}
+  };
+
+  listDistricts = async () => {
+    if (!this.city?.id || this.isDistrictHidden) return;
+    try {
+      const response = await LocationStore.listDistrict({
+        cityId: { eq: this.city.id },
+        stateId: this.state?.id ? { eq: this.state?.id } : undefined,
+      });
+      this.districts = response.data || [];
+      if (this.districts.length) this.address.isDistrictRequired = true;
+      else this.address.isDistrictRequired = false;
+    } catch (err) {}
+  };
+
+  modelToOption = (
+    model: IkasCountry | IkasState | IkasCity | IkasDistrict
+  ) => {
+    return {
+      label: model.name,
+      value: model.id + "",
+    };
+  };
+
+  onFirstNameChange = (value: string) => {
+    this.firstNameChangeCallback && this.firstNameChangeCallback(value);
+    this.address.firstName = value;
+  };
+
+  onLastNameChange = (value: string) => {
+    this.lastNameChangeCallback && this.lastNameChangeCallback(value);
+    this.address.lastName = value;
+  };
+
+  onPhoneChange = (value: string) => {
+    this.address.phone = value;
+  };
+
+  onIdentityNumberChange = (value: string) => {
+    if (!value) this.address.identityNumber = "";
+    else if (value.length <= 11) this.address.identityNumber = value;
+  };
+
+  onAddressTitleChange = (value: string) => {
+    //@ts-ignore
+    this.address.title = value;
+  };
+
+  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.country?.id !== countryId;
+    if (!isDifferentCountry) return;
+
+    const country = this.countries.find((c) => c.id === countryId);
+    this.address.country = new IkasOrderAddressCountry({
+      id: country?.id || null,
+      name: country?.name || "",
+      code: country?.iso3 || null,
+      iso2: country?.iso2 || null,
+      iso3: country?.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.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.city?.id !== cityId;
+    if (!isDifferentCity) return;
+
+    const city = this.cities.find((c) => c.id === cityId)!;
+    this.address.city = new IkasOrderAddressCity({
+      id: city.id,
+      name: city.name,
+    });
+
+    this.address.district = null;
+    this.districts = [];
+    this.listDistricts();
+  };
+
+  onCityInputChange = (value: string) => {
+    this.districts = [];
+    this.address.city = new IkasOrderAddressCity({
+      id: undefined,
+      name: value,
+    });
+  };
+
+  onDistrictChange = (districtId: string) => {
+    const isDifferentDistrict = this.district?.id !== districtId;
+    if (!isDifferentDistrict) return;
+
+    const district = this.districts.find((d) => d.id === districtId)!;
+    this.address.district = new IkasOrderAddressDistrict({
+      id: district.id,
+      name: district.name,
+    });
+  };
+
+  onDistrictInputChange = (value: string) => {
+    this.address.district = new IkasOrderAddressDistrict({
+      id: undefined,
+      name: value,
+    });
+  };
+
+  onCorporateChange = (value: boolean) => {
+    this.isCorporate = value;
+    if (!value) {
+      this.address.company = null;
+      this.address.taxNumber = null;
+      this.address.taxOffice = null;
+    }
+  };
+
+  onCompanyChange = (value: string) => {
+    this.address.company = value;
+  };
+
+  onTaxNumberChange = (value: string) => {
+    this.address.taxNumber = value;
+  };
+
+  onTaxOfficeChange = (value: string) => {
+    this.address.taxOffice = value;
+  };
+}

package/src/components/checkout/components/button/index.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import styles from "./style.module.scss";
+
+type Props = {
+  type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  text: string | React.ReactNode;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  isLine?: boolean;
+  size?: "large" | "medium";
+  style?: React.CSSProperties;
+  onClick?: () => void;
+};
+
+export const Button: React.FC<Props> = observer(
+  ({
+    type = "button",
+    text,
+    style,
+    onClick,
+    size,
+    isLoading,
+    isDisabled,
+    isLine,
+  }) => {
+    return (
+      <button
+        style={style}
+        type={type}
+        className={[
+          styles.Button,
+          styles.Dark,
+          size === "medium" ? styles.Medium : styles.Large,
+          isLine ? styles.Line : "",
+          isDisabled ? styles.Disabled : "",
+        ].join(" ")}
+        onClick={!isLoading ? onClick : undefined}
+      >
+        {isLoading ? <div className={styles.loader}></div> : text}
+      </button>
+    );
+  }
+);

package/src/components/checkout/components/button/style.module.scss

@@ -0,0 +1,103 @@
+@import "../../styles/variables.scss";
+
+.Button {
+  cursor: pointer;
+  user-select: none;
+  border: 1px transparent solid;
+  border-radius: 8px;
+  font-weight: 600 !important;
+  text-align: center;
+  position: relative;
+  transition: all .2s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:focus {
+    outline:0;
+  }
+
+  &.Large {
+    height: 56px;
+    padding: 0 24px;
+  }
+
+  &.Medium {
+    height: 48px;
+    padding: 0 16px;
+  }
+
+  &.Dark {
+    background-color: $buttonBgColor;
+    color: $buttonTextColor;
+  }
+
+  &.Disabled {
+    background-color: $buttonDisabledBgColor;
+    color: $buttonDisabledTextColor;
+    pointer-events: none;
+  }
+
+  &.FullWidthMobile {
+    @media only screen and(max-width: $breakpoint) {
+      width: 100%;
+    }
+  }
+
+  &.Line {
+    background-color: transparent;
+    border-color: $borderColor;
+    color: $buttonBgColor;
+
+    .loader {
+      border-left: 0.5em solid $buttonBgColor;
+    }
+  }
+
+  .loader,
+  .loader:after {
+    border-radius: 50%;
+    width: 5em;
+    height: 5em;
+  }
+
+  .loader {
+    font-size: 6px;
+    position: relative;
+    text-indent: -9999em;
+    border-top: 0.5em solid rgba(255, 255, 255, 0.2);
+    border-right: 0.5em solid rgba(255, 255, 255, 0.2);
+    border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
+    border-left: 0.5em solid $buttonTextColor;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 1.1s infinite linear;
+    animation: load8 1.1s infinite linear;
+  }
+
+  @-webkit-keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+}