@ikas/storefront 4.0.0-alpha.2 → 4.0.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.21",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -20,21 +20,22 @@
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
     "query-string": "^6.13.8",
-    "react-tooltip": "^4.2.21"
+    "react-tooltip": "^4.2.21",
+    "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.2",
-    "@ikas/storefront-config": "^4.0.0-alpha.2",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.2",
-    "@ikas/storefront-models": "^4.0.0-alpha.2",
-    "@ikas/storefront-providers": "^4.0.0-alpha.2",
+    "@ikas/storefront-api": "^4.0.0-alpha.21",
+    "@ikas/storefront-config": "^4.0.0-alpha.21",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.21",
+    "@ikas/storefront-models": "^4.0.0-alpha.21",
+    "@ikas/storefront-providers": "^4.0.0-alpha.21",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@types/react-phone-number-input": "^3.0.10",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "canary",
+    "next": "12.0.7",
     "prettier": "^2.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -51,14 +52,14 @@
     "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.2",
-    "@ikas/storefront-config": "^4.0.0-alpha.2",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.2",
-    "@ikas/storefront-models": "^4.0.0-alpha.2",
-    "@ikas/storefront-providers": "^4.0.0-alpha.2",
+    "@ikas/storefront-api": "^4.0.0-alpha.21",
+    "@ikas/storefront-config": "^4.0.0-alpha.21",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.21",
+    "@ikas/storefront-models": "^4.0.0-alpha.21",
+    "@ikas/storefront-providers": "^4.0.0-alpha.21",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "canary",
+    "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "lodash": "^4.17.20",

package/src/analytics/analytics.ts

@@ -54,6 +54,7 @@ export class Analytics {
       const customerInfo = await Analytics.getCustomerInfo();
 
       GoogleTagManager.pageView(url);
+      GoogleUniversal.pageView(window.location.pathname);
       IkasAnalytics.pageView(pageType);
 
       tryForEach(Analytics.subscribers, (s) => {
@@ -194,7 +195,7 @@ export class Analytics {
     try {
       localStorage.removeItem(LS_BEGIN_CHECKOUT_KEY);
 
-      FacebookPixel.purchase(checkout, checkout.orderNumber || "");
+      FacebookPixel.purchase(checkout, transaction.id || "");
       GoogleTagManager.purchase(checkout, checkout.orderNumber || "");
       IkasAnalytics.orderSuccess(checkout);
       GoogleAnalytics.purchase(checkout, checkout.orderNumber || "");

package/src/analytics/googleUniversal.ts

@@ -8,12 +8,23 @@ export class GoogleUniversal {
     makeAutoObservable(this);
   }
 
+  static pageView(url: string) {
+    try {
+      if (!isServer && (window as any).ga) {
+        (window as any).ga("set", "page", url);
+        (window as any).ga("send", "pageview");
+      }
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   static productView(productDetail: IkasProduct) {
     try {
       if (!isServer && (window as any).ga) {
         (window as any).ga("ec:addProduct", productToGUItem(productDetail));
         (window as any).ga("ec:setAction", "detail");
-        (window as any).ga("send", "pageview");
       }
       return;
     } catch (err) {
@@ -79,7 +90,6 @@ export class GoogleUniversal {
           shipping: "" + checkout.shippingTotal,
           coupon: checkout.couponCode,
         });
-        (window as any).ga("send", "pageview");
       }
       return;
     } catch (err) {

package/src/analytics/head/index.tsx

@@ -79,8 +79,7 @@ export const AnalyticsHead: React.FC<HeadProps> = observer(({ blockHTML }) => {
             dangerouslySetInnerHTML={{
               __html: `window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
               ga('create', '${universalAnalyticsId}', 'auto');
-              ga('require', 'ec');
-              ga('send', 'pageview');`,
+              ga('require', 'ec');`,
             }}
           />
           <script

package/src/analytics/ikas.ts

@@ -181,6 +181,10 @@ export default class IkasAnalytics {
       } else {
         await this.createSessionId();
       }
+
+      IkasStorefrontConfig.init({
+        sessionId: this.sessionId || "",
+      });
     } catch (err) {
       console.error(err);
     }
@@ -196,6 +200,10 @@ export default class IkasAnalytics {
         this.visitorId = Date.now() + "";
         localStorage.setItem(this.VISITOR_ID_KEY, this.visitorId);
       }
+
+      IkasStorefrontConfig.init({
+        visitorId: this.visitorId,
+      });
     } catch (err) {
       console.error(err);
     }

package/src/components/checkout/components/address-form/index.tsx

@@ -315,7 +315,7 @@ const CityInput: React.FC<FormItemProps> = observer(({ vm }) => {
   return (
     <FormItem
       type={FormItemType.TEXT}
-      autocomplete="address-level3"
+      autocomplete="address-level2"
       label={t("checkout-page:city")}
       value={vm.city?.name || ""}
       onChange={vm.onCityInputChange}

package/src/components/checkout/components/form-item/index.tsx

@@ -7,6 +7,7 @@ import styles from "./style.module.scss";
 
 import { useTranslation } from "../../../../utils";
 import ReactTooltip from "react-tooltip";
+import { PhoneNumberInput } from "../phone-number-input";
 
 export const FormItem: React.FC<Props> = observer((props) => {
   const { t } = useTranslation();
@@ -108,17 +109,14 @@ export const FormItem: React.FC<Props> = observer((props) => {
             />
           )}
           {vm.type === FormItemType.TEL && (
-            <div></div>
-            // <PhoneInput
-            //   key={props.currentCountryCode || "1"}
-            //   disabled={vm.disabled}
-            //   defaultCountry={props.currentCountryCode}
-            //   placeholder={t("checkout-page:enterPhoneNumber")}
-            //   value={vm.value ? vm.value : ""}
-            //   onChange={vm.onPhoneChange}
-            //   international={true}
-            //   addInternationalOption={false}
-            // />
+            <PhoneNumberInput
+              key={props.currentCountryCode || "1"}
+              disabled={vm.disabled}
+              defaultCountry={props.currentCountryCode}
+              placeholder={t("checkout-page:enterPhoneNumber")}
+              value={vm.value ? vm.value : ""}
+              onChange={vm.onPhoneChange}
+            />
           )}
           {vm.type === FormItemType.TEXT_AREA && <TextArea vm={vm} />}
           {vm.type === FormItemType.SELECT && (

package/src/components/checkout/components/phone-number-input/compare-strings.ts

@@ -0,0 +1,5 @@
+const compareStrings = (a: string, b: string) => {
+  return a.localeCompare(b);
+};
+
+export default compareStrings;

package/src/components/checkout/components/phone-number-input/get-countries.ts

@@ -0,0 +1,52 @@
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { CountryCode, getCountries as categories } from "libphonenumber-js";
+import compareStrings from "./compare-strings";
+
+export type CountryType = {
+  value: CountryCode;
+  label: string | undefined;
+};
+
+const getUrl = () => {
+  const languages = [
+    "de",
+    "el",
+    "en",
+    "es",
+    "fi",
+    "fr",
+    "it",
+    "nb",
+    "pl",
+    "pt-BR",
+    "pt",
+    "ru",
+    "sv",
+    "tr",
+    "ua",
+    "vi",
+  ];
+
+  let locale = IkasStorefrontConfig.getCurrentLocale();
+
+  if (!languages.some((language) => language === locale)) {
+    locale = "en";
+  }
+
+  return `https://cdn.myikas.com/sf/static/locale/country/${locale}.json`;
+};
+
+const getCountries = async (): Promise<CountryType[]> => {
+  const url = getUrl();
+  const response = await fetch(url);
+  const lang = await response.json();
+
+  return categories()
+    .map((country) => ({
+      value: country,
+      label: lang[country],
+    }))
+    .sort((a, b) => compareStrings(a.label, b.label));
+};
+
+export default getCountries;

package/src/components/checkout/components/phone-number-input/index.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import parsePhoneNumber, {
+  CountryCode,
+  formatIncompletePhoneNumber,
+  getCountryCallingCode,
+  parseIncompletePhoneNumber,
+} from "libphonenumber-js";
+import getCountries, { CountryType } from "./get-countries";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  defaultCountry?: string | null;
+  disabled?: boolean;
+  placeholder: string | undefined;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+const DEFAULT_COUNTRY = "TR";
+
+export const PhoneNumberInput: React.FC<Props> = observer(
+  ({ defaultCountry, disabled = false, placeholder, value, onChange }) => {
+    const [countries, setCountries] = React.useState<CountryType[]>([]);
+    const [activeCountry, setActiveCountry] = React.useState(
+      (defaultCountry as CountryCode) || DEFAULT_COUNTRY
+    );
+    const [formatedValue, setFormatedValue] = React.useState("");
+
+    React.useEffect(() => {
+      fetchCountries();
+
+      let countryCode = activeCountry;
+
+      if (value) {
+        const parsedPhoneNumber = parsePhoneNumber(value);
+
+        if (parsedPhoneNumber && parsedPhoneNumber.country) {
+          countryCode = parsedPhoneNumber.country;
+        }
+
+        setFormatedValue(formatIncompletePhoneNumber(value, countryCode));
+      } else {
+        setDefaultValue(countryCode);
+      }
+
+      setActiveCountry(countryCode);
+    }, []);
+
+    const fetchCountries = async () => {
+      const categories = await getCountries();
+      setCountries(categories);
+    };
+
+    const onValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const phoneNumber = formatPhoneNumber(event.target.value);
+      setFormatedValue(phoneNumber);
+      onChange(
+        !phoneNumber
+          ? event.target.value
+          : parseIncompletePhoneNumber(phoneNumber)
+      );
+    };
+
+    const onCountryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      if (event.target.value) {
+        const country = event.target.value as CountryCode;
+
+        setActiveCountry(country);
+        setDefaultValue(country);
+      }
+    };
+
+    const setDefaultValue = (countyCode: CountryCode) => {
+      const countryCallingCode = getCountryCallingCode(countyCode);
+
+      setFormatedValue(`+${countryCallingCode}`);
+    };
+
+    const formatPhoneNumber = (phoneNumber: string) => {
+      return formatIncompletePhoneNumber(phoneNumber, activeCountry);
+    };
+
+    const getImageSrc = () => {
+      return `https://cdn.myikas.com/sf/assets/flags/3x2/${activeCountry}.svg`;
+    };
+
+    return (
+      <React.Fragment>
+        <div className={styles.SelectFlag}>
+          <div className={styles.FlagContainer}>
+            <div className={styles.Flag}>
+              <img
+                className={styles.FlagImage}
+                alt={activeCountry}
+                src={getImageSrc()}
+              ></img>
+              <div className={styles.Arrow}></div>
+            </div>
+            <select
+              className={styles.Select}
+              value={activeCountry}
+              onChange={onCountryChange}
+              disabled={disabled}
+            >
+              {countries.map((country) => (
+                <option key={country.value} value={country.value}>
+                  {country.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <input
+          className={styles.Input}
+          value={formatedValue}
+          onChange={onValueChange}
+          placeholder={placeholder}
+          disabled={disabled}
+        ></input>
+      </React.Fragment>
+    );
+  }
+);

package/src/components/checkout/components/phone-number-input/style.module.scss

@@ -0,0 +1,83 @@
+.SelectFlag {
+  position: absolute;
+  top: 26px;
+  left: 16px;
+
+  .FlagContainer {
+    position: relative;
+    width: 35px;
+    height: 24px;
+
+    flex: 0 0 35px;
+
+    .Select {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      padding: 0;
+      opacity: 0;
+      border: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+
+  .Flag {
+    position: relative;
+    width: 35px;
+    height: 24px;
+
+    display: flex;
+    align-items: center;
+
+    &Image {
+      width: 24px;
+      flex: 0 0 24px;
+    }
+
+    .Arrow {
+      display: block;
+      content: "";
+      width: 0.3em;
+      height: 0.3em;
+      margin-left: 0.35em;
+      margin-top: -0.2em;
+      border-style: solid;
+      border-color: inherit;
+      border-top-width: 0;
+      border-bottom-width: 1px;
+      border-left-width: 0;
+      border-right-width: 1px;
+      transform: rotate(45deg);
+      opacity: 0.45;
+
+      flex: 0 0 0.3em;
+    }
+  }
+}
+
+.Input {
+  padding-left: 64px !important;
+
+  &:disabled {
+    color: #8A8B94 !important;
+    background-color: #F7F7F9 !important;
+  }
+
+  &::placeholder {
+    color: #8A8B94 !important;
+    font-size: 14px !important;
+  }
+
+  // &:disabled {
+  //   color: $buttonDisabledTextColor !important;
+  //   background-color: $buttonDisabledBgColor !important;
+  // }
+
+  // &::placeholder {
+  //   color: $secondaryTextColor !important;
+  //   font-size: 14px !important;
+  // }
+}

package/src/components/checkout/model.ts

@@ -32,7 +32,6 @@ import CreditCardData from "./components/credit-card-form/model";
 import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
 import { TFunction } from "../../utils/i18n";
 import CustomerStoreAPI from "../../store/customer/api";
-import MerchantStore from "../../store/merchant";
 import CheckoutStore from "../../store/checkout";
 import CartStoreAPI from "../../store/cart/api";
 import { IkasCheckoutCustomizationProps } from ".";
@@ -45,7 +44,7 @@ import {
   RetrieveInstallmentInfoResponse,
   TransactionResponse,
   UpdateCartCampaignOfferInput,
-} from "@ikas/storefront-api/build/__api/types";
+} from "@ikas/storefront-api";
 import { IkasBaseStore } from "../../store";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { Analytics } from "../../analytics";
@@ -54,11 +53,6 @@ import {
   RetrieveInstallmentInfoQueryParams,
   SaveCartInput,
 } from "@ikas/storefront-api";
-import { OrderAddressCountryInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressCountryInput";
-import { OrderAddressCityInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressCityInput";
-import { OrderAddressStateInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressStateInput";
-import { OrderAddressDistrictInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressDistrictInput";
-import { CampaignOfferTargetPageTypeEnum } from "@ikas/storefront-api/build/__api/types";
 
 const NUMBER_ONLY_REGEX = /^\d+$/;
 const MAX_CARD_NUMBER_LENGTH = 16;
@@ -446,7 +440,10 @@ export default class CheckoutViewModel {
       input = await this.inStockDeliveryInputData(input);
     }
 
-    if (this.step === CheckoutStep.INFO) {
+    if (
+      this.step === CheckoutStep.INFO ||
+      this.step === CheckoutStep.SHIPPING
+    ) {
       input.billingAddress = null;
     }
 
@@ -482,13 +479,11 @@ export default class CheckoutViewModel {
       inStoreLocation.address
     ) {
       inputData.shippingAddress.country = inStoreLocation.address
-        .country as OrderAddressCountryInputData;
-      inputData.shippingAddress.city = inStoreLocation.address
-        .city as OrderAddressCityInputData;
-      inputData.shippingAddress.state = inStoreLocation.address
-        .state as OrderAddressStateInputData;
+        .country as any;
+      inputData.shippingAddress.city = inStoreLocation.address.city as any;
+      inputData.shippingAddress.state = inStoreLocation.address.state as any;
       inputData.shippingAddress.district = inStoreLocation.address
-        .district as OrderAddressDistrictInputData;
+        .district as any;
       inputData.shippingAddress.postalCode = inStoreLocation.address.postalCode;
       inputData.shippingAddress.addressLine1 =
         inStoreLocation.address.address || "";

package/src/components/checkout/modelMasterPass.ts

@@ -5,8 +5,8 @@ import { SuccessModalType } from "./components/master-pass/modal-success";
 import { useTranslation } from "../../utils/i18n";
 import { IkasBaseStore } from "../../store";
 import { IkasCheckout, IkasPaymentGateway } from "../../models";
-import { MasterPassOperationTypeEnum } from "@ikas/storefront-api/build/__api/types";
-import { getMasterpassRequestToken } from "@ikas/storefront-api";
+import { MasterPassOperationTypeEnum } from "@ikas/storefront-api";
+import { getMasterPassRequestToken } from "@ikas/storefront-api";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 
 const isServer = typeof localStorage === "undefined";
@@ -437,7 +437,7 @@ export default class MasterPassModel {
     operationType: MasterPassOperationTypeEnum;
     phoneNumber: string;
   }) => {
-    const response = await getMasterpassRequestToken({
+    const response = await getMasterPassRequestToken({
       cartId,
       paymentGatewayId,
       operationType,

package/src/components/page/head.tsx

@@ -251,6 +251,18 @@ function createStoreSchema(merchantSettings: IkasMerchantSettings) {
     logo: logo,
     image: logo,
     url: "https://" + IkasStorefrontConfig.getDomain(),
+    telephone: merchantSettings?.phone,
+    address: {
+      "@type": "PostalAddress",
+      streetAddress: merchantSettings.address?.addressLine1,
+      addressLocality: merchantSettings.address?.city?.name,
+      ...(merchantSettings.address &&
+        merchantSettings.address.state && {
+          addressRegion: merchantSettings.address.state.code,
+        }),
+      postalCode: merchantSettings.address?.postalCode,
+      addressCountry: merchantSettings.address?.country?.code,
+    },
   };
 }
 

package/src/components/page-editor/model.ts

@@ -23,6 +23,7 @@ import HtmlMetaDataStore from "../../store/html-meta-data";
 import BlogStore from "../../store/blog";
 import RaffleStore from "../../store/raffle";
 import ProductStore from "../../store/product";
+import { IkasAPIClientConfig } from "@ikas/storefront-api";
 
 const PACKAGE_VERSION = "2.0.20";
 // import { version as PACKAGE_VERSION } from "../../../package.json";
@@ -535,6 +536,8 @@ export default class IkasPageEditorViewModel {
 
   // Message Handlers
 
+  static setAPIClientConfig() {}
+
   handleUpdateFrameData = async (data: any) => {
     this.theme = new IkasThemeJson(data.theme);
     this.page = this.theme?.pages.find((p) => p.id === data.selectedPage.id);
@@ -565,7 +568,22 @@ export default class IkasPageEditorViewModel {
         translations: this.translations || {},
         isEditor: true,
         apiKey: data.apiKey,
+        apiUrl: data.apiUrl,
+        adminApiUrl: data.adminApiUrl,
+        cdnUrl: data.cdnUrl,
       });
+
+      IkasAPIClientConfig.URL = IkasStorefrontConfig.getApiUrl() || "";
+      IkasAPIClientConfig.HEADERS = {
+        "x-api-key": IkasStorefrontConfig.getApiKey() || "",
+        "x-sfid": IkasStorefrontConfig.getStorefrontId() || "",
+        "x-sfrid": IkasStorefrontConfig.getStorefrontRoutingId() || "",
+      };
+
+      if (IkasStorefrontConfig.getCustomerToken()) {
+        IkasAPIClientConfig.TOKEN =
+          IkasStorefrontConfig.getCustomerToken() || "";
+      }
     }
 
     // (window as any).editorApiKey = data.apiKey;

package/src/models/data/merchant-settings/index.ts

@@ -1,15 +1,18 @@
 import {
   IkasMerchantSettingsCurrencyFormat,
   IkasMerchantSettings as IMerchantSettings,
+  IkasMerchantAddress,
 } from "@ikas/storefront-models";
 import { makeAutoObservable } from "mobx";
 import { IkasImage } from "../image";
 
 export class IkasMerchantSettings implements IMerchantSettings {
   currencyFormats: IkasMerchantSettingsCurrencyFormat[] | null;
+  address: IkasMerchantAddress | null;
   logoId: string | null;
   merchantId: string;
   merchantName: string;
+  phone: string | null;
 
   // Extra
   logo?: IkasImage | null;
@@ -19,6 +22,9 @@ export class IkasMerchantSettings implements IMerchantSettings {
     this.logoId = data.logoId;
     this.merchantId = data.merchantId;
     this.merchantName = data.merchantName;
+    this.phone = data.phone || null;
+    this.address = data.address || null;
+
     this.logo = data.logo ? new IkasImage(data.logo) : null;
 
     makeAutoObservable(this);

package/src/models/data/product/variant-type/index.ts

@@ -3,10 +3,12 @@ import { IkasProductVariantType as IProductVariantType } from "@ikas/storefront-
 import { makeAutoObservable } from "mobx";
 
 export class IkasProductVariantType implements IProductVariantType {
+  order: number;
   variantType: IkasVariantType;
   variantValueIds: string[];
 
   constructor(data: Partial<IkasProductVariantType>) {
+    this.order = data.order || 0;
     this.variantType = data.variantType
       ? new IkasVariantType(data.variantType)
       : new IkasVariantType();

package/src/models/data/storefront/index.ts

@@ -20,6 +20,7 @@ export class IkasStorefront implements IStorefront {
   analytics4Id: string | null;
   universalAnalyticsId: string | null;
   tiktokPixelId: string | null;
+  token: string | null;
 
   localizations: IkasStorefrontLocalization[];
   routings: IkasStorefrontRouting[];
@@ -40,6 +41,7 @@ export class IkasStorefront implements IStorefront {
     this.analytics4Id = data.analytics4Id || null;
     this.universalAnalyticsId = data.universalAnalyticsId || null;
     this.tiktokPixelId = data.tiktokPixelId || null;
+    this.token = data.token || null;
 
     // Sub Models
     this.localizations = data.localizations

package/src/models/ui/product-list/index.ts

@@ -25,7 +25,7 @@ import {
   SearchInputOrderByInput,
   SortByDirectionEnum,
   SortByTypeEnum,
-} from "@ikas/storefront-api/build/__api/types";
+} from "@ikas/storefront-api";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { IkasBaseStore } from "../../..";
 import { Analytics } from "../../../analytics";
@@ -221,12 +221,6 @@ export class IkasProductList {
 
   get filterQueryParams() {
     const queryParams: Record<string, any> = {};
-    const _getQueryParams = this.getQueryParams();
-    if (_getQueryParams) {
-      _getQueryParams.forEach((value, key) => {
-        queryParams[key] = value;
-      });
-    }
 
     this.filters?.forEach((f) => {
       if (f.keyList.length) queryParams[f.key] = f.keyList;

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

@@ -1,5 +1,6 @@
 import { saveRaffleParticipant } from "@ikas/storefront-api";
 import { action, computed, makeObservable, observable } from "mobx";
+import { GraphQLError } from "graphql";
 
 import { Validator } from "..";
 import { IkasBaseStore } from "../../../../store";
@@ -237,7 +238,11 @@ export class RaffleForm {
   }
 
   async submit() {
-    const response = { isFormError: false, isSuccess: false };
+    const response: {
+      isFormError: boolean;
+      isSuccess: boolean;
+      errors?: readonly GraphQLError[];
+    } = { isFormError: false, isSuccess: false };
     const hasFormError = await this.validateAll();
     if (hasFormError) {
       response.isFormError = true;
@@ -246,7 +251,7 @@ export class RaffleForm {
 
     try {
       const selectedVariant = this.raffle.products[0].selectedVariant;
-      const isRaffleFormSuccess = await saveRaffleParticipant({
+      const saveRaffleParticipantResponse = await saveRaffleParticipant({
         input: {
           appliedProduct: {
             productId: selectedVariant.productId,
@@ -264,12 +269,20 @@ export class RaffleForm {
         },
       });
 
-      if (isRaffleFormSuccess) {
+      if (saveRaffleParticipantResponse?.graphQLErrors) {
+        response.errors = saveRaffleParticipantResponse.graphQLErrors;
+        response.isSuccess = false;
+      }
+
+      if (saveRaffleParticipantResponse.data) {
         response.isSuccess = true;
       }
 
       return response;
     } catch (error) {
+      if (error) {
+        response.errors = error;
+      }
       return response;
     }
   }

package/src/models/ui/validator/rules/index.ts

@@ -183,6 +183,16 @@ export class EmailRule<T> extends ValidationRule<T> {
   }
 }
 
+/**
+ * 1) start with plus(+) or digit
+ * 2) any digit or one char white space
+ * 3) end with digit
+ *
+ * For example:
+ * ✅ Valid +90535 555 5555
+ * ✅ valid 905355555555
+ * 🚫 Unvalid +90535 5  55 5555
+ */
 export class PhoneRule<T> extends ValidationRule<T> {
   get errorMessage() {
     if (!this.message) return "";
@@ -193,10 +203,8 @@ export class PhoneRule<T> extends ValidationRule<T> {
   async run(): Promise<boolean> {
     if (!this.value) return true;
 
-    const result = this.value.match(/\d/g);
-    return (
-      (!!result && result.length <= 11) || !!/^\+(\d{12})$/gm.test(this.value)
-    );
+    const result = this.value.match(/^[\+\d](\d+\s)*\d+$/g);
+    return !!result;
   }
 }
 
@@ -246,15 +254,8 @@ export class IdentityNumberRule<T> extends ValidationRule<T> {
       TCSum = 0;
 
     const incorrect = [
-      11111111110,
-      22222222220,
-      33333333330,
-      44444444440,
-      55555555550,
-      66666666660,
-      7777777770,
-      88888888880,
-      99999999990,
+      11111111110, 22222222220, 33333333330, 44444444440, 55555555550,
+      66666666660, 7777777770, 88888888880, 99999999990,
     ];
 
     if (tcknString.length !== 11) return false;

package/src/pages/editor.tsx

@@ -8,7 +8,7 @@ const IkasPageEditor = dynamic(
 );
 
 type Props = {
-  configJson: Record<string, any>;
+  configJson?: Record<string, any>; // local only
   components?: Record<string, any>;
 };
 
@@ -19,9 +19,12 @@ export default class Page extends React.Component<Props> {
     if (configJson) {
       IkasStorefrontConfig.init({
         ...configJson,
-        currentPageComponents: components || {},
       });
     }
+
+    IkasStorefrontConfig.init({
+      currentPageComponents: components || {},
+    });
   }
 
   render() {

package/src/store/cart/index.ts

@@ -10,7 +10,7 @@ import {
 } from "../../models/data";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { Analytics } from "../../analytics";
-import { CartLineOptionInput } from "@ikas/storefront-api/build/__api/types";
+import { CartLineOptionInput } from "@ikas/storefront-api";
 
 export const CART_LS_KEY = "cartId";
 
@@ -100,7 +100,7 @@ export class IkasCartStore {
 
       product.productOptionSet?.initOptionValues();
 
-      return true;
+      return response;
     } catch (err) {
       console.log(err);
       return false;
@@ -145,7 +145,7 @@ export class IkasCartStore {
           Analytics.addToCart(item, quantity - oldQuantity, eventId, this.cart);
         }
       }
-      return true;
+      return response;
     } catch (err) {
       console.log(err);
       return false;