\n )\n }\n\n\n\n});\n\nexport default memo(ScriptInnerHtml);","import React from \"react\";\nimport { FormConfirmationType } from \"../../interfaces\";\nimport ScriptInnerHtml from \"./ScriptInnerHtml\";\n\ntype Props = {\n confirmation: FormConfirmationType;\n};\n\nconst WaitList = ({ confirmation } : Props) => {\n return (\n
\n {confirmation && confirmation.confirmation && (\n
\n \n
\n )}\n
\n )\n};\n\nexport default WaitList;\n","import React from \"react\";\nimport { FormConfirmationType } from \"../../interfaces\";\nimport ScriptInnerHtml from \"./ScriptInnerHtml\";\n\ntype Props = {\n confirmation: FormConfirmationType;\n};\n\nconst AppointmentScheduler = ({ confirmation } : Props) => {\n\n return (\n
\n {confirmation && confirmation.confirmation && (\n
\n \n
\n )}\n
\n )\n};\n\nexport default AppointmentScheduler;\n","import SelectAppointmentType from './steps/SelectAppointmentType';\nimport SelectAssociate from './steps/SelectAssociate';\nimport SelectDateAndTime from './steps/SelectDateAndTime';\nimport CustomForm from './steps/CustomForm';\nimport PaymentDetails from './steps/PaymentDetails';\nimport Confirmation from './steps/Confirmation';\nimport { FormStep, Error } from '../interfaces';\nimport { ComponentType } from 'react';\nimport SummaryDetails from \"./steps/SummaryDetails\";\n\nconst components: { [name: string]: ComponentType
} = {\n selectAppointmentType: SelectAppointmentType,\n selectAssociate: SelectAssociate,\n selectDateAndTime: SelectDateAndTime,\n defaultForm: CustomForm,\n customForm: CustomForm,\n paymentDetails: PaymentDetails,\n summaryDetails: SummaryDetails,\n confirmation: Confirmation\n};\n\nexport type DynamicStepProps = {\n loading?: boolean;\n error?: Error | undefined;\n setError?: (error: any) => void;\n step: FormStep;\n}\n\nconst DynamicStep = (props: DynamicStepProps) => {\n const Placeholder = () => {\n return Missing step component: {props.step.type}
;\n };\n\n const Component = components[props.step.type] || Placeholder;\n\n //@ts-ignore\n return ;\n};\n\nexport default DynamicStep;\n","import React from 'react';\nimport { FormStep } from '../../interfaces';\nimport WaitList from '../Confirmation/WaitList';\nimport AppointmentScheduler from '../Confirmation/AppointmentScheduler';\n\n\ntype DynamicStepProps = {\n step: FormStep;\n error: Error;\n};\n\nconst Confirmation = ({ step }: DynamicStepProps) => {\n const confirmation = step.successPayload;\n const typeToComponentMap: { [key: string]: any } = {\n AS: AppointmentScheduler,\n AR: AppointmentScheduler,\n W: WaitList\n };\n\n const Component = typeToComponentMap[confirmation.type];\n\n if (!confirmation || !Component) {\n return null;\n }\n\n return ;\n};\n\nexport default Confirmation;\n","export const scrollToTop = () => {\n const root: HTMLDivElement | null = document.querySelector('#root');\n\n try {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } catch (e) {\n console.log('window scroll to top failed.');\n root?.scrollTo(0, 0);\n }\n\n window.parent.postMessage({\n type: 'bridallive.scroll-to-top',\n value: JSON.stringify({ top: 0, left: 0, behavior: 'smooth', scrollIntoView: !!(root?.scrollIntoView) })\n }, '*');\n};\n","\nconst FIELD_TYPES = {\n DATE: 'date',\n DATE_TIME: 'datetime',\n TEXT: 'text',\n TEXTAREA: 'textarea',\n NUMBER: 'number',\n BOOLEAN: 'boolean',\n PHONE: 'phone',\n CURRENCY: 'currency',\n EMAIL: 'email',\n CHECK_BOX: 'checkbox',\n SELECT: 'select',\n RADIO: 'radio'\n};\n\nconst helper = {\n TYPES: {\n [FIELD_TYPES.TEXT]: 'stringValue',\n [FIELD_TYPES.PHONE]: 'stringValue',\n [FIELD_TYPES.EMAIL]: 'stringValue',\n [FIELD_TYPES.CURRENCY]: 'stringValue',\n [FIELD_TYPES.NUMBER]: 'numberValue',\n [FIELD_TYPES.BOOLEAN]: 'booleanValue',\n [FIELD_TYPES.TEXTAREA]: 'textValue',\n [FIELD_TYPES.DATE]: 'dateValue',\n [FIELD_TYPES.DATE_TIME]: 'dateTimeValue',\n [FIELD_TYPES.SELECT]: 'stringValue',\n [FIELD_TYPES.CHECK_BOX]: 'stringValue',\n [FIELD_TYPES.RADIO]: 'stringValue',\n },\n SECOND_TYPE: {\n [FIELD_TYPES.PHONE]: 'numberValue'\n },\n getValueType: function(type: string) {\n switch(type) {\n case 'stringValue':\n return 'string';\n case 'textValue':\n return 'text';\n case 'booleanValue':\n return 'boolean';\n case 'dateValue':\n return 'date';\n case 'dateTimeValue':\n return 'datetime';\n case 'numberValue':\n return 'number';\n default:\n return '';\n }\n }\n\n\n\n\n};\n\nexport default helper;\n","const helper = {\n parseCurrencyToNumber: function(currency: string, locale: any) {\n const { thousandsSeparator } = locale;\n const decimalSeparator = thousandsSeparator === '.' ? ',' : '.';\n const regex = /\\D*(\\d+|\\d.*?\\d)(?:\\D+(\\d{2}))?\\D*$/;\n const parts = regex.exec(currency);\n if(parts && parts.length && parts.length > 1) {\n const [, start, end] = parts;\n return `${start.replace(/\\D/,'')}${decimalSeparator}${end ? end : '00'}`;\n }\n\n return '0';\n }\n};\n\nexport default helper;\n","import { FormTypes } from \"./constants\";\nimport { AppointmentType, WaitListTimeSlot } from \"../interfaces\";\nimport dayjs from \"dayjs\";\nimport CustomFieldHelper from \"./custom-field-helper\";\nimport CurrencyHelper from \"./currency-helper\";\nimport UrlHelper from \"./url-helper\";\nimport _ from \"lodash\";\n\nconst helper = {\n /**\n * Returns request payload for form type\n *\n * @param formType\n * @param userData\n * @param settings\n * @param timeZoneId\n */\n buildFormPayload(formType: string, userData: any, settings: any, timeZoneId: string): any {\n if(FormTypes.scheduler === formType) {\n return helper.createSchedulerPayload(userData, settings, timeZoneId);\n } else if (FormTypes.request) {\n return helper.createRequestPayload(userData, settings, timeZoneId);\n }\n\n throw new Error('Invalid form type.');\n },\n createSchedulerPayload(data: any, settings: any, timeZoneId: string): any {\n const type = settings.appointmentTypes.find((a: AppointmentType) => a.id === data.appointmentType) as AppointmentType;\n\n let payload = {\n budgetStr: null,\n numberOfPeople: null,\n budgetRangeId: null,\n appointmentAmount: type?.itemAmount,\n employeeId: data.associate,\n appointmentTypeId: data.appointmentType,\n duration: data.dateAndTime.duration,\n fittingRoomId: data.dateAndTime.fittingRoomId,\n selectedDate: data.dateAndTime.date ? dayjs(data.dateAndTime.date.toDate()).format() : null,\n selectedDateFormatted: data.dateAndTime.date ? data.dateAndTime.date.format('YYYY-MM-DD') : null,\n startDateTimeStr: data.dateAndTime.startTime ? `${data.dateAndTime.startTime}`: null,\n endDateTimeStr: data.dateAndTime.startTime ? `${dayjs(data.dateAndTime.startTime).add(data.dateAndTime.duration, 'ms').valueOf()}`: null,\n firstName: data.requiredFields.firstName,\n lastName: data.requiredFields.lastName,\n email: data.requiredFields.email,\n eventDateStr: data.requiredFields.eventDateStr ? dayjs(data.requiredFields.eventDateStr).format() : null,\n eventDate: data.requiredFields.eventDateStr ? dayjs(data.requiredFields.eventDateStr) : null,\n phone: data.requiredFields.phone && data.requiredFields.phone.value,\n phoneType: data.requiredFields.phone && data.requiredFields.phone.type,\n paymentProfileToken: data.paymentDetails?.paymentProfileToken,\n paymentProfileTokenProvider: data.paymentDetails?.paymentProfileTokenProvider,\n paymentProfileMaskedAcctNumber: data.paymentDetails?.paymentProfileMaskedAcctNumber,\n paymentProfileExpiration: data.paymentDetails?.paymentProfileExpiration,\n paymentProfileCardType: data.paymentDetails?.paymentProfileCardType,\n paymentProfileBillingName: data.paymentDetails?.paymentProfileBillingName,\n paymentProfileAddedBy: data.paymentDetails?.paymentProfileAddedBy,\n signatureImageData: data?.signatureData,\n customFieldValues: helper.extractAndBuildCustomFields(data.additionalDetails, settings, data.appointmentType),\n allDay: false,\n mode: 'S',\n dateTimes: [],\n paramMap: settings.paramMap,\n confirmationText: settings.confirmationText,\n confirmationTextWaitList: settings.confirmationTextWaitList,\n appointmentPaymentSettings: settings.appointmentPaymentSettings,\n addressOne: data.requiredFields?.addressOne,\n addressTwo: data.requiredFields?.addressTwo,\n city: data.requiredFields?.city,\n state: data.requiredFields?.state,\n zip: data.requiredFields?.zip,\n howHeardId: data.requiredFields?.howHeardId,\n emailOptIn: data.requiredFields?.emailOptIn,\n smsOptIn: data.requiredFields?.smsOptIn,\n streetSize: data.requiredFields?.streetSize,\n notes: data.requiredFields?.notes,\n country: data.requiredFields?.country,\n contactId: null,\n timeZoneId: timeZoneId,\n fields: helper.getRequiredFormFields(settings),\n schedulerVersion: UrlHelper.getParam('version'),\n recaptchaToken: data?.captchaToken\n };\n\n if(data.requiredFields.eventDate !== undefined) {\n payload.eventDateStr = dayjs(data.requiredFields.eventDate).format('YYYY-MM-DD');\n payload.eventDate = dayjs(data.requiredFields.eventDate);\n }\n\n if(data.requiredFields.budgetStr) {\n // @ts-ignore\n payload.budgetStr = CurrencyHelper.parseCurrencyToNumber(data.requiredFields.budgetStr, settings.locale);\n }\n\n if(data.requiredFields.numberOfPeople) {\n // @ts-ignore\n payload.numberOfPeople = data.requiredFields.numberOfPeople;\n }\n\n if(data.requiredFields.budgetRangeId) {\n // @ts-ignore\n payload.budgetRangeId = +data.requiredFields.budgetRangeId;\n }\n\n if(settings && settings.contact && settings.contact.id) {\n payload.contactId = settings.contact.id\n }\n\n if(data.dateAndTime && data.dateAndTime.waitList && data.dateAndTime.waitList.bookWithWaitList) {\n const dateTimes = data.dateAndTime.waitList?.timeSlots.map((slot: WaitListTimeSlot) => {\n return {\n startDateTimeStr: slot.startTime.replace(/\\s/g, ''),\n endDateTimeStr: slot.endTime.replace(/\\s/g, '')\n }\n });\n\n payload.mode = 'W';\n payload.allDay = data.dateAndTime.waitList.isAllDay;\n payload.dateTimes = dateTimes;\n payload.selectedDate = data.dateAndTime.date ? dayjs(data.dateAndTime.date).format('MM/DD/YYYY') : null;\n payload.duration = type?.duration;\n }\n\n return payload as any;\n },\n\n createRequestPayload(data: any, settings: any, timeZoneId: string): any {\n const type = settings.appointmentTypes.find((a: AppointmentType) => a.id === data.appointmentType) as AppointmentType;\n\n let payload = {\n budgetStr: '0',\n numberOfPeople: '0',\n budgetRangeId: null,\n appointmentAmount: type?.itemAmount,\n employeeId: data.associate,\n appointmentTypeId: data.appointmentType,\n duration: data.dateAndTime.duration,\n fittingRoomId: data.dateAndTime.fittingRoomId || 0,\n selectedDate: data.dateAndTime.date ? dayjs(data.dateAndTime.date.toDate()).format() : null,\n selectedDateFormatted: data.dateAndTime.date ? data.dateAndTime.date.format('YYYY-MM-DD') : null,\n requestedDateStr: data.dateAndTime.date ? data.dateAndTime.date.format('MM/DD/YYYY') : null,\n requestedTimeStr: data.dateAndTime.date && settings?.company?.timeZoneId ? dayjs(data.dateAndTime.startTime).tz(settings.company.timeZoneId).format('hh:mma') : null,\n startDateTimeStr: data.dateAndTime.startTime ? `${data.dateAndTime.startTime}`: null,\n availableTimesType: data.dateAndTime?.availableTimesType,\n firstName: data.requiredFields.firstName,\n lastName: data.requiredFields.lastName,\n email: data.requiredFields.email,\n eventDateStr: data.requiredFields.eventDateStr ? dayjs(data.requiredFields.eventDateStr).format('YYYY-MM-DD') : null,\n eventDate: data.requiredFields.eventDateStr ? dayjs(data.requiredFields.eventDateStr) : null,\n phone: data.requiredFields.phone && data.requiredFields.phone.value,\n phoneType: data.requiredFields.phone && data.requiredFields.phone.type,\n paymentProfileToken: data.paymentDetails?.paymentProfileToken,\n paymentProfileTokenProvider: data.paymentDetails?.paymentProfileTokenProvider,\n paymentProfileMaskedAcctNumber: data.paymentDetails?.paymentProfileMaskedAcctNumber,\n paymentProfileExpiration: data.paymentDetails?.paymentProfileExpiration,\n paymentProfileCardType: data.paymentDetails?.paymentProfileCardType,\n paymentProfileBillingName: data.paymentDetails?.paymentProfileBillingName,\n paymentProfileAddedBy: data.paymentDetails?.paymentProfileAddedBy,\n signatureImageData: data?.signatureData,\n customFieldValues: helper.extractAndBuildCustomFields(data.additionalDetails, settings, data.appointmentType),\n allDay: false,\n mode: 'S',\n dateTimes: [],\n paramMap: settings.paramMap,\n confirmationText: settings.confirmationText,\n confirmationTextWaitList: settings.confirmationTextWaitList,\n appointmentPaymentSettings: settings.appointmentPaymentSettings,\n addressOne: data.requiredFields?.addressOne,\n addressTwo: data.requiredFields?.addressTwo,\n city: data.requiredFields?.city,\n state: data.requiredFields?.state,\n zip: data.requiredFields?.zip,\n howHeardId: data.requiredFields?.howHeardId,\n emailOptIn: data.requiredFields?.emailOptIn,\n smsOptIn: data.requiredFields?.smsOptIn,\n streetSize: data.requiredFields?.streetSize,\n notes: data.requiredFields?.notes,\n country: data.requiredFields?.country,\n prefContactMethodId: data.requiredFields?.prefContactMethodId,\n contactId: null,\n timeZoneId: timeZoneId,\n fields: helper.getRequiredFormFields(settings),\n schedulerVersion: UrlHelper.getParam('version'),\n recaptchaToken: data?.captchaToken\n };\n\n if(data.requiredFields.eventDate !== undefined) {\n payload.eventDateStr = dayjs(data.requiredFields.eventDate).format('YYYY-MM-DD');\n payload.eventDate = dayjs(data.requiredFields.eventDate);\n }\n\n if(data.requiredFields.budgetStr) {\n // @ts-ignore\n payload.budgetStr = CurrencyHelper.parseCurrencyToNumber(data.requiredFields.budgetStr, settings.locale);\n }\n\n if(data.requiredFields.numberOfPeople) {\n // @ts-ignore\n payload.numberOfPeople = data.requiredFields.numberOfPeople;\n }\n\n if(data.requiredFields.budgetRangeId) {\n // @ts-ignore\n payload.budgetRangeId = +data.requiredFields.budgetRangeId;\n }\n\n if(settings && settings.contact && settings.contact.id) {\n payload.contactId = settings.contact.id\n }\n\n if(data.dateAndTime && data.dateAndTime.waitList && data.dateAndTime.waitList.bookWithWaitList) {\n const dateTimes = data.dateAndTime.waitList?.timeSlots.map((slot: WaitListTimeSlot) => {\n return {\n startDateTimeStr: slot.startTime.replace(/\\s/g, ''),\n endDateTimeStr: slot.endTime.replace(/\\s/g, '')\n }\n });\n\n payload.mode = 'W';\n payload.allDay = data.dateAndTime.waitList.isAllDay;\n payload.dateTimes = dateTimes;\n payload.selectedDate = data.dateAndTime.date ? dayjs(data.dateAndTime.date).format('MM/DD/YYYY') : null;\n payload.duration = type?.duration;\n }\n\n return payload;\n },\n\n extractAndBuildCustomFields(data: any, settings: any, appointmentType: any) {\n const customFieldStep = _.find(settings.steps, { id: 'additionalDetails' });\n\n if(!customFieldStep || !customFieldStep.enabled || !customFieldStep.customFields || !customFieldStep.customFields.length) {\n return [];\n }\n\n return customFieldStep?.customFields!\n .filter(function(field: any) {\n return !appointmentType || _.isEmpty(field.customFieldAppointmentTypeIds) || _.includes(field.customFieldAppointmentTypeIds, appointmentType);\n })\n .map(function(field: any) {\n const fieldType = CustomFieldHelper.TYPES[field.type];\n let fieldValue = data[field.id];\n\n let custom:any = null;\n\n if(_.isObject(fieldValue)) {\n let { value, type }:any = fieldValue;\n const valueType = CustomFieldHelper.getValueType(fieldType);\n const secondFieldType = CustomFieldHelper.SECOND_TYPE[field.type];\n\n if(field.type === 'checkbox') {\n value = helper.getCheckBoxValues(data, field, fieldValue);\n }\n\n custom = {\n required: field.required,\n fieldType: field.type,\n customFieldKey: field.id,\n customFieldId: field.customFieldId,\n customFieldName: field.label,\n value: helper.formatValue(value, field.type),\n valueType: valueType.toUpperCase()\n };\n\n if(fieldType) {\n custom[fieldType] = value;\n }\n\n if(secondFieldType) {\n custom[secondFieldType] = field.type === 'phone' ? +type : type\n }\n\n return custom;\n }\n\n if(field.type === 'checkbox') {\n fieldValue = helper.getCheckBoxValues(data, field);\n }\n\n return {\n required: field.required,\n fieldType: field.type,\n customFieldKey: field.id,\n customFieldId: field.customFieldId,\n customFieldName: field.label,\n value: helper.formatValue(fieldValue, field.type),\n valueType: CustomFieldHelper.getValueType(fieldType).toUpperCase(),\n [fieldType]: helper.formatValueByType(fieldValue, fieldType)\n };\n });\n },\n formatValue: function(value: string, type: string) {\n if(type === 'phone' && value) {\n return value.replace(/[^\\d]/g, '');\n } else if(type === 'date' && value) {\n return dayjs(value).format('YYYY-MM-DD');\n }\n\n return value;\n },\n getRequiredFormFields: function(settings: any) {\n if(!settings || !settings.steps || !settings.steps.length) {\n return null;\n }\n\n const requiredFieldsStep = _.find(settings.steps, { id: 'requiredFields' });\n\n if(requiredFieldsStep) {\n return requiredFieldsStep.fields;\n }\n\n return null;\n },\n formatValueByType: function(value: string, fieldType: string) {\n if(fieldType === 'stringValue' || fieldType === 'textValue') {\n return value;\n } else if((fieldType === 'dateValue' || fieldType === 'dateTimeValue') && value) {\n return dayjs(value).toDate();\n } else if(fieldType === 'numberValue' && value) {\n return +value;\n } else if(fieldType === 'booleanValue' && value) {\n return Boolean(value);\n }\n\n return null;\n },\n getCheckBoxValues: function (data: any, field: any, objectValue?: any) {\n if(objectValue) {\n const keys = Object.keys(objectValue);\n let values: string[] = [];\n\n if(keys && keys.length) {\n for(const key of keys) {\n const value = objectValue[key];\n if((value !== undefined && value === true) || typeof value === 'string') {\n values.push(key);\n }\n }\n }\n\n if(values && values.length) {\n return values.join(',');\n }\n }\n\n const checkboxes = field.options?.filter(function(option: any) {\n return !!(option && option.value);\n }).map(function(option: any) {\n return `${option.id}`;\n });\n\n if(checkboxes && checkboxes.length) {\n if(checkboxes.length === 1) {\n if(data[field.id]) {\n return checkboxes[0];\n }\n } else {\n let values: string[] = [];\n\n checkboxes.forEach(function(checkbox: string) {\n const value = data[checkbox];\n if((value !== undefined && value === true) || typeof value === 'string') {\n values.push(checkbox);\n }\n });\n\n if(values && values.length) {\n return values.join(',');\n }\n }\n }\n\n return undefined;\n }\n};\n\nexport default helper;\n","import { Text } from '@chakra-ui/react';\nimport React from 'react';\n\ntype Props = {\n description: string | undefined;\n classNames?: string;\n};\n\nfunction isHTML(description: string) {\n const regex = /<[\\s\\S]*>/;\n return regex.test(description);\n}\n\nconst StepDescription = ({ description, classNames } : Props) => {\n if(!description) {\n return null;\n }\n\n if(isHTML(description)) {\n return ;\n } else {\n return {description};\n }\n};\n\nexport default StepDescription;\n","import React from 'react';\nimport { Heading } from \"@chakra-ui/layout\";\nimport { FormStep } from \"../../interfaces\";\nimport { STEPS } from \"../../utils/constants\";\nimport StepDescription from \"./StepDescription\";\n\ntype Props = {\n step: FormStep;\n hideDescription?: boolean;\n};\n\nconst FormHeader = ({ step, hideDescription = false } : Props) => {\n if(step && step.id === 'confirmation') {\n return null;\n }\n\n if(hideDescription) {\n return {step.title};\n }\n\n return (\n \n {step.type !== STEPS.confirmation && step.title}\n \n
\n );\n};\n\nexport default FormHeader;\n","import { Heading } from '@chakra-ui/react';\nimport React from 'react';\n\ntype Props = {\n title: string | undefined;\n classNames?: string;\n};\n\nfunction isHTML(title: string) {\n const regex = /<[\\s\\S]*>/;\n return regex.test(title);\n}\n\nconst FormTitle = ({title, classNames} : Props) => {\n if(!title) {\n return null;\n }\n\n if(isHTML(title)) {\n return ;\n } else {\n return { title };\n }\n\n};\n\nexport default FormTitle;\n","import React from 'react';\nimport { Company } from \"../../interfaces\";\n\ntype Props = {\n logoURL: string | undefined;\n classNames?: string;\n company: Company;\n};\n\nconst FormLogo = ({ logoURL, classNames, company }:Props) => {\n if(!logoURL) {\n return null;\n }\n\n return (\n \n
\n