https://studyathome.org/wp-content/plugins/custom-woocommerce-otp/assets/js/custom-otp.js?ver=1751620935

1document.addEventListener('DOMContentLoaded', function() {
2    const phoneInput = document.querySelector('#billing_phone');
3    const countryCodeInput = document.querySelector('#country_code');
4    const otpSection = document.querySelector('.otp-section');
5    const sendOtpBtn = document.querySelector('#send-otp-btn');
6    const verifyBtn = document.querySelector('#verify-otp-btn');
7
8    // Initialize intl-tel-input with proper error handling
9    if (!phoneInput) {
10        console.error('Phone input element not found!');
11        return;
12    }
13
14    // Add country code update on initialization
15    const iti = window.intlTelInput(phoneInput, {
16        separateDialCode: true,
17        strictMode: true,
18        nationalMode: true,
19        initialCountry: 'in',
20        geoIpLookup: function(callback) {
21            fetch('https://ipapi.co/json')
22                .then(res => res.json())
23                .then(data => callback(data.country_code.toLowerCase()))
24                .catch(() => callback('us'));
25        },
26        utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"
27    });
28
29    // Immediate country code update
30    countryCodeInput.value = `+${iti.getSelectedCountryData().dialCode}`;
31
32    // Add country change handler
33    phoneInput.addEventListener('countrychange', function() {
34        countryCodeInput.value = `+${iti.getSelectedCountryData().dialCode}`;
35    });
36
37
38    // OTP Sending handler
39    sendOtpBtn.addEventListener('click', function() {
40        const phoneNumber = iti.getNumber();
41        if (!phoneNumber) {
42            showOtpStatus("Please enter the phone number", 'error');
43            return;
44        }
45
46        phoneInput.readOnly = true;
47        sendOtpBtn.disabled = true;
48        sendOtpBtn.textContent = "Didn't receive OTP? Contact us!";
49
50        grecaptcha.ready(function() {
51            grecaptcha.execute(wc_otp_params.captcha_site_key, { action: 'send_otp' }).then(function(token) {
52                sendOTPRequest(phoneNumber, token);
53            });
54        });
55    });
56
57    verifyBtn.addEventListener('click', function() {
58        const otpCode = document.querySelector('#otp_code').value;
59        
60        if (!otpCode) {
61            showOtpStatus('Please enter the OTP', 'error');
62            return;
63        }
64
65        verifyOTP(otpCode);
66    });
67
68    function sendOTPRequest(phoneNumber, recaptchaToken) {
69        jQuery.ajax({
70            url: wc_otp_params.ajaxurl,
71            method: 'POST',
72            data: {
73                action: 'send_otp',
74                phone: phoneNumber,
75                security: wc_otp_params.nonce,
76                recaptcha_token: recaptchaToken
77            },
78            success: function(response) {
79                if (response.success) {
80                    sendOtpBtn.style.display = 'none';
81                    otpSection.style.display = 'block';
82                    showOtpStatus('OTP sent successfully!', 'success');
83                } else {
84                    showOtpStatus(response.data?.message || 'Failed to send OTP.', 'error');
85                }
86            },
87            error: function() {
88                showOtpStatus('An error occurred. Please try again later.', 'error');
89                phoneInput.readOnly = false;
90            },
91            complete: function() {
92                sendOtpBtn.disabled = false;
93                sendOtpBtn.textContent = "Send OTP";
94            }
95        });
96    }
97
98    function verifyOTP(code) {
99        const phoneNumber = iti.getNumber();
100        phoneInput.value = phoneNumber;
101        
102        jQuery.ajax({
103            url: wc_otp_params.ajaxurl,
104            method: 'POST',
105            data: {
106                action: 'verify_otp',
107                phone: phoneNumber,
108                otp: code,
109                security: wc_otp_params.nonce
110            },
111            success: function(response) {
112                if (response.success) {
113                    showOtpStatus('Phone Verified Successfully', 'success');
114                    document.querySelector('#otp_code').disabled = true;
115                    verifyBtn.disabled = true;
116                } else {
117                    showOtpStatus('Phone Verification Failed', 'error');
118                }
119            }
120        });
121    }
122
123    function showOtpStatus(message, type) {
124        const alertBox = document.querySelector('.otp-alert-box');
125        alertBox.textContent = message;
126        alertBox.className = 'otp-alert-box'; // Reset classes
127        
128        if (type === 'success') {
129            alertBox.classList.add('success');
130        } else if (type === 'error') {
131            alertBox.classList.add('error');
132        }
133        
134        // Auto-hide after 5 seconds
135        setTimeout(() => {
136            alertBox.className = 'otp-alert-box';
137            alertBox.textContent = '';
138        }, 7000);
139    }
140});