GiveWP - add a heart SVG icon to recurring option box that animates when a recurring donation is selected

givewp-add-heart-to-recurring-option.php

// Inject an SVG icon (heart) into recurring selection box via JS
function override_givewp_js() {
	if( ! is_admin() ) { ?>
	<script type="text/javascript">
		jQuery(document).ready( function($) {
			$('.give-btn.advance-btn').on('click', function(){
				if( $('.give-recurring-donors-choice').length ){
				  $('.give-recurring-donors-choice').append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.96 256" data-inject-url="http://vertex2022.local/wp-content/themes/vertex-ranch-2022/assets/img/icons/solid/love.svg" class="svg-inject icon-svg icon-svg-sm solid-mono text-red me-4 mb-5 mb-md-0"><path class="fill-primary" d="M96 186.67A90.77 90.77 0 01186.63 96a89.82 89.82 0 0138.9 8.9 64.28 64.28 0 00-95.3-86L120 29.15l-10.28-10.27a64.21 64.21 0 00-90.93 0 64.56 64.56 0 000 91.06L96 187.28z"></path><path class="fill-secondary" d="M186.63 117.33A69.34 69.34 0 10256 186.67a69.41 69.41 0 00-69.37-69.34zm30.19 55.73l-30.54 37.32a8.06 8.06 0 01-5.92 3h-.27a8 8 0 01-5.84-2.53l-17.46-18.67a8 8 0 0111.7-10.95l11.21 12 24.76-30.26a8 8 0 1112.36 10.15z"></path></svg><div class="heart-holder" style=""><div class="heart-x-move"><svg svg-inline="" focusable="false" role="presentation" width="24" height="24" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="d-block"><path d="M9 14.154c11.106-6.118 4.174-13.12 0-8.833-4.174-4.288-11.106 2.715 0 8.833z" fill="#F00905"></path><defs><radialGradient id="paint0_radial_4312_76" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 8.9911 -10.6258 0 9 5.163)"><stop stop-color="#F45D5A"></stop><stop offset=".466" stop-color="#F55E5B"></stop><stop offset=".808" stop-color="#F21814"></stop><stop offset="1" stop-color="#F00905"></stop></radialGradient></defs></svg></div></div>');
				}
			});
		}); // docready
	</script>
	<?php }
}
add_action('wp_print_footer_scripts', 'override_givewp_js', 99);

// Insert styles into the footer for give forms, to style the heart and animation
function override_iframe_template_styles_with_inline_styles() {
    wp_add_inline_style(
        'give-sequoia-template-css',
        '
	.give-recurring-donors-choice {position:relative;margin-bottom: 20px !important;}
	.give-recurring-donors-choice label {}
	.give-recurring-donors-choice .icon-svg {
		height:30px;
		width: 30px;
		position: absolute;
		top:50%;
		margin-top: -15px;
		right:10px;
	}
	.solid-mono.text-red .fill-secondary {fill: #f8908e !important;}
	.solid-mono.text-red {fill: #F00905 !important;}
	.heart-x-move {
	  width: 24px;
	  height: 24px;
	  position: absolute;
	  left: 0;
	  top: 0;
	  visibility: hidden;
	}
	.give-recurring-donors-choice.active .heart-x-move {
	  visibility: visible;
	}
	.heart-holder {
	  width: 24px;
	  height: 24px;
	  transform-origin: 50% 50%;
		top: 10px;
		position: absolute;
		right: 10px;
	}
	.heart-y-move-enter {
	  will-change: transform, opacity;
	}
	.active .heart-x-move {
	  animation: heart-y-move 2.5s forwards linear;
	  animation-delay: 50ms;
	}
	@keyframes heart-y-move {
	  0% {
	    transform: translate(0, 0) rotate(0);
	    opacity: 1;
	  }
	  5% {
	    transform: translate(0, 0) scale(1.7);
	  }
	  60% {
	    transform: translate(0, -65px) rotate(25deg) scale(1.7);
	  }
	  80% {
	    transform: translate(0 -76px) rotate(0) scale(1.7);
	    opacity: 1;
	  }
	  100% {
	    transform: translate(0, -95px) scale(2) rotate(0);
	    opacity: 0;
	  }
	}
	@keyframes heart-x-move {
	  0% {
	    transform: translate(0, -50%) rotate(0);
	  }
	  33% {
	    transform: translate(-7px, -50%) rotate(23deg);
	  }
	  67% {
	    transform: translate(7px, -50%) rotate(-23deg);
	  }
	  100% {
	    transform: translate(0, -50%) rotate(0);
	  }
	}
        '
    );
}
add_action('wp_print_styles', 'override_iframe_template_styles_with_inline_styles', 10);

// Move the recurring option box above the donation amount options 
function my_give_move_recurring_checkbox( $form_id ) {
	remove_action( 'give_after_donation_levels', 'give_output_donors_choice_checkbox', 1 );
	add_action( 'give_before_donation_levels', 'give_output_donors_choice_checkbox', 100, 2 );
}
add_action( 'give_pre_form', 'my_give_move_recurring_checkbox' );