Filter app download links by mobile web browser OS

src/components/container/AppDownload/AppDownload.stories.tsx

@@ -17,17 +17,25 @@ const Template: StoryFn<typeof AppDownload> = (args: AppDownloadProps) =>
 		<Card><AppDownload {...args} /></Card>
 	</Layout>;
 
-export const WebBoth = Template.bind({});
-WebBoth.args = {previewProjectPlatforms: ['Web', 'Android', 'iOS'], previewDevicePlatform: 'Web'};
+// On a desktop web browser both store links are shown, limited only by which
+// platforms the project itself supports.
+export const DesktopProjectSupportsAllPlatforms = Template.bind({});
+DesktopProjectSupportsAllPlatforms.args = {previewProjectPlatforms: ['Web', 'Android', 'iOS'], previewDevicePlatform: 'Web', previewOperatingSystem: ''};
 
-export const WebAndroid = Template.bind({});
-WebAndroid.args = {previewProjectPlatforms: ['Web', 'Android'], previewDevicePlatform: 'Web'};
+export const DesktopProjectSupportsAndroidOnly = Template.bind({});
+DesktopProjectSupportsAndroidOnly.args = {previewProjectPlatforms: ['Web', 'Android'], previewDevicePlatform: 'Web', previewOperatingSystem: ''};
 
-export const WebIOS = Template.bind({});
-WebIOS.args = {previewProjectPlatforms: ['Web', 'iOS'], previewDevicePlatform: 'Web'};
+export const DesktopProjectSupportsIOSOnly = Template.bind({});
+DesktopProjectSupportsIOSOnly.args = {previewProjectPlatforms: ['Web', 'iOS'], previewDevicePlatform: 'Web', previewOperatingSystem: ''};
 
-export const Android = Template.bind({});
-Android.args = {previewProjectPlatforms: ['Web', 'Android', 'iOS'], previewDevicePlatform: 'Android'};
+// On a mobile web browser only the store link matching the device's OS is shown,
+// even when the project supports all platforms.
+export const MobileAndroidBrowser = Template.bind({});
+MobileAndroidBrowser.args = {previewProjectPlatforms: ['Web', 'Android', 'iOS'], previewDevicePlatform: 'Web', previewOperatingSystem: 'Android'};
 
-export const IOS = Template.bind({});
-IOS.args = {previewProjectPlatforms: ['Web', 'Android', 'iOS'], previewDevicePlatform: 'iOS'};
+export const MobileIPhoneBrowser = Template.bind({});
+MobileIPhoneBrowser.args = {previewProjectPlatforms: ['Web', 'Android', 'iOS'], previewDevicePlatform: 'Web', previewOperatingSystem: 'iOS'};
+
+// In the native app the widget is hidden entirely (device platform is not Web).
+export const NativeAppHidden = Template.bind({});
+NativeAppHidden.args = {previewProjectPlatforms: ['Web', 'Android', 'iOS'], previewDevicePlatform: 'iOS', previewOperatingSystem: 'iOS'};

src/components/container/AppDownload/AppDownload.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react'
 import './AppDownload.css'
 import MyDataHelps, { ProjectInfo } from '@careevolution/mydatahelps-js'
 import '@fortawesome/fontawesome-svg-core/styles.css';
@@ -11,33 +11,51 @@ import { CardTitle } from '../../presentational';
 export interface AppDownloadProps {
 	previewProjectPlatforms?: string[]
 	previewDevicePlatform?: string;
+	previewOperatingSystem?: string;
 	innerRef?: React.Ref<HTMLDivElement>;
 	title?: string;
 	text?: string;
 }
 
 export default function (props: AppDownloadProps) {
 	const [projectInfo, setProjectInfo] = useState<ProjectInfo>();
+	const [operatingSystem, setOperatingSystem] = useState<string>();
 
 	useInitializeView(() => {
 		if (props.previewProjectPlatforms) {
 			// @ts-ignore
 			setProjectInfo({ name: 'PROJECT', platforms: props.previewProjectPlatforms || [] });
-			return;
+		} else {
+			MyDataHelps.getProjectInfo().then(function (projectInfo) {
+				setProjectInfo(projectInfo);
+			});
 		}
 
-		MyDataHelps.getProjectInfo().then(function (projectInfo) {
-			setProjectInfo(projectInfo);
-		});
+		if (props.previewOperatingSystem !== undefined) {
+			setOperatingSystem(props.previewOperatingSystem);
+		} else {
+			MyDataHelps.getDeviceInfo().then(function (deviceInfo) {
+				setOperatingSystem(deviceInfo?.properties?.OperatingSystem ?? '');
+			}).catch(function () {
+				setOperatingSystem('');
+			});
+		}
 	});
 
-	if (!projectInfo) {
+	if (!projectInfo || operatingSystem === undefined) {
 		return null;
 	}
 
 	let title = props.title || language('app-download-title');
 	let text = props.text || language('app-download-subtitle').replace("@@PROJECT_NAME@@", projectInfo.name);
 
+	// When the participant is on a mobile web browser, only offer the store that
+	// integrates with their device. On desktop (or when the OS can't be determined)
+	// show both. This only applies on the web platform; in the native app the whole
+	// widget is hidden by PlatformSpecificContent below.
+	let showAndroid = projectInfo.platforms.includes('Android') && operatingSystem !== 'iOS';
+	let showIOS = projectInfo.platforms.includes('iOS') && operatingSystem !== 'Android';
+
 	return (
 		<PlatformSpecificContent platforms={['Web']} previewDevicePlatform={props.previewDevicePlatform} innerRef={props.innerRef}>
 			<div className="mdhui-app-download">
@@ -47,12 +65,12 @@ export default function (props: AppDownloadProps) {
 						{text}
 					</div>
 					<div className="mdhui-app-download-links">
-						{projectInfo.platforms.includes('Android') &&
+						{showAndroid &&
 							<a target="_blank" className="mdhui-app-download-link" href="https://play.google.com/store/apps/details?id=com.careevolution.mydatahelps&hl=en_US&gl=US">
 								<img src={`https://appstorebadges.careevolutionapps.com/images/google/black/logo-${getCurrentLocale()}.svg`} alt={language('app-download-google-play-link-alt')} />
 							</a>
 						}
-						{projectInfo.platforms.includes('iOS') &&
+						{showIOS &&
 							<a target="_blank" className="mdhui-app-download-link" href="https://apps.apple.com/us/app/mydatahelps/id1286789190">
 								<img src={`https://appstorebadges.careevolutionapps.com/images/apple/black/logo-${getCurrentLocale()}.svg`} alt={language('app-download-app-store-link-alt')} />
 							</a>
@@ -62,4 +80,4 @@ export default function (props: AppDownloadProps) {
 			</div>
 		</PlatformSpecificContent>
 	);
-}
+}