Merge branch 'main' of github.com:kubabutkiewicz/expensify-app into t…

…s-migration/UnreadIndicatorUpdater/lib

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,8 +18,8 @@ $ https://github.com/Expensify/App/issues/<issueID(comment)>
 
 Do NOT only link the issue number like this: $ #<issueID>
 --->
-$ 
-PROPOSAL: 
+$
+PROPOSAL:
 
 
 ### Tests
@@ -98,7 +98,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/utils/index.ts) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.

.imgbotconfig

@@ -1,7 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
-        "assets/images/empty-state_background-fade-light.png"
+        "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/themeDependent/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }

.storybook/public/index.css

@@ -24,5 +24,5 @@ a.sidebar-item[data-selected="true"], a.sidebar-item[data-selected="true"]:focus
 }
 
 .sidebar-container {
-    background: #07271f;
+    background: #072419;
 }

.storybook/theme.js

@@ -7,17 +7,17 @@ export default create({
     fontBase: 'ExpensifyNeue-Regular',
     fontCode: 'monospace',
     base: 'dark',
-    appBg: colors.darkHighlightBackground,
-    colorPrimary: colors.darkDefaultButton,
+    appBg: colors.productDark200,
+    colorPrimary: colors.productDark400,
     colorSecondary: colors.green,
-    appContentBg: colors.darkAppBackground,
-    textColor: colors.darkPrimaryText,
-    barTextColor: colors.darkPrimaryText,
+    appContentBg: colors.productDark100,
+    textColor: colors.productDark900,
+    barTextColor: colors.productDark900,
     barSelectedColor: colors.green,
-    barBg: colors.darkAppBackground,
-    appBorderColor: colors.darkBorders,
-    inputBg: colors.darkHighlightBackground,
-    inputBorder: colors.darkBorders,
+    barBg: colors.productDark100,
+    appBorderColor: colors.productDark400,
+    inputBg: colors.productDark200,
+    inputBorder: colors.productDark400,
     appBorderRadius: 8,
     inputBorderRadius: 8,
 });

__mocks__/@ua/react-native-airship.js

@@ -31,7 +31,7 @@ const Airship = {
     },
     contact: {
         identify: jest.fn(),
-        getNamedUserId: jest.fn(),
+        getNamedUserId: () => Promise.resolve(undefined),
         reset: jest.fn(),
     },
 };

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040700
-        versionName "1.4.7-0"
+        versionCode 1001041000
+        versionName "1.4.10-0"
     }
 
     flavorDimensions "default"

config/webpack/webpack.common.js

@@ -211,7 +211,21 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         // This is also why we have to use .website.js for our own web-specific files...
         // Because desktop also relies on "web-specific" module implementations
         // This also skips packing web only dependencies to desktop and vice versa
-        extensions: ['.web.js', platform === 'web' ? '.website.js' : '.desktop.js', '.js', '.jsx', '.web.ts', platform === 'web' ? '.website.ts' : '.desktop.ts', '.ts', '.web.tsx', '.tsx'],
+        extensions: [
+            '.web.js',
+            ...(platform === 'desktop' ? ['.desktop.js'] : []),
+            '.website.js',
+            '.js',
+            '.jsx',
+            '.web.ts',
+            ...(platform === 'desktop' ? ['.desktop.ts'] : []),
+            '.website.ts',
+            ...(platform === 'desktop' ? ['.desktop.tsx'] : []),
+            '.website.tsx',
+            '.ts',
+            '.web.tsx',
+            '.tsx',
+        ],
         fallback: {
             'process/browser': require.resolve('process/browser'),
         },

contributingGuides/NAVIGATION.md

@@ -1,6 +1,6 @@
 # Overview
 
-The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.js` file.
+The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.tsx` file.
 
 ## Terminology
 
@@ -20,11 +20,11 @@ Navigation Actions - User actions correspond to resulting navigation actions tha
 
 ## Adding RHP flows
 
-Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.js` and `ModalStackNavigators.js` file:
+Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.tsx` and `ModalStackNavigators.tsx` file:
 
-- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.js`.
+- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.tsx`.
 
-- If you want to create new flow, add a `Screen` in `RightModalNavigator.js` and make new modal in `ModalStackNavigators.js` with chosen pages.
+- If you want to create new flow, add a `Screen` in `RightModalNavigator.tsx` and make new modal in `ModalStackNavigators.tsx` with chosen pages.
 
 When creating RHP flows, you have to remember a couple things:
 
@@ -196,4 +196,4 @@ The action for the first step created with  `getMinimalAction` looks like this:
 ```
 
 ### Deeplinking 
-There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.
+There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.

contributingGuides/REVIEWER_CHECKLIST.md

@@ -46,7 +46,7 @@
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/utils/index.ts) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.

docs/_data/_routes.yml

@@ -112,21 +112,11 @@ platforms:
         title: Expensify Card
         icon: /assets/images/hand-card.svg
         description: Explore how the Expensify Card combines convenience and security to enhance everyday business transactions. Discover how to apply for, oversee, and maximize your card perks here.
-
-      - href: expensify-partner-program
-        title: Expensify Partner Program
-        icon: /assets/images/handshake.svg
-        description: Discover how to get the most out of Expensify as an ExpensifyApproved! accountant partner. Learn how to set up your clients, receive CPE credits, and take advantage of your partner discount.
 
       - href: get-paid-back
         title: Get Paid Back
         icon: /assets/images/money-into-wallet.svg
         description: Whether you submit an expense report or an invoice, find out here how to ensure a smooth and timely payback process every time.
-
-      - href: send-payments
-        title: Send Payments
-        icon: /assets/images/money-wings.svg
-        description: Uncover step-by-step guidance on sending direct reimbursements to employees, paying an invoice to a vendor, and utilizing third-party payment options.
 
       - href: workspace-and-domain-settings
         title: Workspace & Domain Settings

docs/_sass/_colors.scss

@@ -2,8 +2,8 @@ $color-green400: #03D47C;
 $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
 $color-button-background: #1A3D32;
-$color-button-hovered: #2C6755;
-$color-green-highlightBG: #07271F;
+$color-button-hovered: #2A604F;
+$color-green-highlightBG: #072419;
 $color-green-highlightBG-hover: #06231c;
 $color-green-appBG: #061B09;
 $color-green-hover: #00a862;

docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Connect-Company-Cards.md → docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Company-Card-Settings.md

@@ -1,6 +1,6 @@
 ---
 title: Company-Card-Settings.md
-description: Company card settings 
+description: Once you connect your cards, customize the configuration using company card settings.
 ---
 # Overview
 Once you’ve imported your company cards via commercial card feed, direct bank feed, or CSV import, the next step is to configure the cards’ settings. 

docs/articles/expensify-classic/expensify-card/Cardholder-Settings-and-Features.md

@@ -0,0 +1,84 @@
+---
+title:  Cardholder Settings and Features
+description: Expensify Card Settings for Employees
+---
+
+# How to use your Expensify Card
+Once you receive your card, you can start using it right away. 
+
+First, you'll want to take note of the Smart Limit tied to your card – this is listed in your card settings via **Settings > Account > Credit Card Import**. This limit represents the total amount of unapproved expenses you can have on the card.
+
+It's crucial to continuously submit your expenses promptly, as that'll ensure they can be approved and restore your full limit. You can always chat with your admin if you need your limit adjusted.
+
+You can swipe your Expensify Card like you would with any other card. As you make purchases, you'll get instant alerts on your phone letting you know if you need to SmartScan receipts. Any SmartScanned receipts should merge with the card expense automatically.
+
+If your organization doesn't require itemized receipts, you can rely on eReceipts instead. As long as the expense isn't lodging-related, Expensify will automatically generate an IRS-compliant eReceipt for every transaction.
+
+You can report and submit Expensify Card expenses just like any other expenses. As they're approved, your Smart Limit will be refreshed accordingly, allowing you to keep making purchases.
+
+## Enable Notifications
+Download the Expensify mobile app and enable push notifications to stay current on your spending activity. Your card is connected to your Expensify account, so each transaction on your card will trigger a push notification. We'll also send you a push notification if we detect potentially fraudulent activity and allow you to confirm your purchase. 
+
+Follow the steps below to enable real-time alerts on your mobile device.
+
+**If you have an iPhone**:
+1. Open the Expensify app and tap the three-bar icon in the upper-left corner
+2. Tap **Settings** and enable **Receive realtime alerts**
+3. Accept the confirmation dialogue to go to your iPhone's notification settings for Expensify. Turn on Allow Notifications, and choose the notification types you’d like!
+
+**If you have an Android**:
+1. Go to Settings and open 'Apps and Notifications'.
+2. Find and open Expensify and enable notifications.
+3. Customize your alerts. Depending on your phone model, you may have extra options to customize the types of notifications you receive.
+
+## Your virtual card
+Once you're assigned a limit, you'll be able to use your virtual card immediately. You can view your virtual card details via **Settings > Account > Credit Card Import > Show Details**. Keep in mind that your virtual card and physical card share a limit.
+
+The virtual Expensify Card includes a card number, expiration date, and security code (CVC). You can use the virtual card for online purchases, in-app transactions, and in-person payments once it's linked to a mobile wallet (Apple Pay or Google Pay).
+
+## How to access your virtual card details
+Here's how to access your virtual card details via the Expensify mobile app:
+1. Tap the three-bar icon in the upper-left corner 
+2. Tap **Settings > Connected Cards**
+3. Under **Virtual Card**, tap **Show Details**
+
+From there, you can view your virtual card's number, CVV, expiration date, and billing address. 
+
+Here's how to access your virtual card details via the Expensify web app:
+1. Head to **Settings > Account > Credit Card Import**
+2. Under **Virtual Card**, click **Show Details**
+
+From there, you can view your virtual card's card number, CVV, expiration date, and billing address.
+
+## How to add your virtual card to a digital wallet (Apple Pay or Google Pay)
+
+To use the Expensify Card for contactless payment, add it to your digital wallet from the mobile app:
+1. Tap the three-bar icon in the upper-left corner 
+2. Tap **Settings > Connected Cards**
+3. Depending on your device, tap **Add to Apple Wallet** or **Add to Gpay** 
+4. Complete the remaining steps
+
+## Expensify Card declines
+As long as you've enabled 'Receive real-time alerts', you'll get a notification explaining the reason for each decline. You can enable alerts in the mobile app by clicking on the three-bar icon in the upper-left corner > **Settings** > toggle **Receive real-time alerts**. 
+
+Here are some reasons an Expensify Card transaction might be declined:
+
+- You have an insufficient card limit
+     - If a transaction exceeds your Expensify Card's available limit, the transaction will be declined. You can see the remaining limit in the mobile app under **Settings > Connected Cards** or in the web app under **Settings > Account > Credit Card Import**. 
+     - Submitting expenses and getting them approved will free up your limit for more spending.
+
+- Your card isn't active yet or it was disabled by your Domain Admin
+- Your card information was entered incorrectly with the merchant. Entering incorrect card information, such as the CVC, ZIP, or expiration date, will also lead to declines. 
+There was suspicious activity
+- If Expensify detects unusual or suspicious activity, we may block transactions as a security measure
+     - This could happen due to irregular spending patterns, attempted purchases from risky vendors, or multiple rapid transactions. 
+     - Check your Expensify Home page to approve unusual merchants and try again.
+     - If the spending looks suspicious, we may complete a manual due diligence check, and our team will do this as quickly as possible - your cards will all be locked while this happens.  
+- The merchant is located in a restricted country
+
+# FAQ
+## Can I use Smart Limits with a free Expensify account? 
+If you're on the Free plan, you won't have the option to use Smart Limits. Your card limit will simply reset at the end of each calendar month.
+
+## I still haven't received my Expensify Card. What should I do? 
+For more information on why your card hasn't arrived, you can check out this resource on [Requesting a Card](https://help.expensify.com/articles/expensify-classic/expensify-card/Request-the-Card#what-if-i-havent-received-my-card-after-multiple-weeks).