@ikas/storefront 1.0.21 → 2.0.0-alpha.1

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

@@ -0,0 +1,366 @@
+import { makeAutoObservable } from "mobx";
+import { IkasOrderAddress } from "../../../../models/data/order/address";
+import {
+  IkasCountry,
+  IkasState,
+  IkasCity,
+  IkasDistrict,
+  IkasCustomerAddress,
+} from "../../../../models";
+import {
+  IkasCountryAPI,
+  IkasStateAPI,
+  IkasCityAPI,
+  IkasDistrictAPI,
+} from "../../../../api";
+import { stringSorter } from "../../../../utils";
+import { IkasStorefrontConfig } from "../../../../storefront";
+
+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;
+}
+
+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;
+  }
+
+  fillDropdownOptions = async () => {
+    await this.listCountries();
+    await this.listStates();
+    await this.listCities();
+    await this.listDistricts();
+  };
+
+  listCountries = async () => {
+    try {
+      if (!this.myCountryCode)
+        this.myCountryCode = (await IkasCountryAPI.getMyCountry()) || undefined;
+
+      let countries = await IkasCountryAPI.listCountries(
+        undefined,
+        this.allowedCountryIds?.length ? this.allowedCountryIds : undefined
+      );
+
+      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)
+        );
+      } else {
+        const otherRoutings = IkasStorefrontConfig.routings.filter(
+          (r) => r.id !== IkasStorefrontConfig.storefrontRoutingId
+        );
+        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 states = await IkasStateAPI.listStates(this.country.id);
+      this.states = states;
+      if (!this.hasState) {
+        this.onStateChange(this.states[0].id);
+      }
+    } catch (err) {}
+  };
+
+  listCities = async () => {
+    if (!this.state?.id) return;
+    try {
+      this.cities = await IkasCityAPI.listCities(
+        this.state.id,
+        this.country?.id
+      );
+    } catch (err) {}
+  };
+
+  listDistricts = async () => {
+    if (!this.city?.id) return;
+    try {
+      this.districts = await IkasDistrictAPI.listDistricts(
+        this.city.id,
+        this.state?.id
+      );
+      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) => {
+    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 = {
+      id: country?.id,
+      name: country?.name,
+      code: country?.iso3,
+      iso2: country?.iso2,
+      iso3: 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.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.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.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,
+    };
+  };
+
+  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,34 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import styles from "./style.module.scss";
+
+type Props = {
+  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(
+  ({ text, style, onClick, size, isLoading, isDisabled, isLine }) => {
+    return (
+      <button
+        style={style}
+        type="button"
+        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);
+    }
+  }
+
+}

package/src/components/checkout/components/cart-summary/cart-item/index.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasOrderLineItem, IkasProductOptionType } from "../../../../../models";
+import { formatMoney, useTranslation } from "../../../../../utils";
+import CheckoutViewModel from "../../../../../components/checkout/model";
+import { Modal } from "../../modal";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  vm: CheckoutViewModel;
+  currencyCode: string;
+  cartItem: IkasOrderLineItem;
+};
+
+export const CartItem: React.FC<Props> = observer(
+  ({ vm, currencyCode, cartItem }) => {
+    const { t } = useTranslation();
+    const [isOptionsModalVisible, setOptionsModalVisible] = React.useState(
+      false
+    );
+
+    const adjustmentAmounts = vm.checkout.adjustments?.map(
+      (a) =>
+        a.appliedOrderLines
+          ?.filter((aol) => aol.orderLineId === cartItem.id)
+          .reduce((total, current) => total + (current.amount || 0), 0) || 0
+    );
+
+    const adjustmentTotal = adjustmentAmounts?.reduce(
+      (total, current) => total + current,
+      0
+    );
+
+    const options = React.useMemo(() => {
+      return (
+        <div>
+          {cartItem.options?.map((option) => {
+            switch (option.type) {
+              case IkasProductOptionType.TEXT:
+              case IkasProductOptionType.TEXT_AREA:
+              case IkasProductOptionType.CHOICE:
+                return (
+                  <div className={styles.OptionRow}>
+                    <div className={styles.OptionName}>{option.name}</div>
+                    <div className={styles.OptionValue}>
+                      {option.values.map((v) => v.name || v.value).join(", ")}
+                    </div>
+                  </div>
+                );
+
+              case IkasProductOptionType.CHECKBOX:
+                return (
+                  <div className={styles.OptionRow}>
+                    <div className={styles.OptionName}>{option.name}</div>
+                    <div className={styles.OptionValue}>
+                      {option.values.length && option.values[0].value === "true"
+                        ? t("checkout-page:yes")
+                        : t("checkout-page:no")}
+                    </div>
+                  </div>
+                );
+
+              case IkasProductOptionType.COLOR_PICKER:
+                return (
+                  <div className={styles.OptionRow}>
+                    <div className={styles.OptionName}>{option.name}</div>
+                    <div className={styles.OptionsHorContainer}>
+                      {option.values.map((v, index) => (
+                        <div
+                          key={index}
+                          className={styles.OptionColorValue}
+                          style={{ backgroundColor: v.value }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                );
+
+              default:
+                break;
+            }
+          })}
+        </div>
+      );
+    }, []);
+
+    return (
+      <div className={styles.CheckoutItem}>
+        <div className={styles.ImageContainer}>
+          <img
+            className={styles.Image}
+            src={cartItem.variant.mainImage?.thumbnailSrc}
+          />
+        </div>
+        <div className={styles.Right}>
+          <div className={styles.Name}>{cartItem.variant.name}</div>
+          <div className={styles.LightText}>
+            {`${t("checkout-page:quantity")}: ` + cartItem.quantity}
+          </div>
+          <div className={styles.LightText}>
+            {cartItem.variant.variantValues
+              .map((vv) => vv.variantValueName)
+              .join(" / ")}
+          </div>
+
+          {!!cartItem.options?.length && (
+            <div
+              className={styles.OptionsText}
+              onClick={() => setOptionsModalVisible(true)}
+            >
+              {t("checkout-page:customizedProduct")}
+            </div>
+          )}
+
+          {!!isOptionsModalVisible && (
+            <Modal
+              title={cartItem.variant.name}
+              modalContent={options}
+              onClose={() => setOptionsModalVisible(false)}
+            />
+          )}
+
+          <div className={styles.Price}>
+            {!!cartItem.overridenPriceWithQuantity && (
+              <span className={styles.GrayPrice}>
+                {!!adjustmentTotal
+                  ? formatMoney(cartItem.finalPriceWithQuantity, currencyCode)
+                  : formatMoney(
+                      cartItem.overridenPriceWithQuantity,
+                      currencyCode
+                    )}
+              </span>
+            )}
+            {!!adjustmentTotal
+              ? formatMoney(
+                  cartItem.finalPriceWithQuantity - adjustmentTotal,
+                  currencyCode
+                )
+              : formatMoney(cartItem.finalPriceWithQuantity, currencyCode)}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);