These are the stores found within the coverage area you selected in the previous step.
Not your competition? We get it, maybe the guys across the street are no match to the value you bring to your customers. To remove any of stores/competitors from the market insights you see throughout the site, unselect the box under Track next to the store.
Lay of the land
Click on the Map icon to view the stores on a map and see which ones are advertising rates (blue) and which ones are not (black).
I can't find a store
If you find there's a store missing on the list, click the Are there any stores missing? link and fill out the form.
\r\n {/* */}\r\n\r\n {/* */}\r\n\r\n {\r\n this.btn0 = btn0;\r\n }}\r\n type=\"submit\"\r\n variant=\"contained\"\r\n color=\"primary\"\r\n className=\"next-btn save-t\"\r\n >\r\n Save and Go to Next\r\n \r\n \r\n Go Back\r\n \r\n {/* \r\n Back\r\n */}\r\n\r\n {/* */}\r\n\r\n {/* \r\n \r\n */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Store not found\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n This store is not yet part of our database.\r\n Let us know if this store needs to be added\r\n to our system. Our research team will review\r\n your inquiry and add the store to our\r\n database within 72 hours.\r\n
\r\n Please make sure you have entered a valid\r\n address.\r\n
\r\n
\r\n If you believe you have received this message in\r\n error, please contact our support team at{\" \"}\r\n {CONFIG.Mail_Support} or{\" \"}\r\n {CONFIG.RegionId === 3\r\n ? CONFIG.Sales_Support\r\n : CONFIG.Toll_Free}\r\n .\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n ) : this.state.activeStep === 1 ? (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {/* \r\n \r\n \r\n \r\n\r\n */}\r\n
\r\n
\r\n Define your coverage type{\" \"}\r\n \r\n
\r\n \r\n \r\n }\r\n label=\"Radius\"\r\n />\r\n \r\n }\r\n label=\"Zip or Postal Code(s) *\"\r\n />\r\n \r\n }\r\n label=\"City Name *\"\r\n />\r\n
\r\n \r\n {CONFIG.RegionId == 2 || CONFIG.RegionId == 4\r\n ? \"How many kilometres would you like to choose as your Radius?\"\r\n : \"How many miles would you like to choose as your Radius?\"}\r\n \r\n {/* \r\n {(CONFIG.RegionId == 2) ||(CONFIG.RegionId == 4) ?'10 kilometres':'10 miles'}*/}\r\n \r\n \r\n
{this.state.coverageTrackCount > 0 ? 'Expect about ' + this.state.coverageTrackCount : 'There are no'} competitor{this.state.coverageTrackCount === 1 ? '' : 's'} in this zip code(s).
\r\n You are tracking{\" \"}\r\n {this.state.trackResponse.trackCount > 0\r\n ? this.state.trackResponse.trackCount\r\n : \"no\"}{\" \"}\r\n competitor\r\n {this.state.trackResponse.trackCount > 1\r\n ? \"s\"\r\n : this.state.trackResponse.trackCount === 0\r\n ? \"s\"\r\n : \"\"}{\" \"}\r\n in this Market.{\" \"}\r\n \r\n Go to the Market Dashboard\r\n {\" \"}\r\n or click below to go back to My Markets.\r\n
\r\n {/*
{this.state.trackResponse.trackCount} Store{this.state.trackResponse.trackCount > 1 ? 's' : ''} are tracked in this Market. You can go to the Market Dashboard or go back to My Markets by clicking the button below.
{this.state.trackResponse.trackCount} Store{this.state.trackResponse.trackCount > 1 ? 's' : ''} are tracked in this Market. You can immediately view this Market Dashboard or go back to My Markets screen by clicking the button below
\r\n You are tracking{\" \"}\r\n {this.state.trackResponse.trackCount > 0\r\n ? this.state.trackResponse.trackCount\r\n : \"no\"}{\" \"}\r\n competitor\r\n {this.state.trackResponse.trackCount > 1\r\n ? \"s\"\r\n : this.state.trackResponse.trackCount === 0\r\n ? \"s\"\r\n : \"\"}{\" \"}\r\n in this Market.{\" \"}\r\n \r\n Go to the Market Dashboard\r\n {\" \"}\r\n or click below to go back to My Markets.\r\n
\r\n {/*
{this.state.trackResponse.trackCount} Store{this.state.trackResponse.trackCount > 1 ? 's' : ''} are tracked in this Market. You can go to the Market Dashboard or go back to My Markets by clicking the button below.
These are the stores found within the coverage area you selected in the previous step.
Not your competition? We get it, maybe the guys across the street are no match to the value you bring to your customers. To remove any of stores/competitors from the market insights you see throughout the site, unselect the box under Track next to the store.
Lay of the land
Click on the Map icon to view the stores on a map and see which ones are advertising rates (blue) and which ones are not (black).
I can't find a store
If you find there's a store missing on the list, click the Are there any stores missing? link and fill out the form.
\r\n {/* */}\r\n\r\n {/* */}\r\n\r\n {\r\n this.btn0 = btn0;\r\n }}\r\n type=\"submit\"\r\n variant=\"contained\"\r\n color=\"primary\"\r\n className=\"next-btn save-t\"\r\n >\r\n Save and Go to Next\r\n \r\n \r\n Go Back\r\n \r\n {/* \r\n Back\r\n */}\r\n\r\n {/* */}\r\n\r\n {/* \r\n \r\n */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Store not found\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n This store is not yet part of our database.\r\n Let us know if this store needs to be added\r\n to our system. Our research team will review\r\n your inquiry and add the store to our\r\n database within 72 hours.\r\n
\r\n Please make sure you have entered a valid\r\n address.\r\n
\r\n
\r\n If you believe you have received this message in\r\n error, please contact our support team at{\" \"}\r\n {CONFIG.Mail_Support} or{\" \"}\r\n {CONFIG.RegionId === 3\r\n ? CONFIG.Sales_Support\r\n : CONFIG.Toll_Free}\r\n .\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n ) : this.state.activeStep === 1 ? (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {/* \r\n \r\n \r\n \r\n\r\n */}\r\n
\r\n
\r\n Define your coverage type{\" \"}\r\n \r\n
\r\n \r\n \r\n }\r\n label=\"Radius\"\r\n />\r\n \r\n }\r\n label=\"Zip or Postal Code(s) *\"\r\n />\r\n \r\n }\r\n label=\"City Name *\"\r\n />\r\n
\r\n \r\n {CONFIG.RegionId == 2 || CONFIG.RegionId == 4\r\n ? \"How many kilometres would you like to choose as your Radius?\"\r\n : \"How many miles would you like to choose as your Radius?\"}\r\n \r\n {/* \r\n {(CONFIG.RegionId == 2) ||(CONFIG.RegionId == 4) ?'10 kilometres':'10 miles'}*/}\r\n \r\n \r\n
{this.state.coverageTrackCount > 0 ? 'Expect about ' + this.state.coverageTrackCount : 'There are no'} competitor{this.state.coverageTrackCount === 1 ? '' : 's'} in this zip code(s).
\r\n You are tracking{\" \"}\r\n {this.state.trackResponse.trackCount > 0\r\n ? this.state.trackResponse.trackCount\r\n : \"no\"}{\" \"}\r\n competitor\r\n {this.state.trackResponse.trackCount > 1\r\n ? \"s\"\r\n : this.state.trackResponse.trackCount === 0\r\n ? \"s\"\r\n : \"\"}{\" \"}\r\n in this Market.{\" \"}\r\n \r\n Go to the Market Dashboard\r\n {\" \"}\r\n or click below to go back to My Markets.\r\n
\r\n {/*
{this.state.trackResponse.trackCount} Store{this.state.trackResponse.trackCount > 1 ? 's' : ''} are tracked in this Market. You can go to the Market Dashboard or go back to My Markets by clicking the button below.
{this.state.trackResponse.trackCount} Store{this.state.trackResponse.trackCount > 1 ? 's' : ''} are tracked in this Market. You can immediately view this Market Dashboard or go back to My Markets screen by clicking the button below
\r\n You are tracking{\" \"}\r\n {this.state.trackResponse.trackCount > 0\r\n ? this.state.trackResponse.trackCount\r\n : \"no\"}{\" \"}\r\n competitor\r\n {this.state.trackResponse.trackCount > 1\r\n ? \"s\"\r\n : this.state.trackResponse.trackCount === 0\r\n ? \"s\"\r\n : \"\"}{\" \"}\r\n in this Market.{\" \"}\r\n \r\n Go to the Market Dashboard\r\n {\" \"}\r\n or click below to go back to My Markets.\r\n
\r\n {/*
{this.state.trackResponse.trackCount} Store{this.state.trackResponse.trackCount > 1 ? 's' : ''} are tracked in this Market. You can go to the Market Dashboard or go back to My Markets by clicking the button below.
These are the stores found within the coverage area you selected.
Not your competition? We get it, maybe the guys across the street are no match to the value you bring to your customers. To remove any of stores/competitors from the market insights you see throughout the site, unselect the box under Track next to the store and click Save.
' : \"
This page shows all the Markets you have set up, if any. If you haven't yet (what are you waiting for?!), click on the +Add Market icon and follow the steps to set up your first Market.
Date Added
The date the Market you set up this Market
Market Name
Click on any Market name to view that Market's detailed insights
Address
The address for this Market
Coverage
This is the coverage/competitor area you selected for this Market. Click on this to change the coverage at any time
Stores
To view all the competing stores for this Market, click on this
Go to Dashboard
Click on the icon to go to the detailed Market insights
Download Competitor Report
Click on the icon to download an Excel spreadsheet with a detailed report comparing your store's rates against the rates of the competitor stores in this market. You will see the rates for all your unit types and how they compare against the market average and matching units at competitor stores.
Edit Market Info
Edit the address for this Market or delete it (however, keep in mind making changes to the address for a Market can result in additional fees to your subscription - contact us for additional information)
My Markets {countlen > 0 || this.state.ch > 0 ? You have set up {myMarketData.result1.length} out of {this.state.ch} markets. : ''} {countlen == ch ? Please upgrade your subscription to add more markets. : ''}
\r\n\r\n \r\n \r\n Are you sure you want to delete this market?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Changing the address for this market may result in additional fees to your subscription. Click Continue to edit the address.\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Your competitor report is being processed and will be automatically downloaded when ready.\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n\r\n \r\n Before you can view your competitors pricing and promotions, you must define the geographical coverage zone for this market. \r\n \r\n \r\n \r\n \r\n
7-day access to a market with a 10-mile radius. Explore all pricing, inventory, and market data without obligation. Dive into valuable insights and make informed decisions with ease.
Full access to all Optimize features and functions tailored to your market. Stay ahead with up-to-date competitive data on pricing and inventory. Enjoy hassle-free monthly billing with easy cancellation.
As low as {multiMarket ? : curSymb + '0'} per market/month
\r\n
\r\n
For multi-store operators
\r\n {/*
\r\n
\r\n as low as {multiMarket ? : curSymb + '0'}\r\n
\r\n
\r\n per market/per month\r\n
\r\n
*/}\r\n \r\n \r\n
Perfect for operators managing multiple markets. Enjoy access to all features and functions per market. Stay ahead with real-time competitive data on pricing and inventory. Monthly billing with hassle-free cancellation.
0 && showState === true ? 6 : 12} className={CONFIG.RegionId === MatchingCountryCode.UK_RID ? \"postal-code-uk left-padding-a-m\" : \"left-padding-a-m\"}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Below the modal for status information */}\r\n
\r\n \r\n \r\n \r\n {userType === \"1\" && userStatus === \"2\" ? 'Your Subscription has been cancelled, Please update your credit card details to activate your subscription.' : ''}\r\n {userType === \"2\" && userStatus === \"2\" || userType == \"2\" && isPaid == \"0\" ? 'Your Trial period has been expired, Please upgrade your subscription by edit subscription.' : ''}\r\n \r\n \r\n \r\n\r\n \r\n Please add billing details before edit the subscription\r\n \r\n \r\n \r\n {snackMsg}}\r\n action={[\r\n \r\n \r\n \r\n ]}\r\n />\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n","import React from 'react';\r\nimport './QuoteMarket.css';\r\nimport { HashLink as Link } from 'react-router-hash-link';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport { AvForm, AvField } from 'availity-reactstrap-validation';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Label, FormText, Button } from 'reactstrap';\r\nimport FormGroup from '@material-ui/core/FormGroup';\r\nimport axios from 'axios';\r\nimport { CONFIG } from '../../utils/config';\r\nimport Snackbar from '@material-ui/core/Snackbar';\r\nimport PhoneInput from 'react-phone-number-input/input';\r\nimport 'react-phone-number-input/style.css'\r\n\r\nexport default class QuoteMarket extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n Open: false,\r\n phoneErr: '',\r\n emailErr: '',\r\n isLoading1: false,\r\n phone: '',\r\n apiErr: '',\r\n phoneMaxLength:CONFIG.PhoneMaxLength\r\n };\r\n this.handleClickOpen = this.handleClickOpen.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.ModalClickOpen = this.ModalClickOpen.bind(this);\r\n\r\n }\r\n ModalClickOpen() {\r\n this.handleClickOpen();\r\n }\r\n phoneKeyPressed = (event) => {\r\n this.setState({ keyCode: event.keyCode });\r\n}\r\nsnackHandleclose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n this.setState({ snackOpen: false });\r\n};\r\nonPhoneChangeML = (event) => {\r\n var string = event.target.value;\r\n var replacedString = event.target.value; //event.target.value.replace(/-/g, \"\").replace(\"(\", \"\").replace(\")\", \"\");\r\n var numericRegex = /^[ 0-9*()+-]*$/;///^([0-9]*)$/;\r\n var valid = numericRegex.exec(replacedString);\r\n var keyCode = this.state.keyCode;\r\n let phoneErr = '';// 'Phone is invalid';\r\n let phoneFieldBorder = '0';// '1';\r\n\r\n if (valid) {\r\n string = replacedString;\r\n // var regex = CONFIG.PhoneRegex;\r\n // var match = regex.exec(string);\r\n // if (match) {\r\n // match.shift();\r\n // match[0] = \"(\" + match[0] + \")\";\r\n // string = match.join(\"-\");\r\n phoneErr = '';\r\n phoneFieldBorder = '0';\r\n // }\r\n } else {\r\n if (keyCode !== 8 && keyCode !== 46) {\r\n string = this.state.phone;\r\n }\r\n }\r\n\r\n if (string === \"\") {\r\n phoneErr = 'Phone is required';\r\n phoneFieldBorder = '1';\r\n }\r\n this.setState({ phone: string, phoneErr, phoneFieldBorder, keyCode: '' });\r\n}\r\nonPhoneChangesML = (event) => {\r\n var string = event;\r\n let phoneErr = '';// 'Phone is invalid';\r\n let phoneFieldBorder = '0';// '1';\r\n if (string === \"\" || string === undefined) {\r\n phoneErr = 'Phone is required';\r\n phoneFieldBorder = '1';\r\n }\r\n this.setState({ phone: string, phoneErr, phoneFieldBorder, keyCode: '' });\r\n}\r\n multpleLocationSubmit(event, errors, values) {\r\n let formValid = true;\r\n\r\n\r\n //Phone number validation starts\r\n let phoneErr = '';\r\n let phoneFieldBorder = '0';\r\n if (this.state.phone === \"\") {\r\n\r\n phoneErr = 'Phone is required';\r\n phoneFieldBorder = '1';\r\n formValid = false;\r\n } else if (this.state.phone.length < CONFIG.PhoneMinLength) {\r\n phoneErr = 'Phone is invalid';\r\n phoneFieldBorder = '1';\r\n formValid = false;\r\n }\r\n let noofstores = this.props.parm;\r\n\r\n this.setState({ phoneErr, phoneFieldBorder, noofstores, apiErr: '' });\r\n\r\n //Phone number validation end\r\n\r\n\r\n if (errors.length > 0) {\r\n formValid = false;\r\n }\r\n if (formValid) {\r\n if (errors.length > 0) {\r\n console.log(errors);\r\n }\r\n else {\r\n let data = {\r\n \"fName\": values.fName.trim(),\r\n \"lName\": values.lName.trim(),\r\n \"company\": values.company.trim(),\r\n \"phone\": this.state.phone.replace(/[^\\d]/g, ''),\r\n \"email\": values.email.trim(),\r\n \"noofstores\": this.props.parm,\r\n \"RegionID\":CONFIG.RegionId\r\n }\r\n this.setState({ isLoading1: true });\r\n axios.post(CONFIG.API_URL + 'subscription/getquote', data)\r\n .then(res => {\r\n\r\n this.myFormRef && this.myFormRef.reset();\r\n this.setState({ phoneErr: '', phoneFieldBorder: '', phone: '', apiErr:'' });\r\n let msg = \"Thank you for submitting your request. We will contact you shortly regarding your 100+ subscription request.\";\r\n this.setState({Open:false, isLoading1: false});\r\n this.setState({ snackOpen: true, snackMSg: msg });\r\n this.props.parentMethod()\r\n \r\n \r\n })\r\n .catch(err => {\r\n \r\n let msg = err.response.data.Message;\r\n this.setState({ isLoading1: false, apiErr: msg });\r\n // this.props.parentMethod()\r\n });\r\n }\r\n }\r\n\r\n }\r\n resetAllValues() {\r\n this.myFormRef && this.myFormRef.reset();\r\n this.setState({ phoneErr: '', phoneFieldBorder: '', phone: '', apiErr: '' });\r\n }\r\n handleClickOpen() {\r\n this.setState({\r\n Open: true\r\n })\r\n }\r\n\r\n handleClose() {\r\n this.setState({\r\n Open: false, phoneErr: '', phoneFieldBorder: '', phone: '', apiErr: ''\r\n })\r\n this.props.parentMethod()\r\n }\r\n\r\n\r\n\r\n render() {\r\n const { Open, isLoading1, snackMSg, snackOpen } = this.state;\r\n\r\n return (\r\n
\r\n {isLoading1 ?
: ''}\r\n \r\n \r\n
\r\n
Quote for StorTrack Optimize
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
You have requested pricing for 100 or more markets. To complete this request, please fill out and submit the form below or call us at {CONFIG.Toll_Free} {CONFIG.RegionId === 3 ? \"UK Direct tel:\" +CONFIG.Sales_Support : ''} for assistance. We will contact you soon to discuss your specific needs.
We appreciate your feedback. Please let us know in a few words your reason(s) for cancelling your subscription, and any feedback that can make StorTrack Optimize better.
\r\n
\r\n {/* */}\r\n \r\n
\r\n Cancel\r\n \r\n \r\n
\r\n {/* \r\n Confirm\r\n */}\r\n
\r\n \r\n \r\n \r\n
Your subscription has been cancelled. You will receive an email confirmation soon.
\r\n
Thank you for using StorTrack Optimize.
\r\n
We are constantly improving StorTrack Optimize - Please check back with us again. We welcome you back at any time. If you have any questions regarding the cancellation of your subscription please contact us at {CONFIG.Toll_Free} {CONFIG.RegionId === 3 ? \"UK Direct tel:\" + CONFIG.Sales_Support : ''}.
\r\n
\r\n\r\n
\r\n {/* Cancel */}\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n\r\n {this.state.areyouSure ?\r\n
\r\n Confirm the following updates to your subscription\r\n
\r\n Your New Monthly Total: {countryCurrency}{this.state.totalValue ? this.state.totalValue.toFixed(2) : 0}\r\n {/* {storeData && storeData.Subscription ? storeData.Subscription.TotalPrice : 'N/A'} */}\r\n
\r\n\r\n {/* {nextBillingDate ?
Your card will not be charged now. We will charge your credit card the new rate when your monthly subscription is due on {moment(nextBillingDate).format('DD-MMM-YYYY').replace(\"--\", \"-\")}.
: ''} */}\r\n {nextBillingDate ?
Your card will not be charged now. We will charge your credit card the new rate when your monthly subscription is due on {nextBillingDate}.
: ''}\r\n\r\n {this.state.errCard}\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n :\r\n
\r\n Payment Details\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {this.state.errCard}\r\n \r\n\r\n
\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n }\r\n\r\n \r\n\r\n
\r\n \r\n \r\n \r\n Your subscription has been updated successfully.\r\n \r\n \r\n this.updateMenu()} className=\"btn-save btn btn-secondary\">Go to My Markets\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport HubspotForm from 'react-hubspot-form';\r\nimport './Requesttrial.css'\r\n//import { Link } from 'react-router-dom';\r\nimport { Container, Col, Row } from 'reactstrap';\r\n// import axios from 'axios';\r\nimport './Requesttrial.css';\r\n\r\nexport default class Requesttrial extends React.Component {\r\n \r\n render() {\r\n\r\n return (\r\n
\r\n \r\n\r\n
\r\n
Thank you for your interest in our FREE 7-day trial
\r\n \r\n
\r\n\r\n\r\n
\r\n
The StorTrack free 7-day trial is based on approval. Please fill in the form below and one of our representatives will contact you to set-up your FREE 7-day access. This will give you access, free of charge, to all functionality of a Basic subscription for one market.
\r\n );\r\n }\r\n}","import React from 'react';\r\nimport './MissingCompetitor.css'\r\nimport { Col, Row, Modal, ModalHeader, ModalBody, Button, FormText, Label } from 'reactstrap';\r\nimport { HashLink as Link } from 'react-router-hash-link';\r\nimport { AvForm, AvField } from 'availity-reactstrap-validation';\r\nimport NumberFormat from 'react-number-format';\r\nimport EmailShare from 'react-email-share-link'\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport MuiDialogTitle from '@material-ui/core/DialogTitle';\r\nimport MuiDialogContent from '@material-ui/core/DialogContent';\r\nimport MuiDialogActions from '@material-ui/core/DialogActions';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport Snackbar from '@material-ui/core/Snackbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport axios from 'axios';\r\nimport { CONFIG ,MatchingCountryCode} from '../../utils/config';\r\nimport PhoneInput from 'react-phone-number-input/input';\r\nimport 'react-phone-number-input/style.css'\r\n\r\nconst styles = theme => ({\r\n root: {\r\n margin: 0,\r\n padding: theme.spacing(2),\r\n },\r\n closeButton: {\r\n position: 'absolute',\r\n right: theme.spacing(1),\r\n top: theme.spacing(1),\r\n color: theme.palette.grey[500],\r\n },\r\n});\r\n\r\nconst DialogTitle = withStyles(styles)(props => {\r\n const { children, classes, onClose } = props;\r\n return (\r\n \r\n {children}\r\n {onClose ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n );\r\n});\r\n\r\nconst DialogContent = withStyles(theme => ({\r\n root: {\r\n padding: theme.spacing(2),\r\n },\r\n}))(MuiDialogContent);\r\n\r\nconst DialogActions = withStyles(theme => ({\r\n root: {\r\n margin: 0,\r\n padding: theme.spacing(1),\r\n },\r\n}))(MuiDialogActions);\r\n\r\nexport default class MissingCompetitor extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n modal: false,\r\n modal1: false,\r\n phoneFieldBorder: '0',\r\n phoneErr: '',\r\n phone: '',\r\n snackMSg: '',\r\n snackOpen: false,\r\n validError: '',\r\n phoneMaxLength: CONFIG.PhoneMaxLength,\r\n StateCountryCount: 1,\r\n \r\n };\r\n this.missingCompetitorSubmit = this.missingCompetitorSubmit.bind(this);\r\n this.snackHandleclose = this.snackHandleclose.bind(this);\r\n this.postalCodeValidation = this.postalCodeValidation.bind(this);\r\n\r\n }\r\n\r\n snackHandleclose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n this.setState({ snackOpen: false });\r\n };\r\n\r\n toggleModal = () => {\r\n // axios.get(CONFIG.API_URL + 'home/lookupdata')\r\n axios.get(CONFIG.API_URL + 'home/lookupdata/' + CONFIG.RegionId +'/'+ 0)\r\n .then(response => {\r\n\r\n let stateData = response.data.lookups.statesList;\r\n //To know how many Countries in statesList data\r\n let StateCountryCount = stateData.filter(data => {\r\n return data.stateID === '';\r\n }).length;\r\n this.setState({\r\n stateData, StateCountryCount\r\n })\r\n // console.log(stateData,\"hiiii\");\r\n })\r\n .catch((err) => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n\r\n });\r\n this.setState(state => ({ modal: !state.modal }))\r\n }\r\n\r\n toggleModal1 = () => {\r\n // axios.get(CONFIG.API_URL + 'home/lookupdata')\r\n axios.get(CONFIG.API_URL + 'home/lookupdata/' + CONFIG.RegionId+'/'+ 0)\r\n .then(response => {\r\n\r\n let stateData = response.data.lookups.statesList;\r\n //To know how many Countries in statesList data\r\n let StateCountryCount = stateData.filter(data => {\r\n return data.stateID === '';\r\n }).length;\r\n this.setState({\r\n stateData, StateCountryCount\r\n })\r\n // console.log(stateData,\"hiiii\");\r\n })\r\n .catch((err) => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n\r\n });\r\n this.setState(state => ({ modal1: !state.modal1 }))\r\n }\r\n\r\n cancelMissingCompetitor = () => this.setState(state => ({ modal: !state.modal, phoneErr: '', phoneFieldBorder: '', phone: '', validError: '' }))\r\n\r\n cancelMissingCompetitor1 = () => this.setState(state => ({ modal1: !state.modal1, phoneErr: '', phoneFieldBorder: '', phone: '', validError: '' }))\r\n\r\n componentDidMount() {\r\n if (typeof window.dataLayer != \"undefined\" && this.props.isShowModal) {\r\n window.dataLayer.push({\r\n \"event\": \"show popup\",\r\n 'eventCategory': 'popup',\r\n 'eventAction': 'show',\r\n 'eventLabel': this.state.popupName,\r\n });\r\n }\r\n }\r\n\r\n onPhoneChange = (event) => {\r\n let validError = '';\r\n this.setState({ validError });\r\n var string = event.target.value;\r\n var replacedString = event.target.value;\r\n // var replacedString = event.target.value.replace(/-/g, \"\").replace(\"(\", \"\").replace(\")\", \"\");\r\n var numericRegex = /^[ 0-9*()+-]*$/;// /^([0-9]*)$/;\r\n var valid = numericRegex.exec(replacedString);\r\n var keyCode = this.state.keyCode;\r\n let phoneErr = '';// 'Phone is invalid';\r\n let phoneFieldBorder = '0';// '1';\r\n\r\n if (valid) {\r\n string = replacedString;\r\n // var regex = CONFIG.PhoneRegex;\r\n // var match = regex.exec(string);\r\n // if (match) {\r\n // match.shift();\r\n // match[0] = \"(\" + match[0] + \")\";\r\n // string = match.join(\"-\");\r\n phoneErr = '';\r\n phoneFieldBorder = '0';\r\n // }\r\n } else {\r\n if (keyCode !== 8 && keyCode !== 46) {\r\n string = this.state.phone;\r\n }\r\n }\r\n\r\n if (string === \"\") {\r\n phoneErr = '';\r\n phoneFieldBorder = '0';\r\n }\r\n this.setState({ phone: string, phoneErr, phoneFieldBorder, keyCode: '' });\r\n }\r\n\r\n onPhoneChanges = (event) => {\r\n let validError = '';\r\n this.setState({ validError });\r\n var string = event;\r\n let phoneErr = '';// 'Phone is invalid';\r\n let phoneFieldBorder = '0';// '1';\r\n\r\n\r\n if (string === \"\" || string === undefined) {\r\n phoneErr = '';\r\n phoneFieldBorder = '0';\r\n }\r\n this.setState({ phone: string, phoneErr, phoneFieldBorder, keyCode: '' });\r\n }\r\n\r\n phoneKeyPressed = (event) => {\r\n this.setState({ keyCode: event.keyCode });\r\n }\r\n\r\n missingCompetitorSubmit(event, errors, values) {\r\n let validError = '';\r\n this.setState({ validError });\r\n values.Phone = this.state.phone;\r\n values['RegionId'] = CONFIG.RegionId;\r\n //Phone number validation starts\r\n let phoneErr = '';\r\n let status = values.status;\r\n let phoneFieldBorder = '0';\r\n\r\n this.setState({ phoneErr, phoneFieldBorder });\r\n //Phone number validation end\r\n if (values.WebsiteUrl !== \"\" || values.MarketName !== \"\" || values.Address !== \"\") {\r\n var regexp = /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/;\r\n var zipcodeValid = /(^[a-zA-Z0-9]+$)/; \r\n \r\n if (this.state.phone !== \"\" && this.state.phone.length < CONFIG.PhoneMinLength) {\r\n\r\n // phoneErr = 'Phone is invalid';\r\n // phoneFieldBorder = '1';\r\n // formValid = false;\r\n //alert('Phone is invalid');\r\n let validError = 'Phone is invalid';\r\n this.setState({ validError });\r\n } else if (values.WebsiteUrl !== \"\" && !regexp.test(values.WebsiteUrl)) {\r\n let validError = 'Website URL is invalid';\r\n this.setState({ validError });\r\n } else if (values.Zipcode !== \"\" && !zipcodeValid.test(values.Zipcode)){\r\n\r\n }\r\n else {\r\n this.setState({ isLoading: true });\r\n let token = localStorage.getItem('accessKey');\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n }\r\n axios.post(CONFIG.API_URL + 'Market/missingcompetitor', values)\r\n .then(res => {\r\n if (res.status === 200) {\r\n this.myFormRef && this.myFormRef.reset();\r\n let msg = \"Sucessfully submitted your request.\";\r\n if (status === 1) {\r\n this.setState(state => ({ modal1: !state.modal1, phone: '' }))\r\n } else {\r\n this.setState(state => ({ modal: !state.modal, phone: '' }))\r\n }\r\n this.setState({ snackOpen: true, snackMSg: msg });\r\n // this.setState({ modal: false });\r\n }\r\n })\r\n .catch((err) => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n }\r\n else {\r\n // this.setState({ snackOpen: true, snackMSg: \"Please enter Location Name or Address or Website URL.\" });\r\n // alert(\"Please enter Location Name or Address or Website URL.\");\r\n let validError = 'Please enter Market Name or Address or Website URL.';\r\n this.setState({ validError });\r\n }\r\n }\r\n postalCodeValidation = (e) => {\r\n var code = ('charCode' in e) ? e.charCode : e.keyCode;\r\n if (!(code == 32) && // space\r\n !(code > 47 && code < 58) && // numeric (0-9)\r\n !(code > 64 && code < 91) && // upper alpha (A-Z)\r\n !(code > 96 && code < 123)) { // lower alpha (a-z)\r\n e.preventDefault();\r\n }\r\n \r\n }\r\n render() {\r\n const { stateData, snackMSg, snackOpen, StateCountryCount } = this.state;\r\n return (\r\n
\r\n Notify us of Missing Stores\r\n Are there any stores missing?\r\n {snackMSg}}\r\n action={[\r\n \r\n \r\n \r\n ]}\r\n />\r\n \r\n\r\n\r\n \r\n Missing Competitor\r\n \r\n
Identify Missing Stores
\r\n
No problem, just list the name, address and website, if possible and we'll work on getting them into our database as quickly as possible.
Not sure how we missed this one, but we will find it and add it as soon as we can! If we have any trouble, we will be in contact with you. Check back shortly to see this store added!
\r\n
If you have any questions or comments let us know.
),\r\n )\r\n );\r\n }\r\n}\r\n\r\nexport default flow(\r\n DragSource(\r\n 'card',\r\n cardSource,\r\n (connect, monitor) => ({\r\n connectDragSource: connect.dragSource(),\r\n isDragging: monitor.isDragging(),\r\n }),\r\n ),\r\n DropTarget('card', cardTarget, (connect) => ({\r\n connectDropTarget: connect.dropTarget(),\r\n }))\r\n)(Card);","import React, { Component } from \"react\";\r\nimport {\r\n Col,\r\n Row,\r\n Button,\r\n Modal as TrackModalPop,\r\n ModalFooter,\r\n ModalBody,\r\n Dropdown,\r\n DropdownToggle,\r\n DropdownMenu,\r\n DropdownItem,\r\n} from \"reactstrap\";\r\nimport HTML5Backend from \"react-dnd-html5-backend\";\r\nimport { DragDropContext } from \"react-dnd\";\r\nimport Snackbar from \"@material-ui/core/Snackbar\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\n//import {MarketDashboardHeader} from './../MarketDashboardHeader/index';\r\nimport { AvForm, AvField } from \"availity-reactstrap-validation\";\r\nimport Breadcrumbs from \"@material-ui/core/Breadcrumbs\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { HashLink as Link } from \"react-router-hash-link\";\r\nimport \"./MarketDashboard.css\";\r\nimport Card from \"./Card\";\r\nimport { CONFIG } from \"../../utils/config\";\r\nimport axios from \"axios\";\r\nimport { HelpTextPopup } from \"./../HelpTextPopup/index\";\r\n// import exportFromJSON from 'export-from-json';\r\nimport moment from \"moment\";\r\nimport { faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n// const exportType = 'xls';\r\nimport Workbook from \"react-excel-workbook\";\r\nimport { faFilePdf } from \"@fortawesome/free-solid-svg-icons\";\r\nimport PictureAsPdfIcon from \"@material-ui/icons/PictureAsPdf\";\r\nimport ExcelDownload from \"../../Assets/Images/excel-download.png\";\r\nimport CsvDownload from \"../../Assets/Images/csv-download.png\"\r\n\r\nclass MarketDashboard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n storeid: props.match.params.storeid,\r\n cards: [],\r\n storedata: [],\r\n isLoading: false,\r\n storeInformation: [],\r\n countryCode: \"\",\r\n storeAddress: \"\",\r\n priceTrends: 2,\r\n priceTrendsAvg: \"\",\r\n currentDate: new Date(),\r\n resultArray: [],\r\n fileName: \"\",\r\n marketDownloadData: [],\r\n downloadInput: [],\r\n pdfLoading: true,\r\n snackOpen: false,\r\n snackMsg: \"\",\r\n snackClr: \"\",\r\n modal: false,\r\n myMarketData: [],\r\n excelProgress: false,\r\n dropdownOpen: false,\r\n };\r\n this.handler = this.handler.bind(this);\r\n this.refreshMenu = this.refreshMenu.bind(this);\r\n this.submitRabitQueue = this.submitRabitQueue.bind(this);\r\n this.downLoadReport = this.downLoadReport.bind(this);\r\n localStorage.setItem(\"StId\", props.match.params.storeid);\r\n }\r\n //download file excel format\r\n // downloadExcel() {\r\n // let token = localStorage.getItem(\"accessKey\");\r\n // if (token) {\r\n // axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n // }\r\n // const marketIp = {\r\n // UserStoreID: parseInt(this.state.storeid),\r\n // RegionId: CONFIG.RegionId,\r\n // };\r\n // axios\r\n // .post(CONFIG.API_URL + \"market/downloadalldata\", marketIp)\r\n // .then((res) => {\r\n // let marketDownloadData = res.data.unitdata;\r\n // this.setState({ marketDownloadData }, () => {\r\n // this.download();\r\n // });\r\n // })\r\n // .catch((err) => {\r\n // if (err.response.status === 401) {\r\n // localStorage.removeItem(\"accessKey\");\r\n // const { from } = this.props.location.state || {\r\n // from: { pathname: \"/\" },\r\n // };\r\n // this.props.history.push(from);\r\n // } else if (err.response.status === 403) {\r\n // const { from } = this.props.location.state || {\r\n // from: { pathname: \"/UnauthorizedAccess\" },\r\n // };\r\n // this.props.history.push(from);\r\n // } else {\r\n // alert(err.response.data);\r\n // }\r\n // });\r\n // }\r\n // download() {\r\n // let date = this.state.currentDate;\r\n // var day = date.getDate();\r\n // var month = date.getMonth();\r\n // var year = date.getFullYear();\r\n // let fileName,\r\n // vehicle,\r\n // covered,\r\n // advertisedOnlineRate,\r\n // dtAdvertisedOnlineRateChanged,\r\n // advertisedWalkInRate,\r\n // promo,\r\n // dtPromoChanged,\r\n // alarm,\r\n // climate,\r\n // doorType,\r\n // driveUp,\r\n // elevator,\r\n // storename,\r\n // searchName,\r\n // state,\r\n // size,\r\n // storeAddress,\r\n // humidity,\r\n // outdoorAccess,\r\n // power,\r\n // adPromoDate,\r\n // adOnlineDate,\r\n // adWalkinDate, proximity;\r\n // let resultArray = [];\r\n // let inputArray = [];\r\n // let downloadInputMerge = [];\r\n // let units = (CONFIG.RegionId == 2) || (CONFIG.RegionId == 4) ? ' ' + 'km' : ' ' + 'mi';\r\n // var currency = this.state.storeAddress.countryCurrency;\r\n // let downloadInput = [];\r\n // inputArray = this.state.marketDownloadData;\r\n // inputArray.map((data) => {\r\n // searchName = data.searchName ? data.searchName : \"N/A\";\r\n // storename = data.competitorName ? data.competitorName : \"N/A\";\r\n // storeAddress = data.address ? data.address : \"N/A\";\r\n // state = data.state ? data.state : \"N/A\";\r\n // size = data.size ? data.size.toString() : \"N/A\";\r\n // climate = data.climateControlled === 1 ? \"ClimateControlled, \" : \"\";\r\n // humidity = data.humidityControlled === 1 ? \"HumidityControlled, \" : \"\";\r\n // outdoorAccess = data.outdoorAccess === 1 ? \"OutdoorAccess, \" : \"\";\r\n // alarm = data.alarm === 1 ? \"Alarm, \" : \"\";\r\n // power = data.power === 1 ? \"Power, \" : \"\";\r\n // covered = data.covered === 1 ? \"Covered, \" : \"\";\r\n // vehicle = data.vehicle === 1 ? \"Vehicle, \" : \"\";\r\n // driveUp = data.driveUp === 1 ? \"DriveUp, \" : \"\";\r\n // doorType =\r\n // data.doorType > 0\r\n // ? data.doorType === 1\r\n // ? \"Roll-Up Door, \"\r\n // : data.doorType === 2\r\n // ? \"Swing Door, \"\r\n // : data.doorType === 3\r\n // ? \"Double Door, \"\r\n // : data.doorType === 4\r\n // ? \"Chain-Link Door, \"\r\n // : data.doorType === 5\r\n // ? \"Other Door, \"\r\n // : \"\"\r\n // : \"\";\r\n // elevator = data.elevator === 1 ? \"Elevator, \" : \"\";\r\n // //advertisedWalkInRate = data.advertisedWalkInRate ? currency + data.advertisedWalkInRate : 'N/A';\r\n // advertisedWalkInRate =\r\n // data.advertisedWalkInRate &&\r\n // data.advertisedWalkInRate != 0 &&\r\n // data.advertisedWalkInRate != null\r\n // ? data.isMonthly === 1\r\n // ? currency + data.advertisedWalkInRate + \"*\"\r\n // : currency + data.advertisedWalkInRate\r\n // : \"N/A\";\r\n // adWalkinDate = data.dtAdvertisedWalkInRateChanged\r\n // ? moment(data.dtAdvertisedWalkInRateChanged).format(\"DD-MMM-YYYY\")\r\n // : \"N/A\";\r\n // //advertisedOnlineRate = data.advertisedOnlineRate ? currency + data.advertisedOnlineRate : 'N/A';\r\n // advertisedOnlineRate =\r\n // data.advertisedOnlineRate &&\r\n // data.advertisedOnlineRate != 0 &&\r\n // data.advertisedOnlineRate != null\r\n // ? data.isMonthly === 1\r\n // ? currency + data.advertisedOnlineRate + \"*\"\r\n // : currency + data.advertisedOnlineRate\r\n // : \"N/A\";\r\n // dtAdvertisedOnlineRateChanged = data.dtAdvertisedOnlineRateChanged\r\n // ? moment(data.dtAdvertisedOnlineRateChanged).format(\"DD-MMM-YYYY\")\r\n // : \"N/A\";\r\n // promo = data.promo ? data.promo : \"N/A\";\r\n // dtPromoChanged = data.dtPromoChanged\r\n // ? moment(data.dtPromoChanged).format(\"DD-MMM-YYYY\")\r\n // : \"N/A\";\r\n // let str =\r\n // alarm +\r\n // climate +\r\n // doorType +\r\n // driveUp +\r\n // elevator +\r\n // humidity +\r\n // vehicle +\r\n // outdoorAccess +\r\n // power +\r\n // covered;\r\n // var features = str.replace(/,\\s*$/, \"\");\r\n // proximity = data.proximity && data.proximity !== 'empty' ? data.proximity.toFixed(2) + units : '';\r\n // downloadInputMerge.push({\r\n // SEARCHNAME: searchName,\r\n // STORENAME: storename,\r\n // ADDRESS: storeAddress,\r\n // PROXIMITY: proximity,\r\n // STATE: state,\r\n // SIZE: size,\r\n // FLOOR: data.floor ? data.floor : \"N/A\",\r\n // FEATURES: features, //alarm + climate + doorType + driveUp + elevator + humidity + outdoorAccess + power,\r\n // \"ADVERTISED WALK-IN RATE\": advertisedWalkInRate, //data.regPrice && data.regPrice != 0 ? (data.isMonthly === 1 ? currency + data.regPrice + '*' : currency + data.regPrice) : 'N/A',\r\n // \"WALK-IN RATE LAST CHANGED\": adWalkinDate,\r\n // \"ADVERTISED ONLINE RATE\": advertisedOnlineRate, //data.onlinePrice && data.onlinePrice != 0 ? (data.isMonthly === 1 ? currency + data.onlinePrice + '*' : currency + data.onlinePrice) : 'N/A',\r\n // \"ONLINE RATE LAST CHANGED\": dtAdvertisedOnlineRateChanged, //adOnlineDate,\r\n // \"ADVERTISED PROMOTION\": promo,\r\n // \"PROMOTION LAST CHANGED\": dtPromoChanged,\r\n // });\r\n // });\r\n // var merge = [\r\n // {\r\n // SEARCHNAME: \"* This rate is calculated from an advertised monthly rate\",\r\n // },\r\n // ];\r\n // downloadInput =\r\n // CONFIG.RegionId === 3\r\n // ? downloadInputMerge.concat(merge)\r\n // : downloadInputMerge;\r\n // var stoName =\r\n // this.state.storeAddress.storeName &&\r\n // this.state.storeAddress.storeName !== \"\" &&\r\n // this.state.storeAddress.storeName !== undefined &&\r\n // this.state.storeAddress.storeName !== null\r\n // ? this.state.storeAddress.storeName\r\n // : \"Your Store\";\r\n // fileName =\r\n // stoName + \"_\" + moment(this.state.currentDate).format(\"DD-MMM-YYYY\");\r\n // //var result = exportFromJSON({ data, fileName, exportType, formateDate: 'yyyy/mm/dd' });\r\n // this.setState({ downloadInput, fileName });\r\n // }\r\n\r\n //Ignored\r\n // downloadExcel(){\r\n // let data = '';\r\n // let date = this.state.currentDate;\r\n // var day = date.getDate();\r\n // var month = date.getMonth();\r\n // var year = date.getFullYear();\r\n // let fileName;\r\n // let resultArray = [];\r\n // let inputArray = [];\r\n // var currency = this.state.storeAddress.countryCurrency;\r\n // inputArray = this.state.cards;\r\n // inputArray.map(data =>{\r\n // if(data != 'Add New')\r\n // {\r\n // let priceTrend = data.priceTrend ? data.priceTrend.toString() : 'N/A';\r\n // let name = data.name.toString();\r\n // resultArray.push({\r\n // \"Name\": name,\r\n // \"Offered by\": data.storeCount > 1 ? data.storeCount + ' stores' : data.storeCount != 0 ? data.storeCount + ' store' : 'N/A',\r\n // \"Avg. Market Price\": data.avgPrice != \"N/A\" && data.avgPrice != 0 ? currency + data.avgPrice : 'N/A',\r\n // \"Your Price\": data.myStorePrice != 'N/A' && data.myStorePrice != 0 ? currency + data.myStorePrice : 'N/A',\r\n // \"Price Trends\": priceTrend,\r\n // \"Show Price Trend for\": this.state.priceTrends === 1 ? 'Last 5 days' : this.state.priceTrends === 2 ? 'Last 30 days' : this.state.priceTrends === 3 ? 'Last 90 days' : this.state.priceTrends === 4 ? 'Last 6 Months' : 'Last 12 Months'\r\n // })\r\n // }\r\n // })\r\n // data = resultArray;\r\n // fileName = this.state.storeAddress.storeName? this.state.storeAddress.storeName+'_'+ moment(this.state.currentDate).format(\"DD-MMM-YYYY\") : '';\r\n // //var result = exportFromJSON({ data, fileName, exportType });\r\n // this.setState({resultArray, fileName});\r\n // }\r\n\r\n setToggle = () => {\r\n this.setState((prevState) => ({\r\n dropdownOpen: !prevState.dropdownOpen,\r\n }));\r\n };\r\n\r\n refreshMenu() {\r\n localStorage.setItem(\"refreshMenu\", \"show-menu\");\r\n var isElement = document.getElementById(\"r2\");\r\n if (isElement == null) {\r\n document.getElementById(\"r1\").click();\r\n } else {\r\n document.getElementById(\"r1\").click();\r\n document.getElementById(\"r2\").click();\r\n }\r\n }\r\nasync componentDidMount(priceTrendss) {\r\n this.setState({\r\n isLoading: true,\r\n marketDownloadData: [],\r\n });\r\n const userstoreid = this.state.storeid;\r\n let priceTrends1 = \"\";\r\n if (priceTrendss) {\r\n priceTrends1 = priceTrendss;\r\n } else {\r\n priceTrends1 = this.state.priceTrends;\r\n }\r\n let token = localStorage.getItem(\"accessKey\");\r\n // console.log(token);\r\n\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n\r\n if (userstoreid) {\r\n let data = {\r\n UserStoreId: userstoreid,\r\n SortId: priceTrends1,\r\n RegionId: CONFIG.RegionId,\r\n };\r\n // axios.post(CONFIG.API_URL + 'market/dashboard/' + userstoreid + '/' + priceTrends1)\r\n const response = await axios.post(CONFIG.API_URL + \"market/dashboard/\", data)\r\n if(response.status === 200){\r\n this.state.countryCode = response.data.board.storeInformation.countryCode;\r\n this.state.storeInformation =\r\n response.data.board.storeInformation.countryCurrency;\r\n this.state.cards = response.data.board.units;\r\n const storedata = response.data.board.storeInformation;\r\n this.state.cards.unshift(\"Add New\");\r\n\r\n // this.setState({ isLoading: false, storedata }, () => {\r\n // this.downloadExcel();\r\n // });\r\n this.setState({ isLoading: false, storedata });\r\n /*\r\n }\r\n else\r\n {\r\n alert(\"No store units available\");\r\n const { from } = this.props.location.state || { from: { pathname: \"/my-market/\" } };\r\n this.props.history.push(from);\r\n }*/\r\n }else{\r\n this.setState({ isLoading: false });\r\n if (response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else if (response.status === 403) {\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/UnauthorizedAccess\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n alert(response.data);\r\n }\r\n }\r\n \r\n } else {\r\n alert(\"User store id is empty\");\r\n }\r\n\r\n\r\n const data1 = {\r\n UserStoreID: parseInt(this.state.storeid),\r\n RegionId: CONFIG.RegionId,\r\n };\r\n axios\r\n .post(CONFIG.API_URL + \"dashboard/dashboardlocation/\", data1)\r\n .then((res) => {\r\n let storeAddress = res.data.data.storeDashboard;\r\n // To identify the Status report of Excel report is progress\r\n let excelProgress = storeAddress.reportStatus == 1 ? true : false;\r\n // End of To identify the Status report of Excel report is progress\r\n\r\n // this.setState({ storeAddress, excelProgress }, () => {\r\n // this.downloadExcel();\r\n // });\r\n this.setState({ storeAddress, excelProgress });\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else if (err.response.status === 403) {\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/UnauthorizedAccess\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n alert(err.response.data);\r\n }\r\n });\r\n\r\n\r\n // To Call ExcelReport status Api\r\n this.CallgetStatusReportApi = setInterval(() => this.statusReport(), 30000);\r\n }\r\n\r\n\r\n\r\n //To call the Function\r\n componentWillUnmount() {\r\n clearInterval(this.CallgetStatusReportApi);\r\n }\r\n\r\n // To Get Status of ExcelReport\r\n statusReport() {\r\n if (this.state.excelProgress) {\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n const data = {\r\n UserStoreID: parseInt(this.state.storeid),\r\n RegionId: CONFIG.RegionId,\r\n };\r\n axios\r\n .post(CONFIG.API_URL + \"dashboard/dashboardlocation/\", data)\r\n .then((res) => {\r\n let storeAddress = res.data.data.storeDashboard;\r\n // To identify the Status report of Excel report is progress\r\n let excelProgress = storeAddress.reportStatus == 1 ? true : false;\r\n // End of To identify the Status report of Excel report is progress\r\n\r\n this.setState({ storeAddress, excelProgress });\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n }\r\n\r\n showPriceTrends = (event) => {\r\n let priceTrends = event.target.value;\r\n\r\n this.setState(\r\n { priceTrendsAvg: priceTrends, priceTrends: priceTrends },\r\n () => {\r\n this.componentDidMount(priceTrends);\r\n }\r\n );\r\n };\r\n\r\n moveCard = (dragIndex, hoverIndex) => {\r\n const dragCard = this.state.cards[dragIndex];\r\n this.state.cards.splice(dragIndex, 1);\r\n this.state.cards.splice(hoverIndex, 0, dragCard);\r\n\r\n this.setState({ cards: this.state.cards });\r\n const userstoreid = this.state.storeid;\r\n let removeCard = this.state.cards;\r\n removeCard.shift();\r\n this.state.cards.unshift(\"Add New\");\r\n let reorderid = removeCard;\r\n let arr = [];\r\n\r\n reorderid.forEach(function (e) {\r\n arr.push(e.searchid);\r\n });\r\n\r\n let searchorder = arr.toString();\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n let data = {\r\n UserStoreId: userstoreid,\r\n OrderList: searchorder,\r\n RegionId: CONFIG.RegionId,\r\n };\r\n // axios.post(CONFIG.API_URL + 'Market/unitorder/' + userstoreid + '/' + searchorder)\r\n axios\r\n .post(CONFIG.API_URL + \"Market/unitorder/\", data)\r\n .then((res) => {\r\n // console.log(res)\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n // alert(err.response.data);\r\n }\r\n });\r\n };\r\n handler() {\r\n this.componentDidMount();\r\n }\r\n downLoadPDF() {\r\n this.setState({\r\n // isLoading: true,\r\n pdfLoading: false,\r\n });\r\n var currentDate = moment(new Date()).format(\"DD-MMM-YYYY\");\r\n let pta = this.state.priceTrendsAvg ? this.state.priceTrendsAvg : 2;\r\n let usId = this.props.match.params.storeid;\r\n let accessKey = localStorage.getItem(\"SecretKey\");\r\n //let accessKey = '3f2b471776bc41cf863720bfc8cf9cb9';\r\n var timestamp =\r\n new Date().getDate() +\r\n \"\" +\r\n new Date().getMonth() +\r\n \"\" +\r\n new Date().getFullYear() +\r\n \"\" +\r\n new Date().getTime();\r\n //construct filename for pdf report.\r\n var fileName = usId + \"MarketDashboard\" + \"_\" + timestamp + \".pdf\";\r\n var stoName =\r\n this.state.storeAddress.storeName &&\r\n this.state.storeAddress.storeName !== null &&\r\n this.state.storeAddress.storeName !== \"\" &&\r\n this.state.storeAddress.storeName !== undefined\r\n ? this.state.storeAddress.storeName\r\n : \"Your Store\";\r\n var fileNamePdf =\r\n stoName + \"_\" + \"MarketDashboard\" + \"_\" + currentDate + \".pdf\";\r\n this.setState({\r\n snackClr: \"snack-info\",\r\n snackOpen: true,\r\n snackMsg:\r\n \"Your download is being processed. The \" +\r\n fileNamePdf +\r\n \" file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.\",\r\n });\r\n let ComponentName = 1;\r\n const Input = {\r\n RegionID: CONFIG.RegionId,\r\n URL:\r\n CONFIG.OPTZ_URL +\r\n \"render-pdf/\" +\r\n accessKey +\r\n \"/\" +\r\n ComponentName +\r\n \"/0/\" +\r\n usId +\r\n \"/\" +\r\n pta +\r\n \"/\",\r\n FileName: fileName,\r\n };\r\n // axios.post(CONFIG.API_URL + 'dashboard/generatepdfbypage', Input)\r\n axios({\r\n url: CONFIG.API_URL + \"dashboard/generatepdfbypage\",\r\n method: \"post\",\r\n responseType: \"blob\",\r\n data: Input,\r\n })\r\n .then((response) => {\r\n const blob = new Blob([response.data], { type: 'application/octet-stream' }); \r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob); \r\n link.download = fileNamePdf;\r\n link.dispatchEvent(\r\n new MouseEvent('click', { \r\n bubbles: true, \r\n cancelable: true, \r\n view: window \r\n })\r\n ); \r\n setTimeout(() => {\r\n // For Firefox it is necessary to delay revoking the ObjectURL\r\n window.URL.revokeObjectURL(link.href);\r\n link.remove();\r\n }, 3000); \r\n this.setState({isLoading: false }); \r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n });\r\n }\r\n\r\n // TO Download Activity Report PDF\r\n downLoadActivityReportPDF() {\r\n this.setState({\r\n // isLoading: true,\r\n pdfLoading: false,\r\n });\r\n var currentDate = moment(new Date()).format(\"DD-MMM-YYYY\");\r\n let usId = this.props.match.params.storeid;\r\n let accessKey = localStorage.getItem(\"SecretKey\");\r\n //let accessKey = '3f2b471776bc41cf863720bfc8cf9cb9';\r\n var timestamp =\r\n new Date().getDate() +\r\n \"\" +\r\n new Date().getMonth() +\r\n \"\" +\r\n new Date().getFullYear() +\r\n \"\" +\r\n new Date().getTime();\r\n //construct filename for pdf report.\r\n var fileName = usId + \"ActivityReport\" + \"_\" + timestamp + \".pdf\";\r\n var stoName =\r\n this.state.storeAddress.storeName &&\r\n this.state.storeAddress.storeName !== null &&\r\n this.state.storeAddress.storeName !== \"\" &&\r\n this.state.storeAddress.storeName !== undefined\r\n ? this.state.storeAddress.storeName\r\n : \"Your Store\";\r\n var fileNamePdf =\r\n stoName + \"_\" + \"ActivityReport\" + \"_\" + currentDate + \".pdf\";\r\n this.setState({\r\n snackClr: \"snack-info\",\r\n snackOpen: true,\r\n snackMsg:\r\n \"Your download is being processed. The \" +\r\n fileNamePdf +\r\n \" file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.\",\r\n });\r\n const Input = {\r\n RegionID: CONFIG.RegionId,\r\n URL: CONFIG.OPTZ_URL + \"render-activity-pdf/\" + accessKey + \"/\" + usId,\r\n FileName: fileName,\r\n };\r\n // axios.post(CONFIG.API_URL + 'dashboard/generatepdfbypage', Input)\r\n axios({\r\n url: CONFIG.API_URL + \"dashboard/generatepdfbypage\",\r\n method: \"post\",\r\n responseType: \"blob\",\r\n data: Input,\r\n })\r\n .then((response) => {\r\n \r\n const blob = new Blob([response.data], { type: 'application/octet-stream' }); \r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob); \r\n link.download = fileNamePdf;\r\n link.dispatchEvent(\r\n new MouseEvent('click', { \r\n bubbles: true, \r\n cancelable: true, \r\n view: window \r\n })\r\n ); \r\n setTimeout(() => {\r\n // For Firefox it is necessary to delay revoking the ObjectURL\r\n window.URL.revokeObjectURL(link.href);\r\n link.remove();\r\n }, 3000); \r\n this.setState({isLoading: false }); \r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n });\r\n }\r\n\r\n snackHandleclose = (event, reason) => {\r\n if (reason === \"clickaway\") {\r\n return;\r\n }\r\n this.setState({ snackOpen: false });\r\n };\r\n\r\n marketDashboard() {\r\n this.setState((prevState) => ({\r\n modal: !prevState.modal,\r\n }));\r\n }\r\n // Call RabitQueue\r\n submitRabitQueue(storeId) {\r\n this.setState({ isLoading: true, downLoadReportModal: false });\r\n axios\r\n .post(CONFIG.API_URL + \"market/reportqueue/\" + storeId)\r\n .then((response) => {\r\n if (response.data === \"success\") {\r\n this.setState(\r\n {\r\n snackOpen: true,\r\n snackMsg:\r\n \"Your Competitor Report is being generated. This might take a couple minutes. When the report is ready it will download automatically when you click the report icon again.\",\r\n },\r\n () => {\r\n this.componentDidMount();\r\n }\r\n );\r\n }\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n this.setState({\r\n snackOpen: true,\r\n snackMsg:\r\n \"Report generation is in progress, please try after sometime.\",\r\n });\r\n }\r\n });\r\n }\r\n\r\n //Excel report Download\r\n downLoadReport(rep_id, filename) {\r\n this.setState({ isLoading: true, downLoadReportModal: false });\r\n axios({\r\n url:\r\n CONFIG.API_URL +\r\n \"market/downloadreport/\" +\r\n rep_id +\r\n \"/\" +\r\n CONFIG.RegionId,\r\n method: \"GET\",\r\n responseType: \"blob\",\r\n })\r\n .then((response) => {\r\n const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob);\r\n link.download = filename.replace(\" \", \"\") + \".xlsx\"; \r\n link.click(); \r\n this.setState({ isLoading: false });\r\n \r\n // const url = window.URL.createObjectURL(new Blob([response.data]));\r\n // const link = document.createElement(\"a\");\r\n // link.href = url;\r\n // link.setAttribute(\"download\", filename.replace(\" \", \"\") + \".xlsx\");\r\n // document.body.appendChild(link);\r\n // link.click();\r\n // this.setState({ isLoading: false });\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n this.setState({\r\n snackOpen: true,\r\n snackMsg:\r\n \"Report generation is in progress, please try after sometime.\",\r\n });\r\n }\r\n });\r\n }\r\n\r\n handleDownload = (stoName) => {\r\n var fileName =\r\n stoName + \"_\" + moment(this.state.currentDate).format(\"DD-MMM-YYYY\");\r\n this.setState({\r\n snackClr: \"snack-info\",\r\n snackOpen: true,\r\n snackMsg:\r\n \"Your download is being processed. The \" +\r\n fileName +\r\n \" file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.\",\r\n });\r\n\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n let Input = {\r\n UserStoreId: this.state.storeid,\r\n RegionId: CONFIG.RegionId,\r\n Currency: this.state.storeAddress.countryCurrency,\r\n };\r\n axios({\r\n url: CONFIG.API_URL + \"market/downloadsearchdata\",\r\n method: \"post\",\r\n responseType: \"blob\",\r\n data: Input,\r\n })\r\n .then((response) => {\r\n const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob);\r\n link.download = fileName.replace(\" \", \"\") + \".xlsx\"; \r\n link.click(); \r\n this.setState({ isLoading: false }); \r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n this.setState({\r\n snackOpen: true,\r\n snackMsg:\r\n \"Report generation is in progress, please try after sometime.\",\r\n });\r\n }\r\n });\r\n };\r\n\r\n compReportDownload = (stoName) => {\r\n var fileName = stoName;\r\n this.setState({\r\n snackClr: \"snack-info\",\r\n snackOpen: true,\r\n snackMsg:\r\n \"Your download is being processed. The \" +\r\n fileName +\r\n \" file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.\",\r\n });\r\n\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n\r\n axios({\r\n url: CONFIG.API_URL + \"market/reportqueue/\" + this.state.storeid,\r\n method: \"post\",\r\n responseType: \"blob\",\r\n })\r\n .then((response) => {\r\n \r\n const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob);\r\n link.download = fileName.replace(\" \", \"\") + \".xlsx\"; \r\n link.click(); \r\n this.setState({ isLoading: false }); \r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n this.setState({\r\n snackOpen: true,\r\n snackMsg:\r\n \"Report generation is in progress, please try after sometime.\",\r\n });\r\n }\r\n });\r\n };\r\n\r\n compReportDownloadCsv = (stoName) => {\r\n var fileName = stoName;\r\n this.setState({\r\n snackClr: \"snack-info\",\r\n snackOpen: true,\r\n snackMsg:\r\n \"Your download is being processed. The \" +\r\n fileName +\r\n \" file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.\",\r\n });\r\n\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n\r\n axios({\r\n url: CONFIG.API_URL + \"market/rawdataqueue/\" + this.state.storeid,\r\n method: \"post\",\r\n responseType: \"blob\",\r\n })\r\n .then((response) => {\r\n const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob);\r\n link.download = fileName.replace(\" \", \"\") + \".csv\"; \r\n link.click(); \r\n this.setState({ isLoading: false }); \r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n this.setState({\r\n snackOpen: true,\r\n snackMsg:\r\n \"Report generation is in progress, please try after sometime.\",\r\n });\r\n }\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n cards,\r\n storeInformation,\r\n pdfLoading,\r\n isLoading,\r\n countryCode,\r\n storeid,\r\n storedata,\r\n storeAddress,\r\n priceTrendsAvg,\r\n snackOpen,\r\n snackMsg,\r\n myMarketData,\r\n } = this.state;\r\n const defaultProps = {\r\n helpTitle: \"Market Overview\",\r\n helpContent:\r\n \"
By default, this dashboard shows 12 of the most common unit types. Each 'box' gives you a quick snapshot of the rates for this Market. Below is a breakdown of what's in each snapshot:
Offered by x stores
This is the number of stores advertising this unit type in this Market
\" +\r\n `${\r\n CONFIG.RegionId === 3\r\n ? \"
Average Market Weekly Price
\"\r\n : \"
Average Market Price
\"\r\n }` +\r\n \"
This is the market average rate for this unit type. The average rates shown here are calculated using the \" +\r\n `${\r\n CONFIG.RegionId === 3\r\n ? \"Advertised Online Weekly rates\"\r\n : \"Advertised Online rates\"\r\n }` +\r\n \"
Trend
The upward/downward arrow shows the direction of the trend for this unit type's rates over the period selected (5 days, 30 days, 90 days)
\" +\r\n `${\r\n CONFIG.RegionId === 3\r\n ? \"
Your Weekly Price
\"\r\n : \"
Your Price
\"\r\n }` +\r\n \"
If you have set up your store as your Market, your store's rate(s) will appear here for the unit type. If we have not found a rate for your store, it will be shown as 'N/A'
View Details
To view the detailed pricing insights for the unit type, click on View Details
+Add New
You are not limited to the 12 unit types you see here. Click +Add New to configure your own unit size and features
Edit
Click the pencil icon to make any changes to the features for that unit type
Delete
Click the x to delete this unit type from the dashboard
*Your store prices are included in the calculations.
\r\n \r\n \r\n Before you can view your competitors pricing and promotions, you\r\n must define the geographical coverage zone for this market.{\" \"}\r\n \r\n \r\n \r\n Close\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}","import React from \"react\";\r\nimport \"./PricingVolatility.css\";\r\nimport { CONFIG, MatchingCountryCode } from \"../../utils/config\";\r\nimport axios from \"axios\";\r\nimport { HelpTextPopup } from \"./../HelpTextPopup/index\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport Snackbar from \"@material-ui/core/Snackbar\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { AvForm, AvField } from \"availity-reactstrap-validation\";\r\nimport Breadcrumbs from \"@material-ui/core/Breadcrumbs\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\n\r\nimport duplicate from \"../../Assets/Images/duplicate.png\"\r\nimport Chart from \"react-apexcharts\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n Row,\r\n Col,\r\n Button,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n Table as TableBoots,\r\n} from \"reactstrap\";\r\nimport shows from \"./../../Assets/Images/show.png\";\r\nimport hiddens from \"./../../Assets/Images/unshow.png\";\r\nimport downarrows from \"./../../Assets/Images/down-arrow.png\";\r\nimport { CompetitorStore } from \"../CompetitorStore\";\r\nimport TableSortLabel from \"@material-ui/core/TableSortLabel\";\r\nimport { faFilePdf } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport moment from \"moment\";\r\nimport { map } from \"d3\";\r\nimport resetPng from '../../Assets/Images/reset.png';\r\n\r\nexport default class PricingVolatility extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.child = React.createRef();\r\n\r\n this.state = {\r\n options: {\r\n chart: {\r\n id: 'apexchart-price-volatility',\r\n toolbar: {\r\n show: false\r\n }\r\n },\r\n stroke: {\r\n width: 3,\r\n },\r\n markers: {\r\n size: 4,\r\n },\r\n grid: { show: false },\r\n legend: {\r\n show: false,\r\n },\r\n yaxis: {\r\n show: false,\r\n },\r\n xaxis: {\r\n show: false,\r\n labels: {\r\n show: false,\r\n },\r\n axisBorder: {\r\n show: false\r\n },\r\n axisTicks: {\r\n show: false\r\n }\r\n },\r\n noData: {\r\n text: \"Please wait for the data to be loaded. The data volume is high and this might take a minute for loading the data.\",\r\n verticalAlign: 'top',\r\n style: {\r\n color: \"#5b95f6\",\r\n fontSize: '13px',\r\n fontFamily: \"Helvetica\"\r\n }\r\n },\r\n },\r\n series: [],\r\n\r\n snackOpen: false,\r\n snackMSg: \"\",\r\n marketVolatility: \"\",\r\n marketStorePrice: \"\",\r\n isLoading: false,\r\n pdfLoading: false,\r\n unitType: \"\",\r\n priceOption: \"\",\r\n dashboardBasicInfo: \"\",\r\n volatilityGrpahData: \"\",\r\n isDefaultUnit: \"\",\r\n isDefaultPrice: \"All\",\r\n showGrpahData: \"\",\r\n isSelectIdPush: [],\r\n isShowGraph: [],\r\n isYourStore: [],\r\n isRemoveGrapg: [],\r\n isSelectCount: [],\r\n locationInfoData: [],\r\n isdefaultSelected: 1,\r\n isNoGraphData: false,\r\n isCompsName: [],\r\n order: \"asc\",\r\n orderBy: \"storeName\",\r\n isNoData: false,\r\n typePDF: \"\",\r\n sIdPDF: \"\",\r\n snackClr: \"\",\r\n duplicate_filterData: false,\r\n filterData:[],\r\n new_filterData:[]\r\n };\r\n this.getParams = this.getParams.bind(this);\r\n this.handleRequestSort = this.handleRequestSort.bind(this);\r\n this.stableSort = this.stableSort.bind(this);\r\n this.getSorting = this.getSorting.bind(this);\r\n this.desc = this.desc.bind(this);\r\n }\r\n\r\n getParams(storeAddress) {\r\n let storeId = parseInt(this.props.match.params.userstoreid);\r\n this.child.current.toggleStoreModal(storeAddress, storeId);\r\n }\r\n\r\n //Table Sorting\r\n handleRequestSort(event, property) {\r\n const { order, orderBy } = this.state;\r\n const isDesc = orderBy === property && order === \"desc\";\r\n let sort = isDesc ? \"asc\" : \"desc\";\r\n this.setState({ order: sort, orderBy: property });\r\n }\r\n\r\n //Table Sorting order\r\n desc(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n }\r\n\r\n //Table Sorting the selected Column\r\n stableSort(array, cmp) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = cmp(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map((el) => el[0]);\r\n }\r\n\r\n //Table Sorting Order Request\r\n getSorting(order, orderBy) {\r\n return order === \"desc\"\r\n ? (a, b) => this.desc(a, b, orderBy)\r\n : (a, b) => -this.desc(a, b, orderBy);\r\n }\r\n\r\n loadDashBoard() {\r\n let token = localStorage.getItem(\"accessKey\");\r\n const data = {\r\n UserStoreID: parseInt(this.props.match.params.userstoreid),\r\n RegionId: CONFIG.RegionId,\r\n };\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n axios\r\n .post(CONFIG.API_URL + \"dashboard/dashboardlocation\", data)\r\n .then((response) => {\r\n const locationInfoData = response.data.data.storeDashboard;\r\n var countrycode = response.data.data.storeDashboard.countryCode;\r\n var data1 = {\r\n CountryCode: countrycode,\r\n RegionId: CONFIG.RegionId,\r\n };\r\n axios\r\n .post(CONFIG.API_URL + \"dashboard/lookupunit\", data1)\r\n .then((response) => {\r\n let unitType = response.data.prices;\r\n this.state.isDefaultUnit = unitType[0].unitType;\r\n this.setState({\r\n unitType,\r\n });\r\n });\r\n this.setState({\r\n locationInfoData: locationInfoData,\r\n });\r\n const inputParam = {\r\n UserStoreID: parseInt(this.props.match.params.userstoreid),\r\n RegionId: CONFIG.RegionId,\r\n Competitors: \"\",\r\n };\r\n this.PricingVolatility(inputParam);\r\n })\r\n .catch((err) => {\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else if (err.response.status === 403) {\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/UnauthorizedAccess\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.setState({\r\n isLoading: true,\r\n });\r\n\r\n this.loadDashBoard();\r\n\r\n axios.post(CONFIG.API_URL + \"dashboard/priceoptions\").then((response) => {\r\n let priceOption = response.data.price;\r\n this.setState({\r\n priceOption,\r\n });\r\n });\r\n }\r\n PricingVolatility(inputParam) {\r\n let isShowGraph = [];\r\n let isRemoveGrapg = [];\r\n let isCompsName = [];\r\n let isYourStore = [];\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n axios\r\n .post(CONFIG.API_URL + \"dashboard/priceoverviewvolatility\", inputParam)\r\n .then((response) => {\r\n const dashboardBasicInfo = response.data.data.dashboardBasicInfo;\r\n const volatilityGrpahData = response.data.data.volatilityGrpahData;\r\n const marketVolatility = response.data.data.unitVolatilityData;\r\n // Below I have using the filter function to finding the null values of all unit types. If any case all the units return the null values we have define the one boolean value to the state for showing the \"No data found\" in the pricing volatality grid.\r\n var checkNull = marketVolatility.filter(\r\n (filterData) => filterData.volatility !== null\r\n );\r\n if (checkNull.length === 0) {\r\n this.setState({ isNoData: true });\r\n }\r\n // End of the filter function code.\r\n const marketStorePrice = response.data.data.allVolatilityData;\r\n const isUnitType = marketVolatility.filter((e) => e.volatility === 0);\r\n\r\n const isUnitTypeNotNull = marketVolatility.filter((e) => e.volatility);\r\n const isYourStCount = marketStorePrice.filter((e) => e.isMyStore);\r\n // const isUnitTypeNull = marketVolatility.filter((e => e.volatility===null));\r\n let marketStorePriceSort = [];\r\n marketStorePrice\r\n .filter((e) => e.isMyStore === true)\r\n .forEach(function (e) {\r\n isYourStore.push(e);\r\n });\r\n marketStorePrice\r\n .filter((e) => e.isMyStore === false)\r\n .forEach(function (e) {\r\n marketStorePriceSort.push(e);\r\n });\r\n marketStorePrice\r\n .filter((e) => e.isSelected === 1 && e.isMyStore != 1)\r\n .forEach(function (e) {\r\n isCompsName.push(e.storeName);\r\n });\r\n marketStorePrice\r\n .filter((e) => e.isSelected === 1)\r\n .forEach(function (e) {\r\n isShowGraph.push(e.storeId);\r\n });\r\n marketStorePrice\r\n .filter((e) => e.isSelected === 0)\r\n .forEach(function (e) {\r\n isRemoveGrapg.push(e.storeId);\r\n });\r\n if (isShowGraph === undefined) {\r\n isShowGraph = [];\r\n }\r\n if (isRemoveGrapg === undefined) {\r\n isRemoveGrapg = [];\r\n }\r\n if (isYourStore === undefined) {\r\n isYourStore = [];\r\n }\r\n this.setState({\r\n marketVolatility,\r\n isYourStCount,\r\n isUnitType,\r\n isYourStore,\r\n isUnitTypeNotNull,\r\n volatilityGrpahData,\r\n isCompsName,\r\n marketStorePrice: marketStorePriceSort,\r\n dashboardBasicInfo,\r\n isShowGraph,\r\n isRemoveGrapg,\r\n isLoading: false,\r\n });\r\n\r\n if (this.state.volatilityGrpahData.length > 0) {\r\n this.setState({\r\n isNoGraphData: false,\r\n });\r\n this.initialLoad(\r\n volatilityGrpahData.filter(\r\n (a) =>\r\n a.unitType == this.state.isDefaultUnit &&\r\n a.priceType == this.state.isDefaultPrice\r\n )\r\n );\r\n } else {\r\n this.setState({\r\n isNoGraphData: true,\r\n });\r\n this.apexChartNoData({\r\n textMessage: \"No Data Found\",\r\n colorCode: \"#F60000\"\r\n });\r\n }\r\n })\r\n .catch((err) => {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n apexChartNoData = ({ textMessage, colorCode }) => {\r\n this.setState({\r\n series: [],\r\n options: {\r\n xaxis: {\r\n show: false,\r\n labels: {\r\n show: false\r\n },\r\n axisBorder: {\r\n show: false\r\n },\r\n axisTicks: {\r\n show: false\r\n }\r\n },\r\n yaxis: {\r\n show: false\r\n },\r\n noData: {\r\n text: textMessage,\r\n style: { color: colorCode }\r\n }\r\n }\r\n });\r\n }\r\n\r\n initialLoad(res) {\r\n\r\n const { isCompsName } = this.state;\r\n var data = res;\r\n var przvoldality = res.filter((a) => a.volatility !== null);\r\n let isCompString = typeof (isCompsName) !== 'object' ? isCompsName : isCompsName.toString();\r\n this.setState({new_filterData : [], series:[]});\r\n var tempdata = [];\r\n let marketSeries = [];\r\n let colorsData = [];\r\n let widthArrayData = [];\r\n let dashArrayData = [];\r\n let marketNameList = [];\r\n let colorsCodeList = [];\r\n let markerSize = [];\r\n let unique = [...new Set(data.map((item) => item.storeId))];\r\n let MarketName = [\"Your Store\", \"Market Average\", isCompString];\r\n let MarketName2 = [\"Market Average\", isCompString];\r\n let colorsCode = ['#F15D47', '#1B2C42', '#41A3F6'];\r\n let colorsCode2 = ['#1B2C42', '#41A3F6'];\r\n for (var i = 0; i < unique.length; i++) {\r\n var datum = {\r\n name: unique[i],\r\n count: i,\r\n isMyMarket: this.popMyStore(data, unique[i]),\r\n values: this.popData(data, unique[i]),\r\n };\r\n tempdata.push(datum);\r\n }\r\n const toTop = (key, value) => (a, b) => (b[key] === value) - (a[key] === value);\r\n tempdata.sort(toTop('isMyMarket', 1));\r\n tempdata.every(val => {\r\n marketNameList = val.isMyMarket === 1 ? MarketName : MarketName2;\r\n colorsCodeList = val.isMyMarket === 1 ? colorsCode : colorsCode2;\r\n })\r\n\r\n \r\n let newFilter_tempdata=[];\r\n for (var k = 0; k < tempdata.length; k++) {\r\n let noValues = tempdata[k].values.every(item => item.totalChangeCount === '' || item.totalChangeCount === undefined);\r\n if (!noValues) {\r\n let dataSeries = tempdata[k].values.map(val => { return { x: val.monthYear, y: val.totalChangeCount, originData: val.totalChangeCount }; });\r\n let dataSeries1 = tempdata[k].values.map(val => { return { x: val.monthYear, y: val.totalChangeCount !== null && val.totalChangeCount !== \"0.00\" ? val.totalChangeCount : 0, originData: val.totalChangeCount !== null && val.totalChangeCount !== \"0.00\" ? val.totalChangeCount : 0 }; });\r\n newFilter_tempdata.push({name :marketNameList[k] , data: dataSeries1, color:colorsCodeList[k]})\r\n let containsNull = dataSeries.every(val => val.y !== null);\r\n if (tempdata[k].isMyMarket === 1) {\r\n if (!containsNull) {\r\n let noZeroData1 = dataSeries.map(yData => { return { x: yData.x, y: yData.y === null ? 0 : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: (marketNameList[k] + \" data\"), data: noZeroData1, color: colorsCodeList[k] });\r\n let noZeroData = dataSeries.map(yData => { return { x: yData.x, y: yData.y === 0 ? null : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: marketNameList[k], data: noZeroData, color: colorsCodeList[k] });\r\n markerSize.push(0, 10);\r\n widthArrayData.push(1, 3);\r\n dashArrayData.push(6, 0);\r\n } else {\r\n marketSeries.push({ name: marketNameList[k], data: dataSeries, color: colorsCodeList[k] });\r\n markerSize.push(10);\r\n widthArrayData.push(3);\r\n dashArrayData.push(0);\r\n }\r\n } else {\r\n if (!containsNull) {\r\n let noZeroData1 = dataSeries.map(yData => { return { x: yData.x, y: yData.y === null ? 0 : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: (marketNameList[k] + \" data\"), data: noZeroData1, color: colorsCodeList[k] });\r\n let noZeroData = dataSeries.map(yData => { return { x: yData.x, y: yData.y === 0 ? null : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: marketNameList[k], data: noZeroData, color: colorsCodeList[k] });\r\n markerSize.push(0, 10);\r\n widthArrayData.push(1, 3);\r\n dashArrayData.push(6, 0);\r\n } else {\r\n marketSeries.push({ name: marketNameList[k], data: dataSeries, color: colorsCodeList[k] });\r\n markerSize.push(10);\r\n widthArrayData.push(3);\r\n dashArrayData.push(0);\r\n }\r\n }\r\n \r\n }\r\n }\r\n //Duplicate Data\r\n let newData = [];\r\n if(przvoldality.length > 0){\r\n newFilter_tempdata.map(dataItem => dataItem.data.forEach(i => {\r\n if(i.y !== \"\" && i.y !== undefined){\r\n newFilter_tempdata.map(userItem => userItem.data.forEach(j => {\r\n if(j.y !== \"\" && j.y !== undefined){\r\n if((dataItem.name !== userItem.name) && (dataItem.color !== userItem.color)){\r\n if((i.y === j.y) && (i.x === j.x)){\r\n newData.push({name:dataItem.name ,color:dataItem.color});\r\n let new_filterData = newData.reduce((elements , obj , index)=>{ \r\n let existingData = elements.find(element => \r\n element.name === obj.name && element.color === obj.color\r\n );\r\n if(!existingData){\r\n elements.push(obj);\r\n }\r\n return elements;\r\n }, []);\r\n this.setState({new_filterData : new_filterData}); \r\n }\r\n }\r\n }\r\n }))\r\n }\r\n })) \r\n }else{\r\n this.setState({new_filterData :[]});\r\n }\r\n \r\n \r\n if (marketSeries.length > 0 && przvoldality.length > 0) {\r\n this.setState({\r\n options: {\r\n chart: {\r\n id: `apexchart-price-volatility${Math.random()}`,\r\n zoom: {\r\n enabled: true,\r\n type: \"x\",\r\n autoScaleYaxis: true,\r\n },\r\n toolbar: {\r\n show: true,\r\n tools: {\r\n download: false,\r\n selection: true,\r\n zoom: false,\r\n zoomin:false,\r\n zoomout:false,\r\n pan:false,\r\n reset: false,\r\n },\r\n },\r\n events: {\r\n legendClick: function (chartContext, seriesIndex, config) {\r\n let marketName = config.config.series[seriesIndex].name + ' data';\r\n if (config.config.series[seriesIndex - 1] !== undefined && config.config.series[seriesIndex - 1].name === marketName) chartContext.toggleSeries(marketName);\r\n },\r\n beforeZoom: function(chartContext, { xaxis,yaxis }) {\r\n if(yaxis !== undefined || xaxis.min > 0) return chartContext.t.reset =``;\r\n },\r\n zoomed: function(chartContext, { xaxis, yaxis }) {\r\n if(yaxis === undefined || xaxis.min <= 0 || xaxis === null ) return chartContext.toolbar.t.reset = false;\r\n },\r\n mouseMove: function(event, chartContext, config) {\r\n var tooltip = chartContext.el.querySelector('.apexcharts-tooltip');\r\n let Value = tooltip !== null && tooltip.style.top ? parseInt(tooltip.style.top) : 0;\r\n var series = config.config.series.filter(item => item.data.length !== 0 && !item.name.endsWith('data'));\r\n if (series.length == 1 && Value > 70) {\r\n chartContext.el.classList.add('new_tooltip_name1')\r\n }else if(series.length == 2 && Value > 37){\r\n chartContext.el.classList.add('new_tooltip_name2')\r\n }else if(series.length == 3 && Value > 3){\r\n chartContext.el.classList.add('new_tooltip_name3')\r\n }else{\r\n chartContext.el.classList.remove('new_tooltip_name1')\r\n chartContext.el.classList.remove('new_tooltip_name2')\r\n chartContext.el.classList.remove('new_tooltip_name3')\r\n }\r\n \r\n }\r\n }\r\n },\r\n grid: {\r\n show: false,\r\n row: {\r\n colors: ['#FFFFFF']\r\n },\r\n padding: {\r\n left: 20,\r\n right: 40 // Also you may want to increase this (based on the length of your labels)\r\n },\r\n \r\n },\r\n tooltip: {\r\n x: {\r\n show: true,\r\n formatter: function (value, { w }) {\r\n if (typeof (w) === \"object\") {\r\n const date = new Date(\"1/\" + w.globals.categoryLabels[value - 1]);\r\n let mon = moment(date, \"MM-DD-YYYY\").format('MMMM YYYY');\r\n return `Volatality Percentage on ${mon}`;\r\n }\r\n },\r\n },\r\n y: {\r\n formatter: function (value, { series, seriesIndex, dataPointIndex, w }) {\r\n if (!(w.config.series[seriesIndex].name).endsWith('data')) return typeof (w.config.series[seriesIndex].data[dataPointIndex]) === \"object\" ? w.config.series[seriesIndex].data[dataPointIndex].originData !== null ? Number(w.config.series[seriesIndex].data[dataPointIndex].originData).toFixed(2) + \"%\" : \"N/A\" : '';\r\n },\r\n },\r\n enabled: true,\r\n showForNullSeries: false,\r\n onDatasetHover: {\r\n highlightDataSeries: false,\r\n },\r\n style: {\r\n fontSize: '11px',\r\n fontFamily: \"Roboto, Helvetica, Arial , sans-serif\"\r\n },\r\n },\r\n stroke: {\r\n width: widthArrayData,\r\n dashArray: dashArrayData,\r\n },\r\n markers: {\r\n size: 4,\r\n },\r\n yaxis: {\r\n labels: {\r\n formatter: function (value) {\r\n let val = value === null || value === undefined ? \"N/A\" : value.toFixed(0) + \"%\";\r\n return val;\r\n },\r\n style: {\r\n colors: '#8C9AA6',\r\n fontSize: '10px'\r\n },\r\n },\r\n },\r\n legend: {\r\n show: true,\r\n showForSingleSeries: true,\r\n position: 'bottom',\r\n horizontalAlign: 'center',\r\n fontSize: '11px',\r\n fontWeight: 500,\r\n showForNullSeries: true,\r\n showForZeroSeries: true,\r\n itemMargin: {\r\n horizontal: 10,\r\n vertical: 20,\r\n },\r\n onItemClick: {\r\n toggleDataSeries: true\r\n },\r\n onItemHover: {\r\n highlightDataSeries: true\r\n },\r\n formatter: function (seriesName, opts) {\r\n if (!seriesName.endsWith('data')) return seriesName;\r\n return '';\r\n },\r\n markers: {\r\n width: markerSize,\r\n height: markerSize,\r\n }\r\n },\r\n xaxis: {\r\n title: {\r\n text: \"--- No Data Available\",\r\n offsetX: 400,\r\n offsetY: 20,\r\n style: {\r\n fontSize: '11px',\r\n fontWeight: 400,\r\n },\r\n },\r\n tooltip: { enabled: false },\r\n labels: {\r\n formatter: function (value) {\r\n let val = value === undefined || typeof (value) !== \"string\" ? '' : value;\r\n return val;\r\n },\r\n show: true,\r\n style: {\r\n colors: '#8C9AA6',\r\n fontSize: '10px'\r\n },\r\n },\r\n axisBorder: {\r\n show: true\r\n },\r\n axisTicks: {\r\n show: true\r\n }\r\n },\r\n noData: {\r\n text: 'Please enable any one of the below legend to view the graph.',\r\n style: {\r\n color: \"#5b95f6\",\r\n }\r\n },\r\n },\r\n series: marketSeries,\r\n isNoGraphData: false\r\n })\r\n } else {\r\n this.setState({isNoGraphData: true})\r\n this.apexChartNoData({\r\n textMessage: \"No Data Found\",\r\n colorCode: \"#F60000\"\r\n });\r\n }\r\n }\r\n\r\n popData(data, uid) {\r\n var tFData = data.filter((a) => a.storeId == uid);\r\n var tData = [];\r\n\r\n for (var i = 0; i < tFData.length; i++) {\r\n var CData = {\r\n date: new Date(tFData[i].year, tFData[i].month - 1, 1),\r\n volatility: tFData[i].volatility,\r\n month: tFData[i].month,\r\n isMyMarket: tFData[i].isMyMarket,\r\n totalChangeCount: tFData[i].totalChangeCount,\r\n totalCount: tFData[i].totalCount,\r\n monthYear: tFData[i].monthYear,\r\n };\r\n tData.push(CData);\r\n }\r\n\r\n return tData;\r\n }\r\n\r\n popMyStore(data, uid) {\r\n var tFData = data.filter((a) => a.storeId == uid && a.isMyMarket == 1);\r\n return tFData.length > 0 ? 1 : 0;\r\n }\r\n\r\n showGraph(sId, type, name) {\r\n this.state.sIdPDF = sId;\r\n this.state.typePDF = type;\r\n this.setState({\r\n isLoading: true,\r\n });\r\n\r\n const isShowGraph = this.state.isShowGraph;\r\n const isCount = this.state.isYourStCount;\r\n var isVal = 2;\r\n if (isCount.length === 0) {\r\n isVal = 1;\r\n } else {\r\n isVal = 2;\r\n }\r\n if (isShowGraph.length <= isVal) {\r\n var isSelectStoreId = [];\r\n var id;\r\n // var isShowData = this.state.marketStorePrice;\r\n //var isShowG = isShowData.filter(a => a.isSelected == \"1\");\r\n // for (const item of isShowG) {\r\n // var id = item.storeId;\r\n // }\r\n // const isShowGraph = this.state.isShowGraph\r\n const isRemoveGrapg = this.state.isRemoveGrapg;\r\n let index;\r\n if (isShowGraph.length <= isVal) {\r\n if (type === 1) {\r\n this.state.isCompsName = name;\r\n id = sId;\r\n id = 0;\r\n isSelectStoreId.push(id);\r\n index = isShowGraph.indexOf(+sId);\r\n isShowGraph.splice(index, 1);\r\n isRemoveGrapg.push(+sId);\r\n const inputParam = {\r\n UserStoreID: parseInt(this.props.match.params.userstoreid),\r\n Competitors: isSelectStoreId.toString(),\r\n RegionId: CONFIG.RegionId,\r\n };\r\n\r\n this.onlyShowGraph(inputParam);\r\n }\r\n }\r\n if (isShowGraph.length < isVal) {\r\n this.state.isCompsName = [];\r\n if (type === 0) {\r\n this.state.isCompsName = name;\r\n if (id == undefined) {\r\n id = 0;\r\n }\r\n isSelectStoreId.push(id);\r\n isSelectStoreId = isSelectStoreId.concat(sId);\r\n index = isRemoveGrapg.indexOf(+sId);\r\n isRemoveGrapg.splice(index, 1);\r\n isShowGraph.push(+sId);\r\n const inputParam = {\r\n UserStoreID: parseInt(this.props.match.params.userstoreid),\r\n Competitors: isSelectStoreId.toString(),\r\n RegionId: CONFIG.RegionId,\r\n };\r\n this.onlyShowGraph(inputParam);\r\n }\r\n } else {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n this.state.isSelectCount.pop();\r\n this.setState({\r\n snackOpen: true,\r\n snackMSg:\r\n \"Please remove any of the selected markets to add new ones.\",\r\n });\r\n }\r\n this.setState({\r\n isRemoveGrapg,\r\n isShowGraph,\r\n });\r\n }\r\n }\r\n\r\n //SnackBar Close\r\n snackHandleclose = (event, reason) => {\r\n if (reason === \"clickaway\") {\r\n return;\r\n }\r\n this.setState({ snackOpen: false });\r\n };\r\n\r\n onlyShowGraph(inputParam) {\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n axios\r\n .post(\r\n CONFIG.API_URL + \"dashboard/priceoverviewvolatilitygraph\",\r\n inputParam\r\n )\r\n .then((response) => {\r\n const showGrpahData = response.data.data;\r\n this.state.volatilityGrpahData = response.data.data;\r\n this.setState({\r\n showGrpahData,\r\n isLoading: false,\r\n });\r\n if (this.state.showGrpahData.length > 0) {\r\n this.initialLoad(\r\n showGrpahData.filter(\r\n (a) =>\r\n a.unitType == this.state.isDefaultUnit &&\r\n a.priceType == this.state.isDefaultPrice\r\n )\r\n );\r\n }\r\n })\r\n .catch((err) => {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n onUnitChange(e) {\r\n this.state.isDefaultUnit = e.target.value;\r\n var res = \"\";\r\n res = this.state.volatilityGrpahData.filter(\r\n (a) =>\r\n a.unitType == this.state.isDefaultUnit &&\r\n a.priceType == this.state.isDefaultPrice\r\n );\r\n this.setState({ series: [] }, () => {\r\n this.apexChartNoData({\r\n textMessage: \"Please wait for the data to be loaded. The data volume is high and this might take a minute for loading the data.\",\r\n colorCode: \"#5b95f6\"\r\n });\r\n this.initialLoad(res);\r\n });\r\n // this.initialLoad(res);\r\n }\r\n onPriceChange(e) {\r\n this.state.isDefaultPrice = e.target.value;\r\n var res = \"\";\r\n res = this.state.volatilityGrpahData.filter(\r\n (a) =>\r\n a.unitType == this.state.isDefaultUnit &&\r\n a.priceType == this.state.isDefaultPrice\r\n );\r\n this.setState({ series: [] }, () => {\r\n this.apexChartNoData({\r\n textMessage: \"Please wait for the data to be loaded. The data volume is high and this might take a minute for loading the data.\",\r\n colorCode: \"#5b95f6\"\r\n });\r\n this.initialLoad(res);\r\n });\r\n // this.initialLoad(res);\r\n }\r\n downLoadPDF() {\r\n this.setState({\r\n // isLoading: true,\r\n pdfLoading: false,\r\n });\r\n var currentDate = moment(new Date()).format(\"DD-MMM-YYYY\");\r\n let accessKey = localStorage.getItem(\"SecretKey\");\r\n let ComponentName = 3;\r\n let usId = parseInt(this.props.match.params.userstoreid);\r\n let pta = \"1\";\r\n let searchId = \"1\";\r\n let unitType = this.state.unitType.filter(\r\n (d) => d.unitType == this.state.isDefaultUnit\r\n );\r\n unitType = unitType[0].id;\r\n let priceType = this.state.isDefaultPrice;\r\n let orderBy = this.state.orderBy;\r\n let order = this.state.order;\r\n let showRemoveId = this.state.sIdPDF;\r\n let showRemoveType = this.state.typePDF;\r\n\r\n var timestamp =\r\n new Date().getDate() +\r\n \"\" +\r\n new Date().getMonth() +\r\n \"\" +\r\n new Date().getFullYear() +\r\n \"\" +\r\n new Date().getTime();\r\n //construct filename for pdf report.\r\n var fileName = usId + \"PricingVoltality\" + \"_\" + timestamp + \".pdf\";\r\n var stoName =\r\n this.state.locationInfoData &&\r\n this.state.locationInfoData.storeName &&\r\n this.state.locationInfoData.storeName !== null &&\r\n this.state.locationInfoData.storeName !== \"\" &&\r\n this.state.locationInfoData.storeName !== undefined\r\n ? this.state.locationInfoData.storeName\r\n : \"Your Store\";\r\n var fileNamePdf =\r\n stoName + \"_\" + \"PricingVoltality\" + \"_\" + currentDate + \".pdf\";\r\n this.setState({\r\n snackClr: \"snack-info\",\r\n snackOpen: true,\r\n snackMSg:\r\n \"Your download is being processed. The \" +\r\n fileNamePdf +\r\n \" file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.\",\r\n });\r\n const Input = {\r\n RegionID: CONFIG.RegionId,\r\n URL:\r\n CONFIG.OPTZ_URL +\r\n \"render-pdf/\" +\r\n accessKey +\r\n \"/\" +\r\n ComponentName +\r\n \"/0/\" +\r\n usId +\r\n \"/\" +\r\n pta +\r\n \"/\" +\r\n searchId +\r\n \"/\" +\r\n unitType +\r\n \"/\" +\r\n priceType +\r\n \"/\" +\r\n orderBy +\r\n \"/\" +\r\n order +\r\n \"/\" +\r\n showRemoveId +\r\n \"/\" +\r\n showRemoveType +\r\n \"/\",\r\n FileName: fileName,\r\n };\r\n // axios.post(CONFIG.API_URL + 'dashboard/generatepdfbypage', Input)\r\n axios({\r\n url: CONFIG.API_URL + \"dashboard/generatepdfbypage\",\r\n method: \"post\",\r\n responseType: \"blob\",\r\n data: Input,\r\n })\r\n .then((response) => {\r\n const blob = new Blob([response.data], { type: 'application/octet-stream' });\r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob);\r\n link.download = fileNamePdf;\r\n link.dispatchEvent(\r\n new MouseEvent('click', {\r\n bubbles: true,\r\n cancelable: true,\r\n view: window\r\n })\r\n );\r\n setTimeout(() => {\r\n // For Firefox it is necessary to delay revoking the ObjectURL\r\n window.URL.revokeObjectURL(link.href);\r\n link.remove();\r\n }, 3000);\r\n this.setState({ isLoading: false });\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n });\r\n }\r\n render() {\r\n const {\r\n marketVolatility,\r\n isYourStore,\r\n isUnitType,\r\n order,\r\n orderBy,\r\n isUnitTypeNotNull,\r\n marketStorePrice,\r\n isCompsName,\r\n isNoGraphData,\r\n locationInfoData,\r\n isRemoveGrapg,\r\n isShowGraph,\r\n dashboardBasicInfo,\r\n isLoading,\r\n pdfLoading,\r\n unitType,\r\n priceOption,\r\n isNoData,\r\n duplicate_filterData,\r\n filterData,\r\n new_filterData\r\n } = this.state;\r\n const defaultProps = {\r\n helpTitle: \"Price Volatility\",\r\n helpContent:\r\n \"
How aggressive is this store/competitor?
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing.
A store which frequently raises and/or lowers their rates, will typically have a higher pricing volatility.
Here you are shown the pricing volatility for this Market, Your Store (if available), the REITs in this Market, Multi-store operators and Single-store operators over the last 12 months.
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 12 months for each store type.
*Your store prices are included in the calculations.
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises and/or lowers their rates, will typically have a higher pricing volatility. Here you are shown the average monthly pricing volatility for Your Store (if available), against the Market average and any of the stores/competitors you select for comparison*, for the unit type and price type selected from the drop down menu.
Pricing Volatility is calculated by taking the number of times a pricing change occurred each month over the last 12 months.
*See Pricing Volatility by Store & Price Option to select a store you want to view on this graph
*Your store prices are included in the calculations.
\",\r\n };\r\n const defaultProps2 = {\r\n helpTitle: \"Market Pricing Volatility Over Last 12 Months\",\r\n helpContent:\r\n \"
This shows the pricing volatility over the last 12 months for each of the 11 common unit types (across the entire Market). This helps you understand which unit types in the Market are priced more aggressively.
*Your store prices are included in the calculations.
\",\r\n };\r\n const defaultProps3 = {\r\n helpTitle: \"Pricing Volatility by Store & Price Option\",\r\n helpContent:\r\n \"
This shows you all the stores in this Market along with their overall pricing volatility across all the unit types they advertise for the last 12 months. For comparison, we also show you the pricing volatility of the Premium unit rates vs. their Value unit rates.
Click on the link "Show on graph" to view this store's pricing volatility graph above over the last 12 months.
*Your store prices are included in the calculations.
\",\r\n };\r\n\r\n return (\r\n
\r\n \r\n\r\n\r\n {localStorage.getItem(\"isMVP_User\") === \"false\" ? (\r\n \r\n My Markets\r\n \r\n ) :\r\n \"\"\r\n }\r\n\r\n Go to Market Dashboard\r\n \r\n Price Volatility\r\n \r\n \r\n \r\n \r\n PDF Download\r\n \r\n
\r\n {\r\n new_filterData.map((item)=>{\r\n return(\r\n <>\r\n \r\n {item.name}\r\n \r\n )\r\n })\r\n }\r\n has same value in the series. Please hover your mouse to see detailed information. \r\n
: \"\"\r\n } \r\n\r\n
\r\n \r\n
\r\n {isNoGraphData ?\r\n \r\n : }\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n {isLoading ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n
\r\n
\r\n Current Market Volatility(last 12 months){\" \"}\r\n {\" \"}\r\n
\r\n \r\n
\r\n
\r\n {marketVolatility.length > 0 ? (\r\n
\r\n \r\n \r\n {marketVolatility.length > 0\r\n ? marketVolatility.map((data) => {\r\n return {data.unitType};\r\n })\r\n : \"\"}\r\n \r\n \r\n \r\n \r\n {(isUnitType.length === 0 || isUnitType.length > 0) &&\r\n isNoData === false ? (\r\n marketVolatility.map((data) => {\r\n return (\r\n \r\n {data.volatility === null\r\n ? \"N/A\"\r\n : data.volatility + \"%\"}\r\n \r\n );\r\n })\r\n ) : isNoData === true ? (\r\n \"\"\r\n ) : (\r\n \r\n {isLoading === false ? \"No Data Found\" : \"\"}\r\n \r\n )}\r\n {/* Below I write code for showing \"No data FOund\" if all the units have return the null values */}\r\n {isNoData === true ? (\r\n \r\n {isLoading === false ? \"No Data Found\" : \"\"}\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n {/* Above I write code for showing \"No data FOund\" if all the units have return the null values */}\r\n \r\n \r\n
\r\n ) : (\r\n
\r\n {isLoading === false ? \"No Data Found\" : \"\"}\r\n
\r\n )}\r\n
\r\n
\r\n \r\n
\r\n
\r\n {isLoading ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n
\r\n
\r\n Current Market Volatility by Store & Price Option(last 12\r\n months) \r\n
Total Square Feet Values are obtained from public sources, including city and county property records. When this information is unavailable, StorTrack uses mapping tools or internal models to estimate the size of the property.
\r\n this.trackModal()} \r\n className=\"store-mainpopup\"\r\n backdrop=\"static\">\r\n {storeName} This is the street view from Google Maps.\r\n \r\n this.setState({ position: position })}\r\n onPovChanged={pov => this.setState({ pov: pov })}\r\n />\r\n \r\n \r\n
Learn more about the stores in this Market. What are they advertising? Are they pricing aggressively? How big is their facility? etc.
Store Types
At the top of the page you will find a breakdown of the types of stores in this Market
Real Estate Investment Trust (REIT) Stores
Any stores operated by the following companies:
Public Storage
Extra Space
LifeStorage
Cubesmart
National Storage Affiliates
Global Self Storage
Multi Store Operators (Multi-Ops)
Companies operating more than 2 stores
Single Store Operators (Single-Ops)
Companies (typically independent operators) managing a single store
Competitor Overview
This grid below shows each store in this Market. Each store 'snapshot' shows the store name, address and proximity to your store. Further, it includes the building's square footage (derived from public sources or in some instances from calculations made by StorTrack's data science team).
You will also find ownership and management information and store age.
How aggressive is this store/competitor?
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises or lowers their rates, will typically have a higher pricing volatility. Here you can view the pricing volatility for a store over the last 30 days.
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 30 days for that store.
Unit Availability
For each store we show 11 of the most common unit types. This is meant to give you a quick snapshot of the unit types each store in this Market is advertising.
The green checkmark means this unit type is currently advertised by this store
The red x means this store has not advertised this unit type in the last 12 months
The grey icon means this store has advertised this unit type in the last 12 months, but it is not currently advertising it
Street View
Hover over the store's image to view a Google Map snapshot of this facility
Map View of Stores
Click on the map pin point icon on the upper right corner to view a map of all the stores in your Market
Refer the below help video for more information.
\"\r\n }\r\n\r\n return (\r\n
\r\n \r\n {isLoading ?
: ''}\r\n
\r\n \r\n\r\n\r\n {localStorage.getItem('isMVP_User') === \"false\" ? My Markets : \"\"}\r\n\r\n Go to Market Dashboard\r\n\r\n Competitor Overview\r\n \r\n\r\n {/* Download Pdf */}\r\n \r\n\r\n
{(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} values displayed here are obtained from public sources, including city and county property records. When this information is unavailable, StorTrack uses mapping tools or internal models to estimate the size of the property - such properties have an asterisk (*) next to their {(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} value.
\r\n
\r\n {/*
* The {CONFIG.MeasurementLabel} values are obtained from publicly available sources. In instances where this information is unavailable, our team has used different methods to calculate the size of the property.
Learn more about the stores in this Market. What are they advertising? Are they pricing aggressively? How big is their facility? etc.
Store Types
At the top of the page you will find a breakdown of the types of stores in this Market
Real Estate Investment Trust (REIT) Stores
Any stores operated by the following companies:
Public Storage
Extra Space
LifeStorage
Cubesmart
National Storage Affiliates
Global Self Storage
Multi Store Operators (Multi-Ops)
Companies operating more than 2 stores
Single Store Operators (Single-Ops)
Companies (typically independent operators) managing a single store
Competitor Overview
This grid below shows each store in this Market. Each store 'snapshot' shows the store name, address and proximity to your store. Further, it includes the building's square footage (derived from public sources or in some instances from calculations made by StorTrack's data science team).
You will also find ownership and management information and store age.
How aggressive is this store/competitor?
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises or lowers their rates, will typically have a higher pricing volatility. Here you can view the pricing volatility for a store over the last 30 days.
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 30 days for that store.
Unit Availability
For each store we show 11 of the most common unit types. This is meant to give you a quick snapshot of the unit types each store in this Market is advertising.
The green checkmark means this unit type is currently advertised by this store
The red x means this store has not advertised this unit type in the last 12 months
The grey icon means this store has advertised this unit type in the last 12 months, but it is not currently advertising it
Street View
Hover over the store's image to view a Google Map snapshot of this facility
Map View of Stores
Click on the map pin point icon on the upper right corner to view a map of all the stores in your Market
Refer the below help video for more information.
\"\r\n }\r\n\r\n return (\r\n
\r\n \r\n {isLoading ?
: ''}\r\n
\r\n \r\n\r\n\r\n {localStorage.getItem('isMVP_User') === \"false\" ? My Markets : \"\"}\r\n\r\n Go to Market Dashboard\r\n\r\n Competitor Overview\r\n \r\n\r\n {/* Download Pdf */}\r\n \r\n\r\n
{(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} values displayed here are obtained from public sources, including city and county property records. When this information is unavailable, StorTrack uses mapping tools or internal models to estimate the size of the property - such properties have an asterisk (*) next to their {(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} value.
\r\n
\r\n {/*
* The {CONFIG.MeasurementLabel} values are obtained from publicly available sources. In instances where this information is unavailable, our team has used different methods to calculate the size of the property.
On this page we provide a side-by-side analysis of the \" +\r\n `${CONFIG.RegionId === 3 ? \"weekly\" : \"\"}` +\r\n \" rates for the most common unit types.
Broadest Range
This is the unit type with the largest range of current \" +\r\n `${CONFIG.RegionId === 3 ? \"weekly\" : \"\"}` +\r\n \" rates (this includes both Regular/Walk-in and Online/Promotional rates)
Narrowest Range
This is the unit type with the lowest range of current \" +\r\n `${CONFIG.RegionId === 3 ? \"weekly\" : \"\"}` +\r\n \" rates (this includes both Regular/Walk-in and Online/Promotional rates)
*Your store prices are included in the calculations.
This graph is showing a side-by-side analysis of the \" +\r\n `${CONFIG.RegionId === 3 ? \"weekly\" : \"\"}` +\r\n \" rates for the most common unit types.
The Market Average (in black) shows the range of current \" +\r\n `${CONFIG.RegionId === 3 ? \"weekly\" : \"\"}` +\r\n \" rates for this unit type. Hover over the range to view the specific rates.
If Your Store is advertising rates for this unit type, your rates will be shown here (in orange). Hover over the range to view the specific rates.
Compare the \" +\r\n `${CONFIG.RegionId === 3 ? \"weekly\" : \"\"}` +\r\n \" rate range for any store/competitor in this Market*
*See 'All Stores' below to select stores/competitors to compare to on this graph
*Your store prices are included in the calculations.
This shows all the stores in this Market and their current \" +\r\n `${CONFIG.RegionId === 3 ? \"weekly\" : \"\"}` +\r\n \" price ranges for each of the most common unit types.
Click on any to show/remove on the graph above for comparison.
*Your store prices are included in the calculations.
\",\r\n };\r\n var storeName = \"\";\r\n {\r\n storeName = storeAddress ? storeAddress.storeName : \"\";\r\n }\r\n var count = 0;\r\n var initvalue = \"\";\r\n const rowsitem = [];\r\n var tData = [];\r\n var pData = [];\r\n var udt = 0;\r\n\r\n if (compitatorAll.length > 0) {\r\n tData = this.formData(compitatorAll);\r\n pData = compitatorAll.filter((a) => a.priceFrom > 0 || a.priceTo > 0);\r\n let unique = [...new Set(compitatorAll.map((item) => item.unitType))];\r\n udt = unique.length;\r\n }\r\n\r\n return (\r\n
\r\n {isLoading ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n\r\n {localStorage.getItem(\"isMVP_User\") === \"false\" ? (\r\n \r\n My Markets\r\n \r\n ) :\r\n \"\"}\r\n\r\n\r\n Go to Market Dashboard\r\n\r\n\r\n \r\n All Units Pricing\r\n \r\n \r\n 0 || myStore.length > 0)\r\n ? false\r\n : true\r\n }\r\n className={\r\n tData.length > 0 || myStore.length > 0\r\n ? \"apply-btn download-pdf \"\r\n : \"download-pdf-disabled\"\r\n }\r\n onClick={this.downLoadPDF.bind(this)}\r\n >\r\n \r\n PDF Download\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst MyMarketWrapped = withStyles(actionsStyles, { withTheme: true })(\r\n MyMarket,\r\n);\r\n\r\nexport default class MarketScore extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.compstorechild = React.createRef();\r\n\r\n this.state = {\r\n options: {\r\n chart: {\r\n id: 'apexchart-example',\r\n toolbar: {\r\n show: false\r\n }\r\n },\r\n legend: {\r\n show: false,\r\n },\r\n plotOptions: {\r\n bar: {\r\n distributed: true\r\n }\r\n },\r\n xaxis: {\r\n categories: [],\r\n show: false\r\n },\r\n yaxis: {\r\n show: false,\r\n\r\n },\r\n noData: {\r\n text: \"Please wait for the data to be loaded. The data volume is high and this might take a minute for loading the data.\",\r\n verticalAlign: 'top',\r\n style: {\r\n color: \"#5b95f6\",\r\n fontSize: '13px',\r\n fontFamily: \"Helvetica\"\r\n }\r\n },\r\n },\r\n series: [{\r\n name: '',\r\n data: []\r\n }],\r\n isLoading1: true,\r\n order: 'asc',\r\n orderBy: 'storeName',\r\n snackOpen: false,\r\n snackMSg: '',\r\n grapghCatcheck: 'Total',\r\n graphOpen: 'Total',\r\n MarkScoringData: [],\r\n MarkScoring: [],\r\n MarkStoreInfo: {},\r\n Markets: [],\r\n MarketsDesc: {},\r\n ChartTableData: {},\r\n GraphCompId: {},\r\n locationInfoData: {},\r\n pageCount: 0,\r\n trackModalData: '',\r\n storeModal: false,\r\n defaultWidth: 0,\r\n dialogOpen: false,\r\n MarketSCdet: {},\r\n Scorecard: [],\r\n uniquestores: [],\r\n snackClr: ''\r\n };\r\n this.handleRequestSort = this.handleRequestSort.bind(this);\r\n this.stableSort = this.stableSort.bind(this);\r\n this.getSorting = this.getSorting.bind(this);\r\n this.desc = this.desc.bind(this);\r\n this.onSelecCatGrapgh = this.onSelecCatGrapgh.bind(this);\r\n this.scoringData = this.scoringData.bind(this);\r\n this.drawChart = this.drawChart.bind(this);\r\n this.getParams = this.getParams.bind(this);\r\n this.dialogContentOpen = this.dialogContentOpen.bind(this);\r\n }\r\n\r\n getParams(storeAddress) {\r\n let storeId = parseInt(this.props.match.params.storeid);\r\n this.compstorechild.current.toggleStoreModal(storeAddress, storeId);\r\n }\r\n\r\n //Table Sorting \r\n handleRequestSort(event, property) {\r\n const { order, orderBy } = this.state;\r\n const isDesc = orderBy === property && order === 'desc';\r\n let sort = isDesc ? 'asc' : 'desc';\r\n this.setState({ order: sort, orderBy: property });\r\n }\r\n\r\n //Table Sorting order\r\n desc(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n }\r\n\r\n //Table Sorting the selected Column\r\n stableSort(array, cmp) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = cmp(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map(el => el[0]);\r\n }\r\n\r\n //Table Sorting Order Request\r\n getSorting(order, orderBy) {\r\n return order === 'desc' ? (a, b) => this.desc(a, b, orderBy) : (a, b) => -this.desc(a, b, orderBy);\r\n }\r\n\r\n //To open Particular Category's Graph \r\n onSelecCatGrapgh(openActGraph) {\r\n let activeRow = this.state.grapghCatcheck === openActGraph ? '' : openActGraph;\r\n activeRow === '' ?\r\n this.setState({ grapghCatcheck: activeRow, graphOpen: activeRow })\r\n :\r\n this.setState({ grapghCatcheck: activeRow, graphOpen: activeRow }, () => {\r\n this.drawChart();\r\n });\r\n }\r\n downLoadPDF() {\r\n // this.setState({ isLoading1: true });\r\n var currentDate = moment(new Date()).format(\"DD-MMM-YYYY\");\r\n let graphOpen = this.state.graphOpen === \"Total\" ? '1' : this.state.graphOpen === \"Website\" ? '2' : this.state.graphOpen === \"Search\" ? '3' : this.state.graphOpen === \"Paid Search\" ? '4' : this.state.graphOpen === \"Social Media\" ? '5' : this.state.graphOpen === \"Contactability\" ? '6' : '';\r\n let pta = this.state.order;\r\n let searchId = this.state.orderBy;\r\n let unitType = this.state.uniquestores ? this.state.uniquestores : '';\r\n let usId = parseInt(this.props.match.params.storeid);\r\n let accessKey = localStorage.getItem('SecretKey');\r\n var timestamp = new Date().getDate() + \"\" + new Date().getMonth() + \"\" + new Date().getFullYear() + \"\" + new Date().getTime();\r\n //construct filename for pdf report.\r\n var fileName = usId + \"MarketScoreCard\" + \"_\" + timestamp + \".pdf\";\r\n var stoName = this.state.locationInfoData && this.state.locationInfoData.storeName && this.state.locationInfoData.storeName !== null && this.state.locationInfoData.storeName !== '' && this.state.locationInfoData.storeName !== undefined ? this.state.locationInfoData.storeName : 'Your Store';\r\n var fileNamePdf = stoName + '_' + \"MarketScoreCard\" + '_' + currentDate + \".pdf\";\r\n this.setState({ snackClr: 'snack-info', snackOpen: true, snackMSg: 'Your download is being processed. The ' + fileNamePdf + ' file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.' });\r\n let ComponentName = 5;\r\n const Input = {\r\n \"RegionID\": CONFIG.RegionId,\r\n \"URL\": CONFIG.OPTZ_URL + \"render-pdf/\" + accessKey + '/' + ComponentName + '/0/' + usId + '/' + pta + \"/\" + searchId + \"/\" + graphOpen + \"/\" + unitType,\r\n \"FileName\": fileName,\r\n }\r\n // axios.post(CONFIG.API_URL + 'dashboard/generatepdfbypage', Input)\r\n axios(\r\n {\r\n url: CONFIG.API_URL + 'dashboard/generatepdfbypage',\r\n method: 'post',\r\n responseType: 'blob',\r\n data: Input\r\n })\r\n .then(response => {\r\n const blob = new Blob([response.data], { type: 'application/octet-stream' });\r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob);\r\n link.download = fileNamePdf;\r\n link.dispatchEvent(\r\n new MouseEvent('click', {\r\n bubbles: true,\r\n cancelable: true,\r\n view: window\r\n })\r\n );\r\n setTimeout(() => {\r\n // For Firefox it is necessary to delay revoking the ObjectURL\r\n window.URL.revokeObjectURL(link.href);\r\n link.remove();\r\n }, 3000);\r\n this.setState({ isLoading: false });\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading1: false });\r\n })\r\n }\r\n\r\n componentDidMount() {\r\n let token = localStorage.getItem('accessKey');\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n }\r\n\r\n // For Current Store Info\r\n const data = {\r\n \"UserStoreID\": parseInt(this.props.match.params.storeid),\r\n \"RegionId\": CONFIG.RegionId\r\n };\r\n axios.post(CONFIG.API_URL + 'dashboard/dashboardlocation', data)\r\n .then(response => {\r\n const locationInfoData = response.data.data.storeDashboard;\r\n this.setState({ locationInfoData });\r\n }).catch((err) => {\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else if (err.response.status === 403) {\r\n const { from } = this.props.location.state || { from: { pathname: \"/UnauthorizedAccess\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n\r\n //For Graph and Table Content\r\n const Storedata = {\r\n \"UserStoreID\": parseInt(this.props.match.params.storeid),\r\n \"RegionId\": CONFIG.RegionId\r\n };\r\n axios.post(CONFIG.API_URL + 'Dashboard/marketscoring', Storedata)\r\n .then(res => {\r\n let MarkScoring = res.data.data.scorings;\r\n let MarkStoreInfo = res.data.data.storeInformation;\r\n let Markets = res.data.data.markets;\r\n let MarketsDesc = res.data.data.marketDescriptions;\r\n this.setState({ MarkScoring, MarkStoreInfo, Markets, MarketsDesc });\r\n this.scoringData();\r\n })\r\n .catch(err => {\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else if (err.response.status === 403) {\r\n const { from } = this.props.location.state || { from: { pathname: \"/UnauthorizedAccess\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n snackHandleclose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n this.setState({ snackOpen: false });\r\n };\r\n\r\n barhandleChange(CompId) {\r\n //loader \r\n this.setState({ isLoading1: true });\r\n\r\n //getting the ids of to show or hide the graph data\r\n let GraphshowData = this.state.MarkScoring.filter(function (data) {\r\n return data.isSelected === true && data.storeId !== CompId;\r\n });\r\n\r\n if (GraphshowData.length > 7) {\r\n this.setState({ isLoading1: false, snackOpen: true, snackMSg: 'You can view up to 8 markets only, please remove any of the selected markets to add new ones.' });\r\n }\r\n else {\r\n\r\n //to change the selected value which clicked on table\r\n let uniquestore = [...new Set(this.state.MarkScoring.filter(function (data) {\r\n return data.isSelected === true ? data.storeId !== CompId : data.storeId === CompId\r\n }).map(item => item.storeId))].join(', ');\r\n //forloop\r\n let uniquestores = [...new Set(this.state.MarkScoring.filter(function (data) {\r\n return data.isSelected === true ? data.storeId !== CompId : data.storeId === CompId\r\n }).map(item => item.storeId))].join('/');\r\n\r\n //If User Remove all Markets, then uniquestore should be 0\r\n uniquestore = uniquestore === '' ? 0 : uniquestore;\r\n uniquestores = uniquestores === '' ? 0 : uniquestores;\r\n this.setState({ uniquestores });\r\n\r\n for (var i = 0; i < this.state.MarkScoring.length; i++) {\r\n if (this.state.MarkScoring[i].storeId === CompId) {\r\n this.state.MarkScoring[i].isSelected = this.state.MarkScoring[i].isSelected === true ? false : true;\r\n }\r\n }\r\n let MarkScoring = this.state.MarkScoring;\r\n\r\n let token = localStorage.getItem('accessKey');\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n }\r\n const data = {\r\n \"UserStoreID\": parseInt(this.props.match.params.storeid),\r\n \"Competitors\": uniquestore,\r\n \"RegionId\": CONFIG.RegionId\r\n };\r\n axios.post(CONFIG.API_URL + 'Dashboard/marketscoringgraph', data)\r\n .then(res => {\r\n this.setState({ Markets: [], MarkScoringData: [], ChartTableData: {} });\r\n let Markets = res.data.data.markets;\r\n this.setState({ Markets, MarkScoring });\r\n this.scoringData();\r\n })\r\n .catch(err => {\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n }\r\n\r\n //To Assign the data for particular bar and tables\r\n scoringData() {\r\n const { MarkScoring, MarkStoreInfo, Markets, MarketsDesc } = this.state;\r\n /* Spliting the data in the order of StoreID In Scoring Tabl */\r\n let MarkScoringData = this.state.MarkScoringData;\r\n MarkScoringData.push({\r\n 'statdata': MarkScoring.filter(function (data) {\r\n return data.storeId < 1 || data.isMyMarket === 1;\r\n }), 'dynamdata': MarkScoring.filter(function (data) {\r\n return data.storeId > 0 && data.isMyMarket !== 1;\r\n })\r\n });\r\n /* End of Spliting the data in the order of StoreID In Scoring Table */\r\n\r\n //Checking for data availability\r\n let AvailDataCheck = [];\r\n AvailDataCheck = Markets.filter(function (data) {\r\n return data.storeId > 0;\r\n });\r\n\r\n\r\n let ChartTableData = this.state.ChartTableData;\r\n if (Markets.length > 0 && AvailDataCheck.length > 0) {\r\n\r\n /* Spliting the data in the order of activityType */\r\n ChartTableData['lahMarkets'] = [];\r\n\r\n //For Total data\r\n ChartTableData['lahMarkets'].push({\r\n 'tr1': Markets.filter(function (data) {\r\n return data.storeId < 1 && data.activityType === 'Total';\r\n }), 'tr2': Markets.filter(function (data) {\r\n return data.isMyStore === true && data.activityType === 'Total';\r\n })\r\n });\r\n\r\n //For Website data\r\n ChartTableData['lahMarkets'].push({\r\n 'tr1': Markets.filter(function (data) {\r\n return data.storeId < 1 && data.activityType === 'Website';\r\n }), 'tr2': Markets.filter(function (data) {\r\n return data.isMyStore === true && data.activityType === 'Website';\r\n })\r\n });\r\n\r\n //For Website data\r\n ChartTableData['lahMarkets'].push({\r\n 'tr1': Markets.filter(function (data) {\r\n return data.storeId < 1 && data.activityType === 'Search';\r\n }), 'tr2': Markets.filter(function (data) {\r\n return data.isMyStore === true && data.activityType === 'Search';\r\n })\r\n });\r\n\r\n //For Paid Search data\r\n ChartTableData['lahMarkets'].push({\r\n 'tr1': Markets.filter(function (data) {\r\n return data.storeId < 1 && data.activityType === 'Paid Search';\r\n }), 'tr2': Markets.filter(function (data) {\r\n return data.isMyStore === true && data.activityType === 'Paid Search';\r\n })\r\n });\r\n\r\n //For Social Media data\r\n ChartTableData['lahMarkets'].push({\r\n 'tr1': Markets.filter(function (data) {\r\n return data.storeId < 1 && data.activityType === 'Social Media';\r\n }), 'tr2': Markets.filter(function (data) {\r\n return data.isMyStore === true && data.activityType === 'Social Media';\r\n })\r\n });\r\n\r\n //For Contactability data\r\n ChartTableData['lahMarkets'].push({\r\n 'tr1': Markets.filter(function (data) {\r\n return data.storeId < 1 && data.activityType === 'Contactability';\r\n }), 'tr2': Markets.filter(function (data) {\r\n return data.isMyStore === true && data.activityType === 'Contactability';\r\n })\r\n });\r\n\r\n /* end of Spliting the data in the order of activityType */\r\n\r\n /* Barchart table's Head data */\r\n ChartTableData['TableHead'] = Markets.filter(function (data) {\r\n return data.storeId > 0 && data.activityType === 'Total' || data.storeId < -2 && data.activityType === 'Total';\r\n });\r\n /* end of Barchart table's Head data */\r\n\r\n /* Barchart table's body data */\r\n ChartTableData['TableBody'] = [];\r\n\r\n //For Total data\r\n ChartTableData['TableBody'].push({\r\n 'td1': 'Total', 'td2': Markets.filter(function (data) {\r\n return data.storeId > 0 && data.activityType === 'Total' || data.storeId < -2 && data.activityType === 'Total';\r\n })\r\n });\r\n\r\n //For Website data\r\n ChartTableData['TableBody'].push({\r\n 'td1': 'Website', 'td2': Markets.filter(function (data) {\r\n return data.storeId > 0 && data.activityType === 'Website' || data.storeId < -2 && data.activityType === 'Website';\r\n })\r\n });\r\n\r\n //For Search data\r\n ChartTableData['TableBody'].push({\r\n 'td1': 'Search', 'td2': Markets.filter(function (data) {\r\n return data.storeId > 0 && data.activityType === 'Search' || data.storeId < -2 && data.activityType === 'Search';\r\n })\r\n });\r\n\r\n //For Paid Search data\r\n ChartTableData['TableBody'].push({\r\n 'td1': 'Paid Search', 'td2': Markets.filter(function (data) {\r\n return data.storeId > 0 && data.activityType === 'Paid Search' || data.storeId < -2 && data.activityType === 'Paid Search';\r\n })\r\n });\r\n\r\n //For Social Media data\r\n ChartTableData['TableBody'].push({\r\n 'td1': 'Social Media', 'td2': Markets.filter(function (data) {\r\n return data.storeId > 0 && data.activityType === 'Social Media' || data.storeId < -2 && data.activityType === 'Social Media';\r\n })\r\n });\r\n\r\n //For Contactability data\r\n ChartTableData['TableBody'].push({\r\n 'td1': 'Contactability', 'td2': Markets.filter(function (data) {\r\n return data.storeId > 0 && data.activityType === 'Contactability' || data.storeId < -2 && data.activityType === 'Contactability';\r\n })\r\n });\r\n\r\n /* end of Barchart table's body data */\r\n }\r\n this.setState({ MarkScoringData, MarkStoreInfo, MarketsDesc, Markets, ChartTableData, isLoading1: false });\r\n this.drawChart();\r\n }\r\n\r\n //Formatted in as per competitor\r\n // formData(data) {\r\n // let uniquestore = [...new Set(data.map(item => item.storeId))];\r\n // let CurrentActivity = this.state.grapghCatcheck;\r\n // let Colorbarcode = ['#f69e4f', '#1b2c42', '#5b95f6', '#f96a5d', '#3ea7a1', '#83ce83', '#fac05f', '#959595'];\r\n // var FData = [];\r\n\r\n // for (var t = 0; t < uniquestore.length; t++) {\r\n // var tFData = data.filter(a => a.storeId == uniquestore[t] && a.activityType === CurrentActivity);\r\n // var mData = {};\r\n // if (tFData) {\r\n // mData = {\r\n // StoreID: uniquestore[t],\r\n // StoreName: tFData[0].storeName,\r\n // Score: tFData[0].score,\r\n // act: tFData[0].activityType,\r\n // Gcolor: Colorbarcode[t],\r\n // IsSelected: tFData[0].isSelected\r\n // }\r\n // }\r\n // FData.push(mData);\r\n // }\r\n // return FData;\r\n // }\r\n\r\n //Bar Chart\r\n drawChart() {\r\n let { Markets, grapghCatcheck } = this.state;\r\n let actualData = [];\r\n let colorsData = [];\r\n let storeName = [];\r\n let maxScore = 0;\r\n let colorsCode = ['#f69e4f', '#1b2c42', '#5b95f6', '#f96a5d', '#3ea7a1', '#83ce83', '#fac05f', '#959595'];\r\n let filterMarkets = Markets.filter(fl => fl.storeId > 0 || fl.storeId < -2);\r\n let uniquestore = [...new Set(filterMarkets.map(item => item.storeId))];\r\n for (var t = 0; t < uniquestore.length; t++) {\r\n var tFData = filterMarkets.filter(a => a.storeId === uniquestore[t] && a.activityType === grapghCatcheck);\r\n let noValues = tFData.every(item => item.score === null || item.score === '' || item.score === undefined);\r\n if (!noValues) {\r\n let dataSeries = tFData[0].score;\r\n let storageName = tFData[0].storeName;\r\n maxScore = tFData[0].totalScore;\r\n actualData.push(dataSeries);\r\n storeName.push(storageName);\r\n colorsData.push(colorsCode[t]);\r\n }\r\n }\r\n\r\n const options = {\r\n colors: colorsData,\r\n chart: {\r\n \r\n id: `apexchart-example${Math.random()}`, //when the state updates randam id has to change to render the changes\r\n toolbar: {\r\n show: false\r\n },\r\n },\r\n tooltip: {\r\n enabled: true,\r\n showForNullSeries: false,\r\n x: {\r\n formatter: function (value) {\r\n let val = value === undefined || typeof (value) !== \"string\" ? '' : value;\r\n return val;\r\n }\r\n },\r\n onDatasetHover: {\r\n highlightDataSeries: false,\r\n },\r\n style: {\r\n fontSize: '11px',\r\n fontFamily: \"Roboto, Helvetica, Arial , sans-serif\"\r\n },\r\n },\r\n yaxis: {\r\n \r\n min: 0,\r\n max: maxScore,\r\n tickAmount: 5,\r\n labels: {\r\n formatter: function (value) {\r\n return value === 0 ? \"\" : `${value.toFixed(0)}/${maxScore ? maxScore : 0}`;\r\n },\r\n style: {\r\n colors: '#140000',\r\n fontSize: '10px'\r\n },\r\n },\r\n },\r\n plotOptions: {\r\n bar: {\r\n distributed: true,\r\n borderRadius: 5,\r\n dataLabels: {\r\n position: 'top',\r\n },\r\n columnWidth: '25%',\r\n barHeight: '50%',\r\n },\r\n },\r\n dataLabels: {\r\n enabled: true,\r\n offsetY: -20,\r\n style: {\r\n fontSize: '10px',\r\n colors: [\"#304758\"]\r\n },\r\n formatter: function (val, opts) {\r\n return val === 0 ? '' : val;\r\n },\r\n },\r\n grid: { show: false },\r\n xaxis: {\r\n categories: storeName,\r\n labels: {\r\n show: true,\r\n rotate: 0,\r\n hideOverlappingLabels: false,\r\n trim: true,\r\n formatter: function (value) {\r\n let val = value === undefined || typeof (value) !== \"string\" ? '' : value.toUpperCase();\r\n return val;\r\n },\r\n style: {\r\n colors: '#8C9AA6',\r\n fontSize: '10px'\r\n },\r\n }\r\n },\r\n legend: {\r\n show: false,\r\n }\r\n }\r\n\r\n const series = [{\r\n name: '',\r\n data: actualData\r\n }]\r\n\r\n if (actualData.length > 0) {\r\n this.setState({ options, series })\r\n } else {\r\n this.setState({\r\n options: {\r\n chart: {\r\n id: 'apexchart-example'\r\n },\r\n noData: {\r\n text: \"No Data Available.\",\r\n align: 'center',\r\n verticalAlign: 'top',\r\n offsetX: 0,\r\n offsetY: 0,\r\n style: {\r\n color: \"#F60000\",\r\n fontSize: '20px',\r\n fontFamily: \"Helvetica\"\r\n }\r\n },\r\n yaxis: { show: false },\r\n grid: { show: false },\r\n xaxis: {\r\n labels: {\r\n show: false\r\n },\r\n }\r\n },\r\n series: []\r\n })\r\n }\r\n }\r\n\r\n // Text Wrap For Graph X-axis label\r\n /* Score Card Dialog box functions */\r\n dialogContentOpen(id, YS_data) {\r\n this.setState({\r\n isLoading1: true\r\n })\r\n let token = localStorage.getItem('accessKey');\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n }\r\n const data = {\r\n \"StoreId\": parseInt(id),\r\n \"RegionId\": CONFIG.RegionId\r\n };\r\n axios.post(CONFIG.API_URL + 'dashboard/marketscorecard', data)\r\n .then(res => {\r\n //let Scorecard = res.data.scoreCard.marketScoreCardDetails;\r\n let ScorecardDet = res.data.scoreCard.marketScoreCardDetails;\r\n let MarketSCdet = this.state.MarketSCdet;\r\n\r\n if (ScorecardDet.length > 0) {\r\n //to get Market Details\r\n MarketSCdet.id = [...new Set(ScorecardDet.map(item => item.storeId))];\r\n MarketSCdet.StoreName = YS_data === 'YourStore' ? ['Your Store'] : [...new Set(ScorecardDet.map(item => item.storeName))];\r\n MarketSCdet.StoreAddress = [...new Set(ScorecardDet.map(item => item.address))];\r\n MarketSCdet.CheckDate = [...new Set(ScorecardDet.map(item => item.dtCollected))];\r\n MarketSCdet.M_TotScore = [...new Set(ScorecardDet.map(item => item.totalScore))];\r\n\r\n\r\n //For Market Score Card For Map Details \r\n let uniquemscore = [...new Set(ScorecardDet.map(item => item.marketingActivity))];\r\n var Scorecard = [];\r\n for (var t = 0; t < uniquemscore.length; t++) {\r\n var tempData = ScorecardDet.filter(a => a.marketingActivity == uniquemscore[t]);\r\n for (var s = 0; s < tempData.length; s++) {\r\n var inlineData = {\r\n storeId: tempData[s].storeId,\r\n storeName: tempData[s].storeName,\r\n address: tempData[s].address,\r\n marketingActivity: s === 0 ? tempData[s].marketingActivity : 'empty',\r\n name: tempData[s].name,\r\n score: tempData[s].score,\r\n activityScore: tempData[s].activityScore,\r\n activityScoreTotal: tempData[s].activityScoreTotal,\r\n totalScore: tempData[s].totalScore,\r\n dtCollected: tempData[s].dtCollected,\r\n id: tempData[s].id,\r\n rowcount: s === 0 ? tempData.length : 0,\r\n color: t % 2 ? 'odd-m-score' : 'even-m-score'\r\n }\r\n Scorecard.push(inlineData);\r\n }\r\n }\r\n this.setState({ dialogOpen: true, Scorecard, MarketSCdet, isLoading1: false });\r\n }\r\n else {\r\n this.setState({ MarketSCdet, isLoading1: false, snackOpen: true, snackMSg: 'Score Card is not available in this market.' });\r\n }\r\n })\r\n .catch(err => {\r\n this.setState({ isLoading1: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n dialogClose() {\r\n this.setState({ dialogOpen: false, MarketSCdet: {}, Scorecard: [] });\r\n }\r\n /* End of Score Card Dialog box functions */\r\n\r\n handleChangePageTrack = (event, pageCount) => {\r\n this.setState({ pageCount });\r\n };\r\n\r\n handleChangeRowsPerPageTrack = event => {\r\n this.setState({ pageCount: 0, 10: event.target.value });\r\n };\r\n\r\n render() {\r\n const { order, orderBy, grapghCatcheck, graphOpen, MarkScoringData, MarkStoreInfo, ChartTableData, MarketsDesc, snackOpen, snackMSg,\r\n locationInfoData, isLoading1, trackModalData, pageCount, Markets, MarketSCdet, Scorecard } = this.state;\r\n let ComActivityType = ['Total', 'Website', 'Search', 'Paid Search', 'Social Media', 'Contactability'];\r\n let Colors = ['mystorebarclr', 'barclr1', 'barclr2', 'barclr3', 'barclr4', 'barclr5', 'barclr6', 'barclr7'];\r\n const defaultProps = {\r\n helpTitle: Marketing Scorecard - an explanation,\r\n helpContent: \"
The StorTrack Marketing Scorecard is a devised scoring mechanism for judging the activity and effectiveness of a Store's local marketing, so as to enable us to create a methodology for comparison and competitive insight.
The Scorecard is created by monitoring 5 different areas of a Store's marketing activities: it's website, it's organic presence on search engines, it's paid placement in search engines, the social media presence of the Store and finally how easy the Store makes it for potential new tenants to contact it. In each of these five categories, StorTrack has created a weighted scoring process that then rolls up to a category score. The category scores are what you see on the Marketing Scorecard page and the method by which we compare Stores side-by-side.
The Scoring Process is detailed in the attached PDF. Please click the link to download the full Scoring methodology. Click here
For any further information on StorTrack's Marketing Scorecard please contact Support directly.
*Your store scoring is included in the calculations.
Refer the below help video for more information.
\"\r\n }\r\n return (\r\n
\r\n {isLoading1 ?
: ''}\r\n \r\n\r\n {localStorage.getItem('isMVP_User') === \"false\" ? My Markets : \"\"}\r\n\r\n Go to Market Dashboard\r\n\r\n Marketing Scorecard \r\n \r\n \r\n \r\n
\r\n {isLoading1 === false ? 'There are no competitors available in this market.' : ''}\r\n \r\n\r\n }\r\n \r\n {Markets && Markets.length > 0 ?\r\n \r\n
\r\n \r\n
\r\n \r\n This market is considered\r\n {MarketsDesc.marketScoreValue ? MarketsDesc.marketScoreValue : ''}\r\n {MarketsDesc ? MarketsDesc.marketScore : ''}\r\n \r\n \r\n
\r\n \r\n The most competitive Store is\r\n {MarketsDesc.highestMarketName ? MarketsDesc.highestMarketName : ''}\r\n {MarketsDesc ? MarketsDesc.highestMarket : ''}\r\n \r\n \r\n
\r\n \r\n The lowest Marketing Activity area is\r\n {MarketsDesc.lowestMarketActivity ? MarketsDesc.lowestMarketActivity : ''}\r\n {MarketsDesc.lowestMarket ? MarketsDesc.lowestMarket : 'There are no competitors available in this market.'}\r\n \r\n \r\n \r\n \r\n \r\n :\r\n ''}\r\n \r\n
Inventory Availability refers to the number of stores in the Market offering a particular unit type. When a store takes a unit off their website, their inventory availability for that unit type goes down. If a store adds a unit type to their website, their inventory availability goes up.
Here you can see the current Inventory Availability across the entire Market, as well as a breakdown of current Inventory Availability by store type - Your Store, REITs, Multi-store and Single-store operators.
Inventory Availability for the Market
The aggregate number of On-Market/Stores Offering any unit type in this Market
Inventory Availability for Your Store
How many Unit Types Your Store has offered in the past vs. how many of them are currently being offered (or are 'On-Market'). For example, let's say Your Store has offered/advertised 8 different Unit Types but currently has only 6 of them on-market (and by definition 2 are off-market), then 'Your Store' Inventory Availability is 75%, i.e. 6÷8)
Inventory Availability for REITs, Mid-Ops, Single-Ops
This is the same calculation as explained in 'Your Store' above, but calculated for each store group (REIT, Multi and Single operators). For example, if there are 3 REITs in the Market and two are offering 6 of 8 unit types and one of them is offering 5 of 8 unit types, then the aggregate Inventory Availability for REITs is (((6÷8)+(6÷8)+(5÷8))/3) x 100 = 70.8%
*Your store inventory is included in the calculations.
Inventory Availability refers to the number of stores in the Market offering a particular unit type. When a store takes a unit off their website, the inventory availability for that unit type goes down. If a store adds a unit type to their website, the inventory availability for that unit type goes up. Here you will see a breakdown of the number of stores offering vs. the number of stores which have never offered each of the most common unit types.
*Your store inventory is included in the calculations.
\",\r\n };\r\n const defaultProps2 = {\r\n helpTitle: \"Inventory Availability by Unit Type\",\r\n helpContent:\r\n \"
This graph is a deeper analysis of the Inventory Supply you see above. It further analyzes for each unit type, how many out of all the stores in the Market which have advertised this unit type at some point, the number of stores currently offering/advertising this unit type vs. the number of stores (which have advertised it in the past) are currently not offering this unit type.
*Your store inventory is included in the calculations.
This table is a continuation of the Inventory Supply graph you see above. It shows, for each unit type, how many out of all the stores in the Market which have advertised this unit type at some point, the number of stores currently offering/advertising this unit type vs. the number of stores (which have advertised it in the past) are currently not offering this unit type.
*Your store inventory is included in the calculations.
\",\r\n };\r\n let uTypeLen = uniqueUnitType.length;\r\n return (\r\n
\r\n {isLoading === false ? \"No Data Available\" : \"\"}\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
Inventory by Store
\r\n {invStores.length > 0 ? (\r\n
\r\n \r\n {\" \"}\r\n Currently Advertising this Unit Type\r\n \r\n \r\n {\" \"}\r\n Not\r\n Currently Advertising this Unit Type\r\n \r\n {/* Never offered in this unit type */}\r\n
In this section, the graph enables you to compare rates like-for-like, against your top competitors*. The rates shown on the graph are based on the Online Advertised Rate on the store's website.
The Number of Pricing Options shows you if the selected store* offers more than one price type for this unit type.
The highest price advertised by a store is shown as the Premium rate.
The lowest price advertised by a store is shown as the Value rate.
Any other rates in between are shown as a range
If there is only one price for a unit, it is shown as both the Premium and Value rate
Market Low, Market Average and Market High
These rates are based on the online rates advertised by the competitor stores* and the price type chosen (Premium or Value).
*See the All Market View section below to learn how you can change the competitors you can compare against on this graph.
*Your store prices are included in the calculations.
View historical rates for this unit type over the last 5 days, 30 days, 90 days, 6 months or 1 year, choose the time range from the drop down menu. You can also view rates by pricing type - Premium, Value or both. See the All Market View section below to learn how you can change the competitors you can compare against on this graph. These rates are based on the \" +\r\n `${CONFIG.RegionId === 3\r\n ? \"Advertised Online Weekly Rate.\"\r\n : \"Advertised Online Rate.\"\r\n }` +\r\n \"
*Your store prices are included in the calculations.
These are all the stores in this Market offering this unit type.
Select up to a total of 8 competitor stores listed below to compare against in the Current Pricing analysis section or Historical pricing view. You can remove any stores from the graph at any time.
*Your store prices are included in the calculations.
\r\n {/* {isLoading === false ? 'There are no competitors available in this market.' : ''} */}\r\n \r\n {GridTableValue.dynamdata || GridTableValue.statdata\r\n ? MarketViewpricingOptions.length === 1\r\n ? \"You have to select at least one competitor to show data here.\"\r\n : \"There are no competitors available in this market.\"\r\n : \"\"}\r\n \r\n \r\n )}\r\n \r\n
\r\n {\r\n filterData.map((item)=>{\r\n return(\r\n <>\r\n \r\n {item.name}\r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n has same value in the series. Please hover your mouse to see detailed information. \r\n
\r\n {storeAdvertising ? \r\n * This store is not currently advertising a rate for this unit.\r\n : ''}\r\n\r\n \r\n * This rate is calculated from an advertised monthly\r\n rate\r\n \r\n
\r\n ) : (<>\r\n {storeAdvertising ? \r\n * This store is not currently advertising a rate for this unit.\r\n : ''}\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst EffectiveRateWrapped = withStyles(actionsStyles, { withTheme: true })(\r\n EffectiveRate\r\n);\r\n","import React from \"react\";\r\nimport \"./MarketInventoryAnalysis.css\";\r\nimport Chart from \"react-apexcharts\";\r\nimport * as d3 from \"d3\";\r\nimport { CONFIG } from \"../../utils/config\";\r\nimport Snackbar from \"@material-ui/core/Snackbar\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport axios from \"axios\";\r\nimport { AvForm, AvField } from \"availity-reactstrap-validation\";\r\nimport moment from \"moment\";\r\nimport { MarketProfile } from \"../MarketProfile\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n Row,\r\n Col,\r\n Button,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n Table as TableBoots,\r\n} from \"reactstrap\";\r\nimport greenimage from \"./../../Assets/Images/green.png\";\r\nimport redimages from \"./../../Assets/Images/red.png\";\r\nimport downarrows from \"./../../Assets/Images/down-arrow.png\";\r\nimport { HelpTextPopup } from \"./../HelpTextPopup/index\";\r\nimport { faFilePdf } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport resetPng from '../../Assets/Images/reset.png';\r\n\r\nexport default class MarketInventoryAnalysis extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.child = React.createRef();\r\n this.state = {\r\n options: {\r\n chart: {\r\n id: 'apexchart-example',\r\n toolbar: {\r\n show: false\r\n }\r\n },\r\n\r\n xaxis: {\r\n show: false,\r\n labels: {\r\n show: false,\r\n },\r\n axisBorder: {\r\n show: false\r\n },\r\n axisTicks: {\r\n show: false\r\n }\r\n },\r\n grid: { show: false },\r\n yaxis: { show: false },\r\n noData: {\r\n text: \"Please wait for the data to be loaded. The data volume is high and this might take a minute for loading the data.\",\r\n verticalAlign: 'top',\r\n style: {\r\n color: \"#5b95f6\",\r\n fontSize: '13px',\r\n fontFamily: \"Helvetica\"\r\n }\r\n },\r\n },\r\n series: [{\r\n name: 'Store offered this Unit Type on',\r\n data: []\r\n }],\r\n unitInventoryAvailablity: \"\",\r\n isLoading: false,\r\n unitDurations: \"\",\r\n unitLevelInventory: \"\",\r\n isDefaultUnit: \"3\",\r\n storeId: \"\",\r\n defaultSelected: 3,\r\n isModel: false,\r\n date: \"\",\r\n searchId: \"\",\r\n isAddedCount: \"\",\r\n isRemovedCount: \"\",\r\n isNoGraphData: false,\r\n snackOpen: false,\r\n snackMSg: \"\",\r\n snackClr: \"\",\r\n date_value:[],\r\n yearRange : 3\r\n };\r\n\r\n // this.props;\r\n this.state.storeId = this.props.storeId;\r\n this.state.searchId = this.props.searchId;\r\n this.openPopup = this.openPopup.bind(this);\r\n this.getParams = this.getParams.bind(this);\r\n }\r\n\r\n getParams(name, sid) {\r\n this.child.current.toggleModal(name, sid);\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n isLoading: true,\r\n defaultSelected: 3,\r\n isDefaultUnit: \"3\",\r\n });\r\n axios.get(CONFIG.API_URL + \"unit/unitdurations\").then((response) => {\r\n let unitDurations = response.data.data.lookupData;\r\n\r\n this.setState({\r\n unitDurations,\r\n });\r\n });\r\n localStorage.setItem(\"StId\", this.state.storeId);\r\n const inputParam = {\r\n UserStoreID: this.state.storeId,\r\n SearchID: this.state.searchId,\r\n Duration: this.state.isDefaultUnit,\r\n RegionID: CONFIG.RegionId,\r\n };\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n this.commonInitLoad(inputParam);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n // this.myFormRef && this.myFormRef.reset();\r\n\r\n if (nextProps.searchId != this.props.searchId) {\r\n this.setState(\r\n {\r\n isLoading: true,\r\n defaultSelected: \"\",\r\n searchId: nextProps.searchId,\r\n storeId: nextProps.storeId,\r\n },\r\n () => {\r\n this.componentDidMount();\r\n }\r\n );\r\n // window.location.reload();\r\n // const { from } = { from: { pathname: \"/market-dashboard/${nextProps.storeId}/view-details/${nextProps.searchId}/${nextProps.storeCount}\" } };\r\n // this.props.history.push(from);\r\n }\r\n }\r\n\r\n commonInitLoad(inputParam) {\r\n this.setState({\r\n isLoading: true,\r\n });\r\n\r\n axios\r\n .post(CONFIG.API_URL + \"unit/unitdatahistoryinventory\", inputParam)\r\n .then((response) => {\r\n const unitLevelInventory = response.data.data.unitLevelInventory;\r\n const unitInventoryAvailablity =\r\n response.data.data.unitInventoryAvailablity;\r\n const isAddedCount = unitInventoryAvailablity.filter(\r\n (e) => e.isAdded === 1\r\n );\r\n const isRemovedCount = unitInventoryAvailablity.filter(\r\n (e) => e.isAdded === 0\r\n );\r\n // unitInventoryAvailablity.filter((e) => e.isAdded === 1).forEach(function (e) { isAddedCount.push(e.isAdded) });\r\n // unitInventoryAvailablity.filter((e) => e.isAdded === 0).forEach(function (e) { isRemovedCount.push(e.isAdded) });\r\n const date = response.data.data.datePrice.dateDetail;\r\n\r\n this.setState({\r\n unitInventoryAvailablity,\r\n unitLevelInventory,\r\n date,\r\n isAddedCount,\r\n isRemovedCount,\r\n isLoading: false,\r\n });\r\n if (this.state.unitLevelInventory.length > 0) {\r\n this.setState({\r\n isNoGraphData: false,\r\n });\r\n this.initialLoad(unitLevelInventory);\r\n } else {\r\n this.setState({\r\n isNoGraphData: true,\r\n });\r\n }\r\n })\r\n .catch((err) => {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem(\"accessKey\");\r\n const { from } = this.props.location.state || {\r\n from: { pathname: \"/\" },\r\n };\r\n this.props.history.push(from);\r\n } else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n initialLoad(res) {\r\n var data = res;\r\n let yearRange_bool;\r\n const {yearRange} = this.state\r\n \r\n if(this.state.yearRange < 4){\r\n yearRange_bool = true\r\n }else{\r\n yearRange_bool = false\r\n }\r\n\r\n \r\n\r\n \r\n const {date_value} = this.state;\r\n \r\n this.setState(prev => { return { ...prev , date_value } });\r\n let dataSeries = data.map(val => { return { x: val.datePrice, y: isNaN(val.availableCount) ? null : val.availableCount }; });\r\n let uniqueDataSet = [...new Set(data.map(val => { return isNaN(val.availableCount) ? null : val.availableCount }))];\r\n let marketSeries = [({ name: 'Store offered this Unit Type', data: dataSeries })];\r\n\r\n if (marketSeries.length > 0) {\r\n this.setState({\r\n isNoGraphData: false,\r\n options: {\r\n chart: {\r\n events:{\r\n beforeZoom: function(chartContext, { xaxis,yaxis }) {\r\n if(yaxis !== undefined || xaxis.min > 0) return chartContext.t.reset =``;\r\n },\r\n zoomed: function(chartContext, { xaxis, yaxis }) {\r\n if(yaxis === undefined || xaxis.min <= 0) return chartContext.toolbar.t.reset = false;\r\n },\r\n },\r\n toolbar: {\r\n show: true,\r\n tools: {\r\n download: false,\r\n selection: true,\r\n zoom: false,\r\n zoomin:false,\r\n zoomout:false,\r\n pan:false,\r\n reset:false,\r\n },\r\n },\r\n },\r\n stroke: {\r\n width: 2,\r\n },\r\n colors: [\"#1D1E1F\"],\r\n yaxis: {\r\n title: {\r\n text: \"Number of Stores offering this Unit Type\"\r\n },\r\n min:0,\r\n tickAmount: uniqueDataSet.length === 1 || uniqueDataSet.length === 2 ? 1 : 2,\r\n \r\n labels: {\r\n formatter: function (value) {\r\n return value === null ? \"N/A\" : value.toFixed(0);\r\n },\r\n style: {\r\n colors: '#8C9AA6',\r\n fontSize: '10px'\r\n },\r\n },\r\n style: {\r\n color: undefined,\r\n fontSize: '10px',\r\n fontFamily: 'Arial',\r\n fontWeight: 500,\r\n cssClass: 'apexcharts-yaxis-title',\r\n },\r\n },\r\n tooltip: {\r\n enabled: true,\r\n showForNullSeries: false,\r\n onDatasetHover: {\r\n highlightDataSeries: false,\r\n },\r\n style: {\r\n fontSize: '11px',\r\n fontFamily: \"Roboto, Helvetica, Arial , sans-serif\"\r\n },\r\n x: {\r\n show: true,\r\n formatter: function (value, opts) {\r\n if (typeof (opts) === \"object\") {\r\n let dtd = moment(opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].x, \"YYYY-MM-DD\").format('DD-MMM-YYYY');\r\n return dtd;\r\n }\r\n },\r\n },\r\n y: {\r\n formatter: function (value, opts) {\r\n if (typeof (opts) === \"object\") {\r\n let iAF = `${opts.series[opts.seriesIndex][opts.dataPointIndex]} Stores offered this Unit Type`;\r\n return iAF;\r\n }\r\n },\r\n title: {\r\n formatter: function (val) {\r\n if (val) return null;\r\n }\r\n }\r\n },\r\n },\r\n xaxis: {\r\n show: true,\r\n type: \"datetime\",\r\n tooltip: { enabled: false },\r\n labels: {\r\n formatter: function(value, timestamp, opts) {\r\n \r\n let val = value === undefined || typeof (value) !== \"string\" ? '' : yearRange_bool ? moment(new Date(value)).format('DD-MMM-YYYY') : moment(new Date(value)).format('MMM-YYYY');\r\n return val;\r\n },\r\n showDuplicates: false,\r\n show: true,\r\n rotate: 0,\r\n style: {\r\n colors: '#8C9AA6',\r\n fontSize: '10px'\r\n },\r\n },\r\n axisBorder: {\r\n show: true\r\n },\r\n axisTicks: {\r\n show: true\r\n },\r\n tickAmount: yearRange == 1 ? 4 : yearRange == 2 ? 4 : yearRange == 3 ? 12 : yearRange == 4 ? 5 : 9, \r\n },\r\n noData: {\r\n text: 'Please enable any one of the below legend to view the graph.',\r\n style: {\r\n color: \"#5b95f6\",\r\n }\r\n },\r\n },\r\n series: marketSeries\r\n });\r\n var tempdata = [];\r\n var datum = {\r\n name: \"Graph\",\r\n values: this.popData(data),\r\n };\r\n tempdata.push(datum);\r\n } else {\r\n this.setState({\r\n isNoGraphData: true,\r\n options: {\r\n chart: {\r\n toolbar: {\r\n show: false\r\n }\r\n },\r\n noData: {\r\n text: \"No Records Found.\",\r\n align: 'center',\r\n verticalAlign: 'top',\r\n offsetX: 0,\r\n offsetY: 0,\r\n style: {\r\n color: \"#F60000\",\r\n fontSize: '13px',\r\n fontFamily: \"Helvetica\"\r\n }\r\n },\r\n yaxis: { show: false },\r\n xaxis: {\r\n show: false,\r\n labels: {\r\n show: false\r\n },\r\n axisBorder: {\r\n show: false\r\n },\r\n axisTicks: {\r\n show: false\r\n },\r\n categories: []\r\n },\r\n },\r\n series: []\r\n })\r\n }\r\n }\r\n\r\n popData(data) {\r\n var tFData = data;\r\n var tData = [];\r\n for (var i = 0; i < tFData.length; i++) {\r\n var CData = {\r\n date: new Date(\r\n new Date().getFullYear(),\r\n new Date().getMonth(),\r\n tFData[i].orderNo\r\n ),\r\n totalStores: tFData[i].totalStores,\r\n availableCount: tFData[i].availableCount,\r\n datePrice: new Date(tFData[i].datePrice),\r\n orderNo: tFData[i].orderNo,\r\n };\r\n tData.push(CData);\r\n }\r\n return tData;\r\n }\r\n\r\n unitInventory(e) {\r\n this.state.isDefaultUnit = e.target.value;\r\n this.setState({yearRange : e.target.value});\r\n const inputParam = {\r\n UserStoreID: this.state.storeId,\r\n SearchID: this.state.searchId,\r\n Duration: this.state.isDefaultUnit,\r\n };\r\n\r\n let token = localStorage.getItem(\"accessKey\");\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + token;\r\n }\r\n this.commonInitLoad(inputParam);\r\n // this.initialLoad(res);\r\n }\r\n openPopup() {\r\n this.setState((prevState) => ({\r\n isModel: !prevState.isModel,\r\n }));\r\n }\r\n downLoadPDF() {\r\n // this.setState({ isLoading: true });\r\n var currentDate = moment(new Date()).format(\"DD-MMM-YYYY\");\r\n let pta = this.state.isDefaultUnit;\r\n let usId = this.props.storeId;\r\n let searchId = this.props.searchId;\r\n let accessKey = localStorage.getItem(\"SecretKey\");\r\n //let accessKey = '3f2b471776bc41cf863720bfc8cf9cb9';\r\n var timestamp =\r\n new Date().getDate() +\r\n \"\" +\r\n new Date().getMonth() +\r\n \"\" +\r\n new Date().getFullYear() +\r\n \"\" +\r\n new Date().getTime();\r\n //construct filename for pdf report.\r\n var fileName = usId + \"MarketInventoryAnalysis\" + \"_\" + timestamp + \".pdf\";\r\n var stoName =\r\n this.props.storeDetails &&\r\n this.props.storeDetails.storeName &&\r\n this.props.storeDetails.storeName !== \"\" &&\r\n this.props.storeDetails.storeName !== undefined &&\r\n this.props.storeDetails.storeName !== null\r\n ? this.props.storeDetails.storeName\r\n : \"Your Store\";\r\n var fileNamePdf =\r\n stoName + \"_\" + \"MarketInventoryAnalysis\" + \"_\" + currentDate + \".pdf\";\r\n this.setState({\r\n snackClr: \"snack-info\",\r\n snackOpen: true,\r\n snackMSg:\r\n \"Your download is being processed. The \" +\r\n fileNamePdf +\r\n \" file will download automatically to your browser when ready and Please do not close or reload the pages until download completes. We recommend you check your Downloads folder if you don’t see it in your browser.\",\r\n });\r\n let ComponentName = 9;\r\n const Input = {\r\n RegionID: CONFIG.RegionId,\r\n URL:\r\n CONFIG.OPTZ_URL +\r\n \"render-pdf/\" +\r\n accessKey +\r\n \"/\" +\r\n ComponentName +\r\n \"/0/\" +\r\n usId +\r\n \"/\" +\r\n pta +\r\n \"/\" +\r\n searchId +\r\n \"/\",\r\n FileName: fileName,\r\n };\r\n // axios.post(CONFIG.API_URL + 'dashboard/generatepdfbypage', Input)\r\n axios({\r\n url: CONFIG.API_URL + \"dashboard/generatepdfbypage\",\r\n method: \"post\",\r\n responseType: \"blob\",\r\n data: Input,\r\n })\r\n .then((response) => {\r\n const blob = new Blob([response.data], { type: 'application/octet-stream' });\r\n const link = document.createElement('a');\r\n link.href = window.URL.createObjectURL(blob);\r\n link.download = fileNamePdf;\r\n link.dispatchEvent(\r\n new MouseEvent('click', {\r\n bubbles: true,\r\n cancelable: true,\r\n view: window\r\n })\r\n );\r\n setTimeout(() => {\r\n // For Firefox it is necessary to delay revoking the ObjectURL\r\n window.URL.revokeObjectURL(link.href);\r\n link.remove();\r\n }, 3000);\r\n this.setState({ isLoading: false });\r\n })\r\n .catch((err) => {\r\n this.setState({ isLoading: false });\r\n });\r\n }\r\n snackHandleclose = (event, reason) => {\r\n if (reason === \"clickaway\") {\r\n return;\r\n }\r\n this.setState({ snackOpen: false });\r\n };\r\n render() {\r\n const {\r\n isLoading,\r\n unitDurations,\r\n date,\r\n isRemovedCount,\r\n isNoGraphData,\r\n isAddedCount,\r\n unitInventoryAvailablity,\r\n snackOpen,\r\n snackMSg,\r\n } = this.state;\r\n\r\n const defaultProps = {\r\n helpTitle: \"Historical Inventory Analytics\",\r\n helpContent:\r\n \"
In Optimize, we define inventory as the number of stores in this Market which advertise a particular unit type. On this graph you will see the number of stores over time (5 days, 30 days, 90 days, 6 months or 1 year) which have advertised this unit type.
Below the graph, under Added in Last 24 Hours, you will see the stores in this Market which have either added this unit type to their website or removed it from their website in the last 24 hours.
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableFooter from \"@material-ui/core/TableFooter\";\r\nimport Snackbar from \"@material-ui/core/Snackbar\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport TablePagination from \"@material-ui/core/TablePagination\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport FirstPageIcon from \"@material-ui/icons/FirstPage\";\r\nimport KeyboardArrowLeft from \"@material-ui/icons/KeyboardArrowLeft\";\r\nimport KeyboardArrowRight from \"@material-ui/icons/KeyboardArrowRight\";\r\nimport LastPageIcon from \"@material-ui/icons/LastPage\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Breadcrumbs from \"@material-ui/core/Breadcrumbs\";\r\nimport { HelpTextPopup } from \"./../HelpTextPopup/index\";\r\nimport axios from \"axios\";\r\nimport { CONFIG } from \"../../utils/config\";\r\nimport PropTypes from \"prop-types\";\r\nimport TableSortLabel from \"@material-ui/core/TableSortLabel\";\r\nimport moment from \"moment\";\r\nimport { faCheck, faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { faTimes } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport Alarm from \"./../../Assets/Images/unit-type-images/Alarm.png\";\r\nimport ClimateControlled from \"./../../Assets/Images/unit-type-images/ClimateControlled.png\";\r\nimport StorageUnit from \"./../../Assets/Images/unit-type-images/StorageUnit.png\";\r\nimport apartment from \"./../../Assets/Images/unit-type-images/apartment.png\";\r\nimport artstudio from \"./../../Assets/Images/unit-type-images/artstudio.png\";\r\nimport box from \"./../../Assets/Images/unit-type-images/box.png\";\r\nimport celltower from \"./../../Assets/Images/unit-type-images/celltower.png\";\r\nimport container from \"./../../Assets/Images/unit-type-images/container.png\";\r\nimport filestorage from \"./../../Assets/Images/unit-type-images/filestorage.png\";\r\nimport office from \"./../../Assets/Images/unit-type-images/office.png\";\r\nimport mailbox from \"./../../Assets/Images/unit-type-images/mailbox.png\";\r\nimport parking from \"./../../Assets/Images/unit-type-images/parking.png\";\r\nimport unit from \"./../../Assets/Images/unit-type-images/unit.png\";\r\nimport warehouse from \"./../../Assets/Images/unit-type-images/warehouse.png\";\r\nimport winestorage from \"./../../Assets/Images/unit-type-images/winestorage.png\";\r\nimport workshop from \"./../../Assets/Images/unit-type-images/workshop.png\";\r\nimport DoorType from \"./../../Assets/Images/unit-type-images/DoorType.png\";\r\nimport DriveUp from \"./../../Assets/Images/unit-type-images/DriveUp.png\";\r\nimport Elevator from \"./../../Assets/Images/unit-type-images/Elevator.png\";\r\nimport HumidityControlled from \"./../../Assets/Images/unit-type-images/HumidityControlled.png\";\r\nimport OutdoorAccess from \"./../../Assets/Images/unit-type-images/OutdoorAccess.png\";\r\nimport power from \"./../../Assets/Images/unit-type-images/power.png\";\r\nimport covered from \"./../../Assets/Images/unit-type-images/Covered.png\";\r\nimport vehicle from \"./../../Assets/Images/unit-type-images/Vehicle.png\";\r\nimport locker from \"./../../Assets/Images/unit-type-images/locker.png\";\r\nimport { MarketProfile } from \"../MarketProfile\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { faMapPin, faStar } from \"@fortawesome/free-solid-svg-icons\";\r\nimport \"./DetailedStoresView.css\";\r\nimport exportFromJSON from \"export-from-json\";\r\nimport { Row, Col } from \"reactstrap\";\r\nimport Workbook from \"react-excel-workbook\";\r\nimport { faFilePdf } from \"@fortawesome/free-solid-svg-icons\";\r\n//import exportFromJSON from 'export-from-json'\r\n//const exportType = 'xls';\r\nconst exportType = \"xls\";\r\nconst actionsStyles = (theme) => ({\r\n tablepaggination: {\r\n flexShrink: 0,\r\n color: theme.palette.text.secondary,\r\n marginLeft: theme.spacing * 2.5,\r\n },\r\n});\r\n\r\nclass DetailedStoresView extends React.Component {\r\n handleFirstPageButtonClick = (event) => {\r\n this.props.onChangePage(event, 0);\r\n };\r\n\r\n handleBackButtonClick = (event) => {\r\n this.props.onChangePage(event, this.props.page - 1);\r\n };\r\n\r\n handleNextButtonClick = (event) => {\r\n this.props.onChangePage(event, this.props.page + 1);\r\n };\r\n\r\n handleLastPageButtonClick = (event) => {\r\n this.props.onChangePage(\r\n event,\r\n Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1)\r\n );\r\n };\r\n\r\n render() {\r\n const { classes, count, page, rowsPerPage, theme } = this.props;\r\n\r\n return (\r\n
This is a spreadsheet style view of the stores advertising this unit currently. It shows the store, the proximity to your address, the unit size, the floor in which the unit is located (Ground or Upper floor) and any features advertised for this unit type by the store. Additionally, the rates (both Advertised Online Rate and Advertised Walk-in Rate), unit-specific promotions and the last time these were changed on the store's website.
*Your store prices are included in the calculations.
The stores advertising this unit are shown on a map. The stores identified in blue are the stores currently advertising rates online, those in black are stores in this Market which currently do not advertised online. Hover over any of the store pinpoints to view some details on that store.
*Your store prices are included in the calculations.
The stores advertising this unit are shown on a map. The stores identified in blue are the stores currently advertising rates online, those in black are stores in this Market which currently do not advertised online. Hover over any of the store pinpoints to view some details on that store.
*Your store prices are included in the calculations.
In this section, the graph enables you to compare rates like-for-like, against your top competitors*. The rates shown on the graph are based on the Online Advertised Rate on the store's website.
The Number of Pricing Options shows you if the selected store* offers more than one price type for this unit type.
The highest price advertised by a store is shown as the Premium rate.
The lowest price advertised by a store is shown as the Value rate.
Any other rates in between are shown as a range
If there is only one price for a unit, it is shown as both the Premium and Value rate
Market Low, Market Average and Market High
These rates are based on the online rates advertised by the competitor stores* and the price type chosen (Premium or Value).
*See the All Market View section below to learn how you can change the competitors you can compare against on this graph.
*Your store prices are included in the calculations.
\r\n The Effective Rate is the price the consumer pays after factoring in the promotion. The calculation is performed over a specific tenancy length, which can be selected on the right.\r\n
This is a detailed view of the rates for this Unit Type
Offered by x stores
The number of stores in this Market advertising this unit type
\" + `${CONFIG.RegionId === 3 ? \"
Current Lowest Weekly Price
\":\"
Current Lowest Price
\"}` + \"
This is the lowest price currently advertised for this unit type in this Market and the store advertising it. The lowest price shown here is the lowest of the \"+ `${CONFIG.RegionId === 3 ? \"Advertised Online Weekly Rate\" : \"Advertised Online Rate\"}`+\"
\"+`${CONFIG.RegionId === 3 ? \"
Current Average Weekly Price
\":\"
Current Average Price
\"}`+\"
This is the average price for this unit type in this Market. The average rate is the average of all \"+`${CONFIG.RegionId === 3 ? \"Advertised Online Weekly Rates\":\"Advertised Online Rates\"}`+\"
\"+`${CONFIG.RegionId === 3 ? \"
Current Highest Weekly Price
\":\"
Current Highest Price
\"}`+\"
This is the highest price currently advertised for this unit type in this Market and the store advertising it. The highest price shown here is the highest \"+`${CONFIG.RegionId === 3 ? \"Advertised Online Weekly Rate\":\"Advertised Online Rate\"}`+\"
*Your store prices are included in the calculations.
\r\n You do not have permission to view this page using the credentials that you supplied.\r\n
\r\n
\r\n
\r\n If you require any assistance or support please contact us at {CONFIG.Mail_Support} or {CONFIG.Toll_Free} {CONFIG.RegionId === 3 ? \"UK Direct tel:\" +CONFIG.Sales_Support : ''}.\r\n \r\n You can click on any visible link on top of this page to continue accessing the site.\r\n
By default, this dashboard shows 12 of the most common unit types. Each 'box' gives you a quick snapshot of the rates for this Market. Below is a breakdown of what's in each snapshot:
Offered by x stores
This is the number of stores advertising this unit type in this Market
Average Market Price
This is the market average rate for this unit type. The average rates shown here are calculated using the Advertised Online rates
Trend
The upward/downward arrow shows the direction of the trend for this unit type's rates over the period selected (5 days, 30 days, 90 days)
Your Price
If you have set up your store as your Market, your store's rate(s) will appear here for the unit type. If we have not found a rate for your store, it will be shown as 'N/A'
View Details
To view the detailed pricing insights for the unit type, click on View Details
+Add New
You are not limited to the 12 unit types you see here. Click +Add New to configure your own unit size and features
Edit
Click the pencil icon to make any changes to the features for that unit type
Delete
Click the x to delete this unit type from the dashboard
*Your store prices are included in the calculations.
By default, this dashboard shows 12 of the most common unit types. Each 'box' gives you a quick snapshot of the rates for this Market. Below is a breakdown of what's in each snapshot:
\r\n
Offered by x stores
\r\n
This is the number of stores advertising this unit type in this Market
If you have set up your store as your Market, your store's rate(s) will appear here for the unit type. If we have not found a rate for your store, it will be shown as 'N/A'
\r\n
*Your store prices are included in the calculations.
Inventory Availability refers to the number of stores in the Market offering a particular unit type. When a store takes a unit off their website, their inventory availability for that unit type goes down. If a store adds a unit type to their website, their inventory availability goes up.
Here you can see the current Inventory Availability across the entire Market, as well as a breakdown of current Inventory Availability by store type - Your Store, REITs, Multi-store and Single-store operators.
Inventory Availability for the Market
The aggregate number of On-Market/Stores Offering any unit type in this Market
Inventory Availability for Your Store
How many Unit Types Your Store has offered in the past vs. how many of them are currently being offered (or are 'On-Market'). For example, let's say Your Store has offered/advertised 8 different Unit Types but currently has only 6 of them on-market (and by definition 2 are off-market), then 'Your Store' Inventory Availability is 75%, i.e. 6÷8)
Inventory Availability for REITs, Mid-Ops, Single-Ops
This is the same calculation as explained in 'Your Store' above, but calculated for each store group (REIT, Multi and Single operators). For example, if there are 3 REITs in the Market and two are offering 6 of 8 unit types and one of them is offering 5 of 8 unit types, then the aggregate Inventory Availability for REITs is (((6÷8)+(6÷8)+(5÷8))/3) x 100 = 70.8%
*Your store inventory is included in the calculations.
Inventory Availability refers to the number of stores in the Market offering a particular unit type. When a store takes a unit off their website, the inventory availability for that unit type goes down. If a store adds a unit type to their website, the inventory availability for that unit type goes up. Here you will see a breakdown of the number of stores offering vs. the number of stores which have never offered each of the most common unit types.
*Your store inventory is included in the calculations.
\"\r\n }\r\n const defaultProps2 = {\r\n helpTitle: \"Inventory Availability by Unit Type\",\r\n helpContent: \"
This is graph is a deeper analysis of the Inventory Supply you see above. It further analyzes for each unit type, how many out of all the stores in the Market which have advertised this unit type at some point, the number of stores currently offering/advertising this unit type vs. the number of stores (which have advertised it in the past) are currently not offering this unit type.
*Your store inventory is included in the calculations.
This table is a continuation of the Inventory Supply graph you see above. It shows, for each unit type, how many out of all the stores in the Market which have advertised this unit type at some point, the number of stores currently offering/advertising this unit type vs. the number of stores (which have advertised it in the past) are currently not offering this unit type.
*Your store inventory is included in the calculations.
Inventory Availability *Your store inventory is included in the calculations.
\r\n
Inventory Availability refers to the number of stores in the Market offering a particular unit type. When a store takes a unit off their website, their inventory availability for that unit type goes down. If a store adds a unit type to their website, their inventory availability goes up.
\r\n
Here you can see the current Inventory Availability across the entire Market, as well as a breakdown of current Inventory Availability by store type - Your Store, REITs, Multi-store and Single-store operators.
\r\n
Inventory Availability for the Market
\r\n
The aggregate number of On-Market/Stores Offering any unit type in this Market
\r\n
Inventory Availability for Your Store
\r\n
How many Unit Types Your Store has offered in the past vs. how many of them are currently being offered (or are 'On-Market'). For example, let's say Your Store has offered/advertised 8 different Unit Types but currently has only 6 of them on-market (and by definition 2 are off-market), then 'Your Store' Inventory Availability is 75%, i.e. 6÷8)
\r\n
Inventory Availability for REITs, Mid-Ops, Single-Ops
\r\n
This is the same calculation as explained in 'Your Store' above, but calculated for each store group (REIT, Multi and Single operators). For example, if there are 3 REITs in the Market and two are offering 6 of 8 unit types and one of them is offering 5 of 8 unit types, then the aggregate Inventory Availability for REITs is (((6÷8)+(6÷8)+(5÷8))/3) x 100 = 70.8%
Inventory Availability refers to the number of stores in the Market offering a particular unit type. When a store takes a unit off their website, the inventory availability for that unit type goes down. If a store adds a unit type to their website, the inventory availability for that unit type goes up. Here you will see a breakdown of the number of stores offering vs. the number of stores which have never offered each of the most common unit types.
This is graph is a deeper analysis of the Inventory Supply you see above. It further analyzes for each unit type, how many out of all the stores in the Market which have advertised this unit type at some point, the number of stores currently offering/advertising this unit type vs. the number of stores (which have advertised it in the past) are currently not offering this unit type.
On this page we provide a side-by-side analysis of the \" + `${CONFIG.RegionId === 3 ? \"weekly\" : ''}` + \" rates for the most common unit types.
Broadest Range
This is the unit type with the largest range of current \" + `${CONFIG.RegionId === 3 ? \"weekly\" : ''}` + \" rates (this includes both Regular/Walk-in and Online/Promotional rates)
Narrowest Range
This is the unit type with the lowest range of current \" + `${CONFIG.RegionId === 3 ? \"weekly\" : ''}` + \" rates (this includes both Regular/Walk-in and Online/Promotional rates)
*Your store prices are included in the calculations.
This graph is showing a side-by-side analysis of the \" + `${CONFIG.RegionId === 3 ? \"weekly\" : ''}` + \" rates for the most common unit types.
The Market Average (in black) show the range of current \" + `${CONFIG.RegionId === 3 ? \"weekly\" : ''}` + \" rates for this unit type. Hover over the range to view the specific rates.
If Your Store is advertising rates for this unit type, your rates will be shown here (in orange). Hover over the range to view the specific rates.
Compare the \" + `${CONFIG.RegionId === 3 ? \"weekly\" : ''}` + \" rate range for any store/competitor in this Market*
*See 'All Stores' below to select stores/competitors to compare to on this graph
*Your store prices are included in the calculations.
This shows all the stores in this Market and their current \" + `${CONFIG.RegionId === 3 ? \"weekly\" : ''}` + \" price ranges for each of the most common unit types.
*Your store prices are included in the calculations.
\"\r\n // helpContent: \"
This shows all the stores in this Market and their current price ranges for each of the most common unit types.
Click on any to show/remove on the graph above for comparison.
*Your store prices are included in the calculations.
On this page we provide a side-by-side analysis of the rates for the most common unit types.
\r\n
Broadest Range
\r\n
This is the unit type with the largest range of {CONFIG.RegionId === 3 ? \"current weekly rates\" : \"current rates\"} (this includes both Regular/Walk-in and Online/Promotional rates)
\r\n
Narrowest Range
\r\n
This is the unit type with the lowest range of {CONFIG.RegionId === 3 ? \"current weekly rates\" : \"current rates\"} (this includes both Regular/Walk-in and Online/Promotional rates)
\r\n
*Your store prices are included in the calculations.
This shows all the stores in this Market and their {CONFIG.RegionId === 3 ? \"current weekly price ranges\" : \"current price ranges\"} for each of the most common unit types.
\r\n {/*
Click on any to show/remove on the graph above for comparison.
*/}\r\n
\r\n
*Your store prices are included in the calculations.
\r\n \r\n );\r\n }\r\n}","import React from 'react';\r\nimport './PricingVolatilityPdf.css';\r\nimport * as d3 from \"d3\";\r\nimport { CONFIG, MatchingCountryCode } from '../../../utils/config';\r\nimport axios from 'axios';\r\nimport { HelpTextPopup } from '../../HelpTextPopup/index';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Snackbar from '@material-ui/core/Snackbar';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { AvForm, AvField } from 'availity-reactstrap-validation';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { Link } from 'react-router-dom';\r\nimport { Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Table as TableBoots } from 'reactstrap';\r\nimport shows from '../../../Assets/Images/show.png';\r\nimport hiddens from '../../../Assets/Images/unshow.png';\r\nimport downarrows from '../../../Assets/Images/down-arrow.png';\r\nimport { CompetitorStore } from '../../CompetitorStore';\r\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\r\nimport Logo from '../../../Assets/Images/logo.jpg';\r\nimport Chart from \"react-apexcharts\";\r\nimport duplicate from \"../../../Assets/Images/duplicate.png\"\r\nexport default class PricingVolatilityPdf extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.child = React.createRef();\r\n this.state = {\r\n options: {\r\n chart: {\r\n id: 'apexchart-example',\r\n toolbar: {\r\n show: false\r\n }\r\n },\r\n stroke: {\r\n width: 3,\r\n },\r\n markers: {\r\n size: 4,\r\n },\r\n grid: { show: false },\r\n legend: {\r\n show: false,\r\n },\r\n yaxis: {\r\n show: false,\r\n },\r\n xaxis: {\r\n labels: {\r\n show: false,\r\n }\r\n },\r\n noData: {\r\n text: \"Please wait for the data to be loaded. The data volume is high and this might take a minute for loading the data.\",\r\n verticalAlign: 'top',\r\n style: {\r\n color: \"#5b95f6\",\r\n fontSize: '13px',\r\n fontFamily: \"Helvetica\"\r\n }\r\n },\r\n },\r\n series: [],\r\n\r\n snackOpen: false,\r\n snackMSg: '',\r\n marketVolatility: '',\r\n marketStorePrice: '',\r\n isLoading: false,\r\n unitType: '',\r\n priceOption: '',\r\n dashboardBasicInfo: '',\r\n volatilityGrpahData: '',\r\n isDefaultUnit: this.props.unit,\r\n isDefaultPrice: this.props.price,\r\n showGrpahData: '',\r\n isSelectIdPush: [],\r\n isShowGraph: this.props.isShowGraph,\r\n isYourStore: [],\r\n isRemoveGrapg: this.props.isRemoveGraph,\r\n isSelectCount: [],\r\n locationInfoData: [],\r\n isdefaultSelected: this.props.unit,\r\n isdefaultSelectedprice: this.props.price,\r\n isNoGraphData: false,\r\n isCompsName: this.props.isCompsName,\r\n order: this.props.order ? this.props.order : 'asc',\r\n orderBy: this.props.orderby ? this.props.orderby : 'storeName',\r\n isNoData: false,\r\n accessKey: this.props.accessKey,\r\n showRemoveId: this.props.showRemoveId,\r\n showRemoveType: this.props.showRemoveType,\r\n new_filterData : []\r\n };\r\n this.getParams = this.getParams.bind(this);\r\n this.handleRequestSort = this.handleRequestSort.bind(this);\r\n this.stableSort = this.stableSort.bind(this);\r\n this.getSorting = this.getSorting.bind(this);\r\n this.desc = this.desc.bind(this);\r\n }\r\n\r\n getParams(storeAddress) {\r\n let storeId = parseInt(this.props.userstoreid);\r\n this.child.current.toggleStoreModal(storeAddress, storeId);\r\n }\r\n\r\n //Table Sorting \r\n handleRequestSort(event, property) {\r\n const { order, orderBy } = this.state;\r\n const isDesc = orderBy === property && order === 'desc';\r\n let sort = isDesc ? 'asc' : 'desc';\r\n this.setState({ order: sort, orderBy: property });\r\n }\r\n\r\n //Table Sorting order\r\n desc(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n }\r\n\r\n //Table Sorting the selected Column\r\n stableSort(array, cmp) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = cmp(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map(el => el[0]);\r\n }\r\n\r\n //Table Sorting Order Request\r\n getSorting(order, orderBy) {\r\n return order === 'desc' ? (a, b) => this.desc(a, b, orderBy) : (a, b) => -this.desc(a, b, orderBy);\r\n }\r\n async UNSAFE_componentWillMount() {\r\n const data = {\r\n \"SecretKey\": this.props.accessKey,\r\n \"RegionId\": CONFIG.RegionId\r\n }\r\n\r\n const response = await axios.post(CONFIG.API_URL + 'account/secretlogin', data);\r\n if (response.status === 200) {\r\n this.state.accessKey = response.data.token;\r\n this.pricingVoltality();\r\n } else {\r\n alert(response.status.Message);\r\n }\r\n }\r\n\r\n loadDashBoard() {\r\n let token = this.state.accessKey;\r\n const data = {\r\n \"UserStoreID\": parseInt(this.props.userstoreid),\r\n \"RegionId\": CONFIG.RegionId\r\n }\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n }\r\n axios.post(CONFIG.API_URL + 'dashboard/dashboardlocation', data)\r\n .then(response => {\r\n const locationInfoData = response.data.data.storeDashboard;\r\n var countrycode = response.data.data.storeDashboard.countryCode;\r\n var data1 = {\r\n \"CountryCode\": countrycode,\r\n \"RegionId\": CONFIG.RegionId\r\n }\r\n axios.post(CONFIG.API_URL + 'dashboard/lookupunit', data1)\r\n .then(response => {\r\n let unitType = response.data.prices;\r\n //this.state.isDefaultUnit = unitType[0].unitType;\r\n let isDefaultUnit = unitType.filter((e => e.id == this.props.unit));\r\n this.state.isDefaultUnit = isDefaultUnit[0].unitType\r\n //this.state.isDefaultUnit = this.props.unit;\r\n this.setState({\r\n unitType,\r\n })\r\n });\r\n this.setState({\r\n locationInfoData: locationInfoData\r\n })\r\n const inputParam = {\r\n UserStoreID: parseInt(this.props.userstoreid),\r\n RegionId: CONFIG.RegionId,\r\n Competitors: '',\r\n }\r\n this.PricingVolatility(inputParam)\r\n \r\n }).catch((err) => {\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else if (err.response.status === 403) {\r\n const { from } = this.props.location.state || { from: { pathname: \"/UnauthorizedAccess\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n pricingVoltality() {\r\n\r\n this.setState({\r\n isLoading: true\r\n })\r\n\r\n\r\n this.loadDashBoard();\r\n\r\n\r\n axios.post(CONFIG.API_URL + 'dashboard/priceoptions')\r\n .then(response => {\r\n\r\n let priceOption = response.data.price;\r\n this.setState({\r\n priceOption\r\n })\r\n });\r\n\r\n }\r\n PricingVolatility(inputParam) {\r\n let isShowGraph = [];\r\n let isRemoveGrapg = [];\r\n let isCompsName = [];\r\n let isYourStore = [];\r\n let token = this.state.accessKey;\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n }\r\n axios.post(CONFIG.API_URL + 'dashboard/priceoverviewvolatility', inputParam)\r\n .then(response => {\r\n const dashboardBasicInfo = response.data.data.dashboardBasicInfo;\r\n const volatilityGrpahData = response.data.data.volatilityGrpahData;\r\n const marketVolatility = response.data.data.unitVolatilityData;\r\n // Below I have using the filter function to finding the null values of all unit types. If any case all the units return the null values we have define the one boolean value to the state for showing the \"No data found\" in the pricing volatality grid.\r\n var checkNull = marketVolatility.filter((filterData => filterData.volatility !== null));\r\n if (checkNull.length === 0) {\r\n this.setState({ isNoData: true });\r\n }\r\n // End of the filter function code.\r\n const marketStorePrice = response.data.data.allVolatilityData;\r\n const isUnitType = marketVolatility.filter((e => e.volatility === 0));\r\n\r\n const isUnitTypeNotNull = marketVolatility.filter((e => e.volatility));\r\n const isYourStCount = marketStorePrice.filter((e => e.isMyStore));\r\n // const isUnitTypeNull = marketVolatility.filter((e => e.volatility===null));\r\n let marketStorePriceSort = [];\r\n marketStorePrice.filter((e) => e.isMyStore === true).forEach(function (e) { isYourStore.push(e) });\r\n marketStorePrice.filter((e) => e.isMyStore === false).forEach(function (e) { marketStorePriceSort.push(e) });\r\n if (!this.state.showRemoveId && !this.state.showRemoveType) {\r\n marketStorePrice.filter((e) => e.isSelected === 1).forEach(function (e) { isShowGraph.push(e.storeId) });\r\n marketStorePrice.filter((e) => e.isSelected === 1 && e.isMyStore != 1).forEach(function (e) { isCompsName.push(e.storeName) });\r\n\r\n }\r\n marketStorePrice.filter((e) => e.isSelected === 0).forEach(function (e) { isRemoveGrapg.push(e.storeId) });\r\n if (isShowGraph === undefined) {\r\n isShowGraph = [];\r\n }\r\n if (isRemoveGrapg === undefined) {\r\n isRemoveGrapg = [];\r\n }\r\n if (isYourStore === undefined) {\r\n isYourStore = [];\r\n }\r\n\r\n if (this.props.orderby == \"storeName\") {\r\n if (this.props.order === 'asc') {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => a.storeName.localeCompare(b.storeName));\r\n }\r\n else {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => b.storeName.localeCompare(a.storeName));\r\n }\r\n } else if (this.props.orderby == \"allPrice\") {\r\n if (this.props.order === 'asc') {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => (a.allPrice - b.allPrice));\r\n }\r\n else {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => (b.allPrice - a.allPrice));\r\n }\r\n }\r\n else if (this.props.orderby == \"premium\") {\r\n if (this.props.order === 'asc') {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => (a.premium - b.premium));\r\n }\r\n else {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => (b.premium - a.premium));\r\n }\r\n } else if (this.props.orderby == \"value\") {\r\n if (this.props.order === 'asc') {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => (a.value - b.value));\r\n }\r\n else {\r\n marketStorePriceSort = marketStorePrice.sort((a, b) => (b.value - a.value));\r\n }\r\n }\r\n\r\n this.setState({\r\n marketVolatility, isYourStCount, isUnitType, isYourStore, isUnitTypeNotNull, volatilityGrpahData, isCompsName, marketStorePrice: marketStorePriceSort, dashboardBasicInfo, isShowGraph, isRemoveGrapg, isLoading: false\r\n })\r\n\r\n if (this.state.volatilityGrpahData.length > 0) {\r\n this.setState({\r\n isNoGraphData: false\r\n })\r\n // if((this.props.isShowGraph == \"null\") || (this.props.isRemoveGraph ==\"null\" )){\r\n\r\n //this.initialLoad(volatilityGrpahData.filter(a => a.unitType == this.state.isDefaultUnit && a.priceType == this.state.isDefaultPrice));\r\n\r\n\r\n if (this.state.showRemoveId && this.state.showRemoveType) {\r\n let name = marketStorePrice.filter(a => a.storeId == this.state.showRemoveId)\r\n // volatilityGrpahData.filter(a => a.unitType == this.state.isDefaultUnit && a.priceType == this.state.isDefaultPrice))\r\n this.showGraph(this.state.showRemoveId, this.state.showRemoveType, name[0]['storeName'])\r\n }\r\n else {\r\n this.initialLoad(volatilityGrpahData.filter(a => a.unitType == this.state.isDefaultUnit && a.priceType == this.state.isDefaultPrice));\r\n\r\n }\r\n // }\r\n // else{\r\n // const inputParam = {\r\n // UserStoreID: parseInt(this.props.userstoreid),\r\n // Competitors: this.props.Competitors,\r\n // RegionId: CONFIG.RegionId\r\n // }\r\n\r\n // this.onlyShowGraph(inputParam);\r\n // }\r\n\r\n }\r\n else {\r\n this.setState({\r\n isNoGraphData: true\r\n })\r\n }\r\n\r\n }).catch((err) => {\r\n this.setState({\r\n isLoading: false\r\n })\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n apexChartNoData = ({ textMessage, colorCode }) => {\r\n this.setState({\r\n series: [],\r\n options: {\r\n xaxis: {\r\n labels: {\r\n show: false\r\n },\r\n axisBorder: {\r\n show: false\r\n },\r\n axisTicks: {\r\n show: false\r\n }\r\n },\r\n yaxis: {\r\n show: false\r\n },\r\n noData: {\r\n text: textMessage,\r\n style: { color: colorCode }\r\n }\r\n }\r\n });\r\n }\r\n\r\n initialLoad(res) {\r\n const { isCompsName } = this.state;\r\n var data = res;\r\n var przvoldality = res.filter((a) => a.volatility !== null);\r\n let isCompString = typeof (isCompsName) !== 'object' ? isCompsName : isCompsName.toString();\r\n this.setState({new_filterData : []});\r\n if (przvoldality.length > 0) {\r\n this.setState({\r\n isNoGraphData: false,\r\n });\r\n\r\n var tempdata = [];\r\n let marketSeries = [];\r\n let widthArrayData = [];\r\n let dashArrayData = [];\r\n let marketNameList = [];\r\n let colorsCodeList = [];\r\n let markerSize = [];\r\n let newFilter_tempdata = [];\r\n let unique = [...new Set(data.map((item) => item.storeId))];\r\n let MarketName = [\"Your Store\", \"Market Average\", isCompString];\r\n let MarketName2 = [\"Market Average\", isCompString];\r\n let colorsCode = ['#F15D47', '#1B2C42', '#41A3F6'];\r\n let colorsCode2 = ['#1B2C42', '#41A3F6'];\r\n for (var i = 0; i < unique.length; i++) {\r\n var datum = {\r\n name: unique[i],\r\n count: i,\r\n isMyMarket: this.popMyStore(data, unique[i]),\r\n values: this.popData(data, unique[i]),\r\n };\r\n tempdata.push(datum);\r\n }\r\n const toTop = (key, value) => (a, b) => (b[key] === value) - (a[key] === value);\r\n tempdata.sort(toTop('isMyMarket', 1));\r\n tempdata.every(val => {\r\n marketNameList = val.isMyMarket === 1 ? MarketName : MarketName2;\r\n colorsCodeList = val.isMyMarket === 1 ? colorsCode : colorsCode2;\r\n })\r\n for (var k = 0; k < tempdata.length; k++) {\r\n let noValues = tempdata[k].values.every(item => item.totalChangeCount === '' || item.totalChangeCount === undefined);\r\n if (!noValues) {\r\n let dataSeries = tempdata[k].values.map(val => { return { x: val.monthYear, y: val.totalChangeCount, originData: val.totalChangeCount }; });\r\n let dataSeries1 = tempdata[k].values.map(val => { return { x: val.monthYear, y: val.totalChangeCount !== null && val.totalChangeCount !== \"0.00\" ? val.totalChangeCount : 0, originData: val.totalChangeCount !== null && val.totalChangeCount !== \"0.00\" ? val.totalChangeCount : 0 }; });\r\n let containsNull = dataSeries.every(val => val.y !== null);\r\n newFilter_tempdata.push({name :marketNameList[k] , data:dataSeries1 , color:colorsCodeList[k]});\r\n if (tempdata[k].isMyMarket === 1) {\r\n if (!containsNull) {\r\n let noZeroData1 = dataSeries.map(yData => { return { x: yData.x, y: yData.y === null ? 0 : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: (marketNameList[k] + \" data\"), data: noZeroData1, color: colorsCodeList[k] });\r\n let noZeroData = dataSeries.map(yData => { return { x: yData.x, y: yData.y === 0 ? null : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: marketNameList[k], data: noZeroData, color: colorsCodeList[k] });\r\n markerSize.push(0, 10);\r\n widthArrayData.push(1, 3);\r\n dashArrayData.push(6, 0);\r\n } else {\r\n marketSeries.push({ name: marketNameList[k], data: dataSeries, color: colorsCodeList[k] });\r\n markerSize.push(10);\r\n widthArrayData.push(3);\r\n dashArrayData.push(0);\r\n }\r\n } else {\r\n if (!containsNull) {\r\n let noZeroData1 = dataSeries.map(yData => { return { x: yData.x, y: yData.y === null ? 0 : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: (marketNameList[k] + \" data\"), data: noZeroData1, color: colorsCodeList[k] });\r\n let noZeroData = dataSeries.map(yData => { return { x: yData.x, y: yData.y === 0 ? null : yData.y, originData: yData.originData }; });\r\n marketSeries.push({ name: marketNameList[k], data: noZeroData, color: colorsCodeList[k] });\r\n markerSize.push(0, 10);\r\n widthArrayData.push(1, 3);\r\n dashArrayData.push(6, 0);\r\n } else {\r\n marketSeries.push({ name: marketNameList[k], data: dataSeries, color: colorsCodeList[k] });\r\n markerSize.push(10);\r\n widthArrayData.push(3);\r\n dashArrayData.push(0);\r\n }\r\n }\r\n }\r\n }\r\n \r\n //Duplicate Data\r\n let newData = [];\r\n newFilter_tempdata.map(dataItem => dataItem.data.forEach(i => {\r\n if(i.y !== \"\" && i.y !== undefined){\r\n newFilter_tempdata.map(userItem => userItem.data.forEach(j => {\r\n if(j.y !== \"\" && j.y !== undefined){\r\n if((dataItem.name !== userItem.name) && (dataItem.color !== userItem.color)){\r\n if((i.y === j.y) && (i.x === j.x)){\r\n newData.push({name:dataItem.name ,color:dataItem.color});\r\n let new_filterData = newData.reduce((elements , obj , index)=>{ \r\n let existingData = elements.find(element => \r\n element.name === obj.name && element.color === obj.color\r\n );\r\n if(!existingData){\r\n elements.push(obj);\r\n }\r\n return elements;\r\n }, []);\r\n this.setState({new_filterData : new_filterData}); \r\n }\r\n }\r\n }\r\n }));\r\n }\r\n })); \r\n\r\n if (marketSeries.length > 0) {\r\n this.setState({\r\n options: {\r\n chart:{\r\n animations: {\r\n enabled: false,\r\n },\r\n },\r\n tooltip: {\r\n enabled: false\r\n },\r\n stroke: {\r\n width: widthArrayData,\r\n dashArray: dashArrayData,\r\n },\r\n markers: {\r\n size: 4,\r\n },\r\n legend: {\r\n show: true,\r\n showForSingleSeries: true,\r\n position: 'bottom',\r\n horizontalAlign: 'center',\r\n fontSize: '11px',\r\n fontWeight: 500,\r\n showForNullSeries: true,\r\n showForZeroSeries: true,\r\n itemMargin: {\r\n horizontal: 10,\r\n vertical: 20,\r\n },\r\n onItemClick: {\r\n toggleDataSeries: false\r\n },\r\n onItemHover: {\r\n highlightDataSeries: false\r\n },\r\n formatter: function (seriesName, opts) {\r\n if (!seriesName.endsWith('data')) return seriesName;\r\n return null;\r\n },\r\n markers: {\r\n width: markerSize,\r\n height: markerSize,\r\n }\r\n },\r\n yaxis: {\r\n labels: {\r\n formatter: function (value) {\r\n let val = value === null || value === undefined ? \"N/A\" : value.toFixed(0) + \"%\";\r\n return val;\r\n },\r\n style: {\r\n colors: '#8C9AA6',\r\n fontSize: '10px'\r\n },\r\n },\r\n axisBorder:{\r\n show: false,\r\n },\r\n axisTicks: {\r\n show: false,\r\n }\r\n },\r\n xaxis: {\r\n title: {\r\n text: \"--- No Data Available\",\r\n offsetX: 400,\r\n offsetY: 20,\r\n style: {\r\n fontSize: '11px',\r\n fontWeight: 400,\r\n },\r\n },\r\n tooltip: { enabled: false },\r\n labels: {\r\n formatter: function (value) {\r\n let val = value === undefined || typeof (value) !== \"string\" ? '' : value;\r\n return val;\r\n },\r\n show: true,\r\n style: {\r\n colors: '#8C9AA6',\r\n fontSize: '10px'\r\n },\r\n },\r\n axisBorder: {\r\n show: true\r\n },\r\n axisTicks: {\r\n show: true\r\n }\r\n },\r\n },\r\n series: marketSeries\r\n })\r\n };\r\n\r\n }\r\n else {\r\n this.apexChartNoData({\r\n\r\n textMessage: \"No Data Found\",\r\n colorCode: \"#F60000\"\r\n });\r\n }\r\n }\r\n\r\n popData(data, uid) {\r\n var tFData = data.filter(a => a.storeId == uid);\r\n var tData = [];\r\n for (var i = 0; i < tFData.length; i++) {\r\n var CData = {\r\n date: new Date(tFData[i].year, tFData[i].month - 1, 1),\r\n volatility: tFData[i].volatility,\r\n month: tFData[i].month,\r\n isMyMarket: tFData[i].isMyMarket,\r\n totalChangeCount: tFData[i].totalChangeCount,\r\n totalCount: tFData[i].totalCount,\r\n monthYear: tFData[i].monthYear,\r\n }\r\n tData.push(CData);\r\n }\r\n\r\n return tData;\r\n }\r\n\r\n popMyStore(data, uid) {\r\n\r\n var tFData = data.filter(a => (a.storeId == uid && a.isMyMarket == 1));\r\n return (tFData.length > 0 ? 1 : 0);\r\n }\r\n\r\n showGraph(sId, type, name) {\r\n this.setState({\r\n isLoading: true\r\n })\r\n\r\n const isShowGraph = this.state.isShowGraph\r\n const isCount = this.state.isYourStCount;\r\n var isVal = 2;\r\n if (isCount.length === 0) {\r\n isVal = 1;\r\n }\r\n else {\r\n isVal = 2;\r\n }\r\n if (isShowGraph.length <= isVal) {\r\n var isSelectStoreId = [];\r\n var id;\r\n // var isShowData = this.state.marketStorePrice;\r\n //var isShowG = isShowData.filter(a => a.isSelected == \"1\");\r\n // for (const item of isShowG) {\r\n // var id = item.storeId;\r\n // }\r\n // const isShowGraph = this.state.isShowGraph\r\n const isRemoveGrapg = this.state.isRemoveGrapg;\r\n let index;\r\n if (isShowGraph.length <= isVal) {\r\n if (type == \"1\") {\r\n this.state.isCompsName = name;\r\n id = sId;\r\n id = 0;\r\n isSelectStoreId.push(id);\r\n index = isShowGraph.indexOf(+sId)\r\n isShowGraph.splice(index, 1)\r\n isRemoveGrapg.push(+sId)\r\n const inputParam = {\r\n UserStoreID: parseInt(this.props.userstoreid),\r\n Competitors: isSelectStoreId.toString(),\r\n RegionId: CONFIG.RegionId\r\n }\r\n\r\n this.onlyShowGraph(inputParam);\r\n\r\n }\r\n }\r\n if (isShowGraph.length < isVal) {\r\n this.state.isCompsName = [];\r\n if (type == \"0\") {\r\n this.state.isCompsName = name;\r\n if (id == undefined) {\r\n id = 0;\r\n }\r\n isSelectStoreId.push(id);\r\n isSelectStoreId = isSelectStoreId.concat(sId);\r\n index = isRemoveGrapg.indexOf(+sId)\r\n isRemoveGrapg.splice(index, 1)\r\n isShowGraph.push(+sId)\r\n const inputParam = {\r\n UserStoreID: parseInt(this.props.userstoreid),\r\n Competitors: isSelectStoreId.toString(),\r\n RegionId: CONFIG.RegionId\r\n }\r\n this.onlyShowGraph(inputParam);\r\n }\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false\r\n })\r\n this.state.isSelectCount.pop();\r\n this.setState({ snackOpen: true, snackMSg: 'Please remove any of the selected markets to add new ones.' });\r\n }\r\n this.setState({\r\n isRemoveGrapg,\r\n isShowGraph\r\n })\r\n\r\n\r\n }\r\n\r\n }\r\n\r\n //SnackBar Close\r\n snackHandleclose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n this.setState({ snackOpen: false });\r\n };\r\n\r\n\r\n onlyShowGraph(inputParam) {\r\n\r\n let token = this.state.accessKey;\r\n if (token) {\r\n axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n }\r\n axios.post(CONFIG.API_URL + 'dashboard/priceoverviewvolatilitygraph', inputParam)\r\n .then(response => {\r\n\r\n\r\n const showGrpahData = response.data.data;\r\n this.state.volatilityGrpahData = response.data.data;\r\n this.setState({\r\n showGrpahData, isLoading: false\r\n })\r\n if (this.state.showGrpahData.length > 0) {\r\n this.initialLoad(showGrpahData.filter(a => a.unitType == this.state.isDefaultUnit && a.priceType == this.state.isDefaultPrice));\r\n }\r\n }).catch((err) => {\r\n\r\n this.setState({\r\n isLoading: false\r\n })\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/\" } };\r\n this.props.history.push(from);\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n\r\n onUnitChange(e) {\r\n\r\n this.state.isDefaultUnit = e.target.value;\r\n var res = '';\r\n res = this.state.volatilityGrpahData.filter(a => a.unitType == this.state.isDefaultUnit && a.priceType == this.state.isDefaultPrice);\r\n this.initialLoad(res);\r\n }\r\n onPriceChange(e) {\r\n\r\n this.state.isDefaultPrice = e.target.value;\r\n var res = '';\r\n res = this.state.volatilityGrpahData.filter(a => a.unitType == this.state.isDefaultUnit && a.priceType == this.state.isDefaultPrice);\r\n this.initialLoad(res);\r\n }\r\n\r\n render() {\r\n const { marketVolatility, isYourStore, isUnitType, order, orderBy, isUnitTypeNotNull, marketStorePrice, isCompsName, isNoGraphData, locationInfoData, isRemoveGrapg, isShowGraph, dashboardBasicInfo, isLoading, unitType, priceOption, isNoData, new_filterData } = this.state;\r\n const defaultProps = {\r\n helpTitle: \"Price Volatility\",\r\n helpContent: \"
How aggressive is this store/competitor?
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing.
A store which frequently raises and/or lowers their rates, will typically have a higher pricing volatility.
Here you are shown the pricing volatility for this Market, Your Store (if available), the REITs in this Market, Multi-store operators and Single-store operators over the last 12 months.
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 12 months for each store type.
*Your store prices are included in the calculations.
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises and/or lowers their rates, will typically have a higher pricing volatility. Here you are shown the average monthly pricing volatility for Your Store (if available), against the Market average and any of the stores/competitors you select for comparison*, for the unit type and price type selected from the drop down menu.
Pricing Volatility is calculated by taking the number of times a pricing change occurred each month over the last 12 months.
*See Pricing Volatility by Store & Price Option to select a store you want to view on this graph
*Your store prices are included in the calculations.
\"\r\n }\r\n const defaultProps2 = {\r\n helpTitle: \"Market Pricing Volatility Over Last 12 Months\",\r\n helpContent: \"
This shows the pricing volatility over the last 12 months for each of the 11 common unit types (across the entire Market). This helps you understand which unit types in the Market are priced more aggressively.
*Your store prices are included in the calculations.
\"\r\n }\r\n const defaultProps3 = {\r\n helpTitle: \"Pricing Volatility by Store & Price Option\",\r\n helpContent: \"
This shows you all the stores in this Market along with their overall pricing volatility across all the unit types they advertise for the last 12 months. For comparison, we also show you the pricing volatility of the Premium unit rates vs. their Value unit rates.
Click on the link "Show on graph" to view this store's pricing volatility graph above over the last 12 months.
*Your store prices are included in the calculations.
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing.
\r\n
A store which frequently raises and/or lowers their rates, will typically have a higher pricing volatility.
\r\n
Here you are shown the pricing volatility for this Market, Your Store (if available), the REITs in this Market, Multi-store operators and Single-store operators over the last 12 months.
\r\n
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 12 months for each store type.
\r\n\r\n
\r\n
*Your store prices are included in the calculations.
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises and/or lowers their rates, will typically have a higher pricing volatility. Here you are shown the average monthly pricing volatility for Your Store (if available), against the Market average and any of the stores/competitors you select for comparison*, for the unit type and price type selected from the drop down menu.
\r\n
Pricing Volatility is calculated by taking the number of times a pricing change occurred each month over the last 12 months.
*See Pricing Volatility by Store & Price Option to select a store you want to view on this graph
\r\n
*Your store prices are included in the calculations.
\r\n {\r\n new_filterData.map((item)=>{\r\n return(\r\n <>\r\n \r\n {item.name}\r\n \r\n )\r\n })\r\n }\r\n has same value in the series. \r\n
: \"\"\r\n } \r\n\r\n
\r\n \r\n\r\n
\r\n {isNoGraphData ?
No Data Found
:\r\n \r\n }\r\n
\r\n
\r\n
\r\n
\r\n {isLoading ?
: ''}\r\n
\r\n
Current Market Volatility(last 12 months)\r\n {/* */}\r\n
\r\n
\r\n
This shows the pricing volatility over the last 12 months for each of the 11 common unit types (across the entire Market). This helps you understand which unit types in the Market are priced more aggressively.
\r\n
*Your store prices are included in the calculations.
\r\n }\r\n {/* Below I write code for showing \"No data FOund\" if all the units have return the null values */}\r\n {\r\n isNoData === true ?\r\n \r\n {isLoading === false ? 'No Data Found' : ''}\r\n : ''\r\n }\r\n {/* Above I write code for showing \"No data FOund\" if all the units have return the null values */}\r\n \r\n \r\n
:
{isLoading === false ? 'No Data Found' : ''}
}\r\n
\r\n
\r\n \r\n
\r\n
\r\n {isLoading ?
: ''}\r\n
\r\n {/*
Current Market Volatility by Store & Price Option(last 12 months)
Current Market Volatility by Store & Price Option(last 12 months)
\r\n
\r\n
Pricing Volatility by Store & Price Option
\r\n
This shows you all the stores in this Market along with their overall pricing volatility across all the unit types they advertise for the last 12 months. For comparison, we also show you the pricing volatility of the Premium unit rates vs. their Value unit rates.
\r\n
Click on the link "Show on graph" to view this store's pricing volatility graph above over the last 12 months.
\r\n
*Your store prices are included in the calculations.
In this section, the graph enables you to compare rates like-for-like, against your top competitors*. The rates shown on the graph are based on the Online Advertised Rate on the store's website.
The Number of Pricing Options shows you if the selected store* offers more than one price type for this unit type.
The highest price advertised by a store is shown as the Premium rate.
The lowest price advertised by a store is shown as the Value rate.
Any other rates in between are shown as a range
If there is only one price for a unit, it is shown as both the Premium and Value rate
Market Low, Market Average and Market High
These rates are based on the online rates advertised by the competitor stores* and the price type chosen (Premium or Value).
*See the All Market View section below to learn how you can change the competitors you can compare against on this graph.
*Your store prices are included in the calculations.
View historical rates for this unit type over the last 5 days, 30 days, 90 days, 6 months or 1 year, choose the time range from the drop down menu. You can also view rates by pricing type - Premium, Value or both. See the All Market View section below to learn how you can change the competitors you can compare against on this graph. These rates are based on the Advertised Online Rate.
*Your store prices are included in the calculations.
These are all the stores in this Market offering this unit type.
Select up to a total of 8 competitor stores listed below to compare against in the Current Effective Rate analysis section or Historical pricing view. You can remove any stores from the graph at any time.
*Your store prices are included in the calculations.
\" :\r\n \"
These are all the stores in this Market offering this unit type.
Select up to a total of 8 competitor stores listed below to compare against in the Current Pricing analysis section or Historical pricing view. You can remove any stores from the graph at any time.
*Your store prices are included in the calculations.
\r\n In this section, the graph enables you to compare rates\r\n like-for-like, against your top competitors*. The rates\r\n shown on the graph are based on the Online Advertised Rate\r\n on the store's website.\r\n \r\n The Number of Pricing Options shows you if the selected\r\n store* offers more than one price type for this unit type.\r\n \r\n The highest price advertised by a store is shown as the\r\n Premium rate.\r\n \r\n The lowest price advertised by a store is shown as the\r\n Value rate.\r\n \r\n Any other rates in between are shown as a range\r\n \r\n If there is only one price for a unit, it is shown as both\r\n the Premium and Value rate\r\n \r\n Market Low, Market Average and Market High\r\n \r\n These rates are based on the online rates advertised by\r\n the competitor stores* and the price type chosen (Premium\r\n or Value).\r\n \r\n *See the All Market View section below to learn how you\r\n can change the competitors you can compare against on this\r\n graph.\r\n \r\n *Your store prices are included in the calculations.\r\n
\r\n View historical rates for this unit type over the last 5\r\n days, 30 days, 90 days, 6 months or 1 year, choose the\r\n time range from the drop down menu. You can also view\r\n rates by pricing type - Premium, Value or both. See the\r\n All Market View section below to learn how you can change\r\n the competitors you can compare against on this graph.\r\n These rates are based on the Advertised Online Rate.\r\n \r\n *Your store prices are included in the calculations.\r\n
\r\n \r\n *Your store prices are included in the\r\n calculations.\r\n \r\n
\r\n {storeAdvertising ?
\r\n *This store is not currently advertising a rate for this unit\r\n
: ''}\r\n
\r\n \r\n {this.state.activeTab === 4 ? <>\r\n These are all the stores in this Market offering\r\n this unit type. Select up to a total of 8\r\n competitor stores listed below to compare\r\n against in the Current Effective rate analysis section\r\n or Historical pricing view. You can remove any\r\n stores from the graph at any time.\r\n : <>These are all the stores in this Market offering\r\n this unit type. Select up to a total of 8\r\n competitor stores listed below to compare\r\n against in the Current Pricing analysis section\r\n or Historical pricing view. You can remove any\r\n stores from the graph at any time.}\r\n \r\n\r\n \r\n \r\n {unitDurations && unitDurations.length > 0 ? (\r\n unitDurations.map((unit) => (\r\n \r\n ))\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n
In Optimize, we define inventory as the number of stores in this Market which advertise a particular unit type. On this graph you will see the number of stores over time (5 days, 30 days, 90 days, 6 months or 1 year) which have advertised this unit type.
Below the graph, under Added in Last 24 Hours, you will see the stores in this Market which have either added this unit type to their website or removed it from their website in the last 24 hours.
In Optimize, we define inventory as the number of stores in this Market which advertise a particular unit type. On this graph you will see the number of stores over time (5 days, 30 days, 90 days, 6 months or 1 year) which have advertised this unit type.
\r\n
Below the graph, under Added in Last 24 Hours, you will see the stores in this Market which have either added this unit type to their website or removed it from their website in the last 24 hours.
{isLoading === false ? 'No Stores have Removed this Unit Type' : ''}
}\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {isLoading ?
: ''}\r\n\r\n
\r\n\r\n
\r\n\r\n\r\n );\r\n }\r\n\r\n\r\n\r\n}","import React from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableFooter from '@material-ui/core/TableFooter';\r\nimport TablePagination from '@material-ui/core/TablePagination';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport Button from '@material-ui/core/Button';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport {HelpTextPopup} from '../../HelpTextPopup/index';\r\nimport axios from 'axios';\r\nimport { CONFIG } from '../../../utils/config';\r\nimport PropTypes from 'prop-types';\r\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\r\nimport { Col,Row } from 'reactstrap';\r\nimport moment from 'moment';\r\nimport { faCheck } from '@fortawesome/free-solid-svg-icons';\r\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport Alarm from '../../../Assets/Images/unit-type-images/Alarm.png';\r\nimport ClimateControlled from '../../../Assets/Images/unit-type-images/ClimateControlled.png';\r\nimport StorageUnit from '../../../Assets/Images/unit-type-images/StorageUnit.png';\r\nimport apartment from '../../../Assets/Images/unit-type-images/apartment.png';\r\nimport artstudio from '../../../Assets/Images/unit-type-images/artstudio.png';\r\nimport box from '../../../Assets/Images/unit-type-images/box.png';\r\nimport celltower from '../../../Assets/Images/unit-type-images/celltower.png';\r\nimport container from '../../../Assets/Images/unit-type-images/container.png';\r\nimport filestorage from '../../../Assets/Images/unit-type-images/filestorage.png';\r\nimport office from '../../../Assets/Images/unit-type-images/office.png';\r\nimport mailbox from '../../../Assets/Images/unit-type-images/mailbox.png';\r\nimport parking from '../../../Assets/Images/unit-type-images/parking.png';\r\nimport unit from '../../../Assets/Images/unit-type-images/unit.png';\r\nimport warehouse from '../../../Assets/Images/unit-type-images/warehouse.png';\r\nimport winestorage from '../../../Assets/Images/unit-type-images/winestorage.png';\r\nimport workshop from '../../../Assets/Images/unit-type-images/workshop.png';\r\nimport DoorType from '../../../Assets/Images/unit-type-images/DoorType.png';\r\nimport DriveUp from '../../../Assets/Images/unit-type-images/DriveUp.png';\r\nimport Elevator from '../../../Assets/Images/unit-type-images/Elevator.png';\r\nimport HumidityControlled from '../../../Assets/Images/unit-type-images/HumidityControlled.png';\r\nimport OutdoorAccess from '../../../Assets/Images/unit-type-images/OutdoorAccess.png';\r\nimport power from '../../../Assets/Images/unit-type-images/power.png';\r\nimport locker from '../../../Assets/Images/unit-type-images/locker.png';\r\nimport { MarketProfile } from '../../MarketProfile';\r\nimport { Link } from 'react-router-dom';\r\nimport { faMapPin, faStar } from '@fortawesome/free-solid-svg-icons';\r\nimport './DetailedStoresViewPdf.css';\r\nimport Logo from '../../../Assets/Images/logo.jpg';\r\nconst actionsStyles = theme => ({\r\n tablepaggination: {\r\n flexShrink: 0,\r\n color: theme.palette.text.secondary,\r\n marginLeft: theme.spacing * 2.5,\r\n },\r\n});\r\n\r\nclass DetailedStoresViewPdf extends React.Component {\r\n\r\n handleFirstPageButtonClick = event => {\r\n this.props.onChangePage(event, 0);\r\n };\r\n\r\n handleBackButtonClick = event => {\r\n this.props.onChangePage(event, this.props.page - 1);\r\n };\r\n\r\n handleNextButtonClick = event => {\r\n this.props.onChangePage(event, this.props.page + 1);\r\n };\r\n\r\n handleLastPageButtonClick = event => {\r\n this.props.onChangePage(\r\n event,\r\n Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1),\r\n );\r\n };\r\n\r\n\r\n render() {\r\n const { classes, count, page, rowsPerPage, theme } = this.props;\r\n\r\n return (\r\n
This is a spreadsheet style view of the stores advertising this unit currently. It shows the store, the proximity to your address, the unit size, the floor in which the unit is located (Ground or Upper floor) and any features advertised for this unit type by the store. Additionally, the rates (both Advertised Online Rate and Advertised Walk-in Rate), unit-specific promotions and the last time these were changed on the store's website.
*Your store prices are included in the calculations.
This is a spreadsheet style view of the stores advertising this unit currently. It shows the store, the proximity to your address, the unit size, the floor in which the unit is located (Ground or Upper floor) and any features advertised for this unit type by the store. Additionally, the rates (both Advertised Online Rate and Advertised Walk-in Rate), unit-specific promotions and the last time these were changed on the store's website.\r\n
*Your store prices are included in the calculations.
: ''}\r\n {isLoading ?
: ''}\r\n {CONFIG.RegionId === 3 && i === 0 ?\r\n
* This rate is calculated from an advertised monthly rate
Learn more about the stores in this Market. What are they advertising? Are they pricing aggressively? How big is their facility? etc.
\r\n
{(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} values displayed here are obtained from public sources, including city and county property records. When this information is unavailable, StorTrack uses mapping tools or internal models to estimate the size of the property - such properties have an asterisk (*) next to their {(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} value.
\r\n
Store Types
\r\n
At the top of the page you will find a breakdown of the types of stores in this Market
\r\n
Real Estate Investment Trust (REIT) Stores
Any stores operated by the following companies:
\r\n
\r\n
Public Storage
\r\n
Extra Space
\r\n
LifeStorage
\r\n
Cubesmart
\r\n
National Storage Affiliates
\r\n
Global Self Storage
\r\n
Multi Store Operators (Multi-Ops)
\r\n
Companies operating more than 2 stores
\r\n
Single Store Operators (Single-Ops)
\r\n
Companies (typically independent operators) managing a single store
\r\n
Competitor Overview
\r\n
\r\n
This grid below shows each store in this Market. Each store 'snapshot' shows the store name, address and proximity to your store. Further, it includes the building's square footage (derived from public sources or in some instances from calculations made by StorTrack's data science team).
\r\n
You will also find ownership and management information and store age.
\r\n
\r\n
How aggressive is this store/competitor?
\r\n
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises or lowers their rates, will typically have a higher pricing volatility. Here you can view the pricing volatility for a store over the last 30 days.
\r\n
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 30 days for that store.
Unit Availability
For each store we show 11 of the most common unit types. This is meant to give you a quick snapshot of the unit types each store in this Market is advertising.
\r\n
The green checkmark means this unit type is currently advertised by this store
The red x means this store has not advertised this unit type in the last 12 months
The grey icon means this store has advertised this unit type in the last 12 months, but it is not currently advertising it
\r\n
\r\n {/*
Street View
\r\n
Hover over the store's image to view a Google Map snapshot of this facility
\r\n
Map View of Stores
\r\n
Click on the map pin point icon on the upper right corner to view a map of all the stores in your Market
* The {(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} values are obtained from publicly available sources. In instances where this information is unavailable, our team has used different methods to calculate the size of the property.
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
Pricing available for this unit type
\r\n
Pricing not available for this unit type
\r\n
Pricing previously available, but not currently advertised
\r\n {/* below the link comment for PDF purpose */}\r\n {/* this.getStoreStreeView(strdata.latitude, strdata.longitude, strdata.storeName)} title=\"click here to view street view\"> */}\r\n \r\n {strdata.properties.StoreImage != '' ? : ''}\r\n \r\n \r\n
\r\n \r\n {/* below the line comment for PDF does not have href */}\r\n {/*
Learn more about the stores in this Market. What are they advertising? Are they pricing aggressively? How big is their facility? etc.
Store Types
At the top of the page you will find a breakdown of the types of stores in this Market
Real Estate Investment Trust (REIT) Stores
Any stores operated by the following companies:
Public Storage
Extra Space
LifeStorage
Cubesmart
National Storage Affiliates
Global Self Storage
Multi Store Operators (Multi-Ops)
Companies operating more than 2 stores
Single Store Operators (Single-Ops)
Companies (typically independent operators) managing a single store
Competitor Overview
This grid below shows each store in this Market. Each store 'snapshot' shows the store name, address and proximity to your store. Further, it includes the building's square footage (derived from public sources or in some instances from calculations made by StorTrack's data science team).
You will also find ownership and management information and store age.
How aggressive is this store/competitor?
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises or lowers their rates, will typically have a higher pricing volatility. Here you can view the pricing volatility for a store over the last 30 days.
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 30 days for that store.
Unit Availability
For each store we show 11 of the most common unit types. This is meant to give you a quick snapshot of the unit types each store in this Market is advertising.
The green checkmark means this unit type is currently advertised by this store
The red x means this store has not advertised this unit type in the last 12 months
The grey icon means this store has advertised this unit type in the last 12 months, but it is not currently advertising it
Street View
Hover over the store's image to view a Google Map snapshot of this facility
Map View of Stores
Click on the map pin point icon on the upper right corner to view a map of all the stores in your Market
Learn more about the stores in this Market. What are they advertising? Are they pricing aggressively? How big is their facility? etc.
\r\n
{(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} values displayed here are obtained from public sources, including city and county property records. When this information is unavailable, StorTrack uses mapping tools or internal models to estimate the size of the property - such properties have an asterisk (*) next to their {(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} value.
\r\n
Store Types
\r\n
At the top of the page you will find a breakdown of the types of stores in this Market
\r\n
Real Estate Investment Trust (REIT) Stores
Any stores operated by the following companies:
\r\n
\r\n
Public Storage
\r\n
Extra Space
\r\n
LifeStorage
\r\n
Cubesmart
\r\n
National Storage Affiliates
\r\n
Global Self Storage
\r\n
Multi Store Operators (Multi-Ops)
\r\n
Companies operating more than 2 stores
\r\n
Single Store Operators (Single-Ops)
\r\n
Companies (typically independent operators) managing a single store
\r\n
Competitor Overview
\r\n
\r\n
This grid below shows each store in this Market. Each store 'snapshot' shows the store name, address and proximity to your store. Further, it includes the building's square footage (derived from public sources or in some instances from calculations made by StorTrack's data science team).
\r\n
You will also find ownership and management information and store age.
\r\n
\r\n
How aggressive is this store/competitor?
\r\n
Pricing volatility is a major indicator of how aggressive or passive a store or Market is with their pricing. A store which frequently raises or lowers their rates, will typically have a higher pricing volatility. Here you can view the pricing volatility for a store over the last 30 days.
\r\n
Pricing Volatility is calculated by taking the number of times a pricing change occurred over the last 30 days for that store.
Unit Availability
For each store we show 11 of the most common unit types. This is meant to give you a quick snapshot of the unit types each store in this Market is advertising.
\r\n
The green checkmark means this unit type is currently advertised by this store
The red x means this store has not advertised this unit type in the last 12 months
The grey icon means this store has advertised this unit type in the last 12 months, but it is not currently advertising it
\r\n
\r\n {/*
Street View
\r\n
Hover over the store's image to view a Google Map snapshot of this facility
\r\n
Map View of Stores
\r\n
Click on the map pin point icon on the upper right corner to view a map of all the stores in your Market
* The {(this.state.locationInfoData.countryCode === \"DE\" || this.state.locationInfoData.countryCode === \"AT\" || this.state.locationInfoData.countryCode === \"CH\") ? \"Total Square Metre\" : CONFIG.MeasurementLabel} values are obtained from publicly available sources. In instances where this information is unavailable, our team has used different methods to calculate the size of the property.
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
Pricing available for this unit type
\r\n
Pricing not available for this unit type
\r\n
Pricing previously available, but not currently advertised
\r\n {/* below the link comment for PDF purpose */}\r\n {/* this.getStoreStreeView(strdata.latitude, strdata.longitude, strdata.storeName)} title=\"click here to view street view\"> */}\r\n \r\n {strdata.StoreImage != '' ? : ''}\r\n \r\n \r\n
\r\n \r\n {/* below the line comment for PDF does not have href */}\r\n {/*
The StorTrack Marketing Scorecard is a devised scoring mechanism for judging the activity and effectiveness of a Store's local marketing, so as to enable us to create a methodology for comparison and competitive insight.
The Scorecard is created by monitoring 5 different areas of a Store's marketing activities: it's website, it's organic presence on search engines, it's paid placement in search engines, the social media presence of the Store and finally how easy the Store makes it for potential new tenants to contact it. In each of these five categories, StorTrack has created a weighted scoring process that then rolls up to a category score. The category scores are what you see on the Marketing Scorecard page and the method by which we compare Stores side-by-side.
The Scoring Process is detailed in the attached PDF. Please click the link to download the full Scoring methodology. Click here
For any further information on StorTrack's Marketing Scorecard please contact Support directly.
*Your store scoring is included in the calculations.
The StorTrack Marketing Scorecard is a devised scoring mechanism for judging the activity and effectiveness of a Store's local marketing, so as to enable us to create a methodology for comparison and competitive insight.
\r\n
The Scorecard is created by monitoring 5 different areas of a Store's marketing activities: it's website, it's organic presence on search engines, it's paid placement in search engines, the social media presence of the Store and finally how easy the Store makes it for potential new tenants to contact it. In each of these five categories, StorTrack has created a weighted scoring process that then rolls up to a category score. The category scores are what you see on the Marketing Scorecard page and the method by which we compare Stores side-by-side.
\r\n {/*
The Scoring Process is detailed in the attached PDF. Please click the link to download the full Scoring methodology. Click here
*/}\r\n
For any further information on StorTrack's Marketing Scorecard please contact Support directly.
\r\n
*Your store scoring is included in the calculations.
\r\n {isLoading1 === false ? 'There are no competitors available in this market.' : ''}\r\n \r\n\r\n }\r\n \r\n {/* Below the table adding for display the static data of national and state values when there are no competitors available in this market */}\r\n {trproductRows.length === 0 && isLoading1 === false ?\r\n \r\n
\r\n \r\n : ''}\r\n {/* Above the table adding for display the static data of national and state values when there are no competitors available in this market */}\r\n {Markets && Markets.length > 0 ?\r\n \r\n
\r\n \r\n
\r\n \r\n This market is considered\r\n {MarketsDesc.marketScoreValue ? MarketsDesc.marketScoreValue : ''}\r\n {MarketsDesc ? MarketsDesc.marketScore : ''}\r\n \r\n \r\n
\r\n \r\n The lowest Marketing Activity area is\r\n {MarketsDesc.lowestMarketActivity ? MarketsDesc.lowestMarketActivity : ''}\r\n {MarketsDesc.lowestMarket ? MarketsDesc.lowestMarket : 'There are no competitors available in this market.'}\r\n \r\n \r\n \r\n \r\n \r\n :\r\n ''}\r\n
The stores advertising this unit are shown on a map. The stores identified in blue are the stores currently advertising rates online, those in black are stores in this Market which currently do not advertised online. Hover over any of the store pinpoints to view some details on that store.
*Your store prices are included in the calculations.
\r\n The stores advertising this unit are shown on a map. The stores identified in blue are the stores currently advertising rates online, those in black are stores in this Market which currently do not advertised online. Hover over any of the store pinpoints to view some details on that store.\r\n
*Your store prices are included in the calculations.\r\n
The stores advertising this unit are shown on a map. The stores identified in blue are the stores currently advertising rates online, those in black are stores in this Market which currently do not advertised online. Hover over any of the store pinpoints to view some details on that store.
*Your store prices are included in the calculations.
\r\n The stores advertising this unit are shown on a map. The stores identified in blue are the stores currently advertising rates online, those in black are stores in this Market which currently do not advertised online. Hover over any of the store pinpoints to view some details on that store.\r\n
*Your store prices are included in the calculations.\r\n
In this section, the graph enables you to compare rates like-for-like, against your top competitors*. The rates shown on the graph are based on the Online Advertised Rate on the store's website.
The Number of Pricing Options shows you if the selected store* offers more than one price type for this unit type.
The highest price advertised by a store is shown as the Premium rate.
The lowest price advertised by a store is shown as the Value rate.
Any other rates in between are shown as a range
If there is only one price for a unit, it is shown as both the Premium and Value rate
Market Low, Market Average and Market High
These rates are based on the online rates advertised by the competitor stores* and the price type chosen (Premium or Value).
*See the All Market View section below to learn how you can change the competitors you can compare against on this graph.
*Your store prices are included in the calculations.
View historical rates for this unit type over the last 5 days, 30 days, 90 days, 6 months or 1 year, choose the time range from the drop down menu. You can also view rates by pricing type - Premium, Value or both. See the All Market View section below to learn how you can change the competitors you can compare against on this graph. These rates are based on the Advertised Online Rate.
*Your store prices are included in the calculations.
These are all the stores in this Market offering this unit type.
Select up to a total of 8 competitor stores listed below to compare against in the Current Pricing analysis section or Historical pricing view. You can remove any stores from the graph at any time.
*Your store prices are included in the calculations.
\r\n The Effective Rate is the price the consumer\r\n pays after factoring in the promotion. The\r\n calculation is performed over a specific\r\n tenancy length, which can be selected on the\r\n right.\r\n
\r\n )\r\n }\r\n}\r\nexport default PdfDownload;","import React from 'react';\r\n//import { Link } from 'react-router-dom';\r\nimport { HashLink as Link } from 'react-router-hash-link';\r\nimport * as d3 from \"d3\";\r\nimport moment from 'moment';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport {\r\n Container, Col, Row, Button, Label, Input, FormText,\r\n CardDeck, Card, CardTitle, CardSubtitle, CardFooter, CardBody\r\n} from 'reactstrap';\r\nimport { AvForm, AvField } from 'availity-reactstrap-validation';\r\nimport './AveragePrice.css';\r\nimport freeoval from './../../Assets/Images/oval1.png';\r\nimport singleimg from './../../Assets/Images/oval2.png';\r\nimport multiimg from './../../Assets/Images/oval3.png';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Stepper from '@material-ui/core/Stepper';\r\nimport Step from '@material-ui/core/Step';\r\nimport StepLabel from '@material-ui/core/StepLabel';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport FormGroup from '@material-ui/core/FormGroup';\r\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport CreditCardInput from 'react-credit-card-input';\r\nimport Snackbar from '@material-ui/core/Snackbar';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport NumberFormat from 'react-number-format';\r\nimport axios from 'axios';\r\nimport { CONFIG, MatchingCountryCode } from '../../utils/config';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport { COMMON } from '../../utils/common';\r\n\r\n\r\nfunction getSteps() {\r\n return ['Create Your Account', 'Billing Address', 'Payment Details', 'You are Confirmed!'];\r\n}\r\n\r\nclass Home extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n activeTab: 1,\r\n hisactivedur: 1,\r\n unitDurations: [],\r\n unitTypes: [],\r\n CurrentHistory: [],\r\n AllCurrentHistory: [],\r\n isLoading: false,\r\n defaultWidth: 0,\r\n // isDefaultUnit: 1,\r\n isDefaultUnit: \"All Units\",\r\n isDefaultDateRange: 1,\r\n widgetId: 10, //This is widget id in DB\r\n dataStatus: false,\r\n stateLookup: [],\r\n cityLookup: [],\r\n storeName: '',\r\n coverage: '',\r\n palettecomparision: '',\r\n showLoader: false,\r\n is_onchange: false,\r\n selectedState: '',\r\n selectedCountry: ''\r\n };\r\n // this.emailInput = React.createRef();\r\n this.DurationsdropDown = this.DurationsdropDown.bind(this);\r\n this.onDurAndPriChange = this.onDurAndPriChange.bind(this);\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.DurationsdropDown();\r\n this.loadStateValues();\r\n this.initialLoad();\r\n }\r\n\r\n\r\n\r\n async onDurAndPriChange(e) {\r\n const { name, value } = e.target;\r\n const AllCurrentHistory = this.state.AllCurrentHistory;\r\n var datas = []\r\n if (name === 'unitTypeChange') {\r\n this.state.isDefaultUnit = value;\r\n datas = AllCurrentHistory.filter(a => a.UnitType === value);\r\n }\r\n\r\n this.HistoryGraphView(datas);\r\n\r\n }\r\n\r\n // Text Wrap For Graph X-axis label\r\n wrap(text, width) {\r\n text.each(function () {\r\n var text = d3.select(this),\r\n words = text.text().split(/\\s+/).reverse(),\r\n word,\r\n line = [],\r\n lineNumber = 0,\r\n lineHeight = 1.1, // ems\r\n y = text.attr(\"y\"),\r\n dy = parseFloat(text.attr(\"dy\")),\r\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", dy + \"em\")\r\n while (word = words.pop()) {\r\n line.push(word)\r\n tspan.text(line.join(\" \"))\r\n if (tspan.node().getComputedTextLength() > width) {\r\n line.pop()\r\n tspan.text(line.join(\" \"))\r\n line = [word]\r\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", `${++lineNumber * lineHeight + dy}em`).text(word)\r\n }\r\n }\r\n })\r\n }\r\n\r\n //Formatted in as per competitor\r\n HisformData(data, uid) {\r\n var tFData = data.filter(a => a.MarketID === uid);\r\n var tData = [];\r\n for (var i = 0; i < tFData.length; i++) {\r\n // for price range calculation \r\n var CData = {\r\n date: tFData[i].Date,\r\n Date: moment(tFData[i].Date).toDate(),\r\n MarketName: tFData[i].MarketName,\r\n price: parseFloat(tFData[i].Value),\r\n labeldate: tFData[i].Date,\r\n labelPrice: tFData[i].Value === '0' ? 'N/A' : tFData[i].Value,\r\n }\r\n tData.push(CData);\r\n }\r\n return tData;\r\n }\r\n getYaxismin(minVal) {\r\n var modVal = minVal % 10;\r\n minVal = minVal - modVal;\r\n return minVal;\r\n }\r\n getYaxisMax(maxVal) {\r\n var modVal = maxVal % 10;\r\n var maxVal = (maxVal - modVal) + (modVal + (10 - modVal));\r\n if (maxVal > 200) {\r\n var modVal1 = maxVal % 50;\r\n maxVal = (maxVal - modVal1) + (modVal1 + (50 - modVal1));\r\n }\r\n return maxVal;\r\n }\r\n calcMAxVal(minVal, maxVal) {\r\n var diffVal = maxVal - minVal;\r\n var incRatio = Math.round(diffVal / 5);\r\n var maxMinVal = 0;\r\n var maxCalVal = [];\r\n maxCalVal.push(minVal);\r\n for (let i = 1; maxMinVal < maxVal; i++) {\r\n if (i * incRatio < maxVal) {\r\n var maxRVal = minVal + (i * incRatio);\r\n maxMinVal = maxRVal;\r\n maxCalVal.push(maxRVal);\r\n }\r\n else {\r\n break;\r\n }\r\n }\r\n return maxCalVal;\r\n }\r\n //Graph for History\r\n HistoryGraphView(Hisdata) {\r\n // var Hisdata = graphDatas;\r\n var decimalFormat = d3.format(\"0.2f\");\r\n d3.selectAll(\".mainhisGraphdivs > *\").remove();\r\n d3.select(\".av-wid-legend\").remove();\r\n let MaxPrice;\r\n if (Hisdata.length > 0) {\r\n MaxPrice = d3.max(Hisdata.map(function (d) {\r\n return d.Value != \"\" && d.Value != null ? d.Value : 0;\r\n }));\r\n };\r\n\r\n var height = 200;\r\n if (MaxPrice) {\r\n\r\n Hisdata.map(record => {\r\n record.Value = record.Value !== \"\" || record.Value !== null ? record.Value : ''\r\n });\r\n\r\n // d3.selectAll(\".mainhisGraphdivs > *\").remove();\r\n // d3.select(\".av-wid-legend\").remove();\r\n\r\n var margin = 50;\r\n var width = Hisdata.length > 0 ? (d3.select('.mainhisGraphdivs').node().offsetWidth) - margin : 0;\r\n\r\n\r\n var lineOpacity = \"1\";\r\n\r\n var currency = CONFIG.Currency_Symbol;\r\n const tParser = d3.timeParse(\"%m/%d/%Y\")\r\n\r\n /*Data Formation*/\r\n var tempdata = [];\r\n //To get the Unique store ids\r\n let unique = [...new Set(Hisdata.map(item => item.MarketID))];\r\n let MarketName = [...new Set(Hisdata.map(item => item.MarketName))];\r\n for (var i = 0; i < unique.length; i++) {\r\n if (MarketName[i]) {\r\n var tFData = Hisdata.filter(a => a.MarketID == unique[i]);\r\n var datum = {\r\n name: tFData.length > 0 ? tFData[0].MarketName : '',\r\n storeID: tFData.length > 0 ? tFData[0].MarketID : '',\r\n values: this.HisformData(tFData, unique[i])\r\n }\r\n tempdata.push(datum);\r\n }\r\n }\r\n var tmin = d3.min(Hisdata.map(function (d) {\r\n if (d.Value != 0) {\r\n return Number(d.Value);\r\n }\r\n }));\r\n var tmax = d3.max(Hisdata.map(function (d) { return d.Value ? parseInt(d.Value) : 0 }));\r\n tmin = this.getYaxismin(tmin);\r\n tmax = this.getYaxisMax(tmax);\r\n var arrMax = this.calcMAxVal(tmin, tmax);\r\n d3.select('.mainhisGraphdivs').append('div').attr('class', 'hisGraph1');\r\n\r\n /* Scale */\r\n var xScale = d3.scaleTime()\r\n .domain(d3.extent(tempdata[0].values, function (d) { return tParser(d.date); }))\r\n .range([0, width - 100]);\r\n\r\n var yScale = d3.scaleLinear()\r\n .domain([tmin, tmax])\r\n .range([height - margin, 0]);\r\n\r\n //Colors\r\n var filterColors = ['#4D4D4D', '#5DB975', '#5B95F6'];\r\n\r\n var color = d3.scaleOrdinal(filterColors);\r\n\r\n /* Add SVG */\r\n var svg = d3.selectAll(\".hisGraph1\").append(\"svg\")\r\n .attr(\"width\", (width) + \"px\")\r\n .attr(\"height\", (height + margin) + \"px\")\r\n .append('g')\r\n .attr(\"transform\", `translate(${margin + 20}, ${margin})`);\r\n\r\n\r\n // var line = d3.line()\r\n // .x(d => xScale(tParser(d.date)))\r\n // .y(d => yScale(d.price));\r\n var line = d3.line()\r\n .x(d => xScale(tParser(d.date)))\r\n .y(d => yScale(d.price))\r\n .defined(function (d) { return !isNaN(d.price != null && d.price != 0 ? d.price : \"N/A\"); });\r\n\r\n let lines = svg.append('g')\r\n .attr('class', 'lines');\r\n lines.selectAll('.line-group')\r\n .data(tempdata).enter()\r\n .append('g')\r\n .attr('class', 'line-group')\r\n .append('path')\r\n .attr('class', 'line')\r\n .attr('d', d => line(d.values))\r\n .style('stroke', (d, i) => color(i))\r\n .attr(\"stroke-width\", 1)\r\n .style('opacity', \"1\");\r\n\r\n\r\n /*End of Price Range Graph*/\r\n var focus = svg.append(\"g\")\r\n .attr(\"class\", \"focus\")\r\n .style(\"display\", \"none\");\r\n\r\n focus.append(\"line\")\r\n .attr(\"class\", \"x-hover-line hover-line\")\r\n .attr(\"y1\", 10)\r\n .attr(\"y2\", (height - 24));\r\n\r\n focus.append(\"line\")\r\n .attr(\"class\", \"y-hover-line hover-line\")\r\n .attr(\"x1\", width)\r\n .attr(\"x2\", width);\r\n\r\n focus.append(\"text\")\r\n .attr(\"x\", 15)\r\n .attr(\"dy\", \".31em\");\r\n\r\n svg.append(\"rect\")\r\n .attr(\"transform\", \"translate( 0 , 0 )\")\r\n .attr(\"class\", \"overlay\")\r\n .style('fill', 'none')\r\n .attr(\"width\", width - 100)\r\n .attr(\"height\", height - 30)\r\n .on(\"mouseover\", function () { focus.style(\"display\", null); })\r\n .on(\"mouseout\", function () {\r\n focus.style(\"display\", \"none\");\r\n //Legend value change\r\n d3.selectAll('.his_price').text('[---]');\r\n d3.selectAll('.ld_span').text('- - -');\r\n })\r\n .on(\"mousemove\", mousemove);\r\n\r\n const bisectDate = d3.bisector(d => d.Date).left;\r\n function mousemove() {\r\n\r\n var x0 = xScale.invert(d3.mouse(this)[0]),\r\n i = bisectDate(tempdata[0].values, x0, 1),\r\n d0 = tempdata[0].values[i - 1],\r\n d1 = tempdata[0].values[i],\r\n d2 = x0 - d0.Date > d1.Date - x0 ? d1 : d0,\r\n d = x0 - d0.Date > d1.Date - x0 ? d1.Date : d0.date;\r\n\r\n\r\n //Hover Line \r\n focus.attr(\"transform\", \"translate(\" + xScale(d2.Date) + \", -12 )\");\r\n //ToolTip\r\n var Tooltip_date = moment(d).format('DD-MMM-YYYY');\r\n // div.transition()\r\n // .duration(200)\r\n // .style(\"opacity\", .9);\r\n\r\n //Get Current date stores Values\r\n let Storecount = [];\r\n for (var c = 0; c < tempdata.length; c++) {\r\n let getSCData = tempdata[c].values.filter(data => {\r\n\r\n var Filter_date = moment(data.Date).format('DD-MMM-YYYY');\r\n return Filter_date === Tooltip_date;\r\n });\r\n Storecount.push(getSCData.length > 0 ? getSCData[0] ? getSCData[0] : \"N/A\" : 'N/A');\r\n }\r\n\r\n //Legend value Change\r\n d3.select('.av-wid-legend').selectAll('.key').remove();\r\n d3.select('.av-wid-legend').selectAll('.legend_date').remove();\r\n\r\n //For Date\r\n d3.select('.av-wid-legend').append('div')\r\n .attr('class', 'col-md-12 legend_date')\r\n .style('padding-left', '0')\r\n .style('padding-bottom', '2px')\r\n .style('font-size', '15px')\r\n .style('display', 'inline-block')\r\n .html('Date : ' + Tooltip_date + '');\r\n\r\n //For Store Details\r\n //var div_width = ( width / 3) - 50 ;\r\n let keys = d3.select('.av-wid-legend').selectAll('.key')\r\n .data(Storecount).enter()\r\n .append('div')\r\n .attr('class', 'key col-md-3')\r\n .style('display', 'inline-block')\r\n .style('align-items', 'center');\r\n\r\n keys.append('div')\r\n .attr('class', 'symbol')\r\n .style('display', 'inline-block')\r\n .style('height', '10px')\r\n .style('width', '10px')\r\n .style('margin-right', '5px')\r\n .style('background-color', (d, i) => color(i));\r\n\r\n keys.append('div')\r\n .attr('class', 'name')\r\n .style('display', 'inline-block')\r\n .style('font-size', '11px')\r\n .style('font-weight', '500')\r\n .text(d => `${d.MarketName} `);\r\n\r\n keys.append('div')\r\n .attr('class', 'his_price')\r\n .style('display', 'inline-block')\r\n .style('color', (d, i) => color(i))\r\n .style('margin-left', '10px')\r\n .text(d => !isNaN(d.price) ? '[' + currency + d.price.toFixed(2) + ']' : '[N/A]');\r\n\r\n keys.exit().remove();\r\n\r\n }\r\n\r\n /* Add X Axis into SVG */\r\n var info = tempdata[0].values.map(function (d) { return d.date })\r\n if ((this.state.hisactivedur == 1 && this.props.isLoading === false) || (this.state.hisactivedur == 1 && this.state.isLoading === false)) {\r\n var rDate = new Date(info[0]);\r\n var rday = rDate.getDay();\r\n var dayv = rday == 0 ? d3.timeSunday : rday == 1 ? d3.timeMonday : rday == 2 ? d3.timeTuesday : rday == 3 ? d3.timeWednesday : rday == 4 ? d3.timeThursday : rday == 5 ? d3.timeFriday : rday == 6 ? d3.timeSaturday : d3.timeDay;\r\n // if (this.state.selectedState != '') {\r\n svg.append('g')\r\n .attr('class', 'x-axis')\r\n .attr('transform', `translate(0, ${height - margin + 20})`)\r\n //.call(d3.axisBottom(xScale).tickFormat(d3.timeFormat(\"%d-%b-%Y\")).tickPadding(1).ticks(d3.timeWeek));\r\n //Day wise\r\n .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat(\"%d-%b-%Y\")).ticks(d3.timeDay.every(1)));\r\n // } else {\r\n // svg.append('g')\r\n // .attr('class', 'x-axis')\r\n // .attr('transform', `translate(0, ${height - margin + 20})`)\r\n // .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat(\"%d-%b-%Y\")).tickPadding(1).ticks(d3.timeWeek));\r\n // }\r\n // svg.append('g')\r\n // .attr('class', 'x-axis')\r\n // .attr('transform', `translate(0, ${height - margin + 20})`)\r\n //.call(d3.axisBottom(xScale).tickFormat(d3.timeFormat(\"%d-%b-%Y\")).tickPadding(1).ticks(d3.timeWeek));\r\n //Day wise\r\n // .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat(\"%d-%b-%Y\")).ticks(d3.timeDay.every(1)));\r\n }\r\n else if (this.state.hisactivedur == 6) {\r\n svg.append('g')\r\n .attr('class', 'x-axis')\r\n .attr('transform', `translate(0, ${height - margin + 20})`)\r\n .call(d3.axisBottom(xScale).ticks(d3.timeMonth.utc, 1).tickFormat(d3.timeFormat(\"%b-%y\")));\r\n }\r\n else {\r\n svg.append('g')\r\n .attr('class', 'x-axis')\r\n .attr('transform', `translate(0, ${height - margin + 20})`)\r\n .call(d3.axisBottom(xScale).ticks(d3.timeMonth).tickFormat(d3.timeFormat(\"%b-%y\")));\r\n }\r\n\r\n var yAxis = d3.axisLeft(yScale).tickValues(arrMax).tickFormat(function (d) {\r\n let split_d = d.toString().split('.');\r\n let d1 = split_d[1] ? split_d[1].length > 1 ? d : d + '0' : d + '.00';\r\n return currency + d1.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n });\r\n\r\n svg.append(\"g\")\r\n .attr(\"class\", \"y-axis\")\r\n .call(yAxis)\r\n .append('text')\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .attr(\"x\", - \"70\")\r\n .attr(\"y\", - \"55\")\r\n .attr(\"fill\", \"#6c757d\")\r\n .attr(\"font-weight\", \"500\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .text(\"Average Price\");\r\n\r\n //add horizantal line\r\n svg.selectAll(\".y-axis\")\r\n .selectAll(\".tick line\")\r\n .call(yAxis)\r\n .attr(\"x2\", width - margin);\r\n\r\n\r\n let linesm = svg.append('g')\r\n .attr('class', 'x_lines');\r\n\r\n linesm.append('path')\r\n .attr('class', 'x_line')\r\n .attr('d', 'M0.5,6V0.5H' + (width - margin) + '.5V6')\r\n .attr(\"transform\", `translate(0, ${height - margin + 20} )`)\r\n .style('stroke', '#cbd1d5');\r\n\r\n // To identify the Line belongs to which company and Date\r\n\r\n let legend = d3.select(\".av-market-legend\").append('div')\r\n .attr('class', 'legend av-wid-legend')\r\n .style('margin-top', '10px');\r\n\r\n //For Date\r\n legend.append('div')\r\n .attr('class', 'col-md-12 legend_date')\r\n .style('padding-left', '0')\r\n .style('padding-bottom', '2px')\r\n .style('font-size', '15px')\r\n .style('display', 'inline-block')\r\n .html('Date : - - -');\r\n\r\n //For Store Details\r\n //var div_width =( width / 3) - 50 ;\r\n let keys = legend.selectAll('.key')\r\n .data(tempdata).enter()\r\n .append('div')\r\n .attr('class', 'key col-md-3')//(d, i) => d.name === \"This Market\" ? 'key col-md-3' : 'key col-md-4')\r\n .style('display', 'inline-block')\r\n .style('align-items', 'center');\r\n\r\n keys.append('div')\r\n .attr('class', 'symbol')\r\n .style('display', 'inline-block')\r\n .style('height', '10px')\r\n .style('width', '10px')\r\n .style('margin-right', '5px')\r\n .style('background-color', (d, i) => color(i));\r\n\r\n keys.append('div')\r\n .attr('class', 'name')\r\n .style('display', 'inline-block')\r\n .style('font-size', '11px')\r\n .style('font-weight', '500')\r\n .text(d => `${d.name + ' '} `);\r\n\r\n keys.append('div')\r\n .attr('class', 'his_price')\r\n .style('display', 'inline-block')\r\n .style('margin-left', '10px')\r\n .style('color', (d, i) => color(i))\r\n .text('[---]');\r\n\r\n keys.exit().remove();\r\n // this.props.showLoading({isLoading: false, widgetId: this.state.widgetId});\r\n\r\n } else {\r\n //dispatch the action once the data recived from reducer to hide loader \r\n\r\n if (this.state.dataStatus && (MaxPrice === 0 || Hisdata.length > 0)) {\r\n // this.props.showLoading({isLoading: false, widgetId: this.state.widgetId});\r\n //No data Div\r\n d3.select('.mainhisGraphdivs').append('div')\r\n .style('height', (height) + 'px')\r\n .append('p')\r\n .attr('class', 'loading-text no-data')\r\n .style('padding', '70px')\r\n .style('text-align', 'center')\r\n .text('No data Found');\r\n\r\n }\r\n else {\r\n d3.select('.mainhisGraphdivs').append('div')\r\n .style('height', (height) + 'px')\r\n .append('p')\r\n .attr('class', 'loading-text')\r\n .style('text-align', 'center')\r\n .style('padding', '20px')\r\n .text(' Please wait for the data to be loaded. The data volume is high and this might take a minute for loading the data.');\r\n }\r\n\r\n }\r\n this.setState({ isLoading: false });\r\n\r\n }\r\n\r\n //load initial graph \r\n initialLoad() {\r\n this.setState({ isLoading: true });\r\n // let token = localStorage.getItem('accessKey');\r\n // if (token) {\r\n // axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n // }\r\n let inputData = {\r\n \"RegionID\": CONFIG.RegionId,\r\n \"State\": this.state.selectedState != '' ? this.state.selectedState : '',\r\n \"City\": \"\"\r\n }\r\n axios.post(CONFIG.API_URL + 'home/weeklypricedata', inputData)\r\n .then(response => {\r\n let data = response.data;\r\n let datas = response.data.filter(data => data.UnitType === this.state.isDefaultUnit);\r\n this.GetcurrentpricinganalysisHistory(data);\r\n this.HistoryGraphView(datas);\r\n this.setState({ isLoading: false });\r\n })\r\n .catch(err => {\r\n this.setState({ isLoading: false });\r\n });\r\n }\r\n //load citybased graph\r\n cityBasedData(e) {\r\n this.setState({ isLoading: true });\r\n let citySelected = e.currentTarget.value;\r\n // let token = localStorage.getItem('accessKey');\r\n // if (token) {\r\n // axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n // }\r\n let inputData = {\r\n \"RegionID\": CONFIG.RegionId,\r\n \"State\": this.state.selectedState,\r\n \"City\": citySelected\r\n }\r\n axios.post(CONFIG.API_URL + 'Home/weeklypricedata', inputData)\r\n .then(response => {\r\n let data = response.data;\r\n let datas = response.data.filter(data => data.UnitType === this.state.isDefaultUnit);\r\n this.GetcurrentpricinganalysisHistory(data);\r\n this.setState({ isLoading: false });\r\n })\r\n .catch(err => {\r\n this.setState({ isLoading: false });\r\n });\r\n }\r\n NumberFormat(number) {\r\n return new Intl.NumberFormat().format(number);\r\n }\r\n\r\n //city selection based on state values\r\n citySelection(e) {\r\n this.setState({ isLoading: true });\r\n let selCity = e.currentTarget.value;\r\n let citySelected = selCity.split(\",\");\r\n // let token = localStorage.getItem('accessKey');\r\n let selectedState = citySelected[0];\r\n let selectedCou = citySelected[1];\r\n let selectedCountry = selCity != '' ? selectedCou.replace(/\\s+/g, '') : '';\r\n let data = selCity != '' ? citySelected[0].replace(/\\\"/g, \"\") : '';\r\n if (selectedCountry != '') {\r\n this.setState({ selectedCountry, isDefaultUnit: \"All Units\" }, () => {\r\n this.DurationsdropDown();\r\n });\r\n\r\n } else {\r\n this.setState({ selectedCountry: '', isDefaultUnit: \"All Units\" }, () => {\r\n this.DurationsdropDown();\r\n });\r\n }\r\n // if (token) {\r\n // axios.defaults.headers.common[\"Authorization\"] = 'Bearer ' + token;\r\n // }\r\n if (selCity != '') {\r\n axios.get(CONFIG.API_URL + 'home/citydatabystate/' + data + '/' + CONFIG.RegionId)\r\n .then(response => {\r\n console.log(response.data, \"res data\");\r\n let cityLookup = response.data.cityData;\r\n this.setState({ cityLookup, isLoading: false, selectedState }, () => {\r\n this.initialLoad();\r\n });\r\n })\r\n .catch(err => {\r\n this.setState({ isLoading: false });\r\n });\r\n } else {\r\n this.setState({ cityLookup: [], selectedState, isLoading: false }, () => {\r\n this.initialLoad();\r\n });\r\n }\r\n }\r\n\r\n //load state data values\r\n loadStateValues() {\r\n this.setState({ isLoading: true });\r\n axios.get(CONFIG.API_URL + 'Home/lookupdata/' + CONFIG.RegionId +'/'+ 0)\r\n .then(response => {\r\n var statedata = response.data.lookups.statesList;\r\n let stateLookup = statedata.filter(a => a.isterritory != 1);\r\n \r\n this.setState({ stateLookup, isLoading: false });\r\n })\r\n .catch(err => {\r\n this.setState({ isLoading: false });\r\n });\r\n }\r\n //Duration For DropDown\r\n DurationsdropDown() {\r\n let countryCode = this.state.selectedCountry != '' ? this.state.selectedCountry : CONFIG.Country_Code;\r\n this.setState({ isLoading: true });\r\n console.log(countryCode, \"countryCode\");\r\n console.log(this.state.selectedCountry, \"selcountryCode\");\r\n axios.get(CONFIG.API_URL + 'home/lookupdefaultunitsizes/' + countryCode + '/' + CONFIG.RegionId)\r\n .then(response => {\r\n this.setState({\r\n unitTypes: response.data.units,\r\n isLoading: false\r\n });\r\n })\r\n .catch(err => {\r\n this.setState({ isLoading: false });\r\n if (err.response.status === 401) {\r\n localStorage.removeItem('accessKey');\r\n const { from } = this.props.location.state || { from: { pathname: \"/page_expired\" } };\r\n this.props.history.push(from);\r\n }\r\n else if (err.response.status === 400) {\r\n if (err.response.data.Message === \"Authentication failed\") {\r\n const { from } = this.props.location.state || { from: { pathname: \"/UnauthorizedAccess\" } };\r\n this.props.history.push(from);\r\n }\r\n }\r\n else {\r\n alert(err.response.data);\r\n }\r\n });\r\n }\r\n\r\n\r\n //History Graph\r\n GetcurrentpricinganalysisHistory(graphData) {\r\n if (graphData) {\r\n let MarketName = [...new Set(graphData.map(data => data.MarketName))];\r\n let CurrentHistory = graphData.filter(data => data.UnitType === this.state.isDefaultUnit);\r\n this.setState({ AllCurrentHistory: graphData, MarketName, isLoading: false }, () => { this.HistoryGraphView(CurrentHistory) });\r\n }\r\n }\r\n\r\n render() {\r\n document.title = 'StorTrack: Self-storage market pricing data';\r\n var { isLoading1, showLoader, storeName, coverage, unitDurations, unitTypes, hisactivedur, overviewdetails, isDefaultUnit, isLoading, stateLookup, cityLookup, marketoverview } = this.state\r\n //For Widget desc text duration change\r\n let CurTxtDur = hisactivedur === 1 ? 'past 3 months' : hisactivedur === 2 ? 'past 6 months' : hisactivedur === 3 ? 'past 9 months' : hisactivedur === 4 ? 'past 1 Year' : hisactivedur === 5 ? 'past 2 Years' : hisactivedur === 6 ? 'past 3 Years' : '';\r\n\r\n const data = this.state.AllCurrentHistory;\r\n //Removing the existing svg when there is no data\r\n\r\n return (\r\n
\r\n {isLoading1 ?
: ''}\r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n
Daily Rate Tracker
\r\n
See how rates in your city have changed over the last 7 days. StorTrack provides detailed market rate insights to help owners and operators react to changes faster.
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n {isLoading ?
: ''}\r\n {/* {this.state.isLoading1 ?
: ''} */}\r\n
\r\n \r\n
\r\n
\r\n
Select a State and City to view average rates over the last 7 days
This graph shows the average rate for the unit type selected. Move the slider to view the average rates for a specific day. National averages are displayed for comparison.
\r\n
\r\n \r\n
\r\n
\r\n
OPTIMIZE offers detailed market and competitor rate information for any market.
Activity Reports are designed to let you easily and quickly check your competitive market each morning and identify changes that may require some action on your part.
\r\n
You can change your settings or frequency any time.
\r\n
If you have suggestions, questions or comments, let us know..
This is your daily Optimize Market Activity Report based on a {basicInfo.zoneCoverage != null ? basicInfo.zoneCoverage : 'N/A'} of: {basicInfo.storeName != null ? basicInfo.storeName : 'N/A'} at {basicInfo.address != null ? basicInfo.address : 'N/A'}
\r\n
Today's Rate Activity
\r\n
These are the changes in your market's average rate between yesterday and today.
If you have any questions please do not hesitate to contact us. To modify the settings of this Activity Report, simply log-in to your Optimize account, go the Market Dashboard and select Manage Activity Reports in the left navigation bar.
If you have any questions please do not hesitate to contact us. To modify the settings of this Activity Report, simply log-in to your Optimize account, go the Market Dashboard and select Manage Activity Reports in the left navigation bar.
\r\n
\r\n : ''}\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ActivityReportPdf;","import React, { Component } from 'react';\r\nimport { Link } from \"react-router-dom\";\r\nimport './Footer.css';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport stlogo from './../../Assets/Images/st-logo.png';\r\nimport { CONFIG } from '../../utils/config';\r\nclass Footer extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n terms: false,\r\n privacy: false\r\n };\r\n }\r\n // Terms and Conditions Dialog\r\n handleTermsOpen = () => {\r\n this.setState({\r\n terms: true,\r\n });\r\n };\r\n\r\n handleTermsClose = () => {\r\n this.setState({ terms: false });\r\n };\r\n\r\n handlePrivacyOpen = () => {\r\n this.setState({\r\n privacy: true,\r\n });\r\n };\r\n\r\n handlePrivacyClose = () => {\r\n this.setState({ privacy: false });\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n \r\n {CONFIG.RegionId == 2 ?\r\n \r\n
\r\n
StorTrack
\r\n
StorTrack is a part of Aggregate Intelligence, Inc. - the world’s foremost data intelligence company.
\r\n );\r\n }\r\n}\r\n\r\nexport default DefaultLayout;","import React from \"react\";\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from \"reactstrap\";\r\nimport { CONFIG } from \"./../utils/config\";\r\nimport Alert_Icon from \"./favicon_new.ico\";\r\n\r\nexport class IdleTimeOutModal extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n count: 60,\r\n };\r\n this.showNotification = this.showNotification.bind(this);\r\n }\r\n\r\n showNotification() {\r\n if (this.props.showModal == true) {\r\n var notification;\r\n var options = {\r\n body: \"You will be logged out of the system due to inactivity. Do you want to stay logged in?\",\r\n icon: CONFIG.OPTZ_URL + \"logo_st.png?auto=compress&cs=tinysrgb&dpr=1&w=500\",\r\n dir: \"ltr\",\r\n };\r\n notification = new Notification(\"Inactivity Warning\", options);\r\n }\r\n }\r\n closeNotification() {\r\n var notification;\r\n notification.close();\r\n }\r\n\r\n componentDidMount() {\r\n document.getElementById(\"favicon\").href = Alert_Icon;\r\n this.myInterval = setInterval(() => {\r\n const { count } = this.state;\r\n if (count > 0) {\r\n this.setState(({ count }) => ({ count: count - 1 }));\r\n }\r\n if(count == 60){\r\n this.showNotification();\r\n }\r\n if (count === 0) {\r\n clearInterval(this.myInterval);\r\n this.props.handleLogout();\r\n }\r\n }, 1000);\r\n }\r\n componentWillUnmount() {\r\n clearInterval(this.myInterval);\r\n }\r\n render() {\r\n const { showModal, handleClose, handleLogout, isFrom } = this.props;\r\n return (\r\n
\r\n \r\n \r\n {isFrom == 1 ? \"Logout Warning\" : \"Inactivity Warning\"}{\" \"}\r\n \r\n \r\n {isFrom == 1\r\n ? \"You will be logged out of the system in \" +\r\n this.state.count +\r\n \" Seconds. Do you want to stay logged in?\"\r\n : \"You will be logged out of the system due to inactivity in \" +\r\n this.state.count +\r\n \" Seconds. Do you want to stay logged in?\"}\r\n \r\n \r\n \r\n Log Out\r\n \r\n \r\n Stay on Page\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nMarketLayout.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n // Injected by the documentation to work in an iframe.\r\n // You won't need it on your project.\r\n container: PropTypes.object,\r\n theme: PropTypes.object.isRequired,\r\n};\r\nexport default withStyles(styles, { withTheme: true })(MarketLayout);","import React, { Component } from 'react';\r\nimport { Header, Footer } from './../../Core/index';\r\nclass LoginLayout extends Component {\r\n render() {\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n\r\nApp.propTypes = {\r\n match: PropTypes.any.isRequired,\r\n history: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport function register(config) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport '../src/Assets/Css/icons.css';\r\nimport '../src/Assets/Css/shortcodes.css';\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n/* polyfills.js */\r\n\r\nimport 'react-app-polyfill/ie11';\r\nimport 'core-js/features/array/find';\r\nimport 'core-js/features/array/includes';\r\nimport 'core-js/features/number/is-nan';\r\nimport 'react-app-polyfill/ie9';\r\nimport 'react-app-polyfill/stable';\r\n\r\n/* index.js */\r\n\r\n// import './polyfills'\r\n\r\nReactDOM.render(, document.getElementById('root'));\r\n\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://bit.ly/CRA-PWA\r\nserviceWorker.unregister();\r\n","module.exports = __webpack_public_path__ + \"static/media/red.565934db.png\";","module.exports = __webpack_public_path__ + \"static/media/table-plus.3e581981.png\";","module.exports = __webpack_public_path__ + \"static/media/table-minus.277062d9.png\";","module.exports = __webpack_public_path__ + \"static/media/plus.571e0435.png\";","module.exports = __webpack_public_path__ + \"static/media/trash.e315b04c.png\";","module.exports = __webpack_public_path__ + \"static/media/green.03c2e591.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAACXBIWXMAAC4jAAAuIwF4pT92AAAW+2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OSwgMjAyMi8wNi8xMy0xNzo0NjoxNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6aWxsdXN0cmF0b3I9Imh0dHA6Ly9ucy5hZG9iZS5jb20vaWxsdXN0cmF0b3IvMS4wLyIgeG1sbnM6eG1wVFBnPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvdC9wZy8iIHhtbG5zOnN0RGltPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvRGltZW5zaW9ucyMiIHhtbG5zOnhtcEc9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9nLyIgeG1sbnM6cGRmPSJodHRwOi8vbnMuYWRvYmUuY29tL3BkZi8xLjMvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMTEtMTVUMTY6MjI6MDMrMDU6MzAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTExLTE1VDE2OjIyOjAzKzA1OjMwIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wMy0yNlQxMjoyODoyNiswMTowMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBJbGx1c3RyYXRvciBDUzYgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NGIzYmMxYTEtNzUxOS0wYzQ4LWJhMTctODc2YmYzZWUwOTU5IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZjQyODRhY2EtZjAyOC1mOTQzLWE1MzgtZjg5NDQyMGIzZTQzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InV1aWQ6NUQyMDg5MjQ5M0JGREIxMTkxNEE4NTkwRDMxNTA4QzgiIHhtcE1NOlJlbmRpdGlvbkNsYXNzPSJwcm9vZjpwZGYiIGlsbHVzdHJhdG9yOlN0YXJ0dXBQcm9maWxlPSJQcmludCIgaWxsdXN0cmF0b3I6VHlwZT0iRG9jdW1lbnQiIGlsbHVzdHJhdG9yOkNyZWF0b3JTdWJUb29sPSJBSVJvYmluIiB4bXBUUGc6SGFzVmlzaWJsZU92ZXJwcmludD0iRmFsc2UiIHhtcFRQZzpIYXNWaXNpYmxlVHJhbnNwYXJlbmN5PSJGYWxzZSIgeG1wVFBnOk5QYWdlcz0iMSIgcGRmOlByb2R1Y2VyPSJBZG9iZSBQREYgbGlicmFyeSAxMC4wMSIgcGhvdG9zaG9wOkxlZ2FjeUlQVENEaWdlc3Q9IkFBQzYyMjkzRDhCRkRFNDIwMEQ2Qjg5OTgwRDQ5RjQ0IiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB0aWZmOkltYWdlV2lkdGg9IjYwMDAiIHRpZmY6SW1hZ2VMZW5ndGg9IjYwMDAiIHRpZmY6UGhvdG9tZXRyaWNJbnRlcnByZXRhdGlvbj0iMiIgdGlmZjpPcmllbnRhdGlvbj0iMSIgdGlmZjpTYW1wbGVzUGVyUGl4ZWw9IjMiIHRpZmY6WFJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6WVJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6RXhpZlZlcnNpb249IjAyMzEiIGV4aWY6Q29sb3JTcGFjZT0iMSIgZXhpZjpQaXhlbFhEaW1lbnNpb249IjYwMDAiIGV4aWY6UGl4ZWxZRGltZW5zaW9uPSI2MDAwIj4gPGRjOnRpdGxlPiA8cmRmOkFsdD4gPHJkZjpsaSB4bWw6bGFuZz0ieC1kZWZhdWx0Ij5hbGVydCBpY29uIG9uIHdoaXRlIGJhY2tncm91bmQ8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8ZGM6ZGVzY3JpcHRpb24+IDxyZGY6QWx0PiA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPmFsZXJ0IGljb24gb24gd2hpdGUgYmFja2dyb3VuZDwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6ZGVzY3JpcHRpb24+IDxkYzpzdWJqZWN0PiA8cmRmOkJhZz4gPHJkZjpsaT5pY29uPC9yZGY6bGk+IDxyZGY6bGk+ZXJyb3I8L3JkZjpsaT4gPHJkZjpsaT53YXJuaW5nPC9yZGY6bGk+IDxyZGY6bGk+YWxlcnQ8L3JkZjpsaT4gPHJkZjpsaT50cmlhbmdsZTwvcmRmOmxpPiA8cmRmOmxpPmNhdXRpb248L3JkZjpsaT4gPHJkZjpsaT5leGNsYW1hdGlvbjwvcmRmOmxpPiA8cmRmOmxpPm1hcms8L3JkZjpsaT4gPHJkZjpsaT5zeW1ib2w8L3JkZjpsaT4gPHJkZjpsaT5zaWduczwvcmRmOmxpPiA8cmRmOmxpPnZlY3RvcjwvcmRmOmxpPiA8cmRmOmxpPnJlZDwvcmRmOmxpPiA8cmRmOmxpPmF0dGVudGlvbjwvcmRmOmxpPiA8cmRmOmxpPmhhemFyZDwvcmRmOmxpPiA8cmRmOmxpPmRhbmdlcjwvcmRmOmxpPiA8cmRmOmxpPmRlc2lnbjwvcmRmOmxpPiA8cmRmOmxpPmJ1dHRvbnM8L3JkZjpsaT4gPHJkZjpsaT5wb2ludDwvcmRmOmxpPiA8cmRmOmxpPndoaXRlPC9yZGY6bGk+IDwvcmRmOkJhZz4gPC9kYzpzdWJqZWN0PiA8ZGM6Y3JlYXRvcj4gPHJkZjpTZXE+IDxyZGY6bGk+VmVjdG9yU3RvY2suY29tLzMwMzY1OTgyPC9yZGY6bGk+IDwvcmRmOlNlcT4gPC9kYzpjcmVhdG9yPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNzY1NDgzZi00OTRmLTI5NDctODQ4Ni1lZDEwNTI3N2E5NTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUFEQUM4QzQ5RjIxNjgxMTgwODNCOTM3MTBFMkMwMTgiIHN0UmVmOm9yaWdpbmFsRG9jdW1lbnRJRD0idXVpZDo1RDIwODkyNDkzQkZEQjExOTE0QTg1OTBEMzE1MDhDOCIgc3RSZWY6cmVuZGl0aW9uQ2xhc3M9InByb29mOnBkZiIvPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmUwYzU5My0wM2M2LTRmYTQtODkxMC1kMTkyOTc4Y2MwMWYiIHN0RXZ0OndoZW49IjIwMjAtMDItMTJUMTg6MjY6NTMrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIElsbHVzdHJhdG9yIENDIDIwMTUuMyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NUFEQUM4QzQ5RjIxNjgxMTgwODNCOTM3MTBFMkMwMTgiIHN0RXZ0OndoZW49IjIwMjAtMDMtMjZUMTI6Mjg6MjMrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIElsbHVzdHJhdG9yIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3BkZiB0byBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL2pwZWciLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmRlMDA3ZmI2LTVmMTctNGMyNS05NDdiLTE5MTMwYmFlMDQxMSIgc3RFdnQ6d2hlbj0iMjAyMC0wMy0yN1QwOTo1MjowNyswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3NjU0ODNmLTQ5NGYtMjk0Ny04NDg2LWVkMTA1Mjc3YTk1NCIgc3RFdnQ6d2hlbj0iMjAyMi0xMS0xNVQxNjoxMjo0NiswNTozMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjUgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjb252ZXJ0ZWQiIHN0RXZ0OnBhcmFtZXRlcnM9ImZyb20gaW1hZ2UvanBlZyB0byBpbWFnZS9wbmciLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImRlcml2ZWQiIHN0RXZ0OnBhcmFtZXRlcnM9ImNvbnZlcnRlZCBmcm9tIGltYWdlL2pwZWcgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NDUxNmUyOS00MTcxLTUyNDItYTc0OS05ZTFkNDU5YTEyNGUiIHN0RXZ0OndoZW49IjIwMjItMTEtMTVUMTY6MTI6NDYrMDU6MzAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMy41IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NGIzYmMxYTEtNzUxOS0wYzQ4LWJhMTctODc2YmYzZWUwOTU5IiBzdEV2dDp3aGVuPSIyMDIyLTExLTE1VDE2OjIyOjAzKzA1OjMwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBUUGc6TWF4UGFnZVNpemUgc3REaW06dz0iMjk5Ljk5OTk0OCIgc3REaW06aD0iMjk5Ljk5OTk0OCIgc3REaW06dW5pdD0iTWlsbGltZXRlcnMiLz4gPHhtcFRQZzpQbGF0ZU5hbWVzPiA8cmRmOlNlcT4gPHJkZjpsaT5DeWFuPC9yZGY6bGk+IDxyZGY6bGk+TWFnZW50YTwvcmRmOmxpPiA8cmRmOmxpPlllbGxvdzwvcmRmOmxpPiA8cmRmOmxpPkJsYWNrPC9yZGY6bGk+IDwvcmRmOlNlcT4gPC94bXBUUGc6UGxhdGVOYW1lcz4gPHhtcFRQZzpTd2F0Y2hHcm91cHM+IDxyZGY6U2VxPiA8cmRmOmxpPiA8cmRmOkRlc2NyaXB0aW9uIHhtcEc6Z3JvdXBOYW1lPSJEZWZhdWx0IFN3YXRjaCBHcm91cCIgeG1wRzpncm91cFR5cGU9IjAiPiA8eG1wRzpDb2xvcmFudHM+IDxyZGY6U2VxPiA8cmRmOmxpIHhtcEc6c3dhdGNoTmFtZT0iUj0yNDIgRz0wIEI9MCIgeG1wRzp0eXBlPSJQUk9DRVNTIiB4bXBHOnRpbnQ9IjEwMC4wMDAwMDAiIHhtcEc6bW9kZT0iUkdCIiB4bXBHOnJlZD0iMjQyIiB4bXBHOmdyZWVuPSIwIiB4bXBHOmJsdWU9IjAiLz4gPHJkZjpsaSB4bXBHOnN3YXRjaE5hbWU9IlI9MjU1IEc9MjU1IEI9MjU1IiB4bXBHOnR5cGU9IlBST0NFU1MiIHhtcEc6dGludD0iMTAwLjAwMDAwMCIgeG1wRzptb2RlPSJSR0IiIHhtcEc6cmVkPSIyNTUiIHhtcEc6Z3JlZW49IjI1NSIgeG1wRzpibHVlPSIyNTUiLz4gPHJkZjpsaSB4bXBHOnN3YXRjaE5hbWU9IlI9NDYgRz00NSBCPTQ0IiB4bXBHOnR5cGU9IlBST0NFU1MiIHhtcEc6dGludD0iMTAwLjAwMDAwMCIgeG1wRzptb2RlPSJSR0IiIHhtcEc6cmVkPSI0NSIgeG1wRzpncmVlbj0iNDUiIHhtcEc6Ymx1ZT0iNDMiLz4gPC9yZGY6U2VxPiA8L3htcEc6Q29sb3JhbnRzPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6bGk+IDwvcmRmOlNlcT4gPC94bXBUUGc6U3dhdGNoR3JvdXBzPiA8dGlmZjpCaXRzUGVyU2FtcGxlPiA8cmRmOlNlcT4gPHJkZjpsaT44PC9yZGY6bGk+IDxyZGY6bGk+ODwvcmRmOmxpPiA8cmRmOmxpPjg8L3JkZjpsaT4gPC9yZGY6U2VxPiA8L3RpZmY6Qml0c1BlclNhbXBsZT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7X2OhtAAACf0lEQVQokVWTS2tTYRCGn/nOSXOSc9r04q0oXuoFoRcvxQuuvCy8IFhFiujCpSDiD9A/4A/wd7hwa1cKuhNUtELbtI3YpElsck5j25zkfONCG8zAs5jhnRkG3pHowQO6QgRttyCOL8ibmRcKhotXnpFOv8VNgWqX3HVb3QV6UtjCkqPfvz7Vg4fmjeNaPrx7IqNj7+Xg0TZx3CU3GEMHEfA8iJvPtH+wJfX6HqrlvRrkttiMn+Nl/uocp4PR5hYdkjZaKo5rtTpJX9+CrVTO2HLlDNls3pbLp/Rn4bRubaCNqIOsX7329y7jILl+9NPHl2ptmo2N/WLMMiJWW60RCYJFtTaRsfHHGoZgLYjgOnuGwXXR9XXanz9NSTvZZ1Kpgi2Xz5vLlx8hJklmZmYlNzCvNh62s9/uOKMTryQIoN3GkM1Aby+47m7C2pTxg2+2tjapcdxnwyjQKPS1Ffu69mvS6Q1mJVqfEjc1LH05xPcxNGOIYyiVrplMFm02+ymVLghAVN+lUbRTAF0tnbWbmzvEDxJdLd6guQXNJobGb1hcHEsW5m/iZfJa/HlFAQXEdX0xxt/OdWXlElkvb5cWr9uF+QmNQlxtRGktFu+S6lnid+MwYXhMthvKlYeIJAACaBQd0TA6arx0nmp1Wl1nzthy6WyyVj0uvcEaPwr3OoYEyPhftcf7Lv8btVC4TzaoJ2FtROu/zhmt1adlcKih1cotTZKeLldnsyEZL+oaqtbR1eJtyQ1saC2almho6DW53Irm8ycFqkAKsECixhwQAGuXAQcwQKywWw6NfKTR2OXieXO6tHxC4AMisr0IULG28u/Bwq666hyF5XEGB778AXD1SeBhjkFzAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/black-pin.f5774af9.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MEJBMjRCRDBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MEJBMjRCQzBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzE2NjlGQkUwOTIwNjgxMTgyMkFGQjAyQzQ5MjNENUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7iXe8nAAAA0UlEQVR42mL8//8/AyMjIwM6aGxq5QJS24H4cn1ddQ66PFgfNs1AjQFAag4QC0OFTgJxMNCQp8iambDYKASk1iJpBAFzID6KrhZDMxCE4BCXBxrMRkizOQNuYERIsy4ezTaENKvi0WyPUzPQT1ZASgCPZkd8Nq9kwA+4gRZMg3FYoDaCDDkCxDIMhEEmUP1jIN0Os7kCiC0ZiAdtcJuB4AIQH8SiiAeIfwLxb2wmMOJJ2+VAqgPKFQQmzQ/oaZsFj9NmA7EXEF9D14hiM7kAIMAAI1Q/OeMAZJcAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MDk0RTNGRTBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MDk0RTNGRDBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzE2NjlGQkUwOTIwNjgxMTgyMkFGQjAyQzQ5MjNENUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7S8rBrAAABqElEQVR42nyTSyiEURTHjVdmNrJBYWGnRISyQB4rFjQLm1koo7w2FrKwIEUoKVIWXhuSslMiQlOIZCM0NiQpQkiRt9/R/ytJvvp1zr33nHPP/d/7uUL++FJyB72YQyiABSgNbjWN/o4LV3AY5oOAT82vwgjEQBnU/rWJS8lZmHrYhXWK7DPnwd+DXMbXjFPx8yERlpkLhKpIENZUwE2gj8VHFbLECvxI8MEpbHy3zUKEqsXCDjTDFUz/6LDIisItJEAyeXe2cxNks8MAdlFdeNW2o0c5XJoOxHVgo2DYOXOn2tlUe0lQBW/wJC0O4BWeoQWqXSSOSfUcOIMLtWpKF6ub8x9HMPVXrIizcx6mDmpo64VxNP4EmL0HP/P3is3AtDo7F0nFRmiDOFUvk3j9sARz1hlFushJw283wR4VZPcYUPKsjhAiOw/xcERioY7REEqlbV2DdTAOM3AC70o20Y5hEvogEzx2/84j8egdW4sXLAzBA366nm039lrr+c6zdgSL05W4ZS2xF0p0hX7N24Oye4+g4I3rn7/KfhJTdgoqCe75HfclwAB0SZlg1dIRGQAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNjA2ODAyQjFBMDAxMUUzQjA2RUQwRTZBNTA3MzNBQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNjA2ODAyQTFBMDAxMUUzQjA2RUQwRTZBNTA3MzNBQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkU5RkUwRDgyRDIwNjgxMTgwODM4NUVFOUNFQjI5NEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mg7xkAAAAxklEQVR42mI8tHX2fwbygSMLiKy8KMlw+QMHSTrb9Z8z6Ar8YAAbYKomziD1V4AkA4Q43wNJqAHSwtwMnCz8JBnA+RWo9S8DxIANx+8BvfCMJANk9L8wCAlADcj20WP4xiVOkgGyj3cxMHx7ATFg6pZLZATiB2AgQl0QYKnEYMciQpIB0l8/A8MAGohP335lePqXlSQD9Dj/MDAwQ13w7O0XhrvfSUtB32WABnAyINKBMoleEPr6BOiFL9SJRkcK8sIFgAADACvJPrid6Hz6AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MEJBMjRCOTBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MEJBMjRCODBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzE2NjlGQkUwOTIwNjgxMTgyMkFGQjAyQzQ5MjNENUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5/ycdJAAABXklEQVR42mL8//8/AyMjIwMy+BipxQOkWBhQwX/+5dc+IgswImsGahIGUoeAWIsBO3gJxG5AQy4xYDE9k8XEmY0zo/U20EQmVHv///+1dcHXn+tnVAJ5kTAxZOde/vvs3vn/uMCvH0+Aar4AMSdIPROSRg1GDi4tJgkFTQZcgJVdmllZ5wuQ5QV3NlAjF5DqYODk+fZr+6LrDPjA//+yQLIWqOcEzM81DEzM/swyKk9+LO02ZUDyCjpgVjN4zsjBrf3/x9e5MGdrsfunXuSqnC3D5hiC02YmWdV33A1LJTnzes8DuRpwP/+9e4mf4fevF38fXhfA6eIPb7j///z++O/Ns+zweP4Upb0ByPZnIA08ZGKgAMACbAUQKwCxPhAfBOIDONRrAHE4NKVNgCcSYNDPBeL/QFyHyyagXABUzUmURAIEJ4D4HxCfxOPSy0AMSiTHsCVPNkL+RFYDEGAAAAegUd7r3qEAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAYAAADUFP50AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MERFRjMwODBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MERFRjMwNzBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzE2NjlGQkUwOTIwNjgxMTgyMkFGQjAyQzQ5MjNENUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YWyLMAAAA8ElEQVR42mL8//8/AzmAEZnTOcc1sjxl93I0MW4gNR9JqAyo5gETkgJHILUMSFujGc4KxKFIWAAkyATVBLK5HaqwgxinwmwMAGJzKNsGaJA3QY1ARcxAuhVNvBUozkTIxkAg1kQT1wdiD3wamV39lPWA9FMgtkASnwjED4BySkA6G4hNkOT4gOJyTMCgXQHkTEAzcAJQfDOQfgXEGWhyUUD8Ga8/gJrPAak9aMJ3gXgRExEhX4HGrwUa+JugRqCis0BqDZR7AYhXIscjIVADxH+BuBpo0D9kjV+BeDUS/opm600gFQSkt8ETObm5AyDAAHhNRiXReuldAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MDk0RTQwMjBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MDk0RTQwMTBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzE2NjlGQkUwOTIwNjgxMTgyMkFGQjAyQzQ5MjNENUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7BNunYAAABfklEQVR42mJgQAfr3hcCMRMDEQCbojAgPgg1yA2I9YjTvO69EJA0cRZlseHd9KECyN4DxPuA4iXE2LwPiFkaNTkYfCVZyxiCBP8B+deAuBtowCoMzRoWE5mhtkYBSX1VHiYGa2EWBgtBZkGgmDxQDGQAg4c4ayjfpg+70W1mgbLrQcSLH/8Zum//ZFj0+BeIKwLEhiAGH1BVrQaHC9DAeXDNN07k/4Syv4OIz3/+M5Rd+c5w5v3fv0CuJkgfSJyViZGhSIWdwUKIJQFogBfM2fJQzaFA/AHK/gPEJWC/QoGZIDMDUD/DPCNORiA9FyTGiCWepYEB9RRIO0NDGwzuuPExKHNDwtf64BeGY+/+aIJsZkfRDNIIAWXIwo+/g8ON4T8Qv/8NIhkCWaBOxAa0UMw88RUUfQzXP/8FY1BYMOJMe+vePwaSMnhSZya+NHwUjxzID4vwac4A4m845NqBYfMNt+YgQVC0KQHxESD+AsSg9PAEiJOBcjUgJQABBgC8YHHeHgeARwAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MERFRjMwQzBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MERFRjMwQjBFMkYxMUUzQTJDMEU1QTA2RjhGQzE3RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzE2NjlGQkUwOTIwNjgxMTgyMkFGQjAyQzQ5MjNENUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6hZY0vAAAA5UlEQVR42mJgIAKwZljKYxNnIkIjC5C6jM0AJiIs7gNiXiBegS7BSMBWkOHfgJgdKqT+e8bxW8Ta3IqkEQQW4nQ20CYLIF6MJBSMZpgK1DVYbZ4E0wBUpAdSjCYvgmwgE5Kt4kDKBIg5gexUIJ2Hwyt+2GyejBSAIHYcjgCNABruhq7ZDokNCiRWHDaD4t0WrhlokiuQEmcgHugA9QgxAwkeIGcliZqlgFiLBco4AcQcQKwM9ecNIH4OxM+AWBWILYD4JTS1zQMmlDfYUtRcIH6CJpYHxP+AeApG8vz//z8DuQAgwAAMpyz2vUgOkgAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAYAAAACCvahAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4MTI1RDA4OEJBMjI2ODExODc5NkU2OEE3NTZFMUM5OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RUMzRkM3MzE5RjExMUUzQjgwNEREMkRBMUMwNDdCNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RUMzRkM3MjE5RjExMUUzQjgwNEREMkRBMUMwNDdCNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkU5RkUwRDgyRDIwNjgxMTgwODM4NUVFOUNFQjI5NEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODEyNUQwODhCQTIyNjgxMTg3OTZFNjhBNzU2RTFDOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7DmkMWAAABRElEQVR42mL8//8/AyMjI0NaWhoDOhB4dpgPSJ0C4gcfpGw9kOVmzpzJwMSAH7QBsToQ/8cmyYJLF9BWKyCVBcQ/gTgPSZwDSDED8VcWJEFWILUUiI2BuAqI64GYEYgbgU6+jaTxLBALA7EEss1JQBwKZa+A0leBuBtJTTUQa0ENQPGzHBbXywBxDNRWXSBVAcR/gTgN3c9/sGjmB+L5QI1RQFoMqr4L6I1z6Jrt8YS6K5R+A8TNMEFkZ4szEAYiQLwd6BIZdM3vGYgDNkCcCddc5qMJijdRBuLBIWSbNYFYhQhNd0EhDQywnciarwHxDAIaF4LiGKhxNkqAdW25/g9I/YaK/UDScAaUB0D+BGpKAOJfGGkb6GcLIJUDTccgtjsoAJFtwZcxZkPTcQtQw0UgfZGYUIP5+T/UiZ0khDgDQIABAFNNUbLHWCaIAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/down-arrow.33056c0a.png\";","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/edit.6c09cc20.png\";","module.exports = __webpack_public_path__ + \"static/media/StorageUnit.1e37408f.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOBJREFUOI290z0KwkAQBeA3i5dIGq9g6jSCrWBiUnoEg60/hUmhB9Ar2KmoYCuk8SBpzCHUHauFNW4kBPRVO+zs42uWUEh/NPHEk7cQolG8AwBI+WAS4X69PAHAxxJJtJhosV8tY9P7IJrEADsAzAUqh8vVWLA5nt/mhonMzInfcb8ItIIiWS1UFhTJaqGyQB3Ug78IiGgeDsczJhHWEjBzAiIA7NQSNG2rDQDZLU9rCbJbnqr59wJVOPC6RoHQBTrb77ixrtDnpm21laJU8C26gIJo2iOWu9LvWxIJ3MEIXlU9oJBY/3M2AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAPVJREFUOI2d0j8vBEEcxvFPZIWChoYorjvxEjbhHVx5Ep3Eu1DchRM1hUbjBdALL0GlpNEIJ6K/xJ9Yxc7KWrt3e/ckk5l5ZuY7T34z0EcyYetHOMEhNo2nCxzDVqDlNY0WloYAErSnKhYP0MDZqBhVgCSkGKkqQAd32A7zfeyNA/jCNd7Qw3fw/0HKADGuMC+txWchwR9IERCjiyPc4D1AMpVCsmeMcYm54K+UpMuDErQjNIN5HqK2hhzMdB/6JryY/Cs/Vd2wJq38hvSLf2C5RrJfneI2jCM8Sp+zlhYwwE7O28UrZuoA1vGA2Zy3iGesFjf/AB36SPYGrrfEAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAARpJREFUOI290k0rxFEYBfCfSXnbyetKioXs2RF7FJPIVin5CLKQ+AaspKwUZiVbCxKfQCIWNiQr5aWYsfg/o4kZw8app27nOefe+9x7KI4UxnAcNRpcWdRiDpd4xy4ysb7ALGqKGZuxhAc8YRUdBf1OrEXvHotoyjcH8YIcNtDwww0bsRnaZ/TBRBDXeMM2eoqYe7ET41yFJ134MB2YQjtOcYjhqEOcoA2TMdIn8jcoxAD2g89iD/1fNDmkK0vMehCVibHGS+jK/m02qiR+FY5/26DuD75PbQq3klDcYBktPxhbsRLaJ9zlGw1YCOIF6+iSBGcL3ZKUvsaB86gvdkI1ZnAuef3HqCzOMI2q38xYgREcSVI4FNw3fADVL0TNWmOQuAAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAShJREFUOI2N0U0rhAEUBeDH+JZiJ5KNFFZKZqlEomQjSdnb2chKYjGp2Yh/YOEj/0BKkigrP0GKjaUFCjMW76WZaeI9det07rndr1oJ1lGPe+kwjnlcwxy+QmxA9o/CbDSaRAGzcIX9MOyUTNGCbeTRGtpTaHCIC3jDQojPWA6+hWJELrQVPAZfwksmDDUhFlAb/Ktk9B9eE34lNS5xEDyPh+BN2MAmmquscIxzcYgCplCHoTB0YBAD6AxtODzTUTPzM8UaRpVjGy8R+YrcGFbL9qhAJla5i04j6FF+l19jNUygG2c4RZfk96lxJLn2AHqDn6QtbsNrFH1GFPGO9kpztRUWJG/LSV7ZJHllIxbTTHBT0b10itv/ivvwgb0qud3I9aeZIjW+AZXPRgAZoFCUAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABLUlEQVR4nO2SwYoUQRBEX1bXTINTsKDHPShs+xlePHnxO/0mYVB38aorONM91VWZ4WFQdlhPIngxIC5JkLwMEv7L9m/eaiiFNI74POOHw9nfD7TDTPdGVWcNZ5XT5IB+LUhyZ3//leHZU/bf7tleX/PheGR88ZxP68J4c8NtbzyZJu56o0wTn7tTppcA5Hx1xVBPKIRqxU8LsSy0pdJDNDotgibHpUcnJLVG1Iq8Q+hsCZPzMC50gf5T2TYbUozYkCHZ2WbIBuxhWRhcTP4SQYpawYxcCqkUhrIjlR15tyMPmS2ZTUpsLZNteESR5Y7C/5jC3r96rbQdsZSQd+JU8WUmjjPttLKqs0Zn1fkPXH5J8O72I1/CwQwk1AP1TvRGhHCCUNARofhNC/9aPwA8S91S08aWzwAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAT1JREFUOI3FkTFrFFEUhb9zZzZhOyFdZHX2TWVjGZBNI8I2Qmxs/Aep8jvSamllJVguVoOQbvwJA0kzC4si2InBB7u8myK7MGwIzBaSU757zse598FDSwBlWb5092N3L3cKSz8UQngFfAP+dGYDYB/47O7pnvwTSUd5Sum9pI9t255uJqPR6DDLskvgmZldbwXjarV6NxgMpiml57mZZUDTdSwWi59FUbyV9MLdt2uf5Xl+sn6POVADE+BD1zifzyug2u4dQgju/kZS5e7RgNrdJ/fseUfuPpM0BR4B0dy9lvS4KIqnfQDD4bBKKeXAayBa27ZXKaXfknq1aJrmr6QLbteOBiDpe1/A2j8DrAvYHLKXlsvlV8BZ/wKSanc/H4/Hn/pCgH9mFjOAEMKvGOMBsLcDoDGzLzv4/5NuABz6ce+5IibmAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMdJREFUOI2l0z1uwkAUBODPwUcITYSo0qdJY1HQ5AgpLHFBCk5BlUg5QkpQInwEYpuCvwXtGqNMsTt6bzTa0XubOeML3+J4xmuid8K8o7dINR5uud7Cvw3ygI9QJnRPKYMs4FMMMUGNweH+wAbLlMEbHoNagcY+XoPPjgRVdhBlHaIuNNDiPSFYuBzvS8BLtPdOob4u5DHVFQrxJRsfyT0RZgEv0fZ5wdh5P+qAF/SL0OAvUe9lsBL/TPnx+LHftBh+sU30Kqx3DiAl2zBCoesAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAASlJREFUOI3Vj71KA1EQRr/vJrHRPICFWihiRKvFXAvhrqBVdstURkkV9B2iPoY/YLo8wa5tyIUg7rYWgq2oEGwFqztWC6sE3HR6ypk5Bwb491D74Z2Dm1dCO43ohD4pL2WIPBFqQLrH++Ftv4hc320cUfhMwYICgNRGXSeqtu03DorIEK6kw+gUAFS2KBKpm+CQTi2nw/gsm6n8QWqjroPamBTRJmyBXE1sdJ6ffwusN5szFCyKcD8f0SZsAbJHYMnzOpWJAc/rVObGnz1ALhIbt52o2pYJjrUJTwRYS2zchsh1ufp2k4+oTC5VX3uEXCY2HmXvEPIOyji1URcAEhuPfkaoTdgXiqPgKpN/Q5tgB2QHghK1HwxEOEu4hyJyhkBtkvIxjfNH+QLw/H6/I3hSiwAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAK1JREFUOI3F0z8OAUEcxfHPijiCCygkOoVS5Spu4AQKhVsoKZ2AAyAShYRCTadAJP4VttoY1iq8ajLz3jfvN5mJcMBSNlVgkjEM89wPYZAP7LdQwx0nz5Y9HJPGUIM6IgzjcBOjV/5QA1igH68H2KKKaZoGSe1xQSF5kAZQRBc7zL4BtHHFGiU0cE6a3t1BG50YEtS7BrdP4U+AVAqNMMYmLeS/fyHyfN+rjPnyA3u3INICilpxAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAG6SURBVDhPjZI9jwFRFIavj4QxUykkRHxkxdL4C3aQiE7YVdBgUStFicpiacSPsNGQrEYn0RlsodAhJBJRaXdfc2dQ7e5TvDnvvffcc86dId8yuVwuEom8iMRiMRpQwuFwsVikxy4Ju93O7/eTv0gmk+fzmRwOh3g8bjQaXS7XowgN3G73vQUmk6lQKJDVajWZTARBWCwWMxEEVzufz2X7NZsJOElwPcMwOp2O4zgoy7Icx95bIFtGr9cTDCr1+A80Gg3BIyBSKBR06RdwBqUIXhDG4/HQvqfTKfpG9/cWjMdjg8GgVqulCqFQaLvdor1oNIqVZxlYkE6nT6eTw/GgVCqlBK/Xi6VPkcFgMBwOodT2+/3RaITXN5vNl85pQiAQWC6XuIxeTItAARZTqdRms7Hb7SqVSkrgef54PHa73V6v9yGCgFooqmHXYrFcKtChfT4fvmA2m81kXkXNQK9BPp9fr9dWq/U2AxL2+31DpNVqUW02m43GO7TT6WAGm812S3h64vEL1mq1N5F6vV6tVqGIEbTbbexiaJwkiURCq9UGg0E8a7lcLpVK0EqlgoAqLDJR3+l0siz7A6f+JHaZg/yIAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAPhJREFUOI2l0s8qhFEYx/HPjDf/UorYKBeglFyAvZ0VN6AsGMrSVShFysJaYUpRVnZCuQlLKxubodfmvONpnBlT86tTz/v7fc95n6dzGFBDPbIxHGAFL/jKQfUumzdwiUc8pXq9n46W0cR2R3cFdnGNpdzGWZzgEFPBr6VVaRpHOMZMZe7hAgvpeyv8/RY3qR7GZqoXcYUdab6oc4ym+hXPqZ7AWQfbLNDKzZS0j7JH3ip6hPDwT17Ga5zMACN+x4lqs/GA0wy4irWMX7FlHOE9A37iO+O32XhAIwPeZ7zIlt2ect+q4Q4fwZvHm7/XV8dcyiqND9qAH7o5J7aYpNL6AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdJREFUOI210jGOQVEUxvFf0IlSRiPRTohVSGYRSrU92IDWDswuRDHFVAqNWAIbUBCe4inkvst7j/iSW5z75fzvl3MPWQ2xRi3iZVSJ3DXQL9L8CFBKMUD1HXgd/0gwfgUwuTUnOKOd1xDGbAXeVx6gyFdVgofO0oTRBDHNcLo705Cep8OzughgLo0NR/yWBazwgyUG2NybhfYdC3zjLzQ+ssqlVA3qHprYYycd4AUjdNHBVjpMcAUumB2koB7e8gAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKJJREFUOI290D8LQWEYhvFfMSsfRwablJRBfBVZnIHZJ7FZbVIGFpMvwKAM/hSLY3nVsZ3zDu566n2G636uXv6UMiY4oBdTMEOKYazBBU/Uw15FUqTgHAyuaGOLeV64gUco+M4bzbzwPXN9gyU6MXAtr3I03McKuxi46/eTUtyKaC+wRiuAKY55YRijEt51vHAqUpBNEgymMfAAe4xQijUolA+wgTGgH3yXpQAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKlJREFUOI2t0sEKAWEUxfEfTXkAkeIFZCM75UUsvIqFl0HZeQdR9jZWslDyBJgsmNIYZhhndTv33P/9vroFyWphiAAhLhhh8yb/MjxH5cmrPrxmFsA0NhyphnHcLCYEAxwT/ANKWQDnD68LswC+UuGp3mGBMk5v8lGvh0a8Ofli8Swqcn8hDTBAPw+gg/anQJACWLmf8c+ALa55AOuU/n8PaY9lxrku6nADU20YLatCuXYAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/logo.b83f7927.jpg\";","module.exports = __webpack_public_path__ + \"static/media/st-logo.0a17fe93.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACdAAAAnQGPcuduAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuYThkNDc1MywgMjAyMy8wMy8yMy0wODo1NjozNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjYgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNC0wNC0wM1QxNTo0NToyOSswNTozMCIgeG1wOk1vZGlmeURhdGU9IjIwMjQtMDQtMDNUMTU6NDU6NTMrMDU6MzAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDQtMDNUMTU6NDU6NTMrMDU6MzAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEwZGZhZmZhLWIyNDktNzk0Yy1iNTZhLTk3OTJhZWY3Yzg5ZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmZkZDM5ODA1LTBiODItOWI0Yi1hZTExLWM1Nzc0YzAwZTUyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAwNjIzYTNkLTQ2ZjAtMTA0MC1hNTViLTAxMzA3ZDg0ZDNjMiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDA2MjNhM2QtNDZmMC0xMDQwLWE1NWItMDEzMDdkODRkM2MyIiBzdEV2dDp3aGVuPSIyMDI0LTA0LTAzVDE1OjQ1OjI5KzA1OjMwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjQuNiAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwZGZhZmZhLWIyNDktNzk0Yy1iNTZhLTk3OTJhZWY3Yzg5ZiIgc3RFdnQ6d2hlbj0iMjAyNC0wNC0wM1QxNTo0NTo1MyswNTozMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI0LjYgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmyt9BUAAAEXSURBVEiJ7dUxS8NgEMbxX4rgVlAsTmJndXMTBTctOLqqX0Bw011c3ERQZwcHwcVBWnEU/QB+AUEHN5UODgrG4Y1QJbZJaBfpAyFceO7+5O69JIrjWC9V6mn1PiCLBlqD5tpClpwNTGELz2mG8vFlOiCDIuxiEDNYxGO7hLwtirGZ3Cdwg8luAmAfK/jAGK4x100AnKCGJoZwheU0Y9oMxjGSAfKKdexhGKdJfNQOUMOFMMy8KuEQ92i0Puypfr9BHVVUMuZXcYBRfAotarQa0mbwkFydNC30u4J3rApz+KG8i/ateZyjjDfhBNXTjEUASzgTtvkliW//MhcBbCfFn4RPxV07c5FTtCMs2myn4hD1f5n/H/AFefIxEH1IkBMAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACdAAAAnQGPcuduAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuYThkNDc1MywgMjAyMy8wMy8yMy0wODo1NjozNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjYgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNC0wNC0wM1QxNTo0NToyOSswNTozMCIgeG1wOk1vZGlmeURhdGU9IjIwMjQtMDQtMDNUMTU6NDk6MzgrMDU6MzAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDQtMDNUMTU6NDk6MzgrMDU6MzAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjczZTYyNDk0LWE5YTUtN2E0NS05OTUxLWEwN2Q0NjQxNmZjYSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmI1MGRhMDdhLTBiYTItYWM0Yy05ODA1LTkyNmVjODQ1MGNmZSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjFjZTNhZmUxLTE4NTktN2M0Ni1hZDk4LTdiNjNhYTZmZjBjOSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MWNlM2FmZTEtMTg1OS03YzQ2LWFkOTgtN2I2M2FhNmZmMGM5IiBzdEV2dDp3aGVuPSIyMDI0LTA0LTAzVDE1OjQ1OjI5KzA1OjMwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjQuNiAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjczZTYyNDk0LWE5YTUtN2E0NS05OTUxLWEwN2Q0NjQxNmZjYSIgc3RFdnQ6d2hlbj0iMjAyNC0wNC0wM1QxNTo0OTozOCswNTozMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI0LjYgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuQIwAkAAADlSURBVEiJ7ZU9CsJAEIVfPIIoVv5gqWBjJwiCjYKVCBZeQfQqNmJh63nsvICFhUXAQlALPwsXTBGSTdiAoAPbvZkP3pthPUBZVi7T6X9AVoClpK2kvJUaSPI84Ma7DkA5ricpQMACeBrIEWi6BgiYAQ8D8YGua4CAPnAxkBswCdN5IZdclVSwDLwhaWUCf0qaS9pEhTwM+Ju2BsGZmd9BmEUVSUXL/pqktaSSLC1K8trA2dhyB6Yut6gX2KCryc7Zmo74XLMPdKL0aQB7M/wEtOL0aQBjYAfUbfRhW+S0vvI/+DHAC+ZRDKRtl8kEAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACmAAAApgHdff84AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAOpQTFRF/////Wlx7Fts/l1nZ06SXUqUQUebQkibRkydR02dR02eSE6fSU+fTFGgTFKgTFKhT1WiUFajUVajUlikU1ijU1ikU1mkVFikVFmlVlumV0qUV1ymWF6nWV6nWl+nWmCoXWKpXmOpX2SpX2WqYWarYmasZGmsZGmtZWqtZmuuaG2uaW2vam6va2+wa3CwbXKxbnOycnazcna0c3e0dnq1d3y2eHy3eX63e3+4fIC4fYG5f4O6jGSZkmeZnHKf09Dg1brM1per1qS32IKX2mh/20pi8oyW9fDw99XX+Lq++aqv+5CW/XB4/0tV2uI3+gAAAAZ0Uk5TAPT7+/3+wPO8cAAAAJxJREFUGBm9wdkagUAABtA/kexky07GzmRJsu9K9P6v48pnLsxt58APwfJXKCD+CFBoZC2vo7NMvX95MhDXFmRFjNawUzq7DMQqRmPTsOq0nb69GVD0rJW31HlV6x1tBhLdMdUpHRDSvHsMyAVT3RY3uUkzeXIYUEbhpWRK01SNXF8MHHZf+8eLAYcDHgdsDrw54HLgyQFB/EuADz6nCVWp7jbl3AAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/oval1.6bbc844c.png\";","module.exports = __webpack_public_path__ + \"static/media/addnew.da2ff88a.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8pJREFUOE+NVUtoXFUY/u69cx+ZVyajqdQxjVbM2BoQLBHEWIxNKphuXNSFIChIRdvoogst2RRmYSUUQ4wgXUhBF4LG0moLrtxoSw1dNKWK0Enz1KZpZjJ3Ms/78jtnJqGLifS73Dvn3nPO93//4/yjBAQeAK7vIqSGmm/boyWhXSsiV8lhvbaOQrWA7PptzNydQWb/ScTMWHNVa0jCW7ksZrlpzp5HoVLA7cI8lovLuFO6I4mlTUXB+cNTeObhPc2traEsFRaD1398A7pioFCz4QUuTM2ErunSRU3VoPCquhWcHT5LwjTHdbG1wbAJJYCh61ArbhULhUU532El0BnulG5ZIUsSCjKhUIhkGBH4QLXu8XbgOEDdCeS4XKkj8HyoBAwq0hQNPi8R/E04nkM1VZBOzleCEgpOHirV6JqBsrcGh99C9EYhjxDFZwM+TevSxRBqbg0lp4RUPIVXugfg+yKGwInpUQxdOoTp1WvI1dbw/IX9OP7HJ6i4JRpkBXCZJBTR2HA20P/Yixg/MIbV8j2q0DA+eBqvPfkqHJ++cdXos6M4N3gOfZ19SEUewcWhn5B5LoOYHocnPLtfoalZuLx0Gb2dvfjm0Nc43vchE+Qh8/unJGckaf3M32dw7MoxXM9dx0LxX3xw5SjGb34Ou24z3ppUKCuVvyQ0YFPlU1/twcJIFsv2Mo7+8hFLZwUJs10qGO4aRiqWwu7YbiTNJEb2jiAVTiGsh+EyIQJbCgVEQnZGd8rxjsgODD5+QLorkiLQeP4/tmIoEpG0krj6zm/47ub3ePvCu3h/33t4q/dNOSfycmnxIib+nMBscRYrlRVM/jWJqfkplJ0ykyJYmi4L1LwahlKDmP7nGj7+9QQiRhRjV0/j6Y40QsxgwPVH0keQTvYgFoojalj48oVJJIwOxI04Kk6Vyli32Xw2ePnbg9gV75KnwmcF10kuxqKYLca2TrdFOKKJGGzPxql9p9CTSKP/534MPDqAsb7PYKphRCyeKkE4QMLu9m6ZVXEqBJmAqE3xrtAd13PxxcEJ9CSfgOrzIKgGS+0es2syoVF5COJhk3PMjnBXkKm87m9RqqJKcnH8xHwbImjXO2hIIUEdYe0h9oAIjTFxPrNMj9Q23cKu9i5JkK/mcbe8iiLblzhyws1NhSLmqs4wUbxlaLx1sBewIShyHG4zOEfj3BDcyjfb1/oc+5+NObavpQ22r41G+xJxFaTnD//AbrNXGt8OLRusULhWZYOtNhqsMDazegOZl04iakabq1rjgf8CPN/bStb2AP4DJCLLdmW3KuoAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACmAAAApgHdff84AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQVQTFRF////QUebQUebRkyeT1OhurPPyJ+25Z2r4p6u8o+YQUebQkibQ0mcREqcRUqdRUudRkydR0yeSE6fSU+fSlCgTFGgTVOhUlejU1ikVVulWF2mWF6nWmCoW2CoX2SqYWaraG2ua3CwbWyrb3OyeX23f3uygIS6iIy/i4/AjI/AlZXCmpvGm57InaDJno64oKLKoZW+op3Fo6bMr7HSso+yv8HawLPNzJ61z7HF07TH1tfl2J6w2MHQ26Gy36y63+Dq4eLr4rK/5eXt6Jyo6Onv6qey67nB7Z2n8KCo9qqw95+l96+0+JOa+KGn+KOp+Kiu+pWa+4qR+5OZ+5Sa/ICH/WZv/l5nX4groAAAAAp0Uk5TAMng4eL09vj7/YtltGkAAADQSURBVBgZvcFpOwJRGIDhd6YsPWGMkSFDyZJ93/e1wkEv1f//Kc65kOXS1+5buqGvJ+2nMpmUn+7t9795UrqpzIWq4XztqsgPQrD7vK968LIV8CGLI8aY+luz+Vo3xuBM741gScNptRoOTm5xGEvieOXxXPX0aTOO+TS4No7kDx/WI9Vo+f4kD0MDWNHOBHJ3lhCqhiRHVdjeAHJYwi9TCbA6CggdCFYwWQj4Q7AKF5cztEU4grVwfVvmS/F4DEtwyku0ZWdxhA7E8//lSRe8A3sPIUBaDkRgAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACmAAAApgHdff84AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAANtQTFRF////QUebQUebRkyeT1OhurPPyJ+25Z2r4p6u8o+YQUebQ0mcRUudRkudR0yeSE2eSU+fTU+dUlejWF2mWmCoXVefYlyiZlyhaG2ubWyreX23emahf3uyhm+kh2ugh2uhlZXCl3OjmpvGno64oZW+op3Fqn2ksn2hso+yun6ewLPNw3uYyYKczHmTzJ61z7HF07TH2J6w2MHQ26Gy36y64rK/6Jyo6qey67nB7Z2n8KCo9qqw95+l96+0+JOa+KGn+KOp+Kiu+pWa+4qR+5OZ+5Sa/ICH/WZv/l5nb/nxTQAAAAp0Uk5TAMng4eL09vj7/YtltGkAAAC1SURBVCiRY2CgA2BnZWFi5uRkZmJh42BCAEYGSTMLKT5nZz4ZK1MJLiTAwMWj4aDl7KznqMrDhSJhZ2fn5Oru7uIEZKBIuIGAhweYAosICkIkhISUbE2cnY3sVYSEwCKamhAJYX0bZQFnZwEFa0NhsIicHJcgN1DC3FiEC+QqLhEDSy4uflGgFK+2GshVKEBdlxdIKspjSEjLIvyBA2BKiIvjkNDRwSEhJkbADkYmrICRHlEOAELbG9c9axp/AAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/oval2.78d6607a.png\";","module.exports = __webpack_public_path__ + \"static/media/oval3.0b9b09a4.png\";","module.exports = __webpack_public_path__ + \"static/media/sample-activity-report-us.bd858d10.pdf\";","module.exports = __webpack_public_path__ + \"static/media/no-image.3b631ae5.jpg\";","module.exports = __webpack_public_path__ + \"static/media/csv-download.e2c62f90.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDBCNkM3QkMyMDU3MTFFMzgwQjFFOEEyNjZFOEE1OUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDBCNkM3QkQyMDU3MTFFMzgwQjFFOEEyNjZFOEE1OUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MEI2QzdCQTIwNTcxMUUzODBCMUU4QTI2NkU4QTU5RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MEI2QzdCQjIwNTcxMUUzODBCMUU4QTI2NkU4QTU5RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Prja0uAAAAFySURBVHjapJMhTMNQEIb/komH2xLEBIIJBLihQCIQCw4kioDD4lYLihkCKBIUkCBwG24TJGwJhJIgKrsEEipIWkGyE0uOe6+DdU1bBE3atHd/v//6v1eLmfGfo5As2E8O+wSoZGcY1Y6Wq1YmYL/ncuPVzbYTSDggPl9dsVIBrTdPXBSKUqUMQPP9Y6I0FX8IiKD++GAaUjpgt9PlUADIch8durd+1+YJwOmLy82+jK9U/gQmSIUH34fdcwzE0stYum4Zd6XHEwgKGRjdFx2N+ry9YZkQbfIi57VNoNsEHtsCmk7MPgAWlqBqW6BuG6HvjVdhryDunUugLBjnFug/SycBGApAjDBbBO6vQJXqGED6qokXjSim5MtGKbVPXzQHwFcAmq+aqaN9oISqSuZlknsdpg4snrzZmXqVKIy0Rq+DkBD1GRzXeVArcnBW559a2mk0hzu/mvFGmluMUi5X8v8erZmJaeL04OYk1z1N8y3AAKF52/mUKYShAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYElEQVQ4jdWQPUhCcRTFz/uwkkyhsmgzKIIn9Ie2KIJycoggDPpYCnIIGlvb3Jqaw6HpSbUVOIQtQRESGPFeIQVCg9EHSTxRnv/7/k1KWNBrqwN3OefyO9wL/HtJlVR4H4D2w54NYMU7b+SaA5WIYm6abjwjS7HMmQ9A/iASeKr7MhHBzZx7JjfGOp1TzUcPs8dvy78GEHFEex2s9TstQcVOTqefFwFA5ZzcXADOCZtXNlQJqBBkEmI3eli0VCK3AI5SlX+2VADbDUCNgMydHwAQGXiHR/kKqFklONcnkPxByEOjABBSVqfaJ2okvKlcQH3tmVNLrWGYt/fVwa7Ki82FZXNhlWuKdaTMWI/pvbaF4T6Z5y9QLHNLdHSbjQbGWFLXdaHrumCMJb87gzF2mc1mRSKREIyxdQCQ6qGmaSEhxA4ASJIUN02z0AzQNG1cCLEFoCDLctwwDMvVA/+2PgAiZc60wdRgMQAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/opt-logo.9b9bdde4.png\";","module.exports = __webpack_public_path__ + \"static/media/stortrack-logo.20e00f52.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGaGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTgtMDUtMDRUMTI6MDQ6NDQtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE4LTA1LTA3VDEyOjU1OjE2LTA0OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTA1LTA3VDEyOjU1OjE2LTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk4MTY2NGU1LTcwZTUtNDlmOC05OTg4LTBlZDFkNWUxZWM2MSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjlmZjhlMDYyLWZlMTMtY2M0Yy1iOWRlLWZlMTg5MzE2NzhjNyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmUzZTZjOWRmLWYwMWMtNGEyYy1iN2MxLTdmYjEyMDA3ZDM4MiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZTNlNmM5ZGYtZjAxYy00YTJjLWI3YzEtN2ZiMTIwMDdkMzgyIiBzdEV2dDp3aGVuPSIyMDE4LTA1LTA0VDEyOjA0OjQ0LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5ODE2NjRlNS03MGU1LTQ5ZjgtOTk4OC0wZWQxZDVlMWVjNjEiIHN0RXZ0OndoZW49IjIwMTgtMDUtMDdUMTI6NTU6MTYtMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhgRMzoAAAScSURBVHic7ZvLThtXGMd/sWwpRuJiQloREsulUaK0USBdNIssMAtvvBqeAPsNmiegPEH7BjhPwKy88QJYZJFFFVJR0aQqcZ0Q58LFjiVjySy6mGN7xp6bx+OZCea3AWbOOXzf/9zPfOcKHiHnC4tAAlhUPV4QP1+qnu0CRSmd2vXALK4Mq2DhsAQsAUmHxWwDO4A8LEFcFUDOFxJABlhFqW03KQJPgZyUThXdKtQVAYTjayjOe0EOWHdDiIEEkPOFKeA3vHO8mxwDChFymlHOF34B3uCf84j//ULY4oi+W4Co9U2cD2zDYhtYkdKpSj+Z+hJAjOybuD/AuUURRYRduxlsdwE5X5CALYLrPCi2bQlbbWGrBcj5QgbYcGSSf2SldCpnlchSAKHmpgsG+cGKlE7JZglMBRB9fguYcs0kb6kAy2ZjgqEAYrR/g03nZ6ZjzFyLUa83ODo5pX521pelQ6QCfGc0O4RNMm5iw/nJiXF+/mmBsehVzfO9/df8WyzZtnKITKH4sqz3UncWEAuLpJ3S9ZwHuH/vDjPTMZs2Dp2k0WKpRwDVut6SmemYrvMtbt28Yc88b1gT3VqDXgtYw6VBz0wcH5hC2bdo0Aig2s66QrN57lZRbpERPrbpbgG2mn6Laq1m6uSHj5/7Kc4rND62BXBS+83mOXv7r3XflT9+pnT4vn/zho+mFainwYyT0kqH76nWatyam2VyYpxm85wPwXW+RQb4FbQCrDotrfqlRvVLbTCTvGUVIUAINCe2o0JC+NweAyTfTPEPCTpdYMlJCWPRKPGbs4bv6/WGZixo7ReMODo+5ejkFFCW2LPfXu8pr/zpk1vT6xJ0BEg6KWEsepW7t+cN3x+dnGoFuBYzTQ8H1M8aPHzwg+Ey+n7zDgf/lfj7nwMnJqtJAoRafSEIhMNhko8fme4hIpEwd2/Pk3z8iEjEbC9njZwvLIYI0OAXn7th26nJiXGL1mSLRAjttzpf6bdGv0/EmZwYH+RfLjr+LhAU5hPxgfIHUoBm81ycKjUs085+c90yjRlhOp+oA0HpsMze/qv2VPfwwY/E54yn2kgkzFg06vQIbiFQLaB+1uDFn39p5vm9/VeW+QY5dwihDU7wlbc6G6hWdxgSLwPVAvzgUgCUmJxRZTeE8kV1VCmGvIrGCiJSOrXbGgO2/TTEJ7ahMwju+GeHb+xARwDZPzt8QwYhgBgHiv7Z4jntSFT1OuCpP7b4QttXtQA57+3wjVzrl7YAItgw15v2wqEJte0+glmnjy9E1VqNZ8//MHzfPNee3pbelTk6Nt7YGO3/374rc2yyIbJzbqBiXf1HT4iMnC9s4G/05zDJSelUVv1AbzP0BCWu5qJRoav2QUcAEUzUk/ACoBtUbRYltkXw4oGdsi2lU/aDpAQrXIyuUETxRRdDAURXWObrFqGCRQS56YmQWC5mzdIEnKzVdt/ySEzE2n6NImSt4oShj/sCImh6g+DHDVew6TxcXpi4vDLj+NaYiL11Lap0ACooi5zfnWQe9NpcAm/vC3aTA570W+tqLi9ODmyKipG9OqvHSF6eNiOo1+f/B9NYlqadDveFAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGaGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTgtMDUtMDRUMTI6MDQ6NDItMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE4LTA1LTA3VDEyOjU1OjE0LTA0OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTA1LTA3VDEyOjU1OjE0LTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmE0NTk2ZjExLTFlZTQtNGFjMS1hMTgwLWQxZDQyMGZkMTI0MiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjRlYzZiMWQ5LWJhMGQtYjM0Mi04NmI4LTQ4ZmQ0ZjFiNzY2NCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmUzOTNhYzhhLTc1MTQtNGM2NC04YjQzLWQwYjBhMzc1YWNkZSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZTM5M2FjOGEtNzUxNC00YzY0LThiNDMtZDBiMGEzNzVhY2RlIiBzdEV2dDp3aGVuPSIyMDE4LTA1LTA0VDEyOjA0OjQyLTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDphNDU5NmYxMS0xZWU0LTRhYzEtYTE4MC1kMWQ0MjBmZDEyNDIiIHN0RXZ0OndoZW49IjIwMTgtMDUtMDdUMTI6NTU6MTQtMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk9DWesAAAO3SURBVHic7ZvPThNBHMc/NDSxTRA0GiNEUjxoMEZAEz14AA699LS8QXkC7BMYnkB5AvsG7KmXHigHDx4MxWjUmGhDgl4EFkkKyXLwsNM/2+5ut2VnZ8vyuUB2Z2d+v+/O/HY685sRQkIvleeBDDDfdnlO/N1tu1YFalouWw3BLEZkVSwc1oBFYGnAairANqDLEiRQAfRSOQOsYTmeCbJuoAbowIaWy9aCqjQQAYTjr4F8EPX5oAisByHEhQRQ4HgnRS4oxMAC6KXyKyznJwatIyAMLBHeDvJw3wLopfIEsMnggU0WFWBFy2WNfh7qSwAR2bdQ/9bdMIDlfr4YCb8F9VI5T7SdB8u2LWGrL3z1AFHhu4FMUseqlssWexXqKcCQOt+gpwieAgzBmO+FQY+Y4CqAiPa/GF7nGxjAjNvXwSsIbjL8zoPlw6bbTcceICY5b+TYY2f8+hi3bt4gmRztulevn7G3/zuopgpOk6UuAcT0dgfJb//unds8nn1IOnXNtczfwyPef/gYVJMGsNA5bXYaAtKnt9NTkzx/OufpvAQmsHyzYRNAvP28TCvSqRQLTx7JbMKLvPCxSWcP6FIoaO5n7sluohc2H5sChPH2wQp6irH1gvbQuxZG6+lUyvP+3v4fPn/9jmmeyzRjDSiAfQhoMltsYJqm67366Rk7n77Idh7afE2AbcVWOua5u3P109MwTADICJ+bPUALq+UIoUFLgEV1dihjEVoCLKmzQxlLACNiLOzIauXx7APbp298bMxx3g9gmuccn5zYrh0cHvHtx09Z5i2MIjn4NX7s+CGZHO0qe3B4JMOsBpkE9r26yHH876R3ocGZ970oqor66ZnU+iMvgOQeQILWFnXkkO08MOccjgOkc0Hj5YtnrkEx4AUQXySwJyfEjd3IxwDZXAmAlZMTV6oJrNSTuFJLhJWNFUW0XLbaiAEVlYYoogKtILitzg5lbENLAF2dHcrQQQgg4kBNnS2h08xEbZ8H6EpMUYPe+KddgI3w7VBG09emAGLXtKjAmLAptu8Qd06F18O1RQk2H20CxKAXFP3kB6xjJRNcNgwcenjoKTLTU5Ok086JEQGnxHTiL0WmgV4qb3F5NkwqWi677HTDaz1ghcsxFAwsXxxxFUDk1S0z3CIYWImShlsBzxUhMV0sBGpSuBR6/dyPfbK0rzVBUdEqwzEcDHw6D1cHJvpbFRYVzxDNFaQKVlJ0tZ+Hrg5NXaTlWB+baye2Byc7ie3RWSdieXjai6gen/8P6qg791w8yaoAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGaGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTgtMDUtMDRUMTI6MDQ6NDQtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE4LTA1LTA3VDEyOjU1OjE4LTA0OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTA1LTA3VDEyOjU1OjE4LTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0MzE4NjNkLWVjY2YtNGZiYS1hNTVhLTJmMTljZjA0M2JlZSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjRjZjYyNzMxLTM5YjctZDg0YS05ODczLTA1ZmNiNGEyODQwOSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjE4ZGQwYzAwLWU2ZmItNDk4Mi1hZjhmLTk4Yzg3OTZhOGE5NSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MThkZDBjMDAtZTZmYi00OTgyLWFmOGYtOThjODc5NmE4YTk1IiBzdEV2dDp3aGVuPSIyMDE4LTA1LTA0VDEyOjA0OjQ0LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NDMxODYzZC1lY2NmLTRmYmEtYTU1YS0yZjE5Y2YwNDNiZWUiIHN0RXZ0OndoZW49IjIwMTgtMDUtMDdUMTI6NTU6MTgtMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk+c7loAAAWlSURBVHic7ZvdbhNHFIC/RDsSjkTBJiF1UiyTpKQ0KJAiwUUqYaT6or6peQKSNyhPQHkC+gaYJ4ivfOOLBKm5IFJIQmn5K4nl1nFDfuyQilRaS+2Fx2btrNfe8dhxAt+N7fXOmXPOnJmdnTnTRZuIJ5JXgCBwxXL5svxcsVxbBlLRSHi5DWrR1SrB0uAocAMIKYqZAx4B8VY5RKsD4olkEJgCblNsbZ2kgIdALBoJp3QJ1eIAafhdisa3gxhwT4cjmnJAPJE8DdynfYZXE6NJR3SrFownkj8Caxye8ci6l6QuSriOANnqM6gPbK1iDrgVjYTzbgq5coAc2WfQP8DpIkXRCcuNFmi4C8QTySgwS+caD0XdZqWuDdFQBMQTySnggZJKh8d0NBKO1buprgOkN2c0KHQY3IpGwnGnGxwdIPv8LHBam0rtJQ/cdBoTajpAjvZrHF3jS+SB87WeDk6D4AxH33go2lCzC9s6QE4sQi1R53AI1ZosHegCcl6/xPFofSt5bLqCXQTc5fgZD0Wb7ldfrIgA2fpr7dHn0DhvfXmqjoC77dXlUKiwsRwBndL6Qhj4z56lp+dE+drWdo6tnZzOaspRYFguTjUjscfjQQiD3Xd7yjICgwNcungBIYyK66MjsLWT49nzV2X5/v4+zg0OsL2T400q7baqKeAnqHTAbVXFSwqNjgwxv7Co5ISJ8TECg/6a//f6vIQmr7O1k+PUyZMIYWCaBZZ+/U1F3dtIB3RDxYqtMp/39yGEweS1q5z67KSrsv7+PkfjrfT6vOUIWXiyUo48lwSlzeVBMOpWQjXCKCohhEFo8jqBwYGGy166OOq6PtMsMDE+xuS1qwhDuC6PtLnkgBsqEqwIUanExPjXTIyP1W2dXp+XHs8Jx3vs6zMQhsH8wiLv9/ddl0faXHJASEWCFTslAoN+wje+dYyG3jNepfpMs6A83khCAF2yLyypSikxHAxw6eKFmv+bZoF0Zp0/M9kKpb/6cojRkSHX9S09/Z10Zl1JVwsTBpqWuNKZdUZHhmqGvBAGw8EAw8EApllgd2+P7Z0cZ3xqEaAY9tUEu6ncq1PGNAs8e/6qoXuFMOj1eRkdGaJX2QH/KpWr4orr50ctfvj+O0yzwPv9f5UGNbdoigD1jZFqtnZyCGG0xXid0+JuPmxRN8XfG5s6xDREM9PtKi5ri4B0Zh3TLOgS58i25ghYqXtXAzQxL3ddT1ZftK1oiwCA7MYm848XdY3Q9nW81dvVtDoAwCwUyG68bVl3ePl6Vas8g2JOjlaGgwHdIgFIZ7LaHn+S5W6KO6ra2H23p3v1BihNtF7qFpvqAognkv/plCqEwbVvLivP8uxYeLKic/ADIBoJd5XGgDmdgk2zwPzjRZ49f6VlQHyTSms3HmlzyQGPdEuHouLJuV8afkewI53JNlXegUfwwQHxVtTQ4/EwMT7m+JrsRDqTZelpy+YWcahcFl9D8dW4x+MpvwMIYXDG56XX53W9Nmjl5R+rvND8yLOQikbC56FyVfghihsjgS/8SosadlQvf7eIh6UvVgfEUHTAi9erpP/KMhQ8R2BwQGWVluzGJqupdEseoTbESl+q9wYfoCHvz9/fV7cb7L7bY3fvH7blro/mCY4TsWgkPF36Ud1U99DggOzG5oHHVo/HA+hbyGiCe9YfFe8Ccr8s1opa3+/vd4LxBxKt7V6G7lBMJjhu5KlqfbBxgMygOHDjMcA2qdopS2yW45MnNBeNhG/a/eG0HnCL49EVUhRtsaWmA2RXuMnRdkKeOhnkjitCMsNy2umeDme6XuZ43SUxmWt7FJ0wXS9PGFycF5BJ0w/o/BS6PA0aD58OTHw6MqN8akzm3nZCVmme4iTnZ5XCzR6bC9Le84LVxIA7blvdyqeDk02rYuGjPTprx0d5eNqJTj0+/z+YmRMEhVDPHwAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAMAAACOLiwjAAAARVBMVEU0NDRPT08YGBgqKio1NTUhIiRbW1tHcEw8PDxeXV4tLS07OzsiIyNFRUUuLi4jIyVLTEs7OzsiIiIyMjJjY2NQUFEeHh4+rYaeAAAAFnRSTlPLKP7IxNUeAJBd0KHhLdrZhLnyqYFFq+mB4AAAAGNJREFUGNPFx8kBwjAMBMDVgTGS74Ttv1Q+6YH5DUqFwwyO7KhKNrNGqgOkxn1vkg1+xgh3jHEmcIlI711kTaC+H5/Xn3KVx5rwA/e1tnubAKkmJZVsSCUhJZVqkIyIKy1if3/g5AejHQDb3AAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACmAAAApgHdff84AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAT5QTFRF////yYmjy4iiyoWez4KbQUebTFGgWFym1cnZ2b3Nz8/h0M7gw8TcxcDX2rTE36a16YuZ6omX6MDKQUebQkibQkicSU+fSlCgTFKhWV6naW2vcHSyeHy3io2/kJPDqavPqqrOrK/RrabJrq3OsqjIx8neysLWysPYzc7h0MXY0cTW3t3o3t7p4+Ps5MTP57XA58zV6cDJ6+nu6+vw7urt7u7x8MPJ8MbM8u7w8vL0873D88HG9cXK9d3g9eDi9eLk9sLG9trd9t7f9uTl987R99bY+Lq++Lu++MrN+aWq+aqu+aqv+a6y+bK2+bS4+ba6+pOZ+p2i+p+k+p+l+qWq+qaq+11n+4eN+4qR+5CW+5OZ/HZ+/Hh//HuC/H6F/H+G/Whw/Whx/Wlx/Wpy/Wx0/W11/W52/XB4/XR8/0tV1V+/bAAAABN0Uk5TAIiJjI/g4uPv8fT09fX29/f3/BKYwjEAAADnSURBVCiRY2CgA2Dm4GFnBQE2obAwITYwk51XkJGBP8ndWFZEWFhYwiMz00MCyBCRNUv24mIQV4mId1aVREhIqkXG2CqKMwgLS+sn+5rKiUIkROWsEnx1pIWFgRLCYkoBMU4aUiAJKa3wOHt5MaAggwQIyBim+1mCJBxS3HRlwEIMHnDgnZnpjeAxZOIAuCVwGgWxXNc/1QZkuUVQtAHUcpBz5e1iIzQhztVwSfFUADsX6EFtn0RrhAdNAtP1QB4UV3TMiFJHDhJV1/RgZXEG7pBkc/RANApN42NgEuDFDHYeThZ6RDkAuANSnk/1EPUAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/login-in.3336b823.png\";","module.exports = __webpack_public_path__ + \"static/media/signout.36469781.png\";","module.exports = __webpack_public_path__ + \"static/media/flat-triangle.76f7bdf7.svg\";","module.exports = __webpack_public_path__ + \"static/media/favicon_new.8cfbc382.ico\";","module.exports = __webpack_public_path__ + \"static/media/favicon_old.8c4aea43.ico\";","module.exports = __webpack_public_path__ + \"static/media/show.0656055e.png\";","module.exports = __webpack_public_path__ + \"static/media/unshow.086611c4.png\";"],"sourceRoot":""}
\r\n 
\r\n