[hold for payment 2024-04-29] [$500] Live markdown for money request description

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1711641837108169

Action Performed:

1. Press on the global create button
2. Press Request Money -> Manual -> enter any amount -> choose any participants
3. Press on the description field
4. type markdown text into the description field

Note: There are more permutations of this, the intention with this issue is that it should capture all money request description fields, including:

• 1:1 requests, splits, and send money
• different types of requests such as manual v.s. scan v.s. distance

Expected Result:

The markdown styling should render in real-time, as it does for the main chat composer.

Actual Result:

No live markdown formatting.

Workaround:

n/a

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• 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/~0147562f8d45f3f241
• Upwork Job ID: 1773388950435934208
• Last Price Increase: 2024-04-11
• Automatic offers:
• alitoshmatov | Reviewer | 0
• ShridharGoel | Contributor | 0

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[roryabraham]

accidentally included the upwork tag from the previous issue in a copy/pasta situation. Going to try re-applying External to see if we can get new upwork jobs created

[melvin-bot]

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

[melvin-bot]

Current assignee @alitoshmatov is eligible for the External assigner, not assigning anyone new.

[ShridharGoel]

Proposal

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

Live markdown support is needed for money request description.

What is the root cause of that problem?

New feature. Currently InputWrapperWithRef with TextInput is being used and internally BaseTextInput uses RNTextInput.

App/src/pages/iou/request/step/IOURequestStepDescription.js

Lines 191 to 210 in c2d803e

	<InputWrapperWithRef
	InputComponent={TextInput}
	inputID={INPUT_IDS.MONEY_REQUEST_COMMENT}
	name={INPUT_IDS.MONEY_REQUEST_COMMENT}
	defaultValue={currentDescription}
	label={translate('moneyRequestConfirmationList.whatsItFor')}
	accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')}
	role={CONST.ROLE.PRESENTATION}
	ref={(el) => {
	if (!el) {
	return;
	}
	inputRef.current = el;
	updateMultilineInputRange(inputRef.current);
	}}
	autoGrowHeight
	containerStyles={[styles.autoGrowHeightMultilineInput]}
	shouldSubmitForm
	/>
	</View>

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

Use RNMarkdownTextInput as being used in composer.

Same field is used for different types of requests like send money, 1:1 requests, split bills etc. Also, it will update in all of manual, scan and distance.

We can pass a new boolean prop markdownEnabled and if it is true, then RNMarkdownTextInput should be used in BaseTextInput.

This is already done here: #39519

After the above PR is merged, we can pass markdownEnabled via IOURequestStepDescription.

<InputWrapperWithRef
    InputComponent={TextInput}
    inputID={INPUT_IDS.MONEY_REQUEST_COMMENT}
    name={INPUT_IDS.MONEY_REQUEST_COMMENT}
    defaultValue={currentDescription}
    label={translate('moneyRequestConfirmationList.whatsItFor')}
    accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')}
    role={CONST.ROLE.PRESENTATION}
    ref={(el) => {
        if (!el) {
            return;
        }
        inputRef.current = el;
        updateMultilineInputRange(inputRef.current);
    }}
    autoGrowHeight
    containerStyles={[styles.autoGrowHeightMultilineInput]}
    shouldSubmitForm
    markdownEnabled
/>

Testing plan

Check the working of the live markdown feature at all places where IOURequestStepDescription is used, like request money including manual, scan, distance, 1:1 DM, splits, send money etc. This would include testing things like blockquote,
code fence, inline code block, email, links, heading, italics, bold and strikethrough.

Rollout plan

We have two options:

1. Launch for all avenues.
2. We can first do a rollout only for a single avenue (like only split bills). Once we find that it's working fine in production, then we can enable for all places. This can be easily handled by having a new prop called shouldEnableLiveMarkdown. If this is true, then live markdown would work for that feature. Later, we can remove this prop and enable for all descriptions.

Screen.Recording.2024-04-05.at.5.39.53.PM.mov

[allgandalf]

Proposal

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

Live markdown for money request description

What is the root cause of that problem?

Inside of InputWrapperWithRef we pass TextInput to InputComponent:

App/src/pages/iou/request/step/IOURequestStepDescription.js

Lines 191 to 192 in ad1e214

	<InputWrapperWithRef
	InputComponent={TextInput}

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

We should instead pass InputComponent={RNMarkdownTextInput}

What alternative solutions did you explore? (Optional)

N/A

[allgandalf]

Note to my proposal: Additional style changes would also be required !

[joekaufmanexpensify]

proposals pending review

[allgandalf]

friendly bump to @alitoshmatov for review :)

[joekaufmanexpensify]

Proposals still pending review

[roryabraham]

for context - there was some suggestion(s) from SWM folks that perhaps we should wait for live markdown on web to go to prod before working on this.

[roryabraham]

#39519 is merged so we should feel free to proceed with the PR now

[ShridharGoel]

Sure, will open a PR soon.

[joekaufmanexpensify]

Great. TY!

[roryabraham]

#40224 is up for review

[joekaufmanexpensify]

automation was not working, but PR is on production for 7 days. So going to prep for payment today!

[joekaufmanexpensify]

This issue was opened prior to April 4th, so we need to issue the following payments:

• @ShridharGoel - $500 for PR via upwork.
• @alitoshmatov - $500 for C+ via upwork.

[joekaufmanexpensify]

@ShridharGoel please accept our offer in upwork so we can pay you

[joekaufmanexpensify]

@alitoshmatov $500 sent and contract ended!

[joekaufmanexpensify]

Bumped in Slack

[joekaufmanexpensify]

Still pending @ShridharGoel accepting upwork offer

[ShridharGoel]

@joekaufmanexpensify I've accepted it now, thanks.

[joekaufmanexpensify]

TY! will pay today

[joekaufmanexpensify]

@ShridharGoel $500 sent and contract ended!

[joekaufmanexpensify]

Upwork job closed.

[joekaufmanexpensify]

All set, TY everyone!