[HelpDot] add selector

docs/_includes/end-option.html

@@ -0,0 +1 @@
+</div>

docs/_includes/end-selector.html

@@ -0,0 +1 @@
+</div>

docs/_includes/option.html

@@ -0,0 +1 @@
+<div class="option-{{ include.value }}" markdown="1">

docs/_includes/selector.html

@@ -0,0 +1,9 @@
+{% assign values = include.values | split: "," %}
+
+<div class="selector-container">
+
+<select class="selector" onchange="selectOption(this)">
+    {% for value in values %}
+        <option value="option-{{ value | strip | downcase }}">{{ value | strip | capitalize }}</option>
+    {% endfor %}
+</select>

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/selector.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>

docs/_sass/_main.scss

@@ -459,6 +459,49 @@ button {
             }
         }
 
+        .selector-container {
+            background-color: $color-highlightBG;
+            display: flex;
+            flex-direction: row-reverse;
+            gap: 20px;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            justify-content: space-between;
+            * > ol, ul {
+                padding: 0;
+            }
+
+            @include maxBreakpoint($breakpoint-tablet) {
+                flex-direction: column;
+            }
+        }
+
+        select {
+            height: 28px;
+            border-radius: 20px;
+            padding: 0px 26px 0px 12px;
+            color: $color-text;
+            font-size: 11px;
+            font-weight: 700;
+            text-align: center;
+            cursor: pointer;
+
+            @include maxBreakpoint($breakpoint-tablet) {
+                width: 100px;
+            }
+
+        }
+
+        select {
+            background: url("/assets/images/down.svg") no-repeat right $color-button-background;
+            background-size: 12px;
+            background-position-x: 85%;
+            appearance: none !important;
+            -moz-appearance: none !important;
+            -webkit-appearance: none !important;
+        }
+
         .info {
             padding: 12px;
             border-radius: 8px;
@@ -862,3 +905,7 @@ button {
         }
     }
 }
+
+.hidden {
+    display: none;
+}

docs/articles/expensify-classic/getting-started/Join-your-company's-workspace.md

@@ -0,0 +1,258 @@
+---
+title: Join your company's workspace
+description: Get started with Expensify as an employee or other company member
+---
+<div id="expensify-classic" markdown="1">
+
+# Overview
+
+Welcome to Expensify! If you received an invitation to join your company’s Expensify workspace, follow the steps below to get started. 
+
+# 1. Download the mobile app
+
+Upload your expenses and check your reports right from your phone by downloading the Expensify mobile app. You can search for “Expensify” in the app store, or tap one of the links below. 
+
+[iOS](https://apps.apple.com/us/app/expensify-expense-tracker/id471713959) 
+| [Android](https://play.google.com/store/apps/details?id=org.me.mobiexpensifyg&hl=en_US&gl=US)
+
+# 2. Add your name and photo
+
+{% include selector.html values="desktop, mobile" %}
+{% include option.html value="desktop" %}
+<ol type="a">
+   <li>Click the profile image at the top of the main menu.</li>
+   <li>Hover over the profile picture and click <b>Change</b>.</li>  
+   <li>Update your profile picture and name.  
+       <ul>
+           <li>Name: Enter your first and last name into the fields and click <b>Update</b>. Note that this name will be visible to anyone in your company workspace.</li>
+           <li>Photo: Click <b>Add Photo</b>.</li>
+       </ul>
+   </li>
+</ol>
+
+{% include end-option.html %}
+
+{% include option.html value="mobile" %}
+
+<ol type="a">
+   <li>Tap the ☰ menu icon in the top left.</li>
+   <li>Tap the profile picture icon.</li>  
+   <li>Tap the Edit icon next to your name and update your name or photo.  
+       <ul>
+           <li>Name: Enter your first and/or last name into the fields and tap <b>Update</b>. Note that this name will be visible to anyone in your company workspace.</li>
+           <li>Photo: Tap <b>Upload Photo</b> and either:</li>
+               <ul>
+                  <li>Tap the capture button to take a new photo.</li>
+                  <li>Tap the photo icon on the left to select a saved photo.</li>
+               </ul>
+       </ul>
+   </li>
+</ol>
+
+{% include end-option.html %}
+{% include end-selector.html %}
+
+
+# 3. Meet Concierge
+Your personal assistant, Concierge, lives on your Expensify Home page on both desktop and the mobile app.
+
+Concierge will walk you through setting up your account and also provide:
+<ul>
+   <li>Reminders to do things like submit your expenses</li>
+   <li>Alerts when more information is needed on an expense report</li>
+   <li>Updates on new and improved account features</li>
+</ul>
+
+You can also get support at any time by clicking the green chat bubble in the right corner. This will open a chat with Concierge where you can ask questions and receive direct support. 
+
+# 4. Learn how to add an expense 
+As an employee, you may need to document reimbursable expenses (like business travel paid for with personal funds) or non-reimbursable expenses (like a lunch paid for with a company card). You can create an expense automatically by SmartScanning a receipt, or you can enter them manually. 
+
+## SmartScan a receipt
+
+You can upload pictures of your receipts to Expensify and SmartScan will automatically capture the receipt details including the merchant, date, total, and currency.
+
+{% include selector.html values="desktop, mobile" %}
+{% include option.html value="desktop" %}
+<ol type="a">
+   <li>Click the <b>Expenses</b> tab.</li>
+   <li>Click the + icon in the top right and select <b>Scan Receipt</b>.</li>  
+   <li>Upload a saved image of a receipt.</li>   
+</ol> 
+
+{% include end-option.html %}
+
+{% include option.html value="mobile" %}
+<ol type="a">
+   <li>Open the mobile app and tap the camera icon in the bottom right corner.</li>
+   <li>Upload or take a photo of your receipt.</li>  
+      <ul>
+         <li>Upload a photo: Click the photo icon in the left corner and select the image from your device.</li>
+         <li>Take a photo: Click the camera icon in the right corner to select the mode, make sure all of the transaction details are clearly visible, and then take the photo.</li>
+      </ul>
+      <li>Normal Mode: Upload one receipt.</li>
+      <li>Rapid Fire Mode: Upload multiple receipts at once.</li>
+</ol>
+{% include end-option.html %}
+{% include end-selector.html %}
+
+You can open any receipt and select **Fill out details myself** to add or edit the merchant, date, total, description, category, or add attendees who took part in the expense. You can also check that the expense is correctly labeled as reimbursable or non-reimbursable, and split the expense if multiple expenses are included on one receipt.
+
+*Note: You can also email receipts to SmartScan by sending them to [email protected] from an email address tied to your Expensify account (either a primary or secondary email). SmartScan will automatically pull all of the details from the receipt, fill them in for you, and add the receipt to the Expenses tab on your account.*
+
+## Manually enter an expense
+
+{% include selector.html values="desktop, mobile" %}
+
+{% include option.html value="desktop" %}
+<ol type="a">
+   <li>Click the <b>Expenses</b> tab.</li>
+   <li>Click the + icon in the top right.</li>  
+   <li>Select the type of expense and enter the expense details.</li>
+       <ul>
+           <li>Manually create: Manually enter receipt details.</li>
+           <li>Scan receipt: Upload a saved image of a receipt.</li>
+           <li>Create multiple: Upload expenses in bulk.</li>
+           <li>Time: Create an expense based on hours.</li>
+           <li>Distance: Create an expense based on distance.</li>
+               <ul>
+                  <li>Manually Create: Manually enter the distance details for the expense.</li>
+                  <li>Create from Map: Enter the start and end destination and Expensify will help you create a receipt for the trip.</li>
+               </ul>
+       </ul>
+  <li>Click <b>Save</b>.</li>
+</ol>             
+{% include end-option.html %}
+
+{% include option.html value="mobile" %}
+<ol type="a">
+   <li>Tap the ☰ menu icon in the top left.</li>
+   <li>Tap <b>Expenses</b>.</li>  
+   <li>Tap the + icon in the top right.</li>
+   <li>Tap the correct expense type and enter the expense details.</li>
+       <ul>
+           <li>Manually create: Manually enter receipt details.</li>
+           <li>Time: Enter work time and rate.</li>
+           <li>Manually create (Distance): Manually enter trip details by total distance.</li>
+           <li>Odometer: Manually enter trip details by start and end odometer readings.</li>
+           <li>Start GPS: Track distance while using the Expensify app to automatically calculate the distance in real time during the trip.</li>
+       </ul>
+  <li>Tap <b>Save</b>.</li>
+</ol>           
+{% include end-option.html %}
+
+{% include end-selector.html %}
+
+# 5. Learn how to create & submit an expense report 
+
+Once you’ve created your expenses, they may be automatically added to an expense report if your company has this feature enabled. If not, your next step will be to add your expenses to a report and submit them for payment.
+
+{% include selector.html values="Desktop, Mobile" %}
+
+{% include option.html value="desktop" %}
+
+<ol type="a">
+   <li>Click the <b>Reports</b> tab.</li>
+   <ul>
+      <li>If a report has been automatically created for your most recently submitted expense, then you don’t have to do anything else—your report is already created and will also be automatically submitted.</li>
+      <li>If a report has not been automatically created, follow the steps below.</li>
+   </ul>
+   <li>Click <b>New Report</b>, or click the New Report dropdown and select <b>Expense Report</b>.</li> 
+   <li>Click <b>Add Expenses</b>.</li> 
+   <li>Click an expense to add it to the report.</li>
+   <ul>
+      <li>If an expense you already added does not appear in the list, use the filter on the left to search by the merchant name or change the date range. <i>Note: Only expenses that are not already on a report will appear.</i></li>
+   </ul>
+   <li>Once all your expenses are added to the report, click the X to close the pop-up.</li>
+   <li>(Optional) Make any desired changes to the report and/or expenses.</li>
+   <ul>
+      <li>Click the Edit icon next to the report name to change it. If this icon is not visible, the option has been disabled by your workspace.</li>
+      <li>Click the X icon next to an expense to remove it from the report.</li>
+      <li>Click the Expense Details icon to review or edit the expense details.</li>
+      <li>At the bottom of the report, add comments to include more information.</li>
+      <li>Click the Attachments icon to add additional attachments.</li>
+   </ul>
+   <li>When the report is ready to send for approval, click <b>Submit</b>.</li>
+   <li>Enter the details for who will receive a notification email about your report and what they will receive.</li>
+   <ul>
+      <li>To: Enter the name(s) who will be approving your report (if they are not already listed).</li>
+      <li>CC: Enter the email address of anyone else who should be notified that your expense report has been submitted. Add a comma between each email address if adding more than one.</li>
+      <li>Memo: Enter any relevant notes.</li>
+      <li>Attach PDF: Select this checkbox to attach a copy of your report to the email.</li>
+   </ul>
+   <li>Click <b>Send</b>.</li>
+</ol>
+
+{% include end-option.html %}
+
+{% include option.html value="mobile" %}
+<ol type="a">
+   <li>Tap the ☰ menu icon in the top left.</li>
+   <li>Tap <b>Reports</b>.</li>
+      <ul>
+         <li>If a report has been automatically created for your most recently submitted expense, then you don’t have to do anything else—your report is already created and will also be automatically submitted.</li>
+         <li>If a report has not been automatically created, follow the steps below.</li>
+      </ul>
+   <li>Tap the + icon and tap <b>Expense Report</b>.</li> 
+   <li>Tap <b>Add Expenses</b>, then tap an expense to add it to the report. Repeat this step until all desired expenses are added. <i>Note: Only expenses that are not already on a report will appear.</i></li> 
+   <li>(Optional) Make any desired changes to the report and/or expenses.</li>
+       <ul>
+          <li>Tap the report name to change it.</li>
+          <li>Tap an expense to review or edit the expense details.</li>
+          <li>At the bottom of the report, add comments to include more information.</li>
+          <li>Tap the Attachments icon to add additional attachments.</li>
+       </ul>
+   <li>When the report is ready to send for approval, tap <b>Submit Report</b>. </li>
+   <li>Add any additional sending details and tap <b>Submit</b>.</li>
+   <li>Enter the details for who will receive a notification email about your report and what they will receive.</li>
+      <ul>
+        <li>To: Enter the name(s) who will be approving your report (if they are not already listed).</li>
+        <li>CC: Enter the email address of anyone else who should be notified that your expense report has been submitted. Add a comma between each email address if adding more than one.</li>
+        <li>Memo: Enter any relevant notes.</li>
+        <li>Attach PDF: Select this checkbox to attach a copy of your report to the email.</li>
+      </ul>
+   <li>Tap <b>Submit</b>.</li>
+   </li>
+</ol>
+{% include end-option.html %}
+
+{% include end-selector.html %}
+
+# 6. Add a secondary login
+
+Connect your personal email address as a secondary login so you always have access to your Expensify account, even if your employer changes.  
+
+*Note: This process is currently not available from the mobile app and must be completed from the Expensify website.*
+
+<ol type="a">
+   <li>Hover over Settings, then click <b>Account</b>.</li>
+   <li>Under the Account Details tab, scroll down to the Secondary Logins section and click <b>Add Secondary Login</b>.</li>
+   <li>Enter the email address or phone number you wish to use as a secondary login. For phone numbers, be sure to include the international code, if applicable.</li>
+   <li>Find the email or text message from Expensify containing the Magic Code and enter it into the field to add the secondary login.</li>
+</ol>
+
+# 7. Secure your account
+
+Add an extra layer of security to help keep your financial data safe and secure by enabling two-factor authentication. This will require you to enter a code generated by your preferred authenticator app (like Google Authenticator or Microsoft Authenticator) when you log in.
+
+*Note: This process is currently not available from the mobile app and must be completed from the Expensify website.*
+
+<ol type="a">
+   <li>Hover over Settings, then click <b>Account</b>.</li>
+   <li>Under the Account Details tab, scroll down to the Two Factor Authentication section and enable the toggle.</li>
+   <li>Save a copy of your backup codes. This step is critical—You will lose access to your account if you cannot use your authenticator app and do not have your recovery codes.</li>
+   <ul>
+      <li>Click <b>Download</b> to save a copy of your backup codes to your computer.</li>
+      <li>Click <b>Copy</b> to paste the codes into a document or other secure location.</li>
+   </ul>
+   <li>Click <b>Continue</b>.</li>
+   <li>Download or open your authenticator app and either:</li>
+   <ul>
+      <li>Scan the QR code shown on your computer screen.</li>
+      <li>Enter the 6-digit code from your authenticator app into Expensify and click <b>Verify</b>.</li>
+   </ul>
+</ol>
+
+When you log in to Expensify in the future, you’ll open your authenticator app to get the code and enter it into Expensify. A new code regenerates every few seconds, so the code is always different. If the code time runs out, you can generate a new code as needed. 
+
+</div>

docs/assets/js/selector.js

@@ -0,0 +1,35 @@
+function syncSelectors(selectedIndex) {
+    const allSelects = document.querySelectorAll('select');
+    for (let i = 0; i < allSelects.length; i++) {
+        allSelects[i].selectedIndex = selectedIndex;
+    }
+}
+
+function selectOption(select) {
+    if (!select) {
+        return;
+    }
+
+    syncSelectors(select.selectedIndex);
+
+    const allOptions = Array.from(select.options);
+    const selectedValue = select.options[select.selectedIndex].value;
+
+    // Hide section that isn't selected, and show section that is selected.
+    allOptions.forEach((option) => {
+        if (option.value === selectedValue) {
+            const toShow = document.getElementsByClassName(option.value);
+            for (let i = 0; i < toShow.length; i++) {
+                toShow[i].classList.remove('hidden');
+            }
+            return;
+        }
+
+        const toHide = document.getElementsByClassName(option.value);
+        for (let i = 0; i < toHide.length; i++) {
+            toHide[i].classList.add('hidden');
+        }
+    });
+}
+
+window.onload = selectOption(document.getElementsByClassName('selector')[0]);