feat: Jump in item new flow

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": false,
   "eslint.validate": ["typescript"],
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": false
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
   }
 }

src/components/Button/AttendingButtons.tsx

@@ -4,6 +4,7 @@ import { withPrefix } from "gatsby"
 
 import { useLocation } from "@gatsbyjs/reach-router"
 import useTrackContext from "decentraland-gatsby/dist/context/Track/useTrackContext"
+import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
 import useAsyncTask from "decentraland-gatsby/dist/hooks/useAsyncTask"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import useTimeout from "decentraland-gatsby/dist/hooks/useTimeout"
@@ -14,17 +15,19 @@ import { Button } from "decentraland-ui/dist/components/Button/Button"
 import { useEventsContext } from "../../context/Event"
 import { SessionEventAttributes } from "../../entities/Event/types"
 import {
+  eventClientOptions,
   eventFacebookUrl,
-  eventTargetUrl,
   eventTwitterUrl,
 } from "../../entities/Event/utils"
 import facebookIcon from "../../images/icon-facebook.svg"
 import twitterIcon from "../../images/icon-twitter.svg"
 import closeIcon from "../../images/popup-close.svg"
 import primaryJumpInIcon from "../../images/primary-jump-in.svg"
 import shareIcon from "../../images/share.svg"
+import { launchDesktopApp } from "../../modules/desktop"
 import locations from "../../modules/locations"
 import { SegmentEvent } from "../../modules/segment"
+import { getReamls } from "../../modules/servers"
 import { Star } from "../Icon/Star"
 
 import "./AttendingButtons.css"
@@ -52,7 +55,6 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
     () => props.loading ?? state.modifying.has(event?.id || ""),
     [props.loading, state.modifying]
   )
-  const href = useMemo(() => event && eventTargetUrl(event), [event])
 
   const [sharing, share] = useAsyncTask(async () => {
     if (event) {
@@ -132,9 +134,31 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
     [setFallbackShare]
   )
 
-  const handleStopPropagation = useCallback((e: React.MouseEvent<any>) => {
-    e.stopPropagation()
-  }, [])
+  const [servers] = useAsyncMemo(getReamls)
+
+  const handleJumpIn = useCallback(
+    async function (e: React.MouseEvent<HTMLButtonElement>) {
+      e.stopPropagation()
+      e.preventDefault()
+      let hasDecentralandLauncher: null | boolean = null
+      if (!event) {
+        return
+      }
+      hasDecentralandLauncher = await launchDesktopApp(
+        eventClientOptions(event, servers)
+      )
+
+      track(SegmentEvent.JumpIn, {
+        eventId: event?.id || null,
+        trending: event?.trending || false,
+        highlighted: event?.highlighted || false,
+        world: event?.world || false,
+        world_name: event?.world ? event.server : false,
+        has_laucher: !!hasDecentralandLauncher,
+      })
+    },
+    [event, track, servers]
+  )
 
   const handleAttend = useCallback(
     (e: React.MouseEvent<any>) => {
@@ -183,10 +207,8 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
           primary
           size="small"
           disabled={loading || sharing || !approved}
-          onClick={handleStopPropagation}
+          onClick={handleJumpIn}
           className="fluid"
-          href={href ? withPrefix(href) : href}
-          target="_blank"
           style={{
             display: "flex",
             justifyContent: "center",

src/components/Button/JumpInPosition.tsx

@@ -1,14 +1,24 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useState } from "react"
 
+import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
+import Title from "decentraland-gatsby/dist/components/Text/Title"
 import useTrackContext from "decentraland-gatsby/dist/context/Track/useTrackContext"
+import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
+import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { Link } from "decentraland-gatsby/dist/plugins/intl"
 import TokenList from "decentraland-gatsby/dist/utils/dom/TokenList"
+import env from "decentraland-gatsby/dist/utils/env"
+import { Button } from "decentraland-ui/dist/components/Button/Button"
 
 import { EventAttributes } from "../../entities/Event/types"
-import { eventTargetUrl } from "../../entities/Event/utils"
+import { eventClientOptions } from "../../entities/Event/utils"
+import ExplorerJumpinImage from "../../images/explorer-jumpin-modal.svg"
 import primaryJumpInIcon from "../../images/primary-jump-in.svg"
 import secondaryPinIcon from "../../images/secondary-pin-small.svg"
+import { launchDesktopApp } from "../../modules/desktop"
 import { SegmentEvent } from "../../modules/segment"
+import { getReamls } from "../../modules/servers"
+import ConfirmModal from "../Modal/ConfirmModal"
 
 import "./JumpInPosition.css"
 
@@ -19,55 +29,124 @@ export type JumpInPositionProps = React.HTMLProps<HTMLAnchorElement> & {
 
 export default function JumpInPosition({
   event,
-  href,
   compact,
   ...props
 }: JumpInPositionProps) {
   const track = useTrackContext()
-  const to = href || (event && eventTargetUrl(event)) || "#"
-  const isPosition = !href && !!event
+  const l = useFormatMessage()
+  const [modalText, setModalText] = useState<
+    | {
+        title: string
+        description: string
+        buttonLabel: string
+      }
+    | false
+  >(false)
+  const [servers] = useAsyncMemo(getReamls)
+
+  const isPosition = !!event
   const position = isPosition ? event && `${event.x},${event.y}` : "HTTP"
 
+  let hasDecentralandLauncher: null | boolean = null
+
   const handleClick = useCallback(
-    function (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+    async function (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
       e.stopPropagation()
+      e.preventDefault()
+      if (event) {
+        hasDecentralandLauncher = await launchDesktopApp(
+          eventClientOptions(event, servers)
+        )
 
-      if (props.onClick) {
-        props.onClick(e)
+        setModalText({
+          title: l(
+            `components.modal.join_in_modal.${
+              hasDecentralandLauncher ? "relunch" : "download"
+            }.title`
+          ),
+          description: l(
+            `components.modal.join_in_modal.${
+              hasDecentralandLauncher ? "relunch" : "download"
+            }.description`
+          ),
+          buttonLabel: l(
+            `components.modal.join_in_modal.${
+              hasDecentralandLauncher ? "relunch" : "download"
+            }.button_label`
+          ),
+        })
       }
 
-      if (!e.defaultPrevented) {
+      track(SegmentEvent.JumpIn, {
+        eventId: event?.id || null,
+        trending: event?.trending || false,
+        highlighted: event?.highlighted || false,
+        world: event?.world || false,
+        world_name: event?.world ? event.server : false,
+        has_laucher: !!hasDecentralandLauncher,
+      })
+    },
+    [event, track, servers]
+  )
+
+  const handleModalClick = useCallback(
+    async function (e: React.MouseEvent<HTMLButtonElement>) {
+      e.stopPropagation()
+      e.preventDefault()
+      if (event && hasDecentralandLauncher) {
+        await launchDesktopApp(eventClientOptions(event, servers))
         track(SegmentEvent.JumpIn, {
           eventId: event?.id || null,
           trending: event?.trending || false,
           highlighted: event?.highlighted || false,
           world: event?.world || false,
           world_name: event?.world ? event.server : false,
+          has_laucher: !!hasDecentralandLauncher,
         })
+      } else if (event && !hasDecentralandLauncher) {
+        window.open(
+          env("DECENTRALAND_DOWNLOAD_URL", "https://decentraland.org/download"),
+          "_blank"
+        )
       }
     },
-    [event, track]
+    [event, track, servers, hasDecentralandLauncher]
   )
 
   return (
-    <Link
-      {...props}
-      target="_blank"
-      onClick={handleClick}
-      href={to}
-      className={TokenList.join([
-        "jump-in-position",
-        compact && "jump-in-position--compact",
-        props.className,
-      ])}
-    >
-      <span className="jump-in-position__position">
-        {isPosition && <img src={secondaryPinIcon} width="16" height="16" />}
-        <span>{event?.world ? event.server : position}</span>
-      </span>
-      <span className="jump-in-position__icon">
-        <img src={primaryJumpInIcon} width={16} height={16} />
-      </span>
-    </Link>
+    <>
+      <Link
+        {...props}
+        target="_blank"
+        onClick={handleClick}
+        className={TokenList.join([
+          "jump-in-position",
+          compact && "jump-in-position--compact",
+          props.className,
+        ])}
+      >
+        <span className="jump-in-position__position">
+          {isPosition && <img src={secondaryPinIcon} width="16" height="16" />}
+          <span>{event?.world ? event.server : position}</span>
+        </span>
+        <span className="jump-in-position__icon">
+          <img src={primaryJumpInIcon} width={16} height={16} />
+        </span>
+      </Link>
+      <ConfirmModal open={!!modalText} onClose={() => setModalText(false)}>
+        <div>
+          <img src={ExplorerJumpinImage} alt="Explorer Jump In" />
+        </div>
+        <Title>{modalText && modalText.title}</Title>
+        <Paragraph>{modalText && modalText.description}</Paragraph>
+        <Button
+          primary
+          onClick={handleModalClick}
+          style={{ marginTop: "28px" }}
+        >
+          {modalText && modalText.buttonLabel}
+        </Button>
+      </ConfirmModal>
+    </>
   )
 }

src/components/Event/EventCardMini/EventCardMini.tsx

@@ -42,11 +42,6 @@ export default React.memo(function EventCardMini(props: EventCardMiniProps) {
     [event, onClick]
   )
 
-  const handleJumpIn = useCallback(
-    (e: React.MouseEvent<any>) => e.stopPropagation(),
-    []
-  )
-
   return (
     <Card
       className={TokenList.join([
@@ -57,9 +52,7 @@ export default React.memo(function EventCardMini(props: EventCardMiniProps) {
       href={href ? withPrefix(href) : href}
       onClick={handleClick}
     >
-      {event && !props.loading && (
-        <JumpInPosition event={event} compact onClick={handleJumpIn} />
-      )}
+      {event && !props.loading && <JumpInPosition event={event} compact />}
       <div style={{ display: "flex" }}>
         <div className="event-card-mini__cover">
           <ImgFixed src={event?.image || ""} dimension="square" />

src/components/Event/EventModal/EventDetail/EventDetail.tsx

@@ -19,6 +19,7 @@ import { InfoTooltip } from "decentraland-ui/dist/components/InfoTooltip"
 import Icon from "semantic-ui-react/dist/commonjs/elements/Icon"
 import isEmail from "validator/lib/isEmail"
 
+import EventDateDetail from "./EventDateDetail"
 import { useProfileSettingsContext } from "../../../../context/ProfileSetting"
 import { SessionEventAttributes } from "../../../../entities/Event/types"
 import { profileSiteUrl } from "../../../../entities/Event/utils"
@@ -38,7 +39,6 @@ import AttendingButtons from "../../../Button/AttendingButtons"
 import JumpInButton from "../../../Button/JumpInPosition"
 import MenuIcon, { MenuIconItem } from "../../../MenuIcon/MenuIcon"
 import EventSection from "../../EventSection"
-import EventDateDetail from "./EventDateDetail"
 
 import "./EventDetail.css"
 

src/config/dev.json

@@ -1,6 +1,7 @@
 {
   "GATSBY_CHAIN_ID": "1,137,11155111,80002",
   "GATSBY_DECENTRALAND_URL": "https://play.decentraland.zone",
+  "GATSBY_DECENTRALAND_DOWNLOAD_URL": "https://decentraland.zone/download/",
   "GATSBY_EVENTS_API_URL": "https://events.decentraland.zone/api",
   "GATSBY_EVENTS_BASE_URL": "https://decentraland.zone/events",
   "GATSBY_LAND_URL": "https://api.decentraland.zone",

src/config/local.json

@@ -1,6 +1,7 @@
 {
   "GATSBY_CHAIN_ID": "1,137",
   "GATSBY_DECENTRALAND_URL": "https://play.decentraland.org",
+  "GATSBY_DECENTRALAND_DOWNLOAD_URL": "https://decentraland.org/download/",
   "GATSBY_EVENTS_API_URL": "/api",
   "GATSBY_EVENTS_BASE_URL": "https://localhost:8000",
   "GATSBY_LAND_URL": "https://api.decentraland.org",

src/config/prod.json

@@ -1,6 +1,7 @@
 {
   "GATSBY_CHAIN_ID": "1,137",
   "GATSBY_DECENTRALAND_URL": "https://play.decentraland.org",
+  "GATSBY_DECENTRALAND_DOWNLOAD_URL": "https://decentraland.org/download/",
   "GATSBY_EVENTS_API_URL": "https://events.decentraland.org/api",
   "GATSBY_EVENTS_BASE_URL": "https://events.decentraland.org",
   "GATSBY_LAND_URL": "https://api.decentraland.org",