@ikas/storefront-providers 4.0.0-alpha.5 → 4.0.0-alpha.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront-providers",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.50",
   "description": "Data providers for ikas storefront theme components.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -17,10 +17,10 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
-    "@ikas/storefront-api": "^4.0.0-alpha.5",
-    "@ikas/storefront-config": "^4.0.0-alpha.5",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.5",
-    "@ikas/storefront-models": "^4.0.0-alpha.5",
+    "@ikas/storefront-api": "^4.0.0-alpha.50",
+    "@ikas/storefront-config": "^4.0.0-alpha.50",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.50",
+    "@ikas/storefront-models": "^4.0.0-alpha.50",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@types/lodash": "^4.14.168",
     "@types/react": "^16.9.55",
@@ -37,10 +37,10 @@
   },
   "peerDependencies": {
     "mobx": "^6.1.3",
-    "@ikas/storefront-api": "^4.0.0-alpha.5",
-    "@ikas/storefront-config": "^4.0.0-alpha.5",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.5",
-    "@ikas/storefront-models": "^4.0.0-alpha.5",
+    "@ikas/storefront-api": "^4.0.0-alpha.50",
+    "@ikas/storefront-config": "^4.0.0-alpha.50",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.50",
+    "@ikas/storefront-models": "^4.0.0-alpha.50",
     "lodash": "^4.17.20"
   }
 }

package/src/models/ui/raffle-list/init.ts

@@ -1,4 +1,4 @@
-import { listRaffle } from "@ikas/storefront-api";
+import { listStorefrontRaffle } from "@ikas/storefront-api";
 import { IkasRaffleList } from ".";
 import { populateRaffleProducts } from "../../../providers/helpers/raffle";
 
@@ -25,7 +25,7 @@ async function getRaffleList(
   page: number,
   limit: number
 ) {
-  const response = await listRaffle({
+  const response = await listStorefrontRaffle({
     start: list.start ? { eq: list.start } : undefined,
     end: list.end ? { eq: list.end } : undefined,
     includeDeleted: list.includeDeleted || false,

package/src/providers/page-data-get.ts

@@ -62,7 +62,7 @@ import {
   listHTMLMetaData,
   listMerchantSettings,
   listProductOptionSet,
-  listRaffle,
+  listStorefrontRaffle,
   listRaffleMetaData,
   searchProducts,
 } from "@ikas/storefront-api";
@@ -80,7 +80,7 @@ export class IkasPageDataProvider {
   theme: IkasThemeJson;
   pageType?: IkasThemeJsonPageType | null = null;
   pageParams: Record<string, any> = {};
-  pageComponentPropValues: IkasPageComponentPropValue[] = [];
+  private pageComponentPropValues: IkasPageComponentPropValue[] = [];
   pageSpecificData?: any | null = null;
   merchantSettings?: IkasMerchantSettings | null = null;
   possiblePageTypes?: IkasThemeJsonPageType[] = []; // Used for distinguishing blog slug page from main slug page
@@ -154,6 +154,10 @@ export class IkasPageDataProvider {
     return this.page?.components || [];
   }
 
+  get $pageComponentPropValues() {
+    return this.pageComponentPropValues;
+  }
+
   async getMerchantSettings() {
     const merchantSettingsResponse = await listMerchantSettings({});
 
@@ -345,11 +349,12 @@ export class IkasPageDataProvider {
     };
 
     const handleBlogPage = async () => {
-      const blog = await listBlog({
+      const blogsResponse = await listBlog({
         id: { eq: metaData.targetId },
       });
-      if (!blog) return;
+      if (!blogsResponse.isSuccess || !blogsResponse.data?.data?.length) return;
 
+      const blog = blogsResponse.data.data[0];
       this.pageSpecificData = blog;
       this.pageType = IkasThemeJsonPageType.BLOG;
       this.setPageMetaData(metaData);
@@ -371,14 +376,13 @@ export class IkasPageDataProvider {
         return;
 
       const blogCategory = blogCategoriesResponse.data.data[0];
-
       this.pageSpecificData = blogCategory;
       this.pageType = IkasThemeJsonPageType.BLOG_CATEGORY;
       this.setPageMetaData(metaData);
     };
 
     const handleRafflePage = async () => {
-      const response = await listRaffle({
+      const response = await listStorefrontRaffle({
         id: { eq: metaData.targetId },
       });
 
@@ -670,21 +674,21 @@ export class IkasPageDataProvider {
       switch (type) {
         case "DEFAULT":
           const htmlMetaDataResponse = await listHTMLMetaData({
-            id: { in: idList },
+            targetId: { in: idList },
           });
           results = htmlMetaDataResponse.data || [];
           break;
 
         case "BLOG":
           const blogMetaDataResponse = await listBlogMetaData({
-            id: { in: idList },
+            targetId: { in: idList },
           });
           results = blogMetaDataResponse.data?.data || [];
           break;
 
         case "RAFFLE":
           const raffleMetaDataResponse = await listRaffleMetaData({
-            id: { in: idList },
+            targetId: { in: idList },
           });
           results = raffleMetaDataResponse.data || [];
           break;

package/src/providers/placeholders.ts

@@ -25,6 +25,7 @@ export function getPlaceholderProduct() {
     attributes: [],
     variantTypes: [],
     productOptionSetId: null,
+    baseUnit: null,
   };
   return product;
 }
@@ -112,13 +113,11 @@ export function getPlaceholderRaffle(): IkasRaffle {
     dateRange: null,
     metadata: null,
     name: "",
-    participantCount: null,
     requiredCustomerAccount: false,
     status: false,
     variants: [],
     products: [],
     verificationType: IkasRaffleVerificationType.EMAIL,
-    isCustomerWinner: false,
   };
 }
 

package/src/providers/prop-value/link.ts

@@ -7,11 +7,11 @@ export type IkasLinkMetaDataType = "DEFAULT" | "BLOG" | "RAFFLE";
 export type IkasLinkMetaDataTargetId = {
   type: IkasLinkMetaDataType;
   id: string;
-  navigationLink: IkasNavigationLink;
+  navigationLink: NavigationLink;
 };
 
 export class IkasLinkPropValueProvider
-  implements IkasPropValueProvider<IkasNavigationLink | IkasNavigationLink[]>
+  implements IkasPropValueProvider<NavigationLink | NavigationLink[]>
 {
   private linkPropValue: IkasLinkPropValue | IkasLinkPropValue[];
   private theme: IkasThemeJson;
@@ -29,89 +29,89 @@ export class IkasLinkPropValueProvider
 
   private async getNavigationLink(
     linkPropValue: IkasLinkPropValue
-  ): Promise<IkasNavigationLink> {
-    let navigationLink: IkasNavigationLink | undefined;
+  ): Promise<NavigationLink> {
+    let navigationLink: NavigationLink | undefined;
 
     if (linkPropValue.linkType === IkasLinkType.PAGE) {
       // INDEX PAGE
       if (linkPropValue.pageType === IkasThemeJsonPageType.INDEX) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.ACCOUNT) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.ADDRESSES) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account/addresses",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.ORDERS) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account/orders",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (
         linkPropValue.pageType === IkasThemeJsonPageType.FAVORITE_PRODUCTS
       ) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account/favorite-products",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.LOGIN) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account/login",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.REGISTER) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account/register",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (
         linkPropValue.pageType === IkasThemeJsonPageType.FORGOT_PASSWORD
       ) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account/forgot-password",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (
         linkPropValue.pageType === IkasThemeJsonPageType.RECOVER_PASSWORD
       ) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/account/recover-password",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.BLOG_INDEX) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/blog",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.CART) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/cart",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       } else if (linkPropValue.pageType === IkasThemeJsonPageType.SEARCH) {
-        navigationLink = {
+        navigationLink = new NavigationLink({
           href: "/search",
           label: linkPropValue.label || "",
           subLinks: [],
-        };
+        });
       }
       // CUSTOM PAGE
       else if (linkPropValue.pageType === IkasThemeJsonPageType.CUSTOM) {
@@ -119,11 +119,11 @@ export class IkasLinkPropValueProvider
           (p) => p.id === linkPropValue.pageId
         );
         if (themePage) {
-          navigationLink = {
+          navigationLink = new NavigationLink({
             href: "/pages/" + themePage.slug,
             label: linkPropValue.label || "",
             subLinks: [],
-          };
+          });
         }
       }
       // ITEM PAGES
@@ -135,11 +135,11 @@ export class IkasLinkPropValueProvider
         ].includes(linkPropValue.pageType!)
       ) {
         if (linkPropValue.itemId) {
-          navigationLink = {
+          navigationLink = new NavigationLink({
             href: "/",
             label: linkPropValue.label || "",
             subLinks: [],
-          };
+          });
           this.linkMetaDataTargetIds.push({
             type: "DEFAULT",
             id: linkPropValue.itemId,
@@ -155,11 +155,11 @@ export class IkasLinkPropValueProvider
         ].includes(linkPropValue.pageType!)
       ) {
         if (linkPropValue.itemId) {
-          navigationLink = {
+          navigationLink = new NavigationLink({
             href: "/blog/",
             label: linkPropValue.label || "",
             subLinks: [],
-          };
+          });
           this.linkMetaDataTargetIds.push({
             type: "BLOG",
             id: linkPropValue.itemId,
@@ -170,11 +170,11 @@ export class IkasLinkPropValueProvider
       // RAFFLE ITEM PAGE
       else if (linkPropValue.pageType === IkasThemeJsonPageType.RAFFLE_DETAIL) {
         if (linkPropValue.itemId) {
-          navigationLink = {
+          navigationLink = new NavigationLink({
             href: "/raffle/",
             label: linkPropValue.label || "",
             subLinks: [],
-          };
+          });
           this.linkMetaDataTargetIds.push({
             type: "RAFFLE",
             id: linkPropValue.itemId,
@@ -200,12 +200,12 @@ export class IkasLinkPropValueProvider
     }
     // EXTERNAL LINK
     else if (linkPropValue.linkType === IkasLinkType.EXTERNAL) {
-      navigationLink = {
+      navigationLink = new NavigationLink({
         href: linkPropValue.externalLink || "",
         label: linkPropValue.label || "",
         subLinks: [],
         isExternal: true,
-      };
+      });
     }
 
     if (navigationLink) {
@@ -244,7 +244,7 @@ export class IkasLinkPropValueProvider
       return navigationLink;
     }
 
-    return { href: "", label: "", subLinks: [] } as IkasNavigationLink;
+    return new NavigationLink({ href: "", label: "", subLinks: [] });
   }
 
   async getValue(): Promise<IkasNavigationLink | IkasNavigationLink[]> {
@@ -257,3 +257,20 @@ export class IkasLinkPropValueProvider
     }
   }
 }
+
+// This is a class by choice, mobx creates clones of plain JSON objects, but not class instances
+export class NavigationLink implements IkasNavigationLink {
+  href: string;
+  label: string;
+  subLinks: IkasNavigationLink[];
+  isExternal?: boolean | null;
+  itemId?: string;
+
+  constructor(data: IkasNavigationLink) {
+    this.href = data.href;
+    this.label = data.label;
+    this.subLinks = data.subLinks;
+    this.isExternal = data.isExternal;
+    this.itemId = data.itemId;
+  }
+}

package/src/providers/prop-value/product-list.ts

@@ -81,15 +81,13 @@ export class IkasProductListPropValueProvider
         IkasRelatedProductsType.CATEGORY
       ) {
         this.relatedProductData.categoryIds =
-          this.pageSpecificData.product.categories.map(
+          this.pageSpecificData.categories.map(
             (category: IkasCategory) => category.id
           );
       } else {
-        this.relatedProductData.brandIds = [
-          this.pageSpecificData.product?.brand?.id,
-        ];
+        this.relatedProductData.brandIds = [this.pageSpecificData?.brand?.id];
       }
-      this.relatedProductData.productId = this.pageSpecificData.product.id;
+      this.relatedProductData.productId = this.pageSpecificData.id;
     }
 
     const productList: IkasProductList = {

package/src/providers/prop-value/raffle.ts

@@ -1,4 +1,4 @@
-import { listRaffle } from "@ikas/storefront-api";
+import { listStorefrontRaffle } from "@ikas/storefront-api";
 import IkasPropValueProvider from ".";
 import { IkasRafflePropValue } from "../../models/prop-value/raffle";
 import { populateRaffleProducts } from "../helpers/raffle";
@@ -23,7 +23,7 @@ export class IkasRafflePropValueProvider
     }
     if (!this.rafflePropValue.raffleId) return null;
 
-    const rafflesResponse = await listRaffle({
+    const rafflesResponse = await listStorefrontRaffle({
       id: { eq: this.rafflePropValue.raffleId },
     });
 

package/src/providers/types.ts

@@ -19,6 +19,7 @@ import { IkasBrandPropValue } from "../models/prop-value/brand";
 import { IkasCategoryPropValue } from "../models/prop-value/category";
 import { IkasProductPropValue } from "../models/prop-value/product";
 import { IkasRafflePropValue } from "../models/prop-value/raffle";
+import { makeAutoObservable } from "mobx";
 
 export class IkasPageComponentPropValue {
   pageComponent: IkasThemeJsonPageComponent;
@@ -29,6 +30,8 @@ export class IkasPageComponentPropValue {
     this.pageComponent = data.pageComponent;
     this.component = data.component;
     this.propValues = data.propValues || {};
+
+    makeAutoObservable(this);
   }
 }