Skip to content

[No QA] Add images to Expensify Card articles - #100116

Merged
VictoriaExpensify merged 4 commits into
mainfrom
helpsite-expensifycard-images
Sep 2, 2026
Merged

[No QA] Add images to Expensify Card articles #100116
VictoriaExpensify merged 4 commits into
mainfrom
helpsite-expensifycard-images

Conversation

@stephanieelliott

Copy link
Copy Markdown
Contributor

Adds the first set of images for https://github.com/Expensify/Expensify/issues/665767

@stephanieelliott
stephanieelliott requested a review from a team September 2, 2026 03:31
@stephanieelliott stephanieelliott self-assigned this Sep 2, 2026
@stephanieelliott
stephanieelliott requested review from a team as code owners September 2, 2026 03:31
@stephanieelliott stephanieelliott added the HelpDot Apply this label if the issue relates to ExpensifyHelp label Sep 2, 2026
@melvin-bot
melvin-bot Bot requested review from heyjennahay and removed request for a team September 2, 2026 03:31
@melvin-bot

melvin-bot Bot commented Sep 2, 2026

Copy link
Copy Markdown

Concierge reviewer checklist:

  • I have verified the accuracy of the article
    • The article is within a hub that makes sense, and the navigation is correct
    • All processes, screenshots, and examples align with current product behavior.
    • All links within the doc have been verified for correct destination and functionality.
  • I have verified the readability of the article
    • The article's language is clear, concise, and free of jargon.
    • The grammar, spelling, and punctuation are correct.
    • The article contains at least one image, or that an image is not necessary
  • I have verified the formatting of the article
    • The article has consistent formatting (headings, bullet points, etc.) with other HelpDot articles and that aligns with the HelpDot formatting standards.
    • The article has proper text spacing and breaks for readability.
  • I have verified the article has the appropriate tone and style
    • The article's tone is professional, friendly, and suitable for the target audience.
    • The article's tone, terminology, and voice are consistent throughout.
  • I have verified the overall quality of the article
    • The article is not missing any information, nor does it contain redundant information.
    • The article fully addresses user needs.
  • I have verified that all requested improvements have been addressed

For more detailed instructions on completing this checklist, see How do I review a HelpDot PR as a Concierge Team member?

cc @VictoriaExpensify

@melvin-bot
melvin-bot Bot requested review from VictoriaExpensify and chuckdries and removed request for a team September 2, 2026 03:31
@melvin-bot

melvin-bot Bot commented Sep 2, 2026

Copy link
Copy Markdown

@chuckdries @VictoriaExpensify One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

@@ -121,6 +121,8 @@ Each card shows one of the following statuses:

**Note:** The **Status** column is hidden on narrow and medium screens. Widen your browser window or view the list on a larger screen to see it.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alt text defect: The parenthesis is unbalanced — (Pending order, Shipped, Active, Inactive] opens with ( but never closes it before ]. Add the closing paren: ...showing the badges (Pending order, Shipped, Active, Inactive).

keywords: [Expensify Card, card declined, Smart Limit, inactive card, activation issues, card won’t work, workspace admin, cardholder, Wallet, domain limit]
---

<div id="new-expensify" markdown="1">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Structural regression: Removing the opening <div id="new-expensify" markdown="1"> leaves the matching closing </div> (near the end of the file) orphaned, producing invalid HTML. Either restore this opening tag or also remove the trailing </div>.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a31bbb3ca9

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".


<div id="new-expensify" markdown="1">

You can troubleshoot most Expensify Card issues in just a few steps. This guide walks you through the most common problems — like declined transactions, activation issues, or Smart Limit errors — and shows how to get your card working again.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Restore the opening wrapper or remove its closing tag

Removing the opening <div id="new-expensify" markdown="1"> leaves the existing </div> at the end of this article unmatched. When Jekyll inserts this content inside the layout's article container, that closing tag can close the surrounding layout <div> early, leaving the help and footer markup incorrectly nested; keep the wrapper paired or remove both tags.

Useful? React with 👍 / 👎.

- Filtering by **Bank account** keeps **Download statement** available. Each settlement is withdrawn from a single bank account, so this filter keeps or removes whole settlements rather than narrowing the transactions inside one. This is useful for isolating an Expensify Card program that settles to its own bank account.
- With no workspace filter applied, the statement covers the entire settlement across every workspace it spans. If you apply a single workspace filter, the statement is scoped to that workspace's transactions only.

![The Expensify Card reconciliation list with the Withdrawn date-range filter open, several settlement withdrawal rows, and one row expanded to reveal its individual expenses]({{site.url}}/assets/images/Expensify_Card_Withdrawal_Transactions.png){:width="100%"}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Use a screenshot of the documented reconciliation view

The linked image shows the older Spend > Card statements screen with Feed: Expensify Card and Posted: Last Statement filters and rows grouped by card. It does not show the Reconciliation > Expensify Card view, a Withdrawn date-range filter, or settlement-withdrawal rows described by this article and its alt text, so readers cannot map the screenshot to any of the surrounding instructions.

Useful? React with 👍 / 👎.


**Note:** The **Status** column is hidden on narrow and medium screens. Widen your browser window or view the list on a larger screen to see it.

![The Expensify Card list with the Status column visible, showing the badges (Pending order, Shipped, Active, Inactive]({{site.url}}/assets/images/Expensify_Card_Status_Column.png){:width="100%"}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Align the status screenshot and alternative text

The referenced image contains only plain Active and Inactive values, while this alternative text says that it shows badges for Pending order, Shipped, Active, and Inactive. Screen-reader users receive an inaccurate description, and sighted readers cannot see examples of half the statuses the image is intended to illustrate; update the asset or describe only what it actually shows.

Useful? React with 👍 / 👎.

@github-actions

github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

HelpDot Documentation Review

Overall Assessment

This PR adds four screenshots to three existing Expensify Card articles (Set Up and Manage, Troubleshoot, and View and Reconcile) and removes an opening new-expensify wrapper div from the Troubleshoot article. The changes are small and purposeful: the images illustrate the Status column, CSV export, admin settlement/limit page, and the reconciliation withdrawal view, all genuinely visual states that meet the Screenshot Decision Criteria in HELP_AUTHORING_GUIDELINES.md Section 8. Scoring reflects only the added/modified lines in the diff.

Scores Summary

  • Readability: 8/10 - Images sit directly after the sections they support, aiding orientation. One alt-text string has an unbalanced parenthesis that reads awkwardly.
  • AI Readiness: 8/10 - Descriptive alt text embeds full feature names and UI labels (Status column, Export as CSV, Settle Balance), supporting retrieval. No headings or metadata changed, so hierarchy is unaffected.
  • Style Compliance: 6/10 - UI terminology in alt text matches the product, but removing the opening wrapper div leaves an orphaned closing div tag, and there are minor alt-text quoting/parenthesis issues.

Key Findings

  • Must fix, orphaned closing tag: The diff removes the opening new-expensify wrapper div at the top of Troubleshoot-Expensify-Card-issues.md, but the matching closing div remains near the end of the file (currently line 105). This unbalanced tag can break rendering. Either restore the opening div or remove the closing div too.
  • Alt-text parenthesis: In Set-Up-and-Manage-the-Expensify-Card-US.md, the Status column image alt text opens a parenthesis (Pending order, Shipped, Active, Inactive that is never closed. Add the closing parenthesis.
  • Positive, good screenshot judgment: All four images support rather than replace the text and capture states hard to describe in words alone (filter panels, expanded rows, badge styles, admin balance page). Aligns with the orient and highlight-a-control criteria.
  • Positive, descriptive UI-exact alt text: Alt text references exact labels and navigation paths (e.g. Workspaces > [Workspace Name] > Expensify Card), good for accessibility and AI retrieval.
  • Minor: Some alt text wraps UI labels in straight quotes (the selected dropdown, the Settle Balance button). Naming conventions discourage quotation marks around UI labels; consider removing them for consistency.

Recommendations

  • Priority 1: Resolve the unbalanced opening/closing div in the Troubleshoot article before merge.
  • Priority 2: Close the parenthesis in the Status column image alt text.
  • Optional: Normalize quoting of UI labels within alt text and confirm each new image filename maps to the intended screenshot.

Files Reviewed

  • docs/articles/new-expensify/expensify-card/Set-Up-and-Manage-the-Expensify-Card-US.md, 2 images added; alt-text parenthesis fix needed.
  • docs/articles/new-expensify/expensify-card/Troubleshoot-Expensify-Card-issues.md, 1 image added; orphaned closing div must be resolved.
  • docs/articles/new-expensify/expensify-card/View-and-Reconcile-Expensify-Card-Expenses.md, 1 image added; well placed, no issues.
  • docs/assets/images/Expensify_Card image PNGs (4 new binaries), referenced correctly by the articles.

Note: This is a summary review; the div and parenthesis items above are the specific line-level details.

@github-actions github-actions Bot changed the title Add images to Expensify Card articles [No QA] Add images to Expensify Card articles Sep 2, 2026
@OSBotify

OSBotify commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

@VictoriaExpensify
VictoriaExpensify merged commit 3a621ed into main Sep 2, 2026
16 of 21 checks passed
@VictoriaExpensify
VictoriaExpensify deleted the helpsite-expensifycard-images branch September 2, 2026 10:50
@melvin-bot melvin-bot Bot added the Emergency label Sep 2, 2026
@melvin-bot

melvin-bot Bot commented Sep 2, 2026

Copy link
Copy Markdown

@VictoriaExpensify looks like this was merged without a test passing. These checks had not passed on a31bbb3 when it was merged:

  • checklist (no successful run)

Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

@chuckdries

Copy link
Copy Markdown
Contributor

Failed check was just the review checklist, but this PR is just helpdot, and it was approved by an employee. Removing emergency label

@OSBotify

OSBotify commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by https://github.com/VictoriaExpensify in version: 9.4.69-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@OSBotify

OSBotify commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/francoisl in version: 9.4.69-1 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

Bundle Size Analysis (Sentry):

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

HelpDot Apply this label if the issue relates to ExpensifyHelp

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants