Ensure field container is empty before render card field

This commit is contained in:
Emili Castells Guasch 2024-07-29 15:56:45 +02:00
parent 8bda629df5
commit 5e5c99bc7d
2 changed files with 5 additions and 12 deletions

View file

@ -1,17 +1,10 @@
import { cardFieldStyles } from './CardFieldsHelper'; import { cardFieldStyles } from './CardFieldsHelper';
let fieldsRendered = false;
export function renderFields( cardFields ) { export function renderFields( cardFields ) {
if ( fieldsRendered === true ) {
return;
}
fieldsRendered = true;
const nameField = document.getElementById( const nameField = document.getElementById(
'ppcp-credit-card-gateway-card-name' 'ppcp-credit-card-gateway-card-name'
); );
if ( nameField ) { if ( nameField && nameField.hidden !== true ) {
const styles = cardFieldStyles( nameField ); const styles = cardFieldStyles( nameField );
cardFields cardFields
.NameField( { style: { input: styles } } ) .NameField( { style: { input: styles } } )
@ -22,7 +15,7 @@ export function renderFields( cardFields ) {
const numberField = document.getElementById( const numberField = document.getElementById(
'ppcp-credit-card-gateway-card-number' 'ppcp-credit-card-gateway-card-number'
); );
if ( numberField ) { if ( numberField && numberField.hidden !== true ) {
const styles = cardFieldStyles( numberField ); const styles = cardFieldStyles( numberField );
cardFields cardFields
.NumberField( { style: { input: styles } } ) .NumberField( { style: { input: styles } } )
@ -33,7 +26,7 @@ export function renderFields( cardFields ) {
const expiryField = document.getElementById( const expiryField = document.getElementById(
'ppcp-credit-card-gateway-card-expiry' 'ppcp-credit-card-gateway-card-expiry'
); );
if ( expiryField ) { if ( expiryField && expiryField.hidden !== true ) {
const styles = cardFieldStyles( expiryField ); const styles = cardFieldStyles( expiryField );
cardFields cardFields
.ExpiryField( { style: { input: styles } } ) .ExpiryField( { style: { input: styles } } )
@ -44,7 +37,7 @@ export function renderFields( cardFields ) {
const cvvField = document.getElementById( const cvvField = document.getElementById(
'ppcp-credit-card-gateway-card-cvc' 'ppcp-credit-card-gateway-card-cvc'
); );
if ( cvvField ) { if ( cvvField && cvvField.hidden !== true ) {
const styles = cardFieldStyles( cvvField ); const styles = cardFieldStyles( cvvField );
cardFields cardFields
.CVVField( { style: { input: styles } } ) .CVVField( { style: { input: styles } } )

View file

@ -82,7 +82,7 @@ test( 'Advanced Credit and Debit Card place order from Checkout page', async ( {
.frameLocator( 'iframe[title="paypal_card_expiry_field"]' ) .frameLocator( 'iframe[title="paypal_card_expiry_field"]' )
.locator( 'input.card-field-expiry' ); .locator( 'input.card-field-expiry' );
await expirationDate.click(); await expirationDate.click();
await page.keyboard.type( CREDIT_CARD_EXPIRATION ); await page.keyboard.type( '01/42' );
const cvv = await page const cvv = await page
.frameLocator( '[title="paypal_card_cvv_field"]' ) .frameLocator( '[title="paypal_card_cvv_field"]' )