document.addEventListener("DOMContentLoaded", function () { "use strict"; var __extends = void 0 && (void 0).__extends || function () { var _extendStatics = function extendStatics(d, b) { _extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; } || function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return _extendStatics(d, b); }; return function (d, b) { if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); _extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; }(); function DomainHomeLink(props) { var currentDomain = props.currentDomain; var contents; if (currentDomain.logo()) { contents = React.createElement("img", { src: currentDomain.logo().viewUrl(), alt: currentDomain.emailDomain(), className: "header-logo" }); } else { contents = React.createElement("img", { src: "/static/images/merchi-master-colour-with-monster.png", style: { maxHeight: "25px" } }); } return React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("domain_index", { id: currentDomain.id() }), className: "navbar-brand" }, contents); } function PublicMenuItems(props) { var _a = props.classes, classes = _a === void 0 ? {} : _a, currentDomain = props.currentDomain, currentUser = props.currentUser, _b = props.menuItemA, menuItemA = _b === void 0 ? {} : _b, _c = props.styles, styles = _c === void 0 ? {} : _c; var menu = currentDomain.mainMenu(); var menuItems = []; function loggedOutPublicNavMenu(domain) { return React.createElement("li", null, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("public_login", { id: domain.id() }) }, "Login")); } if (menu) menuItems = menu.menuItems(); function loggedInPublicNavMenu(user, domain) { var profileUrl = user.profilePictureUrl(48); return React.createElement("li", { className: "dropdown navbar-user", style: { cursor: "pointer" } }, React.createElement("a", { className: "dropdown-toggle", "data-toggle": "dropdown" }, React.createElement("img", { src: profileUrl, style: { "float": "left", width: "30px", height: "30px", margin: "-5px 10px 0 0", borderRadius: "30px" } }), React.createElement("span", { className: "hidden-md hidden-sm" }, user.name()), React.createElement("b", { className: "caret" })), React.createElement("ul", { className: "dropdown-menu animated fadeInLeft" }, React.createElement("li", { className: "arrow" }), React.createElement("li", null, React.createElement("a", { style: menuItemA, href: UTILITIES.URL_MAP.publicUrlFor("user_profile_public", { id: domain.id(), user_id: user.id() }) }, "My Profile")), React.createElement("li", { className: "divider" }), React.createElement("li", null, React.createElement("a", { style: menuItemA, href: UTILITIES.URL_MAP.publicUrlFor("public_logout", { id: domain.id() }), id: "public-logout" }, "Logout")))); } function publicNavMenu(user, domain) { if (!user || user.id() < 0) { return loggedOutPublicNavMenu(domain); } return loggedInPublicNavMenu(user, domain); } function publicMenuItem(menuItem) { var href = menuItem.url(currentDomain); var query = "?"; if (currentUser && menuItem.linkType() === 0) { if (href.indexOf("?") !== -1) { query = "&"; } href = href + query + "user_id=" + currentUser.id() + "&user_name=" + encodeURIComponent(currentUser.name()) + "&user_email=" + currentUser.primaryEmailAddress(); } return React.createElement("li", { id: "menu-item-" + menuItem.id(), key: menuItem.id() }, React.createElement("a", { title: menuItem.name(), rel: "nofollow", href: href, style: menuItemA }, menuItem.name())); } return React.createElement("ul", { className: classes.navBar ? classes.navBar : "nav navbar-nav navbar-right" }, menuItems.map(publicMenuItem), publicNavMenu(currentUser, currentDomain)); } var DisplayDraft = /** @class */function (_super) { __extends(DisplayDraft, _super); function DisplayDraft(props) { var _this = _super.call(this, props) || this; _this.state = { activeDraftIndex: props.job.drafts() ? props.job.drafts().length - 1 : null, address: new MERCHI.Address(), requestChanges: false, submittingChanges: false, submittingComments: false, approvingDraft: false, updatingShipping: false, openRequestChangesContainer: false, openApproveDraftContainer: false, openShippingAddress: false, commentAttachment: null, commentText: "", showAlert: false, alertMessage: "", alertType: "" }; _this.updateAddress = _this.updateAddress.bind(_this); _this.hideAlert = _this.hideAlert.bind(_this); return _this; } DisplayDraft.prototype.showAlert = function (typeString, message) { this.setState({ alertType: typeString, alertMessage: message, showAlert: true }, function () { window.scrollTo(0, 0); }); }; DisplayDraft.prototype.hideAlert = function () { this.setState({ alertType: "", alertMessage: "", showAlert: false }); }; DisplayDraft.prototype.addCommentAttachment = function () { var file = new MERCHI.File(); var fileData = this.state.commentAttachment; if (fileData && fileData[0]) { file.fromFormFile(fileData[0]); return file; } return null; }; DisplayDraft.prototype.setActiveDraft = function (index) { this.setState({ activeDraftIndex: index }, function () { window.initPdf(); }); }; DisplayDraft.prototype.fileChange = function (fileData) { this.setState({ commentAttachment: fileData }); }; DisplayDraft.prototype.textChange = function (text) { this.setState({ commentText: text }); }; DisplayDraft.prototype.openApproveDraft = function () { this.setState({ openApproveDraftContainer: !this.state.openApproveDraftContainer }, function () { window.initPdf(); }); }; DisplayDraft.prototype.postComment = function (changeRequest) { var _this = this; var comment = new MERCHI.DraftComment(); var job = this.props.job; var jobCopy = new MERCHI.Job(); var domainCopy = new MERCHI.Domain(); var user = new MERCHI.User(); var draftCopy = new MERCHI.Draft(); domainCopy.id(job.domain().id()); jobCopy.id(job.id()); jobCopy.domain(domainCopy); user.id(this.props.currentUser.id()); this.hideAlert(); if (!job.draftComments()) { job.draftComments([]); } if (job.activeDraft()) { draftCopy.id(job.activeDraft().id()); comment.draft(draftCopy); } comment.user(user); comment.sendEmail(true); comment.sendSms(false); comment.job(jobCopy); comment.changeRequest(changeRequest); comment.text(this.state.commentText); comment.file(this.addCommentAttachment()); comment.create({ success: function success(result) { var msg = comment.changeRequest() ? "Changes requested." : "Comment posted."; _this.setState({ submittingChanges: false, submittingComments: false, commentAttachment: null, commentText: "" }, function () { _this.props.setJob({ job: jobCopy, success: function success() { _this.showAlert("success", msg); }, error: function error() { _this.showAlert("error", "Failed to update job."); } }); }); }, error: function error(status, _error) { var message = _error.message ? _error.message : "Unable to post comment at this time."; _this.setState({ submittingChanges: false, submittingComments: false }, function () { _this.showAlert("error", message); }); }, embed: {} }); }; DisplayDraft.prototype.updateAddress = function (attributeKey, value) { var address = this.state.address; address[attributeKey](value); this.setState({ address: address }); }; DisplayDraft.prototype.updateDraftAttribute = function (attributeKey, value) { var _this = this; var job = this.props.job; var draft = new MERCHI.Draft(); var draftId = job.activeDraft().id(); var draftIndex = job.draftsEldestToYoungest().length + 1; var message = "Draft #" + draftIndex; draft.id(draftId); draft[attributeKey](value); this.hideAlert(); draft.patch({ success: function success(result) { message += " has been successfully approved."; job.activeDraft()[attributeKey](value); _this.setState({ approvingDraft: false, job: job }, function () { _this.showAlert("success", message); if (job.needsShipping() && !job.shippingIsValid()) { _this.setState({ openShippingAddress: true, approvingDraft: false }); } else { _this.setState({ approvingDraft: false }); } }); }, error: function error(status, _error2) { var errorMsg = _error2.message ? _error2.message : "Failed to approve draft #" + draftIndex + "."; _this.setState({ approvingDraft: false }, function (status, error) { _this.showAlert("error", errorMsg); _this.setState({ approvingDraft: false }); }); }, embed: {} }); }; DisplayDraft.prototype.updateJobShippingAddress = function () { var _this = this; var job = this.props.job; var newJob = new MERCHI.Job(); var newDomain = new MERCHI.Domain(); var address = this.state.address; newJob.id(job.id()); newDomain.id(job.domain().id()); newJob.domain(newDomain); this.hideAlert(); this.setState({ updatingShipping: true }, function () { if (address.isValid()) { newJob.shipping(address); newJob.patch(function (result) { _this.setState({ updatingShipping: false }, function () { _this.setState({ openShippingAddress: false, approvingDraft: false, openApproveDraftContainer: false }, function () { window.initPdf(); _this.showAlert("success", "Shipping address successfully updated."); }); }); }, function (status, error) { var errorMsg = error.message ? error.message : "Unable to update shipping address."; _this.setState({ updatingShipping: false }, function (status, error) { _this.showAlert("error", errorMsg); }); }, {}); } else { _this.setState({ updatingShipping: false }, function () { var msg = "Line one, postcode, city, country and "; msg += "state must all be provided."; _this.showAlert("warning", msg); }); } }); }; DisplayDraft.prototype.componentDidMount = function () { window.initPdf(); }; DisplayDraft.prototype.render = function () { var _this = this; var job = this.props.job; var domain = job.domain(); var drafts = job.draftsEldestToYoungest(); var draftsCount = drafts ? drafts.length : 0; var currentDraft = draftsCount > 0 ? drafts[draftsCount - 1] : null; var changesRequested = currentDraft && currentDraft.changesRequested(); var draftApproved = currentDraft && currentDraft.accepted(); var activeDraftIndex = this.state.activeDraftIndex; var activeDraft = drafts ? drafts[activeDraftIndex] : null; var spinningIcon = "icon_m_loader_icon icon_m icon_spin icon_mw m-r-5"; var loadingText = "Loading..."; if (currentDraft && !currentDraft.comments()) { currentDraft.comments([]); } var isActiveCurrentDraft = function isActiveCurrentDraft(draft) { var isCurrent = draft && currentDraft && currentDraft.id() === draft.id(); return isCurrent; }; var status = function status(draft, noDraft, review, rejected, approve, error) { var isCurrent = isActiveCurrentDraft(draft); var approved = draftApproved ? approve : "contact designer"; var needsReview = !changesRequested && !draftApproved ? review : approved; var isRejected = !isCurrent || changesRequested ? rejected : needsReview; return !currentDraft ? noDraft : isRejected; }; var draftIcon = function draftIcon(draft) { var theStatus = status(draft, "icon_m_paintbrush m-r-5", "icon_m_image m-r-5", "icon_m_request_changes m-r-5", "icon_m_approve_draft m-r-5", "icon_m_hazard m-r-5"); return theStatus; }; var jobShippingAddressContainer = React.createElement("div", { className: "clearfix", style: { padding: "0px 50px 0px 50px", height: "auto" } }, React.createElement("p", null, React.createElement("i", { className: "icon_m_3x icon_m_shipping" })), React.createElement("p", null, React.createElement("strong", null, "Please enter you shipping address.")), React.createElement("button", { className: "btn btn-primary", onClick: function onClick() { _this.updateJobShippingAddress(); } }, React.createElement("i", { className: this.updatingShipping ? spinningIcon : "icon_m_save m-r-5" }), this.updatingShipping ? loadingText : "Submit")); var draftApproveContainer = React.createElement("div", { className: "col-lg-12 text-center p-15" }, this.state.openShippingAddress ? jobShippingAddressContainer : React.createElement("div", { className: "clearfix", style: { padding: "80px 50px 20px 50px", height: "470px" } }, React.createElement("p", null, React.createElement("i", { className: "icon_m_3x icon_m_approve_draft" })), React.createElement("h3", { className: "p-t-40" }, "Approve draft #", draftsCount, "?"), React.createElement("p", null, React.createElement("strong", null, "Are you sure you would like to approve draft #", draftsCount, "?")), React.createElement("p", { className: "m-b-20" }, "Please make sure that the information on draft #", draftsCount, " is correct before you proceed."), React.createElement("p", { className: "m-b-20 f-s-16" }, React.createElement("strong", null, "By clicking approve, you warrant that you have all necessary permission, right and authority to use the supplied artwork & you authorise ", domain.domain(), " and it's parent company to produce the Products on your behalf.")), React.createElement("p", null, React.createElement("strong", null, "You also agree to the terms & conditions of using this site which can be", React.createElement("a", { href: "https://www.unitix.com.au/policy/", target: "_blank" }, " ", "viewed here."))), React.createElement("button", { className: "btn btn-default pull-left", onClick: function onClick() { _this.openApproveDraft(); } }, React.createElement("i", { className: "icon_m_close m-r-5" }), " No cancel"), React.createElement("button", { className: "btn btn-success pull-right", onClick: function onClick() { var now = _this.props.currentUser.userLocalTimeUnix(new Date()); _this.setState({ approvingDraft: true }, function () { _this.updateDraftAttribute("accepted", now); }); } }, React.createElement("i", { className: this.state.approvingDraft ? spinningIcon : "icon_m_approve_draft m-r-5" }), this.state.approvingDraft ? loadingText : " Yes approve"))); var draftContainer = function draftContainer(draft) { var isCurrent = isActiveCurrentDraft(draft); var iconClass = draftIcon(draft); var draftUrl = draft ? draft.file().viewUrl() : null; var draftCounter = activeDraftIndex + 1; var draftTitle = (isCurrent ? "Current draft #" : "Draft #") + draftCounter; var imageStyle = { maxWidth: "100%", maxHeight: "450px", verticalAlign: "middle", display: "inline-block" }; return React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12 clearfix" }, React.createElement("h3", { className: "pull-left" }, !draft ? "Before draft " : draftTitle), React.createElement("h4", { className: "text-right pull-right " + status(draft, "", "", "text-danger", "text-success", "text-warning"), style: { paddingTop: "5px" } }, status(draft, "No draft uploaded", "review", "rejected", "approved", "contact designer"), React.createElement("i", { className: iconClass + " m-l-5" }))), currentDraft && !_this.state.openApproveDraftContainer ? draftSelecter : null, !draft ? React.createElement("div", { className: "merchi_monster_image_not_found" }) : _this.state.openApproveDraftContainer ? draftApproveContainer : React.createElement("div", { className: "col-lg-12 text-center p-15", style: { cursor: "pointer", height: "auto" } }, React.createElement("div", { style: { height: "100%", display: "inline-block", verticalAlign: "middle" } }), draft.file().isPdf() ? React.createElement("div", { className: "pdf-container", "data-pdf-url": draftUrl, style: imageStyle }) : React.createElement("a", { href: "#0" }, React.createElement("img", { src: draftUrl, alt: "draft image", className: "m-auto m-0", style: imageStyle })))); }; var actionButtons = function actionButtons(draft) { var file = draft.file(); var draftCounter = activeDraftIndex + 1; var notCurrent = !isActiveCurrentDraft(draft); var draftUrl = file.viewUrl(); return React.createElement("div", { className: "row m-b-10" }, React.createElement("div", { className: "col-lg-12" }, React.createElement("div", { className: "btn-group pull-left" }, React.createElement("a", { href: draftUrl, className: "btn btn-default", target: "_blank" }, React.createElement("i", { className: "icon_m_visibility m-r-5" }), React.createElement("span", { className: "hidden-sm hidden-xs" }, "View"), file.isPdf() ? " .pdf" : ""), React.createElement("a", { href: file.downloadUrl(), className: "btn btn-default", download: "draft-" + draftCounter + ".jpg" }, React.createElement("i", { className: "icon_m_download m-r-5" }), React.createElement("span", { className: "hidden-sm hidden-xs" }, "Download"))), changesRequested || draftApproved || notCurrent || _this.state.openApproveDraftContainer ? null : React.createElement("button", { className: "btn btn-success pull-right", onClick: function onClick() { _this.openApproveDraft(); } }, React.createElement("i", { className: "icon_m_approve_draft m-r-5" }), "Approve"))); }; var draftSelecter = React.createElement("div", { className: "col-lg-12 clearfix" }, activeDraftIndex !== 0 ? React.createElement("button", { className: "btn btn-default btn-sm pull-left", onClick: function onClick() { _this.setActiveDraft(activeDraftIndex - 1); } }, React.createElement("i", { className: "icon_m_previous" }), " Previous") : null, activeDraftIndex !== draftsCount - 1 ? React.createElement("button", { className: "btn btn-default btn-sm pull-right", onClick: function onClick() { _this.setActiveDraft(draftsCount - 1); } }, "Current ", React.createElement("i", { className: "icon_m_next" })) : null); var commentsContainer = React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12 m-b-15" }, React.createElement("textarea", { className: "form-control m-b-10 pull-none", rows: 2, placeholder: "Enter your changes or comments here...", value: this.state.commentText, onChange: function onChange(e) { _this.textChange(e.target.value); } }), React.createElement("div", { className: "clearfix" }, React.createElement("span", { className: "btn btn-default btn-file" }, React.createElement("i", { className: "icon_m_paperclip m-r-5" }), React.createElement("span", { className: "hidden-sm hidden-xs" }, this.state.commentAttachment ? "Attached" : "Attach file"), React.createElement("span", { className: "btn-file-name" }), React.createElement("input", { type: "file", className: "form-control-file", onChange: function onChange(e) { _this.fileChange(e.target.files); } })), currentDraft && !changesRequested && !draftApproved ? React.createElement("button", { className: "btn btn-danger pull-right", onClick: function onClick() { _this.setState({ submittingChanges: true }, function () { _this.postComment(true); }); } }, React.createElement("i", { className: this.state.submittingChanges ? spinningIcon : "icon_m_request_changes m-r-5" }), this.state.submittingChanges ? loadingText : "Request Changes") : null, React.createElement("button", { className: "btn btn-default pull-right", onClick: function onClick() { _this.setState({ submittingComments: true }, function () { _this.postComment(false); }); } }, React.createElement("i", { className: this.state.submittingComments ? spinningIcon : "icon_m_send_comment m-r-5" }), this.state.submittingComments ? loadingText : " Submit Comment")))); return React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12" }, React.createElement("div", { className: "row", style: { minHeight: "500px" } }, React.createElement("div", { className: "col-lg-12" }, draftContainer(activeDraft))), currentDraft ? actionButtons(drafts[activeDraftIndex]) : null, commentsContainer)); }; return DisplayDraft; }(React.Component); var Alert = /** @class */function (_super) { __extends(Alert, _super); function Alert() { return _super !== null && _super.apply(this, arguments) || this; } Alert.prototype.render = function () { var setAlert = this.props.setAlert ? this.props.setAlert : function (newSettings) { return console.log(newSettings); }; var settings = this.props.settings ? this.props.settings : { alertType: "info", message: "", show: false, title: "Alert" }; var alertType = settings.alertType ? settings.alertType : "info"; return React.createElement(React.Fragment, null, settings.show && React.createElement("div", { className: "alert alert-".concat(alertType) }, React.createElement("strong", { className: "m-r-5" }, settings.title ? settings.title : "Alert!"), " ", settings.message ? settings.message : "Error encountered.", React.createElement("span", { className: "close", onClick: function onClick() { settings.show = false; setAlert(settings); } }, "\xD7"))); }; return Alert; }(React.Component); var ProductsGrid = /** @class */function (_super) { __extends(ProductsGrid, _super); function ProductsGrid(props) { var _this = _super.call(this, props) || this; _this.state = { categories: [], loadingCategoreis: false, loadingProducts: false, meta: null, parameters: { categoryId: MERCHI.getQueryStringValue("category_id"), limit: 9, offset: 0, order: "desc", sort: "id", q: "" }, products: [] }; return _this; } ProductsGrid.prototype.componentDidMount = function () { this.getCategories(); this.updateFromServer(); }; ProductsGrid.prototype.gotProducts = function (products) { this.setState({ loadingProducts: false, products: products, meta: products.meta }); }; ProductsGrid.prototype.productsError = function () { this.setState({ loadingProducts: false, products: [] }); }; ProductsGrid.prototype.gotCategories = function (categories) { this.setState({ categories: categories, loadingCategoreis: false }); }; ProductsGrid.prototype.categoreisError = function () { this.setState({ categories: [], loadingCategoreis: false }); }; ProductsGrid.prototype.getCategories = function () { var _this = this; this.setState({ loadingCategoreis: true }, function () { MERCHI.categories.get(_this.gotCategories.bind(_this), _this.categoreisError.bind(_this), { inDomain: _this.props.currentDomain.id(), limit: 25, offset: 0, q: "" }); }); }; ProductsGrid.prototype.updateFromServer = function () { var _this = this; var params = {}; Object.assign(params, this.state.parameters); Object.assign(params, { inDomain: this.props.currentDomain.id(), embed: { images: {}, domain: { company: {} } } }); this.setState({ loadingProducts: true }, function () { MERCHI.products.get(_this.gotProducts.bind(_this), _this.productsError.bind(_this), params); }); }; ProductsGrid.prototype.render = function () { var self = this; var loadingProducts = this.state.loadingProducts; var showCategories = this.props.showCategories; var productsDivClass = showCategories ? "col-md-9" : "col-md-12"; var classes = self.props.classes ? self.props.classes : {}; var productImage = function productImage(product) { var src = UTILITIES.URL_MAP.urlFor("static", { filename: "images/product-not-found.png" }); var alt = "No image"; if (product.primaryImage()) { src = product.primaryImage().viewUrl(); alt = product.primaryImage().name(); } return React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("domain_product_public", { id: product.domain().id(), product_id: product.id() }) }, React.createElement("img", { src: src, alt: alt, style: classes.productFeatureContainerImage ? classes.productFeatureContainerImage : { width: "auto", maxHeight: "250px", maxWidth: "100%" }, className: "product-img" })); }; var productHeading = function productHeading(product) { var href = UTILITIES.URL_MAP.publicUrlFor("domain_product_public", { id: product.domain().id(), product_id: product.id() }); var privateMessage = null; if (!product.showPublic()) { privateMessage = "Private Product"; } return React.createElement("h4", { "data-toggle": "tooltip", title: product.name() }, React.createElement("a", { href: href }, product.name()), React.createElement("small", null, privateMessage)); }; var showCurrency = function showCurrency(amount, currency) { var result = null; if (amount && currency) { result = UTILITIES.CURRENCY.formatCurrency(amount, { currency: currency }); } return result; }; var productPriceInformation = function productPriceInformation(product) { var defaultCurrency = product.domain().company().defaultCurrency() || "AUD"; var bestPrice = showCurrency(product.bestPrice(), defaultCurrency); var rangePart = null; var unitPrice = null; if (product.bestPrice() !== product.unitPrice()) { rangePart = React.createElement("span", { "data-toggle": "tooltip", title: "Prices range from per unit" }, "\u21C4"); unitPrice = showCurrency(product.unitPrice(), defaultCurrency); } return React.createElement("p", null, unitPrice, " ", rangePart, " ", bestPrice, " per unit"); }; var productMinimumInformation = function productMinimumInformation(product) { var content = null; if (product.minimum() > 1) { content = React.createElement("span", { "data-toggle": "tooltip", title: "Minimum order quantity" }, "MQQ ", product.minimum()); } return React.createElement("p", null, content); }; var productDescription = function productDescription(product) { var href = UTILITIES.URL_MAP.publicUrlFor("domain_product_public", { id: product.domain().id(), product_id: product.id() }); }; var productProcess = function productProcess(product) { var draftingIcon = null; var productionIcon = null; var shippingIcon = null; if (product.needsDrafting()) { draftingIcon = React.createElement("i", { className: "icon_m_design m-r-5", "data-toggle": "tooltip", title: "Requires drafting" }); } if (product.needsProduction()) { productionIcon = React.createElement("i", { className: "icon_m_manufacturing m-r-5", "data-toggle": "tooltip", title: "Requires production" }); } if (product.needsShipping()) { shippingIcon = React.createElement("i", { className: "icon_m_shipping m-r-5", "data-toggle": "tooltip", title: "Product is shipped out" }); } return React.createElement("div", null, React.createElement("p", null, draftingIcon, productionIcon, shippingIcon), React.createElement("p", null, React.createElement("span", { "data-toggle": "tooltip", title: "Standard product turnaround time" }, React.createElement("i", { className: "icon_m_turnaround_time" }), product.deliveryDaysNormal(), " days"))); }; var productLink = function productLink(product) { var href = UTILITIES.URL_MAP.publicUrlFor("domain_product_public", { id: product.domain().id(), product_id: product.id() }); return React.createElement("div", null, React.createElement("a", { href: href, className: "btn btn-primary" }, "More Info")); }; var productBox = function productBox(product) { var tempId = product.temporaryId; return React.createElement("div", { className: "col-md-4", key: tempId }, React.createElement("div", { style: classes.productFeatureContainer ? classes.productFeatureContainer : { padding: "20px 0", fontWeight: "400", maxWidth: "486px", textAlign: "center", margin: "auto" }, className: "product-feature-container" }, productImage(product), productHeading(product), productPriceInformation(product), productMinimumInformation(product), productDescription(product), productProcess(product), productLink(product))); }; var productsList = function productsList() { var rowLen = 3; var rows = []; var i; for (i = 0; i < self.state.products.length; i += rowLen) { var rowProducts = self.state.products.slice(i, i + rowLen); var rowChildren = rowProducts.map(productBox); rows.push(React.createElement("div", { className: "row", key: i }, rowChildren)); } return React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12" }, loadingProducts ? React.createElement("div", { className: "row height-md" }, React.createElement("div", { className: "col-lg-12" }, React.createElement("div", { className: "merchi_monster_loader" }))) : rows)); }; var onChangeLimit = function onChangeLimit(event) { var parameters = Object.assign({}, self.state.parameters); parameters.limit = event.target.value; parameters.offset = 0; self.setState({ parameters: parameters }, self.updateFromServer); event.preventDefault(); }; var onSearchInput = function onSearchInput(event) { var parameters = Object.assign({}, self.state.parameters); parameters.q = event.target.value; self.setState({ parameters: parameters }); event.preventDefault(); }; var onSetOffset = function onSetOffset(offset) { return function (event) { var parameters = Object.assign({}, self.state.parameters); parameters.offset = offset; self.setState({ parameters: parameters }, self.updateFromServer); event.preventDefault(); }; }; var onSubmit = function onSubmit(event) { self.updateFromServer(); event.preventDefault(); }; var onSelectCategory = function onSelectCategory(category) { return function (event) { var parameters = Object.assign({}, self.state.parameters); parameters.categoryId = category; self.setState({ parameters: parameters }, self.updateFromServer); event.preventDefault(); }; }; var searchBox = React.createElement("form", { onSubmit: onSubmit }, React.createElement("div", { className: "input-group" }, React.createElement("input", { type: "text", className: "form-control", onChange: onSearchInput, value: self.state.parameters.q, placeholder: "Search products" }))); function categoryItem(category, name) { return React.createElement("a", { onClick: onSelectCategory(category), key: category }, name); } function sortArrayById(array, desc) { return array ? array.sort(function (a, b) { if (a.id() && b.id()) { if (desc) { return b.id() - a.id(); } return a.id() - b.id(); } return 0; }) : []; } function categoryList() { var items = sortArrayById(self.state.categories, false).map(function (category) { return categoryItem(category.id(), category.name()); }); return React.createElement("div", { className: "product-category-list" }, React.createElement("h4", null, "Categories"), categoryItem(null, "All Products"), items); } var pageNumbers = function pageNumbers() { if (!self.state.meta) { return null; } var paginationStyle = { cursor: "pointer" }; var maxMiddlePages = 5; var middlePosition = Math.floor(maxMiddlePages / 2); var available = self.state.meta.available; var pageCount = Math.ceil(available / self.state.parameters.limit); var currentPage = Math.ceil(self.state.parameters.offset / self.state.parameters.limit) + 1; var disablePrevious = currentPage <= 1; var disableNext = currentPage >= pageCount; var minMiddlePage = Math.max(1, currentPage - middlePosition); var maxMiddlePage = Math.min(pageCount, currentPage + middlePosition); var middlePages = []; for (var i = minMiddlePage; i <= maxMiddlePage; ++i) { var offset = (i - 1) * self.state.parameters.limit; var className = i === currentPage ? "active" : ""; var pageNumber = React.createElement("li", { key: offset, className: className, style: paginationStyle }, React.createElement("a", { onClick: onSetOffset(offset) }, i)); middlePages.push(pageNumber); } var startLink = null; if (minMiddlePage > 1) { startLink = React.createElement("li", { key: "start" }, React.createElement("a", { onClick: onSetOffset(0), style: paginationStyle }, "1")); } var startEllipsis = null; if (minMiddlePage > 2) { startEllipsis = React.createElement("li", { key: "startellipsis" }, "..."); } var endLink = null; if (maxMiddlePage < pageCount) { endLink = React.createElement("li", { key: "endlink" }, React.createElement("a", { onClick: onSetOffset((pageCount - 1) * self.state.parameters.limit), style: paginationStyle }, pageCount)); } var endEllipsis = null; if (maxMiddlePage < pageCount - 2) { endEllipsis = React.createElement("li", { key: "endellipsis" }, React.createElement("a", null, React.createElement("span", null, "..."))); } var previousOffset = (currentPage - 2) * self.state.parameters.limit; var previousLink = null; if (!disablePrevious) { previousLink = React.createElement("li", { key: "previouslink" }, React.createElement("a", { onClick: onSetOffset(previousOffset), style: paginationStyle }, React.createElement("span", null, "Previous"))); } var nextClass = disableNext ? "disabled" : ""; var nextOffset = currentPage * self.state.parameters.limit; var nextLink = null; if (!disableNext) { nextLink = React.createElement("li", { key: "nextlink" }, React.createElement("a", { onClick: onSetOffset(nextOffset), style: paginationStyle }, React.createElement("span", null, "Next"))); } return React.createElement("nav", null, React.createElement("ul", { className: "pagination pull-right pagination-sm m-0" }, previousLink, startLink, startEllipsis, middlePages, endEllipsis, endLink, nextLink)); }; return React.createElement("div", { className: "row" }, showCategories && React.createElement("div", { className: "col-md-3" }, categoryList()), React.createElement("div", { className: productsDivClass }, React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12" }, pageNumbers())), productsList(), React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12" }, pageNumbers())))); }; return ProductsGrid; }(React.Component); var DraftingComments = /** @class */function (_super) { __extends(DraftingComments, _super); function DraftingComments(props) { var _this = _super.call(this, props) || this; _this.state = { showComments: true }; return _this; } DraftingComments.prototype.render = function () { var _this = this; var currentUser = this.props.currentUser; var job = this.props.job; var renderComments = function renderComments(draftIndex, comments) { return comments.map(function (comment, index) { return PRODUCT_UTILITY_REACT.comment({ comment: comment, index: index, currentUser: currentUser, draftIndex: draftIndex }); }); }; function draftsAndComments() { var drafts = job.draftsYoungestToEldest(); var draftsAndCommentsArray = []; var draftsCount = drafts.length; var i; for (i = 0; i < drafts.length; i++) { draftsAndCommentsArray.push([draftsCount, drafts[i]]); draftsCount--; } return draftsAndCommentsArray; } function allCommentsWithDrafts(commentArray) { var drafts = job.draftsYoungestToEldest(); var i; for (i = 0; i < drafts.length; i++) { var j = void 0; var comments = drafts[i].commentsYoungestToEldest(); for (j = 0; j < comments.length; j++) { commentArray.push(comments[j]); } } return commentArray; } function removeDuplicateComments(comments, objectByIdToRemove) { var i; for (i = 0; i < comments.length; i++) { if (comments[i].id() === objectByIdToRemove) { comments.splice(i, 1); break; } } return comments; } function commentsWithoutDrafts() { var commentsWithoutDraftsArray = []; var draftComments = allCommentsWithDrafts([]); var comments = job.draftCommentsYoungestToEldest(); var i; for (i = 0; i < draftComments.length; i++) { comments = removeDuplicateComments(comments, draftComments[i].id()); } return renderComments(null, comments); } function draftComments() { return draftsAndComments().map(function (draftAndIndex, index) { return renderComments(draftAndIndex[0], draftAndIndex[1].commentsYoungestToEldest()); }); } return React.createElement("div", { className: 'row m-b-15' }, React.createElement("div", { className: 'col-lg-12 clearfix', style: { fontSize: '16px' } }, React.createElement("hr", null), React.createElement("span", { className: 'pull-left' }, React.createElement("i", { className: 'icon_m_comments m-r-3' }), "Draft comments ", job.draftCommentsYoungestToEldest().length ? job.draftCommentsYoungestToEldest().length : null), React.createElement("button", { className: 'btn btn-default pull-right', onClick: function onClick() { _this.setState({ showComments: !_this.state.showComments }); } }, React.createElement("i", { className: this.state.showComments ? 'icon_m_up' : 'icon_m_down' }))), React.createElement("div", { className: 'col-lg-12 ' + (this.state.showComments ? '' : 'hide') }, React.createElement("ul", { className: 'chats' }, draftComments(), commentsWithoutDrafts()))); }; return DraftingComments; }(React.Component); var JobUploadFile = /** @class */function (_super) { __extends(JobUploadFile, _super); function JobUploadFile(props) { var _this = _super.call(this, props) || this; _this.state = { job: props.job, files: job.clientFiles() ? job.clientFiles() : [], uploading: false, alertType: "", alertMessage: "", showAlert: false }; _this.hideAlert = _this.hideAlert.bind(_this); return _this; } JobUploadFile.prototype.setShowAlert = function (typeString, message) { this.setState({ alertType: typeString, alertMessage: message, showAlert: true, uploading: false }, function () { window.scrollTo(0, 0); }); }; JobUploadFile.prototype.hideAlert = function (settings) { this.setState({ alertType: "", alertMessage: "", showAlert: settings.show }); }; JobUploadFile.prototype.updateJobFiles = function (files, deleteFile) { var _this = this; var job = this.state.job; var jobCopy = new MERCHI.Job(); var domainCopy = new MERCHI.Domain(); var successMsg = deleteFile ? "Filed successfuly removed." : "Successfully uploaded."; var errorMsg = deleteFile ? "Unable to remove file at this time." : "Unable to upload files at this time."; domainCopy.id(job.domain().id()); jobCopy.id(job.id()); jobCopy.clientFiles(files); jobCopy.domain(domainCopy); jobCopy.patch(function (result) { job.clientFiles(result.clientFiles()); _this.setState({ job: job, files: result.clientFiles() }, function () { _this.setShowAlert("success", successMsg); }); }, function (status, error) { var message = error.message ? error.message : errorMsg; _this.setState({ uploading: false }, function () { _this.setShowAlert("error", message); }); }, { clientFiles: {} }); }; JobUploadFile.prototype.render = function () { var self = this; var job = this.state.job; var files = this.state.files; var loadingIcon = "icon_m_loader_icon icon_m icon_spin icon_mw icon_m_3x "; function loadingTemplate(index) { return React.createElement("li", { key: index, className: "list-inline-item file-upload-preview-item file-preivew" }, React.createElement("i", { className: loadingIcon, style: { marginBottom: "25px", marginTop: "25px" } }), React.createElement("span", { className: "title" }, "Loading..."), React.createElement("span", { className: "not-uploaded-loading" }, "Please wait.")); } function filePreviewItem(file, index) { var imagePreviewTypes = ["image/jpeg", "image/jpg", "image/gif", "image/png"]; return React.createElement("li", { key: index, className: "list-inline-item file-upload-preview-item file-upload-loaded" }, imagePreviewTypes.indexOf(file.mimetype()) !== -1 ? React.createElement("img", { width: "100", height: "100", src: file.viewUrl() }) : React.createElement("span", { style: { paddingBottom: "20px", display: "block" } }, React.createElement("i", { className: !file.mimetype() ? loadingIcon : (file.mimetype() === "application/pdf" ? "icon_m_file_pdf " : "icon_m_file_photo ") + "icon_m_4x" })), React.createElement("span", { className: "title" }, file.mimetype() ? file.name() : "Loading..."), file.mimetype() ? React.createElement("div", { className: "btn-group btn-group-justified btn-container" }, React.createElement("a", { href: "#0", className: "btn btn-danger btn-xs file-delete-btn", onClick: function onClick(event) { files.splice(index, 1); self.updateJobFiles(files, true); } }, React.createElement("i", { className: "icon_m_close" })), React.createElement("a", { className: "btn btn-inverse btn-xs btn-download", href: file.downloadUrl(), download: true }, React.createElement("i", { className: "icon_m_download" }))) : React.createElement("span", { className: "not-uploaded-loading" }, "Please wait.")); } function updateFiles(file, clearOld) { files.push(file); if (clearOld) { MERCHI.removeUnstoredFiles(files, false); } self.setState({ uploading: true }, function () { self.updateJobFiles(files, false); }); } var FilePreviewList = React.createClass({ _handleClick: function _handleClick(e) { this.refs.fileField.click(); }, render: function render() { return React.createElement("ul", { className: "list-inline show-preview-container" }, React.createElement("li", { className: "list-inline-item file-upload-item", onClick: this._handleClick, style: { width: "105px", display: "inline-block", overflow: "hidden", padding: "40px 5px 20px 5px", textAlign: "center", height: "150px", margin: "5px", border: "1px solid", cursor: "pointer" } }, React.createElement("input", { accept: ".jpeg, .jpg, .gif, .pdf, .png, .ai", className: "hide", multiple: true, name: "job-client-file-upload", onChange: function onChange(e) { e.preventDefault(); }, type: "file", ref: "fileField" }), React.createElement("i", { className: "icon_m_upload icon_m_3x", style: { marginBottom: "25px" } }), React.createElement("div", { style: { width: "100px", marginTop: "20px" } }, self.state.uploading ? "Uploading..." : "Click to upload")), files ? files.sort(function (a, b) { var aId = a.id(); var bId = b.id(); if (!aId) { return -1; } if (aId && bId && aId > bId) { return 0; } return 1; }).map(function (file, index) { if (file.id()) { return filePreviewItem(file, index); } return loadingTemplate(index); }) : null); } }); return React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12" }, React.createElement(Alert, { showAlert: this.hideAlert, settings: { alertType: this.state.alertType, message: this.state.alertMessage, show: this.state.showAlert } }), React.createElement(FilePreviewList, null))); }; return JobUploadFile; }(React.Component); var JobOrderInfo = /** @class */function (_super) { __extends(JobOrderInfo, _super); function JobOrderInfo() { return _super !== null && _super.apply(this, arguments) || this; } JobOrderInfo.prototype.contructor = function (props) { _this = _super.call(this, props) || this; }; JobOrderInfo.prototype.render = function () { var job = this.props.job; var product = job.product(); return React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12" }, React.createElement("h3", { className: "product-title" }, product.name()), JOB_COMPONENTS.JobInfoForm({ job: job, product: product, disableEdit: true }), React.createElement("div", { className: "job-info-total-cost", style: { fontSize: "18px", fontWeight: "bold" } }, PRODUCT_UTILITY_REACT.TotalCost({ job: job, product: product })))); }; return JobOrderInfo; }(React.Component); var components = {"DomainHomeLink": DomainHomeLink,"PublicMenuItems": PublicMenuItems,"DisplayDraft": DisplayDraft,"Alert": Alert,"ProductsGrid": ProductsGrid,"DraftingComments": DraftingComments,"JobUploadFile": JobUploadFile,"JobOrderInfo": JobOrderInfo,}; function isLoading(loading) { return loading ? loading : false; } function setCopyWindowEntity(windowEntity, defaultValue) { return windowEntity ? MERCHI.copyEnt(windowEntity) : defaultValue; } function buildProps(env, variablesList) { var props = {}; for (var i = 0; i < variablesList.length; i++) { var variableName = variablesList[i]; if(env[variableName] !== undefined) { props[variableName] = env[variableName]; }; } return props; } function decodeHtmlEntities(str) { var txt = document.createElement("textarea"); txt.innerHTML = str; return txt.value; } function redraw() { 'use strict'; var mountpoints = document.getElementsByClassName( 'react-mount-component-here'); Array.from(mountpoints).forEach(function (mountpoint) { var componentName = mountpoint.getAttribute( 'merchi-component-name'), componentArgsRaw = decodeHtmlEntities( mountpoint.getAttribute('merchi-component-args')), componentArgs = JSON.parse(componentArgsRaw), entityArgsLooking = [ 'currentUser', 'currentDomain', 'user', 'invoice', 'product', 'domain', 'domainInvitationJson' ]; var props = buildProps(window, entityArgsLooking), component = components[componentName], elementProps = {...props, ...componentArgs}, element = React.createElement(component, elementProps); ReactDOM.render(element, mountpoint); }); } redraw(); });