feat: new jump in flow

src/components/Modal/DownloadModal.css

@@ -0,0 +1,45 @@
+.ui.modal.download-modal {
+  max-width: 520px;
+  position: relative;
+  text-align: center;
+  padding: 48px 80px;
+}
+
+.ui.modal.download-modal .dg.Title,
+.ui.modal.download-modal .dg.SubTitle,
+.ui.modal.download-modal .dg.Paragraph {
+  margin-top: 0;
+}
+
+.ui.modal.download-modal .dg.Title,
+.ui.modal.download-modal .dg.SubTitle {
+  font-size: 21px;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: 0.3px;
+  text-align: center;
+}
+
+.ui.modal.download-modal .dg.Paragraph {
+  font-size: 17px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.53;
+  letter-spacing: -0.2px;
+  text-align: center;
+}
+
+.ui.modal.download-modal .download-modal__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 14px;
+  cursor: pointer;
+}
+
+.ui.modal.download-modal .ui.button {
+  width: 100%;
+}

src/components/Modal/DownloadModal.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from "react"
+
+import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
+import Title from "decentraland-gatsby/dist/components/Text/Title"
+import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
+import TokenList from "decentraland-gatsby/dist/utils/dom/TokenList"
+import { Button } from "decentraland-ui/dist/components/Button/Button"
+import { Modal, ModalProps } from "decentraland-ui/dist/components/Modal/Modal"
+
+import ExplorerJumpinImage from "../../images/explorer-jumpin-modal.svg"
+import closeIcon from "../../images/popup-close.svg"
+
+import "./DownloadModal.css"
+
+export default function DownloadModal(props: ModalProps) {
+  const { onModalClick, onClose } = props
+  const l = useFormatMessage()
+
+  const handleClose = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (onClose) {
+        onClose(event, props)
+      }
+    },
+    [onClose, props]
+  )
+
+  return (
+    <Modal
+      {...props}
+      className={TokenList.join(["download-modal", props.className])}
+    >
+      <div className="download-modal__close" onClick={handleClose}>
+        <img src={closeIcon} width="14" height="14" />
+      </div>
+
+      <div>
+        <img src={ExplorerJumpinImage} alt="Explorer Jump In" />
+      </div>
+      <Title>{l(`components.modal.download.title`)}</Title>
+      <Paragraph>{l(`components.modal.download.description`)}</Paragraph>
+      <Button
+        primary
+        onClick={onModalClick}
+        className="jump-in-position__modal-button"
+      >
+        {l(`components.modal.download.button_label`)}
+      </Button>
+    </Modal>
+  )
+}

src/components/Place/PlaceCard/PlaceCard.tsx

@@ -1,22 +1,18 @@
-import React, { useCallback, useContext, useMemo } from "react"
+import React, { useContext, useMemo } from "react"
 
 import { withPrefix } from "gatsby"
 
 import ImgFixed from "decentraland-gatsby/dist/components/Image/ImgFixed"
 import useTrackContext from "decentraland-gatsby/dist/context/Track/useTrackContext"
-import useTrackLinkContext from "decentraland-gatsby/dist/context/Track/useTrackLinkContext"
 import { Link } from "decentraland-gatsby/dist/plugins/intl"
 import { navigate } from "decentraland-gatsby/dist/plugins/intl/utils"
 import TokenList from "decentraland-gatsby/dist/utils/dom/TokenList"
 import { Card } from "decentraland-ui/dist/components/Card/Card"
 
 import { TrackingPlacesSearchContext } from "../../../context/TrackingContext"
 import { AggregatePlaceAttributes } from "../../../entities/Place/types"
-import { explorerUrl } from "../../../entities/Place/utils"
 import locations from "../../../modules/locations"
 import { SegmentPlace } from "../../../modules/segment"
-import FavoriteButton from "../../Button/FavoriteButton"
-import JumpInPositionButton from "../../Button/JumpInPositionButton"
 import UserCount from "../../Label/UserCount/UserCount"
 import UserLikePercentage from "../../Label/UserLikePercentage/UserLikePercentage"
 import UserPreviewCount from "../../Label/UserPreviewCount/UserPreviewCount"
@@ -25,41 +21,17 @@ import "./PlaceCard.css"
 
 export type PlaceCardProps = {
   place?: AggregatePlaceAttributes
-  onClickFavorite?: (
-    e: React.MouseEvent<HTMLButtonElement>,
-    place: AggregatePlaceAttributes
-  ) => void
-  dataPlace?: SegmentPlace
   loading?: boolean
-  loadingFavorites?: boolean
   positionWithinList?: number
 }
 
 export default React.memo(function PlaceCard(props: PlaceCardProps) {
   const track = useTrackContext()
 
-  const {
-    place,
-    loading,
-    loadingFavorites,
-    onClickFavorite,
-    dataPlace,
-    positionWithinList,
-  } = props
+  const { place, loading, positionWithinList } = props
 
   const [trackingId] = useContext(TrackingPlacesSearchContext)
 
-  const handleClickFavorite = useCallback(
-    (e: React.MouseEvent<any>) => {
-      e.stopPropagation()
-      e.preventDefault()
-      if (onClickFavorite && place) {
-        onClickFavorite(e, place)
-      }
-    },
-    [place, onClickFavorite]
-  )
-
   const href = useMemo(() => {
     if (place && !place.world) {
       return locations.place(place.base_position)
@@ -68,8 +40,6 @@ export default React.memo(function PlaceCard(props: PlaceCardProps) {
     }
   }, [place])
 
-  const placerUrl = useMemo(() => place && explorerUrl(place), [place])
-
   const handleClickCard = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
     track(SegmentPlace.PlaceCardClick, {
@@ -81,8 +51,6 @@ export default React.memo(function PlaceCard(props: PlaceCardProps) {
     href && navigate(href)
   }
 
-  const handleJumpInTrack = useTrackLinkContext()
-
   return (
     <Card
       as="div"
@@ -125,26 +93,6 @@ export default React.memo(function PlaceCard(props: PlaceCardProps) {
         >
           {place?.contact_name || " "}
         </Card.Meta>
-        {false && (
-          /* hidden for now */
-          <div className="place-card__button-container">
-            <JumpInPositionButton
-              href={placerUrl}
-              loading={loading}
-              onClick={handleJumpInTrack}
-              data-event={SegmentPlace.JumpIn}
-              data-place-id={place?.id}
-              data-place={dataPlace}
-              data-trackingId={trackingId}
-            />
-            <FavoriteButton
-              active={!!place?.user_favorite}
-              onClick={handleClickFavorite}
-              loading={loading || loadingFavorites}
-              dataPlace={dataPlace}
-            />
-          </div>
-        )}
       </Card.Content>
     </Card>
   )

src/components/Place/PlaceDescription/PlaceDescription.tsx

@@ -1,18 +1,21 @@
-import React, { useContext } from "react"
+import React, { useCallback, useContext, useState } from "react"
 
-import useTrackLinkContext from "decentraland-gatsby/dist/context/Track/useTrackLinkContext"
+import useTrackContext from "decentraland-gatsby/dist/context/Track/useTrackContext"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import TokenList from "decentraland-gatsby/dist/utils/dom/TokenList"
+import env from "decentraland-gatsby/dist/utils/env"
 
 import { TrackingPlacesSearchContext } from "../../../context/TrackingContext"
 import { AggregatePlaceAttributes } from "../../../entities/Place/types"
-import { explorerUrl } from "../../../entities/Place/utils"
+import { launchDesktopApp } from "../../../modules/desktop"
 import { SegmentPlace } from "../../../modules/segment"
+import { placeClientOptions } from "../../../modules/utils"
 import { getImageUrl } from "../../../utils/image"
 import FavoriteBox from "../../Button/FavoriteBox"
 import JumpInPositionButton from "../../Button/JumpInPositionButton"
 import ShareBox from "../../Button/ShareBox"
 import { Likes } from "../../Label/Likes/Likes"
+import DownloadModal from "../../Modal/DownloadModal"
 
 import "./PlaceDescription.css"
 
@@ -45,11 +48,47 @@ export default React.memo(function PlaceDescription(
     loadingFavorite,
   } = props
   const l = useFormatMessage()
-  const placerUrl = explorerUrl(place)
+  const [trackingId] = useContext(TrackingPlacesSearchContext)
 
-  const handleJumpInTrack = useTrackLinkContext()
+  const track = useTrackContext()
+  const [showModal, setShowModal] = useState(false)
 
-  const [trackingId] = useContext(TrackingPlacesSearchContext)
+  let hasDecentralandLauncher: null | boolean = null
+
+  const handleClick = useCallback(
+    async function (e: React.MouseEvent<HTMLButtonElement>) {
+      e.stopPropagation()
+      e.preventDefault()
+      if (event) {
+        hasDecentralandLauncher = await launchDesktopApp(
+          placeClientOptions(place)
+        )
+
+        !hasDecentralandLauncher && setShowModal(true)
+      }
+
+      track(SegmentPlace.JumpIn, {
+        placeId: place?.id,
+        place: dataPlace,
+        trackingId: trackingId,
+        has_laucher: !!hasDecentralandLauncher,
+      })
+    },
+    [place, track, trackingId]
+  )
+
+  const handleModalClick = useCallback(
+    async function (e: React.MouseEvent<HTMLButtonElement>) {
+      e.stopPropagation()
+      e.preventDefault()
+
+      window.open(
+        env("DECENTRALAND_DOWNLOAD_URL", "https://decentraland.org/download"),
+        "_blank"
+      )
+    },
+    [track, hasDecentralandLauncher]
+  )
 
   return (
     <div
@@ -97,15 +136,7 @@ export default React.memo(function PlaceDescription(
                 }}
               />
             )}
-            <JumpInPositionButton
-              href={placerUrl}
-              loading={loading}
-              onClick={handleJumpInTrack}
-              data-event={SegmentPlace.JumpIn}
-              data-place-id={place?.id}
-              data-place={dataPlace}
-              data-trackingId={trackingId}
-            />
+            <JumpInPositionButton loading={loading} onClick={handleClick} />
             <div className="place-description__box-wrapper">
               <ShareBox onClick={onClickShare} loading={loading} />
               <FavoriteBox
@@ -118,6 +149,11 @@ export default React.memo(function PlaceDescription(
           </div>
         </div>
       </div>
+      <DownloadModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+        onModalClick={handleModalClick}
+      />
     </div>
   )
 })