CF7- Wordpress-Redirect to Google Reviews Page If Customer Leaves 5 Star Review

cf7-form

<h3>Leave a Review</h3>
<label> Name
    [text* your-name autocomplete:name] </label>

<b>Rating</b> [radio review-radio default:1 "5" "4" "3" "2" "1"]

<label> Your Review
[textarea* your-review x4]</label>

[dscf7captcha dscf7captcha-205]

[submit "Submit Review"]

functions.php

/*
*   Contact Form 7:  Direct User To Google Reviews if leaving a 5 star review
*/
function kdcf7_send_to_google_reviews() { ?>
<script>
    document.addEventListener('wpcf7mailsent', function(e) {
        var inputs = e.detail.inputs;
        var modalBg = document.getElementById('modal-bg');

        for ( var i = 0; i < inputs.length; i++ ) {
           if( 'review-radio' == inputs[i].name ) {
               if( inputs[i].value == 5 ) {
                    modalBg.style.display = 'block';   
                    modalBg.classList.add('visible'); 
               } else {
                window.location = "/thank-you-review/";
               }
            }
        }
   })
</script>
<?php
}

add_action('wp_footer', 'kdcf7_send_to_google_reviews');

modal-confirm.php

<style>
    :root {
        --modal-box-width: 480px;
    }
    #modal-bg {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        z-index:999999;
        top: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.15s ease-out, width 0s linear 0.15s, height 0s linear 0.15s;
    }
    #modal-bg.visible {
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: opacity 0.15s ease-out;
    }
    #modal-box {
        position: absolute;
        width: 100%;
        max-width: var(--modal-box-width);
        background: #fff;
        border-radius: 15px;
        top: 20px;
        left: calc(50% - var(--modal-box-width) / 2);
        padding: 50px;
        text-align: center;
    }
    #modal-box svg {
        max-width: 50px;
        position: absolute;
        right: 5px;
        top: 5px;
    }
    #modal-btn-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
    #modal-btn-container button {
        padding: 10px 30px;
    }

    @media only screen and (max-width: 480px) {
        #modal-box {
            left: 0;
            max-width: 100%;
            margin: 0;
        }
    }
</style>

<!-- Modal --> 
<div id="modal-bg">
    <div id="modal-box">
        <svg id="modal-close-btn" xmlns="http://www.w3.org/2000/svg" width="24.719" height="24.719" viewBox="0 0 24.719 24.719">
        <g id="_211650_close_circled_icon" data-name="211650_close_circled_icon" transform="translate(-32 -33)">
            <path id="Path_1" data-name="Path 1" d="M44.36,33a12.36,12.36,0,1,0,12.36,12.36A12.36,12.36,0,0,0,44.36,33Zm5.976,16.526a.434.434,0,0,1,.127.309.425.425,0,0,1-.127.309l-1.192,1.2a.43.43,0,0,1-.309.127.444.444,0,0,1-.309-.127L44.36,47.169,40.2,51.346a.421.421,0,0,1-.309.127.444.444,0,0,1-.309-.127l-1.192-1.2a.434.434,0,0,1-.127-.309.425.425,0,0,1,.127-.309l4.177-4.193L38.378,41.2a.443.443,0,0,1,0-.624l1.192-1.2a.44.44,0,0,1,.618,0L44.365,43.5l4.177-4.122a.44.44,0,0,1,.618,0l1.192,1.2a.443.443,0,0,1,0,.624l-4.188,4.138Z"/>
        </g>
        </svg>

        <div id="modal-content"><h3>Will you leave us a 5 star review on Google?</h3></div>

        <div id="modal-btn-container">
            <button id="modal-yes" type="button" class="btn btn-primary">Yes</button>
            <button id="modal-no" type="button" class="btn btn-secondary">No</button>
        </div>
    </div>
</div>

<script>
    window.addEventListener('load', setup);

    function setup() {
        const get = document.getElementById.bind(document);

        const modalFadeEl = get('modal-bg');  
        const modalBoxEl = get('modal-box');  
        const modalCloseBtn = document.getElementById('modal-close-btn');  
        const modalYesBtn = document.getElementById('modal-yes');  
        const modalNoBtn = document.getElementById('modal-no');

        modalFadeEl.addEventListener('click', modalBgClick);
        modalCloseBtn.addEventListener('click', modalBgClick);
        modalBoxEl.addEventListener('click', modalClick);
        modalYesBtn.addEventListener('click', modalYesClick);
        modalNoBtn.addEventListener('click', modalNoClick);

        function modalBgClick() {
            modalFadeEl.classList.remove('visible');
            window.location = "/thank-you-review/";    
        }

        function modalYesClick() {
            window.location = "https://search.google.com/local/writereview?placeid=ChIJP0dViGDnyIkRGgoDXF9KJO4";
        }

        function modalNoClick() {
            modalFadeEl.classList.remove('visible');
            window.location = "/thank-you-review/";
        }
    
        function modalClick(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            return false;
        }
    }
        
</script>