@@ -197,17 +197,17 @@ const MollieComponent = (props) => {
197197 } , [ activePaymentMethod , onCheckoutValidation , billing . billingData , shippingData . shippingAddress , item , phoneString , inputBirthdate , inputPhone ] ) ;
198198
199199 onSubmitLocal = onSubmit
200- const updateIssuer = ( changeEvent ) => {
201- selectIssuer ( changeEvent . target . value )
202- } ;
203- const updateCompany = ( changeEvent ) => {
204- selectCompany ( changeEvent . target . value )
205- } ;
206- const updatePhone = ( changeEvent ) => {
207- selectPhone ( changeEvent . target . value )
208- }
209- const updateBirthdate = ( changeEvent ) => {
210- selectBirthdate ( changeEvent . target . value )
200+ const updateIssuer = ( e ) => selectIssuer ( e . target . value ) ;
201+ const updateCompany = ( e ) => selectCompany ( e . target . value ) ;
202+ const updatePhone = ( e ) => selectPhone ( e . target . value ) ;
203+ const updateBirthdate = ( e ) => selectBirthdate ( e . target . value ) ;
204+
205+ function fieldMarkup ( id , fieldType , label , action , value , placeholder = null ) {
206+ const className = "wc-block-components-text-input wc-block-components-address-form__" + id ;
207+ return < div class = "custom-input" >
208+ < label htmlFor = { id } dangerouslySetInnerHTML = { { __html : label } } > </ label >
209+ < input type = { fieldType } name = { id } id = { id } value = { value } onChange = { action } placeholder = { placeholder } > </ input >
210+ </ div >
211211 }
212212
213213 if ( item . issuers && item . name !== "mollie_wc_gateway_creditcard" ) {
@@ -218,38 +218,59 @@ const MollieComponent = (props) => {
218218 return < div dangerouslySetInnerHTML = { { __html : item . content } } > </ div > ;
219219 }
220220
221- function fieldMarkup ( id , fieldType , label , action , value ) {
222- const className = "wc-block-components-text-input wc-block-components-address-form__" + id ;
223- return < div class = "custom-input" >
224- < label htmlFor = { id } dangerouslySetInnerHTML = { { __html : label } } > </ label >
225- < input type = { fieldType } name = { id } id = { id } value = { value } onChange = { action } > </ input >
226- </ div >
227- }
228-
229221 if ( item . name === "mollie_wc_gateway_billie" ) {
230222 if ( isCompanyFieldVisible ) {
231223 return ;
232224 }
233225 const companyField = item . companyPlaceholder ? item . companyPlaceholder : "Company name" ;
234- return fieldMarkup ( "billing-company" , "text" , companyField , updateCompany , inputCompany ) ;
226+ return (
227+ < >
228+ < div > < p > { item . content } </ p > </ div >
229+ { fieldMarkup ( "billing-company" , "text" , companyField , updateCompany , inputCompany ) }
230+ </ >
231+ ) ;
235232 }
236233
237- if ( item . name === "mollie_wc_gateway_in3" ) {
238- let fields = [ ] ;
239- const birthdateField = item . birthdatePlaceholder ? item . birthdatePlaceholder : "Birthdate" ;
240- fields . push ( fieldMarkup ( "billing-birthdate" , "date" , birthdateField , updateBirthdate , inputBirthdate ) ) ;
241- if ( isPhoneFieldVisible === false ) {
242- const phoneField = item . phonePlaceholder ? item . phonePlaceholder : "Phone" ;
243- fields . push ( fieldMarkup ( "billing-phone-in3" , "tel" , phoneField , updatePhone , inputPhone ) ) ;
244- }
234+ useEffect ( ( ) => {
235+ const countryCodes = {
236+ BE : '+32xxxxxxxxx' ,
237+ NL : '+316xxxxxxxx' ,
238+ DE : '+49xxxxxxxxx' ,
239+ AT : '+43xxxxxxxxx' ,
240+ } ;
241+ const country = billing . billingData . country ;
242+ item . phonePlaceholder = countryCodes [ country ] || countryCodes [ 'NL' ] ;
243+ } , [ billing . billingData . country ] ) ;
244+
245+ if ( item . name === "mollie_wc_gateway_in3" ) {
246+ const birthdateField = item . birthdatePlaceholder || "Birthdate" ;
247+ const phoneField = item . phonePlaceholder || "+316xxxxxxxx" ;
248+ const phoneLabel = item . phoneLabel || "Phone" ;
249+ return (
250+ < >
251+ < div > < p > { item . content } </ p > </ div >
252+ { fieldMarkup ( "billing-birthdate" , "date" , birthdateField , updateBirthdate , inputBirthdate ) }
253+ { ! isPhoneFieldVisible && fieldMarkup ( "billing-phone-in3" , "tel" , phoneLabel , updatePhone , inputPhone , phoneField ) }
254+ </ >
255+ ) ;
256+ }
245257
246- return < > { fields } </ > ;
258+ if ( item . name === "mollie_wc_gateway_riverty" ) {
259+ const birthdateField = item . birthdatePlaceholder || "Birthdate" ;
260+ const phoneField = item . phonePlaceholder || "+316xxxxxxxx" ;
261+ const phoneLabel = item . phoneLabel || "Phone" ;
262+ return (
263+ < >
264+ < div > < p > { item . content } </ p > </ div >
265+ { fieldMarkup ( "billing-birthdate" , "date" , birthdateField , updateBirthdate , inputBirthdate ) }
266+ { ! isPhoneFieldVisible && fieldMarkup ( "billing-phone-riverty" , "tel" , phoneLabel , updatePhone , inputPhone , phoneField ) }
267+ </ >
268+ ) ;
247269 }
248270
249271 return < div > < p > { item . content } </ p > </ div >
250272}
251273
252-
253274const molliePaymentMethod = ( useEffect , ajaxUrl , filters , gatewayData , availableGateways , item , jQuery , requiredFields , isCompanyFieldVisible , isPhoneFieldVisible ) => {
254275 let billingCountry = filters . billingCountry
255276 let cartTotal = filters . cartTotal
0 commit comments