[$250] Improvement: Make the "press the green + button" text in the "Submit an Expense" task on mobile a clickable emoji

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.79-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Login with new account
2. Choose "Get paid back by my employer" option in onboarding
3. Click the "Submit expense" task from Concierge

Expected Result:

Green + button visible or hyperlinked in the task

Create a :global_create: emoji in NewDot that copies :global-create:
Add a hyperlink like expensify://global-create that just opens Global Create
Update the text to be 1. Press the :global-create: button
This way:
The :global-create: will be visible right there
They can click it without leaving the task

Actual Result:

Green + button is not visible and not hyperlinked in the task

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021874860195609179779
• Upwork Job ID: 1874860195609179779
• Last Price Increase: 2025-01-09

Issue Owner

Current Issue Owner: @c3024

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[anmurali]

We need to actually create this FE element I think? It doesn't exist right now...

[anmurali]

Turns out we need to actually figure out how to support custom emojis or inline images to accomplish this. As a trivial to implement improvement, let's just make Click the green + button a hyperlink that opens the global create menu without leaving the task.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021874860195609179779

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[Amoralchik]

Edited by proposal-police: This proposal was edited at 2025-01-13 06:02:19 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Make the "press the green + button" text in the "Submit an Expense" task clickable.

What is the root cause of that problem?

"Click the green + button" text is currently plain text and not interactive.

What changes do you think we should make in order to solve the problem?

So to make it a custom emoji-like button, we need to create a custom tag
Add a Custom Tag in RenderHTML Configuration:

'custom-emoji': HTMLElementModel.fromCustomModel({tagName: 'custom-emoji', contentModel: HTMLContentModel.textual}),

Define the Custom Renderer for our tag:

'custom-emoji': CustomEmojiRenderer,

Create CustomEmojiRenderer

function CustomEmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
    if (tnode.attributes.emoji === 'action-menu-icon') {
        return <FloatingActionEmoji />;
    }

    // ...
}

Now we need to add a tag to the description by simply changing the line to:

'1. Press the <custom-emoji emoji="action-menu-icon" /> button.\n' // or Click the

Add some styles to FloatingActionButton and prop to get it in emoji-like size
for myself I also created a FloatingActionEmoji which gave me but we can just put it like that

But, in getParsedComment we use Parser.replace and lodashEscape what for safety rules change our description and things like "<" ">" to "&lt;" "&gt;" and other

So I use this changes:

let result =
    text.length <= CONST.MAX_MARKUP_LENGTH
        ? Parser.replace(textWithMention, {shouldEscapeText: parsingDetails?.shouldEscapeText, disabledRules: isGroupPolicyReport ? [] : ['reportMentions']})
        : lodashEscape(text);

if (isAllowCustomEmoji) {
    result = result.replace(/&lt;custom-emoji emoji=&quot;/g, '<custom-emoji emoji="').replace(/&quot; \/&gt;/g, '" />');
}

return result;

And we also can, the user cant pass ">" to the description anyway

But in the future or if needed, we can to cooperate with "Expensify-common" and ExpensiMark team as well
to find solutions like this rules:

{
    name: 'reportMentions',


    regex: /(?<=^[*~_]?|[ \n][*~_]?)(#[\p{Ll}0-9-]{1,99})(?![^<]*(?:<\/pre>|<\/code>|<\/a>))/gimu,
    replacement: '<mention-report>$1</mention-report>',
},

so then we can past text like: "$action-menu-icon" and Parser.replace return our tag: "<custom-emoji emoji="action-menu-icon" />"

2025-01-13_08-00-29.mp4

What alternative solutions did you explore? (Optional)

According to #54643 (comment)

We can still make "green + button" link to create an expense

For it, we need to add a new key to the following code:

App/src/libs/actions/Report.ts

Lines 3620 to 3630 in c6d8045

	typeof task.description === 'function'
	? task.description({
	adminsRoomLink: `${environmentURL}/${ROUTES.REPORT_WITH_ID.getRoute(adminsChatReportID ?? '-1')}`,
	workspaceCategoriesLink: `${environmentURL}/${ROUTES.WORKSPACE_CATEGORIES.getRoute(onboardingPolicyID ?? '-1')}`,
	workspaceMembersLink: `${environmentURL}/${ROUTES.WORKSPACE_MEMBERS.getRoute(onboardingPolicyID ?? '-1')}`,
	workspaceMoreFeaturesLink: `${environmentURL}/${ROUTES.WORKSPACE_MORE_FEATURES.getRoute(onboardingPolicyID ?? '-1')}`,
	navatticURL: getNavatticURL(environment, engagementChoice),
	integrationName,
	workspaceAccountingLink: `${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(onboardingPolicyID ?? '-1')}`,
	workspaceSettingsLink: `${environmentURL}/${ROUTES.WORKSPACE_INITIAL.getRoute(onboardingPolicyID ?? '-1')}`,
	})

createExpenseLink: `${environmentURL}/${ROUTES.MONEY_REQUEST_CREATE_TAB_MANUAL.getRoute(
    CONST.IOU.ACTION.CREATE,
    CONST.IOU.ACTION.CREATE,
    CONST.IOU.OPTIMISTIC_TRANSACTION_ID,
    onboardingPolicyID ?? '-1',
)}`,

And then we can pass it into Description:

description: ({createExpenseLink}) => {
    return (
        `*Submit an expense* by entering an amount or scanning a receipt.\n` +
        `\n` +
        `Here’s how to submit an expense:\n` +
        `\n` +
        `1. Click the [green *+* button](${createExpenseLink}) \n` +
        `2. Choose *Create expense*.\n` +
        `3. Enter an amount or scan a receipt.\n` +
        `4. Add your reimburser to the request.\n` +
        `5. Click *Submit*.\n` +
        `\n` +
        `And you’re done! Now wait for that sweet “Cha-ching!” when it’s complete.`
    );
},

We can also set a link on Create Expense instead if needed.

[melvin-bot]

@shawnborton, @anmurali, @c3024 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[c3024]

The Slack discussion and this comment here need opening the menu containing the "Create expense" on clicking the step "Click the green + button" so that the second step of clicking on the "Create expense" can be done there itself without leaving the task report page on narrow devices. But, the proposals are linking the task step to open the RHP of create expense flow.

Can you please update the proposals to match the requirement? Thanks!

[anmurali]

I think we might actually take this back and research a clickable custom emoji after all.

[anmurali]

Ok so we want to go back to @dbarrett's original proposal.

Change #1 on that list to

1. Press the :global-create: button

Create a :global_create: emoji in NewDot that copies :global-create:
Add a hyperlink like expensify://global-create that just opens Global Create

@c3024 you are able to work on ^^ ?

[c3024]

Yes, I will work on it. Thanks!!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@shawnborton @anmurali @c3024 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[Amoralchik]

Proposal Update

[melvin-bot]

@shawnborton, @anmurali, @c3024 Huh... This is 4 days overdue. Who can take care of this?

[c3024]

Thanks for the update, @Amoralchik.

Based on this discussion, I too think that using react-native-render-html to open the FAB menu is the better approach.

@Amoralchik’s proposal works well and looks good to me. Further refinements can be made during the PR process.

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

Triggered auto assignment to @carlosmiceli, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @Amoralchik You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[Amoralchik]

PR will be ready Tomorrow, Thanks.

[Amoralchik]

Here is a PR, I found some issues on native IOS and Android, so for now PR on draft

[Amoralchik]

PR is finally ready for review