- \");\n listlevel++;\n }\n results.push(\"
- \");\n var idx = trimprefix2.indexOf(' ');\n trimprefix2 = trimprefix2.substring(idx + 1);\n }\n else if (listlevel > 0) {\n level = spaces / 4;\n while (level < listlevel) {\n listTag = tagStack.pop();\n results.push(\" \");\n listlevel--;\n }\n }\n\n //\n // remove any potential html nonsense\n trimprefix2 = trimprefix2.replace(//g, \">\");\n\n trimprefix2 = trimprefix2.replace(/^### ([^\\r]*)\\r?$/, \"
- \n {thumb}\n \n {props.product.Name}\n\n
\n {addButton}\n \n )\n}\n\n\n//\n// Render a single tag\nfunction Tag(props) {\n return (\n - props.onClickTag(props.tag)}>\n #{props.tag}\n \n )\n}\n\n//\n// Render list of tags\nfunction TagList(props) {\n const [expanded, expand] = useState(1);\n if (!props.tags || props.tags.length === 0) return false;\n const tags = props.tags.map((t) =>\n
- props.onClickCategory(props.category)}>\n {props.category.Name}\n \n )\n}\n\n//\n// Render current category hierarchy\nfunction CategoryHierarchy(props) {\n\n // category\n const hier = [];\n if (typeof props.current === 'object') {\n let subcat = props.current;\n while (subcat) {\n hier.push(subcat)\n subcat = subcat.parent;\n }\n hier.reverse();\n }\n\n const hierlist = hier.map((cat) =>\n
- props.onClickCategory(0)}>\n
\n \n {hierlist}\n
$1
\");\n trimprefix2 = trimprefix2.replace(/^## ([^\\r]*)\\r?$/, \"$1
\");\n trimprefix2 = trimprefix2.replace(/^# ([^\\r]*)\\r?$/, \"$1
\");\n trimprefix2 = trimprefix2.replace(/^---$/, \"\");\n\n\n // add
if we have multiple lines and no blockquote or list\n if (trimprefix2.indexOf('<') !== 0 && blockquotelevel === 0 && listlevel === 0 && addP) {\n // leave on own line so we can do heading processing\n results.push(\"
\" + trimprefix2);\n addedP = true;\n addP = false;\n }\n else {\n // inside a blockquote. preserve newlines\n results.push(trimprefix2);\n }\n\n }\n\n if (addedP) {\n results.push(\"
\")\n }\n\n // end our lists\n while (0 < listlevel) {\n listTag = tagStack.pop();\n results.push(\"\");\n listlevel--;\n }\n // end our blockquote\n while (0 < blockquotelevel) {\n results.push(\"\");\n blockquotelevel--;\n }\n\n return results.join('\\n');\n }\n\n\n\n static toHtml(s, disablelinks) {\n var txt = s;\n if (!txt) return txt;\n txt = txt.replace(//gi, ' '); // just in case it's got old
s which we tend to have\n txt = StoreUtil.ProcessParagraphs(txt);\n\n // only replace & if followed by a space. Otherwise, allow ¢ and similar. \n txt = txt.replace(/& /g, \"& \");\n // ***WARNING*** get's attention class\n txt = txt.replace(/\\*{3}([^<>]*?)\\*{3}/gi, \"$1\");\n txt = txt.replace(/\\*\\*([^<>]*?)\\*\\*/gi, \"$1\");\n txt = txt.replace(/_([^<>]*?)_/gi, \"$1\");\n txt = txt.replace(/`([^<>]*?)`/gi, \"
$1\");\n txt = txt.replace(/~~([^<>]*?)~~/gi, \"\");\n\n // replace escaped symbols\n txt = txt.replace(/\\\\_/g, \"_\");\n txt = txt.replace(/\\\\\\*/g, \"*\");\n txt = txt.replace(/\\\\`/g, \"`\");\n\n // img tags\n txt = txt.replace(/!\\[([A-Za-z0-9 ]+)\\]\\(([/hd][^\\)]*)\\)/gi,\n \"
\n else if (configData.Fallback)\n thumb =
\n
\n )\n}\n\n//\n// Render the HOME link \nfunction HomeLink(props) {\n if (configData.Logo) {\n return (\n expand(!expanded)}>{toggle}Products By Tag
\n- \n {tags}\n
\n \n 
\n \n
\n )\n }\n else if (configData.Website) {\n return (\n \n )\n }\n}\n\n//\n// Render the Search Field\nfunction SearchArea(props) {\n const [search, setSearch] = useState(0);\n\n\n const link = (props.lastSearch?.results) ?\n (\n props.onSearch(props.lastSearch.term)}>Search Results: {props.lastSearch.term}\n ) : false;\n\n return (\n \n
\n )\n}\n\n//\n// Render a single category name\nfunction Category(props) {\n return (\n Search
\n\n setSearch(e.target.value)}\n onKeyUp={(e) => {\n if (e.key === 'Enter' || e.keyCode === 13) {\n props.onSearch(search);\n e.stopPropagation();\n e.preventDefault();\n }\n }}\n placeholder={\"Search...\"}\n /> props.onSearch(search)}\n className=\"searchButton\">
\n {link}\n - \n
\n
\n );\n}\n\n//\n// Render list of matched products\nexport function ProductList(props) {\n\n\n const showprevnext = props.page > 0 || props.pages > 1;\n\n const prev = !showprevnext ? false : ((props.page > 0) ?\n \n :\n \n )\n\n const next = !showprevnext ? false : ((props.page+1 < props.pages) ?\n \n :\n \n )\n\n const pagebuttons = showprevnext ?\n expand(!expanded)}>{toggle}Products By Category
\n- \n {cats}\n
{prev}Page {props.page + 1} of {props.pages}{next}
:\n false;\n\n\n const items = props.products.map((p) =>\n \n
\n )\n}\n\n//\n// Render the group of images for a product\nfunction ImageList(props) {\n const [bigIndex, setIndex] = useState(0);\n\n React.useEffect(() => {\n setIndex(0);\n }, [props.images])\n\n if (!props.images || props.images.length === 0)\n return false;\n\n const images = props.images.map((u, i) =>\n {props.title}
\n- \n {items}\n
setIndex(i)}>\n 
\n )\n\n const fallback = \n
\n )\n}\n\n//\n// Render full product information, for single product page\n//\nclass ProductDetails extends React.Component {\n constructor(props) {\n super(props)\n this.globs = props.globs;\n this.state = {\n quantity: \"1\",\n quantityopen: false,\n enabled: true\n }\n }\n\n addItem() {\n if (this.state.enabled) {\n const me = this;\n this.setState({ enabled: false })\n this.globs.addToCart(this.props.product, this.state.quantity, true)\n .then(response => {\n setTimeout(function () {\n me.setState({ enabled: true })\n }, 3000);\n })\n }\n }\n\n\n change(e, name) {\n let newstate = {}\n newstate[name] = e.target.value\n this.setState(newstate)\n }\n\n quantity(evt) {\n this.setState({\n quantity: evt.detail.index + 1,\n quantityopen: false\n });\n }\n\n renderAddLink() {\n const product = this.props.product;\n\n if (product.Storable && product.Stock <= 0) {\n return (\n <>OUT OF STOCK\n )\n }\n\n let quantity = []\n const max = (product.Storable && product.Stock < 10) ? product.Stock : 10;\n for (let i = 2; i <= max; i++)\n quantity.push()\n\n return (\n \n \n \n
\n {images}
\n \n
\n )\n }\n\n render() {\n const product = this.props.product;\n\n const addLink = this.renderAddLink()\n\n const backbutton = this.props.onBack ?\n << Back to Products : false;\n\n return (\n \n\n \n \n this.setState({ quantityopen: !this.state.quantityopen })}>\n {this.state.quantity} Qty \n \n \n
\n \n \n
\n )\n }\n}\n\n\n//\n// Render the full product browser\nexport default class ProductBrowser extends React.Component {\n constructor(props) {\n super(props)\n this.globs = props.globs;\n this.state = {\n nav: true, // true when showing nav\n categories: [],\n current: 0,\n products: [],\n tags: configData.Tags || [],\n product: null,\n source: 'root',\n page: 0,\n pages: 0,\n search: {\n term: \"\",\n results: null\n },\n route: \"\"\n }\n }\n\n\n // recursively search for category for given ID\n findCategory(id, list) {\n if (typeof list === 'undefined') {\n return this.findCategory(id, this.state.categories);\n }\n\n\n for (const cat of list) {\n // compare as strings\n if (cat.ID + \"\" === id + \"\") {\n return cat;\n }\n }\n\n for (const cat of list) {\n if (cat.Subcategories) {\n const sub = this.findCategory(id, cat.Subcategories);\n if (sub !== null) return sub;\n }\n }\n return null;\n }\n\n //\n // record the parent category of each category so we \n // can navigate up the hierarchy easily\n //\n setParentsAndSort(cats, parent) {\n // sort the categories\n cats.sort((a, b) => {\n return a.Name.localeCompare(b.Name, undefined, { sensitivity: 'base', ignorePunctuation: true })\n })\n cats.forEach((cat) => {\n cat.parent = parent\n if (cat.Subcategories)\n this.setParentsAndSort(cat.Subcategories, cat)\n })\n }\n\n\n\n //\n // all details for a single product. All images\n // and full description and attributes\n //\n loadProduct(id) {\n //\n // ignore if we have already loaded this product\n if (this.state.product && this.state.product.ID === id) {\n // just set the state\n this.setState({\n source: \"detail\"\n });\n this.navigate(\"s=detail&p=\" + encodeURIComponent(id))\n return true;\n }\n const me = this;\n StoreUtil.callApi('/inventory/product/{orgid}/' + id,\n { method: \"GET\", cache: 'default' })\n .then(response => {\n if (response.ok) {\n return response.json()\n .then(j => {\n me.setState({\n source: \"detail\",\n product: j\n });\n this.navigate(\"s=detail&p=\" + encodeURIComponent(j.ID))\n return true\n })\n }\n else {\n // handle errors here.\n return response.text()\n }\n })\n .catch(error => console.error(error))\n }\n\n\n addProduct(p, e) {\n e.preventDefault()\n e.stopPropagation()\n // we don't re-render when adding. \n // so in a non-react way, we just alter the\n // element\n var element = e.target;\n element.disabled = true;\n this.globs.addToCart(p, 1, true)\n .then(result => {\n setTimeout(() => {\n element.disabled = false\n }, 3000)\n })\n }\n\n\n clickProduct(p) {\n this.loadProduct(p.ID);\n }\n\n //\n // load all categories\n loadCategories() {\n const me = this;\n StoreUtil.callApi('/inventory/categories/{orgid}', { method: \"GET\", cache: 'default' })\n .then(response => {\n if (response.ok) {\n return response.json()\n .then(j => {\n this.setParentsAndSort(j, null)\n me.setState({\n categories: j,\n finishedLoading: true\n });\n me.loadFromQuery()\n })\n }\n else {\n // handle errors here.\n return response.text()\n }\n })\n .catch(error => console.error(error))\n }\n\n //\n // load list of tags\n loadTags() {\n const me = this;\n\n //\n // if config has tags, just use those.\n //\n if (typeof configData.Tags !== 'undefined') {\n me.setState({ tags: configData.Tags })\n return;\n }\n\n StoreUtil.callApi('/inventory/tags/{orgid}',\n { method: \"GET\", cache: 'default' })\n .then(response => {\n if (response.ok) {\n return response.json()\n .then(j => {\n me.setState({\n tags: j,\n finishedLoading: true\n })\n })\n }\n else {\n // handle errors here. but for tags? doesn't matter\n return response.text()\n }\n })\n .catch(error => console.error(error))\n }\n\n\n //\n // load products from category\n loadProducts(category,page) {\n const me = this;\n // save first page of each category\n if (category.products && page===0) {\n me.setState({\n source: \"category\",\n products: category.products,\n page: 0,\n pages: category.pages,\n finishedLoading: true\n });\n }\n else {\n return StoreUtil.callApi(\n '/inventory/products/{orgid}/' + category.ID + \"/\" + page + \"/\" + configData.PageSize +\n (configData.OutOfStock ? \"?outOfStock=1\" : \"\"),\n { method: \"GET\", cache: 'default' })\n .then(response => {\n if (response.ok) {\n return response.json()\n .then(j => {\n if (j.Page === 0) {\n category.products = j.Products; // save first page\n category.pages = j.TotalPages\n }\n me.setState({\n source: \"category\",\n page: j.Page,\n pages: j.TotalPages,\n products: j.Products,\n finishedLoading: true\n });\n })\n }\n })\n .catch(error => console.error(error))\n }\n }\n\n\n\n //\n // load tagged products\n loadTaggedProducts(tag,page) {\n const me = this;\n return StoreUtil.callApi('/inventory/products/tagged/{orgid}/' + encodeURIComponent(tag) + '/' + page + '/' + configData.PageSize,\n { method: \"GET\", cache: 'default' })\n .then(response => {\n if (response.ok) {\n return response.json()\n .then(j => {\n me.setState({\n current: tag,\n source: \"tags\",\n page: j.Page,\n products: j.Products,\n pages: j.TotalPages,\n finishedLoading: true\n });\n })\n }\n })\n .catch(error => console.error(error))\n }\n\n\n loadFromQuery() {\n const qs = window.location.search\n let query = new URLSearchParams(qs)\n const screen = query.get(\"l\")\n if (this.state.route !== qs) {\n // save so we know whether to render again\n this.setState({\n route: qs,\n back: this.state.route\n })\n }\n if (!screen || screen === \"browse\") {\n // get page, if set\n const page = query.get(\"pg\") || 0\n // decide what to load\n const source = query.get(\"s\")\n if (!source || source === \"root\")\n this.selectCategory(0,page);\n else if (source === \"search\") {\n const q = query.get(\"q\")\n this.searchProducts(q,page)\n }\n else if (source === \"tags\") {\n const tag = query.get(\"t\")\n this.loadTaggedProducts(tag,page)\n }\n else if (source === \"category\") {\n const cat = query.get(\"c\")\n this.selectCategory(cat,page)\n }\n else if (source === \"detail\") {\n const id = query.get(\"p\")\n this.loadProduct(id)\n }\n }\n }\n\n //\n // path - path that we either need to navigate to, or DID navigate to.\n navigate(path,reload) {\n // hide our nav and scroll to top always.\n window.scrollTo(0, 0);\n\n var isFull = path.indexOf(\"&l=browse&\")\n if (isFull >= 0) path = path.substring(isFull + \"&l=browse&\".length);\n\n var fullpath = StoreUtil.makeRoute(\"browse\", path);\n\n if (this.props.navonly) {\n // don't show nav on mobile when we come back\n this.hideNav();\n // if we are in \"navonly\" mode, we need to push this up a level to get rid of\n // cart or login or whatever page is showing. Parent will handle all routing\n this.globs.loadForm(\"browse&\" + path)\n // this will also reload.\n return;\n }\n\n // save our browse history and set window location.\n if (fullpath !== window.location.search) {\n // almost always will have changed. That's the point. \n const newpage = window.location.origin + window.location.pathname + fullpath;\n window.history.pushState(null, null, newpage)\n }\n\n // save so we know whether to render again\n this.setState({\n nav: false,\n route: fullpath,\n back: this.state.route !== fullpath ? this.state.route : this.state.back\n })\n\n if (reload) {\n this.loadFromQuery();\n }\n \n }\n\n // start a new search.\n clickSearch(search) {\n this.navigate(\"s=search&q=\" + encodeURIComponent(search),true)\n }\n\n //\n // load products via search.\n searchProducts(search,page) {\n const me = this;\n\n if (!search) return; // ignore empty search\n\n if (!page) page = 0;\n\n if (this.state.search.term === search &&\n this.state.search.page === page &&\n this.state.search.results !== null) {\n me.setState({\n current: search,\n source: \"search\",\n products: this.state.search.results,\n page: this.state.page,\n pages: this.state.pages,\n finishedLoading: true\n });\n // make sure we have url set correctly\n this.navigate(\"s=search&q=\" + encodeURIComponent(search) + \"&pg=\" + page)\n return;\n }\n\n return StoreUtil.callApi('/inventory/products/search/{orgid}/',\n {\n method: \"POST\",\n params: {\n Search: search,\n PerPage: configData.PageSize,\n PageNumber: page,\n OutOfStock: configData.OutOfStock || 0\n },\n cache: 'default'\n })\n .then(response => {\n if (response.ok) {\n return response.json()\n .then(j => {\n me.setState({\n search: {\n term: search,\n results: j.Products,\n page: j.Page,\n pages: j.TotalPages\n },\n current: search,\n source: \"search\",\n page: j.Page,\n products: j.Products,\n pages: j.TotalPages,\n finishedLoading: true\n });\n this.navigate(\"s=search&q=\" + encodeURIComponent(search) + \"&pg=\" + page)\n })\n }\n })\n .catch(error => console.error(error))\n }\n\n\n shouldComponentUpdate(nextProps, nextState) {\n // re-render if we changed our display type or store was loaded.\n if (this.props.navonly !== nextProps.navonly ||\n this.props.store !== nextProps.store) {\n return true;\n }\n\n if (this.state.nav !== nextState.nav)\n return true;\n\n // checking if products list changed only matters if one of them\n // is not empty\n if (this.state.products !== nextState.products &&\n (this.state.products.length > 0 || nextState.products.length > 0))\n return true;\n\n if (this.state.categories !== nextState.categories ||\n this.state.current !== nextState.current ||\n this.state.tags !== nextState.tags ||\n this.state.source !== nextState.source ||\n this.state.product !== nextState.product) {\n return true;\n }\n\n // we should rerender based on the location changing.\n const qs = window.location.search;\n if (this.state.categories.length > 0 &&\n qs !== nextState.route) {\n return true;\n }\n \n return false;\n }\n\n componentDidUpdate(prevProps, prevState) {\n const qs = window.location.search\n // don't load from query before the categories are loaded\n if (this.state.categories.length > 0 &&\n qs !== this.state.route) {\n this.loadFromQuery();\n }\n }\n\n\n componentDidMount() {\n this.loadCategories()\n this.loadTags();\n }\n\n componentWillUnmount() {\n }\n\n\n clickCategory(category) {\n // use the route to automatically load the clicked category\n if (category)\n this.navigate(\"s=category&c=\" + category.ID, true)\n else \n this.navigate(\"s=root\", true)\n }\n\n selectCategory(category, page) {\n if (category) {\n\n if (typeof category !== 'object') \n category = this.findCategory(category);\n\n if (!category) return; // categories may not be loaded\n // this only called from loadFromQuery, so finishedLoading should\n // already be false.\n this.setState({\n current: category,\n source: \"category\",\n pages: 0,\n products: []\n })\n\n this.loadProducts(category,page || 0)\n }\n else {\n // top level or our START TAG\n if (configData.StartTag)\n this.selectTag(configData.StartTag)\n else\n this.setState({\n current: 0,\n source: \"root\",\n pages: 0,\n products: []\n })\n }\n }\n\n selectTag(tag) {\n this.navigate(\"s=tags&t=\" + encodeURIComponent(tag), true);\n }\n\n pageChange(dir) {\n var page = this.state.page*1 + dir*1;\n if (page < 0) page = 0;\n // reload by updating our navigation page\n if (this.state.source === \"category\") \n this.navigate(\"s=category&c=\" + this.state.current.ID + \"&pg=\" + page, true);\n else if (this.state.source === \"search\")\n this.navigate(\"browse&s=search&q=\" + encodeURIComponent(this.state.current) + \"&pg=\" + page, true);\n else if (this.state.source === \"tags\")\n this.navigate(\"browse&s=tags&t=\" + encodeURIComponent(this.state.current) + \"&pg=\" + page, true);\n }\n\n // toggle nav visibility on small screens.\n toggleNav() {\n this.setState({\n nav: !this.state.nav\n });\n }\n\n // this will hide nav on small screens only\n hideNav() {\n this.setState({\n nav: false\n });\n }\n\n renderNavMenu() {\n return (\n \n
\n {product.Name}
\n {backbutton}\n\n \n
\n \n this.toggleNav()} size={\"3em\"} />\n
\n )\n }\n\n renderNavArea() {\n let current = this.state.current;\n let categories = (this.state.source === 'category')\n ? (this.state.current.Subcategories || [])\n : this.state.categories;\n if (this.state.source === 'tags' || this.state.source === 'search') {\n // tags list, no category to use\n current = 0;\n }\n\n const storelink = (configData.Stores && this.props.store) ?\n {this.props.store.Name}\n this.props.globs.loadForm(\"choose\")}>change\n
:\n false;\n\n return (\n \n this.clickSearch(s)}\n lastSearch={this.state.search}\n />\n this.clickCategory(cat)}\n categories={categories}\n />\n this.selectTag(t)} tags={this.state.tags} />\n
\n )\n }\n\n showList() {\n if (this.state.back) {\n this.navigate(this.state.back, true)\n }\n }\n\n render() {\n const navarea = this.renderNavArea();\n const navmenu = this.renderNavMenu()\n\n if (this.props.navonly) {\n return (\n \n {navmenu}\n {navarea}\n
\n )\n }\n else if (this.state.source === 'detail') {\n return (\n \n {navmenu}\n {navarea}\n this.showList() : false}\n product={this.state.product}\n globs={this.globs} />\n
\n )\n }\n else {\n let title = \"\";\n switch (this.state.source) {\n default:\n case 'root':\n title = \"Select a Category\"\n break;\n case 'tags':\n title = '#' + this.state.current;\n break;\n case 'search':\n title = 'Results for ' + this.state.current;\n break;\n case 'category':\n title = this.state.current.Name;\n break;\n }\n\n\n return (\n \n {navmenu}\n {navarea}\n this.clickProduct(p)}\n onAddProduct={(p, e) => this.addProduct(p, e)}\n onPage={(dir) => this.pageChange(dir)}\n globs={this.globs} />\n
\n )\n\n }\n\n }\n\n}","import React from 'react';\nimport StoreUtil from './util';\nimport configData from './config.json';\n\n\nfunction StoreChoice(props) {\n return (\n \n {props.store.Name}
\n {props.store.Address}\n
\n )\n}\n\n//\n// Our login/register form\n//\nexport default function ChooseStore(props) {\n\n const stores = configData.Stores.map((store) =>\n \n {props.store.Address}\n
\n
\n
\n
\n
\n
\n
\n\n \n )\n}\n\n\nfunction ShipMethod(props) {\n return (\n \n );\n\n}\n\n\nfunction ShipMethods(props) {\n return props.Options.map((it) => {\n\n const radio = (