zakeke-configurator-react 0.0.55 → 0.0.59

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

@@ -98,7 +98,7 @@ export declare class ZakekeEnvironment {
     selectOption: (optionId: number) => void;
     focusGroup: (groupId: number) => void;
     focusAttribute: (attributeId: number) => Promise<void>;
-    setCamera(cameraLocationId: string): void;
+    setCamera(cameraLocationId: string, onlyAngleOfView?: boolean, animate?: boolean): void;
     getCameraByName(name: string): Zakeke.SceneCameraLocation | undefined;
     setCameraLocation(name: string, animate?: boolean): void;
     addToCart: (additionalProperties: Record<string, any>) => Promise<void>;
@@ -113,7 +113,7 @@ export declare class ZakekeEnvironment {
     hasExplodedMode: () => boolean;
     setBackgroundColor: (color: string) => void;
     getCurrentSelection: () => PlatformAttributeSelection[];
-    getScreenshot: (width?: number, height?: number) => Promise<string | null>;
+    getScreenshot: (width?: number, height?: number, backgroundColor?: string | null) => Promise<string>;
     private fireItemsChange;
     isAreaVisible(areaId: number): boolean;
     removeItem: (guid: string) => Promise<void>;
@@ -137,11 +137,11 @@ export declare class ZakekeEnvironment {
     setCameraPivot(meshID: string): void;
     resetCameraPivot(): void;
     setCameraZoomEnabled(enabled: boolean): void;
-    setCameraByName(name: string): void;
+    setCameraByName(name: string, onlyAngleOfView?: boolean, animate?: boolean): void;
     findObjectByName(name: string): BABYLON.AbstractMesh | null | undefined;
     getPDF: () => Promise<string>;
     private rewriteShareUrl;
-    getOnlineScreenshot: (width: number, height: number) => Promise<string>;
+    getOnlineScreenshot: (width: number, height: number, backgroundColor?: string | undefined) => Promise<string>;
     private buildModelViewerUrl;
     isSceneArEnabled: () => boolean;
     private getPregeneratedARUrl;

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

@@ -1,4 +1,3 @@
-import { Dispatch } from "react";
-import { AppState } from "./state";
-declare const boot: (state: AppState, dispatch: Dispatch<any>) => Promise<void>;
-export default boot;
+import { FC } from 'react';
+declare const Boot: FC<{}>;
+export default Boot;

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

@@ -1,8 +1,13 @@
+import { Dispatch, FunctionComponent } from "react";
 import { ZakekeEnvironment } from "../environment";
-import { FunctionComponent } from "react";
 import { ProviderValue } from "./providerValue";
+import { AppState } from "./state";
 declare const useZakeke: () => ProviderValue;
+declare const useInternalState: () => {
+    state: AppState;
+    dispatch: Dispatch<any>;
+};
 declare const ZakekeProvider: FunctionComponent<{
     environment: ZakekeEnvironment;
 }>;
-export { useZakeke, ZakekeProvider };
+export { useZakeke, useInternalState, ZakekeProvider };

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

@@ -29,7 +29,7 @@ export interface ProviderValue {
     loadComposition: (id: string) => Promise<void>;
     addToCart: (additionalProperties: Record<string, any>) => Promise<void>;
     getPDF: () => Promise<string>;
-    getOnlineScreenshot: (width: number, height: number) => Promise<string>;
+    getOnlineScreenshot: (width: number, height: number, backgroundColor?: string) => Promise<string>;
     setCamera: (id: string) => void;
     setCameraByName: (name: string) => void;
     setCameraZoomEnabled: (enabled: boolean) => void;

package/dist/index.js

@@ -42224,12 +42224,42 @@ var ZakekeEnvironment = /** @class */ (function () {
         this.getCurrentSelection = function () {
             return lodash__WEBPACK_IMPORTED_MODULE_7___default.a.cloneDeep(_this.platformAttributesSelection);
         };
-        this.getScreenshot = function (width, height) {
+        this.getScreenshot = function (width, height, backgroundColor) {
             if (width === void 0) { width = 1024; }
             if (height === void 0) { height = 1024; }
+            if (backgroundColor === void 0) { backgroundColor = null; }
             return __awaiter(_this, void 0, void 0, function () {
+                var url;
                 return __generator(this, function (_a) {
-                    return [2 /*return*/, this.viewer.getSceneContentScreenshotAsync(width, height)];
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.viewer.getSceneContentScreenshotAsync(width, height)];
+                        case 1:
+                            url = _a.sent();
+                            if (!url)
+                                throw new Error('Failed generating screenshot');
+                            if (!backgroundColor) return [3 /*break*/, 3];
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    var img = new Image();
+                                    img.onload = function () {
+                                        var canvas = document.createElement("canvas");
+                                        canvas.width = img.width;
+                                        canvas.height = img.height;
+                                        var ctx = canvas.getContext("2d");
+                                        if (ctx) {
+                                            ctx.fillStyle = backgroundColor;
+                                            ctx.fillRect(0, 0, img.width, img.height);
+                                            ctx.drawImage(img, 0, 0);
+                                            url = canvas.toDataURL();
+                                            resolve();
+                                        }
+                                    };
+                                    img.src = url;
+                                })];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3: return [2 /*return*/, url];
+                    }
                 });
             });
         };
@@ -42455,19 +42485,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"
                             })];
@@ -42491,11 +42530,11 @@ var ZakekeEnvironment = /** @class */ (function () {
             }
             return url;
         };
-        this.getOnlineScreenshot = function (width, height) { return __awaiter(_this, void 0, void 0, function () {
+        this.getOnlineScreenshot = function (width, height, backgroundColor) { return __awaiter(_this, void 0, void 0, function () {
             var preview, url;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getScreenshot(width, height)];
+                    case 0: return [4 /*yield*/, this.getScreenshot(width, height, backgroundColor)];
                     case 1:
                         preview = _a.sent();
                         return [4 /*yield*/, _api__WEBPACK_IMPORTED_MODULE_6__["axiosApi"].post(Zakeke.config.baseApiUrl + "designs/save-share-preview", { preview: preview })];
@@ -42790,8 +42829,8 @@ var ZakekeEnvironment = /** @class */ (function () {
         step.attributes.sort(function (a, b) { return a.displayOrder - b.displayOrder; });
         return step;
     };
-    ZakekeEnvironment.prototype.setCamera = function (cameraLocationId) {
-        this.viewer.setCameraLocation(cameraLocationId);
+    ZakekeEnvironment.prototype.setCamera = function (cameraLocationId, onlyAngleOfView, animate) {
+        this.viewer.setCameraLocation(cameraLocationId, onlyAngleOfView, animate);
     };
     ZakekeEnvironment.prototype.getCameraByName = function (name) {
         var _a;
@@ -42847,11 +42886,11 @@ var ZakekeEnvironment = /** @class */ (function () {
     ZakekeEnvironment.prototype.setCameraZoomEnabled = function (enabled) {
         this.viewer.setCameraZoomEnabled(enabled);
     };
-    ZakekeEnvironment.prototype.setCameraByName = function (name) {
+    ZakekeEnvironment.prototype.setCameraByName = function (name, onlyAngleOfView, animate) {
         if (this.zkScene) {
             var location_1 = this.zkScene.get("cameraLocations").find(function (x) { return x.get("name") == name; });
             if (location_1)
-                this.viewer.setCameraLocation(location_1.get("locationID"));
+                this.viewer.setCameraLocation(location_1.get("locationID"), onlyAngleOfView, animate);
         }
     };
     ZakekeEnvironment.prototype.findObjectByName = function (name) {
@@ -43646,7 +43685,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";
@@ -43663,6 +43702,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");
@@ -44226,10 +44267,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__) {
 
@@ -44237,6 +44278,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) {
@@ -44274,46 +44318,54 @@ 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 internalState = Object(___WEBPACK_IMPORTED_MODULE_2__["useInternalState"])();
+    var stateRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(internalState);
+    stateRef.current = internalState;
+    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:
+                    (_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);
 
 
 /***/ }),
@@ -44322,23 +44374,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);
@@ -44346,21 +44400,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.55",
+  "version": "0.0.59",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/declarations/composer/Module/src/index.d.ts",