\n \n \n \n \n { isLoading\n ? \n \n {\n\n // No Data \n : null\n }\n\n \n \n )\n}\n\n// key={props.refresh === false ? 0 : 1} \n\n// { isFirstLoad || data === undefined\n// ? \n \n\n );\n }\n }\n // chatGPT\n function generateDayWiseTimeSeries(s, count) {\n var values = [ [4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5],\n [2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2]\n ];\n var series = [];\n var x = new Date(\"2023-01-01\").getTime();\n var dayInMs = 86400000;\n for (var i = 0; i < count; i++) {\n series.push([x, values[s][i]]);\n x += dayInMs;\n }\n return series;\n }\n\n // function generateDayWiseTimeSeries(s, count) {\n // var values = [[\n // 4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5\n // ], [\n // 2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2\n // ]];\n // var i = 0;\n // var series = [];\n // var x = new Date(\"11 Nov 2012\").getTime();\n // while (i < count) {\n // series.push([x, values[s][i]]);\n // x += 86400000;\n // i++;\n // }\n // return series;\n // }\n\n const Container = styled.div`\n display: flex;\n flex-direction: column;\n `;\n\n\n\n ","import React from 'react'\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"./../../../styles/colors\"\nimport {FormatLabel} from \"./../../util/FormatLabel\"\n\nconst Card = styled.div`\n display: flex;\n flex-direction: column;\n background: #17253E;\n border-radius: 4px;\n max-width: 457px;\n padding-top: 21px;\n padding-bottom: 27px;\n padding-left: 31px;\n padding-right: 31px;\n margin-right: 18px;\n margin-bottom: 18px;\n`;\n\nconst CardHeader = styled.h3`\n font-family: 'Blinker';\n font-style: normal;\n font-weight: 400;\n font-size: 22px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: #FFFFFF;\n`;\n\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n width: 100%;\n max-width: 1440px;\n ${media.lessThan(\"743px\")`\n `}\n `\n\nconst HeaderContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst ColumnContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n border-left: 2px solid #1A2B4A;\n padding-left: 12px;\n padding-top: 10px;\n padding-bottom: 10px;\n ${media.lessThan(\"743px\")`\n border-left: none;\n padding-left: 0px;\n `}\n`\n\nconst RowContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst TextContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n min-width: 116px;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst TextContainer2 = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n min-width: 66px;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Title = styled.h3`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n`\n\nconst Title2 = styled.h3`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n`\n\nconst InfoText = styled.h2`\n font-family: 'Blinker';\n font-style: normal;\n font-weight: 400;\n font-size: 22px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText2 = styled.h2`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n`\n\nconst HhmmText = styled.h2`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 100;\n font-size: 14px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n`\n\nconst Line = styled.div`\n border: 1px solid #1A2B4A;\n`;\n\nconst CycleHeader = styled.h3`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.White};\n margin-bottom: 6px;\n`;\n\n\nexport default function Analytics(props) {\n\n const {analytics} = props\n\n const convertToTime = (milliseconds) => {\n const seconds = milliseconds / 1000\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor((seconds % 3600) / 60);\n const remainingSeconds = seconds % 60;\n const roundedSeconds = remainingSeconds.toFixed(0)\n \n if(hours === 0 && minutes === 0 && roundedSeconds != 0){\n return `>${hours.toString().padStart(2, '0') + ':'}${minutes.toString().padStart(2, '0')}`\n } else {\n return`${hours.toString().padStart(2, '0') + ':'}${minutes.toString().padStart(2, '0')}`\n }\n\n };\n\n return (\n \n \n {FormatLabel(analytics.label)} \n hh:mm \n \n {/* Cycle Count Row */}\n \n\n \n Cycle Count \n {analytics.cycle_count} \n \n\n \n Cycle On Time \n \n \n Min \n {convertToTime(analytics.min_cycle_on_time)} \n \n \n Avg \n {convertToTime(analytics.average_cycle_on_time)} \n \n \n Max \n {convertToTime(analytics.max_cycle_on_time)} \n \n \n Total \n {convertToTime(analytics.total_cycle_on_time)} \n \n \n \n\n \n\n \n\n \n Avg. Cycle Time \n {convertToTime(analytics.average_cycle_time)} \n \n\n \n Cycle Off Time \n \n \n Min \n {convertToTime(analytics.min_cycle_off_time)} \n \n \n Avg \n {convertToTime(analytics.average_cycle_off_time)} \n \n \n Max \n {convertToTime(analytics.max_cycle_off_time)} \n \n \n Total \n {convertToTime(analytics.total_cycle_off_time)} \n \n \n \n\n \n\n \n )\n\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport IconLaunch from \"./../../../images/ic_launch_green.svg\"\nimport ImgGreen from \"./../../../images/ic_status_green.svg\"\nimport { Link } from \"react-router-dom\"\nimport { COLORS } from \"../../../styles/colors\"\nimport Analytics from \"../chart/Analytics\"\n\nconst NoDataText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: italic;\n font-weight: 300;\n font-size: 16px;\n line-height: 130%;\n color: ${COLORS.HighlightLight};\n`;\n\nexport default function AnalyticsModuleUI(props) {\n\n return (\n \n \n {\n props.analyticData && props.analyticData.length > 0 \n ? {`${props.label} Analytics`} \n : null\n }\n \n \n {props.analyticData && props.analyticData.length > 0 ? (\n props.analyticData.map((analytics, index) => {\n if (analytics.label !== \"adjusted_time\") {\n return No Data \n )}\n \n\n\n\n \n \n )\n}\n\n\n\n const OuterContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n /* height: 300px; */\n `\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n /* margin-bottom: 21px; */\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n /* margin-right: 0px; */\n `}\n`\n\nconst WidgetContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: center;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n flex-wrap: wrap;\n `}\n`\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 28px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 20px;\n`\n\nconst EmptyText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: italic;\n font-weight: 500;\n font-size: 16px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport * as am5 from \"@amcharts/amcharts5\";\nimport * as am5xy from \"@amcharts/amcharts5/xy\";\nimport { COLORS } from \"./../../../styles/colors\"\nimport am5themes_Animated from \"@amcharts/amcharts5/themes/Animated\";\nimport { Switch } from 'react-router-dom';\n\n\nvar groupIntervals = [\n { timeUnit: \"millisecond\", count: 1 },\n { timeUnit: \"millisecond\", count: 10 },\n { timeUnit: \"millisecond\", count: 100 },\n { timeUnit: \"second\", count: 1 },\n { timeUnit: \"second\", count: 10 },\n\n { timeUnit: \"minute\", count: 1 }, \n { timeUnit: \"minute\", count: 5 }, \n { timeUnit: \"minute\", count: 10 },\n { timeUnit: \"minute\", count: 15 }, \n\n { timeUnit: \"hour\", count: 1 },\n { timeUnit: \"day\", count: 1 },\n { timeUnit: \"week\", count: 1 },\n { timeUnit: \"month\", count: 1 },\n { timeUnit: \"year\", count: 1 }\n]\n\n\n\nconst oldChartLineColors = [\n \"#63C085\", // green light\n \"#4AB2FB\", // blue light\n \"#7D5EA8\", // purple light\n \"#FBAC21\", // yellow light\n \"#F15C5D\", // red light\n \"#3F7754\", // green med\n \"#32678C\", // blue med\n \"#5D477B\", // purple med\n \"#B87F1A\", // yellow med\n \"#862424\", // red med\n \"#2C4736\", // green dark\n \"#1D3140\", // blue dark\n \"#3498db\", // dodger blue\n \"#9b59b6\", // medium purple\n \"#34495e\", // dark slate gray\n \"#f1c40f\", // highlighter yellow\n \"#e74c3c\", // watermelon red\n \"#95a5a6\", // storm cloud gray\n \"#ecf0f1\", // platinum gray\n \"#16a085\" // dark cyan green\n];\n\nconst chartLineColors = [\n am5.color(\"#63C085\"), // green light\n am5.color(\"#4AB2FB\"), // blue light\n am5.color(\"#7D5EA8\"), // purple light\n am5.color(\"#FBAC21\"), // yellow light\n am5.color(\"#F15C5D\"), // red light\n am5.color(\"#3F7754\"), // green med\n am5.color(\"#32678C\"), // blue med\n am5.color(\"#5D477B\"), // purple med\n am5.color(\"#B87F1A\"), // yellow med\n am5.color(\"#862424\"), // red med\n am5.color(\"#2C4736\"), // green dark\n am5.color(\"#1D3140\"), // blue dark\n am5.color(\"#3498db\"), // dodger blue \n am5.color(\"#9b59b6\"), // medium purple\n am5.color(\"#34495e\"), // dark slate gray\n am5.color(\"#f1c40f\"), // highlighter yellow\n am5.color(\"#e74c3c\"), // watermelon red\n am5.color(\"#95a5a6\"), // storm cloud gray\n am5.color(\"#ecf0f1\"), // platinum gray\n am5.color(\"#16a085\"), // dark cyan green\n]\n\nexport default function TimeSeriesAMChart(props) {\n\n \n const [chart1, setChart1] = useState()\n const [root1, setRoot1] = useState()\n const [XAxis1, setXAxis1] = useState()\n const [YAxis1, setYAxis1] = useState()\n const [rightYAxis1, setRightYAxis1] = useState()\n const [state1, setState1] = useState({scrollbar: null, sbxAxis: null, sbyAxis: null})\n \n const [chart2, setChart2] = useState()\n const [root2, setRoot2] = useState()\n const [XAxis2, setXAxis2] = useState()\n const [YAxis2, setYAxis2] = useState()\n const [rightYAxis2, setRightYAxis2] = useState()\n const [state2, setState2] = useState({scrollbar: null, sbxAxis: null, sbyAxis: null})\n \n const [chart3, setChart3] = useState()\n const [root3, setRoot3] = useState()\n const [XAxis3, setXAxis3] = useState()\n const [YAxis3, setYAxis3] = useState()\n const [rightYAxis3, setRightYAxis3] = useState()\n const [state3, setState3] = useState({scrollbar: null, sbxAxis: null, sbyAxis: null})\n\n const fps = 100 // Frames Per Second -> The smaller the number, the less resources charts will use, at the expense of smoothness of animations\n\n useEffect(() => {\n // setRoot1()\n // setRoot2()\n // setRoot3()\n\n function createChart(id) {\n // console.log(\"START CREATE CHART \", id)\n var root = am5.Root.new(`chart${props.id}${id}`); \n\n // https://www.amcharts.com/docs/v5/concepts/themes/\n root.setThemes([am5themes_Animated.new(root)]);\n \n \n // root.fps = fps; // SET FRAMES PER SECOND\n\n // // https://www.amcharts.com/docs/v5/charts/stock-chart/#Instantiating_the_chart\n var chart = root.container.children.push(\n am5xy.XYChart.new(root, {\n panX: false,\n panY: false,\n // wheelX: \"panX\",;\n // wheelY: \"zoomXY\", // zoomXY at same time\n maxTooltipDistanceBy: \"y\",\n pinchZoomX:true,\n arrangeTooltips: true\n })\n );\n\n var title = ''\n\n if(id == 1){\n title = `${props.label} Temperatures`\n } else if(id == 2){\n title = `${props.label} Pumps`\n } else if(id == 3){\n title = `${props.label} States`\n } \n\n chart.children.unshift(am5.Label.new(root, {\n text: title,\n fontSize: 28,\n fill: `${COLORS.White}`,\n fontWeight: \"400\",\n textAlign: \"left\",\n fontFamily: 'Blinker',\n fontStyle: 'normal',\n x: am5.percent(0),\n centerX: am5.percent(0),\n // y: am5.percent(50),\n centerY: am5.percent(70),\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: -10\n }));\n\n const axisTheme = am5.Theme.new(root);\n axisTheme.rule(\"AxisLabel\").setAll({\n fill: am5.color(COLORS.HighlightLight),\n fontSize: \"10px\",\n fontFamily: \"Roboto Condensed\",\n fontWeight: \"400\",\n });\n root.setThemes([\n axisTheme\n ]);\n\n // Added for advanced zoom functionality \n let cursor = chart.set(\"cursor\", am5xy.XYCursor.new(root, {\n behavior: \"zoomX\"\n }));\n cursor.lineX.set(\"visible\", true);\n cursor.lineY.set(\"visible\", true);\n \n // // https://www.amcharts.com/docs/v5/concepts/formatters/formatting-numbers/\n root.numberFormatter.set(\"numberFormat\", \"#,###.00\");\n\n // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/\n let scrollbar = am5xy.XYChartScrollbar.new(root, {\n orientation: \"horizontal\",\n height: 40,\n marginTop: 20,\n });\n\n chart.set(\"scrollbarX\", scrollbar);\n scrollbar.startGrip.set(\"scale\", 0.8);\n scrollbar.endGrip.set(\"scale\", 0.8);\n\n scrollbar.get(\"background\").setAll({\n // fill: am5.color(0x000000),\n fillOpacity: 0.1,\n cornerRadiusTR: 5,\n cornerRadiusBR: 5,\n cornerRadiusTL: 5,\n cornerRadiusBL: 5\n });\n\n //----------------------Aggregating for snapshot needed??\n let sbxAxis = scrollbar.chart.xAxes.push(\n am5xy.DateAxis.new(root, {\n groupData: true,\n groupCount: 2500,\n baseInterval: { timeUnit: \"second\", count: 1 },\n groupIntervals: groupIntervals,\n renderer: am5xy.AxisRendererX.new(root, {\n opposite: false,\n strokeOpacity: 0\n })\n })\n );\n\n let sbyAxis = scrollbar.chart.yAxes.push(\n am5xy.ValueAxis.new(root, {\n renderer: am5xy.AxisRendererY.new(root, {})\n })\n );\n\n\n //--------Aggregating by library wired up here\n var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {\n // maxDeviation: 0.2,\n // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/date-axis/#Dynamic_data_item_grouping // Aggregation\n groupData: true,\n groupCount: 2500,\n baseInterval: { timeUnit: \"second\", count: 1 },\n groupIntervals: groupIntervals,\n strokeOpacity: 0.0,\n strokeWidth: 2,\n renderer: am5xy.AxisRendererX.new(root, {}),\n tooltip: am5.Tooltip.new(root, {\n // fill: am5.color(COLORS.HighlightLight),\n fontSize: \"0.938\",\n // fontFamily: \"Roboto Condensed\",\n // fontWeight: \"400\",\n })\n }));\n \n var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n renderer: am5xy.AxisRendererY.new(root, {}),\n }));\n\n yAxis.set('width', 35)\n\n // Create the right Y-axis for the second data type\n let rightYAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n renderer: am5xy.AxisRendererY.new(root, { opposite: true }) // Set to true to draw the axis on the opposite side\n }));\n\n // rightYAxis.set('width', 160)\n\n\n if(id !== 2){\n rightYAxis.get(\"renderer\").labels.template.adapters.add(\"html\", function(html, target) {\n return \"20
\";\n });\n }\n\n // Make a single empty line for setup config -- figure out how to not need to do this\n var series = chart.series.push(\n am5xy.LineSeries.new(root, {\n name: \"Series\",\n xAxis: xAxis,\n yAxis: yAxis,\n valueYField: \"value\",\n valueXField: \"date\",\n minDistance: 0\n }));\n\n series.data.setAll([]);\n\n // Animation\n series.appear(1000);\n chart.appear(1000, 100);\n\n // scrollbar.disabled = true // hide scrollbar? Not working\n\n // --------------------------- Set up syncing\n xAxis.on(\"start\", function() {\n syncAxes(chart);\n });\n xAxis.on(\"end\", function() {\n syncAxes(chart);\n });\n\n if(id == 1){\n setState1({scrollbar: scrollbar, sbxAxis: sbxAxis, sbyAxis: sbyAxis})\n setXAxis1(xAxis)\n setYAxis1(yAxis)\n setRightYAxis1(rightYAxis)\n setRoot1(root) \n setChart1(chart) \n } else if(id == 2){\n setState2({scrollbar: scrollbar, sbxAxis: sbxAxis, sbyAxis: sbyAxis})\n setXAxis2(xAxis)\n setYAxis2(yAxis)\n setRightYAxis2(rightYAxis)\n setRoot2(root) \n setChart2(chart) \n } else if (id == 3){\n setState3({scrollbar: scrollbar, sbxAxis: sbxAxis, sbyAxis: sbyAxis})\n setXAxis3(xAxis)\n setYAxis3(yAxis)\n setRightYAxis3(rightYAxis)\n setRoot3(root) \n setChart3(chart) \n } \n // console.log(\"END CREATE CHART \", id)\n return chart\n\n } // End method\n\n am5.addLicense(process.env.REACT_APP_AMCHARTS5_KEY);\n\n var chartsToSync = [];\n chartsToSync.push(createChart(1));\n chartsToSync.push(createChart(2));\n chartsToSync.push(createChart(3));\n\n am5.array.each(chartsToSync, function(sourceChart) {\n var syncCursors = [];\n am5.array.each(chartsToSync, function(targetChart) {\n if (targetChart !== sourceChart) {\n syncCursors.push(targetChart.get(\"cursor\"));\n }\n });\n sourceChart.get(\"cursor\").set(\"syncWith\", syncCursors);\n });\n \n // LINKED ZOOM\n function syncAxes(targetChart) {\n var targetAxis = targetChart.xAxes.getIndex(0);\n if (targetAxis._skipSync != true) {\n var start = targetAxis.get(\"start\");\n var end = targetAxis.get(\"end\");\n am5.array.each(chartsToSync, function(chart) {\n if (chart != targetChart) {\n var axis = chart.xAxes.getIndex(0);\n axis._skipSync = true;\n axis.setAll({\n start: start,\n end: end\n })\n axis._skipSync = false;\n }\n });\n }\n }\n }, []);\n\n useEffect(() => { \n return () => {\n if(root1 !== undefined){\n // console.log(\"ROOT 1 DISPOSED\")\n root1.dispose()\n chart1.dispose()\n setState1({scrollbar: null, sbxAxis: null, sbyAxis: null})\n setChart1()\n setRoot1()\n setXAxis1()\n setYAxis1()\n setRightYAxis1()\n }\n };\n }, [root1]);\n\n useEffect(() => { \n return () => {\n if(root2 !== undefined){\n // console.log(\"ROOT 2 DISPOSED\")\n root2.dispose()\n chart2.dispose()\n setState2({scrollbar: null, sbxAxis: null, sbyAxis: null})\n setChart2()\n setRoot2()\n setXAxis2()\n setYAxis2()\n setRightYAxis2()\n }\n };\n }, [root2]);\n\n useEffect(() => { \n return () => {\n if(root3 !== undefined){ \n // console.log(\"ROOT 3 DISPOSED\")\n setState3({scrollbar: null, sbxAxis: null, sbyAxis: null})\n root3.dispose()\n chart3.dispose()\n setChart3()\n setRoot3()\n setXAxis3()\n setYAxis3()\n setRightYAxis3()\n }\n };\n }, [root3]);\n // Reference Docs for linking Tooltip and Zoom\n // https://www.amcharts.com/docs/v5/tutorials/syncing-axis-zooms-across-multiple-charts/\n // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/\n\n\n //------------------------------------------DATA LOAD\n\n useEffect(() => {\n if(props.temperatureData != undefined && props.temperatureData != null && chart1 != undefined && chart1 != null){\n if(props.temperatureData.length > 0){\n // printDates(props.temperatureData, \"Temperature Data\")\n // console.log(\"Temperature Data----->\", props.temperatureData)\n loadChart(1, props.temperatureData, root1, chart1, XAxis1, YAxis1, state1.scrollbar, state1.sbxAxis, state1.sbyAxis, 'Temperature (°F)')\n // chart1.xAxes.getIndex(0).zoom({ start: 0, end: 1});\n \n }\n } \n }, [props.temperatureData])\n\n useEffect(() => {\n if(props.currentPressureData != undefined && props.currentPressureData != null && chart2 != undefined && chart2 != null){\n if(props.currentPressureData.length > 0){\n // printDates(props.currentPressureData, \"Current Pressure Data\")\n loadChart(2, props.currentPressureData, root2, chart2, XAxis2, YAxis2, state2.scrollbar, state2.sbxAxis, state2.sbyAxis, 'Pressure (PSI)')\n }\n } \n }, [props.currentPressureData])\n\n useEffect(() => {\n if(props.stateData != undefined && props.stateData != null && chart3 != undefined && chart3 != null){\n if(props.stateData.length > 0){\n // printDates(props.stateData, \"State Data\")\n loadChart(3, props.stateData, root3, chart3, XAxis3, YAxis3, state3.scrollbar, state3.sbxAxis, state3.sbyAxis, 'State (ON/OFF)')\n }\n } \n }, [props.stateData])\n\n\n const loadChart = (id, data, root, chart, XAxis, YAxis, scrollbar, sbxAxis, sbyAxis, yLabel) => {\n\n if(chart && data){\n // console.log(\"START LOAD CHART \", id)\n chart.zoomOut()\n const oldDataSets = chart.series.values\n\n if(oldDataSets.length !== 0){\n do {\n chart.series.removeIndex(0).dispose();\n }\n while (oldDataSets.length !== 0); \n }\n\n //--------------------------------------------------------Toggle timeZone\n // root.timezone = am5.Timezone.new(props.timeZone); // Adds way to much latency\n // root.utc = true\n\n YAxis.children.push(am5.Label.new(root, {\n text: yLabel,\n rotation: -90, // Rotate the label by -90 degrees\n x: am5.percent(-20),\n y: am5.percent(50),\n centerX: am5.percent(50),\n centerY: am5.percent(50),\n fontWeight: \"300\",\n fontSize: 12,\n fontFamily: 'Roboto Condensed',\n fill: am5.color(COLORS.HighlightLight) \n }));\n\n if(id == 1){\n rightYAxis1.children.push(am5.Label.new(root, {\n text: yLabel,\n rotation: -90, // Rotate the label by -90 degrees\n x: am5.percent(-20),\n y: am5.percent(50), // Adjust right label here?\n centerX: am5.percent(50),\n centerY: am5.percent(50),\n fontWeight: \"300\",\n fontSize: 12,\n fontFamily: 'Roboto Condensed',\n fill: am5.color(COLORS.TileBlue) \n }));\n }\n\n if(id == 2){\n rightYAxis2.children.push(am5.Label.new(root, {\n text: \"Current (Amps)\",\n rotation: -90, // Rotate the label by -90 degrees\n x: am5.percent(-20),\n y: am5.percent(50), // Adjust right label here?\n centerX: am5.percent(50),\n centerY: am5.percent(50),\n fontWeight: \"300\",\n fontSize: 12,\n fontFamily: 'Roboto Condensed',\n fill: am5.color(COLORS.HighlightLight) \n }));\n }\n\n if(id == 3){\n rightYAxis3.children.push(am5.Label.new(root, {\n text: yLabel,\n rotation: -90, // Rotate the label by -90 degrees\n x: am5.percent(-20),\n y: am5.percent(50), // Adjust right label here?\n centerX: am5.percent(50),\n centerY: am5.percent(50),\n fontWeight: \"300\",\n fontSize: 12,\n fontFamily: 'Roboto Condensed',\n fill: am5.color(COLORS.TileBlue) \n }));\n }\n\n // console.log(\"chartData\", data)\n\n if(id === 1){\n //temp\n let yAxis = chart.yAxes.getIndex(0);\n let yAxis2 = chart.yAxes.getIndex(1);\n\n let temperatureMin = 50\n let temperatureMax = 210\n let minMaxTemperature = findMinMax(data, 'Temperature')\n\n if(minMaxTemperature.min !== Infinity){\n if(minMaxTemperature.min < temperatureMin){\n temperatureMin = minMaxTemperature.min\n }\n }\n if(minMaxTemperature.max !== Infinity && minMaxTemperature.max !== -Infinity && minMaxTemperature.min !== minMaxTemperature.max ){\n if(minMaxTemperature.max > temperatureMax){\n temperatureMax = minMaxTemperature.max\n }\n }\n\n // console.log(\"TempMinMax\", temperatureMin, temperatureMax)\n yAxis.set(\"extraMin\", 0);\n yAxis.set(\"extraMax\", 0);\n yAxis.set(\"min\", temperatureMin);\n yAxis.set(\"max\", temperatureMax);\n yAxis.set(\"strictMinMax\", true)\n\n yAxis2.set(\"min\", 0);\n yAxis2.set(\"max\", 20);\n yAxis2.set(\"fill\", am5.color(COLORS.TileBlue))\n } else if(id === 2){\n let yAxis = chart.yAxes.getIndex(0);\n let yAxis2 = chart.yAxes.getIndex(1);\n\n //------------------------------------\n\n let pressureMin = 0\n let pressureMax = 60\n let minMaxPressure = findMinMax(data, 'Pressure')\n\n if(minMaxPressure.min !== Infinity){\n if(minMaxPressure.min < pressureMin){\n pressureMin = minMaxPressure.min\n }\n }\n if(minMaxPressure.max !== Infinity && minMaxPressure.max !== -Infinity && minMaxPressure.min !== minMaxPressure.max ){\n if(minMaxPressure.max > pressureMax){\n pressureMax = minMaxPressure.max\n }\n }\n\n // console.log(\"PressureMinMax\", pressureMin, pressureMax)\n yAxis.set(\"extraMin\", 0);\n yAxis.set(\"extraMax\", 0);\n yAxis.set(\"min\", pressureMin);\n yAxis.set(\"max\", pressureMax);\n yAxis.set(\"strictMinMax\", true)\n\n //-----------------------------------\n let currentMin = 0\n let currentMax = 20\n let minMaxCurrent = findMinMax(data, 'Current')\n\n if(minMaxCurrent.min !== Infinity){\n if(minMaxCurrent.min < currentMin){\n currentMin = minMaxCurrent.min\n }\n }\n if(minMaxCurrent.max !== Infinity && minMaxCurrent.max !== -Infinity && minMaxCurrent.min !== minMaxCurrent.max ){\n if(minMaxCurrent.max > currentMax){\n currentMax = minMaxCurrent.max\n }\n }\n\n // console.log(\"CurrentMinMax\", currentMin, currentMax)\n yAxis2.set(\"extraMin\", 0);\n yAxis2.set(\"extraMax\", 0);\n yAxis2.set(\"min\", currentMin);\n yAxis2.set(\"max\", currentMax); \n yAxis.set(\"strictMinMax\", true)\n //------------------------------------\n \n } else if (id === 3){\n let yAxis = chart.yAxes.getIndex(0);\n let yAxis2 = chart.yAxes.getIndex(1);\n // Changes State Chart Y-Axis to OFF/ON\n yAxis.get(\"renderer\").labels.template.adapters.add(\"text\", function(text, target) {\n if (target.dataItem) {\n // Use exact comparison for 0 and 1 to avoid rounding issues\n let value = target.dataItem.get(\"value\");\n if (value === 1) {\n return \"ON\";\n } else if (value === 0) {\n return \"OFF\";\n }\n }\n // Return the original text for other values\n return \"\";\n });\n\n yAxis.set(\"min\", 0);\n yAxis.set(\"max\", 1); \n yAxis2.set(\"min\", 0);\n yAxis2.set(\"max\", 20);\n yAxis.set(\"strictMinMax\", true);\n } \n\n const scrollbarSeries = scrollbar.chart.series.values;\n\n for (var i = scrollbarSeries.length - 1; i >= 0; i--) {\n if (i !== 0) { // Assuming you want to keep the first series\n scrollbarSeries[i].dispose(); // Dispose the series\n }\n }\n\n const chartLabels = chart.bottomAxesContainer.children\n\n for (var i = 0; i < chartLabels.length; i++) {\n if(i != 0){\n chart.bottomAxesContainer.children.removeIndex(i).dispose();\n }\n }\n\n // To get consistent colors\n const colors = chartLineColors.slice(0, data.length); \n chart.get(\"colors\").set(\"colors\", colors);\n\n const getUnits = () => {\n\n var label = ''\n\n if(id == 1){\n label = \"\\u00b0F\"\n } else if (id == 2){\n label = \"Amps\"\n } else if (id == 3){\n label = \"\"\n } else {\n label = ''\n }\n return label \n }\n\n var dataSeries = []\n\n for (var i = 0; i < data.length; i++) {\n\n var series = null\n\n if(id === 3){\n\n series = chart.series.push(\n\n am5xy.StepLineSeries.new(root, {\n name: data[i].name,\n xAxis: XAxis,\n yAxis: id == 2 && data[i].name.includes('Current') ? rightYAxis2 : YAxis,\n valueYField: \"value\",\n valueXField: \"date\",\n minDistance: 1,\n // fill: am5.color(0xabcdef),\n // locationX: 0.75,\n // legendValueText: `{valueY} \\u2103`,\n tooltip: am5.Tooltip.new(root, {\n labelText: `{valueY} ${getUnits()}`,\n pointerOrientation: \"horizontal\",\n showTooltipOn: \"click\"\n // fontSize: 12,\n // fontWeight: \"400\",\n // fill: am5.color(COLORS.HighlightLight),\n // fontFamily: \"Roboto Condensed\",\n // labelText: \"[bold]{name}[/]\\n{valueX.formatDate()}: {valueY}\"\n })\n }));\n\n series.fills.template.setAll({\n fill: series.get(\"stroke\"),\n fillOpacity: 1.0, \n visible: true\n })\n\n } else {\n series = chart.series.push(\n\n am5xy.LineSeries.new(root, {\n name: data[i].name,\n xAxis: XAxis,\n yAxis: id == 2 && data[i].name.includes('Current') ? rightYAxis2 : YAxis,\n valueYField: \"value\",\n valueXField: \"date\",\n minDistance: 1,\n // legendValueText: `{valueY} \\u2103`,\n tooltip: am5.Tooltip.new(root, {\n labelText: `{valueY} ${getUnits()}`,\n pointerOrientation: \"horizontal\",\n showTooltipOn: \"click\"\n // fontSize: 12,\n // fontWeight: \"400\",\n // fill: am5.color(COLORS.HighlightLight),\n // fontFamily: \"Roboto Condensed\",\n // labelText: \"[bold]{name}[/]\\n{valueX.formatDate()}: {valueY}\"\n })\n }));\n }\n\n dataSeries.push(series)\n // console.log(\"dataSeries count\", dataSeries.length)\n\n // Custom tooltip detailing\n if(id == 2){\n if(data[i].name.includes('Pressure')){\n series.get(\"tooltip\").label.adapters.add(\"text\", function(text, target) {\n if (target.dataItem) {\n let value = target.dataItem.get(\"valueY\");\n return `${value} PSI`;\n }\n return text;\n });\n } else {\n series.get(\"tooltip\").label.adapters.add(\"text\", function(text, target) {\n if (target.dataItem) {\n let value = target.dataItem.get(\"valueY\");\n return `${value} Amps`;\n }\n return text;\n });\n }\n } else if(id === 3){ \n series.get(\"tooltip\").label.adapters.add(\"text\", function(text, target, key) {\n if (target.dataItem && target.dataItem.dataContext) {\n let value = target.dataItem.dataContext.value;\n let newText = value === 1 ? \"ON\" : \"OFF\";\n text = text.replace(\"{valueY}\", newText);\n }\n return text;\n });\n } \n\n // chart.get(\"colors\").set(\"background\", [\n // am5.color(\"#63C085\"), // green light\n // ]);\n \n var localData = data[i].data // full \n var updatedData = {}\n\n \n updatedData = transformData(localData); \n series.data.setAll(updatedData);\n\n //-------------------------------------------Load Scrollbar with data\n let scrollBarData = scrollbar.chart.series.push(\n am5xy.LineSeries.new(root, {\n xAxis: sbxAxis,\n yAxis: sbyAxis,\n valueYField: \"value\",\n valueXField: \"date\",\n })\n );\n\n scrollBarData.data.setAll(updatedData);;\n }\n\n // Zoom chart all the way out\n chart.zoomOut()\n \n // Tooltip to jump between points\n chart.get(\"cursor\").set(\"xAxis\", XAxis);\n chart.get(\"cursor\").set(\"snapToSeriesBy\", \"x\");\n\n if(dataSeries.length != 0){\n chart.get(\"cursor\").set(\"snapToSeries\", [dataSeries[0]]);\n }\n\n if(id != 1){\n scrollbar.set('visible', false)\n } \n\n\n //----------\n\n let legend = chart.bottomAxesContainer.children.push(am5.Legend.new(root, {\n visible: true,\n paddingTop: 0,\n paddingTop: 10,\n useDefaultMarker: true,\n x: am5.percent(0),\n centerX: am5.percent(0),\n centerY: am5.percent(70),\n }));\n legend.data.setAll(chart.series.values);\n legend.valueLabels.template.set(\"forceHidden\", true);\n\n // Some legend styling\n legend.labels.template.setAll({\n fontSize: 15,\n fill: am5.color(COLORS.White),\n fontFamily: \"Roboto Condensed\",\n fontWeight: \"500\",\n });\n\n // console.log(\"END LOAD CHART \", id)\n\n props.chartLoaded(id)\n } \n } \n\n // TODO: Round up to nearest decimal\n function transformData(data) {\n return data.map(([date, value]) => ({\n date,\n value\n }));\n }\n\n function findMinMax(data, label){\n\n let lowestMin = Number.POSITIVE_INFINITY; // Start with the highest possible number\n let highestMax = Number.NEGATIVE_INFINITY; // Start with the lowest possible number\n\n data.forEach(item => {\n if(item.name.includes(label)){\n if (item.min < lowestMin) {\n lowestMin = item.min; // Update lowestMin if the current item's min is lower\n }\n if (item.max > highestMax) {\n highestMax = item.max; // Update highestMax if the current item's max is higher\n }\n }\n });\n\n lowestMin = Math.floor(lowestMin / 10) * 10;\n highestMax = Math.ceil(highestMax / 10) * 10;\n\n return {\n min: lowestMin,\n max: highestMax\n }\n }\n \n return (\n \n {\n props.temperatureData ?\n
0 ? 'block' : 'none'}}>\n
\n \n : null\n }\n\n {\n props.currentPressureData && props.temperatureData ?\n
0 ? 'block' : 'none'}}>\n
\n \n : null\n }\n\n {\n props.stateData ? \n
0 ? 'block' : 'none'}}>\n
\n \n : null\n }\n\n\n
\n \n\n \n \n )\n}\n\n\n const OuterContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n padding-left: 20px;\n `\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n margin-bottom: 21px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 28px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst EmptyText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: italic;\n font-weight: 500;\n font-size: 16px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n`;\n\nconst ModeText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.ErrorOrange};\n padding-top: 10px;\n padding-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n max-width: 95%;\n text-wrap: wrap;\n text-align: center;\n\n `}\n`\n","module.exports = global.config = {\n PROD_MODE: false \n};\n\n// Toggle PROD/DEV manually in Auth / Endpoints, UserPool","export const COLORS = {\n Base : \"#041129\",\n Primary : \"#0A1934\",\n Secondary : \"#1A2B4A\", \n HighlightDark : \"#1A2740\",\n HighlightMedium : \"#4C628C\",\n HighlightLight : \"#A1ADC2\",\n White: \"#FFFFFF\",\n ErrorOrange: \"#F15C5D\",\n GreyUnavailable: \"#B6B6B6\",\n Green: \"#63C085\",\n Red: \"#FF0000\",\n TileBlue: \"#15223F\"\n}","export default __webpack_public_path__ + \"static/media/ic_arrow_right_white.b9d287fb.svg\";","export default __webpack_public_path__ + \"static/media/ic_arrow_down_white.2c7e458d.svg\";","/**\n * List of endpoints available to the React app. Unauthenticated endpoints are available to use\n * without authorization. Authenticated endpoints require a Bearer token to be passed in the header,\n * for example:\n *\n * import { API, Auth } from \"aws-amplify\"\n * ...\n * const jwtToken = (await Auth.currentSession()).getIdToken().getJwtToken()\n * API.get(\"FrontendAPI-dashboards\", \"\", {\n * headers: { Authorization: `Bearer ${jwtToken}` }\n * })\n *\n * See examples/ for example responses\n */\n\n\nconst endpoints = [\n // ==== Unauthenticated endpoints ====\n {\n name: \"FrontendAPI-users\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/users`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n {\n name: \"FrontendAPI-schema\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/wingnuts/schema`,\n },\n // ===== Authenticated endpoints =====\n /**\n * Dashboards endpoint for fetching dashboards. List of available routes:\n *\n * - GET /v1/dashboards - returns a list of dashboard IDs\n * - GET /v1/dashboards/{UUID} - returns an embed URL for the specified UUID if the user has\n * permissions to view the dashboard.\n * * Required - 2 query string parameters\n * * jwtToken - the JWT token used to authenticate\n * * payloadSub - the payload sub of the ID token of the current session from\n * (await Auth.currentSession()).getIdToken().payload.sub\n */\n {\n name: \"FrontendAPI-dashboards\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/dashboards`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n /**\n * Properties endpoint for fetching and updating properties. List of available routes:\n * - GET /v1/properties - returns a list of properties and their linked wingnuts\n * - GET /v1/properties/{UUID} - returns details for the specified UUID\n * - POST /v1/properties - creates a new property\n * * Request - {\n * externalId: String,\n * config: {\n * name: String,\n * address: String,\n * assets: {}, // Unused for now\n * portfolio: String\n * }\n * }\n * - POST /v1/properties/{UUID} - updates an existing property\n * * Request - {\n * externalId: String,\n * config: {\n * name: String,\n * address: String,\n * assets: {}, // Unused for now\n * portfolio: String\n * }\n * }\n * - DELETE /v1/properties{UUID} - removes an existing property\n * * Not yet implemented\n */\n\n {\n name: \"FrontendAPI-properties\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/properties`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n /**\n * Wingnuts endpoint for fetching and updating wingnuts. List of available routes:\n *\n * - GET /v1/wingnuts - returns a list of wingnuts and their properties\n * - GET /v1/wingnuts/{UUID} - returns wingnut details and its property if the user has access\n * - POST /v1/wingnuts - adds a wingnut to the user's company\n * * Request - {\n * wingnutId: String // UUID of wingnut\n * }\n * - POST /v1/wingnuts/{UUID} - updates fields of a wingnut\n * * Request - {\n * alarmsEnabled: Boolean,\n * sensors: {\n * String: { // Key is the name of the input, e.g. \"AN1\"\n * label: String,\n * type: String,\n * alarmEnabled: Boolean,\n * alarmThresholds: [{\n * type: String,\n * value: Float\n * }]\n * }\n * }\n * }\n * - POST /v1/wingnuts/{UUID}/link - links/unlinks a wingnut to a property.\n * * Request - {\n * propertyId: String // UUID of property, empty string to unlink\n * }\n */\n {\n name: \"FrontendAPI-wingnuts\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/wingnuts`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n /**\n * Notifications endpoint for fetching and updating notifications. List of available routes:\n * \n * - GET /v1/notifications - returns a list of notifications for the user's company\n * - GET /v1/notifications?propertyId={UUID} - returns the notification for a property\n * - GET /v1/notifications/{UUID} - returns a notification with specified UUID\n * - POST /v1/notifications - create a notification (TBD)\n * - POST /v1/notifications/{UUID} - update a notification\n * * Request - {\n * entityStatus: String // \"enabled\" or \"disabled\"\n * config: {\n * thresholds: {\n * [key: String]: { // key is the sensor label\n * min: Float,\n * max: Float,\n * thresholdStatus: String, // \"enabled\" or \"disabled\"\n * recipients: [\n * {\n * type: String, // \"slack\", \"sms\", or \"email\"\n * value: String // endpoint, phone number (+10001112222), or email respectively\n * }\n * ]\n * }\n * }\n * }\n * }\n */\n {\n name: \"FrontendAPI-notifications\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/notifications`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n\n {\n name: \"FrontendAPI-thresholds\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/thresholds`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n\n {\n name: \"FrontendAPI-companies\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/companies`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n\n {\n name: \"FrontendAPI-analytics\",\n endpoint: `https://fe.${process.env.REACT_APP_API_ZONENAME}/v1/analytics`,\n service: \"lambda\",\n region: `${process.env.REACT_APP_API_REGION}`,\n },\n\n]\n\nexport default endpoints\n\n\n\n","export default __webpack_public_path__ + \"static/media/LOGO_ALT.93cd2c83.svg\";","export default __webpack_public_path__ + \"static/media/ic_check_circle.b82c2b88.svg\";","export default __webpack_public_path__ + \"static/media/bg_bluePipes.026d5431.png\";","export default __webpack_public_path__ + \"static/media/eye.bb623504.svg\";","export const ValidatorStrings = (text) => {\n\n switch (text) {\n case \"required\":\n return \"This field is required\"\n case \"maxLength\":\n return \"This field has hit its max character limit\"\n case \"minLength\":\n return \"This field requires at least 10 characters\"\n case \"pattern\":\n return \"Email must be valid\"\n case \"emailEqual\":\n return \"Passwords must match\"\n case \"validate\":\n return \"Invalid phone number format\"\n case \"externalIdInvalid\": \n return \"Property ID is already in use\";\n default:\n return \"General Validation Error\"\n }\n}\n\nexport const ResetPasswordStrings = (text) => {\n\n switch (text) {\n case \"required\":\n return \"This field is required\"\n case \"maxLength\":\n return \"This field has hit its max character limit\"\n case \"minLength\":\n return \"This field requires at least 10 characters\"\n case \"pattern\":\n return \"This field requires 6 numeric characters\"\n case \"emailEqual\":\n return \"Passwords must match\"\n case \"validate\":\n return \"Invalid phone number format\"\n default:\n return \"General Validation Error\"\n }\n}\n\nexport const WingnutValidatorStrings = (text) => {\n\n switch (text) {\n case \"required\":\n return \"This field is required\"\n case \"maxLength\":\n return \"This field has hit its max character limit\"\n case \"minLength\":\n return \"This field requires at least 10 characters\"\n case \"pattern\":\n return \"Email must be valid\"\n case \"emailEqual\":\n return \"Passwords must match\"\n case \"validate\":\n return \"Invalid UUID format\"\n default:\n return \"General Validation Error\"\n }\n}\n\n\nexport const EmailValidatorStrings = (text) => {\n\n switch (text) {\n case \"required\":\n return \"This field is required\"\n case \"maxLength\":\n return \"This field has hit its max character limit\"\n case \"minLength\":\n return \"This field requires at least 10 characters\"\n case \"pattern\":\n return \"Email must be valid\"\n case \"emailEqual\":\n return \"Emails must match\"\n case \"validate\":\n return \"Invalid phone number format\"\n case \"invite\":\n return \"This user already exists\"\n default:\n return \"General Validation Error\"\n }\n}\n\nexport const PhoneValidatorStrings = (text) => {\n\n switch (text) {\n case \"required\":\n return \"This field is required\"\n case \"maxLength\":\n return \"This field has hit its max character limit\"\n case \"minLength\":\n return \"This field requires at least 10 characters\"\n case \"pattern\":\n return \"Phone number must not contain letters\"\n case \"emailEqual\":\n return \"Passwords must match\"\n case \"validate\":\n return \"Invalid phone number format\"\n default:\n return \"General Validation Error\"\n }\n}\n\nexport const HelpValidatorStrings = (text) => {\n\n switch (text) {\n case \"required\":\n return \"This field is required\"\n case \"maxLength\":\n return \"This field has hit its 300 max character limit\"\n case \"minLength\":\n return \"This field requires at least 10 characters\"\n case \"pattern\":\n return \"Phone number must not contain letters\"\n case \"emailEqual\":\n return \"Passwords must match\"\n case \"validate\":\n return \"Invalid phone number format\"\n default:\n return \"General Validation Error\"\n }\n}\n\nexport const ServerStrings = (text) => {\n\n switch (text) {\n case \"NotAuthorizedException\":\n return \"Incorrect email or password, please try again\"\n case \"LimitExceededException\":\n return \"Attempt limit exceeded, please try after some time\"\n case \"AliasExistsException\":\n return \"An account with the given email already exists\"\n case \"UserNotConfirmedException\":\n return \"Email is not confirmed\"\n case \"UsernameExistsException\":\n return \"An account with the given email already exists\"\n case \"InvalidParameterException\":\n return \"Invalid phone number format. Should be 123-123-1234\"\n case \"InvalidPasswordException\":\n return \"Password must be 8 characters, 1 number, 1 special character, 1 uppercase, 1 lowercase\"\n case \"ExpiredCodeException\":\n return \"Invalid code provided, please contact an admin\"\n case \"CodeMismatchException\":\n return \"Invalid code provided, please contact an admin\"\n case \"InvalidWingnut\":\n return \"Invalid wingnut ID provided, please check UUID\"\n default:\n return \"General Server Error\"\n }\n}\n","import styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\n\nexport const ErrorContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n align-content: center;\n /* align-self: center; */\n /* margin-bottom: 10px; */\n /* width: auto; */\n`\n\nexport const Icon = styled.img`\n width: 15px;\n height: 15px;\n margin-right: 6px;\n margin-top: 2px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport const Error = styled.p`\n /* border: 1px blue dashed; */\n height: 16px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 129.5%;\n color: ${COLORS.White};\n flex: none;\n margin-top: 5px;\n margin-bottom: 5px;\n ${media.lessThan(\"743px\")`\n width: 90%;\n `}\n ${media.between(\"744px\", \"large\")`\n\n `}\n`\n\nexport const EmptyError = styled(Error)`\n /* border: 1px blue dashed; */\n height: 0px;\n`\n\nexport const SuccessContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n align-content: center;\n height: 36px;\n align-self: center;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n `}\n`\n\nexport const SuccessIcon = styled.img`\n width: 20px;\n height: 20px;\n margin-right: 13px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport const SuccessIcon2 = styled(SuccessIcon)`\n ${media.lessThan(\"743px\")`\n margin-left: 0px\n `}\n ${media.between(\"744px\", \"large\")`\n margin-left: 20px;\n `}\n ${media.greaterThan(\"large\")`\n margin-left: 20px;\n `}\n`\n\nexport const Success = styled.p`\n /* border: 1px blue dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 90%;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nexport const EmptySuccess = styled(Success)`\n /* border: 1px blue dashed; */\n /* margin-bottom: 50px; */\n height: 36px;\n height: 0px;\n`\n","import React, { useState, useContext } from \"react\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image2 from \"./../../images/eye.svg\"\nimport Image from \"./../../images/ic_alert.svg\"\nimport { SpinnerContainer, StyledSpinner } from \"./../custom/Spinner\"\nimport { ValidatorStrings, ServerStrings } from \"./../util/VaildatorStrings\"\nimport { ErrorContainer, Icon, Error, EmptyError } from \"./../custom/ValidatorStyles\"\nimport Pool from \"./../../auth/UserPool\"\nimport { CognitoUser } from \"amazon-cognito-identity-js\"\nimport { ProSidebar } from \"react-pro-sidebar\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nexport default function ResetPasswordForm(props) {\n const {\n register,\n handleSubmit,\n reset,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const { getSession } = useContext(AccountContext)\n const [showSpinner, setShowSpinner] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [validatorError, setValidatorError] = useState(null)\n\n const onSubmit = async (data) => {\n setDisabled(true)\n setShowSpinner(true)\n\n const getUser = () => {\n return new CognitoUser({\n Username: data.email.toLowerCase(),\n Pool,\n })\n }\n\n getUser().forgotPassword({\n onSuccess: (d) => {\n setValidatorError(null)\n setShowSpinner(false)\n setDisabled(false)\n props.setEmail(data.email)\n props.goToStepNumber(1)\n },\n onFailure: (err) => {\n console.log(\"Error\", err)\n setValidatorError(ServerStrings(err.name))\n setShowSpinner(false)\n setDisabled(false)\n },\n })\n }\n\n return (\n \n {showSpinner && \n \n \n )\n}\n\nconst Container = styled.div`\n /* border: 1px red dashed;; */\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n /* justify-self: center; */\n width: auto;\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 90%;\n\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n width: 384px;\n display: flex;\n flex-direction: column;\n justify-self: center;\n margin-top: 71px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n width: 384px;\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 11px;\n line-height: 14px;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n /* margin-top: 16px; */\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 384px;\n height: 45px;\n padding-left: 10px;\n outline: none;\n border: none;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n color: ${COLORS.White};\n font-weight: 400;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnInstructions = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: center;\n width: 206px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 38px;\n color: ${COLORS.Base};\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`","export default __webpack_public_path__ + \"static/media/eye_blue.009ce925.svg\";","import React, { useState } from \"react\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image2 from \"./../../images/eye.svg\"\nimport Image from \"./../../images/ic_alert.svg\"\nimport ImageBlueEye from \"./../../images/eye_blue.svg\"\nimport { SpinnerContainer, StyledSpinner } from \"./../custom/Spinner\"\nimport { ErrorContainer, Icon, Error, EmptyError } from \"./../custom/ValidatorStyles\"\nimport Pool from \"./../../auth/UserPool\"\nimport { CognitoUser } from \"amazon-cognito-identity-js\"\nimport { ValidatorStrings, ServerStrings } from \"./../util/VaildatorStrings\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nexport default function ResetPasswordCodeForm(props) {\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const [showSpinner, setShowSpinner] = useState(false)\n const [newPasswordShown, setNewPasswordShown] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [confirmPasswordShown, setConfirmPasswordShown] = useState(false)\n const [validatorError, setValidatorError] = useState(null)\n\n const toggleNewPasswordVisiblity = () => {\n setNewPasswordShown(newPasswordShown ? false : true)\n }\n\n const toggleConfirmPasswordVisiblity = () => {\n setConfirmPasswordShown(confirmPasswordShown ? false : true)\n }\n\n const onSubmit = async (data) => {\n setShowSpinner(true)\n setDisabled(true)\n\n const getUser = () => {\n return new CognitoUser({\n Username: props.email.toLowerCase(), \n Pool,\n })\n }\n\n getUser().confirmPassword(props.code, data.newPassword, {\n onSuccess(data) {\n setValidatorError(null)\n setShowSpinner(false)\n setDisabled(false)\n reset({ newPassword: \"\", confirmPassword: \"\" })\n props.goToStepNumber(3)\n },\n onFailure(err) {\n console.log(\"Error\", err)\n setValidatorError(ServerStrings(err.name))\n setShowSpinner(false)\n setDisabled(false)\n },\n })\n }\n\n return (\n \n {showSpinner && \n \n \n )\n}\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n width: auto;\n align-self: center;\n /* margin-top: 28px; */\n ${media.lessThan(\"743px\")`\n width: 90%;\n\n `}\n`\n\nconst InputContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n width: 100%;\n`\n\nconst EyeIcon = styled.img`\n /* border: 1px red dashed; */\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -50px;\n /* margin-top: 46px;\n margin-bottom: 8px; */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n width: 384px;\n display: flex;\n flex-direction: column;\n justify-self: center;\n margin-top: 26px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n width: 384px;\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n /* margin-top: 6px; */\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 384px;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Blinker\", sans-serif;\n padding-left: 10px;\n font-style: normal;\n font-size: 15px;\n letter-spacing: 0.1em;\n font-weight: 400;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n \n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnConfirmPassword = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: center;\n width: 211px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n /* line-height: 129.5%; */\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 33px;\n color: ${COLORS.Base};\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: center;\n width: 206px;\n height: 50px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: transparent;\n cursor: pointer;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n color: ${COLORS.White};\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 13px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`","import React, { useState, useContext } from \"react\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image2 from \"./../../images/eye.svg\"\nimport Image from \"./../../images/ic_alert.svg\"\nimport { SpinnerContainer, StyledSpinner } from \"./../custom/Spinner\"\nimport { ResetPasswordStrings, ServerStrings } from \"./../util/VaildatorStrings\"\nimport { ErrorContainer, Icon, Error, EmptyError } from \"./../custom/ValidatorStyles\"\nimport Pool from \"./../../auth/UserPool\"\nimport { CognitoUser } from \"amazon-cognito-identity-js\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nexport default function RecoveryCodeForm(props) {\n\n const {\n register,\n handleSubmit,\n reset,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const { getSession } = useContext(AccountContext)\n const [showSpinner, setShowSpinner] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [validatorError, setValidatorError] = useState(null)\n\n const onSubmit = async (data) => {\n setValidatorError(null)\n setShowSpinner(false)\n setDisabled(false)\n props.setCode(data.code)\n props.goToStepNumber(2)\n }\n\n return (\n \n {showSpinner && \n \n \n )\n}\n\n\nconst Container = styled.div`\n /* border: 1px red dashed;; */\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n /* justify-self: center; */\n width: auto;\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 90%;\n\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n width: 384px;\n display: flex;\n flex-direction: column;\n justify-self: center;\n ${media.lessThan(\"743px\")`\n width: 100%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n width: 384px;\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 11px;\n line-height: 14px;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n margin-top: 16px;\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 384px;\n height: 45px;\n padding-left: 10px;\n margin-top: 72px;\n outline: none;\n border: none;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n color: ${COLORS.White};\n font-weight: 400;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnInstructions = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: center;\n width: 206px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 39px;\n color: ${COLORS.Base};\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport Image2 from \"./../../images/ic_check_circle.svg\"\nimport ImageBg2 from \"./../../images/bg_bluePipes.png\"\nimport ResetPasswordForm from \"./../form/ResetPasswordForm\"\nimport ResetPasswordCodeForm from \"./../form/ResetPasswordCodeForm\"\nimport { Link } from \"react-router-dom\"\nimport RecoveryCodeForm from \"../form/RecoveryCodeForm\"\nimport { COLORS } from \"../../styles/colors\"\n\nexport default class ResetPassword extends Component {\n state = {\n step: 0,\n code: \"\",\n email: \"\"\n }\n\n setEmail = (val) => {\n this.setState({ email: val })\n }\n\n setCode = (val) => {\n this.setState({ code: val })\n }\n\n goToStepNumber = (val) => {\n this.setState({ step: val })\n }\n\n render() {\n return (\n \n \n \n Reset Password \n Enter your account email and we'll send you a recovery link \n \n )\n case 1:\n return(\n \n Enter Recovery Code \n Check your email for a recovery code \n \n )\n case 2:\n return(\n \n Reset your Password \n \n )\n case 3:\n return(\n \n Success! \n Your password has been successfully changed \n \n )\n default:\n return null;\n }\n })()}\n\n\n {(() => {\n switch (this.state.step) {\n case 0:\n return (\n \n BACK \n \n \n );\n case 1:\n return (\n \n \n );\n case 2:\n return (\n \n \n (this.goToStepNumber(1))}>BACK \n \n );\n case 3:\n return (\n \n LOG IN \n \n \n );\n default:\n return null;\n }\n })()}\n\n \n \n )\n }\n}\n\nconst Grid = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n height: 100%;\n flex-direction: column;\n padding-top: 230px;\n padding-bottom: 100px;\n align-content: center;\n justify-self: center;\n\n ${media.lessThan(\"743px\")`\n width: 100%;\n padding-top: 66px;\n `}\n`\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 456px;\n flex-direction: column;\n align-self: center;\n align-content: center;\n ${media.lessThan(\"743px\")`\n width: 95%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 456px;\n `}\n`\n\nconst CopyContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n align-self: center;\n align-content: center;\n ${media.lessThan(\"743px\")`\n width: 95%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 456px;\n `}\n`\n\nconst Logo = styled.img`\n width: 202px;\n height: 57px;\n align-self: center;\n margin-bottom: 15px;\n transition-duration: 0.5s;\n :hover {\n transform: scale(1.2);\n }\n `\n\nconst Icon = styled.img`\n/* border: 1px red dashed; */\n width: 25px;\n height: 25px;\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-top: 46px;\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst EmptyIcon = styled.div`\n width: 35px;\n height: 35px;\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-bottom: 8px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: 600;\n font-size: 28px;\n line-height: 25.2%;\n letter-spacing: -1%;\n margin-bottom: 19px;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Blurb = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 18px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n width: 300px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: center;\n width: 206px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: transparent;\n cursor: pointer;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n color: ${COLORS.White};\n /* line-height: 129.5%; */\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnBackToLogin = styled(BtnBack)`\n background: #63c085;\n width: 218px;\n color: ${COLORS.Base};\n`\n\nconst SuccessContainer = styled.div`\n display: flex;\n flex-direction: column;\n`\n\nconst FormContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n`","export function formatPhoneNumber(phoneNumber) {\n const removeNonNumbers = phoneNumber.replace(/[^0-9]/g, \"\")\n if (removeNonNumbers.length === 11) {\n return `+${removeNonNumbers}`\n } else {\n return `+1${removeNonNumbers}`\n }\n}\n","export default __webpack_public_path__ + \"static/media/ic_arrow_right.dd954e0e.svg\";","import { Auth } from \"aws-amplify\"\nimport { useEffect, useState } from \"react\"\nimport { useForm } from \"react-hook-form\"\nimport \"react-phone-number-input/style.css\"\nimport { Link, useHistory } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport { formatPhoneNumber } from \"../util/StringUtil\"\nimport Image2 from \"./../../images/eye.svg\"\nimport ImageBlueEye from \"./../../images/eye_blue.svg\"\nimport Image from \"./../../images/ic_alert.svg\"\nimport Image3 from \"./../../images/ic_arrow_right.svg\"\nimport { SpinnerContainer, StyledSpinner } from \"./../custom/Spinner\"\nimport { EmptyError, Error, ErrorContainer, Icon } from \"./../custom/ValidatorStyles\"\nimport { PhoneValidatorStrings, ServerStrings, ValidatorStrings } from \"./../util/VaildatorStrings\"\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n width: auto;\n align-self: center;\n margin-top: 36px;\n ${media.lessThan(\"743px\")`\n width: 90%;\n `}\n`\n\nconst Form = styled.form`\n width: 384px;\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 384px;\n `}\n`\n\nconst Label = styled.label`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n`\n\nconst CheckboxContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-content: center;\n margin-top: 56px;\n align-self: center;\n`\n\nconst LblCheckbox = styled.label`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n align-self: center;\n text-align: center;\n color: ${COLORS.White};\n`\n\nconst InputContainer = styled.div`\n display: flex;\n flex-direction: row;\n width: 100%;\n`\n\nconst EyeIcon = styled.img`\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -50px;\n`\n\nconst Input = styled.input`\n width: 100%;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: 400;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 45px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 45px;\n `}\n`\n\nconst Checkbox = styled.input`\n border: 1px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 3px;\n margin-right: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: center;\n width: 233px;\n height: 45px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 30px;\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 13px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: #0c182f;\n transition-duration: 0.5s;\n :hover {\n color: ${COLORS.Base};\n }\n`\n\nconst CheckboxError = styled(Error)\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n`\n\nconst Conditions = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n margin-left: 5px;\n margin-right: 5px;\n font-size: 17px;\n line-height: 129.5%;\n align-self: center;\n text-align: center;\n color: ${COLORS.White};\n text-decoration-line: underline;\n`\n\nexport default function CreateAccountForm(props) {\n const history = useHistory()\n\n const {\n register,\n handleSubmit,\n getValues,\n onChange,\n formState: { errors },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const [showSpinner, setShowSpinner] = useState(false)\n const [passwordShown, setPasswordShown] = useState(false)\n const [confirmPasswordShown, setConfirmPasswordShown] = useState(false)\n const [serverError, setServerError] = useState(null)\n const [disabled, setDisabled] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n const [checked, setChecked] = useState(false)\n\n const togglePasswordVisiblity = () => {\n setPasswordShown(passwordShown ? false : true)\n }\n\n const toggleConfirmPasswordVisiblity = () => {\n setConfirmPasswordShown(confirmPasswordShown ? false : true)\n }\n\n useEffect(() => {\n if (onChange) {\n onChange(checked)\n }\n }, [checked])\n\n const onSubmit = async (data) => {\n setServerError(null)\n setShowSpinner(true)\n setShowSpinner(true)\n setDisabled(true)\n\n const formattedPhoneNumber = formatPhoneNumber(data.phoneNumber)\n Auth.signUp({\n username: props.email,\n password: data.password,\n attributes: {\n given_name: data.firstName,\n family_name: data.lastName,\n phone_number: formattedPhoneNumber,\n \"custom:uuid\": props.id,\n \"custom:company\": props.company,\n \"custom:companyId\": props.companyId,\n },\n })\n .then((user) => {\n setServerError(null)\n props.updateSuccess()\n setTimeout(function () {\n history.push(\"/login\")\n }, 3000)\n })\n .catch((err) => {\n console.error(err)\n setServerError(ServerStrings(err.name))\n })\n .finally(() => {\n setShowSpinner(false)\n setDisabled(false)\n })\n }\n\n return (\n \n {showSpinner && \n \n \n )\n}\n","import { API } from \"aws-amplify\"\nimport React, { Component } from \"react\"\nimport { Link, withRouter } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport Image2 from \"./../../images/ic_check_circle.svg\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport CreateAccountForm from \"./../form/CreateAccountForm\"\n\nconst Grid = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n height: 100%;\n flex-direction: column;\n align-content: center;\n justify-self: center;\n padding-top: 70px;\n padding-bottom: 60px;\n overflow: none;\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: auto;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: auto;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Container = styled.div`\n /* border: 2px green dashed; */\n display: flex;\n width: 456px;\n flex-direction: column;\n align-self: center;\n justify-content: center;\n align-content: center;\n ${media.lessThan(\"743px\")`\n width: 95%;\n\n `}\n`\n\nconst SubContainer = styled.div`\n /* border: 2px green dashed; */\n display: flex;\n flex-direction: column;\n align-self: center;\n justify-content: center;\n align-content: center;\n ${media.lessThan(\"743px\")`\n width: 95%;\n\n `}\n`\n\nconst Logo = styled.img`\n width: 202px;\n height: 57px;\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n transform: scale(1.2);\n }\n`\n\nconst Icon = styled.img`\n width: 35px;\n height: 35px;\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-top: 46px;\n margin-bottom: 8px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst EmptyIcon = styled.div`\n width: 35px;\n height: 35px;\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: 600;\n font-size: 32px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n font-size: 25px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Blurb = styled(Title)`\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 84.5%;\n text-align: center;\n letter-spacing: -0.01em;\n margin-top: 15px;\n ${media.lessThan(\"743px\")`\n font-size: 18px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BlurbHighlight = styled(Blurb)`\n font-weight: bold;\n`\n\nconst MiniBlurb = styled(Blurb)`\n font-size: 18px;\n`\n\nconst BtnHaveAccount = styled.button`\n background: transparent;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 130%;\n cursor: pointer;\n text-align: center;\n text-decoration-line: underline;\n opacity: 0.5;\n margin-top: 10px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst BtnLogin = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: center;\n width: 259px;\n height: 50px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 65px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nclass CreateAccount extends Component {\n state = {\n isLoading: true,\n isSuccess: false,\n id: \"\",\n email: \"\",\n company: \"\",\n companyId: \"\",\n }\n\n componentDidMount = () => {\n this.getSearchParamsToken()\n .then((uuid) => {\n return API.get(\"FrontendAPI-users\", `/${uuid}`)\n })\n .then((response) => {\n const { uuid, email, company, companyId } = response\n this.setState({\n isLoading: false,\n id: uuid,\n email,\n company,\n companyId,\n })\n })\n .catch((error) => {\n console.log(\"Error\", error)\n this.props.history.push(\"/\")\n })\n }\n\n getSearchParamsToken = () => {\n return new Promise((resolve, reject) => {\n const params = new URLSearchParams(this.props.location.search)\n const uuid = params.get(\"token\")\n if (uuid) {\n resolve(uuid)\n } else {\n reject(\"Token not valid\")\n }\n })\n }\n\n updateSuccess = () => {\n this.setState({ isSuccess: true })\n }\n\n render() {\n return (\n \n \n {this.state.isSuccess ? \"Success!\" : this.state.company} \n\n {this.state.isSuccess ? (\n \n Account created for \n {this.state.email} \n\n LOG IN \n \n \n ) : this.state.isLoading ? (\n \n Account Creation for {this.state.email} \n Already have an account? Log in \n \n \n )}\n \n \n )\n }\n}\n\nexport default withRouter(CreateAccount)\n","export default __webpack_public_path__ + \"static/media/IsoRender_menu.ff8217dc.png\";","export default __webpack_public_path__ + \"static/media/ic_arrow_right_green.40ee6b95.svg\";","export default __webpack_public_path__ + \"static/media/ic_close.bbe8ec84.svg\";","import React, { Link, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n padding-right: 0px;\n /* width: 100%; */\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 17px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-evenly;\n margin-top: 43px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonTextNo = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst ButtonTextYes = styled(ButtonTextNo)`\n color: black;\n`\n\nexport default function LogoutPopup(props) {\n const [isHoveringYes, setIsHoveringYes] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n \n Are you sure you want to log out? \n \n {\n setIsHoveringYes(true)\n }}\n onMouseLeave={(e) => {\n setIsHoveringYes(false)\n }}\n onClick={props.setLogout}\n style={{ opacity: isHoveringYes == true ? \"80%\" : \"100%\" }}\n >\n YES \n \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={props.closePopup}\n style={{ backgroundColor: isHovering == true ? COLORS.Secondary : \"transparent\" }}\n >\n No \n \n \n \n \n )\n}\n","import React, { useState, useContext, useEffect } from \"react\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { Link, useLocation } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { ProSidebar, Menu, MenuItem } from \"react-pro-sidebar\"\nimport \"./SideNav.scss\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport Image6 from \"./../../images/ic_arrow_right_white.svg\"\nimport ImgWingnut from \"./../../images/IsoRender_menu.png\"\nimport { library } from \"@fortawesome/fontawesome-svg-core\"\nimport { FontAwesomeIcon as FAIcon } from \"@fortawesome/react-fontawesome\"\nimport Modal from \"react-modal\"\nimport LogoutPopup from \"./../popup/LogoutPopup\"\nimport { COLORS } from \"../../styles/colors\"\nimport { getUUIDFromPath } from \"../util/CleanUUID\"\n\nexport default function SideNav() {\n const [isCollapsed, setIsCollapsed] = useState(true)\n const [isHovering, setIsHovering] = useState(false)\n\n const [hoverDashboard, setHoverDashboard] = useState(false)\n const [hoverAccount, setHoverAccount] = useState(false)\n const [hoverWingnut, setHoverWingnut] = useState(false)\n const [hoverProperty, setHoverProperty] = useState(false)\n const [hoverNotification, setHoverNotification] = useState(false)\n const [hoverUsers, setHoverUsers] = useState(false)\n const [hoverLogout, setHoverLogout] = useState(false)\n const [isModalOpen, setIsModalOpen] = useState(false)\n\n const [isAdmin, setIsAdmin ] = useState(false)\n const { getSession } = useContext(AccountContext)\n \n useEffect(() => {\n getSession().then(({ isAdmin }) => {\n setIsAdmin(isAdmin)\n })\n }, [])\n\n const [state, setState] = useState({\n selectDashboard: true,\n selectAccount: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n selectLogout: false,\n })\n\n var location = useLocation()\n const { logout } = useContext(AccountContext)\n\n const toggleSidebar = () => {\n setIsCollapsed(!isCollapsed)\n }\n\n useEffect(() => {\n var pathname = location.pathname.substring(8)\n\n switch (pathname) {\n case \"dashboard/0\":\n return setState({\n selectDashboard: true,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n case \"account\":\n return setState({\n selectDashboard: false,\n selectAccount: true,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n case \"wingnut\":\n return setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: true,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n case `wingnut/detail/${getUUIDFromPath(location.pathname)}`:\n return setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: true,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n case \"notification\":\n return setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: true,\n selectUsers: false,\n })\n case \"property\":\n return setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: true,\n selectNotification: false,\n selectUsers: false,\n })\n case \"users\":\n return setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: true,\n })\n case `property/detail/${getUUIDFromPath(location.pathname)}`:\n return setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: true,\n selectNotification: false,\n selectUsers: false,\n })\n }\n }, [location])\n\n useEffect(() => {\n const width = window.innerWidth\n if (window.innerWidth > 1170) {\n setIsCollapsed(false)\n }\n }, [])\n\n const closePopup = () => {\n setIsModalOpen(false)\n }\n\n return (\n \n
\n \n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n {\n setHoverDashboard(true)\n }}\n onMouseLeave={(e) => {\n setHoverDashboard(false)\n }}\n icon={\n {\n setState({\n selectDashboard: true,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n DASHBOARD\n \n \n\n {\n setHoverAccount(true)\n }}\n onMouseLeave={(e) => {\n setHoverAccount(false)\n }}\n icon={\n {\n setState({\n selectDashboard: false,\n selectAccount: true,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n ACCOUNT\n \n \n\n {\n setHoverWingnut(true)\n }}\n onMouseLeave={(e) => {\n setHoverWingnut(false)\n }}\n icon={\n {\n setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: true,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n WINGNUTS\n \n \n\n {\n setHoverProperty(true)\n }}\n onMouseLeave={(e) => {\n setHoverProperty(false)\n }}\n icon={\n {\n setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: true,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n PROPERTIES\n \n \n\n {/* ----------------------- ADMIN USER FEATURE */}\n {\n setHoverUsers(true)\n }}\n onMouseLeave={(e) => {\n setHoverUsers(false)\n }}\n icon={\n {\n setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: true,\n })\n }}\n >\n \n USERS\n \n \n\n setIsModalOpen(true)}\n onMouseEnter={(e) => {\n setHoverLogout(true)\n }}\n onMouseLeave={(e) => {\n setHoverLogout(false)\n }}\n icon={\n {\n setState({ selectDashboard: false, selectAccount: false, selectLogin: true })\n }}\n >\n \n LOG OUT\n \n \n \n \n \n \n\n {isCollapsed ? null : (\n \n \n Looking for help with your Wingnut ? \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n >\n \n CONTACT US\n \n \n \n \n \n Terms & Conditions \n \n & \n Privacy Policy \n \n \n Wingnut IoT Inc. \n \n )}\n \n \n \n
\n \n \n \n\n \n \n \n \n\n \n \n \n\n setExpanded(expanded ? false : \"expanded\")}\n aria-controls='responsive-navbar-nav'\n style={{ marginRight: 30, border: \"none\", boxShadow: \"none\" }}\n />\n \n\n \n \n \n setTimeout(() => {\n setExpanded(false)\n }, 150)\n }\n onMouseEnter={(e) => {\n setHoverDashboard(true)\n }}\n onMouseLeave={(e) => {\n setHoverDashboard(false)\n }}\n >\n {\n setState({\n selectDashboard: true,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n DASHBOARD\n \n \n \n\n \n setTimeout(() => {\n setExpanded(false)\n }, 150)\n }\n onMouseEnter={(e) => {\n setHoverAccount(true)\n }}\n onMouseLeave={(e) => {\n setHoverAccount(false)\n }}\n >\n {\n setState({\n selectDashboard: false,\n selectAccount: true,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n ACCOUNT\n \n \n \n\n \n setTimeout(() => {\n setExpanded(false)\n }, 150)\n }\n onMouseEnter={(e) => {\n setHoverWingnut(true)\n }}\n onMouseLeave={(e) => {\n setHoverWingnut(false)\n }}\n >\n {\n setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: false,\n selectWingnut: true,\n selectProperty: false,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n WINGNUTS\n \n \n \n\n \n setTimeout(() => {\n setExpanded(false)\n }, 150)\n }\n onMouseEnter={(e) => {\n setHoverProperty(true)\n }}\n onMouseLeave={(e) => {\n setHoverProperty(false)\n }}\n >\n {\n setState({\n selectDashboard: false,\n selectProperty: true,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: true,\n selectNotification: false,\n selectUsers: false,\n })\n }}\n >\n \n PROPERTY\n \n \n \n\n \n setTimeout(() => {\n setExpanded(false)\n }, 150)\n }\n onMouseEnter={(e) => {\n setHoverUsers(true)\n }}\n onMouseLeave={(e) => {\n setHoverUsers(false)\n }}\n >\n {\n setState({\n selectDashboard: false,\n selectProperty: true,\n selectLogin: false,\n selectWingnut: false,\n selectProperty: false,\n selectNotification: false,\n selectUsers: true,\n })\n }}\n >\n \n USERS\n \n \n \n\n {\n setHoverLogout(true)\n }}\n onMouseLeave={(e) => {\n setHoverLogout(false)\n }}\n style={{ cursor: \"pointer\" }}\n onClick={() => {\n setIsModalOpen(true)\n setState({\n selectDashboard: false,\n selectAccount: false,\n selectLogin: true,\n selectWingnut: false,\n selectProperty: false,\n })\n }}\n >\n \n LOG OUT\n \n \n\n\n \n Terms & Conditions \n \n\n & \n\n Privacy Policy \n \n \n Wingnut IoT Inc. \n \n \n \n \n
\n )\n}\n","export default __webpack_public_path__ + \"static/media/ic_help_green.5f117ead.svg\";","export default __webpack_public_path__ + \"static/media/ic_arrow_back.3fe1303c.svg\";","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport { API, Auth } from \"aws-amplify\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 240px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 21px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n align-self: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n /* margin-top: 73px; */\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n :hover {\n opacity: 1;\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n :hover {\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function RemoveWingnutPopup(props) {\n\n const [isHovering, setIsHovering] = useState(false)\n const [showSpinner, setShowSpinner] = useState(false)\n const [disabled, setDisabled] = useState(false)\n\n\n const removeWingnut = async () => {\n setShowSpinner(true)\n setDisabled(true)\n const payload = {}\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` }\n }\n try {\n const response = await API.del('FrontendAPI-wingnuts', `/${props.wingnutUUID}`, init)\n if (response.success) {\n setShowSpinner(false)\n setDisabled(false)\n props.setSuccess()\n }\n } catch (error) {\n setShowSpinner(false)\n setDisabled(false)\n props.closePopup()\n }\n }\n\n return (\n \n \n \n \n \n Remove Wingnut? \n Related Wingnut data will be lost. This can't be undone \n \n \n\n removeWingnut()}>\n YES \n {showSpinner && \n\n \n NO \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgCheckmark from \"./../../images/ic_check_circle.svg\"\nimport {useHistory} from 'react-router-dom';\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 240px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 58px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n /* border: 1px yellow dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n align-self: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n /* margin-top: 73px; */\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n align-self: center;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n /* margin-top: 28px; */\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function RemoveWingnutSuccessPopup(props) {\n const history = useHistory()\n const [isHovering, setIsHovering] = useState(false)\n\n const closeAction = () => {\n props.closePopup()\n history.push(\"/portal/wingnut\")\n }\n\n return (\n \n \n \n \n \n Wingnut successfully removed \n \n \n \n CLOSE \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgCheckmark from \"./../../images/ic_check_circle.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 250px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n padding-right: 0px;\n /* width: 100%; */\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst TopContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n`;\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 52px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n width: 300px;\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n align-self: center;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function ChangesSaved(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n \n \n Changes saved \n \n \n \n CONTINUE \n \n \n CLOSE \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 320px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 250px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n padding-right: 0px;\n /* width: 100%; */\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst TopContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n`;\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 32px;\n align-self: center;\n /* margin-top: 8px; */\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n width: 300px;\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n align-self: center;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n /* flex-wrap: wrap; */\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 180px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n :hover {\n background: ${COLORS.Secondary};\n opacity: 1.0;\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n`\n\nconst NoButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function LeavePagePopup(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n // not being called anymore but could change back\n const saveAllChanges = async () => {\n props.saveAll()\n if (props.alertArray && props.alertArray.length){\n props.closePopup()\n } else {\n props.setSuccess()\n }\n }\n\n const LeavePage = () => {\n props.discardChanges()\n props.goToNextTab()\n\n }\n\n return (\n \n \n \n \n \n Abandon Changes? \n All unsaved changes will be lost \n \n \n \n ABANDON CHANGES \n \n \n BACK TO CONFIGURATION \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n align-self: center;\n height: 100%;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n padding-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 32px;\n align-self: center;\n /* margin-top: 8px; */\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n width: 300px;\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n align-self: center;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 73px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n :hover {\n opacity: 0.8;\n }\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n :hover {\n background: ${COLORS.Secondary};\n opacity: 1.0;\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function SaveConfigPopup(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n const saveAll = () => {\n\n props.saveAll()\n \n if (props.alertArray && props.alertArray.length){\n props.setError()\n } else {\n setTimeout(() => {\n props.closePopup()\n }, 500)\n }\n }\n\n return (\n \n \n \n \n Save configuration? \n Your changes will be saved \n\n \n \n YES \n {props.showSpinner && \n \n NO \n \n \n\n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 300px;\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n align-self: center;\n height: 100%;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n padding-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 32px;\n align-self: center;\n /* margin-top: 8px; */\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n width: 300px;\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n align-self: center;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 73px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n :hover {\n opacity: 0.8;\n }\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnDiscard = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n :hover {\n background: ${COLORS.Secondary};\n opacity: 1.0;\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function SaveOrAbandonPopup(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n const saveAll = () => {\n\n props.saveAll()\n \n if (props.alertArray && props.alertArray.length){\n props.setError()\n } else {\n setTimeout(() => {\n props.closePopup()\n }, 500)\n }\n }\n\n const discardAll = () => {\n props.discardAll()\n props.closePopup()\n }\n\n return (\n \n \n \n \n Save or Discard Configuration? \n {/* Your changes will be saved */}\n\n \n \n SAVE \n {props.showSpinner && \n \n DISCARD \n \n \n\n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n align-self: center;\n height: 100%;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n padding-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 32px;\n align-self: center;\n /* margin-top: 8px; */\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n /* width: 300px; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n align-self: center;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 73px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function SaveConfigErrorPopup(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n \n Incomplete Configuration \n All fields must be selected for active sensor configurations \n \n \n OK \n \n\n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n align-self: center;\n height: 100%;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n padding-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 32px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n width: 300px;\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n align-self: center;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 73px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function DiscardChangesPopup(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n const discardAll = () => {\n props.discardAll()\n\n setTimeout(() => {\n props.closePopup()\n }, 500)\n }\n\n return (\n \n \n \n \n Discard changes? \n Your changes will be discarded \n \n \n YES \n {props.showSpinner && \n \n NO \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 250px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n padding-right: 0px;\n /* width: 100%; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* padding-right: 17px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst TopContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n`;\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 41px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n /* margin-top: 62px; */\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n width: 150px;\n :hover {\n opacity: 1.0;\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n :hover {\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function DeletePropertyPopup(props) {\n\n const [disabled, setDisabled] = useState(false)\n const [showSpinner, setShowSpinner] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n const removeProperty = async () => {\n const payload = {}\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` }\n }\n\n setDisabled(true)\n setShowSpinner(true)\n\n try {\n const response = await API.del('FrontendAPI-properties', `/${props.propertyUUID}`, init)\n if (response.success) {\n props.setSuccess()\n setDisabled(false)\n setShowSpinner(false)\n }\n } catch (error) {\n setDisabled(false)\n setShowSpinner(false)\n props.closePopup()\n }\n }\n\n return (\n \n \n \n \n \n Remove Property? \n Related Property data will be lost. This cannot be undone \n \n \n\n removeProperty()} disabled={disabled} type='submit'>\n YES \n {showSpinner && \n\n {/* removeProperty()}>\n YES \n */}\n\n \n NO \n \n\n \n \n \n )\n}\n","import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgCheckmark from \"./../../images/ic_check_circle.svg\"\nimport {useHistory} from 'react-router-dom';\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 250px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 58px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n /* border: 1px yellow dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst BottomContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n align-self: center;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function DeletePropertySuccessPopup(props) {\n const history = useHistory()\n const [isHovering, setIsHovering] = useState(false)\n\n const closeAction = () => {\n props.closePopup()\n history.push(\"/portal/property\")\n }\n\n return (\n \n \n \n \n \n Property successfully removed \n \n \n \n CLOSE \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n padding-bottom: 50px;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 240px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n padding-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 41px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n width: 150px;\n :hover {\n opacity: 1;\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function UnlinkPropertyPopup(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n const removeProperty = async () => {\n const payload = {}\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: { propertyId: \"\" }\n }\n const response = await API.post('FrontendAPI-wingnuts', `/${props.wingnutUUID}/link`, init)\n if (response.success) {\n props.setSuccess()\n }\n }\n\n return (\n \n \n \n \n \n Unlink Property? \n Related Property data will be lost. This cannot be undone \n \n \n removeProperty()}>\n YES \n \n \n NO \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgCheckmark from \"./../../images/ic_check_circle.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n height: 340px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n height: 240px;\n justify-content: space-between;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 50px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n /* border: 1px yellow dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n`\n\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n align-self: center;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function UnlinkPropertySuccessPopup(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n \n \n Property successfully removed \n \n \n CLOSE \n \n \n \n )\n}\n","import React, { useState } from \"react\"\nimport RemoveWingnutPopup from \"./../popup/RemoveWingnutPopup\"\nimport RemoveWingnutPopupSuccess from \"./../popup/RemoveWingnutSuccessPopup\"\nimport LeaveChangesSavedPopup from \"./../popup/LeaveChangesSavedPopup\"\nimport LeavePagePopup from \"./../popup/LeavePagePopup\"\nimport SaveConfigPopup from \"./../popup/SaveConfigPopup\"\nimport SaveOrAbandonPopup from \"./../popup/SaveOrAbandonPopup\"\nimport SaveConfigErrorPopup from \"./../popup/SaveConfigErrorPopup\"\nimport DiscardConfigPopup from \"./../popup/DiscardConfigPopup\"\nimport DeletePropertyPopup from \"./DeletePropertyPopup\"\nimport DeletePropertySuccessPopup from \"./DeletePropertyPopupSuccess\"\nimport UnlinkPropertyPopup from \"./UnlinkPropertyPopup\"\nimport UnlinkPropertySuccessPopup from \"./UnlinkPropertySuccessPopup\"\n\nexport default function PopupContainer(props) {\n const [isSuccess, setIsSuccess] = useState(false)\n const [isError, setIsError] = useState(false)\n\n const setSuccess = () => {\n setIsSuccess(true)\n }\n\n const setError = () => {\n setIsError(true)\n }\n\n switch (props.popupNumber) {\n case 0:\n return isSuccess ? (\n \n )\n case 4:\n return isError ? (\n \n ) : (\n \n )\n case 5:\n return (\n \n )\n case 6:\n return (\n \n )\n case 7:\n return isError ? (\n \n ) : (\n \n Invite new user \n \n Please enter a valid email address of the user you would like to invite\n \n \n \n handleChange(\"admin\")}\n type='checkbox' />\n \n Admin \n \n \n \n handleChange(\"write\")}\n type='checkbox' />\n \n Editor \n \n \n \n handleChange(\"read\")}\n type='checkbox' />\n \n Viewer \n \n \n \n\n\n \n \n\n )\n}\n\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 466px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n /* justify-content: center; */\n width: auto;\n height: 100%;\n margin-left: 10px;\n margin-right: 10px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n /* padding: 10px; */\n /* width: 350px; */\n /* width: auto; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* padding-right: 17px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n /* width: 16px; */\n /* height: 16px; */\n /* margin-bottom: 17px; */\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst Checkbox = styled.input`\n border: 1px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 3px;\n margin-right: 10px;\n width: 20px;\n height: 20px;\n background: transparent;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 50px;\n gap: 10px;\n ${media.lessThan(\"743px\")`\n flex-direction: column-reverse;\n gap: 5px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 237px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonTextNo = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst ButtonTextYes = styled(ButtonTextNo)`\n color: ${COLORS.Base};\n`\n\nconst StackColumn = styled.div`\n /* border: 1px yellow dashed; */\n display: flex; \n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n align-self: center;\n gap: 0;\n `;\n\nconst StackRow = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n`;\n\nconst Stack = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n gap: 45px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n gap: 16px;\n align-items: start;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n /* width: 500px; */\n display: flex;\n flex-direction: column;\n margin-top: 63px;\n /* margin-right: 83px; */\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-right: 0px;\n margin-top: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 384px; */\n `}\n`\n\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 384px;\n /* max-width: 378px; */\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: 400;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n align-self: center;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 100%; */\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StyledBodySmall = styled(BodySmall)`\n ${media.lessThan(\"743px\")`\n /* width: 330px; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n","import React, { Link, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { useForm } from \"react-hook-form\"\nimport Image3 from \"./../../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../../images/ic_close.svg\"\nimport ImgCheck from \"./../../../images/ic_check_circle.svg\"\nimport ImgError from \"./../../../images/ic_error.svg\"\nimport ImgAccount from \"./../../../images/ic_account_white.svg\"\nimport ImgVerified from \"./../../../images/ic_verified.svg\"\nimport ImgViewer from \"./../../../images/ic_viewer.svg\"\nimport ImgProperty from \"./../../../images/ic_property.svg\"\nimport { COLORS } from \"../../../styles/colors\"\nimport { BodySmall, FieldText, H1, H2, H3 } from \"../../../styles/fonts\"\nimport { API, Auth } from \"aws-amplify\"\n\n\n\nexport default function InviteSentSuccess(props) {\n\n const [isHoveringYes, setIsHoveringYes] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n const handleChange = (role) => {\n // setSelectedRole(role); \n };\n\n return (\n \n\n {/* -----------------------------Invite Sent Successfully */}\n \n \n Your invite has been successfully sent\n \n \n \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={props.closePopup}\n style={{ backgroundColor: isHovering == true ? COLORS.Secondary : \"transparent\", width: '205px' }}\n >\n CLOSE \n \n\n\n {/* {\n setIsHoveringYes(true)\n }}\n onMouseLeave={(e) => {\n setIsHoveringYes(false)\n }}\n style={{ opacity: isHoveringYes == true ? \"80%\" : \"100%\", width: '205px' }}\n >\n ADD NEW USER \n */}\n\n \n \n \n\n \n\n )\n}\n\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 466px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n /* justify-content: center; */\n width: auto;\n height: 100%;\n margin-left: 10px;\n margin-right: 10px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n /* padding: 10px; */\n /* width: 350px; */\n /* width: auto; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* padding-right: 17px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n /* width: 16px; */\n /* height: 16px; */\n /* margin-bottom: 17px; */\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst Checkbox = styled.input`\n border: 1px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 3px;\n margin-right: 10px;\n width: 20px;\n height: 20px;\n background: transparent;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 50px;\n gap: 10px;\n ${media.lessThan(\"743px\")`\n flex-direction: column-reverse;\n gap: 5px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 237px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonTextNo = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst ButtonTextYes = styled(ButtonTextNo)`\n color: ${COLORS.Base};\n`\n\nconst StackColumn = styled.div`\n /* border: 1px yellow dashed; */\n display: flex; \n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n align-self: center;\n gap: 0;\n `;\n\nconst StackRow = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n`;\n\nconst Stack = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n gap: 45px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n gap: 16px;\n align-items: start;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n /* width: 500px; */\n display: flex;\n flex-direction: column;\n margin-top: 63px;\n /* margin-right: 83px; */\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-right: 0px;\n margin-top: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 384px; */\n `}\n`\n\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 384px;\n /* max-width: 378px; */\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: 400;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n align-self: center;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 100%; */\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StyledBodySmall = styled(BodySmall)`\n ${media.lessThan(\"743px\")`\n /* width: 330px; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;","import React, { Link, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { useForm } from \"react-hook-form\"\nimport Image3 from \"./../../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../../images/ic_close.svg\"\nimport ImgCheck from \"./../../../images/ic_check_circle.svg\"\nimport ImgError from \"./../../../images/ic_error.svg\"\nimport ImgAccount from \"./../../../images/ic_account_white.svg\"\nimport ImgVerified from \"./../../../images/ic_verified.svg\"\nimport ImgViewer from \"./../../../images/ic_viewer.svg\"\nimport ImgProperty from \"./../../../images/ic_property.svg\"\nimport { COLORS } from \"../../../styles/colors\"\nimport { BodySmall, FieldText, H1, H2, H3 } from \"../../../styles/fonts\"\nimport { API, Auth } from \"aws-amplify\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 466px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n /* justify-content: center; */\n width: auto;\n height: 100%;\n margin-left: 10px;\n margin-right: 10px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n /* padding: 10px; */\n /* width: 350px; */\n /* width: auto; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* padding-right: 17px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n /* width: 16px; */\n /* height: 16px; */\n /* margin-bottom: 17px; */\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst Checkbox = styled.input`\n border: 1px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 3px;\n margin-right: 10px;\n width: 20px;\n height: 20px;\n background: transparent;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 50px;\n gap: 10px;\n ${media.lessThan(\"743px\")`\n flex-direction: column-reverse;\n gap: 5px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 237px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonTextNo = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst ButtonTextYes = styled(ButtonTextNo)`\n color: ${COLORS.Base};\n`\n\nconst StackColumn = styled.div`\n /* border: 1px yellow dashed; */\n display: flex; \n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n align-self: center;\n gap: 0;\n `;\n\nconst StackRow = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n`;\n\nconst Stack = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n gap: 45px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n gap: 16px;\n align-items: start;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n /* width: 500px; */\n display: flex;\n flex-direction: column;\n margin-top: 63px;\n /* margin-right: 83px; */\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-right: 0px;\n margin-top: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 384px; */\n `}\n`\n\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 384px;\n /* max-width: 378px; */\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: 400;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n align-self: center;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 100%; */\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StyledBodySmall = styled(BodySmall)`\n ${media.lessThan(\"743px\")`\n /* width: 330px; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nexport default function ChangePlan(props) {\n\n const [isHovering, setIsHovering] = useState(false)\n const [isHoveringYes, setIsHoveringYes] = useState(false)\n\n return (\n \n\n {/* -----------------------------Change Plan */}\n \n \n You don’t have any more seats available on your plan\n \n Please upgrade your plan to add more users \n \n \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={props.closePopup}\n style={{ backgroundColor: isHovering == true ? COLORS.Secondary : \"transparent\", width: '205px' }}\n >\n CLOSE \n \n\n {/* {\n setIsHoveringYes(true)\n }}\n onMouseLeave={(e) => {\n setIsHoveringYes(false)\n }}\n style={{ opacity: isHoveringYes == true ? \"80%\" : \"100%\", width: '205px' }}\n >\n CHANGE MY PLAN \n */}\n\n \n \n\n \n\n )\n}\n","import React, { useState, useEffect, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgClose from \"./../../../images/ic_close.svg\"\nimport { COLORS } from \"../../../styles/colors\"\nimport InviteNewUser from './InviteNewUser'\nimport InviteSentSuccess from './InviteSentSuccess'\nimport ChangePlan from './ChangePlan'\nimport { API, Auth } from \"aws-amplify\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 476px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n /* justify-content: center; */\n width: auto;\n height: 100%;\n margin-left: 10px;\n margin-right: 10px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nexport default function InviteUserRouter(props) {\n\n const [inviteFlow, setInviteFlow] = useState()\n const [firstLoad, setFirstLoad] = useState(false)\n\n useEffect(() => {\n if(firstLoad == false){\n getCompanySeats()\n setFirstLoad(true)\n }\n }, [])\n\n const getCompanySeats = async (data) => {\n \n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` }\n }\n \n API.get('FrontendAPI-companies', '/details', init)\n .then((response) => {\n if (response.success) {\n if(response.data && response.data.config && response.data.config.seats){\n if(props.seatsUsed >= response.data.config.seats){\n setInviteFlow(2)\n } else {\n setInviteFlow(0)\n }\n }\n }\n })\n .catch((err) => {\n console.error(err)\n })\n }\n\n const inviteSuccess = () => {\n setInviteFlow(1)\n }\n\n const changePlan = () => {\n setInviteFlow(2)\n }\n\n const backToInvite = () => {\n setInviteFlow(0)\n }\n\n\n return (\n \n \n \n\n {/* -----------------------------Change User & Enter Email */}\n\n {(() => {\n switch (inviteFlow) {\n case 0:\n return \n case 1:\n return ;\n case 2:\n return \n default:\n return null;\n }\n })()}\n \n \n\n )\n}\n","import React, { useState, useEffect, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport { Link, useHistory, useLocation } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport MediaQuery from \"react-responsive\"\nimport Image from \"./../../images/ic_help_green.svg\"\nimport ImgArrowBack from \"./../../images/ic_arrow_back.svg\"\nimport Modal from \"react-modal\"\nimport PopupContainer from \"./../popup/PopupContainer\"\nimport { AccountContext } from \"../../auth/Account\"\nimport { COLORS } from \"../../styles/colors\"\nimport { cleanUUIDFromPath, getUUIDFromPath } from \"../util/CleanUUID\"\nimport InviteUserRouter from \"../users/new_user_modal/InviteUserRouter\"\n\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: COLORS.Primary,\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n}\n\nexport default function Header(props) {\n const history = useHistory()\n var location = useLocation()\n\n const [isHovering, setIsHovering] = useState(false)\n const [isHoveringBack, setIsHoveringBack] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n const [isInviteModalOpen, setIsInviteModalOpen] = useState(false)\n\n const { getSession } = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n const [state, setState] = useState({\n itemUUID: \"\",\n heading: \"Dashboard\",\n modal: false,\n date: \"\",\n showBack: true,\n showButton: true,\n buttonText: \"SUBMIT\",\n buttonIcon: false,\n buttonDestination: \"\",\n popupNumber: null,\n buttonTransparent: false\n })\n\n // So dev can manually pull token from UI\n const getToken = async () => {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n\n if(process.env.REACT_APP_API_DOMAIN !== \"prod\"){\n console.log(\"TOKEN\", jwt)\n }\n }\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n useEffect(() => {\n var pathUUID = getUUIDFromPath(location.pathname);\n var pathname = cleanUUIDFromPath(location.pathname);\n\n switch (pathname) {\n case \"help\":\n return setState({ heading: \"Help\", showBack: true, showButton: false, popupNumber: null })\n case `dashboard/${pathUUID}`:\n getCompany()\n return\n case \"account\":\n return setState({\n heading: \"Account Settings\",\n showBack: false,\n showButton: true,\n buttonText: \"HELP\",\n buttonIcon: true,\n buttonDestination: \"/portal/help\",\n popupNumber: null,\n buttonTransparent: true,\n })\n case \"wingnut\":\n return setState({\n heading: \"Wingnuts Overview\",\n showBack: false,\n showButton: isAuth ? true : false,\n buttonText: \"ADD WINGNUT\",\n buttonIcon: false,\n buttonDestination: \"/portal/wingnut/add\",\n popupNumber: null,\n buttonTransparent: false,\n })\n case \"wingnut/detail\":\n getWingnutId()\n return\n case \"wingnut/add\":\n return setState({ heading: \"Add Wingnut\", showBack: true, showButton: false, popupNumber: null })\n case \"wingnut/link\":\n return setState({ heading: \"Link Wingnut\", showBack: true, showButton: false, popupNumber: null })\n case \"property\":\n return setState({\n heading: \"Properties Overview\",\n showBack: false,\n showButton: isAuth ? true : false,\n buttonText: \"ADD PROPERTY\",\n buttonIcon: false,\n buttonDestination: \"/portal/property/add\",\n popupNumber: null,\n buttonTransparent: false,\n })\n case \"property/add\":\n return setState({ heading: \"Add Property\", showBack: true, showButton: false, popupNumber: null })\n case \"property/link\":\n return setState({ heading: \"Link Wingnut\", showBack: true, showButton: false, popupNumber: null })\n case \"property/detail\":\n getPropertyName()\n return\n case \"notification\":\n return setState({ heading: \"Notifications\", showBack: false, showButton: false, popupNumber: null })\n case \"notification/edit\":\n return setState({ heading: \"Notifications\", showBack: true, showButton: false, popupNumber: null })\n case \"users\":\n return setState({\n heading: \"Users\",\n showBack: true,\n showButton: false,\n popupNumber: null\n })\n }\n }, [location])\n\n\n\n const getCompany = async (pathURL) => {\n // time should be in the URL as 1683255098000\n const { company } = await getSession()\n\n var path = \"\"\n var date = \"\"\n\n if(pathURL !== undefined){\n path = pathURL.substring(8).split(\"/\")\n } else {\n path = location.pathname.substring(8).split(\"/\")\n }\n\n const selection = path[path.length - 1]\n\n if(selection.length > 11){\n date = getDashboardDate(selection)\n } else {\n date = getDashboardDate()\n }\n\n setState({\n heading: `${company}`,\n date: `${date}`,\n showBack: false,\n showButton: true,\n buttonText: \"HELP\",\n buttonIcon: true,\n buttonDestination: \"/portal/help\",\n popupNumber: null,\n buttonTransparent: true,\n })\n }\n\n const getDashboardDate = (time) => {\n var date = null\n var formattedDate = ''\n\n if(time !== undefined && !isNaN(time)){\n date = new Date(Number(time));\n\n const monthAndYear = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }).toUpperCase();\n formattedDate = `${monthAndYear}`; // Output: \"MARCH 2023\"\n\n } else {\n date = new Date(); \n const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();\n const monthAndDay = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric' }).toUpperCase();\n \n // Get the day suffix (e.g. \"th\")\n const daySuffix = (() => {\n const dayOfMonth = date.getDate();\n if (dayOfMonth >= 11 && dayOfMonth <= 13) {\n return 'th';\n }\n switch (dayOfMonth % 10) {\n case 1: return 'st';\n case 2: return 'nd';\n case 3: return 'rd';\n default: return 'th';\n }\n })();\n \n formattedDate = `${dayOfWeek}, ${monthAndDay}${daySuffix}`; // Output: \"THURSDAY, MARCH 24th\"\n }\n \n return formattedDate\n }\n\n const getPropertyName = async () => {\n setState({\n itemUUID: \"\",\n heading: \"\",\n date: \"\",\n showBack: false,\n showButton: false,\n buttonText: \"\",\n buttonIcon: false,\n buttonDestination: false,\n popupNumber: null,\n buttonTransparent: false,\n })\n\n var path = location.pathname.substring(8).split(\"/\")\n const uuid = path[path.length - 1]\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n \n const response = await API.get('FrontendAPI-properties', `/${uuid}`, init)\n if (response.success) {\n\n setState({\n itemUUID: uuid,\n heading: response.data.config.name,\n date: \"\",\n showBack: false,\n showButton: isAuth ? true : false,\n buttonText: \"PROPERTY DASHBOARD\",\n buttonIcon: false,\n buttonDestination: `/portal/dashboard/${response.data.id}`,\n popupNumber: null,\n buttonTransparent: false\n })\n }\n }\n\n const getWingnutId = async () => {\n setState({\n itemUUID: \"\",\n heading: \"\",\n date: \"\",\n showBack: false,\n showButton: false,\n buttonText: \"\",\n buttonIcon: false,\n buttonDestination: false,\n popupNumber: null,\n buttonTransparent: false,\n })\n\n var path = location.pathname.substring(8).split(\"/\")\n const uuid = path[path.length - 1]\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n \n const response = await API.get('FrontendAPI-wingnuts', `/${uuid}`, init)\n if (response.success) {\n setState({\n itemUUID: uuid,\n heading: `Wingnut ${response.data.externalId}`,\n date: \"\",\n showBack: true,\n showButton: isAuth ? true : false,\n buttonText: \"REMOVE WINGNUT\",\n buttonIcon: false,\n buttonDestination: `/portal/wingnut/detail/${uuid}`,\n popupNumber: 0,\n buttonTransparent: true,\n })\n }\n \n }\n\n const closePopup = () => {\n setIsOpen(false)\n }\n\n return (\n \n
\n \n\n
\n \n \n {state.showBack ? \n {\n setIsHoveringBack(true)\n }}\n onMouseLeave={(e) => {\n setIsHoveringBack(false)\n }}\n onClick={history.goBack} >\n \n Back\n \n \n : \n null}\n\n \n {state.heading} \n {\n state.date && state.date.length !== 0 \n ? {state.date} \n \n\n {process.env.REACT_APP_API_NAME} \n \n\n \n {state.showButton ? (\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={(e) => {\n setIsHovering(false)\n if (state.popupNumber != null) {\n setIsOpen(true)\n }\n }}\n >\n {state.buttonIcon ? \n {state.buttonText}\n \n \n :\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={(e) => {\n setIsHovering(false)\n if (state.popupNumber != null) {\n setIsOpen(true)\n } else if(state.modal){\n setIsInviteModalOpen(true)\n }\n }}>\n {state.buttonIcon ? \n {state.buttonText}\n \n }\n \n ) : null}\n \n\n \n {state.showButton ? (\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={(e) => {\n setIsHovering(false)\n if (state.popupNumber != null) {\n setIsOpen(true)\n }\n }}\n >\n {state.buttonIcon ? \n {state.buttonText}\n \n \n :\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={(e) => {\n setIsHovering(false)\n if (state.popupNumber != null) {\n setIsOpen(true)\n } else if(state.modal){\n setIsInviteModalOpen(true)\n }\n }}\n >\n {state.buttonIcon ? \n {state.buttonText}\n \n \n }\n \n ) : null}\n \n\n \n \n
\n \n \n )\n}\n\n// https://codesandbox.io/s/showhide-password-on-toggle-in-react-hooks-95qcz?file=/src/App.js:1079-1084\n// https://dev.to/detoner777/show-hide-password-on-toggle-in-react-hooks-1lph\n","import React, { useState, useContext, useEffect } from \"react\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { CognitoUserAttribute } from \"amazon-cognito-identity-js\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/ic_alert.svg\"\nimport Image2 from \"./../../images/eye.svg\"\nimport Image3 from \"./../../images/ic_success.svg\"\nimport ImageBlueEye from \"./../../images/eye_blue.svg\"\nimport { ButtonSpinner } from \"./../custom/Spinner\"\nimport { EmailValidatorStrings, ServerStrings } from \"./../util/VaildatorStrings\"\nimport {\n ErrorContainer,\n Icon,\n Error,\n EmptyError,\n SuccessContainer,\n SuccessIcon,\n SuccessIcon2,\n Success,\n EmptySuccess,\n} from \"./../custom/ValidatorStyles\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n width: auto;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n /* width: 500px; */\n display: flex;\n flex-direction: column;\n margin-top: 41px;\n /* margin-right: 83px; */\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-right: 0px;\n margin-top: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 384px; */\n `}\n`\n\nconst InputContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n width: 100%;\n`\n\nconst EyeIcon = styled.img`\n /* border: 1px red dashed; */\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -50px;\n /* margin-top: 46px;\n margin-bottom: 8px; */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderText = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n max-width: 378px;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: 400;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 133px;\n height: 40px;\n border: 1px solid #63c085;\n background: transparent;\n border-radius: 30px;\n color: ${COLORS.White};\n cursor: pointer;\n text-align: center;\n transition-duration: 0.5s;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-bottom: 18px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function ChangeEmailForm() {\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const { getSession, authenticateChangeEmail } = useContext(AccountContext)\n const [success, setSuccess] = useState(false)\n const [showSpinner, setShowSpinner] = useState(false)\n const [passwordShown, setPasswordShown] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [serverError, setServerError] = useState(null)\n const [isHovering, setIsHovering] = useState(false)\n\n const togglePasswordVisiblity = () => {\n setPasswordShown(passwordShown ? false : true)\n }\n\n const onSubmit = async (data) => {\n setServerError(null)\n setDisabled(true)\n setSuccess(false)\n setShowSpinner(true)\n\n getSession().then(({ user, email }) => {\n authenticateChangeEmail(email, data.password)\n .then(() => {\n const attributes = [new CognitoUserAttribute({ Name: \"email\", Value: data.newEmail })]\n\n user.updateAttributes(attributes, (err, results) => {\n if (err) {\n console.log(\"Error\", err)\n setServerError(ServerStrings(err.name))\n setShowSpinner(false)\n setSuccess(false)\n setDisabled(false)\n } else {\n reset({ email: \"\", newEmail: \"\", password: \"\" })\n setServerError(null)\n setSuccess(true)\n setShowSpinner(false)\n setDisabled(false)\n }\n })\n })\n .catch((err) => {\n setServerError(ServerStrings(err.name))\n setShowSpinner(false)\n setSuccess(false)\n setDisabled(false)\n })\n })\n }\n\n useEffect(() => {\n if (success) {\n const timer = setTimeout(() => {\n setSuccess(false)\n }, 2000)\n return () => clearTimeout(timer)\n }\n }, [success])\n\n return (\n \n \n \n )\n}\n\n// https://codesandbox.io/s/showhide-password-on-toggle-in-react-hooks-95qcz?file=/src/App.js:1079-1084\n// https://dev.to/detoner777/show-hide-password-on-toggle-in-react-hooks-1lph\n","import React, { useState, useContext, useEffect } from \"react\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/ic_alert.svg\"\nimport Image2 from \"./../../images/eye.svg\"\nimport Image3 from \"./../../images/ic_success.svg\"\nimport ImageBlueEye from \"./../../images/eye_blue.svg\"\nimport { ButtonSpinner } from \"./../custom/Spinner\"\nimport { ValidatorStrings, ServerStrings } from \"./../util/VaildatorStrings\"\nimport {\n ErrorContainer,\n Icon,\n Error,\n EmptyError,\n SuccessContainer,\n SuccessIcon,\n SuccessIcon2,\n Success,\n EmptySuccess,\n} from \"./../custom/ValidatorStyles\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n width: auto;\n margin-bottom: 30px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n\n `}\n`\n\nconst InputContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n width: 100%;\n`\n\nconst EyeIcon = styled.img`\n /* border: 1px red dashed; */\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -50px;\n /* margin-top: 46px;\n margin-bottom: 8px; */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n /* width: 500px; */\n display: flex;\n margin-top: 20px;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n flex-direction: column;\n margin-top: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 49px;\n /* width: 384px; */\n `}\n`\n\nconst HeaderText = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n /* margin-top: 6px; */\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n max-width: 378px;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: 400;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 133px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: transparent;\n color: ${COLORS.White};\n cursor: pointer;\n text-align: center;\n transition-duration: 0.5s;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-bottom: 18px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n :hover {\n }\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function ChangePassword() {\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const { getSession } = useContext(AccountContext)\n const [showSpinner, setShowSpinner] = useState(false)\n const [currentPasswordShown, setCurrentPasswordShown] = useState(false)\n const [newPasswordShown, setNewPasswordShown] = useState(false)\n const [confirmPasswordShown, setConfirmPasswordShown] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [validatorError, setValidatorError] = useState(null)\n const [success, setSuccess] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n const toggleCurrentPasswordVisiblity = () => {\n setCurrentPasswordShown(currentPasswordShown ? false : true)\n }\n\n const toggleNewPasswordVisiblity = () => {\n setNewPasswordShown(newPasswordShown ? false : true)\n }\n\n const toggleConfirmPasswordVisiblity = () => {\n setConfirmPasswordShown(confirmPasswordShown ? false : true)\n }\n\n const onSubmit = async (data) => {\n setShowSpinner(true)\n setValidatorError(null)\n setSuccess(false)\n setDisabled(true)\n\n getSession().then(({ user }) => {\n user.changePassword(data.currentPassword, data.newPassword, (err, result) => {\n if (err) {\n console.error(err)\n setValidatorError(ServerStrings(err.name))\n setShowSpinner(false)\n setSuccess(false)\n setDisabled(false)\n } else {\n reset({ currentPassword: \"\", newPassword: \"\", confirmPassword: \"\" })\n setValidatorError(null)\n setSuccess(true)\n setShowSpinner(false)\n setDisabled(false)\n }\n })\n })\n }\n\n useEffect(() => {\n if (success) {\n const timer = setTimeout(() => {\n setSuccess(false)\n }, 2000)\n return () => clearTimeout(timer)\n }\n }, [success])\n\n return (\n \n \n \n )\n}\n\n// https://codesandbox.io/s/showhide-password-on-toggle-in-react-hooks-95qcz?file=/src/App.js:1079-1084\n// https://dev.to/detoner777/show-hide-password-on-toggle-in-react-hooks-1lph\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { AccountContext } from \"../../auth/Account\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport AccountDetailsForm from \"../form/AccountDetailsForm\"\nimport ChangeEmailForm from \"../form/ChangeEmailForm\"\nimport ChangePassword from \"../form/ChangePassword\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: flex-start\n margin-bottom: 50px;\n margin-top: -7px;\n padding: 20px;\n background-color: #0e1c36;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: 100%;\n align-self: center;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n `}\n`\n\nconst FormContainer = styled.div`\n /* border: 1px yellow dashed; */\n width: 40%;\n min-width: 379px;\n display: flex;\n flex-direction: column;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n min-width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n width: 100%;\n `}\n`\n\n\nexport default function EditAccount() {\n const { getSession } = useContext(AccountContext)\n\n const [state, setState] = useState({\n email: \"\",\n firstName: \"\",\n lastName: \"\",\n phoneNumber: \"\",\n formattedNumber: \"\",\n })\n\n useEffect(() => {\n updateForm()\n }, [])\n\n const updateForm = () => {\n getSession().then(({ email, given_name, family_name, phone_number }) => {\n // Format the phone number for the update account screen\n const trimNumber = phone_number.slice(2)\n const formattedNumber = `(${trimNumber.substring(0, 3)}) ${trimNumber.substring(3, 6)} ${trimNumber.substring(6,10)}`\n\n setState({\n email: email,\n firstName: given_name,\n lastName: family_name,\n phoneNumber: phone_number,\n formattedNumber: formattedNumber,\n })\n })\n }\n\n return (\n \n \n \n \n \n \n )\n}\n","\n\nconst NotificationDefaults = [\n {\n key: \"outdoorTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null\n },\n {\n key: \"mechanicalRoomTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 115, \n min: \"50 °F\", \n max: \"115 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n },\n {\n key: \"mechanicalRoomCombustionAirTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n },\n {\n key: \"boilerSupplyHeaderTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 130, \n maxValue: 200, \n min: \"130 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n },\n {\n key: \"boilerReturnHeaderTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\",\n userMinValue: null,\n userMaxValue: null, \n unit: \"°F\" \n },\n {\n key: \"boilerExhaustTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 400, \n min: \"50 °F\", \n max: \"400 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"boilerInletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"boilerOutletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 130, \n maxValue: 200, \n min: \"130 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"hotWaterTankSupplyHeaderTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 80, \n maxValue: 160, \n min: \"80 °F\", \n max: \"160 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"hotWaterTankReturnHeaderTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"hotWaterTankExhaustTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 400, \n min: \"50 °F\", \n max: \"400 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"hotWaterTankInletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"hotWaterTankOutletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 80, \n maxValue: 160, \n min: \"80 °F\", \n max: \"160 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"indirectTankInletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 130, \n maxValue: 200, \n min: \"130°F\", \n max: \"200°F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"indirectTankOutletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 100, \n maxValue: 200, \n min: \"100 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"roomTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 115, \n min: \"50 °F\", \n max: \"115 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"supplyLineTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 130, \n maxValue: 200, \n min: \"130 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"returnLineTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"storageTankInletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"storageTankOutletTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"bypassLineTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"heatingCoilLineTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"sideStreamFilterTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"makeUpWaterTemperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 50, \n maxValue: 200, \n min: \"50 °F\", \n max: \"200 °F\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"°F\" \n }, \n {\n key: \"temperature\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"systemPumpCurrent\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0 A\", \n max: \"999 A\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"Amps\" \n }, \n {\n key: \"boilerPumpCurrent\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0 A\", \n max: \"999 A\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"Amps\" \n }, \n {\n key: \"recirculationPumpCurrent\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0 A\", \n max: \"999 A\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"Amps\" \n }, \n {\n key: \"indirectTankPumpCurrent\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0 A\", \n max: \"999 A\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"Amps\" \n }, \n {\n key: \"storageTankPumpCurrent\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0 A\", \n max: \"999 A\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"Amps\" \n }, \n {\n key: \"current\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"boilerSystemPressure\",\n label: \"\",\n thresholdStatus: null,\n minValue: 10, \n maxValue: 80, \n min: \"10 PSI\", \n max: \"80 PSI\", \n userMinValue: null,\n userMaxValue: null,\n unit: \"PSI\" \n }, \n {\n key: \"door\", \n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"window\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"occupancy\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"leak\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"onOff\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"systemAquastatState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"boilerAquastatState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"hotWaterTankAquastatState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"boilerLowLimitState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"hotWaterTankHighLimitState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"hotWaterTankLowLimitState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"?\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"boilerControlRelayState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"hotWaterTankControlRelayState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"systemPumpcontrolRelayState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"boilerPumpControlRelayState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\",\n userMinValue: null,\n userMaxValue: null, \n unit: null \n }, \n {\n key: \"recirculationPumpControlRelayState\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }, \n {\n key: \"state\",\n label: \"\",\n thresholdStatus: null,\n minValue: 0, \n maxValue: 999, \n min: \"0\",\n max: \"999\", \n userMinValue: null,\n userMaxValue: null,\n unit: null \n }\n ]\n\n export default NotificationDefaults","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport NotificationDefaults from './NotificationDefaults'\nimport Modal from \"react-modal\"\nimport PopupContainer from \"../popup/PopupContainer\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nexport default function NotificationSaveDiscard(props) {\n\n const [didConfigChange, setDidConfigChange] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n const [popupNumber, setPopupNumber] = useState(4)\n const [wingnutDetails, setWingnutDetails] = useState()\n // const [refresh, setRefresh] = useState(false)\n const [showSpinner, setShowSpinner] = useState(false)\n const [saveDisabled, setSaveDisabled] = useState(false)\n const [errorArray, setErrorArray] = useState([])\n \n\n useEffect(() => {\n setDidConfigChange(props.activeChange)\n }, [props.activeChange])\n\n useEffect(() => {\n if(props.saveAllPopup === true){\n showSavePopup()\n } else {\n setShowSpinner(false)\n }\n }, [props.saveAllPopup])\n\n useEffect(() => {\n if(props.discardAllPopup === true){\n showPopup(5)\n }\n }, [props.discardAllPopup])\n\n useEffect(() => {\n if(props.saveOrAbandonPopup === true){\n showPopup(7)\n } \n }, [props.saveOrAbandonPopup])\n\n const showSavePopup = () => {\n if(errorArray && errorArray.length !== 0){\n showPopup(6)\n } else {\n showPopup(4)\n }\n }\n\n const showPopup = (number) => {\n setPopupNumber(number)\n setIsOpen(true)\n }\n\n const closePopup = () => {\n setIsOpen(false)\n props.resetPopupState()\n }\n\n\n // Passed into the Popup\n const saveConfiguration = async () => {\n setShowSpinner(true)\n setTimeout(() => {\n props.didPushSaveData()\n setShowSpinner(false)\n }, 1000)\n}\n\n const discardChanges = () => {\n setDidConfigChange(false)\n props.willRefreshData();\n setShowSpinner(true)\n setTimeout(() => {\n setShowSpinner(false)\n }, 1000)\n }\n\n \n\n return (\n\n \n \n \n \n\n \n \n DISCARD CHANGES\n \n \n SAVE CONFIGURATION \n \n \n \n )\n\n}\n\n\nconst OuterContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n align-content: center;\n margin-right: 22px; \n /* min-height: 1400px; */\n`;\n\nconst SaveConfigContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n /* margin-right: 20px; */\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst SaveConfigContainerMobile = styled(SaveConfigContainer)`\n /* border: 1px red dashed; */\n background: #0e1c36;\n height: 60px;\n margin-top: -10px;\n padding-left: 20px;\n ${media.lessThan(\"743px\")`\n display: flex;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n height: 10px;\n `}\n`;\n\nconst SaveConfig = styled.button`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 14px 40px;\n gap: 9px;\n width: 241px;\n height: 40px;\n border: 1px solid #63C085;\n border-radius: 30px;\n background: none;\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8; \n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SaveConfigMobile = styled(SaveConfig)`\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst BtnText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: flex;\n `}\n`\n\nconst BtnTextMobile = styled(BtnText)`\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst ButtonText2 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n z-index: 10;\n cursor: pointer;\n :hover {\n color: #63C085; \n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: flex;\n `}\n `;\n\n const ButtonText2Mobile = styled(ButtonText2)`\n margin-left: 20px;\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n `;\n\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: COLORS.Primary,\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n }\n\n\n // const setError = (isError, label, minOrMax) => {\n // const errorName = label + minOrMax\n\n // if(isError === true){\n // // add error\n // if(errorArray.some(error => error === errorName)){\n // // error already been set\n // } else {\n // setErrorArray([...errorArray, errorName])\n // }\n\n // } else {\n // // remove error\n // let localArray = errorArray\n\n // if(localArray.length !== 0){\n // let index = localArray.findIndex(error => {\n // return error === errorName\n // })\n // localArray.splice(index, 1)\n // setErrorArray(localArray)\n // }\n // }\n // }","import React, { useEffect, useState, useContext } from \"react\"\nimport { AccountContext } from \"../../auth/Account\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgArrowRight from \"./../../images/ic_arrow_right_blue.svg\"\nimport ImgArrowRightWhite from \"./../../images/ic_arrow_right_white.svg\"\nimport ImgArrowDown from \"./../../images/ic_arrow_down_white.svg\"\nimport AccountDetailsForm from \"../form/AccountDetailsForm\"\nimport ChangeEmailForm from \"../form/ChangeEmailForm\"\nimport ChangePassword from \"../form/ChangePassword\"\nimport EditAccount from \"./EditAccount\"\nimport { useMediaQuery } from 'react-responsive'\nimport { COLORS } from \"../../styles/colors\"\nimport NotificationSaveDiscard from \"../notification/NotificationSaveDiscard\"\n\n\nexport default function Account() {\n\n const [isHovering, setIsHovering] = useState(false)\n const [isDisconnected, setIsDisconnected] = useState(false)\n const [isUnlinked, setIsUnlinked] = useState(false)\n const [isUnconfigured, setIsUnconfigured] = useState(true)\n const [isConfigOpen, setIsConfigOpen] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n const [isLoading, setIsLoading] = useState(false)\n\n const setConfigOpen = () => {\n setIsConfigOpen(true)\n }\n\n const setConfigured = () => {\n setIsUnconfigured(false)\n setIsConfigOpen(false)\n }\n\n const closePopup = () => {\n setIsOpen(false)\n }\n\n const { getSession } = useContext(AccountContext)\n const isDesktopSize = useMediaQuery({ query: '(min-width: 744px)' })\n\n const [state, setState] = useState({\n email: \"\",\n firstName: \"\",\n lastName: \"\",\n phoneNumber: \"\",\n formattedNumber: \"\",\n })\n\n useEffect(() => {\n updateForm()\n }, [])\n\n\n const toggleConfig = () => {\n if(isConfigOpen){\n const element = isDesktopSize ? document.getElementById('top') : document.getElementById('navbar');\n element.scrollIntoView({ behavior: 'smooth' });\n setTimeout(() => {\n setIsConfigOpen(false)\n }, 400)\n } else {\n setIsConfigOpen(true)\n setTimeout(() => {\n const element = document.getElementById('edit');\n element.scrollIntoView({ behavior: 'smooth' });\n }, 100)\n }\n }\n\n const updateForm = () => {\n getSession().then(({ email, given_name, family_name, phone_number }) => {\n // Format the phone number for the update account screen\n const trimNumber = phone_number.slice(2)\n const formattedNumber = `(${trimNumber.substring(0, 3)}) ${trimNumber.substring(3, 6)} ${trimNumber.substring(\n 6,\n 10\n )}`\n\n setState({\n email: email,\n firstName: given_name,\n lastName: family_name,\n phoneNumber: phone_number,\n formattedNumber: formattedNumber,\n })\n })\n }\n\n return (\n \n \n \n {state.email} \n {/* First Name \n {state.firstName} \n Last Name \n {state.lastName} \n Email \n {state.email} \n Phone Number \n {state.formattedNumber} \n {/* \n\n \n {setIsHovering(true)}}\n onMouseLeave={(e) => {setIsHovering(false)}}>\n Edit Account Details \n \n \n \n \n \n \n {/*----SAVE MOBILE----*/}\n \n \n SAVE CONFIGURATION \n \n DISCARD CHANGES \n \n\n {isConfigOpen ?\n \n \n )\n }\n\n\n const OuterContainer = styled.div`\n /* border: 1px transparent dashed; */\n display: flex;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n margin-top: 30px;\n `}\n `\n\n const Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 1440px;\n margin-right: 30px;\n /* margin-top: 20px; */\n margin-bottom: 50px;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n `\n\n const TopContainer = styled.div`\n /* border: 1px yellow dashed; */\n /* width: 439px; */\n background-color: #0e1c36;\n border-radius: 10px;\n display: flex;\n flex-direction: column;\n margin-bottom: 10px;\n padding: 20px;\n /* width: 100%; */\n ${media.lessThan(\"743px\")`\n width: 100%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 384px; */\n `}\n `\n\n const Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightMedium};\n margin-bottom: 2px;\n margin-top: 6px;\n `\n\n const HeaderText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n `\n\n const HeaderText2 = styled(HeaderText)`\n color: ${COLORS.White};\n align-self: center;\n `;\n\n const Line = styled.div`\n width: 100%;\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 21px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n /* width: 90% */\n margin-right: 0px;\n `}\n `\n\n const Title = styled.h3`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n margin-top: 9px;\n `\n\n const InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n margin-top: 1px;\n `\n\n const ChangeContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 90%;\n `}\n `\n\n\n const ConfigHeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-content: center;\n /* padding: 20px; */\n background-color: #0e1c36;\n border-radius: 10px;\n min-height: 68px;\n `\n\nconst ConfigContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 20px;\n border-radius: 10px;\n`;\n\n const ConfigRightContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n `\n\n const ArrowIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n `\n\n const BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.White};\n background: transparent;\n cursor: pointer;\n text-align: center;\n margin-right: 15px;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n /* margin-bottom: 50px; */\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-bottom: 50px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\n const ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n `\n\n const SaveConfigContainerMobile = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n /* margin-right: 20px; */\n background: #0e1c36;\n height: 60px;\n margin-top: -10px;\n padding-left: 20px;\n ${media.lessThan(\"743px\")`\n display: flex;\n flex-wrap: wrap;\n min-height: 120px;\n padding-top: 20px;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n height: 10px;\n `}\n`;\n\nconst SaveConfigMobile = styled.button`\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 14px 40px;\n gap: 9px;\n width: 241px;\n height: 40px;\n border: 1px solid #63C085;\n border-radius: 30px;\n background: none;\n align-self: center;\n transition-duration: 0.5s;\n margin-right: 20px;\n :hover {\n opacity: 0.8; \n }\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n \nconst BtnTextMobile = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\n const ButtonText2Mobile = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n cursor: pointer;\n :hover {\n color: #63C085; \n }\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n `;\n // \n \n \n {props.status.key} Wingnuts \n {props.wingnutCount} \n \n \n\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n style={{ background: activeStatus ? COLORS.Secondary : isHovering ? COLORS.Secondary : null }}\n >\n \n\n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport ImgSearch from \"./../../images/ic_search.svg\"\nimport WingnutStatus from \"./WingnutStatus.enum\"\nimport WingnutStatusCard from \"./WingnutStatusCard\"\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n background-color: ${COLORS.Base};\n height: auto;\n margin-bottom: 10px;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n max-height: 840px;\n align-items: center;\n margin-bottom: 0px;\n padding-top: 23px;\n margin-right: 0px;\n justify-content: center;\n flex-direction: column-reverse;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column-reverse;\n height: auto;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: auto;\n max-width: 1500px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: row;\n width: 90%;\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchBarContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n align-self: center;\n width: 100%;\n`\nconst SearchContainerTop = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n width: 400px;\n ${media.lessThan(\"743px\")`\n margin-top: 10px;\n align-content: center;\n max-width: 400px;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 10px;\n width: 90%;\n max-width: 400px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\nconst SearchBar = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n height: 50px;\n /* min-width: 300px; */\n /* max-width: 500px; */\n outline: none;\n border: 1px solid ${COLORS.White};\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Primary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :focus {\n outline: ${COLORS.White};\n border: 2px solid ${COLORS.White};\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchIcon = styled.img`\n /* border: 1px red dashed; */\n height: 20px;\n width: 20px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -40px;\n margin-top: 15px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n max-width: 800px;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: auto;\n min-width: 360px;\n margin-bottom: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 90%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusPair = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: flex-end;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: auto;\n align-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-right: 8.5px;\n flex-direction: column;\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 8.5px;\n `}\n`\n\nconst StatusPairRight = styled(StatusPair)`\n ${media.between(\"744px\", \"large\")`\n margin-left: 8.5px;\n `}\n ${media.greaterThan(\"large\")`\n margin-left: 8.5px;\n `}\n\n`;\n\nconst CardHeader = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightMedium};\n`\n\n\nconst ResultContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n margin-top: 16px;\n margin-bottom: 16px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 20px;\n margin-left: 20px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchText = styled(CardHeader)`\n font-size: 14px;\n padding-top: 10px;\n ${media.lessThan(\"743px\")`\n font-size: 12px;\n text-align: center;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 12px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultHeader = styled(CardHeader)`\n font-size: 14px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultNumber = styled(CardHeader)`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\n\nexport default function WingnutController(props) {\n const countStatus = (status) => {\n var total = 0\n props.tableData.forEach((data) => {\n if (data.status.live && status === WingnutStatus.Live) {\n total += 1\n }\n if (data.status.disconnected && status === WingnutStatus.Disconnected) {\n total += 1\n }\n if (data.status.unlinked && status === WingnutStatus.Unlinked) {\n total += 1\n }\n if (data.status.unconfigured && status === WingnutStatus.Unconfigured) {\n total += 1\n }\n })\n return total\n }\n\n return (\n \n \n \n \n \n Search by city name, wingnut serial number, property name, etc. \n \n \n Showing \n {props.tableData.length} Results \n \n \n \n \n \n \n \n \n \n )\n}\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { useTable, useSortBy } from \"react-table\"\nimport { COLORS } from \"../../styles/colors\"\n\nfunction Table({ columns, data, columnsToHide }) {\n // Use the state and functions returned from useTable to build your UI\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(\n {\n columns,\n data,\n initialState: {\n hiddenColumns: columnsToHide,\n },\n },\n useSortBy\n )\n\n // Render the UI for your table\n return (\n \n \n {headerGroups.map((headerGroup) => (\n \n {headerGroup.headers.map((column) => (\n \n {column.render(\"Header\")}\n \n ))}\n \n ))}\n \n \n {rows.map((row, i) => {\n prepareRow(row)\n return (\n \n {row.cells.map((cell) => {\n return (\n \n {cell.render(\"Cell\", {\n serial: row.original.serial,\n uuid: row.original.uuid,\n propertyName: row.original.propertyName,\n portfolio: row.original.portfolio,\n propertyId: row.original.propertyId,\n propertyUUID: row.original.propertyUUID,\n address: row.original.address,\n status: row.original.status\n })}\n \n ) // YES\n })}\n \n )\n })}\n \n
\n )\n}\n\nexport default Table\n","export default __webpack_public_path__ + \"static/media/ic_status_green_dull.63defab9.svg\";","export default __webpack_public_path__ + \"static/media/ic_status_red_dull.af24d2d3.svg\";","export default __webpack_public_path__ + \"static/media/ic_status_purple_dull.f49b0820.svg\";","export default __webpack_public_path__ + \"static/media/ic_status_yellow_dull.a27ab0f7.svg\";","export default __webpack_public_path__ + \"static/media/ic_arrows_sort.02c9560b.svg\";","import Enum from \"enum\"\nimport IconStatusLive from \"./../../images/ic_status_green.svg\"\nimport IconStatusDisconnected from \"./../../images/ic_status_red.svg\"\nimport IconStatusUnlinked from \"./../../images/ic_status_yellow.svg\"\nimport IconStatusUnconfigured from \"./../../images/ic_status_purple.svg\"\n\n//large - 1171 - 1800\n//medium - 768 - 1170\n//small - 0 - 767\n\nconst ScreenSize = new Enum({\n Large: [1171, 1800],\n Medium: [768, 1170],\n Small: [0, 767],\n})\n\nexport default ScreenSize\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport MediaQuery from \"react-responsive\"\nimport MakeData from \"./MakeData\"\nimport WingnutTable from \"./WingnutTable\"\nimport IconLaunch from \"./../../images/ic_launch_green.svg\"\n\nimport IconActive from \"./../../images/ic_status_green.svg\"\nimport IconActiveDull from \"./../../images/ic_status_green_dull.svg\"\nimport IconDisconnected from \"./../../images/ic_status_red.svg\"\nimport IconDisconnectedDull from \"./../../images/ic_status_red_dull.svg\"\nimport IconUnlinked from \"./../../images/ic_status_purple.svg\"\nimport IconUnlinkedDull from \"./../../images/ic_status_purple_dull.svg\"\nimport IconUnconfigured from \"./../../images/ic_status_yellow.svg\"\nimport IconUnconfiguredDull from \"./../../images/ic_status_yellow_dull.svg\"\n\nimport IconSort from \"./../../images/ic_arrows_sort.svg\"\nimport { useHistory } from \"react-router-dom\"\nimport { Link } from \"react-router-dom\"\nimport ScreenSize from \"./ScreenSize.enum\"\nimport { COLORS } from \"../../styles/colors\"\n\n\n\n// Handle the highlevel table construction\nfunction WingnutTableStructure(props) {\n const history = useHistory()\n\n const handleSerialClick = (e, row) => {\n // history.push('/portal/account')\n }\n\n const handlePropertyNameClick = (e, row) => {\n }\n\n const handlePropertyIdClick = (e, row) => {\n }\n\n const handleSortClick = (e, row) => {\n }\n\n //----------------------------------------Custom Sort Functions\n const basicSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original[columnId]\n const b = rowB.original[columnId]\n if(a > b) return 1\n if (b > a) return -1\n return 0\n }\n}, [])\n\nconst addressSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original[columnId] ? rowA.original[columnId].streetAddress : \"0\"\n const b = rowB.original[columnId] ? rowB.original[columnId].streetAddress : \"0\"\n if (a > b) return 1\n if (b > a) return -1\n return 0\n }\n}, [])\n\n const statusSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n\n if (rowA.original[columnId] == undefined || rowB.original[columnId] == undefined) {\n return 0; // Return 0 to indicate no change in order\n }\n \n const a = rowA.original[columnId];\n const b = rowB.original[columnId];\n const aId = rowA.original.uuid\n const bId = rowB.original.uuid\n\n // Custom sorting logic based on the 'status' object\n if (a.disconnected !== b.disconnected) {\n return a.disconnected ? -1 : 1;\n }\n if (a.live !== b.live) {\n return a.live ? -1 : 1;\n }\n if (a.unconfigured !== b.unconfigured) {\n return a.unconfigured ? -1 : 1;\n }\n if (a.unlinked !== b.unlinked) {\n return a.unlinked ? -1 : 1;\n }\n\n if (aId > bId) return -1\n if (bId > aId) return 1\n\n return 0;\n }\n }, [])\n\n // Pickup and drop columns here based on screen size?\n const tableColumns = React.useMemo(\n () => [\n {\n Header: (\n handleSortClick(e, row)}>\n Serial \n \n \n \n ),\n accessor: \"serial\",\n sortType: basicSort,\n // maxWidth: 101,\n // minWidth: 99,\n width: '10%',\n Cell: (props) => {\n return (\n \n \n handleSerialClick(e, row)}>\n \n {props.serial} \n \n \n \n )\n },\n },\n {\n Header: (\n handleSortClick(e, row)}>\n UUID \n \n \n \n ),\n accessor: \"uuid\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '25%',\n Cell: (props) => {\n return(\n \n {props.uuid} \n \n )\n },\n },\n {\n Header: (\n handleSortClick(e, row)}>\n Property Name \n \n \n \n ),\n accessor: \"propertyName\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '20%',\n Cell: (props) => {\n return (props.propertyUUID ? (\n \n \n handlePropertyNameClick(e, row)}>\n \n {props.propertyName} \n \n \n \n ) : ( handleSortClick(e, row)}>\n Portfolio \n \n \n \n ),\n accessor: \"portfolio\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '10%',\n Cell: (props) => {\n return (\n \n {props.portfolio ? props.portfolio : \"-\" } \n \n )\n },\n },\n {\n Header: (\n handleSortClick(e, row)}>\n PropertyId \n \n \n \n ),\n accessor: \"propertyId\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '5%',\n Cell: (props) => {\n return (\n props.propertyUUID ? (\n \n \n handlePropertyIdClick(e, row)}>\n \n {props.propertyId} \n \n \n \n ) : ( handleSortClick(e, row)}>\n Address \n \n \n \n ),\n accessor: \"address\",\n sortType: addressSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '30%',\n Cell: (props) => {\n return (\n \n {props.address ? `${props.address.streetAddress} ${props.address.city} ${props.address.provinceState} ${props.address.country} ${props.address.postalZip}` : \"-\" } \n \n )\n },\n },\n {\n Header: (\n handleSortClick(e, row)}>\n Status \n \n \n \n ),\n accessor: \"status\",\n sortType: statusSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '10%',\n Cell: (props) => {\n return (\n \n \n )\n },\n },\n ],\n []\n )\n\n const hiddenColumns = (screenSize) => {\n // serial, uuid, propertyName, portfolio, propertyId, address, status\n var columnsToHide = []\n if (screenSize === ScreenSize.Medium) {\n // propertyId, propertyName, portfolio, linkedWingnuts, status\n columnsToHide = [\"address\", \"propertyId\"]\n }\n if (screenSize === ScreenSize.Small) {\n // propertyId, propertyName, status\n columnsToHide = [\"address\", \"portfolio\", \"uuid\"]\n }\n return columnsToHide\n }\n\n return (\n \n \n \n \n\n \n \n\n \n \n \n \n )\n}\n\nexport default WingnutTableStructure\n\n\nconst Container = styled.div`\n /* border: 1px solid red; */\n overflow: auto;\n height: 100%;\n width: 100%;\n background-color: ${COLORS.Base};\n margin-top: 0px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-top: 0px; \n height: 50%;\n padding-left: 16px; \n padding-right: 16px; \n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 20px;\n width: 98%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Styles = styled.div`\n color: ${COLORS.White};\n overflow: none;\n\n table {\n border-spacing: 0;\n\n thead {\n ${\"\" /* These styles are required for a scrollable body to align with the header properly */}\n overflow-y: auto;\n overflow-x: hidden;\n\n // Below create a fixed header\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n tbody {\n ${\"\" /* These styles are required for a scrollable table body */}\n overflow-y: scroll;\n overflow-x: hidden;\n }\n\n tr {\n :last-child {\n td {\n border-bottom: 1;\n }\n }\n }\n\n th,\n td {\n margin: 0;\n border-bottom: 1px solid ${COLORS.HighlightDark};\n :last-child {\n border-right: 0;\n }\n }\n }\n`\nconst HeaderDiv = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 5px;\n /* height: auto; */\n height: 45px;\n`\n\nconst CellDiv = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n position: relative;\n bottom: 1px;\n height: 45px;\n`\n\nconst EmptyCellDiv = styled.div`\n /* border: 1px red dashed; */\n`\n\nconst ContentDiv = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n align-self: center;\n`;\n\nconst CellStatusDiv = styled.div`\n display: flex;\n /* border: 1px green dashed; */\n`\n\nconst BtnIcon = styled.button`\n /* border: 1px green dashed; */\n background: transparent;\n /* outline: none; */\n border: none;\n`\n\nconst Icon = styled.img`\n /* border: 1px red dashed; */\n width: 10px;\n height: 10px;\n position: relative;\n margin-right: 4px;\n\n /* align-self: center; */\n top: 1px;\n`\n\nconst StatusIcon = styled.img`\n /* border: 1px red dashed; */\n width: 10px;\n height: 10px;\n /* position: relative; */\n margin-right: 6px;\n\n /* align-self: center; */\n top: 1px;\n`\n\nconst SortIcon = styled.img`\n /* border: 1px red dashed; */\n width: 18px;\n height: 18px;\n position: relative;\n /* align-self: center; */\n top: 1px;\n margin-right: 10px;\n`\n\nconst Text = styled.h5`\n /* border: 1px green dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 120%;\n display: flex;\n align-self: center;\n /* align-items: center; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\n\nconst StaticText = styled(Text)`\n /* border: 1px green dashed; */\n padding-left: 5px;\n color: ${COLORS.HighlightLight};\n align-self: center;\n`","import { API, Auth } from \"aws-amplify\"\nimport React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Fuse from \"fuse.js\"\nimport WingnutController from \"./WingnutController\"\nimport WingnutTableStructure from \"./WingnutTableStructure\"\nimport WingnutStatus from \"./WingnutStatus.enum\"\nimport { SpinnerContainer, StyledSpinner } from \"../custom/Spinner\"\nimport { DateTime } from \"luxon\";\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n height: 100%;\n margin-right: 30px;\n background-color: ${COLORS.Base};\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n padding-bottom: 80px;\n `}\n`\n\nconst fuzzyOptions = {\n // isCaseSensitive: false,\n // includeScore: false,\n // shouldSort: true,\n // includeMatches: false,\n // findAllMatches: false,\n // minMatchCharLength: 3,\n // location: 0,\n threshold: 0.1,\n // distance: 100,\n // useExtendedSearch: false,\n // ignoreLocation: false,\n // ignoreFieldNorm: false,\n // fieldNormWeight: 1,\n keys: [\"serial\", \"uuid\", \"propertyId\", \"propertyName\", \"portfolio\", \"address.streetAddress\", \"address.city\", \"address.postalZip\", \"address.provinceState\", \"address.country\"],\n}\n\nexport default class WingnutOverview extends Component {\n constructor() {\n super()\n this.fuseSearch = null\n this.showData = true\n this.state = {\n data: [],\n search: \"\",\n isLoading: true,\n status: {\n Live: false,\n Disconnected: false,\n Unlinked: false,\n Unconfigured: false,\n },\n }\n }\n\n componentDidMount() {\n this.getWingnuts()\n }\n\n componentWillUnmount() {\n this.showData = false\n }\n\n componentDidUpdate(prevProps, prevState){\n if(prevState.isLoading === true && this.state.isLoading === false){\n this.filterData(this.state.search, this.state.status)\n }\n }\n\n searchForWingnut(event) {\n if(this.state.isLoading === false){\n this.filterData(event.target.value, this.state.status)\n } else {\n this.setState({\n search: event.target.value,\n })\n }\n }\n\n filterData(fuzzySearch, wingnutState) {\n var data = []\n if (fuzzySearch) {\n data = this.fuseSearch.search(fuzzySearch).map((s) => s.item)\n } else {\n if(this.fuseSearch){\n data = this.fuseSearch.getIndex().docs\n }\n }\n\n data = data.filter((item) => {\n if (wingnutState.Live && item.status.live) {\n return item\n }\n if (wingnutState.Disconnected && item.status.disconnected) {\n return item\n }\n if (wingnutState.Unlinked && item.status.unlinked) {\n return item\n }\n if (wingnutState.Unconfigured && item.status.unconfigured) {\n return item\n }\n // no toggles set, return all items\n if (!wingnutState.Live && !wingnutState.Disconnected && !wingnutState.Unlinked && !wingnutState.Unconfigured) {\n return item\n }\n })\n this.setState({\n search: fuzzySearch,\n status: wingnutState,\n data: data,\n })\n }\n\n toggleStatus(status) {\n var wingnutStatus = this.state.status\n\n if (status === WingnutStatus.Live) {\n wingnutStatus.Live = !wingnutStatus.Live\n }\n if (status === WingnutStatus.Disconnected) {\n wingnutStatus.Disconnected = !wingnutStatus.Disconnected\n }\n if (status === WingnutStatus.Unlinked) {\n wingnutStatus.Unlinked = !wingnutStatus.Unlinked\n }\n if (status === WingnutStatus.Unconfigured) {\n wingnutStatus.Unconfigured = !wingnutStatus.Unconfigured\n }\n\n this.filterData(this.state.search, wingnutStatus)\n }\n\n setWingnutStatus(item) {\n var disconnected = true\n if (item.config.latestPost) {\n var date = DateTime.utc()\n var apiDateTime = item.config.latestPost ? DateTime.fromFormat(item.config.latestPost, \"yyyy-MM-dd HH:mm:ss\") : DateTime.utc()\n var difference = date.diff(apiDateTime, 'minutes')\n disconnected = difference.minutes > 15\n }\n\n var unlinked = (item.config.propertyId === undefined)\n var unconfigured = !(Object.keys(item.config.sensors).length > 0)\n return {\n live: (!disconnected && !unlinked && !unconfigured) ? true : false,\n disconnected,\n unlinked,\n unconfigured\n }\n }\n\n setupTable(data) {\n this.fuseSearch = new Fuse(data, fuzzyOptions)\n this.setState({\n data: data\n })\n }\n\n async getWingnuts() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n\n API.get(\"FrontendAPI-wingnuts\", \"\", init)\n .then((response) => {\n if (response.success) {\n const mappedData = response.data.map((item) => {\n\n return {\n serial: parseInt(item.externalId),\n propertyId: item.property?.externalId,\n propertyName: item.propertyName,\n propertyUUID: item.property?.id,\n address: item.property?.config.address,\n portfolio: item.property?.config.portfolio,\n sensors: item.config.sensors,\n uuid: item.id,\n status: this.setWingnutStatus(item)\n }\n })\n if (this.showData) {\n this.setupTable(mappedData)\n }\n }\n })\n .catch((error) => {\n console.error(error)\n })\n .finally(() => this.setState({ isLoading: false }))\n }\n\n render() {\n return (\n \n this.toggleStatus(s)}\n onInputChange={(e) => this.searchForWingnut(e)}\n wingnutState={this.state.status}\n />\n { this.state.isLoading\n ? ( \n )\n }\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgYellow from \"./../../images/ic_status_yellow.svg\"\nimport ImgEye from \"./../../images/eye_blue.svg\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst HeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n background-color: #0E1C36;\n padding: 20px;\n border-radius: 10px;\n display: flex;\n flex-direction: row;\n width: 100%;\n justify-content: space-between;\n align-content: center;\n margin-bottom: 15px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n margin-right: 10px;\n`\n\nconst StatusIcon = styled.img`\n width: 12px;\n height: 12px;\n margin-right: 22px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 5px;\n `}\n`\n\nconst InfoText = styled.h2`\n /* border: 1px green dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 5px;\n margin-right: 5px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst InfoText2 = styled(InfoText)`\n font-size: 14px;\n margin-top: 5px;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-self: center;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: black;\n background: #63c085;\n cursor: pointer;\n text-align: center;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n margin-top: 20px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nexport default function StatusDetailsDisconnected() {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n Not Connected \n \n This Wingnut has not connected to the servers recently. Check that it is powered on and has a working internet connection. Still not working?\n \n \n \n \n \n CONTACT US \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgYellow from \"./../../images/ic_status_yellow.svg\"\nimport ImgEye from \"./../../images/eye_blue.svg\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst HeaderContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n background-color: #0E1C36;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 15px;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n margin-right: 10px;\n`\n\nconst StatusIcon = styled.img`\n width: 12px;\n height: 12px;\n margin-right: 22px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 5px;\n `}\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 5px;\n margin-right: 5px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst InfoText2 = styled(InfoText)`\n max-width: 300px;\n font-size: 12px;\n margin-top: 15px;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-self: center;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: black;\n background: #63c085;\n cursor: pointer;\n text-align: center;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n height: 55px;\n margin-top: 22px;\n margin-bottom: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px; \n width: 200px;\n align-self: center;\n `}\n ${media.greaterThan(\"large\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nexport default function StatusDetailsUnconfigured(props) {\n\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n Unconfigured Wingnut \n This Wingnut must be configured in order to collect data \n \n \n \n \n CONFIGURE WINGNUT \n \n \n\n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgYellow from \"./../../images/ic_status_yellow.svg\"\nimport ImgEye from \"./../../images/eye_blue.svg\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\n\nconst HeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n background-color: #0E1C36;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 15px;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: row;\n margin-right: 10px;\n`\n\nconst StatusIcon = styled.img`\n width: 12px;\n height: 12px;\n margin-right: 22px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 5px;\n margin-right: 5px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-self: center;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: black;\n background: #63c085;\n cursor: pointer;\n text-align: center;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n height: 55px;\n margin-top: 22px;\n margin-bottom: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px; \n width: 200px;\n align-self: center;\n `}\n ${media.greaterThan(\"large\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nexport default function StatusDetailsUnlinked(props) {\n const {wingnutDetails} = props\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n Unlinked Wingnut \n \n Wingnut must be linked to a property in order to collect data\n \n \n \n \n \n LINK WINGNUT \n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport { Link } from \"react-router-dom\"\nimport media from \"styled-media-query\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nconst HeaderContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n background-color: #0E1C36;\n padding: 20px;\n border-radius: 10px;\n flex-direction: row;\n width: 100%;\n justify-content: space-between;\n margin-bottom: 15px;\n`\n\nconst StatusIcon = styled.img`\n width: 12px;\n height: 12px;\n margin-right: 22px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n align-content: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 177px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: transparent;\n color: ${COLORS.White};\n cursor: pointer;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function StatusDetailsLive(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n Live \n \n\n{/* This was the Go-To-Property button in the WINGNUT detail page on the STATUS LIVE header component - this button has been removed?? */}\n {/* \n GO TO PROPERTY \n \n
*/}\n\n \n )\n}\n","export default __webpack_public_path__ + \"static/media/ic_settings.3a5674e0.svg\";","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* justify-content: space-between; */\n flex-wrap: wrap;\n padding-top: 38px;\n margin-right: 40px;\n margin-bottom: 46px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TabContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n width: 0.5;\n padding: 10px;\n /* opacity: 50%; */\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-wrap: wrap;\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n width: 25%;\n padding: 5px;\n `}\n`\n\nconst StatusIcon = styled.img`\n width: 11px;\n height: 11px;\n margin-right: 15px;\n align-self: center;\n`\n\nconst CardTextContainer = styled.div`\n /* border: 1px red dashed; */\n /* width: 144px; */\n display: flex;\n flex-direction: column;\n min-width: 200px;\n`\n\nconst CardNumber = styled.h1`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 130%;\n color: ${COLORS.HighlightDark};\n margin-top: 3px;\n`\n\nconst HeaderText = styled.h3`\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 20px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.HighlightMedium};\n`\n\nexport default function WingnutConfigTabHeaderItem(props) {\n\n const [isHovering, setIsHovering] = useState(false)\n const [isSelected, setIsSelected] = useState(false)\n\n const setSelected = () => {\n props.onHandleClick()\n setIsSelected(true)\n }\n\n useEffect(() => {\n setIsSelected(props.selected)\n })\n\n return (\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n >\n \n {props.inputText} \n {props.sensorText} \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgYellow from \"./../../images/ic_status_yellow.svg\"\nimport WingnutConfigTabHeaderItem from \"./WingnutConfigTabHeaderItem\"\n\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding-top: 38px;\n margin-right: 40px;\n margin-bottom: 46px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TabContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n width: 0.5;\n padding: 10px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-wrap: wrap;\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n width: 25%;\n padding: 5px;\n `}\n`\n\nexport default function WingnutConfigTabHeader(props) {\n\n return (\n \n props.setInputTab(0)}inputText=\"Thermistor Inputs\" sensorText=\"(a1 - a16)\" img={ImgRed}/>\n props.setInputTab(1)} inputText=\"Transducer Inputs\" sensorText=\"(a17 - a32)\" img={ImgPurple}/>\n props.setInputTab(2)} inputText=\"General Purpose Inputs\" sensorText=\"(d01 - d04)\" img={ImgYellow}/>\n props.setInputTab(3)} inputText=\"Relay Sense Inputs\" sensorText=\"(d05 - d16)\" img={ImgGreen}/> \n \n )\n}\n","export default __webpack_public_path__ + \"static/media/ic_settings_blue.6234d310.svg\";","import React, { useEffect, useState, useContext } from \"react\"\nimport Select from \"react-dropdown-select\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst StyledSelect = styled(Select)`\n height: 45px;\n color: ${COLORS.White};\n background: ${COLORS.Secondary};\n margin-top: 15px; \n\n ${media.lessThan(\"744px\")`\n /* width: 90%; */\n height: 55px;\n `}\n ${media.between(\"medium\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n\n .react-dropdown-select-clear,\n .react-dropdown-select-dropdown-handle {\n color: ${COLORS.White};\n height: 22px;\n }\n .react-dropdown-select-option {\n }\n .react-dropdown-select-item {\n\n }\n .react-dropdown-select-input {\n color: ${COLORS.White}; // cursor select\n }\n .react-dropdown-select-dropdown {\n background: ${COLORS.Secondary}; // card background\n border-radius: 8px;\n border: 1px solid ${COLORS.HighlightMedium};\n }\n .react-dropdown-select-item {\n color: ${COLORS.White}; // list item\n border-bottom: none;\n padding-top: 12px;\n padding-bottom: 12px;\n :hover {\n background: ${COLORS.HighlightMedium};\n }\n }\n .react-dropdown-select-item.react-dropdown-select-item-selected{\n color: ${COLORS.White}; // selected item\n background: ${COLORS.HighlightMedium};\n border-bottom: none;\n }\n .react-dropdown-select-item.react-dropdown-select-item-active {\n //background: #111;\n /* border-bottom: 1px solid #333; */\n\n /* font-weight: bold; */\n\n }\n .react-dropdown-select-item.react-dropdown-select-item-disabled {\n /* color: #ccc; */\n }\n ::placeholder {\n color: ${COLORS.White};\n\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.White};\n }\n\n`\n\nexport default function TimeRangeDropdownUI(props) {\n \n const [selected, setSelected] = useState(null)\n const [isSelected, setIsSelected] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n const customContentRenderer = () => (\n \n {selected? selected : props.placeholder}\n
\n );\n \n const onSelected = (item) => {\n if (item[0]) {\n setSelected(item[0].label)\n props.onSelectedValue(item[0])\n setIsSelected(true)\n } else {\n setSelected(null)\n setIsSelected(false)\n }\n }\n\n useEffect(() => {\n setSelected(null)\n setIsSelected(false)\n }, [props.clearInput])\n\n useEffect(() => {\n if (props.selectedValue.length > 0) {\n onSelected(props.selectedValue)\n }\n }, [])\n\n return (\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n >\n onSelected(value)}\n options={props.data}\n values={[]}\n style={{\n border: props.localAlert && selected === null ? \"1px solid transparent\" : isHovering ? `1px solid ${COLORS.HighlightMedium}` : isSelected ? \"1px solid transparent\" : `1px solid ${COLORS.HighlightMedium}`,\n borderRadius: 8,\n color: COLORS.White,\n fontWeight: \"100\",\n paddingLeft: \"12px\",\n fontFamily: \"Roboto Condensed\",\n fontSize: \"16px\",\n }}\n />\n
\n )\n}\n","import React, { useEffect, useState } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgArrowDown from \"./../../images/ic_arrow_down_white.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport ImgArrowRight from \"./../../images/ic_arrow_right_blue.svg\"\nimport ImgArrowRightWhite from \"./../../images/ic_arrow_right_white.svg\"\nimport Image from \"./../../images/ic_settings_blue.svg\"\nimport CustomSelect from \"./WingnutConfigSensorSelect\"\nimport Checkmark from \"./../../images/ic_success.svg\"\nimport { useMediaQuery } from 'react-responsive'\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: space-between;\n padding: 20px;\n margin-right: 40px;\n border-top: 1px ${COLORS.HighlightDark} solid;\n ${media.lessThan(\"743px\")`\n justify-content: flex-start;\n padding: 10px;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n justify-content: flex-start;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n cursor: pointer;\n`\n\nconst TabContainer = styled.div`\n /* border: 1px red dashed; */\n width: 100%;\n display: flex;\n flex-direction: row;\n /* justify-content: space-between; */\n padding: 5px;\n ${media.lessThan(\"743px\")`\n justify-content: flex-start;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusIcon = styled.img`\n width: 11px;\n height: 11px;\n margin-right: 15px;\n align-self: center;\n`\n\nconst CardTextContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n margin-right: 64px;\n ${media.lessThan(\"743px\")`\n margin-right: 14px;\n `}\n`\n\nconst HeaderText = styled.h3`\n /* border: 1px green dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 20px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n font-size: 18px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderNumber = styled(HeaderText)`\n width: 30px; \n`\n\nconst ArrowIcon = styled.img`\n width: 20px;\n height: auto;\n`\n\nconst IconContainer = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst AlertIcon = styled.img`\n width: 14px;\n /* height: 10px; */\n visibility: hidden;\n margin-right: 17px;\n`\n\nconst ArrowIconRight = styled.img`\n width: auto;\n height: 20px;\n align-self: center;\n`\n\nconst ArrowIconRightWhite = styled.img`\n width: auto;\n height: 16px;\n align-self: center;\n`\n\nconst SubHeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n cursor: pointer;\n`\n\nconst WingnutIcon = styled.img`\n width: 16px;\n height: 16px;\n align-self: center;\n margin-right: 10px;\n /* margin-bottom: 20px; */\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n /* line-height: 130%; */\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n`\n\nconst BodyContainer = styled.div`\n /* border: 1px yellow dashed; */\n`\n\nconst ConfirmContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n `\n\nconst InputContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n width: 95%;\n flex-direction: row;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 68%;\n height: 45px;\n outline: none;\n border: 1px solid ${COLORS.HighlightMedium};\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: normal;\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n background: ${COLORS.Secondary};\n /* margin-right: 20px; */\n margin-top: 15px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :focus {\n outline: ${COLORS.White};\n border: 2px solid ${COLORS.White};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n }\n ${media.lessThan(\"743px\")`\n height: 55px;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst InputNumber = styled(Input)`\n width: 30%;\n ${media.lessThan(\"743px\")`\n height: 55px;\n width: 100%;\n `}\n`\n\nconst InputLabel = styled(Input)`\n width: 95%;\n margin-right: 0px;\n`\n\nconst BtnConfirm = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: black;\n background: transparent;\n cursor: pointer;\n text-align: center;\n margin-top: 22px;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n margin-bottom: 5px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-bottom: 50px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n :hover {\n }\n`\n\nexport default function WingnutSensorConfigFormCell(props) {\n const {id, icon, schema, wingnutDetails} = props\n\n const [isCellHovering, setIsCellHovering] = useState(false)\n const [isButtonHovering, setIsButtonHovering] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n const [configuredSensor, setConfiguredSensor] = useState()\n // const [showSuccess, setShowSuccess] = useState(false)\n const [clearAll, setClearAll] = useState(null)\n const [disableClear, setDisableClear] = useState(true)\n const [localAlert, setLocalAlert] = useState(false)\n\n const [selectedType, setSelectedType] = useState()\n const [selectedLabel, setSelectedLabel] = useState()\n const [selectedNumber, setSelectedNumber] = useState()\n const [numberOptions, setNumberOptions] = useState([\n {\n label: \"1\",\n value: \"1\",\n },\n {\n label: \"2\",\n value: \"2\",\n },\n {\n label: \"3\",\n value: \"3\",\n },\n {\n label: \"4\",\n value: \"4\",\n },\n {\n label: \"5\",\n value: \"5\",\n },\n ])\n\n const isDesktopSize = useMediaQuery({ query: '(min-width: 744px)' })\n\n const confirmSensorChange = () => {\n\n var sensor = {\n key: buildKey(),\n label: `${selectedLabel.value}${selectedNumber.value}`,\n type: selectedType.value\n }\n props.removeAlert(props.id)\n setConfiguredSensor(sensor)\n props.updateSensor(sensor)\n\n }\n\n const clearAllInputs = () => {\n setLocalAlert(false)\n props.removeAlert(props.id)\n setClearAll(!clearAll)\n setDisableClear(true)\n setConfiguredSensor(null)\n setSelectedLabel(null)\n setSelectedLabel(null)\n setSelectedType(null)\n\n setTimeout(() => {\n var sensor = {\n key: buildKey(),\n label: null,\n type: null\n }\n props.updateSensor(sensor)\n }, 500)\n\n }\n\n const buildKey = () => {\n const keyData = id.replace(/(\\d+)/g, \" $1\").split(\" \")\n const leading = keyData[0].toUpperCase()\n const keyNumber = parseInt(keyData[1])\n if (leading === 'A') {\n return leading + \"N\" + keyNumber\n } else {\n return leading + \"I\" + keyNumber\n }\n }\n\n useEffect(() => {\n const key = buildKey()\n if (wingnutDetails.config.sensors[key]) {\n setConfiguredSensor(wingnutDetails.config.sensors[key])\n }\n }, [])\n\n useEffect(() => {\n if (selectedType && selectedLabel && selectedNumber) {\n setLocalAlert(false)\n confirmSensorChange()\n } \n }, [selectedType, selectedLabel, selectedNumber])\n\n useEffect(() => {\n const alert = props.checkAlert(props.id)\n setLocalAlert(alert)\n\n if (alert){\n setIsOpen(true)\n }\n }, [props.alertSignal])\n\n const getSelectedType = () => {\n var selected = []\n if (configuredSensor) {\n selected = schema.types.filter(type => type.value === configuredSensor.type)\n } else {\n if(selectedType != null){\n selected = [selectedType]\n }\n }\n return selected\n }\n\n const getSelectedLabel = () => {\n var selected = []\n if (configuredSensor) {\n selected = schema.labels.filter(label => label.value === configuredSensor.label.slice(0, -1))\n } else {\n if(selectedLabel != null){\n selected = [selectedLabel]\n }\n }\n return selected\n }\n\n const getSelectedNumber = () => {\n var selected = []\n if (configuredSensor) {\n const number = configuredSensor.label.charAt(configuredSensor.label.length - 1);\n selected = [{\n label: number,\n value: number\n }]\n } else {\n if(selectedNumber != null){\n selected = [selectedNumber]\n }\n }\n return selected\n }\n\n const loadSelectedType = (item) => {\n props.addAlert(props.id)\n props.unsavedChanges(true)\n setDisableClear(false)\n setSelectedType(item)\n } \n\n const loadSelectedNumber = (item) => {\n props.addAlert(props.id)\n props.unsavedChanges(true)\n setDisableClear(false)\n setSelectedNumber(item)\n } \n\n const loadSelectedLabel = (item) => {\n props.addAlert(props.id)\n props.unsavedChanges(true)\n setDisableClear(false)\n setSelectedLabel(item)\n \n } \n\n const buildConfigurationTitle = () => {\n var title = \"\"\n if (configuredSensor) {\n title = `${getSelectedLabel()[0]?.label} ${getSelectedNumber()[0]?.label} - ${getSelectedType()[0]?.label}`\n }\n return title\n }\n\n useEffect(() => {\n const fullList = ['1', '2', '3', '4', '5']\n const usedNumbers = []\n \n if (selectedLabel) {\n Object.keys(wingnutDetails.config.sensors).forEach(key => {\n const label = wingnutDetails.config.sensors[key].label\n const number = label.charAt(label.length - 1);\n const sl = label.split(number)[0]\n if (selectedLabel.value === sl) {\n usedNumbers.push(number)\n }\n })\n\n const difference = fullList.filter(x => usedNumbers.indexOf(x) === -1);\n const options = difference.map(num => {\n return {label: num, value: num}\n })\n setNumberOptions(options)\n }\n }, [selectedLabel])\n\n return (\n \n props.isAuth ? isOpen ? null : setIsOpen(true) : null}\n onMouseEnter={(e) => {\n setIsCellHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsCellHovering(false)\n }}\n >\n setIsOpen(false)}>\n \n {id} \n \n \n\n {configuredSensor ?\n {buildConfigurationTitle()} \n :\n isOpen ? \n Configure this sensor \n :\n \n Configure this sensor \n \n }\n \n \n\n {isOpen ?\n \n setIsOpen(false)}/>\n \n : \n \n \n\n }\n \n \n\n\n {isOpen ? \n \n \n {loadSelectedType(item)}} placeholder=\"Sensor Type\" width={isDesktopSize ? \"68%\" : \"100\"}/>\n loadSelectedNumber(item)} placeholder=\"Sensor Number\" width={isDesktopSize ? \"30%\" : \"100\"}/>\n \n loadSelectedLabel(item)} placeholder=\"Sensor Label\" width={isDesktopSize ? \"95%\" : \"100\"}/>\n \n clearAllInputs()} style={{backgroundColor: disableClear ? '#B6B6B6' : null, border: disableClear ? '#B6B6B6' : null}}>\n \n Clear Input\n \n \n \n \n : \n null\n }\n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { AccountContext } from \"../../auth/Account\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/ic_settings.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgYellow from \"./../../images/ic_status_yellow.svg\"\nimport WingnutConfigTabHeader from \"./../wingnuts/WingnutConfigTabHeader\"\nimport WingnutSensorConfigFormCell from \"./WingnutSensorConfigFormCell\"\nimport PopupContainer from \"./../popup/PopupContainer\"\nimport Modal from \"react-modal\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n max-width: 1440px;\n display: flex;\n flex-direction: column;\n padding-bottom: 50px;\n background: #0e1c36;\n padding: 20px;\n margin-top: -10px;\n padding-top: 50px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SubHeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n margin-right: 10px;\n /* margin-bottom: 20px; */\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n /* line-height: 130%; */\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n`\n\nexport default function WingnutConfiguration(props) {\nconst { schemaConfig, wingnutDetails } = props\n\n\n const [state, setState] = useState({\n thermistor: true,\n transducer: false,\n general: false,\n relay: false\n })\n\n const { getSession } = useContext(AccountContext)\n\n const [unsavedChanges, setUnsavedChanges] = useState(false)\n const [nextTab, setNextTab] = useState(null)\n // const [currentTab, setCurrentTab] = useState(0)\n // const [isOpen, setIsOpen] = useState(false)\n const [isAuth, setIsAuth ] = useState(false)\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n const setInputTab = (tab) => {\n\n if(unsavedChanges && tab != props.currentTab){\n // if unsaved changes and new tab requested\n setNextTab(tab)\n props.setupIsTabOpen(true)\n } else {\n tabSwitch(tab)\n }\n }\n\n const tabSwitch = (tab) => {\n\n props.trackCurrentTab(tab)\n\n switch(tab){\n case 0: \n setState({thermistor: true, transducer: false, general: false, relay: false})\n break\n case 1: \n setState({thermistor: false, transducer: true, general: false, relay: false})\n break\n case 2: \n setState({thermistor: false, transducer: false, general: true, relay: false})\n break\n case 3: \n setState({thermistor: false, transducer: false, general: false, relay: true})\n break\n default: \n setState({thermistor: true, transducer: false, general: false, relay: false})\n break\n }\n\n setNextTab(null)\n }\n\n const setUnsavedChangesStatus = (saved) => {\n setUnsavedChanges(saved)\n props.configChange(saved)\n }\n\n const closePopup = () => {\n props.setupIsTabOpen(false)\n }\n\n const goToNextTab = () => {\n setUnsavedChanges(false)\n props.setupIsTabOpen(false)\n tabSwitch(nextTab)\n }\n\n useEffect(() => {\n tabSwitch(props.currentTab)\n}, [props.refresh])\n\nuseEffect(() => {\nif(props.didConfigChange == false){\n setUnsavedChanges(false)\n}\n}, [props.didConfigChange])\n\n return (\n \n
\n \n \n\n
\n {/* \n {clickedOutside ? 'Bye!' : 'Hello!'}\n */}\n \n {Object.keys(wingnutDetails.config.sensors).length}/{schemaConfig.totalConfigurations} Inputs configured \n \n \n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n
\n :\n null\n }\n {\n state.transducer ?\n \n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n
\n :\n null\n }\n\n {\n state.general ? \n \n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n
\n :\n null\n }\n\n {\n state.relay ? \n \n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n props.updateSensor(s)} unsavedChanges={setUnsavedChangesStatus} addAlert={props.addAlert} removeAlert={props.removeAlert} checkAlert={props.checkAlert} alertSignal={props.alertSignal} isAuth={isAuth}/>\n
\n :\n null\n }\n \n
\n \n \n \n\n \n \n \n {wingnutStatus(WingnutStatus.Disconnected) && ( \n\n \n \n Wingnut Details \n Serial Number \n {wingnutDetails ? wingnutDetails.externalId : \"-\"} \n UUID Number \n {wingnutDetails ? wingnutDetails.id : \"-\"} \n Date Added \n {wingnutDetails && wingnutDetails.createdAt ? wingnutDetails.createdAt : \"-\"} \n \n \n Property Details \n Property Name \n {wingnutDetails && wingnutDetails.property ? wingnutDetails.property.config.name: \"-\"} \n Property ID \n {wingnutDetails && wingnutDetails.property ? wingnutDetails.property.externalId : \"-\"} \n Address \n {wingnutDetails && wingnutDetails.property ? `${wingnutDetails.property.config.address.streetAddress} ${wingnutDetails.property.config.address.city} ${wingnutDetails.property.config.address.provinceState} ${wingnutDetails.property.config.address.country} ${wingnutDetails.property.config.address.postalZip}` : \"-\"} \n \n {wingnutDetails && wingnutDetails.property && (\n \n Go to Property \n \n \n )}\n {wingnutDetails && wingnutDetails.property && (\n {\n if (wingnutDetails) {\n showPopup(1)\n }\n }}>\n Unlink Property \n \n )}\n \n Change Linked Property \n \n )}\n \n\n\n \n \n \n\n \n \n {setIsHovering(true)}}\n onMouseLeave={(e) => {setIsHovering(false)}}>\n Wingnut Configuration\n\n
\n \n {isConfigOpen ? \n \n showPopup(5)} style={{ visibility: isJustDesktopSize ? didConfigChange ? \"visible\" : 'hidden' : 'hidden'}}>DISCARD CHANGES \n \n SAVE CONFIGURATION \n \n \n :\n null\n }\n \n \n \n\n \n \n SAVE CONFIGURATION \n \n showPopup(5)} style={{ visibility: didConfigChange ? \"visible\" : 'hidden'}}>DISCARD CHANGES \n \n\n {isConfigOpen ?\n updateSensor(sensor)} \n configChange={configChange} \n addAlert={addAlert} \n removeAlert={removeAlert} \n checkAlert={checkAlert} \n alertSignal={alertSignal} \n alertArray={alertArray} \n discardChanges={discardChanges} \n trackCurrentTab={trackCurrentTab} \n currentTab={currentTab}/>\n :\n null\n }\n \n\n \n \n \n )\n}\n\nconst OuterContainer = styled.div`\n /* border: 1px red dashed; */\n`;\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n max-width: 1440px;\n display: flex;\n flex-direction: column;\n padding-bottom: 50px;\n padding-top: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusCard = styled.div`\n /* border: 1px green dashed; */\n width: 98%;\n height: auto;\n display: flex;\n flex-direction: column;\n border-radius: 10px;\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n padding: 20px 20px;\n width: 95%;\n margin-right: 0px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 10px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-right: 15px;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 20px;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 26px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst Line = styled.div`\n width: auto;\n height: 0.69px;\n background: ${COLORS.HighlightMedium};\n margin-bottom: 35px;\n `\n\nconst Line2 = styled(Line)`\n margin-top: 35px;\n`;\n\nconst DetailsContainer = styled.div`\n /* border: 1px white dashed;; */\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n /* padding-bottom: 27px; */\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n background-color: #0E1C36;\n display: flex;\n flex-direction: column;\n width: 50%;\n padding: 20px;\n border-radius: 10px;\n margin-right: 8px;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n width: 100%;\n padding-right: 100px;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetailsRight = styled.div`\n /* border: 1px white dashed; */\n background-color: #0E1C36;\n display: flex;\n width: 50%;\n flex-direction: column;\n padding: 20px;\n border-radius: 10px;\n margin-left: 8px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n margin-left: 0px;\n margin-top: 16px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h3`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n margin-top: 10px;\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 2px;\n`\n\nconst LinkContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n margin-top: 15px;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: flex-start;\n `}\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n margin-right: 30px;\n padding-top: 15px;\n padding-bottom: 15px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst LaunchIcon = styled.img`\n width: 9px;\n height: 9px;\n align-self: center;\n margin-right: 7.5px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n width: auto;\n height: auto;\n border: none;\n padding: 0px;\n background: transparent;\n cursor: pointer;\n color: ${COLORS.White};\n\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.Green};\n /* margin-right: 32px; */\n\n :hover {\n color: #63C085;\n }\n`\n\nconst ConfigParent = styled.div`\n /* border: 1px green dashed; */\n`;\n\nconst ConfigHeaderContainer = styled.div`\n /* border: 1px red dashed; */\n background-color: #0E1C36;\n /* padding: 20px; */\n border-radius: 10px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-content: center;\n margin-top: 15px;\n`\n\nconst ConfigContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 20px;\n border-radius: 10px;\n`;\n\nconst ConfigRightContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n`\n\nconst ArrowIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n`\n\nconst SaveConfigContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n`;\n\nconst SaveConfig = styled.button`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.White};\n background-color: #0E1C36;\n cursor: pointer;\n text-align: center;\n margin-right: 15px;\n :hover {\n opacity: 0.8;\n\n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SaveConfigMobileContainer = styled.div`\n /* border: 1px red dashed; */\n ${media.lessThan(\"743px\")`\n display: flex;\n flex-direction: row;\n background-color: #0E1C36;\n margin-top: -20px;\n margin-bottom: -40px;\n padding-left: 20px;\n border-radius: 10px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* display: none; */\n display: flex;\n flex-direction: row;\n background-color: #0E1C36;\n margin-top: -20px;\n margin-bottom: -10px;\n padding-left: 20px;\n border-radius: 10px;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst SaveConfig2 = styled(SaveConfig)`\n ${media.lessThan(\"743px\")`\n margin-top: 20px;\n margin-bottom: 20px;\n display: flex;\n background-color: #0E1C36;\n `}\n ${media.between(\"744px\", \"large\")`\n /* display: none; */\n margin-top: 20px;\n margin-bottom: 20px;\n display: flex;\n background-color: #0E1C36;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n /* display: none; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n /* display: none; */\n `}\n`\n\n\n\nconst ButtonText2 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n cursor: pointer;\n :hover {\n color: #63C085; \n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n `}\n `;\n\nconst ButtonText2Mobile = styled(ButtonText2)`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n cursor: pointer;\n :hover {\n color: #63C085; \n }\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst ButtonText3 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n cursor: pointer;\n :hover {\n color: #63C085;\n }\n ${media.lessThan(\"743px\")`\n display: inline;\n /* color: green; */\n align-self: flex-start;\n margin-bottom: 30px;\n width: 200px;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `} \n`;\n\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: COLORS.Primary,\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n}\n","import React, { useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport { useHistory } from \"react-router-dom\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { ValidatorStrings, ServerStrings, WingnutValidatorStrings } from \"./../util/VaildatorStrings\"\nimport { ErrorContainer, Icon, Error, EmptyError } from \"./../custom/ValidatorStyles\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n width: auto;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n width: 439px;\n display: flex;\n flex-direction: column;\n margin-top: 27px;\n margin-right: 83px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-right: 0px;\n margin-top: 30px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 384px;\n `}\n`\n\nconst HeaderText = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 22px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n margin-top: 6px;\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: 400;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 90%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n /* padding: 10px 20px; */\n align-self: flex-end;\n width: 170px;\n height: 45px;\n border: none;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 10px;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 13px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: black;\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nString.prototype.splice = function(idx, rem, str) {\n return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));\n};\n\n\nexport default function AddWingnutForm() {\n const history = useHistory()\n\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n setValue,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const { getSession, authenticateChangeEmail } = useContext(AccountContext)\n const [showSpinner, setShowSpinner] = useState(false)\n const [passwordShown, setPasswordShown] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [serverError, setServerError] = useState(null)\n const [isHovering, setIsHovering] = useState(false)\n\n const onSubmit = async (data) => {\n setServerError(null)\n setShowSpinner(true)\n setDisabled(true)\n\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: {\n wingnutId: data.uuid.toLowerCase()\n }\n }\n try {\n const response = await API.post('FrontendAPI-wingnuts', ``, init)\n if (response.success) {\n getSession().then(() => {\n history.push(`add/success/${data.uuid}`)\n })\n } else {\n setShowSpinner(false)\n setDisabled(false)\n setServerError(ServerStrings(\"InvalidWingnut\"))\n }\n } catch (error) {\n setShowSpinner(false)\n setDisabled(false)\n setServerError(ServerStrings(\"InvalidWingnut\"))\n }\n }\n\n const isUUID = (uuid) => {\n const regex = /^[0-9a-fA-F]{8}\\b-[0-9a-fA-F]{4}\\b-[0-9a-fA-F]{4}\\b-[0-9a-fA-F]{4}\\b-[0-9a-fA-F]{12}$/gi\n return regex.test(uuid)\n }\n\n const onUUIDChange = (e) => {\n e.preventDefault()\n var value = e.target.value\n\n var shouldDelete = true\n // if value starts with - it means another character was deleted\n if (value.substr(value.length - 1) == \"-\") {\n shouldDelete = false\n }\n\n // only want Hexidecimal Values\n value = value.replace(/[^a-fA-F0-9]+/g,'')\n\n if (value.length > 32) {\n value = value.slice(0, 32)\n }\n\n if (value.length > 19) {\n value = value.splice(20, 0, \"-\")\n }\n if (value.length > 15) {\n value = value.splice(16, 0, \"-\")\n }\n if (value.length > 11) {\n value = value.splice(12, 0, \"-\")\n } \n if (value.length > 7) {\n value = value.splice(8, 0, \"-\")\n }\n\n\n // Character deleted, remove dash and number behind dash\n if (!e.nativeEvent.data && value.substr(value.length - 1) == \"-\" && shouldDelete) {\n value = value.slice(0, -2)\n }\n\n setValue(\"uuid\", value.toLowerCase())\n }\n\n return (\n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image2 from \"./../../images/eye.svg\"\nimport Image from \"./../../images/ic_success.svg\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { HelpValidatorStrings } from \"./../util/VaildatorStrings\"\nimport {\n ErrorContainer,\n Icon,\n Error,\n EmptyError,\n SuccessContainer,\n SuccessIcon,\n Success,\n EmptySuccess,\n} from \"./../custom/ValidatorStyles\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n width: auto;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n width: 100%;\n max-width: 550px;\n display: flex;\n flex-direction: column;\n margin-top: 16px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n max-width: 520px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: flex-end;\n width: 189px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 0px;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n height: 55px;\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n /* border: 1px red dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: black;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Textarea = styled.textarea`\n resize: none;\n width: 100%;\n max-width: 550px;\n height: 219px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-size: 16px;\n font-weight: 400;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding: 10px;\n ::placeholder {\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n padding-top: 9px;\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n padding-top: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n max-width: 520px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function HelpForm() {\n const {\n register,\n handleSubmit,\n reset,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const { getSession } = useContext(AccountContext)\n const [showSpinner, setShowSpinner] = useState(false)\n const [success, setSuccess] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [validatorError, setValidatorError] = useState(null)\n\n const [state, setState] = useState({\n family_name: null,\n given_name: null,\n company: null,\n email: null,\n })\n\n useEffect(() => {\n getSession().then(({ family_name, given_name, company, email }) => {\n setState({ family_name, given_name, company, email })\n })\n }, [])\n\n useEffect(() => {\n if (success) {\n const timer = setTimeout(() => {\n setSuccess(false)\n }, 2000)\n return () => clearTimeout(timer)\n }\n }, [success])\n\n const onSubmit = async (data) => {\n setValidatorError(null)\n setSuccess(false)\n setDisabled(true)\n setShowSpinner(true)\n\n try {\n let result = await fetch(\n // \"https://10ww8j15w1.execute-api.us-east-2.amazonaws.com/prod/sendcontactus\", // info@spherescreative.com\n \"https://3qvbz9e2j8.execute-api.us-west-2.amazonaws.com/prod/messages\", // Wingnut\n {\n method: \"post\",\n mode: \"no-cors\",\n headers: {\n Accept: \"application/json\",\n \"Content-type\": \"application/json\",\n },\n body: JSON.stringify({\n fullname: state.given_name && state.family_name ? `${state.given_name} ${state.family_name}` : \"Name Unknown\",\n company: state.company ? state.company : \"Company Unknown\",\n email: state.email ? state.email : \"Email Unknown\",\n message: data.message,\n }),\n }\n )\n\n setShowSpinner(false)\n setSuccess(true)\n setDisabled(false)\n reset({ message: \"\" })\n setValidatorError(null)\n } catch (e) {\n console.log(\"Error\", e)\n setShowSpinner(false)\n setSuccess(false)\n setDisabled(false)\n setValidatorError(\"Unable to send message. Please try again\")\n }\n }\n\n return (\n \n \n \n )\n}\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport AddWingnutForm from \"../form/AddWingnutForm\"\nimport HelpForm from \"../form/HelpForm\"\n\nconst Container = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"744px\")`\n margin-left: 30px;\n margin-bottom: 30px;\n `}\n`\n\nconst HeaderText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: 600;\n font-size: 32px;\n line-height: 84.5%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst DateText = styled.p`\n width: 430px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n margin-top: 15px;\n`\n\nexport default class AddWingnut extends Component {\n render() {\n return (\n \n You can find the serial number and UUID on your Wingnut device \n \n )\n }\n}\n","export default __webpack_public_path__ + \"static/media/ic_link.da4111c0.svg\";","export default __webpack_public_path__ + \"static/media/ic_link_off.9c856195.svg\";","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport ImgWingnut from \"./../../images/ic_wingnuts_white.svg\"\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`\n\nconst WingnutDetails = styled.div`\n background: ${COLORS.Primary};\n border: 1px solid ${COLORS.HighlightMedium};\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 340px;\n flex-wrap: none;\n padding: 15px;\n ${media.lessThan(\"743px\")`\n padding-right: 0px;\n width: 100%;\n height: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 350px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n /* margin-top: 14px; */\n margin-bottom: 8px;\n`\n\nconst WingnutIcon2 = styled.img`\n width: 14px;\n height: 14px;\n margin-left: 10px;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst Title = styled.h3`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n margin-top: 13px;\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 1px;\n`\n\nconst BottomContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n width: auto;\n height: auto;\n border: none;\n /* border: 1px red dashed; */\n /* border-radius: 30px; */\n background: transparent;\n color: ${COLORS.White};\n cursor: pointer;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 20px;\n margin-left: -5px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 235px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.White};\n background: transparent;\n cursor: pointer;\n text-align: center;\n margin-top: 17px;\n align-self: flex-end;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nexport default function LinkWingnutDetails(props) {\n const {wingnutDetails} = props\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n Wingnut Details \n Serial Number \n {wingnutDetails.externalId} \n UUID Number \n {wingnutDetails.id} \n Date Added \n {wingnutDetails.createdAt.split(\" \")[0]} \n \n \n\n {props.onLeftSide ?\n props.hasProperty() ? \n \n BACK TO WINGNUT \n \n \n :\n null\n\n :\n \n GO TO WINGNUT \n \n \n }\n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgProperty from \"./../../images/ic_property_white.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`\n\nconst WingnutDetails = styled.div`\n background: ${COLORS.Primary};\n border: 1px solid ${COLORS.HighlightMedium};\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex-wrap: none;\n height: 340px;\n padding: 15px;\n ${media.lessThan(\"743px\")`\n padding-right: 0px;\n width: 100%;\n height: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* padding-right: 17px; */\n height: 340px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst WingnutIcon = styled.img`\n width: 23px;\n height: auto;\n margin-bottom: 8px;\n`\n\nconst WingnutIcon2 = styled.img`\n width: 12px;\n height: 12px;\n align-self: center;\n margin-left: 10px;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst WingnutDetailsRight = styled(WingnutDetails)`\n /* border: 1px green dashed; */\n padding-right: 0px;\n /* width: 50%; */\n`\n\nconst Title = styled.h3`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n margin-top: 13px;\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 1px;\n`\n\nconst BottomContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n width: auto;\n height: auto;\n border: none;\n /* border: 1px red dashed; */\n /* border-radius: 30px; */\n background: transparent;\n color: ${COLORS.White};\n cursor: pointer;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 20px;\n margin-left: -5px;\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 235px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.White};\n background: transparent;\n cursor: pointer;\n text-align: center;\n margin-top: 17px;\n align-self: flex-end;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nexport default function PropertyDetailsCard(props) {\n const { propertyDetails } = props\n\n return (\n \n \n \n {propertyDetails.config.name} \n Property ID \n {propertyDetails.externalId} \n Portfolio \n {propertyDetails.config.portfolio} \n Address \n {propertyDetails && `${propertyDetails.config.address.streetAddress} ${propertyDetails.config.address.city} ${propertyDetails.config.address.provinceState} ${propertyDetails.config.address.country} ${propertyDetails.config.address.postalZip}`} \n \n \n \n {props.onLeftSide ? \"BACK TO PROPERTY\" : \"GO TO PROPERTY\"} \n \n \n \n \n \n )\n}\n","import React, { useState, useContext, useEffect, useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport PlacesAutocomplete, {geocodeByPlaceId} from 'react-places-autocomplete';\nimport { COLORS } from \"../../styles/colors\";\n\nconst google = window.google\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 100%;\n` \n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function AddressSearch(props) {\n const { selectAddress, errors, defaultValue } = props\n const [address, setAddress] = useState(defaultValue)\n\n const handleChange = (value) => {\n setAddress(value)\n }\n\n const handleSelect = async (address, placeId, suggestion) => {\n setAddress(suggestion.formattedSuggestion.mainText)\n\n const [place] = await geocodeByPlaceId(placeId);\n const streetNumber = place.address_components.find(c => c.types.includes('street_number')) || undefined;\n const street = place.address_components.find(c => c.types.includes('route')) || undefined;\n const city = place.address_components.find(c => c.types.includes('locality')) || undefined;\n const country = place.address_components.find(c => c.types.includes('country')) || undefined;\n const province = place.address_components.find(c => c.types.includes('administrative_area_level_1')) || undefined;\n const postalCode = place.address_components.find(c => c.types.includes('postal_code')) || undefined;\n\n const newAddress = {\n city: city ? city.long_name : \"\",\n country: country ? country.long_name : \"\",\n postalZip: postalCode ? postalCode.long_name : \"\",\n provinceState: province ? province.short_name : \"\",\n streetAddress: (`${streetNumber ? streetNumber.long_name : \"\"} ${street ? street.short_name : \"\"}`).trim()\n }\n selectAddress(newAddress)\n }\n\n return (\n \n \n {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (\n \n
\n\n
\n\n {loading &&
Loading...
}\n \n {suggestions.map(suggestion => {\n const className = suggestion.active ?'suggestion-item--active': 'suggestion-item';\n\n return (\n
\n {suggestion.description} \n \n );\n })}\n
\n )\n}","import React, { useState, useContext, useEffect, useMemo } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport { AccountContext } from \"../../auth/Account\"\nimport { CognitoUserAttribute } from \"amazon-cognito-identity-js\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { SpinnerContainer, StyledSpinner } from \"../custom/Spinner\"\nimport {\n Error,\n EmptyError\n} from \"../custom/ValidatorStyles\"\nimport { ValidatorStrings } from \"../util/VaildatorStrings\"\nimport AddressSearch from \"./AddressSearch\"\nimport { useMediaQuery } from 'react-responsive'\nimport { COLORS } from \"../../styles/colors\"\nimport { API, Auth } from \"aws-amplify\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n width: 98%;\n max-width: 1048px;\n height: auto;\n background: #0e1c36;\n border-radius: 10px;\n padding: 35px 35px;\n align-content: center;\n margin-top: 20px;\n margin-bottom: 40px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n background: ${COLORS.Base};\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px red dashed; */\n /* width: 439px; */\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-top: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n max-width: 382px;\n /* width: 384px; */\n `}\n`\n\nconst HeaderText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White} ;\n margin-bottom: 11px;\n margin-top: 20px;\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n /* margin-top: 10px; */\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n max-width: 378px;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Input2 = styled(Input)`\n width: 96%;\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 10px\n `}\n`\n\nconst Input3 = styled(Input)`\n width: 100%;\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: flex-end;\n width: 160px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n text-align: center;\n letter-spacing: 0.05em;\n margin-top: 28px;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n height: 55px;\n width: 200px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n width: 200px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 13px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: #0c182f;\n :hover {\n color: ${COLORS.Base};\n }\n`\n\n\nconst OuterContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n `}\n`;\n\n\nconst SectionContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n min-width: 382px;\n max-width: 378px;\n margin-right: 20px;\n /* width: 50%; */\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst StatusIcon = styled.img`\n width: 23px;\n height: 23px;\n /* margin-bottom: 20px; */\n margin-top: 20px;\n`\n\nconst RowContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n max-width: 378px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ColumnContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n`\n\nconst HeaderText2 = styled(HeaderText)`\n margin-top: 0px;\n`;\n\nconst Line = styled.div`\n width: 100%;\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 21px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n /* width: 90% */\n margin-right: 0px;\n `}\n`\n\n// https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform\n\nexport default function AddProperty(props) {\n const {propertyData} = props\n\n const [address, setAddress]= useState()\n const isDesktopSize = useMediaQuery({ query: '(min-width: 1170px)' })\n\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n setValue,\n trigger,\n setError,\n clearErrors,\n formState: { errors, isSubmitSuccessful, isValid },\n } = useForm({ \n reValidateMode: \"onChange\",\n defaultValues: useMemo(() => {\n return props.propertyData;\n }, [props])\n })\n\n const checkForm = async (data) => {\n // Always run custom validation for externalId\n const externalIdError = await validateExternalId(data.externalId);\n\n if (externalIdError === true) {\n props.loadFormData(data);\n } else {\n // Set errors manually if validation fails\n if (externalIdError !== true) {\n setError(\"externalId\", {\n type: \"externalIdInvalid\",\n message: \"Property ID is not valid\",\n });\n }\n }\n};\n\n const selectAddress = (newAddress) => {\n setAddress(newAddress)\n setValue(\"street\", newAddress.streetAddress)\n setValue(\"city\", newAddress.city)\n setValue(\"provinceState\", newAddress.provinceState)\n setValue(\"postalZipCode\", newAddress.postalZip)\n setValue(\"country\", newAddress.country)\n }\n\n useEffect(() => {\n reset(props.propertyData);\n }, [props.propertyData])\n\n const validateExternalId = (value) => {\n return Auth.currentSession()\n .then(session => session.getIdToken())\n .then(token => token.getJwtToken())\n .then(jwt => {\n const init = { headers: { Authorization: `Bearer ${jwt}` } };\n return API.get('FrontendAPI-companies', `/external/${value}`, init);\n })\n .then(response => {\n if (response.success) {\n // console.log(\"DATA\", response.data);\n return true;\n } else {\n // console.log(\"Not Successful\", response.data);\n return \"Property ID is not valid\";\n }\n });\n};\n\n return (\n \n {props.linkView ? \n \n Add Property \n
\n :\n null\n }\n\n\n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport { Link, useHistory } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { useMediaQuery } from 'react-responsive'\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n max-width: 1260px;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding-bottom: 50px;\n padding-top: 18px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusCard = styled.div`\n /* border: 1px yellow dashed; */\n width: 90%;\n max-width: 744px;\n height: auto;\n display: flex;\n flex-direction: column;\n background: #0e1c36;\n border-radius: 10px;\n margin-bottom: 20px;\n padding: 35px 35px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n padding: 20px 20px;\n width: 95%;\n margin-right: 0px;\n align-self: center;\n background-color: transparent;\n\n `}\n ${media.between(\"744px\", \"large\")`\n width: 95%;\n padding: 25px 25px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderText = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 25px;\n`\n\nconst Line = styled.div`\n width: auto;\n height: 0.69px;\n background: ${COLORS.HighlightDark};\n margin-top: 30px;\n margin-bottom: 30px;\n`\n\nconst DetailsContainer = styled.div`\n display: flex;\n flex-direction: column;\n\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: flex-end;\n width: 189px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 0px;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n height: 55px;\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n /* border: 1px red dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: black;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 50%;\n margin-bottom: 29px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h3`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n margin-top: 10px;\n`\n\nconst InfoText = styled.h2`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n margin-top: 2px;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: column;\n width: auto;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst BtnConfirm = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 214px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n cursor: pointer;\n margin-top: 11px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: black;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 300px;\n height: 55px;\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n font-size: 15px;\n margin-right: 20px;\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 20px;\n `}\n`\n\n\nconst BtnEdit = styled(BtnConfirm)`\n background: transparent;\n :hover {\n background: ${COLORS.Secondary};\n opacity: 1;\n border: 1px solid #63c085;\n }\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\n\nexport default function AddPropertyConfirm(props) {\n const {form} = props\n \n const history = useHistory()\n const [isHovering, setIsHovering] = useState(false)\n const [isEditHovering, setIsEditHovering] = useState(false)\n\n const isDesktopSize = useMediaQuery({ query: '(min-width: 1170px)' })\n\n return (\n \n \n \n \n Confirm New Property Details \n Property Name \n {form.propertyName} \n Property ID \n {form.externalId} \n Portfolio \n {form.portfolio} \n Address \n {`${form.street} ${form.city} ${form.provinceState} ${form.country} ${form.postalZipCode}`} \n \n\n\n \n\n \n CONFIRM NEW PROPERTY \n {props.showSpinner && \n\n {props.backToEdit()}}>\n EDIT DETAILS \n \n \n \n \n \n )\n}\n","import React, { useState } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport AddWingnutForm from \"../form/AddWingnutForm\"\nimport Image2 from \"./../../images/ic_check_circle.svg\"\nimport Image3 from \"./../../images/ic_arrow_right.svg\"\nimport HelpForm from \"../form/HelpForm\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n margin-bottom: 30px;\n padding: 16px;\n `}\n`\n\nconst StatusCard = styled.div`\n /* border: 1px yellow dashed; */\n width: 90%;\n max-width: 744px;\n height: 476px;\n display: flex;\n flex-direction: column;\n background: #0e1c36;\n border-radius: 10px;\n margin-bottom: 20px;\n padding: 35px 35px;\n margin-right: 30px;\n margin-top: 20px;\n ${media.lessThan(\"743px\")`\n padding: 20px 20px;\n width: 95%;\n margin-right: 0px;\n align-self: center;\n background-color: transparent;\n\n `}\n ${media.between(\"744px\", \"large\")`\n width: 95%;\n padding: 25px 25px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\n\nconst Icon = styled.img`\n width: 35px;\n height: 35px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n margin-top: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 24px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BlurbText = styled.p`\n /* width: 430px; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n margin-top: 11px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n /* text-align: center; */\n width: 80%;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n height: auto;\n width: auto;\n margin-top: 22px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n align-self: flex-start;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst BtnLinkWingnut = styled.button`\n width: 191px;\n justify-content: center;\n align-items: center;\n height: 40px;\n border-radius: 30px;\n margin-right: 10px;\n border: none;\n color: ${COLORS.White};\n background: #63c085;\n cursor: pointer;\n text-align: center;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n margin-top: 10px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnProperty = styled(BtnLinkWingnut)`\n width: 191px;\n border-radius: 30px;\n background: transparent;\n border: 1px solid #63c085;\n margin-right: 10px;\n margin-top: 0px;\n :hover {\n background: ${COLORS.Secondary};\n opacity: 1.0;\n }\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n margin-top: 10px;\n /* width: 100%; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\nconst ButtonText = styled.p`\n color: black;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText2 = styled(ButtonText)`\n color: ${COLORS.White};\n :hover {\n color: ${COLORS.White};\n }\n`;\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function AddWingnutSuccess(props) {\n\n return (\n \n \n\n Success! \n Property successfully added. Link it to a Wingnut now to start collecting data. \n \n \n \n LINK WINGNUT\n \n \n \n \n \n GO TO PROPERTY\n \n \n \n \n \n\n \n )\n}\n","import React, {useState} from 'react'\nimport { API, Auth } from \"aws-amplify\"\nimport AddProperty from \"./../properties/AddProperty\"\nimport AddPropertyConfirm from \"./../properties/AddPropertyConfirm\"\nimport AddPropertySuccess from \"./../properties/AddPropertySuccess\"\n\nexport default function AddPropertyContainer(props) {\n\n const [showConfirm, setShowConfirm] = useState(false)\n const [showSuccess, setShowSuccess] = useState(false)\n const [propertyUUID, setPropertyUUID] = useState()\n const [showSpinner, setShowSpinner] = useState(false)\n const [disabled, setDisabled] = useState(false)\n\n const [propertyData, setPropertyData] = useState({\n propertyName: '',\n externalId: '',\n portfolio: '',\n street: '',\n city: '',\n provinceState: '',\n postalZipCode: ''\n })\n\n const loadFormData = (data) => {\n setPropertyData({\n propertyName: data.propertyName,\n externalId: data.externalId,\n portfolio: data.portfolio,\n street: data.street,\n city: data.city,\n provinceState: data.provinceState,\n postalZipCode: data.postalZipCode,\n country: data.country\n })\n setShowConfirm(true)\n }\n\n const submitData = async () => {\n setDisabled(true)\n setShowSpinner(true)\n const payload = {\n externalId: propertyData.externalId,\n config: {\n name: propertyData.propertyName,\n address: {\n city: propertyData.city,\n country: propertyData.country, \n postalZip: propertyData.postalZipCode,\n provinceState: propertyData.provinceState,\n streetAddress: propertyData.street\n },\n assests: {},\n portfolio: propertyData.portfolio\n }\n }\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { \n Authorization: `Bearer ${jwt}` \n },\n body: payload\n }\n\n try {\n const response = await API.post('FrontendAPI-properties', ``, init)\n if (response.success) {\n setDisabled(false)\n setShowSpinner(false)\n if(props.linkView == null){\n setShowSuccess(true)\n }\n setPropertyUUID(response.data.id)\n\n if (props.done) {\n props.done(response.data)\n }\n } else {\n setDisabled(false)\n setShowSpinner(false)\n }\n } catch (error) {\n setDisabled(false)\n setShowSpinner(false)\n }\n }\n\n const backToEdit = () => {\n setShowConfirm(false)\n setShowSuccess(false)\n }\n\n return (\n \n {showConfirm ?\n showSuccess ?\n props.linkView == null ?\n
\n :\n null\n :\n
\n :\n \n } \n \n \n Add New Property\n \n \n ), value: \"AddProperty\"})\n return options\n }\n\n const filterOptions = (filter) => {\n if (filter) {\n setSearchOptions(mapRawData(fuseSearch.search(filter).map((s) => s.item)))\n } else {\n setSearchOptions(mapRawData(fuseSearch.getIndex().docs))\n }\n }\n\n const onSelected = (item) => {\n if (item[0]) {\n\n if(item[0].value === \"AddProperty\"){\n props.toggleAddProperty()\n }\n setSelectedProperty(item[0])\n setIsSelected(true)\n } else {\n setSelectedProperty(null)\n setIsSelected(false)\n }\n }\n\n const pressLinkProperty = () => {\n if (selectedProperty) {\n props.linkProperty(selectedProperty.value)\n }\n }\n\n return (\n \n \n Select a Property \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}>\n onSelected(value)}\n options={searchOptions}\n values={[]}\n inputRenderer={\n ({ props, state, methods, inputRef }) => ( \n
\n\n \n LINK PROPERTY \n {props.disabled && \n\n \n \n )\n\n}\n\n\nconst Container = styled.div`\n /* border: 1px solid red; */\n display: flex;\n flex-direction: column;\n background: ${COLORS.Secondary};\n`\n\n// default color\n\nconst WingnutDetails = styled.div`\n background: ${COLORS.Primary};\n border: 1px solid ${COLORS.HighlightMedium};\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-wrap: none;\n padding: 15px;\n height: 340px;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n /* padding-right: 0px; */\n width: 100%;\n height: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 350px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutIcon = styled.img`\n width: 23px;\n height: auto;\n /* margin-top: 30px; */\n margin-bottom: 8px;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst StyledSelect = styled(Select)`\n height: 45px;\n color: ${COLORS.White};\n background: ${COLORS.Secondary};\n margin-top: 15px; \n\n ${media.lessThan(\"743px\")`\n /* width: 90%; */\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n\n .react-dropdown-select-clear,\n .react-dropdown-select-dropdown-handle {\n color: ${COLORS.White};\n height: 22px;\n }\n .react-dropdown-select-option {\n }\n .react-dropdown-select-item {\n }\n .react-dropdown-select-input {\n color: ${COLORS.White}; // cursor select\n }\n .react-dropdown-select-dropdown {\n background: ${COLORS.Secondary}; // card background\n border-radius: 8px;\n border: 1px solid ${COLORS.HighlightMedium};\n }\n .react-dropdown-select-item {\n color: ${COLORS.White}; // list item\n border-bottom: none;\n padding-top: 12px;\n padding-bottom: 12px;\n /* height: 60px; */\n font-size: 16px;\n :hover {\n background: ${COLORS.HighlightMedium};\n }\n }\n .react-dropdown-select-item.react-dropdown-select-item-selected{\n color: ${COLORS.White}; // selected item\n background: ${COLORS.HighlightMedium};\n border-bottom: none;\n }\n .react-dropdown-select-item.react-dropdown-select-item-active {\n //background: #111;\n /* border-bottom: 1px solid #333; */\n\n /* font-weight: bold; */\n\n }\n .react-dropdown-select-item.react-dropdown-select-item-disabled {\n /* color: #ccc; */\n }\n ::placeholder {\n color: red;\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.White};\n }\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 95%;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.Base};\n background: #63c085;\n cursor: pointer;\n text-align: center;\n margin-top: 17px;\n /* align-self: center; */\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n :hover {\n }\n`\n\nconst BtnAddProperty = styled.div`\n display: flex;\n flex-direction: row;\n border: none;\n background: transparent;\n padding-top: 5px;\n`;\n\nconst AddIcon = styled.img`\n width: 14px; \n height: 14px;\n align-self: center;\n margin-right: 8px;\n`;\n\nconst ButtonText2 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: #375D5A;\n`;\n\nconst Input = styled.input`\nbackground: transparent;\nborder: none;\noutline: none;\nwidth: 100%;\n/* height: 100%; */\ncolor: ${COLORS.White};\n/* font-family: \"Roboto Condensed\", sans-serif; */\n`;\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgYellow from \"./../../images/ic_status_yellow.svg\"\nimport ImgEye from \"./../../images/eye_blue.svg\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst HeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: auto;\n min-width: 300px;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-right: 0px;\n /* width: 250px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n align-content: flex-start;\n`\n\nconst StatusIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-right: 15px;\n margin-top: 3px;\n /* align-self: center; */\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst InfoText = styled.h2`\n /* width: 370px; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 6px;\n margin-right: 5px;\n ${media.lessThan(\"743px\")`\n /* width: 300px; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 300px; */\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: black;\n background: #63c085;\n cursor: pointer;\n text-align: center;\n /* margin-top: 22px; */\n ${media.lessThan(\"743px\")`\n margin-bottom: 50px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-bottom: 50px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nexport default function LinkWingnutHeader(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n\n {props.updateSuccess ?\n \n \n Success \n The Wingnut and property have been linked \n \n \n :\n \n \n Wingnut {props.wingnutId} \n Select which property you'd like to link to this Wingnut \n \n \n }\n\n\n\n\n \n )\n}\n","import React, { Component, useEffect, useState } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Connected from \"./../../images/ic_link.svg\"\nimport NotConnected from \"./../../images/ic_link_off.svg\"\nimport WingnutDetailsCard from \"./WingnutDetailsCard\"\nimport PropertyDetailsCard from \"./PropertyDetailsCard\"\nimport AddPropertyContainer from \"../properties/AddPropertyContainer\"\nimport LinkWingnutSelectProperty from \"./LinkWingnutSelectProperty\"\nimport LinkWingnutHeader from \"./LinkWingnutHeader\"\nimport MakeData from \"./MakeData\"\nimport { SpinnerContainer, StyledSpinner } from \"./../custom/Spinner\"\nimport { useMediaQuery } from 'react-responsive'\nimport { COLORS } from \"../../styles/colors\"\n\n\nexport default function LinkWingnutToProperty(props) {\n const {params} = props.match\n const [properties, setProperties] = useState([])\n const [wingnutDetails, setWingnutDetails] = useState()\n const [isLoading, setIsLoading] = useState(true)\n const [isOpen, setIsOpen] = useState(false)\n const [disabled, setDisabled] = useState(false)\n\n const isDesktopSize = useMediaQuery({ query: '(min-width: 744px)' })\n\n useEffect(() => {\n let cancelled = false\n\n async function getWingnutDetails() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n const response = await API.get('FrontendAPI-wingnuts', `/${params.id}`, init)\n if (response.success && !cancelled) {\n setWingnutDetails(response.data)\n }\n }\n\n async function getProperties() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n const response = await API.get('FrontendAPI-properties', ``, init)\n if (response.success && !cancelled) {\n setProperties(response.data)\n setIsLoading(false)\n }\n }\n\n getProperties()\n getWingnutDetails()\n return () => {\n cancelled = true\n }\n }, [])\n\n const hasProperty = () => {\n var hasProp = false\n\n if (wingnutDetails) {\n hasProp = wingnutDetails.config.hasOwnProperty('propertyId')\n }\n\n return hasProp\n }\n\n const linkProperty = async (id) => {\n setDisabled(true)\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: { propertyId: id }\n }\n\n const response = await API.post('FrontendAPI-wingnuts', `/${wingnutDetails.id}/link`, init)\n if (response.success) {\n setDisabled(false)\n var selectedProperty = properties.find(item => item.id == id)\n response.data.property = selectedProperty\n setWingnutDetails(response.data)\n }\n }\n\n const addProperty = (data) => {\n properties.push(data)\n setProperties(properties)\n toggleAddProperty()\n }\n\n const unlinkProperty = (data) => {\n }\n\n const toggleAddProperty = () => {\n if(isOpen){\n const element = isDesktopSize ? document.getElementById('top') : document.getElementById('navbar');\n element.scrollIntoView({ behavior: 'smooth' });\n setTimeout(() => {\n setIsOpen(false)\n }, 400)\n } else {\n setIsOpen(true)\n setTimeout(() => {\n const element = document.getElementById('add');\n element.scrollIntoView({ behavior: 'smooth' });\n }, 100)\n }\n }\n\n return (\n \n \n \n \n\n {hasProperty() \n ? unlinkProperty(e)} />\n }\n\n \n \n \n {wingnutDetails ? ( \n {hasProperty() ? \n {hasProperty() ? (\n \n ) : (\n linkProperty(id)} data={properties} toggleAddProperty={() => toggleAddProperty()}/>\n )}\n \n \n \n \n {isOpen &&
addProperty(data)}/>}\n \n \n )\n}\n\n\nconst OuterContainer = styled.div`\n /* border: 1px transparent dashed; */\n display: flex;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n`;\n\nconst Container = styled.div`\n /* max-width: 1260px; */\n /* height: 100%; */\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n padding-top: 18px;\n background-color: ${COLORS.Base};\n width: 90%;\n max-width: 1047px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusCard = styled.div`\n /* border: 1px yellow dashed; */\n width: auto;\n max-width: 1048px;\n min-height: 570px;\n height: auto;\n display: flex;\n flex-direction: column;\n background: #0e1c36;\n border-radius: 10px;\n margin-bottom: 20px;\n padding: 35px 35px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n padding: 20px 20px;\n width: 95%;\n margin-right: 0px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 95%;\n padding: 25px 25px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n /* flex-direction: column; */\n flex-wrap: wrap;\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst DetailsContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n /* width: 350px; */\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 340px;\n padding-bottom: 5px;\n ${media.lessThan(\"743px\")`\n width: 320px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutIcon = styled.img`\n width: 30px;\n height: 30px;\n margin-right: 30px;\n margin-left: 30px;\n margin-top: 110px;\n ${media.lessThan(\"743px\")`\n margin-top: 20px;\n margin-bottom: 20px;\n margin-right: 0px;\n margin-left: 155px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 20px;\n margin-bottom: 20px;\n margin-right: 0px;\n margin-left: 155px;\n /* align-self: center; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst EmptyContainer = styled.div`\n height: 53px;\n`\n\nconst Line = styled.div`\n /* width: 97.75%; */\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 14px;\n /* margin-right: 30px; */\n margin-bottom: 26px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { Link } from \"react-router-dom\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport ImgAlert from \"./../../images/ic_alert.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 496px;\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n padding-right: 0px;\n /* width: 100%; */\n `}\n ${media.between(\"744px\", \"large\")`\n padding-right: 17px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-bottom: 41px;\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-self: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 130%;\n text-align: center;\n color: ${COLORS.White};\n margin-top: 12px;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 53px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n :hover {\n opacity: 1;\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function UnlinkProperty(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n \n \n \n Are you sure you want to skip the configuration step? \n You can always configure the Wingnut from the Wingnut page \n \n \n YES \n \n \n \n NO \n \n\n \n \n \n )\n}\n","import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { Link } from \"react-router-dom\"\nimport AddWingnutForm from \"../form/AddWingnutForm\"\nimport Image2 from \"./../../images/ic_check_circle.svg\"\nimport Image3 from \"./../../images/ic_arrow_right.svg\"\nimport HelpForm from \"../form/HelpForm\"\nimport SkipConfigPopup from \"./../popup/SkipConfigPopup\"\nimport Modal from \"react-modal\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n margin-bottom: 30px;\n `}\n`\n\nconst Icon = styled.img`\n width: 35px;\n height: 35px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-top: 37.5px;\n margin-bottom: 12px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 24px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BlurbText = styled.p`\n /* width: 430px; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n margin-top: 12px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n text-align: center;\n width: 50%;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n height: auto;\n width: auto;\n margin-top: 39px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n align-self: center;\n `}\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 230px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.White};\n background: transparent;\n cursor: pointer;\n text-align: center;\n :hover {\n background: ${COLORS.Secondary};\n }\n ${media.lessThan(\"743px\")`\n /* align-self: flex-start; */\n margin-top: 10px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnConfigure = styled(BtnBack)`\n width: 230px;\n border-radius: 30px;\n background: #63c085;\n border: none;\n color: black;\n margin-right: 10px;\n :hover {\n opacity: 0.8;\n background: #63c085;\n }\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: COLORS.Primary,\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n}\n\n\nexport default function AddWingnutSuccess(props) {\n const {params} = props.match\n\n const [isHovering, setIsHovering] = useState(false)\n const [isModalOpen, setIsModalOpen] = useState(false)\n\n const closePopup = () => {\n setIsModalOpen(false)\n }\n\n return (\n \n \n \n \n\n \n Success! \n Wingnut successfully added. Configure it now to start collecting data. \n \n \n \n CONFIGURE WINGNUT\n \n \n \n\n setIsModalOpen(true)}>\n BACK TO WINGNUTS OVERVIEW \n \n\n \n \n
\n )\n}\n","export default __webpack_public_path__ + \"static/media/ic_portfolio.794bcc7a.svg\";","export default __webpack_public_path__ + \"static/media/ic_cities.dbf9ba37.svg\";","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgEye from \"./../../images/eye_blue.svg\"\nimport ImgEyeActive from \"./../../images/eye.svg\"\nimport ImgEyeOff from \"./../../images/ic_eye_off.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst StatusCard = styled.div`\n /* border: 1px red dashed; */\n width: 287px;\n height: 70px;\n /* min-width: 340px; */\n /* max-width: 380px; */\n /* min-height: 85px; */\n /* max-height: 90px; */\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n align-self: flex-end;\n background: #0e1c36;\n border-radius: 10px;\n margin-bottom: 17px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 90%;\n `}\n ${media.between(\"744px\", \"large\")`\n min-width: 300px;\n max-width: 300px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst LeftContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n`;\n\nconst StatusIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-left: 20px;\n margin-right: 20px;\n align-self: center;\n`\n\nconst CardTextContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n`\n\nconst CardHeader = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 12pt;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst CardNumber = styled.h1`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 32px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n text-transform: capitalize;\n color: ${COLORS.White};\n`\n\nconst EyeButton = styled.button`\n display: flex;\n width: 42px;\n height: 42px;\n border: 1px solid ${COLORS.Secondary};\n box-sizing: border-box;\n border-radius: 5px;\n background: #0e1c36;\n align-content: center;\n justify-content: center;\n margin-right: 30px;\n `\n\nconst EyeIcon = styled.img`\n /* border: 1px dashed red; */\n width: 24px;\n height: auto;\n align-self: center;\n justify-self: center;\n`\n\nexport default function PropertyStatusCard(props) {\n const [activeStatus, setActiveStatus] = React.useState(false)\n const [isHovering, setIsHovering] = React.useState(false)\n const [allOff, setAllOff] = React.useState(true)\n\n const toggleStatus = () => {\n setActiveStatus(!activeStatus)\n // tell Overview a status has been toggled\n props.toggleStatus(props.status)\n }\n\n useEffect(() => {\n if(props.state){\n if (!props.state.Live && !props.state.Disconnected && !props.state.Unlinked && !props.wingnutState.Unconfigured) {\n setAllOff(true)\n } else {\n setAllOff(false)\n }\n }\n })\n\n return (\n \n \n \n {props.status.key} Properties \n {props.count} \n \n \n\n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n style={{ background: activeStatus ? COLORS.Secondary : isHovering ? COLORS.Secondary : null }}\n >\n \n\n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgSearch from \"./../../images/ic_search.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport ImgPortfolio from \"./../../images/ic_portfolio.svg\"\nimport ImgCities from \"./../../images/ic_cities.svg\"\nimport WingnutStatus from \"./../wingnuts/WingnutStatus.enum\"\nimport WingnutStatusCard from \"./../wingnuts/WingnutStatusCard\"\nimport PropertyStatusCard from \"./PropertyStatusCard\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n background-color: ${COLORS.Base};\n height: auto;\n margin-bottom: 10px;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n max-height: 840px;\n align-items: center;\n padding-top: 30px;\n margin-right: 0px;\n justify-content: center;\n flex-direction: column-reverse;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column-reverse;\n height: auto;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: auto;\n max-width: 1500px;\n ${media.lessThan(\"743px\")`\n /* width: 80%; */\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: row;\n width: 90%;\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchContainerTop = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n width: 400px;\n /* max-width: 400px; */\n /* max-width: 400px; */\n ${media.lessThan(\"743px\")`\n margin-top: 10px;\n align-content: center;\n max-width: 400px;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 10px;\n width: 90%;\n max-width: 400px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n// wraps search bar/icon and instruction\nconst SearchBarContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n align-self: center;\n width: 100%;\n`\n// wraps search bar and search icon\n\nconst SearchBar = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n height: 50px;\n /* max-width: 600px; */\n outline: none;\n border: 1px solid ${COLORS.White};\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Primary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :focus {\n outline: ${COLORS.White};\n border: 2px solid ${COLORS.White};\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchIcon = styled.img`\n /* border: 1px red dashed; */\n height: 20px;\n width: 20px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -40px;\n margin-top: 15px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n max-width: 800px;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: auto;\n min-width: 360px;\n margin-bottom: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 90%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusPair = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: flex-end;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: auto;\n align-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-right: 8.5px;\n flex-direction: column;\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 8.5px;\n `}\n`\n\nconst StatusPairRight = styled(StatusPair)`\n ${media.between(\"744px\", \"large\")`\n margin-left: 8.5px;\n `}\n ${media.greaterThan(\"large\")`\n margin-left: 8.5px;\n `}\n\n`;\n\nconst StatusCard = styled.div`\n width: 287px;\n height: 70px;\n /* min-width: 340px; */\n /* max-width: 380px; */\n /* height: 40%; */\n /* min-height: 85px; */\n /* max-height: 90px; */\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n align-self: flex-end;\n background: #0e1c36;\n border-radius: 10px;\n margin-bottom: 17px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 90%;\n `}\n ${media.between(\"744px\", \"large\")`\n min-width: 300px;\n max-width: 300px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst LeftContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n`;\n\nconst StatusIcon = styled.img`\n width: 24px;\n height: auto;\n margin-left: 20px;\n margin-right: 20px;\n align-self: center;\n`\n\nconst CardTextContainer = styled.div`\n /* border: 1px red dashed; */\n width: 144px;\n display: flex;\n flex-direction: column;\n`\n\nconst CardHeader = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightMedium};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 12pt;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst CardNumber = styled.h1`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 32px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n text-transform: capitalize;\n color: ${COLORS.White};\n`\n\nconst ResultContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: auto;\n ${media.lessThan(\"743px\")`\n margin-top: 16px;\n margin-bottom: 16px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 10px;\n margin-left: 20px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchText = styled(CardHeader)`\n font-size: 14px;\n padding-top: 10px;\n ${media.lessThan(\"743px\")`\n font-size: 12px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 12px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultHeader = styled(CardHeader)`\n font-size: 14px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultNumber = styled(CardHeader)`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n letter-spacing: -0.01em;\n color: ${COLORS.White} ;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst EyeButton = styled.button`\n width: 42px;\n height: 42px;\n border: none;\n box-sizing: border-box;\n border-radius: 5px;\n background: #0e1c36;\n justify-self: end;\n pointer-events: none;\n :hover {\n background: ${COLORS.Secondary};\n }\n`\n\nconst EyeIcon = styled.img`\n width: 24px;\n height: 24px;\n`\nexport default function PropertyOverview(props) {\n const countPortfolio = () => {\n var portfolios = []\n props.tableData.forEach((item) => {\n if (item.portfolio) {\n const port = item.portfolio.trim() \n if (port !== \"\") {\n if (portfolios.indexOf(port) === -1) {\n portfolios.push(port)\n }\n }\n }\n })\n return portfolios.length\n }\n const countPropertyStatus = (hasWingnuts = true) => {\n const data = props.tableData.filter((item) => item.linkedWingnuts.length > 0 === hasWingnuts)\n return data.length\n }\n const countCities = () => {\n var cities = []\n props.tableData.forEach((item) => {\n if (item.address) {\n if (cities.indexOf(item.address.city) === -1) {\n cities.push(item.address.city)\n }\n }\n })\n return cities.length\n }\n\n return (\n \n \n \n \n \n Search by city name, wingnut serial number, property address, etc. \n \n \n Showing \n {props.tableData.length} Results \n \n \n \n \n \n \n \n Properties \n {props.tableData.length} \n \n \n \n \n \n \n Portfolios \n {countPortfolio()} \n \n \n \n \n \n \n \n \n Cities \n {countCities()} \n \n \n \n \n \n \n )\n}\n","import React, { useState, useEffect, useContext } from \"react\"\nimport { useTable, useSortBy } from \"react-table\"\nimport { COLORS } from \"../../styles/colors\"\nimport { AccountContext } from \"../../auth/Account\"\n\nfunction Table({ columns, data, columnsToHide }) {\n\n const { getSession } = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n // Use the state and functions returned from useTable to build your UI\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(\n {\n columns,\n data,\n initialState: {\n hiddenColumns: columnsToHide,\n },\n },\n useSortBy\n )\n\n // Render the UI for your table\n return (\n \n \n {headerGroups.map((headerGroup) => (\n \n {headerGroup.headers.map((column) => (\n \n {column.render(\"Header\")}\n \n ))}\n \n ))}\n \n \n {rows.map((row, i) => {\n prepareRow(row)\n return (\n \n {row.cells.map((cell) => {\n return (\n \n {cell.render(\"Cell\", {\n serial: row.original.serial,\n propertyUUID: row.original.uuid,\n propertyName: row.original.propertyName,\n portfolio: row.original.portfolio,\n propertyId: row.original.propertyId,\n address: row.original.address,\n toggleStatus: row.original.toggleStatus,\n notificationId: row.original.notificationId,\n entityStatus: row.original.entityStatus,\n alarmState: row.original.alarmState,\n linkedWingnuts: row.original.linkedWingnuts,\n isAuth: isAuth\n })}\n \n ) // YES\n })}\n \n )\n })}\n \n
\n )\n}\n\nexport default Table\n","export default __webpack_public_path__ + \"static/media/ic_alert_blue_light.22b71c8d.svg\";","export default __webpack_public_path__ + \"static/media/ic_notification_blue.5e738656.svg\";","import React, { Component, useEffect, useState } from 'react';\nimport styled from \"styled-components\"\nimport { COLORS } from '../../styles/colors';\n\n// Tri-state toggle switch used everywhere\n\nconst values = [0,2,1]\n\nexport default function ToggleTriState(props) {\n\n const [toggle, setToggle] = useState(props.toggle)\n\n const handleChange = () => {\n\n if(props.disable !== 0){\n switch(toggle){\n case 0:\n setToggle(1)\n props.updateToggle(1)\n break;\n case 1:\n setToggle(0)\n props.updateToggle(0)\n break;\n case 2:\n setToggle(0)\n props.updateToggle(0)\n break;\n }\n }\n };\n\n useEffect(() => {\n setToggle(props.toggle)\n }, [props.toggle])\n \n return (\n \n \n \n\n {}}/>\n handleChange()} selected={toggle} style={{cursor: props.disable === 0 ? 'default' : 'pointer'}}>0 \n\n {}}/>\n handleChange()} selected={toggle} style={{cursor: props.disable === 0 ? 'default' : 'pointer'}}>2 \n\n {}}/>\n handleChange()} style={{cursor: props.disable === 0 ? 'default' : 'pointer'}}>1 \n \n { toggle != null || toggle != undefined ? \n \n :\n null\n }\n \n \n \n \n );\n \n }\n\n const ToggleContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n `;\n\n const ToggleWrapper = styled.div`\n /* border: 1px blue dashed; */\n /* display: flex; */\n /* flex-direction: row; */\n\n\n `;\n\n // The Switch Parent\n export const Switch = styled.div`\n position: relative;\n height: 27px;\n width: 51px;\n border-radius: 30px;\n /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);; */\n border: ${COLORS.HighlightMedium} solid 1px;\n outline: none;\n\n ${props => props.selected === 0 &&`\n background-color: ${COLORS.Secondary};;\n `}\n\n ${props => props.selected === 1 &&`\n background-color: #63C085;;\n `}\n\n ${props => props.selected === 2 &&`\n background-color: #FBAC21;\n `}\n `;\n \n // Hide the ugly html switch\n export const SwitchRadio = styled.input`\n display: none;\n `;\n \n // Inside Circle \n export const SwitchSelection = styled.span`\n /* border: 1px blue solid; */\n display: block;\n position: absolute;\n z-index: 1;\n top: 5px;\n margin-left: 3px;\n width: 15px;\n height: 15px;\n background: ${COLORS.White};\n border-radius: 30px;\n transition: left 0.25s ease-out;\n\n ${props => props.selected === 0 &&`\n margin-left: 6px;\n\n `}\n ${props => props.selected === 2 &&`\n margin-left: 1px;\n\n `}\n ${props => props.selected === 1 &&`\n margin-left: -4px;\n `}\n `;\n \n\n // Handling the slide \n export const SwitchDiv = styled.label`\n /* border: 1px red solid; */\n position: relative;\n z-index: 2;\n float: left;\n width: 16px;\n line-height: 26px;\n font-size: 11px;\n color: rgba(0, 0, 0, 0.0);\n text-align: center;\n cursor: pointer;\n \n ${SwitchRadio}:checked + &{\n transition: 0.15s ease-out;\n }\n `;\n\n const ToggleTitle = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n letter-spacing: 0.03em;\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 130%;\n color: ${COLORS.White};\n margin-left: 8px;\n display: flex;\n align-self: center;\n `\n \n","import React, { useEffect, useState, useContext } from \"react\"\nimport media from \"styled-media-query\"\nimport styled from \"styled-components\"\nimport PropertyTable from \"./PropertyTable\"\nimport IconLaunch from \"./../../images/ic_launch_green.svg\"\nimport IconActive from \"./../../images/ic_status_green.svg\"\nimport IconAlert from \"./../../images/ic_alert.svg\"\nimport IconAlertBlue from \"./../../images/ic_alert_blue_light.svg\"\nimport IconNotification from \"./../../images/ic_notification_blue.svg\"\nimport IconUnconfigured from \"./../../images/ic_status_purple.svg\"\nimport { API, Auth } from \"aws-amplify\"\nimport IconSort from \"./../../images/ic_arrows_sort.svg\"\nimport { useHistory } from \"react-router-dom\"\nimport { Link } from \"react-router-dom\"\nimport ScreenSize from \"../wingnuts/ScreenSize.enum\"\nimport MediaQuery from \"react-responsive\"\nimport WingnutStatus from \"../wingnuts/WingnutStatus.enum\"\nimport { DateTime } from \"luxon\"\nimport { COLORS } from \"../../styles/colors\"\nimport ToggleTriState from './../notification/ToggleTriState'\n\n// Handle the highlevel table construction\nfunction PropertyTableStructure(props) {\n const history = useHistory()\n\n const [isHovering, setIsHovering] = useState(false)\n\n const updateToggle = async (toggle, notificationId) => {\n \n if(toggle !== null && notificationId !== null){\n var newConfig = {\n \"entityStatus\": \"\",\n }\n \n newConfig['entityStatus'] = toggle === 1 ? \"enabled\" : \"disabled\"\n\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: newConfig\n }\n const response = await API.post('FrontendAPI-notifications', `/${notificationId}`, init)\n if (response.success) {\n // success save\n } \n }\n }\n\n //----------------------------------------Custom Sort Functions\n const basicSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original[columnId]\n const b = rowB.original[columnId]\n if(a > b) return 1\n if (b > a) return -1\n return 0\n }\n}, [])\n\nconst addressSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original[columnId].streetAddress\n const b = rowB.original[columnId].streetAddress\n if (a > b) return 1\n if (b > a) return -1\n return 0\n }\n}, [])\n\nconst portfolioSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original[columnId]\n const b = rowB.original[columnId]\n const aId = rowA.original.propertyId\n const bId = rowB.original.propertyId\n if (a > b) return 1\n if (b > a) return -1\n if (aId > bId) return 1\n if (bId > aId) return -1\n return 0\n }\n}, [])\n\nconst linkedWingnutsSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original.linkedWingnuts.length\n const b = rowB.original.linkedWingnuts.length\n const aId = rowA.original.propertyId\n const bId = rowB.original.propertyId\n if (a > b) return 1\n if (b > a) return -1\n if (aId > bId) return 1\n if (bId > aId) return -1\n return 0\n }\n}, [])\n\nconst alarmStateSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original.alarmState\n const b = rowB.original.alarmState\n const aId = rowA.original.propertyId\n const bId = rowB.original.propertyId\n if (a > b) return 1\n if (b > a) return -1\n if (aId > bId) return 1\n if (bId > aId) return -1\n return 0\n }\n}, [])\n\nconst notificationEnableSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original.toggleStatus\n const b = rowB.original.toggleStatus\n const aId = rowA.original.propertyId\n const bId = rowB.original.propertyId\n if (a > b) return 1\n if (b > a) return -1\n if (aId > bId) return -1\n if (bId > aId) return 1\n return 0\n }\n}, [])\n\nconst statusSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original.linkedWingnuts.length > 0\n const b = rowB.original.linkedWingnuts.length > 0\n const aId = rowA.original.propertyId\n const bId = rowB.original.propertyId\n if (a > b) return 1\n if (b > a) return -1\n if (aId > bId) return -1\n if (bId > aId) return 1\n return 0\n }\n}, [])\n\n const tableColumns = React.useMemo(\n () => [\n {\n // Turned int function to get access to column props { props.column.isSorted ? props.column.isSortedDesc ? ' 🔽' : ' 🔼' : ''}\n Header: (props) => {\n return (\n \n Property ID \n \n \n \n )\n },\n accessor: \"propertyId\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '10%',\n Cell: (props) => {\n return (\n \n \n \n \n {props.row.original.propertyIdDisplay} \n \n \n \n )\n },\n // Cell: props => \n Property Name \n \n \n \n ),\n accessor: \"propertyName\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '20%',\n Cell: (props) => {\n return (\n \n \n \n \n {props.propertyName} \n \n \n \n )\n },\n },\n {\n Header: (\n \n Address \n \n \n \n ),\n accessor: \"address\",\n sortType: addressSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '30%',\n Cell: (props) => {\n return (\n \n {props.address && `${props.address.streetAddress} ${props.address.city} ${props.address.provinceState} ${props.address.country} ${props.address.postalZip}`} \n \n )\n },\n },\n {\n Header: (\n \n Portfolio \n \n \n \n ),\n accessor: \"portfolio\",\n sortType: portfolioSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '10%',\n Cell: (props) => {\n return (\n \n {props.portfolio} \n \n )\n },\n },\n {\n Header: (\n \n Linked Wingnuts \n \n \n \n ),\n accessor: \"linkedWingnuts\",\n sortType: linkedWingnutsSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '15%',\n Cell: (props) => {\n return (\n \n {props.value.map((item) => {\n return (\n \n \n \n \n
\n )\n })}\n \n )\n },\n },\n {\n Header: (\n \n . \n \n \n \n ),\n accessor: \"alert\",\n sortType: alarmStateSort,\n width: '5%',\n Cell: (props) => {\n return (\n \n {props.alarmState === \"ALARM\" \n ? \n )\n },\n },\n {\n Header: (\n \n . \n \n \n \n ),\n accessor: \"toggle\",\n sortType: notificationEnableSort,\n width: '5%',\n Cell: (props) => {\n return (\n \n updateToggle(e, props.notificationId)} />\n \n )\n },\n },\n {\n Header: (\n \n Status \n \n \n \n ),\n accessor: \"status\",\n sortType: statusSort,\n width: '10%',\n Cell: (props) => {\n return (\n \n 0 ? IconActive : IconUnconfigured} />\n \n )\n },\n },\n ],\n []\n )\n\n const hiddenColumns = (screenSize) => {\n // propertyId, propertyName, address, portfolio, linkedWingnuts, status\n var columnsToHide = []\n if (screenSize === ScreenSize.Medium) {\n // propertyId, propertyName, portfolio, linkedWingnuts, status\n columnsToHide = [\"address\", \"portfolio\"]\n }\n if (screenSize === ScreenSize.Small) {\n // propertyId, propertyName, status\n columnsToHide = [\"address\", \"portfolio\", \"linkedWingnuts\"]\n }\n return columnsToHide\n }\n\n const wingnutStatus = (item) => {\n if (item.config.latestPost) {\n var date = DateTime.utc()\n var apiDateTime = item.config.latestPost ? DateTime.fromFormat(item.config.latestPost, \"yyyy-MM-dd HH:mm:ss\") : DateTime.utc()\n var difference = date.diff(apiDateTime, 'minutes')\n if (difference.minutes > 15) {\n return WingnutStatus.Disconnected.value\n }\n } else {\n return WingnutStatus.Disconnected.value\n }\n\n if (item.config.propertyId === undefined) {\n return WingnutStatus.Unlinked.value\n }\n\n if (!(Object.keys(item.config.sensors).length > 0)) {\n return WingnutStatus.Unconfigured.value\n }\n\n return WingnutStatus.Live.value\n }\n\n return (\n \n \n \n \n\n \n \n\n \n \n \n \n )\n}\n\nexport default PropertyTableStructure\n\n\nconst Container = styled.div`\n /* border: 1px solid red; */\n overflow: auto;\n height: 100%;\n width: 100%;\n margin-top: 0px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-top: 0px; \n padding-left: 16px; \n padding-right: 16px; \n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 20px;\n width: 98%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Styles = styled.div`\n /* padding-top: 10px; */\n color: ${COLORS.White};\n overflow: none;\n\n table {\n border-spacing: 0;\n /* border: 1px solid blue; */\n\n thead {\n ${\"\" /* These styles are required for a scrollable body to align with the header properly */}\n overflow-y: auto;\n overflow-x: hidden;\n\n // Below create a fixed header - from here -> https://codesandbox.io/s/54z882qno4?file=/index.css:192-256\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n tbody {\n ${\"\" /* These styles are required for a scrollable table body */}\n overflow-y: scroll;\n overflow-x: hidden;\n }\n\n tr {\n :last-child {\n td {\n border-bottom: 1;\n }\n }\n }\n\n th,\n td {\n margin: 0;\n border-bottom: 1px solid ${COLORS.HighlightDark};\n\n :last-child {\n border-right: 0;\n }\n }\n }\n`\nconst HeaderDiv = styled.div`\n /* border: 1px red dashed;; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 5px;\n height: 45px;\n`\n\nconst CellDiv = styled.div`\n /* border: 1px green dashed;; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n position: relative;\n bottom: 1px;\n height: 45px;\n`\n\nconst WingnutDiv = styled.div`\n /* border: 1px purple dashed;; */\n /* height: 50px; */\n display: flex;\n flex-direction: row;\n`;\n\nconst ContentDiv = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n align-self: center;\n`;\n\nconst BtnIcon = styled.button`\n /* border: 1px green dashed; */\n background: transparent;\n /* outline: none; */\n border: none;\n`\n\nconst LinkedWingnut = styled.button`\n /* border: 1px green dashed;; */\n display: flex;\n width: 80px;\n background: ${COLORS.Primary};\n height: 24px;\n padding: 5px 15px;\n border-radius: 30px;\n border: none;\n /* margin-left: 1px; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 100%;\n z-index: 1;\n /* identical to box height, or 14px */\n\n letter-spacing: -0.01em;\n\n /* White */\n color: ${COLORS.White};\n :hover {\n color: ${COLORS.Primary};\n background: ${COLORS.White};\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderAlertIcon = styled.img`\n height: 18px;\n width: 18px;\n margin-right: 17px;\n ${media.lessThan(\"743px\")`\n margin-left: 3px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-left: 10px;\n `} */\n`\n\nconst HeaderNotificationIcon = styled.img`\n height: 25px;\n width: 25px;\n margin-right: 17px;\n ${media.lessThan(\"743px\")`\n margin-left: 3px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-left: 10px; */\n `} */\n`\n\nconst IconWingnut = styled(IconArrow)`\n margin-right: 8px;\n width: 12px;\n height: 12px;\n`\n\nconst SortIcon = styled.img`\n /* border: 1px red dashed; */\n width: 18px;\n height: 18px;\n position: relative;\n /* align-self: center; */\n top: 1px;\n margin-right: 10px;\n`\n\nconst Icon = styled.img`\n /* border: 1px red dashed; */\n width: 10px;\n height: 10px;\n position: relative;\n top: 1px;\n`\n\nconst ToolIcon = styled.img`\n /* border: 1px red dashed; */\n width: 18px;\n height: 18px;\n position: relative;\n top: 5px;\n`\n\nconst Text = styled.h5`\n /* border: 1px green dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 120%;\n display: flex;\n align-self: center;\n /* align-items: center; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\n\nconst HiddenText = styled(Text)`\n color: ${COLORS.Primary};\n`\n\nconst StaticText = styled(Text)`\n /* border: 1px green dashed; */\n padding-left: 5px;\n color: ${COLORS.HighlightLight};\n align-self: center;\n`\n\nconst StatusIcon = styled.img`\n /* border: 1px red dashed; */\n width: 10px; \n height: 10px;\n /* position: relative; */\n`\n\nconst CellStatusDiv = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n position: relative;\n`\n\nconst AlertIcon = styled.img`\n /* border: 1px red dashed;; */\n width: 20px; \n height: 20px;\n `\n\nconst CellAlertDiv = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n height: 40px;\n /* position: relative; */\n`\n\nconst CellToggleChildDiv = styled.div`\n /* border: 1px red dashed; */\n height: 19px;\n display: flex;\n justify-content: center;\n `\n\n\n\n\n\n\n// render different table column combinations based on screen size\n\n// React-table\n// https://retool.com/blog/building-a-react-table-component/\n// https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic?file=/src/App.js\n// https://codesandbox.io/s/cocky-poincare-b24mt?file=/src/App.js:123-157\n// https://stackoverflow.com/questions/65161059/how-to-load-images-in-react-table-from-json-file\n\n// Header search\n// https://codesandbox.io/s/react-table-select-uh3i0?file=/src/HeaderButton.js:66-219\n\n// Fuzzy search\n// https://codesandbox.io/s/dq9ou?file=/src/index.js\n// https://medium.com/analytics-vidhya/how-to-create-a-fuzzy-search-in-react-js-using-fuse-js-859f80345657\n// https://fusejs.io/demo.html\n// https://www.youtube.com/watch?v=GZl-yEz4_qw&t=214s&ab_channel=ColbyFayock\n\n// {\n// Header: 'Serial',\n// accessor: 'serial',\n\n// Cell: props => \n this.toggleStatus(s)}\n onInputChange={(e) => this.searchForProperty(e)}\n />\n { this.state.isLoading\n ? ( \n )\n }\n}\n","export default __webpack_public_path__ + \"static/media/ic_arrow_right_green_fill.38d28915.svg\";","import React, { useState, useContext, useEffect } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/ic_check_circle.svg\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport ErrorImage from \"./../../images/ic_alert.svg\"\nimport { SpinnerContainer, StyledSpinner } from \"../custom/Spinner\"\nimport { useMediaQuery } from 'react-responsive'\nimport {\n ErrorContainer,\n Icon,\n Error,\n EmptyError,\n} from \"../custom/ValidatorStyles\"\nimport { PhoneValidatorStrings, ValidatorStrings, ServerStrings } from \"../util/VaildatorStrings\"\nimport AddressSearch from \"./AddressSearch\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n /* width: 100%; */\n max-width: 1440px;\n height: auto;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n align-content: center;\n margin-top: -10px;\n margin-right: 20px;\n padding-left: 20px;\n padding-top: 20px;\n background: #0e1c36;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-right: 0px;\n `}\n`\n\nconst FormContainer = styled.div`\n /* border: 1px yellow dashed; */\n width: 50%;\n min-width: 379px;\n display: flex;\n flex-direction: column;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n min-width: 100%;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n width: 100%;\n margin-right: 0px;\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px red dashed; */\n width: 100%;\n max-width: 439px;\n display: flex;\n flex-direction: column;\n /* margin-top: 46px; */\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 100%;\n margin-top: 0px;\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 384px; */\n flex-direction: column;\n `}\n`\n\nconst HeaderText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 20px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 11px;\n margin-top: 20px;\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n /* margin-top: 2px; */\n margin-bottom: 2px;\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 100%;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst InputDisabled = styled(Input)`\n color: ${COLORS.HighlightLight};\n\n :hover {\n border: none;\n padding-left: 10px;\n }\n :focus {\n border: none;\n padding-left: 10px;\n }\n`\n\nconst Input2 = styled(Input)`\n width: 96%;\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 10px;\n `}\n`\n\nconst Input3 = styled(Input)`\n width: 100%;\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n width: auto;\n margin-top: 28px;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 20px;\n align-self: flex-start;\n width: 180px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n text-align: center;\n letter-spacing: 0.05em;\n margin-right: 10px;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n height: 55px;\n /* width: 200px; */\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n /* width: 200px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonCancel = styled(Button)`\n background: transparent;\n border: 1px solid #63c085;\n color: ${COLORS.White};\n :hover {\n background: ${COLORS.Secondary};\n opacity: 1;\n }\n ${media.lessThan(\"743px\")`\n margin-top: 10px;\n align-self: flex-start;\n height: 55px;\n /* width: 200px; */\n `}\n`;\n\nconst ButtonText = styled.p`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 13px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: #0c182f;\n :hover {\n color: ${COLORS.Base};\n }\n`\n\nconst ButtonText2 = styled(ButtonText)`\n color: ${COLORS.White};\n`;\n\nconst SectionContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst StatusIcon = styled.img`\n width: 23px;\n height: 23px;\n /* margin-bottom: 20px; */\n margin-top: 20px;\n`\n\nconst RowContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ColumnContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n`\n\nexport const SuccessContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n align-content: center;\n height: 40px;\n /* margin-top: 5px; */\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n `}\n`\n\nexport const SuccessIcon = styled.img`\n width: 20px;\n height: 20px;\n margin-right: 13px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport const Success = styled.p`\n /* border: 1px blue dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nexport const EmptySuccess = styled(Success)`\n /* border: 1px blue dashed; */\n /* margin-bottom: 50px; */\n height: 36px;\n`\n\nexport default function EditPropertyDetails(props) {\n const { propertyDetails, editOpen, updatePropertyDetails } = props\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n setValue,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const [success, setSuccess] = useState(false)\n const [disabled, setDisabled] = useState(false)\n\n const onSubmit = async (data) => {\n const { name, externalId, portfolio, street, city, provinceState, postalZipCode, country } = data\n setDisabled(true)\n\n const property = {\n externalId: externalId,\n config: {\n name: name,\n address: {\n city: city,\n country: country,\n postalZip: postalZipCode,\n provinceState: provinceState,\n streetAddress: street\n },\n assets: {}, // Unused for now\n portfolio: portfolio\n }\n }\n\n async function editProperty() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: property\n }\n const response = await API.post('FrontendAPI-properties', `/${propertyDetails.id}`, init)\n if (response.success) {\n setSuccess(true)\n }\n setDisabled(false)\n }\n\n editProperty()\n }\n\n const selectAddress = (newAddress) => {\n setValue(\"street\", newAddress.streetAddress)\n setValue(\"city\", newAddress.city)\n setValue(\"provinceState\", newAddress.provinceState)\n setValue(\"postalZipCode\", newAddress.postalZip)\n setValue(\"country\", newAddress.country)\n }\n\n const propertyIdValidation = (e) => {\n var value = e.target.value\n value = value.replace(/\\D/gm,'')\n setValue(\"externalId\", value)\n }\n\n useEffect(() => {\n if (success) {\n const timer = setTimeout(() => {\n setSuccess(false)\n }, 2000)\n return () => {\n clearTimeout(timer)\n editOpen(false)\n updatePropertyDetails()\n }\n }\n }, [success])\n\n return (\n \n \n \n )\n}\n","import React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport ImgAdd from \"./../../images/ic_add.svg\"\nimport Select from \"react-dropdown-select\"\nimport Fuse from \"fuse.js\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px dashed yellow; */\n display: flex;\n flex-direction: column;\n /* width: 100%; */\n width: 377px;\n ${media.lessThan(\"743px\")`\n width: 280px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n border: 1px solid ${COLORS.HighlightMedium};\n /* border: 1px solid red; */\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-wrap: none;\n ${media.lessThan(\"743px\")`\n\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\n\n\nconst StyledSelect = styled(Select)`\n height: 45px;\n color: ${COLORS.White};\n background: ${COLORS.Secondary};\n /* margin-top: 15px; */\n\n ${media.lessThan(\"743px\")`\n /* width: 90%; */\n /* height: 55px; */\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n /* height: 55px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n\n .react-dropdown-select-clear,\n .react-dropdown-select-dropdown-handle {\n color: ${COLORS.White};\n height: 22px;\n }\n .react-dropdown-select-option {\n }\n .react-dropdown-select-item {\n }\n .react-dropdown-select-input {\n color: ${COLORS.White}; // cursor select\n }\n .react-dropdown-select-dropdown {\n background: ${COLORS.Secondary}; // card background\n border-radius: 8px;\n border: 1px solid ${COLORS.HighlightMedium};\n }\n .react-dropdown-select-item {\n color: ${COLORS.White}; // list item\n border-bottom: none;\n padding-top: 12px;\n padding-bottom: 12px;\n /* height: 60px; */\n font-size: 16px;\n :hover {\n background: ${COLORS.HighlightMedium};\n }\n }\n .react-dropdown-select-item.react-dropdown-select-item-selected{\n color: ${COLORS.White}; // selected item\n background: ${COLORS.HighlightMedium};\n border-bottom: none;\n }\n .react-dropdown-select-item.react-dropdown-select-item-active {\n //background: #111;\n /* border-bottom: 1px solid #333; */\n\n /* font-weight: bold; */\n\n }\n .react-dropdown-select-item.react-dropdown-select-item-disabled {\n /* color: #ccc; */\n }\n ::placeholder {\n\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.White};\n }\n`\n\nconst Input = styled.input`\nbackground: transparent;\nborder: none;\n/* border: 1px solid red; */\noutline: none;\nwidth: 100%;\nheight: 45px;\n/* height: 100%; */\ncolor: ${COLORS.White};\n/* font-family: \"Roboto Condensed\", sans-serif; */\n`;\n\n\nconst fuzzyOptions = {\n threshold: 0.1,\n keys: [\"name\"],\n}\n\nexport default function NotificationEmployeeSelect(props) {\n const { data } = props\n const [isSelected, setIsSelected] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n const [input, setInput] = useState(\"\")\n const [searchOptions, setSearchOptions] = useState([])\n const fuseSearch = new Fuse(data, fuzzyOptions)\n\n useEffect(() => {\n setSearchOptions(mapRawData(data))\n }, [props])\n\n const mapRawData = (data) => {\n // Get all the Id's of Employees in view, don't show any in dropdown\n const viewEmployeeIds = []\n const viewEmployees = props.viewEmployees\n\n viewEmployees.forEach((item) => {\n viewEmployeeIds.push(item.id)\n })\n\n const filteredData = data.filter((item) => !viewEmployeeIds.includes(item.id))\n\n const options = filteredData.map((item) => (\n { key: item.id,\n label: item.name,\n value: item.id,}\n ) \n )\n\n return options\n }\n\n const filterOptions = (filter) => {\n if (filter) {\n setSearchOptions(mapRawData(fuseSearch.search(filter).map((s) => s.item)))\n setInput(filter)\n } else {\n setSearchOptions(mapRawData(fuseSearch.getIndex().docs))\n setInput(input.slice(0, -1))\n }\n }\n\n const onSelected = (item) => {\n if (item[0]) {\n // setSelectedProperty(item[0])\n // setIsSelected(true)\n props.addEmployee(item[0].value)\n setInput(\"\")\n } else {\n // setSelectedProperty(null)\n // setIsSelected(false)\n }\n }\n\n\n return (\n \n \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}>\n onSelected(value)}\n options={searchOptions}\n values={[]}\n inputRenderer={\n ({ props, state, methods, inputRef }) => ( \n
\n \n \n )\n\n}\n","import React from 'react'\nimport Icon from \"./../../images/ic_alert.svg\";\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { Error } from \"./../custom/ValidatorStyles\"\n\nconst IconAlertSm = styled.img`\n align-self: center;\n width: 11px;\n height: 11px;\n margin-bottom: 4px;\n margin-right: 6px;\n margin-top: 0px;\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n`;\n\nconst ErrorContainer = styled.div`\n display: flex;\n flex-direction: row;\n ${media.lessThan(\"743px\")`\n min-width: 250px;\n `}\n`;\n\nexport default function SensorCellAlertError(props) {\n\n return (\n \n {`Last measured value was ${props.alertValue ? Number(props.alertValue).toFixed(1) : 0} ${props.sensor.unit}`} \n \n )\n}\n","import React, {useState, useEffect, useContext} from 'react'\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ToggleTriState from './ToggleTriState'\nimport Icon from \"./../../images/ic_alert.svg\";\nimport { AccountContext } from \"../../auth/Account\"\nimport {FormatLabel} from \"./../util/FormatLabel\"\nimport SensorCellAlertError from './SensorCellAlertError'\n\nimport {\n EmptyError,\n Error,\n} from \"./../custom/ValidatorStyles\"\nimport { COLORS } from '../../styles/colors'\n\n// Notification I/O Cell\n\nexport default function SensorCell(props) {\n\n // const [sensor, setSensor] = useState(props.sensor)\n const [minError, setMinError] = useState(false)\n const [maxError, setMaxError] = useState(false)\n const [minRangeError, setMinRangeError] = useState(false)\n const [maxRangeError, setMaxRangeError] = useState(false)\n\n const [userMinValue, setUserMinValue] = useState(null)\n const [userMaxValue, setUserMaxValue] = useState(null)\n const [userToggle, setUserToggle] = useState(null)\n const [disableClear, setDisableClear] = useState(true)\n const [isButtonHovering, setButtonHovering] = useState(false)\n\n const { getSession } = useContext(AccountContext)\n\n\n const handleMinValueChange = (e) => {\n const value = e.target.value.replace(/[^0-9]/g, '');\n\n setDisableClear()\n props.configChanged(true)\n if(value.length < 4){\n if(value.length > 0){\n if(userMaxValue !== null && value >= userMaxValue){\n setMinError(true)\n props.setError(true, props.sensor.label, \"min\")\n } \n else {\n setMinError(false)\n props.setError(false, props.sensor.label, \"min\")\n }\n } else {\n // Reset to blank\n setUserMinValue(null);\n setMinError(false)\n props.setError(false, props.sensor.label, \"min\")\n }\n setUserMinValue(value ? value : null);\n }\n }\n\n const handleMaxValueChange = (e) => {\n const value = e.target.value.replace(/[^0-9]/g, ''); // filter letters out\n\n setDisableClear()\n props.configChanged(true)\n if(value.length < 4){\n if(value.length > 0){\n if(userMinValue !== null && value <= userMinValue){\n setMaxError(true)\n props.setError(true, props.sensor.label, \"max\")\n }\n else {\n setMaxError(false)\n props.setError(false, props.sensor.label, \"max\")\n }\n } else {\n // Reset to blank\n setUserMaxValue(null);\n setMaxError(false)\n props.setError(false, props.sensor.label, \"max\")\n }\n setUserMaxValue(value ? value : null);\n }\n };\n\n const updateToggle = (toggle) => {\n props.configChanged(true)\n setUserToggle(toggle)\n setDisableClear()\n }\n\n const clearNotification = () => {\n setUserToggle(null)\n setUserMinValue(null)\n setUserMaxValue(null)\n setMinError(false)\n setMaxError(false)\n setDisableClear(true)\n props.configChanged(true)\n props.updateSensor(props.sensor.label, null, null, null)\n }\n\n useEffect(() => {\n if(props.sensor){\n\n // ThresholdStatus is null for default values - if it's set then it's a User Notification\n if(props.sensor.thresholdStatus !== null){\n setUserMinValue(props.sensor.userMinValue)\n setUserMaxValue(props.sensor.userMaxValue)\n setUserToggle(props.sensor.thresholdStatus)\n setDisableClear(false)\n } \n }\n }, [props.sensor])\n\n const updateSensor = () => {\n if(props.sensor){\n if(userToggle !== null && userMinValue === null && userMaxValue === null){\n setUserMinValue(props.sensor.minValue)\n setUserMaxValue(props.sensor.maxValue)\n props.updateSensor(props.sensor.label, props.sensor.minValue, props.sensor.maxValue, userToggle)\n } else if(userToggle === null && userMinValue !== null && userMaxValue === null){\n setUserToggle(0)\n setUserMaxValue(props.sensor.maxValue)\n props.updateSensor(props.sensor.label, userMinValue, props.sensor.maxValue, 0)\n } else if(userToggle === null && userMinValue === null && userMaxValue !== null){\n setUserToggle(0)\n setUserMinValue(props.sensor.minValue)\n props.updateSensor(props.sensor.label, props.sensor.minValue, userMaxValue, 0)\n } else {\n props.updateSensor(props.sensor.label, userMinValue, userMaxValue, userToggle)\n }\n }\n }\n\n useEffect(() => {\n if(userToggle !== null || userMinValue !== null || userMaxValue !== null){\n updateSensor()\n }\n }, [userToggle, userMinValue, userMaxValue])\n\n return (\n\n \n {/* {`- ${props.breachCount} Breaches found in last 10 minutes -`} \n \n \n \n {FormatLabel(props.sensor && props.sensor.label ? props.sensor.label : \"\")} \n \n {/* FOR DEVELOPMENT TESTING */}\n\n \n \n \n \n {`Min ${props.sensor.unit ? props.sensor.unit : \"Value\"}`} \n \n \n { props.inAlert \n ? \n : minError \n ? {`Max value must be lower than min value`} \n : \n\n \n {`Max ${props.sensor.unit ? props.sensor.unit : \"Value\"}`} \n \n \n { props.inAlert \n ? {`Max value must be higher than min value`} \n : \n \n \n clearNotification()} \n disabled={props.isAuth ? !props.disable : disableClear}\n onMouseEnter={(e) => {\n setButtonHovering(true)\n }}\n onMouseLeave={(e) => {\n setButtonHovering(false)\n }}\n style={{display: props.isAuth ? \"block\" : \"none\", opacity: disableClear ? '0.5' : null, border: disableClear ? '1px solid #B6B6B6' : null, background: isButtonHovering ? COLORS.Secondary : null, pointerEvents: props.disable? \"auto\" : \"none\"}}>\n \n SET DEFAULTS\n \n \n \n )\n}\n\nconst ModeText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.ErrorOrange};\n padding-top: 10px;\n padding-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n max-width: 95%;\n text-wrap: wrap;\n text-align: center;\n\n `}\n`\n\nconst Container = styled.div`\n border: 1px solid ${COLORS.HighlightMedium};\n border-radius: 10px;\n padding: 30px;\n padding-top: 15px;\n display: flex;\n flex-direction: column;\n margin-bottom: 10px;\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px dashed red; */\n display: flex;\n flex-direction: row;\n margin-bottom: 20px;\n /* flex-wrap: wrap; */\n align-items: center;\n /* align-content: flex-start; */\n`\n\nconst SearchContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: start;\n width: auto;\n /* max-width: 1500px; */\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: row;\n /* width: 90%; */\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchContainerTop = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n max-width: 400px;\n width: 90%;\n ${media.lessThan(\"743px\")`\n margin-top: 10px;\n align-content: center;\n max-width: 400px;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-top: 10px; */\n width: 50%;\n max-width: 400px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n// wraps search bar/icon and instruction\nconst SearchBarContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n align-self: center;\n width: 100%;\n`\n// wraps search bar and search icon\n\n\nconst SearchBar = styled.input`\n /* border: 1px blue dashed; */\n width: 377px;\n height: 45px;\n outline: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n border: 1px solid transparent;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :focus {\n border: 1px solid ${COLORS.White};\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 95%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SectionHeader = styled.h2`\n font-family: 'Blinker';\n font-style: normal;\n font-weight: 400;\n font-size: 26px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: #FFFFFF;\n margin-top: 10px;\n margin-right: 30px;\n margin-left: 10px;\n`;\n\nconst SearchTitle = styled.h3`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightLight};\n /* margin-top: 10px; */\n`\n\nconst ToggleContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n align-self: center;\n margin-top: 10px;\n`;\n\nconst BtnConfirm = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n /* color: black; */\n background: transparent;\n cursor: pointer;\n text-align: center;\n margin-top: 12px;\n :hover {\n /* background: ${COLORS.Secondary}; */\n }\n ${media.lessThan(\"743px\")`\n margin-bottom: 5px;\n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-bottom: 50px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n :hover {\n }\n`\n\nconst TopContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n width: 100%;\n\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n min-width: 250px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`;\n\nconst IconAlert = styled.img`\n /* margin-right: 23px; */\n width: 23px;\n height: 23px;\n align-self: center;\n margin-top: 8px;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n`\n\n//------Remove\n\nconst IconAlertSm = styled(IconAlert)`\n width: 11px;\n height: 11px;\n margin-bottom: 4px;\n margin-right: 6px;\n margin-top: 0px;\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n`;\n\nconst ErrorContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* width: 100%; */\n\n /* flex-wrap: wrap; */\n ${media.lessThan(\"743px\")`\n min-width: 250px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`;","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport SensorCell from './SensorCell'\nimport { AccountContext } from \"../../auth/Account\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nexport default function NotificationConfiguration(props) {\n\n const [sensorDefaults, setSensorDefaults] = useState(props.sensorDefaults)\n const [errorArray, setErrorArray] = useState([])\n const {getSession} = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n const [alertLabels, setAlertLabels] = useState([])\n \n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n}, [])\n\n useEffect(() => {\n if(props.saveAll === true){\n saveConfiguration()\n }\n }, [props.saveAll])\n\n const saveConfiguration = async () => {\n\n var newThresholds = {}\n sensorDefaults.forEach((sensor)=> {\n if(sensor.thresholdStatus !== null && sensor.userMinValue !== null && sensor.userMaxValue !== null){\n newThresholds[`${sensor.label}`] = {\n max: `${sensor.userMaxValue}`, \n thresholdStatus: sensor.thresholdStatus === 1 ? \"enabled\" : \"disabled\", \n min: `${sensor.userMinValue}`\n }\n } \n })\n\n var newConfig = {\n \"entityStatus\": ``, // RIGHT HERE\n \"config\": {\n \"thresholds\": {},\n \"recipients\": {}\n }\n }\n\n newConfig['config'].recipients = props.recipients\n newConfig['entityStatus'] = props.disable === 1 || props.disable === 2 ? \"enabled\" : \"disabled\"\n newConfig['config'].thresholds = newThresholds\n\n if(props.notificationDetails[0]){\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: newConfig\n }\n\n const response = await API.post('FrontendAPI-notifications', `/${props.notificationDetails[0].id}`, init)\n if (response.success) {\n props.willRefreshAlerts()\n props.updateCurrentThresholds(newThresholds)\n } \n } \n}\n \n const setError = (isError, label, minOrMax) => {\n const errorName = label + minOrMax\n\n if(isError === true){\n // add error\n if(errorArray.some(error => error === errorName)){\n // error already been set\n } else {\n setErrorArray([...errorArray, errorName])\n }\n\n } else {\n // remove error\n let localArray = errorArray\n\n if(localArray.length !== 0){\n let index = localArray.findIndex(error => {\n return error === errorName\n })\n localArray.splice(index, 1)\n setErrorArray(localArray)\n }\n }\n }\n\n const configChanged = (val) => {\n // setDidConfigChange(val)\n props.isActiveChange(true)\n }\n\n const updateSensor = (label, min, max, thresholdStatus) => {\n var localToggles = []\n\n const updatedSensorDefaults = sensorDefaults.map(sensor => {\n if(sensor.label === label){\n return{...sensor,\n userMinValue: min? parseInt(min, 10) : min === 0 ? 0 : null,\n userMaxValue: max? parseInt(max, 10) : null,\n thresholdStatus: thresholdStatus\n }\n } \n return sensor \n })\n\n updatedSensorDefaults.forEach((sensor)=> {\n localToggles.push(sensor.thresholdStatus !== null ? sensor.thresholdStatus : 0)\n })\n setSensorDefaults(updatedSensorDefaults)\n }\n\n\n // Convert alerts to an array for quick lookup for sensorcell\n useEffect(() => {\n if(props.alerts){\n var alertLabels = []\n Object.keys(props.alerts).map((key) => {\n alertLabels.push(key)\n })\n setAlertLabels(alertLabels)\n }\n }, [props.alerts])\n\n return (\n\n \n\n {sensorDefaults && sensorDefaults.length !== 0 && sensorDefaults.map((sensorDefault, index) => {\n var inAlert = false\n var breachCount = 0\n var alertValue = null\n\n if(alertLabels.length !== 0){\n if(alertLabels.indexOf(sensorDefault.label) > -1 ){\n inAlert = true\n alertValue = props.alerts[sensorDefault.label]\n }\n }\n\n if(Object.keys(props.breaches).length !== 0){\n Object.keys(props.breaches).forEach(key => {\n if(key === sensorDefault.label){\n breachCount = props.breaches[key]\n }\n })\n }\n\n return \n )\n\n\n}\n\nconst Line = styled.div`\n width: 100%;\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 21px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n /* width: 90% */\n margin-right: 0px;\n `}\n`\n\nconst HeaderText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n margin-top: 30px;\n font-size: 26px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n /* margin-bottom: 22px; */\n`\nconst OuterContainer = styled.div`\n /* border: 1px red dashed;\n min-height: 1400px; */\n`;\n\nconst Container = styled.div`\n /* border: 1px transparent dashed; */\n`;\n\nconst SaveConfigContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row; \n justify-content: flex-end;\n margin-top: 10px;\n margin-bottom: -34px;\n z-index: 1;\n`;\n\nconst SaveConfig = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.White};\n background: #63c085;\n cursor: pointer;\n text-align: center;\n /* margin-right: 15px; */\n :hover {\n opacity: 0.8;\n\n }\n ${media.lessThan(\"743px\")`\n /* margin-bottom: 50px; */\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-bottom: 50px; */\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SaveConfig2 = styled(SaveConfig)`\n ${media.lessThan(\"743px\")`\n margin-top: 20px;\n margin-bottom: 20px;\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: black;\n`\n\nconst ButtonText2 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n cursor: pointer;\n :hover {\n color: #63C085; \n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n /* display: none; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n }\n`\n\nconst ButtonText3 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n z-index: 1;\n cursor: pointer;\n :hover {\n color: #63C085;\n }\n ${media.lessThan(\"743px\")`\n display: inline;\n /* color: green; */\n align-self: flex-start;\n width: 200px;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: COLORS.Primary,\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n}\n","import React from 'react'\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { Link } from \"react-router-dom\"\nimport WingnutStatus from \"../wingnuts/WingnutStatus.enum\"\nimport { DateTime } from \"luxon\"\nimport { COLORS } from '../../styles/colors'\n\n// Notification error page?\n\n\n\nexport default function NotificationNoConfiguration(props) {\n\n const wingnutStatus = (item) => {\n if (item.config.latestPost) {\n var date = DateTime.utc()\n var apiDateTime = item.config.latestPost ? DateTime.fromFormat(item.config.latestPost, \"yyyy-MM-dd HH:mm:ss\") : DateTime.utc()\n var difference = date.diff(apiDateTime, 'minutes')\n if (difference.minutes > 15) {\n return WingnutStatus.Disconnected.value\n }\n } else {\n return WingnutStatus.Disconnected.value\n }\n\n if (item.config.propertyId === undefined) {\n return WingnutStatus.Unlinked.value\n }\n\n if (!(Object.keys(item.config.sensors).length > 0)) {\n return WingnutStatus.Unconfigured.value\n }\n\n return WingnutStatus.Live.value\n }\n\n return (\n \n {props.isLinked ? \n \n This property has no configured wingnuts \n \n {props.propertyDetails && props.propertyDetails.linkedWingnuts.map((item, index) => {\n return (\n \n {(item.externalId).substr(0,4)} \n \n \n )\n })}\n \n \n :\n \n This property has no linked wingnuts \n \n \n LINK A NEW WINGNUT\n \n \n \n \n }\n
\n )\n}\n\nconst Container = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n margin-bottom: 19px;\n width: 95%;\n /* height: 100vh; */\n max-width: 1047px;\n background-color: #0e1c36;\n border-radius: 20px;\n /* padding: 34px; */\n /* margin-right: 30px; */\n /* margin-top: 20px; */\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n`\nconst WingnutContainer = styled.div`\n display: flex;\n flex-direction: row;\n margin-top: 7px;\n`\n\nconst BtnText2 = styled.p`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 100%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst BtnWingnut = styled.button`\n display: flex;\n flex-direction: row;\n /* justify-content: center; */\n align-items: center;\n padding: 5px 15px;\n border: none;\n width: 80px;\n height: 28px;\n background: ${COLORS.Secondary};\n border-radius: 30px;\n /* margin-right: 8px; */\n ${media.lessThan(\"743px\")`\n margin-bottom: 10px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-bottom: 10px;\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n &:hover {\n background: ${COLORS.White};\n ${BtnText2} {\n color: ${COLORS.Secondary};\n }\n }\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst IconWingnut = styled(IconArrow)`\n margin-right: 8px;\n width: 12px;\n height: 12px;\n`\n\nconst InstructionText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n line-height: 130%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 7px;\n font-size: 18px;\n padding-top: 19px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnConfigure = styled.button`\n width: 160px;\n border-radius: 30px;\n background: #63c085;\n border: none;\n color: black;\n margin-right: 10px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n height: 40px;\n margin-top: 10px;\n cursor: pointer;\n text-align: center;\n :hover {\n opacity: 0.8;\n background: #63c085;\n }\n ${media.lessThan(\"743px\")`\n /* align-self: flex-start; */\n height: 55px;\n margin-right: 0px;\n width: 180px;\n\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n width: 180px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnLink = styled(BtnConfigure)`\n width: 204px;\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n :hover {\n }\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`","export default __webpack_public_path__ + \"static/media/ic_phone.3cd89877.svg\";","export default __webpack_public_path__ + \"static/media/ic_email.5808eea5.svg\";","export default __webpack_public_path__ + \"static/media/ic_phone_blue.4991c8fa.svg\";","export default __webpack_public_path__ + \"static/media/ic_email_blue.a10fbff7.svg\";","import React, {useState, useEffect, useContext} from 'react'\nimport { AccountContext } from \"../../auth/Account\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgSearch from \"./../../images/ic_arrow_down_white.svg\"\nimport ImgPhone from \"./../../images/ic_phone.svg\"\nimport ImgEmail from \"./../../images/ic_email.svg\"\nimport ImgPhoneDark from \"./../../images/ic_phone_blue.svg\"\nimport ImgEmailDark from \"./../../images/ic_email_blue.svg\"\nimport ImgClose from \"./../../images/ic_close.svg\"\nimport MediaQuery from \"react-responsive\"\nimport { COLORS } from '../../styles/colors'\n\n// Employee to notify cell\n\nexport default function EmployeeCell(props) {\n\n const [employee, setEmployee] = useState(props.employee)\n\n const { getSession } = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n const removeEmployee = () => {\n props.removeEmployee(employee.id)\n }\n\n const toggleEmailNotification = () => {\n props.setEmail(employee.id, !employee.notifyByEmail)\n }\n\n const togglePhoneNotification = () => {\n props.setPhone(employee.id, !employee.notifyByPhone)\n }\n\n useEffect(() => {\n setEmployee(props.employee)\n }, [props.employee])\n\n return (\n \n \n {employee.name} \n\n \n \n {`${employee.email}`} \n {employee.phoneNumber} \n \n \n\n \n 25 ? 'column' : 'row'}}>\n {`${employee.email} |`} \n {employee.phoneNumber} \n \n \n\n \n \n \n \n \n )\n}\n\n\nconst EmployeeContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n margin-top: 20px;\n margin-right: 68px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n margin-right: 18px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst EmployeeTextContainer = styled.div`\n /* border: 1px white dashed; */\n display: flex;\n flex-direction: column;\n width: 280px; // width of container\n ${media.lessThan(\"743px\")`\n width: 190px; // min width when small\n `}\n`;\n\nconst NameText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n line-height: 130%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n font-size: 18px;\n margin-bottom: 1px;\n`;\n\nconst InfoTextContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n`;\n\nconst InfoTextContainerMobile = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n`;\n\n\nconst InfoText = styled.h3`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightMedium};\n margin-right: 3px;\n margin-bottom: 4px;\n`\n\nconst IconContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n`;\n\nconst Icon = styled.img`\n width: 16x;\n height: 16px;\n align-self: center;\n margin-right: 15px;\n cursor: pointer;\n`;\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport EmployeeCell from './EmployeeCell'\nimport NotificationEmployeeSelect from './NotificationEmployeeSelect'\nimport { AccountContext } from \"./../../auth/Account\"\nimport { COLORS } from \"../../styles/colors\"\n\n\n\nexport default function NotificationEmployee(props) {\n\n const {getSession } = useContext(AccountContext)\n const [employees, setEmployees] = useState([])\n const [viewEmployees, setViewEmployees] = useState([])\n const [recipients, setRecipients] = useState([])\n const [notificationDetails, setNotificationDetails] = useState([])\n const [selectDisabled, setSelectDisabled] = useState(true)\n\n const [isAuth, setIsAuth ] = useState(false)\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n useEffect(() => {\n if(props.saveAll === true){\n // saveConfiguration()\n }\n}, [props.saveAll])\n\n\n // Get all users for the company\n useEffect(() => {\n\n async function getAllEmployees() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n getSession().then(({ email }) => {\n \n API.get(\"FrontendAPI-users\", \"\", init)\n .then((response) => {\n if (response.success) {\n const mappedEmployees = response.data.filter(item => {\n var showEmployee = true\n if(item.entityStatus === 'verified'){\n // If logged in user is not @wingnutiot.ca, hide any @wingnutiot.ca users\n if(email !== null && email !== undefined && item.externalId !== null && item.externalId !== undefined){\n if(email.split(\"@\").pop() !== \"wingnutiot.ca\"){\n if(item.externalId.split(\"@\").pop() === \"wingnutiot.ca\"){\n showEmployee = false\n } \n }\n }\n } else {\n // not verified\n showEmployee = false\n } \n\n return (showEmployee)\n }).map((item, index) => {\n\n var formattedNumber = null\n\n if(item.config.phone){\n const trimNumber = item.config.phone.slice(2)\n formattedNumber = `(${trimNumber.substring(0, 3)}) ${trimNumber.substring(3, 6)}-${trimNumber.substring(6,10)}`\n }\n return {\n id: item.id,\n name: `${item.config.firstName ? item.config.firstName : \"NOT SET\" } ${item.config.lastName ? item.config.lastName : \"NOT SET\" }`,\n email: item.externalId,\n notifyByPhone: null,\n notifyByEmail: null,\n notifyBySlack: null,\n isSelected: null,\n phoneNumber: formattedNumber ? formattedNumber : \"NOT SET\"\n }\n })\n //-----\n setEmployees(mappedEmployees)\n getNotifications()\n }\n })\n .catch((error) => {\n console.error(\"THERE WAS ERROR\", error)\n })\n\n })\n }\n getAllEmployees()\n }, [props.propertyDetails])\n\n // Once employees load in, use PropertyDetails to get Notification Recipients\n const getNotifications = async () => {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n \n const response = await API.get('FrontendAPI-notifications', `?propertyId=${props.propertyDetails.id}`, init) \n if (response.success) {\n\n if(response.data[0] && response.data[0].config)\n \n setRecipients(props.notificationDetails[0].config.recipients)\n setNotificationDetails(response.data)\n } \n }\n\n // Use the notifications to update the employees\n useEffect(() => {\n if(employees.length !== 0){\n const filteredEmployees = employees.map((employee) => {\n\n recipients.forEach((recipient) => { \n if(employee.id === recipient.id){\n switch(recipient.type){\n case \"phone\":\n employee.notifyByPhone = true\n return \n case \"email\":\n employee.notifyByEmail = true\n return \n case \"slack\": \n employee.notifyBySlack = true\n return \n case \"selected\": \n employee.isSelected = true\n return \n }\n } \n })\n return employee\n })\n\n let localViewEmployees = []\n\n filteredEmployees.forEach((employee) => {\n if((employee.notifyByEmail || employee.notifyByPhone || employee.isSelected) ){\n localViewEmployees.unshift(employee) \n }\n })\n setEmployees(filteredEmployees)\n setViewEmployees(localViewEmployees)\n setSelectDisabled(false)\n updateConfiguration()\n }\n }, [recipients])\n\n const addEmployeeToView = (id) => {\n let localViewEmployees = [...viewEmployees]\n // props.isActiveChange(true)\n employees.forEach((employee) => {\n if(employee.id === id ){\n employee.isSelected = true\n localViewEmployees.unshift(employee) \n }\n })\n \n setViewEmployees(localViewEmployees)\n props.isActiveChange(true)\n updateConfiguration()\n }\n\n const removeEmployeeFromView = (id) => {\n let localEmployees = [...employees]\n props.isActiveChange(true)\n // set employee email notify to false\n let updatedEmployees = localEmployees.map((employee) => {\n if(employee.id === id){\n employee.notifyByEmail = false\n employee.notifyByPhone = false\n employee.isSelected = false\n } \n return employee\n })\n\n setEmployees(updatedEmployees)\n let localViewEmployees = [...viewEmployees]\n\n const filteredViewEmployees = localViewEmployees.filter((employee) => {\n return employee.id !== id \n })\n\n setViewEmployees(filteredViewEmployees)\n props.isActiveChange(true)\n updateConfiguration()\n }\n\n const setEmailNotification = (id, val) => {\n let localEmployees = [...employees]\n props.isActiveChange(true)\n let updatedEmployees = localEmployees.map((employee) => {\n if(employee.id === id){\n employee.notifyByEmail = val\n }\n return employee\n })\n\n setEmployees(updatedEmployees)\n updateConfiguration()\n props.isActiveChange(true)\n }\n\n const setPhoneNotification = (id, val) => {\n let localEmployees = [...employees]\n props.isActiveChange(true)\n let updatedEmployees = localEmployees.map((employee) => {\n if(employee.id === id){\n employee.notifyByPhone = val\n }\n return employee\n })\n setEmployees(updatedEmployees)\n updateConfiguration()\n props.isActiveChange(true)\n }\n\n const updateConfiguration = async () => {\n var newRecipients = []\n\n employees.forEach((employee)=> {\n\n if(employee.notifyByEmail === true){\n let emailRecipient = {\n id: employee.id ,\n type: \"email\", \n }\n newRecipients.push(emailRecipient)\n } \n\n if(employee.notifyByPhone === true){\n let phoneRecipient = {\n id: employee.id ,\n type: \"phone\", \n }\n newRecipients.push(phoneRecipient)\n } \n\n if(employee.isSelected === true){\n let phoneRecipient = {\n id: employee.id,\n type: \"selected\", \n }\n newRecipients.push(phoneRecipient)\n } \n })\n\n var newConfig = {\n \"config\": {\n \"recipients\": {}\n }\n }\n\n newConfig['config'].recipients = newRecipients\n\n props.updateRecipients(newRecipients)\n\n}\n\n return (\n \n Select who you want to notify \n \n \n \n { viewEmployees.count !== 0 ?\n viewEmployees.map(employee => {\n return (\n \n \n \n \n \n );\n })\n :\n null\n }\n \n \n )\n}\n\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 95%;\n /* max-width: 985px; */\n background-color: #0e1c36;\n margin-bottom: 63px;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst TitleText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n padding-top: 25px;\n color: ${COLORS.HighlightLight};\n`;\n\nconst SearchContainer = styled.div`\n /* border: 1px red dashed; */\n flex-direction: row;\n justify-content: start;\n width: 377px;\n max-width: 1500px;\n ${media.lessThan(\"743px\")`\n /* flex-direction: column; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* flex-direction: row; */\n /* width: 90%; */\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst OuterContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n /* flex-direction: column; */\n `}\n`;\n\nconst ColumnContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n`;","import React, { useEffect, useState, useContext } from \"react\"\nimport { AccountContext } from \"../../auth/Account\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ToggleTriState from './ToggleTriState'\nimport { SpinnerContainer, StyledSpinner } from \"../custom/Spinner\"\nimport { API, Auth } from \"aws-amplify\"\nimport NotificationEmployeeSelect from './NotificationEmployeeSelect'\nimport NotificationConfiguration from './NotificationConfiguration'\nimport NoConfiguration from './NotificationNoConfiguration'\nimport NotificationEmployee from './NotificationEmployee'\nimport { COLORS } from \"../../styles/colors\"\n\n/**\n * \n *Last thing I did was pass props notificationDetails and property into notification employee\n * So employee won't have to make db call\n * employee db call lifted into this component\n * lift config save call into this component\n * save everything all together\n */\n\n\nexport default function NotificationDetails(props) {\n\n const { params } = props\n const { getSession } = useContext(AccountContext)\n\n const [masterToggle, setMasterToggle] = useState(0)\n const [recipients, setRecipients] = useState([])\n const [isConfigured, setIsConfigured] = useState(null)\n const [isLinked, setIsLinked] = useState(null)\n const [propertyId, setPropertyId] = useState(null)\n const [isAuth, setIsAuth ] = useState(false)\n \n\n \n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n \n const updateMaster = async (val) => {\n setMasterToggle(val)\n props.isActiveChange(true)\n }\n\n const updateRecipients = async (val) => {\n setRecipients(val)\n // props.isActiveChange(true)\n }\n\n // Update master toggle\n useEffect(() => { \n if(props.notificationDetails && props.notificationDetails[0]){\n setMasterToggle(props.notificationDetails[0].entityStatus === \"enabled\" ? 1 : 0)\n }\n\n }, [props.notificationDetails])\n\n // Determine if Configured\n useEffect(() => {\n if(props.propertyDetails){\n setPropertyId(props.propertyDetails.id)\n // check for linked wingnuts\n if(props.propertyDetails.linkedWingnuts.length !== 0){\n // go inside each linked wingnut \n props.propertyDetails.linkedWingnuts.map(wingnut => {\n // check for any configured sensors\n setIsLinked(true)\n Object.keys(wingnut.config.sensors).map((key, index) => {\n // Only Analog inputs can have notifications\n if( key.substring(0,1) === \"A\"){\n return setIsConfigured(true)\n }\n })\n })\n } else {\n setIsConfigured(false)\n }\n }\n }, [props.propertyDetails])\n\n\n return (\n \n { isConfigured \n ? \n Enable notifications for this property \n \n \n
\n : isConfigured !== null || isLinked !== null \n ? \n )\n}\n\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n background-color: #0e1c36;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n padding: 20px;\n margin-right: 20px;\n margin-top: -8px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst Line = styled.div`\n width: 100%;\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 21px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst InstructionText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n line-height: 130%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 7px;\n font-size: 18px;\n padding-top: 20px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n","export default __webpack_public_path__ + \"static/media/ic_refresh.1bc5702b.svg\";","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport { COLORS } from \"../../styles/colors\"\nimport {FormatLabel} from \"./../util/FormatLabel\"\n\nexport default function AlertCard(props) {\n\n var number = Number(props.value)\n var rounded = number.toFixed(1)\n\n const formatUnit = () => {\n if(props.label){\n if (props.label.includes(\"Current\")){\n return `${rounded} A`\n } else if (props.label.includes(\"Pressure\")){\n return `${rounded} PSI`\n } else {\n return `${rounded} \\u00B0 F`\n }\n }\n }\n\n return (\n \n \n {FormatLabel(props.label)} \n {formatUnit()} \n \n {props.toggleNotificationDetails(false, props.label)}}>Open Threshold \n \n\n )\n}\n\n\nconst Card = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 105px;\n width: 266px;\n background: ${COLORS.Secondary};\n padding: 11.5px;\n border-radius: 5px;\n /* flex-grow: 1; */\n margin: 5px;\n margin-left: 0px;\n margin-right: 10px;\n`;\n\nconst TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst TitleText = styled.p`\n /* border: 1px blue dashed; */\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 15px;\n line-height: 96%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n /* width: 150px; */\n`;\n\nconst TempText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n color: ${COLORS.ErrorOrange};\n margin-top: 3px;\n`;\n\nconst BtnOpen = styled.button`\n /* border: 1px blue dashed; */\n outline: none;\n border: none;\n background: transparent;\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: flex-start;\n text-decoration-line: underline;\n color: ${COLORS.White};\n padding: 0px;\n`;","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport IconAlert from \"./../../images/ic_alert.svg\";\nimport IconRefreshBlue from \"./../../images/ic_refresh_blue.svg\";\nimport IconRefresh from \"./../../images/ic_refresh.svg\";\nimport AlertCard from \"./AlertCard\";\nimport { SpinnerContainer, StyledRelativeSpinner } from \"../custom/Spinner\"\n\n\nexport default function Alerts(props) {\n\n const [isFirstLoad, setIsFirstLoad] = useState(true)\n const [isRefresh, setIsRefresh] = useState(false)\n const [isRefreshAlertHovering, setIsRefreshAlertHovering] = useState(false)\n const [time, setTime] = useState(new Date());\n\n // DEV ONLY ONLY UNTIL WE FIND OUT IF WE SHOULD KEEP TIMER\n // REFRESH DATA ONCE A MINUTE\n useEffect(() => {\n const interval = setInterval(() => {\n setTime(new Date());\n }, 60000);\n return () => clearInterval(interval);\n }, []);\n //-------------------------------------------\n\n const manualRefresh = () => {\n props.willRefreshAlerts()\n setTime(new Date());\n }\n\n // Use notificationId to fetch the alarms\n useEffect(() => {\n let cancelled = false\n async function getAlertDetails() {\n setIsRefresh(true)\n\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { \n Authorization: `Bearer ${jwt}`\n },\n }\n const response = await API.get('FrontendAPI-thresholds', `/${props.notificationId}`, init) \n\n if (response.success && !cancelled) {\n props.updateBreaches(response.message)\n filterAlerts(response.data)\n // setTime(new Date());\n setIsRefresh(false)\n }\n\n }\n if(props.notificationId !== null){\n getAlertDetails()\n }\n\n return () => {\n cancelled = true\n }\n }, [props.notificationId, time, props.currentThresholds])\n\n\n const filterAlerts = (alerts) => {\n var filteredAlerts = {}\n\n if(alerts !== undefined && alerts !== null){\n\n let alertKeys = Object.keys(alerts)\n\n alertKeys.forEach((alertKey)=>{\n\n if(props.currentThresholds !== undefined && props.currentThresholds !== null ){\n const thresholds = props.currentThresholds[alertKey]\n const alertValue = Number(alerts[alertKey])\n // latest thresholds\n if(thresholds !== undefined && thresholds !== null){\n\n const {min, max, thresholdStatus} = thresholds\n\n if((alertValue > Number(max) || alertValue < Number(min)) && thresholdStatus === 'enabled'){\n\n const newAlerts = {\n ...filteredAlerts,\n [alertKey] : alertValue\n }\n\n filteredAlerts = newAlerts\n } \n }\n }\n })\n props.updateAlerts(filteredAlerts)\n setIsFirstLoad(false)\n }\n\n }\n\n // const lastUpdate = 'Last Update : ' + time.getHours() + ':' + time.getMinutes() + \":\" + time.getSeconds();\n const currentTime = 'Last Update : ' + time.toLocaleTimeString();\n const length = Object.keys(props.alerts).length\n\n return (\n \n \n { isFirstLoad\n ? \n
\n \n {`${length} Alarms Active`} \n {`${currentTime}`} \n \n {isRefresh \n ? {\n setIsRefreshAlertHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsRefreshAlertHovering(false)\n }}\n onClick={()=>{manualRefresh()}} \n src={isRefreshAlertHovering ? IconRefresh : IconRefreshBlue} \n style={{marginLeft: 20, width: 32, height: 32, cursor: 'pointer'}} /> \n }\n \n \n
\n {props.alerts \n ? Object.keys(props.alerts).map((alert, index)=>{\n return \n })\n : null\n }\n\n \n
\n \n )\n}\n\nconst OuterContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: 100%;\n `}\n `;\n\nconst Card = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n margin-right: 20px;\n margin-bottom: 15px;\n background: #0e1c36;\n border-radius: 10px;\n min-height: 80px;\n padding: 20px;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: 100%;\n align-self: center;\n padding: 20px 20px;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\n const HeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n margin-bottom: 20px;\n; `;\n\n const HeaderTextContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n `;\n\nconst HeaderText = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 26px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst UpdateText = styled.h5`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n /* line-height: 110%; */\n display: flex;\n align-items: center;\n /* letter-spacing: -0.01em; */\n color: ${COLORS.White};\n`\n\nconst InfoText = styled.h2`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 5px;\n`\n\nconst Icon = styled.img`\n margin-right: 23px;\n width: 23px;\n height: 23px;\n align-self: center;\n transition-duration: 0.5s;\n`\n\nconst AlertContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n width: auto;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n min-width: 250px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`;\n\nconst MiniSpinnerContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n width: 35px;\n height: 35px;\n justify-content: center;\n align-self: center;\n`","import React, { useEffect, useState, useContext, useRef } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport { Link } from \"react-router-dom\"\nimport media from \"styled-media-query\"\nimport IconNotify from \"./../../images/ic_notification_active.svg\"\nimport ImgArrowRightWhite from \"./../../images/ic_arrow_right_white.svg\"\nimport ImgArrowRight from \"./../../images/ic_arrow_right_blue.svg\"\nimport ImgArrowDown from \"./../../images/ic_arrow_down_white.svg\"\nimport NotificationDetails from \"./NotificationDetails\"\nimport { useMediaQuery } from 'react-responsive'\nimport { AccountContext } from \"../../auth/Account\"\nimport { COLORS } from \"../../styles/colors\"\nimport NotificationDefaults from './NotificationDefaults'\nimport Alerts from \"./../properties/Alerts\"\nimport NotificationSaveDiscard from \"./NotificationSaveDiscard\"\n\n\nexport default function NotificationThresholds(props) {\n\n const { getSession } = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n const [isEditNotificationHovering, setIsEditNotificationHovering] = useState(false)\n\n const [isHovering, setIsHovering] = useState(false)\n\n const [thresholds, setThresholds] = useState()\n const [activeThresholds, setActiveThresholds] = useState(0)\n const [sensorDefaults, setSensorDefaults] = useState([])\n \n const [activeChange, setActiveChange] = useState(false)\n const [refreshKey, setRefreshKey] = useState(0)\n\n const [saveAll, setSaveAll] = useState(false)\n const [saveAllPopup, setSaveAllPopup] = useState(false)\n const [discardAllPopup, setDiscardAllPopup] = useState(false)\n const [saveOrAbandonPopup, setSaveOrAbandonPopup] = useState(false)\n\n // ----------------------------------------------------\n const myRef = useRef();\n\n const handleClickOutside = e => {\n if(activeChange == true && saveAllPopup == false && discardAllPopup == false){\n if (!myRef.current.contains(e.target)) {\n setSaveOrAbandonPopup(true)\n }\n };\n }\n \n useEffect(() => {\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n });\n // ----------------------------------------------------\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n const isActiveChange = (val) => {\n setActiveChange(val)\n }\n\n const willRefreshData = () => {\n setRefreshKey(refreshKey + 1)\n isActiveChange(false)\n setSaveAll(false)\n setSaveAllPopup(false)\n setDiscardAllPopup(false)\n setSaveOrAbandonPopup(false)\n props.willRefreshAlerts()\n }\n\n const didPushSaveData = () => {\n isActiveChange(false)\n setSaveAll(true)\n setSaveAllPopup(false)\n setDiscardAllPopup(false) \n }\n\n const resetPopupState = () => {\n setSaveAll(false)\n setSaveAllPopup(false)\n setDiscardAllPopup(false)\n setSaveOrAbandonPopup(false)\n }\n\n const triggerSaveAllPopup = () => {\n setSaveAllPopup(true)\n } \n\n const triggerDiscardAllPopup = () => {\n setDiscardAllPopup(true)\n }\n \n // Use propertyDetails to get the default values for the thresholds\n useEffect(() => {\n var fetchedSensorDefaults = []\n if(props.propertyDetails){\n props.propertyDetails.linkedWingnuts.map(wingnut => {\n \n Object.keys(wingnut.config.sensors).map((key, sensorIndex) => {\n var sensor = wingnut.config.sensors[key]\n \n var sensorDefault = NotificationDefaults.find((notificationDefault) => {\n return notificationDefault.key === sensor.label.replace(/\\d+/g, '')\n }) \n \n // If default found and it's not a digital sensor\n if(sensorDefault && key.substring(0,1) === \"A\"){\n sensorDefault.id = sensorIndex\n sensorDefault.label = sensor.label\n fetchedSensorDefaults.push({...sensorDefault}) // pushed in as reference because array was overwriting values\n } \n })\n })\n setSensorDefaults(fetchedSensorDefaults)\n }\n }, [props.propertyDetails])\n \n // Use notificationDetails to get the users set thresholds\n useEffect(() => {\n if(props.notificationDetails){\n if( props.notificationDetails[0] && props.notificationDetails[0].config){\n setThresholds(props.notificationDetails[0].config.thresholds)\n } \n }\n }, [props.notificationDetails])\n \n // Use thresholds to get active thresholds\n useEffect(() => {\n if(thresholds){\n var active = 0\n Object.values(thresholds).map((value, sensorIndex) => {\n if(value.thresholdStatus === 'enabled'){\n active = active + 1\n }\n })\n setActiveThresholds(active)\n }\n }, [thresholds])\n \n // Use the Notification thresholds to update the configured sensorDefaults\n useEffect(() => {\n if(thresholds){\n var thresholdKeys = []\n \n // Gather the threshold keys into an array\n Object.keys(thresholds).map ((thresholdKey, index) => { \n thresholdKeys.push(thresholdKey)\n })\n \n // Map through the configured SensorDefaults\n var newState = sensorDefaults.map(obj => {\n \n // If a default is found in the thresholds array, update that default\n if(obj.label && thresholdKeys.includes(obj.label)){ \n return{...obj,\n userMinValue: parseInt(thresholds[obj.label].min, 10),\n userMaxValue: parseInt(thresholds[obj.label].max, 10),\n thresholdStatus: thresholds[obj.label].thresholdStatus === \"enabled\" ? 1 : 0\n }\n } \n return obj \n }) \n setSensorDefaults(newState)\n props.updateCurrentThresholds(thresholds)\n // setDisabled(false)\n \n }\n }, [thresholds]) // refresh here if needed\n\n\n const shouldToggleMenu = () => {\n if(activeChange == false){\n props.toggleNotificationDetails(props.isEditNotificationOpen, \"editThresholds\") \n }\n }\n\n return (\n \n {/*----LABEL NAME------ */}\n \n {setIsHovering(true)}}\n onMouseLeave={(e) => {setIsHovering(false)}}> \n \n {\n isAuth ? \"Edit Alarm Thresholds\" : \"Alarm Thresholds\"\n }\n \n \n\n {/*----SAVE DESKTOP----*/}\n \n\n {/*----NOTIFY ICON----*/}\n {/* { activeThresholds !== 0 \n ?\n \n \n \n {activeThresholds} \n \n \n :\n null\n } */}\n\n\n {/*----ARROW ICON----*/}\n {\n setIsEditNotificationHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsEditNotificationHovering(false)\n }}\n onClick={() => {props.toggleNotificationDetails(props.isEditNotificationOpen, \"editThresholds\")}} \n src={props.isEditNotificationOpen? ImgArrowDown : ImgArrowRightWhite} \n style={{ cursor: isEditNotificationHovering ? 'pointer' : null}}/>\n \n {/* */}\n \n \n\n {/*----SAVE MOBILE----*/}\n \n \n SAVE CONFIGURATION \n \n DISCARD CHANGES \n \n\n {props.isEditNotificationOpen && (\n \n )}\n \n )\n }\n\n\nconst HeaderText = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 26px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst EditDetailsContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n /* padding: 20px; */\n height: 69px;\n border-radius: 10px;\n margin-top: 15px;\n margin-right: 20px;\n background-color: #0e1c36;\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n `}\n`\n\nconst ConfigParent = styled.div`\n /* border: 1px green dashed; */\n`;\n\nconst ConfigContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 20px;\n border-radius: 10px;\n z-index: 0;\n`;\n\nconst RightContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* height: 100px; */\n`;\n\nconst ArrowIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n`\n\nconst SaveConfigContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst SaveConfigContainerMobile = styled(SaveConfigContainer)`\n /* border: 1px red dashed; */\n background: #0e1c36;\n height: 60px;\n margin-top: -10px;\n padding-left: 20px;\n ${media.lessThan(\"743px\")`\n display: flex;\n flex-wrap: wrap;\n min-height: 120px;\n padding-top: 20px;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n height: 10px;\n `}\n`;\n\nconst SaveConfig = styled.button`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 14px 40px;\n gap: 9px;\n width: 241px;\n height: 40px;\n border: 1px solid #63C085;\n border-radius: 30px;\n background: none;\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8; \n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SaveConfigMobile = styled(SaveConfig)`\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst BtnText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: flex;\n `}\n`\n\nconst BtnTextMobile = styled(BtnText)`\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst ButtonText2 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n cursor: pointer;\n :hover {\n color: #63C085; \n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: flex;\n `}\n `;\n\n const ButtonText2Mobile = styled(ButtonText2)`\n /* margin-left: 20px; */\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n `;\n\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport { Link } from \"react-router-dom\"\nimport media from \"styled-media-query\"\nimport ImgArrowRightWhite from \"./../../images/ic_arrow_right_white.svg\"\nimport ImgArrowRight from \"./../../images/ic_arrow_right_blue.svg\"\nimport ImgArrowDown from \"./../../images/ic_arrow_down_white.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\nimport Image6 from \"./../../images/ic_arrow_right_green_fill.svg\"\nimport EditPropertyDetails from \"./EditPropertyDetails\"\nimport NotificationThresholds from \"./../notification/NotificationThresholds\"\nimport WingnutStatus from \"../wingnuts/WingnutStatus.enum\"\nimport { DateTime } from \"luxon\"\nimport { useMediaQuery } from 'react-responsive'\nimport { AccountContext } from \"../../auth/Account\"\nimport { COLORS } from \"../../styles/colors\"\nimport Alerts from \"./Alerts\"\nimport Modal from \"react-modal\"\nimport PopupContainer from \"./../popup/PopupContainer\"\n\nexport default function PropertyDetail(props) {\n const { params } = props.match\n const isDesktopSize = useMediaQuery({ query: '(min-width: 744px)' })\n\n // const [isEditNotificationHovering, setIsEditNotificationHovering] = useState(false)\n\n const [propertyDetails, setPropertyDetails] = useState()\n const [notificationDetails, setNotificationDetails] = useState()\n const [alerts, setAlerts] = useState([])\n const [breaches, setBreaches] = useState({})\n const [currentThresholds, setCurrentThresholds] = useState()\n const [disable, setDisabled] = useState(true)\n const [notificationId, setNotificationId] = useState(null)\n const [isEditOpen, setIsEditOpen] = useState(false)\n const [isEditNotificationOpen, setIsEditNotificationOpen] = useState(false)\n const [formSubmitted, setFormSubmitted] = useState(false)\n\n const [isLoading, setIsLoading] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n const [isPropertyHovering, setIsPropertyHovering] = useState(false)\n const [isLinkedWingnutHovering, setIsLinkedWingnutHovering] = useState(false)\n const [isRemoveButtonHovering, setIsRemoveButtonHovering] = useState(false)\n\n const [refreshAlerts, setRefreshAlerts] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n\n const { getSession } = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n}, [])\n\n useEffect(() => {\n let cancelled = false\n\n async function getPropertyDetails() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n const response = await API.get('FrontendAPI-properties', `/${params.id}`, init)\n if (response.success && !cancelled) {\n setDisabled(false)\n setPropertyDetails(response.data)\n }\n }\n\n getPropertyDetails()\n return () => {\n cancelled = true\n }\n }, [formSubmitted])\n\n const closePopup = () => {\n setIsOpen(false)\n }\n\n const updatePropertyDetails = () => {\n setFormSubmitted(!formSubmitted)\n }\n\n const updateAlerts = (alerts) => {\n setAlerts(alerts)\n }\n\n const updateBreaches = (breaches) => {\n setBreaches(breaches)\n }\n\n const updateCurrentThresholds = (thresholds) => {\n setCurrentThresholds(thresholds)\n }\n\n const willRefreshAlerts = () => {\n setRefreshAlerts(!refreshAlerts)\n }\n\n const wingnutStatus = (item) => {\n if (item.config.latestPost) {\n var date = DateTime.utc()\n var apiDateTime = item.config.latestPost ? DateTime.fromFormat(item.config.latestPost, \"yyyy-MM-dd HH:mm:ss\") : DateTime.utc()\n var difference = date.diff(apiDateTime, 'minutes')\n if (difference.minutes > 15) {\n return WingnutStatus.Disconnected.value\n }\n } else {\n return WingnutStatus.Disconnected.value\n }\n\n if (item.config.propertyId === undefined) {\n return WingnutStatus.Unlinked.value\n }\n\n if (!(Object.keys(item.config.sensors).length > 0)) {\n return WingnutStatus.Unconfigured.value\n }\n\n return WingnutStatus.Live.value\n }\n\n const toggleNotificationDetails = (open, target) => {\n if(open){\n const element = isDesktopSize ? document.getElementById('top') : document.getElementById('cardTop');\n element.scrollIntoView({ behavior: 'smooth' });\n setTimeout(() => {\n setIsEditNotificationOpen(false)\n }, 400)\n } else {\n setIsEditNotificationOpen(true)\n setTimeout(() => {\n const element = document.getElementById(target);\n element.scrollIntoView({ behavior: 'smooth' });\n }, 100)\n }\n}\n\n const toggleDetails = () => {\n if(isRemoveButtonHovering == false){\n if(isEditOpen){\n const element = isDesktopSize ? document.getElementById('top') : document.getElementById('cardTop');\n element.scrollIntoView({ behavior: 'smooth' });\n setTimeout(() => {\n setIsEditOpen(false)\n }, 400)\n } else {\n setIsEditOpen(true)\n setTimeout(() => {\n const element = document.getElementById('edit');\n element.scrollIntoView({ behavior: 'smooth' });\n }, 100)\n }\n }\n }\n\n const openEditPropertyDetails = () => {\n if(disable !== true){\n setIsEditOpen(true)\n setTimeout(() => {\n const element = document.getElementById('edit');\n element.scrollIntoView({ behavior: 'smooth' });\n }, 100)\n }\n }\n\n // Use propertyDetails to fetch the notificationDetails\n useEffect(() => {\n let cancelled = false\n\n async function getNotificationDetails() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n \n if(propertyDetails){\n const response = await API.get('FrontendAPI-notifications', `?propertyId=${propertyDetails.id}`, init) \n if (response.success && !cancelled) {\n if(response.data[0] !== null && response.data[0] !== undefined){\n setNotificationId(propertyDetails.id)\n setNotificationDetails(response.data)\n }\n }\n } \n }\n getNotificationDetails()\n\n return () => {\n cancelled = true\n }\n }, [propertyDetails, refreshAlerts])\n\n return (\n \n \n \n \n \n\n {/*----------------Alerts Start---------- */}\n \n\n {/*----------------Property Details Start---------- */}\n\n \n \n \n Property Details \n \n \n \n Property Name \n {propertyDetails && propertyDetails.config.name} \n \n \n Portfolio \n {propertyDetails && propertyDetails.config.portfolio} \n \n \n \n \n Property ID \n {propertyDetails && propertyDetails.externalId} \n \n \n Date Created \n {propertyDetails && propertyDetails.createdAt ? propertyDetails.createdAt.split(\" \")[0] : \"-\"} \n \n \n Address \n {propertyDetails && `${propertyDetails.config.address.streetAddress} ${propertyDetails.config.address.city} ${propertyDetails.config.address.provinceState} ${propertyDetails.config.address.country} ${propertyDetails.config.address.postalZip}`} \n \n \n {\n setIsPropertyHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsPropertyHovering(false)\n }}>\n \n EDIT PROPERTY DETAILS\n \n \n
\n \n\n {/*----------------Linked Wingnuts Start---------- */}\n\n \n \n \n Linked Wingnuts \n \n \n \n {propertyDetails && propertyDetails.linkedWingnuts.map((item, index) => {\n return (\n \n \n {(item.externalId).substr(0,4)} \n \n\n GO TO WINGNUT \n \n \n )\n })}\n\n {propertyDetails && propertyDetails.linkedWingnuts.length === 0 ?\n \n No Wingnuts currently linked to this Property. \n You must link a wingnut to start collecting data. \n \n :\n null \n }\n\n \n
\n \n \n {\n setIsLinkedWingnutHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsLinkedWingnutHovering(false)\n }}>\n \n LINK A NEW WINGNUT\n \n \n \n
\n \n \n \n\n {/*----------------Edit Notification Start---------- */}\n\n
\n
\n \n !isLoading ? isRemoveButtonHovering ? setIsOpen(true) : toggleDetails() : null} \n style={{ cursor: !isLoading ? 'pointer' : 'default', background: isEditOpen ? null : isHovering ? COLORS.Secondary : null}}\n onMouseEnter={(e) => {setIsHovering(true)}}\n onMouseLeave={(e) => {setIsHovering(false)}}>\n \n Edit Property Details\n \n \n {setIsRemoveButtonHovering(true)}}\n onMouseLeave={(e) => {setIsRemoveButtonHovering(false)}}\n style={{opacity: isRemoveButtonHovering ? 0.8 : 1}}>\n REMOVE PROPERTY \n \n \n \n \n\n {isEditOpen && \n ( updatePropertyDetails()} />)\n }\n\n \n \n \n )\n}\n\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: COLORS.Primary,\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n}\n\nconst OuterContainer = styled.div`\n /* border: 1px red dashed; */\n`;\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n max-width: 1440px;\n display: flex;\n height: auto;\n flex-direction: column;\n background-color: ${COLORS.Base};\n margin-bottom: 20px;\n margin-top: 20px;\n`\n\nconst StatusCard = styled.div`\n /* border: 1px yellow dashed; */\n width: 100%;\n height: auto;\n display: flex;\n flex-direction: column;\n border-radius: 10px;\n margin-bottom: 20px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n width: 95%;\n margin-right: 0px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n`;\n\nconst HeaderText = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 26px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst Line = styled.div`\n width: auto;\n height: 0.69px;\n background: ${COLORS.HighlightMedium};\n margin-top: 30px;\n margin-bottom: 30px;\n`\n\nconst DetailsContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: row;\n `}\n`\n\n//------------------------\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n background: #0e1c36;\n display: flex;\n flex-direction: column;\n width: 50%;\n /* padding: 20px; */\n padding-bottom: 0px;\n border-radius: 10px;\n margin-right: 8px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\nconst DetailsInfo = styled.div`\n display: flex;\n flex-direction: column;\n padding: 20px;\n`;\n\nconst WingnutDetailsRight = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 50%;\n /* min-height: 200px; */\n background: #0e1c36;\n /* padding: 20px; */\n padding-bottom: 0px;\n border-radius: 10px;\n margin-left: 8px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n margin-left: 0px;\n max-width: 700px;\n margin-top: 16px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst DetailCell = styled.div`\n display: flex;\n flex-direction: row;\n width: 100%;\n ${media.lessThan(\"743px\")`\n flex-wrap: wrap;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-wrap: wrap;\n `}\n `;\n\nconst DetailTextCell = styled.div`\n display: flex;\n margin-bottom: 10px;\n flex-direction: column;\n width: 50%;\n`;\n\nconst Title = styled.h3`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n`\n\nconst InfoText = styled.h2`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 2px;\n`\n\n// const BtnLinkWingnut = styled.button`\n// display: flex;\n// flex-direction: row;\n// justify-content: center;\n// align-items: center;\n// padding: 14px 40px;\n// gap: 9px;\n// background: transparent;\n// width: 100%;\n// height: 40px;\n// border: 1px solid #63C085;\n// border-radius: 30px;\n// margin-right: 20px;\n// :hover {\n// background: ${COLORS.Secondary};\n// }\n// `;\n\nconst BtnEditProperty = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 14px 40px;\n background: transparent;\n width: 100%;\n height: 49px;\n border: none;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n background: ${COLORS.Secondary};\n`;\n\nconst BtnLinkWingnut = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 14px 40px;\n background: transparent;\n width: 100%;\n height: 49px;\n border: none;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n background: ${COLORS.Secondary};\n`;\n\nconst BtnWingnutContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n margin-bottom: 15px;\n margin-top: 20px;\n `}\n /* justify-content: center; */\n`\n\n\nconst WingnutContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n width: 50%;\n min-width: 225px;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n\n `}\n`;\n\nconst WingnutLabel = styled.p`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 100%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\n\nconst ButtonText = styled.p`\n /* border: 1px red dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n /* width: 170px; */\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnText2 = styled.p`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n width: auto;\n height: auto;\n border: none;\n padding: 0px;\n background: transparent;\n cursor: pointer;\n color: ${COLORS.White};\n\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.Green};\n margin-left: 15px;\n\n :hover {\n color: #63C085;\n }\n`\n\nconst WingnutTag = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 5px 15px;\n border: none;\n width: 105px;\n height: 43px;\n background: ${COLORS.Secondary};\n border-radius: 30px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst NoWingnutContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst NoWingnutText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: italic;\n font-weight: 300;\n font-size: 16px;\n line-height: 130%;\n color: ${COLORS.White};\n`;\n\nconst IconWingnut = styled.img`\n margin-right: 8px;\n width: 12.77px;\n height: 12.77px;\n align-self: center;\n transition-duration: 0.5s;\n`\n\nconst IconProperty = styled.img`\n /* border: 1px blue dashed; */\n width: 23px;\n height: 23px;\n align-self: center;\n justify-self: center;\n margin-right: 23px;\n transition-duration: 0.5s;\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"medium\")`\n `}\n ${media.between(\"medium\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst EditDetailsContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n /* padding: 20px; */\n height: 69px;\n border-radius: 10px;\n margin-top: 15px;\n margin-right: 20px;\n background-color: #0e1c36;\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n `}\n`\n\nconst ConfigContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 20px;\n border-radius: 10px;\n`;\n\nconst RightContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n align-content: center;\n`;\n\nconst EditNotifyHeader = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n`;\n\nconst BtnRemoveProperty = styled.button`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.White};\n background-color: #0E1C36;\n cursor: pointer;\n text-align: center;\n margin-right: 15px;\n align-self: center;\n ${media.lessThan(\"743px\")`\n /* display: none; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* display: none; */\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonPropertyText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n /* display: none; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n /* display: none; */\n `}\n`\n\nconst ArrowIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n`\n\nconst NotifyContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center; \n margin-right: 22px;\n`;\n\nconst NotifyIcon = styled.img`\n width: 25px;\n align-self: center;\n margin-right: 9px;\n`;\n\nconst NotifyTag = styled.div`\n display: flex;\n flex-direction: column;\n /* justify-content: center; */\n align-content: center;\n /* padding: 0px 12px; */\n /* gap: 10px; */\n width: 32px;\n height: 18px;\n background: ${COLORS.White};\n border-radius: 100px;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst NotifyText = styled.p`\n /* border: 1px red dashed; */\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-self: center;\n margin-top: 0.5px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.Base};\n`;\n\n\nconst SaveConfigContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst SaveConfigContainerMobile = styled(SaveConfigContainer)`\n /* border: 1px red dashed; */\n background: #0e1c36;\n height: 60px;\n margin-top: -10px;\n padding-left: 20px;\n ${media.lessThan(\"743px\")`\n display: flex;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n height: 10px;\n `}\n`;\n\nconst SaveConfig = styled.button`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 14px 40px;\n gap: 9px;\n width: 241px;\n height: 40px;\n border: 1px solid #63C085;\n border-radius: 30px;\n background: none;\n align-self: center;\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SaveConfigMobile = styled(SaveConfig)`\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst BtnText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: flex;\n `}\n`\n\nconst BtnTextMobile = styled(BtnText)`\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`;\n\nconst ButtonText2 = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n color: ${COLORS.White};\n text-align: center;\n align-self: center;\n margin-right: 15px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n transition-duration: 0.5s;\n cursor: pointer;\n :hover {\n color: #63C085; \n }\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n /* display: none; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n `;\n\n const ButtonText2Mobile = styled(ButtonText2)`\n margin-left: 20px;\n ${media.lessThan(\"743px\")`\n display: flex;\n `}\n ${media.between(\"744px\", \"large\")`\n display: flex;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n `;\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\nimport Select from \"react-dropdown-select\"\nimport Fuse from \"fuse.js\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { AccountContext } from \"../../auth/Account\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n background: ${COLORS.Secondary};\n`\n\nconst WingnutDetails = styled.div`\n background: ${COLORS.Primary};\n border: 1px solid ${COLORS.HighlightMedium};\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-wrap: none;\n padding: 15px;\n height: 340px;\n ${media.lessThan(\"743px\")`\n padding-bottom: 27px;\n /* padding-right: 0px; */\n width: 100%;\n height: 350px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 350px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutIcon = styled.img`\n width: 24px;\n height: 24px;\n /* margin-top: 30px; */\n margin-bottom: 8px;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst StyledSelect = styled(Select)`\n height: 45px;\n color: ${COLORS.White};\n background: ${COLORS.Secondary};\n margin-top: 15px; \n\n ${media.lessThan(\"743px\")`\n /* width: 90%; */\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n\n .react-dropdown-select-clear,\n .react-dropdown-select-dropdown-handle {\n color: ${COLORS.White};\n height: 22px;\n }\n .react-dropdown-select-option {\n }\n .react-dropdown-select-item {\n }\n .react-dropdown-select-input {\n color: ${COLORS.White}; // cursor select\n }\n .react-dropdown-select-dropdown {\n background: ${COLORS.Secondary}; // card background\n border-radius: 8px;\n border: 1px solid ${COLORS.HighlightMedium};\n }\n .react-dropdown-select-item {\n color: ${COLORS.White}; // list item\n border-bottom: none;\n padding-top: 12px;\n padding-bottom: 12px;\n :hover {\n background: ${COLORS.HighlightMedium};\n }\n }\n .react-dropdown-select-item.react-dropdown-select-item-selected{\n color: ${COLORS.White}; // selected item\n background: ${COLORS.HighlightMedium};\n border-bottom: none;\n }\n .react-dropdown-select-item.react-dropdown-select-item-active {\n //background: #111;\n /* border-bottom: 1px solid #333; */\n\n /* font-weight: bold; */\n\n }\n .react-dropdown-select-item.react-dropdown-select-item-disabled {\n /* color: #ccc; */\n }\n ::placeholder {\n color: red;\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.White};\n }\n`\n\nconst BtnBack = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n color: ${COLORS.Base};\n background: #63c085;\n cursor: pointer;\n text-align: center;\n margin-top: 17px;\n align-self: center;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n :hover {\n }\n`\n\nconst Input = styled.input`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n /* height: 100%; */\n color: ${COLORS.White};\n /* font-family: \"Roboto Condensed\", sans-serif; */\n `;\n\nconst fuzzyOptions = {\n threshold: 0.1,\n keys: [\"externalId\"],\n}\nexport default function LinkPropertySelectWingnut(props) {\n const { data } = props\n const [isSelected, setIsSelected] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n const [selectedWingnut, setSelectedWingnut] = useState(null)\n const [searchOptions, setSearchOptions] = useState([])\n const fuseSearch = new Fuse(data, fuzzyOptions)\n\n const { getSession } = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n useEffect(() => {\n setSearchOptions(mapRawData(data))\n }, [data])\n\n const mapRawData = (data) => {\n const options = data.map((item) => ({\n key: item.id,\n label: item.externalId,\n value: item.id,\n }))\n return options\n }\n\n const filterOptions = (filter) => {\n if (filter) {\n setSearchOptions(mapRawData(fuseSearch.search(filter).map((s) => s.item)))\n } else {\n setSearchOptions(mapRawData(fuseSearch.getIndex().docs))\n }\n }\n\n const onSelected = (item) => {\n if (item[0]) {\n setSelectedWingnut(item[0].value)\n setIsSelected(true)\n props.enableLinkButton()\n } else {\n setSelectedWingnut(null)\n setIsSelected(false)\n }\n }\n\n return (\n \n \n Select an unlinked Wingnut \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}>\n onSelected(value)}\n options={searchOptions}\n values={[]}\n inputRenderer={\n ({ props, state, methods, inputRef }) => ( \n
\n\n props.linkWingnut(selectedWingnut)} style={{background : isSelected ? null : '#B6B6B6', border : isSelected ? null : 'none'}}>\n LINK WINGNUT \n {props.showSpinner && \n\n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../images/ic_arrow_right_green.svg\"\nimport ImgGreen from \"./../../images/ic_status_green.svg\"\nimport ImgPurple from \"./../../images/ic_status_purple.svg\"\nimport ImgRed from \"./../../images/ic_status_red.svg\"\nimport ImgYellow from \"./../../images/ic_status_yellow.svg\"\nimport ImgEye from \"./../../images/eye_blue.svg\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\nimport ImgProperty from \"./../../images/ic_property.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst HeaderContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: auto;\n min-width: 300px;\n margin-right: 20px;\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-right: 0px;\n /* width: 250px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n align-content: flex-start;\n`\n\nconst PropertyIcon = styled.img`\n width: 15px;\n height: 15px;\n margin-right: 15px;\n margin-top: 3px;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst StatusIcon = styled.img`\n width: 24px;\n height: 24px;\n margin-right: 15px;\n margin-top: 3px;\n /* align-self: center; */\n`\n\n\nconst WingnutDetails = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst InfoText = styled.h2`\n /* width: 370px; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.HighlightLight};\n margin-top: 6px;\n margin-right: 5px;\n ${media.lessThan(\"743px\")`\n /* width: 300px; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 300px; */\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function LinkPropertyHeader(props) {\n const [isHovering, setIsHovering] = useState(false)\n\n return (\n \n\n { props.updateSuccess ?\n \n \n Success \n The Wingnut and property have been linked \n \n \n :\n \n \n {props.name ? props.name : 'Property Name'} \n Select which Wingnut you'd like to link to this property \n \n \n }\n \n )\n}\n","import React, { Component, useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Connected from \"./../../images/ic_link.svg\"\nimport NotConnected from \"./../../images/ic_link_off.svg\"\nimport WingnutDetailsCard from \"./WingnutDetailsCard\"\nimport PropertyDetailsCard from \"./PropertyDetailsCard\"\nimport LinkPropertySelectWingnut from \"./LinkPropertySelectWingnut\"\nimport LinkPropertyHeader from \"./LinkPropertyHeader\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n max-width: 1260px;\n /* height: 100%; */\n display: flex;\n flex-direction: column;\n /* padding-bottom: 50px; */\n padding-top: 18px;\n background-color: ${COLORS.Base};\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusCard = styled.div`\n /* border: 1px yellow dashed; */\n width: auto;\n max-width: 1048px;\n min-height: 570px;\n height: auto;\n display: flex;\n flex-direction: column;\n background: #0e1c36;\n border-radius: 10px;\n margin-bottom: 20px;\n padding: 35px 35px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n padding: 20px 20px;\n width: 95%;\n margin-right: 0px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 95%;\n padding: 25px 25px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n /* flex-direction: column; */\n flex-wrap: wrap;\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst DetailsContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n /* width: 350px; */\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 340px;\n padding-bottom: 5px;\n ${media.lessThan(\"743px\")`\n width: 320px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst WingnutIcon = styled.img`\n width: 30px;\n height: 30px;\n margin-right: 30px;\n margin-left: 30px;\n margin-top: 110px;\n ${media.lessThan(\"743px\")`\n margin-top: 20px;\n margin-bottom: 20px;\n margin-right: 0px;\n margin-left: 155px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 20px;\n margin-bottom: 20px;\n margin-right: 0px;\n margin-left: 155px;\n /* align-self: center; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Line = styled.div`\n /* width: 97.75%; */\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 14px;\n /* margin-right: 30px; */\n margin-bottom: 26px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nexport default function LinkWingnutToProperty(props) {\n const {params} = props.match\n\n const [wingnuts, setWingnuts] = useState()\n const [wingnutDetails, setWingnutDetails] = useState()\n const [propertyDetails, setPropertyDetails] = useState()\n const [showSuccess, setShowSuccess] = useState(false)\n const [disabled, setDisabled] = useState(true)\n const [showSpinner, setShowSpinner] = useState(false)\n\n const enableLinkButton = () => {\n setDisabled(false)\n }\n\n const linkWingnut = async (id) => {\n setDisabled(true)\n setShowSpinner(true)\n if (id) {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: { propertyId: propertyDetails.id }\n }\n const response = await API.post('FrontendAPI-wingnuts', `/${id}/link`, init)\n if (response.success) {\n setDisabled(false)\n setShowSpinner(false)\n setWingnutDetails(response.data)\n setShowSuccess(true)\n }\n }\n }\n\n useEffect(() => {\n var cancelled = false\n\n async function getWingnuts() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n const response = await API.get('FrontendAPI-wingnuts', ``, init)\n if (response.success && !cancelled) {\n const wingnuts = response.data.filter(item => !item.property)\n setWingnuts(wingnuts)\n }\n }\n\n async function getPropertyDetails() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n const response = await API.get('FrontendAPI-properties', `/${params.id}`, init)\n if (response.success && !cancelled) {\n setPropertyDetails(response.data)\n }\n }\n\n getWingnuts()\n getPropertyDetails()\n \n return () => {\n cancelled = true\n }\n }, [])\n\n return (\n \n \n \n {propertyDetails && ()}\n \n \n\n \n {propertyDetails && ()}\n \n\n {wingnutDetails ? \n {wingnutDetails ? : (wingnuts && linkWingnut(id)} data={wingnuts} />)}\n \n \n \n \n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport IconLaunch from \"./../../../images/ic_launch_green.svg\"\nimport ImgGreen from \"./../../../images/ic_status_green.svg\"\nimport ImgWingnut from \"./../../../images/ic_wingnuts.svg\"\nimport { Link } from \"react-router-dom\"\nimport { COLORS } from \"./../../../styles/colors\"\nimport { DateTime } from \"luxon\"\nimport WingnutStatus from \"./../../wingnuts/WingnutStatus.enum\"\n\n\nexport default function WingnutDetailsUI(props) {\n\n const formatDate = (date) => {\n const dateObj = new Date(date);\n const dateWithoutMicroseconds = dateObj.toISOString().substring(0, 19) + \"Z\";\n const localDate = new Date(dateWithoutMicroseconds).toLocaleString();\n return dateWithoutMicroseconds\n }\n\n const wingnutStatus = (item) => {\n if (item.config.latestPost) {\n var date = DateTime.utc()\n var apiDateTime = item.config.latestPost ? DateTime.fromFormat(item.config.latestPost, \"yyyy-MM-dd HH:mm:ss\") : DateTime.utc()\n var difference = date.diff(apiDateTime, 'minutes')\n if (difference.minutes > 15) {\n return WingnutStatus.Disconnected.value\n }\n } else {\n return WingnutStatus.Disconnected.value\n }\n\n if (item.config.propertyId === undefined) {\n return WingnutStatus.Unlinked.value\n }\n\n if (!(Object.keys(item.config.sensors).length > 0)) {\n return WingnutStatus.Unconfigured.value\n }\n\n return WingnutStatus.Live.value\n }\n\n return (\n \n \n\n\n {\n props.wingnut \n ? \n Go to Wingnut \n \n \n : null\n }\n\n\n \n \n \n \n \n Serial Number \n {props.wingnut ? props.wingnut.externalId : '--'} \n \n \n Wingnut Model \n {props.data && props.data[0] ? props.data[0].wingnutModel : '--'} \n \n \n \n \n Wingnut Software Version \n {props.data && props.data[0] ? props.data[0].wingnutSoftwareVersion : '--'} \n \n \n Wingnut Hardware Version \n {props.data && props.data[0] ? props.data[0].wingnutHardwareVersion : '--'} \n \n \n \n \n Wingnut Latest Timestamp \n {props.data && props.data[0] ? formatDate(props.data[0].time) : '--'} \n \n \n Wingnut Last Boot \n {props.data && props.data[0] ? formatDate(props.data[0].lastBoot) : '--'} \n \n \n \n \n )\n}\n\n// latest boot 2023-01-18 17:46:00 \n// hardware v1.4.0\n// software v5.0.1\n// model WN48-WIFI\n\n\n const OuterContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 20px;\n padding-top: 0px;\n `\n\nconst TopContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n width: 100%;\n justify-content: flex-end;\n /* margin-top: 5px; */\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n margin-bottom: 21px;\n align-items: center;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst StatusIcon = styled.img`\n /* border: 1px red dashed; */\n width: 12px;\n height: 12px;\n margin-right: 22px;\n`\n\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n width: 100%;\n max-width: 1440px;\n margin-right: 30px;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n `\n\nconst TextContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n margin-right: 120px;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst ColumnContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n margin-bottom: 10px;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex-direction: row;\n width: 130px;\n height: 20px;\n border: none;\n padding: 0px;\n background: transparent;\n cursor: pointer;\n color: ${COLORS.White};\n :hover {\n color: #63C085;\n }\n`\n\nconst Icon = styled.img`\n /* border: 1px red dashed; */\n width: 10px;\n height: 10px;\n margin-right: 6px;\n position: relative;\n`\n\nconst ButtonText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 129.5%;\n letter-spacing: 0.05em;\n color: ${COLORS.White};\n :hover {\n color: #63C085;\n }\n`\n\n const Title = styled.h3`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightMedium};\n margin-top: 9px;\n `\n\n const InfoText = styled.h2`\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 130%;\n display: flex;\n align-items: center;\n color: ${COLORS.White};\n margin-top: 1px;\n `\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport Icon from \"./../../images/ic_alert.svg\";\nimport ImgArrowDown from \"./../../images/ic_arrow_down_white.svg\"\nimport ImgArrowRightWhite from \"./../../images/ic_arrow_right_white.svg\"\nimport ImgArrowRight from \"./../../images/ic_arrow_right_blue.svg\"\nimport { SpinnerContainer, StyledRelativeSpinner } from \"../custom/Spinner\"\nimport WingnutDetailsUI from \"./component/WingnutDetailsUI\"\nimport WingnutStatus from \"./../wingnuts/WingnutStatus.enum\"\nimport { DateTime } from \"luxon\"\nimport ImgWingnut from \"./../../images/ic_wingnuts.svg\"\n\nexport default function WingnutDetailsModule(props) {\n\n const [data, setData] = useState()\n const [isLoading, setIsLoading] = useState(false)\n\n const [isHovering, setIsHovering] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n\n useEffect(() => {\n if(data && isOpen){\n loadChartData()\n }\n }, [props.refresh])\n\n const toggleChart = () => {\n if(isOpen){\n setIsOpen(false)\n } else {\n loadChartData()\n }\n}\n\n const loadChartData = async () => {\n if(props.wingnut){\n setIsLoading(true)\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n\n const response = await API.get('FrontendAPI-analytics', `/wingnutspecs?wingnutId=${props.wingnut.externalId}`, init)\n if (response.success) {\n setData(response.data)\n setIsOpen(true)\n setIsLoading(false)\n }\n }\n }\n\n const wingnutStatus = (item) => {\n\n if (item.config.latestPost) {\n var date = DateTime.utc()\n var apiDateTime = item.config.latestPost ? DateTime.fromFormat(item.config.latestPost, \"yyyy-MM-dd HH:mm:ss\") : DateTime.utc()\n var difference = date.diff(apiDateTime, 'minutes')\n \n if (difference.minutes > 15) {\n return WingnutStatus.Disconnected.value\n } \n\n } else {\n return WingnutStatus.Disconnected.value\n }\n\n if (item.config.propertyId === undefined) {\n return WingnutStatus.Unlinked.value\n }\n\n if (!(Object.keys(item.config.sensors).length > 0)) {\n return WingnutStatus.Unconfigured.value\n }\n\n return WingnutStatus.Live.value\n }\n\n\n \n return (\n \n \n {setIsHovering(true)}}\n onMouseLeave={(e) => {setIsHovering(false)}}>\n \n \n\n {props.wingnut ? `Wingnut ${props.wingnut.externalId}` : 'Wingnut Details'} \n \n { isLoading\n ? \n\n \n \n \n {\n isOpen \n ? \n \n )\n}\n\nconst OuterContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n max-width: 1440px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n `;\n\nconst Card = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 100%;\n max-width: 1440px;\n flex-direction: row;\n justify-content: space-between;\n margin-right: 20px;\n margin-top: 20px;\n background: #0e1c36;\n border-radius: 10px;\n min-height: 68px;\n /* padding: 20px; */\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 20px;\n border-radius: 10px;\n `;\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 28px;\n /* line-height: 84.5%; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst LeftContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* height: 100px; */\n`;\n\nconst RightContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* height: 100px; */\n`;\n\nconst ArrowIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n align-items: center;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst StatusIcon = styled.img`\n /* border: 1px red dashed; */\n width: 12px;\n height: 12px;\n margin-right: 22px;\n`\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport Icon from \"./../../images/ic_alert.svg\";\n// import AlertCard from \"./AlertCard\";\nimport { SpinnerContainer, StyledSpinner } from \"../custom/Spinner\"\nimport PropertyTimeUI from \"./component/PropertyTimeUI\"\nimport PropertyTimeDropdownUI from \"./component/PropertyDropdownUI\"\n\n\nexport default function PropertyTimeData(props) {\n\n return (\n \n \n { props.isFirstLoad\n ? \n \n )\n}\n\nconst OuterContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n width: 100%;\n max-width: 1440px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n `;\n\nconst Card = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 100%;\n max-width: 1440px;\n /* margin-right: 30px; */\n flex-direction: row;\n justify-content: space-between;\n margin-right: 20px;\n /* margin-bottom: 15px; */\n background: #0e1c36;\n border-radius: 10px;\n min-height: 80px;\n padding: 20px;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport { SpinnerContainer, StyledRelativeSpinner } from \"../custom/Spinner\"\nimport SystemOverviewUI from \"./component/SystemOverviewUI\"\n\nexport default function SystemOverview(props) {\n\n const [boilerPressureData, setBoilerPressureData] = useState()\n const [boilerTemperatureData, setBoilerTemperatureData] = useState()\n const [hotWaterTemperatureData, setHotWaterTemperatureData] = useState()\n\n const [isLoadingPressure, setIsLoadingPressure] = useState(false)\n const [isLoadingTemperature, setIsLoadingTemperature] = useState(false)\n const [isLoadingHotWater, setIsLoadingHotWater] = useState(false)\n\n const [isHovering, setIsHovering] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n const [isFirstLoad, setIsFirstLoad] = useState(true) // switch this in dev to false to not auto open\n\n useEffect(() => {\n if(boilerPressureData && boilerTemperatureData && hotWaterTemperatureData && isOpen || isFirstLoad){\n setIsFirstLoad(false)\n setBoilerPressureData()\n setBoilerTemperatureData()\n setHotWaterTemperatureData()\n loadChartData()\n }\n }, [props.refresh])\n\n const toggleChart = () => {\n if(isOpen){\n setIsOpen(false)\n } else {\n setBoilerPressureData()\n setBoilerTemperatureData()\n setHotWaterTemperatureData()\n loadChartData()\n }\n}\n\nuseEffect(() => {\n if(boilerPressureData && boilerTemperatureData && hotWaterTemperatureData){\n setIsOpen(true)\n setIsLoadingTemperature(false)\n setIsLoadingPressure(false)\n setIsLoadingHotWater(false)\n }\n}, [boilerPressureData, boilerTemperatureData, hotWaterTemperatureData])\n\nconst isDataLoading = () => {\n if(isLoadingTemperature || isLoadingPressure || isLoadingHotWater){\n return true\n } else {\n return false\n }\n}\n\nconst loadChartData = async () => {\n\n const loadPressure = async () => {\n if(props.propertyDetails && props.startTime && props.endTime){\n setIsLoadingPressure(true)\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n \n // Offset sent to back so API call will return but doesn't affect the returned calculations\n const response = await API.get('FrontendAPI-analytics', `/boilersystempressure?uuid=${props.propertyDetails.id}&startTime=${props.startTime}&endTime=${props.endTime}&offset=${props.offset}`, init)\n if (response.success) {\n setBoilerPressureData(response.data)\n setIsLoadingPressure(false)\n }\n }\n }\n\n const loadTemperature = async () => {\n if(props.propertyDetails && props.startTime && props.endTime){\n setIsLoadingTemperature(true)\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n\n // Offset sent to back so API call will return but doesn't affect the returned calculations\n const response = await API.get('FrontendAPI-analytics', `/boilersystemtemperature?uuid=${props.propertyDetails.id}&startTime=${props.startTime}&endTime=${props.endTime}&offset=${props.offset}`, init)\n if (response.success) {\n setBoilerTemperatureData(response.data)\n setIsLoadingTemperature(false)\n }\n }\n }\n\n const loadHotWater = async () => {\n if(props.propertyDetails && props.startTime && props.endTime){\n setIsLoadingHotWater(true)\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n \n // Offset sent to back so API call will return but doesn't affect the returned calculations\n const response = await API.get('FrontendAPI-analytics', `/domestichotwatersystemtemperature?uuid=${props.propertyDetails.id}&startTime=${props.startTime}&endTime=${props.endTime}&offset=${props.offset}`, init)\n if (response.success) {\n setHotWaterTemperatureData(response.data)\n setIsLoadingHotWater(false)\n }\n }\n }\n\n loadPressure()\n loadTemperature()\n loadHotWater()\n\n}\n\n return (\n // \n \n \n \n \n { isDataLoading()\n ? \n \n {\n isOpen\n ? \n \n )\n}\n\nconst OuterContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n width: 100%;\n margin-bottom: 15px;\n margin-top: -16px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n `;\n\nconst Card = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 100%;\n max-width: 1440px;\n flex-direction: row;\n justify-content: space-between;\n margin-right: 20px;\n background: #0e1c36;\n border-radius: 10px;\n min-height: 68px;\n height: 100%;\n /* padding: 20px; */\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n /* width: 90%; */\n align-self: center;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 20px;\n border-radius: 10px;\n`;\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 28px;\n /* line-height: 84.5%; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\n\nconst LeftContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n height: 30px;\n`;\n\nconst RightContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* height: 100px; */\n`;\n\nconst ArrowIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n align-items: center;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`","import React, { useEffect, useState, useContext } from \"react\"\nimport Select from \"react-dropdown-select\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../../styles/colors\"\n\nexport default function CustomTimeZoneDropdownUI(props) {\n\n const [isLocal, setIsLocal] = useState(true)\n const [isSelected, setIsSelected] = useState(false)\n const [selectedTimeRange, setSelectedTimeRange] = useState(null)\n const [isHovering, setIsHovering] = useState(false)\n // const [keepOpen, setKeepOpen] = useState(false)\n\n const customContentRenderer = () => (\n // Set to Edmonton locally to start\n \n {selectedTimeRange ? selectedTimeRange : \"My Time - (GMT-6) America/Edmonton\"}\n {/* {selectedTimeRange ? selectedTimeRange : \"My Time - (GMT-0) UTC\"} */}\n
\n );\n\n const timeOptions = [\n {key: 1, value: props.propertyTimeZone ? props.propertyTimeZone.value : \"America/UTC\" , label: props.propertyTimeZone ? props.propertyTimeZone.label : \"-\" },\n {key: 2, value: \"America/Edmonton\", label: \"My Time - (GMT-6) America/Edmonton\" },\n // {key: 3, value: \"UTC\", label: \"Reference Time - (GMT-0) UTC\" },\n // {key: 3, value: -25200, label: \"(GMT-7) America/Vancouver\" }\n ];\n\n const onSelected = (item) => {\n if (item[0]) {\n props.updateTimeZone(item[0].value)\n setIsSelected(true)\n\n if(item[0].key === 2){\n setIsLocal(true)\n setSelectedTimeRange(`${item[0].label}`)\n } else {\n setIsLocal(false)\n setSelectedTimeRange(`${item[0].label}`)\n }\n\n } else {\n setSelectedTimeRange(null)\n setIsSelected(false)\n }\n }\n\n // data.stopPropagation()??\n\n return (\n \n \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n >\n onSelected(value)}\n options={timeOptions}\n values={isLocal ? [timeOptions[1]] : [timeOptions[0]]}\n dropdownHeight=\"500px\"\n dropdownPosition=\"bottom\"\n style={{\n border: isHovering ? \"1px solid #d5d5d5\" : isSelected ? \"1px solid #d5d5d5\" : \"1px solid transparent\",\n borderRadius: 8,\n color: COLORS.White,\n fontWeight: \"100\",\n paddingLeft: \"12px\",\n fontFamily: \"Roboto Condensed\",\n fontSize: \"16px\"\n }}\n />\n
\n \n \n )\n}\n\nconst Container = styled.div`\n /* border: 1px solid red; */\n display: flex;\n flex-direction: column;\n`\n\nconst CustomText = styled.p`\n color: ${COLORS.White};\n font-weight: 100,\n padding-left: 12px,\n font-family: \"Roboto Condensed\",\n font-size: 16px;\n`;\n\nconst TimeRangeDetails = styled.div`\n border-radius: 10px;\n /* box-sizing: border-box; */\n display: flex;\n flex-direction: column;\n flex-wrap: none;\n width: 360px;\n ${media.lessThan(\"743px\")`\n /* padding-bottom: 27px; */\n /* padding-right: 0px; */\n /* width: 100%; */\n max-width: 300px;\n min-width: 270px;\n /* height: 350px; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* height: 350px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StyledSelect = styled(Select)`\n height: 45px;\n width: 384px;\n color: ${COLORS.White};\n background: ${COLORS.Secondary};\n /* margin-top: 15px; */\n\n ${media.lessThan(\"744px\")`\n /* width: 90%; */\n height: 55px;\n `}\n ${media.between(\"medium\", \"large\")`\n\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n\n .react-dropdown-select-clear,\n .react-dropdown-select-dropdown-handle {\n color: ${COLORS.White};\n height: 22px;\n }\n .react-dropdown-select-option {\n }\n .react-dropdown-select-item {\n\n }\n .react-dropdown-select-input {\n color: ${COLORS.White}; // cursor select\n }\n .react-dropdown-select-dropdown {\n background: ${COLORS.Secondary}; // card background\n border-radius: 8px;\n border: 1px solid ${COLORS.HighlightMedium};\n }\n .react-dropdown-select-item {\n color: ${COLORS.White}; // list item\n border-bottom: none;\n padding-top: 12px;\n padding-bottom: 12px;\n :hover {\n background: ${COLORS.HighlightMedium};\n }\n }\n .react-dropdown-select-item.react-dropdown-select-item-selected{\n color: ${COLORS.White}; // selected item\n background: ${COLORS.HighlightMedium};\n border-bottom: none;\n }\n .react-dropdown-select-item.react-dropdown-select-item-active {\n //background: #111;\n /* border-bottom: 1px solid #333; */\n\n /* font-weight: bold; */\n\n }\n .react-dropdown-select-item.react-dropdown-select-item-disabled {\n /* color: #ccc; */\n }\n ::placeholder {\n color: ${COLORS.White};\n\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.White};\n }\n\n`\n\nconst CalendarContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n /* height: 500px; */\n /* left: 454px; */\n /* top: 390px; */\n /* background: #1A2B4A; */\n /* border: 1px solid #A1ADC2; */\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n`;","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"./../../../styles/colors\"\nimport PropertyDropdownUI from \"./PropertyDropdownUI\"\nimport CustomTimeZoneDropdownUI from \"./../component/CustomTimeZoneDropdownUI\"\nimport { useMediaQuery } from 'react-responsive'\nimport TimeRangePickerUI from \"./TimeRangePickerUI\"\n\nexport default function PropertyTimeUI(props) {\n\n return (\n \n \n \n \n Custom Date \n \n \n\n \n Custom TimeZone \n \n \n \n )\n}\n\n\n const OuterContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n padding-left: 20px;\n /* height: 500px; */\n `\n\nconst TopContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n width: 100%;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n margin-bottom: 21px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n margin-right: 0px;\n margin-bottom: 15px;\n justify-content: space-between;\n `}\n`\n\nconst HeaderTextContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nconst UtilityContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n /* height: 30px; */\n /* justify-content: center; */\n`;\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 28px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst Subheader = styled.h4`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 130%;\n color: ${COLORS.White};\n margin-top: 6px;\n`;\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n width: 100%;\n max-width: 1440px;\n margin-right: 30px;\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n flex-direction: column;\n `}\n `\n\nconst Dropdown = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n margin-right: 20px;\n`;\n\nconst DropdownTitle = styled.p`\n /* border: 1px yellow dashed; */\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightLight};\n`;\n\nconst DropdownPlaceholder = styled.div`\n background: #1A2B4A;\n width: 384px;\n height: 45px;\n border: 1px solid #A1ADC2;\n border-radius: 8px;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Button = styled.button`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex-direction: row;\n width: 130px;\n height: 20px;\n border: none;\n padding: 0px;\n background: transparent;\n margin-top: 7px;\n cursor: pointer;\n color: ${COLORS.White};\n :hover {\n color: #63C085;\n }\n ${media.lessThan(\"743px\")`\n margin-bottom: 15px;\n margin-left: -10px;\n `}\n`\n\nconst Icon = styled.img`\n /* border: 1px red dashed;; */\n width: 10px;\n height: 10px;\n margin-right: 6px;\n position: relative;\n`\n\nconst ButtonText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 129.5%;\n letter-spacing: 0.05em;\n color: ${COLORS.White};\n :hover {\n color: #63C085;\n }\n`\n\nconst NoWingnutContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n`;\n\nconst NoWingnutText = styled.p`\n font-family: 'Roboto Condensed';\n font-style: italic;\n font-weight: 300;\n font-size: 16px;\n line-height: 130%;\n color: ${COLORS.HighlightLight};\n`;\n\nconst BtnLinkWingnut = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 14px 40px;\n gap: 9px;\n background: ${COLORS.Green};\n width: 193px;\n height: 40px;\n border: 1px solid #63C085;\n border-radius: 30px;\n margin-right: 20px;\n margin-top: 16px;\n :hover {\n }\n`;\n\nconst BtnSet = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: transparent;\n height: 40px;\n border: none;\n border-radius: 30px;\n :hover {\n }\n`;\n\nconst ButtonText2 = styled.p`\n /* border: 1px red dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.Primary};\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n /* width: 170px; */\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst ButtonSetText = styled.p`\n /* border: 1px red dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.Green};\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n /* width: 170px; */\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n\nconst CalendarContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: left;\n margin-top: 10px;\n width: 100%;\n`;\n\nconst MiniSpinnerContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n width: 35px;\n height: 35px;\n justify-content: center;\n align-self: center;\n margin-bottom: 15px;\n`","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport ImgArrowDown from \"./../../images/ic_arrow_down_white.svg\"\nimport ImgArrowRightWhite from \"./../../images/ic_arrow_right_white.svg\"\nimport ImgArrowRight from \"./../../images/ic_arrow_right_blue.svg\"\nimport { SpinnerContainer, StyledRelativeSpinner } from \"../custom/Spinner\"\nimport CustomTimeUI from './../analytic/component/CustomTimeUI'\n\nexport default function CustomTimeModule(props) {\n\n const [data, setData] = useState()\n const [isLoading, setIsLoading] = useState(false)\n\n const [isHovering, setIsHovering] = useState(false)\n const [isOpen, setIsOpen] = useState(false) // set to TRUE for dev\n\n const toggleChart = () => {\n if(isOpen){\n setIsOpen(false)\n } else {\n setIsOpen(true)\n }\n}\n\n return (\n \n \n {setIsHovering(true)}}\n onMouseLeave={(e) => {setIsHovering(false)}}>\n \n \n Custom Date & Timezone \n \n { isLoading\n ? \n\n \n \n \n\n {\n isOpen \n ? \n \n )\n}\n\nconst OuterContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n `}\n `;\n\nconst Card = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 100%;\n max-width: 1440px;\n margin-right: 30px;\n flex-direction: row;\n justify-content: space-between;\n margin-right: 20px;\n margin-bottom: 15px;\n background: #0e1c36;\n border-radius: 10px;\n min-height: 68px;\n /* padding: 20px; */\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 20px;\n border-radius: 10px;\n `;\n\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-style: normal;\n font-weight: 400;\n font-size: 28px;\n /* line-height: 84.5%; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst LeftContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* height: 100px; */\n`;\n\nconst RightContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* height: 100px; */\n`;\n\nconst ArrowIcon = styled.img`\n width: 24px;\n height: 24px;\n align-self: center;\n`\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n align-items: center;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst StatusIcon = styled.img`\n /* border: 1px red dashed; */\n width: 12px;\n height: 12px;\n margin-right: 22px;\n`\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"./../../styles/colors\"\n\nexport default function PropertyHeader(props) {\n\n const {address} = props.propertyDetails.config\n const [isGoToPropertyHovering, setIsGoToPropertyHovering] = useState(false)\n\n return (\n \n \n {props.propertyDetails.config.name} \n {address && `${address.streetAddress} ${address.city} ${address.provinceState} ${address.country} ${address.postalZip}`} \n \n\n {\n if(props.propertyDetails){\n setIsGoToPropertyHovering(true)\n }\n }}\n onMouseLeave={(e) => {\n setIsGoToPropertyHovering(false)\n }}>\n GO TO PROPERTY \n \n \n\n\n \n )\n}\n\nconst HeaderContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n width: 100%;\n flex-direction: row;\n margin-bottom: 44px;\n align-items: flex-end;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n margin-bottom: 15px;\n margin-top: 15px;\n align-items: center;\n `}\n`\n\nconst HeaderTextContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`;\n\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n font-family: Blinker;\n font-size: 31px;\n font-style: normal;\n font-weight: 600;\n line-height: 90%; /* 27.9px */\n letter-spacing: -0.31px;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n text-align: center;\n `}\n`\n\nconst Subheader = styled.h4`\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 130%;\n margin-top: 6px;\n color: ${COLORS.HighlightLight};\n ${media.lessThan(\"743px\")`\n text-align: center;\n `}\n`;\n\nconst BtnLinkWingnut = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 24px;\n background: transparent;\n margin-left: 45px;\n /* width: 134px; */\n /* height: 34px; */\n border: 1px solid #63C085;\n border-radius: 26px;\n /* margin-bottom: 5px; */\n ${media.lessThan(\"743px\")`\n margin-left: 0px;\n margin-top: 15px;\n `}\n`;\n\nconst ButtonText2 = styled.p`\n /* border: 1px red dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 11px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n /* width: 170px; */\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { useMediaQuery } from 'react-responsive'\nimport { COLORS } from \"../../styles/colors\"\nimport WingnutDetailsModule from \"../analytic/WingnutDetailsModule\"\nimport PropertyTimeData from \"../analytic/PropertyTimeData\"\nimport SystemOverview from \"../analytic/SystemOverview\"\nimport TimeSeriesModule from \"./../analytic/TimeSeriesModule\"\nimport CustomTimeModule from \"./../analytic/CustomTimeModule\"\nimport PlacesAutocomplete, {geocodeByAddress} from 'react-places-autocomplete';\nimport GetTimezoneFromLatLng from './../analytic/component/GetTimeZone'\nimport PropertyHeader from './../analytic/PropertyHeader'\nimport { useHistory } from 'react-router-dom'\nimport moment from 'moment-timezone';\n\nexport default function Dashboard(props) {\n const history = useHistory();\n\n const { params } = props.match\n const [properties, setProperties] = useState([])\n const [propertyDetails, setPropertyDetails] = useState(null)\n const [sensorLabels, setSensorLabels] = useState([])\n\n const [timeZone, setTimeZone] = useState();\n const [offset, setOffset] = useState(0);\n const [incrementTime, setIncrementTime] = useState(86400) // Default 24 Hours\n const [startTime, setStartTime] = useState(new Date().getTime()); // Always in Milliseconds\n const [endTime, setEndTime] = useState(new Date().getTime()); // Always in Milliseconds\n\n const [state, setState] = useState({ value: \"UTC\", label: \"Property Time - (GMT-0) UTC\", offset: \"(GMT-0)\"})\n\n const [isLocked24H, setIsLocked24H] = useState(false)\n const [isCustomDate, setIsCustomDate] = useState()\n const [isTimeRange, setIsTimeRange] = useState(false)\n const [isNewTime, setIsNewTime] = useState(false)\n const [isCustomRange, setIsCustomRange] = useState(false)\n const [isFirstLoad, setIsFirstLoad] = useState(true)\n const [isDefaultLoad, setIsDefaultLoad] = useState(true)\n const [isLoading, setIsLoading] = useState(false)\n const [name, setName] = useState(\"\")\n const [externalId, setExternalId] = useState(\"\")\n const [address, setAddress] = useState(\"\")\n const [refresh, setRefresh] = useState(false)\n const [currentTab, setCurrentTab] = useState(1)\n\n const isDesktopSize = useMediaQuery({ query: '(min-width: 744px)' })\n // const [isEditNotificationOpen, setIsEditNotificationOpen] = useState(false)\n\n useEffect(() => {\n // Set to user timezone to begin with\n let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n setTimeZone(timeZone)\n }, [])\n\n // Updated timeZone via User UI\n const updateSelectedTab = (tabIndex) => {\n setCurrentTab(tabIndex)\n }\n\n // Updated timeZone via User UI\n const updateTimeZone = (newTimeZone) => {\n applyNewTimeRange(newTimeZone)\n }\n\n // Updating TimeRange with Child Dropdown\n const loadTimeRange = (incrementTime) => {\n setIncrementTime(incrementTime)\n \n if(isDefaultLoad == true && isTimeRange == false){\n applyNewTimeRange()\n setIsDefaultLoad(false)\n } else {\n setIsNewTime(true) \n }\n \n // If User selects Custom\n if(incrementTime == 0){\n setIsCustomRange(true)\n setIsTimeRange(false)\n } else {\n setIsCustomRange(false)\n setIsTimeRange(true) \n }\n }\n\n const applyNewTimeRange = (newTimeZone) => {\n // Manually trigger data reload\n\n history.push(`/portal/dashboard/0`) // Cancel any custom month info\n \n var freshEndTime = new Date().getTime()\n \n let freshStartTime = freshEndTime - (incrementTime * 1000)\n\n // Only add offset if in the Properties TimeZone\n if (newTimeZone && (newTimeZone !== Intl.DateTimeFormat().resolvedOptions().timeZone)) {\n const localOffset = new Date().getTimezoneOffset() * 60000; // getTimezoneOffset() returns in minutes so convert to milliseconds\n \n const offsetDifference = getTimeZoneOffset(newTimeZone) - (-localOffset) // Get difference - Local offset is negative if your local time is behind UTC\n \n const offset = 3600000\n setOffset(offsetDifference) \n setTimeZone(newTimeZone)\n } else {\n setOffset(0)\n }\n \n setIsNewTime(false)\n setIsTimeRange(false)\n setStartTime(freshStartTime)\n setEndTime(freshEndTime)\n setRefresh(!refresh)\n }\n\n const getTimeZoneOffset = (newTimeZone) => {\n\n const now = moment.tz(newTimeZone);\n\n // Get the offset in minutes and convert it to milliseconds\n // The offset is negative if the timezone is behind UTC, positive if ahead\n const offsetMilliseconds = now.utcOffset() * 60 * 1000;\n \n return offsetMilliseconds;\n\n }\n\n const loadCustomMonth = (month, year) => {\n let startOfMonth = new Date(Date.UTC(year, month, 1));\n let startUTCMilliseconds = startOfMonth.getTime();\n\n let startOfNextMonth = new Date(Date.UTC(year, month + 1, 1));\n // Subtract 1 millisecond to get the end of the current month\n let endOfMonth = new Date(startOfNextMonth.getTime() - 1);\n let endUTCMilliseconds = endOfMonth.getTime();\n\n history.push(`/portal/dashboard/${startUTCMilliseconds + 86400000}`)\n setStartTime(startUTCMilliseconds)\n setEndTime(endUTCMilliseconds - 1)\n // setIsCustomDate(false)\n setRefresh(!refresh)\n // reloadProperty()\n }\n\n\n useEffect(() => {\n let cancelled = false\n\n async function getProperties() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n const response = await API.get('FrontendAPI-properties', ``, init)\n if (response.success && !cancelled) {\n setProperties(response.data)\n setIsFirstLoad(false)\n }\n }\n getProperties()\n return () => {\n cancelled = true\n }\n }, [])\n\n const reloadProperty = () => {\n if(propertyDetails !== null){\n setPropertyDetails(null) // TODO: COMMENTED OUT THE RESET DUE TO UX - NO PROBLEMS?\n setSensorLabels([])\n const item = {\n key : propertyDetails.id\n }\n loadProperty(item) \n }\n }\n\n const loadProperty = async (item) => {\n\n if(item === null){\n // do nothing\n } else {\n setIsLoading(true)\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n const response = await API.get('FrontendAPI-properties', `/${item.key}`, init)\n\n if (response.success) {\n setPropertyDetails(response.data)\n setRefresh(!refresh) // Put this back in because switching properties needed it\n\n const a = response.data.config.address\n const address = `${a.streetAddress} ${a.city} ${a.provinceState} ${a.country} ${a.postalZip}`\n setAddress(address)\n discoverTimeZone(address)\n setName(`${response.data.config.name}`)\n setExternalId(`${response.data.externalId}`)\n\n var sensorLabels = []\n if(response.data.linkedWingnuts.length !== 0){\n response.data.linkedWingnuts.forEach((wingnut)=>{\n if(wingnut.config && wingnut.config.sensors){\n Object.entries(wingnut.config.sensors).forEach(([key, val]) => {\n sensorLabels.push(val.label)\n })\n }\n })\n\n }\n setSensorLabels(sensorLabels)\n setIsLoading(false)\n }\n }\n }\n\n // Discover timezone of Property\n const discoverTimeZone = async (address) => {\n try {\n // Look up the latitude and longitude of the selected address\n const results = await geocodeByAddress(address);\n const { lat, lng } = results[0].geometry.location;\n \n // Get the timezone label and UTC offset for the location\n const timezoneData = await GetTimezoneFromLatLng(lat(), lng());\n const { label, timezoneLabel, offset } = timezoneData;\n \n // Update state with the selected timezone label\n setState({ value: timezoneLabel, label: label, offset: offset });\n } catch (error) {\n console.error('Error:', error);\n }\n };\n\n const toggleModule = (open, target) => {\n if(open){\n const element = isDesktopSize ? document.getElementById('top') : document.getElementById('cardTop');\n element.scrollIntoView({ behavior: 'smooth' });\n setTimeout(() => {\n // setIsEditNotificationOpen(false)\n }, 400)\n } else {\n // setIsEditNotificationOpen(true)\n setTimeout(() => {\n const element = document.getElementById(target);\n element.scrollIntoView({ behavior: 'smooth' });\n }, 100)\n }\n}\n\n // TODO: Old Custom Date Code?\n const loadCustomDate = (date) =>{\n\n var newEndTimeInSeconds = 0\n\n // Input could be a date object or UTC timestamp depending on who calls it \n if(typeof(date) !== Object){\n newEndTimeInSeconds = Math.floor(date / 1000)\n } else {\n newEndTimeInSeconds = Math.floor(date.getTime() / 1000)\n }\n\n let newStartTime = newEndTimeInSeconds - incrementTime\n\n setStartTime(newStartTime * 1000)\n setEndTime(newEndTimeInSeconds * 1000 - 1)\n setRefresh(!refresh)\n // reloadProperty()\n }\n\n return (\n \n \n {/* {`${new Date(startTime).toISOString()} `} \n {'------->'} \n { `${new Date(endTime).toISOString()}`} */}\n \n\n {propertyDetails ? \n \n })\n : null\n }\n\n {/* Tab Bar Menu */}\n {propertyDetails ? \n \n \n {updateSelectedTab(1)}}>\n System Overview \n \n {updateSelectedTab(2)}}>\n Boiler System \n \n {updateSelectedTab(3)}}>\n Domestic Hot Water \n \n \n\n {\n (() => {\n switch (currentTab) {\n case 1:\n return \n\n :\n null\n }\n\n \n )\n \n}\n\nconst TestContainer = styled.div`\n display: flex;\n flex-direction: row;\n`\n\nconst OuterContainer = styled.div`\n /* border: 1px yellow dashed;; */\n background-color: ${COLORS.Base};\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n padding-top: 10px;\n align-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst PrimaryContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 1460px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n /* width: 90%; */\n align-self: center;\n flex-direction: column;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n `}\n`\n\nconst Card = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 100%;\n max-width: 1440px;\n flex-direction: row;\n margin-right: 20px;\n padding-bottom: 20px;\n padding-top: 20px;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n `\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n margin-right: 25px;\n display: flex;\n flex-direction: row;\n /* justify-content: space-between; */\n width: 100%;\n /* padding-bottom: 20px; */\n border-radius: 10px;\n`;\n\nconst HeaderText = styled.h2`\n /* border: 1px red dashed; */\n color: #384C72;\n text-align: center;\n font-family: Blinker;\n font-size: 26px;\n font-style: normal;\n font-weight: 600;\n line-height: 110%; /* 28.6px */\n letter-spacing: -0.26px;\n ${media.lessThan(\"743px\")`\n font-size: 20px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 22px;\n `}\n`\n\nconst BtnTab = styled.button`\n border: none;\n outline: none;\n display: flex;\n flex-direction: row;\n border-radius: 10px;\n background: ${COLORS.Primary};\n padding: 20px 25px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n /* margin-right: 20px; */\n ${media.lessThan(\"743px\")`\n padding: 20px 20px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding: 20px 20px;\n `}\n`;\n\nconst BottomLeftInvertedRadius = styled.div`\n /* border: 1px red dashed; */\n background-color: transparent;\n height: 83px;\n width: 10px;\n border-bottom-left-radius: 12px;\n box-shadow: 0 12px 0 0 #0e1c36; /* This is where the magic happens! */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"1170px\")`\n `}\n ${media.greaterThan(\"1171px\")`\n /* display: none; */\n `}\n`\n\nconst RightTabInvertedRadius = styled(BottomLeftInvertedRadius)`\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"1170px\")`\n display: none;\n `}\n ${media.greaterThan(\"1171px\")`\n `}\n`\n\nconst BottomRightInvertedRadius = styled.div`\n /* border: 1px red dashed; */\n background-color: transparent;\n height: 83px;\n width: 10px;\n border-bottom-right-radius: 12px;\n box-shadow: 0 12px 0 0 #0e1c36; /* This is where the magic happens! */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"1170px\")`\n `}\n ${media.greaterThan(\"1171px\")`\n /* display: none; */\n `}\n`\n\n\n\n\n {/* */}","\nexport default function GetTimezoneFromLatLng(lat, lng) {\n const timestamp = Math.floor(Date.now() / 1000); // current timestamp in seconds\n const apiUrl = `https://maps.googleapis.com/maps/api/timezone/json?location=${lat},${lng}×tamp=${timestamp}&key=AIzaSyD7hBW1S5Xum-sZn_Z7JrHCgJP5suaMozU`;\n\n return fetch(apiUrl)\n .then((response) => response.json())\n .then((data) => {\n const timezoneLabel = data.timeZoneId;\n const utcOffset = data.rawOffset + data.dstOffset;\n\n const offsetSeconds = data.rawOffset + data.dstOffset;\n const offsetHours = offsetSeconds / 3600;\n const offsetSign = offsetHours > 0 ? '+' : '-';\n const offsetAbs = Math.abs(offsetHours);\n const offsetString = `Property Time - (GMT${offsetSign}${offsetAbs}) `;\n const offset = `(GMT${offsetSign}${offsetAbs}) `;\n const finalLabel = offsetString + timezoneLabel\n\n return { label: finalLabel, timezoneLabel: timezoneLabel, offset: offset};\n })\n .catch((error) => console.error('Error:', error));\n}","export default __webpack_public_path__ + \"static/media/Ellipse_crop.d2a78e3f.svg\";","export default __webpack_public_path__ + \"static/media/wingnut-UI-mockup.2d3a6458.png\";","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport Image2 from \"./../../images/Ellipse_crop.svg\"\nimport Image3 from \"./../../images/wingnut-UI-mockup.png\"\nimport { Link } from \"react-router-dom\"\nimport Aos from \"aos\"\nimport \"aos/dist/aos.css\"\n\nconst Grid = styled.div`\n /* border: 1px blue dashed; */\n grid-area: 1 / 1 / 2 / 2;\n max-width: 1440px;\n display: flex;\n width: auto;\n height: auto;\n flex-direction: row;\n justify-self: center;\n align-content: center;\n margin-bottom: 20px;\n margin-left: 30px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n align-content: center;\n justify-content: center;\n margin-left: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst LeftInfoContainer = styled.div`\n /* border: 1px green dashed; */\n margin-top: 56.65px;\n width: auto;\n height: auto;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n /* z-index: 1; */\n ${media.lessThan(\"743px\")`\n width: 70%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: auto;\n max-width: 500px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Logo = styled.img`\n width: 157px;\n height: 45px;\n z-index: 0;\n transition-duration: 0.5s;\n :hover {\n transform: scale(1.2);\n }\n`\n\nconst HeaderText = styled.h1`\n /* border: 1px red dashed; */\n margin-top: 163px;\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 79.4322px;\n line-height: 66px;\n letter-spacing: -0.01em;\n color: rgb(255, 255, 255);\n\n ${media.lessThan(\"743px\")`\n font-size: 52px;\n flex-wrap: wrap;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 113px;\n font-size: 60px;\n `}\n`\n\nconst BlurbText = styled.p`\n margin-top: 32px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 300;\n font-size: 28px;\n line-height: 129.5%;\n letter-spacing: -0.01em;\n color: rgb(255, 255, 255);\n opacity: 0.5;\n flex-wrap: wrap;\n ${media.between(\"744px\", \"large\")`\n font-size: 20px;\n `}\n`\n\nconst BtnContainer = styled.div`\n /* border: 1px red dashed; */\n width: auto;\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n margin-top: 80px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n margin-top: 22px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnLogin = styled.button`\n width: 245px;\n height: 69.62px;\n border: none;\n background: #63c085;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 15px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n margin-right: 20px;\n margin-bottom: 10px;\n z-index: 0;\n color: black;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n width: 314px;\n height: 70px;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 230px;\n height: 62px;\n margin-bottom: 10px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Ellipse = styled.img`\n position: absolute;\n width: auto;\n top: 0;\n right: 0;\n height: 827.33px;\n z-index: 0;\n overflow: hidden;\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n margin-left: 272px;\n `}\n`\n\nconst RightInfoContainer = styled.div`\n /* border: 1px red dashed; */\n width: 50%;\n height: auto;\n ${media.lessThan(\"743px\")`\n width: 70%;\n height: 450px;\n justify-self: center;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: auto;\n `}\n ${media.greaterThan(\"large\")`\n margin-top: 50px;\n `}\n`\n\nconst LandingImg = styled.img`\n /* border: 1px yellow dashed; */\n width: auto;\n height: 625.9px;\n ${media.lessThan(\"743px\")`\n width: auto;\n height: 386px;\n margin-top: 22px;\n overflow: none;\n justify-self: center;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: auto;\n height: 508px;\n margin-right: -200px;\n margin-top: 80px;\n\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default class LandingPage extends Component {\n componentDidMount() {\n Aos.init()\n }\n\n render() {\n return (\n \n \n \n Remote System Monitoring + Analytics\n \n \n Improve the reliability and safety of your mechanical system with Wingnut's remote monitoring platform\n \n \n LOG IN \n \n \n \n \n )\n }\n}\n","export default __webpack_public_path__ + \"static/media/ic_SaveMoney.a7bc283a.svg\";","export default __webpack_public_path__ + \"static/media/ic_PreventFailures.94737022.svg\";","export default __webpack_public_path__ + \"static/media/ic_OptimizeSystems.6b56fa3f.svg\";","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Icon1 from \"./../../images/ic_SaveMoney.svg\"\nimport Icon2 from \"./../../images/ic_PreventFailures.svg\"\nimport Icon3 from \"./../../images/ic_OptimizeSystems.svg\"\nimport Aos from \"aos\"\nimport \"aos/dist/aos.css\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px yellow dashed; */\n grid-area: 2 / 1 / 3 / 2;\n display: flex;\n flex-direction: row;\n justify-content: center;\n height: auto;\n margin-top: 80px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-wrap: wrap;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Card = styled.div`\n height: 350px;\n width: 393px;\n background-color: #0c182f;\n border-radius: 50px;\n display: flex;\n flex-direction: column;\n align-self: center;\n z-index: 1;\n\n ${media.lessThan(\"743px\")`\n height: 233px;\n width: 308px;\n margin-bottom: 20px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 233px;\n width: 308px;\n margin-bottom: 20px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst CardMiddle = styled(Card)`\n margin-right: 30px;\n margin-left: 30px;\n`\n\nconst Icon = styled.img`\n height: 76px;\n width: 76px;\n margin-top: 38px;\n margin-left: 50px;\n ${media.lessThan(\"743px\")`\n height: 56px;\n width: 56px;\n margin-top: 32px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 56px;\n width: 56px;\n margin-top: 32px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h4`\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 30.3918px;\n line-height: 31px;\n margin-left: 50px;\n margin-top: 32px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n font-size: 23px;\n margin-top: 11px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 23px;\n margin-top: 11px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Blurb = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 300;\n font-style: normal;\n font-size: 20px;\n line-height: 129.5%;\n margin-left: 50px;\n margin-top: 10px;\n width: 260px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n opacity: 0.5;\n ${media.lessThan(\"743px\")`\n font-size: 14px;\n width: 243px;\n margin-top: 11px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 14px;\n width: 243px;\n margin-top: 11px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport class Features extends Component {\n componentDidMount() {\n Aos.init()\n }\n\n render() {\n return (\n \n \n Save Money \n \n Reduce labour time ensuring regulatory compliance (boiler specific and pressure vessel specific)\n \n \n \n Prevent Failures \n Receive automated alarms for system anomalies before small problems become big ones. \n \n \n Optimize Systems \n Switch to a predictive maintenance strategy by analyzing historic system data. \n \n \n )\n }\n}\n\nexport default Features\n","export default __webpack_public_path__ + \"static/media/Tech.d055cdac.svg\";","export default __webpack_public_path__ + \"static/media/IsoRender.1e59d5ed.svg\";","export default __webpack_public_path__ + \"static/media/ic_arrowRight.b735df26.svg\";","export default __webpack_public_path__ + \"static/media/Ellipse_hardware.daea2ec2.png\";","export default __webpack_public_path__ + \"static/media/IsoRender_medium.b1cf437e.svg\";","export default __webpack_public_path__ + \"static/media/IsoRender_small.847ada42.svg\";","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/Tech.svg\"\nimport Image2 from \"./../../images/IsoRender.svg\"\nimport Image3 from \"./../../images/ic_arrowRight.svg\"\nimport Image4 from \"./../../images/Ellipse_hardware.png\"\nimport Image5 from \"./../../images/IsoRender_medium.svg\"\nimport Image6 from \"./../../images/IsoRender_small.svg\"\nimport { Link } from \"react-scroll\"\nimport Aos from \"aos\"\nimport \"aos/dist/aos.css\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px blue dashed; */\n grid-area: 3 / 1 / 4 / 2;\n max-width: 1440px;\n display: flex;\n width: auto;\n flex-direction: row;\n justify-self: center;\n align-content: center;\n margin-bottom: 100px;\n /* z-index: -1; */\n margin-left: 30px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n margin-left: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-bottom: 106px;\n margin-left: 30px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TextContainer = styled.div`\n /* border: 1px green dashed; */\n width: auto;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 50%;\n `}\n\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TechImg = styled.img`\n width: 66px;\n height: 420px;\n align-self: center;\n margin-top: -200px;\n ${media.lessThan(\"743px\")`\n width: 43px;\n height: 271px;\n overflow: none\n `}\n ${media.between(\"744px\", \"large\")`\n width: 43px;\n height: 271px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderText = styled.h1`\n /* border: 1px red dashed; */\n margin-top: 73px;\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 52px;\n line-height: 57px;\n letter-spacing: -0.01em;\n /* z-index: 1; */\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n width: 80%;\n font-family: 'Blinker', sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 35px;\n line-height: 101.5%;\n letter-spacing: -0.01em;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SpecSheetContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n height: 12px;\n flex-direction: row;\n align-content: center;\n margin-top: 28px;\n`\n\nconst Icon = styled.img`\n width: 13px;\n height: 11.38px;\n margin-right: 20px;\n align-self: center;\n`\n\nconst BtnSpecSheet = styled.div`\n background: none;\n cursor: pointer;\n outline: none;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 15px;\n letter-spacing: 0.05em;\n color: #63c085;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst ImgContainer = styled.div`\n /* border: 1px yellow dashed; */\n width: auto;\n display: flex;\n flex-direction: column;\n align-content: center;\n padding-right: 20px;\n transition-duration: 2s;\n transition-timing-function: cubic-bezier(0.69, -0.33, 0.38, 1.76);\n :hover {\n transform: scale(1.1);\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HardwareImg = styled.img`\n /* border: 1px blue dashed; */\n width: 757.3px;\n height: 537px;\n margin-top: 120px;\n ${media.lessThan(\"743px\")`\n overflow: none;\n width: auto;\n height: 244.64px;\n margin-top: 50px;\n margin-bottom: 50px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: auto;\n height: 339px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HardwareImg2 = styled.div`\n background-image: url(${Image2});\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n /* border: 1px blue dashed; */\n width: 757.3px;\n height: 537px;\n margin-top: 120px;\n ${media.lessThan(\"743px\")`\n background-image: url(${Image6});\n overflow: none;\n width: 345px;\n height: 244.64px;\n margin-top: 50px;\n margin-bottom: 50px;\n `}\n ${media.between(\"744px\", \"large\")`\n background-image: url(${Image5});\n width: 479px;\n height: 339px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Ellipse = styled.img`\n /* border: 1px blue dashed; */\n position: absolute;\n background-size: cover;\n width: 700px;\n height: auto;\n margin-top: 240px;\n resize: contain;\n align-self: center;\n justify-self: center;\n z-index: -1;\n overflow: none;\n ${media.lessThan(\"743px\")`\n width: 300px;\n height: auto;\n margin-top: 100px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 450px;\n height: auto;\n margin-top: 200px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport class Hardware extends Component {\n componentDidMount() {\n Aos.init()\n }\n\n render() {\n return (\n \n \n A turn-key solution that connects you to your mechanical system from anywhere. \n \n \n SEE FULL SPEC SHEET\n \n \n \n \n \n \n \n )\n }\n}\n\nexport default Hardware\n","export default __webpack_public_path__ + \"static/media/DataPoints_scroll.388830ec.png\";","export default __webpack_public_path__ + \"static/media/DataPoints_scroll2.f997e8d9.png\";","export default __webpack_public_path__ + \"static/media/DataPoints_scroll3.474e8143.png\";","import React from \"react\"\nimport styled from \"styled-components\"\nimport Marquee from \"react-marquee-slider\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/DataPoints_scroll.png\"\nimport Image2 from \"./../../images/DataPoints_scroll2.png\"\nimport Image3 from \"./../../images/DataPoints_scroll3.png\"\n\nconst SliderImage = styled.img`\n height: 70px;\n width: auto;\n margin-top: 10px;\n /* z-index: 0; */\n ${media.lessThan(\"743px\")`\n height: 62px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nfunction MarqueeSlider() {\n var Photos = [Image]\n var Photos2 = [Image2]\n var Photos3 = [Image3]\n\n return (\n \n \n {Photos.map((item) => (\n \n \n {Photos3.map((item) => (\n \n \n {Photos2.map((item) => (\n \n
\n )\n}\n\nexport default MarqueeSlider\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image4 from \"./../../images/Tech.svg\"\nimport Aos from \"aos\"\nimport \"aos/dist/aos.css\"\nimport MarqueeSlider from \"./MarqueeSlider\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px blue dashed; */\n grid-area: 4 / 1 / 5 / 2;\n display: flex;\n width: 100vw;\n flex-direction: column;\n justify-content: space-evenly;\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: center;\n `}\n`\n\nconst TickerContainer = styled.div`\n height: 300px;\n z-index: 2;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: center;\n `}\n`\n\nconst HeaderText = styled.h1`\n /* border: 1px red dashed; */\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 67.4322px;\n line-height: 53px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 80%;\n text-align: center;\n font-size: 45px;\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: center;\n font-size: 52px;\n `}\n`\n\nconst BlurbText = styled.p`\n margin-top: 20px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 20px;\n line-height: 129.5%;\n align-self: center;\n margin-bottom: 40px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n opacity: 0.5;\n ${media.lessThan(\"743px\")`\n width: 65%;\n text-align: center;\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: center;\n `}\n`\n\nconst TechImg = styled.img`\n width: 66px;\n height: 420px;\n align-self: center;\n margin-left: 800px;\n margin-top: -60px;\n z-index: 1;\n ${media.lessThan(\"743px\")`\n width: 43px;\n height: 271px;\n overflow: none;\n margin-top: -140px;\n margin-right: 0px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 43px;\n height: 271px;\n margin-top: -140px;\n margin-right: 200px;\n `}\n`\n\nexport class Sliders extends Component {\n state = {\n move: false,\n }\n\n componentDidMount() {\n Aos.init()\n\n setTimeout(\n function () {\n var resizeEvent = new Event(\"resize\")\n window.dispatchEvent(resizeEvent)\n }.bind(this),\n 1000\n )\n }\n\n render() {\n return (\n \n Data at your fingertips \n Wingnut supports an endless variety of sensors and data types. \n\n \n \n\n \n )\n }\n}\n\nexport default Sliders\n","export default __webpack_public_path__ + \"static/media/ic_tool.9b024805.svg\";","export default __webpack_public_path__ + \"static/media/ic_shield.f87bd0f2.svg\";","export default __webpack_public_path__ + \"static/media/ic_bulb.d6877bf4.svg\";","export default __webpack_public_path__ + \"static/media/ic_lock.2e5f2c31.svg\";","export default __webpack_public_path__ + \"static/media/ic_dot_red.2f202613.svg\";","export default __webpack_public_path__ + \"static/media/ic_dot_yellow.dc866231.svg\";","export default __webpack_public_path__ + \"static/media/ic_dot_purple.83e1ec45.svg\";","export default __webpack_public_path__ + \"static/media/ic_dot_green.edea51f3.svg\";","export default __webpack_public_path__ + \"static/media/Wingnut_interface.1e6e2759.svg\";","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Icon1 from \"./../../images/ic_tool.svg\"\nimport Icon2 from \"./../../images/ic_shield.svg\"\nimport Icon3 from \"./../../images/ic_bulb.svg\"\nimport Icon4 from \"./../../images/ic_lock.svg\"\nimport IconBullet1 from \"./../../images/ic_dot_red.svg\"\nimport IconBullet2 from \"./../../images/ic_dot_yellow.svg\"\nimport IconBullet3 from \"./../../images/ic_dot_purple.svg\"\nimport IconBullet4 from \"./../../images/ic_dot_green.svg\"\nimport Image4 from \"./../../images/Tech.svg\"\nimport ImgWingnutInterface from \"./../../images/Wingnut_interface.svg\"\nimport Aos from \"aos\"\nimport \"aos/dist/aos.css\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px blue dashed; */\n grid-area: 5 / 1 / 6 / 2;\n width: 99%;\n\n justify-self: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n margin-bottom: 20px;\n margin-top: -140px;\n /* z-index: 0; */\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Card = styled.div`\n /* border: 1px green dashed; */\n max-width: 1440px;\n height: auto;\n width: 90%;\n border-radius: 50px;\n background-color: #0c182f;\n display: flex;\n flex-direction: column;\n align-self: center;\n ${media.lessThan(\"743px\")`\n margin-top: 100px;\n width: 90%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 100px;\n width: 90%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderText = styled.h1`\n /* border: 1px red dashed; */\n width: 65%;\n margin-top: 50px;\n margin-left: 75px;\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 52.3918px;\n line-height: 53px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n margin-left: 0px;\n width: 70%;\n font-family: 'Blinker', sans-serif;\n font-size: 35px;\n line-height: 101.5%;\n align-self: center\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: center;\n font-size: 52px;\n width: 80%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BottomContainer = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n max-width: 1200px;\n width: 95%;\n flex-direction: row;\n justify-content: space-evenly;\n padding-left: 40px;\n margin-bottom: 114px;\n margin-top: 130px;\n flex-wrap: wrap;\n ${media.lessThan(\"743px\")`\n width: 80%;\n flex-direction: column;\n align-content: center;\n align-self: center;\n justify-content: center;\n margin-top: 54px;\n margin-bottom: 53px;\n padding-left: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: start;\n flex-direction: column;\n margin-top: 60px;\n margin-bottom: 94px;\n `}\n`\n\nconst DetailsContainer = styled.div`\n /* border: 1px green dashed; */\n width: auto;\n max-width: 750px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-self: flex-end;\n ${media.lessThan(\"743px\")`\n width: auto;\n margin-left: 0px;\n margin-right: 0px;\n justify-self: center;\n flex-direction: column;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-left: 50px;\n align-self: flex-start;\n `}\n`\n\nconst DetailRow = styled.div`\n display: flex;\n flex-direction: row;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n`\n\nconst SingleDetailContainer = styled.div`\n /* border: 1px yellow dashed; */\n width: 275px;\n display: flex;\n flex-direction: column;\n margin-right: 3px;\n margin-bottom: 51px;\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n align-self: center;\n `}\n`\n\nconst TitleContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-content: center;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column;\n `}\n`\n\nconst Title = styled.h1`\n /* border: 1px red dashed; */\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 30px;\n line-height: 101.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n align-self: center;\n `}\n`\n\nconst Icon = styled.img`\n /* border: 1px green dashed; */\n height: 60px;\n width: 60px;\n margin-right: 30px;\n align-self: flex-start;\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n margin-left: -10px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-right: 0px;\n margin-left: -10px;\n `}\n`\n\nconst BulletPointContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n margin-top: 20px;\n`\n\nconst IconBullet = styled.img`\n height: 9px;\n width: 9px;\n align-self: center;\n margin-right: 20px;\n`\n\nconst BulletText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 23.6391px;\n line-height: 101.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n opacity: 0.5;\n`\n\nconst ImgWingnut = styled.img`\n /* border: 1px yellow dashed; */\n width: 429.47px;\n height: 479.23px;\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n width: 280px;\n height: auto;\n margin-top: 40px;\n margin-right: 0px;\n justify-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 80px;\n align-self: center;\n margin-right: 0px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TechImg = styled.img`\n width: 66px;\n height: 420px;\n align-self: center;\n margin-left: 800px;\n margin-bottom: -140px;\n /* z-index: 1; */\n ${media.lessThan(\"743px\")`\n width: 43px;\n height: 271px;\n overflow: none;\n margin-top: -140px;\n margin-right: 0px;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 43px;\n height: 271px;\n margin-top: -140px;\n margin-right: 200px;\n `}\n`\n\nexport class Details extends Component {\n render() {\n return (\n \n \n \n Wingnut interfaces with industry standard sensing equipment to provide universal system connectivity.\n \n \n \n \n \n \n Mechanical \n \n \n Hydronic Heating \n \n \n HVAC Equipment \n \n \n Domestic Hot Water \n \n \n Sprinkler Systems \n \n \n\n \n \n Safety \n \n \n Overflow Detection \n \n \n Flood Detection \n \n \n CO Detection \n \n \n Leak Detection \n \n \n \n\n \n \n \n Energy \n \n \n Electricity Consumption \n \n \n Natural Gas Consumption \n \n \n\n \n \n Access \n \n \n Entry and Exit \n \n \n Room occupancy \n \n \n \n \n \n \n \n )\n }\n}\n\nexport default Details\n","export default __webpack_public_path__ + \"static/media/Devices.656031bb.svg\";","export default __webpack_public_path__ + \"static/media/ic_dot_grey.e9d2d59c.svg\";","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport Image from \"./../../images/Devices.svg\"\nimport IconBullet1 from \"./../../images/ic_dot_grey.svg\"\n\nconst Grid = styled.div`\n /* border: 1px blue dashed; */\n grid-area: 6 / 1 / 7 / 2;\n display: flex;\n width: auto;\n flex-direction: column;\n justify-content: space-evenly;\n margin: 100px;\n justify-self: center;\n ${media.lessThan(\"743px\")`\n margin: 0px;\n width: 80%;\n justify-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n justify-self: center;\n width: 95%;\n justify-content: start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderText = styled.h1`\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 52px;\n line-height: 53px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n margin-left: 0px;\n width: 80%;\n font-size: 35px;\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: center;\n font-size: 52px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Title = styled.h1`\n /* border: 1px red dashed; */\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 25.3918px;\n line-height: 26px;\n margin-top: 50px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst Icon = styled.img`\n width: 192.42px;\n height: 45.08px;\n left: 100px;\n margin-top: 30px;\n opacity: 0.5;\n`\n\nconst Line = styled.div`\n width: 90%;\n margin-top: 41px;\n opacity: 0.5;\n border: 1px solid ${COLORS.White};\n`\n\nconst Line2 = styled.div`\n width: 90%;\n margin-top: 41px;\n opacity: 0.5;\n border: 1px solid ${COLORS.White};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n display: none;\n `}\n ${media.greaterThan(\"large\")`\n display: none;\n `}\n`\n\nconst SpecsContainer = styled.div`\n /* border: 1px red dashed; */\n height: auto;\n display: flex;\n flex-direction: row;\n justify-content: start;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n justify-content: space-evenly;\n `}\n ${media.between(\"744px\", \"large\")`\n justify-content: start;\n `}\n`\n\nconst SpecsColumn = styled.div`\n /* border: 1px green dashed; */\n height: auto;\n width: 300px;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n padding: 40px;\n ${media.lessThan(\"743px\")`\n width: 80%;\n padding: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 300px;\n padding: 20px;\n `}\n`\n\nconst BulletPointContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n margin-top: 10px;\n`\n\nconst IconBullet = styled.img`\n height: 9px;\n width: 9px;\n align-self: center;\n margin-right: 20px;\n`\n\nconst BulletText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 300;\n font-style: normal;\n font-size: 20px;\n line-height: 129.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n opacity: 0.5;\n`\n\n// https://hackernoon.com/how-to-make-a-silky-smooth-scroll-in-react-5dj3xdl\n\nexport class TechSpecs extends Component {\n render() {\n return (\n \n Tech Specs \n Device Support \n \n \n Features \n \n Hardware and software watchdog timers \n \n \n Power, connectivity, and state LEDs \n \n \n Self-recovery from power outages \n \n \n Local data storage during network outages \n \n \n Remote software updates \n \n \n In-field provisioning \n \n\n Dimensions \n \n 32cm x 11cm x 5cm \n \n\n Weight \n \n 565g \n \n\n \n\n \n Mounting \n \n Mounting holes for screws/bolts \n \n\n Power Requirements \n \n 110V \n \n \n 600mA \n \n \n 60Hz \n \n\n Inputs \n \n 16 x 5V 100kΩ thermistor \n \n \n 16 x 24V 4-20mA current loop \n \n \n 12 x High impedance relay detect \n \n \n 4 x 5V digital input with 5V supply \n \n\n \n\n \n Connectivity \n \n Ethernet \n \n \n WiFi \n \n \n LTE gateway (additional cost) \n \n\n Features \n \n Thermistors \n \n \n Pressure Sensors \n \n \n Split-core Current Sensors \n \n \n Door sensor \n \n \n Window Sensor \n \n \n Leak detection sensor \n \n \n Occupancy Sensor \n \n \n Control relay state detection sensor \n \n \n Thermostat state detection sensor \n \n \n Aquastat state detection sensor \n \n \n CO sensor \n \n \n \n \n )\n }\n}\n\nexport default TechSpecs\n","export default __webpack_public_path__ + \"static/media/Tech_horizontal.464d85e9.svg\";","import React, { useState } from \"react\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport { ButtonSpinner } from \"./../custom/Spinner\"\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n width: auto;\n display: flex;\n flex-direction: column;\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 11px;\n line-height: 129.5%;\n letter-spacing: 0.18em;\n color: ${COLORS.White};\n margin-bottom: 8px;\n margin-top: 16px;\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 453.23px;\n height: 49.65px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-size: 15px;\n letter-spacing: 0.1em;\n font-weight: 400;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n padding: 10px;\n :focus {\n outline: blue;\n border: 1px solid blue;\n border-color: #719ece;\n }\n ${media.lessThan(\"743px\")`\n width: 260px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 300px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Textarea = styled.textarea`\n resize: none;\n width: 453.23px;\n height: 173px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-size: 15px;\n letter-spacing: 0.1em;\n font-weight: 400;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n padding: 10px;\n :focus {\n outline: blue;\n border: 1px solid blue;\n border-color: #719ece;\n }\n ${media.lessThan(\"743px\")`\n width: 260px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 300px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Button = styled.button`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n width: 255.55px;\n height: 69.62px;\n margin-top: 44px;\n background-color: transparent;\n border: 2px solid #63c085;\n box-sizing: border-box;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 15px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n color: ${COLORS.White};\n align-self: flex-end;\n /* start of Hover code */\n transition-duration: 0.5s;\n :hover {\n background-color: #63c085;\n }\n /* end of hover code */\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n `}\n`\n\nconst Error = styled.p`\n /* border: 1px blue dashed; */\n color: red;\n margin-top: 5px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 11px;\n line-height: 129.5%;\n letter-spacing: 0.05em;\n`\n\nconst Success = styled.p`\n /* border: 1px blue dashed; */\n color: green;\n margin-top: 10px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 11px;\n line-height: 129.5%;\n letter-spacing: 0.05em;\n width: 255.55px;\n align-self: flex-end;\n text-align: center;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n /* border: 1px red dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 16px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default function ContactUs() {\n const {\n register,\n handleSubmit,\n reset,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const [disabled, setDisabled] = useState(false)\n const [showSpinner, setShowSpinner] = useState(false)\n\n const onSubmit = async (data) => {\n setDisabled(true)\n setShowSpinner(true)\n\n try {\n let result = await fetch(\n // \"https://10ww8j15w1.execute-api.us-east-2.amazonaws.com/prod/sendcontactus\", // info@spherescreative.com\n \"https://3qvbz9e2j8.execute-api.us-west-2.amazonaws.com/prod/messages\", // Wingnut\n {\n method: \"post\",\n mode: \"no-cors\",\n headers: {\n Accept: \"application/json\",\n \"Content-type\": \"application/json\",\n },\n body: JSON.stringify({\n fullname: data.fullname,\n company: data.company,\n email: data.email,\n message: data.message,\n }),\n })\n reset({ fullname: \"\", company: \"\", email: \"\", message: \"\" })\n setDisabled(false)\n setShowSpinner(false)\n } catch (e) {\n console.log(\"Error\", e)\n setDisabled(false)\n setShowSpinner(false)\n }\n }\n\n return (\n \n \n
\n )\n}\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/Tech_horizontal.svg\"\nimport ContactUs from \"./ContactUs\"\nimport Aos from \"aos\"\nimport \"aos/dist/aos.css\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px blue dashed; */\n grid-area: 7 / 1 / 8 / 2;\n display: flex;\n width: 95%;\n max-width: 1440px;\n flex-direction: row;\n justify-content: space-around;\n justify-self: center;\n margin-bottom: 20px;\n ${media.lessThan(\"743px\")`\n flex-wrap: wrap;\n `}\n ${media.between(\"744px\", \"large\")`\n /* flex-wrap: wrap; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst LeftContainer = styled.div`\n /* border: 1px blue dashed; */\n width: auto;\n display: flex;\n flex-direction: column;\n`\n\nconst HeaderText = styled.h1`\n width: 500px;\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 52.3918px;\n line-height: 53px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n font-size: 35px;\n line-height: 101.5%;\n width: 80%;\n align-self: center;\n margin-top: 55px;\n margin-bottom: 40px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 350px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TechImg = styled.img`\n width: 420px;\n height: 66px;\n margin-top: 30px;\n margin-bottom: 30px;\n margin-left: -90px;\n ${media.lessThan(\"743px\")`\n display: none;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 346.41px;\n height: 67.14px; \n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ContactCard = styled.div`\n width: 624px;\n height: 700px;\n margin: 30px;\n margin-top: 0px;\n display: flex;\n /* flex-direction: column; */\n flex-wrap: wrap;\n justify-content: center;\n align-content: center;\n background-color: #0c182f;\n border-radius: 50px;\n ${media.lessThan(\"743px\")`\n width: 90%;\n margin: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin: 10px;\n `}\n`\n\nexport class ContactForm extends Component {\n componentDidMount() {\n Aos.init()\n }\n\n render() {\n return (\n \n \n Fill out the contact form to request a demo or ask any other questions you may have \n \n \n \n \n )\n }\n}\n\nexport default ContactForm\n","export default __webpack_public_path__ + \"static/media/Logo_symbol.1a23ef29.svg\";","export default __webpack_public_path__ + \"static/media/ic_arrowUp.001f6959.svg\";","import React, { Component } from \"react\"\nimport { Link } from \"react-scroll\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Logo from \"./../../images/Logo_symbol.svg\"\nimport Image from \"./../../images/ic_arrowUp.svg\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px yellow dashed; */\n grid-area: 8 / 1 / 9 / 2;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n padding-top: 80px;\n padding-bottom: 40px;\n height: auto;\n`\n\nconst LogoSymbol = styled.img`\n width: 157px;\n height: 45px;\n align-self: center;\n margin-bottom: 20px;\n`\n\nconst Button = styled.div`\n width: 255.55px;\n height: 69.62px;\n margin-top: 44px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n background-color: transparent;\n border: 2px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 36px;\n /* start of Hover code */\n transition-duration: 0.5s;\n :hover {\n background-color: ${COLORS.White};\n }\n /* end of hover code */\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 15px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n color: ${COLORS.White};\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n color: ${COLORS.Base};\n }\n`\n\nconst Icon = styled.img`\n width: 15px;\n height: 15px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Blurb = styled.p`\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 21px;\n line-height: 101.5%;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nexport class Footer extends Component {\n state = {\n isHovering: false,\n }\n\n render() {\n return (\n \n © Wingnut IoT Inc. \n \n {\n this.setState({ isHovering: true })\n }}\n onMouseLeave={(e) => {\n this.setState({ isHovering: false })\n }}\n style={{ backgroundColor: this.state.isHovering == true ? COLORS.White : COLORS.Base }}\n >\n \n BACK TO TOP\n \n \n )\n }\n}\n\nexport default Footer\n","export default __webpack_public_path__ + \"static/media/ic_close_green.15f00251.svg\";","import React, { useState, useContext } from \"react\"\nimport { useHistory } from \"react-router-dom\"\nimport { useForm } from \"react-hook-form\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image2 from \"./../../images/eye.svg\"\nimport ImageBlueEye from \"./../../images/eye_blue.svg\"\nimport Image from \"./../../images/ic_alert.svg\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport { DarkButtonSpinner } from \"./../custom/Spinner\"\nimport { ErrorContainer, Icon, Error, EmptyError } from \"./../custom/ValidatorStyles\"\nimport { ValidatorStrings, ServerStrings } from \"./../util/VaildatorStrings\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n align-self: center;\n width: auto;\n ${media.lessThan(\"743px\")`\n width: 90%;\n `}\n`\n\nconst InputContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n width: 100%;\n`\n\nconst EyeIcon = styled.img`\n /* border: 1px red dashed; */\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -50px;\n /* margin-top: 46px;\n margin-bottom: 8px; */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Form = styled.form`\n /* border: 1px blue dashed; */\n width: 384px;\n display: flex;\n flex-direction: column;\n margin-top: 46px;\n ${media.lessThan(\"743px\")`\n width: 100%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n width: 384px;\n /* margin-top: 46px; */\n `}\n`\n\nconst Label = styled.label`\n /* border: 1px blue dashed; */\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightLight};\n margin-bottom: 2px;\n margin-top: 6px;\n ${media.lessThan(\"743px\")`\n /* margin-top: 16px; */\n `}\n`\n\nconst CheckboxContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-content: center;\n margin-top: 20px;\n`\n\nconst LblCheckbox = styled.label`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n margin-left: 14px;\n font-size: 17px;\n line-height: 129.5%;\n align-self: center;\n text-align: center;\n color: ${COLORS.White};\n`\n\nconst Input = styled.input`\n /* border: 1px blue dashed; */\n width: 384px;\n height: 45px;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 129.5%;\n padding-left: 10px;\n background-color: #1d283e;\n border-radius: 8px;\n box-sizing: border-box;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :hover {\n border: 1px solid ${COLORS.HighlightMedium};\n padding-left: 9px;\n }\n :focus {\n outline: ${COLORS.White};\n border: 1px solid ${COLORS.HighlightLight};\n padding-left: 9px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 100%;\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n /* border: 1px red dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: bold;\n font-size: 12px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: black;\n ${media.lessThan(\"743px\")`\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Checkbox = styled.input`\n width: 20px;\n height: 20px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n align-self: center;\n width: 160px;\n height: 40px;\n border: none;\n background: #63c085;\n cursor: pointer;\n border-radius: 36px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 13px;\n text-align: center;\n letter-spacing: 0.05em;\n margin-bottom: 10px;\n margin-top: 50px;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n color: ${COLORS.Base};\n ${media.lessThan(\"743px\")`\n margin-top: 36px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Success = styled.p`\n /* border: 1px blue dashed; */\n color: green;\n margin-top: 10px;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 11px;\n line-height: 129.5%;\n letter-spacing: 0.05em;\n width: 255.55px;\n align-self: flex-end;\n text-align: center;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n `}\n`\n\nexport default function LoginForm() {\n const history = useHistory()\n\n const {\n register,\n handleSubmit,\n reset,\n formState: { errors, isSubmitSuccessful },\n } = useForm({ reValidateMode: \"onSubmit\" })\n\n const { authenticate } = useContext(AccountContext)\n\n const [showSpinner, setShowSpinner] = useState(false)\n const [passwordShown, setPasswordShown] = useState(false)\n const [disabled, setDisabled] = useState(false)\n const [validatorError, setValidatorError] = useState(null)\n\n const togglePasswordVisiblity = () => {\n setPasswordShown(passwordShown ? false : true)\n }\n\n const onSubmit = async (data) => {\n setValidatorError(null)\n setShowSpinner(true)\n setDisabled(true)\n\n authenticate(data.email, data.password, data.setRemember)\n .then((data) => {\n setShowSpinner(false)\n setValidatorError(null)\n reset({ email: \"\", password: \"\" })\n setDisabled(false)\n history.push(\"/portal/dashboard/0\")\n })\n .catch((err) => {\n console.error(\"Failed to login\", err)\n setValidatorError(ServerStrings(err.name))\n setShowSpinner(false)\n setDisabled(false)\n })\n }\n\n return (\n \n \n \n )\n}\n\n\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport Image2 from \"./../../images/ic_close.svg\"\nimport Image3 from \"./../../images/ic_close_green.svg\"\nimport LoginForm from \"./../form/LoginForm\"\nimport { Link } from \"react-router-dom\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n width: 882px;\n height: auto;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n justify-self: center;\n z-index: 2;\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 600px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n width: 384px;\n height: auto;\n flex-direction: column;\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: auto;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 450px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Logo = styled.img`\n width: 159px;\n height: 47px;\n margin-top: 27px;\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n transform: scale(1.2);\n }\n ${media.lessThan(\"743px\")`\n width: 129px;\n height: 37px;\n `}\n`\n\nconst Title = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: 600;\n font-size: 32px;\n line-height: 84.5%;\n margin-top: 46px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n margin-top: 42px;\n text-align: center;\n font-size: 25px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.div`\n width: 100px;\n height: 40px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n margin-top: 20px;\n margin-right: 20px;\n cursor: pointer;\n align-self: flex-end;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 6px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-top: 0px;\n margin-right: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: flex-end;\n margin-top: 20px;\n /* margin-right: -50px; */\n `}\n ${media.greaterThan(\"large\")`\n /* margin-right: -100px; */\n `}\n`\n\nconst BtnForgotPassword = styled.button`\n background: transparent;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 130%;\n align-items: center;\n cursor: pointer;\n text-align: center;\n text-decoration-line: underline;\n margin-top: 10px;\n margin-bottom: 70px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 13px;\n line-height: 129.5%;\n text-align: center;\n letter-spacing: 0.05em;\n color: ${COLORS.White};\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n color: ${COLORS.Base};\n }\n`\n\nconst Icon = styled.img`\n width: 8px;\n height: 8px;\n margin-right: 10px;\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nexport default class LoginModal extends Component {\n state = {\n isHovering: false,\n // isOpen: true\n }\n\n // openModal = () => {\n // this.setState({isOpen: true})\n // }\n\n // afterOpenModal = () => {\n\n // }\n\n // closeModal = () => {\n // this.setState({isOpen: false})\n // }\n\n render() {\n return (\n \n {\n this.setState({ isHovering: true })\n }}\n onMouseLeave={(e) => {\n this.setState({ isHovering: false })\n }}\n style={{ backgroundColor: this.state.isHovering == true ? COLORS.White : \"transparent\" }}\n >\n \n {\" \"}\n CLOSE{\" \"}\n \n \n \n Login to see your Dashboard \n Forgot Password? \n \n \n \n )\n }\n}\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport LandingPage from \"./LandingPage\"\nimport Features from \"./Features\"\nimport Hardware from \"./Hardware\"\nimport Sliders from \"./Sliders\"\nimport Details from \"./Details\"\nimport TechSpecs from \"./TechSpecs\"\nimport ContactForm from \"./ContactForm\"\nimport Footer from \"./Footer\"\nimport Modal from \"react-modal\"\nimport LoginModal from \"./../layout/LoginModal\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst GridContainer = styled.div`\n display: grid;\n grid-template: auto auto auto auto auto auto auto auto/ 100vw;\n overflow: hidden;\n background-color: ${COLORS.Base};\n z-index: -1;\n`\n\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: \"linear-gradient(150.4deg, #041129 52.86%, #0A204A 81.89%)\",\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n}\n\nModal.setAppElement(\"#root\")\n\nexport default class HomeLayout extends Component {\n state = {\n isOpen: false,\n }\n\n openModal = () => {\n this.setState({ isOpen: true })\n }\n\n afterOpenModal = () => {}\n\n closeModal = () => {\n this.setState({ isOpen: false })\n }\n\n render() {\n return (\n \n \n \n \n
\n )\n }\n}\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport { COLORS } from \"../../styles/colors\"\nimport AccountDetailsForm from \"../form/AccountDetailsForm\"\nimport HelpForm from \"../form/HelpForm\"\n\nconst Container = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n max-width: 1047px;\n max-height: 662px;\n height: 100%;\n background-color: #0e1c36;\n border-radius: 20px;\n padding: 34px;\n margin-top: 30px;\n ${media.lessThan(\"743px\")`\n margin-right: 0px;\n width: 90%;\n height: 100%;\n align-self: center;\n margin-bottom: 40px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 90%;\n `}\n`\n\nconst HeaderText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: 600;\n font-size: 32px;\n line-height: 84.5%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst DateText = styled.h2`\nfont-family: Blinker;\nfont-style: normal;\nfont-weight: normal;\nfont-size: 22px;\nline-height: 110%;\nletter-spacing: -0.01em;\ncolor: ${COLORS.White};\n`\n\nexport default class Help extends Component {\n render() {\n return (\n \n Questions or Concerns? Send us a message. \n \n )\n }\n}\n","export default __webpack_public_path__ + \"static/media/ic_back.7bda7050.svg\";","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport Image2 from \"./../../images/ic_back.svg\"\nimport { Link, withRouter } from \"react-router-dom\"\nimport {Interweave} from 'interweave';\nimport { SpinnerContainer, StyledSpinner } from \"./../custom/Spinner\"\nimport { COLORS } from \"../../styles/colors\"\n\n\nconst Grid = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n /* width: 882px; */\n height: 100%;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n justify-self: center;\n background: ${COLORS.Primary};\n`\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n max-width: 990px;\n min-height: 1000px;\n display: flex;\n width: 70%;\n height: auto;\n background: ${COLORS.Base};\n flex-direction: column;\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 90%; \n `}\n ${media.between(\"744px\", \"large\")`\n width: 80%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Logo = styled.img`\n width: 202px;\n height: 57px;\n margin-top: 27px;\n /* align-self: center; */\n transition-duration: 0.5s;\n :hover {\n transform: scale(1.2);\n }\n`\n\nconst Title = styled.h1`\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 24px;\n line-height: 31px;\n margin-top: 46px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n /* align-self: center; */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BlurbText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 18px;\n line-height: 23.4px;\n color: ${COLORS.White};\n margin-top: 5px;\n ${media.lessThan(\"743px\")`\n font-size: 16px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 18px;\n `}\n`\n\nconst Button = styled.div`\n width: 255.55px;\n height: 69.62px;\n margin-top: 44px;\n margin-bottom: 44px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n background-color: transparent;\n border: 2px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 36px;\n /* start of Hover code */\n transition-duration: 0.5s;\n :hover {\n background-color: ${COLORS.White};\n }\n /* end of hover code */\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n `}\n`\n\nconst BtnBack = styled.div`\n /* border: 1px red dashed; */\n width: 100px;\n height: 40px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-content: center;\n align-items: center;\n padding: 0px;\n margin-top: 30px;\n cursor: pointer;\n align-self: flex-end;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 6px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 13px;\n /* line-height: 129.5%; */\n text-align: center;\n letter-spacing: 0.05em;\n color: ${COLORS.White};\n align-self: center;\n justify-self: center;\n transition-duration: 0.5s;\n :hover {\n color: ${COLORS.Base};\n }\n`\n\nconst Icon = styled.img`\n width: 6px;\n height: 11px;\n margin-right: 10px;\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nclass PrivacyPolicy extends Component {\n\nstate = {\n data : \"\",\n isLoading: true,\n isHovering: false,\n showSpinner: true\n };\n\n\ncomponentWillMount(){\n\n setTimeout(() => {\n fetch('https://www.iubenda.com/api/privacy-policy/60609012')\n .then(response => response.json())\n .then(data => this.setState({data: data, isLoading: false, showSpinner: false }));\n }, 1000);\n}\n\n render() {\n \n return (\n \n \n this.props.history.goBack()}\n onMouseEnter={(e) => {\n this.setState({ isHovering: true })\n }}\n onMouseLeave={(e) => {\n this.setState({ isHovering: false })\n }}\n style={{ backgroundColor: this.state.isHovering == true ? COLORS.White : \"transparent\" }}\n >\n \n \n {\" \"}\n BACK{\" \"}\n \n \n\n Privacy Policy \n {this.state.showSpinner && \n {this.state.isLoading ? \n null\n : \n \n } \n\n {this.state.isLoading ?\n null\n : \n {\n this.setState({ isHovering: true })\n }}\n onMouseLeave={(e) => {\n this.setState({ isHovering: false })\n }}\n style={{ backgroundColor: this.state.isHovering == true ? COLORS.White : COLORS.Base }}\n onClick={() => this.props.history.goBack()}\n >\n \n CLOSE\n \n \n }\n \n \n \n \n )\n }\n}\n\nexport default withRouter(PrivacyPolicy)\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport Image2 from \"./../../images/ic_back.svg\"\nimport { Link, withRouter } from \"react-router-dom\"\nimport {Interweave} from 'interweave';\nimport { SpinnerContainer, StyledSpinner } from \"./../custom/Spinner\"\nimport { COLORS } from \"../../styles/colors\"\n\nconst Grid = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n /* width: 882px; */\n height: 100%;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n justify-self: center;\n background: ${COLORS.Primary};\n`\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n max-width: 990px;\n min-height: 1000px;\n display: flex;\n width: 70%;\n height: auto;\n background: ${COLORS.Primary};\n flex-direction: column;\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 90%; \n `}\n ${media.between(\"744px\", \"large\")`\n width: 80%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Logo = styled.img`\n width: 202px;\n height: 57px;\n margin-top: 27px;\n /* align-self: center; */\n transition-duration: 0.5s;\n :hover {\n transform: scale(1.2);\n }\n`\n\nconst Title = styled.h1`\n font-family: \"Blinker\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 24px;\n line-height: 31px;\n margin-top: 46px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n /* align-self: center; */\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BlurbText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 18px;\n line-height: 23.4px;\n color: ${COLORS.White};\n margin-top: 5px;\n ${media.lessThan(\"743px\")`\n font-size: 16px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 18px;\n `}\n`\n\nconst Button = styled.div`\n width: 255.55px;\n height: 69.62px;\n margin-top: 44px;\n margin-bottom: 44px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n background-color: transparent;\n border: 2px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 36px;\n /* start of Hover code */\n transition-duration: 0.5s;\n :hover {\n background-color: ${COLORS.White};\n }\n /* end of hover code */\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n align-self: center;\n `}\n`\n\nconst BtnBack = styled.div`\n /* border: 1px red dashed; */\n width: 100px;\n height: 40px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-content: center;\n align-items: center;\n padding: 0px;\n margin-top: 30px;\n cursor: pointer;\n align-self: flex-end;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 6px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\nconst ButtonText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 13px;\n /* line-height: 129.5%; */\n text-align: center;\n letter-spacing: 0.05em;\n color: ${COLORS.White};\n align-self: center;\n justify-self: center;\n transition-duration: 0.5s;\n :hover {\n color: ${COLORS.Base};\n }\n`\n\nconst Icon = styled.img`\n width: 6px;\n height: 11px;\n margin-right: 10px;\n align-self: center;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nclass TermsOfService extends Component {\n\nstate = {\n data : \"\",\n isLoading: true,\n isHovering: false,\n showSpinner: true\n };\n\n\ncomponentWillMount(){\n\n setTimeout(() => {\n fetch('https://www.iubenda.com/api/terms-and-conditions/60609012')\n .then(response => response.json())\n .then(data => this.setState({data: data, isLoading: false, showSpinner: false }));\n }, 1000);\n}\n\n render() {\n \n return (\n \n \n this.props.history.goBack()}\n onMouseEnter={(e) => {\n this.setState({ isHovering: true })\n }}\n onMouseLeave={(e) => {\n this.setState({ isHovering: false })\n }}\n style={{ backgroundColor: this.state.isHovering == true ? COLORS.White : \"transparent\" }}\n >\n \n \n {\" \"}\n BACK{\" \"}\n \n \n\n Terms Of Service \n {this.state.showSpinner && \n {this.state.isLoading ? \n null\n : \n \n } \n\n {this.state.isLoading ?\n null\n : \n {\n this.setState({ isHovering: true })\n }}\n onMouseLeave={(e) => {\n this.setState({ isHovering: false })\n }}\n style={{ backgroundColor: this.state.isHovering == true ? COLORS.White : COLORS.Base }}\n onClick={() => this.props.history.goBack()}\n >\n \n CLOSE\n \n \n }\n \n \n \n \n )\n }\n}\n\nexport default withRouter(TermsOfService)\n","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image from \"./../../images/LOGO_ALT.svg\"\nimport ImageBg2 from \"./../../images/bg_bluePipes.png\"\nimport LoginForm from \"./../form/LoginForm\"\nimport { Link } from \"react-router-dom\"\nimport { COLORS } from \"../../styles/colors\"\n\nexport default class LoginStatic extends Component {\n state = {\n isHovering: false,\n }\n\n render() {\n return (\n \n \n Login to see your Dashboard \n Forgot Password? \n \n \n \n )\n }\n}\n\nconst Grid = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n height: 100vh;\n flex-direction: column;\n padding-top: 230px;\n align-content: center;\n justify-self: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n width: 100%;\n padding-top: 66px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Container = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n width: 384px;\n height: auto;\n flex-direction: column;\n align-self: center;\n background: transparent;\n ${media.lessThan(\"743px\")`\n width: 95%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 450px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Logo = styled.img`\n width: 202px;\n height: 57px;\n /* margin-top: 27px; */\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n transform: scale(1.2);\n }\n ${media.lessThan(\"743px\")`\n `}\n`\n\nconst Title = styled.h1`\n font-family: Blinker;\n font-style: normal;\n font-weight: 600;\n font-size: 28px;\n line-height: 84.5%;\n margin-top: 46px;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n ${media.lessThan(\"743px\")`\n margin-top: 42px;\n text-align: center;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnForgotPassword = styled.button`\n background: transparent;\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 130%;\n align-items: center;\n cursor: pointer;\n text-align: center;\n text-decoration-line: underline;\n opacity: 0.5;\n margin-top: 10px;\n margin-bottom: 70px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n`\n\n","import React from \"react\"\nimport { Route, Redirect } from \"react-router-dom\"\n\nconst ProtectedRoute = ({ auth, component: Component, ...rest }) => {\n return (\n {\n if (auth) return \n \n Search for a city or portfolio \n \n Filter properties through either property name and/or portfolio \n \n \n Property \n \n \n \n \n \n \n Showing \n {`${props.tableData.length} Results`} \n \n \n )\n\n}\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n`\n\nconst TextContainer = styled.div`\n /* border: 1px yellow dashed; */\n width: 439px;\n display: flex;\n flex-direction: column;\n /* width: 100%; */\n ${media.lessThan(\"743px\")`\n width: 100%;\n align-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n /* width: 384px; */\n `}\n`\n\nconst HeaderText = styled.h2`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 26px;\n line-height: 84.5%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n /* margin-bottom: 22px; */\n`\n\nconst Line = styled.div`\n width: 100%;\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 21px;\n margin-right: 30px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n /* width: 90% */\n margin-right: 0px;\n `}\n`\n\nconst InstructionText = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n line-height: 130%;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n margin-bottom: 17px;\n font-size: 18px;\n padding-top: 19px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\nconst SearchContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: start;\n width: auto;\n max-width: 1500px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: row;\n /* width: 90%; */\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchContainerTop = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n width: 400px;\n /* max-width: 400px; */\n /* max-width: 400px; */\n ${media.lessThan(\"743px\")`\n margin-top: 10px;\n align-content: center;\n max-width: 400px;\n width: 100%;\n justify-self: center;\n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-top: 10px; */\n width: 90%;\n max-width: 400px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n// wraps search bar/icon and instruction\nconst SearchBarContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n align-self: center;\n width: 100%;\n`\n// wraps search bar and search icon\n\nconst Title = styled.h3`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: 0.03em;\n text-transform: capitalize;\n color: ${COLORS.HighlightLight};\n`\n\nconst SearchBar = styled.input`\n /* border: 1px blue dashed; */\n width: 377px;\n height: 45px;\n /* max-width: 600px; */\n outline: none;\n border: none;\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Secondary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :focus {\n outline: ${COLORS.White};\n border: 2px solid ${COLORS.White};\n margin-left: -2px;\n margin-right: 2px;\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 95%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\n\nconst SearchIcon = styled.img`\n /* border: 1px red dashed; */\n height: 20px;\n width: 20px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -40px;\n margin-top: 15px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: auto;\n margin-top: 11px;\n margin-bottom: 6px;\n ${media.lessThan(\"743px\")`\n /* margin-bottom: 16px; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-top: 10px; */\n /* margin-left: 20px; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\n\nconst CardHeader = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightMedium};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n /* font-size: 12pt; */\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultHeader = styled(CardHeader)`\n font-size: 14px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultNumber = styled(CardHeader)`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n letter-spacing: -0.01em;\n color: ${COLORS.White} ;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`","import React, { useState, useEffect, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport { useTable, useSortBy } from \"react-table\"\nimport { AccountContext } from \"../../auth/Account\"\nimport { COLORS } from \"../../styles/colors\"\n\n// Implements the table designed in NotificationTableStructure\n\nfunction Table({ columns, data, columnsToHide }) {\n\n const { getSession } = useContext(AccountContext)\n const [isAuth, setIsAuth ] = useState(false)\n\n useEffect(() => {\n getSession().then(({ isAuth }) => {\n setIsAuth(isAuth)\n })\n }, [])\n\n\n // Use the state and functions returned from useTable to build your UI\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(\n {\n columns,\n data,\n initialState: {\n hiddenColumns: columnsToHide,\n },\n },\n useSortBy\n )\n\n // Render the UI for your table\n return (\n \n \n {headerGroups.map((headerGroup) => (\n \n {headerGroup.headers.map((column) => (\n \n {column.render(\"Header\")}\n \n ))}\n \n ))}\n \n \n {rows.map((row, i) => {\n prepareRow(row)\n return (\n \n {row.cells.map((cell) => {\n return (\n \n {cell.render(\"Cell\", {\n propertyName: row.original.propertyName,\n propertyId: row.original.propertyId,\n externalId: row.original.externalId,\n address: row.original.address,\n portfolio: row.original.portfolio,\n toggle: row.original.toggle,\n notificationId: row.original.notificationId,\n isAuth: isAuth\n })}\n \n ) // YES\n })}\n \n )\n })}\n \n
\n )\n}\n\nexport default Table\n","import React, { useState, useEffect, useContext } from \"react\"\nimport media from \"styled-media-query\"\nimport styled from \"styled-components\"\nimport NotificationTable from \"./NotificationTable\"\n// import IconLaunch from \"./../../images/ic_launch_green.svg\"\nimport { API, Auth } from \"aws-amplify\"\nimport IconActive from \"./../../images/ic_pencil_blue.svg\"\nimport ToggleTriState from './ToggleTriState'\n\nimport IconSort from \"./../../images/ic_arrows_sort.svg\"\nimport { useHistory } from \"react-router-dom\"\nimport { Link } from \"react-router-dom\"\nimport ScreenSize from \"../wingnuts/ScreenSize.enum\"\nimport MediaQuery from \"react-responsive\"\nimport { COLORS } from \"../../styles/colors\"\n// import WingnutStatus from \"../wingnuts/WingnutStatus.enum\"\n// import { DateTime } from \"luxon\"\n\n\n// Notification table design\n\n// Sort key\n// https://stackoverflow.com/questions/63927644/how-does-one-supply-a-custom-sort-function-for-react-table-7\n\nfunction NotificationTableStructure(props) {\n\n const updateTableCell = async (toggle, notificationId) => {\n \n if(toggle !== null && notificationId !== null){\n var newConfig = {\n \"entityStatus\": \"\",\n }\n \n newConfig['entityStatus'] = toggle === 1 ? \"enabled\" : \"disabled\"\n\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: newConfig\n }\n const response = await API.post('FrontendAPI-notifications', `/${notificationId}`, init)\n if (response.success) {\n // success save\n } \n }\n }\n\n const tableColumns = React.useMemo(\n () => [\n {\n // Turned int function to get access to column props { props.column.isSorted ? props.column.isSortedDesc ? ' 🔽' : ' 🔼' : ''}\n Header: (props) => {\n return (\n \n Property \n \n \n \n )\n },\n accessor: \"property\",\n sortType: \"basic\",\n // maxWidth: 301,\n // minWidth: 200,\n width: '20%',\n Cell: (props) => {\n return (\n \n \n {props.propertyName} \n \n \n )\n },\n // Cell: props => \n Property ID \n \n \n \n ),\n accessor: \"propertyID\",\n sortType: \"basic\",\n // maxWidth: 301,\n minWidth: 130,\n width: '5%',\n Cell: (props) => {\n return (\n \n \n {props.externalId} \n \n \n )\n },\n },\n {\n Header: (\n \n Address \n \n \n \n ),\n accessor: \"address\",\n sortType: \"basic\",\n // maxWidth: 301,\n // minWidth: 299,\n width: '32%',\n Cell: (props) => {\n return (\n \n {props.address} \n \n )\n },\n },\n {\n Header: (\n \n Portfolio \n \n \n \n ),\n accessor: \"portfolio\",\n sortType: \"basic\",\n // maxWidth: 501,\n // minWidth: 299,\n width: '12%',\n Cell: (props) => {\n return (\n \n {props.portfolio} \n \n )\n },\n },\n {\n Header: (\n \n Edit \n \n ),\n accessor: \"edit\",\n // maxWidth: 301,\n // minWidth: 299,\n width: '6%',\n Cell: (props) => {\n return (\n \n \n \n \n \n )\n },\n },\n {\n Header: (\n \n On/Off \n \n ),\n accessor: \"onOff\",\n width: '15%',\n Cell: (props) => {\n return (\n \n updateTableCell(e, props.notificationId)} />\n \n )\n },\n },\n ],\n []\n )\n\n const hiddenColumns = (screenSize) => {\n\n var columnsToHide = []\n if (screenSize === ScreenSize.Medium) {\n columnsToHide = [\"address\", \"portfolio\"]\n }\n if (screenSize === ScreenSize.Small) {\n columnsToHide = [\"address\", \"portfolio\", \"propertyID\"]\n }\n return columnsToHide\n }\n\n return (\n \n \n \n \n\n \n \n\n \n \n \n \n )\n}\n\nexport default NotificationTableStructure\n\nconst Container = styled.div`\n /* border: 1px solid red; */\n overflow: auto;\n height: 100%;\n width: 100%;\n margin-top: 0px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-top: 0px; \n padding-left: 16px; \n padding-right: 16px; \n `}\n ${media.between(\"744px\", \"large\")`\n /* margin-top: 20px; */\n width: 98%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Styles = styled.div`\n /* padding-top: 10px; */\n color: ${COLORS.White};\n overflow: none;\n\n table {\n border-spacing: 0;\n /* border: 1px solid blue; */\n\n thead {\n ${\"\" /* These styles are required for a scrollable body to align with the header properly */}\n overflow-y: auto;\n overflow-x: hidden;\n\n // Below create a fixed header - from here -> https://codesandbox.io/s/54z882qno4?file=/index.css:192-256\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n tbody {\n ${\"\" /* These styles are required for a scrollable table body */}\n overflow-y: scroll;\n overflow-x: hidden;\n }\n\n tr {\n :last-child {\n td {\n border-bottom: 1;\n }\n }\n }\n\n th,\n td {\n margin: 0;\n border-bottom: 1px solid ${COLORS.HighlightDark};\n\n :last-child {\n border-right: 0;\n }\n }\n }\n`\nconst HeaderDiv = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 5px;\n height: 45px;\n background: ${COLORS.Secondary};\n`\n\nconst CellDiv = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n position: relative;\n bottom: 7px;\n /* height: 45px; */\n`\n\nconst WingnutDiv = styled.div`\n /* border: 1px purple dashed; */\n /* height: 50px; */\n /* margin-top: 20px; */\n /* margin-bottom: 7px; */\n`;\n\nconst ContentDiv = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n align-self: center;\n`;\n\nconst CellStatusDiv = styled.div`\n /* border: 1px green dashed; */\n padding-top: 5px;\n padding-bottom: 5px;\n width: 110px;\n padding-left: 30px;\n ${media.lessThan(\"743px\")`\n width: 70px;\n padding-left: 8px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 80px;\n padding-left: 20px;\n `}\n\n`\n\nconst BtnIcon = styled.button`\n background: transparent;\n /* outline: none; */\n border: none;\n /* border: 1px green dashed; */\n`\n\nconst SortIcon = styled.img`\n /* border: 1px red dashed; */\n width: 18px;\n height: 18px;\n position: relative;\n /* align-self: center; */\n top: 1px;\n margin-right: 0px;\n`\n\nconst EditIcon = styled.img`\n /* border: 1px red dashed; */\n width: 20px;\n height: 20px;\n position: relative;\n /* align-self: center; */\n /* top: 1px; */\n margin-left: 20px;\n margin-bottom: 6px;\n ${media.lessThan(\"743px\")`\n margin-left: 3px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-left: 10px;\n `}\n`\n\nconst Text = styled.h5`\n /* border: 1px green dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 120%;\n display: flex;\n align-self: center;\n /* align-items: center; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst StaticText = styled(Text)`\n /* border: 1px green dashed; */\n padding-left: 5px;\n color: ${COLORS.HighlightLight};\n align-self: center;\n`","import React, { Component } from 'react'\nimport { API, Auth } from \"aws-amplify\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Fuse from \"fuse.js\"\nimport { SpinnerContainer, StyledSpinner } from \"../custom/Spinner\"\nimport NotificationController from \"./NotificationController\"\nimport NotificationTableStructure from \"./NotificationTableStructure\"\n\nimport WingnutStatus from \"./../wingnuts/WingnutStatus.enum\"\n\n\n// Parent container of notification search functions and table\n\nconst fuzzyOptions = {\n // isCaseSensitive: false,\n // includeScore: false,\n // shouldSort: true,\n // includeMatches: false,\n // findAllMatches: false,\n // minMatchCharLength: 3,\n // location: 0,\n threshold: 0.1,\n // distance: 100,\n // useExtendedSearch: false,\n // ignoreLocation: false,\n // ignoreFieldNorm: false,\n // fieldNormWeight: 1,\n // keys: [\"propertyId\", \"propertyName\", \"portfolio\", \"linkedWingnuts\", \"address.streetAddress\", \"address.city\", \"address.postalZip\", \"address.provinceState\", \"address.country\"],\n keys: [\"propertyId\", \"propertyName\", \"portfolio\", \"linkedWingnuts\", \"address\"],\n}\n\nexport default class NotificationOverview extends Component {\n\n constructor() {\n super()\n this.fuseSearch = null\n this.showData = true\n this.state = {\n data: [],\n search: \"\",\n isLoading: true,\n status: {\n Unconfigured: false,\n },\n }\n }\n\n componentDidMount() {\n this.getNotifications()\n }\n\n componentWillUnmount() {\n this.showData = false\n }\n\n componentDidUpdate(prevProps, prevState){\n if(prevState.isLoading === true && this.state.isLoading === false){\n this.filterData(this.state.search, this.state.status)\n }\n }\n\n searchForNotification(event) {\n if(this.state.isLoading === false){\n this.filterData(event.target.value, this.state.status)\n } else {\n this.setState({\n search: event.target.value,\n })\n }\n }\n\n filterData(fuzzySearch, wingnutState) {\n var data = []\n if (fuzzySearch) {\n data = this.fuseSearch.search(fuzzySearch).map((s) => s.item)\n } else {\n if(this.fuseSearch){\n data = this.fuseSearch.getIndex().docs\n }\n }\n\n if (wingnutState.Unconfigured) {\n data = data.filter((item) => item.linkedWingnuts.length == 0)\n }\n\n this.setState({\n search: fuzzySearch,\n status: wingnutState,\n data: data,\n })\n }\n\n \n toggleStatus(status) {\n var wingnutStatus = this.state.status\n\n if (status === WingnutStatus.Unlinked) {\n wingnutStatus.Unconfigured = !wingnutStatus.Unconfigured\n }\n\n this.filterData(this.state.search, wingnutStatus)\n }\n\n setupTable(data) {\n this.fuseSearch = new Fuse(data, fuzzyOptions)\n this.setState({\n data: data,\n })\n }\n\n translateToggle(status) {\n if(status === \"enabled\"){\n return 1\n } else {\n return 0\n }\n }\n\n async getNotifications() {\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n }\n\n API.get(\"FrontendAPI-notifications\", \"\", init)\n .then((response) => {\n if (response.success) {\n const mappedData = response.data.map((item) => {\n return {\n propertyId: item.property.id,\n externalId: item.property.externalId,\n propertyName: item.propertyName,\n address: `${item.property.config.address.streetAddress} ${item.property.config.address.city} ${item.property.config.address.country} ${item.property.config.address.postalZip}`,\n portfolio: item.property.config.portfolio,\n notificationId: item.id,\n toggle: this.translateToggle(item.entityStatus),\n }\n })\n if (this.showData) {\n this.setupTable(mappedData)\n }\n }\n })\n .catch((error) => {\n console.error(\"THERE WAS ERROR\", error)\n })\n .finally(() => this.setState({ isLoading: false }))\n }\n\n render() {\n return (\n \n this.searchForNotification(e)}\n />\n { this.state.isLoading \n ? ( \n )\n }\n}\n\nconst Container = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n margin-bottom: 50px;\n width: 90%;\n height: 100%;\n overflow: auto;\n max-width: 1129px;\n background-color: #0e1c36;\n border-radius: 20px;\n padding: 34px;\n /* margin-right: 30px; */\n margin-top: 20px;\n ${media.lessThan(\"743px\")`\n width: 90%;\n align-self: center;\n margin-right: 0px;\n `}\n`\n","import React, { useEffect, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgSearch from \"./../../images/ic_search.svg\"\nimport { COLORS } from \"../../styles/colors\"\nimport { BodyLarge, H2, Label } from '../../styles/fonts'\nimport { API, Auth } from \"aws-amplify\"\n\nexport default function PropertyOverview(props) {\n\n const [seats, setSeats] = useState(0)\n \n useEffect(() => {\n getCompanySeats()\n }, [])\n \n const getCompanySeats = async (data) => {\n\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` }\n }\n \n API.get('FrontendAPI-companies', '/details', init)\n .then((response) => {\n\n if (response.success) {\n\n if(response.data && response.data.config && response.data.config.seats){\n setSeats(response.data.config.seats)\n }\n }\n })\n .catch((err) => {\n console.error(err)\n })\n }\n \n\n return (\n \n \n\n \n\n \n Search for active users below \n User \n\n \n \n\n \n\n \n Seats used \n {props.tableData.length} / {seats} \n \n \n\n \n Showing \n {props.tableData.length} Results \n \n\n \n \n )\n}\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n /* background-color: ${COLORS.Base}; */\n height: auto;\n margin-bottom: 10px;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n max-height: 840px;\n /* align-items: center; */\n padding-top: 30px;\n margin-right: 0px;\n justify-content: center;\n flex-direction: column-reverse;\n `}\n ${media.between(\"744px\", \"large\")`\n flex-direction: column-reverse;\n height: auto;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: auto;\n gap: 11px;\n max-width: 1500px;\n ${media.lessThan(\"743px\")`\n /* width: 80%; */\n `}\n ${media.between(\"744px\", \"large\")`\n /* flex-direction: row; */\n width: 90%;\n justify-content: flex-start;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst TopContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n gap: 80px;\n /* width: auto; */\n max-width: 1500px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n gap: 40px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchContainerTop = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: column;\n /* width: 400px; */\n /* max-width: 400px; */\n /* max-width: 400px; */\n ${media.lessThan(\"743px\")`\n margin-top: 10px;\n align-content: center;\n max-width: 400px;\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 10px;\n width: 90%;\n max-width: 400px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\n// wraps search bar/icon and instruction\nconst SearchBarContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n align-self: center;\n width: 100%;\n`\n\nconst SeatsUsedContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n /* align-self: center; */\n width: 100%;\n`\n// wraps search bar and search icon\n\nconst SearchBar = styled.input`\n /* border: 1px blue dashed; */\n width: 400px;\n height: 50px;\n /* max-width: 600px; */\n outline: none;\n border: 1px solid ${COLORS.White};\n color: ${COLORS.White};\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 129.5%;\n font-weight: normal;\n background-color: ${COLORS.Primary};\n border-radius: 8px;\n box-sizing: border-box;\n padding-left: 10px;\n ::placeholder {\n color: ${COLORS.HighlightMedium};\n }\n :focus {\n outline: ${COLORS.White};\n border: 2px solid ${COLORS.White};\n }\n ${media.lessThan(\"743px\")`\n width: 100%;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 300px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchIcon = styled.img`\n /* border: 1px red dashed; */\n height: 20px;\n width: 20px;\n transition-duration: 0.5s;\n color: ${COLORS.White};\n margin-left: -40px;\n margin-top: 15px;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n max-width: 800px;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: auto;\n min-width: 360px;\n margin-bottom: 0px;\n `}\n ${media.between(\"744px\", \"large\")`\n width: 90%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst StatusPair = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: column;\n align-content: flex-end;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n width: auto;\n align-content: center;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-right: 8.5px;\n flex-direction: column;\n `}\n ${media.greaterThan(\"large\")`\n margin-right: 8.5px;\n `}\n`\n\nconst StatusPairRight = styled(StatusPair)`\n ${media.between(\"744px\", \"large\")`\n margin-left: 8.5px;\n `}\n ${media.greaterThan(\"large\")`\n margin-left: 8.5px;\n `}\n\n`;\n\nconst StatusCard = styled.div`\n width: 287px;\n height: 70px;\n /* min-width: 340px; */\n /* max-width: 380px; */\n /* height: 40%; */\n /* min-height: 85px; */\n /* max-height: 90px; */\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n align-self: flex-end;\n background: #0e1c36;\n border-radius: 10px;\n margin-bottom: 17px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n width: 90%;\n `}\n ${media.between(\"744px\", \"large\")`\n min-width: 300px;\n max-width: 300px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst LeftContainer = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n`;\n\nconst StatusIcon = styled.img`\n width: 24px;\n height: auto;\n margin-left: 20px;\n margin-right: 20px;\n align-self: center;\n`\n\nconst CardTextContainer = styled.div`\n /* border: 1px red dashed; */\n width: 144px;\n display: flex;\n flex-direction: column;\n`\n\nconst CardHeader = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 129.5%;\n letter-spacing: 0.03em;\n color: ${COLORS.HighlightMedium};\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 12pt;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst CardNumber = styled.h1`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 32px;\n line-height: 129.5%;\n display: flex;\n align-items: center;\n letter-spacing: -0.01em;\n text-transform: capitalize;\n color: ${COLORS.White};\n`\n\nconst ResultContainer = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: auto;\n ${media.lessThan(\"743px\")`\n margin-top: 16px;\n margin-bottom: 16px;\n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 10px;\n margin-left: 20px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SearchText = styled(CardHeader)`\n font-size: 14px;\n padding-top: 10px;\n ${media.lessThan(\"743px\")`\n font-size: 12px;\n `}\n ${media.between(\"744px\", \"large\")`\n font-size: 12px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultHeader = styled(CardHeader)`\n font-size: 14px;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst ResultNumber = styled(CardHeader)`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 110%;\n letter-spacing: -0.01em;\n color: ${COLORS.White} ;\n ${media.lessThan(\"743px\")`\n /* align-self: center; */\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst EyeButton = styled.button`\n width: 42px;\n height: 42px;\n border: none;\n box-sizing: border-box;\n border-radius: 5px;\n background: #0e1c36;\n justify-self: end;\n pointer-events: none;\n :hover {\n background: ${COLORS.Secondary};\n }\n`\n\nconst EyeIcon = styled.img`\n width: 24px;\n height: 24px;\n`","import React, { useState, useEffect, useContext } from \"react\"\nimport { useTable, useSortBy } from \"react-table\"\nimport { COLORS } from \"../../styles/colors\"\nimport { AccountContext } from \"../../auth/Account\"\n\nfunction Table({ columns, data, columnsToHide }) {\n\n const { getSession } = useContext(AccountContext)\n const [isLoggedInEmail, setIsLoggedInEmail ] = useState()\n\n useEffect(() => {\n getSession().then(({ email }) => {\n setIsLoggedInEmail(email)\n })\n }, [])\n\n // Use the state and functions returned from useTable to build your UI\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(\n {\n columns,\n data,\n initialState: {\n hiddenColumns: columnsToHide,\n },\n },\n useSortBy\n )\n\n // Render the UI for your table\n return (\n \n \n {headerGroups.map((headerGroup) => (\n \n {headerGroup.headers.map((column) => (\n \n {column.render(\"Header\")}\n \n ))}\n \n ))}\n \n \n {rows.map((row, i) => {\n prepareRow(row)\n\n return (\n \n {row.cells.map((cell) => {\n return (\n \n {cell.render(\"Cell\", {\n firstName: row.original.firstName,\n lastName: row.original.lastName,\n phone: row.original.phone,\n email: row.original.email,\n type: row.original.type,\n uuid: row.original.uuid, \n isLoggedIn: row.original.email === isLoggedInEmail ? true : false,\n status: row.original.status\n })}\n \n ) // YES\n })}\n \n )\n })}\n \n
\n )\n}\n\nexport default Table\n","import React, { Link, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../../images/ic_close.svg\"\nimport ImgCheck from \"./../../../images/ic_check_circle.svg\"\nimport ImgAccount from \"./../../../images/ic_account_white.svg\"\nimport ImgVerified from \"./../../../images/ic_verified.svg\"\nimport ImgViewer from \"./../../../images/ic_viewer.svg\"\nimport ImgProperty from \"./../../../images/ic_property.svg\"\nimport { COLORS } from \"../../../styles/colors\"\nimport { BodySmall, FieldText, H1, H2 } from \"../../../styles/fonts\"\nimport { API, Auth } from \"aws-amplify\"\nimport { DarkButtonSpinner } from \"./../../custom/Spinner\"\n\n\n\nexport default function ChangeUserPopup(props) {\n const [isHoveringDelete, setIsHoveringDelete] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n\n const [selectedRole, setSelectedRole] = useState(props.userDetails?.type); \n const [disabled, setDisabled] = useState(true)\n const [showSpinner, setShowSpinner] = useState(false)\n\n const handleChange = (role) => {\n setSelectedRole(role); \n setDisabled(false)\n };\n\n const saveUserType = async (data) => {\n setDisabled(true)\n setShowSpinner(true)\n\n const updateUser = {\n userId: props.userDetails?.userId,\n email: props.userDetails?.email,\n new_role: selectedRole\n }\n\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: updateUser\n }\n\n API.post('FrontendAPI-companies', '/user/update_auth', init)\n .then((response) => {\n\n if (response.success) {\n props.refreshTable()\n props.toChangeSuccess()\n } else {\n\n }\n })\n .catch((err) => {\n console.error(err)\n })\n .finally(() => {\n setShowSpinner(false)\n setDisabled(false)\n })\n }\n\n\n return (\n \n \n {props.userDetails?.firstName} {props.userDetails?.lastName}\n \n \n {props.userDetails?.email}\n \n \n {props.userDetails?.phone}\n \n \n Change User Type\n \n \n \n handleChange(\"admin\")}\n type='checkbox' />\n \n Admin \n \n \n \n handleChange(\"write\")}\n type='checkbox' />\n \n Editor \n \n \n \n handleChange(\"read\")}\n type='checkbox' />\n \n Viewer \n \n \n \n \n \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n style={{cursor: disabled == true ? 'default': 'pointer', opacity: disabled == true ? \"50%\" : isHovering == true ? \"80%\" : \"100%\" }}\n onClick={saveUserType}\n >\n SAVE USER \n {showSpinner && {\n setIsHoveringDelete(true)\n }}\n onMouseLeave={(e) => {\n setIsHoveringDelete(false)\n }}\n style={{ opacity: isHoveringDelete == true ? \"80%\" : \"100%\" }}\n onClick={props.toDeleteUser}\n >\n DELETE USER \n \n \n \n\n )\n}\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 466px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: auto;\n height: 480px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n /* width: 16px; */\n /* height: 16px; */\n /* margin-bottom: 17px; */\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst Checkbox = styled.input`\n border: 1px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 3px;\n margin-right: 20px;\n width: 20px;\n height: 20px;\n background: transparent;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 43px;\n gap: 10px;\n align-self: center;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 237px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst DangerButton = styled(Button)`\n border: 1px solid #F15C5D;\n background: #F15C5D;\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonTextNo = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.Base};\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst ButtonTextYes = styled(ButtonTextNo)`\n color: ${COLORS.Base};\n`\n\nconst StackColumn = styled.div`\n /* border: 1px yellow dashed; */\n display: flex; \n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n align-self: center;\n gap: 0;\n `;\n\nconst StackRow = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n gap: 0;\n`;","import React, { Link, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../../images/ic_close.svg\"\nimport ImgCheck from \"./../../../images/ic_check_circle.svg\"\nimport ImgAccount from \"./../../../images/ic_account_white.svg\"\nimport ImgVerified from \"./../../../images/ic_verified.svg\"\nimport ImgViewer from \"./../../../images/ic_viewer.svg\"\nimport ImgProperty from \"./../../../images/ic_property.svg\"\nimport { COLORS } from \"../../../styles/colors\"\nimport { BodySmall, FieldText, H1, H2 } from \"../../../styles/fonts\"\nimport { API, Auth } from \"aws-amplify\"\n\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 466px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: auto;\n height: 480px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n /* width: 16px; */\n /* height: 16px; */\n /* margin-bottom: 17px; */\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst Checkbox = styled.input`\n border: 1px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 3px;\n margin-right: 20px;\n width: 20px;\n height: 20px;\n background: transparent;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 43px;\n gap: 10px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 237px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonTextNo = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst ButtonTextYes = styled(ButtonTextNo)`\n color: ${COLORS.Base};\n`\n\nconst StackColumn = styled.div`\n /* border: 1px yellow dashed; */\n display: flex; \n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n align-self: center;\n gap: 0;\n `;\n\nconst StackRow = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n gap: 0;\n`;\n\nexport default function ChangeUserPopup(props) {\n const [isHoveringYes, setIsHoveringYes] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n const [checked, setChecked] = useState(false)\n\n return (\n\n \n \n User type successfully changed\n \n \n {\n setIsHoveringYes(true)\n }}\n onMouseLeave={(e) => {\n setIsHoveringYes(false)\n }}\n onClick={props.closePopup}\n style={{ opacity: isHoveringYes == true ? \"80%\" : \"100%\", alignSelf: 'center', marginTop: '50px', width: '237px' }}\n >\n CLOSE \n \n \n\n )\n}\n","import React, { Link, useState, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport Image3 from \"./../../../images/ic_arrow_right_green.svg\"\nimport ImgClose from \"./../../../images/ic_close.svg\"\nimport ImgCheck from \"./../../../images/ic_check_circle.svg\"\nimport ImgAccount from \"./../../../images/ic_account_white.svg\"\nimport ImgVerified from \"./../../../images/ic_verified.svg\"\nimport ImgViewer from \"./../../../images/ic_viewer.svg\"\nimport ImgProperty from \"./../../../images/ic_property.svg\"\nimport { COLORS } from \"../../../styles/colors\"\nimport { BodySmall, FieldText, H1, H2 } from \"../../../styles/fonts\"\nimport { API, Auth } from \"aws-amplify\"\n\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 466px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n width: auto;\n height: 480px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst WingnutDetails = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: column;\n width: 350px;\n justify-content: center;\n align-self: center;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nconst WingnutIcon = styled.img`\n /* width: 16px; */\n /* height: 16px; */\n /* margin-bottom: 17px; */\n align-self: center;\n`\n\nconst HeaderText = styled.div`\n font-family: Blinker;\n font-style: normal;\n font-weight: normal;\n font-size: 28px;\n line-height: 110%;\n display: flex;\n align-items: center;\n text-align: center;\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n align-self: center;\n`\n\nconst Checkbox = styled.input`\n border: 1px solid ${COLORS.White};\n box-sizing: border-box;\n border-radius: 3px;\n margin-right: 20px;\n width: 20px;\n height: 20px;\n background: transparent;\n`\n\nconst ButtonContainer = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 43px;\n gap: 10px;\n`\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 237px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: #63c085;\n color: black;\n cursor: pointer;\n margin-bottom: 10px;\n ${media.lessThan(\"743px\")`\n align-self: flex-start;\n margin-top: 28px;\n height: 55px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst DangerButton = styled(Button)`\n border: 1px solid #F15C5D;\n background: #F15C5D;\n`\nconst BtnNo = styled(Button)`\n background: transparent;\n color: ${COLORS.White};\n margin-left: 5px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n `}\n`\n\nconst ButtonTextNo = styled.p`\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: ${COLORS.White};\n transition-duration: 0.5s;\n :hover {\n }\n`\n\nconst ButtonTextYes = styled(ButtonTextNo)`\n color: ${COLORS.Base};\n`\n\nconst StackColumn = styled.div`\n /* border: 1px yellow dashed; */\n display: flex; \n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n align-self: center;\n gap: 0;\n `;\n\nconst StackRow = styled.div`\n /* border: 1px red dashed; */\n display: flex; \n flex-direction: row;\n justify-content: start;\n align-items: center;\n gap: 0;\n`;\n\nexport default function DeleteUser (props) {\n const [isHoveringYes, setIsHoveringYes] = useState(false)\n const [isHovering, setIsHovering] = useState(false)\n const [checked, setChecked] = useState(false)\n\n const deleteUser = async () => {\n\n const invite = {\n userId: props.userDetails?.userId,\n email: props.userDetails?.email\n }\n \n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` },\n body: invite\n }\n\n var url = '/user/delete'\n\n if(props.userDetails?.status === 'pending'){\n url = '/user/delete_pending'\n }\n \n API.post('FrontendAPI-companies', url, init)\n .then((response) => {\n if (response.success) {\n props.refreshTable()\n props.closePopup()\n } else {\n console.log(\"There was an error deleting user\")\n }\n })\n .catch((err) => {\n console.error(err)\n })\n }\n\n\n return (\n \n {props.userDetails?.status === 'pending' ? \n \n {props.userDetails?.email}\n \n : \n null\n }\n\n \n Are you sure you want to remove this User?\n \n \n Related User data will be lost. This can't be undone\n \n \n \n {\n setIsHoveringYes(true)\n }}\n onMouseLeave={(e) => {\n setIsHoveringYes(false)\n }}\n onClick={deleteUser}\n style={{ opacity: isHoveringYes == true ? \"80%\" : \"100%\", width: '150px' }}\n >\n YES \n \n {\n setIsHovering(true)\n }}\n onMouseLeave={(e) => {\n setIsHovering(false)\n }}\n onClick={props.userDetails?.status === 'pending' ? props.closePopup : props.backToChange}\n style={{ backgroundColor: isHovering == true ? COLORS.Secondary : \"transparent\", width: '150px' }}\n >\n No \n \n \n \n )\n}\n","import React, { useState, useEffect, useContext } from \"react\"\nimport styled from \"styled-components\"\nimport media from \"styled-media-query\"\nimport ImgClose from \"./../../../images/ic_close.svg\"\nimport { COLORS } from \"../../../styles/colors\"\nimport ChangeUser from './ChangeUser'\nimport ChangeUserSuccess from './ChangeUserSuccess'\nimport DeleteUser from './DeleteUser'\nimport { API, Auth } from \"aws-amplify\"\n\nconst Container = styled.div`\n /* border: 1px yellow dashed; */\n width: 705px;\n height: 500px;\n display: flex;\n flex-direction: column;\n background-color: ${COLORS.Primary};\n border-radius: 20px;\n ${media.lessThan(\"743px\")`\n /* justify-content: center; */\n width: auto;\n height: 100%;\n margin-left: 10px;\n margin-right: 10px;\n `}\n ${media.between(\"744px\", \"large\")`\n padding-bottom: 30px;\n width: 650px;\n `}\n ${media.greaterThan(\"large\")`\n padding-bottom: 30px;\n `}\n`\n\nconst BtnClose = styled.button`\n height: 24px;\n width: 24px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 11px;\n background: transparent;\n border: none;\n outline: none;\n align-self: flex-end;\n`\n\nconst CloseIcon = styled.img`\n width: 14px;\n height: 14px;\n align-self: center;\n`\n\nexport default function ChangeUserRouter(props) {\n\n const [inviteFlow, setInviteFlow] = useState(props.popup)\n const [seats, setSeats] = useState(0)\n\n useEffect(() => {\n getCompanySeats()\n }, [])\n\n const getCompanySeats = async (data) => {\n\n const token = (await Auth.currentSession()).getIdToken()\n const jwt = token.getJwtToken()\n const init = {\n headers: { Authorization: `Bearer ${jwt}` }\n }\n \n API.get('FrontendAPI-companies', '/details', init)\n .then((response) => {\n\n if (response.success) {\n if(response.data && response.data.config && response.data.config.seats){\n setSeats(response.data.config.seats)\n }\n }\n })\n .catch((err) => {\n console.error(err)\n })\n }\n\n const toChangeSuccess = () => {\n setInviteFlow(1)\n }\n\n const toDeleteUser = () => {\n setInviteFlow(2)\n }\n\n const backToChange = () => {\n setInviteFlow(0)\n }\n\n\n return (\n \n \n \n\n {/* -----------------------------Change User & Enter Email */}\n\n {(() => {\n switch (inviteFlow) {\n case 0:\n return \n case 1:\n return ;\n case 2:\n return \n default:\n return null\n }\n })()}\n \n \n\n )\n}\n","import React, { useEffect, useState, useContext } from \"react\"\nimport { AccountContext } from \"./../../auth/Account\"\nimport media from \"styled-media-query\"\nimport styled from \"styled-components\"\nimport UsersTable from \"./UsersTable\"\nimport IconUser from \"./../../images/ic_account.svg\"\nimport IconVerified from \"./../../images/ic_verified.svg\"\nimport IconPencil from \"./../../images/ic_pencil_blue.svg\"\nimport IconAlertBlue from \"./../../images/ic_alert_blue_light.svg\"\nimport IconSort from \"./../../images/ic_arrows_sort.svg\"\nimport ScreenSize from \"./../wingnuts/ScreenSize.enum\"\nimport MediaQuery from \"react-responsive\"\nimport { COLORS } from \"./../../styles/colors\"\nimport ChangeUserRouter from \"./edit_user_modal/ChangeUserRouter\"\n// import DeleteUserPopup from \"./edit_user_modal/ChangeUserPopup\"\nimport Modal from \"react-modal\"\n\n// Modal style\nconst customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n background: COLORS.Primary,\n borderRadius: \"30px\",\n border: \"none\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.7)\",\n zIndex: 10,\n },\n }\n\n// Handle the highlevel table construction\nfunction UsersTableStructure(props) {\n\n const [isChangeModalOpen, setIsChangeModalOpen] = useState(false)\n const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)\n const [userDetails, setUserDetails] = useState({})\n const [loggedInUserEmail, setLoggedInUserEmail] = useState()\n\n const openChangePopup = (e, details) => {\n setUserDetails({\n userId: details.uuid,\n firstName: details.firstName,\n lastName: details.lastName,\n email: details.email,\n phone: details.phone,\n type: details.type,\n status: details.status\n })\n setIsChangeModalOpen(true)\n }\n \n const openDeletePopup = (e, details) => {\n setUserDetails({\n userId: details.uuid,\n firstName: details.firstName,\n lastName: details.lastName,\n email: details.email,\n phone: details.phone,\n type: details.type,\n status: details.status\n })\n setIsDeleteModalOpen(true)\n }\n\n const closeChangePopup = () => {\n setIsChangeModalOpen(false)\n }\n \n const closeDeletePopup = () => {\n setIsDeleteModalOpen(false)\n }\n\n //----------------------------------------Custom Sort Functions\n const basicSort = React.useMemo(() => {\n return (rowA, rowB, columnId, desc) => {\n const a = rowA.original[columnId]\n const b = rowB.original[columnId]\n if(a > b) return 1\n if (b > a) return -1\n return 0\n }\n}, [])\n\n const tableColumns = React.useMemo(\n () => [\n {\n // Turned int function to get access to column props { props.column.isSorted ? props.column.isSortedDesc ? ' 🔽' : ' 🔼' : ''}\n Header: (props) => {\n return (\n \n First Name \n \n \n \n )\n },\n accessor: \"firstName\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '8%',\n Cell: (props) => {\n // console.log(\"props firstName\", props.firstName)\n return (\n \n {props.firstName} \n \n )\n },\n },\n {\n Header: (\n \n Last Name \n \n \n \n ),\n accessor: \"lastName\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '8%',\n Cell: (props) => {\n return (\n \n {props.lastName} \n \n )\n },\n },\n {\n Header: (\n \n Phone Number \n \n \n \n ),\n accessor: \"phone\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '8%',\n Cell: (props) => {\n return (\n \n {props.phone} \n \n )\n },\n },\n {\n Header: (\n \n Email \n \n \n \n ),\n accessor: \"email\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '10%',\n Cell: (props) => {\n return (\n \n {props.email} \n \n )\n },\n },\n {\n Header: (\n \n Type \n \n \n \n ),\n accessor: \"type\",\n sortType: basicSort,\n // maxWidth: 301,\n // minWidth: 299,\n width: '7%',\n Cell: (props) => {\n // console.log(\"type\", props.type)\n return (\n \n {/* ANNA CSS THIS */}\n \n\n {\n props.status === 'pending' ? \n \n Invited \n \n\n :\n\n (() => {\n switch (props.type) {\n case \"admin\":\n return (\n \n Admin \n \n )\n case \"write\":\n return (\n \n Editor \n \n )\n case \"read\":\n return (\n \n Viewer \n \n )\n default:\n return null;\n }\n })() \n } \n \n \n )},\n },\n {\n Header: (\n \n Edit \n \n ),\n accessor: \"edit\",\n // sortType: basicSort,\n width: '4%',\n Cell: (props) => {\n // console.log(\"Props edit\", props)\n return (\n \n\n { props.status === 'pending' ? \n openDeletePopup(e, props)} src={IconPencil} style={{marginRight: '15px'}} /> \n :\n {\n if(props.isLoggedIn === false){\n openChangePopup(e, props)\n }\n } }/> \n }\n\n \n )\n },\n },\n ],\n []\n )\n\n const hiddenColumns = (screenSize) => {\n // propertyId, propertyName, address, portfolio, linkedWingnuts, status\n var columnsToHide = []\n if (screenSize === ScreenSize.Medium) {\n // propertyId, propertyName, portfolio, linkedWingnuts, status\n columnsToHide = [\"address\", \"portfolio\"]\n }\n if (screenSize === ScreenSize.Small) {\n // propertyId, propertyName, status\n columnsToHide = [\"address\", \"portfolio\", \"linkedWingnuts\"]\n }\n return columnsToHide\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n\n \n \n\n \n \n \n \n )\n}\n\nexport default UsersTableStructure\n\n\n\nconst Container = styled.div`\n /* border: 1px solid red; */\n overflow: auto;\n height: 100%;\n width: 100%;\n margin-top: 0px;\n ${media.lessThan(\"743px\")`\n align-self: center;\n margin-top: 0px; \n padding-left: 16px; \n padding-right: 16px; \n `}\n ${media.between(\"744px\", \"large\")`\n margin-top: 20px;\n width: 98%;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst Styles = styled.div`\n /* padding-top: 10px; */\n /* border: 1px solid green; */\n color: ${COLORS.White};\n overflow: none;\n\n table {\n border-spacing: 0;\n /* border: 1px solid blue; */\n\n thead {\n ${\"\" /* These styles are required for a scrollable body to align with the header properly */}\n overflow-y: auto;\n overflow-x: hidden;\n\n // Below create a fixed header - from here -> https://codesandbox.io/s/54z882qno4?file=/index.css:192-256\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n tbody {\n ${\"\" /* These styles are required for a scrollable table body */}\n overflow-y: scroll;\n overflow-x: hidden;\n }\n\n tr {\n :last-child {\n td {\n border-bottom: 1;\n }\n }\n }\n\n th,\n td {\n margin: 0;\n border-bottom: 1px solid ${COLORS.HighlightDark};\n\n :last-child {\n border-right: 0;\n }\n }\n }\n`\nconst HeaderDiv = styled.div`\n /* border: 1px red dashed; */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 5px;\n height: 45px;\n`\n\nconst CellDiv = styled.div`\n /* border: 1px green dashed; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n position: relative;\n bottom: 1px;\n height: 45px;\n`\n\nconst ContentDiv = styled.div`\n /* border: 1px yellow dashed; */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n align-self: center;\n`;\n\nconst BtnIcon = styled.button`\n /* border: 1px green dashed; */\n background: transparent;\n /* outline: none; */\n border: none;\n`\n\nconst TypeIcon = styled.div`\n /* border: 1px green dashed; */\n /* border: none; */\n display: flex;\n background: transparent;\n /* outline: none; */\n`\n\nconst IconArrow = styled.img`\n width: 6;\n height: 10px;\n /* margin-left: 20px; */\n align-self: center;\n transition-duration: 0.5s;\n ${media.lessThan(\"743px\")`\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst SortIcon = styled.img`\n /* border: 1px red dashed; */\n width: 18px;\n height: 18px;\n position: relative;\n /* align-self: center; */\n top: 1px;\n margin-right: 10px;\n`\n\nconst Icon = styled.img`\n /* border: 1px red dashed; */\n width: 10px;\n height: 10px;\n position: relative;\n top: 1px;\n`\n\nconst HeaderText = styled.h5`\n /* border: 1px green dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 120%;\n display: flex;\n align-self: center;\n /* align-items: center; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\nconst Text = styled.h5`\n /* border: 1px green dashed; */\n font-family: Roboto Condensed;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 120%;\n display: flex;\n align-self: center;\n /* align-items: center; */\n letter-spacing: -0.01em;\n color: ${COLORS.White};\n`\n\n\nconst StaticText = styled(Text)`\n font-weight: 400;\n padding-left: 5px;\n /* border: 1px green dashed; */\n color: ${COLORS.HighlightLight};\n align-self: center;\n`\n\nconst AlertIcon = styled.img`\n /* border: 1px red dashed;; */\n width: 24px; \n height: 24px;\n `\n\nconst UserIcon = styled.img`\n/* border: 1px red dashed;; */\nwidth: 16px; \nheight: 16px;\nmargin-left: 2px;\n`\n\nconst AdminIcon = styled.img`\n/* border: 1px red dashed;; */\n/* width: 24px; */\nheight: 24px;\n`\n\nconst EditUser = styled.div`\n /* border: 1px blue dashed; */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n height: 40px;\n cursor: pointer;\n /* position: relative; */\n`\n\n\n\n\n\n\n// render different table column combinations based on screen size\n\n// React-table\n// https://retool.com/blog/building-a-react-table-component/\n// https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic?file=/src/App.js\n// https://codesandbox.io/s/cocky-poincare-b24mt?file=/src/App.js:123-157\n// https://stackoverflow.com/questions/65161059/how-to-load-images-in-react-table-from-json-file\n\n// Header search\n// https://codesandbox.io/s/react-table-select-uh3i0?file=/src/HeaderButton.js:66-219\n\n// Fuzzy search\n// https://codesandbox.io/s/dq9ou?file=/src/index.js\n// https://medium.com/analytics-vidhya/how-to-create-a-fuzzy-search-in-react-js-using-fuse-js-859f80345657\n// https://fusejs.io/demo.html\n// https://www.youtube.com/watch?v=GZl-yEz4_qw&t=214s&ab_channel=ColbyFayock\n\n// {\n// Header: 'Serial',\n// accessor: 'serial',\n\n// Cell: props => \n \n \n \n\n {this.state.isAdmin === true ?\n \n \n Company Users \n INVITE NEW USER \n \n this.toggleStatus(s)}\n onInputChange={(e) => this.searchForUser(e)}\n />\n { this.state.isLoading\n ? (
\n :\n \n \n Missing user permissions \n \n
\n\n }\n\n\n \n )\n }\n}\n\n\nconst OuterContainer = styled.div`\n /* border: 1px yellow dashed; */\n background-color: #0E1C36;\n border-radius: 20px;\n height: auto;\n /* width: 100%; */\n display: flex;\n flex-direction: column;\n margin-top: 36px;\n padding-left: 33px;\n padding-right: 33px;\n padding-top: 20px;\n margin-right: 30px;\n margin-bottom: 40px;\n ${media.lessThan(\"743px\")`\n justify-content: center;\n /* padding-top: 10px; */\n margin-left: 30px;\n align-content: center;\n width: auto;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\nconst HeaderContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n ${media.lessThan(\"743px\")`\n flex-direction: column;\n justify-content: center;\n gap: 20px;\n `}\n ${media.between(\"744px\", \"large\")`\n `}\n ${media.greaterThan(\"large\")`\n `}\n`;\n\nconst Line = styled.div`\n /* width: 80%; */\n height: 1px;\n background: ${COLORS.HighlightMedium};\n margin-top: 15.5px;\n margin-bottom: 19px;\n /* margin-left: 20px; */\n`\n\n\nconst Button = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-left: 40px;\n padding-right: 40px;\n height: 40px;\n border: 1px solid #63c085;\n border-radius: 30px;\n background: ${COLORS.Green};\n color: ${COLORS.White};\n cursor: pointer;\n font-family: \"Roboto Condensed\", sans-serif;\n font-weight: 700;\n font-style: normal;\n text-align: center;\n letter-spacing: 0.05em;\n font-family: \"Roboto Condensed\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n text-align: center;\n letter-spacing: 0.05em;\n color: black;\n align-self: center;\n transition-duration: 0.5s;\n :hover {\n opacity: 0.8;\n }\n ${media.lessThan(\"743px\")`\n align-self: center;\n height: 55px;\n margin-right: 0px;\n font-size: 15px;\n `}\n ${media.between(\"744px\", \"large\")`\n height: 55px;\n font-size: 15px;\n `}\n ${media.greaterThan(\"large\")`\n `}\n`\n\n// mergeData(){\n// const properties = this.state.data\n// const notifications = this.state.notificationData\n// const toggleProperties = []\n\n// properties.forEach((property) => {\n// var item = {}\n// if (item = notifications.find(notification => notification.propertyId === property.uuid)) {\n// const newProperty = {\n// ...property,\n// toggleStatus: item.entityStatus,\n// notificationId: item.notificationId\n// }\n// toggleProperties.push(newProperty)\n// }\n// })\n\n// this.setState({\n// data: toggleProperties,\n// didMerge: true\n// })\n// }\n\n// async getProperties() {\n// const token = (await Auth.currentSession()).getIdToken()\n// const jwt = token.getJwtToken()\n// const init = {\n// headers: { Authorization: `Bearer ${jwt}` },\n// }\n\n// API.get(\"FrontendAPI-properties\", \"\", init)\n// .then((response) => {\n// if (response.success) {\n// const mappedData = response.data.map((item) => {\n\n// var alarmState = \"OK\"\n\n// if(item.config && item.config.alarms !== null && item.config.alarms !== undefined){\n\n// const alarms = item.config.alarms;\n\n// // Check if any of the alarms are set to \"ALARM\"\n// const isAnyAlarmSetToAlarm = Object.values(alarms).some(value => value === \"ALARM\");\n \n// if (isAnyAlarmSetToAlarm) {\n// alarmState = \"ALARM\"\n// } else {\n// alarmState = \"OK\"\n// }\n\n// }\n\n// return {\n// propertyId: parseInt(item.externalId),\n// propertyIdDisplay: item.externalId,\n// propertyName: item.config.name,\n// uuid: item.id,\n// alarmState: alarmState,\n// address: item.config.address,\n// portfolio: item.config.portfolio,\n// entityStatus: item.entityStatus === \"enabled\" ? 1 : 0, \n// linkedWingnuts: item.linkedWingnuts,\n// }\n// })\n// if (this.showData) {\n// this.setupTable(mappedData)\n// }\n// }\n// })\n// .catch((error) => {\n// console.error(error)\n// })\n// .finally(() => this.setState({ isLoading: false }))\n// }\n\n// async getNotificationToggles() {\n// const token = (await Auth.currentSession()).getIdToken()\n// const jwt = token.getJwtToken()\n// const init = {\n// headers: { Authorization: `Bearer ${jwt}` },\n// }\n\n// API.get(\"FrontendAPI-notifications\", \"\", init)\n// .then((response) => {\n// if (response.success) {\n// const mappedNotifications = response.data.map((item) => {\n// return {\n// propertyId: item.config.propertyId,\n// notificationId: item.id,\n// entityStatus: this.translateToggle(item.entityStatus),\n// }\n// })\n// if (this.showData) {\n// this.setState({\n// notificationData: mappedNotifications,\n// })\n// }\n// }\n// })\n// .catch((error) => {\n// console.error(\"THERE WAS ERROR\", error)\n// })\n// .finally(() => this.setState({ areTogglesLoading: false }))\n// }\n\n// translateToggle(status) {\n// if(status === \"enabled\"){\n// return 1\n// } else {\n// return 0\n// }\n// }","import React, {useState, useEffect, useContext} from \"react\"\nimport { BrowserRouter as Router, Switch, Route, useLocation, useHistory } from \"react-router-dom\"\nimport \"./App.scss\"\nimport MediaQuery from \"react-responsive\"\nimport ResetPassword from \"./ui/layout/ResetPassword\"\nimport CreateAccount from \"./ui/layout/CreateAccount\"\nimport SideNav from \"./ui/navbar/SideNav\"\nimport NavBar from \"./ui/navbar/NavBar\"\nimport Header from \"./ui/navbar/Header\"\nimport styled from \"styled-components\"\nimport AccountSettings from \"./ui/layout/Account\"\nimport WingnutOverview from \"./ui/wingnuts/WingnutOverview\"\nimport WingnutDetail from \"./ui/wingnuts/WingnutDetails\"\nimport AddWingnut from \"./ui/wingnuts/AddWingnut\"\nimport LinkWingnutToProperty from \"./ui/wingnuts/LinkWingnutToProperty\"\nimport AddWingnutSuccess from \"./ui/wingnuts/AddWingnutSuccess\"\nimport PropertyOverview from \"./ui/properties/PropertyOverview\"\nimport PropertyDetail from \"./ui/properties/PropertyDetail\"\nimport AddPropertyContainer from \"./ui/properties/AddPropertyContainer\"\nimport PropertyLink from \"./ui/wingnuts/LinkPropertyToWingnut\"\nimport Dashboard from \"./ui/layout/Dashboard\"\nimport HomeLayout from \"./ui/home/HomeLayout\"\nimport Help from \"./ui/layout/Help\"\nimport PrivacyPolicy from \"./ui/form/PrivacyPolicy\"\nimport TermsOfService from \"./ui/form/TermsOfService\"\nimport LoginStatic from \"./ui/layout/LoginStatic\"\nimport ProtectedRoute from \"./auth/ProtectedRoute\"\nimport Notification from \"./ui/notification/NotificationOverview\"\nimport NotificationDetails from \"./ui/notification/NotificationDetails\"\nimport { COLORS } from \"./styles/colors\"\nimport UsersOverview from \"./ui/users/UsersOverview\"\nimport { AccountContext } from \"./auth/Account\"\n\n// https://stackoverflow.com/questions/40612663/how-to-add-scroll-to-child-of-flex-item\n\nconst PageContainer = styled.div`\n display: flex;\n /* flex-flow: row wrap; */\n /* height: 200px; */\n`\n\nconst RightPanel = styled.div`\n flex: 1;\n display: flex; /*Added this*/\n flex-direction: column; /*Added this*/\n height: 100vh;\n background-color: ${COLORS.Base};;\n padding-left: 30px;\n`\n\nconst ContentPanel = styled.div`\n display: block;\n overflow: auto;\n flex: 1; /*Added this*/\n height: 100vh;\n`\n\nconst NavBarContainer = styled.div`\n display: flex;\n flex-direction: column;\n`\n\nfunction AppRouter(props) {\n\n\n return (\n \n
\n \n {\n return (\n \n \n \n \n \n \n )\n }}\n > \n \n \n \n \n\n
\n \n {\n return (\n \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 React, { useState, useEffect, useContext } from \"react\"\nimport { BrowserRouter as Router, useLocation, useHistory } from \"react-router-dom\"\nimport { Amplify } from 'aws-amplify';\nimport { Reset } from \"styled-reset\"\nimport { Auth } from \"aws-amplify\"\nimport { ApiAuth, ApiEndpoints } from \"./api\"\nimport \"./App.scss\"\nimport AppRouter from \"./AppRouter\"\nimport { Account } from \"./auth/Account\"\nimport { AccountContext } from \"./auth/Account\"\n\nAmplify.configure({\n Auth: ApiAuth,\n API: {\n endpoints: ApiEndpoints,\n },\n})\n\nfunction App() {\n\n const history = useHistory()\n // const location = useLocation()\n\n // State for authentication status\n const [isAuth, setIsAuth] = useState(false)\n\n // State to track if session check is complete\n const [isLoading, setIsLoading] = useState(false);\n\n const loginAuth = () => {\n setIsAuth(true)\n setIsLoading(false)\n }\n\n const logoutAuth = () => {\n setIsAuth(false)\n setIsLoading(false)\n }\n \n return (\n \n \n \n \n )\n}\n\n\nexport default App\n","\nexport default {\n identityPoolId: process.env.REACT_APP_COGNITO_IDENTITY_POOL_ID,\n region: process.env.REACT_APP_API_REGION,\n userPoolId: process.env.REACT_APP_COGNITO_USER_POOL_ID,\n userPoolWebClientId: process.env.REACT_APP_COGNITO_CLIENT_ID\n}\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport \"./index.scss\"\nimport \"./config.js\"\nimport App from \"./App\"\nimport \"bootstrap/dist/css/bootstrap.min.css\"\n\nReactDOM.render(\n