Merge pull request #51545 from Krishna2323/krishna2323/issue/49286

Wrong validation message when sending invoice
Expensify · Nov 5, 2024 · b80559d · b80559d
2 parents 0deafe2 + e877d60
commit b80559d
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -108,7 +108,7 @@
     "date-fns-tz": "^3.2.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "2.0.101",
+    "expensify-common": "2.0.103",
     "expo": "51.0.31",
     "expo-av": "14.0.7",
     "expo-image": "1.12.15",

diff --git a/src/CONST.ts b/src/CONST.ts
@@ -477,6 +477,7 @@ const CONST = {
         OLD_DOT_ANDROID: 'https://play.google.com/store/apps/details?id=org.me.mobiexpensifyg&hl=en_US&pli=1',
         OLD_DOT_IOS: 'https://apps.apple.com/us/app/expensify-expense-tracker/id471713959',
     },
+    COMPANY_WEBSITE_DEFAULT_SCHEME: 'http',
     DATE: {
         SQL_DATE_TIME: 'YYYY-MM-DD HH:mm:ss',
         FNS_FORMAT_STRING: 'yyyy-MM-dd',

diff --git a/src/libs/BankAccountUtils.ts b/src/libs/BankAccountUtils.ts
@@ -3,7 +3,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type * as OnyxTypes from '@src/types/onyx';
 
 function getDefaultCompanyWebsite(session: OnyxEntry<OnyxTypes.Session>, user: OnyxEntry<OnyxTypes.User>): string {
-    return user?.isFromPublicDomain ? 'https://' : `https://www.${Str.extractEmailDomain(session?.email ?? '')}`;
+    return user?.isFromPublicDomain ? '' : `https://www.${Str.extractEmailDomain(session?.email ?? '')}`;
 }
 
 function getLastFourDigits(bankAccountNumber: string): string {

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import lodashPick from 'lodash/pick';
 import React, {useCallback, useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
@@ -60,14 +61,15 @@ function BusinessInfo({onBackButtonPress}: BusinessInfoProps) {
 
     const submit = useCallback(
         (isConfirmPage: boolean) => {
+            const companyWebsite = Str.sanitizeURL(values.website, CONST.COMPANY_WEBSITE_DEFAULT_SCHEME);
             BankAccounts.updateCompanyInformationForBankAccount(
                 Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'),
                 {
                     ...values,
                     ...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']),
                     companyTaxID: values.companyTaxID?.replace(CONST.REGEX.NON_NUMERIC, ''),
                     companyPhone: parsePhoneNumber(values.companyPhone ?? '', {regionCode: CONST.COUNTRY.US}).number?.significant,
-                    website: ValidationUtils.isValidWebsite(values.website) ? values.website : undefined,
+                    website: ValidationUtils.isValidWebsite(companyWebsite) ? companyWebsite : undefined,
                 },
                 policyID,
                 isConfirmPage,

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx
@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import React, {useCallback, useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
@@ -33,7 +34,7 @@ function WebsiteBusiness({onNext, isEditing}: SubStepProps) {
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
             const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
 
-            if (values.website && !ValidationUtils.isValidWebsite(values.website)) {
+            if (values.website && !ValidationUtils.isValidWebsite(Str.sanitizeURL(values.website, CONST.COMPANY_WEBSITE_DEFAULT_SCHEME))) {
                 errors.website = translate('bankAccount.error.website');
             }
 
@@ -44,7 +45,8 @@ function WebsiteBusiness({onNext, isEditing}: SubStepProps) {
     const handleSubmit = useReimbursementAccountStepFormSubmit({
         fieldIds: STEP_FIELDS,
         onNext: (values) => {
-            BankAccounts.addBusinessWebsiteForDraft((values as {website: string})?.website);
+            const website = Str.sanitizeURL((values as {website: string})?.website, CONST.COMPANY_WEBSITE_DEFAULT_SCHEME);
+            BankAccounts.addBusinessWebsiteForDraft(website);
             onNext();
         },
         shouldSaveDraft: true,

diff --git a/src/pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo.ts b/src/pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo.ts
@@ -1,4 +1,6 @@
+import {Str} from 'expensify-common';
 import * as ValidationUtils from '@libs/ValidationUtils';
+import CONST from '@src/CONST';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
 import type {CompanyStepProps} from '@src/types/form/ReimbursementAccountForm';
 
@@ -16,7 +18,7 @@ function getInitialSubstepForBusinessInfo(data: CompanyStepProps): number {
         return 1;
     }
 
-    if (!ValidationUtils.isValidWebsite(data[businessInfoStepKeys.COMPANY_WEBSITE])) {
+    if (!ValidationUtils.isValidWebsite(Str.sanitizeURL(data[businessInfoStepKeys.COMPANY_WEBSITE], CONST.COMPANY_WEBSITE_DEFAULT_SCHEME))) {
         return 2;
     }
 

diff --git a/src/pages/iou/request/step/IOURequestStepCompanyInfo.tsx b/src/pages/iou/request/step/IOURequestStepCompanyInfo.tsx
@@ -1,5 +1,5 @@
 import {Str} from 'expensify-common';
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -11,6 +11,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getDefaultCompanyWebsite} from '@libs/BankAccountUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import playSound, {SOUNDS} from '@libs/Sound';
 import * as Url from '@libs/Url';
@@ -37,6 +38,9 @@ function IOURequestStepCompanyInfo({route, report, transaction}: IOURequestStepC
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [user] = useOnyx(ONYXKEYS.USER);
+    const defaultWebsiteExample = useMemo(() => getDefaultCompanyWebsite(session, user), [session, user]);
 
     const policy = usePolicy(IOU.getIOURequestPolicyID(transaction, report));
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${IOU.getIOURequestPolicyID(transaction, report)}`);
@@ -47,9 +51,9 @@ function IOURequestStepCompanyInfo({route, report, transaction}: IOURequestStepC
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_COMPANY_INFO_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.MONEY_REQUEST_COMPANY_INFO_FORM> => {
             const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.COMPANY_NAME, INPUT_IDS.COMPANY_WEBSITE]);
-
             if (values.companyWebsite) {
-                if (!ValidationUtils.isValidWebsite(values.companyWebsite)) {
+                const companyWebsite = Str.sanitizeURL(values.companyWebsite, CONST.COMPANY_WEBSITE_DEFAULT_SCHEME);
+                if (!ValidationUtils.isValidWebsite(companyWebsite)) {
                     errors.companyWebsite = translate('bankAccount.error.website');
                 } else {
                     const domain = Url.extractUrlDomain(values.companyWebsite);
@@ -68,8 +72,9 @@ function IOURequestStepCompanyInfo({route, report, transaction}: IOURequestStepC
     );
 
     const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_COMPANY_INFO_FORM>) => {
+        const companyWebsite = Str.sanitizeURL(values.companyWebsite, CONST.COMPANY_WEBSITE_DEFAULT_SCHEME);
         playSound(SOUNDS.DONE);
-        IOU.sendInvoice(currentUserPersonalDetails.accountID, transaction, report, undefined, policy, policyTags, policyCategories, values.companyName, values.companyWebsite);
+        IOU.sendInvoice(currentUserPersonalDetails.accountID, transaction, report, undefined, policy, policyTags, policyCategories, values.companyName, companyWebsite);
     };
 
     return (
@@ -107,6 +112,7 @@ function IOURequestStepCompanyInfo({route, report, transaction}: IOURequestStepC
                     accessibilityLabel={translate('iou.yourCompanyWebsite')}
                     role={CONST.ROLE.PRESENTATION}
                     hint={translate('iou.yourCompanyWebsiteNote')}
+                    defaultValue={defaultWebsiteExample}
                 />
             </FormProvider>
         </StepScreenWrapper>

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite.tsx b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite.tsx
@@ -1,6 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import {Str} from 'expensify-common';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -11,6 +11,7 @@ import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getDefaultCompanyWebsite} from '@libs/BankAccountUtils';
 import * as Url from '@libs/Url';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Navigation from '@navigation/Navigation';
@@ -31,10 +32,14 @@ function WorkspaceInvoicingDetailsWebsite({route}: WorkspaceInvoicingDetailsWebs
     const {inputCallbackRef} = useAutoFocusInput();
     const styles = useThemeStyles();
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [user] = useOnyx(ONYXKEYS.USER);
+    const defaultWebsiteExample = useMemo(() => getDefaultCompanyWebsite(session, user), [session, user]);
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_INVOICES_COMPANY_WEBSITE_FORM>) => {
-        Policy.updateInvoiceCompanyWebsite(policyID, values[INPUT_IDS.COMPANY_WEBSITE]);
+        const companyWebsite = Str.sanitizeURL(values[INPUT_IDS.COMPANY_WEBSITE], CONST.COMPANY_WEBSITE_DEFAULT_SCHEME);
+        Policy.updateInvoiceCompanyWebsite(policyID, companyWebsite);
         Navigation.goBack();
     };
 
@@ -44,7 +49,7 @@ function WorkspaceInvoicingDetailsWebsite({route}: WorkspaceInvoicingDetailsWebs
         const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.COMPANY_WEBSITE]);
 
         if (values.companyWebsite) {
-            if (!ValidationUtils.isValidWebsite(values.companyWebsite)) {
+            if (!ValidationUtils.isValidWebsite(Str.sanitizeURL(values.companyWebsite, CONST.COMPANY_WEBSITE_DEFAULT_SCHEME))) {
                 errors.companyWebsite = translate('bankAccount.error.website');
             } else {
                 const domain = Url.extractUrlDomain(values.companyWebsite);
@@ -86,7 +91,7 @@ function WorkspaceInvoicingDetailsWebsite({route}: WorkspaceInvoicingDetailsWebs
                         label={translate('workspace.invoices.companyWebsite')}
                         accessibilityLabel={translate('workspace.invoices.companyWebsite')}
                         role={CONST.ROLE.PRESENTATION}
-                        defaultValue={policy?.invoice?.companyWebsite}
+                        defaultValue={policy?.invoice?.companyWebsite ?? defaultWebsiteExample}
                         ref={inputCallbackRef}
                         inputMode={CONST.INPUT_MODE.URL}
                     />