W-20975340, W-21013345: SPM at checkout

[rasbhat]

Display Saved Payment Methods at checkout
Includes refactoring for the work item W-21013345 as well.

Description

1. A registered User is able to view SPMs at checkout.
2. A registered user is able to use SPMs to checkout and place order.

Currently supported SPMs are Credit cards and SEPA debit

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• (change1)

How to Test-Drive This PR

• (step1)

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[cc-prodsec]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[rasbhat]

Ran linter on the files. Will be adding tests for all the changes.

[sf-mkosak]

= undefined is redundant

[rasbhat]

Removed

[sf-mkosak]

Is using require like this an established pattern in PWA?

[rasbhat]

There are a few test modules (shipping-address.test.js, use-add-to-cart-modal.test.js) in PWA that use it.

[sf-mkosak]

Feels suspect having to disable lint rule here. It'd be good to at least try to find another solution here in case this doesn't jive well with the PWA reviewers when we merge to develop. Otherwise PR is looking good and shaping up!

[sf-mkosak]

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

[rasbhat]

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

The lint disable is in place throughout the codebase wherever the require has been used. If not disabled, it throws a lint error:

/Users/rvishwanathbhat/dev/git-repos/pwa-kit/packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js
  1016:51  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
  1157:17  error  Require statement not part of import statement  @typescript-eslint/no-var-requires

[sf-mkosak]

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

The lint disable is in place throughout the codebase wherever the require has been used. If not disabled, it throws a lint error:

/Users/rvishwanathbhat/dev/git-repos/pwa-kit/packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js
  1016:51  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
  1157:17  error  Require statement not part of import statement  @typescript-eslint/no-var-requires

What I mean is change the implementation such that you don't use require and therefore don't need to override lint rules.

[rasbhat]

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

The lint disable is in place throughout the codebase wherever the require has been used. If not disabled, it throws a lint error:

/Users/rvishwanathbhat/dev/git-repos/pwa-kit/packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js
  1016:51  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
  1157:17  error  Require statement not part of import statement  @typescript-eslint/no-var-requires

What I mean is change the implementation such that you don't use require and therefore don't need to override lint rules.

Ah, got it, let me try that. Will update my upcoming PR with it.