[HelpDot] Add platform tabs

docs/_layouts/default.html

@@ -12,6 +12,7 @@
     <script src="https://kit.fontawesome.com/263e5e8608.js" crossorigin="anonymous"></script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.js"></script>
     <script defer src="/assets/js/main.js"></script>
+    <script defer src="/assets/js/platform-tabs.js"></script>
     <script async src="https://cse.google.com/cse.js?cx=41f40d6e5c14246ff"></script>
     <!-- Google Tag Manager -->
     <script>(function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-TQBQW7CR');</script>
@@ -64,10 +65,13 @@
         <div id="article-content">
             <!-- Article title (only shown in article pages) -->
             {% if page.url contains "/articles/" %}
-            <h1 class="title">
-                {{ page.name | remove: '.md' | split: "-" |  join: " " }}
-            </h1>
-
+            <div class="title-platform-tabs">
+                <h1 class="title">
+                    {{ page.name | remove: '.md' | split: "-" |  join: " " }}
+                </h1>
+                <div id="platform-tabs">
+                </div>
+            </div>
             <div class="article-toc-content article">
                 {{ content }}
             </div>

docs/_sass/_main.scss

@@ -354,6 +354,9 @@ button {
     }
 
     .article {
+        .hidden {
+            display: none;
+        }
         img {
             display: block;
             margin: 20px auto;
@@ -842,3 +845,37 @@ button {
         }
     }
 }
+
+.title-platform-tabs {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 12px;
+    h1 {
+        padding: 0;
+    }
+
+    @include maxBreakpoint($breakpoint-tablet) {
+        flex-direction: column;
+        gap: 20px;
+    }
+}
+
+#platform-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    text-align: center;
+    font-weight: 700;
+    font-size: 13px;
+}
+
+#platform-tabs > * {
+    cursor: pointer;
+    border-radius: 20px;
+    padding: 10px 20px;
+}
+
+#platform-tabs > .active {
+    color:#fff;
+    background-color: #1A3D32;
+}

docs/articles/expensify-classic/getting-started/Using-The-App.md

@@ -2,14 +2,16 @@
 title: Using the app
 description: Streamline expense management effortlessly with the Expensify mobile app. Learn how to install, enable push notifications, and use SmartScan to capture, categorize, and track expenses. Versatile for personal and business use, Expensify is a secure and automated solution for managing your finances on the go.
 ---
+
+<div id="expensify-classic" markdown="1">
 # Overview
 The Expensify mobile app is the ultimate expense management solution that makes it effortless to track and submit your receipts and expenses. Use the app to snap a picture of your receipts, categorize and submit expenses, and even review and approve expense reports.
 # How to install the Expensify app
 To get started with Expensify on your mobile device, you need to download the app:
 1. Visit the App Store (iOS) or Google Play Store (Android).
 2. Search for "Expensify" and select the official Expensify app.
 3. Tap "Download" or "Install."
-   
+
 Once the app is installed, open it and log in with your Expensify credentials. If you don't have an Expensify account, you can create one during the sign-up process.
 # How to enable on push notifications
 Push notifications keep you informed about expense approvals, reimbursements, and more. To enable push notifications:
@@ -54,3 +56,10 @@ Expensify takes security seriously and employs encryption and other security mea
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
 
 {% include faq-end.md %}
+</div>
+<div id="new-expensify" markdown="1">
+
+# Coming soon
+
+
+</div>

docs/articles/new-expensify/workspace-and-domain-settings/Domain-Settings-Overview.md

@@ -2,7 +2,7 @@
 title: Domains
 description: Want to gain greater control over your company settings in Expensify? Read on to find out more about our Domains feature and how it can help you save time and effort when managing your company expenses. 
 ---
-
+<div id="new-expensify" markdown="1">
 # Overview
 Domains is a feature in Expensify that allows admins to have more nuanced control over a specific Expensify activity, as well as providing a bird’s eye view of company card expenditure. Think of it as your command center for things like managing user account access, enforcing stricter Workspace rules for certain groups, or issuing cards and reconciling statements.
 There are several settings within Domains that you can configure so that you have more control and visibility into your organization’s settings. Those features are:
@@ -140,3 +140,4 @@ You can manage multiple domains by adding them through **Settings > Domains > Ne
 Claiming a domain is limited to users with matching email domains, and allows Workspace Admins with a company email to manage bills, company cards, and reconciliation. Verifying a domain offers extra features and security.
 
 {% include faq-end.md %}
+</div>

docs/assets/js/main.js

@@ -165,6 +165,37 @@ window.addEventListener('load', () => {
     insertElementAfter(searchInput, searchLabel);
 });
 
+const tocbotOptions = {
+    // Where to render the table of contents.
+    tocSelector: '.article-toc',
+
+    // Where to grab the headings to build the table of contents.
+    contentSelector: '',
+
+    // Disable the collapsible functionality of the library by
+    // setting the maximum number of heading levels (6)
+    collapseDepth: 6,
+    headingSelector: 'h1, h2, h3, summary',
+
+    // Main class to add to lists.
+    listClass: 'lhn-items',
+
+    // Main class to add to links.
+    linkClass: 'link',
+
+    // Class to add to active links,
+    // the link corresponding to the top most heading on the page.
+    activeLinkClass: 'selected-article',
+
+    // Headings offset between the headings and the top of the document (requires scrollSmooth enabled)
+    headingsOffset: 80,
+    scrollSmoothOffset: -80,
+    scrollSmooth: true,
+
+    // If there is a fixed article scroll container, set to calculate titles' offset
+    scrollContainer: 'content-area',
+};
+
 window.addEventListener('DOMContentLoaded', () => {
     injectFooterCopywrite();
 
@@ -179,38 +210,53 @@ window.addEventListener('DOMContentLoaded', () => {
         buttonCloseSidebar.addEventListener('click', closeSidebar);
     }
 
-    if (window.tocbot) {
-        window.tocbot.init({
-            // Where to render the table of contents.
-            tocSelector: '.article-toc',
+    const expensifyClassicTab = document.getElementById('platform-tab-expensify-classic');
+    const newExpensifyTab = document.getElementById('platform-tab-new-expensify');
 
-            // Where to grab the headings to build the table of contents.
-            contentSelector: '.article-toc-content',
+    const expensifyClassicContent = document.getElementById('expensify-classic');
+    const newExpensifyContent = document.getElementById('new-expensify');
 
-            // Disable the collapsible functionality of the library by
-            // setting the maximum number of heading levels (6)
-            collapseDepth: 6,
-            headingSelector: 'h1, h2, h3, summary',
+    let contentSelector;
+    if (expensifyClassicContent) {
+        contentSelector = '#expensify-classic';
+    } else if (newExpensifyContent) {
+        contentSelector = '#new-expensify';
+    } else {
+        contentSelector = '.article-toc-content';
+    }
 
-            // Main class to add to lists.
-            listClass: 'lhn-items',
+    if (window.tocbot) {
+        window.tocbot.init({
+            ...tocbotOptions,
+            contentSelector,
+        });
+    }
 
-            // Main class to add to links.
-            linkClass: 'link',
+    // eslint-disable-next-line es/no-optional-chaining
+    expensifyClassicTab?.addEventListener('click', () => {
+        expensifyClassicTab.classList.add('active');
+        expensifyClassicContent.classList.remove('hidden');
 
-            // Class to add to active links,
-            // the link corresponding to the top most heading on the page.
-            activeLinkClass: 'selected-article',
+        newExpensifyTab.classList.remove('active');
+        newExpensifyContent.classList.add('hidden');
+        window.tocbot.refresh({
+            ...tocbotOptions,
+            contentSelector: '#expensify-classic',
+        });
+    });
 
-            // Headings offset between the headings and the top of the document (requires scrollSmooth enabled)
-            headingsOffset: 80,
-            scrollSmoothOffset: -80,
-            scrollSmooth: true,
+    // eslint-disable-next-line es/no-optional-chaining
+    newExpensifyTab?.addEventListener('click', () => {
+        newExpensifyTab.classList.add('active');
+        newExpensifyContent.classList.remove('hidden');
 
-            // If there is a fixed article scroll container, set to calculate titles' offset
-            scrollContainer: 'content-area',
+        expensifyClassicTab.classList.remove('active');
+        expensifyClassicContent.classList.add('hidden');
+        window.tocbot.refresh({
+            ...tocbotOptions,
+            contentSelector: '#new-expensify',
         });
-    }
+    });
 
     document.getElementById('header-button').addEventListener('click', toggleHeaderMenu);
 

docs/assets/js/platform-tabs.js

@@ -0,0 +1,23 @@
+const expensifyClassicContent = document.getElementById('expensify-classic');
+const newExpensifyContent = document.getElementById('new-expensify');
+
+const platformTabs = document.getElementById('platform-tabs');
+
+if (expensifyClassicContent) {
+    const tab = document.createElement('div');
+    tab.innerHTML = 'Expensify classic';
+    tab.id = 'platform-tab-expensify-classic';
+    tab.classList.add('active');
+    platformTabs.appendChild(tab);
+}
+
+if (newExpensifyContent) {
+    const tab = document.createElement('div');
+    tab.innerHTML = 'New expensify';
+    tab.id = 'platform-tab-new-expensify';
+
+    if (!expensifyClassicContent) {
+        tab.classList.add('active');
+    }
+    platformTabs.appendChild(tab);
+}