feat: suggest downloading the mobile app

package.json

@@ -20,7 +20,7 @@
     "core-js": "^3.22.2",
     "cssnano": "^5.0.10",
     "dcl-catalyst-client": "^21.5.0",
-    "decentraland-gatsby": "^8.1.0",
+    "decentraland-gatsby": "^8.3.0",
     "es6-shim": "^0.35.6",
     "express-fileupload": "^1.2.1",
     "gatsby": "^4.23.0",

src/components/Button/AttendingButtons.tsx

@@ -5,6 +5,7 @@ import { withPrefix } from "gatsby"
 import { useLocation } from "@gatsbyjs/reach-router"
 import DownloadModal from "decentraland-gatsby/dist/components/Modal/DownloadModal"
 import useTrackContext from "decentraland-gatsby/dist/context/Track/useTrackContext"
+import useAdvancedUserAgentData from "decentraland-gatsby/dist/hooks/useAdvancedUserAgentData"
 import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
 import useAsyncTask from "decentraland-gatsby/dist/hooks/useAsyncTask"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
@@ -31,6 +32,7 @@ import locations from "../../modules/locations"
 import { SegmentEvent } from "../../modules/segment"
 import { getRealms } from "../../modules/servers"
 import { Star } from "../Icon/Star"
+import { MobileDownloadModal } from "../MobileDownloadModal/MobileDownloadModal"
 
 import "./AttendingButtons.css"
 
@@ -53,6 +55,9 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
   const [, state] = useEventsContext()
   const track = useTrackContext()
   const l = useFormatMessage()
+  const [, userAgentData] = useAdvancedUserAgentData()
+  const isAndroidDevice =
+    (userAgentData?.mobile ?? false) && userAgentData?.os?.name === "Android"
   const approved = useMemo(() => !event || event.approved, [event])
   const loading = useMemo(
     () => props.loading ?? state.modifying.has(event?.id || ""),
@@ -279,14 +284,21 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
           <img src={shareIcon} width="14" height="14" />
         </Button>
       )}
-      <DownloadModal
-        open={showModal}
-        title={l("components.modal.download.title")}
-        description={l("components.modal.download.description")}
-        buttonLabel={l("components.modal.download.button_label")}
-        onClose={() => setShowModal(false)}
-        onDownloadClick={handleModalClick}
-      />
+      {isAndroidDevice ? (
+        <MobileDownloadModal
+          open={showModal}
+          onClose={() => setShowModal(false)}
+        />
+      ) : (
+        <DownloadModal
+          open={showModal}
+          title={l("components.modal.download.title")}
+          description={l("components.modal.download.description")}
+          buttonLabel={l("components.modal.download.button_label")}
+          onClose={() => setShowModal(false)}
+          onDownloadClick={handleModalClick}
+        />
+      )}
     </div>
   )
 }

src/components/Button/JumpInPosition.tsx

@@ -11,6 +11,7 @@ import { eventClientOptions } from "../../entities/Event/utils"
 import locations from "../../modules/locations"
 import { SegmentEvent } from "../../modules/segment"
 import { getRealms } from "../../modules/servers"
+import { MobileJumpInWrapper } from "../MobileDownloadModal/MobileDownloadModal"
 
 export type JumpInPositionProps = React.HTMLProps<HTMLAnchorElement> & {
   event?: EventAttributes
@@ -25,7 +26,6 @@ export default function JumpInPosition({
   const track = useTrackContext()
   const l = useFormatMessage()
   const [servers] = useAsyncMemo(getRealms)
-
   const isPosition = !!event
   const position = isPosition ? event && `${event.x},${event.y}` : "HTTP"
   const displayPosition = (event?.world ? event.server : position) || undefined
@@ -42,19 +42,25 @@ export default function JumpInPosition({
   }
 
   return (
-    <JumpIn
-      variant="link"
-      position={displayPosition}
-      compact={compact}
+    <MobileJumpInWrapper
       desktopAppOptions={event ? eventClientOptions(event, servers) : undefined}
-      downloadUrl={event ? locations.download(event.id) : undefined}
-      onTrack={handleTrack}
-      modalProps={{
-        title: l("components.modal.download.title"),
-        description: l("components.modal.download.description"),
-        buttonLabel: l("components.modal.download.button_label"),
-      }}
-      {...props}
-    />
+    >
+      <JumpIn
+        variant="link"
+        position={displayPosition}
+        compact={compact}
+        desktopAppOptions={
+          event ? eventClientOptions(event, servers) : undefined
+        }
+        downloadUrl={event ? locations.download(event.id) : undefined}
+        onTrack={handleTrack}
+        modalProps={{
+          title: l("components.modal.download.title"),
+          description: l("components.modal.download.description"),
+          buttonLabel: l("components.modal.download.button_label"),
+        }}
+        {...props}
+      />
+    </MobileJumpInWrapper>
   )
 }

src/components/MobileDownloadModal/MobileDownloadModal.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useState } from "react"
+
+import useAdvancedUserAgentData from "decentraland-gatsby/dist/hooks/useAdvancedUserAgentData"
+import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
+import { ExplorerJumpIn } from "decentraland-ui2/dist/components/Modal/DownloadModal/ExplorerJumpIn"
+import {
+  ModalContent,
+  ModalDescription,
+  ModalImageContainer,
+  ModalTitle,
+} from "decentraland-ui2/dist/components/Modal/MobileDownloadModal/MobileDownloadModal.styled"
+import { Modal } from "decentraland-ui2/dist/components/Modal/Modal"
+
+import { launchDesktopApp, styled } from "decentraland-ui2"
+
+import { MobileStoreBadges } from "../MobileStoreBadges/MobileStoreBadges"
+
+export interface MobileDownloadModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export const MobileDownloadModal: React.FC<MobileDownloadModalProps> = ({
+  open,
+  onClose,
+}) => {
+  const l = useFormatMessage()
+
+  return (
+    <Modal open={open} size="tiny" onClose={onClose}>
+      <ModalContent>
+        <ModalImageContainer>
+          <ExplorerJumpIn />
+        </ModalImageContainer>
+        <ModalTitle variant="h2">
+          {l("components.modal.download.title")}
+        </ModalTitle>
+        <ModalDescription variant="body1">
+          {l("components.modal.mobile_download.description")}
+        </ModalDescription>
+        <MobileStoreBadges size="large" />
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const CaptureContainer = styled("div")({
+  display: "contents",
+})
+
+export function MobileJumpInWrapper({
+  children,
+  desktopAppOptions,
+}: {
+  children: React.ReactNode
+  desktopAppOptions?: Parameters<typeof launchDesktopApp>[0]
+}) {
+  const [, userAgentData] = useAdvancedUserAgentData()
+  const isAndroid =
+    (userAgentData?.mobile ?? false) && userAgentData?.os?.name === "Android"
+  const [showModal, setShowModal] = useState(false)
+
+  const handleCapture = useCallback(
+    async (e: React.MouseEvent) => {
+      if (isAndroid) {
+        e.stopPropagation()
+        e.preventDefault()
+        // The mobile app also handles decentraland:// deep links
+        const hasLauncher = await launchDesktopApp(desktopAppOptions ?? {})
+        if (!hasLauncher) {
+          setShowModal(true)
+        }
+      }
+    },
+    [isAndroid, desktopAppOptions]
+  )
+
+  return (
+    <>
+      <CaptureContainer onClickCapture={handleCapture}>
+        {children}
+      </CaptureContainer>
+      <MobileDownloadModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+      />
+    </>
+  )
+}

src/components/MobileStoreBadges/MobileStoreBadges.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+
+import { GooglePlayBadge } from "decentraland-ui2/dist/components/MobileStoreBadges/GooglePlayBadge"
+import {
+  StoreBadgeIconWrapper,
+  StoreBadgeLink,
+  StoreBadgesContainer,
+} from "decentraland-ui2/dist/components/MobileStoreBadges/MobileStoreBadges.styled"
+import { config } from "decentraland-ui2/dist/config"
+
+export interface MobileStoreBadgesProps {
+  size?: "small" | "large"
+}
+
+const MobileStoreBadges = React.memo(
+  ({ size = "small" }: MobileStoreBadgesProps) => {
+    return (
+      <StoreBadgesContainer>
+        <StoreBadgeLink
+          href={config.get("ANDROID_STORE_URL")}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <StoreBadgeIconWrapper badgeSize={size}>
+            <GooglePlayBadge />
+          </StoreBadgeIconWrapper>
+        </StoreBadgeLink>
+      </StoreBadgesContainer>
+    )
+  }
+)
+
+export { MobileStoreBadges }

src/intl/en.json

@@ -340,6 +340,9 @@
         "title": "Download Decentraland to Jump in.",
         "description": "Download the all-new Decentraland and come back to this page to jump straight into this event.",
         "button_label": "Download"
+      },
+      "mobile_download": {
+        "description": "To Jump in, you'll need to download the Decentraland app."
       }
     }
   },