Add slash in Debit card expiration #7362

mananjadhav · 2022-01-21T19:25:23Z

Details

Adding slash "/" in DebitCard expiry

Fixed Issues

$ #6891

Tests

Test auto slash for 2 digits
Test backspace for 3 digits, 2 digits, digits ending with slash
Test with paste text
Tested with text already containing a slash
Tested for 5 digit and 7 digit text

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Go to the Settings by clicking Profile Image on LHN
Select "Payments" from the Sidebar
Select Add Payment and choose "Debit Card"
Start typing the expiry date, it should automatically add slash(/) when you type 2 digits.
If you press backspace, then the slash should be removed automatically when you delete the third digit.

Verify that no errors appear in the JS console

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

ios-autoslash.mov

Android

android-autoslash.mov

…toslash-expiration-date

…toslash-expiration-date # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.

mananjadhav · 2022-03-07T20:08:27Z

@parasharrajat @Julesssss Did we check #7318 is working fine for Android and iOS? For me it doesn't text on prop change for native devices.

parasharrajat · 2022-03-08T11:29:11Z

For me it doesn't text on prop change for native devices.

I didn't get it.

parasharrajat · 2022-03-08T18:31:08Z

What exactly are you facing?

mananjadhav · 2022-03-08T18:43:32Z

What exactly are you facing?

The state value is updated in the form, but the TextInput doesn't show the updated value. Basically, when I do Backspace, it should delete the slash + digit and update the value but it doesn't reflect in TextInput. This happens only in native devices, works fine on Web, MWeb and Desktop.

mananjadhav · 2022-03-10T03:50:01Z

@parasharrajat ^

parasharrajat · 2022-03-10T09:10:33Z

I will pull your branch see what is happening.

parasharrajat · 2022-03-10T13:08:22Z

I tested and it seems this.state.expirationDate is always empty. Could you please test it carefully?

mananjadhav · 2022-03-10T14:27:18Z

That’s weird because I did log it. I’ll check again, and the same thing is working fine on web/mWeb and desktop

parasharrajat · 2022-03-10T14:30:06Z

I tested on web.

mananjadhav · 2022-03-10T14:53:21Z

I tested on web.

🤔 Here's the video of Web and I've also logged the state.expirationDate in the render. Can you take a pull again? Maybe I didn't push all changes?

auto-slash-expiration.mp4

mananjadhav · 2022-04-07T09:32:53Z

I couldn't find a specific issue with the code and the same delay isn't experienced in iOS.

Could it be that we're unnecessarily re-rendering the entire Add debit card form

It does rerender the component, should we try moving this into a separate TextInput?

@Julesssss I'll be able to access an Android device by tomorrow, can test release build after that.

parasharrajat · 2022-04-07T12:34:43Z

Great. Thanks, @mananjadhav. Let's wait a bit for the slack thread.

parasharrajat · 2022-04-11T09:46:51Z

@Julesssss What do you think would be the best path forward here?

Julesssss · 2022-04-11T11:25:47Z

Sorry, I think my Slack thread comment was about a different issue 🤦

Maybe we continue with the release build test. If there's no noticeable lag we can probably just move forward.

I'll be able to access an Android device by tomorrow, can test release build after that.

…toslash-expiration-date

mananjadhav · 2022-04-12T17:10:16Z

Maybe we continue with the release build test. If there's no noticeable lag we can probably just move forward.

@parasharrajat @Julesssss I was able to get access to an Android device and test a release build. I don't see a huge lag and it looks good enough to move forward. Attached is the video.

auto-slash-expiration-android_52XFdGB0.mp4

…toslash-expiration-date

Julesssss · 2022-04-12T17:45:42Z

@parasharrajat @Julesssss I was able to get access to an Android device and test a release build. I don't see a huge lag and it looks good enough to move forward. Attached is the video.

Awesome, thanks for that! Looks fine to me.

Julesssss · 2022-04-12T17:48:34Z

src/pages/settings/Payments/AddDebitCardPage.js

+            // Backspace was hit/character removed
+            // Remove extra digit when there's a / involved


Could you just reword this sightly? It took me a couple of times to understand it properly

I've updated. Let me know if it is fine.

src/pages/settings/Payments/AddDebitCardPage.js

Julesssss

Thanks. Looking good

parasharrajat

LGTM.

🎀 👀 🎀 C+ reviewed

OSBotify · 2022-04-21T00:21:06Z

🚀 Deployed to staging by @Julesssss in version: 1.1.56-0 🚀

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

OSBotify · 2022-04-25T22:20:28Z

🚀 Deployed to production by @francoisl in version: 1.1.56-0 🚀

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

mananjadhav added 11 commits January 22, 2022 00:48

fix: Added instance var and insertStringAt utils

91b17fa

fix: Added onKeyPress and onChangeText for slash handling

42b9524

Merge branch 'main' of https://github.com/mananjadhav/App into fix/au…

e584b66

…toslash-expiration-date

fix: Changed the auto slash logic for length

5d29dd7

feat: moved the auto slash code to separate functions

61b79ee

fix: added funcs to this

c547151

fix: handle delete slash when its the last char

a84ede9

fix: Code cleanup

77fd124

fix: added comment to functions

b1177c1

fix: change event to e.nativeEvent

e0c7020

mananjadhav marked this pull request as ready for review March 7, 2022 20:07

mananjadhav requested a review from a team as a code owner March 7, 2022 20:07

botify requested review from Julesssss and parasharrajat March 7, 2022 20:07

MelvinBot requested review from Julesssss and parasharrajat and removed request for a team, Julesssss and parasharrajat March 7, 2022 20:07

This comment was marked as outdated.

Sign in to view

mananjadhav added 2 commits April 12, 2022 03:00

Merge branch 'main' of https://github.com/mananjadhav/App into fix/au…

bfb9491

…toslash-expiration-date

fix: remove unwanted variable

6beb3d8

Merge branch 'main' of https://github.com/mananjadhav/App into fix/au…

0b3ed72

…toslash-expiration-date

Julesssss reviewed Apr 12, 2022

View reviewed changes

src/pages/settings/Payments/AddDebitCardPage.js Outdated Show resolved Hide resolved

refactor: changed comment language

49956d7

mananjadhav requested a review from Julesssss April 13, 2022 11:37

Julesssss approved these changes Apr 13, 2022

View reviewed changes

parasharrajat approved these changes Apr 13, 2022

View reviewed changes

Julesssss merged commit b85d4a9 into Expensify:main Apr 13, 2022

yuwenmemon mentioned this pull request Apr 20, 2022

Deploy Checklist: New Expensify 2022-04-20 #8707

Closed

54 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add slash in Debit card expiration #7362

Add slash in Debit card expiration #7362

mananjadhav commented Jan 21, 2022 •

edited

Loading

mananjadhav commented Mar 7, 2022

parasharrajat commented Mar 8, 2022

parasharrajat commented Mar 8, 2022

mananjadhav commented Mar 8, 2022

mananjadhav commented Mar 10, 2022

parasharrajat commented Mar 10, 2022

parasharrajat commented Mar 10, 2022

mananjadhav commented Mar 10, 2022

parasharrajat commented Mar 10, 2022

mananjadhav commented Mar 10, 2022

This comment was marked as outdated.

mananjadhav commented Apr 7, 2022

parasharrajat commented Apr 7, 2022

parasharrajat commented Apr 11, 2022

Julesssss commented Apr 11, 2022

mananjadhav commented Apr 12, 2022

Julesssss commented Apr 12, 2022

Julesssss Apr 12, 2022

mananjadhav Apr 13, 2022

Julesssss left a comment

parasharrajat left a comment

OSBotify commented Apr 21, 2022

OSBotify commented Apr 25, 2022

		// Backspace was hit/character removed
		// Remove extra digit when there's a / involved

Add slash in Debit card expiration #7362

Add slash in Debit card expiration #7362

Conversation

mananjadhav commented Jan 21, 2022 • edited Loading

Details

Fixed Issues

Tests

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

mananjadhav commented Mar 7, 2022

parasharrajat commented Mar 8, 2022

parasharrajat commented Mar 8, 2022

mananjadhav commented Mar 8, 2022

mananjadhav commented Mar 10, 2022

parasharrajat commented Mar 10, 2022

parasharrajat commented Mar 10, 2022

mananjadhav commented Mar 10, 2022

parasharrajat commented Mar 10, 2022

mananjadhav commented Mar 10, 2022

This comment was marked as outdated.

mananjadhav commented Apr 7, 2022

parasharrajat commented Apr 7, 2022

parasharrajat commented Apr 11, 2022

Julesssss commented Apr 11, 2022

mananjadhav commented Apr 12, 2022

Julesssss commented Apr 12, 2022

Julesssss Apr 12, 2022

Choose a reason for hiding this comment

mananjadhav Apr 13, 2022

Choose a reason for hiding this comment

Julesssss left a comment

Choose a reason for hiding this comment

parasharrajat left a comment

Choose a reason for hiding this comment

OSBotify commented Apr 21, 2022

OSBotify commented Apr 25, 2022

mananjadhav commented Jan 21, 2022 •

edited

Loading