https://www.atlasroofing.com/resources/js/components/pro-signup.js?v=20261001065826

1document.addEventListener('alpine:init', () => {
2    Alpine.data('proSignup', () => ({
3        form: {sms_optin_info: true, sms_optin_marketing: true},
4        errors: [],
5        submiting: false,
6        redirecting: false,
7        phoneNumberMask: null,
8        otherPhoneNumberMask: null,
9        otherPhoneNumberRequired: false,
10        portalBaseUrl: '',
11        recaptchaFailed: true,
12
13        get canSubmit() {
14            return !this.recaptchaFailed &&
15                   //this.form.heritage_rules === 'accept' &&
16                   this.form.terms === 'accept';
17        },
18
19        init() {
20            this.portalBaseUrl = window.env.PORTAL_URL
21            var maskOptions = {
22                mask: '(000) 000-0000',
23                lazy: false,
24            }
25
26            this.phoneNumberMask = IMask(document.getElementById('phone_number'), maskOptions);
27            this.otherPhoneNumberMask = IMask(document.getElementById('other_phone_number'), maskOptions);
28
29            this.$watch('form.other_phone_number', (value) => {
30                this.otherPhoneNumberRequired = this.otherPhoneNumberMask.unmaskedValue.length > 0
31            })
32
33            window.onRecaptchaSuccess = this.onRecaptchaSuccess.bind(this)
34            window.onRecaptchaExpired = this.onRecaptchaExpired.bind(this)
35
36            const queryString = window.location.search;
37            const urlParams = new URLSearchParams(queryString);
38
39            if(urlParams.has('tac_agreed')){
40                this.form['tac_agreed'] = true;
41                this.form['heritage_rules'] = 'accept';
42            }
43        },
44
45        onRecaptchaSuccess() {
46            this.recaptchaFailed = false
47        },
48
49        onRecaptchaExpired() {
50            this.recaptchaFailed = true
51        },
52
53        onCountryChange() {
54            this.getCountryRegions(this.form.countries_id)
55        },
56
57        async getCountryRegions(countryId) {
58            const url = this.portalBaseUrl + '/select/includes/html/info_router.php?type=CountryStates&action=getStates&country=' + countryId
59
60            const rawResponse = await fetch(url)
61            const response = await rawResponse.text()
62
63            document.getElementById('region_container').innerHTML = response
64            let selector = '#region_container select, #region_container input'
65
66            if(response.startsWith('<input')) {
67                document.querySelector(selector).classList.add('form-control')
68                document.querySelector(selector).classList.add('form-control-sm')
69            } else {
70                document.querySelector(selector).classList.add('form-select')
71                document.querySelector(selector).classList.add('form-select-sm')
72            }
73            document.querySelector(selector).required = true;
74        },
75
76        async handleSubmit() {
77            this.submiting = true
78            this.form['submit'] = 'submit'
79            this.form['g-recaptcha-response'] = document.getElementById('g-recaptcha-response').value
80            this.form['region'] = document.querySelector('#region_container select, #region_container input').value
81            this.form['utm_source'] = document.querySelector('#sign-up-form input[name="source"]').value
82            this.form['phone_number_types_id'] = 3
83            this.form[this.$refs.csrfToken.getAttribute('name')] = this.$refs.csrfToken.getAttribute('value')
84
85            if(this.form['heritage_rules'] == 'accept'){
86                this.form['opted_in_2026_truck'] = true;
87                this.form['tac_agreed'] = true;
88            }
89            else{
90                this.form['opted_in_2026_truck'] = false;
91                this.form['tac_agreed'] = false;
92            }
93
94            if(!this.otherPhoneNumberMask.unmaskedValue.length) {
95                delete this.form.other_phone_number
96            }
97
98            if(!this.form.sms_optin_info){
99                delete this.form.sms_optin_info
100            }
101
102            if(!this.form.sms_optin_marketing){
103                delete this.form.sms_optin_marketing
104            }
105
106            this.errors = []
107
108            if (!this.form['g-recaptcha-response']) {
109                alert('Please validate the Recaptcha!');
110                this.submiting = false;

111                return;
112            }
113
114            let url = '/api/pro/signup';
115
116            try {
117                const rawResponse = await fetch(url, {
118                    method: 'POST',
119                    headers: {
120                        'Content-Type': 'application/x-www-form-urlencoded'
121                    },
122                    body: new URLSearchParams(this.form)
123                })
124                const response = await rawResponse.json()
125
126                if(rawResponse.status == 200) {
127                    let contractorLoginUrl = `${this.portalBaseUrl}/pro/contact_id/${response.contact.contact_id}/token/${response.token}`
128                    window.location.href = contractorLoginUrl
129                    this.redirecting = true
130                } else if(rawResponse.status == 403) {
131                    this.errors = response.errors
132                }
133                grecaptcha.reset();
134            } catch (error) {
135                console.error({ error })
136            } finally {
137                this.submiting = false
138            }
139        }
140    }))
141})