@ikas/storefront 4.0.0-alpha.50 → 4.0.0-alpha.52

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

@@ -1,398 +0,0 @@
-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,
-        locale: IkasStorefrontConfig.getCurrentLocale(),
-      });
-      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

@@ -1,44 +0,0 @@
-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

@@ -1,103 +0,0 @@
-@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

@@ -1,167 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import {
-  IkasOrderLineItem,
-  IkasProductOptionType,
-} from "../../../../../models";
-import {
-  formatDate,
-  formatCurrency,
-  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 formatDateTheme = (val: string) => {
-      const date = formatDate(new Date(val)).split(" ");
-      date.splice(-1);
-      return date.join(" ");
-    };
-
-    const fileName = (url: string) => {
-      return decodeURIComponent(url.split("/")[url.split("/").length - 1]);
-    };
-
-    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.DATE_PICKER:
-                return (
-                  <div className={styles.OptionRow}>
-                    <div className={styles.OptionName}>{option.name}</div>
-                    <div className={styles.OptionValue}>
-                      {option.values
-                        .map((v) => formatDateTheme(v.value))
-                        .join(", ")}
-                    </div>
-                  </div>
-                );
-
-              case IkasProductOptionType.FILE:
-                return (
-                  <div className={styles.OptionRow}>
-                    <div className={styles.OptionName}>{option.name}</div>
-                    <div className={styles.OptionValue}>
-                      {option.values.map((v) => fileName(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 className={styles.QuantityCircle}>{cartItem.quantity}</div>
-        </div>
-        <div className={styles.Center}>
-          <div className={styles.Name}>{cartItem.variant.name}</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>
-
-        <div className={styles.Right}>
-          <div className={styles.Price}>
-            {!!cartItem.overridenPriceWithQuantity && (
-              <span className={styles.GrayPrice}>
-                {cartItem.formattedOverridenPriceWithQuantity}
-              </span>
-            )}
-            {cartItem.formattedFinalPriceWithQuantity}
-          </div>
-          {cartItem.unitPriceText && (
-            <div className={[styles.LightText, styles.Small].join(" ")}>
-              {cartItem.unitPriceText}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-);