globalThis['zbThemes']['sharedThemeCommonForm'] = ( class sharedThemeCommonForm { awsUrl; resizeListener; fontStyleValues = { bold: 'B', italic: 'I', underline: 'U' } selectedCountryCode = null; static_page; $websiteSettings; formData = {}; countries; isLoading = false; language = globalThis?.safelocalStorage?.getItem('language') || 'en'; constructor(sectionId, sectionData, bundle) { this.bundle = bundle; this.isLoading = true; this.awsUrl = this.bundle?.environment.awsImageUrl; zbLoadCustomScripts(['zwe-form-field', 'zwe-select', 'zwe-snackbar','zwe-font-resizer']).finally(()=>{ this.isLoading = false; this.rerender() if (this.element) { this.allEvents(); } }) this.sectionId = sectionId; this.static_page = globalThis?.safeWindow?.translationObj['PAGE_LAYOUT']; this.sectionData = sectionData; this.md = false; this.formSettings = sectionData?.formSetting || {}; this.isEditor = sectionData['isEditor'] ?? false; if(!this.isEditor){ const getCategoriesInput = { input: { currency: false } }; Promise.all([ this.bundle?.service?.getAllCountries(getCategoriesInput), this.bundle?.service?.getContactDetails({ storeId: this.bundle?.service?.storeId }) ]).then(([countriesRes, contactRes]) => { this.countries = countriesRes; this.$websiteSettings = contactRes; this.rerender() if (this.element) { this.allEvents(); } }); }else{ this.isLoading = false; } } async zbOnInit(element) { this.checkElement(); this.checkScreenSize(); } checkElement() { requestAnimationFrame(() => { this.element = globalThis.safeDocument?.querySelector(`phase-ii-common-form#zb-section${this.sectionId}`); if (!this.element) { this.checkElement(); } else { this.allEvents(); } }); } allEvents() { if (!this.element) return; if (!this.resizeListener) { this.resizeListener = this.checkScreenSize.bind(this); globalThis?.safeWindow?.addEventListener("resize", this.resizeListener); } this.form = this.element.querySelector(`#zbContactForm${this.sectionId}`); if (this.form) { this.inputs = this.form.querySelectorAll('.zwe-input-flex'); this.attachEventListeners(); this.form.addEventListener('click', (event) => { const clickedButton = event.target.closest('button'); if (clickedButton && clickedButton.tagName === 'BUTTON') { if (clickedButton.name === 'submit') { this.validateOnSubmit(); } else if (clickedButton.name === 'reset') { this.clearFormFields(); } } }); } } checkScreenSize() { const windowWidth = globalThis?.safeWindow?.innerWidth; const wasMdMobile = this.md; const isNowMdMobile = windowWidth < 769; const wasSmMobile = this.sm; const isNowSmMobile = windowWidth < 415; if (isNowMdMobile !== wasMdMobile) { this.md = isNowMdMobile; this.rerender(); } if (isNowSmMobile !== wasSmMobile) { this.sm = isNowSmMobile; this.rerender(); } if (this.element) { this.allEvents(); } } rerender() { if (this.element) { this.element.innerHTML = ''; this.element.innerHTML = this.getHtml(); } } sharedThemeCommonForm(data) { this.formSettings = data['formSetting']; try { return this.getHtml() } catch (error) { return ''; } } getHtml() { const borderTop = this.generateBorder('top'); const borderBottom = this.generateBorder('bottom'); const backgroundStyle = this.getBackgroundStyle(`#contact-bg-image2${this.sectionId}`); const flexCondition1 = this.formSettings?.contactusalignment === 'center' || (this.formSettings?.formOnly && this.formSettings?.templateName === 'templateTwo') ? 'center center' : ''; const contactClass = (!this.formSettings?.formOnly && ((this.formSettings?.contactusalignment === 'center' && this.formSettings?.backgroundType === 'color') || (this.formSettings?.contactusalignment !== 'center' && this.formSettings?.colorFill)) && this.formSettings?.isGlobalBackground) ? 'contact-background' : ''; const imageCondition = this.formSettings?.contactusalignment !== 'center' && !this.formSettings?.formOnly; const imageDiv = `

`; const html =`

${borderTop}

${imageCondition ? imageDiv : ''} ${this.getFormContainer()}

${borderBottom}

${this.getStyle()} ` return html; } getStyle(){ return ` ` } getFlexAlignment(value) { const [justifyContent, alignItems] = value.split(' '); return `justify-content: ${justifyContent || ''};align-items: ${alignItems || justifyContent || ''}; `; } getFormContainer() { const formStyle = ` padding: ${this.formSettings?.formOnly ? '0px' : '30px'};width: 100%; background-color: ${this.formSettings?.formBackground && !this.formSettings?.colorFill && this.formSettings?.contactusalignment !== 'center' && !this.formSettings?.isGlobalBackground ? this.formSettings?.backgroundColor : 'transparent' }; `; const flexSetting = `max-width: ${this.md ? '100%' : this.formSettings?.formOnly ? '100%' : this.formSettings?.contactusalignment !== 'center' ? '50%' : this.formSettings?.sporting === 'sporting' ? '100%' : this.formSettings?.templateName === 'templateThree' ? '90%' : '70%'};order:${this.formSettings?.contactusalignment === 'left' ? 1 : 2};flex:1 1 100%;`; const formCard = this.formSettings?.formCard; const cardRadius = this.formSettings?.formCardRadius || 0; const cardColor = this.formSettings?.formCardColor || null; const cardClass = formCard ? 'mat-elevation-z8' : ''; const cardStyle = ` border-radius: ${cardRadius}px; padding: ${formCard ? '35px' : '0px'}; background-color: ${formCard ? cardColor : 'transparent'}; `; return `

${(!this.formSettings?.formOnly && (this.formSettings?.showTitle && this.formSettings?.textOutside)) ? this.getHeading() : ''} ${(!this.formSettings?.formOnly && (this.formSettings?.showSubtitle && this.formSettings?.textOutside)) ? this.getSubheading() : ''}

${(!this.formSettings?.formOnly && (this.formSettings?.showTitle && !this.formSettings?.textOutside)) ? this.getHeading() : ''} ${(!this.formSettings?.formOnly && (this.formSettings?.showSubtitle && !this.formSettings?.textOutside)) ? this.getSubheading() : ''}

${this.isLoading ? `

`:this.getFormTemplete() }

`; } generateBorder(position) { if (!this.formSettings.borderDesign) return ''; const color = this.formSettings.contactusalignment === 'center' && this.formSettings.backgroundType === 'color' ? this.formSettings.backgroundColor : '#fff'; return `

${this.renderSvg()}

`; } renderSvg() { return ` `; } getBackgroundStyle(id) { const backgroundColor = this.formSettings.backgroundType === 'color' ? this.formSettings.backgroundColor : 'transparent'; const backgroundImage = this.formSettings.backgroundType === 'image' ? `url(${zbSetOptimizedBackgroundUrl(id, this.awsUrl + this.formSettings.contactusImage)})` : 'none'; return `background-color: ${backgroundColor};background-image: ${backgroundImage};background-repeat: no-repeat;background-size: cover;background-position: center; `; } getHeading() { const textAlignment = this.formSettings?.textAlingment || 'center'; const titleFontSize = this.formSettings?.titleFontSize ? `${this.formSettings?.titleFontSize}px` : '30px'; const titleColor = this.formSettings?.titleColor || 'black'; const fontWeight = this.formSettings?.titleFontStyle?.includes(this.fontStyleValues?.bold) ? 'bold' : 'normal'; const fontStyle = this.formSettings?.titleFontStyle?.includes(this.fontStyleValues?.italic) ? 'italic' : 'normal'; const textDecoration = this.formSettings?.titleFontStyle?.includes(this.fontStyleValues?.underline) ? 'underline' : 'none'; const fontFamily = this.formSettings?.titleFontFamily || 'Montserrat,sans-serif'; return `

${this.formSettings?.formTitle || ''}

`; } getSubheading() { const textAlignment = this.formSettings?.textAlingment || 'center'; const subtitleFontSize = this.formSettings?.subtitleFontSize ? `${this.formSettings?.subtitleFontSize}px` : '20px'; const subtitleColor = this.formSettings?.subtitleColor || 'black'; const fontWeight = this.formSettings?.subtitleFontStyle?.includes(this.fontStyleValues?.bold) ? 'bold' : 'normal'; const fontStyle = this.formSettings?.subtitleFontStyle?.includes(this.fontStyleValues?.italic) ? 'italic' : 'normal'; const textDecoration = this.formSettings?.subtitleFontStyle?.includes(this.fontStyleValues?.underline) ? 'underline' : 'none'; const fontFamily = this.formSettings?.subtitleFontFamily || 'Montserrat,sans-serif'; return `

${this.formSettings?.formSubtitle || ''}

`; } getFormTemplete() { const formSettings = this.formSettings || {}; const isEditor = formSettings.isEditor; const formClasses = ` ${this.formSettings.edit ? 'painting-contact-us' : ''} ${this.formSettings.formFieldFill && formSettings.formFieldAppearence === 'outline' ? 'center-alignment-outline' : ''} ${this.formSettings.formFieldFill && formSettings.formFieldAppearence === 'fill' ? 'center-alignment-standard' : ''} ${this.formSettings.formFieldAppearence === 'fill' ? 'standard-spacing colors-standard' : ''} ${this.formSettings.formFieldAppearence === 'outline' ? 'colors-outline' : ''} ${this.formSettings.formFieldDesign === 'boxed' ? 'boxed' : ''} ${this.formSettings.formFieldDesign === 'rounded' && formSettings.formFieldAppearence === 'outline' ? 'rounded' : ''} ${isEditor ? 'read-only-form' : ''} text-color `.trim(); const patternValidators = { acceptOnlyNumbers: '^[0-9]*$', acceptOnlyCharacters: '^(?! )(?!.* $)[A-Za-z ]{1,35}$', emailValidationPattern: '^[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}$', noSpaceInBegAndEnd: '^[^\\s]+(\\s+[^\\s]+)*$', contactValidationPattern: '^\$\\d{3}\$ \\d{3}-\\d{4}$' }; const config = { firstname: { prop: "first_name", name: "firstName", type: 'text', placeholder: this.static_page['FIRST_NAME_PH'], label: this.static_page['FIRST_NAME'], required: true, max: 35, pattern: patternValidators.acceptOnlyCharacters }, lastname: { prop: "last_name", name: "lastName", type: 'text', placeholder: this.static_page['LAST_NAME_PH'], label: this.static_page['LAST_NAME'], required: true, max: 35, pattern: patternValidators.acceptOnlyCharacters }, email: { prop: "email", name: "email", icon: 'email', type: 'email', placeholder: this.static_page['EMAIL_PH'], label: this.static_page['EMAIL'], required: true, pattern: patternValidators.emailValidationPattern }, countryCode: { prop: "countrycode", name: "countryCode", placeholder: 'E.g., +'+this.$websiteSettings?.getContactDetails?.currentUserDetails?.countryCode, label: this.static_page['COUNTRY_CODE'], required: true }, name: { prop: "name", name: "userName", icon: 'person', type: 'text', placeholder: this.static_page['NAME_PH'], label: this.static_page['NAME'], required: true, max: 35, pattern: patternValidators.acceptOnlyCharacters }, contact: { prop: "contact", name: "contactNumber", icon: 'phone', type: 'text', placeholder: this.static_page['CONTACT_PH'], label: this.static_page['CONTACT'], pattern: patternValidators.acceptOnlyNumbers, max: 20 }, message: { prop: "message", name: "message", type: 'textarea', placeholder: this.static_page['MESSAGE_PH'], label: this.static_page['MESSAGE'], required: true, max: 500, pattern: patternValidators.noSpaceInBegAndEnd } } if (this.formSettings.templateName == 'templateTwo') { return ` `; } else if (this.formSettings.templateName == 'templateThree') { return ` `; } else if (this.formSettings.templateName == 'templateFour') { return `

${this.generateInputField(config.name)}

${this.formSettings?.emailField ? `

${this.generateInputField(config.email)}

` : ''} ${this.formSettings?.contactNoField ? `

${this.formSettings?.formFieldLabelOut ? ` ${this.static_page['COUNTRY_CODE']}: `: ``} ${!this.formSettings?.formFieldLabelOut ? `${this.static_page['COUNTRY_CODE']}` : ''} ${this.countries?.getAllCountries?.country.length && this.countries.getAllCountries.country.map((item) => ` +${item?.countryCode} ${item?.name} `).join('')}

${this.generateInputField(config.contact)}

` : ''}

${this.generateInputField(config.message)}

${this.formSettings?.buttonArray ? `

${this.generateButtons()}

` : ''}

`; } else { return `

${this.formSettings?.nameSplit ? `

${this.generateInputField(config.firstname)}

${this.generateInputField(config.lastname)}

`: `

${this.generateInputField(config.name)}

`} ${this.formSettings?.emailField ? `

${this.generateInputField(config.email)}

`: ''} ${this.formSettings?.contactNoField ? `

${this.getCountryCode_Input(config.countryCode)}

${this.generateInputField(config.contact)}

`: ''}

${this.generateInputField(config.message)}

${this.formSettings?.buttonArray ? this.generateButtons() : ''}

`; } } generateInputField(options) { const safePattern = options.pattern ? options.pattern.replace(/\\/g, '') : ''; const input = ` `; const textArea = ` `; return ` ${this.formSettings?.formFieldLabelOut ? `${this.formSettings.templateName == 'templateFour' ? ` ${options.label}: `: ` ${options?.name === "contactNumber" ? options.label : options.label + '*'} `} `: '' } ${!this.formSettings?.formFieldLabelOut ? `${options.label}` : '' } ${options.type == 'text' | options.type == 'email' ? ` ${options?.icon && this.formSettings.suffixIcon && (this.formSettings.templateName === 'templateOne' || this.formSettings.templateName === 'templateFour') ? ` ${options?.icon} `: ''} ${input} `: ` ${textArea} `} `; } getCountryCode_Input(options) { return ` ${this.formSettings?.formFieldLabelOut ? ` ${options.label} `: ''} ${!this.formSettings?.formFieldLabelOut ? `${options.label}` : '' } ${this.countries?.getAllCountries?.country.length && this.countries.getAllCountries.country.map((item) => ` +${item?.countryCode} ${item?.name} `).join('')} `; } generateButtons() { if (!this.formSettings.buttonArray || !this.formSettings.buttonArray.length) return ''; return `

${this.formSettings.buttonArray .map( (button, i) => `

` ) .join('')}

` } validateField(input) { if (input.name === 'contactNumber') { const label = globalThis?.safeDocument?.querySelector('zwe-select') ?.closest('.zwe-input-wrapper') ?.querySelector('.zwe-placeholder'); if (label) { const text = label.textContent.trim(); const hasAsterisk = text.endsWith('*'); if (input.value && !hasAsterisk) { label.textContent = text + ' *'; } else if (!input.value && hasAsterisk) { label.textContent = text.slice(0, -2); // Remove ` *` } } } const errorMessage = input.nextElementSibling; if (!errorMessage) return; if (!input.validity.valid) { input.classList.add('error'); if (input.validity.valueMissing) { errorMessage.textContent = this.static_page[input.getAttribute('prop').toUpperCase() + '_REQUIRED']; } else if (input.validity.patternMismatch) { errorMessage.textContent = this.static_page[input.getAttribute('prop').toUpperCase() + '_PATTERN']; } else if (input.type === 'email' && input.validity.typeMismatch) { errorMessage.textContent = this.static_page['EMAIL_PATTERN']; } errorMessage.style.display = 'block'; } else { input.classList.remove('error'); errorMessage.textContent = ''; errorMessage.style.display = 'none'; } } attachEventListeners() { if (this.inputs) { this.inputs.forEach((inputDiv) => { if (inputDiv) { const inputTag = inputDiv.querySelector('input , textarea'); if (inputTag) { inputTag.addEventListener('blur', () => this.validateField(inputTag)); inputTag.addEventListener('input', () => this.validateField(inputTag)); } } }); } const selectElement = this.element.querySelector('zwe-select'); selectElement?.addEventListener('selectChange', (res) => { this.selectedCountryCode = Number(res?.detail?.value); if(this.selectedCountryCode){ const inputElement = globalThis?.safeDocument?.querySelector('input[name="contactNumber"]'); const label = inputElement.closest('.zwe-input-wrapper').querySelector('.zwe-placeholder'); if (label && !label.textContent.includes(' *')) { label.textContent += ' *'; } inputElement.setAttribute('required', 'true'); } }); const searchField = this.element.querySelector('#searchField'); if (searchField) { this.handleSearchFieldInput = this.handleSearchFieldInput.bind(this); searchField.addEventListener('input', this.handleSearchFieldInput); } } async validateOnSubmit() { let isValid = true; if (this.inputs) { this.inputs.forEach((inputDiv) => { const inputTag = inputDiv.querySelector('input , textarea'); if (inputTag) this.validateField(inputTag); if (inputTag && !inputTag.validity.valid) { isValid = false; } }); } if (isValid) { this.formData = {}; if (this.inputs) { this.inputs.forEach((inputDiv) => { const inputTag = inputDiv.querySelector('input , textarea'); if (inputTag && inputTag.name) this.formData[inputTag.name] = inputTag.value.trim(); }); } // const button = this.element.querySelector('button[name="submit"]'); try { this.formData['storeId'] = this.bundle?.service?.storeId; if (this.formSettings?.nameSplit && this.formSettings?.templateName === 'templateOne') { this.formData['userName'] = this.formData['firstName'] + ' ' + this.formData['lastName']; } this.formData['countryCode'] = this.selectedCountryCode; if(this.formData['contactNumber'] && !this.formData['countryCode']){ throw new Error('noCountryCode') } delete this.formData.firstName; delete this.formData.lastName; const contactInput = { input: { ...this.formData } }; this.bundle?.service?.saveUserQueries(contactInput).then(() => { zweShowSnackbar({ message: this.static_page['DATA_SUCCESS'], duration: 3000, type: 'success', buttonText: this.static_page['BUTTON_TEXT'] }); this.clearFormFields(); }).catch((err) => { zweShowSnackbar({ message: this.static_page['ERROR_MESSAGE'], duration: 3000, type: 'error', buttonText: this.static_page['BUTTON_TEXT'] }); }); } catch (error) { if(error && error?.message == 'noCountryCode'){ zweShowSnackbar({ message: this.static_page['COUNTRY_CODE_REQUIRED'], duration: 3000, type: 'error', buttonText: this.static_page['BUTTON_TEXT'] }); } else{ zweShowSnackbar({ message: this.static_page['FAILEDTOSAVEQUERY'], duration: 3000, type: 'error', buttonText: this.static_page['BUTTON_TEXT'] }); } } } else { zweShowSnackbar({ message: this.static_page['MANDATORY_FIELD_FILL'], duration: 3000, type: 'warn', buttonText: this.static_page['BUTTON_TEXT'] }); } } handleSearchFieldInput(event) { const filterText = event.target.value.toLowerCase(); const zweOptions = this.element.querySelectorAll('zwe-select zwe-option'); zweOptions.forEach((option) => { const optionText = option.querySelector('.mat-option-wrapper .mat-option-text')?.innerText?.toLowerCase(); if (optionText && optionText.includes(filterText)) { option.style.display = ''; } else { option.style.display = 'none'; } }); } clearFormFields() { if (this.form) { const fields = this.form.querySelectorAll('input, textarea'); fields.forEach((field) => { field.value = ''; }); this.form.querySelectorAll('zwe-select').forEach((element)=>{ element.setAttribute('reset',"true"); }) } } zbOnDestroy() { if (this.resizeListener) { globalThis?.safeWindow?.removeEventListener('resize', this.resizeListener); this.resizeListener = null; } if (this.inputs) { this.inputs.forEach((inputDiv) => { if (inputDiv) { const inputTag = inputDiv.querySelector('input , textarea'); if (inputTag) { inputTag.removeEventListener('blur', () => this.validateField(inputTag)); inputTag.removeEventListener('input', () => this.validateField(inputTag)); } } }); this.inputs = null; } if(this.element){ const searchField = this.element.querySelector('#searchField'); if (searchField) { searchField.removeEventListener('input', this.handleSearchFieldInput); } } } } );