[HOLD for payment 2024-11-14] [$250] Wrong validation message when sending invoice

[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.35-7
Reproducible in staging?: Y
Reproducible in production?: Y
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: @dubielzyk-expensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726459401827979

Action Performed:

1. Click green (+) button
2. Send invoice
3. Enter $200
4. Choose recipient
5. Fill in company name (Dubby Co)
6. Fill in company website (www.dubbyco.com)

Expected Result:

Expected www.dubbyco.com to be a valid website address

Actual Result:

Gives error saying "Please enter a valid website using lowercase characters"

Workaround:

Unknown

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

CleanShot.2024-09-16.at.14.00.05.mp4

View all open jobs on GitHub

Recording.548.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021835835067982464212
• Upwork Job ID: 1835835067982464212
• Last Price Increase: 2024-09-24
• Automatic offers:
• ahmedGaber93 | Reviewer | 104377926
• Krishna2323 | Contributor | 104377928

Issue Owner

Current Issue Owner: @ahmedGaber93

[melvin-bot]

Triggered auto assignment to @kadiealexander (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.

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-09-19 08:21:17 UTC.

Proposal

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

Wrong validation message when sending invoice

What is the root cause of that problem?

Here, we are considering that a valid website must include http/https/ftp in the URL, so a website like www.example.com would be an invalid website.

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

We should add the https:// prefix by using the Str.sanitizeURL function when validating the website and submitting the form here and here

      if (!ValidationUtils.isValidWebsite(Str.sanitizeURL(values.companyWebsite))) {
          errors.companyWebsite = translate('bankAccount.error.website');
      }

App/src/pages/iou/request/step/IOURequestStepCompanyInfo.tsx

Line 52 in 37bf6b2

if (!ValidationUtils.isValidWebsite(values.companyWebsite)) {

      IOU.sendInvoice(currentUserPersonalDetails.accountID, transaction, report, undefined, policy, policyTags, policyCategories, values.companyName, Str.sanitizeURL(values.companyWebsite));

App/src/pages/iou/request/step/IOURequestStepCompanyInfo.tsx

Line 72 in 37bf6b2

IOU.sendInvoice(currentUserPersonalDetails.accountID, transaction, report, undefined, policy, policyTags, policyCategories, values.companyName, values.companyWebsite);

OPTIONAL: We should also do the same in several places within the app that use the isValidWebsite function like here and here

What alternative solutions did you explore? (Optional)

[github-actions]

Jon Øvrebø Dubielzyk Your proposal will be dismissed because you did not follow the proposal template.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-09-19 15:55:37 UTC.

Proposal


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

Wrong validation message for website when sending invoice.

What is the root cause of that problem?

We are using isValidWebsite for validation which requires http/https/ftp URL scheme.

App/src/libs/ValidationUtils.ts

Lines 236 to 243 in 6c82111

	/**
	* Similar to backend, checks whether a website has a valid URL or not.
	* http/https/ftp URL scheme required.
	*/
	function isValidWebsite(url: string): boolean {
	const isLowerCase = url === url.toLowerCase();
	return new RegExp(`^${Url.URL_REGEX_WITH_REQUIRED_PROTOCOL}$`, 'i').test(url) && isLowerCase;
	}

App/src/pages/iou/request/step/IOURequestStepCompanyInfo.tsx

Line 52 in 12779f1

if (!ValidationUtils.isValidWebsite(values.companyWebsite)) {

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


• If we want a default value, we can get it using getDefaultCompanyWebsite and pass it to defaultValue prop.

What alternative solutions did you explore? (Optional)

• We can update yourCompanyWebsiteNote to also include the website example https://www.expensify.com.
• We can also update error.website to also include the website example https://www.expensify.com.
• We can use prefixCharacter prop to add https:// prefix.

What alternative solutions did you explore? (Optional 2)

• We should create a new util function similar to isValidWebsite but in that function we will use Url.URL_REGEX or URL_WEBSITE_REGEX. Or we can update isValidWebsite to use those regex.

function isValidWebsite(url: string): boolean {
    const isLowerCase = url === url.toLowerCase();
    return new RegExp(`^${Url.URL_WEBSITE_REGEX}$`, 'i').test(url) && isLowerCase;
}

• We will replace the use of ValidationUtils.isValidWebsite with the new util function if choose to create a new one.
• We also need to create a new function similar to snitizeURL to add http when the url does not has a protocol.
• Then we would need to update these functions to use the new snitizeURL function to modify the url before sending it ti the backend.
  

  App/src/libs/actions/IOU.ts

  Line 3638 in 7947b8e

  function sendInvoice(

  
  

  App/src/libs/actions/BankAccounts.ts

  Line 401 in 7947b8e

  function updateCompanyInformationForBankAccount(bankAccountID: number, params: Partial<CompanyStepProps>, policyID: string, isConfirmPage: boolean) {

• Then we can use the new util function in IOURequestStepCompanyInfo and also in WorkspaceInvoicingDetailsWebsite if required.
• Updating updateCompanyInformationForBankAccount is optional.

Result

[melvin-bot]

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

[melvin-bot]

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

[bikramiter]

App/src/libs/ValidationUtils.ts

Lines 236 to 243 in 3c6526d

	/**
	* Similar to backend, checks whether a website has a valid URL or not.
	* http/https/ftp URL scheme required.
	*/
	function isValidWebsite(url: string): boolean {
	const isLowerCase = url === url.toLowerCase();
	return new RegExp(`^${Url.URL_REGEX_WITH_REQUIRED_PROTOCOL}$`, 'i').test(url) && isLowerCase;
	}

Note: As mentioned in the comment, this might need the corresponding scheme handling on the backend as well.