Add lounge access page for users who qualify for lounge membership

src/CONST.js

@@ -2513,6 +2513,9 @@ const CONST = {
         TEXT: 'text',
         RADIO: 'radio',
     },
+    SETTINGS_LOUNGE_ACCESS: {
+        HEADER_IMAGE_ASPECT_RATIO: 0.64,
+    },
 };
 
 export default CONST;

src/ROUTES.js

@@ -27,6 +27,7 @@ export default {
     SETTINGS_TIMEZONE: 'settings/profile/timezone',
     SETTINGS_TIMEZONE_SELECT: 'settings/profile/timezone/select',
     SETTINGS_PRONOUNS: 'settings/profile/pronouns',
+    SETTINGS_LOUNGE_ACCESS: 'settings/profile/lounge-access',
     SETTINGS_PREFERENCES: 'settings/preferences',
     SETTINGS_PRIORITY_MODE: 'settings/preferences/priority-mode',
     SETTINGS_LANGUAGE: 'settings/preferences/language',

src/components/Icon/Expensicons.js

@@ -60,6 +60,7 @@ import Keyboard from '../../../assets/images/keyboard.svg';
 import Link from '../../../assets/images/link.svg';
 import LinkCopy from '../../../assets/images/link-copy.svg';
 import Lock from '../../../assets/images/lock.svg';
+import LoungeAccess from '../../../assets/images/lounge-access.svg';
 import Luggage from '../../../assets/images/luggage.svg';
 import MagnifyingGlass from '../../../assets/images/magnifying-glass.svg';
 import Mail from '../../../assets/images/mail.svg';
@@ -185,6 +186,7 @@ export {
     Link,
     LinkCopy,
     Lock,
+    LoungeAccess,
     Luggage,
     MagnifyingGlass,
     Mail,

src/components/Icon/Illustrations.js

@@ -2,6 +2,8 @@ import Abracadabra from '../../../assets/images/product-illustrations/abracadabr
 import BankArrowPink from '../../../assets/images/product-illustrations/bank-arrow--pink.svg';
 import BankMouseGreen from '../../../assets/images/product-illustrations/bank-mouse--green.svg';
 import BankUserGreen from '../../../assets/images/product-illustrations/bank-user--green.svg';
+import ChatBubbles from '../../../assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
+import CoffeeMug from '../../../assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
 import ConciergeBlue from '../../../assets/images/product-illustrations/concierge--blue.svg';
 import ConciergeExclamation from '../../../assets/images/product-illustrations/concierge--exclamation.svg';
 import CreditCardsBlue from '../../../assets/images/product-illustrations/credit-cards--blue.svg';
@@ -18,6 +20,7 @@ import ReceiptYellow from '../../../assets/images/product-illustrations/receipt-
 import RocketBlue from '../../../assets/images/product-illustrations/rocket--blue.svg';
 import RocketOrange from '../../../assets/images/product-illustrations/rocket--orange.svg';
 import SafeBlue from '../../../assets/images/product-illustrations/safe.svg';
+import SanFrancisco from '../../../assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
 import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg';
 import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg';
 import ToddBehindCloud from '../../../assets/images/product-illustrations/todd-behind-cloud.svg';
@@ -28,6 +31,7 @@ import PinkBill from '../../../assets/images/simple-illustrations/simple-illustr
 import CreditCardsNew from '../../../assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import InvoiceBlue from '../../../assets/images/simple-illustrations/simple-illustration__invoice.svg';
 import LockOpen from '../../../assets/images/simple-illustrations/simple-illustration__lockopen.svg';
+import Lounge from '../../../assets/images/product-illustrations/lounge.svg';
 import Luggage from '../../../assets/images/simple-illustrations/simple-illustration__luggage.svg';
 import MoneyIntoWallet from '../../../assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
 import MoneyWings from '../../../assets/images/simple-illustrations/simple-illustration__moneywings.svg';
@@ -46,6 +50,8 @@ export {
     BankArrowPink,
     BankMouseGreen,
     BankUserGreen,
+    ChatBubbles,
+    CoffeeMug,
     ConciergeBlue,
     ConciergeExclamation,
     CreditCardsBlue,
@@ -61,6 +67,7 @@ export {
     ReceiptYellow,
     RocketBlue,
     RocketOrange,
+    SanFrancisco,
     SafeBlue,
     TadaYellow,
     TadaBlue,
@@ -72,6 +79,7 @@ export {
     CreditCardsNew,
     InvoiceBlue,
     LockOpen,
+    Lounge,
     Luggage,
     MoneyIntoWallet,
     MoneyWings,

src/languages/en.js

@@ -409,6 +409,14 @@ export default {
         offline: 'Offline',
         syncing: 'Syncing',
     },
+    loungeAccessPage: {
+        loungeAccess: 'Lounge access',
+        headline: 'You qualify for access to our exclusive lounges.',
+        description: 'The Expensify Lounge is where a "high-end airport lounge" meets a vibrant "co-working space" optimized for like-minded individuals.',
+        coffeePromo: 'Great coffee and cocktails',
+        networkingPromo: 'Network with other members',
+        viewsPromo: 'Incredible views of San Francisco',
+    },
     pronounsPage: {
         pronouns: 'Pronouns',
         isShownOnProfile: 'Your pronouns are shown on your profile.',

src/languages/es.js

@@ -408,6 +408,15 @@ export default {
         offline: 'Desconectado',
         syncing: 'Sincronizando',
     },
+    loungeAccessPage: {
+        loungeAccess: 'Acceso a la sala vip',
+        headline: 'Podrás acceder a nuestras salas vip exclusivas.',
+        description:
+            'La sala vip Expensify es el punto de encuentro entre una "sala vip de aeropuerto de alta gama" y un vibrante "espacio de co-working" optimizado para personas con ideas afines.',
+        coffeePromo: 'Buen café y buenos cócteles',
+        networkingPromo: 'Conecta con otros miembros',
+        viewsPromo: 'Increíbles vistas de San Francisco',
+    },
     pronounsPage: {
         pronouns: 'Pronombres',
         isShownOnProfile: 'Tus pronombres se muestran en tu perfil.',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -464,6 +464,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_App_Download_Links',
     },
+    {
+        getComponent: () => {
+            const SettingsLoungeAccessPage = require('../../../pages/settings/Profile/LoungeAccessPage').default;
+            return SettingsLoungeAccessPage;
+        },
+        name: 'Settings_Lounge_Access',
+    },
     {
         getComponent: () => {
             const SettingsPaymentsPage = require('../../../pages/settings/Payments/PaymentsPage').default;

src/libs/Navigation/linkingConfig.js

@@ -128,6 +128,9 @@ export default {
                             Settings_ContactMethodDetails: {
                                 path: ROUTES.SETTINGS_CONTACT_METHOD_DETAILS,
                             },
+                            Settings_Lounge_Access: {
+                                path: ROUTES.SETTINGS_LOUNGE_ACCESS,
+                            },
                             Settings_NewContactMethod: {
                                 path: ROUTES.SETTINGS_NEW_CONTACT_METHOD,
                                 exact: true,