diff --git a/help/_plugins/SitePostRender.rb b/help/_plugins/SitePostRender.rb index 8d341bad4bd4..2ff412f199f3 100644 --- a/help/_plugins/SitePostRender.rb +++ b/help/_plugins/SitePostRender.rb @@ -107,7 +107,8 @@ def self.analyze_used_components(content) 'View' => content.include?(' content.include?(' content.include?(' content.include?(' content.include?(' content.include?(' method(:process_div), 'p' => method(:process_paragraph), 'ul' => method(:process_unordered_list), + 'ol' => method(:process_ordered_list), 'li' => method(:process_list_item), 'h1' => method(:process_heading), 'h2' => method(:process_heading), @@ -233,7 +237,18 @@ def self.process_div(node, indent_level) end def self.process_heading(node, indent_level) - return "#{' ' * indent_level}#{CGI.escapeHTML(node.text).strip}" + classes = ["styles.textHeadline#{node.name.upcase}"] + + # If a list follows immediately, don't add the normal bottom margin + if %w[ul ol].include?(node.next_element&.name) + classes << 'styles.mt4' + classes << 'styles.mb1' + else + classes << 'styles.mv4' + end + + text = CGI.escapeHTML(node.text).strip + "#{' ' * indent_level}#{text}" end def self.process_unordered_list(node, indent_level) @@ -264,6 +279,33 @@ def self.process_unordered_list(node, indent_level) TS end + def self.process_ordered_list(node, indent_level) + items = node.xpath('./li').map do |li| + contains_ol = li.xpath('.//ol').any? + + li_parts = li.children.map { |child| html_node_to_RN(child, 0) } + + if contains_ol + indented_li_parts = li_parts.map do |part| + part.lines.map { |line| "#{' ' * (indent_level + 3)}#{line.rstrip}" }.join("\n") + end.join("\n") + + "#{' ' * (indent_level + 2)}<>\n#{indented_li_parts}\n#{' ' * (indent_level + 2)}" + else + "#{' ' * (indent_level + 2)}#{li_parts.join.strip}" + end + end + + <<~TS.chomp + #{' ' * indent_level} + TS + end + def self.process_list_item(node, indent_level) '' # handled in
    end @@ -272,8 +314,16 @@ def self.process_paragraph(node, indent_level) inner = node.children.map { |c| html_node_to_RN(c, indent_level + 1) }.join style_classes = ['styles.textNormal'] - style_classes << 'styles.mt4' if node.previous_element&.name == 'ul' - style_classes << 'styles.mb4' if node.next_element&.name == 'p' + + # Add spacing if previous sibling is a list (ul or ol) + if %w[ul ol].include?(node.previous_element&.name) + style_classes << 'styles.mt4' + end + + # Add spacing if the next element is another paragraph + if node.next_element&.name == 'p' + style_classes << 'styles.mb4' + end "#{' ' * indent_level}#{inner.strip}" end diff --git a/help/ref/:action/:iouType/start/:transactionID/:reportID/distance/:backToReport/index.md b/help/ref/distance/index.md similarity index 100% rename from help/ref/:action/:iouType/start/:transactionID/:reportID/distance/:backToReport/index.md rename to help/ref/distance/index.md diff --git a/help/ref/r/:chat/index.md b/help/ref/r/:chat/index.md new file mode 100644 index 000000000000..00a2d1d336b1 --- /dev/null +++ b/help/ref/r/:chat/index.md @@ -0,0 +1,36 @@ +--- +layout: product +title: Expensify Chat +--- + +# Chat + +Chat is the foundation of New Expensify. Every expense, expense report, workspace, or member has an associated "chat", which you can use to record additional details, or collaborate with others. Every chat has the following components: + +## Header + +This shows who you are chatting with (or what you are chatting about). You can press the header for more details on the chat, or additional actions to take upon it. + +## Comments + +The core of the chat are its comments, which come in many forms: + +- **Text** – Rich text messages stored securely and delivered via web, app, email, or SMS. +- **Images & Documents** – Insert photos, screenshots, movies, PDFs, or more, using copy/paste, drag/drop, or the attach button. +- **Expenses** – Share an expense in the chat, either to simply track and document it, or to submit for reimbursement. +- **Tasks** – Record a task, and optionally assign it to someone (or yourself!). + +## Actions + +Hover (or long press) on a comment to see additional options, including: + +- **React** – Throw a ♥️😂🔥 like on anything! +- **Reply in thread** – Go deeper by creating a new chat on any comment. +- **Mark unread** – Flag it for reading later, at your convenience. + +## Composer + +Use the composer at the bottom to write new messages: + +- **Markdown** – Format text using **bold**, *italics*, and [more](https://help.expensify.com/articles/new-expensify/chat/Send-and-format-chat-messages). +- **Mention** – Invite or tag anyone in the world to any chat by putting an `@` in front of their email address or phone number (e.g., **@awong@marslink.web**, or **@415-867-5309**). diff --git a/help/ref/r/index.md b/help/ref/r/index.md index 93a70ead94a8..ac8dccebcb75 100644 --- a/help/ref/r/index.md +++ b/help/ref/r/index.md @@ -1,4 +1,24 @@ --- layout: product -title: Inbox Overview +title: Expensify Inbox --- + +# Inbox + +The Inbox is a prioritized "to do" list, highlighting exactly what you need to do next. It consists of: + +## Priorities + +At the top of the Inbox are the most important tasks you should do first, which include: + +- Expense reports waiting on you +- Tasks assigned to you +- Chats that have mentioned you +- Anything you have pinned + +## Chats + +Beneath the priorities are a list of chats (with unread chats highlighted in bold), in one of two view modes: + +- **Most Recent** – Lists every chat, ordered by whichever was most recently active. +- **Focus** – Only lists chats with unread messages, sorted alphabetically. \ No newline at end of file diff --git a/help/ref/:action/:iouType/start/:transactionID/:reportID/scan/:backToReport/index.md b/help/ref/scan/index.md similarity index 100% rename from help/ref/:action/:iouType/start/:transactionID/:reportID/scan/:backToReport/index.md rename to help/ref/scan/index.md diff --git a/help/ref/workspaces/:policyID/members/index.md b/help/ref/workspaces/:policyID/members/index.md index 991a3dc302b8..8490565c0f91 100644 --- a/help/ref/workspaces/:policyID/members/index.md +++ b/help/ref/workspaces/:policyID/members/index.md @@ -27,8 +27,6 @@ Invite teammates to your workspace and assign roles to control their access and - Add comments, but cannot modify expenses - No approval or payment permissions ---- - ## Adding Members 1. Under **Workspaces > [Workspace Name] > Members**, click **Invite Member** @@ -38,8 +36,6 @@ Invite teammates to your workspace and assign roles to control their access and **Alternative:** Share the workspace URL or QR code from **Account > Profile > Share** ---- - ## Managing Members **Change Role:** @@ -54,8 +50,6 @@ Invite teammates to your workspace and assign roles to control their access and 2. Click **Remove from Workspace** 3. Confirm removal ---- - ## Transfer Ownership of a Workspace 1. Go to **Members** and click current **Owner** @@ -63,8 +57,6 @@ Invite teammates to your workspace and assign roles to control their access and 3. Confirm transfer 4. You become the new owner ---- - ## Learn More - [Managing Workspace Members](https://help.expensify.com/articles/new-expensify/workspaces/Managing-Workspace-Members) diff --git a/src/components/SidePanel/HelpComponents/HelpNumberedList.tsx b/src/components/SidePanel/HelpComponents/HelpNumberedList.tsx new file mode 100644 index 000000000000..ba6afab3d0b7 --- /dev/null +++ b/src/components/SidePanel/HelpComponents/HelpNumberedList.tsx @@ -0,0 +1,25 @@ +import type {ReactNode} from 'react'; +import React from 'react'; +import {View} from 'react-native'; +import Text from '@components/Text'; +import type {ThemeStyles} from '@styles/index'; + +type HelpNumberedListProps = { + styles: ThemeStyles; + items: ReactNode[]; +}; + +function HelpNumberedList({items, styles}: HelpNumberedListProps) { + return items.map((item, index) => ( + + {`${index + 1}.`} + {item} + + )); +} + +export default HelpNumberedList; diff --git a/src/components/SidePanel/HelpContent/helpContentMap.tsx b/src/components/SidePanel/HelpContent/helpContentMap.tsx index 1a82ca864f17..6f9c180c418d 100644 --- a/src/components/SidePanel/HelpContent/helpContentMap.tsx +++ b/src/components/SidePanel/HelpContent/helpContentMap.tsx @@ -7,6 +7,7 @@ import type {ReactNode} from 'react'; import React from 'react'; import {View} from 'react-native'; import BulletList from '@components/SidePanel/HelpComponents/HelpBulletList'; +import NumberedList from '@components/SidePanel/HelpComponents/HelpNumberedList'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import type {ThemeStyles} from '@styles/index'; @@ -128,159 +129,38 @@ const helpContentMap: HelpContent = { ), }, - ':action': { - children: { - ':iouType': { - children: { - start: { - children: { - ':transactionID': { - children: { - ':reportID': { - children: { - distance: { - children: { - ':backToReport': { - content: ({styles}: {styles: ThemeStyles}) => ( - - Distance Expense - - Easily track mileage costs using Expensify’s built-in map feature. Create and submit distance-based expenses right - from the web, desktop, or mobile app. - - - - Create distance expenses: Click the green + button and choose Create - expense, then select Distance. Enter your starting point and destination. You can also add stops if - needed. - - , - - - Submit for approval: Choose your workspace and confirm the distance, - amount, and date. Add optional notes or categories, then click Create expense to submit the mileage - expense for approval. - - , - - - Log a round-trip: To log a round-trip, use the same location for both - start and finish, and include any stops along the way. - - , - ]} - /> - - ), - }, - }, - }, - scan: { - children: { - ':backToReport': { - content: ({styles}: {styles: ThemeStyles}) => ( - - Scan Receipt - SmartScan automatically extracts expense details from receipt images. - How to Scan - - What SmartScan Detects - - Amount and currency - , - - Merchant name and location - , - - Date of purchase - , - - Tax information (when visible) - , - - Category suggestions based on merchant type - , - ]} - /> - Supported Receipt Types - - Photos - Take with your device camera - , - - Email receipts - Forward to receipts@expensify.com - , - - PDF receipts - Upload from your device - , - - Screenshots - From apps or websites - , - ]} - /> - Tips for Best Results - Ensure receipt text is clear and readable, - Include the full receipt in the image, - Good lighting improves accuracy, - Straight angles work better than tilted photos, - ]} - /> - After Scanning - Review extracted details for accuracy, - Add description, category, or tags as needed, - SmartScan learns from your corrections, - ]} - /> - Related Links - - - Create an Expense - - , - - - Free Features in Expensify - - , - ]} - /> - - ), - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, + distance: { + content: ({styles}: {styles: ThemeStyles}) => ( + + Distance Expense + + Easily track mileage costs using Expensify’s built-in map feature. Create and submit distance-based expenses right from the web, desktop, or mobile app. + + + + Create distance expenses: Click the green + button and choose Create expense, then select Distance. Enter your + starting point and destination. You can also add stops if needed. + + , + + + Submit for approval: Choose your workspace and confirm the distance, amount, and date. Add optional notes or + categories, then click Create expense to submit the mileage expense for approval. + + , + + + Log a round-trip: To log a round-trip, use the same location for both start and finish, and include any stops along + the way. + + , + ]} + /> + + ), }, r: { children: { @@ -370,6 +250,80 @@ const helpContentMap: HelpContent = { ), }, + ':chat': { + content: ({styles}: {styles: ThemeStyles}) => ( + + Chat + + Chat is the foundation of New Expensify. Every expense, expense report, workspace, or member has an associated “chat”, which you can use to record additional + details, or collaborate with others. Every chat has the following components: + + Header + + This shows who you are chatting with (or what you are chatting about). You can press the header for more details on the chat, or additional actions to take + upon it. + + Comments + The core of the chat are its comments, which come in many forms: + + Text – Rich text messages stored securely and delivered via web, app, email, or SMS. + , + + Images & Documents – Insert photos, screenshots, movies, PDFs, or more, using copy/paste, drag/drop, or the + attach button. + , + + Expenses – Share an expense in the chat, either to simply track and document it, or to submit for reimbursement. + , + + Tasks – Record a task, and optionally assign it to someone (or yourself!). + , + ]} + /> + Actions + Hover (or long press) on a comment to see additional options, including: + + React – Throw a ♥️😂🔥 like on anything! + , + + Reply in thread – Go deeper by creating a new chat on any comment. + , + + Mark unread – Flag it for reading later, at your convenience. + , + ]} + /> + Composer + Use the composer at the bottom to write new messages: + + Markdown – Format text using bold,{' '} + italics, and{' '} + + more + + . + , + + Mention – Invite or tag anyone in the world to any chat by putting an @ in front of their email address or phone + number (e.g., @awong@marslink.web, or @415-867-5309). + , + ]} + /> + + ), + }, ':policyAdmins': { content: ({styles}: {styles: ThemeStyles}) => ( @@ -484,97 +438,135 @@ const helpContentMap: HelpContent = { }, content: ({styles}: {styles: ThemeStyles}) => ( - Chat - - Chat is the foundation of New Expensify. Every expense, expense report, workspace, or member has an associated “chat”, which you can use to record additional details, - or collaborate with others. Every chat has the following components: - - Header - - This shows who you are chatting with (or what you are chatting about). You can press the header for more details on the chat, or additional actions to take upon it. - - Comments - The core of the chat are its comments, which come in many forms: + Inbox + The Inbox is a prioritized “to do” list, highlighting exactly what you need to do next. It consists of: + Priorities + At the top of the Inbox are the most important tasks you should do first, which include: + Expense reports waiting on you, + Tasks assigned to you, + Chats that have mentioned you, + Anything you have pinned, + ]} + /> + Chats + Beneath the priorities are a list of chats (with unread chats highlighted in bold), in one of two view modes: - Text – Rich text messages stored securely and delivered via web, app, email, or SMS. + Most Recent – Lists every chat, ordered by whichever was most recently active. , - Images & Documents – Insert photos, screenshots, movies, PDFs, or more, using copy/paste, drag/drop, or the attach - button. + Focus – Only lists chats with unread messages, sorted alphabetically. + , + ]} + /> + + ), + }, + scan: { + content: ({styles}: {styles: ThemeStyles}) => ( + + Scan Receipt + SmartScan automatically extracts expense details from receipt images. + How to Scan + + Click the + button and select Create expense , - Expenses – Share an expense in the chat, either to simply track and document it, or to submit for reimbursement. + Choose Scan , + Upload an image or take a photo of your receipt, + SmartScan extracts merchant, date, amount, and currency, + Choose your workspace and add any required details, - Tasks – Record a task, and optionally assign it to someone (or yourself!). + Click Create expense , ]} /> - Actions - Hover (or long press) on a comment to see additional options, including: + What SmartScan Detects - React – Throw a ♥️😂🔥 like on anything! + Amount and currency + , + + Merchant name and location + , + + Date of purchase , - Reply in thread – Go deeper by creating a new chat on any comment. + Tax information (when visible) , - Mark unread – Flag it for reading later, at your convenience. + Category suggestions based on merchant type , ]} /> - Composer - Use the composer at the bottom to write new messages: + Supported Receipt Types - Markdown – Format text using bold, italics, - and{' '} - - more - - . + Photos - Take with your device camera , - Mention – Invite or tag anyone in the world to any chat by putting an @ in front of their email address or phone number - (e.g., @awong@marslink.web, or @415-867-5309). + Email receipts - Forward to receipts@expensify.com + , + + PDF receipts - Upload from your device + , + + Screenshots - From apps or websites , ]} /> - - Inbox - The Inbox is a prioritized “to do” list, highlighting exactly what you need to do next. It consists of: - Priorities - At the top of the Inbox are the most important tasks you should do first, which include: + Tips for Best Results Expense reports waiting on you, - Tasks assigned to you, - Chats that have mentioned you, - Anything you have pinned, + Ensure receipt text is clear and readable, + Include the full receipt in the image, + Good lighting improves accuracy, + Straight angles work better than tilted photos, ]} /> - Chats - Beneath the priorities are a list of chats (with unread chats highlighted in bold), in one of two view modes: + After Scanning + Review extracted details for accuracy, + Add description, category, or tags as needed, + SmartScan learns from your corrections, + ]} + /> + Related Links - Most Recent – Lists every chat, ordered by whichever was most recently active. + + Create an Expense + , - Focus – Only lists chats with unread messages, sorted alphabetically. + + Free Features in Expensify + , ]} /> @@ -688,7 +680,7 @@ const helpContentMap: HelpContent = { ]} /> - Learn More + Learn More ), }, + invoices: { + content: ({styles}: {styles: ThemeStyles}) => ( + + Create and Send Invoices + + Send invoices, track their status, and get paid — even if your customer isn’t on Expensify. Invoicing comes included with all Expensify subscriptions. + + + + + Set Up Invoicing: Add a business bank account to start sending and receiving invoice payments. + + , + + + Invoice Balance: Right up top, you’ll see your current invoice balance — that’s the money you’ve + collected from paid invoices. If you’ve added a bank account, this balance will transfer automatically. + + , + + + Customize Your Invoices: Make your invoices your own. Add your company name, website, and logo — + they’ll show up on every invoice you send. + + , + ]} + /> + + ), + }, 'distance-rates': { content: ({styles}: {styles: ThemeStyles}) => ( @@ -757,7 +782,14 @@ const helpContentMap: HelpContent = { /> - You can learn more about managing distance rates here ➡️ Set Distance Rates. + You can learn more about managing distance rates here ➡️{' '} + + Set Distance Rates + + . ), @@ -798,7 +830,7 @@ const helpContentMap: HelpContent = { ]} /> - Learn More + Learn More - More details on setting up the Expensify Card for your business can be found here ➡️ The Expensify Card. + More details on setting up the Expensify Card for your business can be found here ➡️{' '} + + The Expensify Card + + . ), @@ -898,7 +937,7 @@ const helpContentMap: HelpContent = { ]} /> - Learn More + Learn More - Learn more about setting up per diem rates here ➡️ Per Diem Settings. + Learn more about setting up per diem rates here ➡️{' '} + + Per Diem Settings + + . ), @@ -990,7 +1036,14 @@ const helpContentMap: HelpContent = { /> - Learn more about workspace tax settings here ➡️ Track Taxes. + Learn more about workspace tax settings here ➡️{' '} + + Track Taxes + + . ), @@ -1031,7 +1084,7 @@ const helpContentMap: HelpContent = { ]} /> - Learn More + Learn More No approval or payment permissions, ]} /> - - Adding Members - - + Adding Members + + Under Workspaces > [Workspace Name] > Members, click{' '} + Invite Member + , + Enter name, email, or phone number, + Choose a role (defaults to Member), + + Click Invite + , + ]} + /> + Alternative: Share the workspace URL or QR code from{' '} Account > Profile > Share - Managing Members Change Role: - - + Click the member’s name, + + Click Role and select new role + , + Confirm changes, + ]} + /> + Remove Member: - - Transfer Ownership of a Workspace - - Learn More + Click the member’s name, + + Click Remove from Workspace + , + Confirm removal, + ]} + /> + Transfer Ownership of a Workspace + + Go to Members and click current Owner + , + + Click Transfer Owner + , + Confirm transfer, + You become the new owner, + ]} + /> + Learn More - More details on connecting your company card program can be found here ➡️ Company Card Settings. + More details on connecting your company card program can be found here ➡️{' '} + + Company Card Settings + + . ), @@ -1211,14 +1312,62 @@ const helpContentMap: HelpContent = { Note: This setting requires the Control plan. - - + + Under Workspaces > More Features, toggle on Report fields + , + + Head to Workspaces > [Workspace Name] > Reports to add, edit, or delete fields + , + ]} + /> + You can choose from field types like Text, Date, or a List with predefined options — whatever best fits your workflow. Learn more ➡️{' '} - Enable Report Fields. + + Enable Report Fields + + . ), }, + overview: { + content: ({styles}: {styles: ThemeStyles}) => ( + + Workspace Overview + Set up the essentials — name, description, currency, address, and subscription plan — all in one spot. + + + + Choose your workspace currency: Pick a default currency. No matter what currency members use, we’ll + convert everything automatically. + + , + + + Add workspace details: Give your workspace a name, add a quick description, and drop in your company + address. These show up on reports and invoices, so make it yours. + + , + + + Manage your subscription: Your plan controls what features you get and how much you pay per active + user. Hit Explore all plans to switch things up or adjust your size. + + , + ]} + /> + + ), + }, categories: { content: ({styles}: {styles: ThemeStyles}) => ( @@ -1247,7 +1396,7 @@ const helpContentMap: HelpContent = { ]} /> - Learn More + Learn More - Learn More + Learn More - Learn More + Learn More - Learn More + Learn More ( - Reports - Virtually all data can be analyzed and reported upon in the Reports page. The major elements of this page include: - Data type - Start first by choosing the type of data you want to analyze, which can be: + Reports Page + + The Reports page helps you explore and filter all reports and related expenses. It complements the Inbox by giving you a complete view of your expense history and + what expenses and reports require your action. Use this page to create and download spending reports, track report actions, and view the recent expense activity on + your workspace(s). + + + Expenses & Reports - Expense - Individual standalone expenses. + + Managing expenses: Click on any expense row to see its details in a side panel. Use checkboxes to select multiple + expenses, then use bulk actions like Move, Download, or Delete from the action menu. + + , + + + Filters: Looking for something specific? Use filters to narrow things down by date, category, merchant, tag, + workspace, or report status. You can also combine filters with keywords for even more precise results. + , - Expense reports - Groups of expenses processed in a batch. + + Sort reports by status: - Draft – Only you can see it - Outstanding – Waiting on someone else - Approved – Ready to + pay - Done or Paid – All wrapped up + , - Chats - Comments written by you and others. + + Download what you need: Generate a report to download filtered expense data as a CSV. Perfect for spreadsheets, + monthly close, or syncing with accounting. + , + ]} + /> + + Chats + - Invoices - Expenses submitted to clients for payment. + + Viewing report previews: Each report preview shows up right in your workspace chat with the status, up to 10 + expenses, and buttons like Submit or Approve, depending on your role. + , - Trips - Travel expenses booked with Expensify Travel or scanned with SmartScan. + + Filter chats: Use filters to find the exact chat you’re looking for. + , ]} /> - Search - A quick method of narrowing the results by keyword or more. - State filter - Simple methods to filter the results by “state”, including: + + To-Do - All + + Stay on top of tasks: The To-do section shows exactly what needs your attention. This is your go-to spot to keep + things moving. + + , + + + Action items: Whether you need to submit, approve, or pay expenses, you can click the corresponding action to + complete any outstanding to-dos. + , - <> - Expenses/Expense/Invoices reports: - - Draft - Only you can see that hasn’t been shared yet., - Outstanding - Submitted to someone and awaiting action., - Approved - Approved, but awaiting payment., - Done - Fully processed, no further action needed., - Paid - Fully paid, no further action needed., - ]} - /> - , - <> - Chats: - - Unread - Not seen yet by you., - Sent - Sent by you., - Attachments - Image, movie, or document., - Links - Hyperlinks., - Pinned - Highlighted by you as important., - ]} - /> - , - <> - Trips: - - Current - Happening or in the future., Past - Already happened.]} - /> - , ]} /> - Results - The core of the Reports page are the search results themselves. + + Learn More Select a row to see additional options., Tap on a row to see more detail.]} + items={[ + + + The Reports Page + + , + + + Understanding Reports Statuses and Actions + + , + + + Suggested Search + + , + + + Search and Download Expenses + + , + ]} /> ), diff --git a/src/components/SidePanel/index.tsx b/src/components/SidePanel/index.tsx index e5e12c05c4c1..403436f1b761 100644 --- a/src/components/SidePanel/index.tsx +++ b/src/components/SidePanel/index.tsx @@ -4,13 +4,19 @@ import Help from './HelpModal'; import useSyncSidePanelWithHistory from './useSyncSidePanelWithHistory'; function SidePanel() { - const {isSidePanelTransitionEnded, shouldHideSidePanel, sidePanelTranslateX, shouldHideSidePanelBackdrop, closeSidePanel} = useSidePanel(); + const {sidePanelNVP, isSidePanelTransitionEnded, shouldHideSidePanel, sidePanelTranslateX, shouldHideSidePanelBackdrop, closeSidePanel} = useSidePanel(); + // Hide side panel once animation ends // This hook synchronizes the side panel visibility with the browser history when it is displayed as RHP. // This means when you open or close the side panel, an entry connected with it is added to or removed from the browser history, // allowing this modal to be toggled using browser's "go back" and "go forward" buttons. useSyncSidePanelWithHistory(); + // Side panel can't be displayed if NVP is undefined + if (!sidePanelNVP) { + return null; + } + if (isSidePanelTransitionEnded && shouldHideSidePanel) { return null; } diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts index 8e56da3bf89b..aa3a5b798b20 100644 --- a/src/hooks/useSidePanel.ts +++ b/src/hooks/useSidePanel.ts @@ -91,20 +91,30 @@ function useSidePanel() { }, [shouldHideSidePanel, shouldApplySidePanelOffset]); const openSidePanel = useCallback(() => { + // User shouldn't be able to open side panel if side panel NVP is undefined + if (!sidePanelNVP) { + return; + } + setIsSidePanelTransitionEnded(false); KeyboardUtils.dismiss(); SidePanelActions.openSidePanel(!isExtraLargeScreenWidth); - }, [isExtraLargeScreenWidth]); + }, [isExtraLargeScreenWidth, sidePanelNVP]); const closeSidePanel = useCallback( (shouldUpdateNarrow = false) => { + // User shouldn't be able to close side panel if side panel NVP is undefined + if (!sidePanelNVP) { + return; + } + setIsSidePanelTransitionEnded(false); SidePanelActions.closeSidePanel(!isExtraLargeScreenWidth || shouldUpdateNarrow); // Focus the composer after closing the Side Panel focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true); }, - [isExtraLargeScreenWidth], + [isExtraLargeScreenWidth, sidePanelNVP], ); return {