Hide / show conditional field on checkout based on payment option - woocommerce

Question

I have four different payment options on checkout. When choosing Credit card and PayPal I have 4 filds: email, first name, last name and phone number. When choosing BACS or COD option for payment I want to show additional fields: billing_address_1, billing_city_1, billing_postcode and billing_country.
I managed to do that with a snippet below, but only for BACS or COD, not both... I tried making two snippets, one for each with different value in payment_method.
class TEMP_WFACP_Conditional_Field_Depend_On_Payment {
private $conditional_field = [];
private $exclude_wfacp_ids = [];
public function __construct() {
$this->conditional_field = [
'payment_method' => [
[
'value' => 'bacs',
'fields' => [ 'billing_address_1', 'billing_city' , 'billing_postcode' , 'billing_country' ],
'enable' => true,
]
]
];
add_action( 'wfacp_after_checkout_page_found', [ $this, 'wfacp_add_script' ] );
add_filter( 'woocommerce_checkout_fields', [ $this, 'wfacp_remove_required' ], 9, 1 );
}
function wfacp_add_script() {
if ( in_array( WFACP_Common::get_id(), $this->exclude_wfacp_ids ) ) {
return;
}
add_action( 'wp_footer', [ $this, 'wfacp_conditional_field_script' ] );
}
function wfacp_conditional_field_script() {
$fields = json_encode( $this->conditional_field );
$fields_trr = json_encode( $this->conditional_field_trr );
?>
<style>
#billing_country_field b {
display: none !important;
}
p.conditional_field {
display: none !important;
}
.wfacp_dropdown option, .wfacp_dropdown select {
text-transform: capitalize;
}
</style>
<script>
jQuery(document).ready(function ($) {
var conditional_fields =<?php echo $fields;?>;
conditionField();
function conditionField() {
$.each(conditional_fields, function (field, values) {
$.each(values, function (key, value) {
var payment_method = $("input[name=payment_method]:checked" ).val();
var field = 'payment_method_'+payment_method;
displayConditionalField(field, value, payment_method);
$(document.body).on('change', '.wc_payment_method .input-radio' , function () {
var id = $(this).attr('id');
var val = $(this).val();
displayConditionalField(id, value, val);
});
});
});
}
function displayConditionalField(id, values, val) {
$.each(values.fields, function (index, field) {
var show = false;
if (val === 'null') {
val = $('#' + id ).val();
}
// console.log(field,val,values.value,values.enable);
if (val === values.value) {
show = true;
}
// console.log(val,field,country);
if (show && values.enable) {
$('#' + field + '_field').removeClass('conditional_field');
} else {
$('#' + field + '_field').addClass('conditional_field');
}
});
}
jQuery(function(){
jQuery( 'body' )
.on( 'updated_checkout', function() {
usingGateway();
jQuery('input[name="payment_method"]').change(function(){
console.log("payment method changed");
usingGateway();
});
});
});
function usingGateway(){
console.log(jQuery("input[name='payment_method']:checked").val());
if(jQuery('form[name="checkout"] input[name="payment_method"]:checked').val() == 'bacs'){
$("html, body").animate({
scrollTop: 0
}, 600);
$('#div_block-100-52320').css("display","flex");
}
else{
$('#div_block-100-52320').css("display","none");
}
}
});
</script>
<?php
}
function wfacp_remove_required( $fields ) {
if ( ! class_exists( 'WFACP_Common' ) && in_array( WFACP_Common::get_id(), $this->exclude_wfacp_ids ) ) {
return $fields;
}
foreach ( $this->conditional_field as $field => $conditional_fields ) {
foreach ( $conditional_fields as $conditional_field ) {
if ( ! isset( $_REQUEST[ $field ] ) || false == $conditional_field['enable'] || $_REQUEST[ $field ] == $conditional_field['value'] ) {
if ( 'bacs' === $conditional_field['value'] ) {
continue;
}
}
foreach ( $conditional_field['fields'] as $field_id ) {
$section = '';
if ( isset( $fields['billing'][ $field_id ] ) ) {
$section = 'billing';
} elseif ( isset( $fields['shipping'][ $field_id ] ) ) {
$section = 'shipping';
} elseif ( isset( $fields['advanced'][ $field_id ] ) ) {
$section = 'advanced';
}
if ( ! empty( $section ) ) {
unset( $fields[ $section ][ $field_id ]['required'] );
}
}
}
}
return $fields;
}
function wfacp_remove_field( $fields ) {
if ( in_array( WFACP_Common::get_id(), $this->exclude_wfacp_ids ) ) {
return $fields;
}
$user_id = get_current_user_id();
foreach ( $this->conditional_field as $field => $conditional_fields ) {
foreach ( $conditional_fields as $conditional_field ) {
if ( ! isset( $_REQUEST[ $field ] ) || ( false == $conditional_field['enable'] || $_REQUEST[ $field ] == $conditional_field['value'] ) ) {
continue;
}
foreach ( $conditional_field['fields'] as $field_id ) {
if ( ! empty( $fields['advanced'][ $field_id ] ) ) {
unset( $fields['advanced'][ $field_id ] );
}
$fields['advanced'][ $field_id ]['value']=get_user_meta($user_id,$field,true);
}
}
$fields['advanced'][ $field ]['value']=get_user_meta($user_id,$field,true);
}
return $fields;
}new TEMP_WFACP_Conditional_Field_Depend_On_Payment();