const BlurValidator = (() => { const _validators = []; function register(name, { match, test, message, priority = 10 }) { _validators.push({ name, match, test, message, priority }); _validators.sort((a, b) => a.priority - b.priority); } function _getValidators(field) { return _validators.filter(v => v.match(field)); } function validate(field) { for (const v of _getValidators(field)) { if (!v.test(field.value, field)) { return { valid: false, message: typeof v.message === 'function' ? v.message(field) : v.message }; } } return { valid: true, message: '' }; } function showError(field, message) { field.classList.add('error'); let el = field.parentElement?.querySelector('[data-blur-error]'); if (!el) { el = document.createElement('div'); el.setAttribute('data-blur-error', ''); el.classList.add('error-message'); el.style.color = 'red'; field.insertAdjacentElement('afterend', el); } el.textContent = message; } function clearError(field) { field.classList.remove('error'); field.parentElement?.querySelector('[data-blur-error]')?.remove(); } function _isVisible(field) { return !field.closest('.hidden_field'); } function _onBlur(field) { if (!_isVisible(field)) return; const result = validate(field); result.valid ? clearError(field) : showError(field, result.message); } function init(selector = '[aria-required="true"], .required', scope = document) { scope.querySelectorAll(selector).forEach(field => { if (field.dataset.blurValidatorInit) return; field.dataset.blurValidatorInit = 'true'; field.addEventListener('blur', () => _onBlur(field)); field.addEventListener('input', () => clearError(field)); }); } return { register, init, validate, showError, clearError }; })(); BlurValidator.register('required', { priority: 1, match: (field) => field.getAttribute('aria-required') === 'true' || field.classList.contains('required'), test: (value) => value.trim() !== '', message: 'This field is required.' }); BlurValidator.register('email', { priority: 2, match: (field) => field.type === 'email', test: (value) => value === '' || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), message: 'Please enter a valid email address.' }); BlurValidator.register('phone', { priority: 2, match: (field) => field.closest('.phone_div') != null && field.type === 'number', test: (value) => value === '' || /^\d{10}$/.test(value), message: 'Please enter a valid phone number.' }); // --- SKU VALIDATION RULE --- BlurValidator.register('sku_strict', { priority: 0, // Highest priority check match: (field) => field.name === "Product SKU or Product Name Dropdown" || field.id === 'form_input_10', test: (value, field) => { // Must have a valid selection from dropdown if (!skuAutoComplete.validated || !skuAutoComplete.selectedSku) { return false; } // The field value must match the selected SKU exactly if (value.trim() !== skuAutoComplete.selectedSku) { return false; } return true; }, message: 'Please select a valid product from the dropdown list.' }); // -------------------------------------------------- window.addEventListener('message', function(event) { if((event.data.form_name == "prefillForm")){ var customerData = event.data; $("#first_name").val(customerData.firstName).attr('readonly', true); $("#last_name").val(customerData.lastName).attr('readonly', true); $("#email").val(customerData.email).attr('readonly', true); } }, false); function setFormAttributes() { const attributes = [ { selector: '#form_input_0', attributes: { maxlength: '40' } }, { selector: '#form_input_1', attributes: { maxlength: '80' } }, { selector: 'input[name="Phone"]', attributes: { maxlength: '15' } }, { selector: '#form_input_3', attributes: { maxlength: '80' } }, { selector: '#form_input_4', attributes: { maxlength: '100' } }, { selector: 'input[name="Address line 1"]', attributes: { maxlength: '255' } }, { selector: 'input[name="Address line 2"]', attributes: { maxlength: '255' } }, { selector: 'input[name="City"]', attributes: { maxlength: '40' } }, { selector: 'input[name="Province"]', attributes: { maxlength: '80' } }, { selector: 'input[name="Zip code"]', attributes: { maxlength: '20' } }, { selector: 'select[name="Product SKU or Product Name Dropdown"]', attributes: { } }, { selector: 'input[name="Product Name"]', attributes: { maxlength: '4000' } }, { selector: '#form_input_11', attributes: { min: '0', max: '10' } }, { selector: 'input[name="Place of Purchase"]', attributes: { maxlength: '50' } }, { selector: 'input[name="Installed By"]', attributes: { maxlength: '50' } } ]; attributes.forEach(({ selector, attributes }) => { const element = document.querySelector(selector); if (element) { Object.entries(attributes).forEach(([key, value]) => { element.setAttribute(key, value); }); } }); } function replaceCountryField() { const countryField = document.querySelector('[name="Country"]'); if (countryField) { const newCountryField = document.createElement("input"); newCountryField.type = "text"; newCountryField.id = "displayedCountry"; newCountryField.value = "United States"; newCountryField.readOnly = true; newCountryField.classList.add("form-control"); newCountryField.classList.add("required"); newCountryField.setAttribute("name", "Displayed Country"); countryField.replaceWith(newCountryField); const countryFieldHidden = document.createElement("input"); countryFieldHidden.type = "text"; countryFieldHidden.id = "country"; countryFieldHidden.value = "United States"; countryFieldHidden.readOnly = true; countryFieldHidden.classList.add("form-control"); countryFieldHidden.classList.add("required"); countryFieldHidden.style.display = "none"; countryFieldHidden.setAttribute("name", "Country"); newCountryField.insertAdjacentElement('afterend', countryFieldHidden); } } function replaceProvinceField() { const provinceField = document.querySelector('[name="Province"]'); if (provinceField) { const states = [ { name: "Alabama", code: "AL" }, { name: "Alaska", code: "AK" }, { name: "Arizona", code: "AZ" }, { name: "Arkansas", code: "AR" }, { name: "California", code: "CA" }, { name: "Colorado", code: "CO" }, { name: "Connecticut", code: "CT" }, { name: "Delaware", code: "DE" }, { name: "Florida", code: "FL" }, { name: "Georgia", code: "GA" }, { name: "Hawaii", code: "HI" }, { name: "Idaho", code: "ID" }, { name: "Illinois", code: "IL" }, { name: "Indiana", code: "IN" }, { name: "Iowa", code: "IA" }, { name: "Kansas", code: "KS" }, { name: "Kentucky", code: "KY" }, { name: "Louisiana", code: "LA" }, { name: "Maine", code: "ME" }, { name: "Maryland", code: "MD" }, { name: "Massachusetts", code: "MA" }, { name: "Michigan", code: "MI" }, { name: "Minnesota", code: "MN" }, { name: "Mississippi", code: "MS" }, { name: "Missouri", code: "MO" }, { name: "Montana", code: "MT" }, { name: "Nebraska", code: "NE" }, { name: "Nevada", code: "NV" }, { name: "New Hampshire", code: "NH" }, { name: "New Jersey", code: "NJ" }, { name: "New Mexico", code: "NM" }, { name: "New York", code: "NY" }, { name: "North Carolina", code: "NC" }, { name: "North Dakota", code: "ND" }, { name: "Ohio", code: "OH" }, { name: "Oklahoma", code: "OK" }, { name: "Oregon", code: "OR" }, { name: "Pennsylvania", code: "PA" }, { name: "Rhode Island", code: "RI" }, { name: "South Carolina", code: "SC" }, { name: "South Dakota", code: "SD" }, { name: "Tennessee", code: "TN" }, { name: "Texas", code: "TX" }, { name: "Utah", code: "UT" }, { name: "Vermont", code: "VT" }, { name: "Virginia", code: "VA" }, { name: "Washington", code: "WA" }, { name: "Washington DC", code: "DC" }, { name: "West Virginia", code: "WV" }, { name: "Wisconsin", code: "WI" }, { name: "Wyoming", code: "WY" } ]; const newProvinceField = document.createElement("select"); newProvinceField.id = "province"; states.forEach(state => { const option = document.createElement("option"); option.value = state.code; option.textContent = state.name; newProvinceField.appendChild(option); }); newProvinceField.classList.add("form-control"); newProvinceField.classList.add("required"); newProvinceField.setAttribute("name", "Province"); provinceField.replaceWith(newProvinceField); const labelElement = document.querySelector('label[for="address_province"]'); if (labelElement) { labelElement.textContent = "State"; } } } function disableLabelTabbing() { document.querySelectorAll('#formGeneratorForm label').forEach((label) => { label.setAttribute('tabindex', '-1'); }); } function phoneNumberLimit () { const phoneNumberInput = document.querySelector('#formGeneratorForm input[name="Phone"]'); if (!phoneNumberInput) return; phoneNumberInput.addEventListener("input", function (e) { const maxLength = 15; e.target.value = e.target.value.slice(0, maxLength); }); } function normalizeCountryCode(countryCode) { const countryMap = { 'United States': 'US', 'Canada': 'CA', 'Mexico': 'MX' }; return countryMap[countryCode] || countryCode; } function emitAddressValidationEvent() { const { addressInput, addressInput2, cityInput, provinceInput, zipInput, countryInput } = getFormAddressFields(); const addressInfo = { streetLines: [addressInput?.value.trim() || '', addressInput2?.value.trim() || ''], city: cityInput?.value.trim() || '', stateOrProvinceCode: provinceInput?.value || '', postalCode: zipInput?.value.trim() || '', countryCode: normalizeCountryCode(countryInput?.value || 'United States') }; window.parent.postMessage({ type: 'addressUpdate', data: addressInfo }, '*'); } function validationAddress() { const { addressInput, addressInput2, cityInput, provinceInput, zipInput, countryInput } = getFormAddressFields(); function handleAddressValidation() { if (!addressFormStatus.validateOnNextFocusOut) return; addressFormStatus.validateOnNextFocusOut = false; const addressInfo = { streetLines: [addressInput?.value.trim() || '', addressInput2?.value.trim() || ''], city: cityInput?.value.trim() || '', stateOrProvinceCode: provinceInput?.value || '', postalCode: zipInput?.value.trim() || '', countryCode: normalizeCountryCode(countryInput?.value || 'United States') }; if (addressInfo.streetLines[0] && addressInfo.city && addressInfo.postalCode && addressInfo.stateOrProvinceCode) { window.parent.postMessage({ type: 'addressUpdate', data: addressInfo }, '*'); } } function updateFormStatus() { addressFormStatus.validated = false; addressFormStatus.validateOnNextFocusOut = true; } addressInput?.addEventListener('input', updateFormStatus); addressInput2?.addEventListener('input', updateFormStatus); cityInput?.addEventListener('input', updateFormStatus); zipInput?.addEventListener('input', updateFormStatus); addressInput?.addEventListener('focusout', handleAddressValidation); addressInput2?.addEventListener('focusout', handleAddressValidation); cityInput?.addEventListener('focusout', handleAddressValidation); zipInput?.addEventListener('focusout', handleAddressValidation); provinceInput?.addEventListener('change', () => { updateFormStatus(); handleAddressValidation(); }); countryInput?.addEventListener('change', () => { updateFormStatus(); handleAddressValidation(); }); } function listenToAddressValidationEvents() { window.addEventListener('message', function (event) { const { type, data } = event.data; const events = getEvents(); events[type]?.(data); }); } function getEvents() { return { "disableForm": handleDisableForm, "enableForm": handleEnableForm, "addressValidated": handleAddressValidated } } function handleDisableForm() { const form = document.querySelector('form'); Array.from(form.elements).forEach((element) => { element.disabled = true; }); } function handleEnableForm() { const form = document.querySelector('form'); Array.from(form.elements).forEach((element) => { element.disabled = false; }); } function handleAddressValidated(data) { const { addressInput, addressInput2, cityInput, provinceInput, zipInput, countryInput } = getFormAddressFields(); addressInput.value = data.streetLinesToken[0]; addressInput2.value = data.streetLinesToken[1] || ''; cityInput.value = data.city; provinceInput.value = data.stateOrProvinceCode; zipInput.value = data.postalCode; countryInput.value = data.countryCode || 'United States'; addressFormStatus.validated = true; addressFormStatus.validateOnNextFocusOut = false; } const addressFormStatus = { validated: false } const skuAutoComplete = { validated: false, selectedSku: null } function getFormAddressFields() { return { addressInput: document.querySelector('[name="Address line 1"]'), addressInput2: document.querySelector('[name="Address line 2"]'), cityInput: document.querySelector('[name="City"]'), provinceInput: document.querySelector('[name="Province"]'), zipInput: document.querySelector('[name="Zip code"]'), countryInput: document.querySelector('[name="Country"]') } } function addSubmitButtonCustomAction() { const buttonSubmit = document.querySelector('.form_submit_div button'); buttonSubmit.addEventListener('click', (e) => { const productField = document.querySelector('select[name="Product SKU or Product Name Dropdown"]') || document.querySelector('#form_input_10'); const productVisibleField = document.querySelector('#product_sku_search_input') || productField; // --- CRITICAL: STRICT SKU VALIDATION BEFORE SUBMISSION --- // 1. Must have validated flag set if (!skuAutoComplete.validated) { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // 2. Must have selected SKU stored if (!skuAutoComplete.selectedSku) { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // 3. Field value must match selected SKU (prevents manual edits post-selection) if (productField.value.trim() !== skuAutoComplete.selectedSku) { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // 4. Field cannot be empty if (!productField.value || productField.value.trim() === '') { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // --------------------------------------------------------- const validations = [ { validated: addressFormStatus.validated, onError: () => { emitAddressValidationEvent(); const { addressInput } = getFormAddressFields(); addressInput.scrollIntoView({ behavior: 'smooth', block: "center" }); }, } ]; validations.some(({ validated, onError }) => { if (!validated) { e.preventDefault(); e.stopPropagation(); onError(); return true; } return false; }); }) } function initSkuDropdown() { const productField = document.querySelector('select[name="Product SKU or Product Name Dropdown"]') || document.querySelector('#form_input_10'); if (!productField) return; const productnameField = document.querySelector('input[name="Product Name"]') const searchInputId = 'product_sku_search_input'; const suggestionListId = 'product_sku_suggestion_list'; const suggestionItemClass = 'product-sku-suggestion-item'; let searchDebounceTimer = null; let activeSearchRequestId = 0; let productsByDisplayText = new Map(); let suppressSearchReset = false; let currentSuggestions = []; productField.classList.add('product-sku-select-hidden'); productField.setAttribute('tabindex', '-1'); productField.setAttribute('aria-hidden', 'true'); const productFieldContainer = productField.parentElement; if (productFieldContainer && getComputedStyle(productFieldContainer).position === 'static') { productFieldContainer.style.position = 'relative'; } function getOrCreateSearchInput() { let searchInput = document.querySelector(`#${searchInputId}`); if (searchInput) return searchInput; searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.id = searchInputId; searchInput.className = 'form-control product-sku-search'; searchInput.placeholder = 'Type to search by product name or model number'; searchInput.setAttribute('autocomplete', 'off'); searchInput.setAttribute('aria-label', 'Search product for dropdown'); productField.insertAdjacentElement('beforebegin', searchInput); return searchInput; } function getOrCreateSuggestionList() { let suggestionList = document.querySelector(`#${suggestionListId}`); if (suggestionList) return suggestionList; suggestionList = document.createElement('ul'); suggestionList.id = suggestionListId; suggestionList.className = 'product-sku-suggestion-list'; suggestionList.hidden = true; productField.insertAdjacentElement('beforebegin', suggestionList); return suggestionList; } const searchInput = getOrCreateSearchInput(); const suggestionList = getOrCreateSuggestionList(); function hideSuggestionList() { suggestionList.hidden = true; suggestionList.innerHTML = ''; currentSuggestions = []; } function showLoadingSuggestions() { suggestionList.innerHTML = ''; const loadingItem = document.createElement('li'); loadingItem.className = 'product-sku-suggestion-item product-sku-suggestion-item--loading'; loadingItem.setAttribute('aria-disabled', 'true'); loadingItem.innerHTML = ` Loading results... `; suggestionList.appendChild(loadingItem); suggestionList.hidden = false; } function renderSuggestionList(products) { currentSuggestions = products; suggestionList.innerHTML = ''; if (!products.length) { const noResults = document.createElement('li'); noResults.className = suggestionItemClass; noResults.textContent = 'No results found'; noResults.setAttribute('aria-disabled', 'true'); suggestionList.appendChild(noResults); suggestionList.hidden = false; return; } products.slice(0, 20).forEach((item, index) => { const option = document.createElement('li'); option.className = suggestionItemClass; option.setAttribute('role', 'option'); option.setAttribute('aria-selected', 'false'); option.dataset.displayText = item.displayText; option.dataset.sku = item.sku; option.dataset.title = item.title || ''; option.textContent = item.displayText; option.addEventListener('pointerdown', (event) => { event.preventDefault(); event.stopPropagation(); activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); selectProduct({ sku: item.sku, title: item.title || '' }); searchInput.value = item.displayText; BlurValidator.clearError(searchInput); hideSuggestionList(); }); option.addEventListener('mouseenter', () => { suggestionList.querySelectorAll('[aria-selected="true"]').forEach((selected) => { selected.setAttribute('aria-selected', 'false'); }); option.setAttribute('aria-selected', 'true'); }); suggestionList.appendChild(option); }); suggestionList.hidden = false; } function selectProduct({ sku, title }) { productField.value = sku; if (productnameField) productnameField.value = title; skuAutoComplete.validated = true; skuAutoComplete.selectedSku = sku; BlurValidator.clearError(productField); } function resetDropdownOptions(placeholderText = 'Please Select') { productField.innerHTML = ''; hideSuggestionList(); productsByDisplayText = new Map(); const placeholder = document.createElement('option'); placeholder.value = ''; placeholder.textContent = placeholderText; productField.appendChild(placeholder); } function addProductOptions(products) { const added = new Set(); products.forEach(({ displayText, sku, title }) => { const normalizedSku = (sku || '').trim(); if (!normalizedSku || added.has(normalizedSku)) return; const option = document.createElement('option'); option.value = normalizedSku; option.textContent = displayText; option.dataset.productTitle = title || ''; productField.appendChild(option); productsByDisplayText.set(displayText, { sku: normalizedSku, title: title || '', displayText }); added.add(normalizedSku); }); } function applySelectionFromInput() { const typedValue = (searchInput.value || '').trim(); if (!typedValue) return false; const directMatch = productsByDisplayText.get(typedValue); if (directMatch) { activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); selectProduct({ sku: directMatch.sku, title: directMatch.title }); BlurValidator.clearError(searchInput); return true; } const caseInsensitiveMatch = Array.from(productsByDisplayText.values()).find( (item) => item.displayText.toLowerCase() === typedValue.toLowerCase() ); if (caseInsensitiveMatch) { activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); selectProduct({ sku: caseInsensitiveMatch.sku, title: caseInsensitiveMatch.title }); searchInput.value = caseInsensitiveMatch.displayText; BlurValidator.clearError(searchInput); return true; } return false; } async function populateProductDropdown() { const requestId = activeSearchRequestId; if (requestId === 0) return; resetDropdownOptions('Loading products...'); skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; if ((searchInput.value || '').trim().length > 0) { showLoadingSuggestions(); } else { hideSuggestionList(); } try { const products = await getProducts(searchInput.value || ''); if (requestId !== activeSearchRequestId) return; resetDropdownOptions('Please Select'); if (!products.length) { if ((searchInput.value || '').trim().length > 0) { renderSuggestionList([]); } else { hideSuggestionList(); } return; } addProductOptions(products); const inputValue = (searchInput.value || '').trim().toLowerCase(); const suggestions = products.filter((item) => { if (!inputValue) return true; return item.displayText.toLowerCase().includes(inputValue); }); if (inputValue.length > 0) { renderSuggestionList(suggestions); } else { hideSuggestionList(); } } catch (error) { resetDropdownOptions('Please Select'); hideSuggestionList(); } Array.from(productField.options).forEach((option) => { if (option.value && option.value.trim().toLowerCase() === 'test') option.remove(); }); } activeSearchRequestId += 1; populateProductDropdown(); searchInput.addEventListener('input', () => { if (suppressSearchReset) return; skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; productField.value = ''; if (productnameField) productnameField.value = ''; BlurValidator.clearError(productField); BlurValidator.clearError(searchInput); activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); searchDebounceTimer = setTimeout(() => { populateProductDropdown(); }, 300); }); searchInput.addEventListener('change', () => { if (!applySelectionFromInput()) { skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; productField.value = ''; if (productnameField) productnameField.value = ''; } }); searchInput.addEventListener('blur', () => { setTimeout(() => { if (document.activeElement === suggestionList || suggestionList.contains(document.activeElement)) return; const hasSelection = applySelectionFromInput(); if (!hasSelection) { BlurValidator.showError(searchInput, 'Please select a product from the dropdown list.'); hideSuggestionList(); return; } hideSuggestionList(); }, 120); }); searchInput.addEventListener('focus', () => { if ((searchInput.value || '').trim().length === 0) hideSuggestionList(); }); searchInput.addEventListener('keydown', (event) => { if (event.key === 'Escape') { hideSuggestionList(); return; } if (event.key === 'Enter') { const matched = applySelectionFromInput(); if (matched) { hideSuggestionList(); } } }); productField.addEventListener('change', () => { const selectedOption = productField.options[productField.selectedIndex]; if (!selectedOption || !selectedOption.value) { skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; if (productnameField) productnameField.value = ''; BlurValidator.showError(productField, 'Please select a product from the dropdown list.'); return; } suppressSearchReset = true; selectProduct({ sku: selectedOption.value, title: selectedOption.dataset.productTitle || '' }); searchInput.value = selectedOption.textContent || ''; suppressSearchReset = false; }); } async function getProducts(productQuery) { const endpoint = 'https://american-standard-production.myshopify.com/api/2023-07/graphql.json'; const headers = { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': 'b3593e90acc9d4213f7f69735c9d8c77' }; const allProducts = []; let afterCursor = null; let hasNextPage = true; let pageCount = 0; const maxPages = 20; while (hasNextPage && pageCount < maxPages) { const query = getSearchProductsQuery(productQuery, afterCursor); const response = await fetch(endpoint, { method: 'POST', headers, body: JSON.stringify({ query }) }); if (!response.ok) break; const data = await response.json(); const productsConnection = data?.data?.products; if (!productsConnection?.edges) break; allProducts.push(...productsConnection.edges); hasNextPage = Boolean(productsConnection.pageInfo?.hasNextPage); afterCursor = productsConnection.pageInfo?.endCursor || null; pageCount += 1; } return allProducts.flatMap(({ node: product }) => (product.variants?.edges || []).map(({ node: variant }) => { const optionsText = (variant.selectedOptions || []).map(({ value }) => value).join(' '); return { displayText: `${product.title} ${variant.title} ${optionsText}, ${variant.sku}`, sku: variant.sku, title: product.title, }; }) ); } function getSearchProductsQuery(productQuery, afterCursor = null) { const escapedQuery = String(productQuery || '').replace(/"/g, '\\"'); const queryFilter = escapedQuery.trim().length > 0 ? `, query: "${escapedQuery}"` : ''; const afterFilter = afterCursor ? `, after: \"${afterCursor}\"` : ''; return `query getProducts { products(first: 250${queryFilter}${afterFilter}) { pageInfo { hasNextPage endCursor } edges { node { title variants(first: 250) { edges { node { sku title selectedOptions { name value } } } } } } } }` } function addDropzoneConfigs() { const dz = Dropzone.forElement(".dropzone"); if(!dz) return; dz.options.acceptedFiles = "image/*,application/pdf"; document.querySelectorAll(".dz-hidden-input").forEach((input) => { input.setAttribute("accept", dz.options.acceptedFiles); }); } function addPurchaseDateListener() { const $purchaseInput = $('input[name="Purchase Date"]'); const $installationInput = $('input[name="Date of Installation"]'); $purchaseInput.on('dp.change', function (event) { const purchaseDate = event.date; $installationInput?.data('DateTimePicker')?.minDate(purchaseDate); }); } function setWebUrl(href) { const url = new URL(href); const hostname = url.hostname; const path = url.pathname.toLowerCase(); let language = "EN"; if (hostname.includes("americanstandard.ca")) { language = path.startsWith("/fr") ? "FR" : "EN"; } else if (hostname.includes("americanstandard.mx")) { language = path.startsWith("/en") ? "EN" : "ES"; } else if (hostname.includes("americanstandard-us.com")) { language = "EN"; } const webUrlInput = document.querySelector('input[name="Web URL"]'); if (webUrlInput) webUrlInput.value = hostname; const languageInput = document.querySelector('input[name="Language"]'); if (languageInput) languageInput.value = language; } function getParentHref() { window.addEventListener('message', (event) => { if (event.data.type === 'parentHref') { setWebUrl(event.data.href); } }); window.parent.postMessage({ type: 'requestHref' }, '*'); } function changeTermsAndConditionsText() { const termsAndConditions = document.querySelector('#terms_conditions')?.closest('label'); if (termsAndConditions) { const span = termsAndConditions.querySelector('#terms_conditions'); termsAndConditions.innerHTML = ''; termsAndConditions.appendChild(span); termsAndConditions.insertAdjacentHTML('beforeend', ` I have read and agree to the Terms and Conditions and Privacy Policy. `); } } document.addEventListener('DOMContentLoaded', function () {// Add CSS styling for autocomplete suggestions const styleEl = document.createElement('style'); styleEl.textContent = ` input.error { border-color: #dc3545 !important; } select.error { border-color: #dc3545 !important; } .product-sku-search { margin-bottom: 8px; position: relative; background: #fff; border: 1px solid #c9c9c9; border-radius: 0; box-shadow: none; color: #111; } .product-sku-select-hidden { display: none !important; } .product-sku-suggestion-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10000; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #d0d0d0; border-radius: 0; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); max-height: 280px; overflow-y: auto; } .product-sku-suggestion-item { padding: 12px 14px; color: #111; font-size: 14px; line-height: 1.35; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #eee; } .product-sku-suggestion-item:hover, .product-sku-suggestion-item[aria-selected="true"] { background: #f3f3f3; } .product-sku-suggestion-item[aria-disabled="true"] { color: #777; cursor: default; } .product-sku-suggestion-item--loading { display: flex; align-items: center; gap: 10px; justify-content: flex-start; } .product-sku-loading-dot { width: 10px; height: 10px; border-radius: 999px; background: #111; opacity: 0.2; animation: productSkuPulse 1s ease-in-out infinite; } @keyframes productSkuPulse { 0%, 100% { transform: scale(0.75); opacity: 0.2; } 50% { transform: scale(1.1); opacity: 0.8; } } .error-message { color: #dc3545; font-size: 12px; margin-top: 5px; } `; document.head.appendChild(styleEl); replaceCountryField(); replaceProvinceField(); setFormAttributes(); disableLabelTabbing(); changeTermsAndConditionsText(); phoneNumberLimit(); validationAddress(); addSubmitButtonCustomAction(); listenToAddressValidationEvents(); initSkuDropdown(); addDropzoneConfigs(); addPurchaseDateListener(); getParentHref(); BlurValidator.init(); document.querySelectorAll('label').forEach(label => { if (label.textContent.includes('*')) { const text = label.textContent.replace('*', '').trim(); label.innerHTML = `${text} `; } }); });

GPF Maximum	1.28 gpf
Toilet Type	Tank Only

1.28 gpf Tank complete with coupling components and tank trim

1.28 gpf Tank complete with coupling components and tank trim

Validate this Address

Compared products