[feature]: refactor edit steps out of redux and into local checkout state #1338

sirugh · 2019-06-13T13:14:59Z

Description

This is a followup to #1309. The original refactor left much of the original redux piping in place. This PR shows how we can remove parts of it relatively painlessly. Here we are migrating the state of what form is being edited, ie payment, address or shipping, into local form state.

I also removed some unnecessary props and added some safety checks/state to make sure we only enable the submission of billing information when appropriate.

Related Issue

Closes #1405

Verification Steps

Open checkout and work through the steps.
You should be able to open and close each step in no particular order, and no errors should occur.

Screenshots / Screen Captures (if appropriate)

Proposed Labels for Change Type/Package

major (e.g x.0.0 - a breaking change)
minor (e.g 0.x.0 - a backwards compatible addition)
patch (e.g 0.0.x - a bug fix)

Checklist:

I have updated the documentation accordingly, if necessary.
I have added tests to cover my changes, if necessary.

vercel · 2019-06-13T13:15:09Z

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://venia-git-reduxrefactor-checkout.magento-research1.now.sh

… editing and setEditing

PWAStudioBot · 2019-06-28T15:00:29Z

	Messages
📖	We are currently working on automating the PR metadata checks. Until that time, you may see failures related to labels/description/linked issues/etc even if you have fixed the problem. Failures will persist until the next push (assuming they are fixed).

Generated by 🚫 dangerJS against a5f5354

sirugh · 2019-07-08T14:55:21Z

packages/venia-concept/src/components/Checkout/editableForm.js


    const handleSubmitAddressForm = useCallback(
-        formValues => {
-            submitShippingAddress({
+        async formValues => {


We had to make some of the callbacks async so that they could appropriately handle an error response.

sirugh · 2019-07-23T17:41:39Z

packages/venia-concept/src/components/Checkout/braintreeDropin.js


    useEffect(() => {
        async function requestPaymentNonce() {
            try {
                const paymentNonce = await dropinInstance.requestPaymentMethod();
                onSuccess(paymentNonce);
            } catch (e) {
-                // If payment details were missing or invalid but we have data
-                // from a previous successful submission, use the previous data.
-                const storedPayment = storage.getItem('paymentMethod');


This was a weird UX. If storage has a valid payment and I enter a new card but something is invalid (pin/expiry/etc), it'll just close the form and use the storage payment info and I would assume the new info was accepted. I don't think we should do that automatically, so I removed this code. In the future we could display some UX that shows a "edit" button next to saved CC info that would re-mount the braintree dropin but for now we just have to deal with re-entering CC info.

Agreed it was a weird UX. If I remember correctly we were trying to avoid having to re-enter CC info if the only thing that was changing was the billing address.

I think you're right that even though re-entering CC info is cumbersome it is better than leaving the user uncertain or unknowledgeable about what CC info is really being used. I'd rather them have to be explicit.

jimbo

This looks good to me. I have small concerns about the async callbacks interacting with reducers, but we'll resolve them when we actually pull state out of Redux.

packages/venia-concept/src/components/Checkout/__tests__/form.spec.js

sirugh · 2019-07-26T20:31:59Z

Uh idk why the tests are failing...

zetlen

LGTM, this does simplify things. It may be a candidate for later abstraction and public API, and this makes that more achievable. Thank you!

sirugh added hold On hold until another condition is fulfilled. in progress labels Jun 13, 2019

sirugh self-assigned this Jun 13, 2019

sirugh mentioned this pull request Jun 13, 2019

[dev]: Refactor Checkout #1309

Merged

5 tasks

PWAStudioBot added the pkg:venia-concept label Jun 13, 2019

Migrate checkout state for editing and editOrder to local state using…

623a0da

… editing and setEditing

sirugh force-pushed the redux_refactor/checkout branch from a878590 to 623a0da Compare June 28, 2019 14:40

vercel bot deployed to staging June 28, 2019 14:40 View deployment

sirugh changed the title ~~WIP: Redux refactor/checkout~~ [feature Jun 28, 2019

sirugh changed the title ~~[feature~~ [feature]: refactor edit steps out of redux and into local checkout state Jun 28, 2019

sirugh removed hold On hold until another condition is fulfilled. in progress labels Jun 28, 2019

magento deleted a comment from PWAStudioBot Jun 28, 2019

update comment

4d87d64

vercel bot deployed to staging June 28, 2019 14:54 View deployment

sirugh added the version: Patch This changeset includes backwards compatible bug fixes. label Jun 28, 2019

sirugh assigned sirugh and unassigned sirugh Jun 28, 2019

Merge branch 'develop' into redux_refactor/checkout

9cb7fdf

vercel bot deployed to staging July 8, 2019 14:50 View deployment

sirugh commented Jul 8, 2019

View reviewed changes

sirugh requested a review from jimbo July 10, 2019 13:22

sirugh removed their assignment Jul 15, 2019

Merge branch 'develop' into redux_refactor/checkout

443876a

vercel bot deployed to staging July 23, 2019 16:21 View deployment

Fix disabled check for Use Card buttpon

11ab88c

vercel bot deployed to staging July 23, 2019 17:37 View deployment

sirugh commented Jul 23, 2019

View reviewed changes

supernova-at assigned jimbo Jul 24, 2019

jimbo suggested changes Jul 26, 2019

View reviewed changes

packages/venia-concept/src/components/Checkout/__tests__/form.spec.js Outdated Show resolved Hide resolved

packages/venia-concept/src/components/Checkout/__tests__/form.spec.js Outdated Show resolved Hide resolved

Merge branch 'develop' into redux_refactor/checkout

fe48686

vercel bot temporarily deployed to staging July 26, 2019 18:31 Inactive

fix snap after merge

910803e

vercel bot deployed to staging July 26, 2019 18:33 View deployment

Split tests for editableform and overview

fbaaeb8

vercel bot deployed to staging July 26, 2019 19:34 View deployment

jimbo previously approved these changes Jul 26, 2019

View reviewed changes

Rebuild

44afa06

vercel bot deployed to staging July 26, 2019 20:23 View deployment

fix casing on import

43f5c25

sirugh dismissed jimbo’s stale review via 43f5c25 July 29, 2019 14:15

vercel bot deployed to staging July 29, 2019 14:15 View deployment

zetlen approved these changes Jul 29, 2019

View reviewed changes

Merge branch 'develop' into redux_refactor/checkout

a5f5354

vercel bot deployed to staging July 29, 2019 18:55 View deployment

dpatil-magento merged commit 73049f0 into develop Jul 29, 2019

dpatil-magento deleted the redux_refactor/checkout branch July 29, 2019 21:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feature]: refactor edit steps out of redux and into local checkout state #1338

[feature]: refactor edit steps out of redux and into local checkout state #1338

sirugh commented Jun 13, 2019 •

edited

Loading

vercel bot commented Jun 13, 2019 •

edited

Loading

PWAStudioBot commented Jun 28, 2019 •

edited

Loading

sirugh Jul 8, 2019

sirugh Jul 23, 2019 •

edited

Loading

supernova-at Jul 24, 2019

jimbo left a comment

sirugh commented Jul 26, 2019

zetlen left a comment

[feature]: refactor edit steps out of redux and into local checkout state #1338

[feature]: refactor edit steps out of redux and into local checkout state #1338

Conversation

sirugh commented Jun 13, 2019 • edited Loading

Description

Related Issue

Verification Steps

Screenshots / Screen Captures (if appropriate)

Proposed Labels for Change Type/Package

Checklist:

vercel bot commented Jun 13, 2019 • edited Loading

PWAStudioBot commented Jun 28, 2019 • edited Loading

sirugh Jul 8, 2019

Choose a reason for hiding this comment

sirugh Jul 23, 2019 • edited Loading

Choose a reason for hiding this comment

supernova-at Jul 24, 2019

Choose a reason for hiding this comment

jimbo left a comment

Choose a reason for hiding this comment

sirugh commented Jul 26, 2019

zetlen left a comment

Choose a reason for hiding this comment

sirugh commented Jun 13, 2019 •

edited

Loading

vercel bot commented Jun 13, 2019 •

edited

Loading

PWAStudioBot commented Jun 28, 2019 •

edited

Loading

sirugh Jul 23, 2019 •

edited

Loading