brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'staging_environment'

Browse source
This commit is contained in:
Carter 2026-05-26 11:39:23 -06:00
commit 184704aee3
84 changed files with 1295 additions and 650 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/app/App.tsx
View file

@ -1,15 +1,20 @@
import { Auth0Provider } from '@auth0/auth0-react'
import { or } from '../utils/types'
import { isAuth0Configured, isAuth0SpaOriginAllowed, shouldMountAuth0Provider } from '../utils/auth0Config'
import AuthWrapper from '../providers/auth'
import HTTPProvider from 'providers/http'
import { useState } from 'react'
import LoadingScreen from './LoadingScreen'
import LocalAuthPlaceholder from './LocalAuthPlaceholder'
import UserWrapper from './UserWrapper'
import { getWhitelabel } from 'services/whiteLabel'
import { AppThemeProvider } from 'theme/AppThemeProvider'
import { LocalAuthProvider, Auth0AuthBridge } from '../providers/authContext'
function App() {
const [token, setToken] = useState<string | undefined>(undefined)
const [token, setToken] = useState<string | undefined>(() => {
return localStorage.getItem('local_auth_token') || undefined
})
const whiteLabel = getWhitelabel()
const manifestPath = "/" + whiteLabel.name.replace(/\s/g, "") + "/manifest.json"
@ -54,6 +59,29 @@ function App() {
"/libracart"
]
if (!shouldMountAuth0Provider()) {
const placeholderReason =
isAuth0Configured() && !isAuth0SpaOriginAllowed() ? 'insecure_origin' : 'unconfigured'
if (!token) {
return (
<AppThemeProvider>
<LocalAuthPlaceholder reason={placeholderReason} setToken={setToken} />
</AppThemeProvider>
)
}
return (
<AppThemeProvider>
<LocalAuthProvider token={token}>
<HTTPProvider token={token}>
<UserWrapper token={token} />
</HTTPProvider>
</LocalAuthProvider>
</AppThemeProvider>
)
}
return (
<AppThemeProvider>
<Auth0Provider
@ -69,10 +97,12 @@ function App() {
>
{/* <CssBaseline /> */}
<AuthWrapper setToken={setToken}>
{ token ?
<HTTPProvider token={token}>
<UserWrapper token={token} />
</HTTPProvider>
{ token ?
<Auth0AuthBridge>
<HTTPProvider token={token}>
<UserWrapper token={token} />
</HTTPProvider>
</Auth0AuthBridge>
:
<LoadingScreen
message='Loading user profile'

141
src/app/LocalAuthPlaceholder.tsx Normal file
View file

@ -0,0 +1,141 @@
import { Box, Button, CssBaseline, Paper, Stack, TextField, Typography } from '@mui/material'
import { getName } from 'services/whiteLabel'
import { useState } from 'react'
import axios from 'axios'
export type LocalAuthPlaceholderReason = 'unconfigured' | 'insecure_origin'
interface Props {
reason?: LocalAuthPlaceholderReason
setToken?: (token: string) => void
}
export default function LocalAuthPlaceholder(props: Props) {
const { reason = 'unconfigured', setToken } = props
const productName = getName()
const [mode, setMode] = useState<'login' | 'signup'>('login')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [name, setName] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const apiUrl = import.meta.env.VITE_APP_API_URL
const handleSignup = async () => {
setError('')
setLoading(true)
try {
const resp = await axios.post(`${apiUrl}/local-auth/signup`, { email, password, name })
const token = resp.data.token
if (token && setToken) {
localStorage.setItem('local_auth_token', token)
setToken(token)
}
} catch (err: any) {
setError(err.response?.data?.error || 'Signup failed')
} finally {
setLoading(false)
}
}
const handleLogin = async () => {
setError('')
setLoading(true)
try {
const resp = await axios.post(`${apiUrl}/local-auth/login`, { email, password })
const token = resp.data.token
if (token && setToken) {
localStorage.setItem('local_auth_token', token)
setToken(token)
}
} catch (err: any) {
setError(err.response?.data?.error || 'Login failed')
} finally {
setLoading(false)
}
}
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
if (mode === 'signup') {
handleSignup()
} else {
handleLogin()
}
}
const explanation =
reason === 'insecure_origin'
? 'This URL is not a secure context for cloud sign-in. Use local account sign-in instead.'
: 'Local account sign-in for this deployment.'
return (
<>
<CssBaseline />
<Box
sx={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'background.default',
p: 2,
}}
>
<Paper elevation={2} sx={{ maxWidth: 420, width: '100%', p: 4 }}>
<form onSubmit={handleSubmit}>
<Stack spacing={2} alignItems="stretch">
<Typography variant="h5" component="h1">
{productName}
</Typography>
<Typography variant="body2" color="text.secondary">
{explanation}
</Typography>
{mode === 'signup' && (
<TextField
label="Name"
value={name}
onChange={e => setName(e.target.value)}
fullWidth
/>
)}
<TextField
label="Email"
type="email"
value={email}
onChange={e => setEmail(e.target.value)}
required
fullWidth
/>
<TextField
label="Password"
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
required
fullWidth
/>
{error && (
<Typography variant="body2" color="error">
{error}
</Typography>
)}
<Button variant="contained" size="large" type="submit" disabled={loading}>
{mode === 'signup' ? 'Sign up' : 'Log in'}
</Button>
<Button
variant="text"
size="small"
onClick={() => { setMode(mode === 'login' ? 'signup' : 'login'); setError('') }}
>
{mode === 'login' ? 'Need an account? Sign up' : 'Already have an account? Log in'}
</Button>
</Stack>
</form>
</Paper>
</Box>
</>
)
}

37
src/app/UserWrapper.tsx
View file

@ -1,7 +1,6 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import './App.css'
import { useUserAPI } from '../providers/pond/userAPI'
import { useAuth0 } from '@auth0/auth0-react'
import { or } from '../utils/types'
import LoadingScreen from './LoadingScreen'
import NavigationContainer from '../navigation/NavigationContainer'
@ -12,9 +11,8 @@ import { makeStyles } from '@mui/styles'
import { CssBaseline, Theme } from '@mui/material'
import { AppThemeProvider } from 'theme/AppThemeProvider'
import HTTPProvider from 'providers/http'
import { Crisp } from "crisp-sdk-web";
import { useMobile, useSnackbar } from 'hooks'
import { initCrisp } from '../chat/CrispChat'
import { initCrisp, isCrispEnabled } from '../chat/CrispChat'
// import FirmwareLoader from './FirmwareLoader'
const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
@ -64,16 +62,19 @@ export default function UserWrapper(props: Props) {
const [loading, setLoading] = useState(false)
const userAPI = useUserAPI();
const classes = useStyles();
const useAuth = useAuth0();
const hasFetched = useRef(false);
const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
const snackbar = useSnackbar()
const isMobile = useMobile()
const user_id = or(useAuth.user?.sub, "")
const crispInitialized = useRef(false);
Crisp.configure(import.meta.env.VITE_CRISP_WEBSITE_ID);
const user_id = (() => {
try {
const payload = JSON.parse(atob(token.split('.')[1]))
return or(payload.sub, '')
} catch {
return ''
}
})()
const loadUser = useCallback(() => {
if (!userAPI.getUserWithTeam) return;
@ -114,15 +115,14 @@ export default function UserWrapper(props: Props) {
}, [setGlobal])
useEffect(() => {
if (global?.user) {
initCrisp({
websiteId: import.meta.env.VITE_CRISP_WEBSITE_ID,
email: global.user.settings.email,
nickname: global.user.settings.name || global.user.settings.email,
phone: global.user.settings.phoneNumber,
tokenId: global.user.id(),
});
}
if (!global?.user || !isCrispEnabled()) return;
initCrisp({
websiteId: import.meta.env.VITE_CRISP_WEBSITE_ID,
email: global.user.settings.email,
nickname: global.user.settings.name || global.user.settings.email,
phone: global.user.settings.phoneNumber,
tokenId: global.user.id(),
});
}, [global]);
// useEffect(() => {
@ -150,6 +150,7 @@ export default function UserWrapper(props: Props) {
// }, [isMobile]);
useEffect(() => {
if (!isCrispEnabled()) return;
let style = document.getElementById("crisp-offset-override");
if (!style) {
style = document.createElement("style");
@ -194,4 +195,4 @@ export default function UserWrapper(props: Props) {
</AppThemeProvider>
</StateProvider>
)
}
}

5
src/app/main.tsx
View file

@ -1,5 +1,6 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { StyledEngineProvider } from '@mui/material/styles'
import App from './App'
// I don't consider providing a disabled button to a Tooltip an error.
@ -20,6 +21,8 @@ if ('serviceWorker' in navigator) {
createRoot(document.getElementById('root')!).render(
// <StrictMode>
<App />
<StyledEngineProvider injectFirst>
<App />
</StyledEngineProvider>
// </StrictMode>,
)

1
src/bin/AddBinFab.tsx
View file

@ -28,6 +28,7 @@ const useStyles = makeStyles((theme: Theme) => {
position: "fixed",
bottom: theme.spacing(8), //for mobile navigator
right: theme.spacing(2),
zIndex: theme.zIndex.speedDial,
[theme.breakpoints.up("sm")]: {
bottom: theme.spacing(1.75)
}

8
src/bin/BinVisualizerV2.tsx
View file

@ -36,7 +36,6 @@ import { pond } from "protobuf-ts/pond";
import { quack } from "protobuf-ts/quack";
import { useGlobalState, useSnackbar } from "providers";
import React, { useCallback, useEffect, useState } from "react";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import moment, { Moment } from "moment";
import ResponsiveDialog from "common/ResponsiveDialog";
import { getThemeType } from "theme";
@ -72,6 +71,7 @@ import ButtonGroup from "common/ButtonGroup";
import ModeChangeDialog from "./conditioning/modeChangeDialog";
import CustomGrainSelector from "grain/CustomGrainSelector";
import BinControllerDisplay from "./BinControllerDisplay";
import { useFullScreen } from "hooks/FullScreenHandle";
const useStyles = makeStyles((theme: Theme) => {
return ({
@ -217,7 +217,7 @@ export default function BinVisualizer(props: Props) {
const isMobile = useMobile();
const classes = useStyles();
const theme = useTheme();
const fullScreenHandler = useFullScreenHandle();
const {fullScreenHandler, FullScreenWrapper} = useFullScreen()
const viewport = useViewport();
const { openSnack } = useSnackbar();
const [fillPercentage, setFillPercentage] = useState<number | null>(0);
@ -1344,7 +1344,7 @@ export default function BinVisualizer(props: Props) {
return (
<Box display="flex" width={1} justifyContent="flex-end">
<FullScreen handle={fullScreenHandler}>
<FullScreenWrapper>
<Box
position="relative"
height={1}
@ -1441,7 +1441,7 @@ export default function BinVisualizer(props: Props) {
/>
</Box>
</Box>
</FullScreen>
</FullScreenWrapper>
</Box>
);
};

20
src/chat/ChatDrawer.tsx
View file

@ -7,7 +7,7 @@ import Chat from "./Chat";
import { pond } from "protobuf-ts/pond";
import { useEffect, useState } from "react";
import { useTeamAPI } from "providers";
import { closeCrispChat, openCrispChat } from './CrispChat';
import { closeCrispChat, isCrispEnabled, openCrispChat } from './CrispChat';
import RobotIcon from "products/CommonIcons/robotIcon";
const useStyles = makeStyles<Theme>((theme: Theme) => ({
@ -68,7 +68,7 @@ export function ChatDrawer(props: Props) {
}
useEffect(() => {
if (open) {
if (open && isCrispEnabled()) {
closeCrispChat()
}
}, [open])
@ -108,13 +108,15 @@ export function ChatDrawer(props: Props) {
<Avatar src={team.settings.avatar} />
</IconButton>
</Tooltip>
<Tooltip title={"Chat Assistant"} placement="right">
<IconButton
onClick={openCrisp}
>
<RobotIcon />
</IconButton>
</Tooltip>
{isCrispEnabled() && (
<Tooltip title={"Chat Assistant"} placement="right">
<IconButton
onClick={openCrisp}
>
<RobotIcon />
</IconButton>
</Tooltip>
)}
<Box width={"100%"} borderBottom={"1px solid grey"} />
{teams.map((t, i)=> {
if (t.settings?.key === team.key()) return null;

8
src/chat/CrispChat.ts
View file

@ -5,6 +5,11 @@ const ANIMATION_DURATION_MS = 300;
let initialized = false;
export function isCrispEnabled(): boolean {
const id = import.meta.env.VITE_CRISP_WEBSITE_ID;
return typeof id === "string" && id.trim() !== "";
}
/**
* Initialize Crisp and immediately hide the default chat button.
* Call this once on app load (e.g., in UserWrapper after user data is ready).
@ -17,6 +22,7 @@ export function initCrisp(opts: {
tokenId?: string;
}) {
if (initialized) return;
if (!opts.websiteId?.trim()) return;
Crisp.configure(opts.websiteId);
Crisp.session.reset();
@ -71,6 +77,7 @@ function injectCrispStyles() {
* Safe to call from any onClick handler.
*/
export function openCrispChat() {
if (!initialized) return;
const chatbox = document.getElementById("crisp-chatbox");
if (chatbox) {
chatbox.classList.add("crisp-visible");
@ -86,6 +93,7 @@ export function openCrispChat() {
* Close the chat window and hide the widget.
*/
export function closeCrispChat() {
if (!initialized) return;
Crisp.chat.close();
hideCrispChatButton();
}

13
src/component/ComponentCard.tsx
View file

@ -190,7 +190,18 @@ export default function ComponentCard(props: Props) {
cableID = "Cable: " + (component.settings.addressType - 8);
}
return port + " " + cableID;
} else {
} else if (component.settings.addressType === quack.AddressType.ADDRESS_TYPE_I2C) {
let description = ""
let type = getFriendlyAddressTypeName(component.settings.addressType);
description = type
if(component.settings.expansionLine){
description = description + ": Exp Line " + component.settings.expansionLine
}
if(component.settings.muxLine){
description = description + " ,Mux Line " + component.settings.muxLine
}
return description
}else{
return getFriendlyAddressTypeName(component.settings.addressType);
}
};

29
src/device/DeviceTags.tsx
View file

@ -8,7 +8,6 @@ import {
ListItem,
ListItemIcon,
ListItemText,
Theme,
Typography
} from "@mui/material";
import { makeStyles } from "@mui/styles";
@ -19,10 +18,10 @@ import TagSettings from "common/TagSettings";
import { Device, Tag } from "models";
import { filterByTag } from "pbHelpers/Tag";
import { useDeviceAPI, useSnackbar, useTagAPI } from "providers";
import React, { useEffect, useRef, useState } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { pond } from "protobuf-ts/pond";
const useStyles = makeStyles((_theme: Theme) => {
const useStyles = makeStyles(() => {
return ({
addIcon: {
color: "var(--status-ok)"
@ -45,19 +44,19 @@ function AddDeviceTag(props: AddDeviceTagProps) {
const [searchValue, setSearchValue] = useState("");
const [tags, setTags] = useState<Tag[]>([])
const loadTags = () => {
const loadTags = useCallback(() => {
tagAPI.listTags().then(resp => {
let newTags: Tag[] = [];
const newTags: Tag[] = [];
resp.data.tags.forEach((tag: pond.Tag) => {
newTags.push(Tag.create(tag))
})
setTags(newTags)
})
}
}, [tagAPI])
useEffect(() => {
loadTags()
}, [])
}, [loadTags])
const tagItems = tags
.filter(tag => !deviceTags.some(tagSettings => tagSettings.key === tag.settings.key))
@ -144,10 +143,10 @@ export default function DeviceTags(props: DeviceTagsProps) {
const [deviceTags, setDeviceTags] = useState<pond.TagSettings[]>(device.status.tags);
const previousDeviceRef = useRef(device);
const loadTags = () => {
const loadTags = useCallback(() => {
// setLoading(true)
tagAPI.listTags().then(resp => {
let newTags: Tag[] = [];
const newTags: Tag[] = [];
resp.data.tags.forEach((tag: pond.Tag) => {
newTags.push(Tag.create(tag))
})
@ -155,7 +154,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
}).finally(() => {
// setLoading(false)
})
}
}, [tagAPI])
useEffect(() => {
if (previousDeviceRef.current !== device) {
@ -166,14 +165,16 @@ export default function DeviceTags(props: DeviceTagsProps) {
useEffect(() => {
loadTags()
}, [])
}, [loadTags])
const addTag = (tag: Tag) => {
if (!deviceTags.some(dt => dt.key === tag.settings.key)) {
deviceAPI
.tag(device.id(), tag.settings.key)
.then(() => {
setDeviceTags([...deviceTags, tag.settings]);
setDeviceTags(current =>
current.some(dt => dt.key === tag.settings.key) ? current : [...current, tag.settings]
);
})
.catch(() => error("Failed to tag device as " + tag.name));
}
@ -184,7 +185,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
deviceAPI
.untag(device.id(), tag.key())
.then(() => {
setDeviceTags(deviceTags.filter(t => tag.key() !== t.key));
setDeviceTags(current => current.filter(t => tag.key() !== t.key));
})
.catch(() => error("Failed to remove tag " + tag.name + " from device"));
}
@ -197,7 +198,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
return (
<React.Fragment>
{deviceTags?.map(tagSettings => {
let pondTag = pond.Tag.create({ settings: tagSettings })
const pondTag = pond.Tag.create({ settings: tagSettings })
return (
<Grid key={"device-tags-"+tagSettings.key}>
<DeviceTag tag={Tag.create(pondTag)} removeTagFromDevice={removeTagFromDevice} />

66
src/device/autoDetect/DeviceScannedComponents.tsx
View file

@ -12,6 +12,7 @@ import ResponsiveDialog from "common/ResponsiveDialog";
import { useComponentAPI, useDeviceAPI, useSnackbar } from "hooks";
import { ConfigurablePin } from "pbHelpers/AddressTypes";
import ScannedOneWirePort from "./OneWire/ScannedOneWirePort";
import I2CExpander from "./I2CExpander";
interface Props {
scannedComponents: pond.ComponentAddressMap
@ -27,6 +28,7 @@ interface CompStep {
}
let i2cBlacklistAddresses: number[] = [0x70]
let i2cExpanderAddresses: number[] = [0x71]
export default function DeviceScannedComponents(props: Props){
const {scannedComponents, device, availablePositions, availableOffsets, refreshCallback} = props
@ -35,6 +37,7 @@ export default function DeviceScannedComponents(props: Props){
const [scannedI2C, setScannedI2C] = useState<pond.DetectI2C>() //the unmodified scan of addresses
const [scannedOneWire, setScannedOneWire] = useState<pond.DetectOneWire[]>([])
const [validI2CCompAddresses, setValidI2CComponentAddresses] = useState<quack.AddressData[]>([]) //the filtered array of address data
const [expanderAddresses, setExpanderAddresses] = useState<quack.AddressData[]>([])
const [components, setComponents] = useState<Component[]>([])
const [steps, setSteps] = useState<CompStep[]>([]);
const { error, success } = useSnackbar();
@ -69,18 +72,23 @@ export default function DeviceScannedComponents(props: Props){
useEffect(()=>{
let valid: quack.AddressData[] = []
let expanders: quack.AddressData[] = []
//filter the address data
let addr = scannedI2C?.settings?.foundAddresses
console.log(addr)
if(addr){
addr.forEach(addrData => {
if(!i2cBlacklistAddresses.includes(addrData.address)){
if(!(addrData.address === 0x71 && addrData.expansionLine === undefined)){
valid.push(addrData)
}
if(i2cExpanderAddresses.includes(addrData.address) && addrData.expansionLine === 0){
expanders.push(addrData)
}else{
valid.push(addrData)
}
}
})
}
console.log(valid)
setExpanderAddresses(expanders)
setValidI2CComponentAddresses(valid)
},[scannedI2C])
@ -257,33 +265,49 @@ export default function DeviceScannedComponents(props: Props){
{scannedI2C !== undefined &&
<Box marginBottom={5}>
<Box justifyContent="space-between" display="flex">
<Typography sx={{fontWeight: 650}}>
I2C Sensors
<Typography sx={{fontWeight: 650, fontSize: 20}}>
I2C Scan
</Typography>
<Button variant="contained" color="primary" onClick={()=>{removeScan(scannedI2C.key, pond.ObjectType.OBJECT_TYPE_DETECT_I2C)}}>Clear Scan</Button>
</Box>
{validI2CCompAddresses.length > 0 ? validI2CCompAddresses.map((addr, index) => {
return (
<ScannedI2C key={index} sensorNum={index+1} addressData={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? new Map<quack.ComponentType, number[]>()}/>
)
}) :
<Box sx={{
margin: 1,
display: "flex",
justifyContent: "center"
}}>
<Typography>
No Sensors Found
</Typography>
{expanderAddresses.length > 0 &&
<Box marginBottom={3}>
<Typography fontWeight={650}>Detected Expanders</Typography>
{expanderAddresses.map((expAddr, index) => {
return (
<I2CExpander key={index} address={expAddr}/>
)
})}
</Box>
}
{validI2CCompAddresses.length > 0 ?
<Box>
<Typography fontWeight={650}>Detected Sensors</Typography>
{validI2CCompAddresses.map((addr, index) => {
return (
<ScannedI2C key={index} sensorNum={index+1} addressData={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? new Map<quack.ComponentType, number[]>()}/>
)
})}
</Box>
:
<Box sx={{
margin: 1,
display: "flex",
justifyContent: "center"
}}>
<Typography>
No Sensors Found
</Typography>
</Box>
}
</Box>
}
</Box>
}
{scannedOneWire.length > 0 &&
<Box>
<Box justifyContent="space-between" display="flex">
<Typography sx={{fontWeight: 650}}>
Pin Port Sensors
Pin Port Scan
</Typography>
</Box>
{scannedOneWire.map((scan,i) => {

27
src/device/autoDetect/I2CExpander.tsx Normal file
View file

@ -0,0 +1,27 @@
import { Box, Typography } from "@mui/material"
import { quack } from "protobuf-ts/quack"
interface Props {
address: quack.AddressData
}
export default function I2CExpander(props: Props) {
const {address} = props
const expanderType = () => {
switch(address.address){
case 0x71:
return "Grain Cable Expander"
default:
return "Unknown Expander"
}
}
return (
<Box sx={{marginY: 1}}>
<Typography>{expanderType()} {address.muxLine ? "Mux Line: " + address.muxLine : ""}</Typography>
</Box>
)
}

1
src/device/autoDetect/ScannedI2C.tsx
View file

@ -108,6 +108,7 @@ export default function ScannedI2C(props: Props){
<Box sx={{marginY: 1}}>
{sensorNum && <Typography>Sensor {sensorNum}</Typography>}
<Typography variant="caption">{addressData.expansionLine !== 0 && "Expansion Line: " + addressData.expansionLine}</Typography>
{/* may also want to specify the mux line, not sure if the sensors will have a mux line though */}
{types.length > 0 ?
<React.Fragment>
<Grid2 container direction="row" alignItems="center" justifyContent="space-between">

121
src/hooks/FullScreenHandle.tsx Normal file
View file

@ -0,0 +1,121 @@
import { useCallback, useEffect, useRef, useState } from "react";
/**
* Drop-in replacement for react-full-screen's useFullScreenHandle + FullScreen component.
*
* Motivation: react-full-screen 1.1.1 doesn't debounce fullscreenchange events, so on
* Windows systems with DPI scaling > 100%, the resize triggered during fullscreen entry
* fires a fullscreenchange event that the library misinterprets as an exit, immediately
* popping back out of fullscreen.
*
* This hook bypasses the library entirely and calls the native Fullscreen API directly,
* ignoring fullscreenchange events fired within DEBOUNCE_MS of entry to absorb the
* DPI-scaling resize blip.
*
* Usage — replace in BinVisualizerV2.tsx:
*
* // Remove:
* import { FullScreen, useFullScreenHandle } from "react-full-screen";
* const fullScreenHandler = useFullScreenHandle();
* <FullScreen handle={fullScreenHandler}> ... </FullScreen>
*
* // Add:
* import { useFullScreen } from "hooks/useFullScreen";
* const { fullScreenHandler, FullScreenWrapper } = useFullScreen();
* <FullScreenWrapper> ... </FullScreenWrapper>
*
* // Everything else (fullScreenHandler.active, .enter(), .exit()) stays the same.
*/
const DEBOUNCE_MS = 500;
export interface FullScreenHandle {
active: boolean;
enter: () => void;
exit: () => void;
}
export function useFullScreen(): {
fullScreenHandler: FullScreenHandle;
FullScreenWrapper: React.FC<{ children: React.ReactNode }>;
} {
const [active, setActive] = useState(false);
const containerRef = useRef<HTMLDivElement | null>(null);
// Timestamp of the last enter() call — used to debounce spurious exit events
const enterTimeRef = useRef<number>(0);
const enter = useCallback(() => {
const el = containerRef.current;
if (!el) return;
enterTimeRef.current = Date.now();
if (el.requestFullscreen) {
el.requestFullscreen().catch(() => {
// Some browsers (e.g. iOS Safari) reject the promise — silently ignore
});
} else if ((el as any).webkitRequestFullscreen) {
(el as any).webkitRequestFullscreen();
} else if ((el as any).mozRequestFullScreen) {
(el as any).mozRequestFullScreen();
} else if ((el as any).msRequestFullscreen) {
(el as any).msRequestFullscreen();
}
}, []);
const exit = useCallback(() => {
if (document.exitFullscreen) {
document.exitFullscreen().catch(() => {});
} else if ((document as any).webkitExitFullscreen) {
(document as any).webkitExitFullscreen();
} else if ((document as any).mozCancelFullScreen) {
(document as any).mozCancelFullScreen();
} else if ((document as any).msExitFullscreen) {
(document as any).msExitFullscreen();
}
}, []);
useEffect(() => {
const handleChange = () => {
const fullscreenEl =
document.fullscreenElement ||
(document as any).webkitFullscreenElement ||
(document as any).mozFullScreenElement ||
(document as any).msFullscreenElement;
const isNowFullscreen = fullscreenEl === containerRef.current;
// If we just called enter() and this event fires within DEBOUNCE_MS,
// and it looks like an exit, ignore it — it's the DPI-scaling resize blip
if (!isNowFullscreen && Date.now() - enterTimeRef.current < DEBOUNCE_MS) {
return;
}
setActive(isNowFullscreen);
};
document.addEventListener("fullscreenchange", handleChange);
document.addEventListener("webkitfullscreenchange", handleChange);
document.addEventListener("mozfullscreenchange", handleChange);
document.addEventListener("MSFullscreenChange", handleChange);
return () => {
document.removeEventListener("fullscreenchange", handleChange);
document.removeEventListener("webkitfullscreenchange", handleChange);
document.removeEventListener("mozfullscreenchange", handleChange);
document.removeEventListener("MSFullscreenChange", handleChange);
};
}, []);
const FullScreenWrapper: React.FC<{ children: React.ReactNode }> = useCallback(
({ children }) => (
<div ref={containerRef} style={{ width: "100%", height: "100%" }}>
{children}
</div>
),
[]
);
return {
fullScreenHandler: { active, enter, exit },
FullScreenWrapper,
};
}

47
src/navigation/BottomNavigator.tsx
View file

@ -13,14 +13,14 @@ import BinsIcon from "products/Bindapt/BinsIcon";
import { useGlobalState } from "providers";
import { useCallback, useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { IsAdaptiveAgriculture, isBXT, IsMiVent, IsAdCon, IsOmniAir, IsMiPCA, IsIntellifarms } from "services/whiteLabel";
import { getFeatures, getWhitelabel } from "services/whiteLabel";
import FieldsIcon from "products/AgIcons/FieldsIcon";
import NexusSTIcon from "products/Construction/NexusSTIcon";
import OmniAirDeviceIcon from "products/AviationIcons/OmniAirDeviceIcon";
import AirportMapIcon from "products/AviationIcons/AirportMapIcon";
import PlaneIcon from "products/AviationIcons/PlaneIcon";
import JobsiteIcon from "products/Construction/JobSiteIcon";
import { useAuth0 } from "@auth0/auth0-react";
import { useAuthContext } from "providers/authContext";
interface Props {
sideIsOpen: boolean;
@ -33,23 +33,19 @@ export default function BottomNavigator(props: Props) {
const navigate = useNavigate();
const location = useLocation();
const prevLocation = usePrevious(location);
const { isAuthenticated } = useAuth0();
const { isAuthenticated } = useAuthContext();
const [{ user }] = useGlobalState();
const [route, setRoute] = useState(sideIsOpen ? "side" : "");
const isAg = IsAdaptiveAgriculture();
const isIntel = IsIntellifarms();
const isMiVent = IsMiVent();
const isAdCon = IsAdCon();
const isOmni = IsOmniAir();
const isMiPCA = IsMiPCA();
const wl = getWhitelabel();
const f = getFeatures();
const reRoute = useCallback(
(path: string) => {
if (path === "") {
if (isAg || isIntel) {
if (f.bins) {
return "bins";
}
if (isMiVent) {
if (f.ventilation) {
return "ventilation";
}
return "devices";
@ -75,7 +71,7 @@ export default function BottomNavigator(props: Props) {
}
return path;
},
[isAg, isMiVent, isIntel]
[f]
);
const autoDetectRoute = useCallback(() => {
@ -106,27 +102,27 @@ export default function BottomNavigator(props: Props) {
const authenticatedNavigation = () => {
return (
<BottomNavigation value={route} onChange={(_, newValue) => handleRouteChange(newValue)}>
{isAg || isIntel && (
{f.visualFarm && (
<BottomNavigationAction label="Farm" icon={<FieldsIcon type={getType()} />} value="visualFarm" />
)}
{isAg || isIntel && (
{f.bins && (
<BottomNavigationAction label="Bins" icon={<BinsIcon type={getType()} />} value="bins" />
)}
{isAdCon && (
{f.constructionMap && (
<BottomNavigationAction
label="Site Map"
icon={<FieldsIcon type={getType()} />}
value="constructionMap"
/>
)}
{(isOmni || isMiPCA) && (
{f.aviationMap && (
<BottomNavigationAction
label="Map"
icon={<AirportMapIcon type={getType()} />}
value="aviationMap"
/>
)}
{(isOmni || isMiPCA) && (
{f.terminals && (
<BottomNavigationAction
label="Terminals"
icon={<PlaneIcon type={getType()} />}
@ -137,11 +133,11 @@ export default function BottomNavigator(props: Props) {
<BottomNavigationAction
label="Devices"
icon={
(isAg || isIntel) ? (
f.bins ? (
<BindaptIcon type={getType()} />
) : isAdCon ? (
) : f.constructionMap ? (
<NexusSTIcon type={getType()} />
) : (isOmni || isMiPCA) ? (
) : f.aviationMap ? (
<OmniAirDeviceIcon type={getType()} />
) : (
<DevicesIcon />
@ -149,22 +145,15 @@ export default function BottomNavigator(props: Props) {
}
value="devices"
/>
{isAdCon && (
{f.jobsites && (
<BottomNavigationAction
label="Sites"
icon={<JobsiteIcon type={getType()} />}
value="jobsites"
/>
)}
{/* {isMiVent && (
<BottomNavigationAction
label="Ventilation"
icon={<VentilationIcon type="light" />}
value="ventilation"
/>
)} */}
{isBXT() && user.hasFeature("security") && (
{f.security && user.hasFeature("security") && (
<BottomNavigationAction label="Security" icon={<Security />} value="security" />
)}
<BottomNavigationAction label="More" icon={<MoreHoriz />} value="more" />

12
src/navigation/Router.tsx
View file

@ -1,7 +1,7 @@
import { lazy, Suspense } from "react";
import LoadingScreen from "../app/LoadingScreen";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import { useAuthContext } from "providers/authContext";
import Header from "app/Header";
import Logout from "pages/Logout";
import { ErrorBoundary } from "react-error-boundary";
@ -57,7 +57,7 @@ export const appendToUrl = (appendage: number | string) => {
export default function Router() {
const { /*isAuthenticated, loginWithRedirect,*/ isLoading } = useAuth0();
const { isAuthenticated } = useAuthContext();
const whiteLabel = getWhitelabel();
const [{ user }] = useGlobalState();
@ -306,13 +306,7 @@ export default function Router() {
);
}
if (isLoading) return null;
// if (!isAuthenticated) {
// loginWithRedirect()
// return (
// null
// )
// }
if (!isAuthenticated) return null;
function ErrorFallback({ error }: { error: Error }) {
return <div>Something went wrong: {error.stack}</div>;

76
src/navigation/SideNavigator.tsx
View file

@ -23,19 +23,9 @@ import BindaptIcon from "../products/Bindapt/BindaptIcon";
import { useLocation, useNavigate } from "react-router-dom";
import BinsIcon from "products/Bindapt/BinsIcon";
import { useGlobalState } from "providers";
import {
IsAdaptiveAgriculture,
// hasTutorialPlaylist,
IsAdCon,
IsIntellifarms,
IsMiPCA,
// isBXT,
IsMiVent,
IsOmniAir,
IsStreamline,
} from "services/whiteLabel";
import { getFeatures } from "services/whiteLabel";
import MiningIcon from "products/ventilation/MiningIcon";
import { useAuth0 } from "@auth0/auth0-react";
import { useAuthContext } from "providers/authContext";
import FieldsIcon from "products/AgIcons/FieldsIcon";
import PlaneIcon from "products/AviationIcons/PlaneIcon";
import AirportMapIcon from "products/AviationIcons/AirportMapIcon";
@ -53,6 +43,7 @@ import CNHiIcon from "products/CommonIcons/cnhiIcon";
import LibraCartIcon from "products/CommonIcons/libracartIcon";
const drawerWidth = 230;
const closedDrawerWidth = 9.25;
const useStyles = makeStyles((theme: Theme) => ({
sideMenu: {
@ -66,6 +57,8 @@ const useStyles = makeStyles((theme: Theme) => ({
sideMenuOpened: {
zIndex: theme.zIndex.drawer + 2,
width: drawerWidth,
minWidth: drawerWidth,
maxWidth: drawerWidth,
transition: theme.transitions.create(["width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
@ -76,12 +69,16 @@ const useStyles = makeStyles((theme: Theme) => ({
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
// overflowX: "hidden",
overflowX: "hidden",
width: theme.spacing(0),
minWidth: theme.spacing(0),
maxWidth: theme.spacing(0),
// zIndex: theme.zIndex.drawer,
// opacity: 0,
[theme.breakpoints.up("md")]: {
width: theme.spacing(9.25),
width: theme.spacing(closedDrawerWidth),
minWidth: theme.spacing(closedDrawerWidth),
maxWidth: theme.spacing(closedDrawerWidth),
opacity: 1
}
},
@ -130,7 +127,7 @@ interface Props {
export default function SideNavigator(props: Props) {
const { open, onOpen, onClose } = props;
const { isAuthenticated } = useAuth0()
const { isAuthenticated } = useAuthContext()
const theme = useTheme();
const width = useWidth();
const classes = useStyles();
@ -165,16 +162,10 @@ export default function SideNavigator(props: Props) {
}
const authenticatedSideMenu = () => {
const isMiVent = IsMiVent();
const isAg = IsAdaptiveAgriculture()
const isIntel = IsIntellifarms()
const isStreamline = IsStreamline()
const isOmni = IsOmniAir()
const isMiPCA = IsMiPCA()
const isAdCon = IsAdCon()
const f = getFeatures();
return (
<List className={classes.list} component="nav">
{(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
{(f.visualFarm || user.hasFeature("admin")) && (
<Tooltip title="Visual Farm" placement="right">
<ListItemButton
id="tour-visual-farm"
@ -188,7 +179,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{((isOmni || isMiPCA) || user.hasFeature("admin")) && (
{(f.aviationMap || user.hasFeature("admin")) && (
<Tooltip title="Aviation Map" placement="right">
<ListItemButton
id="tour-aviation-map"
@ -202,7 +193,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{(isAdCon || user.hasFeature("admin")) && (
{(f.constructionMap || user.hasFeature("admin")) && (
<Tooltip title="Construction Map" placement="right">
<ListItemButton
id="tour-construction-map"
@ -216,7 +207,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
{(f.contracts || user.hasFeature("admin")) && (
<Tooltip title="Contracts" placement="right">
<ListItemButton
id="tour-contracts"
@ -230,7 +221,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
{(f.bins || user.hasFeature("admin")) && (
<Tooltip title="Bins" placement="right">
<ListItemButton
id="tour-bins"
@ -244,7 +235,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{((isOmni || isMiPCA) || user.hasFeature("admin")) && (
{(f.terminals || user.hasFeature("admin")) && (
<Tooltip title="Terminals" placement="right">
<ListItemButton
id="tour-terminals"
@ -258,7 +249,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{(user.hasFeature("installer") && isAg || user.hasFeature("admin")) &&
{(f.cableEstimator && user.hasFeature("installer") || user.hasFeature("admin")) &&
<Tooltip title="Cable Estimator" placement="right">
<ListItemButton
id="tour-cable-estimator"
@ -272,7 +263,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
}
{(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
{(f.transactions || user.hasFeature("admin")) && (
<Tooltip title="Transactions" placement="right">
<ListItemButton
id="tour-transactions"
@ -286,7 +277,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{(isMiVent || user.hasFeature("admin")) && (
{(f.mines || user.hasFeature("admin")) && (
<Tooltip title="Mines" placement="right">
<ListItemButton
id="tour-mines"
@ -364,7 +355,7 @@ export default function SideNavigator(props: Props) {
{open && <ListItemText primary="Users" />}
</ListItemButton>
</Tooltip>
{(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
{(f.fields || user.hasFeature("admin")) && (
<Tooltip title="My Fields" placement="right">
<ListItemButton
id="tour-field-list"
@ -378,7 +369,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{(isAg || isIntel || isStreamline || user.hasFeature("admin")) && (
{(f.grainTypes || user.hasFeature("admin")) && (
<Tooltip title="Grain Types" placement="right">
<ListItemButton
id="tour-grain-types"
@ -393,7 +384,7 @@ export default function SideNavigator(props: Props) {
</Tooltip>
)}
{(isAdCon || user.hasFeature("admin")) && (
{(f.jobsites || user.hasFeature("admin")) && (
<Tooltip title="Jobsites" placement="right">
<ListItemButton
id="tour-jobsites"
@ -407,7 +398,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
)}
{(isAdCon || user.hasFeature("admin")) && (
{(f.heaters || user.hasFeature("admin")) && (
<Tooltip title="Heaters" placement="right">
<ListItemButton
id="tour-heaters"
@ -462,7 +453,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton>
</Tooltip>
}
{(isAg || isIntel || isStreamline || user.hasFeature("admin")) &&
{(f.marketplace || user.hasFeature("admin")) &&
<Tooltip title="Marketplace" placement="right">
<ListItemButton
id="tour-marketplace"
@ -538,11 +529,16 @@ export default function SideNavigator(props: Props) {
onClose={onClose}
sx={{ pointerEvents: isMobile&&!open ? "none" : "auto"}}
>
<Toolbar >
<Toolbar>
<Grid container direction="row" justifyContent={"flex-end"}>
<Grid>
<IconButton onClick={onClose} aria-label="onClose side menu">
{theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
<IconButton
onClick={open ? onClose : onOpen}
aria-label={open ? "Close side menu" : "Open side menu"}
>
{open
? theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />
: theme.direction === "rtl" ? <ChevronLeft /> : <ChevronRight />}
</IconButton>
</Grid>
</Grid>
@ -552,4 +548,4 @@ export default function SideNavigator(props: Props) {
{isAuthenticated && authenticatedSideMenu()}
</SwipeableDrawer>
);
}
}

4
src/pages/Bins.tsx
View file

@ -58,9 +58,9 @@ import {
// useBinYardAPI,
useGlobalState,
useInteractionsAPI,
useSnackbar,
useTeamAPI
useSnackbar
} from "providers";
import { useTeamAPI } from "providers/pond/teamAPI";
import React, { SetStateAction, useCallback, useEffect, useState } from "react";
// import { getThemeType } from "theme";
import { stringToMaterialColour } from "utils";

5
src/pages/Device.tsx
View file

@ -7,7 +7,8 @@ import { useDeviceStatusStreams } from "hooks/useDeviceStatusStreams";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import PageContainer from "./PageContainer";
import { useHTTP, useMobile } from "hooks";
import { useMobile } from "hooks";
import { useHTTP } from "providers/http";
import LoadingScreen from "app/LoadingScreen";
import SmartBreadcrumb from "common/SmartBreadcrumb";
import DeviceActions from "device/DeviceActions";
@ -623,4 +624,4 @@ export default function DevicePage() {
{componentCards()}
</PageContainer>
);
}
}

3
src/pages/DeviceComponent.tsx
View file

@ -38,7 +38,8 @@ import {
} from "pbHelpers/DeviceAvailability";
import { getDefaultInteraction } from "pbHelpers/Interaction";
import { pond } from "protobuf-ts/pond";
import { useGlobalState, useTeamAPI } from "providers";
import { useGlobalState } from "providers";
import { useTeamAPI } from "providers/pond/teamAPI";
import { useCallback, useEffect, useRef, useState } from "react";
import { useParams } from "react-router-dom";
// import { useRouteMatch } from "react-router";

7
src/pages/Devices.tsx
View file

@ -5,8 +5,9 @@ import { makeStyles } from "@mui/styles";
import ResponsiveTable, { Column } from "common/ResponsiveTable";
import ProvisionDevice from "device/ProvisionDevice";
import { pond } from "protobuf-ts/pond";
import { useDeviceAPI, useGlobalState, useGroupAPI, useTeamAPI } from "providers";
import { useHTTP } from "hooks";
import { useDeviceAPI, useGlobalState, useGroupAPI } from "providers";
import { useHTTP } from "providers/http";
import { useTeamAPI } from "providers/pond/teamAPI";
import { useDeviceStatusStreams } from "hooks/useDeviceStatusStreams";
import { useCallback, useEffect, useMemo, useState } from "react";
import PageContainer from "./PageContainer";
@ -1204,4 +1205,4 @@ export default function Devices() {
/>
</PageContainer>
)
}
}

5
src/pages/Login.tsx
View file

@ -1,10 +1,11 @@
import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react";
import { RedirectLoginOptions } from "@auth0/auth0-react";
// import { useAuth } from "hooks";
import queryString from "query-string";
import { useEffect } from "react";
import { useLocation } from "react-router";
// import Loading from "./Loading";
import LoadingScreen from "app/LoadingScreen";
import { useAuthContext } from "providers/authContext";
// interface Props {
// prevPath?: string;
@ -13,7 +14,7 @@ import LoadingScreen from "app/LoadingScreen";
export default function Login() {
// const { prevPath } = props;
const location = useLocation();
const { loginWithRedirect } = useAuth0();
const { loginWithRedirect } = useAuthContext();
// const setRouteBeforeLogin = useCallback((): Promise<string> => {
// return new Promise(function(resolve) {

4
src/pages/Logout.tsx
View file

@ -1,9 +1,9 @@
import { useAuth0 } from "@auth0/auth0-react";
import { useAuthContext } from "providers/authContext";
import LoadingScreen from "app/LoadingScreen";
import { useEffect } from "react";
export default function Logout() {
const { logout } = useAuth0();
const { logout } = useAuthContext();
useEffect(() => {
logout();

28
src/pages/PageContainer.tsx
View file

@ -1,4 +1,4 @@
import { Container, SxProps, Theme } from "@mui/material";
import { Container, SxProps, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import classNames from "classnames";
// import { useMobile } from "hooks";
@ -47,6 +47,23 @@ const useStyles = makeStyles((theme: Theme) => ({
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
buildInfo: {
position: "fixed" as const,
bottom: 56,
left: 8,
fontSize: 10,
lineHeight: 1.3,
opacity: 0.35,
color: theme.palette.text.secondary,
pointerEvents: "none" as const,
zIndex: 1,
[theme.breakpoints.up("sm")]: {
bottom: 8,
},
[theme.breakpoints.up("md")]: {
left: `calc(${theme.spacing(9)} + 8px)`,
}
}
}))
@ -78,8 +95,13 @@ export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
}}
disableGutters
maxWidth={false}
children={<>{children}</>}
/>
>
{children}
<Typography component="div" className={classes.buildInfo}>
{new Date(__BUILD_DATE__).toLocaleDateString()}<br />
{__GIT_HASH__}
</Typography>
</Container>
);
};

6
src/pages/SignupCallback.tsx
View file

@ -7,7 +7,7 @@ import { CheckCircleOutline } from "@mui/icons-material";
import { green } from "@mui/material/colors";
import Tour, { TourStep } from "common/Tour";
import Emoji from "react-emoji-render";
import { getWhitelabel, IsAdaptiveAgriculture } from "services/whiteLabel";
import { getWhitelabel, getFeatures } from "services/whiteLabel";
import { pond } from "protobuf-ts/pond";
import { User } from "models";
// import { color } from "framer-motion";
@ -154,7 +154,7 @@ export default function SignupCallback () {
<MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_FEET}>Feet (ft)</MenuItem>
</TextField>
</Grid2>
{IsAdaptiveAgriculture() && (
{getFeatures().grainUnit && (
<Grid2 size={{ xs: 12 }}>
<TextField
select
@ -294,7 +294,7 @@ export default function SignupCallback () {
placement: "right"
})
//tasks step
if (IsAdaptiveAgriculture()) {
if (getFeatures().visualFarm) {
steps.push({
title: "Visual Farm",
content: (

10
src/pages/Team.tsx
View file

@ -12,10 +12,11 @@ import { appendToUrl } from "navigation/Router";
import PageContainer from "pages/PageContainer";
import { getContextKeys, getContextTypes } from "pbHelpers/Context";
import { pond } from "protobuf-ts/pond";
import { useGlobalState, useSnackbar, useTeamAPI, useUserAPI } from "providers";
import { useGlobalState, useSnackbar, useUserAPI } from "providers";
import { useTeamAPI } from "providers/pond/teamAPI";
import { useEffect, useState } from "react";
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { getSignatureAccentColour, IsAdaptiveAgriculture, IsStreamline } from "services/whiteLabel";
import { getSignatureAccentColour, getFeatures } from "services/whiteLabel";
import TeamActions from "teams/TeamActions";
import TeamKeyManager from "teams/TeamKeyManager";
import ObjectUsers from "user/ObjectUsers";
@ -219,8 +220,7 @@ export default function TeamPage() {
navigate("bins")
}
const isAg = IsAdaptiveAgriculture()
const isStreamline = IsStreamline()
const f = getFeatures()
return (
<PageContainer spacing={isMobile ? 1 : 2}>
@ -266,7 +266,7 @@ export default function TeamPage() {
<ListItemButton onClick={toGroups}>
Groups
</ListItemButton>
{((isAg || isStreamline) || user.hasFeature("admin")) &&
{(f.bins || user.hasFeature("admin")) &&
<>
<Divider />
<ListItemButton onClick={toBins}>

6
src/providers/LoginButton.tsx
View file

@ -1,7 +1,7 @@
import { useAuth0 } from '@auth0/auth0-react';
import { useAuthContext } from './authContext';
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
const { loginWithRedirect } = useAuthContext();
return (
<button onClick={() => loginWithRedirect()}>
@ -10,4 +10,4 @@ const LoginButton = () => {
);
};
export default LoginButton;
export default LoginButton;

44
src/providers/authContext.tsx Normal file
View file

@ -0,0 +1,44 @@
import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react"
import { createContext, PropsWithChildren, useContext } from "react"
interface IAuthContext {
isAuthenticated: boolean
loginWithRedirect: (options?: RedirectLoginOptions) => void | Promise<void>
logout: () => void
}
const AuthContext = createContext<IAuthContext>({
isAuthenticated: false,
loginWithRedirect: () => {},
logout: () => {},
})
export function LocalAuthProvider(props: PropsWithChildren<{ token: string }>) {
const { children, token } = props
const doLogout = () => {
localStorage.removeItem('local_auth_token')
window.location.href = '/'
}
return (
<AuthContext.Provider
value={{
isAuthenticated: !!token,
loginWithRedirect: doLogout,
logout: doLogout,
}}
>
{children}
</AuthContext.Provider>
)
}
export function Auth0AuthBridge(props: PropsWithChildren<{}>) {
const { isAuthenticated, loginWithRedirect, logout } = useAuth0()
return (
<AuthContext.Provider value={{ isAuthenticated, loginWithRedirect, logout: () => logout({ logoutParams: { returnTo: window.location.origin } }) }}>
{props.children}
</AuthContext.Provider>
)
}
export const useAuthContext = () => useContext(AuthContext)

47
src/providers/http.tsx
View file

@ -2,7 +2,7 @@ import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
import moment from "moment";
import { createContext, PropsWithChildren, useContext } from "react";
import PondProvider from "./pond/pond";
import { useAuth0 } from "@auth0/auth0-react";
import { useAuthContext } from "./authContext";
import SnackbarProvider from "./Snackbar";
interface IHTTPContext {
@ -30,7 +30,7 @@ export const HTTPContext = createContext<IHTTPContext>({} as IHTTPContext);
export default function HTTPProvider(props: Props) {
const { children, token } = props;
const { isAuthenticated, loginWithRedirect } = useAuth0();
const { isAuthenticated, loginWithRedirect } = useAuthContext();
const defaultOptions = (demo: boolean = false) => {
if (demo || !isAuthenticated || !token) {
@ -42,7 +42,7 @@ export default function HTTPProvider(props: Props) {
}
const config = {
headers: {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
@ -50,31 +50,24 @@ export default function HTTPProvider(props: Props) {
return config;
};
function isTokenExpired(token: string): boolean {
function isTokenExpired(token: string | undefined): boolean {
if (!token) return true;
try {
// Split the token and decode the payload (second part)
const payloadBase64 = token.split('.')[1];
const decodedPayload = atob(payloadBase64); // Decode base64
const payload = JSON.parse(decodedPayload);
// Get expiration time (in seconds)
const payload = JSON.parse(atob(payloadBase64));
const exp = payload.exp;
if (!exp) return true; // No exp field? Treat as expired
// Current time in seconds
const now = Math.floor(Date.now() / 1000);
// Compare
return now >= exp;
} catch (error) {
console.error("Invalid token format:", error);
return true; // Err on the side of caution if decoding fails
if (!exp) return true;
return Math.floor(Date.now() / 1000) >= exp;
} catch {
return true;
}
}
function get<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
if (isTokenExpired(token)) loginWithRedirect()
if (isTokenExpired(token)) {
loginWithRedirect();
return Promise.reject(new Error("token expired"));
}
return axios.get(url, {...defaultOptions(), ...spreadOptions});
}
@ -83,6 +76,10 @@ export default function HTTPProvider(props: Props) {
data?: any,
spreadOptions?: AxiosRequestConfig
): Promise<AxiosResponse<T>> {
if (isTokenExpired(token)) {
loginWithRedirect();
return Promise.reject(new Error("token expired"));
}
return axios.put(url, data, { ...defaultOptions(), ...spreadOptions });
}
@ -91,10 +88,18 @@ export default function HTTPProvider(props: Props) {
data?: any,
spreadOptions?: AxiosRequestConfig
): Promise<AxiosResponse<T>> {
if (isTokenExpired(token)) {
loginWithRedirect();
return Promise.reject(new Error("token expired"));
}
return axios.post(url, data, { ...defaultOptions(), ...spreadOptions });
}
function del<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
if (isTokenExpired(token)) {
loginWithRedirect();
return Promise.reject(new Error("token expired"));
}
return axios.delete(url, { ...defaultOptions(), ...spreadOptions });
}

4
src/providers/pond/ObjectHeaterAPI.tsx
View file

@ -1,7 +1,7 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import React, { createContext, PropsWithChildren, useContext } from "react";
import { or } from "utils";
import { pondURL } from "./pond";

2
src/providers/pond/backpackAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

5
src/providers/pond/binAPI.tsx
View file

@ -1,4 +1,5 @@
import { useHTTP, usePermissionAPI } from "hooks";
import { useHTTP } from "../http";
import { usePermissionAPI } from "./permissionAPI";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { has, or } from "utils/types";
@ -6,7 +7,7 @@ import { User, binScope } from "models";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { dateRange } from "providers/http";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { quack } from "protobuf-ts/quack";
export interface IBinAPIContext {

4
src/providers/pond/binYardAPI.tsx
View file

@ -1,10 +1,10 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { or } from "utils/types";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface IBinYardAPIContext {
addBinYard: (bin: pond.BinYardSettings, otherTeam?: string) => Promise<AxiosResponse<pond.AddBinYardResponse>>;

2
src/providers/pond/cnhiProxyAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
//import { or } from "utils";

4
src/providers/pond/componentAPI.tsx
View file

@ -1,4 +1,4 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
// import { useWebsocket } from "websocket";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
@ -7,7 +7,7 @@ import { getComponentIDString } from "pbHelpers/Component";
import { Component } from "models";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { quack } from "protobuf-ts/quack";
export interface IComponentAPIContext {

4
src/providers/pond/contractAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface IContractInterface {
addContract: (

2
src/providers/pond/datadogProxyAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

17
src/providers/pond/deviceAPI.tsx
View file

@ -1,10 +1,11 @@
import { useHTTP, usePermissionAPI } from "hooks";
import { useHTTP } from "../http";
import { usePermissionAPI } from "./permissionAPI";
import { Component, deviceScope, User } from "models";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import moment from "moment";
import { or } from "utils/types";
import { dateRange } from "providers/http";
@ -699,8 +700,12 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
};
const setTags = (id: number, tags: string[]) => {
const keys = getContextKeys()
const types = getContextTypes()
let url = "/devices/" + id + "/tags" + "?keys=" + keys + "&types=" + types
if (as && !keys.includes(as)) url += "&as=" + as
return new Promise<AxiosResponse>((resolve, reject) => {
put(pondURL("/devices/" + id + "/tags"), { tags }).then(resp => {
put(pondURL(url), { tags }).then(resp => {
return resolve(resp)
}).catch(err => {
return reject(err)
@ -745,8 +750,12 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
};
const untag = (id: number, tag: string) => {
const keys = getContextKeys()
const types = getContextTypes()
let url = "/devices/" + id + "/tags/" + tag + "?keys=" + keys + "&types=" + types
if (as && !keys.includes(as)) url += "&as=" + as
return new Promise<AxiosResponse>((resolve, reject) => {
del(pondURL("/devices/" + id + "/tags/" + tag)).then(resp => {
del(pondURL(url)).then(resp => {
return resolve(resp)
}).catch(err => {
return reject(err)

4
src/providers/pond/devicePresetAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface IDevicePresetInterface {
//add

4
src/providers/pond/fieldAPI.tsx
View file

@ -1,7 +1,7 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import React, { createContext, PropsWithChildren, useContext } from "react";
import { or } from "utils";
import { pondURL } from "./pond";

4
src/providers/pond/fieldMarkerAPI.tsx
View file

@ -1,7 +1,7 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

2
src/providers/pond/fileControllerAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers/StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";

2
src/providers/pond/firmwareAPI.tsx
View file

@ -1,4 +1,4 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers/StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";

4
src/providers/pond/gateAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface IGateInterface {
addGate: (

4
src/providers/pond/grainAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { or } from "utils";
export interface IGrainInterface {

4
src/providers/pond/grainBagAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import React, { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface IGrainBagInterface {
addGrainBag: (

5
src/providers/pond/groupAPI.tsx
View file

@ -1,11 +1,12 @@
import { useHTTP, usePermissionAPI } from "hooks";
import { useHTTP } from "../http";
import { usePermissionAPI } from "./permissionAPI";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { or } from "utils/types";
import { User, groupScope } from "models";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { getContextKeys, getContextTypes } from "pbHelpers/Context";
export interface IGroupAPIContext {

2
src/providers/pond/harvestPlanAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers/StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";

4
src/providers/pond/homeMarkerAPI.tsx
View file

@ -1,7 +1,7 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

4
src/providers/pond/imagekitAPI.tsx
View file

@ -1,6 +1,6 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";

2
src/providers/pond/interactionsAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { Interaction } from "models";
import { componentIDToString } from "pbHelpers/Component";
import { pond } from "protobuf-ts/pond";

2
src/providers/pond/johnDeereProxyAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
//import { or } from "utils";

2
src/providers/pond/keyManagerAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

2
src/providers/pond/libracartProxyAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import React, { createContext, PropsWithChildren, useContext } from "react";
//import { or } from "utils";

2
src/providers/pond/mineAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { permissionToString } from "pbHelpers/Permission";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers/StateContainer";

4
src/providers/pond/mutationAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface IMutationAPIContext {
linearMutation: (

4
src/providers/pond/noteAPI.tsx
View file

@ -1,7 +1,7 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
// import { useGlobalState } from "providers";
// import { useGlobalState } from "../StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

4
src/providers/pond/notificationAPI.tsx
View file

@ -1,10 +1,10 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import React, { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { or } from "utils/types";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface INotificationAPIContext {
listNotifications: (

4
src/providers/pond/permissionAPI.tsx
View file

@ -1,9 +1,9 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { Scope, Team, User } from "models";
import { permissionToString } from "pbHelpers/Permission";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";
import { objectQueryParams, pondURL } from "./pond";

2
src/providers/pond/preferenceAPI.tsx
View file

@ -1,4 +1,4 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

2
src/providers/pond/siteAPI.tsx
View file

@ -1,5 +1,5 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers/StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";

2
src/providers/pond/tagAPI.tsx
View file

@ -1,4 +1,4 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

4
src/providers/pond/taskAPI.tsx
View file

@ -1,7 +1,7 @@
import { AxiosResponse } from "axios";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

4
src/providers/pond/teamAPI.tsx
View file

@ -1,11 +1,11 @@
import { AxiosResponse } from "axios";
import { Scope, Team } from "models";
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { or } from "utils/types";
import { pondURL } from "./pond";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface ITeamAPIContext {
addTeam: (team: pond.TeamSettings) => Promise<AxiosResponse<pond.AddTeamResponse>>;

4
src/providers/pond/terminalAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
export interface ITerminalAPIContext {
addTerminal: (

4
src/providers/pond/transactionAPI.tsx
View file

@ -1,9 +1,9 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import { createContext, PropsWithChildren, useContext } from "react";
import { pond } from "protobuf-ts/pond";
import { pondURL } from "./pond";
import { AxiosResponse } from "axios";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { or } from "utils";
export interface ITransactionAPIContext {

4
src/providers/pond/usageAPI.tsx
View file

@ -1,6 +1,6 @@
import { useHTTP } from "hooks";
import { useHTTP } from "../http";
import moment from "moment";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";

4
src/providers/pond/userAPI.tsx
View file

@ -1,10 +1,10 @@
// import { useHTTP } from "hooks";
// import { useHTTP } from "../http";
// import { Scope, User } from "models";
// import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { objectQueryParams, pondURL } from "./pond";
// import { or } from "utils";
import { useGlobalState } from "providers";
import { useGlobalState } from "../StateContainer";
// import { AxiosResponse } from "axios";
import { useHTTP } from "../http";
import { AxiosResponse } from "axios";

2
src/services/restAPI.js
View file

@ -1,4 +1,4 @@
import * as axios from "axios";
import axios from "axios";
export var defaultOptions = {
headers: {

709
src/services/whiteLabel.ts
View file

@ -1,4 +1,3 @@
// import { isOffline } from "utils/environment";
import DefaultDarkLogo from "../assets/whitelabels/darkLogo.png";
import DefaultLightLogo from "../assets/whitelabels/lightLogo.png";
import AdapativeAgLogo from "../assets/whitelabels/AdaptiveAgriculture/logo.png";
@ -9,12 +8,10 @@ import BXTDarkLogo from "../assets/whitelabels/BXT/darkLogo.png";
import AeroGrowDarkLogo from "../assets/whitelabels/AeroGrow/darkLogo.png";
import AeroGrowLightLogo from "../assets/whitelabels/AeroGrow/lightLogo.png";
import MiVentLightLogo from "../assets/whitelabels/MiVent/lightLogo.png";
// import OmniAirLogo from "../assets/whitelabels/OmniAir/OmniAirLogo.png";
import MiPCALogo from "../assets/whitelabels/MiPCA/MiPCALogo.png";
import StreamlineLogo from "../assets/whitelabels/Streamline/stream-logo.png"
import IntellifarmsLogo from "../assets/whitelabels/Intellifarms/IFND-2023-Logo.png"
import IntellifarmsLogoWhite from "../assets/whitelabels/Intellifarms/IFND-2023-Logo-White.png"
// import { green, yellow } from "@mui/material/colors";
const protips: string[] = [
"You can see the latest measurements for a device by starring its components!",
@ -31,354 +28,408 @@ const protips: string[] = [
"Want to receive text messages about your devices? Update your phone number and enable SMS notifications!"
];
export interface WhiteLabelFeatures {
bins: boolean;
visualFarm: boolean;
contracts: boolean;
transactions: boolean;
fields: boolean;
grainTypes: boolean;
grainUnit: boolean;
marketplace: boolean;
cableEstimator: boolean;
ventilation: boolean;
mines: boolean;
constructionMap: boolean;
jobsites: boolean;
heaters: boolean;
aviationMap: boolean;
terminals: boolean;
security: boolean;
}
interface WhiteLabel {
name: any;
primaryColour: any; //must be a MATERIAL UI colour, used for various UI elements
secondaryColour: any; //must be a MATERIAL UI colour, used for a few UI elements (less importance)
signatureColour: any; //hex or RGB
signatureAccentColour: any; //hex or RGB
auth0ClientId: any;
slug: string;
name: string;
primaryColour: any;
secondaryColour: any;
signatureColour: any;
signatureAccentColour: any;
auth0ClientId: string;
redirectOnLogout: boolean;
logoutRedirectTarget: string;
darkLogo: any;
lightLogo: any;
transparentLogoBG: boolean; //determines whether the background of the logo should be transparent or not
transparentLogoBG: boolean;
blacklist: string[];
features: WhiteLabelFeatures;
hotjarID?: string;
docs: string;
protips: string[];
tutorialPlaylistID?: string;
thumbnail?: string;
tutorialFiles?: { name: string; url: string }[];
homePage?: string;
homePage: string;
}
// const DEFAULT_WHITELABEL: WhiteLabel = {
// name: import.meta.env.REACT_APP_WEBSITE_TITLE,
// primaryColour: import.meta.env.REACT_APP_PRIMARY_COLOUR,
// secondaryColour: import.meta.env.REACT_APP_SECONDARY_COLOUR,
// signatureColour: import.meta.env.REACT_APP_SIGNATURE_COLOUR,
// signatureAccentColour: "#fff",
// auth0ClientId: import.meta.env.REACT_APP_AUTH0_CLIENT_ID,
// redirectOnLogout: false,
// logoutRedirectTarget: "",
// darkLogo: DefaultDarkLogo,
// lightLogo: DefaultLightLogo,
// transparentLogoBG: false,
// blacklist: [],
// hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
// docs: "Platform",
// protips: protips,
// tutorialPlaylistID: ""
// };
const STAGING_WHITELABEL: WhiteLabel = {
name: "Staging",
primaryColour: import.meta.env.VITE_APP_PRIMARY_COLOUR,
secondaryColour: import.meta.env.VITE_APP_SECONDARY_COLOUR,
signatureColour: import.meta.env.VITE_APP_SIGNATURE_COLOUR,
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_STAGING_CLIENT_ID,
redirectOnLogout: false,
logoutRedirectTarget: "",
darkLogo: DefaultDarkLogo,
lightLogo: DefaultLightLogo,
transparentLogoBG: false,
blacklist: [],
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
docs: "Platform",
protips: protips,
tutorialPlaylistID: "",
homePage: "/devices"
const AG_FEATURES: WhiteLabelFeatures = {
bins: true,
visualFarm: true,
contracts: true,
transactions: true,
fields: true,
grainTypes: true,
grainUnit: true,
marketplace: true,
cableEstimator: true,
ventilation: false,
mines: false,
constructionMap: false,
jobsites: false,
heaters: false,
aviationMap: false,
terminals: false,
security: false,
};
const BXT_WHITE_LABEL: WhiteLabel = {
name: "Brand X Technologies",
primaryColour: "blue",
// primaryColour: "#0000FF",
secondaryColour: "yellow",
// secondaryColour: "#FFFF00",
// signatureColour: "#272727",
signatureColour: "#005bb0",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_DEV_CLIENT_ID,
redirectOnLogout: false,
logoutRedirectTarget: "",
darkLogo: BXTDarkLogo,
lightLogo: BXTLightLogo,
transparentLogoBG: false,
blacklist: [],
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
docs: "Platform",
protips: protips,
homePage: "/devices"
const CONSTRUCTION_FEATURES: WhiteLabelFeatures = {
bins: false,
visualFarm: false,
contracts: false,
transactions: false,
fields: false,
grainTypes: false,
grainUnit: false,
marketplace: false,
cableEstimator: false,
ventilation: false,
mines: false,
constructionMap: true,
jobsites: true,
heaters: true,
aviationMap: false,
terminals: false,
security: false,
};
const STREAMLINE_WHITE_LABEL: WhiteLabel = {
name: "Streamline",
primaryColour: "#FFFF",
// primaryColour: "#0000FF",
secondaryColour: "yellow",
// secondaryColour: "#FFFF00",
// signatureColour: "#272727",
signatureColour: "#005bb0",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_STREAMLINE_CLIENT_ID,
redirectOnLogout: false,
logoutRedirectTarget: "",
darkLogo: StreamlineLogo,
lightLogo: StreamlineLogo,
transparentLogoBG: false,
blacklist: [],
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
docs: "Platform",
protips: protips,
homePage: "/devices"
const AVIATION_FEATURES: WhiteLabelFeatures = {
bins: false,
visualFarm: false,
contracts: false,
transactions: false,
fields: false,
grainTypes: false,
grainUnit: false,
marketplace: false,
cableEstimator: false,
ventilation: false,
mines: false,
constructionMap: false,
jobsites: false,
heaters: false,
aviationMap: true,
terminals: true,
security: false,
};
export function isBXT(): boolean {
return getName() === "Brand X Technologies";
const MIVENT_FEATURES: WhiteLabelFeatures = {
bins: false,
visualFarm: false,
contracts: false,
transactions: false,
fields: false,
grainTypes: false,
grainUnit: false,
marketplace: false,
cableEstimator: false,
ventilation: true,
mines: true,
constructionMap: false,
jobsites: false,
heaters: false,
aviationMap: false,
terminals: false,
security: false,
};
const BASE_FEATURES: WhiteLabelFeatures = {
bins: false,
visualFarm: false,
contracts: false,
transactions: false,
fields: false,
grainTypes: false,
grainUnit: false,
marketplace: false,
cableEstimator: false,
ventilation: false,
mines: false,
constructionMap: false,
jobsites: false,
heaters: false,
aviationMap: false,
terminals: false,
security: false,
};
const registry: Record<string, WhiteLabel> = {
"bxt": {
slug: "bxt",
name: "Brand X Technologies",
primaryColour: "blue",
secondaryColour: "yellow",
signatureColour: "#005bb0",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_DEV_CLIENT_ID,
redirectOnLogout: false,
logoutRedirectTarget: "",
darkLogo: BXTDarkLogo,
lightLogo: BXTLightLogo,
transparentLogoBG: false,
blacklist: [],
features: { ...BASE_FEATURES, security: true },
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
docs: "Platform",
protips: protips,
homePage: "/devices",
},
"staging": {
slug: "staging",
name: "Staging",
primaryColour: import.meta.env.VITE_APP_PRIMARY_COLOUR,
secondaryColour: import.meta.env.VITE_APP_SECONDARY_COLOUR,
signatureColour: import.meta.env.VITE_APP_SIGNATURE_COLOUR,
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_STAGING_CLIENT_ID,
redirectOnLogout: false,
logoutRedirectTarget: "",
darkLogo: DefaultDarkLogo,
lightLogo: DefaultLightLogo,
transparentLogoBG: false,
blacklist: [],
features: AG_FEATURES,
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_BXT,
docs: "Platform",
protips: protips,
homePage: "/devices",
},
"adaptive-ag": {
slug: "adaptive-ag",
name: "Adaptive Agriculture",
primaryColour: "green",
secondaryColour: "yellow",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_AGRICULTURE_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://adaptiveagriculture.ca",
darkLogo: AdapativeAgLogo,
lightLogo: AdapativeAgLogo,
transparentLogoBG: true,
blacklist: ["cost"],
features: AG_FEATURES,
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_AGRICULTURE,
docs: "AdaptiveAg",
protips: protips,
tutorialPlaylistID: "PLpLmJnI66Jfl5FXME31ckGam-sD8gB1s2",
thumbnail: AdaptiveAgThumbnail,
tutorialFiles: [
{
name: "Bindapt+",
url: "https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Set-Up-Guide.pdf"
},
{
name: "Adapter Plate",
url: "https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Adapter-Plate-Set-Up-Guide.pdf"
}
],
homePage: "/bins",
},
"intellifarms": {
slug: "intellifarms",
name: "Intellifarms",
primaryColour: "#9E1B32",
secondaryColour: "#4A4F55",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_INTELLIFARMS_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://myintellifarms.com",
darkLogo: IntellifarmsLogo,
lightLogo: IntellifarmsLogoWhite,
transparentLogoBG: true,
blacklist: [],
features: AG_FEATURES,
docs: "Platform",
protips: protips,
homePage: "/bins",
},
"streamline": {
slug: "streamline",
name: "Streamline",
primaryColour: "#FFFF",
secondaryColour: "yellow",
signatureColour: "#005bb0",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_STREAMLINE_CLIENT_ID,
redirectOnLogout: false,
logoutRedirectTarget: "",
darkLogo: StreamlineLogo,
lightLogo: StreamlineLogo,
transparentLogoBG: false,
blacklist: [],
features: AG_FEATURES,
docs: "Platform",
protips: protips,
homePage: "/devices",
},
"aerogrow": {
slug: "aerogrow",
name: "AeroGrow",
primaryColour: "green",
secondaryColour: "cyan",
signatureColour: "#fff",
signatureAccentColour: "#000",
auth0ClientId: import.meta.env.VITE_AUTH0_AEROGROW_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://www.aerogrowmanufacturing.com",
darkLogo: AeroGrowDarkLogo,
lightLogo: AeroGrowLightLogo,
transparentLogoBG: true,
blacklist: [],
features: BASE_FEATURES,
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_AEROGROW,
docs: "Platform",
protips: protips,
homePage: "/devices",
},
"mivent": {
slug: "mivent",
name: "MiVent",
primaryColour: "green",
secondaryColour: "yellow",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_MIVENT_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://mivent.ca",
darkLogo: MiVentLightLogo,
lightLogo: MiVentLightLogo,
transparentLogoBG: true,
blacklist: ["cost"],
features: MIVENT_FEATURES,
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_MIVENT,
docs: "Platform",
protips: protips,
homePage: "/devices",
},
"adaptive-construction": {
slug: "adaptive-construction",
name: "Adaptive Construction",
primaryColour: "blue",
secondaryColour: "blue",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_CONSTRUCTION_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://adaptiveconstruction.ca",
darkLogo: AdConLogo,
lightLogo: AdConLogo,
transparentLogoBG: true,
blacklist: ["cost"],
features: CONSTRUCTION_FEATURES,
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_CONSTRUCTION,
docs: "AdaptiveConstruction",
protips: protips,
homePage: "/devices",
},
"omniair": {
slug: "omniair",
name: "OmniAir",
primaryColour: "#004f9b",
secondaryColour: "yellow",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://omniairsystems.com",
darkLogo: MiPCALogo,
lightLogo: MiPCALogo,
transparentLogoBG: true,
blacklist: ["cost"],
features: AVIATION_FEATURES,
docs: "OmniAir",
protips: protips,
homePage: "/devices",
},
"mipca": {
slug: "mipca",
name: "MiPCA",
primaryColour: "#004f9b",
secondaryColour: "yellow",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://mionetech.com",
darkLogo: MiPCALogo,
lightLogo: MiPCALogo,
transparentLogoBG: true,
blacklist: ["cost"],
features: AVIATION_FEATURES,
docs: "MiPCA",
protips: protips,
homePage: "/devices",
},
};
// Ordered most-specific to least-specific
const DOMAIN_RULES: [RegExp, string][] = [
[/bxt-dev/, "bxt"],
[/staging\.brandxtech/, "staging"],
[/streamline\./, "streamline"],
[/brandxtech|brandxducks/, "bxt"],
[/adaptiveagriculture|adaptiveag/, "adaptive-ag"],
[/adaptiveconstruction/, "adaptive-construction"],
[/aerogrowmanufacturing/, "aerogrow"],
[/mivent/, "mivent"],
[/omniair/, "omniair"],
[/mionetech|mipca/, "mipca"],
[/myintellifarms|intellifarms/, "intellifarms"],
];
function resolveSlug(): string {
const override = import.meta.env.VITE_WHITELABEL;
if (override && registry[override]) return override;
const host = window.location.hostname;
for (const [pattern, slug] of DOMAIN_RULES) {
if (pattern.test(host)) return slug;
}
return "adaptive-ag";
}
const ADAPTIVE_AGRICULTURE_WHITE_LABEL: WhiteLabel = {
name: "Adaptive Agriculture",
primaryColour: "green",
// primaryColour: "#008000",
secondaryColour: "yellow",
// secondaryColour: "#FFFF00",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_AGRICULTURE_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://adaptiveagriculture.ca",
darkLogo: AdapativeAgLogo,
lightLogo: AdapativeAgLogo,
transparentLogoBG: true,
blacklist: ["cost"],
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_AGRICULTURE,
docs: "AdaptiveAg",
protips: protips.concat([]),
tutorialPlaylistID: "PLpLmJnI66Jfl5FXME31ckGam-sD8gB1s2",
thumbnail: AdaptiveAgThumbnail,
tutorialFiles: [
{
name: "Bindapt+",
url: "https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Set-Up-Guide.pdf"
},
{
name: "Adapter Plate",
url:
"https://adaptiveagriculture.ca/wp-content/uploads/2023/08/Bindapt-Adapter-Plate-Set-Up-Guide.pdf"
}
],
homePage: "/bins"
};
export function IsAdaptiveAgriculture(): boolean {
return (
getName() === "Adaptive Agriculture" ||
window.location.origin.includes("staging") ||
window.location.origin.includes("localhost")
);
}
const INTELLIFARMS_WHITE_LABEL: WhiteLabel = {
name: "Intellifarms",
primaryColour: "#9E1B32",
secondaryColour: "#4A4F55",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_INTELLIFARMS_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://myintellifarms.com",
darkLogo: IntellifarmsLogo,
lightLogo: IntellifarmsLogoWhite,
transparentLogoBG: true,
blacklist: [],
docs: "Platform",
protips: protips,
homePage: "/bins"
};
export function IsIntellifarms(): boolean {
return (
getName() === "Intellifarms"
// window.location.origin.includes("staging") ||
// window.location.origin.includes("localhost")
);
}
export function IsStreamline(): boolean {
return (
getName() === "Streamline"
// window.location.origin.includes("staging") ||
// window.location.origin.includes("localhost")
);
}
const AEROGROW_WHITE_LABEL: WhiteLabel = {
name: "AeroGrow",
primaryColour: "green",
secondaryColour: "cyan",
signatureColour: "#fff",
signatureAccentColour: "#000",
auth0ClientId: import.meta.env.VITE_AUTH0_AEROGROW_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://www.aerogrowmanufacturing.com",
darkLogo: AeroGrowDarkLogo,
lightLogo: AeroGrowLightLogo,
transparentLogoBG: true,
blacklist: [],
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_AEROGROW,
docs: "Platform",
protips: protips
};
export function IsMiVent(): boolean {
return (
getName() === "MiVent" ||
window.location.origin.includes("staging") ||
window.location.origin.includes("localhost")
);
}
const MIVENT_WHITE_LABEL: WhiteLabel = {
name: "MiVent",
primaryColour: "green",
secondaryColour: "yellow",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_MIVENT_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://mivent.ca",
darkLogo: MiVentLightLogo,
lightLogo: MiVentLightLogo,
transparentLogoBG: true,
blacklist: ["cost"],
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_MIVENT,
docs: "Platform",
protips: protips.concat([])
};
const ADAPTIVE_CONSTRUCTION_WHITE_LABEL: WhiteLabel = {
name: "Adaptive Construction",
primaryColour: "blue",
secondaryColour: "blue",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_ADAPTIVE_CONSTRUCTION_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://adaptiveconstruction.ca",
darkLogo: AdConLogo,
lightLogo: AdConLogo,
transparentLogoBG: true,
blacklist: ["cost"],
hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_ADAPTIVE_CONSTRUCTION,
docs: "AdaptiveConstruction",
protips: protips.concat([])
};
export function IsAdCon(): boolean {
return (
getName() === "Adaptive Construction" ||
window.location.origin.includes("staging") ||
window.location.origin.includes("localhost")
);
}
const OMNIAIR_WHITE_LABEL: WhiteLabel = {
name: "OmniAir",
primaryColour: "#004f9b",
secondaryColour: "yellow",
signatureColour: "#272727",
signatureAccentColour: "#fff",
auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://omniairsystems.com",
darkLogo: MiPCALogo,
lightLogo: MiPCALogo,
transparentLogoBG: true,
blacklist: ["cost"],
//hotjarID: import.meta.env.REACT_APP_HOTJAR_ID_OMNIAIR, testing what happens if this is excluded
docs: "OmniAir",
protips: protips.concat([])
};
export function IsOmniAir(): boolean {
return (
getName() === "OmniAir" ||
window.location.origin.includes("staging") ||
window.location.origin.includes("localhost")
);
}
const MIPCA_WHITE_LABEL: WhiteLabel = {
name: "MiPCA",
primaryColour: "#004f9b",
secondaryColour: "yellow",
signatureColour: "#272727",
signatureAccentColour: "#fff",
//omni air and MiPCA are the same client ID in Auth0, it is to replace it, once omniair gets removed we can re-name this
auth0ClientId: import.meta.env.VITE_AUTH0_OMNIAIR_CLIENT_ID,
redirectOnLogout: true,
logoutRedirectTarget: "https://mionetech.com",
darkLogo: MiPCALogo,
lightLogo: MiPCALogo,
transparentLogoBG: true,
blacklist: ["cost"],
docs: "MiPCA",
protips: protips.concat([])
};
export function IsMiPCA(): boolean {
return (
getName() === "MiPCA" ||
window.location.origin.includes("staging") ||
window.location.origin.includes("localhost")
);
}
const whitelabels = new Map<string, WhiteLabel>([
["streamline", STREAMLINE_WHITE_LABEL],
["adaptiveag", ADAPTIVE_AGRICULTURE_WHITE_LABEL],
["adaptiveagriculture", ADAPTIVE_AGRICULTURE_WHITE_LABEL],
["brandxducks", BXT_WHITE_LABEL],
["brandxtech", BXT_WHITE_LABEL],
["aerogrowmanufacturing", AEROGROW_WHITE_LABEL],
["localhost", BXT_WHITE_LABEL],
["staging", STAGING_WHITELABEL],
["10.0", ADAPTIVE_CONSTRUCTION_WHITE_LABEL],
["mivent", MIVENT_WHITE_LABEL],
["adaptiveconstruction", ADAPTIVE_CONSTRUCTION_WHITE_LABEL],
["omniair", OMNIAIR_WHITE_LABEL],
["mipca", MIPCA_WHITE_LABEL],
["mionetech", MIPCA_WHITE_LABEL],
["intellifarms", INTELLIFARMS_WHITE_LABEL]
]);
let cached: WhiteLabel | null = null;
export function getWhitelabel(): WhiteLabel {
// if (isOffline()) {
// return DEFAULT_WHITELABEL;
// }
if (!cached) {
cached = registry[resolveSlug()];
}
return cached;
}
const hostname = window.location.hostname;
if (window.location.origin.includes("bxt-dev")) {
return BXT_WHITE_LABEL;
}
if (window.location.origin.includes("localhost")) {
return INTELLIFARMS_WHITE_LABEL;
}
if (window.location.origin.includes("staging") || import.meta.env.VITE_LOCAL_STAGING=='true') {
return STAGING_WHITELABEL;
}
const whiteLabelKeys = Array.from(whitelabels.keys());
for (var i = 0; i < whiteLabelKeys.length; i++) {
let key = whiteLabelKeys[i];
if (hostname.includes(key)) {
return whitelabels.get(key) as WhiteLabel;
}
}
return ADAPTIVE_AGRICULTURE_WHITE_LABEL;
export function getFeatures(): WhiteLabelFeatures {
return getWhitelabel().features;
}
export function getPrimaryColour(): any {
@ -397,7 +448,7 @@ export function getSignatureAccentColour(): any {
return getWhitelabel().signatureAccentColour;
}
export function getAuth0ClientId(): any {
export function getAuth0ClientId(): string {
return getWhitelabel().auth0ClientId;
}
@ -418,10 +469,6 @@ export function getLightLogo(): any {
}
export function hideLogo(): boolean {
// if (isOffline()) {
// return false;
// }
return getWhitelabel().name === "";
}

3
src/teams/TeamList.tsx
View file

@ -12,7 +12,8 @@ import {
Grid2,
} from "@mui/material";
import { pond } from "protobuf-ts/pond";
import { useGlobalState, useSnackbar, useTeamAPI, useUserAPI } from "providers";
import { useGlobalState, useSnackbar, useUserAPI } from "providers";
import { useTeamAPI } from "providers/pond/teamAPI";
import { Team, teamScope } from "models";
import { useNavigate } from "react-router";
import { cloneDeep } from "lodash";

3
src/teams/TeamSettings.tsx
View file

@ -14,7 +14,8 @@ import {
import ResponsiveDialog from "common/ResponsiveDialog";
import { Team } from "models";
import { pond } from "protobuf-ts/pond";
import { useSnackbar, useTeamAPI } from "providers";
import { useSnackbar } from "providers";
import { useTeamAPI } from "providers/pond/teamAPI";
import React, { useEffect, useState } from "react";
import DeleteButton from "common/DeleteButton";
import { userRoleFromPermissions } from "pbHelpers/User";

4
src/user/UserMenu.tsx
View file

@ -5,7 +5,7 @@ import { makeStyles } from "@mui/styles";
import { LockOpen, Person, Lock, Settings, SupervisedUserCircle as TeamIcon, ExitToApp, PersonAdd } from "@mui/icons-material";
import { useState } from "react";
import UserTeamName from "./UserTeamName";
import { useAuth0 } from "@auth0/auth0-react";
import { useAuthContext } from "providers/authContext";
import UserSettings from "./UserSettings";
import UserAvatar from "./UserAvatar";
import { purple } from "@mui/material/colors";
@ -77,7 +77,7 @@ export default function UserMenu() {
// const { toggleMode } = useThemeMode()
const [{ user, team, as }, dispatch] = useGlobalState();
const { loginWithRedirect } = useAuth0();
const { loginWithRedirect } = useAuthContext();
const classes = useStyles();
const theme = useTheme();

4
src/user/UserSettings.tsx
View file

@ -29,7 +29,7 @@ import { useThemeMode } from "theme/AppThemeProvider";
// import ContractsIcon from "products/CommonIcons/contractIcon";
import UnitsIcon from "@mui/icons-material/Category";
import { setThemeType } from "theme";
import { IsAdaptiveAgriculture } from "services/whiteLabel";
import { getFeatures } from "services/whiteLabel";
import { setDistanceUnit, setGrainUnit, setPressureUnit, setTemperatureUnit } from "utils";
import FieldsIcon from "products/AgIcons/FieldsIcon";
@ -529,7 +529,7 @@ export default function UserSettings(props: Props) {
<MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_FEET}>Feet (ft)</MenuItem>
</TextField>
</Grid2>
{IsAdaptiveAgriculture() && (
{getFeatures().grainUnit && (
<Grid2 size={{ xs: 12 }}>
<TextField
select

19
src/userFeatures/UserFeatures.tsx
View file

@ -7,12 +7,7 @@ import JohnDeereIcon from "products/CommonIcons/johnDeereIcon";
import CNHiIcon from "products/CommonIcons/cnhiIcon";
import LibraCartIcon from "products/CommonIcons/libracartIcon";
//import AgLogo from "assets/whitelabels/AdaptiveAgriculture/AGLogoSquare.png";
import {
IsAdaptiveAgriculture
// IsAdCon,
// IsMiVent,
// IsOmniAir
} from "services/whiteLabel";
import { getFeatures } from "services/whiteLabel";
import FeatureCard from "./FeatureCard";
//import { ImgIcon } from "common/ImgIcon";
//images to import for the image in the card for the feature make sure to have a 2:1 aspect ratio to keep the cards symmetrical
@ -90,19 +85,9 @@ export default function Marketplace() {
useEffect(() => {
let list: ProductDetails[] = [];
if (IsAdaptiveAgriculture() || user.hasFeature("admin")) {
if (getFeatures().marketplace || user.hasFeature("admin")) {
list = list.concat(agFeatureList);
}
// if(IsAdCon()){
// list = list.concat(constructionFeatureList)
// }
// if(IsOmniAir()){
// list = list.concat(aviationFeatureList)
// }
// if(IsMiVent()){
// list = list.concat(miningFeatureList)
// }
// list = list.concat(universalFeatureList)
setFeaturList(list);
}, []);

24
src/utils/auth0Config.ts Normal file
View file

@ -0,0 +1,24 @@
import { getWhitelabel } from 'services/whiteLabel'
/** True when Auth0 env + whitelabel client ID are present; avoids mounting Auth0Provider on offline / local LAN builds. */
export function isAuth0Configured(): boolean {
const wl = getWhitelabel()
const domain = String(import.meta.env.VITE_AUTH0_CLIENT_DOMAIN ?? '').trim()
const clientRaw = wl.auth0ClientId ?? import.meta.env.VITE_AUTH0_CLIENT_ID
const clientId = String(clientRaw ?? '').trim()
return domain.length > 0 && clientId.length > 0
}
/**
* auth0-spa-js only runs in a "secure context" (HTTPS, http://localhost, http://127.0.0.1, etc.).
* Plain http://192.168.x.x fails — same check as `window.isSecureContext`.
*/
export function isAuth0SpaOriginAllowed(): boolean {
if (typeof window === 'undefined') return true
return window.isSecureContext
}
/** Mount Auth0 only when credentials exist and the browser will let the SDK run. */
export function shouldMountAuth0Provider(): boolean {
return isAuth0Configured() && isAuth0SpaOriginAllowed()
}

3
src/vite-env.d.ts vendored
View file

@ -1 +1,4 @@
/// <reference types="vite/client" />
declare const __BUILD_DATE__: string
declare const __GIT_HASH__: string