#392 #395 upgrade plan links

ruuvi · Apr 3, 2024 · 6f0e256 · 6f0e256
1 parent 3181062
commit 6f0e256
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 9 deletions.
diff --git a/src/components/AlertItem.js b/src/components/AlertItem.js
@@ -10,6 +10,7 @@ import pjson from '../../package.json';
 import ScreenSizeWrapper from "./ScreenSizeWrapper";
 import { getAlertIcon } from "../utils/alertHelper";
 import { addVariablesInString } from "../TextHelper";
+import UpgradePlanButton from "./UpgradePlanButton";
 const AlertSlider = React.lazy(() => import("./AlertSlider"));
 
 class AlertItem extends Component {
@@ -144,26 +145,38 @@ class AlertItem extends Component {
         const delaySetting = (mobile) => <>
             <div style={{ ...editItemMargins, display: "flex", justifyContent: "flex-end" }}>
                 <span style={{ ...this.props.detailedSubText, width: mobile ? "100%" : undefined }}>
-                    <EditableText spread={mobile} text={this.getDelayText(alert)} onClick={() => this.setState({ ...this.state, delayInputDialog: true })} />
+                    {!this.props.showDelay && !this.props.noUpgradeButton && <span style={{ marginRight: 8 }}><UpgradePlanButton /></span>}
+                    <span style={!this.props.showDelay ? {opacity: 0.5, pointerEvents: "none"} : {}}>
+                        <EditableText spread={mobile} text={this.getDelayText(alert)} onClick={() => this.setState({ ...this.state, delayInputDialog: true })} />
+                    </span>
                 </span>
             </div>
         </>
         const getUnit = () => {
             return type !== "movement" && type !== "signal" && type !== "offline" ? ` ${type === "humidity" ? "%" : uh.unit}` : ""
         }
 
+        const gayedOutOffline = () => {
+            if (type === "offline" && !this.props.showDelay) {
+                return { opacity: 0.5, pointerEvents: "none" }
+            }
+            return {}
+        }
+
         return (
             <ListItem key={type}>
                 <div style={{ paddingTop: 30, paddingBottom: 20 }}>
                     <div style={{ ...this.props.detailedTitle, width: undefined, display: "flex", justifyContent: "space-between" }}>
                         <span>
                             {t(label) + (type !== "movement" && type !== "signal" && type !== "offline" ? ` (${type === "humidity" ? "%" : uh.unit})` : "")}
+                            {type === "offline" && !this.props.showDelay && !this.props.noUpgradeButton && <><Box ml={2} display="inline" /><UpgradePlanButton /></>}
                         </span>
-                        <span>
+                        <span style={gayedOutOffline()}>
                             <span style={{ display: "inline-block", marginRight: 24, marginBottom: -4 }}>{getAlertIcon(this.props.sensor, type)}</span>
                             <span style={{ ...this.props.detailedSubText, fontWeight: 400, marginRight: 4 }}>{enabled ? t("on") : t("off")}</span> <Switch isChecked={alert && alert.enabled} colorScheme="buttonIconScheme" onChange={e => this.setAlert(alert, type, e.target.checked)} />
                         </span>
                     </div>
+                    <span style={gayedOutOffline()}>
                     <ScreenSizeWrapper>
                         {asText()}
                     </ScreenSizeWrapper>
@@ -188,7 +201,8 @@ class AlertItem extends Component {
                             }
                         </Box>
                     }
-                    {this.props.showDelay && type !== "offline" &&
+                    </span>
+                    {type !== "offline" &&
                         <Box mt={5}>
                             <ScreenSizeWrapper>
                                 {delaySetting()}

diff --git a/src/components/SensorCard.js b/src/components/SensorCard.js
@@ -32,6 +32,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { getAlertIcon, isAlerting } from "../utils/alertHelper";
 import { ruuviTheme } from "../themes";
 import { ArrowDownIcon, ArrowUpIcon } from "@chakra-ui/icons";
+import UpgradePlanButton from './UpgradePlanButton';
 
 const smallSensorValue = {
     fontFamily: "montserrat",
@@ -205,6 +206,12 @@ class SensorCard extends Component {
         let latestReading = this.getLatestReading();
         let alertIcon = getAlertIcon(this.props.sensor)
 
+        const isSharedSensor = () => {
+            var user = new NetworkApi().getUser().email
+            var owner = this.props.sensor.owner
+            return user !== owner;
+        }
+
 
         let tnpGetAlert = (x) => {
             let dataKey = x === "movement" ? "movementCounter" : "signal" ? "rssi" : x;
@@ -240,12 +247,16 @@ class SensorCard extends Component {
         </label>
 
         let noHistoryStrKey = "no_data_in_range"
-        if (this.props.sensor?.subscription.maxHistoryDays === 0) noHistoryStrKey = "no_data_free_mode"
+        let freeMode = this.props.sensor?.subscription.maxHistoryDays === 0
+        if (freeMode) noHistoryStrKey = "no_data_free_mode"
         let noHistoryStr = t(noHistoryStrKey).split("\n").map(x => <div key={x}>{x}</div>)
 
         const noData = (str) =>
             <div style={{ fontFamily: "mulish", fontSize: 16, fontWeight: "bold", height: graphHeight, marginLeft: simpleView ? 0 : 24, marginRight: 30, paddingTop: simpleView ? 0 : 10 }} className="nodatatext">
-                <div style={{ position: "relative", top: simpleView ? undefined : this.props.size === "medium" ? "44%" : "50%", transform: simpleView ? undefined : "translateY(-50%)" }}>{str}</div>
+                <div style={{ position: "relative", top: simpleView ? undefined : this.props.size === "medium" ? "44%" : "50%", transform: simpleView ? undefined : "translateY(-50%)" }}>
+                    {str}
+                    {freeMode && !isSharedSensor() && <><Box mt={2} /><UpgradePlanButton /></>}
+                </div>
             </div>
 
         if (simpleView) {

diff --git a/src/components/UpgradePlanButton.js b/src/components/UpgradePlanButton.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from '@chakra-ui/react';
+import i18next, { t } from 'i18next';
+
+
+const UpgradePlanButton = () => {
+    let url = "https://cloud.ruuvi.com";
+    if (i18next.language === 'fi') url += '/fi';
+    return (
+        <a href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+            <Button size="small"
+                borderRadius={3}
+                marginLeft={2} marginRight={2}
+                paddingRight={2} paddingLeft={2} paddingBottom={1} paddingTop={0.5}
+                style={{ opacity: 0.75 }}
+                onClick={e => e.preventDefault() || window.open(url, '_blank').focus()}>
+                {t('upgrade_plan')}
+            </Button>
+        </a>
+    );
+};
+
+export default UpgradePlanButton;
diff --git a/src/states/Sensor.js b/src/states/Sensor.js
@@ -45,6 +45,7 @@ import ScreenSizeWrapper from "../components/ScreenSizeWrapper";
 import { isAlerting } from "../utils/alertHelper";
 import RemoveSensorDialog from "../components/RemoveSensorDialog";
 import ExportMenu from "../components/ExportMenu";
+import UpgradePlanButton from "../components/UpgradePlanButton";
 
 var mainSensorFields = ["temperature", "humidity", "pressure", "movementCounter", "battery", "accelerationX", "accelerationY", "accelerationZ", "rssi", "measurementSequenceNumber", "pm1p0", "pm2p5", "pm4p0", "pm10p0", "co2", "voc", "nox"];
 var sensorInfoOrder = ["mac", "dataFormat", "txPower"];
@@ -576,7 +577,7 @@ class Sensor extends Component {
                                     <ScreenSizeWrapper isMobile>
                                         <div style={{ marginTop: 30, marginBottom: -10 }} id="history">
                                             {graphTitle(true)}
-                                            <table width="100%" style={{marginTop: "10px"}}>
+                                            <table width="100%" style={{ marginTop: "10px" }}>
                                                 <tbody>
                                                     <tr>
                                                         <td>
@@ -592,7 +593,14 @@ class Sensor extends Component {
                                 </>}
                             <Box height={520}>
                                 <> {!this.isLoading && (!this.state.data || !this.state.data?.measurements?.length) ? (
-                                    <center style={{ fontFamily: "montserrat", fontSize: 16, fontWeight: "bold", paddingTop: 240, height: 450 }}>{noHistoryStr}</center>
+                                    <>
+                                        <center style={{ fontFamily: "montserrat", fontSize: 16, fontWeight: "bold", paddingTop: 240, height: 450 }}>{noHistoryStr}
+                                            {!this.isSharedSensor() && <>
+                                                <Box mt={2} />
+                                                <UpgradePlanButton />
+                                            </>}
+                                        </center>
+                                    </>
                                 ) : (
                                     <Box ml={-5} mr={-5}>
                                         {this.isLoading &&
@@ -706,15 +714,17 @@ class Sensor extends Component {
                                                 return <div>{parts[0]}<a style={{ color: "teal" }} target="blank" href={t("cloud_ruuvi_link_url")}>{t("cloud_ruuvi_link")}</a>{parts[1]}</div>
                                             })()}
                                         </Box>}
-                                        {["temperature", "humidity", "pressure", "signal", "movement", ...[["Free", "Basic"].includes(sensorSubscription) ? null : "offline"]].map(x => {
+                                        {["temperature", "humidity", "pressure", "signal", "movement", "offline"].map(x => {
                                             if (!x) return null
-                                            let dataKey = x === "movement" ? "movementCounter" :  x === "signal" ? "rssi" : x;
+                                            let dataKey = x === "movement" ? "movementCounter" : x === "signal" ? "rssi" : x;
                                             let latestValue = this.getLatestReading()[dataKey]
                                             if (latestValue === undefined && x !== "offline") return null;
                                             var alert = this.getAlert(x)
                                             let key = alert ? alert.min + "" + alert.max + "" + alert.enabled.toString() + "" + alert.description : x
                                             return <AlertItem key={key} alerts={this.props.sensor.alerts} alert={alert} sensor={this.props.sensor}
                                                 latestValue={latestValue}
+                                                noUpgradeButton={this.isSharedSensor()}
+                                                showOffline={!["Free", "Basic"].includes(sensorSubscription)}
                                                 showDelay={sensorSubscription === "Business Starter"}
                                                 detailedTitle={detailedTitle}
                                                 detailedText={detailedText} detailedSubText={detailedSubText}