\n \n
{moment(opening.date).format('MMMM Do - dddd')}
\n
{selectedProduct}
\n
\n <>\n {`${opening.times.length} opening${opening.times.length === 1 ? '' : 's'}`}\n
\n \n );\n };\n\n return (\n \n
\n \n {title}\n {!isOpen ? \n <>\n {displayedDates.map((opening, index) => (\n selectOpening(opening)}\n >\n {renderOpening(opening)}\n \n ))}\n {(isFetchingDates && visibleDatesCount > availableDatesCount) && (\n \n \n Loading more dates...\n
\n \n )}\n {(!isFetchingDates || visibleDatesCount === displayedDates.length) && (\n \n \n loadMore()}\n >\n {maxedOut ? 'There are no more available dates.' : 'Load more'}\n
\n {timeSlot.label}
\n {provider}
\n {room}
\n \n );\n };\n\n return (\n <>\n {waitToShow() && (\n \n
\n )}\n \n {((!isMultiLocationEnabled() && !user) || isMultiLocationEnabled()) ? (\n
\n \n \n
\n ) :
}\n {bookingPolicyOpen &&\n shop?.metadata?.bookingPolicy && !anySelectionsMade() &&\n document.getElementById('wrapper') &&\n ReactDOM.createPortal(\n
,\n document.getElementById('wrapper')\n )}\n
\n
\n {!waitToShow() && shop?.metadata?.bookingPolicy && !anySelectionsMade() && (\n <>\n
\n
\n \n Our Appointment Policy\n \n {/*
\n \n \n \n {shop?.metadata?.bookingPolicy}
\n \n \n Okay\n \n
\n \n \n \n )}\n \n
\n Appointment Information\n
\n
\n
\n
\n
\n {showDropoffToggle && (\n
\n setBooking({ ...booking, isDropoff: e.target.checked })}\n checked={booking.isDropoff}\n disabled={selectedProduct?.products?.length === 0}\n />\n
\n )}\n {(!shop?.metadata?.isBookingSkipProvider && !skipProviderSelection) && (\n
\n
\n )}\n
\n 0 ? selectedProduct.products[0].name : null}\n isLoadingDates={isLoadingDates}\n isFetchingDates={isFetchingDates}\n onChange={booking?.isDropoff ? formatDropoffTimes : formatAvailableTimes}\n />\n
\n
\n \n {timeSlotLabelText()}\n {showWaitlistHint && (\n \n Available times too far out? After you schedule an appointment you can join our waitlist and be notified if something opens up earlier!
\n
\n )}\n {(isLoadingDates || isSavingBlockedTime) && \n
\n
\n \n {availableTimes.map((row, rowIndex) => (\n row.map((item, colIndex) => (\n
selectTimeSlot(item)}\n >\n {formatTimeSlot(item)}\n \n ))\n ))}\n {availableTimes.length === 0 && (\n <>\n We're sorry, there are currently no available times online for this appointment type
\n \n All times are in {defaultTimezone}
\n
\n )}\n
\n
\n
\n
{keywordAction?.info_message}
\n
\n
\n {!keywordAction?.allow_bypass && (\n <>\n
\n Call us:
\n \n \n \n )}\n {keywordAction?.action_type === 'prompt' && (\n
\n Go back\n \n )}\n {keywordAction?.allow_bypass && (\n \n <>\n {keywordAction?.action_type === 'prompt' ? (\n <>\n {keywordAction?.prompt_message}\n \n ) : (\n <>\n Continue\n \n )}\n \n \n \n
\n Summary \n {Object.values(selectedProviders).map(item => (\n \n \n
\n \n
\n
\n
\n {booking?.species &&\n
\n
\n }\n
\n
\n
\n
\n {booking?.isDropoff && (\n
\n
\n )}\n
\n
\n ))}\n \n \n
\n
\n \n );\n};\n\nexport default ClientInfoCollection;\n","import axios from 'axios';\nimport { CORE_API_URL } from '../utility/Constant';\n\nexport const getKeywordActions = () => axios.get(`${CORE_API_URL}/keyword_actions`);\n","import React, { useEffect, useRef } from 'react';\nimport { Input } from 'reactstrap';\n\nconst VerificationCodeInput = ({ codeLength, doClearCode, setDoClearCode, setCode, isLoading }) => {\n const inputsRef = useRef([]);\n\n // Clear out Input boxes when value is empty\n useEffect(() => {\n if (doClearCode) {\n inputsRef.current.forEach((input) => {\n input.value = '';\n })\n setDoClearCode(false);\n }\n }, [doClearCode]);\n\n const handleInput = (e, inputIndex) => {\n const input = e.target;\n let code = input.value;\n\n // If a new character is typed, only keep the new one\n if (code.replace(/-/g, '').length === 6) {\n handleMobileCodeUtility(code);\n return;\n }\n if (code.length > 1) {\n code = code.slice(-1);\n input.value = code;\n }\n\n // Move focus to next input box if current input has a value\n if (code && code.length === 1 && inputIndex < codeLength - 1) {\n inputsRef.current[inputIndex + 1].focus();\n }\n\n // Call setCode if last input is filled\n if (inputIndex === codeLength - 1 && code) {\n const codeValue = Array.from(inputsRef.current, (input) => input.value).join('');\n if (codeValue.length === codeLength) {\n setCode(codeValue);\n }\n }\n };\n\n function handleMobileCodeUtility(code) {\n if (code.replace(/-/g, '').length !== 6) {\n return;\n }\n\n code = code.replace(/-/g, '');\n inputsRef.current[0].focus();\n inputsRef.current.forEach((input, i) => {\n input.value = code[i] || '';\n handleInput({ target: input }, i);\n });\n };\n\n const handleBack = (e, inputIndex) => {\n const input = e.target;\n const code = input.value;\n\n // Move focus to previous input box\n if (e.key === 'Backspace' && !code && inputIndex > 0) {\n inputsRef.current[inputIndex - 1].focus();\n }\n };\n\n const handlePaste = (e) => {\n // Prevent pasting more than the expected code length\n const pasteData = e.clipboardData.getData('text/plain');\n const pasteLength = pasteData.length;\n\n if (pasteLength !== codeLength && pasteLength !== (codeLength + 1)) {\n e.preventDefault();\n } else {\n const sanitizedPasteData = pasteData.replace('-', '');\n\n // Move focus to first input box\n inputsRef.current[0].focus();\n\n // Split pasted value into each input box\n inputsRef.current.forEach((input, i) => {\n input.value = sanitizedPasteData[i] || '';\n handleInput({ target: input }, i);\n });\n }\n };\n\n const inputs = Array.from({ length: codeLength }, (_, i) => (\n \n (inputsRef.current[i] = ref)}\n onChange={(e) => handleInput(e, i)}\n onKeyDown={(e) => handleBack(e, i)}\n onPaste={handlePaste}\n autoComplete=\"new-password\" // disable password suggestions\n />\n {(i === (codeLength / 2) - 1) &&
}\n \n ));\n\n return {inputs}
;\n};\n\nexport default VerificationCodeInput;\n","import { useEffect, useMemo, useState } from 'react';\nimport { ChevronLeft, Lock } from \"react-feather\";\nimport { Button, Row, Col, Spinner } from 'reactstrap';\nimport { useRecoilState } from 'recoil';\nimport * as Sentry from \"@sentry/react\";\nimport userState from '../../../../../recoil/atoms/auth/user';\nimport shopState from '../../../../../recoil/atoms/current-shop';\nimport themeConfig from '@configs/themeConfig'\nimport VerificationCodeInput from '../../../../components/inputs/VerificationCodeInput';\nimport { createVerificationCode, verifyCode, bookAppointment } from '@apis';\nimport { useMutation } from 'react-query';\nimport useJwt from '@src/@core/auth/jwt/useJwt';\nimport { AppointmentSteps, CookieKeys, SpecialErrors } from '../../../../../utility/Constant';\nimport { defaultSelectedProduct } from '../../../../../recoil/atoms/booking/booking';\nimport moment from 'moment';\nimport { chain, uniqBy } from 'lodash';\nimport { Cookie } from '../../../../../utility/Cookie';\nimport { updateCustomerAdmin, upsertClient } from '../../../../../apis/customer.api';\nimport { isDepositRequired, saveAppointmentBeforeDeposit } from '../depositHelper';\nimport { previousStepState } from '../../../../../recoil/atoms/booking/bookingStep';\nimport clientState from '../../../../../recoil/atoms/booking/client';\nimport { isReturningClient } from '../returningClientHelper';\n\nconst Verification = ({ goNextStep, booking, setStep, setBooking, backPreviousStep }) => {\n const [user, setUser] = useRecoilState(userState);\n const [client, setClient] = useRecoilState(clientState);\n const [shop] = useRecoilState(shopState);\n const [isLoading, setIsLoading] = useState(false);\n const [isResendDisabled, setIsResendDisabled] = useState(true);\n const [doClearCode, setDoClearCode] = useState(false);\n const [showVerificationError, setShowVerificationError] = useState(false);\n const [previousStep, _setPreviousStep] = useRecoilState(previousStepState);\n const { jwt } = useJwt();\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsResendDisabled(false);\n }, 5000);\n\n return () => {\n clearTimeout(timer);\n };\n }, [isResendDisabled]);\n\n useEffect(() => {\n const redirect = new URLSearchParams(window.location.search).get(\"redirect\");\n if (redirect) {\n const path = `${window.location.pathname}?redirect=${redirect}`;\n window.history.pushState(null, null, path);\n } else {\n window.history.pushState(null, null, window.location.pathname);\n }\n window.addEventListener('popstate', backPreviousStep);\n return () => {\n window.removeEventListener('popstate', backPreviousStep);\n };\n }, []);\n\n const isMobile = () => {\n return booking?.customer?.phoneNumber || !booking?.customer?.email\n };\n\n const formatPhoneNumber = (phoneNumber) => {\n return [\n phoneNumber.slice(0, 3),\n phoneNumber.slice(3, 6),\n phoneNumber.slice(6)\n ].join('-');\n };\n\n const codeDestination = () => {\n if (!!booking?.customer?.phoneNumber) {\n return formatPhoneNumber(booking.customer.phoneNumber);\n } else if (!!booking?.customer?.email) {\n return booking.customer.email;\n } else {\n return 'your email or phone number';\n }\n };\n\n const selectedProviders = chain(booking.selectedProducts)\n .groupBy('provider.id')\n .mapValues(arr => {\n const result = arr.reduce(\n (res, item) => {\n res.provider = item.provider;\n res.products = uniqBy([...res.products, ...item.products], 'id');\n return res;\n },\n { ...defaultSelectedProduct }\n );\n return result;\n })\n .value();\n\n const skipProviderAvailabilityCheck = useMemo(() => {\n return shop?.feature_settings?.skip_provider_availability_check !== undefined &&\n shop.feature_settings.skip_provider_availability_check;\n }, [shop]);\n\n const isAppointmentLimitEnabled = useMemo(() => {\n return shop?.feature_settings?.booking_limit_per_time_slot_enabled !== undefined &&\n shop.feature_settings.booking_limit_per_time_slot_enabled.enabled &&\n shop.feature_settings.booking_limit_per_time_slot_enabled.apply_to_providers &&\n shop.feature_settings.booking_limit_per_time_slot_enabled.limit > 1;\n }, [shop]);\n\n const isRequestedProviderInNoteEnabled = useMemo(() => {\n return shop?.feature_settings?.include_requested_provider_in_appointment_note !== undefined &&\n shop.feature_settings.include_requested_provider_in_appointment_note;\n }, [shop]);\n\n const getSource = () => {\n const source = new URLSearchParams(location.search).get(\"utm_source\");\n if (source) return source;\n if (booking?.referralSource) return booking?.referralSource;\n return null;\n };\n\n const addBookingMutation = useMutation(bookAppointment);\n\n const saveAppointment = (user, clientInfo, saveAsRequest = false) => {\n const products = Object.values(selectedProviders).reduce((res, item) => {\n const arr = item.products.map(product => ({\n id: product.id,\n anyone: item.provider.id === 'any-provider' ? !booking?.dateTimeProviderId : !item.provider,\n providerId: item.provider.id === 'any-provider' ? (booking?.dateTimeProviderId || null) : item.provider?.id,\n ...(!item.provider && { label: 'Anyone' }),\n }));\n res.push(...arr);\n return res;\n }, []);\n let specificDoctorRequested = false;\n if (isRequestedProviderInNoteEnabled && Object.keys(selectedProviders).length > 0) {\n specificDoctorRequested = Object.keys(selectedProviders)[0] !== 'any-provider';\n }\n\n const sendReminder = booking.allowRemind && !saveAsRequest;\n addBookingMutation.mutate(\n {\n source: 'CUSTOMER_SITE',\n products,\n userId: user?.id,\n isReminderSMS: sendReminder,\n isReminderEmail: sendReminder,\n isSendConfirmation: sendReminder,\n isReturningClient: booking.returningClientFlow,\n roomId: booking?.roomId,\n compound_secondary_date_time: booking?.compoundSecondaryDateTime,\n compound_secondary_room_id: booking?.compoundSecondaryRoomId,\n compound_secondary_provider_id: booking?.compoundSecondaryProviderId,\n compound_tertiary_date_time: booking?.compoundTertiaryDateTime,\n compound_tertiary_room_id: booking?.compoundTertiaryRoomId,\n compound_tertiary_provider_id: booking?.compoundTertiaryProviderId,\n date: booking.dateTime,\n note: booking.note,\n isDropoff: booking.isDropoff,\n speciesId: booking?.species?.id || clientInfo?.species?.id,\n speciesName: booking?.species?.name || clientInfo?.species?.name,\n patientName: booking?.customer?.petName || clientInfo?.petName,\n sex: booking?.customer?.sex || clientInfo?.sex,\n birthdate: booking?.customer?.birthdate || clientInfo?.birthdate,\n breed: booking?.customer?.breed || clientInfo?.breed,\n breed_id: booking?.customer?.breed_id || clientInfo?.breed_id,\n patient_color_id: booking?.customer?.patient_color_id || clientInfo?.patient_color_id,\n patient_sex_id: booking?.customer?.patient_sex_id || clientInfo?.patient_sex_id,\n ignoreOverlap: isAppointmentLimitEnabled,\n confirmed_keyword_action: booking?.confirmed_keyword_action || clientInfo?.confirmedKeywordAction,\n specific_doctor_requested: specificDoctorRequested,\n time_slot_calendar_id: booking?.time_slot_calendar_id,\n saveAsRequest,\n ignoreOverlap: skipProviderAvailabilityCheck || !!booking?.compoundSecondaryDateTime || false,\n referral_source: getSource(),\n has_wellness_plan: booking?.customer?.hasWellnessPlan || clientInfo?.hasWellnessPlan\n },\n {\n onSuccess: ({ data }) => {\n setBooking({\n ...booking,\n appointmentId: data.data.id,\n customer: {\n ...booking.customer,\n ...clientInfo\n },\n clientId: data.data.items[0].clientId,\n isSaved: true\n });\n setIsLoading(false);\n Cookie.removeItem(CookieKeys.confirmationForm);\n sessionStorage.removeItem(CookieKeys.confirmationForm);\n goNextStep();\n },\n onError: (error) => {\n Sentry.captureException(error);\n setIsLoading(false);\n },\n }\n );\n };\n\n const updateUserMutation = useMutation(updateCustomerAdmin);\n\n const updateUserRecordWithExistingClient = (user, client) => {\n const fullName = `${client?.first_name || ''} ${client?.last_name || ''}`.trim();\n updateUserMutation.mutate({\n id: user?.id,\n firstName: fullName,\n email: client?.email,\n },\n {\n onSuccess: (data) => {\n const tmpUser = { ...data.data.data };\n setUser(tmpUser);\n Cookie.setItem(CookieKeys.user, tmpUser);\n goNextStep();\n },\n onError: () => {\n goNextStep();\n }\n }\n );\n };\n\n const upsertClientMutation = useMutation(upsertClient);\n\n const findOrCreateClient = (user, clientInfo) => {\n const fullName = user?.firstName || clientInfo?.firstName;\n const nameParts = fullName?.split(' ') || [];\n let firstName = '';\n let lastName = '';\n if (nameParts?.length > 1) {\n lastName = nameParts[nameParts.length - 1];\n firstName = nameParts.slice(0, -1).join(' ');\n } else {\n firstName = nameParts[0] || '';\n lastName = '';\n }\n const clientParams = {\n user_id: user?.id,\n email: user?.email || clientInfo?.email,\n phone: user?.phoneNumber || clientInfo?.phoneNumber,\n first_name: firstName,\n last_name: lastName,\n address1: clientInfo?.address1,\n address2: clientInfo?.address2,\n city: clientInfo?.city,\n state: clientInfo?.state,\n country: clientInfo?.country,\n zip: clientInfo?.zip,\n source: 'verification',\n };\n upsertClientMutation.mutate(\n clientParams,\n {\n onSuccess: (data) => {\n let localClient = null;\n if (data?.data?.id) {\n localClient = data?.data;\n setBooking(prev => ({\n ...prev,\n clientId: localClient.id,\n customer: {\n ...prev.customer,\n firstName: `${localClient.first_name} ${localClient.last_name}`,\n email: localClient.email,\n phoneNumber: localClient.phone,\n address1: localClient.address1,\n address2: localClient.address2,\n city: localClient.city,\n state: localClient.state,\n zip: localClient.zip,\n created_at: localClient.created_at,\n patients: localClient.patients\n }\n }));\n setClient(localClient);\n }\n if (previousStep === AppointmentSteps.ReturningClientInfo) {\n if (!fullName && (data?.data?.first_name || data?.data?.last_name)) {\n // Update user record now with client name and email before going to next step\n updateUserRecordWithExistingClient(user, localClient);\n } else { // Go to AppointmentSelection and fill out name info later.\n goNextStep();\n }\n } else {\n const product = booking.selectedProducts[0].products[0];\n const isReturning = isReturningClient(localClient);\n if (product && isDepositRequired(shop, product, isReturning)) {\n if (saveAppointmentBeforeDeposit(product)) {\n const saveAsRequest = true;\n saveAppointment(user, clientInfo, saveAsRequest);\n } else {\n goNextStep();\n }\n } else {\n saveAppointment(user, clientInfo);\n }\n }\n },\n onError: (data) => {\n setIsLoading(false);\n },\n }\n );\n };\n\n const verifyCodeMutation = useMutation(verifyCode);\n\n const onSetCode = (code) => {\n setIsLoading(true);\n setIsResendDisabled(true);\n verifyCodeMutation.mutate(\n {\n ...booking?.customer,\n code\n },\n {\n onSuccess: (data) => {\n const tmpUser = { ...data.data.data };\n setUser(tmpUser);\n jwt.setToken(tmpUser.token);\n Cookie.setItem(CookieKeys.user, tmpUser);\n findOrCreateClient(tmpUser, booking?.customer);\n },\n onError: (data) => {\n setIsLoading(false);\n if (data?.response?.data?.message === 'VerificationMaximumExceeded') {\n sessionStorage.removeItem(CookieKeys.confirmationForm);\n Cookie.removeItem(CookieKeys.confirmationForm);\n setBooking(prev => ({ ...prev, verificationError: true }));\n } else if (data?.response?.data?.message === SpecialErrors.InvalidCode) {\n setShowVerificationError(true);\n }\n },\n }\n );\n };\n\n const createCodeMutation = useMutation(createVerificationCode);\n\n const resendCode = () => {\n setIsResendDisabled(true);\n setIsLoading(true);\n setDoClearCode(true);\n setShowVerificationError(false);\n const body = {\n email: booking?.customer?.email,\n phoneNumber: booking?.customer?.phoneNumber,\n phoneCode: booking?.customer?.phoneCode\n };\n createCodeMutation.mutate(body,\n {\n onSuccess: () => {\n setIsLoading(false);\n },\n onError: (data) => {\n setIsLoading(false);\n if (data?.response?.data?.message === 'VerificationMaximumExceeded') {\n Cookie.removeItem(CookieKeys.confirmationForm);\n sessionStorage.removeItem(CookieKeys.confirmationForm);\n setBooking(prev => ({ ...prev, verificationError: true }));\n }\n },\n }\n )\n };\n\n return (\n <>\n \n \n \n \n \n
\n
\n
\n \n {!booking?.verificationError && (\n <>\n Check your {isMobile() ? \"phone\" : \"email\"}!
\n We sent a 6-digit confirmation code to {codeDestination()}
\n
\n \n {!booking?.verificationError && (\n \n {showVerificationError && (\n
Oops, that didn't work. Please enter the code that was sent to you.
\n )}\n
\n {isLoading && We're sorry, we cannot verify your information at this time. Please try again later{shop && shop.phoneNumber ? ` or contact us at ${formatPhoneNumber(shop.phoneNumber)}.` : '.'}
\n )}\n
\n \n );\n};\n\nexport default Verification;\n","export default __webpack_public_path__ + \"static/media/google.b22b8a66.png\";","export default \"data:image/png;base64,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\"","// ** React Imports\nimport { forwardRef, Fragment, useState } from 'react';\n\n// ** Third Party Components\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { Eye, EyeOff } from 'react-feather';\nimport { InputGroup, InputGroupAddon, Input, InputGroupText, Label, inputClassName } from 'reactstrap';\n\nconst InputPasswordToggle = forwardRef((props, ref) => {\n // ** Props\n const { label, hideIcon, showIcon, visible, className, htmlFor, placeholder, iconSize, inputClassName, ...rest } = props;\n\n // ** State\n const [inputVisibility, setInputVisibility] = useState(visible);\n\n // ** Renders Icon Based On Visibility\n const renderIcon = () => {\n const size = iconSize ? iconSize : 14;\n\n if (inputVisibility === false) {\n return hideIcon ? hideIcon : \n {label ? {label} : null}\n \n setInputVisibility(!inputVisibility)}>\n {renderIcon()} \n \n \n \n );\n});\n\nexport default InputPasswordToggle;\n\n// ** PropTypes\nInputPasswordToggle.propTypes = {\n hideIcon: PropTypes.node,\n showIcon: PropTypes.node,\n visible: PropTypes.bool,\n className: PropTypes.string,\n placeholder: PropTypes.string,\n iconSize: PropTypes.number,\n inputClassName: PropTypes.string,\n label(props, propName, componentName) {\n // ** If label is defined and htmlFor is undefined throw error\n if (props[propName] && props['htmlFor'] === 'undefined') {\n throw new Error('htmlFor prop is required when label prop is present');\n }\n },\n htmlFor(props, propName, componentName) {\n // ** If htmlFor is defined and label is undefined throw error\n if (props[propName] && props['label'] === 'undefined') {\n throw new Error('label prop is required when htmlFor prop is present');\n }\n },\n};\n\n// ** Default Props\nInputPasswordToggle.defaultProps = {\n visible: false,\n};\n","import { useRecoilState } from 'recoil';\nimport confirmBoxState from '@recoil/atoms/common/confirm-box';\n\nlet resolve;\nconst useConfirm = () => {\n const [confirmBox, setConfirmBox] = useRecoilState(confirmBoxState);\n\n const confirm = args => {\n const { title, message, confirmButtonColor } = args || {};\n return new Promise(res => {\n setConfirmBox({\n show: true,\n title,\n message,\n confirmButtonColor,\n });\n resolve = res;\n });\n };\n\n const onConfirm = () => {\n setConfirmBox({\n show: false,\n title: '',\n message: '',\n });\n resolve(true);\n };\n\n const onCancel = () => {\n setConfirmBox({\n show: false,\n title: '',\n message: '',\n });\n resolve(false);\n };\n\n return { confirm, confirmBox, onCancel, onConfirm };\n};\n\nexport default useConfirm;\n","import { useRecoilState } from 'recoil';\nimport shopState from '@recoil/atoms/current-shop';\n\nconst useShop = () => {\n const [shop] = useRecoilState(shopState);\n\n return shop;\n};\n\nexport default useShop;\n","import { useRecoilState } from 'recoil';\nimport userState from '../../recoil/atoms/auth/user';\nimport { getUserData } from '../Utils';\n\nconst useUserState = () => useRecoilState(userState);\n\nexport default useUserState;\n","import { useMutation, useInfiniteQuery, useQuery } from 'react-query';\nimport firebase from 'firebase/app';\nimport { getProfile, socialSignIn, customerSignIn, signUp, updateProfile } from '@apis';\n\nimport useJwt from '@src/@core/auth/jwt/useJwt';\nimport useShop from '@hooks/useShop';\nimport useUserState from '@hooks/useUserState';\nimport { CookieKeys } from '@utility/Constant';\nimport { Cookie } from '@utility/Cookie';\n\nexport const useCurrentUserProfile = (options = {}) => {\n const [, setUser] = useUserState();\n return useQuery(\n ['useCurrentUserProfile'],\n async () => {\n try {\n const { data } = await getProfile();\n setUser(data.data);\n return data.data;\n } catch (e) {\n throw e;\n }\n },\n { ...options }\n );\n};\n\nexport const useUpdateProfileMutation = options => {\n const [, setUser] = useUserState();\n return useMutation(async values => {\n try {\n const { data } = await updateProfile(values);\n setUser(data.data);\n\n return data.data;\n } catch (e) {\n console.log(e);\n throw e?.response?.data;\n }\n }, options);\n};\n\nexport const useSignUpMutation = options => {\n const { jwt } = useJwt();\n const [, setUser] = useUserState();\n\n return useMutation(async values => {\n try {\n const { data } = await signUp({\n // firstName: values.name,\n email: values.email,\n username: values.email || values.phoneNumber.slice(values.phoneCode?.length || 0),\n password: values.password,\n phoneCode: values.phoneCode,\n phoneNumber: values.phoneNumber.slice(values.phoneCode?.length || 0),\n rememberMe: true,\n role: 'ROLE_CUSTOMER',\n });\n setUser(data.data);\n jwt.setToken(data.data.token);\n Cookie.setItem(CookieKeys.user, data.data);\n\n return data.data;\n } catch (e) {\n console.log(e);\n throw e?.response?.data;\n }\n }, options);\n};\n\nexport const useLoginMutation = options => {\n const { jwt } = useJwt();\n const [, setUser] = useUserState();\n\n return useMutation(async values => {\n try {\n const { data } = await customerSignIn({\n username: values.username,\n password: values.password,\n rememberMe: true,\n });\n setUser(data.data);\n jwt.setToken(data.data.token);\n Cookie.setItem(CookieKeys.user, data.data);\n\n return data.data;\n } catch (e) {\n console.log(e);\n throw e?.response?.data;\n }\n }, options);\n};\n\nexport const useSocialSignInMutation = options => {\n const { jwt } = useJwt();\n const [, setUser] = useUserState();\n\n return useMutation(async values => {\n try {\n const { data } = await socialSignIn({\n avatar: values.avatar,\n email: values.email,\n firstName: values.firstName,\n oAuthType: values.oAuthType,\n idToken: values.idToken,\n phoneCode: values.phoneCode,\n phoneNumber: values.phoneNumber?.slice?.(values.phoneCode.length),\n });\n setUser(data.data);\n jwt.setToken(data.data.token);\n Cookie.setItem(CookieKeys.user, data.data);\n\n return data.data;\n } catch (e) {\n console.log(e);\n throw e?.response?.data;\n }\n }, options);\n};\n\nexport const useGoogleLogin = ({ onError, onSuccess }) => {\n const socialSignInMutation = useSocialSignInMutation({ onSuccess, onError });\n\n return {\n ...socialSignInMutation,\n mutate: () => {\n const googleAuthProvider = new firebase.auth.GoogleAuthProvider();\n firebase\n .auth()\n .signInWithPopup(googleAuthProvider)\n .then(async ({ user, credential, ...other }) => {\n socialSignInMutation.mutate({\n idToken: await user.getIdToken(),\n email: user.email,\n avatar: user.photoURL,\n firstName: user.displayName,\n oAuthType: 'GOOGLE',\n });\n })\n .catch(onError);\n },\n };\n};\n\nexport const useFacebookLogin = ({ onError, onSuccess }) => {\n const socialSignInMutation = useSocialSignInMutation({ onSuccess, onError });\n\n return {\n ...socialSignInMutation,\n mutate: () => {\n const facebookProvider = new firebase.auth.FacebookAuthProvider();\n firebase\n .auth()\n .signInWithPopup(facebookProvider)\n .then(async ({ user, credential, ...other }) => {\n socialSignInMutation.mutate({\n idToken: await user.getIdToken(),\n email: user.email,\n avatar: user.photoURL,\n firstName: user.displayName,\n oAuthType: 'FACEBOOK',\n });\n })\n .catch(onError);\n },\n };\n};\n","import { useQuery } from 'react-query';\nimport { getStaffsWorkingHours, getStaffDetail } from '../apis/new-staff.api';\n\nexport const useStaffDetailQuery = (id, options) => {\n return useQuery(['getStaffDetail', id], () => getStaffDetail({ id }), options);\n};\nexport const useWorkingHoursQuery = (data, options) => {\n return useQuery(['getStaffsWorkingHours', data], () => getStaffsWorkingHours(data), options);\n};\n","import { useState } from 'react';\nimport { Alert, Row, Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';\nimport * as yup from 'yup';\nimport { Controller, useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport GoogleIcon from '@src/assets/images/icons/google.png';\nimport FacebookIcon from '@src/assets/images/icons/facebook.png';\nimport InputPasswordToggle from '@components/input-password-toggle';\nimport { AppointmentSteps, regexEmail } from '@utility/Constant';\nimport { useFacebookLogin, useGoogleLogin, useLoginMutation } from '@queries';\nimport { useHistory } from 'react-router';\n\nconst schema = yup.object().shape({\n username: yup.string().trim().required('Please enter your phone or email').max(255, 'Please enter within 255 characters'),\n password: yup.string().trim().required('Password is required').max(255, 'Please enter within 255 characters'),\n});\n\nconst Login = ({ setStep, goNextStep, booking, setBooking }) => {\n const [socialError, setSocialError] = useState();\n const history = useHistory();\n\n const {\n handleSubmit,\n control,\n formState: { errors },\n } = useForm({\n resolver: yupResolver(schema),\n defaultValues: {\n username: '',\n password: '',\n },\n });\n\n const onContinue = customer => {\n setBooking({ ...booking, customer });\n history.replace(history.location.pathname, { loggedIn: true });\n goNextStep();\n };\n\n const signInMutation = useLoginMutation({\n onSuccess: data => onContinue(data),\n onSettle: () => history.replace(history.location.pathname, { loggedIn: true })\n });\n\n const onSubmit = values => {\n const reqUsername = regexEmail.test(values.username) ? values.username : `1;${values.username}`;\n signInMutation.mutate({ username: reqUsername, password: values.password });\n };\n\n const signInGoogle = useGoogleLogin({\n onSuccess: data => {\n setSocialError('');\n onContinue(data);\n },\n onError: e => {\n setSocialError(e?.message);\n },\n });\n\n const signInFacebook = useFacebookLogin({\n onSuccess: data => {\n setSocialError('');\n onContinue(data);\n },\n onError: e => setSocialError(e?.message),\n });\n\n return (\n \n
\n Sign in to access your profile \n {socialError && (\n \n {socialError}
\n \n )}\n {signInMutation.isError && (\n \n Wrong email or password
\n \n )}\n\n \n\n \n\n \n \n \n \n \n
\n
\n
\n Create your account \n {signUpMutation.isError && (\n \n {signUpMutation?.error?.message || 'Error'}
\n \n )}\n {socialError && (\n \n {socialError}
\n \n )}\n \n \n\n \n \n \n \n \n
\n
\n Thank you{userName ? `, ${userName}` : ''}!
\n \n {Object.values(staff).map(item => (\n \n
\n \n
\n
\n
\n {booking?.species &&\n
\n
\n }\n
\n
\n
\n
\n {booking?.isDropoff && (\n
\n
\n )}\n
\n
\n \n );\n};\n\nconst BookSuccessWaiting = ({ userName, address, staff, bookingDateTime, shop, booking, isTelemedicine }) => {\n return (\n <>\n \n Thank you{userName ? `, ${userName}` : ''}!
\n \n We'll let you know when your
\n \n {Object.values(staff).map(item => (\n \n
\n \n
\n
\n
\n {booking?.species &&\n
\n
\n }\n
\n
\n
\n
\n {booking?.isDropoff && (\n
\n
\n )}\n
\n
\n \n );\n};\n\nconst BookSuccess = ({ step, backPreviousStep, setStep, booking, setBooking }) => {\n const [user] = useRecoilState(userState);\n const [shop] = useRecoilState(shopState);\n const [addedToWaitlist, setAddedToWaitlist] = useState(false);\n\n const logCustomGoogleAnalyticsEvent = () => {\n if (shop?.id === '621dd61c-b5a0-4486-a79a-4229ecc9ff03') { // Emeryville Veterinary Clinic\n // gtag('event', 'conversion', { 'send_to': 'AW-936959782/d9DHCMfmt-gZEKa-474D', 'value': 1.0, 'currency': 'USD' });\n ReactGA.initialize(\"AW-936959782\");\n ReactGA.ga('event', 'conversion', {\n send_to: 'AW-936959782/d9DHCMfmt-gZEKa-474D',\n value: 1.0,\n currency: 'USD'\n });\n } else {\n ReactGA.initialize(\"G-XTG110JDKS\");\n ReactGA.event({\n category: \"conversion\",\n action: \"appointment_booked\",\n label: shop?.name, // optional\n // value: 1.0, // optional, must be a number\n // nonInteraction: true, // optional, true/false\n // transport: \"xhr\", // optional, beacon/xhr/image\n });\n }\n };\n\n useEffect(() => {\n let timer = null;\n const {\n metadata: { thankYouPage = '', isBookingShowThankYouPage },\n } = shop;\n\n logCustomGoogleAnalyticsEvent();\n\n if (step === AppointmentSteps.BookSuccess && thankYouPage && isBookingShowThankYouPage) {\n timer = setTimeout(() => {\n window.location.href = thankYouPage;\n }, 3000);\n }\n return () => {\n clearTimeout(timer);\n };\n }, [step]);\n\n const onReset = () => {\n setBooking(initialBookingState);\n setStep(1);\n };\n\n const isTelemedicine = useMemo(() => {\n const product = booking.selectedProducts[0]?.products[0];\n if (product && product.isTelemedicine) return true;\n return false;\n }, [booking.selectedProducts]);\n\n const waitlistEnabled = () => {\n if (shop?.feature_settings?.waitlist_ui_v1_enabled !== undefined) {\n return shop.feature_settings.waitlist_ui_v1_enabled === true && booking?.selectedProducts[0]?.products[0]?.metadata?.waitlistEligible;\n } else {\n return false;\n }\n };\n\n const addToWaitlistMutation = useMutation(addToWaitlist);\n const removeFromWaitlistMutation = useMutation(removeFromWaitlist);\n\n const modifyWaitlist = (val) => {\n setAddedToWaitlist(val);\n if (val) {\n addToWaitlistMutation.mutate(\n {\n client_id: booking.clientId,\n appointment_id: booking.appointmentId\n },\n {\n onSuccess: (data) => {\n toast.success('You\\'ve been added to the waitlist!');\n },\n onError: () => {\n },\n }\n );\n } else {\n removeFromWaitlistMutation.mutate(\n {\n client_id: booking.clientId,\n appointment_id: booking.appointmentId\n },\n {\n onSuccess: (data) => {\n toast.success('You\\'ve been removed from the waitlist.');\n },\n onError: () => {\n },\n }\n );\n }\n };\n\n let selectedStaff = chain(booking.selectedProducts)\n .groupBy('provider.id')\n .mapValues(arr => {\n const result = arr.reduce(\n (res, item) => {\n res.provider = item.provider;\n res.products = uniqBy([...res.products, ...item.products], 'id');\n return res;\n },\n { ...defaultSelectedProduct }\n );\n return result;\n })\n .value();\n if (Object.keys(selectedStaff).length > 1 || Object.keys(selectedStaff)[0] === 'undefined') {\n selectedStaff = undefined;\n }\n\n return (\n \n
\n {shop?.metadata?.isAutoAccept && (\n
\n {waitlistEnabled() && (\n
\n \n modifyWaitlist(!addedToWaitlist)}\n />\n modifyWaitlist(!addedToWaitlist)}\n color=\"primary\"\n >\n <>\n {shop?.metadata?.isAutoAccept && (\n <>Add me to the waitlist! If any cancellations open up an earlier appointment time, I will be notified.\n )}\n {!shop?.metadata?.isAutoAccept && (\n <>Once my appointment is accepted, add me to the waitlist! If any cancellations open up an earlier appointment time, I will be notified.\n )}\n \n \n \n \n
\n )}\n
\n \n My Appointments\n \n\n {/* \n Book new appointment\n */}\n \n
\n
\n
\n Forgot password? \n \n Enter your email or phone number and we'll send you instructions to reset your password\n
\n \n \n
\n
\n
\n Forgot password? */}\n {/* Enter your email or phone number and we'll send you instructions to reset your password
*/}\n \n \n
\n
\n
\n Enter 6-digits code \n Your code was sent to {username}
\n \n
\n
\n
\n
\n \n
\n A message with a verification code has been sent. Enter the code to continue.\n
\n\n
\n
Resend code
\n
\n {count > 0 ? (\n
{count}s
\n ) : (\n
\n Resend\n \n )}\n
\n
\n
\n
onSubmitRequestReset({ username })}\n />\n ),\n [_step.reset]: \n {!isPaymentMethodSaved ? (\n <>\n
\n Deposit Amount\n
\n
\n
\n {!!booking?.deposit?.amount ? (\n
\n {`$${booking?.deposit?.amount.toFixed(2)}`}\n
\n ) : (\n
\n
\n )}\n
\n one-time\n \n
\n
\n
\n {depositPolicyContent()}\n
\n
\n
Payment information \n <>\n {clientSecret && (\n
\n \n )}\n {!clientSecret && (\n
\n Just a moment... \n
\n )}\n \n
\n \n ) : (\n <>\n {!isComplete ? (\n <>\n
\n Just a moment... \n
\n \n ) : (\n <>\n
\n
\n
\n
\n
\n Payment Successful\n
\n \n
\n
\n
\n {depositPolicyContent()}\n
\n
\n
\n {`Confirmation #: ${booking?.deposit?.confirmation_number || ''}`}\n
\n
\n
\n
TOTAL AMOUNT PAID
\n
${booking?.deposit?.amount.toFixed(2)}
\n
\n
\n {booking?.customer && (\n <>\n
\n
PAID BY
\n
{booking?.customer?.firstName}
\n
\n
\n \n )}\n
\n
PAYMENT DATE
\n
{formatCompletedAt()}
\n
\n
\n {(!!booking?.selectedProducts?.length && !!booking?.selectedProducts[0]?.products?.length) && (\n
\n { goNextStep(); }} disabled={!hasUpdatedPaymentWithAppointmentId}>\n <>\n {nextButtonText()}\n {hasUpdatedPaymentWithAppointmentId ? \n
\n )}\n \n )}\n \n )}\n
onStateChange(e)}\n />\n }, [viClientId, clientFirstName, clientLastName, clientEmail, clientState, clientCity, clientZip, species, declaredBreed, plan, age, petName, gender]);\n\n const completeInsurancePaymentMutation = useMutation(completeInsurancePayment);\n\n const onCompletePayment = () => {\n const params = {\n quote_id: selectedQuote?.quote_id\n };\n completeInsurancePaymentMutation.mutate(params, {\n onSuccess: (data) => {\n if (data?.data) {\n if (data.data.complete) {\n setIsComplete(true);\n setIsLoadingCheckout(false);\n setIsSuccess(true);\n setMakingIndependentPayment(false);\n } else {\n toast.error('Something went wrong, but your appointment has still been booked. (1)');\n setIsLoadingCheckout(false);\n setIsSuccess(false);\n setMakingIndependentPayment(false);\n }\n }\n },\n onError: (error) => {\n toast.error('Something went wrong, but your appointment has still been booked. (2)');\n setIsSuccess(false);\n setIsComplete(true);\n setIsLoadingCheckout(false);\n setMakingIndependentPayment(false);\n },\n });\n };\n\n const appearance = {\n theme: 'stripe',\n variables: {\n colorPrimary: '#03464C',\n }\n };\n\n const options = {\n clientSecret,\n appearance,\n };\n\n return (\n <>\n \n \n \n
\n {!isComplete && (\n <>\n {!!viClientId && !isLoading && (\n <>\n Add insurance for your pet \n {!makingIndependentPayment && (\n \n Continue\n {isLoadingCheckout && \n Continue\n {isLoadingCheckout && \n {clientSecret && (\n
\n \n )}\n {!clientSecret && (\n
\n Just a moment... \n
\n )}\n
I'd like to skip this \n
\n \n )}\n {isComplete && (\n <>\n {isSuccess ? (\n <>\n Your pet insurance has been purchased and you have been charged ${selectedQuote.subscription_premium.payment_amount / 100}. You will receive an email with the details of your insurance.
\n \n ) : (\n <>\n There was a problem purchasing your pet insurance, but your appointment has still been booked.
\n \n )}\n \n Continue\n \n \n )}\n \n );\n};\n\nexport default InsuranceOffer;\n","import { useRecoilState } from \"recoil\";\nimport shopState from \"../../../../../recoil/atoms/current-shop\";\nimport userState from \"../../../../../recoil/atoms/auth/user\";\nimport { Button } from \"reactstrap\";\nimport { useEffect, useState } from \"react\";\nimport * as Sentry from \"@sentry/react\";\n\nconst ClientTypeSelection = ({ externalKey, step, goNextStep, booking, setBooking }) => {\n const [shop] = useRecoilState(shopState);\n const [user, setUser] = useRecoilState(userState);\n const [proceed, setProceed] = useState(false);\n\n useEffect(() => {\n if (proceed && shop?.feature_settings) {\n goNextStep();\n }\n }, [proceed, shop]);\n\n useEffect(() => {\n if (user) {\n setBooking({\n ...booking,\n returningClientFlow: true,\n });\n setProceed(true);\n }\n }, []);\n\n useEffect(() => {\n if (booking?.returningClientFlow || user) {\n setProceed(true);\n }\n }, [booking?.returningClientFlow]);\n\n const onSelectClientType = (clientType) => {\n if (clientType === \"new\") {\n setBooking({\n ...booking,\n returningClientFlow: false,\n });\n setProceed(true);\n } else if (clientType === \"returning\") {\n setBooking({\n ...booking,\n returningClientFlow: true,\n });\n }\n };\n\n useEffect(() => { // If a redirect is set, jump to returning client login\n const redirect = new URLSearchParams(window.location.search).get(\"redirect\");\n if (redirect) {\n setBooking({\n ...booking,\n returningClientFlow: true,\n });\n }\n }, [shop]);\n\n return (\n \n {!!shop && (\n
\n
\n Hello! 👋 Have you visited\n \n \n {shop?.name} before?\n \n \n {\n onSelectClientType(\"new\");\n }}\n >\n New client\n \n {\n onSelectClientType(\"returning\");\n }}\n >\n Returning client\n \n
\n \n )}\n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n Let's {isLoginRedirect ? 'find' : 'verify'} your account using your mobile phone or email.\n \n \n {!hidePhoneNumber() && (\n <>\n
{\n onChangePhoneNumber(e.target.value);\n }}\n onKeyUp={(e) => {\n if (e.key === 'Enter') {\n onContinue();\n }\n }}\n autocomplete=\"off\"\n />\n {(!!errors.phoneNumber) && (\n \n {errors.phoneNumber}\n \n )}\n \n )}\n {!hideEmail() && !hidePhoneNumber() && (\n \n {'or'} \n
\n )}\n {!hideEmail() && (\n <>\n {\n onChangeEmail(e.target.value);\n }}\n onKeyUp={(e) => {\n if (e.key === 'Enter') {\n onContinue();\n }\n }}\n autocomplete=\"off\"\n style={{ marginBottom: `${errors.email ? '0' : '12px'}` }}\n />\n {!!errors.email && (\n \n {errors.email}\n \n )}\n \n )}\n {\n onContinue();\n }}\n >\n Send verification code\n \n \n
\n
\n
\n {!user ? (\n
\n \n \n
\n ) : (\n
\n )}\n
\n
\n At which location do you want to schedule your pet's appointment?\n \n \n {isLoading ? (\n
\n {\n setStep(2);\n setBooking(prev => ({ ...prev, location: { ...location } }));\n goNextStep();\n }}\n >\n {location.name}\n \n ),\n )\n )}\n \n )}\n \n )}\n \n
\n
\n No appointments available\n \n \n We're sorry, we are currently not accepting appointments online.\n
\n \n
\n
\n
\n
\n
\n
{shop?.name} \n
\n
\n
\n
\n
\n
\n
{shop?.name} \n
\n
Contact Info \n
\n {/* {shop?.metadata?.mapCoordinates && shop?.metadata?.isBookingShowMap && (\n
\n )} */}\n
Business hours \n \n {shop?.metadata?.businessHours?.map(item => (\n \n {daysOfWeek[item.day]} \n {!item.offline ? (\n \n {item.startHour}:{item.startMinute === 0 ? '00' : item.startMinute} - {item.endHour > 12 ? item.endHour - 12 : item.endHour}:\n {item.endMinute === 0 ? '00' : item.endMinute}\n \n ) : (\n Closed \n )}\n \n ))}\n \n \n )}\n \n );\n};\n\nexport default BookingRightSide;\n","// ** React Imports\nimport { Suspense, useEffect, useState } from 'react';\n\n// ** Third Party Components\nimport { BrowserRouter as Router, Switch, Route, useParams, useLocation } from 'react-router-dom';\nimport { Row, Col, Card, Container, Spinner } from 'reactstrap';\nimport { useQuery } from 'react-query';\nimport { useRecoilState } from 'recoil';\nimport isEmpty from 'lodash/isEmpty';\nimport { useMediaQuery } from 'react-responsive';\n\nimport useJwt from '@src/@core/auth/jwt/useJwt';\nimport { getShopInfo, getExternalKey, getTimezones } from '@apis';\nimport shopState from '@recoil/atoms/current-shop';\nimport externalKeyState from '@recoil/atoms/auth/externalKey';\nimport timeZoneState from '@recoil/atoms/booking/timeZone';\nimport bookingState, { initialBookingState } from '@recoil/atoms/booking/booking';\nimport bookingStepState, { initialBookingStep } from '@recoil/atoms/booking/bookingStep';\nimport '@styles/react/pages/page-booking.scss';\n\nimport BookingLeftSide from './components/BookingLeftSide';\nimport BookingRightSide from './components/BookingRightSide';\nimport { bookingRoutes } from './routes';\nimport useUserState from '../../../utility/hooks/useUserState';\n\nconst BookingWizard = () => {\n const { jwt } = useJwt();\n const location = useLocation();\n const params = useParams();\n const [user] = useUserState();\n const [externalKey, setExternalKey] = useRecoilState(externalKeyState);\n const [shop, setShop] = useRecoilState(shopState);\n const [timeZones, setTimeZones] = useRecoilState(timeZoneState);\n const [, setBooking] = useRecoilState(bookingState);\n const [, setBookingStep] = useRecoilState(bookingStepState);\n\n const isTabletOrMobile = useMediaQuery({ query: '(max-width: 991px)' });\n\n useEffect(() => {\n jwt.setClientId(params?.clientId);\n\n return () => {\n setBooking(initialBookingState);\n setBookingStep(initialBookingStep);\n };\n }, []);\n\n useQuery(\n 'externalKey',\n async () => {\n const { data } = await getExternalKey();\n setExternalKey(data.data?.jwtToken);\n jwt.setToken(data.data?.jwtToken);\n return data.data?.jwtToken;\n },\n {\n enabled: !user && !externalKey && !!jwt.getClientId(),\n }\n );\n useQuery(\n 'shopInfo',\n async () => {\n const { data } = await getShopInfo(params?.clientId);\n const { phoneNumber, phoneCode } = data.data;\n const shopInfo = { ...data.data, ...(phoneNumber && phoneCode && { phone: `+${phoneCode}${phoneNumber}` }) };\n setShop(shopInfo);\n return shopInfo;\n },\n {\n enabled: (!!externalKey || !!user) && isEmpty(shop),\n }\n );\n useQuery(\n 'timeZones',\n async () => {\n const { data } = await getTimezones();\n setTimeZones(data.data);\n return data.data;\n },\n {\n enabled: (!!externalKey || !!user) && isEmpty(timeZones),\n }\n );\n\n return (\n \n \n \n \n {bookingRoutes.map(route => (\n // Render more s with the same paths as\n // above, but different components this time.\n {\n return (\n \n \n\n {!isTabletOrMobile && (\n
\n \n \n );\n};\n\nexport default BookingWizard;\n","import { NavItem } from 'reactstrap';\nimport { NavLink, useParams } from 'react-router-dom';\nimport { User, Mail, CheckSquare, Heart } from 'react-feather';\nimport Avatar from '@components/avatar';\nimport ReactDOM from 'react-dom';\nimport { useMediaQuery } from 'react-responsive';\nimport themeConfig from '@configs/themeConfig';\nimport useShop from '@hooks/useShop';\nimport useUserState from '@hooks/useUserState';\nimport ShopDefaultAvatar from '@src/assets/images/logo/OLI_APP_4C_LTBG.png';\n\nconst AppointmentsLeftSide = () => {\n const [user] = useUserState();\n const isTabletOrMobile = useMediaQuery({ query: '(max-width: 991px)' });\n const params = useParams();\n const shop = useShop();\n\n return isTabletOrMobile && document.getElementById('wrapper') ? (\n ReactDOM.createPortal(\n <>\n \n
\n
\n
\n
\n
\n
{shop?.name} \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
} src={user?.avatar} className=\"mb-1\" color=\"primary\" />\n
{user?.name} \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 {date.format('MMM')} \n {date.format('DD')} \n {date.format(HOUR_FORMAT)} \n \n
\n \n \n {!isEmpty(data?.items) && (\n
\n {getEffectiveAppointmentStatus({ isPast: isAppointmentPast, status: data.status })}\n \n )}\n
\n \n {data?.items?.map((item, index) => (\n \n {item.metadata?.productName}
\n \n {item.metadata?.providerName} \n \n {item.metadata?.productTime}\n mins \n \n {/* ${item.metadata?.productCost} */}\n
\n \n \n );\n};\nexport default AppointmentItem;\n","import { useState } from 'react';\nimport { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Spinner } from 'reactstrap';\nimport { useQuery } from 'react-query';\nimport { getBookingAppointments } from '@apis/booking.api';\nimport useUserState from '@hooks/useUserState';\nimport AppointmentItem from './AppointmentItem';\nimport qs from 'query-string';\nimport useShop from '../../../../../utility/hooks/useShop';\nimport { borderRadius } from 'polished';\n\nconst Appointments = ({ history }) => {\n const shop = useShop();\n const params = qs.parse(history.location.search);\n const [tab, setTab] = useState(params.tab || 'upcoming');\n const [user] = useUserState();\n const { data, isLoading } = useQuery(\n ['getAppointments', tab],\n async () => {\n const { data } = await getBookingAppointments(user?.id, { type: tab, size: 1000 });\n return data.data;\n },\n {\n enabled: !!user?.id,\n }\n );\n\n const { content: appointments } = data || {};\n\n const onItemClick = id => {\n history.push(`/${id}`);\n };\n\n return (\n \n \n My Appointments \n \n
\n \n {\n setTab('upcoming');\n history.replace('?tab=upcoming');\n }}\n >\n Upcoming\n \n \n \n {\n setTab('history');\n history.replace('?tab=history');\n }}\n >\n Past\n \n \n \n
\n \n {isLoading && (\n \n
\n )}\n {!isLoading && appointments?.length === 0 && Nothing to see here yet!
}\n {appointments?.map(item => {\n return (\n onItemClick(item.id)} timezone={shop?.timezone} />\n );\n })}\n \n \n {isLoading && (\n \n
\n )}\n {!isLoading && appointments?.length === 0 && Nothing to see here yet!
}\n {appointments?.map(item => (\n onItemClick(item.id)} timezone={shop?.timezone} />\n ))}\n \n \n
\n \n );\n};\n\nexport default Appointments;\n","import { atom } from 'recoil';\n\nconst confirmBox = {\n show: false,\n title: '',\n message: '',\n isConfirm: false,\n};\n\nconst confirmBoxState = atom({\n key: 'confirmBox',\n default: confirmBox,\n});\n\nexport default confirmBoxState;\n","// ** Third Party Components\nimport { Fragment } from 'react'\nimport Proptypes from 'prop-types'\nimport classnames from 'classnames'\nimport { Spinner } from 'reactstrap'\n\nimport './ui-loader.scss'\n\nconst UILoader = props => {\n const { children, blocking, loader, className, tag, overlayColor } = props\n\n const Tag = tag\n\n return (\n \n {children}\n {blocking ? (\n \n \n {loader}
\n \n ) : null}\n \n )\n}\n\nexport default UILoader\n\nUILoader.defaultProps = {\n tag: 'div',\n blocking: false,\n loader: \n \n My Account \n \n \n \n );\n};\n\nexport default MyAccount;\n","import { useMemo, useState } from 'react';\nimport { Button, Card, CardBody, CardHeader, Spinner } from 'reactstrap';\nimport { useQuery, useMutation } from 'react-query';\nimport { getAppointmentDetail, cancelAppointment } from '@apis';\nimport useConfirm from '@hooks/useConfirm';\nimport { useParams } from 'react-router';\nimport momentTz from 'moment-timezone';\nimport UILoader from '@components/ui-loader';\nimport toast from '@components/toast';\nimport { ChevronLeft, Phone } from 'react-feather';\nimport { chain, uniqBy } from 'lodash';\nimport useShop from '../../../../../utility/hooks/useShop';\nimport cn from 'classnames';\nimport { getEffectiveAppointmentStatus } from '../../../../../utility/Utils';\nimport NavbarSms from '../../../../../@core/layouts/components/navbar/NavbarSms';\n\nconst AppointmentDetail = ({ history }) => {\n const params = useParams();\n const { confirm } = useConfirm();\n const shop = useShop();\n const tz = useMemo(() => shop?.timezone || momentTz.tz.guess(), [shop]);\n const clientId = window.location.pathname.split('/')[1];\n const [isLoadingCancellation, setIsLoadingCancellation] = useState(false);\n\n const { data, isLoading } = useQuery(\n ['getAppointmentDetail'],\n async () => {\n const { data } = await getAppointmentDetail(params.appointmentId);\n return data.data;\n },\n {\n enabled: !!params.appointmentId,\n cacheTime: 0,\n }\n );\n\n const isClientOnlineCancellationEnabled = useMemo(() => {\n return shop?.feature_settings?.client_online_cancellation_enabled !== undefined &&\n shop.feature_settings.client_online_cancellation_enabled === true;\n });\n\n const formatPhoneNumber = (phoneNumber) => {\n if (!phoneNumber) return '';\n return [\n phoneNumber.slice(0, 3),\n phoneNumber.slice(3, 6),\n phoneNumber.slice(6)\n ].join('-');\n };\n\n const productId = useMemo(() => data?.items?.map(item => item?.metadata?.productId), [data]);\n const isAppointmentPast = useMemo(\n () => data?.fromDate && momentTz(data?.fromDate).tz(tz).isBefore(momentTz(new Date()).tz(tz)),\n [data?.fromDate]\n );\n\n const cancelAppointmentMutation = useMutation(cancelAppointment);\n\n const isDeclineOrCancel = useMemo(() => ['DECLINED', 'DELETED'].includes(data?.status), [data?.status]);\n\n const groupByStaff = chain(data?.items)\n .groupBy('providerId')\n .mapValues(arr => {\n const result = arr.reduce(\n (res, item) => {\n res.provider = { providerId: item.metadata?.providerId, providerName: item.metadata?.providerName };\n res.products = uniqBy([...res.products, item], 'metadata.productId');\n return res;\n },\n { staff: null, products: [] }\n );\n return result;\n })\n .value();\n\n const handleDeleteEvent = async () => {\n const isConfirm = await confirm({ confirmButtonColor: 'danger', title: 'Are you sure you want to cancel this appointment?' });\n if (isConfirm) {\n setIsLoadingCancellation(true);\n cancelAppointmentMutation.mutate({ id: data.id, source: 'CUSTOMER_SITE' },\n {\n onSuccess: (...args) => {\n toast.success('Appointment canceled');\n history.push('/');\n setIsLoadingCancellation(false);\n },\n onError: (...args) => {\n setIsLoadingCancellation(false);\n }\n }\n );\n }\n };\n\n return (\n \n \n \n \n history.goBack()}>\n \n
{momentTz(data?.fromDate).tz(tz).format('DD, MMM YYYY - hh:mma')} \n \n \n \n <>\n {Object.values(groupByStaff).map((item, index) => {\n return (\n \n
\n
Clinician:
\n
\n {item.provider?.providerName}\n
\n
\n
\n
Appointment Type:
\n
\n {item.products.map((product, index) => (\n
\n
\n {product.metadata.productName}\n
\n
\n ))}\n
\n
\n
\n
Status:
\n
\n \n {getEffectiveAppointmentStatus({ isPast: isAppointmentPast, status: data?.status })}\n \n
\n
\n
\n {isDeclineOrCancel || isAppointmentPast ? (\n
{\n window.location.replace(`/${clientId}?appointment=${productId.join(',')}`);\n }}\n >\n Book again\n \n ) : (\n <>\n {isClientOnlineCancellationEnabled ? (\n \n {!isLoadingCancellation && (\n <>\n Cancel appointment\n \n )}\n {isLoadingCancellation && (\n <>\n Cancelling...\n \n ) : (\n \n If you need to cancel your appointment, please call us at:
\n \n \n \n \n );\n};\n\nexport default AppointmentDetail;\n","import { forwardRef } from 'react';\n\n// ** React select\nimport ReactSelect from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\n\n// ** APIs\n\nconst Select = forwardRef(({ onChange = () => {}, minHeight, styles, isCreatable, ...rest }, ref) => {\n const Tag = isCreatable ? CreatableSelect : ReactSelect;\n\n return (\n ({\n ...provided,\n minHeight: minHeight || 28,\n border: '1px solid #dddddd',\n borderRadius: '0.357rem',\n }),\n dropdownIndicator: provided => ({\n ...provided,\n padding: '2px 4px',\n }),\n placeholder: provided => ({\n ...provided,\n fontSize: 12,\n }),\n singleValue: provided => ({\n ...provided,\n fontSize: 12,\n }),\n option: provided => ({\n ...provided,\n fontSize: 12,\n color: '#433B54',\n }),\n valueContainer: provided => ({\n ...provided,\n paddingTop: 0,\n paddingBottom: 0,\n }),\n menu: provided => ({ ...provided, zIndex: 10 }),\n ...(styles || {}),\n }}\n onChange={onChange}\n {...rest}\n />\n );\n});\n\nexport default Select;\n","import { useState, useEffect, forwardRef } from 'react';\nimport { FormText, Row, Col } from 'reactstrap';\nimport { get, isEqual } from 'lodash';\nimport Flatpickr from 'react-flatpickr';\nimport { DATE_FORMAT_FRIENDLY, MOMENT_DATE_FORMAT_FRIENDLY } from '@utils';\nimport Select from '../select';\nimport './input-date-time.scss';\nimport momentTz from 'moment-timezone';\n\nconst InputDateTime = forwardRef(({ timeOptions, onChange, errorMessage, onDateChange, value, minDate, disable }, ref) => {\n const [date, setDate] = useState(value?.date);\n const [time, setTime] = useState(value?.time);\n\n useEffect(() => {\n const equal = isEqual(\n {\n date,\n time,\n },\n value\n );\n\n if (equal) return;\n\n if (!!date && !!time && !equal) {\n onChange({\n date,\n time,\n });\n\n return;\n }\n\n onChange(null);\n }, [date, time]);\n\n const handleChange = (field, value) => {\n switch (field) {\n case 'date':\n setDate(value);\n onDateChange(value);\n if (!value) {\n setTime(null);\n }\n case 'time':\n setTime(value);\n default:\n }\n };\n\n return (\n <>\n \n {\n handleChange('date', get(value, '0'));\n }}\n value={date}\n ref={ref}\n />\n \n ({\n ...provided,\n minHeight: 42,\n border: '1px solid #dddddd',\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n }}\n onChange={newValue => handleChange('time', newValue)}\n value={time}\n />\n \n
\n {errorMessage && (\n \n \n {errorMessage}\n \n \n
\n )}\n \n );\n});\n\nexport default InputDateTime;\n","import { Controller } from 'react-hook-form';\nimport InputDateTime from './input-date-time';\n\nconst FormDateTime = ({ name, control, onChange, ...props }) => {\n return (\n {\n return (\n {\n onChange?.(value);\n field.onChange(value);\n }}\n />\n );\n }}\n />\n );\n};\n\nexport default FormDateTime;\n","import { getTimeoffs, searchTimes } from '@apis';\nimport FormDateTime from '@components/form-date-time';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport { chain, filter, findLast, flattenDeep, isEmpty, uniq, uniqBy } from 'lodash';\nimport momentTz from 'moment-timezone';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { useQuery } from 'react-query';\nimport { Button, Form, FormGroup, Input, Label, Spinner } from 'reactstrap';\nimport * as yup from 'yup';\nimport { useStaffDetailQuery } from '../../../../../queries/staff.query';\nimport { MOMENT_DATE_FORMAT_FRIENDLY, YEAR_MONTH_DATE_HOUR_FORMAT, YEAR_MONTH_DATE_FORMAT } from '../../../../../utility/Constant';\nimport useShop from '../../../../../utility/hooks/useShop';\nimport { numberToString } from '../../../../../utility/Utils';\n\nconst detailSchema = yup.object().shape({\n date: yup\n .mixed()\n .test(\n 'is-date',\n 'Please select a valid date and time',\n value => !!value?.date && !!value?.time && momentTz(`${momentTz(value.date).format('YYYY-MM-DD')} ${value.time.value}`).isValid()\n ),\n note: yup.string().max(255, 'Please enter within 255 characters').nullable(),\n});\n\nconst RescheduleForm = ({ appointment, onSubmit, isUpdatingAppointment }) => {\n const [startDate, setStartDate] = useState(appointment?.fromDate ? momentTz(appointment?.fromDate).toDate() : null);\n const shop = useShop();\n\n const bookingLeadTime = useMemo(() => shop?.metadata?.bookingLeadTime || 0, [shop]);\n\n useEffect(() => {\n if (shop?.timezone) {\n momentTz.tz.setDefault(shop?.timezone);\n }\n }, [shop]);\n\n const diffOffset = useMemo(() => {\n const currentOffset = momentTz().tz(momentTz.tz.guess()).utcOffset();\n const defaultOffset = momentTz().tz(shop?.timezone).utcOffset();\n return currentOffset - defaultOffset || 0;\n }, [shop]);\n\n const groupByStaff = useMemo(\n () =>\n chain(appointment?.items)\n .groupBy('providerId')\n .mapValues(arr => {\n const result = arr.reduce(\n (res, item) => {\n res.provider = { providerId: item.metadata?.providerId, providerName: item.metadata?.providerName };\n res.products = uniqBy([...res.products, item], 'metadata.productId');\n return res;\n },\n { staff: null, products: [] }\n );\n return result;\n })\n .value(),\n [appointment]\n );\n\n const {\n control,\n formState: { errors, isDirty },\n handleSubmit,\n } = useForm({\n resolver: yupResolver(detailSchema),\n defaultValues: {\n date: appointment?.fromDate\n ? {\n date: momentTz(appointment?.fromDate).toDate(),\n time: {\n label: momentTz(appointment?.fromDate).format('HH:mm'),\n value: momentTz(appointment?.fromDate).format('HH:mm'),\n },\n }\n : {\n date: null,\n time: null,\n },\n note: appointment?.note || '',\n },\n });\n\n const { data: timeData } = useQuery(\n ['getTime', startDate],\n async () => {\n const res = await searchTimes({\n date: momentTz(startDate).tz(momentTz.tz.guess()).add(diffOffset, 'minutes').toISOString(),\n providerIds: uniq(appointment?.items.map(service => service.providerId)),\n productIds: uniq(\n flattenDeep(\n Object.values(groupByStaff).map(item =>\n item.products.map(product => [\n product?.metadata?.productId,\n ...(product?.metadata?.includedItems?.map(p => p?.metadata?.productId) || []),\n ])\n )\n )\n ).filter(item => !!item),\n });\n return res.data.data;\n },\n {\n enabled: !!startDate,\n }\n );\n const timesOptions = useMemo(\n () =>\n timeData\n ?.filter(item => item.enabled && momentTz(item.dateTime).isSameOrAfter(momentTz().add(bookingLeadTime, 'minutes')))\n .map(item => ({ ...item, label: item.value, value: item.value })),\n [timeData, appointment, bookingLeadTime]\n );\n\n const { data: timeOffs, isFetching: isFetchingTimeOffs } = useQuery(\n ['timeOffs', appointment?.items?.[0]?.providerId],\n async () => {\n const { data } = await getTimeoffs(appointment?.items?.[0]?.providerId, 0, 1000);\n return data.data.content;\n },\n {\n enabled: !!appointment?.items?.[0]?.providerId,\n }\n );\n\n const { data: providerMetadata, isFetching: isFetchingProvider } = useStaffDetailQuery(appointment?.items?.[0]?.providerId, {\n enabled: !!appointment?.items?.[0]?.providerId,\n select: res => res.data?.data?.metadata,\n });\n\n const staffWorkingHours = useMemo(() => {\n const { businessHours: staffBusinessHours = [] } = providerMetadata || {};\n if (isEmpty(staffBusinessHours)) return {};\n const dateTime = momentTz(startDate).tz(momentTz.tz.guess());\n const day = dateTime.weekday() || 7;\n const date = dateTime.format('YYYY-MM-DD');\n const { startHour, endHour, startMinute, endMinute } = findLast(staffBusinessHours, { day });\n const startTime = momentTz(`${date} ${numberToString(startHour)}:${numberToString(startMinute)}`);\n const endTime = momentTz(`${date} ${numberToString(endHour)}:${numberToString(endMinute)}`);\n return { startTime, endTime };\n }, [providerMetadata, startDate]);\n\n const invalidTimes = useMemo(() => {\n const { startTime, endTime } = staffWorkingHours;\n return filter(\n timesOptions,\n time => momentTz(time.dateTime).isSameOrAfter(startTime) && momentTz(time.dateTime).isSameOrBefore(endTime)\n );\n }, [timesOptions, staffWorkingHours]);\n\n const isOfflineDate = useCallback(\n dateItem => {\n const { bookingHours = [], holidayHours = [] } = shop?.metadata || {};\n const { businessHours: staffBusinessHours = [] } = providerMetadata || {};\n const day = momentTz(dateItem).tz(momentTz.tz.guess()).weekday();\n const isOffline =\n bookingHours?.some(item => {\n if (item.day === 7 && day === 0) {\n return item.offline;\n }\n\n return item.day === day && item.offline;\n }) ||\n staffBusinessHours?.some(item => {\n if (item.day === 7 && day === 0) {\n return item.offline;\n }\n\n return item.day === day && item.offline;\n }) ||\n holidayHours?.some(item => momentTz(dateItem).isSame(item?.date, 'day') && item?.offline) ||\n (timeOffs || []).some(\n item => momentTz(dateItem).isSameOrAfter(item.fromDate, 'day') && momentTz(dateItem).isSameOrBefore(item.toDate, 'day')\n );\n\n return isOffline;\n },\n [shop, providerMetadata, timeOffs, momentTz]\n );\n\n return (\n \n );\n};\n\nexport default RescheduleForm;\n","import axios from 'axios';\n\nexport const getTimeoffs = (id, page, size) => {\n return axios.get(`/appointment/v1/providers/${id}/time-off?page=${page}&size=${size}`);\n};\nexport const createTimeoffs = (data, id) => {\n return axios.post(`/appointment/v1/providers/${id}/time-off`, data);\n};\nexport const updateTimeoffs = (data, id, idTimeOff) => {\n return axios.put(`/appointment/v1/providers/${id}/time-off/${idTimeOff}`, data);\n};\nexport const deleteTimeoff = (idStaff, idTimeOff) => {\n return axios.delete(`/appointment/v1/providers/${idStaff}/time-off/${idTimeOff}`);\n};\n// export const getProvider = id => axios.get(`${API_TENANT_PUBLIC_URL}/providers/${id}`);\n","import { lazy } from 'react';\nimport { lazyRetry } from '../../../App';\nimport Appointments from './components/Appointments';\nimport AppointmentDetail from './components/AppointmentDetail';\nimport AppointmentReschedule from './components/AppointmentReschedule';\n\nexport const appointmentsRoutes = [\n {\n path: '/',\n exact: true,\n className: '',\n component: Appointments,\n id: 'appointment-list',\n },\n {\n path: '/:appointmentId',\n exact: true,\n className: '',\n component: AppointmentDetail,\n id: 'appointment-detail',\n },\n {\n path: '/:appointmentId/reschedule',\n exact: true,\n className: '',\n component: AppointmentReschedule,\n id: 'appointment-reschedule',\n },\n];\n","import { Button, Card, CardBody, CardHeader } from 'reactstrap';\nimport { useQuery, useMutation } from 'react-query';\nimport { getAppointmentDetail, cancelAppointment, updateAppointment, getShopInfo } from '@apis';\nimport { useParams } from 'react-router';\nimport momentTz from 'moment-timezone';\nimport { ChevronLeft } from 'react-feather';\nimport { useRecoilState, useSetRecoilState } from 'recoil';\nimport UILoader from '@components/ui-loader';\nimport toast from '@components/toast';\nimport useUserState from '@hooks/useUserState';\nimport useJwt from '@src/@core/auth/jwt/useJwt';\nimport externalKeyState from '@recoil/atoms/auth/externalKey';\nimport '@styles/react/libs/react-select/_react-select.scss';\nimport '@styles/react/libs/flatpickr/flatpickr.scss';\nimport RescheduleForm from './RescheduleForm';\nimport shopState from '../../../../../recoil/atoms/current-shop';\nimport useMomentTimezone from '../../../../../utility/hooks/useMomentTimezone';\n\nconst AppointmentReschedule = ({ history, clientId }) => {\n const { jwt } = useJwt();\n const params = useParams();\n const [user] = useUserState();\n const setShop = useSetRecoilState(shopState);\n jwt.setClientId(clientId);\n const momentTimezone = useMomentTimezone();\n\n const { data, isLoading, refetch } = useQuery(['getAppointmentDetail', params.appointmentId], async () => {\n const { data } = await getAppointmentDetail(params.appointmentId);\n return data.data;\n });\n\n const [externalKey] = useRecoilState(externalKeyState);\n\n useQuery(\n ['shopInfo', user, externalKey],\n async () => {\n const { data } = await getShopInfo(clientId);\n const { phoneNumber, phoneCode } = data.data;\n const shopInfo = { ...data.data, ...(phoneNumber && phoneCode && { phone: `+${phoneCode}${phoneNumber}` }) };\n setShop(shopInfo);\n return shopInfo;\n },\n {\n enabled: !!externalKey || !!user,\n }\n );\n\n const upsertAppointmentMutation = useMutation(\n obj => {\n const { date, note } = obj;\n const { id, label, reminderSMS, reminderEmail } = data;\n return updateAppointment({\n id,\n label,\n note,\n isReminderSMS: reminderSMS,\n isReminderEmail: reminderEmail,\n userId: user?.id,\n note,\n date: momentTimezone(`${momentTimezone(date?.date).tz(momentTz.tz.guess()).format('YYYY-MM-DD')} ${date?.time?.value}`)\n .utc()\n .toISOString(),\n items: data.items.map(item => ({\n id: item.id,\n productId: item.metadata.productId,\n productTime: item.metadata.productTime,\n anyone: !item.providerId,\n providerId: item.providerId,\n })),\n source: 'BOOKING_SITE',\n });\n },\n {\n onSuccess: (res, variables) => {\n toast.success('Appointment Updated');\n refetch();\n history.push('/');\n },\n }\n );\n\n const onSubmit = values => {\n upsertAppointmentMutation.mutate(values);\n // history.push(`/${data?.id}`);\n };\n\n return (\n \n \n \n history.goBack()}>\n \n Reschedule appointment \n \n \n {!isLoading && (\n \n \n \n );\n};\n\nexport default AppointmentReschedule;\n","import { Suspense } from 'react';\n// ** Third Party Components\nimport { Row, Col, Container } from 'reactstrap';\nimport { BrowserRouter as Router, Switch, Route, useParams } from 'react-router-dom';\nimport useShop from '@hooks/useShop';\nimport '@styles/react/pages/page-booking.scss';\nimport ShopDefaultAvatar from '@src/assets/images/logo/OLI_APP_4C_LTBG.png';\nimport AppointmentsLeftSide from './components/AppointmentsLeftSide';\nimport { appointmentsRoutes } from './routes';\nimport { useQuery } from 'react-query';\nimport { getShopInfo } from '@apis';\nimport { useSetRecoilState } from 'recoil';\nimport shopState from '../../../recoil/atoms/current-shop';\n\nconst AppointmentsApp = () => {\n const shop = useShop();\n const params = useParams();\n const clientId = window.location.pathname.split('/')[1];\n const setShop = useSetRecoilState(shopState);\n\n useQuery('shopInfo', () => getShopInfo(clientId), {\n enabled: !!clientId,\n select: res => res.data?.data,\n onSuccess: res => {\n setShop(res);\n },\n });\n\n return (\n <>\n \n \n \n \n \n {appointmentsRoutes.map(route => (\n // Render more s with the same paths as\n // above, but different components this time.\n {\n return (\n \n \n );\n }}\n />\n ))}\n \n \n \n
\n \n \n );\n};\n\nexport default AppointmentsApp;\n","import { NavItem } from 'reactstrap';\nimport { NavLink, useParams } from 'react-router-dom';\nimport { User, Mail, CheckSquare, Heart } from 'react-feather';\nimport Avatar from '@components/avatar';\nimport ReactDOM from 'react-dom';\nimport { useMediaQuery } from 'react-responsive';\nimport themeConfig from '@configs/themeConfig';\nimport useShop from '@hooks/useShop';\nimport useUserState from '@hooks/useUserState';\nimport ShopDefaultAvatar from '@src/assets/images/logo/OLI_APP_4C_LTBG.png';\n\nconst MyAccountLeftSide = () => {\n const [user] = useUserState();\n const isTabletOrMobile = useMediaQuery({ query: '(max-width: 991px)' });\n const params = useParams();\n const shop = useShop();\n\n return isTabletOrMobile && document.getElementById('wrapper') ? (\n ReactDOM.createPortal(\n <>\n \n
\n
\n
\n
\n
\n
{shop?.name} \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
} src={user?.avatar} className=\"mb-1\" color=\"primary\" />\n
{user?.name} \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 {accountRoutes.map(route => (\n // Render more s with the same paths as\n // above, but different components this time.\n {\n return (\n \n \n );\n }}\n />\n ))}\n \n \n \n
\n \n \n );\n};\n\nexport default AccountApp;\n","import { NavItem } from 'reactstrap';\nimport { NavLink, useParams } from 'react-router-dom';\nimport { User, Mail, CheckSquare, Heart } from 'react-feather';\nimport ReactDOM from 'react-dom';\nimport { useMediaQuery } from 'react-responsive';\nimport themeConfig from '@configs/themeConfig';\nimport useShop from '@hooks/useShop';\nimport useUserState from '@hooks/useUserState';\nimport ShopDefaultAvatar from '@src/assets/images/logo/OLI_APP_4C_LTBG.png';\n\nconst MyPetsLeftSide = () => {\n const [user] = useUserState();\n const isTabletOrMobile = useMediaQuery({ query: '(max-width: 991px)' });\n const params = useParams();\n const shop = useShop();\n\n return isTabletOrMobile && document.getElementById('wrapper') ? (\n ReactDOM.createPortal(\n <>\n \n
\n
\n
\n
\n
\n
{shop?.name} \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
{user?.name} \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 My Pets at {shop?.name} \n \n {!isLoading && !isLoadingClient ? (\n <>\n
\n {displayHeader()}\n \n {!!client && patients.length > 0 && (\n <>\n
\n {patients.map((patient, index) => (\n
\n
setActivePatientId(patient.id)}\n >\n {getSpeciesEmoji(patient?.species_id)}
\n \n
{patient?.name}
\n
\n ))}\n
\n
\n \n {\n setTab('vaccinations');\n }}\n >\n Vaccinations\n \n \n \n {\n setTab('medications');\n }}\n >\n Medications\n \n \n \n
\n \n \n {activePatientId && !!vaccinations.length && (\n \n Email Vaccination History\n Book Appointment\n \n )}\n
\n \n {vaccinations?.map((vaccination, index) => (\n
\n {vaccination?.description}
\n \n Issued:
\n {formatDate(vaccination?.issue_date)}
\n \n \n {formatExpireLabel(vaccination?.expiration_date)}
\n {formatDate(vaccination?.expiration_date)}
\n \n \n
\n )}\n {!vaccination?.expired && vaccination?.expires_soon && (\n
\n )}\n {!vaccination?.expired && !vaccination?.expires_soon && (\n
\n )}\n \n \n
\n )}\n {!isLoadingVaccinations && vaccinations?.length === 0 && !!activePatientId && (\n Nothing to see here yet!
\n )}\n {!activePatientId && (\n Select a pet above to see details!
\n )}\n \n \n {isMedicationRefillEnabled && !isLoadingMedications && medications?.length === 0 && !!activePatientId && (\n
\n
onClickRequestRefill(null)}\n >\n Request Refill\n \n \n )}\n {medications?.map((medication, index) => (\n \n {medication?.description}
\n \n Issued:
\n {formatDate(medication?.issue_date)}
\n \n \n Instructions: {medication?.instructions} \n \n onClickRequestRefill(medication)}\n >\n Request Refill\n \n )}\n \n \n
\n )}\n {!isMedicationRefillEnabled && !isLoadingMedications && medications?.length === 0 && !!activePatientId && (\n Nothing to see here yet!
\n )}\n {!activePatientId && (\n Select a pet above to see details!
\n )}\n \n \n \n setEmailModalOpen(!emailModalOpen)}\n >\n \n Email Vaccination History\n \n \n Enter an email address to send {patients.find(p => p.id === activePatientId)?.name}'s vaccination history.
\n onChangeEmail(e.target.value)}\n style={{ borderRadius: '25px' }}\n />\n {errors.email && (\n {errors.email}
\n )}\n \n setEmailModalOpen(false)}\n style={{ borderRadius: '25px', fontFamily: 'Spartan', fontWeight: 'bold' }}\n >\n Close\n \n \n Send\n \n
\n \n \n setRefillModalOpen(!refillModalOpen)}\n >\n \n Request a Refill\n \n \n {selectedMedication?.description ? (\n Press send below to notify us that you'd like to refill {patients.find(p => p.id === activePatientId)?.name}'s {selectedMedication?.description}.
\n ) : (\n Please let us know below which medication you need refilled for {patients.find(p => p.id === activePatientId)?.name} , as well as anything else you'd like to tell us:
\n )}\n setRefillMessage(e.target.value)}\n style={{ borderRadius: '25px' }}\n />\n \n setRefillModalOpen(false)}\n style={{ borderRadius: '25px', fontFamily: 'Spartan', fontWeight: 'bold' }}\n >\n Close\n \n \n Send\n \n
\n \n \n \n \n )}\n {(!client || patients.length === 0) && (\n <>\n {!!client && patients.length === 0 && (\n You currently have no active pets at {shop?.name}. Please give us a call at {formatPhoneNumber(shop?.phoneNumber)} , or schedule an appointment using the button below.
\n )}\n \n \n schedule now
\n \n )}\n \n ) : (\n \n \n );\n};\n\nexport default MyPets;\n","import BookingWizard from '../../views/apps/booking';\nimport AppointmentsApp from '../../views/apps/appointments';\nimport AccountApp from '../../views/apps/account';\nimport PetsApp from '../../views/apps/pets';\n\nconst AppRoutes = [\n {\n path: '/:clientId/account',\n component: AccountApp,\n exact: true,\n meta: {\n menuHidden: true,\n },\n },\n {\n path: '/:clientId/pets',\n component: PetsApp,\n exact: true,\n meta: {\n menuHidden: true,\n publicRoute: true,\n },\n },\n {\n path: ['/:clientId/appointments', '/:clientId/appointments/:appointmentId', '/:clientId/appointments/:appointmentId/reschedule'],\n component: AppointmentsApp,\n exact: true,\n meta: {\n menuHidden: true,\n },\n },\n {\n path: ['/:clientId', '/:clientId/:paymentId'],\n component: BookingWizard,\n exact: true,\n meta: {\n menuHidden: true,\n publicRoute: true,\n },\n },\n];\n\nexport default AppRoutes;\n","import { Suspense, useEffect } from 'react';\n// ** Third Party Components\nimport { Row, Col, Container } from 'reactstrap';\nimport { BrowserRouter as Router, Switch, Route, useParams } from 'react-router-dom';\nimport '@styles/react/pages/page-booking.scss';\nimport ShopDefaultAvatar from '@src/assets/images/logo/OLI_APP_4C_LTBG.png';\nimport MyPetsLeftSide from './components/MyPetsLeftSide';\nimport { petsRoutes } from './routes';\nimport { useQuery } from 'react-query';\nimport { getExternalKey, getShopInfo } from '../../../apis';\nimport { useRecoilState } from 'recoil';\nimport shopState from '../../../recoil/atoms/current-shop';\nimport externalKeyState from '../../../recoil/atoms/auth/externalKey';\nimport useJwt from '@src/@core/auth/jwt/useJwt';\nimport useUserState from '../../../utility/hooks/useUserState';\nimport isEmpty from 'lodash/isEmpty';\n\nconst PetsApp = () => {\n const params = useParams();\n const { jwt } = useJwt();\n const [user] = useUserState();\n const [externalKey, setExternalKey] = useRecoilState(externalKeyState);\n const [shop, setShop] = useRecoilState(shopState);\n\n const beginLogin = () => {\n const clientId = jwt.getClientId();\n window.location.href = `/${clientId}?redirect=pets`;\n };\n\n useEffect(() => {\n if (!user) {\n beginLogin();\n }\n }, [user]);\n\n useQuery(\n 'externalKey',\n async () => {\n const { data } = await getExternalKey();\n setExternalKey(data.data?.jwtToken);\n jwt.setToken(data.data?.jwtToken);\n return data.data?.jwtToken;\n },\n {\n enabled: !user && !externalKey && !!jwt.getClientId(),\n }\n );\n useQuery(\n 'shopInfo',\n async () => {\n const { data } = await getShopInfo(params?.clientId);\n const { phoneNumber, phoneCode } = data.data;\n const shopInfo = { ...data.data, ...(phoneNumber && phoneCode && { phone: `+${phoneCode}${phoneNumber}` }) };\n setShop(shopInfo);\n return shopInfo;\n },\n {\n enabled: (!!externalKey || !!user) && isEmpty(shop),\n }\n );\n\n return (\n <>\n \n \n \n \n \n {petsRoutes.map(route => (\n // Render more s with the same paths as\n // above, but different components this time.\n {\n return (\n \n \n );\n }}\n />\n ))}\n \n \n \n
\n \n \n );\n};\n\nexport default PetsApp;\n","// ** Routes Imports\nimport AppRoutes from './Apps';\n\n// ** Document title\nconst TemplateTitle = '%s - Vet';\n\n// ** Default Route\nconst DefaultRoute = '/';\n\n// ** Merge Routes\nconst Routes = [...AppRoutes];\n\nexport { DefaultRoute, TemplateTitle, Routes };\n","//** React Imports\nimport { useState, useEffect } from 'react'\n\n// ** Configs\nimport themeConfig from '@configs/themeConfig'\n\nexport const useSkin = () => {\n // ** State\n const [skin, setSkin] = useState(() => {\n try {\n // ** Get from local storage by key\n const item = window.localStorage.getItem('skin')\n // ** Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : themeConfig.layout.skin\n } catch (error) {\n // ** If error also return initialValue\n console.log(error)\n return themeConfig.layout.skin\n }\n })\n\n // ** Return a wrapped version of useState's setter function\n const setValue = value => {\n try {\n // ** Allow value to be a function so we have same API as useState\n const valueToStore = value instanceof Function ? value(skin) : value\n // ** Set state\n setSkin(valueToStore)\n // ** Save to local storage\n window.localStorage.setItem('skin', JSON.stringify(valueToStore))\n } catch (error) {\n // ** A more advanced implementation would handle the error case\n console.log(error)\n }\n }\n\n useEffect(() => {\n // ** Get Body Tag\n const element = window.document.body\n\n // ** Define classnames for skins\n const classNames = {\n dark: 'dark-layout',\n bordered: 'bordered-layout',\n 'semi-dark': 'semi-dark-layout'\n }\n\n // ** Remove all classes from Body on mount\n element.classList.remove(...element.classList)\n\n // ** If skin is not light add skin class\n if (skin !== 'light') {\n element.classList.add(classNames[skin])\n }\n }, [skin])\n\n return [skin, setValue]\n}\n","// ** React Imports\nimport { useEffect, useState } from 'react'\n\n// ** Custom Hooks\nimport { useSkin } from '@hooks/useSkin'\n\nconst BlankLayout = ({ children, ...rest }) => {\n // ** Hooks\n const [skin, setSkin] = useSkin()\n\n // ** States\n const [isMounted, setIsMounted] = useState(false)\n\n //** ComponentDidMount\n useEffect(() => {\n setIsMounted(true)\n return () => setIsMounted(false)\n }, [])\n\n if (!isMounted) {\n return null\n }\n\n return (\n \n )\n}\n\nexport default BlankLayout\n","// ** React Imports\nimport { useState } from 'react'\n\n// ** Third Party Components\nimport Select from 'react-select'\nimport classnames from 'classnames'\nimport { Settings, X } from 'react-feather'\nimport { CustomInput, FormGroup } from 'reactstrap'\nimport PerfectScrollbar from 'react-perfect-scrollbar'\nimport { selectThemeColors } from '@utils'\n\n// ** Styles\nimport '@styles/react/libs/react-select/_react-select.scss'\n\nconst Customizer = props => {\n // ** Props\n const {\n skin,\n setSkin,\n isRtl,\n setIsRtl,\n layout,\n setLayout,\n navbarType,\n setNavbarType,\n footerType,\n setFooterType,\n navbarColor,\n setNavbarColor,\n isHidden,\n setIsHidden,\n contentWidth,\n setContentWidth,\n menuCollapsed,\n setMenuCollapsed,\n transition,\n setTransition\n } = props\n\n // ** State\n const [openCustomizer, setOpenCustomizer] = useState(false)\n\n // ** Toggles Customizer\n const handleToggle = e => {\n e.preventDefault()\n setOpenCustomizer(!openCustomizer)\n }\n\n // ** Render Layout Skin Options\n const renderSkinsRadio = () => {\n const skinsArr = [\n {\n name: 'light',\n label: 'Light',\n checked: skin === 'light'\n },\n {\n name: 'bordered',\n label: 'Bordered',\n checked: skin === 'bordered'\n },\n {\n name: 'dark',\n label: 'Dark',\n checked: skin === 'dark'\n },\n {\n name: 'semi-dark',\n label: 'Semi Dark',\n checked: skin === 'semi-dark'\n }\n ]\n\n return skinsArr.map((radio, index) => {\n const marginCondition = index !== skinsArr.length - 1\n\n if (layout === 'HorizontalLayout' && radio.name === 'semi-dark') {\n return null\n }\n\n return (\n setSkin(radio.name)}\n className={classnames({ 'mr-1': marginCondition })}\n />\n )\n })\n }\n\n // ** Render Navbar Colors Options\n const renderNavbarColors = () => {\n const colorsArr = ['white', 'primary', 'secondary', 'success', 'danger', 'info', 'warning', 'dark']\n\n return colorsArr.map(color => (\n setNavbarColor(color)}\n >\n ))\n }\n\n // ** Render Navbar Type Options\n const renderNavbarTypeRadio = () => {\n const navbarTypeArr = [\n {\n name: 'floating',\n label: 'Floating',\n checked: navbarType === 'floating'\n },\n {\n name: 'sticky',\n label: 'Sticky',\n checked: navbarType === 'sticky'\n },\n {\n name: 'static',\n label: 'Static',\n checked: navbarType === 'static'\n },\n {\n name: 'hidden',\n label: 'Hidden',\n checked: navbarType === 'hidden'\n }\n ]\n\n return navbarTypeArr.map((radio, index) => {\n const marginCondition = index !== navbarTypeArr.length - 1\n\n if (layout === 'HorizontalLayout' && radio.name === 'hidden') {\n return null\n }\n\n return (\n setNavbarType(radio.name)}\n className={classnames({ 'mr-1': marginCondition })}\n />\n )\n })\n }\n\n // ** Render Footer Type Options\n const renderFooterTypeRadio = () => {\n const footerTypeArr = [\n {\n name: 'sticky',\n label: 'Sticky',\n checked: footerType === 'sticky'\n },\n {\n name: 'static',\n label: 'Static',\n checked: footerType === 'static'\n },\n {\n name: 'hidden',\n label: 'Hidden',\n checked: footerType === 'hidden'\n }\n ]\n\n return footerTypeArr.map((radio, index) => {\n const marginCondition = index !== footerTypeArr.length - 1\n\n return (\n