[No-QA] [Desktop App Deprecation] Add "App Retired" page

src/CONST/index.ts

@@ -1829,6 +1829,8 @@ const CONST = {
         // The "Upgrade" is intentional as the 426 HTTP code means "Upgrade Required" and sent by the API. We use the "Update" language everywhere else in the front end when this gets returned.
         UPDATE_REQUIRED: 'Upgrade Required',
         INTEGRATION_MESSAGE_INVALID_CREDENTIALS: 'Invalid credentials',
+
+        DESKTOP_APP_RETIRED: 'Desktop app retired',
         BANK_ACCOUNT_SAME_DEPOSIT_AND_WITHDRAWAL_ERROR: 'The deposit and withdrawal accounts are the same.',
     },
     ERROR_TYPE: {

src/Expensify.tsx

@@ -33,6 +33,7 @@ import * as ActiveClientManager from './libs/ActiveClientManager';
 import {isSafari} from './libs/Browser';
 import * as Environment from './libs/Environment/Environment';
 import FS from './libs/Fullstory';
+import getPlatform from './libs/getPlatform';
 import Growl, {growlRef} from './libs/Growl';
 import Log from './libs/Log';
 import migrateOnyx from './libs/migrateOnyx';
@@ -120,6 +121,7 @@ function Expensify() {
     const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
     const [stashedCredentials = CONST.EMPTY_OBJECT] = useOnyx(ONYXKEYS.STASHED_CREDENTIALS, {canBeMissing: true});
     const [stashedSession] = useOnyx(ONYXKEYS.STASHED_SESSION, {canBeMissing: true});
+    const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
 
     useDebugShortcut();
     usePriorityMode();
@@ -355,6 +357,10 @@ function Expensify() {
         return null;
     }
 
+    if (isDesktop) {
+        throw new Error(CONST.ERROR.DESKTOP_APP_RETIRED);
+    }
+
     if (updateRequired) {
         throw new Error(CONST.ERROR.UPDATE_REQUIRED);
     }

src/components/ErrorBoundary/BaseErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {ErrorBoundary} from 'react-error-boundary';
 import BootSplash from '@libs/BootSplash';
+import DesktopAppRetiredView from '@pages/ErrorPage/DesktopAppRetiredPage';
 import GenericErrorPage from '@pages/ErrorPage/GenericErrorPage';
 import UpdateRequiredView from '@pages/ErrorPage/UpdateRequiredView';
 import CONST from '@src/CONST';
@@ -23,11 +24,18 @@ function BaseErrorBoundary({logError = () => {}, errorMessage, children}: BaseEr
         BootSplash.hide().then(() => setSplashScreenState(CONST.BOOT_SPLASH_STATE.HIDDEN));
         setErrorContent(errorObject.message);
     };
-    const updateRequired = errorContent === CONST.ERROR.UPDATE_REQUIRED;
+
+    let FallbackComponent = GenericErrorPage;
+
+    if (errorContent === CONST.ERROR.DESKTOP_APP_RETIRED) {
+        FallbackComponent = DesktopAppRetiredView;
+    } else if (errorContent === CONST.ERROR.UPDATE_REQUIRED) {
+        FallbackComponent = UpdateRequiredView;
+    }
 
     return (
         <ErrorBoundary
-            FallbackComponent={updateRequired ? UpdateRequiredView : GenericErrorPage}
+            FallbackComponent={FallbackComponent}
             onError={catchError}
         >
             {children}

src/components/Icon/Illustrations.ts

@@ -1,6 +1,7 @@
 import Computer from '@assets/images/computer.svg';
 import EmptyCardState from '@assets/images/emptystate__expensifycard.svg';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+import LaptopOnDeskDeprecated from '@assets/images/laptop-on-desk-deprecated.svg';
 import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-second-screen-and-hourglass.svg';
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
@@ -88,4 +89,5 @@ export {
     Flash,
     EmptyShelves,
     BlueShield,
+    LaptopOnDeskDeprecated,
 };

src/components/Icon/chunks/illustrations.chunk.ts

@@ -36,6 +36,7 @@ import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import ExpensifyCardIllustration from '@assets/images/expensifyCard/cardIllustration.svg';
 // Other Images
 import Hand from '@assets/images/hand.svg';
+import LaptopOnDeskDeprecated from '@assets/images/laptop-on-desk-deprecated.svg';
 import LaptopOnDeskWithCoffeeAndKey from '@assets/images/laptop-on-desk-with-coffee-and-key.svg';
 import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-second-screen-and-hourglass.svg';
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
@@ -321,6 +322,7 @@ const Illustrations = {
     LockOpen,
     Mailbox,
     ShieldYellow,
+    LaptopOnDeskDeprecated,
     Clock,
     Members,
 };

src/languages/de.ts

@@ -7982,6 +7982,11 @@ Hier ist ein *Testbeleg*, um dir zu zeigen, wie es funktioniert:`,
         },
         admins: {title: 'Admins', findAdmin: 'Admin finden', primaryContact: 'Hauptansprechpartner', addPrimaryContact: 'Primären Kontakt hinzufügen', settings: 'Einstellungen'},
     },
+    desktopAppRetiredPage: {
+        title: 'Desktop-App wurde eingestellt',
+        body: 'Die neue Expensify Desktop-App für Mac wurde eingestellt. Bitte verwenden Sie künftig die Web-App, um auf Ihr Konto zuzugreifen.',
+        goToWeb: 'Zur Web-App gehen',
+    },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/languages/en.ts

@@ -6697,6 +6697,11 @@ const translations = {
         },
         refresh: 'Refresh',
     },
+    desktopAppRetiredPage: {
+        title: 'Desktop app has been retired',
+        body: 'The New Expensify Mac desktop app has been retired. Moving forward, please use the web app to access your account.',
+        goToWeb: 'Go to web',
+    },
     fileDownload: {
         success: {
             title: 'Downloaded!',

src/languages/es.ts

@@ -6377,6 +6377,11 @@ ${amount} para ${merchant} - ${date}`,
         },
         refresh: 'Actualizar',
     },
+    desktopAppRetiredPage: {
+        title: 'La aplicación de escritorio ha sido retirada',
+        body: 'La nueva aplicación de escritorio Expensify para Mac ha sido retirada. En adelante, utiliza la aplicación web para acceder a tu cuenta.',
+        goToWeb: 'Ir a la web',
+    },
     fileDownload: {
         success: {
             title: '¡Descargado!',

src/languages/fr.ts

@@ -7987,6 +7987,11 @@ Voici un *reçu test* pour vous montrer comment cela fonctionne :`,
         },
         admins: {title: 'Admins', findAdmin: 'Trouver un admin', primaryContact: 'Contact principal', addPrimaryContact: 'Ajouter un contact principal', settings: 'Paramètres'},
     },
+    desktopAppRetiredPage: {
+        title: 'L’application de bureau a été retirée',
+        body: 'La nouvelle application de bureau Expensify pour Mac a été retirée. À l’avenir, veuillez utiliser l’application web pour accéder à votre compte.',
+        goToWeb: 'Aller sur le web',
+    },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/languages/it.ts

@@ -7969,6 +7969,11 @@ Ecco una *ricevuta di prova* per mostrarti come funziona:`,
             settings: 'Impostazioni',
         },
     },
+    desktopAppRetiredPage: {
+        title: "L'app desktop è stata dismessa",
+        body: 'La nuova app desktop Expensify per Mac è stata ritirata. D’ora in avanti, usa l’app web per accedere al tuo account.',
+        goToWeb: 'Vai al sito web',
+    },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/languages/ja.ts

@@ -7902,6 +7902,11 @@ Expensify の使い方をお見せするための*テストレシート*がこ
         },
         admins: {title: '管理者', findAdmin: '管理者を検索', primaryContact: '主要連絡先', addPrimaryContact: '主要連絡先を追加', settings: '設定'},
     },
+    desktopAppRetiredPage: {
+        title: 'デスクトップアプリは廃止されました',
+        body: 'New Expensify の Mac デスクトップアプリは廃止されました。今後は、アカウントへアクセスする際に Web アプリをご利用ください。',
+        goToWeb: 'Web を開く',
+    },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/languages/nl.ts

@@ -7955,6 +7955,11 @@ Hier is een *testbon* om je te laten zien hoe het werkt:`,
             settings: 'Instellingen',
         },
     },
+    desktopAppRetiredPage: {
+        title: 'Desktop-app is buiten gebruik gesteld',
+        body: 'De nieuwe Expensify Mac-desktopapp is buiten gebruik gesteld. Gebruik voortaan de webapp om toegang te krijgen tot je account.',
+        goToWeb: 'Ga naar web',
+    },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/languages/pl.ts

@@ -7934,6 +7934,11 @@ Oto *paragon testowy*, który pokazuje, jak to działa:`,
         },
         admins: {title: 'Administratorzy', findAdmin: 'Znajdź administratora', primaryContact: 'Główny kontakt', addPrimaryContact: 'Dodaj główny kontakt', settings: 'Ustawienia'},
     },
+    desktopAppRetiredPage: {
+        title: 'Aplikacja desktopowa została wycofana',
+        body: 'Nowa aplikacja desktopowa Expensify na Maca została wycofana. Od teraz korzystaj z aplikacji webowej, aby uzyskać dostęp do swojego konta.',
+        goToWeb: 'Przejdź do sieci',
+    },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/languages/pt-BR.ts

@@ -7947,6 +7947,11 @@ Aqui está um *recibo de teste* para mostrar como funciona:`,
             settings: 'Configurações',
         },
     },
+    desktopAppRetiredPage: {
+        title: 'O app para desktop foi descontinuado',
+        body: 'O novo aplicativo desktop Expensify para Mac foi descontinuado. De agora em diante, use o aplicativo web para acessar sua conta.',
+        goToWeb: 'Ir para a web',
+    },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/languages/zh-hans.ts

@@ -7767,6 +7767,7 @@ ${reportName}
         enhancedSecurity: {title: '增强的安全性', subtitle: '要求您域内的成员使用单点登录登录、限制工作区创建等。', enable: '启用'},
         admins: {title: '管理员', findAdmin: '查找管理员', primaryContact: '主要联系人', addPrimaryContact: '添加主要联系人', settings: '设置'},
     },
+    desktopAppRetiredPage: {title: '桌面应用程序已停用', body: '新的 Expensify Mac 桌面应用已停用。今后，请使用网页版应用访问您的账户。', goToWeb: '前往网页'},
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,
 // so if you change it here, please update it there as well.

src/pages/ErrorPage/DesktopAppRetiredPage.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {Linking, View} from 'react-native';
+import Button from '@components/Button';
+import HeaderGap from '@components/HeaderGap';
+import Icon from '@components/Icon';
+import Text from '@components/Text';
+import useEnvironment from '@hooks/useEnvironment';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+
+function DesktopAppRetiredPage() {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['LaptopOnDeskDeprecated'] as const);
+    const insets = useSafeAreaInsets();
+    const {environmentURL} = useEnvironment();
+
+    return (
+        <View style={[styles.appBG, styles.h100, StyleUtils.getPlatformSafeAreaPadding(insets)]}>
+            <HeaderGap />
+            <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                <Icon
+                    src={illustrations.LaptopOnDeskDeprecated}
+                    height={variables.desktopAppRetiredIllustrationH}
+                    width={variables.desktopAppRetiredIllustrationW}
+                />
+                <View style={[styles.ph5, styles.alignItemsCenter, styles.mt5]}>
+                    <View style={styles.updateRequiredViewTextContainer}>
+                        <View style={[styles.mb3]}>
+                            <Text style={[styles.newKansasLarge, styles.textAlignCenter]}>{translate('desktopAppRetiredPage.title')}</Text>
+                        </View>
+                        <View style={styles.mb5}>
+                            <Text style={[styles.textAlignCenter, styles.textSupporting]}>{`${translate('desktopAppRetiredPage.body')} `}</Text>
+                        </View>
+                    </View>
+                </View>
+                <Button
+                    success
+                    large
+                    onPress={() => {
+                        Linking.openURL(environmentURL ?? CONST.NEW_EXPENSIFY_URL);
+                    }}
+                    text={translate('desktopAppRetiredPage.goToWeb')}
+                    style={styles.desktopAppRetiredViewTextContainer}
+                />
+            </View>
+        </View>
+    );
+}
+
+DesktopAppRetiredPage.displayName = 'DesktopAppRetiredPage';
+
+export default DesktopAppRetiredPage;

src/styles/index.ts

@@ -5045,6 +5045,15 @@ const staticStyles = (theme: ThemeColors) =>
             width: variables.updateTextViewContainerWidth,
         },
 
+        desktopAppRetiredIllustration: {
+            width: variables.desktopAppRetiredIllustrationW,
+            height: variables.desktopAppRetiredIllustrationH,
+        },
+
+        desktopAppRetiredViewTextContainer: {
+            width: variables.desktopAppRetiredViewContainerWidth,
+        },
+
         twoFARequiredContainer: {
             maxWidth: 520,
             margin: 'auto',

src/styles/variables.ts

@@ -279,6 +279,10 @@ export default {
     updateTextViewContainerWidth: 310,
     updateViewHeaderHeight: 70,
 
+    desktopAppRetiredIllustrationW: 264,
+    desktopAppRetiredIllustrationH: 230,
+    desktopAppRetiredViewContainerWidth: 310,
+
     mushroomTopHatWidth: 138,
     mushroomTopHatHeight: 128,
     bankButtonMargin: 23,