Merge pull request Expensify#67159 from software-mansion-labs/chore/regenerate-help-content

[SIDE PANEL] Update the logic and fix help panel appearing without NVP

Author: Beamanator

help/_plugins/SitePostRender.rb

@@ -107,7 +107,8 @@ def self.analyze_used_components(content)
         'View' => content.include?('<View'),
         'Text' => content.include?('<Text'),
         'TextLink' => content.include?('<TextLink'),
-        'BulletList' => content.include?('<BulletList')
+        'BulletList' => content.include?('<BulletList'),
+        'NumberedList' => content.include?('<NumberedList')
       }
       components.select { |_, used| used }.keys
     end
@@ -126,6 +127,7 @@ def self.generate_imports(components)
       component_imports << "import BulletList from '@components/SidePanel/HelpComponents/HelpBulletList';" if components.include?('BulletList')
       component_imports << "import Text from '@components/Text';" if components.include?('Text')
       component_imports << "import TextLink from '@components/TextLink';" if components.include?('TextLink')
+      component_imports << "import NumberedList from '@components/SidePanel/HelpComponents/HelpNumberedList';" if components.include?('NumberedList')
 
       # Add style imports
       base_imports << "import type {ThemeStyles} from '@styles/index';"
@@ -135,6 +137,7 @@ def self.generate_imports(components)
 
     def self.generate_ts_output(import_block, help_content_string)
       <<~TS
+        /* eslint-disable react/jsx-key */
         /* eslint-disable react/no-unescaped-entities */
         /* eslint-disable @typescript-eslint/naming-convention */
         #{import_block}
@@ -199,6 +202,7 @@ def self.html_node_to_RN(node, indent_level = 0)
         'div' => 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}<Text style={[styles.textHeadline#{node.name.upcase}, styles.mv4]}>#{CGI.escapeHTML(node.text).strip}</Text>"
+      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 style={[#{classes.join(', ')}]}>#{text}</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)}<Text style={styles.textNormal}>#{li_parts.join.strip}</Text>"
+        end
+      end
+
+      <<~TS.chomp
+        #{'  ' * indent_level}<NumberedList
+        #{'  ' * indent_level}  styles={styles}
+        #{'  ' * indent_level}  items={[
+        #{items.join(",\n")}
+        #{'  ' * indent_level}  ]}
+        #{'  ' * indent_level}/>
+      TS
+    end
+
     def self.process_list_item(node, indent_level)
       '' # handled in <ul>
     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}<Text style={[#{style_classes.join(', ')}]}>#{inner.strip}</Text>"
     end

…reportID/distance/:backToReport/index.md help/ref/distance/index.mdhelp/ref/:action/:iouType/start/:transactionID/:reportID/distance/:backToReport/index.md renamed to help/ref/distance/index.md help/ref/:action/:iouType/start/:transactionID/:reportID/distance/:backToReport/index.md renamed to help/ref/distance/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**).

help/ref/r/:chat/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.

help/ref/r/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,17 +50,13 @@ 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**
 2. Click **Transfer Owner** 
 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)

…ID/:reportID/scan/:backToReport/index.md help/ref/scan/index.mdhelp/ref/:action/:iouType/start/:transactionID/:reportID/scan/:backToReport/index.md renamed to help/ref/scan/index.md help/ref/:action/:iouType/start/:transactionID/:reportID/scan/:backToReport/index.md renamed to help/ref/scan/index.md

@@ -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) => (
+        <View
+            // eslint-disable-next-line react/no-array-index-key
+            key={`numbered-list-item-${index}`}
+            style={[styles.flexRow, styles.alignItemsStart, styles.mt3]}
+        >
+            <Text style={[styles.textNormal, styles.pr2, styles.userSelectNone]}>{`${index + 1}.`}</Text>
+            <Text style={[styles.flex1]}>{item}</Text>
+        </View>
+    ));
+}
+
+export default HelpNumberedList;