@ikas/storefront 0.0.167-alpha.5 → 0.0.167-alpha.7

package/build/index.es.js

@@ -41470,18 +41470,14 @@ var IkasPage = observer(function (_a) {
     IkasStorefrontConfig.initWithJson(configJson);
     var store = IkasStorefrontConfig.store;
     var router = useRouter();
-    var _b = useState(false); _b[0]; var setMounted = _b[1];
-    var _c = useState(false), isBrowser = _c[0], setIsBrowser = _c[1];
+    var _b = useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
     var settings = useState(new IkasThemeSettings(JSON.parse(settingsStr)))[0];
-    var _d = useState(IkasPageDataProvider.initPropValues(propValuesStr, router, settingsStr)), propValues = _d[0], setPropValues = _d[1];
+    var _c = useState(IkasPageDataProvider.initPropValues(propValuesStr, router, settingsStr)), propValues = _c[0], setPropValues = _c[1];
     store.currentPageType = pageType;
     useEffect(function () {
-        //@ts-ignore
-        store.setSettings(settingsStr);
         //@ts-ignore
         store.cartStore.getCart();
         store.checkLocalization();
-        setMounted(true);
     }, []);
     useEffect(function () {
         if (reInitOnBrowser)
@@ -41495,7 +41491,6 @@ var IkasPage = observer(function (_a) {
     var footerComponentPropValue = propValues.find(function (pv) { return pv.component.isFooter; });
     var others = propValues.filter(function (pv) { return !pv.component.isHeader && !pv.component.isFooter; }) || [];
     var pageStyle = {
-        visibility: "visible",
         position: "relative",
         minHeight: "100vh",
         display: "flex",
@@ -70130,7 +70125,7 @@ var SettingsHelper = /** @class */ (function () {
     SettingsHelper.getSettings = function (locale) {
         var _this = this;
         return new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-            var isLocal, storefrontResponse, storefront, localTheme, settings, storefront_1, salesChannel_1, localizationMap, storefrontJSScripts_1, domain_1, themeLocalizationPath, routing_1;
+            var isLocal, storefrontResponse, storefront, localTheme, colorScript, settings, storefront_1, salesChannel_1, localizationMap, storefrontJSScripts_1, domain_1, themeLocalizationPath, routing_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -70149,6 +70144,7 @@ var SettingsHelper = /** @class */ (function () {
                         return [4 /*yield*/, SettingsHelper.readLocalTheme()];
                     case 2:
                         localTheme = _a.sent();
+                        colorScript = SettingsHelper.createColorScript(localTheme.settings);
                         resolve({
                             storefront: storefront,
                             themeLocalization: new IkasStorefrontThemeLocalization({
@@ -70163,7 +70159,7 @@ var SettingsHelper = /** @class */ (function () {
                                 : new IkasStorefrontRouting({}),
                             favicon: localTheme.settings.favicon,
                             stockPreference: localTheme.settings.stockPreference,
-                            storefrontJSScripts: [],
+                            storefrontJSScripts: colorScript ? [colorScript] : [],
                             domain: "",
                         });
                         return [3 /*break*/, 5];
@@ -70195,6 +70191,11 @@ var SettingsHelper = /** @class */ (function () {
                             var themeLocalization = new IkasStorefrontThemeLocalization(result);
                             var favicon = themeLocalization.themeJson.settings.favicon;
                             var stockPreference = themeLocalization.themeJson.settings.stockPreference;
+                            if (themeLocalization.themeJson.settings) {
+                                var colorScript = SettingsHelper.createColorScript(themeLocalization.themeJson.settings);
+                                if (colorScript)
+                                    storefrontJSScripts_1.push(colorScript);
+                            }
                             resolve({
                                 storefront: storefront_1,
                                 themeLocalization: themeLocalization,
@@ -70355,6 +70356,15 @@ var SettingsHelper = /** @class */ (function () {
             });
         });
     };
+    SettingsHelper.createColorScript = function (settings) {
+        if (!settings.colors)
+            return;
+        return "<script>" + settings.colors
+            .map(function (sc) {
+            return "document.documentElement.style.setProperty(\"" + sc.key + "\",\"" + sc.color + "\");";
+        })
+            .join("\r\n") + "</script> \n    ";
+    };
     return SettingsHelper;
 }());
 

package/build/index.js

@@ -41450,18 +41450,14 @@ var IkasPage = mobxReactLite.observer(function (_a) {
     IkasStorefrontConfig.initWithJson(configJson);
     var store = IkasStorefrontConfig.store;
     var router$1 = router.useRouter();
-    var _b = React.useState(false); _b[0]; var setMounted = _b[1];
-    var _c = React.useState(false), isBrowser = _c[0], setIsBrowser = _c[1];
+    var _b = React.useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
     var settings = React.useState(new IkasThemeSettings(JSON.parse(settingsStr)))[0];
-    var _d = React.useState(IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr)), propValues = _d[0], setPropValues = _d[1];
+    var _c = React.useState(IkasPageDataProvider.initPropValues(propValuesStr, router$1, settingsStr)), propValues = _c[0], setPropValues = _c[1];
     store.currentPageType = pageType;
     React.useEffect(function () {
-        //@ts-ignore
-        store.setSettings(settingsStr);
         //@ts-ignore
         store.cartStore.getCart();
         store.checkLocalization();
-        setMounted(true);
     }, []);
     React.useEffect(function () {
         if (reInitOnBrowser)
@@ -41475,7 +41471,6 @@ var IkasPage = mobxReactLite.observer(function (_a) {
     var footerComponentPropValue = propValues.find(function (pv) { return pv.component.isFooter; });
     var others = propValues.filter(function (pv) { return !pv.component.isHeader && !pv.component.isFooter; }) || [];
     var pageStyle = {
-        visibility: "visible",
         position: "relative",
         minHeight: "100vh",
         display: "flex",
@@ -70109,7 +70104,7 @@ var SettingsHelper = /** @class */ (function () {
     SettingsHelper.getSettings = function (locale) {
         var _this = this;
         return new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-            var isLocal, storefrontResponse, storefront, localTheme, settings, storefront_1, salesChannel_1, localizationMap, storefrontJSScripts_1, domain_1, themeLocalizationPath, routing_1;
+            var isLocal, storefrontResponse, storefront, localTheme, colorScript, settings, storefront_1, salesChannel_1, localizationMap, storefrontJSScripts_1, domain_1, themeLocalizationPath, routing_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -70128,6 +70123,7 @@ var SettingsHelper = /** @class */ (function () {
                         return [4 /*yield*/, SettingsHelper.readLocalTheme()];
                     case 2:
                         localTheme = _a.sent();
+                        colorScript = SettingsHelper.createColorScript(localTheme.settings);
                         resolve({
                             storefront: storefront,
                             themeLocalization: new IkasStorefrontThemeLocalization({
@@ -70142,7 +70138,7 @@ var SettingsHelper = /** @class */ (function () {
                                 : new IkasStorefrontRouting({}),
                             favicon: localTheme.settings.favicon,
                             stockPreference: localTheme.settings.stockPreference,
-                            storefrontJSScripts: [],
+                            storefrontJSScripts: colorScript ? [colorScript] : [],
                             domain: "",
                         });
                         return [3 /*break*/, 5];
@@ -70174,6 +70170,11 @@ var SettingsHelper = /** @class */ (function () {
                             var themeLocalization = new IkasStorefrontThemeLocalization(result);
                             var favicon = themeLocalization.themeJson.settings.favicon;
                             var stockPreference = themeLocalization.themeJson.settings.stockPreference;
+                            if (themeLocalization.themeJson.settings) {
+                                var colorScript = SettingsHelper.createColorScript(themeLocalization.themeJson.settings);
+                                if (colorScript)
+                                    storefrontJSScripts_1.push(colorScript);
+                            }
                             resolve({
                                 storefront: storefront_1,
                                 themeLocalization: themeLocalization,
@@ -70334,6 +70335,15 @@ var SettingsHelper = /** @class */ (function () {
             });
         });
     };
+    SettingsHelper.createColorScript = function (settings) {
+        if (!settings.colors)
+            return;
+        return "<script>" + settings.colors
+            .map(function (sc) {
+            return "document.documentElement.style.setProperty(\"" + sc.key + "\",\"" + sc.color + "\");";
+        })
+            .join("\r\n") + "</script> \n    ";
+    };
     return SettingsHelper;
 }());
 

package/build/utils/settings.d.ts

@@ -7,7 +7,7 @@ import { IkasSalesChannel } from "../models/data/sales-channel/index";
 import { IkasStorefrontRouting } from "../models/data/storefront/routing/index";
 import { IkasStorefrontThemeLocalization } from "../models/data/storefront/theme-localization/index";
 import { IkasThemeFavicon } from "../models/theme/settings/prop/favicon/index";
-import { IkasThemeStockPreference } from "../models/theme/settings/index";
+import { IkasThemeSettings, IkasThemeStockPreference } from "../models/theme/settings/index";
 export declare class SettingsHelper {
     static readLocalTheme(): Promise<IkasTheme>;
     static readSettingsFile(): Promise<any>;
@@ -213,6 +213,7 @@ export declare class SettingsHelper {
         notFound?: undefined;
         revalidate?: undefined;
     }>;
+    static createColorScript(settings: IkasThemeSettings): string | undefined;
 }
 export declare type SettingsData = {
     storefront: IkasStorefront;

package/package.json

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