feat(targets): Add Payment target #2817

larsroettig · 2020-10-23T14:06:38Z

Description

As developer, we want to build our own Payment methods as Extension for that reasons.
Payments should be extendable via Targetables

Related Issue

Closes #2816

Acceptance

Verification Stakeholders

Specification

Verification Steps

Checkout should work as before
Scaffolding

DEBUG_PROJECT_CREATION=true ./pwa-studio/packages/pwa-buildpack/bin/buildpack create-project payment-test-1 --template "venia-concept" --name "payment-test-1" --author "larsroettig" --backend-url "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/" --braintree-token "sandbox_8yrzsvtm_s2bg8fs563crhqzk" --npm-client "yarn"

Payment addable via
payment-test-1/local-intercept.js

function localIntercept(targets) {
    targets.of("@magento/venia-ui").payments.tap((payments) =>
        payments.add({
            paymentCode: "custome",
            importPath: "src/components/MyPayment/payment.js",
        })
    );
}

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.

PWAStudioBot · 2020-10-23T14:19:08Z

	Fails
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	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).

Generated by 🚫 dangerJS against 4a24865

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodByCode.js

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

sirugh · 2020-10-23T15:29:50Z

I'm unable to view the deployment, but it says it passed. Not sure why.

…io into payment-targetables

revanth0212

Beautiful, love the way this small piece of code opens up payment methods for extensions. I have a couple of suggestions for you, I'll leave it up to you if you wanna handle them.

Thanks for the contribution @larsroettig.

revanth0212 · 2020-10-27T00:02:24Z

...ildpack/lib/WebpackTools/targetables/BabelModifyJSXPlugin/__tests__/JSXSnippetParser.spec.js

@@ -11,7 +11,7 @@ test('normalizes JSX without brackets or closing elements', () => {
        ['wat', '<wat />'],
        ['  oh  no="crap"', '<oh  no="crap" />']


Can we change this 🤣 ?

revanth0212 · 2020-10-27T00:09:59Z

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js

+ * This file is augmented at build time using the @magento/venia-ui build
+ * target "payments", which allows third-party modules to add new payment component mappings.
+ */
+export default {};


I would add to the docs the potential type of the default object.

{ [paymentCode]: paymentCodeComponent }

Or the post build representation of this file:

import braintree from '@magento/venia-ui/lib/components/CheckoutPage/paymentMethods/braintree`; import paypal from '@third_party_package/path/to/the/component'; export default { braintree: braintree, paypal: paypal }

revanth0212 · 2020-10-27T00:15:38Z

packages/venia-ui/lib/targets/venia-ui-intercept.js

+    const paymentMethodList = new PaymentMethodList(venia);
+    paymentMethodList.add({
+        paymentCode: 'braintree',
+        importPath: './creditCard'


It would be clear if you can either mention in a comment here that the path reference is from the paymentMetodCollection.js file or just change this to '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard`.

sirugh · 2020-10-27T13:28:46Z

@dpatil-magento did you mean to close this? Maybe the base just needs to be updated now that the original base was merged.

larsroettig · 2020-10-27T13:31:59Z

@sirugh I will resubmit in new PR today because I don't want to rebase from a force rebased branch i saved as diff.

dpatil-magento · 2020-10-27T14:35:14Z

@sirugh I merged #2765 and closed branch zetlen/targetables that might have caused this pr to close automatically. I have restored branch zetlen/targetables just incase needed.

* #2817: Add Payment Targets * #2816: Review changes * Prettier changes. Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com> Co-authored-by: Revanth Kumar <revanth0212@gmail.com>

Lars Roettig added 4 commits August 10, 2020 18:53

Merge pull request #1 from magento/develop

b2265cb

Merge remote-tracking branch 'upstream/develop' into develop

691f415

Merge remote-tracking branch 'upstream/develop' into develop

4a1b25d

feat(targets): Add Payment target

774d2f0

magento-engcom-team added Partner: TechDivision partners-contribution Event: MageCONF CD 2020 labels Oct 23, 2020

m2-community-project bot added this to Ready for Review in Pull Request Progress Oct 23, 2020

PWAStudioBot added pkg:pwa-buildpack pkg:venia-ui labels Oct 23, 2020

revanth0212 reviewed Oct 23, 2020

View reviewed changes

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

m2-community-project bot assigned revanth0212 Oct 23, 2020

m2-community-project bot moved this from Ready for Review to Review in Progress in Pull Request Progress Oct 23, 2020

m2-community-project bot added the Progress: review label Oct 23, 2020

revanth0212 reviewed Oct 23, 2020

View reviewed changes

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

m2-community-project bot assigned tjwiebell Oct 23, 2020

larsroettig and others added 10 commits October 23, 2020 19:49

Fixes for review

a2ee2df

Fixes for review

14eec72

Merge branch 'zetlen/targetables' into payment-targetables

8e8c554

Refactoring to array acess

7cabbf9

Merge branch 'payment-targetables' of github.com:larsroettig/pwa-stud…

92d67b5

…io into payment-targetables

Fix for empty payment

6a1d053

Add Payment Targets

aebb8ee

Add Docs for new payment api

81532d3

Merge remote-tracking branch 'origin/develop' into payment-targetables

777504e

Add Docs for new payment api

4a24865

revanth0212 approved these changes Oct 27, 2020

View reviewed changes

dpatil-magento closed this Oct 27, 2020

dpatil-magento deleted the branch magento:zetlen/targetables October 27, 2020 04:04

m2-community-project bot removed this from Review in Progress in Pull Request Progress Oct 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(targets): Add Payment target #2817

feat(targets): Add Payment target #2817

larsroettig commented Oct 23, 2020 •

edited

PWAStudioBot commented Oct 23, 2020 •

edited

sirugh commented Oct 23, 2020

revanth0212 left a comment

revanth0212 Oct 27, 2020

revanth0212 Oct 27, 2020

revanth0212 Oct 27, 2020

sirugh commented Oct 27, 2020

larsroettig commented Oct 27, 2020

dpatil-magento commented Oct 27, 2020

		@@ -11,7 +11,7 @@ test('normalizes JSX without brackets or closing elements', () => {
		['wat', '<wat />'],
		[' oh no="crap"', '<oh no="crap" />']

feat(targets): Add Payment target #2817

feat(targets): Add Payment target #2817

Conversation

larsroettig commented Oct 23, 2020 • edited

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

PWAStudioBot commented Oct 23, 2020 • edited

sirugh commented Oct 23, 2020

revanth0212 left a comment

Choose a reason for hiding this comment

revanth0212 Oct 27, 2020

Choose a reason for hiding this comment

revanth0212 Oct 27, 2020

Choose a reason for hiding this comment

revanth0212 Oct 27, 2020

Choose a reason for hiding this comment

sirugh commented Oct 27, 2020

larsroettig commented Oct 27, 2020

dpatil-magento commented Oct 27, 2020

larsroettig commented Oct 23, 2020 •

edited

PWAStudioBot commented Oct 23, 2020 •

edited