[No QA] Card Assignment Flow by koko57 · Pull Request #48278 · Expensify/App

koko57 · 2024-08-29T15:31:27Z

Details

Fixed Issues

$ #47377
PROPOSAL: -

Tests

PREREQUISITES: Workspace Feed / all betas enabled

Go to Workspaces -> More Features, enable Company Cards
Go to Company cards page
In browser bar type //assign-card, where feed is one of the following: 'cdf' (MasterCard), 'vcf' (Visa), ''gl1025' (American Express)
to test on desktop: open devtools and type window.location = "https://dev.new.expensify.com:8083/settings/workspaces/[workspaceID]/company-cards/[feed]/assign-card"
on mobile: (with simulator opened) type in terminal
npx uri-scheme open new-expensify://settings/workspaces/[workspaceID]/company-cards/[feed]/assign-card --ios or npx uri-scheme open new-expensify://settings/workspaces/[workspaceID]/company-cards/[feed]/assign-card --android
Go through the flow
For Assignee and Card step verify that the error is displayed when you don't select any card
Verify that on Transaction Start Date when selecting Custom start date a menu item is shown and it opens a Date Picker
Verify that all the data is displayed correctly in the Confirmation step
For now after submitting the form you'll be redirected back to company card page and the data for assign flow in Onyx will be cleared
To check Empty state for Card step just type any other string into the URL (from step 3).

Verify that no errors appear in the JS console

Offline tests

QA Steps

n/a

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

Screen.Recording.2024-09-02.at.18.20.36.mp4

iOS: Native

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-02.at.18.05.26.mp4

iOS: mWeb Safari

https://github.com/user-attachments/assets/de28f015-aa57-45d0-9732-717f6dd3238b

MacOS: Chrome / Safari

Screen.Recording.2024-08-29.at.17.17.10.mp4

MacOS: Desktop

https://github.com/user-attachments/assets/3383419e-1e4a-4937-8ca9-02b54fdc4826

…button

melvin-bot · 2024-08-29T15:31:33Z

@allroundexperts 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]

shawnborton · 2024-08-29T16:11:42Z

Looking good so far!

It looks like the first step is missing the progress/stepper bar across the top?

koko57 · 2024-08-30T07:34:07Z

@shawnborton good catch! thanks! Fixed now 🙂

allroundexperts · 2024-08-30T08:10:40Z

Lint failing @koko57

src/languages/es.ts

allgandalf · 2024-09-03T14:11:29Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Screen.Recording.2024-09-03.at.7.59.51.PM.mov

Android: mWeb Chrome

Screen.Recording.2024-09-03.at.8.07.22.PM.mov

iOS: Native

Screen.Recording.2024-09-03.at.7.53.31.PM.mov

iOS: mWeb Safari

Screen.Recording.2024-09-03.at.7.58.02.PM.mov

MacOS: Chrome / Safari

Screen.Recording.2024-09-03.at.7.31.05.PM.mov

MacOS: Desktop

Screen.Recording.2024-09-03.at.7.44.16.PM.mov

allgandalf · 2024-09-03T14:18:46Z

Bug:

Too much bottom padding for the button in date selector:

allgandalf

Functionality wise, this LGTM, Tests well on all platforms, left some comments above, I will approve the PR after those are addressed @koko57

allgandalf · 2024-09-04T05:56:04Z

@koko57 , this has conflicts :)

koko57 · 2024-09-04T05:58:12Z

@allgandalf thanks! I'll be starting my workday shortly, I'm taking care of this PR first

Co-authored-by: Gandalf <whogandalf@gmail.com>

koko57 · 2024-09-04T09:42:51Z

@allgandalf sorry it's taking so long but the DatePicker is styled strangely and with FormWrapper styles gives a mix that is kinda hard to solve. I will look into the other places that DatePicker is used if the submit button is also displayed this way. The rest of the comments are resolved/answered.

allgandalf · 2024-09-04T10:10:35Z

Thanks for informing @koko57 , please let me know, if it is so difficult, we can remove the button and go to next page when an user will click on the date? is that possible?

(Also, typecheck if failing, please have a look)

allgandalf

This should pass the typecheck

allgandalf · 2024-09-04T10:11:37Z

src/languages/en.ts

            assignCard: 'Assign card',
            cardNumber: 'Card number',
            customFeed: 'Custom feed',
+            assignCard: 'Assign card',


Suggested change

assignCard: 'Assign card',

allgandalf · 2024-09-04T10:11:49Z

src/languages/es.ts

            assignCard: 'Asignar tarjeta',
            cardNumber: 'Número de la tarjeta',
            customFeed: 'Fuente personalizada',
+            assignCard: 'Asignar tarjeta',


Suggested change

assignCard: 'Asignar tarjeta',

koko57 · 2024-09-04T10:14:38Z

@allgandalf I've just pushed a typecheck fix the very moment you commented 😃 For the style problem I've also just found the culprit should be not so complicated to fix this

koko57 · 2024-09-04T11:03:28Z

@allgandalf - requesting rereview

allgandalf

Lets get this shipped 🚀

yuwenmemon

Nice!

OSBotify · 2024-09-04T17:18:21Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2024-09-05T19:40:50Z

🚀 Deployed to staging by https://github.com/yuwenmemon in version: 9.0.30-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

allgandalf · 2024-11-19T13:14:26Z

src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx

@@ -0,0 +1,92 @@
+import React from 'react';


We missed to implement the cardName page from the design doc, this caused #51908.

Note to me: @allgandalf please be more careful and read the design doc thoroughly 😅

Ollyws · 2025-02-18T10:18:04Z

src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

+            <ScreenWrapper
+                style={styles.pb0}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}


Using includeSafeAreaPaddingBottom here was causing an issue with the save button alignment on Android (#56008), we fixed this in #56226.

@Ollyws i think the recent changes in the navigation stack / the one where folks from malgero updated the android view to occupy the full length of the screen has caused this regression and not this PR , can you check once ?

allroundexperts · 2025-03-03T12:53:50Z

src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

+
+    const [dateOptionSelected, setDateOptionSelected] = useState(data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.FROM_BEGINNING);
+    const [isModalOpened, setIsModalOpened] = useState(false);
+    const [startDate, setStartDate] = useState(DateUtils.extractDate(new Date().toString()));


We should have used the default start date from the data variable. Not doing this caused #55960

ahmedGaber93 · 2025-03-05T12:09:29Z

src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx

+            />
+            <FormAlertWithSubmitButton


There is no space between the list and the button, and we add it here #57364.

ishpaul777 · 2025-05-19T21:21:23Z

src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx

+                        buttonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+                        onSubmit={submit}
+                        isAlertVisible={shouldShowError}
+                        containerStyles={styles.ph5}


Coming from #60446 {BZ CHECKLIST}, this styles.ph5 added extra unwanted padding we removed it in the PR

koko57 added 18 commits August 23, 2024 13:15

feat: prepare assign-card route

faa7b95

fix: resolve conflicts

1812f74

feat: add translations

871933c

feat: create onyx key for the form, create form steps

cc0aaee

feat: create company cards actions, handle back button press

56fe0b6

feat: add next button to assignee step

83b72f5

Merge branch 'main' into feat/47377-card-assignement-flow

a6eb447

feat: create transaction start date options

ee82902

fix: resolve conflicts

e01947b

feat: create card list item

639a4e0

feat: save data in Onyx and show it in confirmation step

e70b932

feat: transaction start date page

8546924

fix: go back to confirmation page when done editing or clicking back …

5ca5edb

…button

fix: minor fix

00df540

feat: focus initially selected item

b825952

feat: empty cards screen for card selection step

2dd26ca

feat: validation for card selection and assignee steps

ac9cd99

feat: clear Onyx after assigning card

d777f70

koko57 requested review from a team as code owners August 29, 2024 15:31

melvin-bot bot requested review from allroundexperts and removed request for a team August 29, 2024 15:31

koko57 mentioned this pull request Aug 29, 2024

[AWAITING PAYMENT][$250] [3rd Party Feeds] Card Assignment Flow #47377

Closed

3 tasks

koko57 added 2 commits August 30, 2024 09:27

fix: show step header

75e365a

fix: resolve conflicts

8d88cb0

fix: lint

e35b89c

allgandalf reviewed Sep 3, 2024

View reviewed changes

src/languages/es.ts Outdated Show resolved Hide resolved

allgandalf reviewed Sep 3, 2024

View reviewed changes

koko57 and others added 2 commits September 4, 2024 09:30

fix: spanish translations

a8491af

Co-authored-by: Gandalf <whogandalf@gmail.com>

fix: resolve conflicts

ab16106

fix: typecheck

f87eb6d

allgandalf reviewed Sep 4, 2024

View reviewed changes

koko57 added 2 commits September 4, 2024 12:42

fix: revert unnecessarily changed files

afe6112

fix: submit button styles

ace11f4

koko57 requested a review from allgandalf September 4, 2024 11:03

fix: lint

034349a

allgandalf approved these changes Sep 4, 2024

View reviewed changes

melvin-bot bot requested a review from yuwenmemon September 4, 2024 14:20

yuwenmemon approved these changes Sep 4, 2024

View reviewed changes

yuwenmemon merged commit c885f96 into Expensify:main Sep 4, 2024

github-actions bot mentioned this pull request Sep 5, 2024

Deploy Checklist: New Expensify 2024-09-05 #48664

Closed

69 tasks

allgandalf reviewed Nov 19, 2024

View reviewed changes

Ollyws reviewed Feb 18, 2025

View reviewed changes

allroundexperts reviewed Mar 3, 2025

View reviewed changes

ahmedGaber93 reviewed Mar 5, 2025

View reviewed changes

ishpaul777 reviewed May 19, 2025

View reviewed changes

Conversation

koko57 commented Aug 29, 2024 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Aug 29, 2024

Uh oh!

shawnborton commented Aug 29, 2024

Uh oh!

koko57 commented Aug 30, 2024

Uh oh!

allroundexperts commented Aug 30, 2024

Uh oh!

Uh oh!

allgandalf commented Sep 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

allgandalf commented Sep 3, 2024

Bug:

Uh oh!

allgandalf left a comment

Choose a reason for hiding this comment

Uh oh!

allgandalf commented Sep 4, 2024

Uh oh!

koko57 commented Sep 4, 2024

Uh oh!

koko57 commented Sep 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allgandalf commented Sep 4, 2024

Uh oh!

allgandalf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

koko57 commented Sep 4, 2024

Uh oh!

koko57 commented Sep 4, 2024

Uh oh!

allgandalf left a comment

Choose a reason for hiding this comment

Uh oh!

yuwenmemon left a comment

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Sep 4, 2024

Uh oh!

OSBotify commented Sep 5, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

koko57 commented Aug 29, 2024 •

edited by github-actions bot

Loading

allgandalf commented Sep 3, 2024 •

edited

Loading

koko57 commented Sep 4, 2024 •

edited

Loading