Android

.github/workflows/build-android.yml

@@ -129,9 +129,8 @@ jobs:
           packageName: com.remoteit
           releaseFiles: ./android/app/build/outputs/bundle/release/app-release.aab
           track: internal
-          status: inProgress
+          status: completed
           inAppUpdatePriority: 0
-          userFraction: 0.2
           changesNotSentForReview: true
           # whatsNewDirectory: distribution/whatsnew
           # mappingFile: app/build/outputs/mapping/release/mapping.txt

android/app/build.gradle

@@ -13,8 +13,8 @@ android {
         applicationId "com.remoteit"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 287
-        versionName "3.41.0"
+        versionCode 289
+        versionName "3.42.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remoteit",
-  "version": "3.41.0",
+  "version": "3.42.1",
   "private": true,
   "main": "build/index.js",
   "description": "Remote.It cross platform desktop application for creating and hosting connections",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remoteit-desktop-frontend",
-  "version": "3.41.0",
+  "version": "3.42.1",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/components/BillingUI.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import browser from '../services/browser'
+
+type Props = {
+  children?: React.ReactNode
+}
+
+export const BillingUI: React.FC<Props> = ({ children }) => {
+  return browser.isAndroid ? null : <>{children}</>
+}

frontend/src/components/EventList/EventList.tsx

@@ -8,7 +8,7 @@ import { List, Box, Button, Typography } from '@mui/material'
 import { fontSizes, spacing } from '../../styling'
 import { humanizeDays, limitDays } from '../../models/plans'
 import { EventItem } from './EventItem'
-import { MobileUI } from '../MobileUI'
+import { BillingUI } from '../BillingUI'
 import { Notice } from '../Notice'
 
 export interface LogListProps {
@@ -41,11 +41,11 @@ export const EventList: React.FC<LogListProps> = ({ device }) => {
         <Notice
           severity="warning"
           button={
-            <MobileUI android hide>
+            <BillingUI>
               <Button to="/account/plans" variant="contained" color="warning" size="small" component={Link}>
                 Upgrade
               </Button>
-            </MobileUI>
+            </BillingUI>
           }
         >
           Plan upgrade required to view logs past {humanizeDays(logLimit?.value)}.

frontend/src/components/LicensingNoticeDisplay.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { PERSONAL_PLAN_ID } from '../models/plans'
 import { LicensingTitle } from './LicensingTitle'
 import { Timestamp } from './Timestamp'
+import { BillingUI } from './BillingUI'
 import { Notice } from './Notice'
 import { Link } from './Link'
 import { Icon } from './Icon'
@@ -29,11 +30,13 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
 
   const UpgradeButton = (
     <>
-      <Link to="/account/plans">
-        <Button color="primary" variant="contained" size="small">
-          Upgrade
-        </Button>
-      </Link>
+      <BillingUI>
+        <Link to="/account/plans">
+          <Button color="primary" variant="contained" size="small">
+            Upgrade
+          </Button>
+        </Link>
+      </BillingUI>
       <Tooltip title="Close">
         <IconButton onClick={onClose}>
           <Icon name="times" size="md" color="primary" />
@@ -49,7 +52,10 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
         <Notice severity="warning" button={UpgradeButton}>
           {title} has expired.
           <em>
-            Please upgrade your license. <Link to="/account/plans">Learn more.</Link>
+            Please upgrade your license.{' '}
+            <BillingUI>
+              <Link to="/account/plans">Learn more.</Link>
+            </BillingUI>
           </em>
         </Notice>
       )
@@ -59,7 +65,10 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
         <Notice severity="error">
           {title} is past due.
           <em>
-            Please update your payment method. <Link to="/account/plans">Learn more.</Link>
+            Please update your payment method.{' '}
+            <BillingUI>
+              <Link to="/account/plans">Learn more.</Link>
+            </BillingUI>
           </em>
         </Notice>
       )
@@ -70,7 +79,11 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
         <Notice severity="warning">
           {title} is incomplete.
           <em>
-            Please <Link to="/account/plans">update your payment information </Link> to continue service.
+            Please{' '}
+            <BillingUI>
+              <Link to="/account/plans">update your payment information </Link>
+            </BillingUI>{' '}
+            to continue service.
           </em>
         </Notice>
       )
@@ -80,7 +93,10 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
         <Notice severity="warning" button={UpgradeButton}>
           {title} has been canceled.
           <em>
-            Please please check. <Link to="/account/plans">Learn more.</Link>
+            Please check.{' '}
+            <BillingUI>
+              <Link to="/account/plans">Learn more.</Link>
+            </BillingUI>
           </em>
         </Notice>
       )
@@ -91,7 +107,9 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
           {title} <LicensingTitle count={serviceLimit?.value} />
           <em>
             You have exceeded your limit by {serviceLimit?.actual - serviceLimit?.value}.{' '}
-            <Link to="/account/plans">Learn more.</Link>
+            <BillingUI>
+              <Link to="/account/plans">Learn more.</Link>
+            </BillingUI>
           </em>
         </Notice>
       )

frontend/src/components/LicensingServiceNotice.tsx

@@ -6,6 +6,7 @@ import { useSelector } from 'react-redux'
 import { Button } from '@mui/material'
 import { Notice } from './Notice'
 import { Link } from './Link'
+import { BillingUI } from './BillingUI'
 
 type Props = { device?: IDevice; license?: ILicense }
 
@@ -25,17 +26,21 @@ export const LicensingServiceNotice: React.FC<Props> = props => {
       <Notice
         severity="warning"
         button={
-          <Link to="/account/plans">
-            <Button color="primary" variant="contained" size="small">
-              Upgrade
-            </Button>
-          </Link>
+          <BillingUI>
+            <Link to="/account/plans">
+              <Button color="primary" variant="contained" size="small">
+                Upgrade
+              </Button>
+            </Link>
+          </BillingUI>
         }
       >
         {title} <LicensingTitle count={serviceLimit?.value} />
         <em>
           This service will be accessible for {humanizeDays(evaluationLimit?.value)}, unless you upgrade your license.
-          <Link to="/account/plans">Learn more.</Link>
+          <BillingUI>
+            <Link to="/account/plans">Learn more.</Link>
+          </BillingUI>
         </em>
       </Notice>
     )

frontend/src/components/PlanActionChip.tsx

@@ -11,6 +11,7 @@ import { selectRemoteitLicense } from '../selectors/organizations'
 import { State } from '../store'
 import { ColorChip, Props as ChipProps } from './ColorChip'
 import { useHistory } from 'react-router-dom'
+import { BillingUI } from './BillingUI'
 
 export const PlanActionChip: React.FC<ChipProps> = ({ ...props }) => {
   const license = useSelector((state: State) => selectRemoteitLicense(state))
@@ -36,5 +37,9 @@ export const PlanActionChip: React.FC<ChipProps> = ({ ...props }) => {
       return null
   }
 
-  return <ColorChip {...props} size="small" onClick={() => history.push('/account/plans')} />
+  return (
+    <BillingUI>
+      <ColorChip {...props} size="small" onClick={() => history.push('/account/plans')} />
+    </BillingUI>
+  )
 }

frontend/src/components/UpgradeBanner.tsx

@@ -4,6 +4,7 @@ import { selectPlan } from '../selectors/organizations'
 import { PERSONAL_PLAN_ID } from '../models/plans'
 import { useSelector } from 'react-redux'
 import { ColorChip } from './ColorChip'
+import { BillingUI } from './BillingUI'
 import { Notice } from './Notice'
 import { Box } from '@mui/material'
 
@@ -14,9 +15,11 @@ export const UpgradeBanner: React.FC = () => {
     <Notice gutterBottom>
       Access premium features & support
       <Box marginTop={1.4}>
-        <Link to="/account/plans">
-          <ColorChip size="small" variant="contained" color="primary" label="Upgrade Plan" />
-        </Link>
+        <BillingUI>
+          <Link to="/account/plans">
+            <ColorChip size="small" variant="contained" color="primary" label="Upgrade Plan" />
+          </Link>
+        </BillingUI>
       </Box>
     </Notice>
   )

frontend/src/components/UpgradeNotice.tsx

@@ -6,6 +6,7 @@ import { makeStyles } from '@mui/styles'
 import { selectLimits } from '../selectors/organizations'
 import { useSelector, useDispatch } from 'react-redux'
 import { State, Dispatch } from '../store'
+import { BillingUI } from './BillingUI'
 import { Pre } from './Pre'
 
 const oneWeek = 1000 * 60 * 60 * 24 * 7
@@ -32,11 +33,13 @@ export const UpgradeNotice: React.FC<React.HTMLAttributes<HTMLDivElement>> = ()
         severity="warning"
         onClose={() => dispatch.ui.setPersistent({ updateNoticeCleared: Date.now() })}
         button={
-          <Link to="/account/plans">
-            <Button variant="contained" color="warning" size="small">
-              Upgrade
-            </Button>
-          </Link>
+          <BillingUI>
+            <Link to="/account/plans">
+              <Button variant="contained" color="warning" size="small">
+                Upgrade
+              </Button>
+            </Link>
+          </BillingUI>
         }
       >
         {message}

frontend/src/pages/AccountPage.tsx

@@ -4,7 +4,7 @@ import { List, Typography, Tooltip, ButtonBase } from '@mui/material'
 import { ListItemLocation } from '../components/ListItemLocation'
 import { windowOpen } from '../services/browser'
 import { Container } from '../components/Container'
-import { MobileUI } from '../components/MobileUI'
+import { BillingUI } from '../components/BillingUI'
 import { Logo } from '@common/brand/Logo'
 import { Icon } from '../components/Icon'
 
@@ -34,14 +34,14 @@ export const AccountPage: React.FC = () => {
           dense
         />
         <ListItemLocation title="Security" to="/account/security" icon="lock" dense />
-        <MobileUI android hide>
+        <BillingUI>
           <ListItemLocation title="Subscription" to="/account/plans" icon="shopping-cart" dense>
             {!browser.hasBilling && <Icon name="launch" size="sm" color="grayDark" inlineLeft fixedWidth />}
           </ListItemLocation>
           <ListItemLocation title="Billing" to="/account/billing" icon="credit-card-front" dense>
             {!browser.hasBilling && <Icon name="launch" size="sm" color="grayDark" inlineLeft fixedWidth />}
           </ListItemLocation>
-        </MobileUI>
+        </BillingUI>
         <ListItemLocation title="License" to="/account/license" icon="id-badge" dense />
         <ListItemLocation title="Access Keys" to="/account/accessKey" icon="key" dense />
       </List>

frontend/src/pages/CustomerPage.tsx

@@ -7,6 +7,7 @@ import { Typography, Button } from '@mui/material'
 import { LicensingSetting } from '../components/LicensingSetting'
 import { DeleteButton } from '../buttons/DeleteButton'
 import { FormDisplay } from '../components/FormDisplay'
+import { BillingUI } from '../components/BillingUI'
 import { Container } from '../components/Container'
 import { Avatar } from '../components/Avatar'
 import { Title } from '../components/Title'
@@ -44,9 +45,11 @@ export const CustomerPage: React.FC = () => {
     >
       <Typography variant="subtitle1" marginRight={3}>
         <Title>License</Title>
-        <Button to={`/organization/customer/${userID}/plans`} size="small" variant="contained" component={Link}>
-          Update Plan
-        </Button>
+        <BillingUI>
+          <Button to={`/organization/customer/${userID}/plans`} size="small" variant="contained" component={Link}>
+            Update Plan
+          </Button>
+        </BillingUI>
       </Typography>
       <LicensingSetting licenses={license ? [{ ...license, limits }] : []} />
       <FormDisplay

frontend/src/pages/OrganizationAddPage.tsx

@@ -10,6 +10,7 @@ import { ContactSelector } from '../components/ContactSelector'
 import { RoleSelect } from '../components/RoleSelect'
 import { Container } from '../components/Container'
 import { ColorChip } from '../components/ColorChip'
+import { BillingUI } from '../components/BillingUI'
 import { Gutters } from '../components/Gutters'
 import { Notice } from '../components/Notice'
 import { Title } from '../components/Title'
@@ -74,9 +75,17 @@ export const OrganizationAddPage = () => {
             <Notice
               severity="warning"
               button={
-                <Link to="/account/plans">
-                  <ColorChip sx={{ marginTop: 1.4 }} size="small" variant="contained" color="warning" label="Upgrade" />
-                </Link>
+                <BillingUI>
+                  <Link to="/account/plans">
+                    <ColorChip
+                      sx={{ marginTop: 1.4 }}
+                      size="small"
+                      variant="contained"
+                      color="warning"
+                      label="Upgrade"
+                    />
+                  </Link>
+                </BillingUI>
               }
               fullWidth
             >

frontend/src/pages/OrganizationRolesPage.tsx

@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux'
 import { ListItemBack } from '../components/ListItemBack'
 import { IconButton } from '../buttons/IconButton'
 import { Container } from '../components/Container'
+import { BillingUI } from '../components/BillingUI'
 import { MobileUI } from '../components/MobileUI'
 import { Notice } from '../components/Notice'
 import { Title } from '../components/Title'
@@ -43,14 +44,16 @@ export const OrganizationRolesPage: React.FC = () => {
       {!limits.roles && (
         <Notice severity="info" gutterTop>
           Upgrade your plan to Business to add custom roles.
-          <Button
-            variant="contained"
-            size="small"
-            onClick={() => history.push('/account/plans')}
-            sx={{ display: 'block', marginTop: 1, marginBottom: 1 }}
-          >
-            Upgrade
-          </Button>
+          <BillingUI>
+            <Button
+              variant="contained"
+              size="small"
+              onClick={() => history.push('/account/plans')}
+              sx={{ display: 'block', marginTop: 1, marginBottom: 1 }}
+            >
+              Upgrade
+            </Button>
+          </BillingUI>
         </Notice>
       )}
       <Typography variant="subtitle1">