zakeke-configurator-react 0.0.53 → 0.0.57

package/dist/declarations/composer/Module/src/environment.d.ts

@@ -23,7 +23,7 @@ export declare class ZakekeEnvironment {
     private previousMeshesVisibleStates;
     get internalProduct(): MPlaza.Model | null;
     get internalScene(): Zakeke.Scene | null;
-    get internalCurrentTemplate(): any;
+    get internalCurrentTemplate(): MPlaza.Design | null | undefined;
     currency: string;
     groups: Group[];
     fonts: FontFamily[];
@@ -48,7 +48,6 @@ export declare class ZakekeEnvironment {
     private getComposerModels;
     private getFonts;
     private getSettings;
-    private loadFonts;
     private loadScript;
     boot: (parameters?: any) => Promise<void>;
     appendViewer: (container: HTMLElement) => void;
@@ -59,6 +58,8 @@ export declare class ZakekeEnvironment {
     renderDesign: _.DebouncedFunc<() => Promise<void>>;
     private handleSceneLoaded;
     private getComposition;
+    private getDesign;
+    private internalLoadDesign;
     loadComposition: (id: string | null) => Promise<void>;
     private internalLoadComposition;
     private handleAttributeSelectionChanged;

package/dist/declarations/composer/Module/src/fontsManager.d.ts

@@ -0,0 +1,12 @@
+import { FontFamily } from ".";
+/**
+ * Download a list of font families so that are available for the browser
+ */
+export declare function loadFonts(fontFamilies: FontFamily[]): Promise<void>;
+/**
+ * Downlod all fonts used in a design
+ *
+ * @param design Design to load fonts for
+ * @param downloadedFonts A list of downloaded fonts
+ */
+export declare function downloadFontsOfDesign(design: MPlaza.Design, downloadedFonts: FontFamily[]): Promise<void>;

package/dist/declarations/composer/Module/src/state/providerValue.d.ts

@@ -5,7 +5,7 @@ import { FocusAttributesEventListener } from "../../../../3D/src";
 export interface ProviderValue {
     internalProduct: MPlaza.Model | null;
     internalScene: Zakeke.Scene | null;
-    internalCurrentTemplate: MPlaza.Design;
+    internalCurrentTemplate: MPlaza.Design | null | undefined;
     price: number;
     culture: string;
     currency: string;

package/dist/index.js

@@ -40950,7 +40950,7 @@ var ZakekeDesigner = react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"](function (
     Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
         if (internalProduct) {
             var side = internalProduct.get("colors").at(0).get("sides").find(function (x) { return x.get('sideID') == props.areaId; });
-            if (side && customizer) {
+            if (side && customizer && internalCurrentTemplate) {
                 customizer.setDesign(internalCurrentTemplate);
                 customizer.setSide(side);
                 customizer.adaptZoomToSideAreas(false);
@@ -41049,6 +41049,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _3D_src__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../3D/src */ "../../3D/src/index.ts");
+/* harmony import */ var _fontsManager__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./fontsManager */ "./src/fontsManager.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41112,6 +41113,7 @@ var __spreadArrays = (undefined && undefined.__spreadArrays) || function () {
 
 
 
+
 var ZakekeEnvironment = /** @class */ (function () {
     function ZakekeEnvironment() {
         var _this = this;
@@ -41122,6 +41124,7 @@ var ZakekeEnvironment = /** @class */ (function () {
         this.events = [];
         this.zkProduct = null;
         this.zkScene = null;
+        this.zkCurrentTemplate = null;
         this.zkTemplates = [];
         this.internalIsFullscreen = false;
         this.highlightSettings = null;
@@ -41374,22 +41377,6 @@ var ZakekeEnvironment = /** @class */ (function () {
                 }
             });
         }); };
-        this.loadFonts = function (fontFamilies) { return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, new Promise(function (resolve) {
-                        WebFont.load({
-                            timeout: 200000,
-                            custom: {
-                                families: fontFamilies.map(function (x) { return x.name + (x.variations && x.variations != "" ? ":" + x.variations : ""); }),
-                                urls: fontFamilies.map(function (x) { return x.cssUrl; })
-                            },
-                            active: function () {
-                                resolve();
-                            }
-                        });
-                    })];
-            });
-        }); };
         this.loadScript = function (src) { return __awaiter(_this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 return [2 /*return*/, new Promise(function (resolve, reject) {
@@ -41542,6 +41529,39 @@ var ZakekeEnvironment = /** @class */ (function () {
                     })];
             });
         }); };
+        this.getDesign = function (id) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        var design = new MPlaza.Design();
+                        design.set("docID", id);
+                        design.fetch({
+                            success: function (model) {
+                                resolve(model);
+                            },
+                            error: function () {
+                                reject();
+                            }
+                        });
+                    })];
+            });
+        }); };
+        this.internalLoadDesign = function (id) { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this;
+                        return [4 /*yield*/, this.getDesign(this.composition.get("designDocID"))];
+                    case 1:
+                        _a.zkCurrentTemplate = _b.sent();
+                        return [4 /*yield*/, Object(_fontsManager__WEBPACK_IMPORTED_MODULE_9__["downloadFontsOfDesign"])(this.zkCurrentTemplate, this.fonts)];
+                    case 2:
+                        _b.sent();
+                        this.renderDesign();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
         this.loadComposition = function (id) { return __awaiter(_this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -41549,7 +41569,6 @@ var ZakekeEnvironment = /** @class */ (function () {
                     case 1:
                         _a.sent();
                         this.buildStructure();
-                        this.renderDesign();
                         return [2 /*return*/];
                 }
             });
@@ -41560,14 +41579,19 @@ var ZakekeEnvironment = /** @class */ (function () {
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        if (!id) return [3 /*break*/, 2];
+                        if (!id) return [3 /*break*/, 4];
                         _a = this;
                         return [4 /*yield*/, this.getComposition(id)];
                     case 1:
                         _a.composition = _c.sent();
                         this.selection.setupOnComposition(this.composition);
-                        return [3 /*break*/, 3];
+                        if (!this.composition.get("designDocID")) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.internalLoadDesign(this.composition.get("designDocID"))];
                     case 2:
+                        _c.sent();
+                        _c.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
                         this.composition = this.selection.buildComposition();
                         _loop_1 = function (platformSelection) {
                             // Search the attribute
@@ -41591,8 +41615,8 @@ var ZakekeEnvironment = /** @class */ (function () {
                             platformSelection = _b[_i];
                             _loop_1(platformSelection);
                         }
-                        _c.label = 3;
-                    case 3:
+                        _c.label = 5;
+                    case 5:
                         // Add all composition attributes to the platformAttributes that we will send to the plugin
                         this.selection.get("groups").each(function (group) {
                             group.get("attributes").each(function (attribute) {
@@ -41612,7 +41636,7 @@ var ZakekeEnvironment = /** @class */ (function () {
                         script = this.selection.getAllAttributeTransformationScript();
                         this.viewer.adjustCamera(false);
                         return [4 /*yield*/, this.viewer.executeScriptAsync(script)];
-                    case 4:
+                    case 6:
                         _c.sent();
                         this.selection.on("attributeSelectionChanged", function (e) {
                             _this.handleAttributeSelectionChanged(e);
@@ -41858,14 +41882,16 @@ var ZakekeEnvironment = /** @class */ (function () {
             return __generator(this, function (_a) {
                 return [2 /*return*/, new Promise(function (resolve, reject) {
                         var design = _this.zkCurrentTemplate;
-                        if (!design)
+                        if (!design) {
                             resolve();
+                            return;
+                        }
                         design.save(null, {
-                            success: function (model, response, options) {
-                                _this.composition.set("designDocID", model.id);
+                            success: function (model) {
+                                _this.composition.set("designDocID", model.get("docID"));
                                 resolve();
                             },
-                            error: function (model, response, options) {
+                            error: function () {
                                 reject();
                             }
                         });
@@ -41941,17 +41967,12 @@ var ZakekeEnvironment = /** @class */ (function () {
             if (!design)
                 throw "Template does not exists with id " + templateId;
             var designSide = design.getDesignSide(_this.zkProduct.get("colors").at(0).get("sides").get(areaId));
-            var getRestriction = function (restriction) {
-                if (designSide)
-                    return designSide.get(restriction);
-                else
-                    design.get(restriction);
-            };
             var getUploadRestriction = function (restriction) {
+                var _a, _b;
                 if (designSide && designSide.get("uploadRestrictions"))
-                    return designSide.get("uploadRestrictions")[restriction];
+                    return (_a = designSide.get("uploadRestrictions")) === null || _a === void 0 ? void 0 : _a[restriction];
                 else if (design.get("uploadRestrictions"))
-                    design.get("uploadRestrictions")[restriction];
+                    (_b = design.get("uploadRestrictions")) === null || _b === void 0 ? void 0 : _b[restriction];
                 else
                     return null;
             };
@@ -41967,28 +41988,31 @@ var ZakekeEnvironment = /** @class */ (function () {
             var _this = this;
             return __generator(this, function (_a) {
                 return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var templatesList, templates, _i, _a, template, _b, _c;
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
+                        var templatesList, templates, _i, _a, _template, template;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
                                 case 0: return [4 /*yield*/, _api__WEBPACK_IMPORTED_MODULE_6__["axiosApi"].get("designs/templates/" + this.zkProduct.get('modelID'))];
                                 case 1:
-                                    templatesList = (_d.sent()).data;
+                                    templatesList = (_b.sent()).data;
                                     templates = [];
-                                    if (!(templatesList.length > 0)) return [3 /*break*/, 5];
+                                    if (!(templatesList.length > 0)) return [3 /*break*/, 6];
                                     _i = 0, _a = templatesList[0].categories[0].templates;
-                                    _d.label = 2;
+                                    _b.label = 2;
                                 case 2:
-                                    if (!(_i < _a.length)) return [3 /*break*/, 5];
-                                    template = _a[_i];
-                                    _c = (_b = templates).push;
-                                    return [4 /*yield*/, this.getTemplate(template.designID)];
+                                    if (!(_i < _a.length)) return [3 /*break*/, 6];
+                                    _template = _a[_i];
+                                    return [4 /*yield*/, this.getTemplate(_template.designID)];
                                 case 3:
-                                    _c.apply(_b, [_d.sent()]);
-                                    _d.label = 4;
+                                    template = _b.sent();
+                                    return [4 /*yield*/, Object(_fontsManager__WEBPACK_IMPORTED_MODULE_9__["downloadFontsOfDesign"])(template, this.fonts)];
                                 case 4:
+                                    _b.sent();
+                                    templates.push(template);
+                                    _b.label = 5;
+                                case 5:
                                     _i++;
                                     return [3 /*break*/, 2];
-                                case 5:
+                                case 6:
                                     resolve(templates);
                                     return [2 /*return*/];
                             }
@@ -42004,34 +42028,13 @@ var ZakekeEnvironment = /** @class */ (function () {
                         var design = new MPlaza.Design();
                         design.set("docID", templateId);
                         design.fetch({
-                            success: function (model, response, opts) { return __awaiter(_this, void 0, void 0, function () {
-                                var fonts, _i, _a, item, data, attributes, fontFamily, fontFamilies;
-                                var _this = this;
-                                return __generator(this, function (_b) {
-                                    switch (_b.label) {
-                                        case 0:
-                                            fonts = [];
-                                            for (_i = 0, _a = design.get("designItems").models; _i < _a.length; _i++) {
-                                                item = _a[_i];
-                                                data = JSON.parse(item.get("json"));
-                                                attributes = data[1];
-                                                fontFamily = attributes.fontFamily || (attributes.children && attributes.children.length > 0 && attributes.children[0].length > 1 ? attributes.children[0][1].fontFamily : null);
-                                                if (fontFamily)
-                                                    fonts.push(fontFamily.replace(/"/g, ""));
-                                            }
-                                            fontFamilies = fonts.map(function (fontName) { return _this.fonts.find(function (fontFamily) { return fontFamily.name == fontName; }) || null; }).filter(function (x) { return x != null; });
-                                            if (!(fontFamilies.length > 0)) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, this.loadFonts(fontFamilies)];
-                                        case 1:
-                                            _b.sent();
-                                            _b.label = 2;
-                                        case 2:
-                                            resolve(design);
-                                            return [2 /*return*/];
-                                    }
+                            success: function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    resolve(design);
+                                    return [2 /*return*/];
                                 });
                             }); },
-                            error: function (model, response, opts) { return null; },
+                            error: function () { return null; },
                             data: {
                                 template: true
                             }
@@ -42277,18 +42280,25 @@ var ZakekeEnvironment = /** @class */ (function () {
                 throw "Called set item color but no viewer or viewer not ready";
         };
         this.setItemFontFamily = function (guid, fontFamily) { return __awaiter(_this, void 0, void 0, function () {
+            var font;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!this.viewer) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.loadFonts([this.fonts.find(function (x) { return x.name == fontFamily; })])];
+                        if (!this.viewer) return [3 /*break*/, 4];
+                        font = this.fonts.find(function (x) { return x.name === fontFamily; });
+                        if (!font) return [3 /*break*/, 2];
+                        return [4 /*yield*/, Object(_fontsManager__WEBPACK_IMPORTED_MODULE_9__["loadFonts"])([font])];
                     case 1:
                         _a.sent();
                         this.viewer.setDesignItemFontFamily(guid, fontFamily);
                         this.fireItemsChange();
                         return [3 /*break*/, 3];
-                    case 2: throw "Called set item font family but no viewer or viewer not ready";
-                    case 3: return [2 /*return*/];
+                    case 2:
+                        console.warn("No font found for " + fontFamily);
+                        _a.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4: throw "Called set item font family but no viewer or viewer not ready";
+                    case 5: return [2 /*return*/];
                 }
             });
         }); };
@@ -42445,19 +42455,28 @@ var ZakekeEnvironment = /** @class */ (function () {
             });
         }); };
         this.getPDF = function () { return __awaiter(_this, void 0, void 0, function () {
-            var data, pdf;
+            var data, params, pdf;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this.getScreenshot(2048, 2048)];
                     case 1:
                         data = _a.sent();
-                        return [4 /*yield*/, _api__WEBPACK_IMPORTED_MODULE_6__["axiosApi"].post(Zakeke.config.baseApiUrl + "previewdesigns/pdf", [
-                                {
-                                    urlSideBase64: data,
-                                    modelName: this.zkProduct.get('name'),
-                                    sideName: ""
-                                }
-                            ], {
+                        params = {
+                            environment: 2,
+                            productName: this.zkProduct.get('name'),
+                            sides: [],
+                            previewImage: data,
+                            selectedOptions: this.platformAttributesSelection.filter(function (x) { return x.attributeIsEnabled && x.attributeIsEnabled; }).map(function (_a) {
+                                var attributeLabel = _a.attributeLabel, attributeCode = _a.attributeCode, optionCode = _a.optionCode, optionLabel = _a.optionLabel;
+                                return ({
+                                    attributeLabel: attributeLabel,
+                                    attributeCode: !Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["isPlatformCode"])(attributeCode) ? attributeCode : '',
+                                    optionLabel: optionLabel,
+                                    optionCode: !Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["isPlatformCode"])(optionCode) ? optionCode : '',
+                                });
+                            })
+                        };
+                        return [4 /*yield*/, _api__WEBPACK_IMPORTED_MODULE_6__["axiosApi"].post(Zakeke.config.baseApiUrl + "previewdesigns/pdf", params, {
                                 transformResponse: function (res) { return res; },
                                 responseType: "text"
                             })];
@@ -42930,6 +42949,110 @@ var NonSquarePixelException = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/fontsManager.ts":
+/*!*****************************!*\
+  !*** ./src/fontsManager.ts ***!
+  \*****************************/
+/*! exports provided: loadFonts, downloadFontsOfDesign */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadFonts", function() { return loadFonts; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "downloadFontsOfDesign", function() { return downloadFontsOfDesign; });
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Download a list of font families so that are available for the browser
+ */
+function loadFonts(fontFamilies) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Promise(function (resolve) {
+                    WebFont.load({
+                        timeout: 200000,
+                        custom: {
+                            families: fontFamilies.map(function (x) { return x.name + (x.variations && x.variations != "" ? ":" + x.variations : ""); }),
+                            urls: fontFamilies.map(function (x) { return x.cssUrl; })
+                        },
+                        active: function () {
+                            resolve();
+                        }
+                    });
+                })];
+        });
+    });
+}
+/**
+ * Downlod all fonts used in a design
+ *
+ * @param design Design to load fonts for
+ * @param downloadedFonts A list of downloaded fonts
+ */
+function downloadFontsOfDesign(design, downloadedFonts) {
+    return __awaiter(this, void 0, void 0, function () {
+        var fonts, _i, _a, item, data, attributes, fontFamily, fontFamilies;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    fonts = [];
+                    for (_i = 0, _a = design.get("designItems").models; _i < _a.length; _i++) {
+                        item = _a[_i];
+                        data = JSON.parse(item.get("json"));
+                        attributes = data[1];
+                        fontFamily = attributes.fontFamily || (attributes.children && attributes.children.length > 0 && attributes.children[0].length > 1 ? attributes.children[0][1].fontFamily : null);
+                        if (fontFamily)
+                            fonts.push(fontFamily.replace(/"/g, ""));
+                    }
+                    fontFamilies = fonts.map(function (fontName) { return downloadedFonts.find(function (fontFamily) { return fontFamily.name == fontName; }) || null; }).filter(function (x) { return x != null; });
+                    if (!(fontFamilies.length > 0)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, loadFonts(fontFamilies)];
+                case 1:
+                    _b.sent();
+                    _b.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    });
+}
+
+
 /***/ }),
 
 /***/ "./src/helpers.tsx":
@@ -43532,7 +43655,7 @@ var ImageUploadTask = /** @class */ (function () {
 /*!***********************!*\
   !*** ./src/index.tsx ***!
   \***********************/
-/*! exports provided: ZakekeEnvironment, ZakekeViewer, ZakekeDesigner, useZakeke, ZakekeProvider, Platform, PlatformPriceType, User, Product, ProductArea, ProductQuantityRule, Variant, ZakekeEvent, TemplateConstraints, TemplateArea, Template, TextItem, ImageItem, PlatformSettings, EventMessageType, Camera, Group, Step, AttributeType, AttributeOptionShapeType, Attribute, Option */
+/*! exports provided: ZakekeEnvironment, ZakekeViewer, ZakekeDesigner, useZakeke, useInternalState, ZakekeProvider, Platform, PlatformPriceType, User, Product, ProductArea, ProductQuantityRule, Variant, ZakekeEvent, TemplateConstraints, TemplateArea, Template, TextItem, ImageItem, PlatformSettings, EventMessageType, Camera, Group, Step, AttributeType, AttributeOptionShapeType, Attribute, Option */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -43549,6 +43672,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _state_provider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./state/provider */ "./src/state/provider.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useZakeke", function() { return _state_provider__WEBPACK_IMPORTED_MODULE_3__["useZakeke"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useInternalState", function() { return _state_provider__WEBPACK_IMPORTED_MODULE_3__["useInternalState"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ZakekeProvider", function() { return _state_provider__WEBPACK_IMPORTED_MODULE_3__["ZakekeProvider"]; });
 
 /* harmony import */ var _models__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./models */ "./src/models.ts");
@@ -44112,10 +44237,10 @@ var Option = /** @class */ (function () {
 
 /***/ }),
 
-/***/ "./src/state/boot.ts":
-/*!***************************!*\
-  !*** ./src/state/boot.ts ***!
-  \***************************/
+/***/ "./src/state/boot.tsx":
+/*!****************************!*\
+  !*** ./src/state/boot.tsx ***!
+  \****************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -44123,6 +44248,9 @@ var Option = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var qs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! qs */ "./node_modules/qs/lib/index.js");
 /* harmony import */ var qs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(qs__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! .. */ "./src/index.tsx");
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -44160,46 +44288,53 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
     }
 };
 
+
+
 // Handle boot when provider is ready
-var boot = function (state, dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-    var boot, handleMessageReceived, query;
-    return __generator(this, function (_a) {
-        boot = function (parameters) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        dispatch({ type: 'IS_SCENE_LOADING', isLoading: true });
-                        // Register to environment changes
-                        state.environment.on('change', function () { return dispatch({ type: 'UPDATE' }); });
-                        return [4 /*yield*/, state.environment.boot(parameters)];
-                    case 1:
-                        _a.sent();
-                        dispatch({ type: 'IS_SCENE_LOADING', isLoading: false });
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        handleMessageReceived = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                if (e.data.type == "load" && !state.parametersReceived) {
-                    dispatch({ type: 'PARAMETERS_RECEIVED' });
-                    boot(e.data.parameters);
-                    window.parent.postMessage({ zakekeType: "loaded" }, "*");
-                }
-                return [2 /*return*/];
-            });
-        }); };
-        query = qs__WEBPACK_IMPORTED_MODULE_0___default.a.parse(window.location.search);
+var Boot = function (_a) {
+    var children = _a.children;
+    var stateRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(Object(___WEBPACK_IMPORTED_MODULE_2__["useInternalState"])());
+    var boot = Object(react__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(function (parameters) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    console.log("boot", parameters);
+                    (_a = stateRef.current) === null || _a === void 0 ? void 0 : _a.dispatch({ type: 'IS_SCENE_LOADING', isLoading: true });
+                    // Register to environment changes
+                    (_b = stateRef.current) === null || _b === void 0 ? void 0 : _b.state.environment.on('change', function () { var _a; return (_a = stateRef.current) === null || _a === void 0 ? void 0 : _a.dispatch({ type: 'UPDATE' }); });
+                    return [4 /*yield*/, ((_c = stateRef.current) === null || _c === void 0 ? void 0 : _c.state.environment.boot(parameters))];
+                case 1:
+                    _e.sent();
+                    (_d = stateRef.current) === null || _d === void 0 ? void 0 : _d.dispatch({ type: 'IS_SCENE_LOADING', isLoading: false });
+                    return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var handleMessageReceived = Object(react__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, _b;
+        return __generator(this, function (_c) {
+            if (e.data.type == "load" && !((_a = stateRef.current) === null || _a === void 0 ? void 0 : _a.state.parametersReceived)) {
+                (_b = stateRef.current) === null || _b === void 0 ? void 0 : _b.dispatch({ type: 'PARAMETERS_RECEIVED' });
+                boot(e.data.parameters);
+                window.parent.postMessage({ zakekeType: "loaded" }, "*");
+            }
+            return [2 /*return*/];
+        });
+    }); }, []);
+    Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
+        var query = qs__WEBPACK_IMPORTED_MODULE_0___default.a.parse(window.location.search);
         if (query && query.ecommerce && query.ecommerce == 'preview') {
             boot(null);
         }
         else {
             window.addEventListener("message", handleMessageReceived);
         }
-        return [2 /*return*/];
-    });
-}); };
-/* harmony default export */ __webpack_exports__["default"] = (boot);
+        return function () { return window.removeEventListener("message", handleMessageReceived); };
+    }, []);
+    return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_1___default.a.Fragment, null, children);
+};
+/* harmony default export */ __webpack_exports__["default"] = (Boot);
 
 
 /***/ }),
@@ -44208,23 +44343,25 @@ var boot = function (state, dispatch) { return __awaiter(void 0, void 0, void 0,
 /*!********************************!*\
   !*** ./src/state/provider.tsx ***!
   \********************************/
-/*! exports provided: useZakeke, ZakekeProvider */
+/*! exports provided: useZakeke, useInternalState, ZakekeProvider */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useZakeke", function() { return useZakeke; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useInternalState", function() { return useInternalState; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ZakekeProvider", function() { return ZakekeProvider; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _providerValue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./providerValue */ "./src/state/providerValue.ts");
-/* harmony import */ var _reducer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reducer */ "./src/state/reducer.ts");
-/* harmony import */ var _boot__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./boot */ "./src/state/boot.ts");
+/* harmony import */ var _boot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./boot */ "./src/state/boot.tsx");
+/* harmony import */ var _providerValue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./providerValue */ "./src/state/providerValue.ts");
+/* harmony import */ var _reducer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reducer */ "./src/state/reducer.ts");
 
 
 
 
 var context = react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext(null);
+var internalContext = react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext(null);
 // Use zakeke hook
 var useZakeke = function () {
     var value = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(context);
@@ -44232,21 +44369,27 @@ var useZakeke = function () {
         throw 'Corrupted Zakeke state';
     return value;
 };
+// Use zakeke hook
+var useInternalState = function () {
+    var value = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(internalContext);
+    if (!value)
+        throw 'Corrupted Zakeke state';
+    return value;
+};
 // ZakekeProvider
 var ZakekeProvider = function (_a) {
     var environment = _a.environment, children = _a.children;
-    var _b = Object(react__WEBPACK_IMPORTED_MODULE_0__["useReducer"])(_reducer__WEBPACK_IMPORTED_MODULE_2__["reducer"], {
+    var _b = Object(react__WEBPACK_IMPORTED_MODULE_0__["useReducer"])(_reducer__WEBPACK_IMPORTED_MODULE_3__["reducer"], {
         environment: environment,
         isAddToCartLoading: false,
         isSceneLoading: false,
         parametersReceived: false
     }), state = _b[0], dispatch = _b[1];
     // Create the provider value exposed to developer
-    var value = Object(_providerValue__WEBPACK_IMPORTED_MODULE_1__["createProviderValue"])(state, dispatch);
-    Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
-        Object(_boot__WEBPACK_IMPORTED_MODULE_3__["default"])(state, dispatch);
-    }, []);
-    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(context.Provider, { value: value }, children);
+    var value = Object(_providerValue__WEBPACK_IMPORTED_MODULE_2__["createProviderValue"])(state, dispatch);
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(context.Provider, { value: value },
+        react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(internalContext.Provider, { value: { state: state, dispatch: dispatch } },
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_boot__WEBPACK_IMPORTED_MODULE_1__["default"], null, children)));
 };
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zakeke-configurator-react",
-  "version": "0.0.53",
+  "version": "0.0.57",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/declarations/composer/Module/src/index.d.ts",