step-2-next.js

jQuery(document).on('click', '#gform_page_1_2 .gform_next_button', function() {
    /**
     * Get values from field inputs - Instant Quote Step 2
     */

    // Total Home Square Footage
    let inputSquareFootage = String(jQuery('#input_1_5').val()).replace(',', '')

    // Bedrooms/Bathrooms - display when Square Footage is selected
    let optionBedBath = jQuery('#input_1_35').val()
    optionBedBath = optionBedBath.split('/')
    let inputFullBaths = optionBedBath[1]
    let inputBeds = optionBedBath[0]

    // Service Frequency
    let inputServiceFrequency = jQuery('#input_1_6').find('input[name="input_6"]:checked').val()

    // Type of Other
    let inputTypeOfOther = jQuery('#input_1_22').find('input[name="input_22"]:checked').val()

    // Pets
    let inputPets = jQuery('#input_1_13').val()

    // Rooms w/ Hardwood Floors
    let inputRooms = jQuery('#input_1_14').val()

    const pricingEstimate = franchiseNinjaTablesData.filter(function (item) {
        let check = false
        let currBath = item.baths
        let currBeds = item.beds
        let currSquareft = item.squareft
        return inputBeds === currBeds && currBath === inputFullBaths && inputSquareFootage === currSquareft
    })

    if (pricingEstimate.length > 0) {

        let currPet = 0
        let currRoom = 0
        let finalTotalExtend = 0

        /**
         * 
         * @todo Populate field inputs with MMC API in php Class
         * @todo Get values from field inputs
         * @values show_form_2 (ninja tables currently):
         */
        if (pricingEstimate.pets && pricingEstimate.rooms) {
            currPet = parseInt(pricingEstimate.pets) * inputPets
            currRoom = parseInt(pricingEstimate.rooms) * inputRooms
            finalTotalExtend = currPet + currRoom
        }

        /**
         * @functionality :
         * If (#input_1_6 (Service Frequency) === 'Other') :
         *      Populate and display Step 3 html field (Occasional, Move In, Move Out)
         * else :
         *      Populate and display Step 3 html field (Weekly, Bi-weekly, Monthly)
         */
        let defaultText = '';
        let infoText = '';
        let popularText = '<span class="popular"></span>';
        if (inputServiceFrequency === 'Other') {
            let priceOneTime = ''
            let activeOccasional = ''
            let activeMoveIn = ''
            let activeMoveOut = ''
            
            let onetimePrice = parseInt(pricingEstimate.onetime) + finalTotalExtend
            let moveinPrice = parseInt(pricingEstimate.movein) + finalTotalExtend
            let moveoutPrice = parseInt(pricingEstimate.moveout) + finalTotalExtend
            
            if (inputTypeOfOther == 'Occasional') {
                priceOneTime = onetimePrice
                activeOccasional = 'active'
            }
            if (inputTypeOfOther == 'Move In') {
                priceOneTime = moveinPrice
                activeMoveIn = 'active'

            }
            if (inputTypeOfOther == 'Move Out') {
                priceOneTime = moveoutPrice
                activeMoveOut = 'active'
            }

            /**
             * 
             */
            jQuery('.js-service-frequency--other').html( // .html() does not work when form uses AJAX
                `
                <div class="select-quote-boxes">
                    <div data-recurring="Occasional" data-price-frist="${onetimePrice}" class="select-quote-box otherTypeBox ${activeOccasional}">
                        <div class="title-box">
                            <h3>Occasional</h3>
                        </div>
                        <div class="body-box">
                            <div class="bottom-text">
                                <h3>ONE TIME CLEANING FEE <span>$${onetimePrice}<sup>*</sup></span></h3>
                            </div>
                        </div>
                    </div>
                    <div data-recurring="Move In" data-price-frist="${moveinPrice}" class="select-quote-box otherTypeBox ${activeMoveIn}">
                        <div class="title-box">
                            <h3>Move In</h3>
                        </div>
                        <div class="body-box">
                            <div class="bottom-text">
                                <h3>ONE TIME CLEANING FEE <span>$${moveinPrice}<sup>*</sup></span></h3>
                            </div>
                        </div>
                    </div>
                    <div data-recurring="Move Out" data-price-frist="${moveoutPrice}" class="select-quote-box otherTypeBox ${activeMoveOut}">
                        <div class="title-box">
                            <h3>Move Out</h3>
                        </div>
                        <div class="body-box">
                            <div class="bottom-text">
                                <h3>ONE TIME CLEANING FEE <span>$${moveoutPrice}<sup>*</sup></span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="select-quote-box-text">
                        <p>*Plus Applicable Taxes</p>
                    </div>
                </div>
                `
            )
                
            jQuery('#lastBox').html(
                `
                <div class="title-box">
                    <h3 id="final_recurr">${typeOfOther}</h3>
                </div>
                <div class="body-box">
                    <div class="bottom-text">
                        <h3>ONE TIME CLEANING FEE <span id="final_first">$${priceOneTime}<sup>*</sup></span></h3>
                    </div>
                </div>
                `
            )

            jQuery('#js-first-cleaning').val(priceOneTime)
            jQuery('#js-amount').val(priceOneTime)

        } else {
            let weeklyActive = ''
            let biWeeklyActive = ''
            let monthlyActive = ''
            
            let weeklyprice = parseInt(pricingEstimate.weeklyprice) + finalTotalExtend
            let biweeklyprice = parseInt(pricingEstimate.biweeklyprice) + finalTotalExtend
            let monthlyprice = parseInt(pricingEstimate.monthlyprice) + finalTotalExtend
            let initialCleanPrice = parseInt(pricingEstimate.initialclean) + finalTotalExtend
            
            let initalPrice = weeklyprice

            if (inputServiceFrequency == 'Bi-Weekly') {
                biWeeklyActive = 'active'
                initalPrice = biweeklyprice
                defaultText = 'Bi-Weekly'
                infoText = 'THEN EVERY TWO WEEKS'
                popularText = '<span class="popular">MOST POPULAR!</span>'
            } else if (inputServiceFrequency ==  'Monthly') {
                monthlyActive = 'active'
                initalPrice = monthlyprice
                defaultText = 'Monthly'
                infoText = 'THEN EVERY FOUR WEEKS'
            } else {
                weeklyActive = 'active'
                infoText = 'THEN EVERY WEEK'
                defaultText = 'Weekly'
            }
            jQuery('.js-service-frequency--weekly').html( // .html() does not work when form uses AJAX
                `
                <div class="select-quote-boxes">
                    <div class="select-quote-box ${weeklyActive}" data-info-text="THEN EVERY WEEK" data-recurring="Weekly" data-price-frist="${initialCleanPrice}" data-every-week="${weeklyprice}" >
                        <div class="title-box">
                            <h3>Weekly</h3>
                        </div>
                        <div class="body-box">
                            <div class="top-text">
                                <h3>FIRST CLEANING <span>$${initialCleanPrice}<sup>*</sup></span></h3>
                            </div>
                            <div class="bottom-text">
                                <h3>THEN EVERY WEEK <span>$${weeklyprice}<sup>*</sup></span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="select-quote-box ${biWeeklyActive}" data-info-text="THEN EVERY TWO WEEKS" data-recurring="Bi-Weekly" data-price-frist="${initialCleanPrice}" data-every-week="${biweeklyprice}">
                        <div class="title-box">
                            <h3>Bi-Weekly</h3>
                            <span class="popular">MOST POPULAR!</span>
                        </div>
                        <div class="body-box">
                            <div class="top-text">
                                <h3>FIRST CLEANING <span>$${initialCleanPrice}<sup>*</sup></span></h3>
                            </div>
                            <div class="bottom-text">
                                <h3>THEN EVERY TWO WEEKS <span>$${biweeklyprice}<sup>*</sup></span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="select-quote-box ${monthlyActive}" data-info-text="THEN EVERY FOUR WEEKS" data-recurring="Monthly" data-price-frist="${initialCleanPrice}" data-every-week="${monthlyprice}">
                        <div class="title-box">
                            <h3>Monthly</h3>
                        </div>
                        <div class="body-box">
                            <div class="top-text">
                                <h3>FIRST CLEANING <span>$${initialCleanPrice}<sup>*</sup></span></h3>
                            </div>
                            <div class="bottom-text">
                                <h3>THEN EVERY FOUR WEEKS <span>$${monthlyprice}<sup>*</sup></span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="select-quote-box-text">
                        <p>*Plus Applicable Taxes</p>
                    </div>
                </div>
                `
            )

            jQuery('#last_box').html(
                `
                <div class="title-box">
                    <h3 id="final_recurr">${defaultText}</h3>
                    ${popularText}
                </div>
                <div class="body-box">
                    <div class="top-text">
                        <h3>FIRST CLEANING <span id="final_first">$182<sup>*</sup></span></h3>
                    </div>
                    <div class="bottom-text">
                        <h3 id="info_box_new">${infoText} <span id="final_every">$106<sup>*</sup></span></h3>
                    </div>
                </div>
                `
            )

            jQuery('#final_first').html(`$${initialCleanPrice}<sup>*</sup>`)
            jQuery('#final_every').html(`$${initalPrice}<sup>*</sup>`)
            jQuery('#recurring').val(defaultText)
            jQuery('#first_cleaning').val(initialCleanPrice)
            jQuery('#every_week').val(initalPrice)

            let price_final_curr = initialCleanPrice + initalPrice
            price_final_curr = price_final_curr.toFixed(2)
            jQuery('#amount').val(initialCleanPrice)
        }
    } else {
        // jQuery('#square_text').html(`Square Footage: ${square_footage}`)
    }

    let first_name_val = jQuery('#first-name').val()
    let last_name_val = jQuery('#last-name').val()
    let phone_number_val = jQuery('#phone').val()

    jQuery('#first_name_2').val(first_name_val)
    jQuery('#last_name_2').val(last_name_val)
    jQuery('#phone_2').val(phone_number_val)

})