@gamelearn/arcade-components 0.2.0 → 0.4.1-beta-terminal

package/dist/components/web-builder-puzzle-component/Templates/Bank.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.bankProps = exports.titleOptions = exports.colorOptions2 = exports.colorOptions = exports.imagesOptions = void 0;
+var imagesOptions = [{
+  name: 'webbuilder.imageOptions.image1',
+  src: 'Amor.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image2',
+  src: 'Bancorp.svg'
+}, {
+  name: 'webbuilder.imageOptions.image3',
+  src: 'Amanda.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image4',
+  src: 'keyboard.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image5',
+  src: 'Melanie.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image6',
+  src: 'Sharon.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image7',
+  src: 'Bankex.svg'
+}, {
+  name: 'webbuilder.imageOptions.image8',
+  src: 'Futbol.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image9',
+  src: 'GBL.svg'
+}, {
+  name: 'webbuilder.imageOptions.image10',
+  src: 'Fooder.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image11',
+  src: 'Corporate.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image12',
+  src: 'Bank of Zamunda.svg'
+}, {
+  name: 'webbuilder.imageOptions.image13',
+  src: 'mindfullness.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image14',
+  src: 'Nature.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image15',
+  src: 'Shopper.jpg'
+}, {
+  name: 'webbuilder.imageOptions.image16',
+  src: 'Lab.jpg'
+}];
+exports.imagesOptions = imagesOptions;
+var colorOptions = ['#c66a46', '#3c9dc0', '#6236ff', '#21254f'];
+exports.colorOptions = colorOptions;
+var colorOptions2 = ['#39b7b9', '#25a1d4', '#f5a623', '#080269'];
+exports.colorOptions2 = colorOptions2;
+var titleOptions = [{
+  title: 'webbuilder.bank.titleOptions.title1.text',
+  desc: 'webbuilder.bank.titleOptions.title1.description'
+}, {
+  title: 'webbuilder.bank.titleOptions.title2.text',
+  desc: 'webbuilder.bank.titleOptions.title2.description'
+}, {
+  title: 'webbuilder.bank.titleOptions.title3.text',
+  desc: 'webbuilder.bank.titleOptions.title3.description'
+}, {
+  title: 'webbuilder.bank.titleOptions.title4.text',
+  desc: 'webbuilder.bank.titleOptions.title4.description'
+}, {
+  title: 'webbuilder.bank.titleOptions.title5.text',
+  desc: 'webbuilder.bank.titleOptions.title5.description'
+}];
+exports.titleOptions = titleOptions;
+var bankProps = {
+  backgroundImage: imagesOptions[10].src,
+  backgroundLogo: imagesOptions[11].src,
+  backgroundColor: '#21254f',
+  btnColor: '#25a1d4'
+};
+exports.bankProps = bankProps;
+var BankTemplate = {
+  header: {
+    color: bankProps.backgroundColor,
+    logo: bankProps.backgroundLogo
+  },
+  body: {
+    bankTitle: titleOptions[0].title,
+    bankDesc: titleOptions[0].desc,
+    bgImage: bankProps.backgroundImage,
+    btnColor: bankProps.btnColor
+  }
+};
+var _default = BankTemplate;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/Templates/Facebook.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.homeOptions = exports.mailOptions = exports.studiesOptions = exports.workOptions = exports.userOptions = exports.facebookProps = void 0;
+
+var _Bank = require("./Bank");
+
+var facebookProps = {
+  backgroundImage: _Bank.imagesOptions[12].src,
+  backgroundUser: _Bank.imagesOptions[5].src
+};
+exports.facebookProps = facebookProps;
+var userOptions = ['webbuilder.userOptions.user1', 'webbuilder.userOptions.user2', 'webbuilder.userOptions.user3'];
+exports.userOptions = userOptions;
+var workOptions = ['webbuilder.workOptions.work1', 'webbuilder.workOptions.work2', 'webbuilder.workOptions.work3'];
+exports.workOptions = workOptions;
+var studiesOptions = ['webbuilder.studiesOptions.study1', 'webbuilder.studiesOptions.study2', 'webbuilder.studiesOptions.study3'];
+exports.studiesOptions = studiesOptions;
+var mailOptions = ['webbuilder.mailOptions.mail1', 'webbuilder.mailOptions.mail2', 'webbuilder.mailOptions.mail3'];
+exports.mailOptions = mailOptions;
+var homeOptions = ['webbuilder.homeOptions.home1', 'webbuilder.homeOptions.home2', 'webbuilder.homeOptions.home3'];
+exports.homeOptions = homeOptions;
+var FacebookTemplate = {
+  header: {
+    username: userOptions[1],
+    userImage: facebookProps.backgroundUser,
+    bgImage: facebookProps.backgroundImage
+  },
+  body: {
+    work: workOptions[2],
+    home: homeOptions[1],
+    studies: studiesOptions[0],
+    mail: mailOptions[0]
+  }
+};
+var _default = FacebookTemplate;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/Templates/resourcePath.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var path = 'https://min.gamelearn.io/css-resources/gamelearn/resources/';
+var _default = path;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/components/EditButton/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var EditButton = function EditButton(_ref) {
+  var action = _ref.action,
+      className = _ref.className;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--webBuilder__edit ".concat(className),
+    onClick: action
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-edit"
+  }));
+};
+
+EditButton.defaultProps = {
+  action: function action() {},
+  className: ''
+};
+var _default = EditButton;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/components/Feedback/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FeedbackResult = function FeedbackResult(_ref) {
+  var onNext = _ref.onNext,
+      success = _ref.success,
+      showButton = _ref.showButton,
+      translate = _ref.translate;
+  var title = success ? translate('webbuilder.feedback.successTitle') : translate('webbuilder.feedback.failTitle');
+  var desc = success ? translate('webbuilder.feedback.success') : translate('webbuilder.feedback.fail');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--webBuilder__feedback bottom ".concat(success ? 'success' : 'failed')
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, desc)), showButton ? /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn gat--btn__secondary ".concat(success ? 'green' : 'red'),
+    onClick: onNext
+  }, translate('webbuilder.continue')) : null);
+};
+
+FeedbackResult.defaultProps = {
+  onNext: function onNext() {},
+  success: false,
+  showButton: true
+};
+var _default = FeedbackResult;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/components/PublishButton/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PublishButton = function PublishButton(_ref) {
+  var onPublish = _ref.onPublish,
+      translate = _ref.translate;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "position--absolute bottom center",
+    onClick: onPublish
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "gat--btn gat--btn__primary"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-download-cloud"
+  }), translate('webbuilder.publish')));
+};
+
+PublishButton.defaultProps = {
+  onPublish: function onPublish() {}
+};
+var _default = PublishButton;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/components/WebBuilderBody/BankBody.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _EditButton = _interopRequireDefault(require("../EditButton"));
+
+var _resourcePath = _interopRequireDefault(require("../../Templates/resourcePath"));
+
+var _Bank = require("../../Templates/Bank");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BankBody = function BankBody(_ref) {
+  var showingReference = _ref.showingReference,
+      usingTemplate = _ref.usingTemplate,
+      body = _ref.body,
+      _onSave = _ref.onSave,
+      openPopup = _ref.openPopup,
+      translate = _ref.translate;
+  var bgImg = showingReference ? usingTemplate.body.bgImage : body.bgImage;
+  var buttonColor = showingReference ? usingTemplate.body.btnColor : body.btnColor;
+  var defaultTitle = showingReference ? translate(usingTemplate.body.bankTitle) : translate('webbuilder.bank.body.image.title');
+  var defaultDesc = showingReference ? translate(usingTemplate.body.bankDesc) : translate('webbuilder.bank.body.image.description');
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--image__front",
+    style: {
+      backgroundImage: "url(".concat(_resourcePath.default + bgImg, ")")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--image__text"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, body.bankTitle && !showingReference ? translate(body.bankTitle) : defaultTitle), /*#__PURE__*/_react.default.createElement("span", null, body.bankDesc && !showingReference ? translate(body.bankDesc) : defaultDesc), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupTextComponent', {
+        options: _Bank.titleOptions,
+        onSave: function onSave(option) {
+          return _onSave({
+            bankTitle: option.title,
+            bankDesc: option.desc
+          });
+        }
+      });
+    }
+  }) : null, !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    className: "position--absolute top right",
+    action: function action() {
+      openPopup('PopupImageComponent', {
+        images: _Bank.imagesOptions,
+        onSave: function onSave(image) {
+          return _onSave({
+            bgImage: image
+          });
+        }
+      });
+    }
+  }) : null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--sidebar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__title"
+  }, translate("webbuilder.bank.body.password.title")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__group"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__label"
+  }, translate("webbuilder.bank.body.password.current")), /*#__PURE__*/_react.default.createElement("input", {
+    disabled: true,
+    className: "bank--form__input",
+    type: "password",
+    placeholder: "********"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-circle-check"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__group"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__label"
+  }, translate("webbuilder.bank.body.password.new")), /*#__PURE__*/_react.default.createElement("input", {
+    disabled: true,
+    className: "bank--form__input",
+    type: "password",
+    placeholder: "********"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-circle-check"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__group"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__label"
+  }, translate("webbuilder.bank.body.password.confirm")), /*#__PURE__*/_react.default.createElement("input", {
+    disabled: true,
+    className: "bank--form__input",
+    type: "password",
+    placeholder: "********"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-circle-check"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "bank--form__buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "bank--form__btn",
+    style: {
+      backgroundColor: "".concat(buttonColor)
+    }
+  }, translate("webbuilder.save")), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupColorComponent', {
+        colors: _Bank.colorOptions2,
+        onSave: function onSave(color) {
+          return _onSave({
+            btnColor: color
+          });
+        }
+      });
+    }
+  }) : null))));
+};
+
+var _default = BankBody;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/components/WebBuilderBody/FacebookBody.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _EditButton = _interopRequireDefault(require("../EditButton"));
+
+var _Facebook = require("../../Templates/Facebook");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FacebookBody = function FacebookBody(_ref) {
+  var showingReference = _ref.showingReference,
+      usingTemplate = _ref.usingTemplate,
+      body = _ref.body,
+      _onSave = _ref.onSave,
+      openPopup = _ref.openPopup,
+      translate = _ref.translate;
+  var work = showingReference ? usingTemplate.body.work : body.work;
+  var studies = showingReference ? usingTemplate.body.studies : body.studies;
+  var home = showingReference ? usingTemplate.body.home : body.home;
+  var mail = showingReference ? usingTemplate.body.mail : body.mail;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "facebook--sidebar"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    className: "facebook--sidebar__item ".concat(work || showingReference ? 'selected' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex align-center"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-work"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, translate(!work ? 'webbuilder.facebook.body.work' : work))), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupTextComponent', {
+        options: _Facebook.workOptions,
+        onSave: function onSave(selected) {
+          return _onSave({
+            work: selected
+          });
+        }
+      });
+    }
+  }) : null), /*#__PURE__*/_react.default.createElement("li", {
+    className: "facebook--sidebar__item ".concat(studies || showingReference ? 'selected' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex align-center"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-education"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, translate(!studies ? 'webbuilder.facebook.body.studies' : studies))), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupTextComponent', {
+        options: _Facebook.studiesOptions,
+        onSave: function onSave(selected) {
+          return _onSave({
+            studies: selected
+          });
+        }
+      });
+    }
+  }) : null), /*#__PURE__*/_react.default.createElement("li", {
+    className: "facebook--sidebar__item ".concat(home || showingReference ? 'selected' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex align-center"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-home"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, translate(!home ? 'webbuilder.facebook.body.home' : home))), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupTextComponent', {
+        options: _Facebook.homeOptions,
+        onSave: function onSave(selected) {
+          return _onSave({
+            home: selected
+          });
+        }
+      });
+    }
+  }) : null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--board"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--mail__label"
+  }, "E-mail"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--mail__box ".concat(mail || showingReference ? 'active' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex align-center"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-mail"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, translate(!mail ? 'webbuilder.facebook.body.email' : mail))), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupTextComponent', {
+        options: _Facebook.mailOptions,
+        onSave: function onSave(selected) {
+          return _onSave({
+            mail: selected
+          });
+        }
+      });
+    }
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--tabs"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--tabs__item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-edit"
+  }), translate("webbuilder.facebook.body.editPost")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--tabs__item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-photo"
+  }), translate("webbuilder.facebook.body.editPhoto")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--tabs__item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-video"
+  }), translate("webbuilder.facebook.body.liveVideo")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--tabs__item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-fb-events"
+  }), translate("webbuilder.facebook.body.facebookEvent"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--thinking"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--textarea"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--textarea__circle"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--textarea__placeholder"
+  }, translate("webbuilder.facebook.body.think"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--chips"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "facebook--chips__item"
+  }, translate("webbuilder.facebook.body.photo")), /*#__PURE__*/_react.default.createElement("span", {
+    className: "facebook--chips__item"
+  }, translate("webbuilder.facebook.body.label")), /*#__PURE__*/_react.default.createElement("span", {
+    className: "facebook--chips__item"
+  }, translate("webbuilder.facebook.body.feeling"))))));
+};
+
+FacebookBody.defaultProps = {
+  showingReference: false,
+  usingTemplate: {},
+  openPopup: function openPopup() {},
+  onSave: function onSave() {},
+  body: {}
+};
+var _default = FacebookBody;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/components/WebBuilderBody/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FacebookBody = _interopRequireDefault(require("./FacebookBody"));
+
+var _BankBody = _interopRequireDefault(require("./BankBody"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var WebBuilderBody = function WebBuilderBody(props) {
+  var isFacebook = props.isFacebook;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--webBuilder__body ".concat(!isFacebook ? 'bank' : '')
+  }, isFacebook ? /*#__PURE__*/_react.default.createElement(_FacebookBody.default, props) : /*#__PURE__*/_react.default.createElement(_BankBody.default, props));
+};
+
+WebBuilderBody.defaultProps = {
+  isFacebook: false
+};
+WebBuilderBody.propTypes = {
+  isFacebook: _propTypes.default.bool
+};
+var _default = WebBuilderBody;
+exports.default = _default;

package/dist/components/web-builder-puzzle-component/components/WebBuilderFront/index.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Facebook = require("../../Templates/Facebook");
+
+var _Bank = require("../../Templates/Bank");
+
+var _resourcePath = _interopRequireDefault(require("../../Templates/resourcePath"));
+
+var _EditButton = _interopRequireDefault(require("../EditButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var WebBuilderFront = function WebBuilderFront(_ref) {
+  var showingReference = _ref.showingReference,
+      usingTemplate = _ref.usingTemplate,
+      header = _ref.header,
+      _onSave = _ref.onSave,
+      translate = _ref.translate,
+      openPopup = _ref.openPopup;
+  var userImage = showingReference ? usingTemplate.header.userImage : header.userImage;
+  var userName = showingReference ? usingTemplate.header.username : header.username;
+  var backImage = showingReference ? usingTemplate.header.bgImage : header.bgImage;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--webBuilder__front",
+    style: {
+      backgroundImage: "url(".concat(_resourcePath.default + backImage, ")")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "facebook--user"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "facebook--user__circle",
+    style: {
+      backgroundImage: "url(".concat(_resourcePath.default + userImage, ")")
+    }
+  }, !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupImageComponent', {
+        images: _Bank.imagesOptions,
+        onSave: function onSave(image) {
+          return _onSave({
+            userImage: image
+          });
+        }
+      });
+    }
+  }) : null), /*#__PURE__*/_react.default.createElement("span", {
+    className: "facebook--user__text"
+  }, translate(!userName ? 'webbuilder.facebook.header.userName' : userName)), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    action: function action() {
+      openPopup('PopupTextComponent', {
+        options: _Facebook.userOptions,
+        onSave: function onSave(user) {
+          return _onSave({
+            username: user
+          });
+        }
+      });
+    }
+  }) : null), !showingReference ? /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+    className: "position--absolute right top",
+    action: function action() {
+      openPopup('PopupImageComponent', {
+        images: _Bank.imagesOptions,
+        onSave: function onSave(image) {
+          return _onSave({
+            bgImage: image
+          });
+        }
+      });
+    }
+  }) : null);
+};
+
+WebBuilderFront.defaultProps = {
+  showingReference: false,
+  usingTemplate: {},
+  openPopup: function openPopup() {},
+  onSave: function onSave() {},
+  header: {}
+};
+WebBuilderFront.propTypes = {
+  showingReference: _propTypes.default.bool,
+  usingTemplate: _propTypes.default.shape({}),
+  openPopup: _propTypes.default.func,
+  onSave: _propTypes.default.func,
+  header: _propTypes.default.shape({})
+};
+var _default = WebBuilderFront;
+exports.default = _default;