` +\n ``\n );\n }\n\n currentFiles = [];\n\n addFiles() {\n const fileList = this.currentFiles.concat(Array.from(this.mediaObjectsTarget.files));\n this.currentFiles = fileList;\n const dt = new DataTransfer();\n fileList.forEach((file) => dt.items.add(file));\n this.mediaObjectsTarget.files = dt.files;\n this.renderPreviews();\n }\n\n // For now, just detect common video extensions\n // Source: https://gist.github.com/aaomidi/0a3b5c9bd563c9e012518b495410dc0e\n videoExtensions = new Set([\n 'webm',\n 'mkv',\n 'flv',\n 'vob',\n 'ogv',\n 'ogg',\n 'rrc',\n 'gifv',\n 'mng',\n 'mov',\n 'avi',\n 'qt',\n 'wmv',\n 'yuv',\n 'rm',\n 'asf',\n 'amv',\n 'mp4',\n 'm4p',\n 'm4v',\n 'mpg',\n 'mp2',\n 'mpeg',\n 'mpe',\n 'mpv',\n 'm4v',\n 'svi',\n '3gp',\n '3g2',\n 'mxf',\n 'roq',\n 'nsv',\n 'flv',\n 'f4v',\n 'f4p',\n 'f4a',\n 'f4b',\n 'mod',\n ]);\n\n isVideo(file) {\n const nameParts = file.name.split('.');\n const extension = nameParts[nameParts.length - 1];\n return this.videoExtensions.has(extension);\n }\n\n renderPreviews() {\n var index = 0;\n this.imagesToUploadTarget.innerHTML = '';\n this.currentFiles.forEach((file) => {\n const html = this.previewHtml(URL.createObjectURL(file), index, this.isVideo(file));\n this.imagesToUploadTarget.insertAdjacentHTML('beforeEnd', html);\n index += 1;\n });\n this.data.set('index', index);\n if (index === 0) {\n this.fileUploadTarget.classList.remove('media-present');\n } else {\n this.fileUploadTarget.classList.add('media-present');\n }\n }\n\n deleteFile(e) {\n e.stopPropagation();\n const dt = new DataTransfer();\n const currentIndex = parseInt(e.currentTarget.dataset.currentIndex);\n const oldFiles = this.mediaObjectsTarget.files;\n const newFiles = [];\n for (let i = 0; i < oldFiles.length; i++) {\n if (currentIndex !== i) {\n dt.items.add(oldFiles[i]);\n newFiles.push(oldFiles[i]);\n }\n }\n this.mediaObjectsTarget.files = dt.files;\n this.currentFiles = newFiles;\n this.renderPreviews();\n }\n}\n","import StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n static targets = ['address', 'modalRoot', 'searchField', 'addNewOption', 'placeDetails', 'addLocationButton'];\n\n maybeOpen() {\n if (this.addressTarget.value === '') {\n this.modalRootTarget.style.visibility = 'visible';\n } else {\n this.placeDetailsTarget.value = '';\n this.searchFieldTarget.value = '';\n this.addNewOptionTarget.innerHTML = 'Add New Location';\n }\n }\n\n cancel(e) {\n this.addressTarget.value = 'none';\n this.modalRootTarget.style.visibility = 'hidden';\n e.stopPropagation();\n e.preventDefault();\n }\n\n valid = false;\n\n selectAddress(e) {\n if (e.detail) {\n this.addLocationButtonTarget.classList.remove(\n 'cursor-not-allowed',\n 'bg-v2-secondary-bg-disabled',\n 'text-secondary-600',\n );\n this.addLocationButtonTarget.classList.add('bg-v2-primary-bg', 'text-v2-secondary-bg');\n this.valid = true;\n } else {\n this.addLocationButtonTarget.classList.remove('bg-v2-primary-bg', 'text-v2-secondary-bg');\n this.addLocationButtonTarget.classList.add(\n 'cursor-not-allowed',\n 'bg-v2-secondary-bg-disabled',\n 'text-secondary-600',\n );\n this.valid = false;\n }\n }\n\n addLocation(e) {\n if (this.valid) {\n this.addNewOptionTarget.innerHTML = this.searchFieldTarget.value;\n this.modalRootTarget.style.visibility = 'hidden';\n }\n e.stopPropagation();\n e.preventDefault();\n this.addressTarget.dispatchEvent(new Event('update'));\n }\n}\n","import { Controller } from 'stimulus';\n\nexport default class extends Controller {\n connect() {\n const requestServiceButton = this.element.querySelector('.request-service');\n if (requestServiceButton instanceof HTMLButtonElement) {\n requestServiceButton.focus();\n }\n }\n\n confirm(): void {\n const fsrForm = document.querySelector(\"[data-controller~='fsr-validate-field']\");\n if (fsrForm) {\n fsrForm.dispatchEvent(new CustomEvent('requestServiceInArea'));\n }\n }\n}\n","import auth0, { AuthOptions, CrossOriginLoginOptions } from 'auth0-js';\nimport { Controller } from 'stimulus';\nimport { jsonApi } from '../utils/jsonApi';\n\nexport default class extends Controller {\n static targets = [\n 'form',\n 'firstNameInput',\n 'lastNameInput',\n 'phoneNumberInput',\n 'emailInput',\n 'companyNameInput',\n 'locationAddressInput',\n 'addressSearch',\n 'passwordInput',\n 'confirmPasswordInput',\n 'descriptionInput',\n 'availabilityInput',\n 'submit',\n 'userId',\n 'locationUuidInput',\n 'placeDetailsInput',\n 'alertContainer',\n 'togglePassword',\n 'togglePassword2',\n ];\n declare formTarget: HTMLFormElement;\n declare firstNameInputTarget: HTMLInputElement;\n declare lastNameInputTarget: HTMLInputElement;\n declare phoneNumberInputTarget: HTMLInputElement;\n declare emailInputTarget: HTMLInputElement;\n declare companyNameInputTarget: HTMLInputElement;\n declare locationAddressInputTarget: HTMLInputElement;\n declare addressSearchTarget: HTMLInputElement;\n declare passwordInputTarget: HTMLInputElement;\n declare confirmPasswordInputTarget: HTMLInputElement;\n declare descriptionInputTarget: HTMLInputElement;\n declare availabilityInputTarget: HTMLInputElement;\n declare submitTarget: HTMLInputElement;\n declare userIdTarget: HTMLInputElement;\n declare locationUuidInputTarget: HTMLInputElement;\n declare placeDetailsInputTarget: HTMLInputElement;\n declare alertContainerTarget: HTMLBodyElement;\n declare togglePasswordTarget: HTMLDivElement;\n declare togglePassword2Target: HTMLDivElement;\n declare readonly hasLocationUuidInputTarget: boolean;\n\n // Global validation state of the form, for enabling/disabling submit\n validated: { [key: string]: boolean } = {\n firstName: false,\n lastName: false,\n phone: false,\n email: false,\n companyName: false,\n locationAddress: false,\n password: false,\n confirmPassword: false,\n description: false,\n availability: false,\n };\n\n updateDescriptionRemainingChars(): void {\n const description = this.descriptionInputTarget;\n const length = description.value.length;\n const maxLength = description.attributes.getNamedItem('maxlength')?.value;\n\n // it needs to be on the parent div, could not figure out how to target that through stimulus\n const descriptionContainer = document.querySelector('.description');\n if (descriptionContainer !== null)\n descriptionContainer.setAttribute('data-characters-left', `${length} / ${maxLength}`);\n }\n\n connect(): void {\n this.onRequestServiceInArea = this.onRequestServiceInArea.bind(this);\n this.element.addEventListener('requestServiceInArea', this.onRequestServiceInArea);\n\n if (this.userIdTarget.value !== '') {\n this.validated.firstName = true;\n this.validated.lastName = true;\n this.validated.email = true;\n this.validated.companyName = true;\n this.validated.password = true;\n this.validated.confirmPassword = true;\n\n // Phone might not be present, so if its not don't automatically\n // count it as validated. (If it isn't present the user must\n // enter one.)\n if (this.phoneNumberInputTarget.value.length > 0) {\n this.validated.phone = true;\n }\n }\n if (this.data.get('adminMode') === 'true') {\n this.validated.firstName = true;\n this.validated.lastName = true;\n this.validated.password = true;\n this.validated.confirmPassword = true;\n }\n }\n\n disconnect() {\n this.element.removeEventListener('requestServiceInArea', this.onRequestServiceInArea);\n }\n\n //////////////////////////////////////////////////////////////////////////\n // Auto Formatters //\n // //\n // As the user types, try and automatically format the input correctly. //\n //////////////////////////////////////////////////////////////////////////\n formatPhone(): void {\n const el = this.phoneNumberInputTarget;\n const tipsEl = el !== null ? this.getFollowingTipsEl(el) : null;\n const value = el?.value;\n const matchers: [RegExp, string][] = [\n [/^(\\d{0,2})$/, '$1'],\n [/^(\\d{3})$/, '$1-'],\n [/^(\\d{3}-\\d{0,2})$/, '$1'],\n [/^(\\d{3}-\\d{3})$/, '$1-'],\n [/^(\\d{3}-\\d{3}-\\d{0,4})(\\d*)$/, '$1'],\n // with previous case, handle copy-paste of whole phone number\n [/^(\\d{3})(\\d{3})(\\d{4})$/, '$1-$2-$3'],\n [/^1(\\d{3})(\\d{3})(\\d{4})$/, '$1-$2-$3'],\n [/^1-(\\d{3})-(\\d{3})-(\\d{4})$/, '$1-$2-$3'],\n ];\n const matcher = matchers.find((matcher) => matcher[0].test(value || ''));\n\n if (matcher) {\n const newValue = value?.replace(matcher[0], matcher[1]);\n if (el !== null && newValue !== undefined) el.value = newValue;\n this.updateTips([], tipsEl, el, 'phoneInProgress');\n } else {\n this.updateTips(['Please enter a valid phone number (XXX-XXX-XXXX) including area code'], tipsEl, el, 'phone');\n }\n }\n\n //////////////////////////////////////////////////////////////////////\n // Predicates //\n // //\n // Return an empty array if when the value is valid, or an array of //\n // tool-tip strings when invalid. //\n //////////////////////////////////////////////////////////////////////\n present(value: string): Promise
> {\n return Promise.resolve(value.length > 0 ? [] : ['This is a required field']);\n }\n\n phoneNumber(value: string): Promise> {\n const phoneNoRx = /^\\d{3}-\\d{3}-\\d{4}$/;\n return Promise.resolve(\n value.match(phoneNoRx) ? [] : ['Please enter a valid phone number (XXX-XXX-XXXX) including area code'],\n );\n }\n\n email(value: string): Promise> {\n const mailFormat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n return Promise.resolve(value.match(mailFormat) ? [] : ['Please enter a valid email address']);\n }\n\n password(value: string): Promise> {\n /* OWASP Special Characters: https://www.owasp.org/index.php/Password_special_characters */\n const specialChars = [\n ' ',\n '!',\n '\"',\n '#',\n '\\\\$',\n '%',\n '&',\n \"'\",\n '\\\\(',\n '\\\\)',\n '\\\\*',\n '\\\\+',\n ',',\n '-',\n '\\\\.',\n '/',\n ':',\n ';',\n '<',\n '=',\n '>',\n '\\\\?',\n '@',\n '\\\\[',\n '\\\\\\\\',\n '\\\\]',\n '\\\\^',\n '_',\n '`',\n '{',\n '\\\\|',\n '}',\n '~',\n ].join('|');\n\n const targetFormats: [RegExp, string][] = [\n [/(?=.{8,})/, 'Must be at least 8 characters in length'],\n [/(?=.*[A-Z])/, 'Must contain at least one lowercase letter'],\n [/(?=.*\\d)/, 'Must contain at least one uppercase letter'],\n [/(?=.*[a-z])/, 'Must contain at least one number'],\n [new RegExp(specialChars), 'Must contain at least one symbol'],\n ];\n const tips: Array = [];\n\n targetFormats.forEach(([rx, tip]) => {\n if (!value.match(rx)) {\n tips.push(tip);\n }\n });\n return Promise.resolve(tips);\n }\n\n placeDetailsPresent(value: string): Promise> {\n return Promise.resolve(value.length > 0 ? [] : ['Please enter a valid address']);\n }\n\n makeConfirmPassword(passwordInput: HTMLInputElement) {\n return (value: string): Promise> =>\n Promise.resolve(value === passwordInput.value ? [] : ['Passwords do not match']);\n }\n\n makeLocationChosen(placeDetailsInput: HTMLInputElement) {\n function checkChosenAddress(value: string): Promise> {\n if (value.length > 0 && value !== 'none') {\n return Promise.resolve([]);\n } else if (value === '' && placeDetailsInput.value !== '') {\n return Promise.resolve([]);\n } else {\n return Promise.resolve(['Please select a location or add a new one']);\n }\n }\n return checkChosenAddress;\n }\n\n async zipcode(value: string): Promise> {\n const badZip = ['This location is outside of our service area'];\n const placeDetails: PlaceDetails = JSON.parse(value);\n const zipObject = placeDetails.address_components.find((component) => component.types.includes('postal_code'));\n if (!zipObject) return badZip;\n // If \"request_service_in_area\" feature flag is enabled, skip checking zipcode\n if (this.data.get('requestServiceInArea') === 'true') {\n return [];\n }\n const response = await fetch(`/field_service_requests/zipcodes/${zipObject.short_name}`);\n return response.status === 200 ? [] : badZip;\n }\n\n ////////////////////////////////////////////////////////////////////////////////\n // validate //\n // //\n // Each individual input validator calls this method. //\n // - It expects to find a tool-tip element following the given input element. //\n // - It invokes the predicate on the inputs value //\n // - Mark the input valid/invalid and remove/add tool-tips as necessary //\n // - Update the global validation state and enable/disable the submit button //\n ////////////////////////////////////////////////////////////////////////////////\n async validate(\n key: string,\n predicate: (value: string) => Promise>,\n input: HTMLInputElement,\n otherInput: HTMLInputElement | null,\n ): Promise {\n const tipsEl = this.getFollowingTipsEl(input);\n const tips = await predicate.call(this, input.value);\n const visibleInput = otherInput || input;\n this.updateTips(tips, tipsEl, visibleInput, key);\n\n if (Object.values(this.validated).every((x) => x)) {\n this.submitTarget.classList.remove('cursor-not-allowed', 'bg-v2-primary-weak');\n this.submitTarget.classList.add('cursor-pointer', 'bg-v2-primary-bg');\n } else {\n this.submitTarget.classList.add('cursor-not-allowed', 'bg-v2-primary-weak');\n this.submitTarget.classList.remove('cursor-pointer', 'bg-v2-primary-bg');\n }\n }\n\n updateTips(tips: Array, tipsEl: Element | null, visibleInput: HTMLInputElement | null, key: string): void {\n if (tipsEl !== null && visibleInput !== null) {\n if (tips.length === 0) {\n visibleInput.classList.remove('invalid');\n tipsEl.innerHTML = '';\n this.validated[key] = true;\n } else {\n visibleInput.classList.add('invalid');\n tipsEl.innerHTML = tips.join(' {\n if (!this.placeDetailsInputTarget.value) return;\n await this.validate('locationAddress', this.zipcode, this.placeDetailsInputTarget, this.addressSearchTarget);\n this.placeDetailsInputTarget.dispatchEvent(\n new CustomEvent('updateZipcode', { detail: this.validated.locationAddress }),\n );\n }\n\n validateUserSelected(): void {\n void this.validate('email', this.present, this.userIdTarget, null);\n }\n\n showAlert(show: boolean): void {\n this.alertContainerTarget.classList.toggle('hidden', !show);\n }\n\n ////////////////////////////////\n // Validator for Submit Event //\n ////////////////////////////////\n validateAll(e: SubmitEvent): boolean {\n if (this.data.get('adminMode') !== 'true') {\n this.validateFirstName();\n this.validateLastName();\n this.validateEmail();\n this.validatePassword();\n this.validateConfirmPassword();\n }\n if (this.data.get('adminMode') === 'true') {\n this.validateUserSelected();\n }\n this.validatePhoneNumber();\n this.validateCompanyName();\n this.validateLocationAddress(e);\n this.validateDescription();\n this.validateAvailability();\n\n return Object.values(this.validated).every((x) => x);\n }\n\n // Submit handler\n async onSubmit(e: SubmitEvent): Promise {\n e.preventDefault();\n e.stopPropagation();\n // hide prior errors if they are showing\n this.showAlert(false);\n\n const isValid = this.validateAll(e);\n\n if (!isValid) {\n return false;\n }\n\n const shouldOpenZipCodeModal = await this.shouldOpenRequestServiceInAreaModal();\n if (shouldOpenZipCodeModal) {\n return false;\n }\n\n const { authorization, credentials, nextUrl, errors }: FSRResponse = await jsonApi('/field_service_requests/form', {\n method: this.formTarget.method,\n body: new FormData(this.formTarget),\n headers: this.getHeaders(),\n });\n\n if (errors) {\n this.formSubmissionErrorHandler(errors);\n return false;\n }\n\n if (authorization && credentials) {\n const webAuth0 = new auth0.WebAuth(authorization);\n credentials.password = this.passwordInputTarget.value;\n await new Promise((resolve, reject) => webAuth0.login(credentials, (e) => (e ? reject(e) : resolve(null))));\n } else if (nextUrl) {\n location.href = nextUrl;\n }\n\n return false;\n }\n\n // Requests service in a new area\n async onRequestServiceInArea(): Promise {\n const { nextUrl }: FSRResponse = await jsonApi('/field_service_requests/request_service_in_area', {\n method: 'POST',\n body: new FormData(this.formTarget),\n headers: this.getHeaders(),\n });\n\n if (nextUrl) {\n location.href = nextUrl;\n }\n }\n\n async shouldOpenRequestServiceInAreaModal(): Promise {\n if (this.data.get('requestServiceInArea') === 'true') {\n let zipcode = null;\n\n if (\n this.hasLocationUuidInputTarget &&\n this.locationUuidInputTarget instanceof HTMLSelectElement &&\n this.locationUuidInputTarget.value !== ''\n ) {\n zipcode = this.locationUuidInputTarget.selectedOptions[0].dataset.zipcode;\n } else if (this.placeDetailsInputTarget.value !== '') {\n const placeDetails: PlaceDetails = JSON.parse(this.placeDetailsInputTarget.value);\n const zipObject = placeDetails.address_components.find((component) => component.types.includes('postal_code'));\n zipcode = zipObject?.short_name;\n }\n\n if (zipcode) {\n const response = await fetch(`/field_service_requests/zipcodes/${zipcode}`);\n if (response.status !== 200) {\n document.getElementById('fsr-request-service-modal')?.dispatchEvent(new CustomEvent('open'));\n return true;\n }\n }\n }\n return false;\n }\n\n getHeaders(): Headers {\n const meta = document.querySelector('meta[name=csrf-token]');\n const token = meta && meta.getAttribute('content');\n const headers = new Headers();\n if (token !== null) headers.append('X-CSRF-Token', token);\n\n return headers;\n }\n\n formSubmissionErrorHandler(errors: Array): void {\n console.error('form submission error', errors);\n\n this.showAlert(true);\n\n const isCompanyNameError = errors?.find(\n (error: string) => error.toLowerCase().includes('company name') && error.toLowerCase().includes('already exists'),\n );\n\n let msg = `An unknown error occurred. Please contact equipment@odeko.com to resolve the issue.`;\n if (isCompanyNameError) {\n msg = `The company ${this.companyNameInputTarget.value} already exists. Please contact equipment@odeko.com if you would like to create an account to submit a request for this company.`;\n }\n\n const bodyEl = this.alertContainerTarget.querySelector('.body');\n if (bodyEl) {\n bodyEl.innerHTML = msg;\n }\n\n const offset = 100;\n this.alertContainerTarget.scrollIntoView(true);\n window.scrollBy(0, -offset); // Apply an additional offset above the div\n }\n}\n\ntype PlaceDetails = {\n address_components: Array;\n};\n\ntype AddressComponent = {\n types: Array;\n short_name: string;\n};\n\ntype FSRResponse = {\n authorization?: AuthOptions;\n credentials?: CrossOriginLoginOptions;\n errors?: Array;\n nextUrl?: string;\n};\n","import { Controller } from 'stimulus';\n\nexport default class GooglePlacesController extends Controller {\n static targets = [\n 'addressField',\n 'placeDetailsField',\n 'nameField',\n 'disableNameFieldUpdates',\n 'companyInputToggle',\n 'defaultCompanyInput',\n 'companyTextInput',\n 'companyTextInputField',\n ];\n declare addressFieldTarget: HTMLInputElement;\n declare autocomplete: google.maps.places.Autocomplete;\n declare disableNameFieldUpdatesTarget: HTMLInputElement;\n declare hasDisableNameFieldUpdatesTarget: boolean;\n declare hasNameFieldTarget: boolean;\n declare nameFieldTarget: HTMLElement;\n declare nameFieldTargets: HTMLInputElement[];\n declare placeDetailsFieldTarget: HTMLInputElement;\n declare companyInputToggleTarget: HTMLInputElement;\n declare defaultCompanyInputTarget: HTMLInputElement;\n declare companyTextInputTarget: HTMLInputElement;\n declare companyTextInputFieldTarget: HTMLInputElement;\n\n connect(): void {\n if (window.google) this.initPlaces();\n }\n\n initPlaces(): void {\n this.autocomplete = new window.google.maps.places.Autocomplete(this.addressFieldTarget, {\n types: ['address'],\n componentRestrictions: { country: 'us' },\n });\n this.autocomplete.setFields(['address_components', 'geometry', 'utc_offset_minutes', 'name', 'place_id']);\n this.autocomplete.addListener('place_changed', this.placeChanged.bind(this));\n }\n\n onFocus() {\n this.addressFieldTarget.select();\n }\n\n onInput() {\n this.placeDetailsFieldTarget.value = '';\n }\n\n /** @deprecated It is annoying to clear the content on re-focus. Select instead. */\n startTyping(): void {\n this.addressFieldTarget.value = '';\n this.placeDetailsFieldTarget.value = '';\n this.addressFieldTarget.dispatchEvent(new Event('mark-invalid'));\n this.placeDetailsFieldTarget.dispatchEvent(new Event('input'));\n }\n\n updateNameFields(): boolean {\n return (\n this.hasNameFieldTarget && (!this.hasDisableNameFieldUpdatesTarget || !this.disableNameFieldUpdatesTarget.checked)\n );\n }\n\n placeChanged(): void {\n const place = this.autocomplete.getPlace();\n if (this.updateNameFields()) {\n const placeName = this.getPlaceName(place);\n if (placeName) {\n this.nameFieldTargets.forEach((target) => (target.value = placeName));\n this.nameFieldTarget.dispatchEvent(new Event('input'));\n }\n }\n\n if (this.validPlace(place)) {\n this.placeDetailsFieldTarget.value = JSON.stringify(place);\n this.addressFieldTarget.dispatchEvent(new Event('mark-valid'));\n this.placeDetailsFieldTarget.dispatchEvent(new Event('input', { bubbles: true }));\n }\n }\n\n getPlaceName(place: google.maps.places.PlaceResult): string | undefined {\n if (place.name) {\n return place.name;\n } else {\n const streetNumber = place.address_components?.find((cmp) => cmp.types.includes('street_number'));\n const route = place.address_components?.find((cmp) => cmp.types.includes('route'));\n if (streetNumber && route) {\n return `${streetNumber.long_name} ${route.short_name}`;\n } else if (route) {\n return route.short_name;\n }\n // I don't think it makes a lot of sense to have a display name of just\n // your street number\n }\n }\n\n validPlace(place: google.maps.places.PlaceResult): boolean {\n const all_types_required = ['route', 'street_number', 'administrative_area_level_1', 'postal_code', 'country'];\n const one_type_required = ['administrative_area_level_2', 'locality', 'sublocality'];\n\n return (\n Boolean(place.geometry) &&\n all_types_required.every((type) => this.addressIncludesType(place, type)) &&\n one_type_required.some((type) => this.addressIncludesType(place, type))\n );\n }\n\n filterKey(event: KeyboardEvent): boolean {\n if (event.key === 'Enter') {\n event.preventDefault();\n return false;\n }\n\n return true;\n }\n\n addressIncludesType(place: google.maps.places.PlaceResult, type: string): boolean {\n return Boolean(place.address_components?.some((cmp) => cmp.types.includes(type)));\n }\n\n toggleCompanyInput() {\n if (this.companyInputToggleTarget.checked) {\n this.companyTextInputTarget.style.display = 'flex';\n this.defaultCompanyInputTarget.style.display = 'none';\n } else {\n this.companyTextInputTarget.style.display = 'none';\n this.companyTextInputFieldTarget.value = '';\n this.defaultCompanyInputTarget.style.display = 'flex';\n }\n }\n}\n","// Visit The Stimulus Handbook for more details\n// https://stimulusjs.org/handbook/introduction\n//\n// This example controller works with specially annotated HTML like:\n//\n// \n//
payment-methods#radioSelected\">\n ${newPaymentMethod.title} \n \" style=\"display: none; background-color: lightblue; padding: 5px; border-radius: 5px;\">Default \n \n `;\n\n this.existingPaymentMethodsTarget.insertAdjacentHTML('afterbegin', newRowHTML);\n this.selectACH();\n this.updateSubmit();\n\n if (this.hasPaymentMethodEmptyLabelTarget) {\n this.paymentMethodEmptyLabelTarget.classList.add('hidden');\n }\n }\n\n validateRadioSelection() {\n const radioInputs = document.getElementsByName('payment_method_id');\n return Array.from(radioInputs).some((radio) => radio.checked);\n }\n\n uncheckAllRadios() {\n const radioInputs = document.getElementsByName('payment_method_id');\n return Array.from(radioInputs).some((radio) => (radio.checked = false));\n }\n\n resetCardForm() {\n this.cardElement.clear();\n this.ccNameTarget.value = '';\n this.ccEmailTarget.value = '';\n this.validateAddCard();\n }\n\n validate(e) {\n e.stopPropagation();\n if (this.validateRadioSelection()) {\n return true;\n } else {\n e.preventDefault();\n return false;\n }\n }\n\n async initializeLink(e) {\n e.preventDefault();\n e.stopPropagation();\n const response = await fetch('/stripe_customer/link_tokens', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n if (response.ok) {\n const json = await response.json();\n window.Plaid.create({\n token: json.link_token,\n onSuccess: this.completeLink,\n // TODO: fill out behavior as needed\n onLoad: () => {},\n onExit: (_err, _metadata) => {},\n onEvent: (_eventName, _metadata) => {},\n }).open();\n }\n }\n\n completeLink = async (publicToken, metadata) => {\n const payload = {\n plaid_public_token: publicToken,\n plaid_account_id: metadata.account.id,\n };\n const response = await fetch('/stripe_customer/bank_accounts', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(payload),\n });\n if (response.ok) {\n const json = await response.json();\n const bankDescription = `${json.bank_name}, ending in ${json.last4}`;\n this.addNewPaymentMethod(json.bank_source_id, bankDescription);\n }\n };\n\n validatedCard = {\n data: false,\n name: false,\n email: false,\n };\n\n validateCardData = (e) => {\n this.validatedCard.data = e.complete;\n this.validateAddCard();\n };\n\n toUppercase(e) {\n e.target.value = e.target.value.toUpperCase();\n this.validateCardName(e);\n }\n\n validateCardName(e) {\n this.validatedCard.name = e.target.value.trim().length > 1;\n this.validateAddCard();\n }\n\n validateCardEmail(e) {\n const mailFormat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n this.validatedCard.email = e.target.value.match(mailFormat);\n this.validateAddCard();\n }\n\n addCardDisabled = ['bg-secondary-300', 'text-v2-secondary-text', 'cursor-not-allowed'];\n addCardEnabled = ['bg-v2-primary-bg', 'text-v2-secondary-bg'];\n\n validateAddCard() {\n if (Object.values(this.validatedCard).every((x) => x)) {\n this.addCardButtonTarget.classList.remove(...this.addCardDisabled);\n this.addCardButtonTarget.classList.add(...this.addCardEnabled);\n } else {\n this.addCardButtonTarget.classList.add(...this.addCardDisabled);\n this.addCardButtonTarget.classList.remove(...this.addCardEnabled);\n }\n }\n\n async addCard(e) {\n e.preventDefault();\n e.stopPropagation();\n const response = await fetch('/stripe_customer/setup_intents', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n if (response.ok) {\n const json = await response.json();\n const stripeResponse = await this.stripe.confirmCardSetup(json.clientSecret, {\n payment_method: {\n card: this.cardElement,\n billing_details: {\n name: this.ccNameTarget.value,\n email: this.ccEmailTarget.value,\n },\n },\n });\n if (stripeResponse && !stripeResponse.error) {\n // This is currently (2024-11-02) the only remaining source of requests\n // to `GET /stripe_customer/credit_cards`.\n const cardsResponse = await fetch('/stripe_customer/credit_cards');\n if (cardsResponse.ok) {\n const cardsJson = await cardsResponse.json();\n const card = cardsJson.saved_cards.find(\n (c) => c.payment_method_id === stripeResponse.setupIntent.payment_method,\n );\n\n const cardDescription = `${card.brand.toUpperCase()} ••••${card.last4} Expires: ${card.exp_month}/${\n card.exp_year\n }`;\n\n this.addNewPaymentMethod(card.payment_method_id, cardDescription);\n this.resetCardForm();\n }\n }\n }\n }\n}\n","import { Controller } from 'stimulus';\n\n/**\n * Create a dynamic progress bar for markup:\n * ```\n * progressbar#onState states->progressbar#onStates\">\n *
\n *
\n *
;\n visible?: boolean;\n};\n\ntype StateChangeEvent = Event & {\n detail: string;\n};\n\ntype StatesChangedEvent = Event & {\n detail: ProgressBarState[];\n};\n","import StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n initialize() {\n const rebrandBannerSeen = localStorage.getItem('rebrandBannerSeen');\n const bannerEl = document.getElementById('banner');\n if (rebrandBannerSeen && bannerEl) {\n bannerEl.classList.add('hidden');\n }\n }\n\n onClick(e) {\n e.preventDefault();\n const banner = document.getElementById('banner');\n if (banner) {\n banner.classList.add('hidden');\n }\n localStorage.setItem('rebrandBannerSeen', true);\n }\n}\n","import { Controller } from 'stimulus';\n\nexport default class SessionsController extends Controller {\n static readonly targets = ['email', 'emailCheckmark', 'input', 'password', 'passwordCheckmark', 'submit'];\n declare emailCheckmarkTarget: HTMLElement;\n declare emailTarget: HTMLInputElement;\n declare inputTarget: HTMLInputElement;\n declare passwordCheckmarkTarget: HTMLElement;\n declare passwordTarget: HTMLInputElement;\n declare submitTarget: HTMLButtonElement;\n\n connect(): void {\n /* clean up localStorage on behalf of client apps */\n /* clear rebrandBannerSeen after rebranding is done */\n const rebrandBannerSeen = localStorage.getItem('rebrandBannerSeen');\n localStorage.clear();\n if (rebrandBannerSeen) {\n localStorage.setItem('rebrandBannerSeen', String(true));\n }\n }\n\n validateEmail(): void {\n const mailFormat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n this.emailTarget.value.match(mailFormat) ? this.markValid('email') : this.markInvalid('email');\n }\n\n validatePassword(): void {\n this.passwordTarget.value.length >= 8 ? this.markValid('password') : this.markInvalid('password');\n }\n\n markValid(type: MarkTargets): void {\n this[`${type}Target` as StimulusTarget].classList.add('field-valid');\n this[`${type}CheckmarkTarget` as StimulusTarget].classList.remove('invisible');\n window.dispatchEvent(new Event('input'));\n }\n\n markInvalid(type: MarkTargets): void {\n this[`${type}Target` as StimulusTarget].classList.remove('field-valid');\n this[`${type}CheckmarkTarget` as StimulusTarget].classList.add('invisible');\n window.dispatchEvent(new Event('input'));\n }\n\n enableSubmit(): void {\n if (this.emailTarget.value !== '' && this.passwordTarget.value !== '') {\n this.validateEmail();\n this.validatePassword();\n this.submitTarget.disabled = false;\n }\n if (this.emailTarget.value === '' || this.passwordTarget.value === '') {\n this.submitTarget.disabled = true;\n }\n }\n}\n\ntype MarkTargets = 'email' | 'emailCheckmark' | 'input' | 'password' | 'passwordCheckmark' | 'submit';\ntype StimulusTarget = `${T}Target`;\n","import StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n connect() {\n if (!this.element.dataset.remote) {\n console.error('sform initialized without remote');\n return;\n }\n\n let input = document.createElement('input');\n input.type = 'hidden';\n input.name = 'sframe_action';\n input.value = 'true';\n this.element.appendChild(input);\n\n let action = this.element.dataset.action;\n if (typeof action !== 'string') {\n action = '';\n }\n\n this.element.dataset.action = action.concat(' ajax:success->sform#success ajax:error->sform#error');\n }\n\n success(event) {\n let [data] = event.detail;\n this.handle(data);\n }\n\n error(event) {\n let [data] = event.detail;\n this.handle(data);\n }\n\n // private\n\n handle(responseData) {\n if (typeof responseData.querySelectorAll === 'function') {\n responseData.querySelectorAll('template[data-controller^=sframe]').forEach(function (template) {\n document.body.appendChild(template);\n });\n } else {\n console.error(\"couldn't parse response\");\n }\n }\n}\n","import StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n connect() {\n let fnName = this.data.get('function');\n let fn = this[fnName];\n\n if (typeof fn === 'function') {\n fn.bind(this)();\n } else {\n console.error(`unknown sframe-action function: ${fnName}`);\n }\n }\n\n // private\n\n replace() {\n let objectIdentifier = this.data.get('object');\n let originalElements = document.querySelectorAll(objectIdentifier);\n\n originalElements.forEach(\n this.bound(function (originalElement) {\n originalElement.parentNode.replaceChild(this.newElement(), originalElement);\n }),\n );\n }\n\n // very private\n\n newElement() {\n return this.element.content.cloneNode(true);\n }\n}\n","import StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n connect() {\n let url = new URL(this.data.get('url'));\n let search = new URLSearchParams(url.search);\n search.append('sframe', 'true');\n url.search = search.toString();\n\n if (this.data.has('loaded')) {\n return;\n }\n\n void fetch(url.toString())\n .then(function (response) {\n return response.text();\n })\n .then(\n this.bound(function (html) {\n let fragment = document.createRange().createContextualFragment(html);\n\n this.element.appendChild(fragment);\n\n this.data.set('loaded', 'true');\n }),\n );\n }\n}\n","import { Controller } from 'stimulus';\n\nexport default class SignUpForSupplyFieldController extends Controller {\n static targets = ['input', 'modal'];\n declare inputTarget: HTMLInputElement;\n declare modalTarget: HTMLDivElement;\n\n onClick(event: InputEvent): void {\n if (event.target instanceof HTMLInputElement && !event.target.checked) {\n event.preventDefault();\n this.open();\n }\n }\n\n open(): void {\n this.modalTarget.style.display = 'flex';\n }\n\n close(event?: PointerEvent): void {\n event?.preventDefault();\n this.modalTarget.style.display = 'none';\n }\n\n confirm(event: PointerEvent): void {\n event.preventDefault();\n this.inputTarget.checked = false;\n this.inputTarget.dispatchEvent(new Event('change'));\n this.close();\n }\n}\n","import { Context } from '@stimulus/core';\nimport auth0, { AuthOptions, CrossOriginLoginOptions } from 'auth0-js';\nimport { Controller } from 'stimulus';\nimport analytics from '../analytics';\nimport { jsonApi } from '../utils/jsonApi';\nimport { ProgressBarState } from './progressbar_controller';\n\nexport default class SignupController extends Controller {\n static targets = [\n 'address',\n 'anonymousId',\n 'description',\n 'error',\n 'errorLabel',\n 'form',\n 'header',\n 'leadingContent',\n 'next',\n 'nextLabel',\n 'nextSpinner',\n 'pages',\n 'password',\n 'previous',\n 'progressbar',\n 'signin',\n ];\n declare addressTarget: HTMLInputElement;\n declare anonymousIdTarget: HTMLInputElement;\n declare errorTarget: HTMLElement;\n declare errorLabelTarget: HTMLElement;\n declare formTarget: HTMLFormElement;\n declare descriptionTarget: HTMLElement;\n declare headerTarget: HTMLElement;\n declare leadingContentTarget: HTMLElement;\n declare nextTarget: HTMLButtonElement;\n declare nextLabelTarget: HTMLElement;\n declare nextSpinnerTarget: HTMLElement;\n declare pagesTarget: HTMLElement;\n declare passwordTarget: HTMLInputElement;\n declare previousTarget: HTMLButtonElement;\n declare progressbarTarget: HTMLElement;\n declare signinTarget: HTMLElement;\n\n currentEl: HTMLElement | null = null;\n deliveryType?: AddressType;\n features: string[] = [];\n pageStack: string[] = [];\n signupResponse: SignupApi | null = null;\n wizardPages: WizardPage[] = [];\n trackedFields = ['first_name', 'last_name', 'email'];\n\n constructor(context: Context) {\n super(context);\n this.onBeforeUnload = this.onBeforeUnload.bind(this);\n }\n\n get currentPage() {\n return this.wizardPages.find((o) => o.name === this.pageStack[this.pageStack.length - 1]) ?? null;\n }\n\n get formData(): FormData {\n return new FormData(this.formTarget);\n }\n\n connect(): void {\n this.features = JSON.parse((this.element as HTMLElement).dataset['flags'] || '[]');\n analytics.page('Sign Up');\n\n // Default to legacy pages\n const oneButton = 'btn-lg btn-primary rounded-full w-full sm:w-auto mx-auto';\n this.wizardPages = [\n {\n description: 'Sign up below to get access to our extensive catalog and competitive pricing.',\n header: 'Ready to brew up magic together?',\n name: 'primaryInfo',\n next: this.nextPrimaryInfo,\n nextClass: oneButton,\n nextLabel: 'Shop the catalog',\n previousClass: 'hidden',\n progressbar: { name: 'primaryInfo', label: 'Primary Info', visible: false },\n },\n {\n header: 'Tell us about your shop',\n description: 'What type of business are you?',\n name: 'shopInfo',\n next: this.nextShopInfo,\n progressbar: { name: 'shopInfo', label: 'Shop Info', visible: true },\n },\n {\n description: 'What quantities do you usually order in?',\n header: 'Tell us about your shop',\n name: 'orderInfo',\n next: this.nextOrderInfo,\n progressbar: { name: 'orderInfo', label: 'Order Info', visible: true },\n },\n {\n header: 'Tell us about your shop',\n name: 'truckSize',\n next: this.signupAndLogin,\n progressbar: { name: 'truckSize', label: '', visible: true },\n },\n {\n header: 'Thank you for your interest in Odeko!',\n name: 'finishBrowse',\n next: this.login,\n nextClass: oneButton,\n nextLabel: 'Browse Catalog',\n previousClass: 'hidden',\n },\n {\n header: 'Thank you for your interest in Odeko!',\n name: 'finishContact',\n next: this.sendToHome,\n nextClass: oneButton,\n nextLabel: 'Back to Home',\n previousClass: 'hidden',\n },\n ];\n\n if (this.shouldExcludeTruckSizeQuestion) {\n const truckSizeIdx = this.wizardPages.findIndex((e) => e.name === 'truckSize');\n this.wizardPages.splice(truckSizeIdx, 1);\n }\n\n this.updateProgressbar('states', this.wizardPages.map((o) => o.progressbar).filter(Boolean));\n this.show('primaryInfo');\n this.element.classList.remove('hidden');\n this.addListeners();\n }\n\n addListeners(): void {\n window.addEventListener('beforeunload', this.onBeforeUnload);\n\n this.trackedFields.forEach((field) => {\n this.getFieldElement(field)?.addEventListener('blur', () => {\n if (this.hasInvalidTrackedFields()) return;\n this.track('Sign Up Started', this.trackedFields);\n });\n });\n }\n\n // Get the delivery type for the specified address\n async fetchDeliveryType(): Promise {\n if (this.deliveryType) return;\n\n const formData = new FormData();\n formData.append('address', this.addressTarget.value);\n const resp = await jsonApi('/api/address/check', {\n body: formData,\n method: 'POST',\n });\n this.deliveryType = resp.type;\n }\n\n get isDistributor(): boolean {\n return this.formData.get('account_type') === 'distributor';\n }\n\n get isEnterprise(): boolean {\n return this.formData.get('location_size') === '5+';\n }\n\n get isIndividualOrders(): boolean {\n return this.formData.get('ordering_size') === 'individual';\n }\n\n get shouldExcludeTruckSizeQuestion(): boolean {\n return this.features.includes('51153_remove_truck_size_question');\n }\n\n async login(): Promise {\n if (!this.signupResponse) return;\n\n const { authorization, credentials, nextUrl }: SignupApi = this.signupResponse;\n if (authorization && credentials) {\n // Login to Portal which should redirect automatically\n const webAuth0 = new auth0.WebAuth(authorization);\n credentials.password = this.passwordTarget.value;\n await new Promise((resolve, reject) => webAuth0.login(credentials, (e) => (e ? reject(e) : resolve(null))));\n } else if (nextUrl) {\n // User is likely to be sent to BU, but may be sent elsewhere\n location.href = nextUrl;\n } else {\n // An unexpected result? Assume they need to be contacted.\n this.nextTarget.classList.add('ml-auto');\n this.pageStack = [];\n this.show('finishContact');\n }\n }\n\n async nextOrderInfo(): Promise {\n if (this.shouldExcludeTruckSizeQuestion || this.isIndividualOrders) return await this.signupAndLogin();\n else {\n this.track('Proceed to Accommodate Freight', ['account_type', 'email', 'location_size', 'ordering_size']);\n this.show('truckSize');\n }\n }\n\n async nextPrimaryInfo(): Promise {\n await this.fetchDeliveryType();\n\n if (this.isEnterprise) {\n if (this.features.includes('45955_signup_enterprise_browse')) {\n await this.signupBrowse();\n } else {\n await this.signupContact();\n }\n } else if (this.deliveryType !== AddressType.LocalDelivery) {\n this.track('Proceed to Account Type', ['email', 'location_size']);\n this.show('shopInfo');\n } else {\n await this.signupAndLogin();\n }\n }\n\n async nextShopInfo(): Promise {\n if (this.isDistributor) {\n await this.signupContact();\n } else {\n this.track('Proceed to Ordering Size', ['account_type', 'email', 'location_size'], {\n service_type: 'shipping',\n });\n this.show('orderInfo');\n }\n }\n\n onAddress(): void {\n this.deliveryType = undefined;\n }\n\n onNext(e: Event): false {\n e.preventDefault();\n void this.onNextAsync();\n return false;\n }\n\n async onNextAsync(): Promise {\n if (!this.validate()) return;\n\n if (!this.anonymousIdTarget.value) this.anonymousIdTarget.value = analytics.getAnonymousId();\n\n try {\n this.nextTarget.disabled = true;\n this.previousTarget.disabled = true;\n this.nextSpinnerTarget.classList.toggle('hidden', false);\n await this.currentPage?.next?.call(this);\n } catch (e: unknown) {\n this.renderError(e as Error);\n this.pageStack = [];\n this.show('primaryInfo');\n } finally {\n this.nextSpinnerTarget.classList.toggle('hidden', true);\n this.previousTarget.disabled = false;\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n\n onPrevious(): void {\n if (this.pageStack.length > 1) this.show(this.pageStack.splice(this.pageStack.length - 2, 2)[0]);\n }\n\n renderButtons(): void {\n if (!this.currentPage) return;\n\n const {\n nextClass = 'btn-md btn-primary rounded-full',\n previousClass = 'btn-md btn-tertiary rounded-full',\n nextLabel = 'Next',\n previousLabel = 'Previous',\n } = this.currentPage;\n this.nextLabelTarget.innerText = nextLabel;\n this.nextTarget.className = nextClass;\n this.previousTarget.className = previousClass;\n this.previousTarget.innerText = previousLabel;\n }\n\n renderError(error: Error | null): void {\n this.errorTarget.classList.toggle('hidden', !error);\n if (error) {\n console.error(error);\n this.errorLabelTarget.innerText = error.message || 'An error occurred while signing up. Please try again later.';\n }\n }\n\n renderHeader(): void {\n if (!this.currentPage) return;\n\n const { description, header } = this.currentPage;\n this.headerTarget.classList.toggle('hidden', !header);\n this.descriptionTarget.classList.toggle('hidden', !description);\n this.headerTarget.innerText = header || '';\n this.descriptionTarget.innerText = description || '';\n }\n\n sendToHome(): void {\n location.href = '/';\n }\n\n show(name: string): void {\n this.pageStack.push(name);\n\n // Change the current page\n this.currentEl = null;\n for (const el of Array.from(this.pagesTarget.children) as HTMLElement[]) {\n const isSelectedPage = el.dataset['signupPage'] === name;\n if (isSelectedPage) this.currentEl = el;\n el.classList.toggle('hidden', !isSelectedPage);\n }\n\n // Update wizard controls\n const isPrimaryInfo = name === 'primaryInfo';\n this.renderButtons();\n this.renderHeader();\n this.leadingContentTarget.classList.toggle('hidden', !isPrimaryInfo);\n this.signinTarget.classList.toggle('hidden', !isPrimaryInfo);\n this.updateProgressbar('state', name);\n this.validate();\n }\n\n async signup(): Promise {\n // We really don't need to send the user editable field\n const formData = this.formData;\n formData.delete('address_input');\n\n this.renderError(null);\n this.track('Sign Up Pressed', ['email']);\n this.signupResponse = await jsonApi(this.formTarget.action, {\n method: this.formTarget.method,\n body: formData,\n });\n\n window.removeEventListener('beforeunload', this.onBeforeUnload);\n\n // Ugly hack to replay server events in frontend due to segment -> ga headaches server side\n for (const ping of this.signupResponse?.analytics || []) {\n analytics.track(ping.event, ping.properties, undefined, false);\n }\n }\n\n async signupBrowse() {\n await this.signup();\n this.nextTarget.classList.add('ml-auto');\n this.pageStack = [];\n this.show('finishBrowse');\n }\n\n async signupContact() {\n await this.signup();\n this.nextTarget.classList.add('ml-auto');\n this.pageStack = [];\n this.show('finishContact');\n }\n\n async signupAndLogin(): Promise {\n await this.signup();\n await this.login();\n }\n\n track(event: string, props: string[], data: Record = {}) {\n const formData = this.formData;\n analytics.track(event, {\n service_type: this.deliveryType || AddressType.Unknown,\n ...data,\n ...Object.fromEntries(props.map((key) => [key, formData.get(key) as string])),\n });\n }\n\n validate(): boolean {\n const target = this.currentEl || this.element;\n const required = Array.from(target.querySelectorAll('.field-required'));\n const isDisabled = !required.every((el) => {\n if (el.nodeName?.toLowerCase() === 'input' && el.getAttribute('type')?.toLowerCase() === 'radio') {\n const related: HTMLInputElement[] = Array.from(\n this.element.querySelectorAll(`input[type=\"radio\"][name=\"${el.getAttribute('name')}\"]`),\n );\n return related.some((el) => el.checked);\n } else {\n return el.classList.contains('field-valid');\n }\n });\n\n if (this.nextTarget) this.nextTarget.disabled = isDisabled;\n return !isDisabled;\n }\n\n updateProgressbar(prop: string, state: unknown) {\n this.progressbarTarget.setAttribute(`data-progressbar-${prop}`, JSON.stringify(state));\n this.progressbarTarget.dispatchEvent(new CustomEvent(prop, { detail: state }));\n }\n\n getFieldElement(fieldId: string): T | null {\n return this.formTarget.querySelector(`#${fieldId}`);\n }\n\n hasInvalidTrackedFields(): boolean {\n return this.trackedFields.some(\n (field) => !this.formData.get(field) || !this.getFieldElement(field)?.classList.contains('field-valid'),\n );\n }\n\n onBeforeUnload(event: BeforeUnloadEvent): void {\n // Fix for Chromium-based browsers, where clicking on mailto or tel links, triggers the beforeunload event,\n // but the actual tab stays open.\n if (event.target instanceof Document && event.target.activeElement instanceof HTMLAnchorElement) {\n const { href } = event.target.activeElement;\n if (href.startsWith('mailto:') || href.startsWith('tel:')) return;\n }\n\n if (this.hasInvalidTrackedFields()) return;\n this.track('Sign Up Abandoned', this.trackedFields);\n }\n}\n\nenum AddressType {\n LocalDelivery = 'local_delivery',\n Shipping = 'shipping',\n Unknown = 'unknown',\n}\n\ntype AddressCheckApi = {\n type: AddressType;\n};\n\ntype SignupApi = {\n analytics: SignupApiAnalytics[];\n authorization?: AuthOptions;\n credentials?: CrossOriginLoginOptions;\n nextUrl?: string;\n};\n\ntype SignupApiAnalytics = {\n anonymous_id?: string;\n event: string;\n user_id?: string;\n properties: Record;\n};\n\ntype WizardPage = {\n description?: string;\n header?: string;\n name: string;\n next?: () => void | Promise;\n nextClass?: string;\n nextLabel?: string;\n previousClass?: string;\n previousLabel?: string;\n progressbar?: ProgressBarState;\n};\n","import { Controller } from 'stimulus';\n\nexport default class SignupSelectFieldController extends Controller {\n static targets = ['checkmark', 'input', 'xmark'];\n declare checkmarkTarget: HTMLElement;\n declare inputTarget: HTMLInputElement;\n declare xmarkTarget: HTMLElement;\n\n validateSelect(): void {\n this.inputTarget.value ? this.markValid() : this.markInvalid();\n }\n\n markValid(): void {\n this.inputTarget.classList.add('field-valid');\n this.checkmarkTarget.classList.remove('invisible');\n this.xmarkTarget.classList.add('invisible');\n window.dispatchEvent(new Event('input'));\n }\n\n markInvalid(): void {\n this.inputTarget.classList.remove('field-valid');\n this.checkmarkTarget.classList.add('invisible');\n this.xmarkTarget.classList.remove('invisible');\n window.dispatchEvent(new Event('input'));\n }\n}\n","import { Controller } from 'stimulus';\n\nexport default class SignupTextFieldController extends Controller {\n static readonly targets = [\n 'checkmark',\n 'input',\n 'passwordLength',\n 'passwordLowercaseChars',\n 'passwordNumbers',\n 'passwordRequirements',\n 'passwordSpecialChars',\n 'passwordUppercaseChars',\n 'xmark',\n ];\n declare checkmarkTarget: HTMLElement;\n declare inputTarget: HTMLInputElement;\n declare passwordLengthTarget: HTMLElement;\n declare passwordLowercaseCharsTarget: HTMLElement;\n declare passwordNumbersTarget: HTMLElement;\n declare passwordRequirementsTarget: HTMLElement;\n declare passwordSpecialCharsTarget: HTMLElement;\n declare passwordUppercaseCharsTarget: HTMLElement;\n declare xmarkTarget: HTMLElement;\n\n validateSelect(): void {\n this.inputTarget.value ? this.markValid() : this.markInvalid();\n }\n\n validateText(): void {\n this.inputTarget.value.length > 0 ? this.markValid() : this.markInvalid();\n }\n\n validateEmail(): void {\n const mailFormat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n this.inputTarget.value.match(mailFormat) ? this.markValid() : this.markInvalid();\n }\n\n validatePassword(): void {\n /* OWASP Special Characters: https://www.owasp.org/index.php/Password_special_characters */\n const specialChars = [\n ' ',\n '!',\n '\"',\n '#',\n '\\\\$',\n '%',\n '&',\n \"'\",\n '\\\\(',\n '\\\\)',\n '\\\\*',\n '\\\\+',\n ',',\n '-',\n '\\\\.',\n '/',\n ':',\n ';',\n '<',\n '=',\n '>',\n '\\\\?',\n '@',\n '\\\\[',\n '\\\\\\\\',\n '\\\\]',\n '\\\\^',\n '_',\n '`',\n '{',\n '\\\\|',\n '}',\n '~',\n ].join('|');\n const targetFormats: [HTMLElement, RegExp][] = [\n [this.passwordLengthTarget, /(?=.{8,})/], // At least 8 characters in length\n [this.passwordLowercaseCharsTarget, /(?=.*[a-z])/], // Contain at least one number\n [this.passwordUppercaseCharsTarget, /(?=.*[A-Z])/], // Contain at least one lowercase letter\n [this.passwordNumbersTarget, /(?=.*\\d)/], // Contain at least one uppercase letter\n [this.passwordSpecialCharsTarget, new RegExp(specialChars)], // Contain at least one symbol\n ];\n\n let isPasswordValid = true;\n targetFormats.forEach(([target, format]) => {\n const html = target.innerHTML;\n if (this.inputTarget.value.match(format)) {\n target.innerHTML = '✓' + html.slice(1, html.length);\n target.classList.add('text-green-darkest');\n target.classList.remove('text-red-dark');\n } else {\n target.innerHTML = '✗' + html.slice(1, html.length);\n target.classList.remove('text-green-darkest');\n target.classList.add('text-red-dark');\n isPasswordValid = false;\n }\n });\n\n if (isPasswordValid) {\n this.markValid();\n this.passwordRequirementsTarget.classList.add('hidden');\n } else {\n this.markInvalid();\n this.passwordRequirementsTarget.classList.remove('hidden');\n }\n }\n\n validatePhone(): void {\n // NOTE: Currently only supporting U.S. phone numbers\n const phoneFormat = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/;\n this.inputTarget.value.match(phoneFormat) ? this.markValid() : this.markInvalid();\n }\n\n keyupPhone(event: KeyboardEvent): void {\n let val = this.inputTarget.value.trim();\n if (event.key === 'Backspace') {\n // remove any trailing dash\n val = val.replace(/-$/, '');\n } else {\n val = this.formatPhone(val);\n }\n this.inputTarget.value = val;\n this.validatePhone();\n }\n\n pastePhone(event: ClipboardEvent): void {\n const clipboardData = event.clipboardData || (window as IEClipboardHack).clipboardData;\n if (clipboardData) {\n event.preventDefault();\n const value = this.inputTarget.value;\n const text = clipboardData.getData('text');\n this.inputTarget.value = this.formatPhone(value + text);\n this.validatePhone();\n }\n }\n\n formatPhone(value: string): string {\n // remove non-digits, limit length\n let val = value.replace(/\\D+/g, '').slice(0, 10);\n // insert dashes where appropriate\n if (val.length >= 3 && val.length < 6) {\n val = val.slice(0, 3) + '-' + val.slice(3);\n } else if (val.length >= 6) {\n val = val.slice(0, 3) + '-' + val.slice(3, 6) + '-' + val.slice(6);\n }\n return val;\n }\n\n markValid(): void {\n this.inputTarget.classList.add('field-valid');\n this.checkmarkTarget.classList.remove('invisible');\n this.xmarkTarget.classList.add('invisible');\n window.dispatchEvent(new Event('input'));\n }\n\n markInvalid(): void {\n this.inputTarget.classList.remove('field-valid');\n this.checkmarkTarget.classList.add('invisible');\n this.xmarkTarget.classList.remove('invisible');\n window.dispatchEvent(new Event('input'));\n }\n}\n\ntype IEClipboardHack = Window &\n typeof globalThis & {\n clipboardData: DataTransfer;\n };\n","import StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n static targets = ['role', 'checkbox', 'container', 'iconMinus', 'iconPlus'];\n\n initialize() {\n this.setRoleColors();\n }\n\n toggle() {\n if (this.checkboxTarget.checked) {\n this.containerTarget.classList.remove('bg-green-dark');\n this.containerTarget.classList.add('bg-gray-200');\n } else {\n this.containerTarget.classList.remove('bg-gray-200');\n this.containerTarget.classList.add('bg-green-dark');\n }\n this.toggleIcon();\n }\n\n toggleIcon() {\n this.iconMinusTarget.classList.toggle('hidden');\n this.iconPlusTarget.classList.toggle('hidden');\n }\n\n setRoleColors() {\n this.roleTargets.forEach((tag) => {\n let userRole = tag.innerText;\n switch (userRole) {\n case 'BARISTA':\n tag.classList.add('text-blue-source');\n break;\n case 'MANAGER':\n tag.classList.add('text-black');\n break;\n case 'OWNER':\n tag.classList.add('text-altgray-a3');\n break;\n }\n });\n }\n}\n","import StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n static targets = ['input', 'checkmark'];\n\n connect() {\n this.inputTarget.addEventListener('mark-invalid', (e) => this.markInvalid(e));\n this.inputTarget.addEventListener('mark-valid', (e) => this.markValid(e));\n }\n\n validateText(e) {\n this.inputTarget.value.length > 0 ? this.markValid(e) : this.markInvalid(e);\n }\n\n validateEmail(e) {\n const mailFormat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n this.inputTarget.value.match(mailFormat) ? this.markValid(e) : this.markInvalid(e);\n }\n\n validatePassword(e) {\n this.inputTarget.value.length >= 8 ? this.markValid(e) : this.markInvalid(e);\n }\n\n validateRadioGroup(e) {\n let radioName = this.data.get('radio');\n this.inputTarget.querySelector(`input[type=radio][name=\"${radioName}\"]:checked`)\n ? this.markValid(e)\n : this.markInvalid(e);\n }\n\n markValid(e) {\n this.inputTarget.classList.add('valid-for-submit');\n if (this.hasCheckmarkTarget) {\n this.checkmarkTarget.classList.remove('invisible');\n }\n if (e.type !== 'revalidate') {\n this.inputTarget.dispatchEvent(new Event('validate-form', { bubbles: true, cancelable: true }));\n }\n }\n\n markInvalid(e) {\n this.inputTarget.classList.remove('valid-for-submit');\n if (this.hasCheckmarkTarget) {\n this.checkmarkTarget.classList.add('invisible');\n }\n if (e.type !== 'revalidate') {\n this.inputTarget.dispatchEvent(new Event('validate-form', { bubbles: true, cancelable: true }));\n }\n }\n\n select() {\n this.inputTarget.select();\n }\n}\n","/*\nMini validation framework for Odeko forms\n\nHow to use\n==========\n\nThis controller works in tandem with \"validate_field_controller.js\".\n\n1. On the container / form holding your input elements, attach this\ncontroller like so:\n\nvalidate-form#submitReady\"\n data-target=\"validate-form.container\" >\n
\n\n2. Add the submit input / button as a target to this controller as well.\n\nvalidate-form#submitReady\"\n data-target=\"validate-form.container\" >\n\n Submit \n
\n\n3. On any input element, attach it to its own instance of the\n \"validate-field\" controller, and add the \"required-for-submit\" class, like so:\n\nvalidate-form#submitReady\"\n data-target=\"validate-form.container\" >\n\n Submit \n
\n\nValidate Field\n==============\n\nThe validate-field controller contains a few built in validators you\ncan fire on input:\n- validateText\n- validateEmail\n- validatePassword\n\nAlternatively, if the validation depends on complex interactions\nencapsulated elsewhere, you can just send the input element\n\"mark-valid\" or \"mark-invalid\" events. An event listener is\nautomatically added for these events; you don't need to add any\ndata-actions. See google_places_controller for an example of this.\n\nThe validate-field also exposes an optional select action for\nconvenience. Just add a data action:\n focus->validate-field#select\n\nDisplaying Our Checkmarks\n=========================\n\nThere is also an optional validate-field target for checkmarks, to be\ncontrolled using the \"invisible\" class. The checkmark div needs to\nimmediately follow the input element, and both need to be wrapped in a\npositioned div (with \"relative\" for instance). This div should attach\nto validate-field, instead of the input element.\n\nvalidate-form#submitReady\"\n data-target=\"validate-form.container\" >\n\n
\n
validate-field#validateText\" >\n
\n\n
Submit \n
\n\nRadio Groups\n============\n\nFor a radio group, to add a validation that one of them has been\nchecked, you can wrap the radio inputs in a div with a new instance of\nthe validate-field controller, and add an action to each radio button\ncontained in the div. You also need to specify the name of the radio\ngroup in the div, and add the \"required-for-submit\" class to the div.\n\n
\n
\n\nValidation Flow for Editing Existing Resource\n=============================================\n\nWhenever a validation is fired on an input element as a result of the\nspecified event (like \"input\" or \"change\"), it also sends a\n\"validate-form\" bubbling event to itself. The top-level containing\nform / div listens for that event (or it should be if everything is\nwired together as specified). Before checking if all of its\n\"required-for-submit\" child elements are valid, it first sends a\n\"revalidate\" event to each of them. This way, when editing an existing\nresource, the form can display the existing values but start off as\nunvalidated (the submit is disabled, none of the fields show they are\nvalidated). When the user inputs a change, the whole form gets\nrevalidated, with any existing values.\n\nTo set this up, an action needs to be added to each input element that\nshould participate in the form revalidation (generally with the same\nvalidator as normal).\n\n
validate-form#submitReady\"\n data-target=\"validate-form.container\" >\n\n Submit \n
\n\n*/\nimport StimulusController from 'stimulus_controller';\n\nexport default class extends StimulusController {\n static targets = ['container', 'submitButton'];\n\n buttonActive() {\n this.submitButtonTarget.classList.remove('cursor-not-allowed');\n this.submitButtonTarget.classList.remove('bg-altgray-f5');\n this.submitButtonTarget.classList.remove('text-altgray-a3');\n this.submitButtonTarget.classList.remove('border-altgray-eb');\n this.submitButtonTarget.classList.add('border-goldenrod');\n this.submitButtonTarget.classList.add('bg-goldenrod');\n this.submitButtonTarget.classList.add('text-white');\n this.submitButtonTarget.classList.add('cursor-pointer');\n this.submitButtonTarget.disabled = false;\n }\n\n buttonInactive() {\n this.submitButtonTarget.classList.add('cursor-not-allowed');\n this.submitButtonTarget.classList.add('bg-altgray-f5');\n this.submitButtonTarget.classList.add('text-altgray-a3');\n this.submitButtonTarget.classList.add('border-altgray-eb');\n this.submitButtonTarget.classList.remove('border-goldenrod');\n this.submitButtonTarget.classList.remove('cursor-pointer');\n this.submitButtonTarget.classList.remove('bg-goldenrod');\n this.submitButtonTarget.classList.remove('text-white');\n this.submitButtonTarget.disabled = true;\n }\n\n submitReady(event) {\n event.stopPropagation();\n const elements = Array.from(this.containerTarget.querySelectorAll('.required-for-submit'));\n elements.forEach((el) => el.dispatchEvent(new Event('revalidate')));\n if (elements.every((el) => el.classList.contains('valid-for-submit'))) {\n this.buttonActive();\n } else {\n this.buttonInactive();\n }\n }\n}\n","export function observeScroll(target: Element, fn: () => void | Promise
): Promise {\n return new Promise((resolve) => {\n let timer: number;\n let { scrollLeft, scrollTop } = target;\n const listener = () => {\n if (scrollLeft !== target.scrollLeft || scrollTop !== target.scrollTop) {\n scrollLeft = target.scrollLeft;\n scrollTop = target.scrollTop;\n clearTimeout(timer);\n timer = window.setTimeout(listener, 50);\n } else {\n target.removeEventListener('scroll', listener);\n resolve();\n }\n };\n\n timer = window.setTimeout(listener, 50);\n target.addEventListener('scroll', listener, { passive: true });\n void fn();\n });\n}\n\nexport async function scrollBy(target: Element, options: ScrollToOptions): Promise {\n if (!options.left && !options.top) return;\n await observeScroll(target, () => target.scrollBy(options));\n}\n","import { Controller } from 'stimulus';\nimport { scrollBy } from '../utils/dom';\n\nexport default class CarouselController extends Controller {\n static targets = ['items', 'leftButton', 'rightButton'];\n declare itemsTarget: HTMLElement;\n declare leftButtonTarget: HTMLElement;\n declare rightButtonTarget: HTMLElement;\n disabled?: boolean;\n hovering: boolean = true;\n\n connect() {\n this.element.addEventListener('mouseenter', this.onMouse.bind(this));\n this.element.addEventListener('mouseleave', this.onMouse.bind(this));\n if (window.ResizeObserver) {\n const observer = new ResizeObserver(this.render.bind(this));\n observer.observe(document.body);\n } else {\n document.body.addEventListener('resize', this.render.bind(this), { passive: true });\n }\n\n this.render();\n }\n\n get leftButtonOpacity(): string {\n if (this.itemsTarget.scrollLeft <= 1) return '0';\n return this.hovering ? '1' : '0.25';\n }\n\n get rightButtonOpacity(): string {\n const { clientWidth, scrollWidth, scrollLeft } = this.itemsTarget;\n if (scrollLeft + clientWidth + 1 >= scrollWidth) return '0';\n return this.hovering ? '1' : '0.25';\n }\n\n onMouse(e: Event): void {\n this.hovering = e.type === 'mouseenter';\n this.render();\n }\n\n render() {\n this.disabled = document.body.clientWidth < 768;\n this.itemsTarget.style.overflowX = this.disabled ? 'scroll' : 'hidden';\n this.leftButtonTarget.classList.toggle('hidden', this.disabled);\n this.rightButtonTarget.classList.toggle('hidden', this.disabled);\n\n if (!this.disabled) {\n this.leftButtonTarget.style.opacity = this.leftButtonOpacity;\n this.rightButtonTarget.style.opacity = this.rightButtonOpacity;\n this.leftButtonTarget.classList.toggle('pointer-events-none', this.leftButtonTarget.style.opacity === '0');\n this.rightButtonTarget.classList.toggle('pointer-events-none', this.rightButtonTarget.style.opacity === '0');\n }\n }\n\n async scroll(amount: number): Promise {\n await scrollBy(this.itemsTarget, {\n left: this.scrollSize * amount,\n behavior: 'smooth',\n });\n this.render();\n }\n\n async scrollLeft(): Promise {\n await this.scroll(-1);\n }\n\n async scrollRight() {\n await this.scroll(1);\n }\n\n get scrollSize(): number {\n const itemWidth: number = this.itemsTarget.children[0].clientWidth;\n return Math.max(1, Math.floor(document.body.clientWidth / itemWidth)) * itemWidth;\n }\n}\n","const prefix = 'BP';\n\nfunction getDeviceType(): DeviceType {\n const ua = navigator.userAgent;\n if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {\n return 'Tablet';\n }\n if (/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {\n return 'Mobile';\n }\n return 'Desktop';\n}\n\nexport default {\n track(eventName: string, properties: AnalyticProperties = {}, callback?: () => void, addPrefix = true): void {\n if (!window.analytics) return;\n\n if (addPrefix) eventName = `${prefix} - ${eventName}`;\n\n window.analytics.track(\n eventName,\n Object.assign({}, properties, {\n device: getDeviceType(),\n screen_width: window.innerWidth,\n screen_height: window.innerHeight,\n }),\n // disabled due to segment not firing this event unless the\n // library is laoded, adblockers block this\n // callback,\n );\n },\n\n page(pageName: string, properties: AnalyticProperties = {}): void {\n if (!window.analytics) return;\n\n window.analytics.page(\n `${prefix} - ${pageName}`,\n Object.assign({}, properties, {\n device: getDeviceType(),\n screen_width: window.innerWidth,\n screen_height: window.innerHeight,\n }),\n );\n },\n\n identify(uuid: string, props: AnalyticTraits): void {\n if (!window.analytics) return;\n\n window.analytics.identify(uuid, props);\n\n if (props.company_id !== null && props.roles.indexOf('admin') === -1) {\n window.analytics.group(props.company_id, {\n //mixpanel needs it as a trait and not the groupId\n company_id: props.company_id,\n });\n }\n },\n\n getAnonymousId(): string {\n if (!window.analytics || typeof window.analytics.user !== 'function') return '';\n\n return window.analytics.user().anonymousId();\n },\n};\n\ntype AnalyticProperties = Record;\ninterface AnalyticTraits {\n company_id: null | string;\n roles: string[];\n}\ntype DeviceType = 'Mobile' | 'Desktop' | 'Tablet';\n","/**\n * A fetch wrapper for rails forms\n */\nexport async function jsonApi(url: string, { credentials = 'same-origin', ...opts }: RequestInit): Promise {\n const request = await fetch(url, { credentials, ...opts });\n const contentType = request.headers.get('content-type')?.split(';')[0].split('/').pop()?.toLowerCase();\n if (request.ok && contentType === 'json') return await request.json();\n\n let error: string = '';\n switch (contentType) {\n case 'javascript': {\n eval(await request.text());\n const flashEl: HTMLElement | null = document.querySelector('#flash[data-message], #flash [data-message]');\n if (flashEl) error = flashEl.innerText.trim();\n break;\n }\n\n case 'json': {\n const resp: ErrorResponse = await request.json();\n error = resp.error;\n break;\n }\n }\n\n throw new Error(error || 'An error occurred, please try again later.');\n}\n\ntype ErrorResponse = {\n error: string;\n};\n","// Load all the controllers within this directory and all subdirectories.\n// Controller files must be named *_controller.js.\nimport { Application } from 'stimulus';\nimport { definitionsFromContext } from 'stimulus/webpack-helpers';\n\nconst application = Application.start();\nconst context = require.context('controllers', true, /_controller\\.(js|ts)$/);\napplication.load(definitionsFromContext(context));\n"],"sourceRoot":""}