export hook for mobile

src/excalidraw-app/components/Footer.tsx

@@ -1,10 +1,10 @@
-import { isExcalidrawPlusSignedUser, PlusAppLinkJSX, PlusLPLinkJSX } from "..";
-import { useDevice } from "../../components/App";
 import { shield } from "../../components/icons";
 import { Tooltip } from "../../components/Tooltip";
 import { t } from "../../i18n";
-import { languages } from "../../packages/excalidraw/index";
+import { languages, useDevice } from "../../packages/excalidraw/index";
 import { LanguageList } from "./LanguageList";
+import PlusAppLink, { isExcalidrawPlusSignedUser } from "./PlusAppLink";
+import PlusLPLink from "./PlusLPLink";
 
 const EncryptedIcon = () => (
   <a
@@ -59,7 +59,7 @@ const Footer = ({
             borderRadius: 12,
           }}
         >
-          {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
+          {isExcalidrawPlusSignedUser ? <PlusAppLink /> : <PlusLPLink />}
         </div>
       </div>
     );

src/excalidraw-app/index.tsx

@@ -4,13 +4,7 @@ import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
-import {
+import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants";
-  APP_NAME,
-  COOKIES,
-  EVENT,
-  TITLE_TIMEOUT,
-  VERSION_TIMEOUT,
-} from "../constants";
 import { loadFromBlob } from "../data/blob";
 import {
   ExcalidrawElement,
@@ -76,10 +70,10 @@ import { jotaiStore, useAtomWithInitialValue } from "../jotai";
 import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
 import Footer from "./components/Footer";
-
+import PlusAppLink, {
-export const isExcalidrawPlusSignedUser = document.cookie.includes(
+  isExcalidrawPlusSignedUser,
-  COOKIES.AUTH_STATE_COOKIE,
+} from "./components/PlusAppLink";
-);
+import PlusLPLink from "./components/PlusLPLink";
 
 const languageDetector = new LanguageDetector();
 languageDetector.init({
@@ -191,31 +185,6 @@ const initializeScene = async (opts: {
   return { scene: null, isExternalScene: false };
 };
 
-export const PlusLPLinkJSX = (
-  <p style={{ direction: "ltr", unicodeBidi: "embed" }}>
-    Introducing Excalidraw+
-    <br />
-    <a
-      href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=banner&utm_campaign=launch"
-      target="_blank"
-      rel="noreferrer"
-    >
-      Try out now!
-    </a>
-  </p>
-);
-
-export const PlusAppLinkJSX = (
-  <a
-    href={`${process.env.REACT_APP_PLUS_APP}/#excalidraw-redirect`}
-    target="_blank"
-    rel="noreferrer"
-    className="plus-button"
-  >
-    Go to Excalidraw+
-  </a>
-);
-
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   let currentLangCode = languageDetector.detect() || defaultLang.code;
@@ -575,7 +544,7 @@ const ExcalidrawWrapper = () => {
             textAlign: "center",
           }}
         >
-          {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
+          {isExcalidrawPlusSignedUser ? <PlusAppLink /> : <PlusLPLink />}
         </div>
       );
     },

src/packages/excalidraw/index.tsx

@@ -226,3 +226,5 @@ export {
   sceneCoordsToViewportCoords,
   viewportCoordsToSceneCoords,
 } from "../../utils";
+
+export { useDevice } from "../../components/App";