Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Checkout: Convert useCreatePaymentMethods to TypeScript #50965

Merged
merged 5 commits into from
Mar 11, 2021
Merged

Checkout: Convert useCreatePaymentMethods to TypeScript #50965

merged 5 commits into from
Mar 11, 2021

Conversation

sirbrillig
Copy link
Member

@sirbrillig sirbrillig commented Mar 10, 2021 •
edited
Loading

Changes proposed in this Pull Request

#50723 took the first step toward converting payment method creation to TypeScript by converting useCreateExistingCards. This PR converts the rest of the functions.

Testing instructions

This should not have any effect on checkout as the changes should be almost entirely TypeScript (I've commented on the few actual code changes in the PR if you want to check them). Visit checkout and verify that the expected payment methods are available, particularly the new credit card method and PayPal. If they show up at all, then this should be safe.

@sirbrillig sirbrillig requested a review from a team as a code owner March 10, 2021 23:08
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 10, 2021
@matticbot
Copy link
Contributor

Test live: https://calypso.live/?branch=update/use-create-payment-methods-typescript

@sirbrillig sirbrillig self-assigned this Mar 10, 2021
@sirbrillig sirbrillig added [Estimate] 1 [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. labels Mar 10, 2021
sirbrillig
sirbrillig commented Mar 10, 2021
View reviewed changes
client/my-sites/checkout/composite-checkout/hooks/use-create-payment-methods/index.ts
@@ -395,7 +496,6 @@ export default function useCreatePaymentMethods( {

const existingCardMethods = useCreateExistingCards( {
storedCards,
stripeConfiguration,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This argument is not used, so I'm removing it here. One of the benefits of type safety.

sirbrillig
sirbrillig commented Mar 10, 2021
View reviewed changes
client/my-sites/checkout/composite-checkout/hooks/use-create-payment-methods/index.ts
@@ -416,5 +516,5 @@ export default function useCreatePaymentMethods( {
epsMethod,
wechatMethod,
bancontactMethod,
].filter( Boolean );
].filter( doesValueExist );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

doesValueExist (poorly named; it should be something like isValueNotFalsy) is a TypeScript-safe way to filter out null values.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think isTruthy is the most specific description of how it works (!!)

@matticbot
Copy link
Contributor

matticbot commented Mar 10, 2021 •
edited
Loading

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~14 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases        +64 B  (+0.0%)      +13 B  (+0.0%)
purchases             +64 B  (+0.0%)      +13 B  (+0.0%)
checkout              +48 B  (+0.0%)      +14 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~12 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal        +48 B  (+0.0%)      +12 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

@pottedmeat pottedmeat self-requested a review March 11, 2021 16:21
nbloomf
nbloomf approved these changes Mar 11, 2021
View reviewed changes
Copy link
Contributor

@nbloomf nbloomf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great! I completed a paypal purchase with no problems.

pottedmeat
pottedmeat reviewed Mar 11, 2021
View reviewed changes
client/my-sites/checkout/composite-checkout/hooks/use-create-payment-methods/index.ts Outdated

export { useCreateExistingCards };

export function useCreatePayPal( { labelText = null } = {} ) {
export function useCreatePayPal( {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is called from client/me/purchases/manage-purchases/change-payment-method/use-create-assignable-payment-methods.ts with an object?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should TranslateResult from 'i18n-calypso' be added as a type for labelText?

Copy link
Member Author

@sirbrillig sirbrillig Mar 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's correct. Is this syntax wrong? I found it hard to say "this can accept an optional object and that object can have an optional labelText property".

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should TranslateResult from 'i18n-calypso' be added as a type for labelText?

Ah, actually I think we should leave it as a string, but that's a good point. That use should be modified to cast those translate results to a string. I'll add that in.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move this type of stuff to an assertion function to perform the cast?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I adjusted things around. How does it look now?

pottedmeat
pottedmeat reviewed Mar 11, 2021
View reviewed changes
client/my-sites/checkout/composite-checkout/hooks/use-create-payment-methods/index.ts
stripe: Stripe | null;
shouldUseEbanx: boolean;
shouldShowTaxFields?: boolean;
activePayButtonText?: string | undefined;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some uses of activePayButtonText in non-ts files aren't cast to string.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you're right. This is an issue but I'm not super concerned about it here. We'll need to handle those when we convert those files to TS and there will probably be lots of similar issues. I'm not worried because it shouldn't cause any issues as long as the translate() is just producing a string (most uses of translate() do) and not a React component. This will be a lot easier when we start switching to react-i18n which separates the two concepts.

@sirbrillig sirbrillig merged commit 619ee94 into trunk Mar 11, 2021
@sirbrillig sirbrillig deleted the update/use-create-payment-methods-typescript branch March 11, 2021 17:55
@matticbot matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nbloomf nbloomf nbloomf approved these changes

@pottedmeat pottedmeat pottedmeat approved these changes

Assignees

@sirbrillig sirbrillig

Labels
[Estimate] 1 [Feature] Checkout The checkout screen and process for purchases made on WordPress.com.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@sirbrillig @matticbot @pottedmeat @nbloomf