@shopgate/engage
Version:
Shopgate's ENGAGE library.
77 lines (75 loc) • 2.31 kB
JavaScript
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from '@shopgate/engage/styles';
import { useLongPress } from '@shopgate/engage/core/hooks';
import { getClientInformation } from '@shopgate/engage/core/selectors';
import DevelopmentSettings from "../DevelopmentSettings";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const useStyles = makeStyles()(theme => ({
root: {
position: 'relative',
textAlign: 'center',
color: theme.palette.grey[500],
fontSize: 12,
paddingBottom: 20
},
unselectable: {
WebkitTouchCallout: 'none',
WebkitUserSelect: 'none',
userSelect: 'none'
},
deviceId: {
wordBreak: ['keep-all', 'break-word'],
hyphens: 'auto',
padding: theme.spacing(0, 2)
}
}));
/**
* @param {Object} props The component props.
* @returns {JSX.Element}
*/
const ClientInformation = () => {
const {
classes,
cx
} = useStyles();
const [deviceIdVisible, setDeviceIdVisible] = useState(false);
const [developmentSettingsVisible, setDevelopmentSettingsVisible] = useState(false);
// Press handler to show the device ID
const longPressAttrs = useLongPress(() => {
if (!deviceIdVisible) {
setDeviceIdVisible(true);
} else {
setDevelopmentSettingsVisible(true);
}
}, {
threshold: 5000
});
const {
appVersion,
codebaseVersion,
deviceId,
libVersion
} = useSelector(getClientInformation);
if (!codebaseVersion) {
return null;
}
return /*#__PURE__*/_jsxs("div", {
className: cx('ui-shared__client-information', classes.root),
...longPressAttrs,
"aria-hidden": true,
children: [/*#__PURE__*/_jsxs("p", {
className: classes.unselectable,
children: [`App Version: ${appVersion} (${codebaseVersion})`, /*#__PURE__*/_jsx("br", {}), `Lib Version: ${libVersion}`]
}), deviceIdVisible && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("p", {
className: classes.deviceId,
children: `Device ID: ${deviceId ?? ''}`
}), /*#__PURE__*/_jsx(DevelopmentSettings, {
isOpen: developmentSettingsVisible,
onClose: () => setDevelopmentSettingsVisible(false)
})]
})]
});
};
export default ClientInformation;