@ikas/storefront 0.0.47 → 0.0.49

package/build/components/page/head.d.ts

@@ -6,6 +6,7 @@ declare type Props = {
     description?: string | null;
     pageSpecificDataStr?: string;
     merchantSettings?: string;
+    addOgpMetas?: boolean;
 };
 export declare const IkasPageHead: React.FC<Props>;
 export {};

package/build/components/page/index.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     pageSpecificDataStr?: string;
     settingsStr: string;
     merchantSettings?: string;
+    addOgpMetas?: boolean;
 };
 export declare const IkasPage: React.FC<Props>;
 export {};

package/build/index.es.js

@@ -11770,6 +11770,7 @@ var IkasPageDataProvider = /** @class */ (function () {
         this.pageParams = {};
         this.pageComponentPropValues = [];
         this.pageSpecificData = null;
+        this.merchantSettings = null;
         this.theme = new IkasTheme(theme);
         this.pageParams = pageParams || {};
         this.pageType = pageType;
@@ -11794,7 +11795,9 @@ var IkasPageDataProvider = /** @class */ (function () {
                     propValuesStr: JSON.stringify(this.pageComponentPropValues),
                     page: toJS(this.page) || null,
                     settingsStr: JSON.stringify(this.theme.settings || {}),
-                    merchantSettings: JSON.stringify(this.merchantSettings),
+                    merchantSettings: this.merchantSettings
+                        ? JSON.stringify(this.merchantSettings)
+                        : null,
                 },
             };
         },
@@ -11812,9 +11815,27 @@ var IkasPageDataProvider = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    IkasPageDataProvider.prototype.getMerchantSettings = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var merchantId, merchantSettingsResponse;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        merchantId = decodeBase64(IkasStorefrontConfig.config.apiKey || "");
+                        return [4 /*yield*/, IkasMerchantAPI.listMerchantSettings(merchantId)];
+                    case 1:
+                        merchantSettingsResponse = _a.sent();
+                        if (merchantSettingsResponse) {
+                            this.merchantSettings = merchantSettingsResponse;
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     IkasPageDataProvider.prototype.getPageData = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var merchantId, merchantSettingsResponse, _a;
+            var _a;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -11827,13 +11848,9 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 2:
                         if (!this.page)
                             return [2 /*return*/];
-                        merchantId = decodeBase64(IkasStorefrontConfig.config.apiKey || "");
-                        return [4 /*yield*/, IkasMerchantAPI.listMerchantSettings(merchantId)];
+                        return [4 /*yield*/, this.getMerchantSettings()];
                     case 3:
-                        merchantSettingsResponse = _b.sent();
-                        if (merchantSettingsResponse) {
-                            this.merchantSettings = merchantSettingsResponse;
-                        }
+                        _b.sent();
                         _a = this;
                         return [4 /*yield*/, Promise.all(this.page.components.map(function (pageComponent) {
                                 return _this.getPageComponentPropValues(pageComponent);
@@ -24986,9 +25003,61 @@ var PolicyModal = observer(function (_a) {
 });
 
 var IkasPageHead = observer(function (_a) {
+    var _b;
     var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr, props = __rest(_a, ["page", "pageTitle", "description", "pageSpecificDataStr"]);
+    var ogpMetas = [];
     var schemas = [];
+    if (props.addOgpMetas) {
+        ogpMetas.push({
+            property: "og:type",
+            content: "website",
+        });
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:site_name",
+                content: "https://" + window.location.hostname,
+            });
+        }
+        if (pageTitle) {
+            ogpMetas.push({
+                property: "og:title",
+                content: pageTitle,
+            });
+        }
+        if (description) {
+            ogpMetas.push({
+                property: "og:description",
+                content: description,
+            });
+        }
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:url",
+                content: window.location.href,
+            });
+        }
+        if (props.merchantSettings) {
+            if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === IkasThemePageType.PRODUCT) {
+                var productDetailParsed = JSON.parse(pageSpecificDataStr);
+                var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+                if (productDetail.selectedVariant.mainImage) {
+                    ogpMetas.push({
+                        property: "og:image",
+                        content: (_b = productDetail.selectedVariant.mainImage) === null || _b === void 0 ? void 0 : _b.src,
+                    });
+                }
+            }
+            else {
+                var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
+                ogpMetas.push({
+                    property: "og:image",
+                    content: merchantSettings.logo.src,
+                });
+            }
+        }
+    }
     if (props.merchantSettings) {
+        // for schema.org
         var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
         var websiteSchema = createWebsiteSchema();
         var storeSchema = createStoreSchema(merchantSettings);
@@ -25013,12 +25082,14 @@ var IkasPageHead = observer(function (_a) {
     return (createElement(Head, null,
         createElement("title", null, pageTitle || ""),
         createElement("meta", { name: "description", content: description || "" }),
+        !!props.addOgpMetas &&
+            ogpMetas.map(function (ogpMeta, index) { return (createElement("meta", { key: ogpMeta.content + "-" + index, property: ogpMeta.property, content: ogpMeta.content })); }),
         !!schemas.length &&
             schemas.map(function (schema, index) { return (createElement("script", { key: index, type: "application/ld+json", dangerouslySetInnerHTML: {
                     __html: JSON.stringify(schema),
                 } })); })));
 });
-function createWebsiteSchema(merchantSettings) {
+function createWebsiteSchema() {
     var _a;
     var hostname = "";
     if (typeof window !== "undefined") {
@@ -25290,7 +25361,7 @@ var ThemeComponent = observer(function (_a) {
 
 var IkasPage = observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, addOgpMetas = _a.addOgpMetas;
     var renderComponent = function (pageComponent, index) {
         var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
         return (createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent, settingsStr: settingsStr }));
@@ -25303,7 +25374,7 @@ var IkasPage = observer(function (_a) {
     if (!page)
         return null;
     return (createElement(Fragment, null,
-        createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings }),
+        createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings, addOgpMetas: addOgpMetas }),
         createElement("div", { style: pageStyle },
             createElement("div", null,
                 headerComponent && renderComponent(headerComponent, -1),
@@ -25565,7 +25636,7 @@ var PageViewModel = /** @class */ (function () {
                 _this.theme.components[index] = new IkasThemeComponent(data.component);
         };
         this.handleAddNewPageComponent = function (data) { return __awaiter(_this, void 0, void 0, function () {
-            var pageComponent, pageComponentPropValue;
+            var pageComponent, pageComponentPropValues;
             var _this = this;
             var _a;
             return __generator(this, function (_b) {
@@ -25576,10 +25647,14 @@ var PageViewModel = /** @class */ (function () {
                             return [2 /*return*/];
                         return [4 /*yield*/, this.pageDataProvider.getPageComponentPropValues(pageComponent)];
                     case 1:
-                        pageComponentPropValue = _b.sent();
+                        pageComponentPropValues = _b.sent();
                         runInAction(function () {
                             var _a;
-                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValue);
+                            var customDataProps = pageComponentPropValues.component.props.filter(function (p) { return p.type === IkasThemeComponentPropType.CUSTOM; });
+                            customDataProps.forEach(function (customDataProp) {
+                                IkasPageDataProvider.initCustomDataPropValue(customDataProp, pageComponentPropValues.propValues[customDataProp.name], pageComponentPropValues, _this.router, true);
+                            });
+                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValues);
                             (_a = _this.page) === null || _a === void 0 ? void 0 : _a.components.push(pageComponent);
                         });
                         return [2 /*return*/];
@@ -25792,7 +25867,7 @@ var Page = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return (createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
+    return (createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues, addOgpMetas: true }));
 };
 var getStaticProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -25828,7 +25903,7 @@ var Page$1 = function (_a) {
         setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router, isBrowser));
     }, [isBrowser, propValuesStr]);
     handleGTM(page, pageSpecificDataStr);
-    return (createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings }));
+    return (createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings, addOgpMetas: true }));
 };
 var index$1 = observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {

package/build/index.js

@@ -11782,6 +11782,7 @@ var IkasPageDataProvider = /** @class */ (function () {
         this.pageParams = {};
         this.pageComponentPropValues = [];
         this.pageSpecificData = null;
+        this.merchantSettings = null;
         this.theme = new IkasTheme(theme);
         this.pageParams = pageParams || {};
         this.pageType = pageType;
@@ -11806,7 +11807,9 @@ var IkasPageDataProvider = /** @class */ (function () {
                     propValuesStr: JSON.stringify(this.pageComponentPropValues),
                     page: mobx.toJS(this.page) || null,
                     settingsStr: JSON.stringify(this.theme.settings || {}),
-                    merchantSettings: JSON.stringify(this.merchantSettings),
+                    merchantSettings: this.merchantSettings
+                        ? JSON.stringify(this.merchantSettings)
+                        : null,
                 },
             };
         },
@@ -11824,9 +11827,27 @@ var IkasPageDataProvider = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    IkasPageDataProvider.prototype.getMerchantSettings = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var merchantId, merchantSettingsResponse;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        merchantId = decodeBase64(IkasStorefrontConfig.config.apiKey || "");
+                        return [4 /*yield*/, IkasMerchantAPI.listMerchantSettings(merchantId)];
+                    case 1:
+                        merchantSettingsResponse = _a.sent();
+                        if (merchantSettingsResponse) {
+                            this.merchantSettings = merchantSettingsResponse;
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     IkasPageDataProvider.prototype.getPageData = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var merchantId, merchantSettingsResponse, _a;
+            var _a;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -11839,13 +11860,9 @@ var IkasPageDataProvider = /** @class */ (function () {
                     case 2:
                         if (!this.page)
                             return [2 /*return*/];
-                        merchantId = decodeBase64(IkasStorefrontConfig.config.apiKey || "");
-                        return [4 /*yield*/, IkasMerchantAPI.listMerchantSettings(merchantId)];
+                        return [4 /*yield*/, this.getMerchantSettings()];
                     case 3:
-                        merchantSettingsResponse = _b.sent();
-                        if (merchantSettingsResponse) {
-                            this.merchantSettings = merchantSettingsResponse;
-                        }
+                        _b.sent();
                         _a = this;
                         return [4 /*yield*/, Promise.all(this.page.components.map(function (pageComponent) {
                                 return _this.getPageComponentPropValues(pageComponent);
@@ -24967,9 +24984,61 @@ var PolicyModal = mobxReactLite.observer(function (_a) {
 });
 
 var IkasPageHead = mobxReactLite.observer(function (_a) {
+    var _b;
     var page = _a.page, pageTitle = _a.pageTitle, description = _a.description, pageSpecificDataStr = _a.pageSpecificDataStr, props = __rest(_a, ["page", "pageTitle", "description", "pageSpecificDataStr"]);
+    var ogpMetas = [];
     var schemas = [];
+    if (props.addOgpMetas) {
+        ogpMetas.push({
+            property: "og:type",
+            content: "website",
+        });
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:site_name",
+                content: "https://" + window.location.hostname,
+            });
+        }
+        if (pageTitle) {
+            ogpMetas.push({
+                property: "og:title",
+                content: pageTitle,
+            });
+        }
+        if (description) {
+            ogpMetas.push({
+                property: "og:description",
+                content: description,
+            });
+        }
+        if (typeof window !== "undefined") {
+            ogpMetas.push({
+                property: "og:url",
+                content: window.location.href,
+            });
+        }
+        if (props.merchantSettings) {
+            if (pageSpecificDataStr && (page === null || page === void 0 ? void 0 : page.type) === exports.IkasThemePageType.PRODUCT) {
+                var productDetailParsed = JSON.parse(pageSpecificDataStr);
+                var productDetail = new IkasProductDetail(productDetailParsed.product, productDetailParsed.selectedVariantValues);
+                if (productDetail.selectedVariant.mainImage) {
+                    ogpMetas.push({
+                        property: "og:image",
+                        content: (_b = productDetail.selectedVariant.mainImage) === null || _b === void 0 ? void 0 : _b.src,
+                    });
+                }
+            }
+            else {
+                var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
+                ogpMetas.push({
+                    property: "og:image",
+                    content: merchantSettings.logo.src,
+                });
+            }
+        }
+    }
     if (props.merchantSettings) {
+        // for schema.org
         var merchantSettings = new IkasMerchantSettings(JSON.parse(props.merchantSettings));
         var websiteSchema = createWebsiteSchema();
         var storeSchema = createStoreSchema(merchantSettings);
@@ -24994,12 +25063,14 @@ var IkasPageHead = mobxReactLite.observer(function (_a) {
     return (React.createElement(Head__default['default'], null,
         React.createElement("title", null, pageTitle || ""),
         React.createElement("meta", { name: "description", content: description || "" }),
+        !!props.addOgpMetas &&
+            ogpMetas.map(function (ogpMeta, index) { return (React.createElement("meta", { key: ogpMeta.content + "-" + index, property: ogpMeta.property, content: ogpMeta.content })); }),
         !!schemas.length &&
             schemas.map(function (schema, index) { return (React.createElement("script", { key: index, type: "application/ld+json", dangerouslySetInnerHTML: {
                     __html: JSON.stringify(schema),
                 } })); })));
 });
-function createWebsiteSchema(merchantSettings) {
+function createWebsiteSchema() {
     var _a;
     var hostname = "";
     if (typeof window !== "undefined") {
@@ -25271,7 +25342,7 @@ var ThemeComponent = mobxReactLite.observer(function (_a) {
 
 var IkasPage = mobxReactLite.observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings, addOgpMetas = _a.addOgpMetas;
     var renderComponent = function (pageComponent, index) {
         var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
         return (React.createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent, settingsStr: settingsStr }));
@@ -25284,7 +25355,7 @@ var IkasPage = mobxReactLite.observer(function (_a) {
     if (!page)
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings }),
+        React.createElement(IkasPageHead, { page: page, pageTitle: page.pageTitle, description: page.description, pageSpecificDataStr: pageSpecificDataStr, merchantSettings: merchantSettings, addOgpMetas: addOgpMetas }),
         React.createElement("div", { style: pageStyle },
             React.createElement("div", null,
                 headerComponent && renderComponent(headerComponent, -1),
@@ -25546,7 +25617,7 @@ var PageViewModel = /** @class */ (function () {
                 _this.theme.components[index] = new IkasThemeComponent(data.component);
         };
         this.handleAddNewPageComponent = function (data) { return __awaiter(_this, void 0, void 0, function () {
-            var pageComponent, pageComponentPropValue;
+            var pageComponent, pageComponentPropValues;
             var _this = this;
             var _a;
             return __generator(this, function (_b) {
@@ -25557,10 +25628,14 @@ var PageViewModel = /** @class */ (function () {
                             return [2 /*return*/];
                         return [4 /*yield*/, this.pageDataProvider.getPageComponentPropValues(pageComponent)];
                     case 1:
-                        pageComponentPropValue = _b.sent();
+                        pageComponentPropValues = _b.sent();
                         mobx.runInAction(function () {
                             var _a;
-                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValue);
+                            var customDataProps = pageComponentPropValues.component.props.filter(function (p) { return p.type === exports.IkasThemeComponentPropType.CUSTOM; });
+                            customDataProps.forEach(function (customDataProp) {
+                                IkasPageDataProvider.initCustomDataPropValue(customDataProp, pageComponentPropValues.propValues[customDataProp.name], pageComponentPropValues, _this.router, true);
+                            });
+                            _this.pageDataProvider.pageComponentPropValues.push(pageComponentPropValues);
                             (_a = _this.page) === null || _a === void 0 ? void 0 : _a.components.push(pageComponent);
                         });
                         return [2 /*return*/];
@@ -25773,7 +25848,7 @@ var Page = function (_a) {
     var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr, merchantSettings = _a.merchantSettings;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues }));
+    return (React.createElement(IkasPage, { merchantSettings: merchantSettings, settingsStr: settingsStr, page: page, propValues: propValues, addOgpMetas: true }));
 };
 var getStaticProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -25809,7 +25884,7 @@ var Page$1 = function (_a) {
         setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, isBrowser));
     }, [isBrowser, propValuesStr]);
     handleGTM(page, pageSpecificDataStr);
-    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings }));
+    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr, merchantSettings: merchantSettings, addOgpMetas: true }));
 };
 var index$1 = mobxReactLite.observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {

package/build/utils/providers/page-data.d.ts

@@ -10,7 +10,7 @@ export declare class IkasPageDataProvider {
     pageParams: Record<string, any>;
     pageComponentPropValues: IkasPageComponentPropValue[];
     pageSpecificData?: any | null;
-    merchantSettings?: IkasMerchantSettings;
+    merchantSettings?: IkasMerchantSettings | null;
     constructor(theme: IkasTheme, pageParams?: Record<string, any>, pageType?: IkasThemePageType);
     get page(): IkasThemePage | undefined;
     get nextPageData(): {
@@ -18,10 +18,11 @@ export declare class IkasPageDataProvider {
             propValuesStr: string;
             page: IkasThemePage | null;
             settingsStr: string;
-            merchantSettings: string;
+            merchantSettings: string | null;
         };
     };
     get isStaticPage(): boolean | null | undefined;
+    getMerchantSettings(): Promise<void>;
     getPageData(): Promise<void>;
     getPageSpecificData(): Promise<void>;
     getPageSpecificProduct(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
   "author": "Umut Ozan Yıldırım",