feat: add platform-aware MobileDownloadActions for iOS/Android

src/components/MobileDownload/GooglePlayIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+const GooglePlayIcon = React.memo(function GooglePlayIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 36 39">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 5.87517C0.000139012 1.37273 4.86257 -1.45156 8.77344 0.779467L32.0537 14.0597C35.9993 16.3109 35.9992 21.9998 32.0537 24.2511L8.77344 37.5314C4.86264 39.7624 0.000314321 36.939 0 32.4367V5.87517ZM18.8994 23.9982C17.7222 22.8066 15.7972 22.8095 14.624 24.0051L5.16309 33.6486C4.92863 33.8876 4.65324 34.0413 4.36621 34.1213C5.04916 34.7252 6.08227 34.9111 6.98438 34.3967L21.1738 26.3L18.8994 23.9982ZM3.61035 30.1037L12.1611 21.3771C13.3073 20.2073 13.3033 18.3342 12.1523 17.1691L3.61035 8.52361V30.1037ZM21.3564 17.1447C20.2087 18.3144 20.2115 20.1889 21.3633 21.3547L24.1475 24.172C24.2384 24.2641 24.3167 24.3641 24.3838 24.4689L30.2637 21.1154C31.7814 20.2496 31.7814 18.0613 30.2637 17.1955L24.5205 13.9191L21.3564 17.1447ZM6.98438 3.91521C6.07162 3.3946 5.02441 3.59012 4.3418 4.21111C4.47166 4.28824 4.59494 4.38184 4.70605 4.49431L14.6113 14.5207C15.7891 15.7126 17.7148 15.7086 18.8877 14.5119L21.2793 12.0705L6.98438 3.91521Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  )
+})
+
+export { GooglePlayIcon }

src/components/MobileDownload/MobileDownloadActions.i18n.ts

@@ -0,0 +1,10 @@
+import { MobileDownloadActionsI18N } from './MobileDownloadActions.types'
+
+const i18n: MobileDownloadActionsI18N = {
+  get_it_on: 'GET IT ON',
+  google_play: 'Google Play',
+  send_yourself_the_link: 'SEND YOURSELF THE LINK',
+  coming_soon: 'Coming Soon'
+}
+
+export { i18n }

src/components/MobileDownload/MobileDownloadActions.styled.ts

@@ -0,0 +1,85 @@
+import styled from '@emotion/styled'
+import { Box, Button, Link } from '@mui/material'
+
+const ActionsContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  gap: theme.spacing(1)
+}))
+
+const GooglePlayButton = styled(Link)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textDecoration: 'none',
+  gap: theme.spacing(1),
+  height: 64,
+  width: '100%',
+  borderRadius: 12,
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  fontSize: 22,
+  fontWeight: 700,
+  boxShadow: theme.shadows[4],
+  padding: '12px 20px',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: theme.palette.primary.dark,
+    textDecoration: 'none'
+  },
+  '& svg': {
+    fontSize: 36
+  }
+}))
+
+const GooglePlayButtonLabel = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'left',
+  lineHeight: 1.2,
+  '& span': {
+    display: 'block',
+    fontSize: 11,
+    fontWeight: 400,
+    lineHeight: 1
+  }
+})
+
+const SendLinkButton = styled(Button)(({ theme }) => ({
+  height: 46,
+  width: '100%',
+  borderRadius: 12,
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  textTransform: 'uppercase',
+  fontSize: theme.typography.pxToRem(15),
+  fontWeight: 700,
+  letterSpacing: '0.03em',
+  boxShadow: theme.shadows[4],
+  padding: '0 20px',
+  gap: theme.spacing(1),
+  '&:hover, &:active, &:focus': {
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText
+  }
+}))
+
+const ComingSoonContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 46,
+  gap: theme.spacing(1),
+  color: theme.palette.text.primary,
+  fontSize: 16,
+  fontWeight: 500,
+  lineHeight: 1,
+  '& svg': {
+    fontSize: 24,
+    marginTop: -3
+  }
+}))
+
+export { ActionsContainer, GooglePlayButton, GooglePlayButtonLabel, SendLinkButton, ComingSoonContainer }

src/components/MobileDownload/MobileDownloadActions.tsx

@@ -0,0 +1,63 @@
+import React, { useCallback } from 'react'
+import ShareIcon from '@mui/icons-material/Share'
+import { GooglePlayIcon } from './GooglePlayIcon'
+import { i18n as defaultI18n } from './MobileDownloadActions.i18n'
+import { config } from '../../config'
+import { AppleIcon } from '../Icon/AppleIcon'
+import { MobileDownloadActionsProps } from './MobileDownloadActions.types'
+import {
+  ActionsContainer,
+  ComingSoonContainer,
+  GooglePlayButton,
+  GooglePlayButtonLabel,
+  SendLinkButton
+} from './MobileDownloadActions.styled'
+
+const MobileDownloadActions = React.memo(function MobileDownloadActions(props: MobileDownloadActionsProps) {
+  const { platform, androidStoreUrl = config.get('ANDROID_STORE_URL'), onCopyLink, i18n: i18nProp } = props
+  const texts = { ...defaultI18n, ...i18nProp }
+
+  const handleSendLink = useCallback(async () => {
+    const url = window.location.href
+    try {
+      if (navigator.share) {
+        await navigator.share({ url })
+      } else {
+        await navigator.clipboard.writeText(url)
+      }
+      onCopyLink?.()
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') return
+      throw error
+    }
+  }, [onCopyLink])
+
+  if (platform === 'android') {
+    return (
+      <ActionsContainer>
+        <GooglePlayButton href={androidStoreUrl} target="_blank" rel="noopener noreferrer">
+          <GooglePlayIcon />
+          <GooglePlayButtonLabel>
+            <span>{texts.get_it_on}</span>
+            {texts.google_play}
+          </GooglePlayButtonLabel>
+        </GooglePlayButton>
+      </ActionsContainer>
+    )
+  }
+
+  return (
+    <ActionsContainer>
+      <SendLinkButton variant="contained" onClick={handleSendLink}>
+        {texts.send_yourself_the_link}
+        <ShareIcon />
+      </SendLinkButton>
+      <ComingSoonContainer>
+        <AppleIcon />
+        <span>{texts.coming_soon}</span>
+      </ComingSoonContainer>
+    </ActionsContainer>
+  )
+})
+
+export { MobileDownloadActions }

src/components/MobileDownload/MobileDownloadActions.types.ts

@@ -0,0 +1,17 @@
+type MobilePlatform = 'android' | 'ios'
+
+type MobileDownloadActionsI18N = {
+  get_it_on: string
+  google_play: string
+  send_yourself_the_link: string
+  coming_soon: string
+}
+
+type MobileDownloadActionsProps = {
+  platform: MobilePlatform
+  androidStoreUrl?: string
+  onCopyLink?: () => void
+  i18n?: Partial<MobileDownloadActionsI18N>
+}
+
+export type { MobilePlatform, MobileDownloadActionsI18N, MobileDownloadActionsProps }

src/components/MobileDownload/index.ts

@@ -0,0 +1,3 @@
+export { MobileDownloadActions } from './MobileDownloadActions'
+export type { MobileDownloadActionsProps, MobileDownloadActionsI18N, MobilePlatform } from './MobileDownloadActions.types'
+export { GooglePlayIcon } from './GooglePlayIcon'