[TS migration] Migrate 'AddressForm.js' component to TypeScript #34149

pasyukevich · 2024-01-09T15:05:18Z

Details

Fixed Issues

$ #31957
PROPOSAL:

Tests

Go to Settings/Wallet.
add this useEffect on WalletPage.js:

useEffect(() => {
        if (cardList[234523452345]) {
            return;
        }
        // eslint-disable-next-line rulesdir/prefer-actions-set-data
        window.Onyx.merge(`cardList`, {
            234523452345: {
                key: '234523452345',
                cardID: 234523452345,
                state: 2,
                bank: 'Expensify Card',
                availableSpend: 10000,
                domainName: 'expensify.com',
                lastFourPAN: '2345',
                isVirtual: false,
                fraud: null,
            },
        });
    }, [cardList]);

Click on the Expensify Card in the Assigned Cards section list.
On the Expensify Card page you're currently on, press the Get Physical Card button at the bottom of the page.
If you have filled in your details before, you should be shown the confirmation page with the correct data already filled. Otherwise, you'll be shown either the legal name, phone number, or address steps until you have filled in every single piece of data required.
Verify that validation errors are displayed correctly on every step
When all data is filled, you can press the Ship Card button on the confirmation step to go back to the Expensify Card page.
At this point, it's not possible to send the request to the API so the Expensify Card page won't show the updated state when you already requested the physical card.

Verify that no errors appear in the JS console

Offline tests

QA Steps

Use an account with Expensify card in 'Not issued' state.
Go to Settings/Wallet
Click on the Expensify Card in the Assigned Cards section list.
On the Expensify Card page you're currently on, press the Get Physical Card button at the bottom of the page.
If you have filled in your details before, you should be shown the confirmation page with the correct data already filled. Otherwise, you'll be shown either the legal name, phone number, or address steps until you have filled in every single piece of data required.
Verify that validation errors are displayed correctly on every step
When all data is filled, you can press the Ship Card button on the confirmation step to go back to the Expensify Card page.
At this point, it's not possible to send the request to the API so the Expensify Card page won't show the updated state when you already requested the physical card.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

android-native-converted.webm

Android: mWeb Chrome

android-web-converted.webm

iOS: Native

ios-native-converted.mp4

iOS: mWeb Safari

ios-web-converted.mp4

MacOS: Chrome / Safari

desktop-web-converted.mov

MacOS: Desktop

desktop-native-converted.mov

src/components/AddressForm.tsx

fabioh8010 · 2024-01-17T08:49:50Z

src/components/AddressForm.tsx

+    city?: string;
+    country?: string;
+    state?: string;
+    zipPostCode?: string | Array<string | Record<string, string>>;


Suggested change

zipPostCode?: string | Array<string | Record<string, string>>;

zipPostCode?: Localize.MaybePhraseKey;

Could you test if this works?

filip-solecki · 2024-01-22T11:10:18Z

src/components/AddressForm.tsx


        // Check "State" dropdown is a valid state if selected Country is USA
-        if (values.country === CONST.COUNTRY.US && !COMMON_CONST.STATES[values.state]) {
+        if (values.country === CONST.COUNTRY.US && !values.state) {


I think it does not work as before

It works as it was before since this value can be entered only with dropdown

filip-solecki · 2024-01-22T11:11:57Z

src/components/AddressForm.tsx

+        }
+
+        if ('samples' in countryRegexDetails) {
+            countryZipFormat = countryRegexDetails.samples as string;


why are this assertions needed? What are the types of countryRegexDetails.regex and countryRegexDetails.samples?

To specify types in this case (some countries don't have those fields and ts resolve those fields as unknown)

RegExp and string accordingly

blazejkustra · 2024-01-29T11:54:30Z

src/types/onyx/Form.ts

@@ -21,6 +23,35 @@ type DateOfBirthForm = Form & {
    dob?: string;
 };

+type AddressForm = Form & {


This has changed last week, please merge the newest main

blazejkustra · 2024-01-29T17:03:41Z

src/components/AddressForm.tsx

@@ -116,6 +144,7 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
    }, []);

    return (
+        // @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/25109) is migrated to TypeScript.


Please merge the newest main and follow new Form practices (check other forms with validate/onSubmit functions)

melvin-bot · 2024-02-08T17:27:49Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

melvin-bot · 2024-02-08T17:29:39Z

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

fedirjh · 2024-02-26T16:44:25Z

@pasyukevich Could you please merge main? Thank you.

pasyukevich · 2024-02-27T13:53:10Z

@fedirjh PR updated

src/components/AddressForm.tsx

fedirjh

LGTM

melvin-bot · 2024-02-29T19:33:41Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #31957 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

jasperhuangg · 2024-03-01T18:54:44Z

conflicts!

pasyukevich · 2024-03-04T15:57:50Z

@jasperhuangg PR updated

melvin-bot · 2024-03-04T18:06:17Z

@jasperhuangg looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

OSBotify · 2024-03-04T18:11:27Z

✋ 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-03-04T21:02:32Z

🚀 Deployed to staging by https://github.com/jasperhuangg in version: 1.4.47-0 🚀

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

OSBotify · 2024-03-06T21:51:34Z

🚀 Deployed to production by https://github.com/roryabraham in version: 1.4.47-10 🚀

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

paultsimura · 2024-04-13T10:28:49Z

src/components/AddressForm.tsx


-        if (countrySpecificZipRegex) {
+        if (countrySpecificZipRegex && values.zipPostCode) {


This change broke the "is required" check for the zip codes. We shouldn't have added this condition and used the conditional chaining where needed instead.

pasyukevich force-pushed the feature/migrate-AddressForm branch 4 times, most recently from c533366 to 4e88a52 Compare January 9, 2024 16:38

VickyStash reviewed Jan 10, 2024

View reviewed changes

fabioh8010 reviewed Jan 10, 2024

View reviewed changes

src/components/AddressForm.tsx Outdated Show resolved Hide resolved

src/components/AddressForm.tsx Outdated Show resolved Hide resolved

src/components/AddressForm.tsx Outdated Show resolved Hide resolved

pasyukevich force-pushed the feature/migrate-AddressForm branch 4 times, most recently from 610d212 to 70699c4 Compare January 16, 2024 08:57

fabioh8010 reviewed Jan 17, 2024

View reviewed changes

[TS migration] Migrate 'AddressForm.js' component to TypeScript

e4d33ce

pasyukevich force-pushed the feature/migrate-AddressForm branch from 70699c4 to e4d33ce Compare January 17, 2024 09:00

fabioh8010 approved these changes Jan 17, 2024

View reviewed changes

filip-solecki reviewed Jan 22, 2024

View reviewed changes

blazejkustra reviewed Jan 29, 2024

View reviewed changes

pasyukevich added 2 commits January 31, 2024 18:30

Merge branch 'main' into feature/migrate-AddressForm

bf8650a

address comments

d4a17db

blazejkustra approved these changes Feb 6, 2024

View reviewed changes

pasyukevich added 2 commits February 6, 2024 14:04

Merge branch 'main' into feature/migrate-AddressForm

762a628

Fix type for errors

5beeb4c

pasyukevich force-pushed the feature/migrate-AddressForm branch from 7bb77c3 to 5beeb4c Compare February 6, 2024 17:11

Merge branch 'main' into feature/migrate-AddressForm

3da87a3

pasyukevich marked this pull request as ready for review February 8, 2024 17:29

pasyukevich requested a review from a team as a code owner February 8, 2024 17:29

melvin-bot bot removed the request for review from a team February 8, 2024 17:29

melvin-bot bot requested a review from fedirjh February 8, 2024 17:29

pasyukevich added 2 commits February 27, 2024 14:35

Merge branch 'main' into feature/migrate-AddressForm

df863b8

apply changes

b2bde3b

fedirjh reviewed Feb 27, 2024

View reviewed changes

src/components/AddressForm.tsx Outdated Show resolved Hide resolved

remove commented code

e2768ea

pasyukevich requested a review from fedirjh February 29, 2024 10:08

fedirjh approved these changes Feb 29, 2024

View reviewed changes

melvin-bot bot requested a review from jasperhuangg February 29, 2024 19:38

jasperhuangg previously approved these changes Mar 1, 2024

View reviewed changes

Merge branch 'main' into feature/migrate-AddressForm

9f99e35

pasyukevich dismissed jasperhuangg’s stale review via 9f99e35 March 4, 2024 14:19

fix typings after merge

b45851b

pasyukevich force-pushed the feature/migrate-AddressForm branch from b10b3c4 to b45851b Compare March 4, 2024 15:44

jasperhuangg approved these changes Mar 4, 2024

View reviewed changes

jasperhuangg merged commit 34ce9e0 into Expensify:main Mar 4, 2024
15 checks passed

melvin-bot bot added the Emergency label Mar 4, 2024

github-actions bot mentioned this pull request Mar 4, 2024

Deploy Checklist: New Expensify 2024-03-04 #37698

Closed

97 tasks

melvin-bot bot mentioned this pull request Mar 6, 2024

[$250] [HOLD for payment 2024-03-13] [TS migration] Migrate 'AddressForm.js' component to TypeScript #31957

Closed

Krishna2323 mentioned this pull request Mar 20, 2024

Personal details - "common.zipCodeExampleFormat" appears under Zip / Postcode field #38660

Closed

6 tasks

bernhardoj mentioned this pull request Mar 28, 2024

[HOLD for payment 2024-04-15] Address - Saved address without zip code is not reflected on secondary device #39168

Closed

6 tasks

paultsimura reviewed Apr 13, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TS migration] Migrate 'AddressForm.js' component to TypeScript #34149

[TS migration] Migrate 'AddressForm.js' component to TypeScript #34149

pasyukevich commented Jan 9, 2024 •

edited

Loading

fabioh8010 Jan 17, 2024 •

edited

Loading

pasyukevich Jan 17, 2024

filip-solecki Jan 22, 2024

pasyukevich Jan 22, 2024

filip-solecki Jan 22, 2024

pasyukevich Jan 22, 2024

blazejkustra Jan 29, 2024

blazejkustra Jan 29, 2024

melvin-bot bot commented Feb 8, 2024

melvin-bot bot commented Feb 8, 2024

fedirjh commented Feb 26, 2024

pasyukevich commented Feb 27, 2024

fedirjh left a comment

melvin-bot bot commented Feb 29, 2024

jasperhuangg commented Mar 1, 2024

pasyukevich commented Mar 4, 2024

melvin-bot bot commented Mar 4, 2024

OSBotify commented Mar 4, 2024

OSBotify commented Mar 4, 2024

OSBotify commented Mar 6, 2024

paultsimura Apr 13, 2024

	zipPostCode?: string \| Array<string \| Record<string, string>>;
	zipPostCode?: Localize.MaybePhraseKey;


		if (countrySpecificZipRegex) {
		if (countrySpecificZipRegex && values.zipPostCode) {

[TS migration] Migrate 'AddressForm.js' component to TypeScript #34149

[TS migration] Migrate 'AddressForm.js' component to TypeScript #34149

Conversation

pasyukevich commented Jan 9, 2024 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

fabioh8010 Jan 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

melvin-bot bot commented Feb 8, 2024

melvin-bot bot commented Feb 8, 2024

fedirjh commented Feb 26, 2024

pasyukevich commented Feb 27, 2024

fedirjh left a comment

Choose a reason for hiding this comment

melvin-bot bot commented Feb 29, 2024

jasperhuangg commented Mar 1, 2024

pasyukevich commented Mar 4, 2024

melvin-bot bot commented Mar 4, 2024

OSBotify commented Mar 4, 2024

OSBotify commented Mar 4, 2024

OSBotify commented Mar 6, 2024

Choose a reason for hiding this comment

pasyukevich commented Jan 9, 2024 •

edited

Loading

fabioh8010 Jan 17, 2024 •

edited

Loading