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 (b.hasOwnProperty(p)) d[p] = b[p]; } }; return _extendStatics(d, b); }; return function (d, b) { _extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; }(); var __assign = void 0 && (void 0).__assign || function () { __assign = Object.assign || function (t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } } return t; }; return __assign.apply(this, arguments); }; var SellerProductQuantitySelect = /** @class */ function (_super) { __extends(SellerProductQuantitySelect, _super); function SellerProductQuantitySelect() { return _super !== null && _super.apply(this, arguments) || this; } SellerProductQuantitySelect.prototype.render = function () { var _onChange = this.props.onChange ? this.props.onChange : function (q) { return console.log(q); }; var quantities = this.props.quantities ? this.props.quantities : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var defaultQuantity = this.props.defaultQuantity ? this.props.defaultQuantity : quantities[0]; function selectOption(l, key) { return React.createElement("option", { value: l, key: key }, l); } var styles = this.props.styles ? this.props.styles : { select: { maxWidth: '100%' } }; return React.createElement("div", { className: 'form-group' }, React.createElement("label", null, "Quantity"), React.createElement("select", { className: 'form-control', value: defaultQuantity, onChange: function onChange(e) { return _onChange(e.target.value); }, style: styles.select }, quantities.map(function (q, index) { return React.createElement("option", { value: q, key: index }, q); }))); }; return SellerProductQuantitySelect; }(React.Component); function SellerInvoice(props) { var styles = props.styles ? props.styles : { iconStyle: { maxHeight: 40, margin: "5px" }, iconContainer: { margin: "1em auto 0", textAlign: "center", display: "block" }, parentContainer: { background: "#fff", marginTop: "-3px", height: "calc(100vh - 120px)" }, childContainer: { maxWidth: 400, position: "absolute", top: "50%", transform: "translateY(-50%)", width: "100%" } }; var domain = props.currentDomain; var windowInvoice = window.invoice; var _a = React.useState(windowInvoice), invoice = _a[0], setInvoice = _a[1]; var paid = !invoice.unpaid(); var acceptStripe = invoice.acceptStripe(); var pdf = invoice && invoice.pdf() ? invoice.pdf() : null; var receipt = invoice && invoice.receipt() ? invoice.receipt() : null; var file = receipt ? receipt : pdf; var company = invoice && invoice.domain() && invoice.domain().company() ? invoice.domain().company() : null; var StripeForm = UTILITIES.STRIPE.FormStripeDynamicWithStore; var successCallback = function successCallback(invoiceResponse) { window.location = UTILITIES.URL_MAP.publicUrlFor("invoice_paid_public", { id: domain.id(), invoice_id: invoice.id() }); }; function imageUrlFor(fileName) { return UTILITIES.URL_MAP.urlFor("static", { filename: "svg/" + fileName }); } var stripe = imageUrlFor("Stripe-card-dark.svg"); var mc = imageUrlFor("MasterCard-dark.svg"); var visa = imageUrlFor("Visa-card-dark.svg"); var ssl = imageUrlFor("ssl-secured.svg"); var ButtonSubmit = function ButtonSubmit(payload) { return React.createElement("button", { className: "btn btn-primary btn-lg btn-block" }, payload.loading ? React.createElement("span", null, "Loading...") : React.createElement("span", null, "Pay ", UTILITIES.CURRENCY.currencyMap[invoice.currency()], invoice.totalCost(), React.createElement("small", null, " / inc tax"))); }; return React.createElement("div", { style: styles.parentContainer, className: "container-fluid" }, React.createElement("div", { className: "row", style: { height: "100%", width: "100%" } }, React.createElement("div", { style: { height: "100%" }, className: "col-xs-12" }, React.createElement("div", { style: { margin: "auto", maxWidth: 400 } }, React.createElement("div", { style: styles.childContainer }, React.createElement("div", { className: "text-center", style: { marginBottom: "4em" } }, React.createElement("h2", { style: { marginTop: 0 } }, "Thank you!"), React.createElement("h5", { style: { marginTop: 0 } }, paid ? "Invoice #" + invoice.id() + " paid!" : "Your Invoice number is #" + invoice.id()), file ? React.createElement("a", { href: file.downloadUrl(), style: { marginTop: 5 }, className: "btn btn-default", download: true }, "View ", paid ? "receipt" : "invoice") : null), Boolean(!paid) && React.createElement(React.Fragment, null, acceptStripe ? React.createElement(React.Fragment, null, React.createElement("h3", { style: { marginTop: 0 } }, "Pay with card"), React.createElement("strong", { style: { display: "block", marginBottom: "0.4em" } }, "Card information"), React.createElement(StripeForm, { callbackStripePaymentSuccess: successCallback, invoice: MERCHI.toJson(invoice), hideLabels: true, PaymentButton: ButtonSubmit }), React.createElement("div", { style: styles.iconContainer }, React.createElement("img", { style: __assign(__assign({}, styles.iconStyle), { padding: 4, maxWidth: 67 }), src: ssl }), React.createElement("img", { style: { margin: "5px", maxHeight: "50px", width: "67px" }, src: stripe }), React.createElement("img", { style: styles.iconStyle, src: mc }), React.createElement("img", { style: styles.iconStyle, src: visa }))) : React.createElement("div", { style: { textAlign: "center" } }, company ? React.createElement("strong", { style: { display: "block", marginBottom: "0.4em" } }, "Please call ", company ? company.name() : "us", " on", " ", company.phoneNumbers()[0].internationalFormatNumber(), " ", "to arrange payment.") : React.createElement("strong", { style: { display: "block", marginBottom: "0.4em" } }, "Please call to arrange payment.")))))))); } function NavShoppingCart(props) { var Cart = UTILITIES.ShoppingCart; var currentDomain = props.currentDomain, _a = props.listContainerClass, listContainerClass = _a === void 0 ? "shopping-cart-target nav navbar-nav navbar-right" : _a; return React.createElement(Cart, { cartIconButtonClass: props.cartIconButtonClass, hideFacebookLogin: true, listContainerClass: listContainerClass, storeId: currentDomain.id() }); } function ErrorException(props) { var _a = props.cotainerClass, cotainerClass = _a === void 0 ? "error-container" : _a, _b = props.errorImageClass, errorImageClass = _b === void 0 ? "error-image-class" : _b, _c = props.showImage, showImage = _c === void 0 ? true : _c; return React.createElement("div", { className: cotainerClass }, showImage && React.createElement("img", { className: errorImageClass, src: UTILITIES.URL_MAP.urlFor("static", { filename: "images/product-not-found.png" }) }), React.createElement("p", null, window.EXCEPTION)); } var SelleverNav = /** @class */ function (_super) { __extends(SelleverNav, _super); function SelleverNav() { return _super !== null && _super.apply(this, arguments) || this; } SelleverNav.prototype.render = function () { var categories = this.props.categories; var currentDomain = this.props.currentDomain; var currentUser = this.props.currentUser; var hideCategories = this.props.hideCategories; var hideCart = this.props.hideCart; return React.createElement("nav", { className: "navbar-seller navbar navbar-default" }, React.createElement("div", { className: "container-fluid" }, React.createElement("div", { className: "navbar-header" }, React.createElement("button", { type: "button", className: "navbar-toggle collapsed", "data-toggle": "collapse", "data-target": "#bs-example-navbar-collapse-1", "aria-expanded": "false" }, React.createElement("span", { className: "sr-only" }, "Toggle navigation"), React.createElement("span", { className: "icon-bar" }), React.createElement("span", { className: "icon-bar" }), React.createElement("span", { className: "icon-bar" })), React.createElement(NavSellerBrandIcon, { urlString: "/", currentDomain: currentDomain })), React.createElement(NavSellerCollapse, { currentDomain: currentDomain, currentUser: currentUser, hideCart: hideCart })), !hideCategories && React.createElement(SellerCategoriesNav, { categories: categories, currentDomain: currentDomain })); }; return SelleverNav; }(React.Component); var SellerCategoriesNav = /** @class */ function (_super) { __extends(SellerCategoriesNav, _super); function SellerCategoriesNav(props) { var _this = _super.call(this, props) || this; _this.state = { categories: _this.props.categories ? _this.props.categories : [], loadingCategoreis: false, loadingProducts: false, meta: null, parameters: { categoryId: null, order: "desc", sort: "name", q: "" } }; return _this; } SellerCategoriesNav.prototype.componentDidMount = function () { if (this.state.categories.length === 0) { this.getCategories(); } }; SellerCategoriesNav.prototype.gotCategories = function (categories) { var categoriesIdAndName = categories.map(function (c) { var cateDict = { id: c.id(), name: c.name() }; return cateDict; }); this.setState({ categories: categoriesIdAndName, loadingCategoreis: false }); }; SellerCategoriesNav.prototype.categoreisError = function () { this.setState({ categories: [], loadingCategoreis: false }); }; SellerCategoriesNav.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: "" }); }); }; SellerCategoriesNav.prototype.render = function () { var currentDomain = this.props.currentDomain; var styles = this.props.styles ? this.props.styles : { categoryList: { padding: 0, textAlign: "center", listStyle: "none", maxWidth: 1000, margin: "0 auto", overflowX: "scroll", whiteSpace: "noWrap" }, categoryLinks: { cursor: "pointer", display: "inline-block", padding: 15 }, categoryContainer: { minHeight: 50 }, fadeContainer: { position: "relative", maxWidth: 1000, margin: "auto" }, leftFade: { height: 50, width: 50, position: "absolute", background: "linear-gradient(90deg, rgb(255, 255, 255) 10%, rgba(255, 255, 255, 0) 50%)" }, rightFade: { height: 50, width: 50, position: "absolute", background: "linear-gradient(270deg, rgb(255, 255, 255) 10%, rgba(255, 255, 255, 0) 50%)", right: 0 } }; var categories = this.state.categories ? this.state.categories : []; function CategoryItem(categoryProps) { var args = { id: currentDomain.id() }; if (categoryProps.id) { args["category_id"] = categoryProps.id; } return React.createElement("li", { className: "categoryLinks", style: styles.categoryLinks }, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("domain_products_public", args) }, categoryProps.name)); } return React.createElement("div", { className: "categoryContainer", style: styles.categoryContainer }, React.createElement("div", { className: "fadeContainer", style: styles.fadeContainer }, React.createElement("div", { className: "leftFade", style: styles.leftFade }), React.createElement("div", { className: "fadeRight", style: styles.rightFade }), React.createElement("ul", { classNAme: "categoryList", style: styles.categoryList }, React.createElement(CategoryItem, { id: null, name: "All products", key: "all-category-list" }), categories.length > 0 ? categories.map(function (c, index) { return React.createElement(CategoryItem, { id: c.id, name: c.name, key: String(index) + String(c.id) + "-category-list" }); }) : null))); }; return SellerCategoriesNav; }(React.Component); var MykonosGalleryModal = /** @class */ function (_super) { __extends(MykonosGalleryModal, _super); function MykonosGalleryModal() { var _this = _super.call(this) || this; _this.handleKeyDown = _this.handleKeyDown.bind(_this); return _this; } MykonosGalleryModal.prototype.componentDidMount = function () { window.document.body.addEventListener("keydown", this.handleKeyDown); }; MykonosGalleryModal.prototype.componentWillUnMount = function () { window.document.body.removeEventListener("keydown", this.handleKeyDown); }; MykonosGalleryModal.prototype.handleKeyDown = function (e) { if (e.keyCode === 27) this.props.closeModal(); if (e.keyCode === 37 && this.props.hasPrev) this.props.findPrev(); if (e.keyCode === 39 && this.props.hasNext) this.props.findNext(); }; MykonosGalleryModal.prototype.render = function () { var _a = this.props, closeModal = _a.closeModal, hasNext = _a.hasNext, hasPrev = _a.hasPrev, findNext = _a.findNext, findPrev = _a.findPrev, src = _a.src; if (!src) { console.log("error src missing"); return null; } return React.createElement("div", null, React.createElement("div", { className: "myk-modal-overlay" }, React.createElement("a", { href: "#", className: "myk-modal-close", onClick: closeModal, onKeyDown: this.handleKeyDown }, "\xD7"), hasPrev && React.createElement("a", { href: "#", className: "myk-modal-prev", onClick: findPrev, onKeyDown: this.handleKeyDown }, "\u2190"), hasNext && React.createElement("a", { href: "#", className: "myk-modal-next", onClick: findNext, onKeyDown: this.handleKeyDown }, "\u2192")), React.createElement("div", { isOpen: !!src, className: "myk-modal" }, React.createElement("div", { className: "myk-modal-body" }, React.createElement("img", { style: { background: "#fff" }, src: src })))); }; return MykonosGalleryModal; }(React.Component); var SellerProductImages = /** @class */ function (_super) { __extends(SellerProductImages, _super); function SellerProductImages(props) { var _this = _super.call(this, props) || this; var product = props.product; var featureImage = product.productPrimaryImage() ? product.productPrimaryImage() : UTILITIES.URL_MAP.urlFor("static", { filename: "images/product-not-found.png" }); _this.state = { featureImg: featureImage, loadIndex: 0, currentIndex: null }; _this.setFeature = _this.setFeature.bind(_this); _this.closeModal = _this.closeModal.bind(_this); _this.findNext = _this.findNext.bind(_this); _this.findPrev = _this.findPrev.bind(_this); _this.openModal = _this.openModal.bind(_this); return _this; } SellerProductImages.prototype.setFeature = function (imgSrc) { this.setState({ featureImg: imgSrc }); }; SellerProductImages.prototype.closeModal = function (e) { if (e != "undefined") { e.preventDefault(); } this.setState({ currentIndex: null }); }; SellerProductImages.prototype.openModal = function (e, index) { this.setState({ currentIndex: index }); }; SellerProductImages.prototype.findPrev = function (e) { if (e != "undefined") { e.preventDefault(); } this.setState(function (prevState) { return { currentIndex: prevState.currentIndex - 1 }; }); }; SellerProductImages.prototype.findNext = function (e) { if (e != "undefined") { e.preventDefault(); } this.setState(function (prevState) { return { currentIndex: prevState.currentIndex + 1 }; }); }; SellerProductImages.prototype.render = function () { var self = this; var currentIndex = self.state.currentIndex; var product = this.props.product; var featureImage = this.state.featureImg; var images = product.images() ? product.images() : []; var imageFile = images.length > 0 && !isNaN(currentIndex) ? images[currentIndex] : null; var styles = this.props.styles ? this.props.styles : { img: { margin: "10px auto", minHeight: 400, maxWidth: 400, width: "100%", background: "white no-repeat center / contain" }, thumbnails: { height: 90, width: 90, display: "inline-block", margin: "0px 5px", background: "white no-repeat center / contain" }, thumbnailContainer: { cursor: "pointer", position: "relative", maxWidth: 400, width: "100%", margin: "auto" }, leftFade: { height: 90, width: 50, position: "absolute", background: "linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%)" }, rightFade: { height: 90, width: 50, position: "absolute", background: "linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%)", right: 0 }, scrollContainer: { overflowX: "scroll", whiteSpace: "nowrap", height: 100 } }; function ProductThumb(props) { var img = props.img; var index = props.index; return React.createElement("div", { onClick: function onClick() { self.setFeature(img.viewUrl()); self.setState({ loadIndex: index }); }, style: __assign(__assign({}, styles.thumbnails), { backgroundImage: "url(" + img.viewUrl() + ")" }) }); } return React.createElement("div", null, React.createElement("div", { className: "image-preview-thumb", onClick: function onClick(e) { return self.openModal(e, self.state.loadIndex); }, style: __assign(__assign({}, styles.img), { backgroundImage: "url(" + featureImage + ")" }) }), React.createElement("div", { style: styles.thumbnailContainer }, React.createElement("div", { className: "product-scroll-fade-left", style: styles.leftFade }), React.createElement("div", { className: "product-scroll-fade-right", style: styles.rightFade }), React.createElement("div", { className: "product-thumbnails", style: styles.scrollContainer }, images.map(function (img, index) { return React.createElement(ProductThumb, { index: index, img: img, key: String(index) + "-img-thumb" }); }))), React.createElement(MykonosGalleryModal, { closeModal: self.closeModal, findPrev: self.findPrev, findNext: self.findNext, hasPrev: currentIndex > 0, hasNext: currentIndex + 1 < images.length, src: imageFile ? imageFile.viewUrl() : "" })); }; return SellerProductImages; }(React.Component); var MerchiLoader = /** @class */ function (_super) { __extends(MerchiLoader, _super); function MerchiLoader() { return _super !== null && _super.apply(this, arguments) || this; } MerchiLoader.prototype.render = function () { return React.createElement("div", { className: 'row height-md' }, React.createElement("div", { className: 'col-lg-12' }, React.createElement("div", { className: 'merchi_monster_loader' }))); }; return MerchiLoader; }(React.Component); function ProductSellerCard(props) { var product = props.product, showTax = props.showTax; var title = product.name(); var img = product.featureImage() ? product.featureImage().viewUrl() : UTILITIES.URL_MAP.urlFor("static", { filename: "images/product-not-found.png" }); var showCurrency = function showCurrency(amount, currency) { var result = null; if (amount && currency) { result = UTILITIES.CURRENCY.formatCurrency(amount, { currency: currency }); } return result; }; var productPrice = function productPrice(product) { var defaultCurrency = product.domain().company().defaultCurrency() || "AUD"; var bestPrice = showCurrency(product.bestPrice(), defaultCurrency); var priceWithTax = UTILITIES.CURRENCY.currencyTaxAndCost("", product.tax(), product.unitPrice()); 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", { className: "text-center" }, "Price :", " ", showTax ? priceWithTax : React.createElement(React.Fragment, null, unitPrice, " ", rangePart, " ", bestPrice)); }; var styles = props.styles ? props.styles : { card: { background: "#fff", borderRadius: 2, boxShadow: "0px 22px 15px rgba(0,0,0,0.05)", padding: "10px 20px" }, img: { padding: "10px 0", minHeight: 280, background: "white no-repeat center / contain" }, btn: { fontSize: 14 }, inStock: { height: 8, width: 8, background: "#28ac28", borderRadius: 10, display: "inline-block", marginRight: 5 }, noStock: { height: 8, width: 8, background: "#de2929", borderRadius: 10, display: "inline-block", marginRight: 5 }, description: { marginBottom: 5, maxHeight: 40, overflow: "hidden" } }; return React.createElement("div", { style: { margin: "15px 0", paddingLeft: 15, paddingRight: 15 }, className: "col-sm-4 col-md-4 " }, React.createElement("div", { className: "product-card", style: styles.card }, React.createElement("div", { style: { margin: "5px 0" } }, React.createElement("div", { style: styles.inStock }), React.createElement("span", null, React.createElement("small", null, "In stock"))), React.createElement("div", { className: "product-card-img", style: __assign(__assign({}, styles.img), { backgroundImage: "url(" + img + ")" }) }), React.createElement("div", { style: { margin: 10, height: 65 } }, React.createElement("p", { style: styles.description, className: "text-center product-card-description" }, React.createElement("strong", null, title)), productPrice(product)), React.createElement("div", { style: { padding: "10px 0px" }, className: "row" }, React.createElement("div", { style: { paddingRight: 5 }, className: "col-xs-12" }, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("domain_product_public", { id: product.domain().id(), product_id: product.id() }), style: styles.btn, className: "btn view_product-btn btn-block btn-primary" }, "View product"))))); } function NavSellerBrandIcon(props) { var currentDomain = props.currentDomain, _a = props.urlString, urlString = _a === void 0 ? "/" : _a; var logo = currentDomain.logo(); var mascot = UTILITIES.URL_MAP.urlFor("static", { filename: "images/merchi-monster-icon.png" }); return React.createElement("a", { style: { padding: "7px 15px" }, className: "navbar-brand", href: urlString }, React.createElement("img", { style: { maxHeight: "100%" }, alt: "Brand", src: currentDomain.logo() ? currentDomain.logo().viewUrl() : mascot })); } var SellerFooter = /** @class */ function (_super) { __extends(SellerFooter, _super); function SellerFooter() { return _super !== null && _super.apply(this, arguments) || this; } SellerFooter.prototype.render = function () { var copyWriteText = this.props.copyWriteText; var styles = this.props.styles ? this.props.styles : { merchiLogo: { height: 20, opacity: 0.9 } }; var domain = this.props.currentDomain; return React.createElement("div", { className: "container" }, React.createElement("div", { className: "row" }, React.createElement("div", { style: { padding: "100px 25px" }, className: "col-xs-12" }, React.createElement("div", { style: { padding: 10, display: "inline-block" } }, copyWriteText ? copyWriteText : domain.emailDomain(), " \xA9 Copyright ", new Date().getFullYear()), React.createElement("div", { style: { padding: 10 } }, React.createElement("img", { style: styles.merchiLogo, src: MERCHI.platformIcon }), React.createElement("span", { style: { marginLeft: "0.5em" } }, "Powered by ", React.createElement("a", { href: "https://merchi.co" }, "Merchi")))))); }; return SellerFooter; }(React.Component); function SellerInvoicePaid(props) { var styles = props.styles ? props.styles : { iconStyle: { maxHeight: 40, margin: "5px" }, iconContainer: { margin: "1em auto 0", maxWidth: 330, display: "block" }, parentContainer: { background: "#fff", marginTop: 90, height: "calc(100vh - 90px)" }, childContainer: { maxWidth: 400, position: "absolute", top: "50%", transform: "translateY(-50%)", width: "100%" } }; var domain = props.currentDomain; var invoice = window.invoice; var paid = !invoice.unpaid(); var receipt = invoice && invoice.receipt() ? invoice.receipt() : null; return React.createElement("div", { style: styles.parentContainer, className: "container-fluid" }, React.createElement("div", { className: "row", style: { height: "100%", width: "100%" } }, React.createElement("div", { style: { height: "100%" }, className: "col-xs-12" }, React.createElement("div", { style: { margin: "auto", maxWidth: 400 } }, React.createElement("div", { style: styles.childContainer }, React.createElement("div", { className: "text-center", style: { marginBottom: "4em" } }, React.createElement("h2", { style: { marginTop: 0 } }, "Thank you!"), React.createElement("h5", { style: { marginTop: 0 } }, paid ? "Invoice #" + invoice.id() + " Paid!" : "Invoice #" + invoice.id() + " Unpaid!"), receipt ? React.createElement("a", { href: receipt.downloadUrl(), style: { marginTop: 5 }, className: "btn btn-default", download: true }, "Download Receipt") : React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("client_invoice", { id: domain.id(), invoice_id: invoice.id() }), style: { marginTop: 5 }, className: "btn btn-default" }, " ", "Back to Invoice #", invoice.id()))))))); } function SellerProductFunction(props) { var _a = React.useState([]), categories = _a[0], setCategories = _a[1]; var product = props.product; var styles = props.styles ? props.styles : { ulAdjust: { paddingLeft: "1.4em" }, textContainer: { padding: "2em 0.5em" }, categorySpan: { padding: "0.4em 0.7em", background: "#f7f7f7", borderRadius: "0.5em", margin: "0 0.5em 0.5em 0", display: "inline-block" } }; function fetchCategories() { var newProduct = new MERCHI.Product(); newProduct.id(product.id()); newProduct.get(function (p) { return setCategories(p.categories()); }, function () { return setCategories([]); }, { categories: {} }); } var deliveryDays = product.deliveryDaysNormal() ? product.deliveryDaysNormal() : null; var Description = UTILITIES.PRODUCT.RichDescription; React.useEffect(function () { fetchCategories(); }, []); var SELLER_FILE_DOWNLOAD = 20; var showTurnaround = product.productType() !== SELLER_FILE_DOWNLOAD; return React.createElement(React.Fragment, null, categories.length > 0 ? React.createElement("div", { style: { padding: "2em 0.5em 0em" } }, categories.map(function (cat, i) { return React.createElement("span", { className: "category-pill", style: styles.categorySpan }, React.createElement("a", { href: "/products/?category_id=" + cat.id() }, cat.name())); })) : null, React.createElement("div", { style: __assign(__assign({}, styles.textContainer), { paddingTop: "1em", borderBottom: "1px solid #e7e7e7" }) }, React.createElement("h4", null, "Product description"), React.createElement("p", null, product.description() ? React.createElement(Description, { description: product.description() }) : "No product information.")), Boolean(deliveryDays && showTurnaround) && React.createElement("div", { style: styles.textContainer }, React.createElement("h4", null, "Information"), React.createElement("ul", { style: styles.ulAdjust }, React.createElement("li", null, "Average turnaround time for this product is approximately", " ", deliveryDays, " ", deliveryDays > 1 ? "days" : "day", ".")))); } var PageNumbers = /** @class */ function (_super) { __extends(PageNumbers, _super); function PageNumbers() { return _super !== null && _super.apply(this, arguments) || this; } PageNumbers.prototype.render = function () { var onSetOffset = this.props.onSetOffset ? this.props.onSetOffset : function (OS) { return console.log(OS); }; var parameters = this.props.parameters ? this.props.parameters : {}; var meta = this.props.meta ? this.props.meta : {}; var classes = this.props.classes ? this.props.classes : {}; var maxMiddlePages = 5; var middlePosition = Math.floor(maxMiddlePages / 2); var available = meta.available ? meta.available : 0; var paramOffset = parameters.offset ? parameters.offset : 0; var paramLimit = parameters.limit ? parameters.limit : 0; var pageCount = Math.ceil(available / paramLimit); var currentPage = Math.ceil(paramOffset / paramLimit) + 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 = []; var pointer = { cursor: "pointer" }; for (var i = minMiddlePage; i <= maxMiddlePage; ++i) { var offset = (i - 1) * parameters.limit; var className = i === currentPage ? "active" : ""; var pageNumber = React.createElement("li", { key: offset, className: className, style: pointer }, React.createElement("a", { onClick: onSetOffset(offset) }, i)); middlePages.push(pageNumber); } var startLink = null; if (minMiddlePage > 1) { startLink = React.createElement("li", { key: "start", style: pointer }, React.createElement("a", { onClick: onSetOffset(0) }, "1")); } var startEllipsis = null; if (minMiddlePage > 2) { startEllipsis = React.createElement("li", { key: "startellipsis" }, React.createElement("a", null, React.createElement("span", null, "..."))); } var endLink = null; if (maxMiddlePage < pageCount) { endLink = React.createElement("li", { key: "endlink", style: pointer }, React.createElement("a", { onClick: onSetOffset((pageCount - 1) * paramLimit) }, pageCount)); } var endEllipsis = null; if (maxMiddlePage < pageCount - 2) { endEllipsis = React.createElement("li", { key: "endellipsis" }, React.createElement("a", null, React.createElement("span", null, "..."))); } var previousClass = disablePrevious ? "disabled" : ""; var previousOffset = (currentPage - 2) * paramLimit; var previousLink = disablePrevious ? React.createElement("li", { key: "previouslink", className: previousClass, style: pointer }, React.createElement("a", { disabled: "true" }, React.createElement("span", null, "<"))) : React.createElement("li", { key: "previouslink", className: previousClass, style: pointer }, React.createElement("a", { onClick: onSetOffset(previousOffset) }, React.createElement("span", null, "<"))); var nextClass = disableNext ? "disabled" : ""; var nextOffset = currentPage * paramLimit; var nextLink = disableNext ? React.createElement("li", { key: "nextlink", className: nextClass, style: pointer }, React.createElement("a", { disabled: "true" }, React.createElement("span", null, ">"))) : React.createElement("li", { key: "nextlink", className: nextClass, style: pointer }, React.createElement("a", { onClick: onSetOffset(nextOffset) }, React.createElement("span", null, "> "))); return React.createElement("ul", { className: classes.container ? classes.container : "pagination pagination-sm" }, meta ? React.createElement(React.Fragment, null, previousLink, startLink, startEllipsis, middlePages, endEllipsis, endLink, nextLink) : null); }; return PageNumbers; }(React.Component); var SellerProductsGrid = /** @class */ function (_super) { __extends(SellerProductsGrid, _super); function SellerProductsGrid(props) { var _this = _super.call(this, props) || this; _this.state = { loadingProducts: false, meta: null, parameters: { categoryId: MERCHI.getQueryStringValue("category_id"), limit: props.limit ? props.limit : 9, offset: 0, order: "desc", publicOnly: true, sort: "id", q: "" }, searchString: "", products: [] }; return _this; } SellerProductsGrid.prototype.componentDidMount = function () { this.updateFromServer(); }; SellerProductsGrid.prototype.gotProducts = function (products) { this.setState({ loadingProducts: false, products: products, meta: products.meta }); }; SellerProductsGrid.prototype.productsError = function () { this.setState({ loadingProducts: false, products: [] }); }; SellerProductsGrid.prototype.updateFromServer = function () { var _this = this; var params = {}; Object.assign(params, this.state.parameters); Object.assign(params, { inDomain: this.props.currentDomain.id(), embed: { featureImage: {}, images: {}, domain: { company: { defaultTaxType: {} } }, taxType: {} } }); this.setState({ loadingProducts: true }, function () { MERCHI.products.get(_this.gotProducts.bind(_this), _this.productsError.bind(_this), params); }); }; SellerProductsGrid.prototype.render = function () { var _a = this.props, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.hidePagination, hidePagination = _c === void 0 ? false : _c, _d = _a.showProductTax, showProductTax = _d === void 0 ? true : _d; var _e = this.state, loadingProducts = _e.loadingProducts, meta = _e.meta, parameters = _e.parameters, products = _e.products; var self = this; 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 renderProducts = products.map(function (product, index) { return React.createElement(ProductSellerCard, { product: product, key: "product-item-" + index + "-" + product.id(), showTax: showProductTax }); }); return React.createElement("div", { className: "row" }, loadingProducts ? React.createElement("div", { className: "col-xs-12" }, React.createElement(MerchiLoader, null)) : React.createElement("div", { className: "col-xs-12" }, renderProducts), products.length <= 0 ? React.createElement("div", null, "\"No products found\"") : "", !hidePagination && React.createElement("div", { className: "col-xs-12", style: { marginBottom: "1em" } }, React.createElement(PageNumbers, { meta: meta, onSetOffset: onSetOffset, parameters: parameters }))); }; return SellerProductsGrid; }(React.Component); function ErrorExceptionSellerTheme(props) { var _a = props.cotainerClass, cotainerClass = _a === void 0 ? "error-container" : _a, _b = props.errorImageClass, errorImageClass = _b === void 0 ? "error-image-class" : _b, _c = props.showImage, showImage = _c === void 0 ? true : _c; console.log(" hi james "); return React.createElement("div", { style: { height: "calc(100vh - 125px)", position: "relative" } }, React.createElement("div", { style: { top: "50%", transform: "translateY(-50%)", position: "absolute", width: "100%" } }, React.createElement("div", { className: cotainerClass }, showImage && React.createElement("img", { className: errorImageClass, style: { maxWidth: 200 }, src: UTILITIES.URL_MAP.urlFor("static", { filename: "images/product-not-found.png" }) }), React.createElement("h3", { style: { marginTop: 0 } }, "Whoops! That's an error."), React.createElement("div", { style: { fontSize: "1.5em", marginBottom: 10 } }, "\uD83D\uDE13"), React.createElement("p", { style: { fontSize: 14, fontWeight: 400 } }, window.EXCEPTION)))); } var PhoneNumberInputs = /** @class */ function (_super) { __extends(PhoneNumberInputs, _super); function PhoneNumberInputs() { return _super !== null && _super.apply(this, arguments) || this; } PhoneNumberInputs.prototype.render = function () { var supportedNumbers = { 'AU': 'Australia (+61)', 'AE': 'United Arab Emirates (+971)', 'BH': 'Bahrain (+973)', 'CN': 'China (+86)', 'DK': 'Denmark (+45)', 'ES': 'Spain (+34)', 'FR': 'France (+33)', 'GB': 'United Kingdom (+44)', 'HK': 'Hong Kong (+852)', 'ID': 'Indonesia (+62)', 'IN': 'India (+91)', 'IT': 'Italy (+39)', 'KR': 'South Korea (+82)', 'NC': 'New Caledonia (+687)', 'NZ': 'New Zealand (+64)', 'OM': 'Oman (+968)', 'PH': 'Philippines (+63)', 'PT': 'Portugal (+351)', 'QA': 'Qatar (+974)', 'SE': 'Sweden (+46)', 'SG': 'Singapore (+65)', 'TH': 'Thailand (+66)', 'US': 'United States (+1)', 'ZA': 'South Africa (+27)' }; var code = this.props.code ? this.props.code : 'AU'; var number = this.props.number ? this.props.number : ''; var changeCode = this.props.changeCode ? this.props.changeCode : function (e) { return console.log(e.target.value); }; var changeNumber = this.props.changeNumber ? this.props.changeNumber : function (e) { return console.log(e.target.value); }; return React.createElement("div", { className: 'row' }, React.createElement("div", { className: 'col-md-6' }, React.createElement("div", { className: 'form-group' }, React.createElement("select", { className: 'form-control', defaultValue: code }, Object.keys(supportedNumbers).map(function (key, index) { return React.createElement("option", { value: key }, supportedNumbers[key]); })))), React.createElement("div", { className: 'col-md-6' }, React.createElement("div", { className: 'form-group' }, React.createElement("input", { className: 'form-control', defaultValue: number, onChange: function onChange(e) { return changeNumber(e.target.value); }, placeholder: '0400 000 000' })))); }; return PhoneNumberInputs; }(React.Component); function SellerProduct(props) { var currentDomain = props.currentDomain, product = props.product; var styles = { morePadding: { padding: "0 15px" } }; return React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-sm-6 col-lg-4", style: styles.morePadding }, React.createElement(SellerProductImages, { product: product })), React.createElement("div", { className: "col-sm-6 col-lg-4", style: styles.morePadding }, React.createElement(SellerProductFunction, { product: product })), React.createElement("div", { className: "col-sm-6 col-lg-4", style: styles.morePadding }, React.createElement(SellerProductForm, { currentDomain: currentDomain, product: product }))); } var SellerResetPasswordRequest = /** @class */ function (_super) { __extends(SellerResetPasswordRequest, _super); function SellerResetPasswordRequest(props) { var _this = _super.call(this, props) || this; _this.state = { alert: { alertType: "info", message: "", show: false, title: "Alert" }, email: null, errorMessage: null, loading: false }; _this.onEmailChange = _this.onEmailChange.bind(_this); _this.handleError = _this.handleError.bind(_this); _this.requestPasswordChange = _this.requestPasswordChange.bind(_this); _this.setAlert = _this.setAlert.bind(_this); return _this; } SellerResetPasswordRequest.prototype.onEmailChange = function (e) { this.setState({ email: e.target.value }); }; SellerResetPasswordRequest.prototype.handleError = function (status, data) { var msg = data.message ? data.message : "Unable to login."; this.setState({ loading: false }); this.setAlert({ alertType: "error", message: msg, show: true, title: "Error!" }); }; SellerResetPasswordRequest.prototype.requestPasswordChange = function () { var _this = this; var request = new MERCHI.Request(); var query = new MERCHI.Dictionary(); request.resource("/password/reset/"); request.method("GET"); query.add("email", this.state.email); request.query().merge(query); var handleResponse = function handleResponse(response) { var msg = "An email has been sent to the provided email address " + "if it exists in our database."; _this.setState({ loading: false }); _this.setAlert({ alertType: "success", message: msg, show: true, title: "Success!" }); _this.props.onSuccess(); }; request.responseHandler(handleResponse).errorHandler(this.handleError); this.setState({ loading: true }, function () { request.send(); }); }; SellerResetPasswordRequest.prototype.setAlert = function (alertSettings) { this.setState({ alert: alertSettings }); }; SellerResetPasswordRequest.prototype.render = function () { var styles = this.props.styles ? this.props.styles : { containerDiv: { maxWidth: 400, margin: "0 auto", height: "calc(100vh - 130px)", position: "relative" }, cardContainer: { position: "absolute", top: "50%", transform: "translateY(-50%)", width: "100%" }, card: { background: "#fff", borderRadius: 2, boxShadow: "0px 22px 15px rgba(0,0,0,0.05)", padding: "10px 30px" }, btn: { fontSize: 14 }, inStock: { height: 8, width: 8, background: "#28ac28", borderRadius: 10, display: "inline-block", marginRight: 5 }, noStock: { height: 8, width: 8, background: "#de2929", borderRadius: 10, display: "inline-block", marginRight: 5 }, description: { marginBottom: 5, maxHeight: 40, overflow: "hidden" }, rememberDiv: { margin: "1.5em 0.1em 1.4em", position: "relative" }, rememberText: { margin: 3, position: "absolute", left: 15, fontSize: 12 } }; var loading = this.state.loading; var email = this.state.email; var domain = this.props.currentDomain; return React.createElement("div", { style: { padding: 20, marginTop: 90 }, className: "container" }, React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-lg-12" }, React.createElement(Alert, { settings: this.state.alert, setAlert: this.setAlert })), React.createElement("div", { style: styles.containerDiv }, React.createElement("div", { style: styles.cardContainer }, React.createElement("div", { style: styles.card }, React.createElement("div", { style: { padding: "10px 0px" }, className: "row" }, React.createElement("div", { className: "col-xs-12" }, React.createElement("h4", { style: { marginBottom: 24 } }, "Password reset"), React.createElement("div", { style: { marginBottom: "1em" }, className: "input-group" }, React.createElement("span", { className: "input-group-addon", style: { padding: "6px 12px" } }, React.createElement("i", { className: "far fa-envelope" })), React.createElement("input", { onChange: this.onEmailChange, defaultValue: email, type: "text", className: "form-control", placeholder: "Email", "aria-describedby": "basic-addon1" })), React.createElement("button", { style: __assign({}, styles.btn), className: "btn btn-lg btn-block btn-primary", onClick: this.requestPasswordChange }, loading ? "Loading..." : "Reset"))), React.createElement("div", { style: { margin: "0.5em 0 0.5em", fontSize: 12 }, className: "text-center" }, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("public_login", { id: domain.id() }) }, "Back to login"))))))); }; return SellerResetPasswordRequest; }(React.Component); function JumbotraonSellerBootstrap3(props) { var _a = props.btnName, btnName = _a === void 0 ? "View All Merch" : _a, _b = props.description, description = _b === void 0 ? "Browse our carefully curated, ethical and sustainable merch store." : _b, _c = props.descriptionSecond, descriptionSecond = _c === void 0 ? "" : _c, _d = props.title, title = _d === void 0 ? "Welcome!" : _d; var domain = window.currentDomain; return React.createElement("div", { className: "jumbotron", style: { overflow: "hidden", position: "relative" } }, React.createElement("div", { style: { position: "relative" } }, React.createElement("div", null, React.createElement("h1", null, title), React.createElement("p", null, description, React.createElement("br", null), descriptionSecond ? React.createElement(React.Fragment, null, descriptionSecond) : React.createElement(React.Fragment, null, "Proudly powered by ", React.createElement("a", { href: "http://merchi.co" }, "Merchi"))), React.createElement("p", null, React.createElement("a", { className: "btn btn-primary btn-lg", href: "/products", role: "button" }, btnName))))); } var UserProfile = /** @class */ function (_super) { __extends(UserProfile, _super); function UserProfile(props) { var _this = _super.call(this, props) || this; var currentUser = _this.props.currentUser; var emailAddress = currentUser.emailAddresses() ? currentUser.emailAddresses()[0].emailAddress() : ""; var phoneNumber = currentUser.phoneNumbers() ? currentUser.phoneNumbers()[0] : new MERCHI.PhoneNumber(); _this.state = { alertSettings: { alertType: "info", message: "", show: false, title: "Alert" }, code: phoneNumber.code() ? phoneNumber.code() : "", emailAddress: emailAddress, loading: false, loadingLogo: false, loadingProfile: true, name: currentUser.name(), number: phoneNumber.number() ? phoneNumber.number() : "", profilePicture: currentUser.profilePictureUrl() }; _this.changeAttr = _this.changeAttr.bind(_this); _this.fetchUser = _this.fetchUser.bind(_this); _this.onChangeProfilePicture = _this.onChangeProfilePicture.bind(_this); _this.setAlert = _this.setAlert.bind(_this); _this.setUser = _this.setUser.bind(_this); _this.saveUserInfo = _this.saveUserInfo.bind(_this); _this.showError = _this.showError.bind(_this); _this.showSuccess = _this.showSuccess.bind(_this); _this.updateAddress = _this.updateAddress.bind(_this); return _this; } UserProfile.prototype.componentDidMount = function () { this.fetchUser(); }; UserProfile.prototype.setAlert = function (settings) { this.setState({ alertSettings: settings, loading: false, loadingLogo: false, loadingProfile: false }); }; UserProfile.prototype.showError = function (e) { var settings = {}; settings.show = true; settings.title = "Error!"; settings.message = e && e.message ? e.message : "An unknown error occurred"; settings.alertType = "danger"; this.setAlert(settings); }; UserProfile.prototype.showSuccess = function (message) { var settings = {}; settings.show = true; settings.title = "Success!"; settings.message = message; settings.alertType = "success"; this.setAlert(settings); }; UserProfile.prototype.setUser = function (user) { var address = user.addresses() && user.addresses() ? user.addresses()[0] : new MERCHI.Address(); var emailAddress = user.emailAddresses() ? user.emailAddresses()[0].emailAddress() : ""; var phoneNumber = user.phoneNumbers() ? user.phoneNumbers()[0] : new MERCHI.PhoneNumber(); console.log(address); this.setState({ address: address, emailAddress: emailAddress, name: user.name(), code: phoneNumber.code() ? phoneNumber.code() : "", number: phoneNumber.number() ? phoneNumber.number() : "", profilePicture: user.profilePictureUrl(), loading: false, loadingProfile: false }); }; UserProfile.prototype.fetchUser = function () { var user = this.props.currentUser; user.get(this.setUser, this.showError, { addresses: {}, emailAddresses: {}, profilePicture: {}, phoneNumbers: {} }); }; UserProfile.prototype.saveUserInfo = function () { var _this = this; var user = this.props.currentUser; var phoneNumber = user.phoneNumbers()[0]; var emailAddress = user.emailAddresses()[0]; phoneNumber.code(this.state.code); phoneNumber.number(this.state.number); emailAddress.emailAddress(this.state.emailAddress); user.phoneNumbers()[0] = phoneNumber; user.emailAddresses()[0] = emailAddress; user.name(this.state.name); this.setState({ loading: true }); user.patch(function () { return _this.showSuccess("Profile information updated."); }, this.showError, {}); }; UserProfile.prototype.changeAttr = function (attr, value) { var state = this.state; state[attr] = value; this.setState(state); }; UserProfile.prototype.updateAddress = function (address) { this.setState({ address: address }); }; UserProfile.prototype.onChangeProfilePicture = function (data) { var _this = this; var user = new MERCHI.User().id(this.props.currentUser.id()); var file = new MERCHI.File(); if (data && data[0]) { file.fromFormFile(data[0]); } this.setState({ loadingLogo: true }); file.create(function (res) { user.profilePicture(res); user.patch(function (responseUser) { _this.setState({ loadingLogo: false, profilePicture: responseUser.profilePictureUrl() }); _this.showSuccess("Profile picture updated."); }, _this.showError, { profilePicture: {} }); }, this.showError); }; UserProfile.prototype.render = function () { var _this = this; var currentUser = this.props.currentUser; var profilePicture = this.state.profilePicture; var loading = this.state.loading; var loadingLogo = this.state.loadingLogo; var styles = this.props.styles ? this.props.styles : {}; var loadingGif = UTILITIES.URL_MAP.urlFor("static", { filename: "images/merchi-monster-loader.gif" }); var avatarStyle = styles.avatarStyle ? styles.avatarStyle : { borderRadius: 75, height: 75, margin: "10px auto", width: 75 }; var avatarLoadingStyle = styles.avatarLoadingStyle ? styles.avatarLoadingStyle : { borderRadius: 75, height: 75, margin: "10px auto", width: 75 }; var profileContainer = styles.profileContainer ? styles.profileContainer : { display: "block", margin: "0 auto", maxWidth: 400 }; avatarStyle["background"] = "url('" + profilePicture + "') center/cover no-repeat"; avatarLoadingStyle["background"] = "url('" + loadingGif + "') center/cover no-repeat"; var Address = UTILITIES.AddressForm; return React.createElement("div", { style: profileContainer }, React.createElement(Alert, { setAlert: this.setAlert, settings: this.state.alertSettings }), this.state.loadingProfile ? React.createElement(MerchiLoader, null) : React.createElement(React.Fragment, null, React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-md-12" }, loadingLogo ? React.createElement("div", { "class": "rounded-circle", style: avatarLoadingStyle }) : React.createElement("div", { style: avatarStyle, className: "rounded-circle" }, React.createElement("input", { type: "file", onChange: function onChange(e) { return _this.onChangeProfilePicture(e.target.files); }, style: { height: "100%", width: "100%", opacity: 0, cursor: "pointer" }, accept: "image/gif, image/jpeg, image/bmp, image/png, image/tiff, .gif, .jpg, .jpeg, .bmp, .png, .tiff" }))), React.createElement("div", { className: "col-md-12" }, React.createElement("div", { className: "form-group" }, React.createElement("label", null, "Full name"), React.createElement("input", { className: "form-control", defaultValue: this.state.name, onChange: function onChange(e) { return _this.changeAttr("name", e.target.value); }, placeholder: "Your name" }))), React.createElement("div", { className: "col-md-12" }, React.createElement("div", { className: "form-group" }, React.createElement("label", null, "Email address"), React.createElement("input", { className: "form-control", defaultValue: this.state.emailAddress, onChange: function onChange(e) { return _this.changeAttr("emailAddress", e.target.value); }, placeholder: "Email address" }))), React.createElement("div", { className: "col-md-12" }, React.createElement("label", null, "Phone number"), React.createElement(PhoneNumberInputs, { code: this.state.code, changeCode: function changeCode(value) { return _this.changeAttr("code", value); }, changeNumber: function changeNumber(value) { return _this.changeAttr("number", value); }, number: this.state.number })), React.createElement("div", { className: "col-md-12 m-t-30" }, React.createElement(Address, { address: this.state.address, updateAddress: this.updateAddress })), React.createElement("div", { className: "col-md-12" }, React.createElement("div", { className: "form-group" }, React.createElement("button", { className: "btn btn-primary btn-block", onClick: this.saveUserInfo }, loading ? "Loading..." : "Update")))))); }; return UserProfile; }(React.Component); var SellerLogin = /** @class */ function (_super) { __extends(SellerLogin, _super); function SellerLogin(props) { var _this = _super.call(this, props) || this; _this.state = { email: null, errorMessage: null, loading: false, password: null, rememberMe: true }; _this.onEmailChange = _this.onEmailChange.bind(_this); _this.onPasswordChange = _this.onPasswordChange.bind(_this); _this.setRememberMe = _this.setRememberMe.bind(_this); _this.handleError = _this.handleError.bind(_this); _this.loginGo = _this.loginGo.bind(_this); return _this; } SellerLogin.prototype.onEmailChange = function (e) { this.setState({ email: e.target.value }); }; SellerLogin.prototype.onPasswordChange = function (e) { this.setState({ password: e.target.value }); }; SellerLogin.prototype.setRememberMe = function () { this.setState({ rememberMe: !this.state.rememberMe }); }; SellerLogin.prototype.handleError = function (status, data) { var msg = data.message ? data.message : "Unable to login."; this.setState({ errorMessage: msg, loading: false }); }; SellerLogin.prototype.loginGo = function () { var _this = this; var publicDomainId = window.publicDomainId; var newSession = new MERCHI.Session(); var target = MERCHI.getQueryStringValue("target"); function targetIsSafe(_target) { return _target.indexOf("https://merchi.co") === 0; } var handleResponse = function handleResponse(session) { MERCHI.setSessionCookie("session_token", session.token(), "merchi.co"); if (target && targetIsSafe(target)) { window.location = target; } else { window.location = UTILITIES.URL_MAP.publicUrlFor("domain_products_public", { id: publicDomainId }); } }; this.setState({ loading: true }, function () { newSession.storeCreate(handleResponse, _this.handleError, { email: _this.state.email, password: _this.state.password, remember: _this.state.rememberMe, storeName: MERCHI.platformName.toLowerCase() }); }); }; SellerLogin.prototype.render = function () { var styles = this.props.styles ? this.props.styles : { containerDiv: { maxWidth: 400, margin: "0 auto", height: "calc(100vh - 130px)", position: "relative" }, cardContainer: { position: "absolute", top: "50%", transform: "translateY(-50%)", width: "100%" }, card: { background: "#fff", borderRadius: 2, boxShadow: "0px 22px 15px rgba(0,0,0,0.05)", padding: "10px 30px" }, btn: { fontSize: 14 }, inStock: { height: 8, width: 8, background: "#28ac28", borderRadius: 10, display: "inline-block", marginRight: 5 }, noStock: { height: 8, width: 8, background: "#de2929", borderRadius: 10, display: "inline-block", marginRight: 5 }, description: { marginBottom: 5, maxHeight: 40, overflow: "hidden" }, rememberDiv: { margin: "1.5em 0.1em 1.4em", position: "relative" }, rememberText: { margin: 3, position: "absolute", left: 15, fontSize: 12 } }; var _a = this.state, email = _a.email, loading = _a.loading, password = _a.password, rememberMe = _a.rememberMe; var domain = this.props.currentDomain; var FacebookClientForm = UTILITIES.LOGIN.FacebookClientForm; return React.createElement("div", { style: { padding: 20, marginTop: 90 }, className: "container" }, React.createElement("div", { className: "row" }, React.createElement("div", { style: styles.containerDiv }, React.createElement("div", { style: styles.cardContainer }, React.createElement("div", { style: styles.card }, React.createElement("div", { style: { padding: "10px 0px" }, className: "row" }, React.createElement("div", { className: "col-xs-12" }, React.createElement("h4", { style: { marginBottom: 24 } }, "Welcome"), React.createElement("div", { style: { marginBottom: "1em" }, className: "input-group" }, React.createElement("span", { className: "input-group-addon", style: { padding: "6px 12px" } }, React.createElement("i", { className: "fa fa-envelope" })), React.createElement("input", { onChange: this.onEmailChange, defaultValue: email, type: "text", className: "form-control", placeholder: "Email", "aria-describedby": "basic-addon1" })), React.createElement("div", { className: "input-group" }, React.createElement("span", { className: "input-group-addon", style: { padding: "6px 12.5px" } }, React.createElement("i", { className: "fas fa-lock" })), React.createElement("input", { onChange: this.onPasswordChange, defaultValue: password, type: "password", className: "form-control", placeholder: "Password", "aria-describedby": "basic-addon2" })), React.createElement("div", { style: styles.rememberDiv }, React.createElement("input", { defaultChecked: rememberMe, type: "checkbox", "aria-label": "...", onChange: this.setRememberMe }), React.createElement("span", { style: styles.rememberText }, "Remember me")), React.createElement("button", { style: __assign({}, styles.btn), className: "btn btn-lg btn-block btn-primary", onClick: this.loginGo }, loading ? "Loading..." : "Login"), React.createElement("div", { style: { margin: 7 }, className: "text-center" }, React.createElement("small", null, "or")), React.createElement("div", { className: "text-center facebook-button" }, React.createElement(FacebookClientForm, null)))), React.createElement("div", { style: { margin: "0.5em 0 0.5em", fontSize: 12 }, className: "text-center" }, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("public_reset_password", { id: domain.id() }) }, "Reset password"))), React.createElement("div", { style: { marginTop: "2em" }, className: "text-center" }, React.createElement("p", null, "Accounts powered by", " ", React.createElement("a", { href: "https://merchi.co" }, MERCHI.platformName))))))); }; return SellerLogin; }(React.Component); var UserProfileSellerTheme = /** @class */ function (_super) { __extends(UserProfileSellerTheme, _super); function UserProfileSellerTheme(props) { var _this = _super.call(this, props) || this; var currentUser = _this.props.currentUser; var emailAddress = currentUser.emailAddresses() ? currentUser.emailAddresses()[0].emailAddress() : ""; var phoneNumber = currentUser.phoneNumbers() ? currentUser.phoneNumbers()[0] : new MERCHI.PhoneNumber(); _this.state = { alertSettings: { alertType: "info", message: "", show: false, title: "Alert" }, code: phoneNumber.code() ? phoneNumber.code() : "", emailAddress: emailAddress, loading: false, loadingLogo: false, loadingProfile: true, name: currentUser.name(), number: phoneNumber.number() ? phoneNumber.number() : "", profilePicture: currentUser.profilePictureUrl() }; _this.changeAttr = _this.changeAttr.bind(_this); _this.fetchUser = _this.fetchUser.bind(_this); _this.onChangeProfilePicture = _this.onChangeProfilePicture.bind(_this); _this.setAlert = _this.setAlert.bind(_this); _this.setUser = _this.setUser.bind(_this); _this.saveUserInfo = _this.saveUserInfo.bind(_this); _this.showError = _this.showError.bind(_this); _this.showSuccess = _this.showSuccess.bind(_this); _this.updateAddress = _this.updateAddress.bind(_this); return _this; } UserProfileSellerTheme.prototype.componentDidMount = function () { this.fetchUser(); }; UserProfileSellerTheme.prototype.setAlert = function (settings) { this.setState({ alertSettings: settings, loading: false, loadingLogo: false, loadingProfile: false }); }; UserProfileSellerTheme.prototype.showError = function (e) { var settings = {}; settings.show = true; settings.title = "Error!"; settings.message = e && e.message ? e.message : "An unknown error occurred"; settings.alertType = "danger"; this.setAlert(settings); }; UserProfileSellerTheme.prototype.showSuccess = function (message) { var settings = {}; settings.show = true; settings.title = "Success!"; settings.message = message; settings.alertType = "success"; this.setAlert(settings); }; UserProfileSellerTheme.prototype.setUser = function (user) { var address = user.addresses() && user.addresses() ? user.addresses()[0] : new MERCHI.Address(); var emailAddress = user.emailAddresses() ? user.emailAddresses()[0].emailAddress() : ""; var phoneNumber = user.phoneNumbers() ? user.phoneNumbers()[0] : new MERCHI.PhoneNumber(); this.setState({ address: address, emailAddress: emailAddress, name: user.name(), code: phoneNumber.code() ? phoneNumber.code() : "", number: phoneNumber.number() ? phoneNumber.number() : "", profilePicture: user.profilePictureUrl(), loading: false, loadingProfile: false }); }; UserProfileSellerTheme.prototype.fetchUser = function () { var user = this.props.currentUser; user.get(this.setUser, this.showError, { addresses: {}, emailAddresses: {}, profilePicture: {}, phoneNumbers: {} }); }; UserProfileSellerTheme.prototype.saveUserInfo = function () { var _this = this; var user = this.props.currentUser; var phoneNumber = user.phoneNumbers()[0]; var emailAddress = user.emailAddresses()[0]; phoneNumber.code(this.state.code); phoneNumber.number(this.state.number); emailAddress.emailAddress(this.state.emailAddress); user.phoneNumbers()[0] = phoneNumber; user.emailAddresses()[0] = emailAddress; user.name(this.state.name); this.setState({ loading: true }); user.patch(function () { return _this.showSuccess("Profile information updated."); }, this.showError, {}); }; UserProfileSellerTheme.prototype.changeAttr = function (attr, value) { var state = this.state; state[attr] = value; this.setState(state); }; UserProfileSellerTheme.prototype.updateAddress = function (address) { this.setState({ address: address }); }; UserProfileSellerTheme.prototype.onChangeProfilePicture = function (data) { var _this = this; var user = new MERCHI.User().id(this.props.currentUser.id()); var file = new MERCHI.File(); if (data && data[0]) { file.fromFormFile(data[0]); } this.setState({ loadingLogo: true }); file.create(function (res) { user.profilePicture(res); user.patch(function (responseUser) { _this.setState({ loadingLogo: false, profilePicture: responseUser.profilePictureUrl() }); _this.showSuccess("Profile picture updated."); }, _this.showError, { profilePicture: {} }); }, this.showError); }; UserProfileSellerTheme.prototype.render = function () { var _this = this; var currentUser = this.props.currentUser; var profilePicture = this.state.profilePicture; var loading = this.state.loading; var loadingLogo = this.state.loadingLogo; var styles = this.props.styles ? this.props.styles : {}; var loadingGif = UTILITIES.URL_MAP.urlFor("static", { filename: "images/merchi-monster-loader.gif" }); var avatarStyle = styles.avatarStyle ? styles.avatarStyle : { borderRadius: 75, height: 75, margin: "10px auto", width: 75 }; var avatarLoadingStyle = styles.avatarLoadingStyle ? styles.avatarLoadingStyle : { borderRadius: 75, height: 75, margin: "10px auto", width: 75 }; var profileContainer = styles.profileContainer ? styles.profileContainer : { display: "block", margin: "0 auto", maxWidth: 400, marginTop: "5em", marginBottom: "5em" }; avatarStyle["background"] = "url('" + profilePicture + "') center/cover no-repeat"; avatarLoadingStyle["background"] = "url('" + loadingGif + "') center/cover no-repeat"; return React.createElement("div", { style: profileContainer }, React.createElement(Alert, { setAlert: this.setAlert, settings: this.state.alertSettings }), this.state.loadingProfile ? React.createElement(MerchiLoader, null) : React.createElement(React.Fragment, null, React.createElement("div", { className: "row", style: { background: "#fff", borderRadius: 2, padding: 10, boxShadow: "rgba(0, 0, 0, 0.05) 0px 22px 15px" } }, React.createElement("div", { className: "col-md-12" }, loadingLogo ? React.createElement("div", { "class": "rounded-circle", style: avatarLoadingStyle }) : React.createElement("div", { style: avatarStyle, className: "rounded-circle" }, React.createElement("input", { type: "file", onChange: function onChange(e) { return _this.onChangeProfilePicture(e.target.files); }, style: { height: "100%", width: "100%", opacity: 0, cursor: "pointer" }, accept: "image/gif, image/jpeg, image/bmp, image/png, image/tiff, .gif, .jpg, .jpeg, .bmp, .png, .tiff" }))), React.createElement("div", { className: "col-md-12" }, React.createElement("div", { className: "form-group" }, React.createElement("label", null, "Full name"), React.createElement("input", { className: "form-control", defaultValue: this.state.name, onChange: function onChange(e) { return _this.changeAttr("name", e.target.value); }, placeholder: "Your name" }))), React.createElement("div", { className: "col-md-12" }, React.createElement("div", { className: "form-group" }, React.createElement("label", null, "Email address"), React.createElement("input", { className: "form-control", defaultValue: this.state.emailAddress, onChange: function onChange(e) { return _this.changeAttr("emailAddress", e.target.value); }, placeholder: "Email address" }))), React.createElement("div", { className: "col-md-12" }, React.createElement("label", null, "Phone number"), React.createElement(PhoneNumberInputs, { code: this.state.code, changeCode: function changeCode(value) { return _this.changeAttr("code", value); }, changeNumber: function changeNumber(value) { return _this.changeAttr("number", value); }, number: this.state.number })), React.createElement("div", { className: "col-md-12" }, React.createElement("div", { className: "form-group" }, React.createElement("button", { className: "btn btn-primary btn-block", onClick: this.saveUserInfo }, loading ? "Loading..." : "Update")))))); }; return UserProfileSellerTheme; }(React.Component); function NavSellerCollapse(props) { var styles = props.styles ? props.styles : { avatar: { display: "inline-block", height: 35, width: 35, borderRadius: 100, background: "#e4e4e4 no-repeat center/cover" }, avatarContainer: { position: "relative" } }; var currentDomain = props.currentDomain, currentUser = props.currentUser, hideCart = props.hideCart; var signedIn = currentUser && currentUser.id() > 0; var mascot = UTILITIES.URL_MAP.urlFor("static", { filename: "images/merchi-monster-icon.png" }); return React.createElement("div", { className: "collapse navbar-collapse", id: "bs-example-navbar-collapse-1" }, React.createElement("ul", { className: "nav navbar-nav navbar-right" }, signedIn ? React.createElement("li", { className: "dropdown navbar-user", style: { cursor: "pointer" } }, React.createElement("a", { style: { background: "#fff" }, className: "dropdown-toggle nav-user-profile", "data-toggle": "dropdown", role: "button", "aria-haspopup": "true", "aria-expanded": "false" }, React.createElement("div", { style: styles.avatarContainer }, React.createElement("div", { className: "target-avatar", style: __assign(__assign({}, styles.avatar), { backgroundImage: "url(" + currentUser.profilePictureUrl() + ")" }) }), React.createElement("span", { className: "hidden-sm hidden-md hidden-lg", style: { position: "absolute", margin: 8 } }, React.createElement("strong", null, React.createElement("small", null, currentUser.name())), " ", React.createElement("span", { "class": "caret" })))), React.createElement("ul", { className: "dropdown-menu animated fadeInLeft" }, React.createElement("li", { className: "arrow" }), React.createElement("li", null, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("user_profile_public", { id: currentDomain.id(), user_id: currentUser.id() }) }, "My Profile")), React.createElement("li", { className: "divider" }), React.createElement("li", null, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("public_logout", { id: currentDomain.id() }), id: "public-logout" }, "Logout")))) : React.createElement("li", null, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("public_login", {}) }, React.createElement("div", { style: __assign(__assign({}, styles.avatar), { backgroundImage: "url(" + mascot + ")", backgroundSize: "60%" }) })))), !hideCart && React.createElement(NavShoppingCart, { cartIconButtonClass: "btn btn-primary seller-cart-button-icon", currentDomain: currentDomain, listContainerClass: "nav navbar-nav navbar-right p-15", listItemClass: "shoppingCartListItem" })); } function SellerProductBanner(props) { var product = props.product; var styles = props.styles ? props.styles : { productTitle: { marginTop: "2.2em", marginBottom: "1.5em", display: "inline-block", padding: "0 15px" } }; return React.createElement("div", null, React.createElement("h4", { style: styles.productTitle }, product.name()), React.createElement("ol", { className: "breadcrumb breadcrumb-responsive" }, React.createElement("li", null, React.createElement("a", { href: UTILITIES.URL_MAP.publicUrlFor("domain_products_public", { id: product.domain().id() }) }, "Products")), React.createElement("li", { className: "active" }, product.name()))); } var SellerProductForm = /** @class */ function (_super) { __extends(SellerProductForm, _super); function SellerProductForm(props) { var _this = _super.call(this, props) || this; var currentDomain = props.currentDomain, product = props.product; var productSlim = new MERCHI.Product().id(product.id()); var domainSlim = new MERCHI.Domain().id(currentDomain.id()); var emptyJob = new MERCHI.Job().quantity(1).cost(0).product(productSlim).variations([]).domain(domainSlim); _this.state = { cartId: null, fetchingPrice: false, job: emptyJob, loading: false }; _this.addToCart = _this.addToCart.bind(_this); _this.getCartCookie = _this.getCartCookie.bind(_this); _this.onGotPrice = _this.onGotPrice.bind(_this); _this.onPriceError = _this.onPriceError.bind(_this); _this.updateJob = _this.updateJob.bind(_this); _this.updateJobAttribute = _this.updateJobAttribute.bind(_this); _this.imageUrlFor = _this.imageUrlFor.bind(_this); _this.productFormRef = React.createRef(); return _this; } SellerProductForm.prototype.componentDidMount = function () { var cartId = this.getCartCookie(); var job = this.state.job; this.updateJob(job, true); this.setState({ cartId: cartId }); }; SellerProductForm.prototype.getCartCookie = function () { var product = this.props.product; return MERCHI.getCartCookie(product.domain().id()); }; SellerProductForm.prototype.onGotPrice = function (data) { this.setState({ fetchingPrice: false, job: MERCHI.fromJson(this.state.job, data) }); }; SellerProductForm.prototype.onPriceError = function (data) { this.setState({ fetchingPrice: false }, function () { var msg = data && data.message ? data.message : "Unable fetch price."; }); }; SellerProductForm.prototype.updateJob = function (job, updatePrice) { var _this = this; this.setState({ fetchingPrice: updatePrice, job: job }, function () { if (updatePrice) { UTILITIES.debounceFetchPrice(job, _this.onGotPrice, _this.onPriceError); } }); }; SellerProductForm.prototype.updateJobAttribute = function (attr, value) { var job = this.state.job; job[attr](value); this.updateJob(job, true); }; SellerProductForm.prototype.addToCart = function () { var _this = this; var cartIdAndToken = this.getCartCookie(); var job = this.state.job; var cart = new MERCHI.Cart().id(parseInt(cartIdAndToken[0], 10)); var cartItem = new MERCHI.CartItem(); cart.token(cartIdAndToken[1]); cartItem.cart(cart); cartItem.quantity(job.quantity()); cartItem.product(this.props.product); cartItem.variations(job.variations()); cartItem.taxType(job.taxType()); if (cartIdAndToken) { this.setState({ loading: true }, function () { cartItem.create(function (_cartItem) { _this.setState({ loading: false }); window.cartItemAddedToCart(); }, function () { return _this.setState({ loading: false }); }); }); } }; SellerProductForm.prototype.imageUrlFor = function (fileName) { return UTILITIES.URL_MAP.urlFor("static", { filename: "svg/" + fileName }); }; SellerProductForm.prototype.render = function () { var _this = this; var _a = this.state, fetchingPrice = _a.fetchingPrice, job = _a.job, loading = _a.loading; var product = this.props.product; var featureDeadline = product.featureDeadline(); var isPastDeadline = featureDeadline && featureDeadline * 1000 < Date.now(); // Checkout payment/security images var stripe = this.imageUrlFor("Stripe-card-dark.svg"); var mc = this.imageUrlFor("MasterCard-dark.svg"); var visa = this.imageUrlFor("Visa-card-dark.svg"); var ssl = this.imageUrlFor("ssl-secured.svg"); // Inline styles var styles = { iconContainer: { margin: "1em auto 0", textAlign: "center", display: "block" }, iconStyle: { maxHeight: 30, margin: "5px" } }; var Variations = UTILITIES.PRODUCT.Variations; return React.createElement(React.Fragment, null, isPastDeadline ? React.createElement("h4", { style: { marginTop: "1.3em" } }, product.name(), " is no longer available.") : React.createElement(React.Fragment, null, React.createElement("h4", { style: { marginTop: "1.3em" } }, "Add to cart"), React.createElement(SellerProductQuantitySelect, { defaultQuantity: job.quantity(), onChange: function onChange(q) { return _this.updateJobAttribute("quantity", q ? q : 1); } }), React.createElement("div", { className: "job-info-total-cost", style: { fontSize: "18px", fontWeight: "bold" } }), React.createElement(Variations, { job: job, product: product, updateJob: this.updateJob }), React.createElement("h4", { style: { marginTop: "2em" } }, fetchingPrice ? "Loading..." : UTILITIES.CURRENCY.currencyTaxAndCost(job.currency(), job.taxType(), job.cost())), React.createElement("div", { className: "form-group" }, React.createElement("button", { style: { marginTop: "1em" }, className: "btn btn-block btn-primary btn-lg", onClick: this.addToCart }, React.createElement("span", { className: "fas fa-shopping-cart", "aria-hidden": "true", style: { marginRight: "0.5em", fontWeight: 800 } }), loading ? "Adding..." : "Add to cart"), React.createElement("div", { style: styles.iconContainer }, React.createElement("img", { style: __assign(__assign({}, styles.iconStyle), { maxHeight: 22 }), src: ssl }), React.createElement("img", { style: styles.iconStyle, src: stripe }), React.createElement("img", { style: styles.iconStyle, src: mc }), React.createElement("img", { style: styles.iconStyle, src: visa }))))); }; return SellerProductForm; }(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-" + 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 components = {"SellerProductQuantitySelect": SellerProductQuantitySelect,"SellerInvoice": SellerInvoice,"NavShoppingCart": NavShoppingCart,"ErrorException": ErrorException,"SelleverNav": SelleverNav,"SellerCategoriesNav": SellerCategoriesNav,"MykonosGalleryModal": MykonosGalleryModal,"SellerProductImages": SellerProductImages,"MerchiLoader": MerchiLoader,"ProductSellerCard": ProductSellerCard,"NavSellerBrandIcon": NavSellerBrandIcon,"SellerFooter": SellerFooter,"SellerInvoicePaid": SellerInvoicePaid,"SellerProductFunction": SellerProductFunction,"PageNumbers": PageNumbers,"SellerProductsGrid": SellerProductsGrid,"ErrorExceptionSellerTheme": ErrorExceptionSellerTheme,"PhoneNumberInputs": PhoneNumberInputs,"SellerProduct": SellerProduct,"SellerResetPasswordRequest": SellerResetPasswordRequest,"JumbotraonSellerBootstrap3": JumbotraonSellerBootstrap3,"UserProfile": UserProfile,"SellerLogin": SellerLogin,"UserProfileSellerTheme": UserProfileSellerTheme,"NavSellerCollapse": NavSellerCollapse,"SellerProductBanner": SellerProductBanner,"SellerProductForm": SellerProductForm,"Alert": Alert,}; 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(); });

OPENING SALE