\r\n 
\r\n}`})
\r\n
\r\n \r\n });\r\n }\r\n\r\n showAlert(classes, title, message) {\r\n this.setState({\r\n alert:\r\n \r\n
\r\n
- \r\n
- Enter the most important phone number first. It will be called first. \r\n
- When a fall is detected, or the SOS button is pressed, phone numbers will be called one at a time in order from 1 through 4. This call sequence will repeat 3 times until the SOS emergency is cancelled by the pendant wearer. \r\n
- Only phone numbers with Receive Call On will receive a call. Phone numbers with Receive Call Off will be skipped. \r\n
- Phone numbers with Receive SMS On will receive an immediate emergency SMS alert notification. \r\n
- Additionally, phone numbers with Receive SMS On will receive battery low, device offline, no signal, and device configuration change SMS notifications. \r\n
\r\n { message }\r\n
\r\n \r\n });\r\n }\r\n\r\n componentDidMount() {\r\n var device = JSON.parse(localStorage.getItem(\"careXactSOS_Device\"));\r\n\r\n // if device not falsy\r\n if (device) {\r\n if (device.AuthorizedNumbers !== null) {\r\n if (device.AuthorizedNumbers !== undefined) {\r\n var i = 0;\r\n for (i = 0; i < device.AuthorizedNumbers.length; i++) {\r\n var AuthorizedNumber = device.AuthorizedNumbers[i];\r\n\r\n if (AuthorizedNumber.Serial === 0) {\r\n this.setState({\r\n PhoneNumber1: AuthorizedNumber.AuthorizedNumber,\r\n PhoneNumber1ReceiveCalls: AuthorizedNumber.AcceptPhoneCall === \"Y\" ? true : false,\r\n PhoneNumber1ReceiveSMS: AuthorizedNumber.AcceptSMS === \"Y\" ? true : false\r\n });\r\n }\r\n if (AuthorizedNumber.Serial === 1) {\r\n this.setState({\r\n PhoneNumber2: AuthorizedNumber.AuthorizedNumber,\r\n PhoneNumber2ReceiveCalls: AuthorizedNumber.AcceptPhoneCall === \"Y\" ? true : false,\r\n PhoneNumber2ReceiveSMS: AuthorizedNumber.AcceptSMS === \"Y\" ? true : false\r\n });\r\n }\r\n if (AuthorizedNumber.Serial === 2) {\r\n this.setState({\r\n PhoneNumber3: AuthorizedNumber.AuthorizedNumber,\r\n PhoneNumber3ReceiveCalls: AuthorizedNumber.AcceptPhoneCall === \"Y\" ? true : false,\r\n PhoneNumber3ReceiveSMS: AuthorizedNumber.AcceptSMS === \"Y\" ? true : false\r\n });\r\n }\r\n if (AuthorizedNumber.Serial === 3) {\r\n this.setState({\r\n PhoneNumber4: AuthorizedNumber.AuthorizedNumber,\r\n PhoneNumber4ReceiveCalls: AuthorizedNumber.AcceptPhoneCall === \"Y\" ? true : false,\r\n PhoneNumber4ReceiveSMS: AuthorizedNumber.AcceptSMS === \"Y\" ? true : false\r\n });\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n isValidated() {\r\n var result = false;\r\n\r\n // a user must enter at least 1 number and that number must have either receive call or receive sms enabled\r\n if (this.state.PhoneNumber1.trim().length === 0 && this.state.PhoneNumber2.trim().length === 0 && this.state.PhoneNumber3.trim().length === 0 && this.state.PhoneNumber4.trim().length === 0) {\r\n result = false;\r\n }\r\n else {\r\n\r\n // check at least one valid emergency contact\r\n if (this.state.isPhoneNumber1Valid && (this.state.PhoneNumber1ReceiveCalls || this.state.PhoneNumber1ReceiveSMS))\r\n result = true;\r\n\r\n if (result !== true)\r\n if (this.state.isPhoneNumber2Valid && (this.state.PhoneNumber2ReceiveCalls || this.state.PhoneNumber2ReceiveSMS))\r\n result = true;\r\n\r\n if (result !== true)\r\n if (this.state.isPhoneNumber3Valid && (this.state.PhoneNumber3ReceiveCalls || this.state.PhoneNumber3ReceiveSMS))\r\n result = true\r\n\r\n if (result !== true)\r\n if (this.state.isPhoneNumber4Valid && (this.state.PhoneNumber4ReceiveCalls || this.state.PhoneNumber4ReceiveSMS))\r\n result = true;\r\n }\r\n\r\n // don't let user enter invalid phone numbers. Must select 000, 111, leave empty, or add a valid country code\r\n if (!this.state.isPhoneNumber1Valid || !this.state.isPhoneNumber2Valid || !this.state.isPhoneNumber3Valid || !this.state.isPhoneNumber4Valid)\r\n result = false\r\n\r\n if (result === false) {\r\n const { classes } = this.props;\r\n this.showAlert(classes, \"Invalid Phone Number\", \"Valid phone numbers are 000, 111, or any number starting with a valid country code. At least one valid phone number must have either Receive Call enabled or Receive SMS enabled.\")\r\n }\r\n\r\n return result;\r\n }\r\n\r\n handlePhoneNumberOnChange = (index, value, countryData) => {\r\n\r\n // if truthy then append a + so when we POST to db phone numbers have a +\r\n if (value) {\r\n\r\n // strip the country code for 000 and 111 if selected\r\n if (value === '000' || value === '111' || value === (\"+\" + countryData.dialCode + '000') || value === (\"+\" + countryData.dialCode + '111')) {\r\n value = value.startsWith(\"+\" + countryData.dialCode) ? value.replace(\"+\" + countryData.dialCode, '') : value;\r\n }\r\n\r\n // add the + so slots in gem devices are prefixed with +. Don't add to 000 or 111\r\n if (value !== '000' && value !== '111') {\r\n value = value.startsWith('+') ? value : \"+\" + value;\r\n }\r\n\r\n // format +610414999888 as +61414999888. International format country dial code replaces the leading 0\r\n value = value.startsWith('+' + countryData.dialCode + '0') ? value.replace('+' + countryData.dialCode + '0', '+' + countryData.dialCode) : value;\r\n }\r\n\r\n const isPhoneValid = this.isPhoneNumberFormatValid(value, countryData);\r\n\r\n this.setState({\r\n [`PhoneNumber${index}`]: value,\r\n [`isPhoneNumber${index}Valid`]: isPhoneValid\r\n });\r\n };\r\n\r\n isPhoneNumberFormatValid = (inputNumber, country) => {\r\n if (inputNumber === '000' || inputNumber === '111' || inputNumber === '') {\r\n return true; // Allow 000 or 111 without a country code\r\n }\r\n\r\n if (country?.dialCode) {\r\n return startsWith(inputNumber, \"+\" + country.dialCode) || startsWith(\"+\" + country.dialCode, inputNumber);\r\n }\r\n\r\n return false;\r\n };\r\n\r\n render() {\r\n const { classes } = this.props;\r\n \r\n return (\r\n \r\n \r\n 
this.showInfo(classes)} />\r\n \r\n \r\n {this.state.alert}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nEmergencyContactsStep.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style, alertStyles)(EmergencyContactsStep);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\n// @material-ui/icons\r\nimport Close from \"@material-ui/icons/Close\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\n\r\n// core components\r\nimport GridContainer from \"../../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../../components/Grid/GridItem.js\";\r\nimport CustomInput from \"../../../../components/CustomInput/CustomInput.js\";\r\n\r\nimport validationFormStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\r\nimport alertStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nimport info from \"../../../../assets/img/info.png\";\r\nimport Fab from '@material-ui/core/Fab';\r\nconst infoButtonStyle = {\r\n margin: 0,\r\n top: '550',\r\n right: 60,\r\n bottom: 'auto',\r\n left: 'auto',\r\n position: 'fixed'\r\n};\r\n\r\nconst style = {\r\n infoText: {\r\n fontWeight: \"300\",\r\n margin: \"10px 0 30px\",\r\n textAlign: \"center\"\r\n },\r\n inputAdornmentIcon: {\r\n color: \"#555\"\r\n },\r\n inputAdornment: {\r\n position: \"relative\"\r\n },\r\n ...validationFormStyles,\r\n ...alertStyles\r\n};\r\n\r\n// preload trick - load the images used by sweet alert ahead of time.\r\nconst info_image = new Image().src = \"https://carexactsosprod.blob.core.windows.net/help/productCode.jpg\";\r\n\r\nclass ProductCodeStep extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n ProductCode: localStorage.getItem(\"careXactSOS_ProductCode\"),\r\n ProductCodeRequiredState: \"\",\r\n DeviceName: \"\",\r\n alert: null\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (this.state.ProductCode !== null)\r\n if (this.state.ProductCode !== undefined)\r\n if (this.state.ProductCode.length >= 8)\r\n this.setState({ ProductCodeRequiredState: \"success\" })\r\n }\r\n\r\n sendState() {\r\n return this.state;\r\n }\r\n\r\n verifyLength(value, length) {\r\n if (value.length >= length) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n hideAlert = () => {\r\n this.setState({ alert: null });\r\n }\r\n\r\n showInfo(classes) {\r\n this.setState({\r\n alert:\r\n Set emergency contacts for your pendant
\r\n| Phone Number | \r\nReceive Call | \r\nReceive SMS | \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 \r\n | \r\n \r\n | \r\n
\r\n
\r\n
\r\n \r\n });\r\n }\r\n\r\n change(event, stateName, type, stateNameEqualTo) {\r\n switch (type) {\r\n case \"length\":\r\n if (this.verifyLength(event.target.value, stateNameEqualTo)) {\r\n this.setState({ [stateName + \"RequiredState\"]: \"success\" });\r\n } else {\r\n this.setState({ [stateName + \"RequiredState\"]: \"error\" });\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n this.setState({ [stateName]: event.target.value });\r\n }\r\n\r\n isValidated() {\r\n if (this.state.ProductCodeRequiredState === \"success\") {\r\n return true;\r\n } else {\r\n if (this.state.ProductCodeRequiredState !== \"success\") {\r\n this.setState({ ProductCodeRequiredState: \"error\" });\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n render() {\r\n const { classes } = this.props; \r\n\r\n return (\r\n \r\n
Open the Quick Start guide enclosed in your SOS pendant box and go to Step 1 to find the unique product code for your SOS pendant.
\r\nThe example above shows a product code of 1X8090C9. 1X8090C9 is only an example and not to be used to add your device.
\r\nEnter the product code from the Quick Start guide enclosed in your SOS pendant box.
\r\n\r\n \r\n this.showInfo(classes)} />\r\n \r\n {this.state.alert}\r\n \r\n \r\n \r\n \r\n this.change(event, \"ProductCode\", \"length\", 8),\r\n type: \"text\",\r\n value: this.state.ProductCode,\r\n autoComplete: \"off\",\r\n endAdornment: this.state.ProductCodeRequiredState === \"error\" ? ( this.setState({ DeviceName: event.target.value }),\r\n type: \"text\",\r\n maxLength: 20,\r\n value: this.state.DeviceName,\r\n autoComplete: \"off\"\r\n }} />\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nProductCodeStep.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style, alertStyles)(ProductCodeStep);\r\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport SweetAlert from \"react-bootstrap-sweetalert\";\n\n// @material-ui/icons\nimport Close from \"@material-ui/icons/Close\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\n\n// core components\nimport GridContainer from \"../../../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../../../components/Grid/GridItem.js\";\nimport CustomInput from \"../../../../components/CustomInput/CustomInput.js\";\n\nimport validationFormStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\nimport alertStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\n\nimport info from \"../../../../assets/img/info.png\";\nimport Fab from '@material-ui/core/Fab';\nconst infoButtonStyle = {\n margin: 0,\n top: '550',\n right: 60,\n bottom: 'auto',\n left: 'auto',\n position: 'fixed'\n};\n\nconst style = {\n infoText: {\n fontWeight: \"300\",\n margin: \"10px 0 30px\",\n textAlign: \"center\"\n },\n inputAdornmentIcon: {\n color: \"#555\"\n },\n inputAdornment: {\n position: \"relative\"\n },\n ...validationFormStyles,\n ...alertStyles\n};\n\nclass DeviceNameStep extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n DeviceName: \"\",\n alert: null\n };\n }\n\n componentDidMount() {\n var device = JSON.parse(localStorage.getItem(\"careXactSOS_Device\"));\n\n if (device) {\n this.setState({\n DeviceName: device.DeviceName\n });\n } else {\n this.isValidated();\n }\n }\n\n sendState() {\n return this.state;\n }\n\n isValidated() {\n return true;\n }\n\n hideAlert = () => {\n this.setState({ alert: null });\n }\n\n showInfo(classes) {\n const image_url = \"https://carexactsosprod.blob.core.windows.net/help/deviceName.jpg\";\n\n this.setState({\n alert:\n Please enter your 8 character product code and name your device.
\r\n\n }`})
\n
\n \n });\n }\n\n render() {\n const { classes } = this.props; \n\n return (\n \n {this.state.alert}\n \n \n \n \n this.setState({ DeviceName: event.target.value }),\n type: \"text\",\n maxLength: 20,\n value: this.state.DeviceName,\n autoComplete: \"off\"\n }} />\n \n \n
\n );\n }\n}\n\nDeviceNameStep.propTypes = {\n classes: PropTypes.object\n};\n\nexport default withStyles(style)(DeviceNameStep);\n","module.exports = __webpack_public_path__ + \"static/media/default-avatar.4e00595d.png\";","module.exports = __webpack_public_path__ + \"static/media/alertMarker.acd2b6bf.svg\";","module.exports = __webpack_public_path__ + \"static/media/deviceMarker.a387cbee.svg\";","module.exports = __webpack_public_path__ + \"static/media/placeholder.1eb7fff2.jpg\";","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/jpeg;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/product1.081bf019.jpg\";","module.exports = \"data:image/jpeg;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/product3.a0e40011.jpg\";","module.exports = __webpack_public_path__ + \"static/media/avatar.7a6bc100.jpg\";","module.exports = __webpack_public_path__ + \"static/media/card-1.6ee66b2c.jpeg\";","module.exports = __webpack_public_path__ + \"static/media/card-2.ae10829f.jpeg\";","import {\n grayColor,\n roseColor,\n blueSkyColor,\n graniteColor,\n pineColor,\n fieldsColor,\n primaryColor,\n infoColor,\n successColor,\n warningColor,\n dangerColor,\n whiteColor,\n blackColor,\n twitterColor,\n facebookColor,\n googleColor,\n linkedinColor,\n pinterestColor,\n youtubeColor,\n tumblrColor,\n behanceColor,\n dribbbleColor,\n redditColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst buttonStyle_NoTheme = {\n button: {\n minHeight: \"auto\",\n minWidth: \"auto\",\n backgroundColor: grayColor[0],\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(grayColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(grayColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(grayColor[0]) +\n \", 0.12)\",\n border: \"none\",\n borderRadius: \"3px\",\n position: \"relative\",\n padding: \"12px 30px\",\n margin: \".3125rem 1px\",\n fontSize: \"12px\",\n fontWeight: \"400\",\n textTransform: \"uppercase\",\n letterSpacing: \"0\",\n willChange: \"box-shadow, transform\",\n transition:\n \"box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)\",\n lineHeight: \"1.42857143\",\n textAlign: \"center\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n touchAction: \"manipulation\",\n cursor: \"pointer\",\n \"&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: grayColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(grayColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(grayColor[0]) +\n \", 0.2)\"\n },\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\n position: \"relative\",\n display: \"inline-block\",\n top: \"0\",\n marginTop: \"-1em\",\n marginBottom: \"-1em\",\n fontSize: \"1.1rem\",\n marginRight: \"4px\",\n verticalAlign: \"middle\"\n },\n \"& svg\": {\n position: \"relative\",\n display: \"inline-block\",\n top: \"0\",\n width: \"18px\",\n height: \"18px\",\n marginRight: \"4px\",\n verticalAlign: \"middle\"\n },\n \"&$justIcon\": {\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\n marginTop: \"0px\",\n position: \"absolute\",\n width: \"100%\",\n transform: \"none\",\n left: \"0px\",\n top: \"0px\",\n height: \"100%\",\n lineHeight: \"41px\",\n fontSize: \"20px\"\n }\n }\n },\n fullWidth: {\n width: \"100%\"\n },\n primary: {\n backgroundColor: primaryColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: primaryColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.2)\"\n }\n },\n info: {\n backgroundColor: infoColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: infoColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.2)\"\n }\n },\n success: {\n backgroundColor: successColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: successColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.2)\"\n }\n },\n warning: {\n backgroundColor: warningColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: warningColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.2)\"\n }\n },\n danger: {\n backgroundColor: dangerColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(dangerColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(dangerColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(dangerColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: dangerColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(dangerColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(dangerColor[0]) +\n \", 0.2)\"\n }\n },\n rose: {\n backgroundColor: roseColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(roseColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(roseColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(roseColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: roseColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(roseColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(roseColor[0]) +\n \", 0.2)\"\n }\n },\n blueSky: {\n backgroundColor: blueSkyColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(blueSkyColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(blueSkyColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(blueSkyColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: blueSkyColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(blueSkyColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(blueSkyColor[0]) +\n \", 0.2)\"\n }\n },\n granite: {\n backgroundColor: graniteColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(graniteColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(graniteColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(graniteColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: graniteColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(graniteColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(graniteColor[0]) +\n \", 0.2)\"\n }\n },\n pine: {\n backgroundColor: pineColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(pineColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(pineColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(pineColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: pineColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(pineColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(pineColor[0]) +\n \", 0.2)\"\n }\n },\n fields: {\n backgroundColor: fieldsColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(fieldsColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(fieldsColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(fieldsColor[0]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: fieldsColor[0],\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(fieldsColor[0]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(fieldsColor[0]) +\n \", 0.2)\"\n }\n },\n white: {\n \"&,&:focus,&:hover\": {\n backgroundColor: whiteColor,\n color: grayColor[0]\n }\n },\n twitter: {\n backgroundColor: twitterColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(twitterColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(twitterColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(twitterColor) +\n \", 0.12)\",\n \"&:hover,&:focus,&:visited\": {\n backgroundColor: twitterColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(twitterColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(twitterColor) +\n \", 0.2)\"\n }\n },\n facebook: {\n backgroundColor: facebookColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(facebookColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(facebookColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(facebookColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: facebookColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(facebookColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(facebookColor) +\n \", 0.2)\"\n }\n },\n google: {\n backgroundColor: googleColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(googleColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(googleColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(googleColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: googleColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(googleColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(googleColor) +\n \", 0.2)\"\n }\n },\n linkedin: {\n backgroundColor: linkedinColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(linkedinColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(linkedinColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(linkedinColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: linkedinColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(linkedinColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(linkedinColor) +\n \", 0.2)\"\n }\n },\n pinterest: {\n backgroundColor: pinterestColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(pinterestColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(pinterestColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(pinterestColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: pinterestColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(pinterestColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(pinterestColor) +\n \", 0.2)\"\n }\n },\n youtube: {\n backgroundColor: youtubeColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(youtubeColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(youtubeColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(youtubeColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: youtubeColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(youtubeColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(youtubeColor) +\n \", 0.2)\"\n }\n },\n tumblr: {\n backgroundColor: tumblrColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(tumblrColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(tumblrColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(tumblrColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: tumblrColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(tumblrColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(tumblrColor) +\n \", 0.2)\"\n }\n },\n github: {\n backgroundColor: grayColor[7],\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(grayColor[6]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(grayColor[6]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(grayColor[6]) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: grayColor[7],\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(grayColor[6]) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(grayColor[6]) +\n \", 0.2)\"\n }\n },\n behance: {\n backgroundColor: behanceColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(behanceColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(behanceColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(behanceColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: behanceColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(behanceColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(behanceColor) +\n \", 0.2)\"\n }\n },\n dribbble: {\n backgroundColor: dribbbleColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(dribbbleColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(dribbbleColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(dribbbleColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: dribbbleColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(dribbbleColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(dribbbleColor) +\n \", 0.2)\"\n }\n },\n reddit: {\n backgroundColor: redditColor,\n color: whiteColor,\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(redditColor) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(redditColor) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(redditColor) +\n \", 0.12)\",\n \"&:hover,&:focus\": {\n backgroundColor: redditColor,\n color: whiteColor,\n boxShadow:\n \"0 14px 26px -12px rgba(\" +\n hexToRgb(redditColor) +\n \", 0.42), 0 4px 23px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(redditColor) +\n \", 0.2)\"\n }\n },\n simple: {\n \"&,&:focus,&:hover\": {\n color: whiteColor,\n background: \"transparent\",\n boxShadow: \"none\"\n },\n \"&$primary\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: primaryColor[0]\n }\n },\n \"&$info\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: infoColor[0]\n }\n },\n \"&$success\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: successColor[0]\n }\n },\n \"&$warning\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: warningColor[0]\n }\n },\n \"&$rose\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: roseColor[0]\n }\n },\n \"&blueSky\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: blueSkyColor[0]\n }\n },\n \"&granite\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: graniteColor[0]\n }\n },\n \"&pine\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: pineColor[0]\n }\n },\n \"&fields\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: fieldsColor[0]\n }\n },\n \"&$danger\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: dangerColor[0]\n }\n },\n \"&$twitter\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: twitterColor\n }\n },\n \"&$facebook\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: facebookColor\n }\n },\n \"&$google\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: googleColor\n }\n },\n \"&$linkedin\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: linkedinColor\n }\n },\n \"&$pinterest\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: pinterestColor\n }\n },\n \"&$youtube\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: youtubeColor\n }\n },\n \"&$tumblr\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: tumblrColor\n }\n },\n \"&$github\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: grayColor[7]\n }\n },\n \"&$behance\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: behanceColor\n }\n },\n \"&$dribbble\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: dribbbleColor\n }\n },\n \"&$reddit\": {\n \"&,&:focus,&:hover,&:visited\": {\n color: redditColor\n }\n }\n },\n transparent: {\n \"&,&:focus,&:hover\": {\n color: \"inherit\",\n background: \"transparent\",\n boxShadow: \"none\"\n }\n },\n disabled: {\n opacity: \"0.65\",\n pointerEvents: \"none\"\n },\n lg: {\n \"&$justIcon\": {\n \"& .fab,& .fas,& .far,& .fal,& svg,& .material-icons\": {\n marginTop: \"-4px\"\n }\n },\n padding: \"1.125rem 2.25rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.333333\",\n borderRadius: \"0.2rem\"\n },\n sm: {\n \"&$justIcon\": {\n \"& .fab,& .fas,& .far,& .fal,& svg,& .material-icons\": {\n marginTop: \"1px\"\n }\n },\n padding: \"0.40625rem 0.75rem\",\n fontSize: \"0.6875rem\",\n lineHeight: \"1.5\",\n borderRadius: \"0.2rem\"\n },\n round: {\n borderRadius: \"30px\"\n },\n block: {\n width: \"100% !important\"\n },\n link: {\n \"&,&:hover,&:focus\": {\n backgroundColor: \"transparent\",\n color: grayColor[0],\n boxShadow: \"none\"\n }\n },\n justIcon: {\n paddingLeft: \"12px\",\n paddingRight: \"12px\",\n fontSize: \"20px\",\n height: \"41px\",\n minWidth: \"41px\",\n width: \"41px\",\n \"& .fab,& .fas,& .far,& .fal,& svg,& .material-icons\": {\n marginRight: \"0px\"\n },\n \"&$lg\": {\n height: \"57px\",\n minWidth: \"57px\",\n width: \"57px\",\n lineHeight: \"56px\",\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\n fontSize: \"32px\",\n lineHeight: \"56px\"\n },\n \"& svg\": {\n width: \"32px\",\n height: \"32px\"\n }\n },\n \"&$sm\": {\n height: \"30px\",\n minWidth: \"30px\",\n width: \"30px\",\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\n fontSize: \"17px\",\n lineHeight: \"29px\"\n },\n \"& svg\": {\n width: \"17px\",\n height: \"17px\"\n }\n }\n }\n};\n\nexport default buttonStyle_NoTheme;\n","import { grayColor } from \"../../material-dashboard-pro-react.js\";\n\nimport buttonStyle_NoTheme from \"../components/buttonStyle_NoTheme.js\";\n\nconst sweetAlertStyle = {\n cardTitle: {\n marginTop: \"0\",\n marginBottom: \"3px\",\n color: grayColor[2],\n fontSize: \"18px\"\n },\n center: {\n textAlign: \"center\"\n },\n right: {\n textAlign: \"right\"\n },\n left: {\n textAlign: \"left\"\n },\n ...buttonStyle_NoTheme\n};\n\nexport default sweetAlertStyle;\n","module.exports = __webpack_public_path__ + \"static/media/sign-up-button.46af6933.png\";","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\nimport { PayPalButton } from \"react-paypal-button-v2\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// core components\r\nimport GridContainer from \"../../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../../components/Grid/GridItem.js\";\r\n\r\nimport alertStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nconst style = {\r\n infoText: {\r\n fontWeight: \"300\",\r\n margin: \"10px 0 30px\",\r\n textAlign: \"center\"\r\n },\r\n inputAdornmentIcon: {\r\n color: \"#555\"\r\n },\r\n inputAdornment: {\r\n position: \"relative\"\r\n },\r\n ...alertStyles\r\n};\r\n\r\nclass PaymentStep extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n Loading : true,\r\n SubscriptionStatus: \"\",\r\n SubscriptionPlanId: \"\",\r\n alert: null\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const deviceId = localStorage.getItem(\"careXactSOS_DeviceId\");\r\n const apiURL = localStorage.getItem(\"careXactSOS_ApiURL\");\r\n const authHeader = \"Bearer \" + localStorage.getItem(\"careXactSOS_BearerToken\");\r\n const subscriptionKey = localStorage.getItem(\"careXactSOS_SubscriptionKey\");\r\n const headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': subscriptionKey, 'Authorization': authHeader };\r\n\r\n fetch(apiURL + 'api/Subscription/SubscriptionPlanId?deviceId=' + deviceId, {\r\n method: 'GET',\r\n headers: headers\r\n })\r\n .then(response => response.json())\r\n .then(data => {\r\n this.setState({ SubscriptionPlanId: data });\r\n if (data.toLowerCase() === \"free\") {\r\n this.updateSubscription();\r\n } else {\r\n this.setState({ Loading: false });\r\n }\r\n })\r\n .catch(error => {\r\n alert(\"Error : Unable to update the device with subscription details. Contact customer support for assistance.\");\r\n console.log(error.message);\r\n });\r\n }\r\n\r\n updateSubscription = () => {\r\n const deviceId = localStorage.getItem(\"careXactSOS_DeviceId\");\r\n const apiURL = localStorage.getItem(\"careXactSOS_ApiURL\");\r\n const authHeader = \"Bearer \" + localStorage.getItem(\"careXactSOS_BearerToken\");\r\n const subscriptionKey = localStorage.getItem(\"careXactSOS_SubscriptionKey\");\r\n const headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': subscriptionKey, 'Authorization': authHeader };\r\n\r\n fetch(apiURL + 'api/Subscription', {\r\n method: 'POST',\r\n body: JSON.stringify({\r\n DeviceId: deviceId,\r\n PaypalSubscriptionId: \"\",\r\n PaypalOrderId: \"\",\r\n Active: 1\r\n }),\r\n headers: headers\r\n })\r\n .then(response => {\r\n if (!response.ok)\r\n throw Error(response.statusText);\r\n\r\n if (response.ok)\r\n this.setState({ SubscriptionStatus: \"APPROVED\", Loading: false });\r\n })\r\n .catch(error => {\r\n //alert(\"Error : Unable to update the device with subscription details. Contact customer support for assistance and quote order Id : \" + data.orderID);\r\n console.log(error);\r\n });\r\n }\r\n\r\n sendState() {\r\n return this.state;\r\n }\r\n\r\n isValidated() {\r\n return true;\r\n }\r\n\r\n hideAlert = () => {\r\n this.setState({ alert: null });\r\n }\r\n\r\n showInfo() {\r\n const image_url = \"https://carexactsosprod.blob.core.windows.net/help/payment.jpg\";\r\n\r\n this.setState({\r\n alert:\r\n You can give your device a new name here if you like.
\n\r\n \r\n
\r\n \r\n });\r\n }\r\n\r\n render() {\r\n const { classes } = this.props; \r\n\r\n let currentComponent = this;\r\n\r\n if (this.state.Loading) return (Validating Subscription...
\r\n {this.state.alert}\r\n \r\n \r\n {this.state.SubscriptionStatus === \"APPROVED\"\r\n ? \r\n \r\n {this.state.SubscriptionStatus !== \"APPROVED\" ?\r\n {\r\n this.setState({Loading: false});\r\n }}\r\n createSubscription={(data, actions) => {\r\n return actions.subscription.create({\r\n plan_id: this.state.SubscriptionPlanId\r\n });\r\n this.setState({ Loading: true });\r\n }}\r\n onApprove={(data, actions) => {\r\n //if we hide the paypal button before the approve method is complete then the handler does not execute.\r\n //currentComponent.setState({ SubscriptionStatus: \"APPROVED\", Loading: false });\r\n\r\n currentComponent.setState({ SubscriptionStatus: \"UPDATING\", Loading: false });\r\n\r\n // Capture the funds from the transaction\r\n return actions.subscription.get().then(function (details) {\r\n const deviceId = localStorage.getItem(\"careXactSOS_DeviceId\");\r\n const apiURL = localStorage.getItem(\"careXactSOS_ApiURL\");\r\n const authHeader = \"Bearer \" + localStorage.getItem(\"careXactSOS_BearerToken\");\r\n const subscriptionKey = localStorage.getItem(\"careXactSOS_SubscriptionKey\");\r\n const headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': subscriptionKey, 'Authorization': authHeader };\r\n\r\n fetch(apiURL + 'api/Subscription', {\r\n method: 'POST',\r\n body: JSON.stringify({\r\n DeviceId: deviceId,\r\n PaypalSubscriptionId: data.subscriptionID,\r\n PaypalOrderId: data.orderID,\r\n Active: 1\r\n }),\r\n headers: headers\r\n })\r\n .then(response => {\r\n if (!response.ok)\r\n throw Error(response.statusText);\r\n\r\n if (response.ok)\r\n currentComponent.setState({ SubscriptionStatus: \"APPROVED\", Loading: false });\r\n })\r\n .catch(error => {\r\n //alert(\"Error : Unable to update the device with subscription details. Contact customer support for assistance and quote order Id : \" + data.orderID);\r\n console.log(error);\r\n });\r\n });\r\n }}\r\n onCancel={(details, data) => {\r\n this.setState({ SubscriptionStatus: \"CANCELLED\", Loading: false });\r\n }}\r\n onError={(details, data) => {\r\n this.setState({ SubscriptionStatus: \"ERROR\", Loading: false });\r\n }}\r\n />\r\n :\r\n <>\r\n }\r\n {this.state.SubscriptionStatus === \"UPDATING\" &&\r\n \r\n \r\n {this.state.SubscriptionStatus !== \"APPROVED\" && Credit card details securely stored and processed by PayPal. \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nPaymentStep.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style)(PaymentStep);\r\n","import React from \"react\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\n\nconst styles = {\n grid: {\n padding: \"0 15px !important\"\n }\n};\n\nconst useStyles = makeStyles(styles);\n\nexport default function GridItem(props) {\n const classes = useStyles();\n const { children, className, ...rest } = props;\n return (\n Your subscription has been activated.
\r\n :Payment Information
\r\n }\r\nUpdating your device subscription.
\r\n }\r\n {this.state.SubscriptionStatus === \"APPROVED\" &&\r\nPress Close or Finish to continue.
\r\n }\r\n {this.state.SubscriptionStatus === \"ERROR\" &&\r\nYour pendant device will not be active until a subscription is purchased.
\r\n }\r\n {this.state.SubscriptionStatus === \"CANCELLED\" &&\r\nYour pendant device will not be active until a subscription is purchased.
\r\n }\r\n- \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n - \n {pages.map((prop, key) => {\n const paginationLink = cx({\n [classes.paginationLink]: true,\n [classes[color]]: prop.active,\n [classes.disabled]: prop.disabled\n });\n return (\n
- \n {prop.onClick !== undefined ? (\n \n ) : (\n
\n {children}\n
\n );\n}\n\nCard.propTypes = {\n className: PropTypes.string,\n plain: PropTypes.bool,\n profile: PropTypes.bool,\n blog: PropTypes.bool,\n raised: PropTypes.bool,\n background: PropTypes.bool,\n pricing: PropTypes.bool,\n testimonial: PropTypes.bool,\n color: PropTypes.oneOf([\n \"primary\",\n \"info\",\n \"success\",\n \"warning\",\n \"danger\",\n \"rose\"\n ]),\n product: PropTypes.bool,\n chart: PropTypes.bool,\n login: PropTypes.bool,\n children: PropTypes.node\n};\n","import {\n whiteColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst cardBodyStyle = {\n cardBody: {\n padding: \"0.9375rem 20px\",\n flex: \"1 1 auto\",\n WebkitBoxFlex: \"1\",\n position: \"relative\"\n },\n cardBodyBackground: {\n position: \"relative\",\n zIndex: \"2\",\n minHeight: \"280px\",\n paddingTop: \"40px\",\n paddingBottom: \"40px\",\n maxWidth: \"440px\",\n margin: \"0 auto\"\n },\n cardBodyPlain: {\n paddingLeft: \"5px\",\n paddingRight: \"5px\"\n },\n cardBodyFormHorizontal: {\n paddingLeft: \"15px\",\n paddingRight: \"15px\",\n \"& form\": {\n margin: \"0\"\n }\n },\n cardPricing: {\n padding: \"15px!important\",\n margin: \"0px!important\"\n },\n cardSignup: {\n padding: \"0px 30px 0px 30px\"\n },\n cardBodyColor: {\n borderRadius: \"6px\",\n \"& h1,& h2,& h3\": {\n \"& small\": {\n color: \"rgba(\" + hexToRgb(whiteColor) + \", 0.8)\"\n }\n }\n },\n cardBodyProfile: {\n marginTop: \"15px\"\n },\n cardBodyCalendar: {\n padding: \"0px !important\"\n }\n};\n\nexport default cardBodyStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n// @material-ui/icons\n\n// core components\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/cardBodyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CardBody(props) {\n const classes = useStyles();\n const {\n className,\n children,\n background,\n plain,\n formHorizontal,\n pricing,\n signup,\n color,\n profile,\n calendar,\n ...rest\n } = props;\n const cardBodyClasses = classNames({\n [classes.cardBody]: true,\n [classes.cardBodyBackground]: background,\n [classes.cardBodyPlain]: plain,\n [classes.cardBodyFormHorizontal]: formHorizontal,\n [classes.cardPricing]: pricing,\n [classes.cardSignup]: signup,\n [classes.cardBodyColor]: color,\n [classes.cardBodyProfile]: profile,\n [classes.cardBodyCalendar]: calendar,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardBody.propTypes = {\n className: PropTypes.string,\n background: PropTypes.bool,\n plain: PropTypes.bool,\n formHorizontal: PropTypes.bool,\n pricing: PropTypes.bool,\n signup: PropTypes.bool,\n color: PropTypes.bool,\n profile: PropTypes.bool,\n calendar: PropTypes.bool,\n children: PropTypes.node\n};\n","const buttonGroupStyle = {\n buttonGroup: {\n position: \"relative\",\n margin: \"10px 1px\",\n display: \"inline-block\",\n verticalAlign: \"middle\"\n },\n firstButton: {\n borderTopRightRadius: \"0\",\n borderBottomRightRadius: \"0\",\n margin: \"0\",\n position: \"relative\",\n float: \"left\",\n \"&:hover\": {\n zIndex: \"2\"\n }\n },\n middleButton: {\n borderRadius: \"0\",\n margin: \"0\",\n position: \"relative\",\n float: \"left\",\n \"&:hover\": {\n zIndex: \"2\"\n }\n },\n lastButton: {\n borderTopLeftRadius: \"0\",\n borderBottomLeftRadius: \"0\",\n margin: \"0\",\n \"&:hover\": {\n zIndex: \"2\"\n }\n }\n};\n\nexport default buttonGroupStyle;\n","/// \n
\n Pick your Color
\n\n \n \n \n \n \n \n \n
\n \n
\n Buttons with Label
\n\n \n \n \n \n \n \n
\n \n
\n Pick your Size
\n\n \n \n \n
\n \n
\n Pick your Style
\n\n \n \n \n \n
\n \n
\n Pagination
\n\n
\n \n
\n Button Group
\n\n
\n
\n
\n \n \n \n \n
\n \n
\n
\n \n \n \n \n
\n {` `}\n \n \n \n \n
\n \n
\n Social buttons
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n {title !== undefined ? (\n
\n );\n }\n return null;\n}\n\nHeading.propTypes = {\n title: PropTypes.node,\n category: PropTypes.node,\n textAlign: PropTypes.oneOf([\"right\", \"left\", \"center\"])\n};\n","import {\n defaultFont,\n primaryColor,\n primaryBoxShadow,\n infoColor,\n infoBoxShadow,\n successColor,\n successBoxShadow,\n warningColor,\n warningBoxShadow,\n dangerColor,\n dangerBoxShadow,\n roseColor,\n roseBoxShadow,\n whiteColor,\n blackColor,\n grayColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst customDropdownStyle = theme => ({\n popperClose: {\n pointerEvents: \"none\",\n display: \"none !important\"\n },\n popperNav: {\n [theme.breakpoints.down(\"sm\")]: {\n position: \"static !important\",\n left: \"unset !important\",\n top: \"unset !important\",\n transform: \"none !important\",\n willChange: \"unset !important\",\n \"& > div\": {\n boxShadow: \"none !important\",\n marginLeft: \"0rem\",\n marginRight: \"0rem\",\n transition: \"none !important\",\n marginTop: \"0px !important\",\n marginBottom: \"0px !important\",\n padding: \"0px !important\",\n backgroundColor: \"transparent !important\",\n \"& ul li\": {\n color: whiteColor + \" !important\",\n margin: \"10px 15px 0!important\",\n padding: \"10px 15px !important\",\n \"&:hover\": {\n backgroundColor: \"hsla(0,0%,78%,.2)\",\n boxShadow: \"none\"\n }\n }\n }\n }\n },\n manager: {\n \"& > div > button:first-child > span:first-child, & > div > a:first-child > span:first-child\": {\n width: \"100%\"\n }\n },\n innerManager: {\n \"& > div > button,& > div > a\": {\n margin: \"0px !important\",\n color: \"inherit !important\",\n padding: \"10px 20px !important\",\n \"& > span:first-child\": {\n width: \"100%\",\n justifyContent: \"flex-start\"\n }\n }\n },\n target: {\n \"& > button:first-child > span:first-child, & > a:first-child > span:first-child\": {\n display: \"inline-block\"\n },\n \"& $caret\": {\n marginLeft: \"0px\"\n }\n },\n dropdown: {\n borderRadius: \"3px\",\n border: \"0\",\n boxShadow: \"0 2px 5px 0 rgba(\" + hexToRgb(blackColor) + \", 0.26)\",\n top: \"100%\",\n zIndex: \"1000\",\n minWidth: \"160px\",\n padding: \"5px 0\",\n margin: \"2px 0 0\",\n fontSize: \"14px\",\n textAlign: \"left\",\n listStyle: \"none\",\n backgroundColor: whiteColor,\n backgroundClip: \"padding-box\"\n },\n menuList: {\n padding: \"0\"\n },\n popperResponsive: {\n zIndex: \"1200\",\n [theme.breakpoints.down(\"sm\")]: {\n zIndex: \"1640\",\n position: \"static\",\n float: \"none\",\n width: \"auto\",\n marginTop: \"0\",\n backgroundColor: \"transparent\",\n border: \"0\",\n boxShadow: \"none\",\n color: \"black\"\n }\n },\n dropdownItem: {\n ...defaultFont,\n fontSize: \"13px\",\n padding: \"10px 20px\",\n margin: \"0 5px\",\n borderRadius: \"2px\",\n position: \"relative\",\n transition: \"all 150ms linear\",\n display: \"block\",\n clear: \"both\",\n fontWeight: \"400\",\n height: \"100%\",\n color: grayColor[7],\n whiteSpace: \"nowrap\",\n minHeight: \"unset\"\n },\n darkHover: {\n \"&:hover\": {\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(grayColor[16]) +\n \", 0.4)\",\n backgroundColor: grayColor[16],\n color: whiteColor\n }\n },\n primaryHover: {\n \"&:hover\": {\n backgroundColor: primaryColor[0],\n color: whiteColor,\n ...primaryBoxShadow\n }\n },\n infoHover: {\n \"&:hover\": {\n backgroundColor: infoColor[0],\n color: whiteColor,\n ...infoBoxShadow\n }\n },\n successHover: {\n \"&:hover\": {\n backgroundColor: successColor[0],\n color: whiteColor,\n ...successBoxShadow\n }\n },\n warningHover: {\n \"&:hover\": {\n backgroundColor: warningColor[0],\n color: whiteColor,\n ...warningBoxShadow\n }\n },\n dangerHover: {\n \"&:hover\": {\n backgroundColor: dangerColor[0],\n color: whiteColor,\n ...dangerBoxShadow\n }\n },\n roseHover: {\n \"&:hover\": {\n backgroundColor: roseColor[0],\n color: whiteColor,\n ...roseBoxShadow\n }\n },\n dropdownItemRTL: {\n textAlign: \"right\"\n },\n dropdownDividerItem: {\n margin: \"5px 0\",\n backgroundColor: \"rgba(\" + hexToRgb(blackColor) + \", 0.12)\",\n height: \"1px\",\n overflow: \"hidden\"\n },\n buttonIcon: {\n width: \"20px\",\n height: \"20px\"\n },\n caret: {\n transition: \"all 150ms ease-in\",\n display: \"inline-block\",\n width: \"0\",\n height: \"0\",\n marginLeft: \"4px\",\n verticalAlign: \"middle\",\n borderTop: \"4px solid\",\n borderRight: \"4px solid transparent\",\n borderLeft: \"4px solid transparent\"\n },\n caretActive: {\n transform: \"rotate(180deg)\"\n },\n caretDropup: {\n transform: \"rotate(180deg)\"\n },\n caretRTL: {\n marginRight: \"4px\"\n },\n dropdownHeader: {\n display: \"block\",\n padding: \"0.1875rem 1.25rem\",\n fontSize: \"0.75rem\",\n lineHeight: \"1.428571\",\n color: grayColor[1],\n whiteSpace: \"nowrap\",\n fontWeight: \"inherit\",\n marginTop: \"10px\",\n minHeight: \"unset\",\n \"&:hover,&:focus\": {\n backgroundColor: \"transparent\",\n cursor: \"auto\"\n }\n },\n noLiPadding: {\n padding: \"0\"\n }\n});\n\nexport default customDropdownStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport MenuList from \"@material-ui/core/MenuList\";\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Grow from \"@material-ui/core/Grow\";\nimport Divider from \"@material-ui/core/Divider\";\nimport Popper from \"@material-ui/core/Popper\";\n// core components\nimport Button from \"../CustomButtons/Button.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/customDropdownStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CustomDropdown(props) {\n const [anchorEl, setAnchorEl] = React.useState(null);\n const classes = useStyles();\n const handleClick = event => {\n if (anchorEl && anchorEl.contains(event.target)) {\n setAnchorEl(null);\n } else {\n setAnchorEl(event.currentTarget);\n }\n };\n const handleClose = event => {\n if (anchorEl.contains(event.target)) {\n return;\n }\n setAnchorEl(null);\n };\n const handleCloseMenu = param => {\n setAnchorEl(null);\n if (props && props.onClick) {\n props.onClick(param);\n }\n };\n const {\n buttonText,\n buttonIcon,\n dropdownList,\n buttonProps,\n dropup,\n dropdownHeader,\n caret,\n hoverColor,\n dropPlacement,\n rtlActive,\n noLiPadding,\n innerDropDown,\n navDropdown\n } = props;\n const caretClasses = classNames({\n [classes.caret]: true,\n [classes.caretDropup]: dropup && !anchorEl,\n [classes.caretActive]: Boolean(anchorEl) && !dropup,\n [classes.caretRTL]: rtlActive\n });\n const dropdownItem = classNames({\n [classes.dropdownItem]: true,\n [classes[hoverColor + \"Hover\"]]: true,\n [classes.noLiPadding]: noLiPadding,\n [classes.dropdownItemRTL]: rtlActive\n });\n const dropDownMenu = (\n {title}
\n ) : null}\n {category !== undefined ? (\n{category}
\n ) : null}\n\n \n {() => (\n \n \n {innerDropDown ? (\n dropDownMenu\n ) : (\n \n {dropDownMenu}\n \n )}\n \n \n )}\n \n
\n );\n}\n\nCustomDropdown.defaultProps = {\n caret: true,\n dropup: false,\n hoverColor: \"primary\"\n};\n\nCustomDropdown.propTypes = {\n hoverColor: PropTypes.oneOf([\n \"dark\",\n \"primary\",\n \"info\",\n \"success\",\n \"warning\",\n \"danger\",\n \"rose\"\n ]),\n buttonText: PropTypes.node,\n buttonIcon: PropTypes.object,\n dropdownList: PropTypes.array,\n buttonProps: PropTypes.object,\n dropup: PropTypes.bool,\n dropdownHeader: PropTypes.node,\n rtlActive: PropTypes.bool,\n caret: PropTypes.bool,\n dropPlacement: PropTypes.oneOf([\n \"bottom\",\n \"top\",\n \"right\",\n \"left\",\n \"bottom-start\",\n \"bottom-end\",\n \"top-start\",\n \"top-end\",\n \"right-start\",\n \"right-end\",\n \"left-start\",\n \"left-end\"\n ]),\n noLiPadding: PropTypes.bool,\n innerDropDown: PropTypes.bool,\n navDropdown: PropTypes.bool,\n // This is a function that returns the clicked menu item\n onClick: PropTypes.func\n};\n","/// \n \n {buttonIcon !== undefined ? (\n
\n \r\n قام كل ماذا العصبة اوروبا. أي جورج العالمي أخر, كان تم أطراف القوى\r\n استبدال. أسر ميناء تكتيكاً الجديدة، كل. جُل اللا التكاليف بـ, عرفها\r\n النزاع لليابان بـ أضف. انتهت المدن الثالث من وقد.وقبل قادة إحتار عن أخر.\r\n حين ونتج أخرى قد. بالعمل بالمطالبة فقد قد. عن جنوب ومضى الشتاء.\r\n
\r\n ),\r\n footerTitle: \"مدن أن هُزم سكان, مكن.\"\r\n },\r\n {\r\n // Second story\r\n inverted: true,\r\n badgeColor: \"success\",\r\n badgeIcon: Extension,\r\n title: \"جُل حكومة\",\r\n titleColor: \"success\",\r\n body: (\r\n\r\n عل فكانت الثقيلة بلا. شيء بخطوط بالرّغم التبرعات عن, يطول بأيدي لم كلّ.\r\n معقل الغالي واتّجه لم وتم, أن الصفحة بالمحور حول, بال مرمى الصفحات\r\n قُدُماً و. الأخذ سبتمبر العالم من ذلك. ان يبق شدّت الأبرياء, الى الربيع،\r\n والمانيا كل. ودول الأهداف التقليدي عل أضف, كلا يقوم الأخذ الآلاف بل.\r\n
\r\n )\r\n },\r\n {\r\n // Third story\r\n inverted: true,\r\n badgeColor: \"info\",\r\n badgeIcon: Fingerprint,\r\n title: \"هذا غينيا\",\r\n titleColor: \"info\",\r\n body: (\r\n\r\n جهة المارق والديون التقليدية في, هو وترك المجتمع بريطانيا ذلك, لمّ ما\r\n العالم، اليابان،. ٣٠ فقامت أوروبا مشاركة بعد, ٢٠٠٤ الجو مساعدة ما حدى.\r\n في عليها وبحلول معارضة بعض. عن الأرض وبداية العمليات ولم. الجو جديداً\r\n الأوروبيّون أم به،. ثم التي نتيجة الآلاف جعل, عن المارق السادس قام. ما\r\n أخر فقامت الأجل الشرق،, فصل كل وسوء الأرواح. ثم بعد وشعار بأيدي. قبل\r\n وكسبت الغالي الولايات بل, ٣٠ أمّا أخرى لأداء أضف. هو منتصف معزّزة على.\r\n بـ أفريقيا التغييرات مما, أثره،.\r\n
\r\n ),\r\n footer: (\r\n\r\n Wifey made the best Father{\"'\"}s Day meal ever. So thankful so happy so\r\n blessed. Thank you for making my family We just had fun with the\r\n “future” theme !!! It was a fun night all together ... The always rude\r\n Kanye Show at 2am Sold Out Famous viewing @ Figueroa and 12th in\r\n downtown.\r\n
\r\n ),\r\n footerTitle: \"11 hours ago via Twitter\"\r\n },\r\n {\r\n // Second story\r\n inverted: true,\r\n badgeColor: \"success\",\r\n badgeIcon: Extension,\r\n title: \"Another One\",\r\n titleColor: \"success\",\r\n body: (\r\n\r\n Thank God for the support of my wife and real friends. I also wanted to\r\n point out that it’s the first album to go number 1 off of streaming!!! I\r\n love you Ellen and also my number one design rule of anything I do from\r\n shoes to music to homes is that Kim has to like it....\r\n
\r\n )\r\n },\r\n {\r\n // Third story\r\n inverted: true,\r\n badgeColor: \"info\",\r\n badgeIcon: Fingerprint,\r\n title: \"Another Title\",\r\n titleColor: \"info\",\r\n body: (\r\n\r\n
\r\n ),\r\n footer: (\r\n \r\n Called I Miss the Old Kanye That’s all it was Kanye And I love you\r\n like Kanye loves Kanye Famous viewing @ Figueroa and 12th in downtown\r\n LA 11:10PM\r\n
\r\n\r\n What if Kanye made a song about Kanye Royère doesn{\"'\"}t make a Polar\r\n bear bed but the Polar bear couch is my favorite piece of furniture we\r\n own It wasn’t any Kanyes Set on his goals Kanye\r\n
\r\n\r\n Wifey made the best Father{\"'\"}s Day meal ever. So thankful so happy so\r\n blessed. Thank you for making my family We just had fun with the\r\n “future” theme !!! It was a fun night all together ... The always rude\r\n Kanye Show at 2am Sold Out Famous viewing @ Figueroa and 12th in\r\n downtown.\r\n
\r\n ),\r\n footerTitle: \"11 hours ago via Twitter\"\r\n },\r\n {\r\n // Second story\r\n badgeColor: \"success\",\r\n badgeIcon: Extension,\r\n title: \"Another One\",\r\n titleColor: \"success\",\r\n body: (\r\n\r\n Thank God for the support of my wife and real friends. I also wanted to\r\n point out that it’s the first album to go number 1 off of streaming!!! I\r\n love you Ellen and also my number one design rule of anything I do from\r\n shoes to music to homes is that Kim has to like it....\r\n
\r\n )\r\n },\r\n {\r\n // Third story\r\n inverted: true,\r\n badgeColor: \"info\",\r\n badgeIcon: Fingerprint,\r\n title: \"Another Title\",\r\n titleColor: \"info\",\r\n body: (\r\n\r\n
\r\n ),\r\n footer: (\r\n \r\n Called I Miss the Old Kanye That’s all it was Kanye And I love you\r\n like Kanye loves Kanye Famous viewing @ Figueroa and 12th in downtown\r\n LA 11:10PM\r\n
\r\n\r\n What if Kanye made a song about Kanye Royère doesn{\"'\"}t make a Polar\r\n bear bed but the Polar bear couch is my favorite piece of furniture we\r\n own It wasn’t any Kanyes Set on his goals Kanye\r\n
\r\n\r\n Tune into Big Boy{\"'\"}s 92.3 I{\"'\"}m about to play the first single from\r\n Cruel Winter also to Kim’s hair and makeup Lorraine jewelry and the\r\n whole style squad at Balmain and the Yeezy team. Thank you Anna for the\r\n invite thank you to the whole Vogue team\r\n
\r\n )\r\n }\r\n];\r\n\r\n// ##############################\r\n// // // data for populating the calendar in Calendar view\r\n// #############################\r\n\r\nvar today = new Date();\r\nvar y = today.getFullYear();\r\nvar m = today.getMonth();\r\nvar d = today.getDate();\r\n\r\nconst events = [\r\n {\r\n title: \"All Day Event\",\r\n allDay: true,\r\n start: new Date(y, m, 1),\r\n end: new Date(y, m, 1),\r\n color: \"default\"\r\n },\r\n {\r\n title: \"Meeting\",\r\n start: new Date(y, m, d - 1, 10, 30),\r\n end: new Date(y, m, d - 1, 11, 30),\r\n allDay: false,\r\n color: \"green\"\r\n },\r\n {\r\n title: \"Lunch\",\r\n start: new Date(y, m, d + 7, 12, 0),\r\n end: new Date(y, m, d + 7, 14, 0),\r\n allDay: false,\r\n color: \"red\"\r\n },\r\n {\r\n title: \"Nud-pro Launch\",\r\n start: new Date(y, m, d - 2),\r\n end: new Date(y, m, d - 2),\r\n allDay: true,\r\n color: \"azure\"\r\n },\r\n {\r\n title: \"Birthday Party\",\r\n start: new Date(y, m, d + 1, 19, 0),\r\n end: new Date(y, m, d + 1, 22, 30),\r\n allDay: false,\r\n color: \"azure\"\r\n },\r\n {\r\n title: \"Click for Creative Tim\",\r\n start: new Date(y, m, 21),\r\n end: new Date(y, m, 22),\r\n color: \"orange\"\r\n },\r\n {\r\n title: \"Click for Google\",\r\n start: new Date(y, m, 21),\r\n end: new Date(y, m, 22),\r\n color: \"rose\"\r\n }\r\n];\r\n\r\n// ##############################\r\n// // // Tasks for TasksCard - see Widget view\r\n// #############################\r\n\r\nvar bugs = [\r\n 'Sign contract for \"What are conference organizers afraid of?\"',\r\n \"Lines From Great Russian Literature? Or E-mails From My Boss?\",\r\n \"Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit\",\r\n \"Create 4 Invisible User Experiences you Never Knew About\"\r\n];\r\nvar website = [\r\n \"Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit\",\r\n 'Sign contract for \"What are conference organizers afraid of?\"'\r\n];\r\nvar server = [\r\n \"Lines From Great Russian Literature? Or E-mails From My Boss?\",\r\n \"Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit\",\r\n 'Sign contract for \"What are conference organizers afraid of?\"'\r\n];\r\n\r\n// ##############################\r\n// // // Tasks for TasksCard - see RTLSupport view\r\n// #############################\r\n\r\nvar rtlBugs = [\r\n \"فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.\",\r\n \"بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.\",\r\n \"تسبب أفريقيا ضرب عن, عن إنطلاق جعل السبب وفرنسا الصينية أي.\",\r\n \"قدما مليون بين عن, مرجع منتصف الأمريكية جعل السبب وفرنسا الصينية أي.\"\r\n];\r\nvar rtlWebsite = [\r\n \"قدما مليون بين عن, مرجع منتصف الأمريكية جعل السبب وفرنسا الصينية أي.\",\r\n \"قدما مليون بين عن, مرجع منتصف الأمريكية جعل السبب وفرنسا الصينية أي.\"\r\n];\r\nvar rtlServer = [\r\n \"قدما مليون بين عن, مرجع منتصف الأمريكية جعل السبب وفرنسا الصينية أي.\",\r\n \"قدما مليون بين عن, مرجع منتصف الأمريكية جعل السبب وفرنسا الصينية أي.\",\r\n \"قدما مليون بين عن, مرجع منتصف الأمريكية جعل السبب وفرنسا الصينية أي.\"\r\n];\r\n\r\n// ##############################\r\n// // // data for datatables.net in DataTables view\r\n// #############################\r\n\r\nconst dataTable = {\r\n headerRow: [\"Name\", \"Position\", \"Office\", \"Age\", \"Actions\"],\r\n footerRow: [\"Name\", \"Position\", \"Office\", \"Age\", \"Actions\"],\r\n dataRows: [\r\n [\"Tiger Nixon\", \"System Architect\", \"Edinburgh\", \"61\"],\r\n [\"Garrett Winters\", \"Accountant\", \"Tokyo\", \"63\"],\r\n [\"Ashton Cox\", \"Junior Technical Author\", \"San Francisco\", \"66\"],\r\n [\"Cedric Kelly\", \"Senior Javascript Developer\", \"Edinburgh\", \"22\"],\r\n [\"Airi Satou\", \"Accountant\", \"Tokyo\", \"33\"],\r\n [\"Brielle Williamson\", \"Integration Specialist\", \"New York\", \"61\"],\r\n [\"Herrod Chandler\", \"Sales Assistant\", \"San Francisco\", \"59\"],\r\n [\"Rhona Davidson\", \"Integration Specialist\", \"Tokyo\", \"55\"],\r\n [\"Colleen Hurst\", \"Javascript Developer\", \"San Francisco\", \"39\"],\r\n [\"Sonya Frost\", \"Software Engineer\", \"Edinburgh\", \"23\"],\r\n [\"Jena Gaines\", \"Office Manager\", \"London\", \"30\"],\r\n [\"Quinn Flynn\", \"Support Lead\", \"Edinburgh\", \"22\"],\r\n [\"Charde Marshall\", \"Regional Director\", \"San Francisco\", \"36\"],\r\n [\"Haley Kennedy\", \"Senior Marketing Designer\", \"London\", \"43\"],\r\n [\"Tatyana Fitzpatrick\", \"Regional Director\", \"London\", \"19\"],\r\n [\"Michael Silva\", \"Marketing Designer\", \"London\", \"66\"],\r\n [\"Paul Byrd\", \"Chief Financial Officer (CFO)\", \"New York\", \"64\"],\r\n [\"Gloria Little\", \"Systems Administrator\", \"New York\", \"59\"],\r\n [\"Bradley Greer\", \"Software Engineer\", \"London\", \"41\"],\r\n [\"Dai Rios\", \"Personnel Lead\", \"Edinburgh\", \"35\"],\r\n [\"Jenette Caldwell\", \"Development Lead\", \"New York\", \"30\"],\r\n [\"Yuri Berry\", \"Chief Marketing Officer (CMO)\", \"New York\", \"40\"],\r\n [\"Caesar Vance\", \"Pre-Sales Support\", \"New York\", \"21\"],\r\n [\"Doris Wilder\", \"Sales Assistant\", \"Sidney\", \"23\"],\r\n [\"Angelica Ramos\", \"Chief Executive Officer (CEO)\", \"London\", \"47\"],\r\n [\"Gavin Joyce\", \"Developer\", \"Edinburgh\", \"42\"],\r\n [\"Jennifer Chang\", \"Regional Director\", \"Singapore\", \"28\"],\r\n [\"Brenden Wagner\", \"Software Engineer\", \"San Francisco\", \"28\"],\r\n [\"Fiona Green\", \"Chief Operating Officer (COO)\", \"San Francisco\", \"48\"],\r\n [\"Shou Itou\", \"Regional Marketing\", \"Tokyo\", \"20\"],\r\n [\"Michelle House\", \"Integration Specialist\", \"Sidney\", \"37\"],\r\n [\"Suki Burks\", \"Developer\", \"London\", \"53\"],\r\n [\"Prescott Bartlett\", \"Technical Author\", \"London\", \"27\"],\r\n [\"Gavin Cortez\", \"Team Leader\", \"San Francisco\", \"22\"],\r\n [\"Martena Mccray\", \"Post-Sales support\", \"Edinburgh\", \"46\"],\r\n [\"Unity Butler\", \"Marketing Designer\", \"San Francisco\", \"47\"],\r\n [\"Howard Hatfield\", \"Office Manager\", \"San Francisco\", \"51\"],\r\n [\"Hope Fuentes\", \"Secretary\", \"San Francisco\", \"41\"],\r\n [\"Vivian Harrell\", \"Financial Controller\", \"San Francisco\", \"62\"],\r\n [\"Timothy Mooney\", \"Office Manager\", \"London\", \"37\"],\r\n [\"Jackson Bradshaw\", \"Director\", \"New York\", \"65\"],\r\n [\"Olivia Liang\", \"Support Engineer\", \"Singapore\", \"64\"]\r\n ]\r\n};\r\n\r\nexport {\r\n // data for React Big Calendar in Calendar view\r\n events,\r\n // stories for RTLSupport view\r\n rtlStories,\r\n // stories for Widgets view\r\n widgetStories,\r\n // stories for Timeline view\r\n stories,\r\n // these 3 are used to create the tasks lists in TasksCard - Widget view\r\n bugs,\r\n website,\r\n server,\r\n // these 3 are used to create the tasks lists in TasksCard - RTLSupport view\r\n rtlBugs,\r\n rtlWebsite,\r\n rtlServer,\r\n // data for datatables.net in DataTables view\r\n dataTable\r\n};\r\n","///\r\n \r\n A beautiful react component made by{\" \"}\r\n \r\n International Justice Mission\r\n \r\n . Please checkout their{\" \"}\r\n \r\n full documentation.\r\n \r\n \r\n }\r\n />\r\n {alert}\r\n \r\n \r\n \r\n \r\n selectedEvent(event)}\r\n onSelectSlot={slotInfo => addNewEventAlert(slotInfo)}\r\n eventPropGetter={eventColors}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader,\n blueSkyCardHeader,\n graniteCardHeader,\n pineCardHeader,\n fieldsCardHeader,\n whiteColor,\n blackColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\nconst cardHeaderStyle = {\n cardHeader: {\n padding: \"0.75rem 1.25rem\",\n marginBottom: \"0\",\n borderBottom: \"none\",\n background: \"transparent\",\n zIndex: \"3 !important\",\n \"&$cardHeaderPlain,&$cardHeaderImage,&$cardHeaderContact,&$cardHeaderSignup,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader,&$blueSkyCardHeader,&$graniteCardHeader,&$pineCardHeader,&$fieldsCardHeader\": {\n margin: \"0 15px\",\n padding: \"0\",\n position: \"relative\",\n color: whiteColor\n },\n \"&:first-child\": {\n borderRadius: \"calc(.25rem - 1px) calc(.25rem - 1px) 0 0\"\n },\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader,&$blueSkyCardHeader,&$graniteCardHeader,&$pineCardHeader,&$fieldsCardHeader\": {\n \"&:not($cardHeaderIcon):not($cardHeaderImage):not($cardHeaderText)\": {\n borderRadius: \"3px\",\n marginTop: \"-20px\",\n padding: \"15px\"\n }\n },\n \"&$cardHeaderStats svg\": {\n fontSize: \"36px\",\n lineHeight: \"56px\",\n textAlign: \"center\",\n width: \"36px\",\n height: \"36px\",\n margin: \"10px 10px 4px\"\n },\n \"&$cardHeaderStats .fab,&$cardHeaderStats .fas,&$cardHeaderStats .far,&$cardHeaderStats .fal,&$cardHeaderStats .material-icons\": {\n fontSize: \"36px\",\n lineHeight: \"56px\",\n width: \"56px\",\n height: \"56px\",\n textAlign: \"center\",\n overflow: \"unset\",\n marginBottom: \"1px\"\n },\n \"&$cardHeaderStats$cardHeaderIcon\": {\n textAlign: \"right\"\n },\n \"&$cardHeaderImage\": {\n marginLeft: \"15px\",\n marginRight: \"15px\",\n marginTop: \"-30px\",\n borderRadius: \"6px\"\n },\n \"&$cardHeaderText\": {\n display: \"inline-block\"\n }\n },\n cardHeaderPlain: {\n marginLeft: \"0px\",\n marginRight: \"0px\",\n \"&$cardHeaderImage\": {\n margin: \"0 !important\"\n }\n },\n cardHeaderImage: {\n position: \"relative\",\n padding: \"0\",\n zIndex: \"1\",\n \"& img\": {\n width: \"100%\",\n borderRadius: \"6px\",\n pointerEvents: \"none\",\n boxShadow:\n \"0 5px 15px -8px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.24), 0 8px 10px -5px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.2)\"\n },\n \"& a\": {\n display: \"block\"\n }\n },\n cardHeaderContact: {\n margin: \"0 15px\",\n marginTop: \"-20px\"\n },\n cardHeaderSignup: {\n marginLeft: \"20px\",\n marginRight: \"20px\",\n marginTop: \"-40px\",\n padding: \"20px 0\",\n width: \"100%\",\n marginBottom: \"15px\"\n },\n cardHeaderStats: {\n \"& $cardHeaderIcon\": {\n textAlign: \"right\"\n },\n \"& h1,& h2,& h3,& h4,& h5,& h6\": {\n margin: \"0 !important\"\n }\n },\n cardHeaderIcon: {\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader,&$blueSkyCardHeader,&$graniteCardHeader,&$pineCardHeader,&$fieldsCardHeader\": {\n background: \"transparent\",\n boxShadow: \"none\"\n },\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\n width: \"33px\",\n height: \"33px\",\n textAlign: \"center\",\n lineHeight: \"33px\"\n },\n \"& svg\": {\n width: \"24px\",\n height: \"24px\",\n textAlign: \"center\",\n lineHeight: \"33px\",\n margin: \"5px 4px 0px\"\n }\n },\n cardHeaderText: {},\n warningCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...warningCardHeader\n }\n },\n successCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...successCardHeader\n }\n },\n dangerCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...dangerCardHeader\n }\n },\n infoCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...infoCardHeader\n }\n },\n primaryCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...primaryCardHeader\n }\n },\n roseCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...roseCardHeader\n }\n },\n blueSkyCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...blueSkyCardHeader\n }\n },\n graniteCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...graniteCardHeader\n }\n },\n pineCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...pineCardHeader\n }\n },\n fieldsCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\n ...fieldsCardHeader\n }\n }\n};\n\nexport default cardHeaderStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n// @material-ui/icons\n\n// core components\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/cardHeaderStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CardHeader(props) {\n const classes = useStyles();\n const {\n className,\n children,\n color,\n plain,\n image,\n contact,\n signup,\n stats,\n icon,\n text,\n ...rest\n } = props;\n const cardHeaderClasses = classNames({\n [classes.cardHeader]: true,\n [classes[color + \"CardHeader\"]]: color,\n [classes.cardHeaderPlain]: plain,\n [classes.cardHeaderImage]: image,\n [classes.cardHeaderContact]: contact,\n [classes.cardHeaderSignup]: signup,\n [classes.cardHeaderStats]: stats,\n [classes.cardHeaderIcon]: icon,\n [classes.cardHeaderText]: text,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardHeader.propTypes = {\n className: PropTypes.string,\n color: PropTypes.oneOf([\n \"warning\",\n \"success\",\n \"danger\",\n \"info\",\n \"primary\",\n \"rose\",\n \"blueSky\",\n \"granite\",\n \"pine\",\n \"fields\"\n ]),\n plain: PropTypes.bool,\n image: PropTypes.bool,\n contact: PropTypes.bool,\n signup: PropTypes.bool,\n stats: PropTypes.bool,\n icon: PropTypes.bool,\n text: PropTypes.bool,\n children: PropTypes.node\n};\n","import {\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader,\n blueSkyCardHeader,\n graniteCardHeader,\n pineCardHeader,\n fieldsCardHeader,\n grayColor\n} from \"../../material-dashboard-pro-react.js\";\nconst cardIconStyle = {\n cardIcon: {\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader,&$blueSkyCardHeader,&$graniteCardHeader,&$pineCardHeader,&$fieldsCardHeader\": {\n borderRadius: \"3px\",\n backgroundColor: grayColor[0],\n padding: \"15px\",\n marginTop: \"-20px\",\n marginRight: \"15px\",\n float: \"left\"\n }\n },\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader,\n blueSkyCardHeader,\n graniteCardHeader,\n pineCardHeader,\n fieldsCardHeader\n};\n\nexport default cardIconStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n// @material-ui/icons\n\n// core components\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/cardIconStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CardIcon(props) {\n const classes = useStyles();\n const { className, children, color, ...rest } = props;\n const cardIconClasses = classNames({\n [classes.cardIcon]: true,\n [classes[color + \"CardHeader\"]]: color,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardIcon.propTypes = {\n className: PropTypes.string,\n color: PropTypes.oneOf([\n \"warning\",\n \"success\",\n \"danger\",\n \"info\",\n \"primary\",\n \"rose\"\n ]),\n children: PropTypes.node\n};\n","import { grayColor } from \"../../material-dashboard-pro-react.js\";\n\nconst cardFooterStyle = {\n cardFooter: {\n padding: \"0\",\n paddingTop: \"10px\",\n margin: \"0 15px 10px\",\n borderRadius: \"0\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n display: \"flex\",\n backgroundColor: \"transparent\",\n border: \"0\"\n },\n cardFooterProfile: {\n marginTop: \"-15px\"\n },\n cardFooterPlain: {\n paddingLeft: \"5px\",\n paddingRight: \"5px\",\n backgroundColor: \"transparent\"\n },\n cardFooterPricing: {\n zIndex: \"2\"\n },\n cardFooterTestimonial: {\n display: \"block\"\n },\n cardFooterStats: {\n borderTop: \"1px solid\" + grayColor[8],\n marginTop: \"20px\",\n \"& svg\": {\n position: \"relative\",\n top: \"4px\",\n marginRight: \"3px\",\n marginLeft: \"3px\",\n width: \"16px\",\n height: \"16px\"\n },\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\n position: \"relative\",\n top: \"4px\",\n marginRight: \"3px\",\n marginLeft: \"3px\",\n fontSize: \"16px\",\n lineHeight: \"16px\"\n }\n },\n cardFooterChart: {\n borderTop: \"1px solid\" + grayColor[8]\n }\n};\n\nexport default cardFooterStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n// @material-ui/icons\n\n// core components\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/cardFooterStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CardFooter(props) {\n const classes = useStyles();\n const {\n className,\n children,\n plain,\n profile,\n pricing,\n testimonial,\n stats,\n chart,\n product,\n ...rest\n } = props;\n const cardFooterClasses = classNames({\n [classes.cardFooter]: true,\n [classes.cardFooterPlain]: plain,\n [classes.cardFooterProfile]: profile || testimonial,\n [classes.cardFooterPricing]: pricing,\n [classes.cardFooterTestimonial]: testimonial,\n [classes.cardFooterStats]: stats,\n [classes.cardFooterChart]: chart || product,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardFooter.propTypes = {\n className: PropTypes.string,\n plain: PropTypes.bool,\n profile: PropTypes.bool,\n pricing: PropTypes.bool,\n testimonial: PropTypes.bool,\n stats: PropTypes.bool,\n chart: PropTypes.bool,\n product: PropTypes.bool,\n children: PropTypes.node\n};\n","import {\n primaryColor,\n warningColor,\n dangerColor,\n successColor,\n infoColor,\n roseColor,\n grayColor,\n cardTitle\n} from \"../../material-dashboard-pro-react.js\";\n\nconst chartsStyle = {\n cardTitle,\n cardCategory: {\n margin: \"0\",\n color: grayColor[0]\n },\n cardIconTitle: {\n ...cardTitle,\n marginTop: \"15px\",\n marginBottom: \"0px\"\n },\n legendTitle: {\n color: grayColor[0],\n margin: \"10px 0 !important\",\n display: \"flex\"\n },\n primary: {\n color: primaryColor[0]\n },\n warning: {\n color: warningColor[0]\n },\n danger: {\n color: dangerColor[0]\n },\n success: {\n color: successColor[0]\n },\n info: {\n color: infoColor[0]\n },\n rose: {\n color: roseColor[0]\n },\n gray: {\n color: grayColor[0]\n },\n cardFooter: {\n display: \"block\"\n }\n};\n\nexport default chartsStyle;\n","/*eslint-disable*/\nimport React from \"react\";\n// react plugin for creating charts\nimport ChartistGraph from \"react-chartist\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\n// @material-ui/icons\nimport Timeline from \"@material-ui/icons/Timeline\";\n\n// core components\nimport Heading from \"../../components/Heading/Heading.js\";\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\nimport Card from \"../../components/Card/Card.js\";\nimport CardHeader from \"../../components/Card/CardHeader.js\";\nimport CardIcon from \"../../components/Card/CardIcon.js\";\nimport CardBody from \"../../components/Card/CardBody.js\";\nimport CardFooter from \"../../components/Card/CardFooter.js\";\n\nimport {\n roundedLineChart,\n straightLinesChart,\n simpleBarChart,\n colouredLineChart,\n multipleBarsChart,\n colouredLinesChart,\n pieChart\n} from \"../../variables/charts.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/chartsStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Charts() {\n const classes = useStyles();\n return (\n \n \n A react wrapper for{\" \"}\n \n Chartist.js\n \n . Please checkout the{\" \"}\n \n full documentation of Chartist.js\n {\" \"}\n and{\" \"}\n \n full documentation of react-chartist\n \n .\n \n }\n />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n","import { title, whiteColor } from \"../../material-dashboard-pro-react.js\";\n\nconst errorPageStyles = () => ({\n contentCenter: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n zIndex: \"3\",\n transform: \"translate(-50%,-50%)\",\n textAlign: \"center\",\n color: whiteColor,\n padding: \"0 15px\",\n width: \"100%\",\n maxWidth: \"880px\"\n },\n title: {\n ...title,\n fontSize: \"13.7em\",\n color: whiteColor,\n letterSpacing: \"14px\",\n fontWeight: \"700\"\n },\n subTitle: {\n fontSize: \"2.25rem\",\n marginTop: \"0\",\n marginBottom: \"8px\"\n },\n description: {\n fontSize: \"1.125rem\",\n marginTop: \"0\",\n marginBottom: \"8px\"\n }\n});\n\nexport default errorPageStyles;\n","import React from \"react\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\n// core components\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/errorPageStyles.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function ErrorPage() {\n const classes = useStyles();\n return (\n Social Interactions
\nWeekly Summary
\nActivity Levels
\nMonthly Summary
\nSimple Bar Chart
\nBar Chart
\n\n Coloured Line Chart - Rounded\n
\n\n Multiple Bars Chart - Bar Chart\n
\n\n Coloured Lines Chart - Rounded\n
\nPie Chart
\nLegend
\n Apple{` `}\n Samsung\n {` `}\n Windows Phone\n {` `}\n\n \n \n \n \n
\n );\n}\n","import {\n primaryColor,\n warningColor,\n dangerColor,\n successColor,\n infoColor,\n roseColor,\n grayColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst customLinearProgressStyle = {\n root: {\n height: \"4px\",\n marginBottom: \"20px\",\n overflow: \"hidden\"\n },\n bar: {\n height: \"4px\"\n },\n primary: {\n backgroundColor: primaryColor[0]\n },\n warning: {\n backgroundColor: warningColor[0]\n },\n danger: {\n backgroundColor: dangerColor[0]\n },\n success: {\n backgroundColor: successColor[0]\n },\n info: {\n backgroundColor: infoColor[0]\n },\n rose: {\n backgroundColor: roseColor[0]\n },\n gray: {\n backgroundColor: grayColor[0]\n },\n primaryBackground: {\n background: \"rgba(\" + hexToRgb(primaryColor[0]) + \", 0.2)\"\n },\n warningBackground: {\n background: \"rgba(\" + hexToRgb(warningColor[0]) + \", 0.2)\"\n },\n dangerBackground: {\n background: \"rgba(\" + hexToRgb(dangerColor[0]) + \", 0.2)\"\n },\n successBackground: {\n background: \"rgba(\" + hexToRgb(successColor[0]) + \", 0.2)\"\n },\n infoBackground: {\n background: \"rgba(\" + hexToRgb(infoColor[0]) + \", 0.2)\"\n },\n roseBackground: {\n background: \"rgba(\" + hexToRgb(roseColor[0]) + \", 0.2)\"\n },\n grayBackground: {\n background: \"rgba(\" + hexToRgb(grayColor[5]) + \", 0.2)\"\n }\n};\n\nexport default customLinearProgressStyle;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport LinearProgress from \"@material-ui/core/LinearProgress\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/customLinearProgressStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CustomLinearProgress(props) {\n const classes = useStyles();\n const { color, ...rest } = props;\n return (\n Error
\nRequest assistance from your CareXact administrator
\n\r\n \r\n
\r\n );\r\n}\r\n\r\nImageUpload.propTypes = {\r\n avatar: PropTypes.bool,\r\n addButtonProps: PropTypes.object,\r\n changeButtonProps: PropTypes.object,\r\n removeButtonProps: PropTypes.object\r\n};\r\n","import React from \"react\";\n// react component plugin for creating a beautiful datetime dropdown picker\nimport Datetime from \"react-datetime\";\n// react component plugin for creating beatiful tags on an input\nimport TagsInput from \"react-tagsinput\";\n// plugin that creates slider\nimport Slider from \"nouislider\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport Switch from \"@material-ui/core/Switch\";\nimport Select from \"@material-ui/core/Select\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\n\n// @material-ui/icons\nimport Today from \"@material-ui/icons/Today\";\nimport LibraryBooks from \"@material-ui/icons/LibraryBooks\";\nimport AvTimer from \"@material-ui/icons/AvTimer\";\n\n// core components\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\nimport CustomDropdown from \"../../components/CustomDropdown/CustomDropdown.js\";\nimport CustomLinearProgress from \"../../components/CustomLinearProgress/CustomLinearProgress.js\";\nimport ImageUpload from \"../../components/CustomUpload/ImageUpload.js\";\nimport Card from \"../../components/Card/Card.js\";\nimport CardHeader from \"../../components/Card/CardHeader.js\";\nimport CardIcon from \"../../components/Card/CardIcon.js\";\nimport CardBody from \"../../components/Card/CardBody.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/extendedFormsStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function ExtendedForms() {\n const [checkedA, setCheckedA] = React.useState(true);\n const [checkedB, setCheckedB] = React.useState(false);\n const [simpleSelect, setSimpleSelect] = React.useState(\"\");\n const [multipleSelect, setMultipleSelect] = React.useState([]);\n const [tags, setTags] = React.useState([\"pizza\", \"pasta\", \"parmesan\"]);\n React.useEffect(() => {\n if (\n !document\n .getElementById(\"sliderRegular\")\n .classList.contains(\"noUi-target\")\n ) {\n Slider.create(document.getElementById(\"sliderRegular\"), {\n start: [40],\n connect: [true, false],\n step: 1,\n range: { min: 0, max: 100 }\n });\n }\n if (\n !document.getElementById(\"sliderDouble\").classList.contains(\"noUi-target\")\n ) {\n Slider.create(document.getElementById(\"sliderDouble\"), {\n start: [20, 60],\n connect: [false, true, false],\n step: 1,\n range: { min: 0, max: 100 }\n });\n }\n return function cleanup() {};\n });\n const handleSimple = event => {\n setSimpleSelect(event.target.value);\n };\n const handleMultiple = event => {\n setMultipleSelect(event.target.value);\n };\n const handleTags = regularTags => {\n setTags(regularTags);\n };\n const classes = useStyles();\n return (\n \r\n 
\r\n
\r\n \r\n {file === null ? (\r\n \r\n ) : (\r\n \r\n \r\n {avatar ?
: null}\r\n \r\n \r\n )}\r\n
\r\n : null}\r\n \r\n \r\n )}\r\n
\n \n \n \n \n \n \n \n \n Datetime Picker \n
\n\n \n \n \n \n \n \n \n \n \n \n \n Date Picker \n
\n\n \n \n \n \n \n \n \n \n \n \n \n Time Picker \n
\n\n \n \n \n \n \n \n \n \n \n
\n
\n\n \n \n \n \n \n \n \n \n \n Choose City\n \n \n \n Choose City\n \n \n Paris\n \n \n Bucharest\n \n \n Rome\n \n \n New York\n \n \n Miami\n \n \n Piatra Neamt\n \n \n Paris\n \n \n Bucharest\n \n \n Rome\n \n \n New York\n \n \n Miami\n \n \n Piatra Neamt\n \n \n Paris\n \n \n Bucharest\n \n \n Rome\n \n \n New York\n \n \n Miami\n \n \n Piatra Neamt\n \n \n \n \n \n \n \n Choose City\n \n \n \n Choose City\n \n \n Paris\n \n \n Bucharest\n \n \n Rome\n \n \n New York\n \n \n Miami\n \n \n Piatra Neamt\n \n \n Paris\n \n \n Bucharest\n \n \n Rome\n \n \n New York\n \n \n Miami\n \n \n Piatra Neamt\n \n \n Paris\n \n \n Bucharest\n \n \n Rome\n \n \n New York\n \n \n Miami\n \n \n Piatra Neamt\n \n \n \n \n \n \n \n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n","import {\n warningColor,\n primaryColor,\n dangerColor,\n successColor,\n infoColor,\n roseColor,\n grayColor,\n blueSkyColor,\n blackColor,\n defaultFont,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst tableStyle = theme => ({\n warning: {\n color: warningColor[0]\n },\n primary: {\n color: primaryColor[0]\n },\n danger: {\n color: dangerColor[0]\n },\n blueSky: {\n color: blueSkyColor[0]\n },\n success: {\n color: successColor[0]\n },\n info: {\n color: infoColor[0]\n },\n rose: {\n color: roseColor[0]\n },\n gray: {\n color: grayColor[0]\n },\n right: {\n textAlign: \"right\"\n },\n table: {\n marginBottom: \"0\",\n width: \"100%\",\n maxWidth: \"100%\",\n backgroundColor: \"transparent\",\n borderSpacing: \"0\",\n borderCollapse: \"collapse\",\n overflow: \"auto\"\n },\n tableShoppingHead: {\n fontSize: \"0.9em !important\",\n textTransform: \"uppercase !important\"\n },\n tableHeadFontSize: {\n fontSize: \"1.25em !important\"\n },\n tableHeadCell: {\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.87)\",\n border: \"none !important\"\n },\n tableCell: {\n ...defaultFont,\n lineHeight: \"1.42857143\",\n padding: \"12px 8px!important\",\n verticalAlign: \"middle\",\n fontSize: \"1em\",\n borderBottom: \"none\",\n borderTop: \"1px solid \" + grayColor[5],\n position: \"relative\",\n [theme.breakpoints.down(\"sm\")]: {\n minHeight: \"24px\",\n minWidth: \"32px\"\n }\n },\n tableCellTotal: {\n fontWeight: \"500\",\n fontSize: \"1.25em\",\n paddingTop: \"14px\",\n textAlign: \"right\"\n },\n tableCellAmount: {\n fontSize: \"26px\",\n fontWeight: \"300\",\n marginTop: \"5px\",\n textAlign: \"right\"\n },\n tableResponsive: {\n // width: \"100%\",\n minHeight: \"0.1%\",\n overflowX: \"auto\"\n },\n tableStripedRow: {\n backgroundColor: grayColor[12]\n },\n tableRowHover: {\n \"&:hover\": {\n backgroundColor: grayColor[13]\n }\n },\n warningRow: {\n backgroundColor: warningColor[0],\n \"&:hover\": {\n backgroundColor: warningColor[0]\n }\n },\n dangerRow: {\n backgroundColor: dangerColor[0],\n \"&:hover\": {\n backgroundColor: dangerColor[0]\n }\n },\n blueSkyRow: {\n backgroundColor: blueSkyColor[0],\n \"&:hover\": {\n backgroundColor: blueSkyColor[0]\n }\n },\n successRow: {\n backgroundColor: successColor[6],\n \"&:hover\": {\n backgroundColor: successColor[5]\n }\n },\n infoRow: {\n backgroundColor: infoColor[6],\n \"&:hover\": {\n backgroundColor: infoColor[5]\n }\n },\n tableRowBody: {\n height: \"48px\"\n },\n tableRowHead: {\n height: \"56px\"\n }\n});\n\nexport default tableStyle;\n","import React from \"react\";\nimport cx from \"classnames\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/tableStyle\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CustomTable(props) {\n const classes = useStyles();\n const {\n tableHead,\n tableData,\n tableHeaderColor,\n hover,\n colorsColls,\n coloredColls,\n customCellClasses,\n customClassesForCells,\n striped,\n tableShopping,\n customHeadCellClasses,\n customHeadClassesForCells\n } = props;\n return (\n Datetime Picker
\n\n
Date Picker
\n\n
Time Picker
\n\n
\n
\n
\n setCheckedA(event.target.checked)}\n value=\"checkedA\"\n classes={{\n switchBase: classes.switchBase,\n checked: classes.switchChecked,\n thumb: classes.switchIcon,\n track: classes.switchBar\n }}\n />\n }\n classes={{\n label: classes.label\n }}\n label=\"Toggle is on\"\n />\n
\n \n setCheckedB(event.target.checked)}\n value=\"checkedB\"\n classes={{\n switchBase: classes.switchBase,\n checked: classes.switchChecked,\n thumb: classes.switchIcon,\n track: classes.switchBar\n }}\n />\n }\n classes={{\n label: classes.label\n }}\n label=\"Toggle is off\"\n />\n
\n \n
\n
\n
\n
\n \n
\n \n {tableHead !== undefined ? (\n
\n
\n );\n}\n\nCustomTable.defaultProps = {\n tableHeaderColor: \"gray\",\n hover: false,\n colorsColls: [],\n coloredColls: [],\n striped: false,\n customCellClasses: [],\n customClassesForCells: [],\n customHeadCellClasses: [],\n customHeadClassesForCells: []\n};\n\nCustomTable.propTypes = {\n tableHeaderColor: PropTypes.oneOf([\n \"warning\",\n \"primary\",\n \"danger\",\n \"success\",\n \"info\",\n \"rose\",\n \"gray\",\n \"blueSky\"\n ]),\n tableHead: PropTypes.arrayOf(PropTypes.string),\n // Of(PropTypes.arrayOf(PropTypes.node)) || Of(PropTypes.object),\n tableData: PropTypes.array,\n hover: PropTypes.bool,\n coloredColls: PropTypes.arrayOf(PropTypes.number),\n // Of([\"warning\",\"primary\",\"danger\",\"success\",\"info\",\"rose\",\"gray\"]) - colorsColls\n colorsColls: PropTypes.array,\n customCellClasses: PropTypes.arrayOf(PropTypes.string),\n customClassesForCells: PropTypes.arrayOf(PropTypes.number),\n customHeadCellClasses: PropTypes.arrayOf(PropTypes.string),\n customHeadClassesForCells: PropTypes.arrayOf(PropTypes.number),\n striped: PropTypes.bool,\n // this will cause some changes in font\n tableShopping: PropTypes.bool\n};\n","import buttonGroupStyle from \"../buttonGroupStyle.js\";\nimport customCheckboxRadioSwitch from \"../customCheckboxRadioSwitch.js\";\nimport {\n cardTitle,\n grayColor\n} from \"../../material-dashboard-pro-react.js\";\n\nconst extendedTablesStyle = {\n ...customCheckboxRadioSwitch,\n ...buttonGroupStyle,\n right: {\n textAlign: \"right\"\n },\n center: {\n textAlign: \"center\"\n },\n description: {\n maxWidth: \"150px\"\n },\n actionButton: {\n margin: \"0 0 0 5px\",\n padding: \"5px\",\n \"& svg,& .fab,& .fas,& .far,& .fal,& .material-icons\": {\n marginRight: \"0px\"\n }\n },\n icon: {\n verticalAlign: \"middle\",\n width: \"17px\",\n height: \"17px\",\n top: \"-1px\",\n position: \"relative\"\n },\n imgContainer: {\n width: \"120px\",\n maxHeight: \"160px\",\n overflow: \"hidden\",\n display: \"block\"\n },\n img: {\n width: \"100%\",\n height: \"auto\",\n verticalAlign: \"middle\",\n border: \"0\"\n },\n tdName: {\n minWidth: \"200px\",\n fontWeight: \"400\",\n fontSize: \"1.5em\"\n },\n tdNameAnchor: {\n color: grayColor[2]\n },\n tdNameSmall: {\n color: grayColor[0],\n fontSize: \"0.75em\",\n fontWeight: \"300\"\n },\n tdNumber: {\n textAlign: \"right\",\n minWidth: \"145px\",\n fontWeight: \"300\",\n fontSize: \"1.3em !important\"\n },\n tdNumberSmall: {\n marginRight: \"3px\"\n },\n tdNumberAndButtonGroup: {\n lineHeight: \"1 !important\"\n },\n positionAbsolute: {\n position: \"absolute\",\n right: \"0\",\n top: \"0\"\n },\n customFont: {\n fontSize: \"16px !important\"\n },\n actionButtonRound: {\n width: \"auto\",\n height: \"auto\",\n minWidth: \"auto\"\n },\n cardIconTitle: {\n ...cardTitle,\n marginTop: \"15px\",\n marginBottom: \"0px\"\n }\n};\n\nexport default extendedTablesStyle;\n","import React from \"react\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\n\n// material-ui icons\nimport Assignment from \"@material-ui/icons/Assignment\";\nimport Person from \"@material-ui/icons/Person\";\nimport Edit from \"@material-ui/icons/Edit\";\nimport Close from \"@material-ui/icons/Close\";\nimport Check from \"@material-ui/icons/Check\";\nimport Remove from \"@material-ui/icons/Remove\";\nimport Add from \"@material-ui/icons/Add\";\nimport KeyboardArrowRight from \"@material-ui/icons/KeyboardArrowRight\";\n\n// core components\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\nimport Table from \"../../components/Table/Table.js\";\nimport Button from \"../../components/CustomButtons/Button.js\";\nimport Card from \"../../components/Card/Card.js\";\nimport CardBody from \"../../components/Card/CardBody.js\";\nimport CardIcon from \"../../components/Card/CardIcon.js\";\nimport CardHeader from \"../../components/Card/CardHeader.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/extendedTablesStyle.js\";\n\nimport product1 from \"../../assets/img/product1.jpg\";\nimport product2 from \"../../assets/img/product2.jpg\";\nimport product3 from \"../../assets/img/product3.jpg\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function ExtendedTables() {\n const [checked, setChecked] = React.useState([]);\n const handleToggle = value => {\n const currentIndex = checked.indexOf(value);\n const newChecked = [...checked];\n\n if (currentIndex === -1) {\n newChecked.push(value);\n } else {\n newChecked.splice(currentIndex, 1);\n }\n setChecked(newChecked);\n };\n const classes = useStyles();\n const fillButtons = [\n { color: \"info\", icon: Person },\n { color: \"success\", icon: Edit },\n { color: \"danger\", icon: Close }\n ].map((prop, key) => {\n return (\n \n );\n });\n const simpleButtons = [\n { color: \"info\", icon: Person },\n { color: \"success\", icon: Edit },\n { color: \"danger\", icon: Close }\n ].map((prop, key) => {\n return (\n Simple Table
\nStriped Table
\nShopping Cart Table
\n\n \n by Dolce&Gabbana\n \n ,\n \"Red\",\n \"M\",\n \n € 549\n ,\n \n 1{` `}\n
\n \n \n
\n ,\n \n € 549\n ,\n \n ],\n [\n \n 
\n
,\n \n \n Short Pants{\" \"}\n \n \n by Pucci\n ,\n \"Purple\",\n \"M\",\n \n € 499\n ,\n \n 2{` `}\n
\n \n \n
\n ,\n \n € 998\n ,\n \n ],\n [\n \n 
\n
,\n \n \n Pencil Skirt\n \n \n by Valentino\n ,\n \"White\",\n \"XL\",\n \n € 799\n ,\n \n 1{` `}\n
\n \n \n
\n ,\n \n € 799\n ,\n \n ],\n {\n total: true,\n colspan: \"5\",\n amount: (\n \n €2,346\n \n )\n },\n {\n purchase: true,\n colspan: \"6\",\n col: {\n colspan: 2,\n text: (\n \n )\n }\n }\n ]}\n tableShopping\n customHeadCellClasses={[\n classes.center,\n classes.description,\n classes.description,\n classes.right,\n classes.right,\n classes.right\n ]}\n customHeadClassesForCells={[0, 2, 3, 4, 5, 6]}\n customCellClasses={[\n classes.tdName,\n classes.customFont,\n classes.customFont,\n classes.tdNumber,\n classes.tdNumber + \" \" + classes.tdNumberAndButtonGroup,\n classes.tdNumber\n ]}\n customClassesForCells={[1, 2, 3, 4, 5, 6]}\n />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n \n
\n );\n}\n","import { boxShadow } from \"../../material-dashboard-pro-react.js\";\n\nconst iconsStyle = {\n iframe: {\n width: \"100%\",\n height: \"500px\",\n border: \"0\",\n ...boxShadow\n },\n iframeContainer: {\n margin: \"0 -20px 0\"\n }\n};\n\nexport default iconsStyle;\n","/*eslint-disable*/\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Hidden from \"@material-ui/core/Hidden\";\n\n// core components\nimport Heading from \"../../components/Heading/Heading.js\";\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\nimport Card from \"../../components/Card/Card.js\";\nimport CardBody from \"../../components/Card/CardBody.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/iconsStyle\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Icons() {\n const classes = useStyles();\n return (\n \n XS Grid Always Horizontal\n
\n{`xs={4}`}\n {`xs={4}`}\n {`xs={4}`}\n \n SM Grid Collapsed at 768px\n
\n{`sm={4}`}\n {`sm={4}`}\n {`sm={4}`}\n \n MD Grid Collapsed at 992px\n
\n{`md={4}`}\n {`md={4}`}\n {`md={4}`}\n \n LG Grid Collapsed at 1200px\n
\n{`lg={4}`}\n {`lg={4}`}\n {`lg={4}`}\n \n Mixed Grid Showing different sizes on different screens\n
\n{`sm={6} lg={3}`}\n {`sm={6} lg={3}`}\n {`sm={6} lg={3}`}\n {`sm={6} lg={3}`}\n \n Offset Grid Adding some space when needed\n
\n{`md={3}`}\n {`md={3}`}\n {`md={3}`}\n {`md={4}`}\n {`md={4}`}\n {`md={6}`}\n Paragraphs
\nSome Title Here
\n\n One morning, when Gregor Samsa woke from troubled dreams, he\n found himself transformed in his bed into a horrible vermin. He\n lay on his armour-like back, and if he lifted his head a little\n he could see his brown belly, slightly domed and divided by\n arches into stiff sections. The bedding was hardly able to cover\n it and seemed ready to slide off any moment. His many legs,\n pitifully thin compared with the size of the rest of him, waved\n about helplessly as he looked. {'\"'}What{\"'\"}s happened to me?\n {'\"'} he thought.\n
\nAnother Title Here
\n\n One morning, when Gregor Samsa woke from troubled dreams, he\n found himself transformed in his bed into a horrible vermin. He\n lay on his armour-like back, and if he lifted his head a little\n he could see his brown belly, slightly domed and divided by\n arches into stiff sections. The bedding was hardly able to cover\n it and seemed ready to slide off any moment. His many legs,\n pitifully thin compared with the size of the rest of him, waved\n about helplessly as he looked. {'\"'}What{\"'\"}s happened to me?\n {'\"'} he thought.\n
\n\n
Some Title Here
\n\n One morning, when Gregor Samsa woke from troubled dreams, he\n found himself transformed in his bed into a horrible vermin. He\n lay on his armour-like back, and if he lifted his head a little\n he could see his brown belly, slightly domed and divided by\n arches into stiff sections. The bedding was hardly able to cover\n it and seemed ready to slide off any moment.\n
\nAnother Title Here
\n\n One morning, when Gregor Samsa woke from troubled dreams, he\n found himself transformed in his bed into a horrible vermin. He\n lay on his armour-like back, and if he lifted his head a little\n he could see his brown belly, slightly domed and divided by\n arches into stiff sections. The bedding was hardly able to cover\n it and seemed ready to slide off any moment.\n
\nAnother Title Here
\n\n One morning, when Gregor Samsa woke from troubled dreams, he\n found himself transformed in his bed into a horrible vermin. He\n lay on his armour-like back, and if he lifted his head a little\n he could see his brown belly, slightly domed and divided by\n arches into stiff sections. The bedding was hardly able to cover\n it and seemed ready to slide off any moment.\n
\n\n
Some Title Here
\n\n One morning, when Gregor Samsa woke from troubled dreams, he\n found himself transformed in his bed into a horrible vermin. He\n lay on his armour-like back, and if he lifted his head a little\n he could see his brown belly, slightly domed and divided by\n arches into stiff sections. The bedding was hardly able to cover\n it and seemed ready to slide off any moment.\n
\nAnother Title Here
\n\n One morning, when Gregor Samsa woke from troubled dreams, he\n found himself transformed in his bed into a horrible vermin. He\n lay on his armour-like back, and if he lifted his head a little\n he could see his brown belly, slightly domed and divided by\n arches into stiff sections. The bedding was hardly able to cover\n it and seemed ready to slide off any moment. One morning, when\n Gregor Samsa woke from troubled dreams, he found himself\n transformed in his bed into a horrible vermin. He lay on his\n armour-like back, and if he lifted his head a little he could\n see his brown belly, slightly domed and divided by arches into\n stiff sections. The bedding was hardly able to cover it and\n seemed ready to slide off any moment.\n
\nYour browser does not support iframes.
\n \n\n The icons are visible on Desktop mode inside an iframe. Since\n the iframe is not working on Mobile and Tablets please visit\n the icons on their original page on Google. Check the\n \n Material Icons\n \n
\n \n {children}\n
\n );\n}\n\nCardAvatar.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n profile: PropTypes.bool,\n plain: PropTypes.bool,\n testimonial: PropTypes.bool,\n testimonialFooter: PropTypes.bool\n};\n","import {\n cardTitle,\n container,\n whiteColor,\n blackColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst lockScreenPageStyle = theme => ({\n cardTitle,\n container: {\n ...container,\n zIndex: \"4\",\n [theme.breakpoints.down(\"sm\")]: {\n paddingBottom: \"100px\"\n }\n },\n customCardClass: {\n width: \"240px\",\n margin: \"60px auto 0\",\n color: whiteColor,\n display: \"block\",\n transform: \"translate3d(\" + hexToRgb(blackColor) + \")\",\n transition: \"all 300ms linear\"\n },\n cardHidden: {\n opacity: \"0\",\n transform: \"translate3d(0, -60px, 0)\"\n },\n cardAvatar: {\n maxWidth: \"90px\",\n maxHeight: \"90px\",\n marginTop: \"-45px\"\n },\n customCardFooterClass: {\n border: \"none\",\n paddingTop: \"0\"\n },\n justifyContentCenter: {\n justifyContent: \"center !important\"\n }\n});\n\nexport default lockScreenPageStyle;\n","import React from \"react\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\n// core components\nimport Button from \"../../components/CustomButtons/Button.js\";\nimport CustomInput from \"../../components/CustomInput/CustomInput.js\";\nimport Card from \"../../components/Card/Card.js\";\nimport CardBody from \"../../components/Card/CardBody.js\";\nimport CardAvatar from \"../../components/Card/CardAvatar.js\";\nimport CardFooter from \"../../components/Card/CardFooter.js\";\n\nimport avatar from \"../../assets/img/faces/avatar.jpg\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/lockScreenPageStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function LockScreenPage() {\n const [cardAnimaton, setCardAnimation] = React.useState(\"cardHidden\");\n React.useEffect(() => {\n let id = setTimeout(function() {\n setCardAnimation(\"\");\n }, 700);\n // Specify how to clean up after this effect:\n return function cleanup() {\n window.clearTimeout(id);\n };\n });\n const classes = useStyles();\n return (\n \n \n
\n );\n}\n","import {\n defaultFont,\n primaryBoxShadow,\n infoBoxShadow,\n successBoxShadow,\n warningBoxShadow,\n dangerBoxShadow,\n roseBoxShadow,\n blueSkyBoxShadow,\n whiteColor,\n blackColor,\n primaryColor,\n infoColor,\n successColor,\n warningColor,\n dangerColor,\n roseColor,\n blueSkyColor,\n grayColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst snackbarContentStyle = {\n root: {\n ...defaultFont,\n flexWrap: \"unset\",\n position: \"relative\",\n padding: \"20px 15px\",\n lineHeight: \"20px\",\n marginBottom: \"20px\",\n fontSize: \"14px\",\n backgroundColor: \"white\",\n color: grayColor[6],\n borderRadius: \"3px\",\n boxShadow:\n \"0 12px 20px -10px rgba(\" +\n hexToRgb(whiteColor) +\n \", 0.28), 0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 7px 8px -5px rgba(\" +\n hexToRgb(whiteColor) +\n \", 0.2)\"\n },\n top20: {\n top: \"20px\"\n },\n top40: {\n top: \"40px\"\n },\n info: {\n backgroundColor: infoColor[3],\n color: whiteColor,\n ...infoBoxShadow\n },\n success: {\n backgroundColor: successColor[3],\n color: whiteColor,\n ...successBoxShadow\n },\n warning: {\n backgroundColor: warningColor[3],\n color: whiteColor,\n ...warningBoxShadow\n },\n danger: {\n backgroundColor: dangerColor[3],\n color: whiteColor,\n ...dangerBoxShadow\n },\n primary: {\n backgroundColor: primaryColor[3],\n color: whiteColor,\n ...primaryBoxShadow\n },\n rose: {\n backgroundColor: roseColor[3],\n color: whiteColor,\n ...roseBoxShadow\n },\n blueSky: {\n backgroundColor: blueSkyColor[3],\n color: whiteColor,\n ...blueSkyBoxShadow\n },\n message: {\n padding: \"0\",\n display: \"block\",\n maxWidth: \"89%\"\n },\n close: {\n width: \"11px\",\n height: \"11px\"\n },\n iconButton: {\n width: \"24px\",\n height: \"24px\",\n padding: \"0\"\n },\n icon: {\n width: \"38px\",\n height: \"38px\",\n display: \"block\",\n left: \"15px\",\n position: \"absolute\",\n marginTop: \"-39px\",\n fontSize: \"20px\",\n backgroundColor: whiteColor,\n padding: \"9px\",\n borderRadius: \"50%\",\n maxWidth: \"38px\",\n boxShadow:\n \"0 10px 30px -12px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.42), 0 4px 25px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.2)\"\n },\n infoIcon: {\n color: successColor[3]\n },\n successIcon: {\n color: successColor[3]\n },\n warningIcon: {\n color: warningColor[3]\n },\n dangerIcon: {\n color: dangerColor[3]\n },\n primaryIcon: {\n color: primaryColor[3]\n },\n roseIcon: {\n color: roseColor[3]\n },\n blueSkyIcon: {\n color: blueSkyColor[3]\n },\n iconMessage: {\n paddingLeft: \"50px\",\n display: \"block\"\n }\n};\n\nexport default snackbarContentStyle;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport cx from \"classnames\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Snack from \"@material-ui/core/SnackbarContent\";\nimport IconButton from \"@material-ui/core/IconButton\";\n\n// @material-ui/icons\nimport Close from \"@material-ui/icons/Close\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/snackbarContentStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function SnackbarContent(props) {\n const classes = useStyles();\n const { message, color, close, icon } = props;\n var action = [];\n const messageClasses = cx({\n [classes.iconMessage]: icon !== undefined\n });\n if (close !== undefined) {\n action = [\n \n \n \n {title}\n \n \n \n \n
\n );\n}\n\nInstruction.defaultProps = {\n imageAlt: \"...\"\n};\n\nInstruction.propTypes = {\n title: PropTypes.node.isRequired,\n text: PropTypes.node.isRequired,\n image: PropTypes.string.isRequired,\n imageAlt: PropTypes.string,\n className: PropTypes.string,\n imageClassName: PropTypes.string\n};\n","import { grayColor } from \"../material-dashboard-pro-react.js\";\n\nconst modalStyle = theme => ({\n modalRoot: {\n overflow: \"auto\",\n alignItems: \"unset\",\n justifyContent: \"unset\"\n },\n modal: {\n [theme.breakpoints.up(\"sm\")]: {\n maxWidth: \"500px\",\n margin: \"auto\"\n },\n borderRadius: \"6px\",\n marginTop: \"100px !important\",\n overflow: \"visible\",\n maxHeight: \"unset\",\n position: \"relative\",\n height: \"fit-content\"\n },\n modalHeader: {\n borderBottom: \"none\",\n paddingTop: \"24px\",\n paddingRight: \"24px\",\n paddingBottom: \"0\",\n paddingLeft: \"24px\",\n minHeight: \"16.43px\"\n },\n modalTitle: {\n margin: \"0\",\n lineHeight: \"1.42857143\"\n },\n modalCloseButton: {\n color: grayColor[0],\n marginTop: \"-12px\",\n WebkitAppearance: \"none\",\n padding: \"0\",\n cursor: \"pointer\",\n background: \"0 0\",\n border: \"0\",\n fontSize: \"inherit\",\n opacity: \".9\",\n textShadow: \"none\",\n fontWeight: \"700\",\n lineHeight: \"1\",\n float: \"right\"\n },\n modalClose: {\n width: \"16px\",\n height: \"16px\"\n },\n modalBody: {\n paddingTop: \"24px\",\n paddingRight: \"24px\",\n paddingBottom: \"16px\",\n paddingLeft: \"24px\",\n position: \"relative\",\n overflow: \"visible\"\n },\n modalFooter: {\n padding: \"15px\",\n textAlign: \"right\",\n paddingTop: \"0\",\n margin: \"0\"\n },\n modalFooterCenter: {\n marginLeft: \"auto\",\n marginRight: \"auto\"\n },\n instructionNoticeModal: {\n marginBottom: \"25px\"\n },\n imageNoticeModal: {\n maxWidth: \"150px\"\n },\n modalSmall: {\n width: \"300px\"\n },\n modalSmallBody: {\n paddingTop: \"0\"\n },\n modalSmallFooterFirstButton: {\n margin: \"0\",\n paddingLeft: \"16px\",\n paddingRight: \"16px\",\n width: \"auto\"\n },\n modalSmallFooterSecondButton: {\n marginBottom: \"0\",\n marginLeft: \"5px\"\n }\n});\n\nexport default modalStyle;\n","import {\n defaultFont,\n grayColor\n} from \"../../material-dashboard-pro-react.js\";\nimport modalStyle from \"../modalStyle.js\";\n\nconst notificationsStyle = theme => ({\n cardTitle: {\n marginTop: \"0\",\n marginBottom: \"3px\",\n color: grayColor[2],\n fontSize: \"18px\"\n },\n cardHeader: {\n zIndex: \"3\"\n },\n cardSubtitle: {\n ...defaultFont,\n color: grayColor[0],\n fontSize: \"14px\",\n margin: \"0 0 10px\"\n },\n center: {\n textAlign: \"center\"\n },\n right: {\n textAlign: \"right\"\n },\n left: {\n textAlign: \"left\"\n },\n marginRight: {\n marginRight: \"5px\"\n },\n modalSectionTitle: {\n marginTop: \"30px\"\n },\n ...modalStyle(theme)\n});\n\nexport default notificationsStyle;\n","/*eslint-disable*/\nimport React from \"react\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Slide from \"@material-ui/core/Slide\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport DialogActions from \"@material-ui/core/DialogActions\";\n\n// @material-ui/icons\nimport AddAlert from \"@material-ui/icons/AddAlert\";\nimport Close from \"@material-ui/icons/Close\";\n\n// core components\nimport Heading from \"../../components/Heading/Heading.js\";\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\nimport SnackbarContent from \"../../components/Snackbar/SnackbarContent.js\";\nimport Button from \"../../components/CustomButtons/Button.js\";\nimport Snackbar from \"../../components/Snackbar/Snackbar.js\";\nimport Instruction from \"../../components/Instruction/Instruction.js\";\nimport Card from \"../../components/Card/Card.js\";\nimport CardBody from \"../../components/Card/CardBody.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/notificationsStyle.js\";\n\nimport noticeModal1 from \"../../assets/img/card-1.jpeg\";\nimport noticeModal2 from \"../../assets/img/card-2.jpeg\";\n\nconst useStyles = makeStyles(styles);\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return {text}
\n\n 
\n
\n \n \n Handcrafted by our friends from{\" \"}\n \n Material UI\n {\" \"}\n and styled by{\" \"}\n \n Creative Tim\n \n . Please checkout the{\" \"}\n \n full documentation\n \n .\n \n }\n />\n \n \n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n setClassicModal(true)}\n >\n Classic modal\n \n setClassicModal(false)}\n aria-labelledby=\"classic-modal-slide-title\"\n aria-describedby=\"classic-modal-slide-description\"\n >\n \n setClassicModal(false)}\n >\n \n \n \n setClassicModal(false)}\n color=\"danger\"\n simple\n >\n Close\n \n \n \n setNoticeModal(true)}\n >\n Notice Modal\n \n setNoticeModal(false)}\n aria-labelledby=\"notice-modal-slide-title\"\n aria-describedby=\"notice-modal-slide-description\"\n >\n \n setNoticeModal(false)}\n >\n \n \n The first step is to create an account at{\" \"}\n \n Creative Tim\n \n . You can choose a social network or go for the\n classic version, whatever works best for you.\n \n }\n image={noticeModal1}\n className={classes.instructionNoticeModal}\n imageClassName={classes.imageNoticeModal}\n />\n \n The first step is to create an account at{\" \"}\n \n Creative Tim\n \n . You can choose a social network or go for the\n classic version, whatever works best for you.\n \n }\n image={noticeModal2}\n className={classes.instructionNoticeModal}\n imageClassName={classes.imageNoticeModal}\n />\n \n setNoticeModal(false)}\n color=\"info\"\n round\n >\n Sounds Good\n \n \n \n setSmallModal(true)}\n >\n Small alert modal\n \n setSmallModal(false)}\n aria-labelledby=\"small-modal-slide-title\"\n aria-describedby=\"small-modal-slide-description\"\n >\n \n setSmallModal(false)}\n >\n \n \n setSmallModal(false)}\n color=\"transparent\"\n className={classes.modalSmallFooterFirstButton}\n >\n Never Mind\n \n setSmallModal(false)}\n color=\"success\"\n simple\n className={\n classes.modalSmallFooterFirstButton +\n \" \" +\n classes.modalSmallFooterSecondButton\n }\n >\n Yes\n \n \n \n \n \n
\n \n \n \n \n \n );\n}\n","import {\n roseColor,\n primaryColor,\n infoColor,\n successColor,\n warningColor,\n dangerColor,\n whiteColor,\n blackColor,\n grayColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst navPillsStyle = theme => ({\n root: {\n marginTop: \"20px\",\n paddingLeft: \"0\",\n marginBottom: \"0\",\n overflow: \"visible !important\"\n },\n flexContainer: {\n [theme.breakpoints.down(\"xs\")]: {\n display: \"flex\",\n flexWrap: \"wrap\"\n }\n },\n displayNone: {\n display: \"none !important\"\n },\n fixed: {\n overflow: \"visible !important\"\n },\n horizontalDisplay: {\n display: \"block\"\n },\n pills: {\n float: \"left\",\n position: \"relative\",\n display: \"block\",\n padding: \"10px 15px\",\n color: grayColor[6],\n height: \"auto\",\n opacity: \"1\",\n margin: \"0 5px\",\n fontSize: \"12px\",\n maxWidth: \"100%\",\n minWidth: \"100px\",\n minHeight: \"48px\",\n textAlign: \"center\",\n transition: \"all .3s\",\n fontWeight: \"500\",\n lineHeight: \"24px\",\n borderRadius: \"30px\",\n textTransform: \"uppercase\",\n letterSpacing: \"initial\"\n },\n pillsWithIcons: {\n borderRadius: \"4px\"\n },\n tabIcon: {\n width: \"30px\",\n height: \"30px\",\n display: \"block\",\n margin: \"15px 0 !important\"\n },\n horizontalPills: {\n width: \"100%\",\n float: \"none !important\",\n \"& + button\": {\n margin: \"10px 0\"\n }\n },\n labelContainer: {\n padding: \"0!important\",\n color: \"inherit\"\n },\n label: {\n lineHeight: \"24px\",\n textTransform: \"uppercase\",\n fontSize: \"12px\",\n fontWeight: \"500\",\n position: \"relative\",\n display: \"block\",\n color: \"inherit\"\n },\n contentWrapper: {\n marginTop: \"20px\"\n },\n primary: {\n \"&,&:hover\": {\n color: whiteColor,\n backgroundColor: primaryColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.4)\"\n }\n },\n info: {\n \"&,&:hover\": {\n color: whiteColor,\n backgroundColor: infoColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.4)\"\n }\n },\n success: {\n \"&,&:hover\": {\n color: whiteColor,\n backgroundColor: successColor[0],\n boxShadow:\n \"0 2px 2px 0 rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.14), 0 3px 1px -2px rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.2), 0 1px 5px 0 rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.12)\"\n }\n },\n warning: {\n \"&,&:hover\": {\n color: whiteColor,\n backgroundColor: warningColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.4)\"\n }\n },\n danger: {\n \"&,&:hover\": {\n color: whiteColor,\n backgroundColor: dangerColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.4)\"\n }\n },\n rose: {\n \"&,&:hover\": {\n color: whiteColor,\n backgroundColor: roseColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(roseColor[0]) +\n \", 0.4)\"\n }\n },\n alignCenter: {\n alignItems: \"center\",\n justifyContent: \"center\"\n }\n});\n\nexport default navPillsStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\nimport SwipeableViews from \"react-swipeable-views\";\n\n// material-ui components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Tab from \"@material-ui/core/Tab\";\nimport Tabs from \"@material-ui/core/Tabs\";\n\n// core components\nimport GridContainer from \"../Grid/GridContainer.js\";\nimport GridItem from \"../Grid/GridItem.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/navPillsStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function NavPills(props) {\n const [active, setActive] = React.useState(props.active);\n const handleChange = (event, active) => {\n setActive(active);\n };\n const handleChangeIndex = index => {\n setActive(index);\n };\n const classes = useStyles();\n const { tabs, direction, color, horizontal, alignCenter } = props;\n const flexContainerClasses = classNames({\n [classes.flexContainer]: true,\n [classes.horizontalDisplay]: horizontal !== undefined\n });\n const tabButtons = (\n \n
\n Notifications Style
\n\n
\n
\n
\n
\n
\n \n
\n Notification states
\n\n
\n \n \n \n \n \n \n showNotification(\"tl\")}\n >\n Top Left\n \n setTL(false)}\n close\n />\n \n \n showNotification(\"tc\")}\n >\n Top Center\n \n setTC(false)}\n close\n />\n \n \n showNotification(\"tr\")}\n >\n Top Right\n \n setTR(false)}\n close\n />\n \n \n \n \n showNotification(\"bl\")}\n >\n Bottom Left\n \n setBL(false)}\n close\n />\n \n \n showNotification(\"bc\")}\n >\n Bottom Center\n \n setBC(false)}\n close\n />\n \n \n showNotification(\"br\")}\n >\n Bottom Right\n \n setBR(false)}\n close\n />\n \n \n \n \n \n
\n \n
\n \n Notifications Places\n
\n\n Click to view notifications\n
\nModal
\nModal title
\n \n\n Far far away, behind the word mountains, far from the\n countries Vokalia and Consonantia, there live the\n blind texts. Separated they live in Bookmarksgrove\n right at the coast of the Semantics, a large language\n ocean. A small river named Duden flows by their place\n and supplies it with the necessary regelialia. It is a\n paradisematic country, in which roasted parts of\n sentences fly into your mouth. Even the all-powerful\n Pointing has no control about the blind texts it is an\n almost unorthographic life One day however a small\n line of blind text by the name of Lorem Ipsum decided\n to leave for the far World of Grammar.\n
\n \nNotice Modal
\n \n\n If you have more questions, don{\"'\"}t hesitate to\n contact us or send us a tweet @creativetim. We{\"'\"}\n re here to help!\n
\n \nAre you sure you want to do this?
\n \n\n \n {tabs.map((prop, key) => {\n return (\n
\n );\n return horizontal !== undefined ? (\n \n {prop.tabContent}\n
\n );\n })}\n \n \n {tabButtons}\n {tabContent}\n
\n );\n}\n\nNavPills.defaultProps = {\n active: 0,\n color: \"primary\"\n};\n\nNavPills.propTypes = {\n // index of the default active pill\n active: PropTypes.number,\n tabs: PropTypes.arrayOf(\n PropTypes.shape({\n tabButton: PropTypes.string,\n tabIcon: PropTypes.object,\n tabContent: PropTypes.node\n })\n ).isRequired,\n color: PropTypes.oneOf([\n \"primary\",\n \"warning\",\n \"danger\",\n \"success\",\n \"info\",\n \"rose\"\n ]),\n direction: PropTypes.string,\n horizontal: PropTypes.shape({\n tabsGrid: PropTypes.object,\n contentGrid: PropTypes.object\n }),\n alignCenter: PropTypes.bool\n};\n","/// \n {collapses.map((prop, key) => {\n return (\n \n \n {prop.content}\n \n \n );\n })}\n
\n );\n}\n\nAccordion.defaultProps = {\n active: -1\n};\n\nAccordion.propTypes = {\n // index of the default active collapse\n active: PropTypes.number,\n collapses: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n content: PropTypes.node\n })\n ).isRequired\n};\n","/// {prop.title}
\n \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 \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 \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 Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI.\r\n \r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Location\",\r\n tabIcon: LocationOn,\r\n tabContent: (\r\n \r\n \r\n \r\n \r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely deliverables\r\n for real-time schemas.\r\n
\r\n
\r\n Dramatically maintain clicks-and-mortar solutions without\r\n functional solutions.\r\n \r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Legal Info\",\r\n tabIcon: Gavel,\r\n tabContent: (\r\n \r\n \r\n \r\n \r\n Completely synergize resource taxing relationships via\r\n premier niche markets. Professionally cultivate one-to-one\r\n customer service with robust ideas.\r\n
\r\n
\r\n Dynamically innovate resource-leveling customer service\r\n for state of the art customer service.\r\n \r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Help Center\",\r\n tabIcon: HelpOutline,\r\n tabContent: (\r\n \r\n \r\n \r\n \r\n From the seamless transition of glass and metal to the\r\n streamlined profile, every detail was carefully considered\r\n to enhance your experience. So while its display is\r\n larger, the phone feels just right.\r\n
\r\n
\r\n Another Text. The first thing you notice when you hold the\r\n phone is how great it feels in your hand. The cover glass\r\n curves down around the sides to meet the anodized aluminum\r\n enclosure in a remarkable, simplified design.\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 {\n primaryColor,\n warningColor,\n dangerColor,\n successColor,\n infoColor,\n roseColor,\n grayColor,\n whiteColor,\n blueSkyColor\n} from \"../../material-dashboard-pro-react.js\";\n\nconst badgeStyle = {\n badge: {\n borderRadius: \"12px\",\n padding: \"5px 12px\",\n textTransform: \"uppercase\",\n fontSize: \"10px\",\n fontWeight: \"700\",\n lineHeight: \"1\",\n color: whiteColor,\n textAlign: \"center\",\n verticalAlign: \"baseline\",\n display: \"inline-block\"\n },\n primary: {\n backgroundColor: primaryColor[0]\n },\n warning: {\n backgroundColor: warningColor[0]\n },\n blueSky: {\n backgroundColor: blueSkyColor[0]\n },\n danger: {\n backgroundColor: dangerColor[0]\n },\n success: {\n backgroundColor: successColor[0]\n },\n info: {\n backgroundColor: infoColor[0]\n },\n rose: {\n backgroundColor: roseColor[0]\n },\n gray: {\n backgroundColor: grayColor[0]\n }\n};\n\nexport default badgeStyle;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/badgeStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Badge(props) {\n const { color, children } = props;\n const classes = useStyles();\n return (\n {children}\n );\n}\n\nBadge.propTypes = {\n color: PropTypes.oneOf([\n \"primary\",\n \"warning\",\n \"danger\",\n \"success\",\n \"info\",\n \"rose\",\n \"gray\",\n \"blueSky\"\n ]),\n children: PropTypes.node\n};\n","import {\n infoColor,\n primaryColor,\n successColor,\n dangerColor,\n warningColor,\n whiteColor,\n blackColor,\n grayColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\nconst timelineStyle = theme => ({\n timeline: {\n [theme.breakpoints.down(\"sm\")]: {\n \"&:before\": {\n left: \"5% !important\"\n }\n },\n listStyle: \"none\",\n padding: \"20px 0 20px\",\n position: \"relative\",\n marginTop: \"30px\",\n \"&:before\": {\n top: \"50px\",\n bottom: \"0\",\n position: \"absolute\",\n content: '\" \"',\n width: \"3px\",\n backgroundColor: grayColor[11],\n left: \"50%\",\n marginLeft: \"-1px\"\n }\n },\n timelineSimple: {\n marginTop: \"30px\",\n padding: \"0 0 20px\",\n \"&:before\": {\n left: \"5%\"\n }\n },\n item: {\n marginBottom: \"20px\",\n position: \"relative\",\n \"&:before,&:after\": {\n content: '\" \"',\n display: \"table\"\n },\n \"&:after\": {\n clear: \"both\"\n }\n },\n timelineBadge: {\n [theme.breakpoints.down(\"sm\")]: {\n left: \"5% !important\"\n },\n color: whiteColor,\n width: \"50px\",\n height: \"50px\",\n lineHeight: \"51px\",\n fontSize: \"1.4em\",\n textAlign: \"center\",\n position: \"absolute\",\n top: \"16px\",\n left: \"50%\",\n marginLeft: \"-24px\",\n zIndex: \"100\",\n borderTopRightRadius: \"50%\",\n borderTopLeftRadius: \"50%\",\n borderBottomRightRadius: \"50%\",\n borderBottomLeftRadius: \"50%\"\n },\n timelineSimpleBadge: {\n left: \"5%\"\n },\n info: {\n backgroundColor: infoColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.4)\"\n },\n success: {\n backgroundColor: successColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.4)\"\n },\n danger: {\n backgroundColor: dangerColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(dangerColor[0]) +\n \", 0.4)\"\n },\n warning: {\n backgroundColor: warningColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.4)\"\n },\n primary: {\n backgroundColor: primaryColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.4)\"\n },\n badgeIcon: {\n width: \"24px\",\n height: \"51px\"\n },\n timelinePanel: {\n [theme.breakpoints.down(\"sm\")]: {\n float: \"right !important\",\n width: \"86% !important\",\n \"&:before\": {\n borderLeftWidth: \"0 !important\",\n borderRightWidth: \"15px !important\",\n left: \"-15px !important\",\n right: \"auto !important\"\n },\n \"&:after\": {\n borderLeftWidth: \"0 !important\",\n borderRightWidth: \"14px !important\",\n left: \"-14px !important\",\n right: \"auto !important\"\n }\n },\n width: \"45%\",\n float: \"left\",\n padding: \"5px\",\n marginBottom: \"1px\",\n position: \"relative\",\n boxShadow: \"0 1px 4px 0 rgba(\" + hexToRgb(blackColor) + \", 0.14)\",\n borderRadius: \"6px\",\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.87)\",\n background: whiteColor,\n \"&:before\": {\n position: \"absolute\",\n top: \"26px\",\n right: \"-15px\",\n display: \"inline-block\",\n borderTop: \"15px solid transparent\",\n borderLeft: \"15px solid \" + grayColor[10],\n borderRight: \"0 solid \" + grayColor[10],\n borderBottom: \"15px solid transparent\",\n content: '\" \"'\n },\n \"&:after\": {\n position: \"absolute\",\n top: \"27px\",\n right: \"-14px\",\n display: \"inline-block\",\n borderTop: \"14px solid transparent\",\n borderLeft: \"14px solid \" + whiteColor,\n borderRight: \"0 solid \" + whiteColor,\n borderBottom: \"14px solid transparent\",\n content: '\" \"'\n }\n },\n timelineSimplePanel: {\n width: \"86%\"\n },\n timelinePanelInverted: {\n [theme.breakpoints.up(\"sm\")]: {\n float: \"right\",\n backgroundColor: whiteColor,\n \"&:before\": {\n borderLeftWidth: \"0\",\n borderRightWidth: \"15px\",\n left: \"-15px\",\n right: \"auto\"\n },\n \"&:after\": {\n borderLeftWidth: \"0\",\n borderRightWidth: \"14px\",\n left: \"-14px\",\n right: \"auto\"\n }\n }\n },\n timelineHeading: {\n marginBottom: \"15px\"\n },\n timelineBody: {\n fontSize: \"14px\",\n lineHeight: \"21px\"\n },\n timelineFooter: {\n zIndex: \"1000\",\n position: \"relative\",\n float: \"left\"\n },\n footerTitle: {\n color: grayColor[7],\n fontWeight: \"400\",\n margin: \"10px 0px 0px\"\n },\n footerLine: {\n marginTop: \"10px\",\n marginBottom: \"5px\"\n }\n});\n\nexport default timelineStyle;\n","import React from \"react\";\nimport cx from \"classnames\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\n// core components\nimport Badge from \"../Badge/Badge.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/timelineStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Timeline(props) {\n const classes = useStyles();\n const { stories, simple } = props;\n const timelineClass =\n classes.timeline +\n \" \" +\n cx({\n [classes.timelineSimple]: simple\n });\n return (\n \r\n Navigation Pills - Horizontal Tabs\r\n
\r\n\r\n Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n\r\n
This is very nice.
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Settings\",\r\n tabContent: (\r\n \r\n\r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely\r\n deliverables for real-time schemas.\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions\r\n without functional solutions.\r\n
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Options\",\r\n tabContent: (\r\n \r\n\r\n Completely synergize resource taxing relationships via\r\n premier niche markets. Professionally cultivate\r\n one-to-one customer service with robust ideas.{\" \"}\r\n
\r\n\r\n
\r\n Dynamically innovate resource-leveling customer\r\n service for state of the art customer service.\r\n
\r\n \r\n )\r\n }\r\n ]}\r\n />\r\n\r\n Navigation Pills - Vertical Tabs\r\n
\r\n\r\n Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n\r\n
This is very nice.
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Settings\",\r\n tabContent: (\r\n \r\n\r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely\r\n deliverables for real-time schemas.\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions\r\n without functional solutions.\r\n
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Options\",\r\n tabContent: (\r\n \r\n\r\n Completely synergize resource taxing relationships via\r\n premier niche markets. Professionally cultivate\r\n one-to-one customer service with robust ideas.{\" \"}\r\n
\r\n\r\n
\r\n Dynamically innovate resource-leveling customer\r\n service for state of the art customer service.\r\n
\r\n \r\n )\r\n }\r\n ]}\r\n />\r\nCollapsible Accordion
\r\n\r\n Navigation Pills Icons - Vertical Tabs\r\n
\r\n\r\n Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Schedule\",\r\n tabIcon: Schedule,\r\n tabContent: (\r\n \r\n\r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely\r\n deliverables for real-time schemas.\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions\r\n without functional solutions. Dramatically visualize\r\n customer directed convergence without revolutionary\r\n ROI. Collaboratively administrate empowered markets\r\n via plug-and-play networks. Dynamically procrastinate\r\n B2C users after installed base benefits.\r\n
\r\n \r\n )\r\n }\r\n ]}\r\n />\r\nPage Subcategories
\r\n\r\n
\r\n Description about product\r\n
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI.\r\n
\r\n Location of the product\r\n
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions without\r\n functional solutions.\r\n
\r\n Legal info of the product\r\n
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Dynamically innovate resource-leveling customer service\r\n for state of the art customer service.\r\n
Help center
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Another Text. The first thing you notice when you hold the\r\n phone is how great it feels in your hand. The cover glass\r\n curves down around the sides to meet the anodized aluminum\r\n enclosure in a remarkable, simplified design.\r\n
- \n {stories.map((prop, key) => {\n const panelClasses =\n classes.timelinePanel +\n \" \" +\n cx({\n [classes.timelinePanelInverted]: prop.inverted || simple,\n [classes.timelineSimplePanel]: simple\n });\n const timelineBadgeClasses =\n classes.timelineBadge +\n \" \" +\n classes[prop.badgeColor] +\n \" \" +\n cx({\n [classes.timelineSimpleBadge]: simple\n });\n return (\n
- \n {prop.badgeIcon ? (\n \n\n ) : null}\n
\n \n {prop.title ? (\n\n\n\n ) : null}\n{prop.title} \n{prop.body}\n {prop.footerTitle ? (\n{prop.footerTitle}
\n ) : null}\n {prop.footer ?
: null}\n {prop.footer ? (\n{prop.footer}\n ) : null}\n \n );\n })}\n
{title}
: null}\n {prop.tabContent}
;\n }\n return null;\n })}\n \n {children}\n
\n );\n}\n\nCardText.propTypes = {\n className: PropTypes.string,\n color: PropTypes.oneOf([\n \"warning\",\n \"success\",\n \"danger\",\n \"info\",\n \"primary\",\n \"rose\"\n ]),\n children: PropTypes.node\n};\n","/// \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}>\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n","/*eslint-disable*/\nimport React from \"react\";\nimport {\n useTable,\n useFilters,\n useAsyncDebounce,\n useSortBy,\n usePagination\n} from \"react-table\";\nimport classnames from \"classnames\";\n// A great library for fuzzy filtering/sorting items\nimport matchSorter from \"match-sorter\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport Switch from \"@material-ui/core/Switch\";\nimport Select from \"@material-ui/core/Select\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\n// core components\nimport CustomInput from \"../CustomInput/CustomInput.js\";\nimport GridContainer from \"../Grid/GridContainer.js\";\nimport GridItem from \"../Grid/GridItem.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/customSelectStyle.js\";\n\nconst newStyles = {\n ...styles,\n formControlMargins: {\n margin: \"3px 0 !important\"\n },\n gridContainer: {\n justifyContent: \"center\"\n }\n};\n\nconst useStyles = makeStyles(newStyles);\n\n// Define a default UI for filtering\nfunction DefaultColumnFilter({\n column: { filterValue, preFilteredRows, setFilter }\n}) {\n const count = preFilteredRows.length;\n\n return (\n لتكاليف يبق
\n\n بالإنزال وفي. خيار ومضى العمليات تم ذلك, تم معقل مرمى\n
\nجيوب سليمان، الإنزال
\n\n
\n \n $29\n
\n\n الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.\n
\n \nالمتحدة لتقليعة
\n\n weekend \n
\n \n قائمة\n
\n\n الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.\n
\n \n\n
\n \n بعد و وسوء الأحمر, دون عقبت الهادي أم, قد حول قادة حكومة\n يتعلّق. أخذ حصدت اوروبا أن, كلا مهمّات اسبوعين التخطيط عل.\n وإيطالي الأوروبي و نفس. صفحة احداث أضف ان, هو مرجع نهاية\n لهيمنة كما. تم مايو لفشل المدن دول, جعل أن عسكرياً التّحول\n استرجاع.\n
\nأليك طومسون
\nأليك طومسون@
\n\n {data.length > 10 &&\n \n \n {headerGroups.map(headerGroup => (\n
\n \n
\n \n );\n}\n\n// Define a custom filter filter function!\nfunction filterGreaterThan(rows, id, filterValue) {\n return rows.filter(row => {\n const rowValue = row.values[id];\n return rowValue >= filterValue;\n });\n}\n\n// This is an autoRemove method on the filter function that\n// when given the new filter value and returns true, the filter\n// will be automatically removed. Normally this is just an undefined\n// check, but here, we want to remove the filter if it's not a number\nfilterGreaterThan.autoRemove = val => typeof val !== \"number\";\n\nexport default Table;\n","/// \n
\n }\n \n
\n \n previousPage()}\n disabled={!canPreviousPage}\n className=\"-btn\"\n >\n Previous\n \n
\n \n \n \n \n {\n gotoPage(event.target.value);\n handlePageSelect(event.target.value);\n }}\n inputProps={{\n name: \"pageSelect\",\n id: \"page-select\"\n }}\n >\n {pageSelectData.map((prop, key) => {\n return (\n \n Page {key + 1}\n \n );\n })}\n \n \n \n \n \n {\n setPageSize(event.target.value);\n setNumberOfRows(event.target.value);\n }}\n inputProps={{\n name: \"numberOfRows\",\n id: \"number-of-rows\"\n }}\n >\n {numberOfRowsData.map(prop => {\n return (\n \n {prop} rows\n \n );\n })}\n \n \n \n \n
\n \n nextPage()}\n disabled={!canNextPage}\n className=\"-btn\"\n >\n Next\n \n
\n | \n {cell.render(\"Cell\")}\n | \n );\n })}\n \n );\n })}\n
\n {/* use this button to add a like kind of action */}\n {\n let obj = data.find(o => o.id === key);\n alert(\n \"You've clicked LIKE button on \\n{ \\nName: \" +\n obj.name +\n \", \\nposition: \" +\n obj.position +\n \", \\noffice: \" +\n obj.office +\n \", \\nage: \" +\n obj.age +\n \"\\n}.\"\n );\n }}\n color=\"info\"\n className=\"like\"\n >\n {\n let obj = data.find(o => o.id === key);\n alert(\n \"You've clicked EDIT button on \\n{ \\nName: \" +\n obj.name +\n \", \\nposition: \" +\n obj.position +\n \", \\noffice: \" +\n obj.office +\n \", \\nage: \" +\n obj.age +\n \"\\n}.\"\n );\n }}\n color=\"warning\"\n className=\"edit\"\n >\n {\n var newData = data;\n newData.find((o, i) => {\n if (o.id === key) {\n // here you should add some custom code so you can delete the data\n // from this component and from your server as well\n newData.splice(i, 1);\n return true;\n }\n return false;\n });\n setData([...newData]);\n }}\n color=\"danger\"\n className=\"remove\"\n >\n
\n )\n };\n })\n );\n const classes = useStyles();\n return (\n React Table
\nStacked Form
\nHorizontal Form
\nForm Elements
\nInput Variants
\nSimple Table
\n\n Table on Plain Background\n - Here is a subtitle for this table\n
\nRegular Table with Colors
\n\n You entered: {e}\n
\n }\n />\n );\n }, 200);\n };\n const successDelete = () => {\n setAlert(\n\n \n A beautiful plugin, that replace the classic alert, Handcrafted by\n our friend{\" \"}\n \n Daniel Jorgensen\n \n . Please check out the{\" \"}\n \n full documentation.\n \n .\n \n }\n />\n {alert}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n","import {\n defaultFont,\n primaryColor,\n infoColor,\n successColor,\n warningColor,\n dangerColor,\n grayColor\n} from \"../../material-dashboard-pro-react.js\";\n\nconst typographyStyle = {\n defaultFontStyle: {\n ...defaultFont,\n fontSize: \"14px\"\n },\n defaultHeaderMargins: {\n marginTop: \"20px\",\n marginBottom: \"10px\"\n },\n quote: {\n padding: \"10px 20px\",\n margin: \"0 0 20px\",\n fontSize: \"17.5px\",\n borderLeft: \"5px solid\" + grayColor[8]\n },\n quoteText: {\n margin: \"0 0 10px\",\n fontStyle: \"italic\"\n },\n quoteAuthor: {\n display: \"block\",\n fontSize: \"80%\",\n lineHeight: \"1.42857143\",\n color: grayColor[1]\n },\n mutedText: {\n color: grayColor[1]\n },\n primaryText: {\n color: primaryColor[0]\n },\n infoText: {\n color: infoColor[0]\n },\n successText: {\n color: successColor[0]\n },\n warningText: {\n color: warningColor[0]\n },\n dangerText: {\n color: dangerColor[0]\n }\n};\n\nexport default typographyStyle;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Quote(props) {\n const classes = useStyles();\n const { text, author } = props;\n return (\n \n
\n Basic example
\n \n\n
\n A title with a text under
\n \n\n
\n A success message
\n \n\n
\n Custom HTML description
\n \n\n
\n \n A warning message, with a function attached to the {'\"'}\n Confirm{'\"'}\n Button...\n
\n \n\n \n Try me!\n \n
\n \n ...and by passing a parameter, you can execute something else\n for {'\"'}Cancel{'\"'}\n
\n\n
\n A message with auto close timer set to 2 seconds
\n \n\n
\n Modal window with input field
\n \n\n\n );\n}\n\nQuote.propTypes = {\n text: PropTypes.node,\n author: PropTypes.node\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Muted(props) {\n const classes = useStyles();\n const { children } = props;\n return (\n{text}
\n {author}\n
\n {children}\n
\n );\n}\n\nMuted.propTypes = {\n children: PropTypes.node\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Primary(props) {\n const classes = useStyles();\n const { children } = props;\n return (\n \n {children}\n
\n );\n}\n\nPrimary.propTypes = {\n children: PropTypes.node\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Info(props) {\n const classes = useStyles();\n const { children } = props;\n return (\n \n {children}\n
\n );\n}\n\nInfo.propTypes = {\n children: PropTypes.node\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Success(props) {\n const classes = useStyles();\n const { children } = props;\n return (\n \n {children}\n
\n );\n}\n\nSuccess.propTypes = {\n children: PropTypes.node\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Warning(props) {\n const classes = useStyles();\n const { children } = props;\n return (\n \n {children}\n
\n );\n}\n\nWarning.propTypes = {\n children: PropTypes.node\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function Danger(props) {\n const classes = useStyles();\n const { children } = props;\n return (\n \n {children}\n
\n );\n}\n\nDanger.propTypes = {\n children: PropTypes.node\n};\n","/// \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","/*eslint-disable*/\nimport React from \"react\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\n\n// material ui icons\nimport MailOutline from \"@material-ui/icons/MailOutline\";\nimport Contacts from \"@material-ui/icons/Contacts\";\nimport Check from \"@material-ui/icons/Check\";\nimport Close from \"@material-ui/icons/Close\";\n\n// core components\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\nimport CustomInput from \"../../components/CustomInput/CustomInput.js\";\nimport Button from \"../../components/CustomButtons/Button.js\";\nimport Card from \"../../components/Card/Card.js\";\nimport CardHeader from \"../../components/Card/CardHeader.js\";\nimport CardText from \"../../components/Card/CardText.js\";\nimport CardIcon from \"../../components/Card/CardIcon.js\";\nimport CardBody from \"../../components/Card/CardBody.js\";\nimport CardFooter from \"../../components/Card/CardFooter.js\";\n\n// style for this view\nimport styles from \"../../assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function ValidationForms() {\n // register form\n const [registerEmail, setregisterEmail] = React.useState(\"\");\n const [registerEmailState, setregisterEmailState] = React.useState(\"\");\n const [registerPassword, setregisterPassword] = React.useState(\"\");\n const [registerPasswordState, setregisterPasswordState] = React.useState(\"\");\n const [registerConfirmPassword, setregisterConfirmPassword] = React.useState(\n \"\"\n );\n const [\n registerConfirmPasswordState,\n setregisterConfirmPasswordState\n ] = React.useState(\"\");\n const [registerCheckbox, setregisterCheckbox] = React.useState(false);\n const [registerCheckboxState, setregisterCheckboxState] = React.useState(\"\");\n // login form\n const [loginEmail, setloginEmail] = React.useState(\"\");\n const [loginEmailState, setloginEmailState] = React.useState(\"\");\n const [loginPassword, setloginPassword] = React.useState(\"\");\n const [loginPasswordState, setloginPasswordState] = React.useState(\"\");\n // type validation\n const [required, setrequired] = React.useState(\"\");\n const [requiredState, setrequiredState] = React.useState(\"\");\n const [typeEmail, settypeEmail] = React.useState(\"\");\n const [typeEmailState, settypeEmailState] = React.useState(\"\");\n const [number, setnumber] = React.useState(\"\");\n const [numberState, setnumberState] = React.useState(\"\");\n const [url, seturl] = React.useState(\"\");\n const [urlState, seturlState] = React.useState(\"\");\n const [equalTo, setequalTo] = React.useState(\"\");\n const [whichEqualTo, setwhichEqualTo] = React.useState(\"\");\n const [equalToState, setequalToState] = React.useState(\"\");\n // range validation\n const [minLength, setminLength] = React.useState(\"\");\n const [minLengthState, setminLengthState] = React.useState(\"\");\n const [maxLength, setmaxLength] = React.useState(\"\");\n const [maxLengthState, setmaxLengthState] = React.useState(\"\");\n const [range, setrange] = React.useState(\"\");\n const [rangeState, setrangeState] = React.useState(\"\");\n const [minValue, setminValue] = React.useState(\"\");\n const [minValueState, setminValueState] = React.useState(\"\");\n const [maxValue, setmaxValue] = React.useState(\"\");\n const [maxValueState, setmaxValueState] = React.useState(\"\");\n // function that returns true if value is email, false otherwise\n const verifyEmail = value => {\n var emailRex = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n if (emailRex.test(value)) {\n return true;\n }\n return false;\n };\n // function that verifies if a string has a given length or not\n const verifyLength = (value, length) => {\n if (value.length >= length) {\n return true;\n }\n return false;\n };\n // function that verifies if value contains only numbers\n const verifyNumber = value => {\n var numberRex = new RegExp(\"^[0-9]+$\");\n if (numberRex.test(value)) {\n return true;\n }\n return false;\n };\n // verifies if value is a valid URL\n const verifyUrl = value => {\n try {\n new URL(value);\n return true;\n } catch (_) {\n return false;\n }\n };\n const registerClick = () => {\n if (registerEmailState === \"\") {\n setregisterEmailState(\"error\");\n }\n if (registerPasswordState === \"\") {\n setregisterPasswordState(\"error\");\n }\n if (registerConfirmPasswordState === \"\") {\n setregisterConfirmPasswordState(\"error\");\n }\n if (registerCheckboxState === \"\") {\n setregisterCheckboxState(\"error\");\n }\n };\n const loginClick = () => {\n if (loginEmailState === \"\") {\n setloginEmailState(\"error\");\n }\n if (loginPasswordState === \"\") {\n setloginPasswordState(\"error\");\n }\n };\n const typeClick = () => {\n if (requiredState === \"\") {\n setrequiredState(\"error\");\n }\n if (typeEmailState === \"\") {\n settypeEmailState(\"error\");\n }\n if (numberState === \"\") {\n setnumberState(\"error\");\n }\n if (urlState === \"\") {\n seturlState(\"error\");\n }\n if (equalToState === \"\") {\n setequalToState(\"error\");\n }\n };\n const rangeClick = () => {\n if (minLengthState === \"\") {\n setminLengthState(\"error\");\n }\n if (maxLengthState === \"\") {\n setmaxLengthState(\"error\");\n }\n if (rangeState === \"\") {\n setrangeState(\"error\");\n }\n if (minValueState === \"\") {\n setminValueState(\"error\");\n }\n if (maxValueState === \"\") {\n setmaxValueState(\"error\");\n }\n };\n const classes = useStyles();\n return (\n \r\n
\r\n Header 1
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 2
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 3
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 4
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 5
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 6
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Paragraph
\r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers. I understand\r\n culture. I am the nucleus. I think that’s a responsibility that I\r\n have, to push possibilities, to show people, this is the level\r\n that things could be at.\r\n
\r\n\r\n
\r\n Quote
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Muted Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Primary Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Info Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Success Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Warning Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Danger Text
\r\n \r\n \r\n Header with small subtitle\r\n
\r\n
\r\n Small Tag
\r\n \r\n Header with small subtitle\r\n
\r\n \r\n Use {'\"'}small{'\"'} tag for the headers\r\n \r\n
\r\n Register Forms
\nLogin Form
\nType Validation
\nRange Validation
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}>\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n","import {\n primaryColor,\n dangerColor,\n successColor,\n roseColor,\n blueSkyColor,\n fieldsColor,\n pineColor,\n infoColor,\n warningColor,\n whiteColor,\n blackColor,\n grayColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst wizardStyle = {\n wizardContainer: {},\n card: {\n display: \"inline-block\",\n position: \"relative\",\n width: \"100%\",\n margin: \"25px 0\",\n boxShadow: \"0 1px 4px 0 rgba(\" + hexToRgb(blackColor) + \", 0.14)\",\n borderRadius: \"6px\",\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.87)\",\n background: whiteColor,\n transition: \"all 300ms linear\",\n minHeight: \"410px\"\n },\n wizardHeader: {\n textAlign: \"center\",\n padding: \"25px 0 35px\"\n },\n title: {\n margin: \"0\"\n },\n subtitle: {\n margin: \"5px 0 0\"\n },\n wizardNavigation: {\n position: \"relative\"\n },\n nav: {\n marginTop: \"20px\",\n paddingLeft: \"0\",\n marginBottom: \"0\",\n listStyle: \"none\",\n backgroundColor: \"rgba(\" + hexToRgb(grayColor[17]) + \", 0.2)\",\n \"&:after,&:before\": {\n display: \"table\",\n content: '\" \"'\n },\n \"&:after\": {\n boxSizing: \"border-box\"\n }\n },\n steps: {\n marginLeft: \"0\",\n textAlign: \"center\",\n // float: \"left\",\n // display: \"block\",\n position: \"relative\",\n display: \"inline-block\"\n },\n stepsAnchor: {\n cursor: \"pointer\",\n position: \"relative\",\n display: \"block\",\n padding: \"10px 15px\",\n textDecoration: \"none\",\n transition: \"all .3s\",\n border: \"0 !important\",\n borderRadius: \"30px\",\n lineHeight: \"18px\",\n textTransform: \"uppercase\",\n fontSize: \"12px\",\n fontWeight: \"500\",\n minWidth: \"100px\",\n textAlign: \"center\",\n color: grayColor[6] + \" !important\"\n },\n content: {\n marginTop: \"20px\",\n minHeight: \"340px\",\n padding: \"20px 15px\"\n },\n stepContent: {\n display: \"none\"\n },\n stepContentActive: {\n display: \"block\"\n },\n movingTab: {\n position: \"absolute\",\n textAlign: \"center\",\n padding: \"12px\",\n fontSize: \"12px\",\n textTransform: \"uppercase\",\n WebkitFontSmoothing: \"subpixel-antialiased\",\n top: \"-4px\",\n left: \"0px\",\n borderRadius: \"4px\",\n color: whiteColor,\n cursor: \"pointer\",\n fontWeight: \"500\"\n },\n primary: {\n backgroundColor: primaryColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(primaryColor[0]) +\n \", 0.4)\"\n },\n warning: {\n backgroundColor: warningColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(warningColor[0]) +\n \", 0.4)\"\n },\n danger: {\n backgroundColor: dangerColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(dangerColor[0]) +\n \", 0.4)\"\n },\n success: {\n backgroundColor: successColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(successColor[0]) +\n \", 0.4)\"\n },\n info: {\n backgroundColor: infoColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.4)\"\n },\n blueSky: {\n backgroundColor: blueSkyColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.4)\"\n },\n fields: {\n backgroundColor: fieldsColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.4)\"\n },\n pine: {\n backgroundColor: pineColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(infoColor[0]) +\n \", 0.4)\"\n },\n rose: {\n backgroundColor: roseColor[0],\n boxShadow:\n \"0 4px 20px 0px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(roseColor[0]) +\n \", 0.4)\"\n },\n footer: {\n padding: \"0 15px\"\n },\n left: {\n float: \"left!important\"\n },\n right: {\n float: \"right!important\"\n },\n clearfix: {\n \"&:after,&:before\": {\n display: \"table\",\n content: '\" \"'\n },\n clear: \"both\"\n }\n};\n\nexport default wizardStyle;\n","import React from \"react\";\nimport cx from \"classnames\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport { useMediaQuery } from \"@material-ui/core\";\n\n// core components\nimport Button from \"../CustomButtons/Button.js\";\nimport Card from \"../Card/Card.js\";\n\nimport wizardStyle from \"../../assets/jss/material-dashboard-pro-react/components/wizardStyle.js\";\n\nclass Wizard extends React.Component {\n constructor(props) {\n super(props);\n var width;\n if (this.props.steps.length === 1) {\n width = \"100%\";\n } else {\n if (window.innerWidth < 600) {\n if (this.props.steps.length !== 3) {\n width = \"50%\";\n } else {\n width = 100 / 3 + \"%\";\n }\n } else {\n if (this.props.steps.length === 2) {\n width = \"50%\";\n } else {\n width = 100 / 3 + \"%\";\n }\n }\n }\n this.state = {\n currentStep: 0,\n color: this.props.color,\n nextButton: this.props.steps.length > 1 ? true : false,\n previousButton: false,\n finishButton: this.props.steps.length === 1 ? true : false,\n width: width,\n movingTabStyle: {\n transition: \"transform 0s\"\n },\n allStates: {}\n };\n this.navigationStepChange = this.navigationStepChange.bind(this);\n this.refreshAnimation = this.refreshAnimation.bind(this);\n this.previousButtonClick = this.previousButtonClick.bind(this);\n this.previousButtonClick = this.previousButtonClick.bind(this);\n this.finishButtonClick = this.finishButtonClick.bind(this);\n this.updateWidth = this.updateWidth.bind(this);\n }\n wizard = React.createRef();\n componentDidMount() {\n this.refreshAnimation(0);\n window.addEventListener(\"resize\", this.updateWidth);\n }\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.updateWidth);\n }\n updateWidth() {\n this.refreshAnimation(this.state.currentStep);\n }\n navigationStepChange(key) {\n if (this.props.steps) {\n var validationState = true;\n if (key > this.state.currentStep) {\n for (var i = this.state.currentStep; i < key; i++) {\n if (this[this.props.steps[i].stepId].sendState !== undefined) {\n this.setState({\n allStates: {\n ...this.state.allStates,\n [this.props.steps[i].stepId]: this[\n this.props.steps[i].stepId\n ].sendState()\n }\n });\n }\n if (\n this[this.props.steps[i].stepId].isValidated !== undefined &&\n this[this.props.steps[i].stepId].isValidated() === false\n ) {\n validationState = false;\n break;\n }\n }\n }\n if (validationState) {\n this.setState({\n currentStep: key,\n nextButton: this.props.steps.length > key + 1 ? true : false,\n previousButton: key > 0 ? true : false,\n finishButton: this.props.steps.length === key + 1 ? true : false\n });\n this.refreshAnimation(key);\n }\n }\n }\n \n closeButtonClick() {\n this.setState(\n {\n allStates: {\n ...this.state.allStates,\n [this.props.steps[this.state.currentStep].stepId]: this[\n this.props.steps[this.state.currentStep].stepId\n ].sendState()\n }\n },\n () => {\n this.props.closeButtonClick(this.state.allStates);\n }\n );\n }\n\n nextButtonClick() {\n if (\n (this.props.validate &&\n ((this[this.props.steps[this.state.currentStep].stepId].isValidated !==\n undefined &&\n this[\n this.props.steps[this.state.currentStep].stepId\n ].isValidated()) ||\n this[this.props.steps[this.state.currentStep].stepId].isValidated ===\n undefined)) ||\n this.props.validate === undefined\n ) {\n if (\n this[this.props.steps[this.state.currentStep].stepId].sendState !==\n undefined\n ) {\n this.setState({\n allStates: {\n ...this.state.allStates,\n [this.props.steps[this.state.currentStep].stepId]: this[\n this.props.steps[this.state.currentStep].stepId\n ].sendState()\n }\n });\n }\n var key = this.state.currentStep + 1;\n this.setState({\n currentStep: key,\n nextButton: this.props.steps.length > key + 1 ? true : false,\n previousButton: key > 0 ? true : false,\n finishButton: this.props.steps.length === key + 1 ? true : false\n });\n this.refreshAnimation(key);\n }\n }\n\n previousButtonClick() {\n if (\n this[this.props.steps[this.state.currentStep].stepId].sendState !==\n undefined\n ) {\n this.setState({\n allStates: {\n ...this.state.allStates,\n [this.props.steps[this.state.currentStep].stepId]: this[\n this.props.steps[this.state.currentStep].stepId\n ].sendState()\n }\n });\n }\n var key = this.state.currentStep - 1;\n if (key >= 0) {\n this.setState({\n currentStep: key,\n nextButton: this.props.steps.length > key + 1 ? true : false,\n previousButton: key > 0 ? true : false,\n finishButton: this.props.steps.length === key + 1 ? true : false\n });\n this.refreshAnimation(key);\n }\n }\n\n finishButtonClick() {\n if (\n (this.props.validate === false &&\n this.props.finishButtonClick !== undefined) ||\n (this.props.validate &&\n ((this[this.props.steps[this.state.currentStep].stepId].isValidated !==\n undefined &&\n this[\n this.props.steps[this.state.currentStep].stepId\n ].isValidated()) ||\n this[this.props.steps[this.state.currentStep].stepId].isValidated ===\n undefined) &&\n this.props.finishButtonClick !== undefined)\n ) {\n this.setState(\n {\n allStates: {\n ...this.state.allStates,\n [this.props.steps[this.state.currentStep].stepId]: this[\n this.props.steps[this.state.currentStep].stepId\n ].sendState()\n }\n },\n () => {\n this.props.finishButtonClick(this.state.allStates);\n }\n );\n }\n }\n\n refreshAnimation(index) {\n var total = this.props.steps.length;\n var li_width = 100 / total;\n var total_steps = this.props.steps.length;\n var move_distance =\n this.wizard.current.children[0].offsetWidth / total_steps;\n var index_temp = index;\n var vertical_level = 0;\n\n var mobile_device = window.innerWidth < 600 && total > 3;\n\n if (mobile_device) {\n move_distance = this.wizard.current.children[0].offsetWidth / 2;\n index_temp = index % 2;\n li_width = 50;\n }\n\n this.setState({ width: li_width + \"%\" });\n\n var step_width = move_distance;\n move_distance = move_distance * index_temp;\n\n var current = index + 1;\n\n if (current === 1 || (mobile_device === true && index % 2 === 0)) {\n move_distance -= 8;\n } else if (\n current === total_steps ||\n (mobile_device === true && index % 2 === 1)\n ) {\n move_distance += 8;\n }\n\n if (mobile_device) {\n vertical_level = parseInt(index / 2, 10);\n vertical_level = vertical_level * 38;\n }\n var movingTabStyle = {\n width: step_width,\n transform:\n \"translate3d(\" + move_distance + \"px, \" + vertical_level + \"px, 0)\",\n transition: \"all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)\"\n };\n this.setState({ movingTabStyle: movingTabStyle });\n }\n render() {\n const { classes, title, subtitle, color, steps } = this.props;\n return (\n Employees Stats
\n\n New employees on 15th September, 2016\n
\nSMALL COMPANY
\n\n
\n \n $29\n
\n\n This is good if your company size is between 2 and 10\n Persons.\n
\n \nFreelancer
\n\n weekend \n
\n \n FREE\n
\n\n This is good if your company size is between 2 and 10\n Persons.\n
\n \n\n
\n \n Your products, all the kits that I have downloaded from your\n site and worked with are sooo cool! I love the color\n mixtures, cards... everything. Keep up the great work!\n
\nAlec Thompson
\n@ALECTHOMPSON
\n\n \n { window.innerWidth > 960 &&
\n \n
}\n {title}
\n{subtitle}
\n\n \n {steps[this.state.currentStep].stepName}\n
\n - \n {steps.map((prop, key) => {\n return (\n
{prop.stepName}
\n \n );\n })}\n \n {steps.map((prop, key) => {\n const stepContentClasses = cx({\n [classes.stepContentActive]: this.state.currentStep === key,\n [classes.stepContent]: this.state.currentStep !== key\n });\n return (\n
\n \n (this[prop.stepId] = node)}\n allStates={this.state.allStates}\n />\n
\n );\n })}\n \n
\n \n \n );\n }\n}\n\nWizard.defaultProps = {\n color: \"rose\",\n title: \"Here should go your title\",\n subtitle: \"And this would be your subtitle\",\n previousButtonText: \"Previous\",\n previousButtonClasses: \"\",\n nextButtonClasses: \"\",\n nextButtonText: \"Next\",\n finishButtonClasses: \"\",\n finishButtonText: \"Finish\"\n};\n\nWizard.propTypes = {\n classes: PropTypes.object.isRequired,\n steps: PropTypes.arrayOf(\n PropTypes.shape({\n stepName: PropTypes.string.isRequired,\n stepComponent: PropTypes.object.isRequired,\n stepId: PropTypes.string.isRequired\n })\n ).isRequired,\n color: PropTypes.oneOf([\n \"primary\",\n \"warning\",\n \"danger\",\n \"success\",\n \"info\",\n \"rose\",\n \"blueSky\",\n \"fields\",\n \"pine\",\n ]),\n title: PropTypes.string,\n subtitle: PropTypes.string,\n previousButtonClasses: PropTypes.string,\n previousButtonText: PropTypes.string,\n nextButtonClasses: PropTypes.string,\n nextButtonText: PropTypes.string,\n finishButtonClasses: PropTypes.string,\n finishButtonText: PropTypes.string,\n finishButtonClick: PropTypes.func,\n validate: PropTypes.bool\n};\n\nexport default withStyles(wizardStyle)(Wizard);\n","/*eslint-disable*/\nimport React from \"react\";\n\nimport defaultImage from \"../../assets/img/default-avatar.png\";\n\nexport default function PictureUpload(props) {\n const [file, setFile] = React.useState(null);\n const [imagePreviewUrl, setImagePreviewUrl] = React.useState(props.profileImage !== null ? props.profileImage : defaultImage);\n const handleImageChange = e => {\n e.preventDefault();\n let reader = new FileReader();\n let newFile = e.target.files[0];\n reader.onloadend = () => {\n setFile(newFile);\n setImagePreviewUrl(reader.result);\n };\n if (newFile) {\n reader.readAsDataURL(newFile);\n }\n };\n // eslint-disable-next-line\n const handleSubmit = e => {\n e.preventDefault();\n // this.state.file is the file/image uploaded\n // in this function you can save the image (this.state.file) on form submit\n // you have to call it yourself\n };\n return (\n \n {this.state.previousButton ? (\n \n ) : null}\n
\n \n \n {this.state.nextButton ? (\n this.nextButtonClick()}\n >\n {this.props.nextButtonText}\n \n ) : null}\n {this.state.finishButton ? (\n this.finishButtonClick()}\n >\n {this.props.finishButtonText}\n \n ) : null}\n
\n \n \n
\n );\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n// @material-ui/icons\nimport Face from \"@material-ui/icons/Face\";\nimport RecordVoiceOver from \"@material-ui/icons/RecordVoiceOver\";\nimport Email from \"@material-ui/icons/Email\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\n\n// core components\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../../components/Grid/GridItem.js\";\nimport PictureUpload from \"../../../components/CustomUpload/PictureUpload.js\";\nimport CustomInput from \"../../../components/CustomInput/CustomInput.js\";\n\nconst style = {\n infoText: {\n fontWeight: \"300\",\n margin: \"10px 0 30px\",\n textAlign: \"center\"\n },\n inputAdornmentIcon: {\n color: \"#555\"\n },\n inputAdornment: {\n position: \"relative\"\n }\n};\n\nclass Step1 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n firstname: \"\",\n firstnameState: \"\",\n lastname: \"\",\n lastnameState: \"\",\n email: \"\",\n emailState: \"\"\n };\n }\n sendState() {\n return this.state;\n }\n // function that returns true if value is email, false otherwise\n verifyEmail(value) {\n var emailRex = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n if (emailRex.test(value)) {\n return true;\n }\n return false;\n }\n // function that verifies if a string has a given length or not\n verifyLength(value, length) {\n if (value.length >= length) {\n return true;\n }\n return false;\n }\n change(event, stateName, type, stateNameEqualTo) {\n switch (type) {\n case \"email\":\n if (this.verifyEmail(event.target.value)) {\n this.setState({ [stateName + \"State\"]: \"success\" });\n } else {\n this.setState({ [stateName + \"State\"]: \"error\" });\n }\n break;\n case \"length\":\n if (this.verifyLength(event.target.value, stateNameEqualTo)) {\n this.setState({ [stateName + \"State\"]: \"success\" });\n } else {\n this.setState({ [stateName + \"State\"]: \"error\" });\n }\n break;\n default:\n break;\n }\n this.setState({ [stateName]: event.target.value });\n }\n isValidated() {\n if (\n this.state.firstnameState === \"success\" &&\n this.state.lastnameState === \"success\" &&\n this.state.emailState === \"success\"\n ) {\n return true;\n } else {\n if (this.state.firstnameState !== \"success\") {\n this.setState({ firstnameState: \"error\" });\n }\n if (this.state.lastnameState !== \"success\") {\n this.setState({ lastnameState: \"error\" });\n }\n if (this.state.emailState !== \"success\") {\n this.setState({ emailState: \"error\" });\n }\n }\n return false;\n }\n render() {\n const { classes } = this.props;\n return (\n \n \n handleImageChange(e)} />\n
\n Choose Picture
\n\n Let{\"'\"}s start with the basic information (with validation)\n
\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\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\nStep2.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style)(Step2);\r\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport Select from \"@material-ui/core/Select\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport FormControl from \"@material-ui/core/FormControl\";\n\n// core components\nimport CustomInput from \"../../../components/CustomInput/CustomInput.js\";\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../../components/Grid/GridItem.js\";\n\nimport customSelectStyle from \"../../../assets/jss/material-dashboard-pro-react/customSelectStyle.js\";\n\nconst style = {\n infoText: {\n fontWeight: \"300\",\n margin: \"10px 0 30px\",\n textAlign: \"center\"\n },\n ...customSelectStyle\n};\n\nclass Step3 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n simpleSelect: \"\",\n desgin: false,\n code: false,\n develop: false\n };\n }\n sendState() {\n return this.state;\n }\n handleSimple = event => {\n this.setState({ [event.target.name]: event.target.value });\n };\n isValidated() {\n return true;\n }\n render() {\n const { classes } = this.props;\n return (\n What are you doing? (checkboxes)
\r\n\r\n
\r\n Design
\r\n\r\n
\r\n Code
\r\n\r\n
\r\n Develop
\r\nAre you living in a nice area?
\nContacts
\n\n CareXact support\n
\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}","import {\n container,\n cardTitle,\n blackColor,\n hexToRgb,\n grayColor\n} from \"../../material-dashboard-pro-react.js\";\n\nimport customCheckboxRadioSwitch from \"../customCheckboxRadioSwitch.js\";\n\nconst registerPageStyle = {\n ...customCheckboxRadioSwitch,\n cardTitle: {\n ...cardTitle,\n textAlign: \"center\"\n },\n container: {\n ...container,\n position: \"relative\",\n zIndex: \"3\"\n // paddingTop: \"23vh\"\n },\n cardSignup: {\n borderRadius: \"6px\",\n boxShadow:\n \"0 16px 24px 2px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.14), 0 6px 30px 5px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.12), 0 8px 10px -5px rgba(\" +\n hexToRgb(blackColor) +\n \", 0.2)\",\n marginBottom: \"100px\",\n padding: \"40px 0px\",\n marginTop: \"15vh\"\n },\n center: {\n textAlign: \"center\"\n },\n right: {\n textAlign: \"right\"\n },\n left: {\n textAlign: \"left\"\n },\n form: {\n padding: \"0 20px\",\n position: \"relative\"\n },\n socialTitle: {\n fontSize: \"18px\"\n },\n inputAdornment: {\n marginRight: \"18px\",\n position: \"relative\"\n },\n inputAdornmentIcon: {\n color: grayColor[6]\n },\n customFormControlClasses: {\n margin: \"0 12px\"\n },\n checkboxLabelControl: {\n margin: \"0\"\n },\n checkboxLabel: {\n fontSize: \"0.875rem\",\n marginLeft: \"6px\",\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.26)\"\n }\n};\n\nexport default registerPageStyle;\n","import React, { useEffect } from \"react\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\n\r\n// @material-ui/icons\r\nimport Email from \"@material-ui/icons/Email\";\r\n// import LockOutline from \"@material-ui/icons/LockOutline\";\r\nimport Check from \"@material-ui/icons/Check\";\r\nimport Close from \"@material-ui/icons/Close\";\r\nimport LockOutline from \"@material-ui/icons/LockOutlined\";\r\n\r\n// core components\r\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../components/Grid/GridItem.js\";\r\nimport Button from \"../../../components/CustomButtons/Button.js\";\r\nimport CustomInput from \"../../../components/CustomInput/CustomInput.js\";\r\nimport Card from \"../../../components/Card/Card.js\";\r\nimport CardBody from \"../../../components/Card/CardBody.js\";\r\n\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\nimport 'react-phone-input-2/lib/style.css'\r\nimport PhoneInput from 'react-phone-input-2'\r\nimport startsWith from 'lodash.startswith';\r\n\r\nimport styles from \"../../../assets/jss/material-dashboard-pro-react/views/registerPageStyle\";\r\nimport validationFormStyles from \"../../../assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\r\nimport alertStyles from \"../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useValidationFormStyles = makeStyles(validationFormStyles);\r\nconst useAlertStyles = makeStyles(alertStyles);\r\n\r\nexport default function RegisterPage() {\r\n const history = useHistory();\r\n const validationClasses = useValidationFormStyles();\r\n const classes = useStyles();\r\n const alertClasses = useAlertStyles();\r\n \r\n const [error, setError] = React.useState(\"Passwords must be at least 6 characters. Passwords must have at least one digit. Passwords must have at least one lowercase character. Passwords must have at least one uppercase character.\");\r\n const [email, setEmail] = React.useState('');\r\n const [password, setPassword] = React.useState('');\r\n const [phoneNumber, setPhoneNumber] = React.useState('');\r\n const [confirmPassword, setConfirmPassword] = React.useState('');\r\n const [EmailRequiredState, setEmailRequiredState] = React.useState(\"\");\r\n const [PasswordRequiredState, setPasswordRequiredState] = React.useState(\"\");\r\n const [ConfirmPasswordRequiredState, setConfirmPasswordRequiredState] = React.useState(\"\");\r\n const [ConfirmTCRequiredState, setConfirmTCRequiredState] = React.useState(\"\");\r\n const [checked, setChecked] = React.useState([]);\r\n const [DisbleButtons, setDisableButtons] = React.useState(false);\r\n const [isPhoneNumberValid, setIsPhoneNumberValid] = React.useState('false');\r\n const [alert, setAlert] = React.useState(null);\r\n\r\n const searchParams = new URLSearchParams(window.location.search);\r\n const params = { productCode: searchParams.get('productCode') || '', action: searchParams.get('action') || '', };\r\n\r\n const [cardAnimaton, setCardAnimation] = React.useState(\"cardHidden\");\r\n\r\n React.useEffect(() => {\r\n let id = setTimeout(function () {\r\n setCardAnimation(\"\");\r\n }, 700);\r\n // Specify how to clean up after this effect:\r\n return function cleanup() {\r\n window.clearTimeout(id);\r\n };\r\n });\r\n\r\n useEffect(() => {\r\n if (params.productCode !== '') {\r\n if (params.action === 'add') {\r\n var bearerToken = localStorage.getItem(\"careXactSOS_BearerToken\");\r\n\r\n if (bearerToken !== null) {\r\n // redirect to the devices add device wizard if they have a login already\r\n history.push(\"/admin/devices?action=add&productCode=\" + params.productCode);\r\n }\r\n }\r\n }\r\n }, []);\r\n\r\n const handleToggle = value => {\r\n const currentIndex = checked.indexOf(value);\r\n const newChecked = [...checked];\r\n\r\n if (currentIndex === -1) {\r\n newChecked.push(value);\r\n } else {\r\n newChecked.splice(currentIndex, 1);\r\n }\r\n setChecked(newChecked);\r\n };\r\n\r\n const verifyLength = (value, length) => {\r\n if (value === null) return false;\r\n\r\n if (value.length >= length) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const verifyEmail = (value) => {\r\n if (value === null) return false;\r\n\r\n var emailRex = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n if (emailRex.test(value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n function validateFormFields() {\r\n var result = true;\r\n\r\n if (email === \"\") {\r\n setEmailRequiredState(\"error\");\r\n result = false;\r\n }\r\n if (confirmPassword === \"\") {\r\n setConfirmPasswordRequiredState(\"error\");\r\n result = false;\r\n }\r\n if (password === \"\") {\r\n setPasswordRequiredState(\"error\");\r\n result = false;\r\n } else {\r\n if (password !== confirmPassword) {\r\n setPasswordRequiredState(\"error\");\r\n setConfirmPasswordRequiredState(\"error\");\r\n result = false;\r\n }\r\n }\r\n\r\n if (checked[0] !== 1) {\r\n setConfirmTCRequiredState(\"error\");\r\n result = false;\r\n } else {\r\n setConfirmTCRequiredState(\"success\");\r\n }\r\n\r\n if (isPhoneNumberValid === false) {\r\n showAlert(\"Invalid Phone Number\", \"The account holder phone number must start with a valid country code.\")\r\n result = false;\r\n }\r\n\r\n return result;\r\n }\r\n function handleErrors(response) {\r\n if (!response.ok) {\r\n throw Error(response.statusText);\r\n }\r\n return response.json();\r\n }\r\n\r\n const handleSignUp = async (event) => {\r\n\r\n if (validateFormFields() === false) {\r\n if (password !== confirmPassword) {\r\n setError(\"Password and Confirm password do not match.\");\r\n }\r\n else {\r\n if (checked[0] !== 1) {\r\n setError(\"Confirm you agree to the terms and conditions before proceeding.\");\r\n } else {\r\n setError(\"Update the required fields and try again.\");\r\n }\r\n }\r\n }\r\n else {\r\n setError(\"\");\r\n const json = {\r\n Email: email.trim(),\r\n Password: password,\r\n ConfirmPassword: confirmPassword,\r\n PhoneNumber: phoneNumber\r\n }\r\n\r\n setDisableButtons(true);\r\n\r\n const apiURL = process.env.REACT_APP_API_BASE_URL;\r\n const subscriptionKey = process.env.REACT_APP_API_SUBSCRIPTION_KEY;\r\n const headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': subscriptionKey };\r\n\r\n fetch(apiURL + 'api/Account/Register', {\r\n method: 'POST',\r\n body: JSON.stringify(json),\r\n headers: headers\r\n })\r\n .then(response => {\r\n if (!response.ok) {\r\n throw Error(response.statusText);\r\n }\r\n else {\r\n // auto login if account created successfully\r\n fetch(apiURL + 'Token', {\r\n method: 'POST',\r\n body: \"grant_type=password&username=\" + email + \"&password=\" + password,\r\n headers: headers\r\n })\r\n .then(handleErrors)\r\n .then(response => {\r\n localStorage.setItem(\"careXactSOS_BearerToken\", response.access_token);\r\n localStorage.setItem(\"careXactSOS_ApiURL\", apiURL);\r\n localStorage.setItem(\"careXactSOS_SubscriptionKey\", subscriptionKey);\r\n\r\n if (params.productCode !== '') {\r\n if (params.action === 'add') {\r\n var bearerToken = localStorage.getItem(\"careXactSOS_BearerToken\");\r\n\r\n if (bearerToken !== null) {\r\n // redirect to the devices add device wizard now user has a login\r\n history.push(\"/admin/devices?action=add&productCode=\" + params.productCode);\r\n }\r\n }\r\n }\r\n else {\r\n history.push(\"/\");\r\n }\r\n })\r\n .catch(error => {\r\n localStorage.removeItem(\"careXactSOS_BearerToken\");\r\n setError(\"Something went wrong. Please check your email and password then try again, or use the reset password feature above.\");\r\n console.log(error.message);\r\n setDisableButtons(false);\r\n });\r\n }\r\n })\r\n .catch(error => {\r\n setError(\"Something went wrong. Passwords must be at least 6 characters. Passwords must have at least one digit. Passwords must have at least one lowercase character. Passwords must have at least one uppercase character.\");\r\n console.log(error.message);\r\n setDisableButtons(false);\r\n });\r\n }\r\n }\r\n function NewlineText(props) {\r\n const text = props.text;\r\n const newText = text.split('.').map(str => {str}
);\r\n return newText;\r\n }\r\n function handlePhoneNumberOnChange(value, countryData) {\r\n\r\n // if truthy then append a + so when we POST to db phone numbers have a +\r\n if (value) {\r\n value = value.startsWith('+') ? value : \"+\" + value;\r\n\r\n // format +610414999888 as +61414999888. International format country dial code replaces the leading 0\r\n value = value.startsWith('+' + countryData.dialCode + '0') ? value.replace('+' + countryData.dialCode + '0', '+' + countryData.dialCode) : value;\r\n }\r\n\r\n const isPhoneValid = isPhoneNumberFormatValid(value, countryData);\r\n\r\n setPhoneNumber(value);\r\n setIsPhoneNumberValid(isPhoneValid);\r\n };\r\n function isPhoneNumberFormatValid(inputNumber, country) {\r\n\r\n if (country?.dialCode) {\r\n return startsWith(inputNumber, \"+\" + country.dialCode) || startsWith(\"+\" + country.dialCode, inputNumber);\r\n }\r\n\r\n return false;\r\n };\r\n\r\n const hideAlert = () => {\r\n setAlert(null);\r\n };\r\n\r\n const showAlert = (title, message) => {\r\n setAlert(\r\n \r\n {message}\r\n
\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {alert}\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","import React, { useState } from \"react\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\n\r\n// @material-ui/icons\r\nimport Email from \"@material-ui/icons/Email\";\r\nimport Close from \"@material-ui/icons/Close\";\r\nimport LockOutline from \"@material-ui/icons/LockOutlined\";\r\n\r\n// core components\r\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../components/Grid/GridItem.js\";\r\nimport CustomInput from \"../../../components/CustomInput/CustomInput.js\";\r\nimport Button from \"../../../components/CustomButtons/Button.js\";\r\nimport Card from \"../../../components/Card/Card.js\";\r\nimport CardBody from \"../../../components/Card/CardBody.js\";\r\nimport CardHeader from \"../../../components/Card/CardHeader.js\";\r\nimport CardFooter from \"../../../components/Card/CardFooter.js\";\r\n\r\nimport styles from \"../../../assets/jss/material-dashboard-pro-react/views/loginPageStyle.js\";\r\nimport validationFormStyles from \"../../../assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useValidationFormStyles = makeStyles(validationFormStyles);\r\n\r\nexport default function ResetPasswordPage() {\r\n const history = useHistory();\r\n const classes = useStyles();\r\n const validationClasses = useValidationFormStyles();\r\n const [cardAnimaton, setCardAnimation] = React.useState(\"cardHidden\");\r\n\r\n function handleErrors(response) {\r\n if (!response.ok) {\r\n throw Error(response.statusText);\r\n }\r\n return response;\r\n }\r\n\r\n const verifyEmail = (value) => {\r\n if (value === null) return false;\r\n\r\n var emailRex = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n if (emailRex.test(value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const verifyLength = (value, length) => {\r\n if (value === null) return false;\r\n\r\n if (value.length >= length) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n function getQueryVariable(variable) {\r\n var query = window.location.search.substring(1);\r\n console.log(query)\r\n var vars = query.split(\"&\");\r\n for (var i = 0; i < vars.length; i++) {\r\n var pair = vars[i].split(\"=\");\r\n if (pair[0] == variable) { return pair[1]; }\r\n }\r\n return (false);\r\n }\r\n\r\n React.useEffect(() => {\r\n let id = setTimeout(function() {\r\n setCardAnimation(\"\");\r\n }, 700);\r\n // Specify how to clean up after this effect:\r\n return function cleanup() {\r\n window.clearTimeout(id);\r\n };\r\n });\r\n\r\n const resetToken = decodeURIComponent(getQueryVariable('resetToken') || '');\r\n const username = decodeURIComponent(getQueryVariable('username') || '');\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [error, setError] = useState(null);\r\n const [email, setEmail] = useState(username);\r\n const [password, setPassword] = useState(\"\");\r\n const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n\r\n const [EmailRequiredState, setEmailRequiredState] = React.useState(\"\");\r\n const [PasswordRequiredState, setPasswordRequiredState] = React.useState(\"\");\r\n const [ConfirmPasswordRequiredState, setConfirmPasswordRequiredState] = React.useState(\"\");\r\n\r\n function verifyFormFields() {\r\n var result = true;\r\n\r\n if (verifyEmail(email) == false) {\r\n setEmailRequiredState(\"error\");\r\n }\r\n if (password === \"\") {\r\n setPasswordRequiredState(\"error\");\r\n result = false;\r\n } else {\r\n if (password !== confirmPassword) {\r\n setPasswordRequiredState(\"error\");\r\n setConfirmPasswordRequiredState(\"error\");\r\n result = false;\r\n }\r\n }\r\n\r\n return result\r\n }\r\n\r\n const onClickSendResetEmail = (event) => {\r\n event.preventDefault();\r\n\r\n if (verifyEmail(email) === false) {\r\n setError(\"The Email... field must be a valid email address.\");\r\n } else {\r\n setLoading(true);\r\n\r\n const apiURL = process.env.REACT_APP_API_BASE_URL;\r\n const subscriptionKey = process.env.REACT_APP_API_Subscription_Key;\r\n const headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': subscriptionKey };\r\n\r\n fetch(apiURL + 'api/Account/SendChangePassword', {\r\n method: 'POST',\r\n headers: headers,\r\n body: JSON.stringify({ Email: email.trim() })\r\n })\r\n .then(handleErrors)\r\n .then(response => {\r\n setLoading(false);\r\n setError(\"A password reset email has been sent to your inbox.\");\r\n })\r\n .catch(error => {\r\n setLoading(false);\r\n setError(\"Something went wrong. Please check your email. Contact Tunstall support for further assistance.\");\r\n });\r\n }\r\n }\r\n\r\n const onClickReset = (event) => {\r\n event.preventDefault();\r\n\r\n if (verifyFormFields() == false) {\r\n if (password !== confirmPassword) \r\n setError(\"New password and Confirm new password do not match.\");\r\n }\r\n else {\r\n setLoading(true);\r\n\r\n const apiURL = process.env.REACT_APP_API_BASE_URL;\r\n const subscriptionKey = process.env.REACT_APP_API_Subscription_Key;\r\n const headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': subscriptionKey };\r\n\r\n const json = {\r\n Email: email.trim(),\r\n ResetToken: resetToken,\r\n NewPassword: password\r\n };\r\n\r\n fetch(apiURL + 'api/Account/ResetPassword', {\r\n method: 'POST',\r\n body: JSON.stringify(json),\r\n headers: headers\r\n })\r\n .then(handleErrors)\r\n .then(response => response.json())\r\n .then(data => {\r\n setLoading(false);\r\n if (data.Succeeded)\r\n login(email, password)\r\n else\r\n setError(\"Password reset failed. \" + data.Errors[0]);\r\n })\r\n .catch(error => {\r\n setLoading(false);\r\n setError(\"Something went wrong. Please check your login or ask your Tunstall administration for assistance.\");\r\n });\r\n }\r\n }\r\n\r\n const login = (email, password) => {\r\n const apiURL = process.env.REACT_APP_API_BASE_URL;\r\n const subscriptionKey = process.env.REACT_APP_API_SUBSCRIPTION_KEY;\r\n const headers = { 'Content-Type': 'text/plain', 'Ocp-Apim-Subscription-Key': subscriptionKey };\r\n\r\n fetch(apiURL + 'Token', {\r\n method: 'POST',\r\n body: \"grant_type=password&username=\" + email.trim() + \"&password=\" + password,\r\n headers: headers\r\n })\r\n .then(handleErrors)\r\n .then(response => response.json())\r\n .then(response => {\r\n localStorage.setItem(\"careXactSOS_BearerToken\", response.access_token);\r\n localStorage.setItem(\"careXactSOS_ApiURL\", apiURL);\r\n localStorage.setItem(\"careXactSOS_SubscriptionKey\", subscriptionKey);\r\n setLoading(false);\r\n history.push(\"/\");\r\n })\r\n .catch(error => {\r\n localStorage.removeItem(\"careXactSOS_BearerToken\");\r\n setLoading(false);\r\n setError(\"Something went wrong. Please try to login again using your new email and password.\");\r\n console.log(error.message);\r\n });\r\n }\r\n\r\n return (\r\n resetToken === '' ?\r\n Sign Up
\r\n\r\n \r\n \r\n \r\n \r\n \r\n {\r\n verifyEmail(event.target.value) === true ? setEmailRequiredState(\"success\") : setEmailRequiredState(\"error\");\r\n setEmail(event.target.value);\r\n },\r\n value: email,\r\n autoComplete: \"off\",\r\n endAdornment: EmailRequiredState === \"error\" ? ( \r\n \r\n \r\n {error && <>
{error}
}
\r\n \r\n \r\n \r\n \r\n
\r\n :\r\n Tunstall SOS
\r\nReset Password
\r\n \r\n{error}
}
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n verifyEmail(event.target.value) === true ? setEmailRequiredState(\"success\") : setEmailRequiredState(\"error\");\r\n setEmail(event.target.value);\r\n },\r\n value: email,\r\n autoComplete: \"off\",\r\n endAdornment: EmailRequiredState === \"error\" ? ( {\r\n verifyLength(event.target.value, 1) === true ? setPasswordRequiredState(\"success\") : setPasswordRequiredState(\"error\");\r\n setPassword(event.target.value);\r\n },\r\n endAdornment: PasswordRequiredState === \"error\" ? ( {\r\n verifyLength(event.target.value, 1) === true ? setConfirmPasswordRequiredState(\"success\") : setConfirmPasswordRequiredState(\"error\");\r\n setConfirmPassword(event.target.value);\r\n },\r\n endAdornment: ConfirmPasswordRequiredState === \"error\" ? ( \r\n \r\n \r\n {error && <>
{error}
}
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}","/*eslint-disable*/\r\nimport React, { Component } from \"react\";\r\nimport moment from 'moment';\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\n// @material-ui/components\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\n// core components\r\nimport GridItem from \"../../../components/Grid/GridItem.js\";\r\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\r\nimport Card from \"../../../components/Card/Card.js\";\r\nimport CardBody from \"../../../components/Card/CardBody.js\";\r\nimport ReactTable from \"../../../components/ReactTable/ReactTable.js\";\r\n\r\n// styles\r\nimport notificationsStyle from \"../../../assets/jss/material-dashboard-pro-react/views/notificationsStyle.js\";\r\nimport alertStyles from \"../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nimport Fab from '@material-ui/core/Fab';\r\nimport info from \"../../../assets/img/info.png\";\r\n\r\nimport Loader from 'react-loader-spinner';\r\nconst loaderStyle = { position: \"fixed\", top: \"50%\", left: \"55%\", transform: \"translate(-50%, -50%)\" }\r\nconst loader = (CareXact
\r\nReset Password
\r\n \r\n{error}
}
\r\n
\r\n Alert history is retained for one month.\r\n
\r\n \r\n });\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n\r\n let alerts = [];\r\n this.state.alertData != null ? alerts = this.state.alertData : [];\r\n\r\n if (alerts.length === 0) { return (loader); }\r\n\r\n let emptyObjArray = [];\r\n var emptyObj = {\r\n Name: null,\r\n Title: null,\r\n Phone: null,\r\n Time: null\r\n };\r\n emptyObjArray.push(emptyObj);\r\n\r\n return (\r\n alerts.Alerts !== null ?\r\n No alerts exist.\r\n
\r\n
\r\n
\r\n \r\n });\r\n }\r\n\r\n valuetext = (value) => {\r\n if (value === 3) return \"Low\";\r\n if (value === 5) return \"Moderate\";\r\n if (value === 7) return \"High\";\r\n }\r\n\r\n handleSliderChange = (event, value) => {\r\n this.setState({ sensitivity: value });\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const marks = [{ value: 3, label: \"Low\" }, { value: 5, label: \"Moderate\" }, { value: 7, label: \"High\" }];\r\n\r\n return (\r\n \r\n
Fall detection allows an alert to be sent if the pendant detects a sharp impact.
\r\nPlease note, detection of a fall relies on the pendant detecting a sharp impact or knock, in some instances falls may not be detected if the user lets themselves down gently or for example falls on a soft surface such as a bed or couch.
\r\nAlso it is possible that the pendant may register a fall alert when a fall has not occurred because the pendant has been placed down sharply on a hard surface.
\r\nFor these reasons it is advisable to discuss whether fall detection is an appropriate setting for the SOS pendant wearer.
\r\n\r\n \r\n this.showInfo(classes)} />\r\n \r\n {this.state.alert}\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\nFallAlarmStep.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style, alertStyles)(FallAlarmStep);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// core components\r\nimport GridContainer from \"../../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../../components/Grid/GridItem.js\";\r\nimport CustomInput from \"../../../../components/CustomInput/CustomInput.js\";\r\n\r\nimport validationFormStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\r\nimport alertStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nimport PlacesAutocomplete, { geocodeByAddress, getLatLng, geocodeByPlaceId } from 'react-places-autocomplete';\r\nimport parser from 'australia-address-parser';\r\n\r\nimport info from \"../../../../assets/img/info.png\";\r\nimport Fab from '@material-ui/core/Fab';\r\n\r\nimport 'react-phone-input-2/lib/style.css'\r\nimport PhoneInput from 'react-phone-input-2'\r\nimport startsWith from 'lodash.startswith';\r\n\r\nconst infoButtonStyle = {\r\n margin: 0,\r\n top: '550',\r\n right: 60,\r\n bottom: 'auto',\r\n left: 'auto',\r\n position: 'fixed'\r\n};\r\n\r\nconst style = {\r\n infoText: {\r\n fontWeight: \"300\",\r\n margin: \"10px 0 30px\",\r\n textAlign: \"center\"\r\n },\r\n inputAdornmentIcon: {\r\n color: \"#555\"\r\n },\r\n inputAdornment: {\r\n position: \"relative\"\r\n },\r\n ...alertStyles\r\n};\r\n\r\nconst info_image_icon = new Image().src = \"https://carexactsosprod.blob.core.windows.net/help/homeIcon.png\";\r\n\r\nclass ContactDetailsStep extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n StreetNumber: \"\",\r\n StreetName: \"\",\r\n StreetType: \"\",\r\n Suburb: \"\",\r\n State: \"\",\r\n PostCode: \"\",\r\n Country: \"\",\r\n Active: \"\",\r\n BirthDate: \"\",\r\n AddressVal: \"\",\r\n AddressLatitude: \"\",\r\n AddressLongitude: \"\",\r\n alert: null,\r\n PhoneNumber: \"\",\r\n isPhoneNumberValid: true\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n var device = JSON.parse(localStorage.getItem(\"careXactSOS_Device\"));\r\n\r\n if (device) {\r\n this.setState({\r\n FirstName: device.Party?.FirstName,\r\n LastName: device.Party?.LastName,\r\n PhoneNumber: device.Party?.PhoneNumber,\r\n AddressVal: device.Party?.StreetNumber !== \"\" ? device.Party?.StreetNumber + \" \" + device.Party?.StreetName + \" \" + device.Party?.StreetType + \", \" + device.Party?.Suburb + \" \" + device.Party?.State + \", \" + device.Party?.Country : \"\",\r\n StreetNumber: device.Party?.StreetNumber,\r\n StreetName: device.Party?.StreetName,\r\n StreetType: device.Party?.StreetType,\r\n Suburb: device.Party?.Suburb,\r\n State: device.Party?.State,\r\n PostCode: device.Party?.PostCode,\r\n Country: device.Party?.Country,\r\n Active: device.Party?.Active,\r\n BirthDate: device.Party?.BirthDate,\r\n AddressLatitude: device.Party?.AddressLatitude,\r\n AddressLongitude: device.Party?.AddressLongitude\r\n });\r\n } else {\r\n this.isValidated();\r\n }\r\n }\r\n\r\n sendState() {\r\n return this.state;\r\n }\r\n\r\n verifyLength(value, length) {\r\n if (value.length >= length) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n change(event, stateName) {\r\n this.setState({ [stateName]: event.target.value });\r\n }\r\n\r\n isValidated() {\r\n\r\n if (this.state.PhoneNumber !== '' && !this.state.isPhoneNumberValid) {\r\n const { classes } = this.props;\r\n this.showAlert(classes, \"Invalid Phone Number\", \"If a user phone number is added, it must start with a valid country code.\");\r\n return false; // if a user has added a phone number don't let them enter an invalid number\r\n }\r\n\r\n return true;\r\n }\r\n\r\n parseNZAddress = (address) => {\r\n try {\r\n const addressParts = address.split(',');\r\n\r\n // First part is the street number, street name, and street type\r\n const streetPart = addressParts[0]?.trim().split(' ') || [];\r\n\r\n const streetNumber = streetPart[0] || ''; // Safely get the street number or default to empty string\r\n const streetName = streetPart[1] || ''; // Safely get the street name or default to empty string\r\n const streetType = streetPart.slice(2).join(' ') || ''; // Safely get the street type or default to empty string\r\n\r\n // Safely handle missing parts in the address\r\n const suburb = addressParts[1]?.trim() || ''; // Suburb after the first comma\r\n const state = addressParts[2]?.trim() || ''; // State after the second comma\r\n const country = addressParts[3]?.trim() || ''; // Country after the third comma\r\n\r\n return {\r\n streetNumber,\r\n streetName,\r\n streetType,\r\n suburb,\r\n state,\r\n country\r\n };\r\n } catch (error) {\r\n // Catch any parsing errors and return an empty object\r\n console.error('Error parsing address:', error);\r\n return {};\r\n }\r\n }\r\n\r\n handleSelect = async (address, placeId) => {\r\n this.setState({ AddressVal: address });\r\n\r\n // Convert address to lowercase and check for \"australia\" or \"new zealand\"\r\n if (address.toLowerCase().includes(\"australia\")) {\r\n const addressInfo = parser.parseLocation(address);\r\n\r\n this.setState({\r\n StreetNumber: addressInfo?.streetNumber || '',\r\n StreetName: addressInfo?.streetName || '',\r\n StreetType: addressInfo?.streetType || '',\r\n Suburb: addressInfo?.suburb || '',\r\n State: addressInfo?.state || '',\r\n Country: \"Australia\"\r\n });\r\n } else if (address.toLowerCase().includes(\"new zealand\")) {\r\n\r\n const nzAddressInfo = this.parseNZAddress(address);\r\n\r\n this.setState({\r\n StreetNumber: nzAddressInfo?.streetNumber || '',\r\n StreetName: nzAddressInfo?.streetName || '',\r\n StreetType: nzAddressInfo?.streetType || '',\r\n Suburb: nzAddressInfo?.suburb || '',\r\n State: nzAddressInfo?.state || '',\r\n Country: nzAddressInfo.country\r\n });\r\n }\r\n\r\n await geocodeByAddress(address)\r\n .then(results => getLatLng(results[0]))\r\n .then(latLng => {\r\n this.setState({ AddressLatitude: latLng.lat, AddressLongitude: latLng.lng });\r\n })\r\n .catch(error => console.error('Error', error));\r\n\r\n var place = await geocodeByPlaceId(placeId);\r\n if (place != undefined)\r\n if (place.length > 0) {\r\n var postalCode = place[0].address_components.find(c => c.types.includes('postal_code')).short_name || {};\r\n this.setState({PostCode: postalCode});\r\n }\r\n }\r\n\r\n handleAddressChange = (address) => {\r\n this.setState({ AddressVal: address });\r\n\r\n if (address === \"\") {\r\n this.setState({\r\n StreetNumber: \"\",\r\n StreetName: \"\",\r\n StreetType: \"\",\r\n Suburb: \"\",\r\n State: \"\",\r\n PostCode: \"\",\r\n Country: \"\",\r\n AddressLatitude: \"\",\r\n AddressLongitude: \"\",\r\n });\r\n }\r\n }\r\n\r\n hideAlert = () => {\r\n this.setState({ alert: null });\r\n }\r\n\r\n showInfo(classes) {\r\n this.setState({\r\n alert:\r\n Is fall detection enabled for this pendant?
\r\n| \r\n Fall Detection\r\n | \r\n\r\n | \r\n
| \r\n Sensitivity\r\n | \r\n\r\n | \r\n
\r\n
\r\n
\r\n \r\n });\r\n }\r\n\r\n showAlert(classes, title, message) {\r\n this.setState({\r\n alert:\r\n \r\n
Enter the pendant wearers contact details. This is the name, home address, and contact phone number of the person wearing the SOS pendant.
\r\nThis information is optional.
\r\n\r\n {message}\r\n
\r\n \r\n });\r\n }\r\n\r\n handlePhoneNumberOnChange = (value, countryData) => {\r\n // if truthy then append a + so when we POST to db phone numbers have a +\r\n if (value) {\r\n value = value.startsWith('+') ? value : \"+\" + value;\r\n\r\n // format +610414999888 as +61414999888. International format country dial code replaces the leading 0\r\n value = value.startsWith('+' + countryData.dialCode + '0') ? value.replace('+' + countryData.dialCode + '0', '+' + countryData.dialCode) : value;\r\n }\r\n\r\n const isPhoneValid = this.isPhoneNumberFormatValid(value, countryData);\r\n\r\n this.setState({\r\n PhoneNumber: value,\r\n isPhoneNumberValid: isPhoneValid\r\n });\r\n };\r\n\r\n isPhoneNumberFormatValid = (inputNumber, country) => {\r\n if (inputNumber === '') {\r\n return true; // Allow empty, not a mandatory field\r\n }\r\n\r\n if (country?.dialCode) {\r\n return startsWith(inputNumber, \"+\" + country.dialCode) || startsWith(\"+\" + country.dialCode, inputNumber);\r\n }\r\n\r\n return false;\r\n };\r\n\r\n render() {\r\n const { classes } = this.props; \r\n\r\n return (\r\n \r\n \r\n this.showInfo(classes)} />\r\n \r\n {this.state.alert}\r\n \r\n \r\n \r\n \r\n this.change(event, \"FirstName\"),\r\n type: \"text\",\r\n value: this.state.FirstName || '',\r\n autoComplete: \"off\"\r\n }} />\r\n this.change(event, \"LastName\"),\r\n type: \"text\",\r\n value: this.state.LastName || '',\r\n autoComplete: \"off\"\r\n }} />\r\n \r\n \r\n {\r\n // If the value is empty, set it directly without prepending the country code\r\n if (!value || value.length === 1) {\r\n this.handlePhoneNumberOnChange(value, countryData);\r\n return;\r\n }\r\n\r\n // weird edge case where if a user types a number then selects a country the component doesn't add the country code automatically\r\n if (countryData?.dialCode && !value.startsWith(countryData?.dialCode)) {\r\n value = `+${countryData.dialCode}${value}`;\r\n }\r\n\r\n this.handlePhoneNumberOnChange(value, countryData);\r\n }}\r\n countryCodeEditable={true}\r\n isValid={(inputNumber, country, countries) => {\r\n // Ensure a country code is selected\r\n return countries.some((country) => {\r\n return (\r\n inputNumber.startsWith(country.dialCode) ||\r\n country.dialCode.startsWith(inputNumber)\r\n );\r\n });\r\n }}\r\n inputStyle={{ width: '50%' }}\r\n />\r\n \r\n \r\n this.handleAddressChange(val)} onSelect={this.handleSelect} debounce={500} searchOptions={{ types: ['address'], componentRestrictions: { country: ['au', 'nz'] }, }}>\r\n {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nContactDetailsStep.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style, validationFormStyles)(ContactDetailsStep);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\n// @material-ui/icons\r\nimport Close from \"@material-ui/icons/Close\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport Check from \"@material-ui/icons/Check\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\n\r\n// core components\r\nimport GridContainer from \"../../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../../components/Grid/GridItem.js\";\r\nimport CustomInput from \"../../../../components/CustomInput/CustomInput.js\";\r\n\r\nimport validationFormStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\r\nimport alertStyles from \"../../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nimport info from \"../../../../assets/img/info.png\";\r\nimport Fab from '@material-ui/core/Fab';\r\n\r\nconst infoButtonStyle = {\r\n margin: 0,\r\n top: '550',\r\n right: 60,\r\n bottom: 'auto',\r\n left: 'auto',\r\n position: 'fixed'\r\n};\r\n\r\nconst style = {\r\n infoText: {\r\n fontWeight: \"300\",\r\n margin: \"10px 0 30px\",\r\n textAlign: \"center\"\r\n },\r\n inputAdornmentIcon: {\r\n color: \"#555\"\r\n },\r\n inputAdornment: {\r\n position: \"relative\"\r\n },\r\n ...validationFormStyles,\r\n ...alertStyles\r\n};\r\n\r\n// preload trick - load the images used by sweet alert ahead of time.\r\nconst info_image = new Image().src = \"https://carexactsosprod.blob.core.windows.net/help/productCode.jpg\";\r\n\r\nclass TermsStep extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n TermsAcceptedState: false,\r\n scrolledToBottom: false,\r\n alert: null\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n \r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('scroll', this.handleScroll);\r\n }\r\n\r\n sendState() {\r\n return this.state;\r\n }\r\n\r\n verifyLength(value, length) {\r\n if (value.length >= length) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n hideAlert = () => {\r\n this.setState({ TermsAcceptedState: false, alert: null });\r\n }\r\n\r\n AcceptTerms = () => {\r\n this.setState({ TermsAcceptedState: true, alert: null });\r\n }\r\n\r\n showConfirmTerms() { \r\n const { classes } = this.props; \r\n\r\n this.setState({\r\n alert:\r\n Contact details for the pendant wearer
\r\n\r\n \r\n
\r\n )}\r\n \r\n {loading &&
\r\n Loading...
}\r\n {suggestions.map(suggestion => {\r\n const className = `py-1 px-2 ${suggestion.active ? 'suggestion-item--active' : 'suggestion-item'}`;\r\n // inline style for demonstration purpose\r\n const style = suggestion.active ? { backgroundColor: '#fafafa', cursor: 'pointer' } : { backgroundColor: '#ffffff', cursor: 'pointer' };\r\n return (\r\n \r\n {suggestion.description}\r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n });\r\n }\r\n\r\n showMustAcceptInfo() {\r\n const { classes } = this.props;\r\n\r\n this.setState({\r\n alert:\r\n Scroll to the bottom of the terms and conditions.
\r\nAfter reading the terms and conditions tick \"I agree to the terms and conditions\" before proceeding.
\r\n\r\n
\r\n \r\n });\r\n }\r\n\r\n isValidated() {\r\n if (this.state.TermsAcceptedState === true) {\r\n return true;\r\n } else {\r\n if (this.state.scrolledToBottom === false)\r\n this.showMustScrollInfo();\r\n else\r\n this.showMustAcceptInfo();\r\n }\r\n return false;\r\n }\r\n\r\n paneDidMount = (node) => {\r\n if (node) {\r\n node.addEventListener(\"scroll\", this.handleScroll.bind(this));\r\n }\r\n }\r\n\r\n handleToggleAcceptTerms = () => {\r\n if (this.state.TermsAcceptedState === false) this.setState({ TermsAcceptedState: true });\r\n if (this.state.TermsAcceptedState === true) this.setState({ TermsAcceptedState: false });\r\n };\r\n\r\n handleScroll = (event) => {\r\n var node = event.target;\r\n const bottom = node.scrollHeight - node.scrollTop === node.clientHeight;\r\n if (bottom) {\r\n this.setState({ scrolledToBottom: true });\r\n }\r\n }\r\n\r\n render() {\r\n const { classes } = this.props; \r\n\r\n return (\r\n Tick \"I agree to the terms and conditions\" before proceeding.
\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nTermsStep.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style, alertStyles)(TermsStep);\r\n","import React from \"react\";\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\n// core components\r\nimport Wizard from \"../../../components/Wizard/Wizard.js\";\r\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../components/Grid/GridItem.js\";\r\n\r\nimport FallAlarmStep from \"./DeviceDetailsWizardSteps/FallAlarm.js\";\r\nimport EmergencyContactsStep from \"./DeviceDetailsWizardSteps/EmergencyContacts.js\";\r\nimport ContactDetailsStep from \"./DeviceDetailsWizardSteps/ContactDetails.js\";\r\nimport ProductCodeStep from \"./DeviceDetailsWizardSteps/ProductCode.js\";\r\nimport TermsStep from \"./DeviceDetailsWizardSteps/Terms.js\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport alertStyles from \"../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nconst useAlertStyles = makeStyles(alertStyles);\r\n\r\nexport default function WizardAddDevice(props) {\r\n const alertClasses = useAlertStyles();\r\n const [Saving, setSaving] = React.useState(false);\r\n const [alert, setAlert] = React.useState(null);\r\n\r\n const hideAlert = () => {\r\n setAlert(null);\r\n };\r\n\r\n const showAlert = (title, message) => {\r\n setAlert(\r\n \r\n this.handleToggleAcceptTerms()}\r\n checked={this.state.TermsAcceptedState}\r\n checkedIcon={\r\n
\r\n {this.state.alert}\r\n Please read the following terms and conditions carefully as they govern your use of Tunstall Gem4 SOS Personal Alert Pendant
\r\n- \r\n
- \r\n Definitions
\r\n In these Terms and Conditions the following definitions shall apply:
\r\n- \r\n
- \"CareXact\" means the provider of the software portal that supports the Gem4 SOS service provided by Tunstall. \r\n
- \"Commencement Date\" is the date on which the Customer has purchased the Device and agreed to the terms via the Tunstall website. \r\n
- \"Customer\" is the person who will be using the Device or the person who is purchasing the Device or paying for the service. \r\n
- \"Device\" is the Tunstall Healthcare GEM4 SOS Pendant \r\n
- \"Installation\" shall mean the installation of the Device by the Customer in accordance with the User Guide accompanying the Device, when delivered to the Customer. \r\n
- \"Maintenance\" shall mean the Maintenance of the Device required to be carried out by the Customer in accordance with the User Guide. \r\n
- \"Nominated Responder\" shall mean the person or persons the Customer has nominated to be notified when the Customer uses the Device for its intended purpose. \r\n
- \"Tunstall\" shall mean Tunstall Australasia Pty Ltd (ACN 059 121 863) whose registered office is situated at Unit 1, 56 Lavarack Avenue, Eagle Farm QLD 4009 and any related Company. \r\n
- \"SIM\" A SIM card is a small card that contains a mobile network subscriber's account information. This allows the Device using the card to attach to a mobile network. \r\n
- \"Subscription Fee\" means a monthly fee paid by the Customer, which covers the cost of the SIM card and fee for the monthly portal service, in order for the Device to notify Nominated Responders as necessary. \r\n
- \"Subscription Services\" means the SIM card and use of the monthly portal service, in order for the Device to notify Nominated Responders as necessary. \r\n
- \"User Guide\" shall mean the documentation provided with the Device, outlining the installation, maintenance and care for which the Customer is responsible for. \r\n
- \r\n Device Disclosure Statement\r\n
- \r\n
- The purchase and continued use of the Device constitutes the acknowledgement and acceptance of these terms and conditions by the Customer, including any changes to the terms and conditions as updated from time to time and made available on Tunstall's website. \r\n
- The Device available for purchase from Tunstall is to be self-installed and maintained by the Customer and the on-going maintenance and testing is solely the Customer's responsibility. \r\n
- For continuous operation the Device requires an active SIM account and batteries to be charged or replaced from time to time. \r\n
- While the Device available and supplied by Tunstall will provide independence and assist in the supervised care of the Customer by their Nominated Responder/s, the Device shall not be considered as a life saving device. Tunstall accepts no liability for the loss of property or personal injury, loss of income or any other liability that should result from the Device failing to operate. \r\n
- \r\n Mobile network coverage & GPS signal\r\n
- \r\n
- The reliability of the Device is dependent on the available 4G or 3G mobile network coverage in your location. \r\n
- The accuracy of the GPS signal is determined by the availability of unobstructed line of sight to available satellites and can be blocked by underground carparks, lifts, concrete buildings, tunnels and other constructions. \r\n
- The availability of mobile network coverage and accuracy of the GPS signal is reliant on third party providers and is not guaranteed by Tunstall. \r\n
- Tunstall does not guarantee that the Device can connect to the mobile network at all times, or that a help text message or help call will be received by every nominated responder at all times or within a short time frame. \r\n
- \r\n Price\r\n
- \r\n
- All prices quoted on the website are in Australian dollars. \r\n
- Tunstall reserves the right to increase the price of the Customer's subscription from time to time and the Customer will be given reasonable notice prior to any such price. \r\n
- All prices payable, as advertised, are inclusive of GST. GST will be added at time of payment. \r\n
- \r\n Fair Use
\r\n The intention of this Clause is to establish when the Device, installed with the Telstra managed SIM card, can be used by a Customer as follows:
\r\n- \r\n
- A Customer may use the SOS and side-talk buttons on the Device in emergency situations. \r\n
- They may also use the Device when testing the Device initially, and in suitable intervals (3 months), where testing is reasonably required e.g. one press of SOS button to test nominated responders' mobile numbers are correct. \r\n
- The Customer may not use the SIM service in a way which is improper or unacceptable. \r\n
- \r\n Improper Use\r\n
- \r\n
- Tunstall considers the Customer's use of the service improper if the Customer uses it in a way which is other than Tunstall intended it for. \r\n
- A Customer shall not use the Device like a traditional mobile communication device. \r\n
- \r\n SIM Supply\r\n
- \r\n
- Tunstall is responsible for the supply of the SIM card installed in the Device. \r\n
- The Tunstall supplied SIM remains the property of Tunstall at all times. \r\n
- The Customer is not permitted to remove or tamper with the SIM at any time. \r\n
- Tunstall will be entitled to charge the Customer for misuse or excessive use of a Tunstall supplied SIM. \r\n
- \r\n Excessive Use\r\n
- \r\n
- SMS and Voice usage for each active Device is monitored by Tunstall. \r\n
- If Tunstall deems the usage patterns to be excessive, i.e. used significantly more than the Device is typically used other than for emergency situations, the Customer will be liable for further charges for excess operation (see improper use). \r\n
- Where excessive usage continues and/or a Customer fails to reimburse Tunstall for excess usage, the Customer needs to be aware that the Tunstall provided SIM installed in the Device can be subject to cancellation by Tunstall. \r\n
- \r\n Limitation of Liability\r\n
- \r\n
- Tunstall is not liable for any injury, loss or damage caused by:
- the failure of the Customer's personal nominated responders to respond to; or respond promptly to a call for help via the Device; or \r\n
- failure of the Customer to operate and maintain the Device properly in accordance with the User Guide, including to regularly test; or \r\n
- the Device failing to operate due to mobile network connectivity issues. \r\n
- The Customer agrees to indemnify Tunstall against all claims for injury, loss or damage arising out of the above circumstances. \r\n
\r\n- \r\n
\r\n - \r\n Warranty\r\n
- \r\n
- A twelve (12) month warranty period is offered except where otherwise stated. \r\n
- This warranty policy accommodates defects in materials and workmanship. \r\n
- In the event of a warranty claim, proof of purchase must be provided including a detailed description of the perceived fault. \r\n
- Where a fault is confirmed by Tunstall's technical department the faulty product will, at Tunstall's discretion be repaired or replaced. \r\n
- Freight charges for a Device where a fault is confirmed by Tunstall's technical department, will be the responsibility of Tunstall. \r\n
- Warranty is subject to the Device being maintained and used in accordance with the User Manual. \r\n
- Warranty is void if the Device has been tampered with by the Customer, or any other person's, in any manner. \r\n
- \r\n Privacy\r\n
- \r\n
- Tunstall assures confidential personal information will only be used for the purpose for which the Customer has provided it. \r\n
- By agreeing to these Terms and Conditions, the Customer acknowledges and accepts that their personal information will be shared with CareXact only for the sole purposes of providing the service and the Device as intended. \r\n
- Notwithstanding clause 12(b), confidential personal information will not be provided to any other person or agency without the Customer's consent or that of their legally designated representative. \r\n
- For any further queries the Tunstall Privacy Officer can be contacted at APAC.privacy@tunstall.com. \r\n
- \r\n Basis of Subscription Services\r\n
- \r\n
- The Subscription Service is provided to the Customer on a \"rolling monthly\" basis and the Customer will pay a monthly recurring fee in advance for any Subscription Services which they have subscribed to. \r\n
- The Subscription Services will be provided to the Customer during the period of time that the Customer has paid for the relevant Subscription Services. \r\n
- If the monthly Subscription Fee remains unpaid 21 days after the renewal due date, due to any circumstance including declined payments, the Subscription Services may be deactivated without further notice to the Customer. \r\n
- In this case the Device will no longer operate and an additional fee may be charged to reactivate the Subscription Services. \r\n
- If the Customer wants to cancel the Subscription Services, this can be done within the CareXact portal and any cancellation will take effect at the end of the Customer's current monthly billing cycle. \r\n
- When the cancellation takes effect, the Customer will be unable to continue to use the Device as it is intended to be used, and the cancelled Subscription Services will no longer be available. \r\n
- \r\n Consumer Guarantee
\r\n Nothing in these Terms and Conditions shall be read or applied so as to exclude, restrict or modify or have the effect of excluding, restricting or modifying any condition, warranty, guarantee, right or remedy implied by law (including the Australian Consumer Law) which cannot by law be excluded, restricted or modified.\r\n - \r\n Change of Mind Returns
\r\n Unless otherwise agreed by Tunstall in its discretion, unfortunately Tunstall are unable to offer change of mind returns and exchanges/refunds. This no change of mind policy for returns does not limit or apply to any returns made for defective products in accordance with Tunstall's warranty clause.\r\n - \r\n General\r\n
- \r\n
- These Terms and Conditions are agreed by the Customer and the Customer shall not at any time assign, pledge, mortgage, transfer or otherwise dispose in whole or in part of any or all the rights under these Terms and Conditions. \r\n
- Tunstall may at any time assign, pledge, mortgage, transfer or otherwise dispose in whole or in part of any or all the rights under these Terms and Conditions. \r\n
- Any time or other indulgence granted by Tunstall to the Customer shall not affect the strict rights of Tunstall under these Terms and Conditions. \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 }\r\n\r\n valuetext = (value) => {\r\n if (value === 1) return \"Low\";\r\n if (value === 2) return \"Medium\";\r\n if (value === 3) return \"High\";\r\n }\r\n\r\n handleSliderChange = (event, value) => {\r\n var privacyLevel = \"medium\";\r\n\r\n if (value === 1) privacyLevel = \"low\";\r\n if (value === 2) privacyLevel = \"medium\";\r\n if (value === 3) privacyLevel = \"high\";\r\n\r\n this.setState({ privacyLevel: privacyLevel });\r\n }\r\n\r\n handleMotionSensitivitySliderChange = (event, value) => {\r\n var motionSensitivity = \"medium\";\r\n\r\n if (value === 1) motionSensitivity = \"low\";\r\n if (value === 2) motionSensitivity = \"medium\";\r\n if (value === 3) motionSensitivity = \"high\";\r\n\r\n this.setState({ motionSensitivity: motionSensitivity });\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const privacySliderMarks = [{ value: 1, label: \"Low\" }, { value: 2, label: \"Medium\" }, { value: 3, label: \"High\" }];\r\n var privacyLevel = this.state.privacyLevel === \"low\" ? 1 : this.state.privacyLevel === \"medium\" ? 2 : 3;\r\n\r\n const motionSensitivitySliderMarks = [{ value: 1, label: \"Low\" }, { value: 2, label: \"Medium\" }, { value: 3, label: \"High\" }];\r\n var motionSensitivity = this.state.motionSensitivity === \"low\" ? 1 : this.state.motionSensitivity === \"high\" ? 3 : 2;\r\n\r\n return (\r\n \r\n
Fall detection allows an alert to be sent if the pendant detects a sharp impact.
\r\nPlease note, detection of a fall relies on the pendant detecting a sharp impact or knock, in some instances falls may not be detected if the user lets themselves down gently or for example falls on a soft surface such as a bed or couch.
\r\nAlso it is possible that the pendant may register a fall alert when a fall has not occurred because the pendant has been placed down sharply on a hard surface.
\r\nFor these reasons it is advisable to discuss whether fall detection is an appropriate setting for the SOS pendant wearer.
\r\n\r\n \r\n this.showInfo(classes)} />\r\n \r\n {this.state.alert}\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\nDeviceSettingsVisionStep.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style, alertStyles)(DeviceSettingsVisionStep);\r\n","import React from \"react\";\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\n// core components\r\nimport Wizard from \"../../../components/Wizard/Wizard.js\";\r\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../components/Grid/GridItem.js\";\r\n\r\nimport DeviceSettingsVisionStep from \"./DeviceDetailsWizardSteps/DeviceSettingsVision.js\";\r\nimport ContactDetailsStep from \"./DeviceDetailsWizardSteps/ContactDetails.js\";\r\nimport ProductCodeStep from \"./DeviceDetailsWizardSteps/ProductCode.js\";\r\nimport TermsStep from \"./DeviceDetailsWizardSteps/Terms.js\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport alertStyles from \"../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nconst useAlertStyles = makeStyles(alertStyles);\r\n\r\nexport default function WizardAddDeviceVision(props) {\r\n const alertClasses = useAlertStyles();\r\n const [Saving, setSaving] = React.useState(false);\r\n const [alert, setAlert] = React.useState(null);\r\n\r\n const hideAlert = () => {\r\n setAlert(null);\r\n };\r\n\r\n const showAlert = (title, message) => {\r\n setAlert(\r\n Adjust the privacy level and settings for this device.
\r\n| \r\n | |
|---|---|
| Motion Sensitivity | \r\n\r\n | \r\n
| Privacy Level | \r\n\r\n | \r\n
| Object Polygons | \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 return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {computerVisionLogData.ComputerVisionLog && computerVisionLogData.ComputerVisionLog.map(log => {\r\n var date = new Date(log.DateTimeCreated + 'Z');\r\n \r\n return (\r\n \r\n \r\n \r\n {log.Model === \"Google Vision\" ? ![](\"https://carexactsosprod.blob.core.windows.net/public/GoogleVision.png\")
: ![](\"https://carexactsosprod.blob.core.windows.net/public/AzureVision.png\")
}
\r\n\r\n {this.getTime(log.DateTimeCreated)}
\r\n
\r\n {log.Caption}
\r\n Full Screen | View JSON\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\nexport default withStyles(style)(ComputerVisionLog);","import React, { Component } from \"react\";\r\nimport SweetAlert from \"react-bootstrap-sweetalert\";\r\n\r\n// material-ui icons\r\nimport Add from \"@material-ui/icons/Add\";\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\n// material-ui components\r\nimport Tooltip from \"@material-ui/core/Tooltip\";\r\n\r\n// core components\r\nimport GridContainer from \"../../../components/Grid/GridContainer.js\";\r\nimport GridItem from \"../../../components/Grid/GridItem.js\";\r\nimport Button from \"../../../components/CustomButtons/Button.js\";\r\nimport Card from \"../../../components/Card/Card.js\";\r\nimport CardBody from \"../../../components/Card/CardBody.js\";\r\nimport ReactTable from \"../../../components/ReactTable/ReactTable.js\";\r\n\r\n// custom components\r\nimport WizardAddDevice from \"./WizardAddDevice.js\";\r\nimport WizardAddDeviceVision from \"./WizardAddDeviceVision.js\";\r\nimport WizardSubscription from \"./WizardSubscription.js\";\r\nimport WizardUpdateDevice from \"./WizardUpdateDevice.js\";\r\nimport WizardUpdateDeviceVision from \"./WizardUpdateDeviceVision.js\";\r\n\r\nimport ComputerVisionLog from \"../ComputerVisionLog/ComputerVisionLog.js\";\r\n\r\n// tell webpack this js file uses the image\r\nimport PayPal from \"../../../assets/img/paypal.png\";\r\n\r\nimport regularFormStyles from \"../../../assets/jss/material-dashboard-pro-react/views/regularFormsStyle.js\";\r\nimport alertStyles from \"../../../assets/jss/material-dashboard-pro-react/views/sweetAlertStyle.js\";\r\n\r\nimport Loader from 'react-loader-spinner';\r\nconst loaderStyle = { position: \"fixed\", top: \"50%\", left: \"55%\", transform: \"translate(-50%, -50%)\"}\r\nconst loader = ( : } \r\n
\r\n
\r\n {log.Caption}
\r\n Full Screen | View JSON\r\n
\r\n Your device will not be activated until a PayPal subscription is attached to the device.\r\n
\r\n \r\n
\r\n When you are ready to activate your device press the PayPal button next to the device under your account.\r\n
\r\n \r\n
\r\n Once the PayPal subscription is activated your device will be automatically activated within 10 minutes.\r\n
\r\n \r\n });\r\n }\r\n\r\n showAddWithSubscribedSuccessAlert() {\r\n const { classes } = this.props;\r\n\r\n this.setState({\r\n alert:\r\n \r\n The device and PayPal subscription are now active.\r\n
\r\n \r\n
\r\n Please ensure the device is turned on so it can be automatically configured.\r\n
\r\n \r\n
\r\n After 4 hours try a test SOS button press and ensure your emergency contacts receive a phone call or SMS.\r\n
\r\n \r\n });\r\n }\r\n\r\n showUpdateSuccessAlert() {\r\n const { classes } = this.props;\r\n\r\n this.setState({\r\n alert:\r\n \r\n Your device will be automatically updated in the next 4 hours.\r\n
\r\n \r\n
\r\n Please ensure the device is turned on.\r\n
\r\n \r\n
\r\n Emergency Contacts will receive an SMS confirmation once the device update is complete.\r\n
\r\n \r\n });\r\n }\r\n\r\n showSubscription(classes, subscriptionTypePlanId, status, id) {\r\n var displayStatus = status === 1 ? \"Active\" : \"Paused\";\r\n\r\n this.setState({\r\n alert:\r\n \r\n 
\r\n
\r\n :\r\n \r\n Status : {displayStatus}\r\n
\r\n \r\n 
\r\n
\r\n }\r\n \r\n });\r\n }\r\n\r\n getDeviceBatteryLevelValue(deviceType, batteryLevel) {\r\n\r\n if (deviceType === null || deviceType === undefined) return \"\";\r\n if (deviceType.toLowerCase() === \"vision\") return \"\";\r\n\r\n return batteryLevel;\r\n }\r\n\r\n getDeviceFallDetectionValue(deviceType, fallDetection) {\r\n\r\n if (deviceType === null || deviceType === undefined) return \"\";\r\n if (deviceType.toLowerCase() === \"vision\") return \"\";\r\n\r\n if (deviceType.toLowerCase() === \"ev04\" || deviceType.toLowerCase() === \"ev05\") {\r\n if (fallDetection === null) return \"Disabled\";\r\n if (fallDetection === undefined) return \"Disabled\";\r\n if (fallDetection[0].Enabled === \"Y\") return \"Enabled\";\r\n if (fallDetection[0].Enabled === \"N\") return \"Disabled\";\r\n }\r\n\r\n return fallDetection;\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n\r\n var devicesData = this.state.devicesData !== null ? this.state.devicesData : null;\r\n if (devicesData === null) { return (loader); }\r\n if (devicesData === undefined) { return (loader); }\r\n\r\n let emptyObjArray = [];\r\n var emptyObj = {\r\n DeviceName: null,\r\n DeviceUser: null,\r\n FallEnabled: null,\r\n AuthorizedNumbers: null,\r\n BatteryLevel: null,\r\n SubscriptionId: null,\r\n Actions: null\r\n };\r\n emptyObjArray.push(emptyObj);\r\n\r\n if (this.state.showAddDeviceWizardForm) {\r\n window.scrollTo(0, 0);\r\n return this.showAddDeviceWizardForm();\r\n } else if (this.state.showAddDeviceVisionWizardForm) {\r\n window.scrollTo(0, 0);\r\n return this.showAddDeviceVisionWizardForm();\r\n } else if (this.state.showSubscriptionWizardForm) {\r\n window.scrollTo(0, 0);\r\n return this.showSubscriptionWizardForm();\r\n } else if (this.state.showUpdateDeviceWizardForm) {\r\n window.scrollTo(0, 0);\r\n return this.showUpdateDeviceWizardForm();\r\n } else if (this.state.showComputerVisionLog) {\r\n window.scrollTo(0, 0);\r\n return this.showComputerVisionLog();\r\n } \r\n else {\r\n return (\r\n devicesData.Devices !== undefined ?\r\n this.state.mobilePortaitMode === true ?\r\n \r\n Status : {displayStatus}\r\n
\r\n \r\n Subscription Id : {id}\r\n
\r\n \r\n
\r\n {prop[\"PayPalSubscriptionId\"] !== null ? : }\r\n
\r\n )\r\n };\r\n })}\r\n />\r\n \r\n
\r\n {prop[\"PayPalSubscriptionId\"] !== null ? : }\r\n
\r\n )\r\n };\r\n })}\r\n />\r\n \r\n
No devices exist. Add a device to your account.\r\n
\r\n
No devices exist. Add a device to your account.\r\n
\r\n
\r\n \r\n });\r\n }\r\n\r\n showSuccessAlert(title, message) {\r\n const { classes } = this.props;\r\n\r\n this.setState({\r\n alert:\r\n - \r\n
- Test Me will send a test phone call from the SOS pendant to {testPhoneNumber}. \r\n
- Test Me will use emergency contact phone number 1 from the device configuration. \r\n
Warning : Test Me usage is covered under the CareXact SOS Fair Use Policy.
\r\n\r\n {message}\r\n
\r\n \r\n });\r\n }\r\n\r\n showErrorAlert(title, message) {\r\n const { classes } = this.props;\r\n\r\n this.setState({\r\n alert:\r\n \r\n {message}\r\n
\r\n \r\n });\r\n }\r\n\r\n showInfo(classes) {\r\n this.setState({\r\n alert:\r\n \r\n \r\n
\r\n
\r\n \r\n });\r\n }\r\n\r\n getTestPhoneNumber = (deviceId) => {\r\n var devices = this.state.devicesData\r\n var testPhoneNumber;\r\n\r\n devices.forEach(device => {\r\n if (device.DeviceId === deviceId) {\r\n device.AuthorizedNumbers.forEach(slot => {\r\n if (slot.Serial === 0)\r\n testPhoneNumber = slot.AuthorizedNumber;\r\n });\r\n }\r\n });\r\n\r\n return testPhoneNumber;\r\n }\r\n\r\n onZoomEnd = (e) => {\r\n this.setState({ zoom: e.target._zoom });\r\n }\r\n\r\n async reverseGeoCode(lat, lng){\r\n await fetch('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lng + '&key=AIzaSyAXZhUxTmtSKcmO77MbSj57H8EX7_-yDlQ')\r\n .then(response => response.json())\r\n .then(data => {\r\n if (data.status !== \"OK\") {\r\n this.setState({\r\n currentSelectedDeviceAddress: \"\"\r\n });\r\n } else {\r\n var deviceAddress = data.results[0].formatted_address.replaceAll(',', '\\n');\r\n deviceAddress = deviceAddress.replaceAll(' \\n', '\\n');\r\n deviceAddress = deviceAddress.replaceAll('\\n ', '\\n');\r\n\r\n this.setState({\r\n currentSelectedDeviceAddress: deviceAddress\r\n });\r\n }\r\n })\r\n .catch(error => {\r\n console.out(error);\r\n });\r\n }\r\n\r\n isLatLongDeviceCollision = (deviceId, lat, lng) => {\r\n var collisionFound = false;\r\n const devices = this.state.devicesData;\r\n\r\n devices.forEach(device => {\r\n if (device.DeviceId !== deviceId) {\r\n var eachDeviceLat = parseFloat(device.DeviceLocation.Latitude);\r\n var eachDeviceLng = parseFloat(device.DeviceLocation.Longitude);\r\n\r\n var latDifference = Math.abs(eachDeviceLat - lat);\r\n var lngDifference = Math.abs(eachDeviceLng - lng);\r\n\r\n if ((latDifference < 0.0002) && (lngDifference < 0.0002)) \r\n collisionFound = true;\r\n\r\n //if ((lat === device.DeviceLocation.Latitude) && (lng === device.DeviceLocation.Longitude)) {\r\n //}\r\n }\r\n });\r\n\r\n return collisionFound;\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n\r\n var filteredDevices = this.state.devicesData !== null ? this.state.devicesData : null;\r\n if (filteredDevices === null) { return (loader); }\r\n\r\n var filteredAlerts = this.state.alertData !== null ? this.state.alertData : null;\r\n if (filteredAlerts === null) { return (loader); }\r\n\r\n var bumpLat = 0.0001;\r\n var bumpLng = 0.0001;\r\n\r\n const bounds = latLngBounds();\r\n if (filteredDevices.length > 0)\r\n filteredDevices.forEach(device => {\r\n if (this.isLatLongDeviceCollision(device.DeviceId, parseFloat(device.DeviceLocation.Latitude), parseFloat(device.DeviceLocation.Longitude))) {\r\n device.DeviceLocation.Latitude = parseFloat(device.DeviceLocation.Latitude) + bumpLat;\r\n device.DeviceLocation.Longitude = parseFloat(device.DeviceLocation.Longitude) + bumpLng;\r\n bumpLat = bumpLat + 0.0001;\r\n bumpLng = bumpLng + 0.0001;\r\n }\r\n\r\n bounds.extend([device.DeviceLocation.Latitude, device.DeviceLocation.Longitude]);\r\n });\r\n\r\n if (this.state.showAlerts)\r\n if (filteredAlerts.length > 0)\r\n filteredAlerts.forEach(alert => { bounds.extend([alert.Latitude, alert.Longitude]) });\r\n\r\n return (\r\n filteredDevices && filteredDevices.length > 0 ?\r\n | \r\n | |
|---|---|
| Red map markers show where an alert happened. Click on the red map marker to view details about the alert. | \r\n|
| \r\n | Blue map markers represent the last known position of the SOS pendant. | \r\n
- \r\n
- Click on a blue map marker to view the contact details for the person wearing the SOS pendant. \r\n
- To find a lost pendant, click a blue map marker then click the FIND ME button to make the SOS pendant sound an audible message. \r\n
- To send a test call from an SOS pendant to emergency contact phone number 1 without triggering an alert, click a blue map marker then click the TEST ME button. \r\n
\r\n
\r\n \r\n
\r\n \r\n this.handleShowAlertChange(e)} value=\"showAlertsEnabled\" classes={{ switchBase: classes.switchBase, checked: classes.switchChecked, thumb: classes.switchIcon, track: classes.switchBar }} />} classes={{ label: classes.label }} label=\"Show Alerts\" />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n this.handleShowAlertChange(e)} value=\"showAlertsEnabled\" classes={{ switchBase: classes.switchBase, checked: classes.switchChecked, thumb: classes.switchIcon, track: classes.switchBar }} />} classes={{ label: classes.label }} label=\"Show Alerts\" />\r\n
\r\n \r\n \r\n
\r\n Contacts
\r\n\r\n Tunstall Gem4 SOS support\r\n
\r\n\n \n \n \n \n \n \n \n \n \n FREE\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n $69\n \n \n \n \n \n \n \n \n $159\n \n \n \n \n \n
\n );\n}\n","import Buttons from \"./views/Components/Buttons.js\";\nimport Calendar from \"./views/Calendar/Calendar.js\";\nimport Charts from \"./views/Charts/Charts.js\";\nimport ErrorPage from \"./views/Pages/ErrorPage.js\";\nimport ExtendedForms from \"./views//Forms/ExtendedForms.js\";\nimport ExtendedTables from \"./views/Tables/ExtendedTables.js\";\nimport GridSystem from \"./views/Components/GridSystem.js\";\nimport Icons from \"./views/Components/Icons.js\";\nimport LockScreenPage from \"./views/Pages/LockScreenPage.js\";\nimport Notifications from \"./views/Components/Notifications.js\";\nimport Panels from \"./views/Components/Panels.js\";\nimport RTLSupport from \"./views/Pages/RTLSupport.js\";\nimport ReactTables from \"./views/Tables/ReactTables.js\";\nimport RegularForms from \"./views/Forms/RegularForms.js\";\nimport RegularTables from \"./views/Tables/RegularTables.js\";\nimport SweetAlert from \"./views/Components/SweetAlert.js\";\nimport Typography from \"./views/Components/Typography.js\";\nimport ValidationForms from \"./views/Forms/ValidationForms.js\";\nimport Widgets from \"./views/Widgets/Widgets.js\";\nimport Wizard from \"./views/Forms/Wizard.js\";\nimport TableList from \"./views/TableList/TableList.js\";\n\n\n// @material-ui/icons\nimport Apps from \"@material-ui/icons/Apps\";\nimport DateRange from \"@material-ui/icons/DateRange\";\nimport GridOn from \"@material-ui/icons/GridOn\";\nimport Image from \"@material-ui/icons/Image\";\nimport Timeline from \"@material-ui/icons/Timeline\";\nimport WidgetsIcon from \"@material-ui/icons/Widgets\";\nimport LocationOn from \"@material-ui/icons/LocationOn\";\nimport Person from \"@material-ui/icons/Person\";\nimport Alert from \"@material-ui/icons/Notifications\";\nimport Language from \"@material-ui/icons/Language\";\nimport DevicesOther from \"@material-ui/icons/DevicesOther\";\n\n// custom views\nimport LoginPage from \"./views/SOSDevice/Accounts/LoginPage.js\";\nimport SignupPage from \"./views/SOSDevice/Accounts/SignupPage.js\";\nimport ResetPasswordPage from \"./views/SOSDevice/Accounts/ResetPassword.js\";\nimport Alerts from \"./views/SOSDevice/Alerts/Alerts.js\";\nimport Devices from \"./views/SOSDevice/Device/Devices.js\";\nimport DeviceLocator from \"./views/SOSDevice/Device/DeviceLocator.js\";\nimport Support from \"./views/SOSDevice/Support/Support.js\";\nimport PricingPage from \"./views/SOSDevice/Accounts/PricingPage.js\";\n\nvar dashRoutes = [\n {\n path: \"/Devices\",\n name: \"Devices\",\n icon: DevicesOther,\n component: Devices,\n layout: \"/admin\"\n },\n {\n path: \"/Device-Locator\",\n name: \"Device Locator\",\n icon: LocationOn,\n component: DeviceLocator,\n layout: \"/admin\"\n },\n {\n path: \"/Alerts\",\n name: \"Alerts\",\n icon: Alert,\n component: Alerts,\n layout: \"/admin\"\n },\n {\n path: \"/Support\",\n name: \"Support\",\n icon: Language,\n component: Support,\n layout: \"/admin\"\n },\n {\n collapse: true,\n hidden: true,\n name: \"Dev Features\",\n icon: Image,\n state: \"pageCollapse\",\n views: [\n {\n collapse: true,\n name: \"Pages\",\n rtlName: \"صفحات\",\n icon: Image,\n state: \"pageCollapse\",\n views: [\n {\n path: \"/Calendar\",\n name: \"Appointments\",\n icon: DateRange,\n component: Calendar,\n layout: \"/admin\"\n },\n {\n path: \"/pricing-page\",\n name: \"Pricing Page\",\n mini: \"PP\",\n component: PricingPage,\n layout: \"/auth\"\n },\n {\n path: \"/rtl-support-page\",\n name: \"RTL Support\",\n mini: \"RS\",\n component: RTLSupport,\n layout: \"/rtl\"\n },\n {\n path: \"/login-page\",\n name: \"Login Page\",\n mini: \"L\",\n component: LoginPage,\n layout: \"/auth\"\n },\n {\n path: \"/reset-password\",\n name: \"Reset Password\",\n mini: \"R\",\n component: ResetPasswordPage,\n layout: \"/auth\"\n },\n {\n path: \"/sign-up\",\n name: \"Sign Up\",\n mini: \"S\",\n component: SignupPage,\n layout: \"/auth\"\n },\n {\n path: \"/pricing\",\n name: \"Pricing\",\n mini: \"P\",\n component: PricingPage,\n layout: \"/auth\"\n },\n {\n path: \"/error-page\",\n name: \"Error Page\",\n mini: \"E\",\n component: ErrorPage,\n layout: \"/auth\"\n }\n ]\n },\n {\n collapse: true,\n name: \"Components\",\n rtlName: \"المكونات\",\n icon: Apps,\n state: \"componentsCollapse\",\n views: [\n {\n collapse: true,\n name: \"Multi Level Collapse\",\n rtlName: \"انهيار متعدد المستويات\",\n mini: \"MC\",\n rtlMini: \"ر\",\n state: \"multiCollapse\",\n views: [\n {\n path: \"/buttons\",\n name: \"Buttons\",\n rtlName: \"وصفت\",\n mini: \"B\",\n rtlMini: \"ب\",\n component: Buttons,\n layout: \"/admin\"\n }\n ]\n },\n {\n path: \"/buttons\",\n name: \"Buttons\",\n rtlName: \"وصفت\",\n mini: \"B\",\n rtlMini: \"ب\",\n component: Buttons,\n layout: \"/admin\"\n },\n {\n path: \"/grid-system\",\n name: \"Grid System\",\n rtlName: \"نظام الشبكة\",\n mini: \"GS\",\n rtlMini: \"زو\",\n component: GridSystem,\n layout: \"/admin\"\n },\n {\n path: \"/panels\",\n name: \"Panels\",\n rtlName: \"لوحات\",\n mini: \"P\",\n rtlMini: \"ع\",\n component: Panels,\n layout: \"/admin\"\n },\n {\n path: \"/sweet-alert\",\n name: \"Sweet Alert\",\n rtlName: \"الحلو تنبيه\",\n mini: \"SA\",\n rtlMini: \"ومن\",\n component: SweetAlert,\n layout: \"/admin\"\n },\n {\n path: \"/notifications\",\n name: \"Notifications\",\n rtlName: \"إخطارات\",\n mini: \"N\",\n rtlMini: \"ن\",\n component: Notifications,\n layout: \"/admin\"\n },\n {\n path: \"/icons\",\n name: \"Icons\",\n rtlName: \"الرموز\",\n mini: \"I\",\n rtlMini: \"و\",\n component: Icons,\n layout: \"/admin\"\n },\n {\n path: \"/typography\",\n name: \"Typography\",\n rtlName: \"طباعة\",\n mini: \"T\",\n rtlMini: \"ر\",\n component: Typography,\n layout: \"/admin\"\n }\n ]\n },\n {\n collapse: true,\n name: \"Forms\",\n rtlName: \"إستمارات\",\n icon: \"content_paste\",\n state: \"formsCollapse\",\n views: [\n {\n path: \"/regular-forms\",\n name: \"Regular Forms\",\n rtlName: \"أشكال عادية\",\n mini: \"RF\",\n rtlMini: \"صو\",\n component: RegularForms,\n layout: \"/admin\"\n },\n {\n path: \"/extended-forms\",\n name: \"Extended Forms\",\n rtlName: \"نماذج موسعة\",\n mini: \"EF\",\n rtlMini: \"هوو\",\n component: ExtendedForms,\n layout: \"/admin\"\n },\n {\n path: \"/validation-forms\",\n name: \"Validation Forms\",\n rtlName: \"نماذج التحقق من الصحة\",\n mini: \"VF\",\n rtlMini: \"تو\",\n component: ValidationForms,\n layout: \"/admin\"\n },\n {\n path: \"/wizard\",\n name: \"Wizard\",\n rtlName: \"ساحر\",\n mini: \"W\",\n rtlMini: \"ث\",\n component: Wizard,\n layout: \"/admin\"\n }\n ]\n },\n {\n collapse: true,\n name: \"Tables\",\n rtlName: \"الجداول\",\n icon: GridOn,\n state: \"tablesCollapse\",\n views: [\n {\n path: \"/regular-tables\",\n name: \"Regular Tables\",\n rtlName: \"طاولات عادية\",\n mini: \"RT\",\n rtlMini: \"صر\",\n component: RegularTables,\n layout: \"/admin\"\n },\n {\n path: \"/extended-tables\",\n name: \"Extended Tables\",\n rtlName: \"جداول ممتدة\",\n mini: \"ET\",\n rtlMini: \"هور\",\n component: ExtendedTables,\n layout: \"/admin\"\n },\n {\n path: \"/react-tables\",\n name: \"React Tables\",\n rtlName: \"رد فعل الطاولة\",\n mini: \"RT\",\n rtlMini: \"در\",\n component: ReactTables,\n layout: \"/admin\"\n }\n ]\n },\n {\n path: \"/widgets\",\n name: \"Widgets\",\n rtlName: \"الحاجيات\",\n icon: WidgetsIcon,\n component: Widgets,\n layout: \"/admin\"\n }\n ]\n }\n];\nexport default dashRoutes;\n","import React from \"react\";\n\n// core components\nimport Wizard from \"../../components/Wizard/Wizard.js\";\nimport GridContainer from \"../../components/Grid/GridContainer.js\";\nimport GridItem from \"../../components/Grid/GridItem.js\";\n\nimport Step1 from \"./WizardSteps/Step1.js\";\nimport Step2 from \"./WizardSteps/Step2.js\";\nimport Step3 from \"./WizardSteps/Step3.js\";\n\nexport default function WizardView() {\n return (\n Pick the best plan for you
\n\n You have Free Unlimited Updates and Premium Support on each package.\n
\nFreelancer
\n\n weekend \n
\n \n This is good if your company size is between 2 and 10 Persons.\n
\n \nSMALL COMPANY
\n\n
\n \n $29\n
\n\n This is good if your company size is between 2 and 10 Persons.\n
\n \nMEDIUM COMPANY
\n\n
\n \n This is good if your company size is between 11 and 99 Persons.\n
\n \nENTERPRISE
\n\n
\n \n This is good if your company size is 99+ persons.\n
\n \n\r\n
\r\n \r\n );\r\n}\r\n","/// \r\n \r\n \r\n {getRoutes(routes)}\r\n \r\n \r\n
\r\n \n {/**/}\n \n
\n );\n}\n\nHeaderLinks.propTypes = {\n rtlActive: PropTypes.bool\n};\n","import {\n containerFluid,\n defaultFont,\n primaryColor,\n defaultBoxShadow,\n infoColor,\n successColor,\n warningColor,\n dangerColor,\n whiteColor,\n grayColor\n} from \"../../material-dashboard-pro-react.js\";\n\nconst headerStyle = () => ({\n appBar: {\n backgroundColor: \"transparent\",\n boxShadow: \"none\",\n borderBottom: \"0\",\n marginBottom: \"0\",\n position: \"absolute\",\n width: \"100%\",\n paddingTop: \"10px\",\n zIndex: \"1029\",\n color: grayColor[6],\n border: \"0\",\n borderRadius: \"3px\",\n padding: \"10px 0\",\n transition: \"all 150ms ease 0s\",\n minHeight: \"50px\",\n display: \"block\"\n },\n container: {\n ...containerFluid,\n minHeight: \"50px\"\n },\n flex: {\n flex: 1\n },\n title: {\n ...defaultFont,\n lineHeight: \"30px\",\n fontSize: \"18px\",\n borderRadius: \"3px\",\n textTransform: \"none\",\n color: \"inherit\",\n paddingTop: \"0.625rem\",\n paddingBottom: \"0.625rem\",\n margin: \"0 !important\",\n letterSpacing: \"unset\",\n \"&:hover,&:focus\": {\n background: \"transparent\"\n }\n },\n primary: {\n backgroundColor: primaryColor[0],\n color: whiteColor,\n ...defaultBoxShadow\n },\n info: {\n backgroundColor: infoColor[0],\n color: whiteColor,\n ...defaultBoxShadow\n },\n success: {\n backgroundColor: successColor[0],\n color: whiteColor,\n ...defaultBoxShadow\n },\n warning: {\n backgroundColor: warningColor[0],\n color: whiteColor,\n ...defaultBoxShadow\n },\n danger: {\n backgroundColor: dangerColor[0],\n color: whiteColor,\n ...defaultBoxShadow\n },\n sidebarMinimize: {\n float: \"left\",\n padding: \"0 0 0 15px\",\n display: \"block\",\n color: grayColor[6]\n },\n sidebarMinimizeRTL: {\n padding: \"0 15px 0 0 !important\"\n },\n sidebarMiniIcon: {\n width: \"20px\",\n height: \"17px\"\n }\n});\n\nexport default headerStyle;\n","import React from \"react\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\nimport cx from \"classnames\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport AppBar from \"@material-ui/core/AppBar\";\nimport Toolbar from \"@material-ui/core/Toolbar\";\nimport Hidden from \"@material-ui/core/Hidden\";\n\n// material-ui icons\nimport Menu from \"@material-ui/icons/Menu\";\nimport MoreVert from \"@material-ui/icons/MoreVert\";\nimport ViewList from \"@material-ui/icons/ViewList\";\n\n// core components\nimport AdminNavbarLinks from \"./AdminNavbarLinks\";\nimport Button from \"../CustomButtons/Button.js\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/components/adminNavbarStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function AdminNavbar(props) {\n const [logoMini, setLogoMini] = React.useState(require(\"../../assets/img/logo_mini.png\"));\n const [logoFull, setLogoFull] = React.useState(require(\"../../assets/img/logo_full.png\"));\n const classes = useStyles();\n const { color, rtlActive, brandText } = props;\n const appBarClasses = cx({\n [\" \" + classes[color]]: color\n });\n const sidebarMinimize =\n classes.sidebarMinimize +\n \" \" +\n cx({\n [classes.sidebarMinimizeRTL]: rtlActive\n });\n return (\n \n 
\n 
\n
)\n : null*/\n }\n \n {props.miniActive ? (\n \n \n
\n \n {/* Here we create navbar brand, based on route name */}\n \n
\n \r\n {user}\r\n {links}\r\n
\r\n {headerLinks}\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Sidebar extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n openAvatar: false,\r\n miniActive: true,\r\n ...this.getCollapseStates(props.routes)\r\n };\r\n }\r\n mainPanel = React.createRef();\r\n // this creates the intial state of this component based on the collapse routes\r\n // that it gets through this.props.routes\r\n getCollapseStates = routes => {\r\n let initialState = {};\r\n routes.map(prop => {\r\n if (prop.collapse) {\r\n initialState = {\r\n [prop.state]: this.getCollapseInitialState(prop.views),\r\n ...this.getCollapseStates(prop.views),\r\n ...initialState\r\n };\r\n }\r\n return null;\r\n });\r\n return initialState;\r\n };\r\n // this verifies if any of the collapses should be default opened on a rerender of this component\r\n // for example, on the refresh of the page,\r\n // while on the src/views/forms/RegularForms.jsx - route /admin/regular-forms\r\n getCollapseInitialState(routes) {\r\n for (let i = 0; i < routes.length; i++) {\r\n if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {\r\n return true;\r\n } else if (window.location.href.indexOf(routes[i].path) !== -1) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n // verifies if routeName is the one active (in browser input)\r\n activeRoute = routeName => {\r\n return window.location.href.indexOf(routeName) > -1 ? \"active\" : \"\";\r\n };\r\n openCollapse(collapse) {\r\n var st = {};\r\n st[collapse] = !this.state[collapse];\r\n this.setState(st);\r\n }\r\n // this function creates the links and collapses that appear in the sidebar (left menu)\r\n createLinks = routes => {\r\n const { classes, color, rtlActive } = this.props;\r\n return routes.map((prop, key) => {\r\n if (prop.redirect) {\r\n return null;\r\n }\r\n if (prop.collapse) {\r\n var st = {};\r\n st[prop[\"state\"]] = !this.state[prop.state];\r\n const navLinkClasses =\r\n classes.itemLink +\r\n \" \" +\r\n cx({\r\n [\" \" + classes.collapseActive]: this.getCollapseInitialState(\r\n prop.views\r\n )\r\n });\r\n const itemText =\r\n classes.itemText +\r\n \" \" +\r\n cx({\r\n [classes.itemTextMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.itemTextMiniRTL]:\r\n rtlActive && this.props.miniActive && this.state.miniActive,\r\n [classes.itemTextRTL]: rtlActive\r\n });\r\n const collapseItemText =\r\n classes.collapseItemText +\r\n \" \" +\r\n cx({\r\n [classes.collapseItemTextMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.collapseItemTextMiniRTL]:\r\n rtlActive && this.props.miniActive && this.state.miniActive,\r\n [classes.collapseItemTextRTL]: rtlActive\r\n });\r\n const itemIcon =\r\n classes.itemIcon +\r\n \" \" +\r\n cx({\r\n [classes.itemIconRTL]: rtlActive\r\n });\r\n const caret =\r\n classes.caret +\r\n \" \" +\r\n cx({\r\n [classes.caretRTL]: rtlActive\r\n });\r\n const collapseItemMini =\r\n classes.collapseItemMini +\r\n \" \" +\r\n cx({\r\n [classes.collapseItemMiniRTL]: rtlActive\r\n });\r\n return ( prop.hidden === true ? \"\" :\r\n \r\n {headerLinks}\r\n
- \r\n {this.createLinks(prop.views)}\r\n
\r\n
\r\n );\r\n var links = (\r\n \r\n ![\"...\"]({require(\"../../assets/img/default-avatar.png\")})
\r\n
\r\n \r\n - \r\n
- {this.createLinks(routes)}
\r\n {this.props.miniActive && this.state.miniActive ?\r\n \r\n 
\r\n \r\n :\r\n \r\n 
\r\n \r\n }\r\n
\r\n );\r\n \r\n const drawerPaper =\r\n classes.drawerPaper +\r\n \" \" +\r\n cx({\r\n [classes.drawerPaperMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.drawerPaperRTL]: rtlActive\r\n });\r\n const sidebarWrapper =\r\n classes.sidebarWrapper +\r\n \" \" +\r\n cx({\r\n [classes.drawerPaperMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.sidebarWrapperWithPerfectScrollbar]:\r\n navigator.platform.indexOf(\"Win\") > -1\r\n });\r\n return (\r\n \r\n \r\n this.setState({ miniActive: true })}\r\n classes={{\r\n paper: drawerPaper + \" \" + classes[bgColor + \"Background\"]\r\n }}\r\n onClose={this.props.handleDrawerToggle}\r\n ModalProps={{\r\n keepMounted: true // Better open performance on mobile.\r\n }}\r\n >\r\n {brand}\r\n \r\n \r\n this.setState({ miniActive: false })}\r\n onMouseOut={() => this.setState({ miniActive: true })}\r\n onClick={() => this.setState({ miniActive: true })}\r\n anchor={rtlActive ? \"right\" : \"left\"}\r\n variant=\"permanent\"\r\n open\r\n classes={{\r\n paper: drawerPaper + \" \" + classes[bgColor + \"Background\"]\r\n }}\r\n >\r\n {brand}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSidebar.defaultProps = {\r\n bgColor: \"blue\"\r\n};\r\n\r\nSidebar.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n bgColor: PropTypes.oneOf([\"white\", \"black\", \"blue\"]),\r\n rtlActive: PropTypes.bool,\r\n color: PropTypes.oneOf([\r\n \"white\",\r\n \"red\",\r\n \"orange\",\r\n \"green\",\r\n \"blue\",\r\n \"purple\",\r\n \"rose\",\r\n \"blueSky\"\r\n ]),\r\n logo: PropTypes.string,\r\n logoText: PropTypes.string,\r\n image: PropTypes.string,\r\n routes: PropTypes.arrayOf(PropTypes.object),\r\n miniActive: PropTypes.bool,\r\n open: PropTypes.bool,\r\n handleDrawerToggle: PropTypes.func\r\n};\r\n\r\nSidebarWrapper.propTypes = {\r\n className: PropTypes.string,\r\n user: PropTypes.object,\r\n headerLinks: PropTypes.object,\r\n links: PropTypes.object\r\n};\r\n\r\nexport default withStyles(sidebarStyle)(Sidebar);\r\n","import {\n drawerWidth,\n drawerMiniWidth,\n transition,\n boxShadow,\n defaultFont,\n primaryColor,\n primaryBoxShadow,\n blueSkyColor,\n blueSkyBoxShadow,\n infoColor,\n successColor,\n warningColor,\n dangerColor,\n roseColor,\n whiteColor,\n blackColor,\n grayColor,\n hexToRgb\n} from \"../../material-dashboard-pro-react.js\";\n\nconst sidebarStyle = theme => ({\n drawerPaperRTL: {\n [theme.breakpoints.up(\"md\")]: {\n left: \"auto !important\",\n right: \"0 !important\"\n },\n [theme.breakpoints.down(\"sm\")]: {\n left: \"0 !important\",\n right: \"auto !important\"\n }\n },\n drawerPaper: {\n border: \"none\",\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n zIndex: \"1032\",\n transitionProperty: \"top, bottom, width\",\n transitionDuration: \".2s, .2s, .35s\",\n transitionTimingFunction: \"linear, linear, ease\",\n // overflow: 'auto',\n ...boxShadow,\n width: drawerWidth,\n [theme.breakpoints.up(\"md\")]: {\n width: drawerWidth,\n position: \"fixed\",\n height: \"100%\"\n },\n [theme.breakpoints.down(\"sm\")]: {\n width: drawerWidth,\n ...boxShadow,\n position: \"fixed\",\n display: \"block\",\n top: \"0\",\n height: \"100vh\",\n right: \"0\",\n left: \"auto\",\n zIndex: \"1032\",\n visibility: \"visible\",\n overflowY: \"visible\",\n borderTop: \"none\",\n textAlign: \"left\",\n paddingRight: \"0px\",\n paddingLeft: \"0\",\n transform: `translate3d(${drawerWidth}px, 0, 0)`,\n ...transition\n },\n \"&:before,&:after\": {\n position: \"absolute\",\n zIndex: \"3\",\n width: \"100%\",\n height: \"100%\",\n content: '\"\"',\n display: \"block\",\n top: \"0\"\n }\n },\n blackBackground: {\n color: whiteColor,\n \"&:after\": {\n background: blackColor,\n opacity: \".8\"\n }\n },\n blueBackground: {\n color: whiteColor,\n \"&:after\": {\n background: infoColor[0],\n opacity: \".93\"\n }\n },\n whiteBackground: {\n color: grayColor[2],\n \"&:after\": {\n background: whiteColor,\n opacity: \".83\"\n }\n },\n whiteAfter: {\n \"&:after\": {\n backgroundColor: \"hsla(0,0%,71%,.3) !important\"\n }\n },\n drawerPaperMini: {\n width: drawerMiniWidth + \"px!important\"\n },\n logo: {\n margin: \"0\",\n display: \"block\",\n position: \"relative\",\n zIndex: \"4\",\n \"&:after\": {\n content: '\"\"',\n position: \"absolute\",\n bottom: \"0\",\n height: \"1px\",\n right: \"15px\",\n width: \"calc(100% - 30px)\",\n backgroundColor: \"hsla(0,0%,100%,.3)\"\n }\n },\n logoMini: {\n padding: \"10px 0px\",\n transition: \"all 300ms linear\",\n opacity: 1,\n float: \"left\",\n textAlign: \"center\",\n width: \"30px\",\n display: \"inline-block\",\n maxHeight: \"30px\",\n marginLeft: \"15px\",\n marginRight: \"18px\",\n marginTop: \"7px\",\n color: \"inherit\"\n },\n logoMiniRTL: {\n float: \"right\",\n marginRight: \"30px\",\n marginLeft: \"26px\"\n },\n logoNormal: {\n ...defaultFont,\n transition: \"all 300ms linear\",\n display: \"block\",\n opacity: \"1\",\n transform: \"translate3d(0px, 0, 0)\",\n textTransform: \"uppercase\",\n padding: \"10px 40px\",\n fontSize: \"18px\",\n whiteSpace: \"nowrap\",\n fontWeight: \"400\",\n lineHeight: \"30px\",\n overflow: \"hidden\",\n \"&,&:hover,&:focus\": {\n color: \"inherit\"\n }\n },\n logoNormalRTL: {\n textAlign: \"right\"\n },\n logoNormalSidebarMini: {\n opacity: \"0\",\n transform: \"translate3d(-25px, 0, 0)\"\n },\n logoNormalSidebarMiniRTL: {\n transform: \"translate3d(25px, 0, 0)\"\n },\n img: {\n width: \"50px\",\n verticalAlign: \"middle\",\n border: \"0\"\n },\n imgLarge: {\n width: \"150px\",\n verticalAlign: \"middle\",\n border: \"0\"\n },\n background: {\n position: \"absolute\",\n zIndex: \"1\",\n height: \"100%\",\n width: \"100%\",\n display: \"block\",\n top: \"0\",\n left: \"0\",\n backgroundSize: \"cover\",\n backgroundPosition: \"center center\",\n transition: \"all 300ms linear\"\n },\n list: {\n marginTop: \"15px\",\n paddingLeft: \"0\",\n paddingTop: \"0\",\n paddingBottom: \"0\",\n marginBottom: \"0\",\n listStyle: \"none\",\n color: \"inherit\",\n \"&:before,&:after\": {\n display: \"table\",\n content: '\" \"'\n },\n \"&:after\": {\n clear: \"both\"\n }\n },\n item: {\n color: \"inherit\",\n position: \"relative\",\n display: \"block\",\n textDecoration: \"none\",\n margin: \"0\",\n padding: \"0\"\n },\n userItem: {\n \"&:last-child\": {\n paddingBottom: \"0px\"\n }\n },\n itemLink: {\n paddingLeft: \"10px\",\n paddingRight: \"10px\",\n transition: \"all 300ms linear\",\n margin: \"10px 15px 0\",\n borderRadius: \"3px\",\n position: \"relative\",\n display: \"block\",\n padding: \"10px 15px\",\n backgroundColor: \"transparent\",\n ...defaultFont,\n width: \"auto\",\n \"&:hover\": {\n outline: \"none\",\n backgroundColor: \"rgba(\" + hexToRgb(grayColor[17]) + \", 0.2)\",\n boxShadow: \"none\"\n },\n \"&,&:hover,&:focus\": {\n color: \"inherit\"\n }\n },\n itemIcon: {\n color: \"inherit\",\n width: \"30px\",\n height: \"24px\",\n float: \"left\",\n position: \"inherit\",\n top: \"3px\",\n marginRight: \"15px\",\n textAlign: \"center\",\n verticalAlign: \"middle\",\n opacity: \"0.8\"\n },\n itemIconRTL: {\n float: \"right\",\n marginLeft: \"15px\",\n marginRight: \"1px\"\n },\n itemText: {\n color: \"inherit\",\n ...defaultFont,\n margin: \"0\",\n lineHeight: \"30px\",\n fontSize: \"14px\",\n transform: \"translate3d(0px, 0, 0)\",\n opacity: \"1\",\n transition: \"transform 300ms ease 0s, opacity 300ms ease 0s\",\n position: \"relative\",\n display: \"block\",\n height: \"auto\",\n whiteSpace: \"nowrap\",\n padding: \"0 16px !important\"\n },\n userItemText: {\n lineHeight: \"22px\"\n },\n itemTextRTL: {\n marginRight: \"45px\",\n textAlign: \"right\"\n },\n itemTextMini: {\n transform: \"translate3d(-25px, 0, 0)\",\n opacity: \"0\"\n },\n itemTextMiniRTL: {\n transform: \"translate3d(25px, 0, 0) !important\"\n },\n collapseList: {\n marginTop: \"0\",\n \"& $caret\": {\n marginTop: \"8px\"\n }\n },\n collapseItem: {\n position: \"relative\",\n display: \"block\",\n textDecoration: \"none\",\n margin: \"10px 0 0 0\",\n padding: \"0\"\n },\n collapseActive: {\n outline: \"none\",\n backgroundColor: \"rgba(\" + hexToRgb(grayColor[17]) + \", 0.2)\",\n boxShadow: \"none\"\n },\n collapseItemLink: {\n transition: \"all 300ms linear\",\n margin: \"0 15px\",\n borderRadius: \"3px\",\n position: \"relative\",\n display: \"block\",\n padding: \"10px\",\n backgroundColor: \"transparent\",\n ...defaultFont,\n width: \"auto\",\n \"&:hover\": {\n outline: \"none\",\n backgroundColor: \"rgba(\" + hexToRgb(grayColor[17]) + \", 0.2)\",\n boxShadow: \"none\"\n },\n \"&,&:hover,&:focus\": {\n color: \"inherit\"\n }\n },\n collapseItemMini: {\n color: \"inherit\",\n ...defaultFont,\n textTransform: \"uppercase\",\n width: \"30px\",\n marginRight: \"15px\",\n textAlign: \"center\",\n letterSpacing: \"1px\",\n position: \"relative\",\n float: \"left\",\n display: \"inherit\",\n transition: \"transform 300ms ease 0s, opacity 300ms ease 0s\",\n fontSize: \"14px\"\n },\n collapseItemMiniRTL: {\n float: \"right\",\n marginLeft: \"30px\",\n marginRight: \"1px\"\n },\n collapseItemText: {\n color: \"inherit\",\n ...defaultFont,\n margin: \"0\",\n position: \"relative\",\n transform: \"translateX(0px)\",\n opacity: \"1\",\n whiteSpace: \"nowrap\",\n display: \"block\",\n transition: \"transform 300ms ease 0s, opacity 300ms ease 0s\",\n fontSize: \"14px\"\n },\n collapseItemTextRTL: {\n textAlign: \"right\"\n },\n collapseItemTextMiniRTL: {\n transform: \"translate3d(25px, 0, 0) !important\"\n },\n collapseItemTextMini: {\n transform: \"translate3d(-25px, 0, 0)\",\n opacity: \"0\"\n },\n caret: {\n marginTop: \"13px\",\n position: \"absolute\",\n right: \"18px\",\n transition: \"all 150ms ease-in\",\n display: \"inline-block\",\n width: \"0\",\n height: \"0\",\n marginLeft: \"2px\",\n verticalAlign: \"middle\",\n borderTop: \"4px solid\",\n borderRight: \"4px solid transparent\",\n borderLeft: \"4px solid transparent\"\n },\n userCaret: {\n marginTop: \"10px\"\n },\n caretRTL: {\n left: \"11px\",\n right: \"auto\"\n },\n caretActive: {\n transform: \"rotate(180deg)\"\n },\n purple: {\n \"&,&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: primaryColor[0],\n ...primaryBoxShadow\n }\n },\n blue: {\n \"&,&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: infoColor[0],\n boxShadow:\n \"0 12px 20px -10px rgba(\" +\n hexToRgb(infoColor[0]) +\n \",.28), 0 4px 20px 0 rgba(\" +\n hexToRgb(blackColor) +\n \",.12), 0 7px 8px -5px rgba(\" +\n hexToRgb(infoColor[0]) +\n \",.2)\"\n }\n },\n green: {\n \"&,&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: successColor[0],\n boxShadow:\n \"0 12px 20px -10px rgba(\" +\n hexToRgb(successColor[0]) +\n \",.28), 0 4px 20px 0 rgba(\" +\n hexToRgb(blackColor) +\n \",.12), 0 7px 8px -5px rgba(\" +\n hexToRgb(successColor[0]) +\n \",.2)\"\n }\n },\n orange: {\n \"&,&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: warningColor[0],\n boxShadow:\n \"0 12px 20px -10px rgba(\" +\n hexToRgb(warningColor[0]) +\n \",.28), 0 4px 20px 0 rgba(\" +\n hexToRgb(blackColor) +\n \",.12), 0 7px 8px -5px rgba(\" +\n hexToRgb(warningColor[0]) +\n \",.2)\"\n }\n },\n red: {\n \"&,&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: dangerColor[0],\n boxShadow:\n \"0 12px 20px -10px rgba(\" +\n hexToRgb(dangerColor[0]) +\n \",.28), 0 4px 20px 0 rgba(\" +\n hexToRgb(blackColor) +\n \",.12), 0 7px 8px -5px rgba(\" +\n hexToRgb(dangerColor[0]) +\n \",.2)\"\n }\n },\n white: {\n \"&,&:hover,&:focus\": {\n color: grayColor[2],\n backgroundColor: whiteColor,\n boxShadow:\n \"0 4px 20px 0 rgba(\" +\n hexToRgb(blackColor) +\n \",.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(grayColor[2]) +\n \",.4)\"\n }\n },\n rose: {\n \"&,&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: roseColor[0],\n boxShadow:\n \"0 4px 20px 0 rgba(\" +\n hexToRgb(blackColor) +\n \",.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(roseColor[0]) +\n \",.4)\"\n }\n },\n blueSky: {\n \"&,&:hover,&:focus\": {\n color: whiteColor,\n backgroundColor: blueSkyColor[0],\n boxShadow:\n \"0 4px 20px 0 rgba(\" +\n hexToRgb(blackColor) +\n \",.14), 0 7px 10px -5px rgba(\" +\n hexToRgb(blueSkyColor[0]) +\n \",.4)\"\n }\n },\n sidebarWrapper: {\n position: \"relative\",\n height: \"calc(100vh - 75px)\",\n overflow: \"auto\",\n width: \"240px\",\n zIndex: \"4\",\n overflowScrolling: \"touch\",\n transitionProperty: \"top, bottom, width\",\n transitionDuration: \".2s, .2s, .35s\",\n transitionTimingFunction: \"linear, linear, ease\",\n color: \"inherit\",\n paddingBottom: \"30px\"\n },\n sidebarWrapperWithPerfectScrollbar: {\n overflow: \"hidden !important\"\n },\n user: {\n paddingBottom: \"20px\",\n margin: \"20px auto 0\",\n position: \"relative\",\n \"&:after\": {\n content: '\"\"',\n position: \"absolute\",\n bottom: \"0\",\n right: \"15px\",\n height: \"1px\",\n width: \"calc(100% - 30px)\",\n backgroundColor: \"hsla(0,0%,100%,.3)\"\n }\n },\n photo: {\n transition: \"all 300ms linear\",\n width: \"34px\",\n height: \"34px\",\n overflow: \"hidden\",\n float: \"left\",\n zIndex: \"5\",\n marginRight: \"11px\",\n borderRadius: \"50%\",\n marginLeft: \"23px\",\n ...boxShadow\n },\n photoRTL: {\n float: \"right\",\n marginLeft: \"12px\",\n marginRight: \"24px\"\n },\n avatarImg: {\n width: \"100%\",\n verticalAlign: \"middle\",\n border: \"0\"\n },\n userCollapseButton: {\n margin: \"0\",\n padding: \"6px 15px\",\n \"&:hover\": {\n background: \"none\"\n }\n },\n userCollapseLinks: {\n marginTop: \"-4px\"\n }\n});\n\nexport default sidebarStyle;\n","/*eslint-disable*/\nimport React, { Component } from \"react\";\nimport { NavLink } from \"react-router-dom\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Switch from \"@material-ui/core/Switch\";\n\nimport styles from \"../../assets/jss/material-dashboard-pro-react/customCheckboxRadioSwitch.js\";\n\nimport imagine1 from \"../../assets/img/sidebar-1.jpg\";\nimport imagine2 from \"../../assets/img/sidebar-2.jpg\";\nimport imagine3 from \"../../assets/img/sidebar-3.jpg\";\nimport imagine4 from \"../../assets/img/sidebar-4.jpg\";\n\nimport Button from \"../CustomButtons/Button.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function FixedPlugin(props) {\n const [classes, setClasses] = React.useState(\"dropdown show\");\n const [bg_checked, setBg_checked] = React.useState(true);\n const [bgImage, setBgImage] = React.useState(props.bgImage);\n const [showImage, setShowImage] = React.useState(true);\n const handleClick = () => {\n props.handleFixedClick();\n };\n const handleChange = name => event => {\n switch (name) {\n case \"miniActive\":\n props.sidebarMinimize();\n break;\n case \"image\":\n if (event.target.checked) {\n props.handleImageClick(bgImage);\n } else {\n props.handleImageClick();\n }\n setShowImage(event.target.checked);\n break;\n default:\n break;\n }\n };\n const classesObj = useStyles();\n return (\n \n
\n \n );\n}\n\nFixedPlugin.propTypes = {\n bgImage: PropTypes.string,\n handleFixedClick: PropTypes.func,\n miniActive: PropTypes.bool,\n fixedClasses: PropTypes.string,\n bgColor: PropTypes.oneOf([\"white\", \"black\", \"blue\"]),\n color: PropTypes.oneOf([\n \"white\",\n \"red\",\n \"orange\",\n \"green\",\n \"blue\",\n \"purple\",\n \"rose\"\n ]),\n handleBgColorClick: PropTypes.func,\n handleColorClick: PropTypes.func,\n handleImageClick: PropTypes.func,\n sidebarMinimize: PropTypes.func,\n rtlActive: PropTypes.bool\n};\n","import {\r\n drawerWidth,\r\n drawerMiniWidth,\r\n transition,\r\n containerFluid\r\n} from \"../../material-dashboard-pro-react.js\";\r\n\r\nconst appStyle = theme => ({\r\n wrapper: {\r\n position: \"relative\",\r\n top: \"0\",\r\n height: \"100vh\",\r\n \"&:after\": {\r\n display: \"table\",\r\n clear: \"both\",\r\n content: '\" \"'\r\n }\r\n },\r\n mainPanel: {\r\n transitionProperty: \"top, bottom, width\",\r\n transitionDuration: \".2s, .2s, .35s\",\r\n transitionTimingFunction: \"linear, linear, ease\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: `calc(100% - ${drawerWidth}px)`\r\n },\r\n overflow: \"auto\",\r\n position: \"relative\",\r\n float: \"right\",\r\n ...transition,\r\n maxHeight: \"100%\",\r\n width: \"100%\",\r\n overflowScrolling: \"touch\"\r\n },\r\n content: {\r\n marginTop: \"30px\",\r\n padding: \"30px 0px\",\r\n minHeight: \"calc(100vh - 123px)\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n padding: \"20px 0px\",\r\n marginTop: \"20px\"\r\n }\r\n },\r\n container: {\r\n width: \"100%\",\r\n paddingLeft: \"15px\",\r\n paddingRight: \"0px\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n ...containerFluid\r\n }\r\n },\r\n map: {\r\n marginTop: \"70px\"\r\n },\r\n mainPanelSidebarMini: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: `calc(100% - ${drawerMiniWidth}px)`\r\n }\r\n },\r\n mainPanelWithPerfectScrollbar: {\r\n overflow: \"hidden !important\"\r\n }\r\n});\r\n\r\nexport default appStyle;\r\n","import React from \"react\";\nimport cx from \"classnames\";\nimport { Switch, Route, Redirect } from \"react-router-dom\";\n// creates a beautiful scrollbar\nimport PerfectScrollbar from \"perfect-scrollbar\";\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n\n// core components\nimport AdminNavbar from \"../components/Navbars/AdminNavbar.js\";\nimport Footer from \"../components/Footer/Footer.js\";\nimport Sidebar from \"../components/Sidebar/Sidebar.js\";\nimport FixedPlugin from \"../components/FixedPlugin/FixedPlugin.js\";\n\nimport routes from \"../routes.js\";\n\nimport styles from \"../assets/jss/material-dashboard-pro-react/layouts/adminStyle.js\";\n\nvar ps;\n\nconst useStyles = makeStyles(styles);\n\nexport default function Dashboard(props) {\n const { ...rest } = props;\n // states and functions\n const [mobileOpen, setMobileOpen] = React.useState(false);\n const [miniActive, setMiniActive] = React.useState(false);\n //const [image, setImage] = React.useState(require(\"../assets/img/sidebar-2.jpg\"));\n const [image, setImage] = React.useState(require(\"../assets/img/sidebar.png\"));\n const [color, setColor] = React.useState(\"blue\");\n const [bgColor, setBgColor] = React.useState(\"black\");\n // const [hasImage, setHasImage] = React.useState(true);\n const [fixedClasses, setFixedClasses] = React.useState(\"dropdown\");\n const [logoMini, setLogoMini] = React.useState(require(\"../assets/img/tunstalllogo.png\"));\n const [logoFull, setLogoFull] = React.useState(require(\"../assets/img/tunstalllogo.png\"));\n // styles\n const classes = useStyles();\n const mainPanelClasses =\n classes.mainPanel +\n \" \" +\n cx({\n [classes.mainPanelSidebarMini]: miniActive\n });\n /* - original below. M.Arnett changed above so window.scrollTo(0,0) works as per https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/198\n cx({\n [classes.mainPanelSidebarMini]: miniActive,\n [classes.mainPanelWithPerfectScrollbar]:\n navigator.platform.indexOf(\"Win\") > -1\n });*/\n // ref for main panel div\n const mainPanel = React.createRef();\n // effect instead of componentDidMount, componentDidUpdate and componentWillUnmount\n React.useEffect(() => {\n /* - M.Arnett commented below so window.scrollTo(0,0) works as per https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/198\n if (navigator.platform.indexOf(\"Win\") > -1) {\n ps = new PerfectScrollbar(mainPanel.current, {\n suppressScrollX: true,\n suppressScrollY: false\n });\n document.body.style.overflow = \"hidden\";\n }*/\n window.addEventListener(\"resize\", resizeFunction);\n\n // Specify how to clean up after this effect:\n return function cleanup() {\n /* - M.Arnett commented below so window.scrollTo(0,0) works as per https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/198\n if (navigator.platform.indexOf(\"Win\") > -1) {\n ps.destroy();\n }*/\n window.removeEventListener(\"resize\", resizeFunction);\n };\n });\n // functions for changeing the states from components\n const handleImageClick = image => {\n setImage(image);\n };\n const handleColorClick = color => {\n setColor(color);\n };\n const handleBgColorClick = bgColor => {\n switch (bgColor) {\n case \"white\":\n //setLogo(require(\"../assets/img/logo.svg\"));\n break;\n default:\n //setLogo(require(\"../assets/img/logo-white.svg\"));\n break;\n }\n setBgColor(bgColor);\n };\n const handleFixedClick = () => {\n if (fixedClasses === \"dropdown\") {\n setFixedClasses(\"dropdown show\");\n } else {\n setFixedClasses(\"dropdown\");\n }\n };\n const handleDrawerToggle = () => {\n setMobileOpen(!mobileOpen);\n };\n const getRoute = () => {\n return window.location.pathname !== \"/admin/full-screen-maps\";\n };\n const getActiveRoute = routes => {\n let activeRoute = \"Default Brand Text\";\n for (let i = 0; i < routes.length; i++) {\n if (routes[i].collapse) {\n let collapseActiveRoute = getActiveRoute(routes[i].views);\n if (collapseActiveRoute !== activeRoute) {\n return collapseActiveRoute;\n }\n } else {\n if (\n window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\n ) {\n return routes[i].name;\n }\n }\n }\n return activeRoute;\n };\n const getRoutes = routes => {\n return routes.map((prop, key) => {\n if (prop.collapse) {\n return getRoutes(prop.views);\n }\n if (prop.layout === \"/admin\") {\n return (\n \n \n
\n - \n
- SIDEBAR FILTERS \n
- \n \n \n\n \n \n \n
- SIDEBAR BACKGROUND \n
- \n \n \n\n \n \n \n
- \n \n
Sidebar Mini
\n \n - \n \n
Sidebar Image
\n \n - Images \n
- \n
\n \n
\n - \n
\n \n
\n - \n
\n \n
\n - \n
\n \n
\n - \n \n\n \n
- \n \n\n \n
- \n Thank you for sharing!\n
\n \n
\n
\n );\n}","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\nimport { Router, Route, Switch, Redirect } from \"react-router-dom\";\r\nimport ProtectedRoute from \"./ProtectedRoute\";\r\n\r\nimport AuthLayout from \"./layouts/Auth.js\";\r\nimport AdminLayout from \"./layouts/Admin.js\";\r\nimport ErrorView from \"./views/Pages/ErrorPage.js\";\r\n\r\nimport \"./assets/scss/material-dashboard-pro-react.scss?v=1.9.0\";\r\nimport \"./assets/css/material-dashboard-pro-react.css?v=1.9.0\";\r\nimport \"./assets/css/style.css\";\r\n\r\nimport Bugsnag from '@bugsnag/js'\r\nimport BugsnagPluginReact from '@bugsnag/plugin-react'\r\n\r\nconst hist = createBrowserHistory();\r\n\r\nBugsnag.start({\r\n apiKey: 'fa11e66eb64bbcb290093c904e9c0437',\r\n plugins: [new BugsnagPluginReact(React)],\r\n onError: function (event) {\r\n const bearerToken = localStorage.getItem(\"careXactSOS_BearerToken\");\r\n const subscriptionKey = process.env.REACT_APP_API_Subscription_Key;\r\n\r\n if (!!bearerToken && !!subscriptionKey) {\r\n const myHeaders = new Headers();\r\n const apiURL = process.env.REACT_APP_BASE_URL;\r\n myHeaders.append(\"Authorization\", `Bearer ${bearerToken}`);\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n\r\n const payload = {\r\n \"PartyId\": \"\",\r\n \"ErrorNumber\": \"\",\r\n \"ErrorSeverity\": event.severity || 'error',\r\n \"ErrorState\": \"\",\r\n \"ErrorSource\": event.errors[0]?.stacktrace[0]?.file || '',\r\n \"ErrorLine\": event.errors[0]?.stacktrace[0]?.lineNumber || '',\r\n \"ErrorMessage\": event.errors[0]?.errorMessage || '',\r\n \"FailedMessage\": event.errors[0]?.errorClass || '',\r\n \"DateTimeCreated\": event.device.time.toISOString()\r\n };\r\n\r\n fetch(apiURL + `/api/ErrorLog?subscription-key=${subscriptionKey}`, {\r\n method: 'POST',\r\n headers: myHeaders,\r\n body: JSON.stringify(payload),\r\n redirect: 'follow'\r\n }).then(() => {\r\n hist.push('/auth/login-page'); // Redirect to login page on error\r\n window.location.reload(); // Force reload to ensure login page is shown\r\n });\r\n } else {\r\n // If token or subscription key is missing, redirect to login page immediately\r\n hist.push('/auth/login-page');\r\n window.location.reload(); // Force reload to ensure login page is shown\r\n }\r\n }\r\n});\r\n\r\nconst ErrorBoundary = Bugsnag.getPlugin('react');\r\n\r\nReactDOM.render(\r\n \n
\n \n
\n ) : (\n \n \n {getRoutes(routes)}\n \n
\n \n \n {getRoutes(routes)}\n \n
\n )}\n {getRoute() ? : null}\n