Display page level error and disable checkout button when no available payment methods #2873

ankurvr · 2020-11-25T10:30:16Z

Fixed issue #2869 Assigned by @sirugh

Description

Display page level error and disable checkout button when no available payment methods

Related Issue

Closes #2869.

Acceptance

Verification Stakeholders

@sirugh

Specification

Verification Steps

Add item to cart
go to checkout and complete shipping steps
Make sure you have payment methods enabled other than Braintree

Screenshots / Screen Captures (if appropriate)

Checklist

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

Sync develop

…ll available payment methods while fetching cart data on checkout page

… available for available methods

PWAStudioBot · 2020-11-25T10:39:55Z

	Messages
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against a09f4d8

[PWA-633] My Account: Address Book: Main View (magento#2857)

Sync updated from develop

…nected queries to peregrine.

…eckoutPageOperations" in useCheckoutPage.js peregrine component

… to peregrine.

ankurvr · 2020-12-11T10:04:04Z

@sirugh Can you please review this PR and let me know if i am missing anything from mentioned requirements in the assigned issue #2869 .

revanth0212

Hey @ankurvr, thanks for the contribution. Nice work.

I have outlined a couple of minor changes but the overall code looks good.

Please do update the merge conflicts.

packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js

packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

packages/venia-ui/i18n/en_US.json

packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js

sirugh · 2021-02-23T17:01:57Z

I'm looking into the first issue Dev posted.

sirugh · 2021-02-23T17:37:58Z

packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js

+        // If we don't have an implementation for a method type, ignore it.
+        const isPaymentAvailable = !!availablePaymentMethods.find(({ code }) =>
+            paymentMethods.includes(code)
+        );


If zero total checkout is enabled, and a user or coupon causes the total to be $0, then code will be free. As we don't have a payment implementation view for this, we just need to allow the code free to mean that payment is available. Making the below changes allows checkout to proceed when a user has entered a coupon/gc that causes the total to be zero.

Suggested change

// If we don't have an implementation for a method type, ignore it.

const isPaymentAvailable = !!availablePaymentMethods.find(({ code }) =>

paymentMethods.includes(code)

);

// If we have an implementation, or if this is a "zero" checkout,

// we can allow checkout to proceed.

const isPaymentAvailable = !!availablePaymentMethods.find(

({ code }) => code === 'free' || paymentMethods.includes(code)

);

However, in addition to this change, we may want to change the copy here. free will only be the code when a GC/coupon is entered causing the total to be zero.

That means if a user gets to checkout page before adding a gift card or coupon they will first see the error messaging. So we might want to update the message to explain this somehow. cc @schensley

ankurvr · 2021-02-25T08:46:04Z

@ankurvr @sirugh

If multiple errors then instead of stacking one after other currently they are displayed incorrectly.

@dpatil-magento Please suggest right veriant from below.
Payment error messages have 1rem padding and stock message have 0.625rem.
Please suggest final one.

Padding is different in both kind of messages

Made padding same for both the messages

sirugh · 2021-02-25T15:32:32Z

@ankurvr Good catch on the difference. This is because there are now two errors being rendered that look similar but are different components. Please update the StockStatusMessage component css to use FormError's padding, 1rem.

ankurvr · 2021-02-25T15:34:13Z

@sirugh Noted. I will do needful.

sirugh

Thank you for fixing the styling!

stale review

dpatil-magento · 2021-02-26T18:37:18Z

Thanks @ankurvr @sirugh , QA Approved.

ankurvr added 3 commits November 24, 2020 11:38

Merge pull request #1 from magento/develop

c07e650

Sync develop

Added payment method query to checkoutPageFragments.gql.js to fetch a…

9b237db

…ll available payment methods while fetching cart data on checkout page

Added page level error message when no payment method implementations…

fb2d1d9

… available for available methods

m2-community-project bot added the Progress: ready for review label Nov 25, 2020

PWAStudioBot added pkg:peregrine pkg:venia-ui labels Nov 25, 2020

ankurvr added 13 commits November 25, 2020 16:49

Adding checkout page test update

e1c385d

Adding useCheckoutPage talon test

e8ff5af

executed prettier on checkoutPage.spec.js

6aff5b5

executed prettier on useCheckoutPage.spec.js

aefa7a8

Merge pull request #2 from magento/develop

b21de33

[PWA-633] My Account: Address Book: Main View (magento#2857)

Merge pull request #3 from ankurvr/develop

5965e67

Sync updated from develop

Updated unit test

342e5e7

Corrected test snap to pass the unit test

717ac9b

Converted "CheckoutPageOperations" to peregrine. Also moved other con…

08be417

…nected queries to peregrine.

Fixed useCheckoutPage.spec.js to make it compatible with migrated "Ch…

395e219

…eckoutPageOperations" in useCheckoutPage.js peregrine component

Prettier-ed useCheckoutPage.spec.js

a251e7e

Fixed issue with gql client after migration of CheckoutPageOperations…

f05b171

… to peregrine.

Fixed issue with gql client after migration of CheckoutPageOperations…

04cb94b

… to peregrine.

revanth0212 previously requested changes Jan 4, 2021

View reviewed changes

m2-community-project bot assigned revanth0212 Jan 4, 2021

m2-community-project bot added Progress: changes requested and removed Progress: ready for review labels Jan 4, 2021

sirugh reviewed Jan 5, 2021

View reviewed changes

packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js Outdated Show resolved Hide resolved

m2-community-project bot assigned sirugh Jan 5, 2021

Merge branch 'develop' into ankurvr-payment-method-page-error

6420448

sirugh reviewed Feb 23, 2021

View reviewed changes

m2-community-project bot added Progress: review and removed Progress: approved labels Feb 23, 2021

Fix zero total checkout use case. Add tests

b261791

sirugh dismissed supernova-at’s stale review via b261791 February 23, 2021 20:37

supernova-at previously approved these changes Feb 24, 2021

View reviewed changes

m2-community-project bot added Progress: approved and removed Progress: review labels Feb 24, 2021

Merge branch 'develop' into ankurvr-payment-method-page-error

00821eb

ankurvr added 2 commits February 26, 2021 09:30

Merge branch 'develop' into ankurvr-payment-method-page-error

d744966

Fixed layout issue with multiple page errors on checkoutPage.

b40cfd8

ankurvr dismissed supernova-at’s stale review via b40cfd8 February 26, 2021 04:02

ankurvr added 2 commits February 26, 2021 09:35

Updated test snapshots

bc79f6c

Updated test cases snapshots

a09f4d8

ankurvr requested review from sirugh and supernova-at February 26, 2021 09:52

sirugh approved these changes Feb 26, 2021

View reviewed changes

dpatil-magento merged commit ec4e97d into magento:develop Feb 26, 2021

m2-community-project bot added Progress: done and removed Progress: approved labels Feb 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display page level error and disable checkout button when no available payment methods #2873

Display page level error and disable checkout button when no available payment methods #2873

ankurvr commented Nov 25, 2020 •

edited

Loading

PWAStudioBot commented Nov 25, 2020 •

edited

Loading

ankurvr commented Dec 11, 2020

revanth0212 left a comment

sirugh commented Feb 23, 2021

sirugh Feb 23, 2021

sirugh Feb 23, 2021

ankurvr commented Feb 25, 2021 •

edited

Loading

sirugh commented Feb 25, 2021

ankurvr commented Feb 25, 2021

sirugh left a comment

dpatil-magento commented Feb 26, 2021

Display page level error and disable checkout button when no available payment methods #2873

Display page level error and disable checkout button when no available payment methods #2873

Conversation

ankurvr commented Nov 25, 2020 • edited Loading

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

PWAStudioBot commented Nov 25, 2020 • edited Loading

ankurvr commented Dec 11, 2020

revanth0212 left a comment

Choose a reason for hiding this comment

sirugh commented Feb 23, 2021

sirugh Feb 23, 2021

Choose a reason for hiding this comment

sirugh Feb 23, 2021

Choose a reason for hiding this comment

ankurvr commented Feb 25, 2021 • edited Loading

sirugh commented Feb 25, 2021

ankurvr commented Feb 25, 2021

sirugh left a comment

Choose a reason for hiding this comment

dpatil-magento commented Feb 26, 2021

ankurvr commented Nov 25, 2020 •

edited

Loading

PWAStudioBot commented Nov 25, 2020 •

edited

Loading

ankurvr commented Feb 25, 2021 •

edited

Loading