feat: suggest downloading the mobile app

package.json

@@ -19,7 +19,7 @@
     "aws-sdk": "^2.1002.0",
     "core-js": "^3.22.2",
     "cssnano": "^5.0.10",
-    "decentraland-gatsby": "^8.1.0",
+    "decentraland-gatsby": "^8.3.0",
     "decentraland-ui2": "^1.3.4",
     "es6-shim": "^0.35.8",
     "express-fileupload": "^1.2.1",

src/components/Button/JumpInPositionButton.tsx

@@ -7,6 +7,7 @@ import { JumpIn, JumpInProps } from "decentraland-ui2"
 
 import { PlaceAttributes } from "../../entities/Place/types"
 import { placeClientOptions } from "../../modules/utils"
+import { MobileJumpInWrapper } from "../MobileDownloadModal/MobileDownloadModal"
 
 export default React.memo(function JumpInPositionButton({
   loading,
@@ -16,28 +17,29 @@ export default React.memo(function JumpInPositionButton({
   place: Pick<PlaceAttributes, "base_position" | "world" | "world_name">
 }) {
   const l = useFormatMessage()
-
   const desktopAppOptions = useMemo(
     () => place && placeClientOptions(place),
     [place]
   )
 
   return (
-    <JumpIn
-      variant="button"
-      loading={loading}
-      buttonText={l("components.button.jump_in")}
-      desktopAppOptions={desktopAppOptions}
-      downloadUrl={env(
-        "DECENTRALAND_DOWNLOAD_URL",
-        "https://decentraland.org/download"
-      )}
-      onTrack={onTrack}
-      modalProps={{
-        title: l("components.modal.download.title"),
-        description: l("components.modal.download.description"),
-        buttonLabel: l("components.modal.download.button_label"),
-      }}
-    />
+    <MobileJumpInWrapper desktopAppOptions={desktopAppOptions}>
+      <JumpIn
+        variant="button"
+        loading={loading}
+        buttonText={l("components.button.jump_in")}
+        desktopAppOptions={desktopAppOptions}
+        downloadUrl={env(
+          "DECENTRALAND_DOWNLOAD_URL",
+          "https://decentraland.org/download"
+        )}
+        onTrack={onTrack}
+        modalProps={{
+          title: l("components.modal.download.title"),
+          description: l("components.modal.download.description"),
+          buttonLabel: l("components.modal.download.button_label"),
+        }}
+      />
+    </MobileJumpInWrapper>
   )
 })

src/components/MobileDownloadModal/MobileDownloadModal.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useState } from "react"
+
+import { useAdvancedUserAgentData } from "@dcl/hooks"
+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/components/Place/PlaceFeatured/PlaceFeatured.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from "react"
 
 import { withPrefix } from "gatsby"
 
+import { useAdvancedUserAgentData } from "@dcl/hooks"
 import DownloadModal from "decentraland-gatsby/dist/components/Modal/DownloadModal"
 import useTrackContext from "decentraland-gatsby/dist/context/Track/useTrackContext"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
@@ -19,6 +20,7 @@ import { SegmentPlace } from "../../../modules/segment"
 import { placeClientOptions } from "../../../modules/utils"
 import { getImageUrl } from "../../../utils/image"
 import UserCount from "../../Label/UserCount/UserCount"
+import { MobileDownloadModal } from "../../MobileDownloadModal/MobileDownloadModal"
 
 import "./PlaceFeatured.css"
 
@@ -31,6 +33,9 @@ export default React.memo(function PlaceFeatured(props: PlaceFeaturedProps) {
   const { item, loading } = props
 
   const l = useFormatMessage()
+  const [, userAgentData] = useAdvancedUserAgentData()
+  const isAndroidDevice =
+    (userAgentData?.mobile ?? false) && userAgentData?.os?.name === "Android"
 
   const placeDetailUrl = useMemo(() => {
     if (item.world) return locations.world(item.world_name!)
@@ -112,14 +117,21 @@ export default React.memo(function PlaceFeatured(props: PlaceFeaturedProps) {
           </Button>
         </Hero.Actions>
       </Hero>
-      <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/intl/en.json

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