dc53a74459
* style: enforce ordering of imports * style: sort imports in loot-core * style: sort imports in desktop-client * style: sort imports in loot-design * style: manual fixes
92 lines
2.2 KiB
JavaScript
92 lines
2.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
import {
|
|
View,
|
|
Text,
|
|
Button,
|
|
ExternalLink
|
|
} from 'loot-design/src/components/common';
|
|
import { colors, styles } from 'loot-design/src/style';
|
|
|
|
function isOSX() {
|
|
var ua = window.navigator.userAgent;
|
|
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
|
|
var webkit = !!ua.match(/WebKit/i);
|
|
return iOS && webkit && !ua.match(/CriOS/i);
|
|
}
|
|
|
|
function isMobile() {
|
|
// Simple detection: if the screen width it too small
|
|
return window.innerWidth < 600;
|
|
}
|
|
|
|
let buttonStyle = { border: 0, fontSize: 15, padding: '10px 13px' };
|
|
|
|
export default function MobileWebMessage() {
|
|
let appStoreURL = isOSX()
|
|
? 'https://itunes.apple.com/us/app/actual-budget-your-finances/id1444818585'
|
|
: 'https://play.google.com/store/apps/details?id=com.shiftreset.actual';
|
|
|
|
let [show, setShow] = useState(
|
|
isMobile() && !document.cookie.match(/hideMobileMessage=true/)
|
|
);
|
|
|
|
function onTry() {
|
|
setShow(false);
|
|
|
|
// Set a cookie for 5 minutes
|
|
let d = new Date();
|
|
d.setTime(d.getTime() + 1000 * 60 * 5);
|
|
document.cookie =
|
|
'hideMobileMessage=true;path=/;expires=' + d.toGMTString();
|
|
}
|
|
|
|
if (!show) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
backgroundColor: colors.n1,
|
|
color: 'white',
|
|
padding: 10,
|
|
margin: 10,
|
|
borderRadius: 6,
|
|
zIndex: 10000,
|
|
fontSize: 15,
|
|
boxShadow: styles.shadowLarge
|
|
}}
|
|
>
|
|
<Text style={{ lineHeight: '1.5em' }}>
|
|
<strong>It looks like you are using a mobile device.</strong> This app
|
|
is built for desktop, but you can try it anyway. For the best mobile
|
|
experience, download the app.
|
|
</Text>
|
|
|
|
<View
|
|
style={{
|
|
marginTop: 20,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end'
|
|
}}
|
|
>
|
|
<Button style={buttonStyle} onClick={onTry}>
|
|
Try it anyway
|
|
</Button>
|
|
<ExternalLink
|
|
bare={false}
|
|
href={appStoreURL}
|
|
style={[buttonStyle, { marginLeft: 10 }]}
|
|
>
|
|
Download app
|
|
</ExternalLink>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|