Fix "Please provide a valid website" error is not dismissed when navigating back #49957
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
melvin-bot
bot
requested review from
allgandalf
and removed request for
a team
|
@allgandalf Please 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] |
|
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
|
I have read the CLA Document and I hereby sign the CLA |
twilight2294
commented
Oct 1, 2024
| @@ -55,14 +55,13 @@ function WebsiteBusiness({reimbursementAccount, user, session, onNext, isEditing | |||
| ); | |||
| const handleSubmit = useReimbursementAccountStepFormSubmit({ | |||
| fieldIds: STEP_FIELDS, | |||
| onNext, | |||
| onNext: (values) => { | |||
| BankAccounts.addBusinessWebsiteForDraft((values as {website: string})?.website); | |||
There was a problem hiding this comment.
onNext has the data type as unknown, hence I had to type it this way otherwise the typecheck was complaining
Reviewer Checklist
Screenshots/VideosAndroid: NativeAndroid: mWeb ChromeiOS: NativeiOS: mWeb SafariMacOS: Chrome / SafariScreen.Recording.2024-10-01.at.10.54.05.PM.movMacOS: Desktop |
allgandalf
approved these changes
Oct 1, 2024
There was a problem hiding this comment.
LGTM and test well, @blimpich other checks won't run as i guess this is the contributors first PR? i don't remember what the procedure for such cases is, do you have any ide?
6 tasks
|
Yeah for some reason the CLA check fails on the first PR and needs to be re-run. |
|
Looks like we have a couple lint errors, @twilight294 can you please fix those? |
|
Fixed @blimpich ! |
|
Ah, eslint is breaking because we recently made changes to force contributors to incrementally get rid of See this slack message for more context: https://expensify.slack.com/archives/C01GTK53T8Q/p1726169039084589. Basically its failing because you touched a file that has a deprecated method usage in it. Nothing in your actual changes caused this. I think for this particular case, since its your first PR, we can ignore that failed check. @allgandalf what do you think of that? Alternatively could you help @twilight294 figure out how to fix this failing check by replacing the |
I think I can help since the change is small. Since I won't be able to suggest changes by commenting (there are no changes near @twilight294 please take a look at https://expensify.slack.com/archives/C01GTK53T8Q/p1726169039084589, should help you in your future PR's |
|
Yes sure, I am still waiting to get accepted on slack, But I will see the changes and learn from them @blimpich @allgandalf |
|
@twilight294 , please update with the following file, the changes might look big, but it's just a new way we use import React, {useCallback, useMemo} from 'react';
import {useOnyx} from 'react-native-onyx';
import FormProvider from '@components/Form/FormProvider';
import InputWrapper from '@components/Form/InputWrapper';
import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
import Text from '@components/Text';
import TextInput from '@components/TextInput';
import useLocalize from '@hooks/useLocalize';
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import {getDefaultCompanyWebsite} from '@libs/BankAccountUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import * as BankAccounts from '@userActions/BankAccounts';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
const COMPANY_WEBSITE_KEY = INPUT_IDS.BUSINESS_INFO_STEP.COMPANY_WEBSITE;
const STEP_FIELDS = [COMPANY_WEBSITE_KEY];
function WebsiteBusiness({onNext, isEditing}: SubStepProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
const [session] = useOnyx(ONYXKEYS.SESSION);
const [user] = useOnyx(ONYXKEYS.USER);
const defaultWebsiteExample = useMemo(() => getDefaultCompanyWebsite(session, user), [session, user]);
const defaultCompanyWebsite = reimbursementAccount?.achData?.website ?? defaultWebsiteExample;
const validate = useCallback(
(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)) {
errors.website = translate('bankAccount.error.website');
}
return errors;
},
[translate],
);
const handleSubmit = useReimbursementAccountStepFormSubmit({
fieldIds: STEP_FIELDS,
onNext: (values) => {
BankAccounts.addBusinessWebsiteForDraft((values as {website: string})?.website);
onNext();
},
shouldSaveDraft: isEditing,
});
return (
<FormProvider
formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
validate={validate}
onSubmit={handleSubmit}
style={[styles.mh5, styles.flexGrow1]}
submitButtonStyles={[styles.mb0]}
>
<Text style={[styles.textHeadlineLineHeightXXL]}>{translate('businessInfoStep.enterYourCompanysWebsite')}</Text>
<Text style={[styles.label, styles.textSupporting]}>{translate('common.websiteExample')}</Text>
<InputWrapper
InputComponent={TextInput}
inputID={COMPANY_WEBSITE_KEY}
label={translate('businessInfoStep.companyWebsite')}
aria-label={translate('businessInfoStep.companyWebsite')}
role={CONST.ROLE.PRESENTATION}
containerStyles={[styles.mt6]}
defaultValue={defaultCompanyWebsite}
shouldSaveDraft={!isEditing}
inputMode={CONST.INPUT_MODE.URL}
/>
</FormProvider>
);
}
WebsiteBusiness.displayName = 'WebsiteBusiness';
export default WebsiteBusiness; |
|
I updated, thanks 😸 @allgandalf @blimpich |
|
Hmmm, still breaking somehow, though the changes its asking of us now seem to be files that we haven't touched here: I'll merge main in and see if that fixes it. |
|
That worked! Lets merge |
blimpich
approved these changes
Oct 1, 2024
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
56 tasks
|
🚀 Deployed to staging by https://github.com/blimpich in version: 9.0.43-0 🚀
|
1 similar comment
|
🚀 Deployed to staging by https://github.com/blimpich in version: 9.0.43-0 🚀
|
6 tasks
|
This PR caused a regression so I am going to revert it! Please create a new PR with these changes and the fix for the regression! |
Closed
48 tasks
6 tasks
|
🚀 Deployed to production by https://github.com/jasperhuangg in version: 9.0.43-6 🚀
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
Fixed Issues
$ #49129
PROPOSAL: #49129 (comment)
Tests
Offline tests
N/A cannot reproduce offline
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Screen.Recording.2024-10-01.at.10.13.40.PM.mov
MacOS: Desktop
Screen.Recording.2024-10-01.at.10.25.34.PM.mov