feat: add new component DownloadModal and remove relauncher modal

decentraland · Oct 31, 2024 · ceb894e · ceb894e
1 parent f42f7eb
commit ceb894e
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 71 deletions.
diff --git a/src/components/Button/AttendingButtons.tsx b/src/components/Button/AttendingButtons.tsx
@@ -10,6 +10,7 @@ import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import useTimeout from "decentraland-gatsby/dist/hooks/useTimeout"
 import newPopupWindow from "decentraland-gatsby/dist/utils/dom/newPopupWindow"
 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 { useEventsContext } from "../../context/Event"
@@ -29,6 +30,7 @@ import locations from "../../modules/locations"
 import { SegmentEvent } from "../../modules/segment"
 import { getReamls } from "../../modules/servers"
 import { Star } from "../Icon/Star"
+import DownloadModal from "../Modal/DownloadModal"
 
 import "./AttendingButtons.css"
 
@@ -38,7 +40,8 @@ export type AttendingButtonsProps = {
 }
 
 export default function AttendingButtons(props: AttendingButtonsProps) {
-  const event = props.event
+  const { event } = props
+  const [showModal, setShowModal] = useState(false)
   const nextStartAt = useMemo(
     () =>
       new Date(event ? Date.parse(event.next_start_at.toString()) : Date.now()),
@@ -136,18 +139,22 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
 
   const [servers] = useAsyncMemo(getReamls)
 
+  let hasDecentralandLauncher: null | boolean = null
+
   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)
       )
 
+      !hasDecentralandLauncher && setShowModal(true)
+
       track(SegmentEvent.JumpIn, {
         eventId: event?.id || null,
         trending: event?.trending || false,
@@ -157,7 +164,7 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
         has_laucher: !!hasDecentralandLauncher,
       })
     },
-    [event, track, servers]
+    [event, track, servers, hasDecentralandLauncher]
   )
 
   const handleAttend = useCallback(
@@ -169,6 +176,20 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
     [event, state]
   )
 
+  const handleModalClick = useCallback(
+    async function (e: React.MouseEvent<HTMLButtonElement>) {
+      e.stopPropagation()
+      e.preventDefault()
+      if (event) {
+        window.open(
+          env("DECENTRALAND_DOWNLOAD_URL", "https://decentraland.org/download"),
+          "_blank"
+        )
+      }
+    },
+    [event, track, servers, hasDecentralandLauncher]
+  )
+
   return (
     <div className="attending-buttons">
       {fallbackShare && (
@@ -261,6 +282,11 @@ export default function AttendingButtons(props: AttendingButtonsProps) {
           <img src={shareIcon} width="14" height="14" />
         </Button>
       )}
+      <DownloadModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+        onModalClick={handleModalClick}
+      />
     </div>
   )
 }
diff --git a/src/components/Button/JumpInPosition.tsx b/src/components/Button/JumpInPosition.tsx
@@ -1,24 +1,19 @@
 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 { 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 DownloadModal from "../Modal/DownloadModal"
 
 import "./JumpInPosition.css"
 
@@ -33,15 +28,7 @@ export default function JumpInPosition({
   ...props
 }: JumpInPositionProps) {
   const track = useTrackContext()
-  const l = useFormatMessage()
-  const [modalText, setModalText] = useState<
-    | {
-        title: string
-        description: string
-        buttonLabel: string
-      }
-    | false
-  >(false)
+  const [showModal, setShowModal] = useState(false)
   const [servers] = useAsyncMemo(getReamls)
 
   const isPosition = !!event
@@ -58,23 +45,7 @@ export default function JumpInPosition({
           eventClientOptions(event, servers)
         )
 
-        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`
-          ),
-        })
+        !hasDecentralandLauncher && setShowModal(true)
       }
 
       track(SegmentEvent.JumpIn, {
@@ -93,17 +64,7 @@ export default function JumpInPosition({
     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) {
+      if (event) {
         window.open(
           env("DECENTRALAND_DOWNLOAD_URL", "https://decentraland.org/download"),
           "_blank"
@@ -133,20 +94,11 @@ export default function JumpInPosition({
           <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}
-          className="jump-in-position__modal-button"
-        >
-          {modalText && modalText.buttonLabel}
-        </Button>
-      </ConfirmModal>
+      <DownloadModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+        onModalClick={handleModalClick}
+      />
     </>
   )
 }
diff --git a/src/components/Modal/DownloadModal.css b/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%;
+}
diff --git a/src/components/Modal/DownloadModal.tsx b/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>
+  )
+}
diff --git a/src/intl/en.json b/src/intl/en.json
@@ -327,17 +327,10 @@
         "paragraph": "A crypto wallet helps you manage your transactions: earn rewards, purchase items, claim your name, and more!",
         "paragraph_secondary": "Once you've installed your wallet, you will need to refresh this page to continue"
       },
-      "join_in_modal": {
-        "relunch": {
-          "title": "Open Decentraland to jump right into the event.",
-          "description": "If Decentraland didn't open automatically, click relaunch.",
-          "button_label": "Relaunch"
-        },
-        "download": {
-          "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"
-        }
+      "download": {
+        "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"
       }
     }
   },