Add the message on load instead of the card fields

This commit is contained in:
Daniel Dudzic 2024-09-16 16:25:16 +02:00
parent 22b34503f5
commit ae3ad55cde
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
2 changed files with 18 additions and 7 deletions

View file

@ -172,7 +172,7 @@ $fast-transition-duration: 0.5s;
}
// 4.7 Validation Error
.wc-block-components-validation-error {
.wc-block-components-address-form__email .wc-block-components-validation-error {
grid-area: error;
width: 100%;
margin-top: 4px;

View file

@ -8,24 +8,35 @@ export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
select( STORE_NAME ).getIsGuest()
);
// Memoized Fastlane card rendering
const isEmailLookupCompleted = useSelect( ( select ) =>
select( STORE_NAME ).getIsEmailLookupCompleted()
);
const loadPaymentComponent = useCallback( async () => {
if ( isGuest ) {
if ( isGuest && isEmailLookupCompleted ) {
const paymentComponent = await fastlaneSdk.FastlaneCardComponent(
{}
);
paymentComponent.render( `#fastlane-card` );
onPaymentLoad( paymentComponent );
}
}, [ isGuest, fastlaneSdk, onPaymentLoad ] );
}, [ isGuest, isEmailLookupCompleted, fastlaneSdk, onPaymentLoad ] );
useEffect( () => {
loadPaymentComponent();
}, [ loadPaymentComponent ] );
return isGuest ? (
<div id="fastlane-card" key="fastlane-card" />
) : (
if ( isGuest ) {
if ( isEmailLookupCompleted ) {
return <div id="fastlane-card" key="fastlane-card" />;
}
return (
<div id="ppcp-axo-block-radio-content">
Enter your email address above to continue.
</div>
);
}
return (
<Card
card={ card }
fastlaneSdk={ fastlaneSdk }