@ikas/storefront 4.0.0-alpha.11 → 4.0.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.11",
+  "version": "4.0.0-alpha.12",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -24,11 +24,11 @@
     "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.11",
-    "@ikas/storefront-config": "^4.0.0-alpha.11",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.11",
-    "@ikas/storefront-models": "^4.0.0-alpha.11",
-    "@ikas/storefront-providers": "^4.0.0-alpha.11",
+    "@ikas/storefront-api": "^4.0.0-alpha.12",
+    "@ikas/storefront-config": "^4.0.0-alpha.12",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.12",
+    "@ikas/storefront-models": "^4.0.0-alpha.12",
+    "@ikas/storefront-providers": "^4.0.0-alpha.12",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -52,11 +52,11 @@
     "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.11",
-    "@ikas/storefront-config": "^4.0.0-alpha.11",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.11",
-    "@ikas/storefront-models": "^4.0.0-alpha.11",
-    "@ikas/storefront-providers": "^4.0.0-alpha.11",
+    "@ikas/storefront-api": "^4.0.0-alpha.12",
+    "@ikas/storefront-config": "^4.0.0-alpha.12",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.12",
+    "@ikas/storefront-models": "^4.0.0-alpha.12",
+    "@ikas/storefront-providers": "^4.0.0-alpha.12",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
     "next": "canary",

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/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/model.ts

@@ -440,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;
     }
 

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/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

@@ -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/store/cart/index.ts

@@ -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;