840117 - Figure out a way to workaround bug 831106 when backspacing in the PIN entry flow for payments

Status: VERIFIED FIXED

(Marketplace Graveyard :: Payments/Refunds, defect, P2)

Description

[Jason Smith [:jsmith]]

Triage determined to not block on bug 831106, but we should investigate whether it's possible to workaround the problem on the marketplace side. If it isn't possible, feel free to wont fix the bug and explain why.

Comment 1

[Kumar McMillan [:kumar]]

potch, is this fixed or not yet? I recall you mentioned this was because the click target was too big.

Comment 2

[Kumar McMillan [:kumar]]

Potch, this is still happening in the latest webpay. Can you think of a workaround?

Comment 3

[Kumar McMillan [:kumar]]

Stuart is doing PIN ui work so he's going to take a look at this

Comment 4

[Jason Smith [:jsmith]]

Kumar - Can someone provide a reduced test case in bug 831106 so Jeff can fix the bug? If so, we might be able to avoid hacking a workaround on marketplace and uplifting a fix to 1.01.

Comment 5

[Kumar McMillan [:kumar]]

ok, we can try to isolate it. The overlay that might be causing it is here: https://github.com/mozilla/webpay/blob/c2edf1a16608aa44498d8af48113e5c3c5ddf84e/media/css/pay/pay.less#L171-L181

Comment 6

[[e-mail]]

I've been looking into this further and after bisecting some of the button styles I found the problem stops happening if border-radius is set to 0 on the button styles.

I'll see about providing a stand-alone test-case.

Comment 7

[Wil Clouser [:clouserw]]

Potch was talking about reducing the size of the click area I think.  He could speak more to his ideas, of course.  Potch - did you have any WIP patches or ideas for this?

Comment 8

[[e-mail]]

A test-case has been added to 831106. So far no viable workarounds appear to be available.

Comment 9

[[e-mail]]

r? https://github.com/mozilla/webpay/pull/146

Comment 10

[[e-mail]]

See the PR above for a workaround.

Comment 11

[[e-mail]]

https://github.com/mozilla/webpay/commit/9a7b2ab5bf69c00c9668c2925199372893ecbd7d

Comment 12

[krupa raj[:krupa]]

Stuart, thanks for fixing this. However, I found a way to create the blank button

STR:
1. Log in using a new account
2. Start the purchase of a paid app
3. Create PIN and click continue
4. IN the confirm screen, enter . instead of digits 

observed behavior:
Form submission fails with "Pin can contain only digits" and the "Cancel" button label disappears

Note: The label appears if you give it a few seconds. However this behavior is pretty visible to the user.

Comment 13

[krupa raj[:krupa]]

Attachment: screenshot for reopening

Comment 14

[[e-mail]]

(In reply to krupa raj 82[:krupa] from comment #12)
> Stuart, thanks for fixing this. However, I found a way to create the blank
> button
> 
> STR:
> 1. Log in using a new account
> 2. Start the purchase of a paid app
> 3. Create PIN and click continue
> 4. IN the confirm screen, enter . instead of digits 
> 
> observed behavior:
> Form submission fails with "Pin can contain only digits" and the "Cancel"
> button label disappears
> 
> Note: The label appears if you give it a few seconds. However this behavior
> is pretty visible to the user.

Good catch Krupa! I expect it's just one more place I need to add the code to update the buttons, so it shouldn't a problem.

Comment 15

[[e-mail]]

r? https://github.com/mozilla/webpay/pull/152

Comment 16

[[e-mail]]

https://github.com/mozilla/webpay/commit/14141de13c8ca6e11f5d7be9e8c435dfaee48508

Comment 17

[Victor Carciu]

Verified as fixed using both scenarios. No blank button anymore.