Implemented per diem request flow#54252
Conversation
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
…uest is not supported just yet
@Expensify/design QQ, What should I call this button? It will send me to per diem page of the workspace. |
@Expensify/design Please let me know any improvement. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/Gonals in version: 9.0.81-0 🚀
|
|
This PR is failing for mWeb because of issue #54845 |
| })); | ||
| } | ||
|
|
||
| function IOURequestStepWaypoint({ |
There was a problem hiding this comment.
-IOURequestStepWaypoint
+IOURequestStepSubRate
|
@shubham1206agra found issues when validation this PR - issues #54831, #54833, #54845, #54889 |
|
🚀 Deployed to production by https://github.com/puneetlath in version: 9.0.81-6 🚀
|
|
|
||
| /** Whether to show the label when the tab is inactive */ | ||
| shouldShowLabelWhenInactive?: boolean; |
There was a problem hiding this comment.
Coming from here #55032, we decide to add a tooltip on web when shouldShowLabelWhenInactive is false
| label: string; | ||
| }; | ||
|
|
||
| function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: TimeModalPickerProps) { |
There was a problem hiding this comment.
Missing forwardRef here, which caused #61595
| /** Whether the user can submit per diem expense from the workspace */ | ||
| function canSubmitPerDiemExpenseFromWorkspace(policy: OnyxEntry<Policy>): boolean { | ||
| const perDiemCustomUnit = getPerDiemCustomUnit(policy); | ||
| return !isEmptyObject(perDiemCustomUnit) && !!perDiemCustomUnit?.enabled; |
There was a problem hiding this comment.
Comming from: #64913, the user can't submit the per diem expense from WS if policy?.isPolicyExpenseChatEnabled is false
| {!!shouldShowPerDiemOption && ( | ||
| <TopTab.Screen name={CONST.TAB_REQUEST.PER_DIEM}> | ||
| {() => ( | ||
| <TabScreenWithFocusTrapWrapper> | ||
| {moreThanOnePerDiemExist && !doesCurrentPolicyPerDiemExist ? ( | ||
| <IOURequestStepPerDiemWorkspace | ||
| route={route} | ||
| navigation={navigation} | ||
| /> | ||
| ) : ( | ||
| <IOURequestStepDestination | ||
| openedFromStartPage | ||
| explicitPolicyID={moreThanOnePerDiemExist ? undefined : perDiemCustomUnits.at(0)?.policyID} | ||
| route={route} | ||
| navigation={navigation} | ||
| /> | ||
| )} | ||
| </TabScreenWithFocusTrapWrapper> | ||
| )} | ||
| </TopTab.Screen> |
There was a problem hiding this comment.
The addition of the new tab screen here led to the following issue on native due to conflicting horizontal vs vertical scroll list coming from the tab navigator and per diem page scroll list:
we addressed this with a mixed approach between native and web based platforms by dismissing the keyboard when any direction swipe starts on native and disabling tab navigator swipe on mweb while on the Per Diem tab only.
| const isLoading = !isOffline && isLoadingOnyxValue(policyMetadata); | ||
| const shouldShowEmptyState = isEmptyObject(customUnit?.rates); |
There was a problem hiding this comment.
Coming from #74272, when have an edge case, after clearing cache, it shows empty state page briefly instead of loading.
| const currentStartDate = currentDateAttributes?.start ? DateUtils.extractDate(currentDateAttributes.start) : undefined; | ||
| const currentEndDate = currentDateAttributes?.end ? DateUtils.extractDate(currentDateAttributes.end) : undefined; | ||
| // eslint-disable-next-line rulesdir/no-negated-variables | ||
| const shouldShowNotFound = !IOUUtils.isValidMoneyRequestType(iouType) || isEmptyObject(transaction?.comment?.customUnit) || isEmptyObject(policy); |
There was a problem hiding this comment.
NAB but a brief display of Not here page is displayed because of empty transaction during creation of per diem expense. We handled this in #78920
13 participants
Explanation of Change
Fixed Issues
$ #50868
Tests
To - who the expense will be submitted to
Destination
Time - a concatenation of start time + date, and end time + date
Subrate - a concatenation of the selected subrate, and a Qty: X for the quantity selected
Description - free text field to add a description to the expense
Category
Tag
Verify that no errors appear in the JS console
Offline tests
Same as Tests
QA Steps
Same as Tests but you can't submit the expense just yet.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)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
Screen.Recording.2024-12-30.at.3.38.04.PM.mov
iOS: Native
Screen.Recording.2024-12-30.at.4.04.29.PM.mov
iOS: mWeb Safari
Screen.Recording.2024-12-30.at.3.30.39.PM.mov
MacOS: Chrome / Safari
Screen.Recording.2024-12-30.at.3.16.02.PM.mov
MacOS: Desktop
Screen.Recording.2024-12-30.at.3.50.22.PM.mov