[HOLD] refactor(checkout): CHECKOUT-9386 Convert CreditCardNumberInput #2552
Conversation
| } | ||
| }); |
There was a problem hiding this comment.
| }); | |
| }, []); |
There was a problem hiding this comment.
Also do we need to add deps here, since this replacing componentDidUpdate and not componentDidmount?
There was a problem hiding this comment.
In theory, [] should not be set in order to run this whenever something changes.
And we only trigger updates when inputRef.current && inputRef.current.selectionEnd !== nextSelectionEndRef.current is met.
0004a6e
refactor(checkout): CHECKOUT-9386 CreditCardNumberInput
0004a6e to
327871f
Compare
327871f to
2de5c47
Compare
2d6eb82 to
ca16b3b
Compare
| @@ -260,9 +260,7 @@ const BigCommercePaymentsCreditCardsPaymentMethod: FunctionComponent<PaymentMeth | |||
| [getHostedFormOptions, initializePayment], | |||
| ); | |||
|
|
|||
| // Info: isHostedFormEnabled is an option in store config which responsible for switching BigCommercePayments Credit Card form | |||
| // rendering between Hosted Form and default BC fields (non-hosted) | |||
| return isHostedFormEnabled ? ( | |||
There was a problem hiding this comment.
Removed the branch when isHostedFormEnabled is false.
Confirmed internally this is no longer possible.
| import { LoadingOverlay } from '@bigcommerce/checkout/ui'; | ||
|
|
||
| export interface CreditCardPaymentMethodProps { | ||
| cardFieldset?: ReactNode; | ||
| cardFieldset: ReactNode; |
There was a problem hiding this comment.
Making cardFieldSet required, because every payment method that uses <CreditCardPaymentMethodComponent /> now must configure its own card validation field set.
What/Why?
Convert class component
CreditCardNumberInputinto function component.Replacing class components with function components eliminates the need for traditional lifecycle methods and enables full adoption of React 18 features like hooks and concurrent rendering.
This modernization aligns with React’s roadmap and ensures greater compatibility with future updates.
Rollout/Rollback
Revert.
Testing
CI.