`\n color: ${({ isValid, submitError, theme }) =>\n isValid\n ? theme.palette.extra.color.green\n : submitError\n ? theme.palette.error.dark\n : theme.palette.extra.color.grey.main};\n margin-left: ${({ theme }) => theme.spacing(1)}px;\n font-weight: bold;\n`;\n","import CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlined from '@material-ui/icons/CheckBoxOutlined';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React from 'react';\nimport { useTheme } from 'styled-components';\nimport { RuleContainer, RuleText, Title } from './styles';\n\ninterface passwordRule {\n text: string;\n isValid: (value: string) => boolean;\n}\n\nconst passwordRules: passwordRule[] = [\n {\n text: 'Pelo menos 8 caracteres',\n isValid: (password) => password.length >= 8,\n },\n {\n text: 'Uma letra maiúscula',\n isValid: (password) => /[A-Z]/.test(password),\n },\n {\n text: 'Uma letra minúscula',\n isValid: (password) => /[a-z]/.test(password),\n },\n {\n text: 'Um número',\n isValid: (password) => /[0-9]/.test(password),\n },\n {\n text: 'Um caractere especial (!, *, -, ?, @, /)',\n isValid: (password) => /[!@#$%&?.,;/\\* -]/.test(password),\n },\n];\n\ninterface PasswordRequirementsProps {\n password: string;\n validationError?: boolean;\n}\n\nconst PasswordRequirements = ({\n password,\n validationError = false,\n}: PasswordRequirementsProps) => {\n const styledTheme = useTheme();\n return (\n \n
Critérios para criar sua senha\n {passwordRules.map((rule, index) => {\n const isValid = rule.isValid(password);\n return (\n \n {isValid ? (\n \n ) : validationError ? (\n \n ) : (\n \n )}\n \n {rule.text}\n \n \n );\n })}\n \n );\n};\n\nexport default PasswordRequirements;\n","import { Typography } from '@material-ui/core';\nimport styled from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n color: ${({ theme }) => theme.palette.secondary.main};\n form {\n display: flex;\n flex: 1;\n flex-direction: column;\n }\n`;\n\nexport const PasswordInstructions = styled(Typography).attrs({\n variant: 'caption',\n})`\n margin: ${({ theme }) => theme.spacing(1)}px;\n`;\n\nexport const FooterContainer = styled.div`\n display: flex;\n justify-content: center;\n flex: 1;\n align-items: flex-end;\n`;\n","/**\n * https://medium.com/trainingcenter/mascara-de-cpf-com-react-javascript-a07719345c93\n * Will be of type ddd.ddd.ddd-dd\n */\nexport const cpfMask = (value: string) => {\n return value\n .replace(/\\D/g, '') // substitui qualquer caracter que nao seja numero por nada\n .replace(/(\\d{3})(\\d)/, '$1.$2') // captura 2 grupos de numero o primeiro de 3 e o segundo de 1, apos capturar o primeiro grupo ele adiciona um ponto antes do segundo grupo de numero\n .replace(/(\\d{3})(\\d)/, '$1.$2')\n .replace(/(\\d{3})(\\d{1,2})/, '$1-$2')\n .replace(/(-\\d{2})\\d+?$/, '$1'); // captura 2 numeros seguidos de um traço e não deixa ser digitado mais nada\n};\n\n/**\n * https://medium.com/reactbrasil/m%C3%A1scara-de-cnpj-com-react-regex-bafb58d2285e\n * Will be of type dd.ddd.ddd/dddd-dd\n */\nexport const cnpjMask = (value: string) => {\n return value\n .replace(/\\D+/g, '') // não deixa ser digitado nenhuma letra\n .replace(/(\\d{2})(\\d)/, '$1.$2') // captura 2 grupos de número o primeiro com 2 digitos e o segundo de com 3 digitos, apos capturar o primeiro grupo ele adiciona um ponto antes do segundo grupo de número\n .replace(/(\\d{3})(\\d)/, '$1.$2')\n .replace(/(\\d{3})(\\d)/, '$1/$2') // captura 2 grupos de número o primeiro e o segundo com 3 digitos, separados por /\n .replace(/(\\d{4})(\\d)/, '$1-$2')\n .replace(/(-\\d{2})\\d+?$/, '$1'); // captura os dois últimos 2 números, com um - antes dos dois números\n};\n\nexport const numberMask = (value: string) => {\n return value.replace(/\\D/g, ''); // substitui qualquer caracter que nao seja numero por nada\n};\n\nexport const floatMask = (value: string) => {\n return value.replace(/[^0-9.]/g, '').replace(/(\\..*)\\./g, '$1'); // substitui qualquer caracter que nao seja numero ou ponto por nada\n};\n\n// Will be of type ddddd-ddd\nexport const cepMask = (value: string) => {\n return value\n .replace(/\\D/g, '') // substitui qualquer caracter que nao seja numero por nada\n .replace(/(\\d{5})(\\d{1,3})/, '$1-$2')\n .replace(/(-\\d{3})\\d+?$/, '$1'); // captura 2 numeros seguidos de um traço e não deixa ser digitado mais nada\n};\n\n// Will be of type (dd) ddddd-dddd* or (dd) ddddd-dddd*\n// Or type 0800 ddd dddd\n// Warning: If first 2 digits are \"55\", they will be removed (brazil international code)\nexport const phoneMask = (value: string) => {\n let numberOnly = value.replace(/\\D/g, ''); // substitui qualquer caracter que nao seja numero por nada\n\n // Removes \"55\" if present\n if (value.startsWith('55') && value.length > 10) {\n numberOnly = removeDDI(numberOnly);\n }\n\n // Format 0800 xxx xxxx\n if (value.startsWith('08')) {\n return numberOnly.replace(/(\\d{4})(\\d{3})(\\d{1,4})(\\d*)/, '$1 $2 $3');\n } else if (value.length > 4) {\n return numberOnly\n .replace(/(\\d{2})(\\d{1,5})/, '($1) $2')\n .replace(/(\\d{4,5})(\\d{4})(\\d*)/, '$1-$2');\n }\n return numberOnly;\n};\n\nexport const removeDDI = (value: string) => {\n return value.slice(2);\n};\n\n/**\n * https://www.geradorcpf.com/javascript-validar-cpf.htm\n */\nexport function validateCpf(rawCpf = '') {\n const cpf = rawCpf.replace(/[^\\d]+/g, '');\n if (cpf === '') return true;\n // Elimina CPFs invalidos conhecidos\n if (\n cpf.length !== 11 ||\n cpf === '00000000000' ||\n cpf === '11111111111' ||\n cpf === '22222222222' ||\n cpf === '33333333333' ||\n cpf === '44444444444' ||\n cpf === '55555555555' ||\n cpf === '66666666666' ||\n cpf === '77777777777' ||\n cpf === '88888888888' ||\n cpf === '99999999999'\n )\n return false;\n // Valida 1o digito\n let add = 0;\n for (let i = 0; i < 9; i++) add += parseInt(cpf.charAt(i)) * (10 - i);\n let rev = 11 - (add % 11);\n if (rev === 10 || rev === 11) rev = 0;\n if (rev !== parseInt(cpf.charAt(9))) return false;\n // Valida 2o digito\n add = 0;\n for (let i = 0; i < 10; i++) add += parseInt(cpf.charAt(i)) * (11 - i);\n rev = 11 - (add % 11);\n if (rev === 10 || rev === 11) rev = 0;\n if (rev !== parseInt(cpf.charAt(10))) return false;\n return true;\n}\n\n/**\n * https://www.geradorcnpj.com/javascript-validar-cnpj.htm\n */\nexport function validateCnpj(rawCnpj = '') {\n const cnpj = rawCnpj.replace(/[^\\d]+/g, '');\n if (cnpj === '') return false;\n // Elimina CNPJs invalidos conhecidos\n if (\n cnpj.length !== 14 ||\n cnpj == '00000000000000' ||\n cnpj == '11111111111111' ||\n cnpj == '22222222222222' ||\n cnpj == '33333333333333' ||\n cnpj == '44444444444444' ||\n cnpj == '55555555555555' ||\n cnpj == '66666666666666' ||\n cnpj == '77777777777777' ||\n cnpj == '88888888888888' ||\n cnpj == '99999999999999'\n )\n return false;\n // Valida DVs\n let tamanho = cnpj.length - 2;\n let numeros = cnpj.substring(0, tamanho);\n const digitos = cnpj.substring(tamanho);\n let soma = 0;\n let pos = tamanho - 7;\n for (let i = tamanho; i >= 1; i--) {\n soma += parseInt(numeros.charAt(tamanho - i)) * pos--;\n if (pos < 2) pos = 9;\n }\n let resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);\n if (resultado !== parseInt(digitos.charAt(0))) return false;\n tamanho = tamanho + 1;\n numeros = cnpj.substring(0, tamanho);\n soma = 0;\n pos = tamanho - 7;\n for (let i = tamanho; i >= 1; i--) {\n soma += parseInt(numeros.charAt(tamanho - i)) * pos--;\n if (pos < 2) pos = 9;\n }\n resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);\n if (resultado !== parseInt(digitos.charAt(1))) return false;\n return true;\n}\n\nexport const nonAlphanumericString = (value: string) => {\n return value.replace(/[-|. ]/g, '');\n};\n\nexport const validatePasswordStrength = (value: string) => {\n // at least 8 characters\n // at least 1 number\n // at least 1 special character\n // at least 1 letter uppercase and 1 letter lowercase\n const regex = /(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%&?.,;/\\* -])[\\da-zA-Z!@#$%&?.,;/\\* -]{8,}/;\n return regex.test(value);\n};\n\n// Will be of type \"d minutos\"\nexport const durationMask = (value: string) => {\n // Resolve for exception when value is 1\n if (value === '1') {\n return '1 minuto';\n }\n // Resolve for other values\n return value\n .replace(/\\D/g, '') // substitui qualquer caracter que nao seja numero por nada\n .replace(/(\\d*)/, '$1 minutos');\n};\n\nexport const cardMask = (value: string) => {\n return value\n .replace(/\\D/g, '') // substitui qualquer caracter que nao seja numero por nada\n .replace(/^(\\d{4})(\\d)/, '$1 $2')\n .replace(/^(\\d{4})\\s(\\d{4})(\\d)/, '$1 $2 $3')\n .replace(/(\\d{4})\\s(\\d{4})\\s(\\d{4})(\\d)/, '$1 $2 $3 $4')\n .replace(/(\\s\\d{7})\\d+?$/, '$1'); // captura 7 numeros seguidos de um espaço e não deixa ser digitado mais nada\n};\n\nexport const expiryMask = (value: string) => {\n return value\n .replace(/\\D/g, '') // substitui qualquer caracter que nao seja numero por nada\n .replace(/(\\d{2})(\\d)/, '$1/$2')\n .replace(/(\\/\\d{2})\\d+?$/, '$1');\n};\n\nexport const cvcMask = (value: string) => {\n return value\n .replace(/\\D/g, '') // substitui qualquer caracter que nao seja numero por nada\n .replace(/(\\d{3})\\d+?$/, '$1');\n};\n","import * as Yup from 'yup';\nimport { validatePasswordStrength } from '../../../utils/inputs';\n\nexport interface FormValues {\n currentPassword: string;\n newPassword: string;\n retypePassword: string;\n}\n\nexport const formInitialValue = {\n currentPassword: '',\n newPassword: '',\n retypePassword: '',\n};\n\nexport const validationSchema = Yup.object().shape({\n currentPassword: Yup.string().required('Por favor, insira a senha'),\n newPassword: Yup.string()\n .required('Por favor, insira a nova senha')\n .test(\n 'isValidPassword',\n 'Por favor, insira uma senha que atenda aos critérios listados abaixo',\n (value) => validatePasswordStrength(value || '')\n ),\n retypePassword: Yup.string()\n .required('Por favor, insira a confirmação da senha')\n .oneOf([Yup.ref('newPassword'), ''], 'As senhas devem ser iguais'),\n});\n","import { APIError } from '@cuidador/lib';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { AxiosError } from 'axios';\nimport { Form, Formik, FormikHelpers } from 'formik';\nimport React, { useState } from 'react';\nimport { toast } from 'react-toastify';\nimport FormikTextField from '../../../components/Forms/FormikTextField';\nimport StyledButton from '../../../components/StyledButton';\nimport PasswordRules from '../../../components/PasswordRules';\nimport { changePassword } from '../../../contexts/auth';\nimport { resolveErrorMessage } from '../../../utils/error';\nimport { Container, FooterContainer } from './styles';\nimport { formInitialValue, FormValues, validationSchema } from './utils';\nimport { isEqual } from 'lodash';\n\nconst ChangePassword: React.FC = () => {\n const [showNewPassword, setShowNewPassword] = useState(false);\n const [showRetypePassword, setShowRetypePassword] = useState(false);\n\n const handleSubmit = (\n values: FormValues,\n { setFieldValue }: FormikHelpers\n ) => {\n changePassword(values.currentPassword, values.newPassword)\n .then(() => {\n toast.success('Senha alterada com sucesso');\n setFieldValue('currentPassword', '');\n setFieldValue('newPassword', '');\n setFieldValue('retypePassword', '');\n })\n .catch((err: AxiosError) => {\n const displayMessage = resolveErrorMessage(err);\n toast.error(displayMessage);\n });\n };\n const [validationError, setValidationError] = useState(false);\n\n const handleShowNewPassword = () => setShowNewPassword(!showNewPassword);\n const handleShowRetypePassword = () =>\n setShowRetypePassword(!showRetypePassword);\n\n return (\n <>\n \n \n {(formik) => (\n \n )}\n \n \n \n );\n};\n\nexport default ChangePassword;\n","export function mod(n: number, m: number) {\n return ((n % m) + m) % m;\n}\n","import { subHours } from 'date-fns';\nimport { format, utcToZonedTime } from 'date-fns-tz';\nimport addMinutes from 'date-fns/addMinutes';\nimport { mod } from '../math';\n\n/**\n * Receives a time e.g 10:00 and converts to Date\n * with the hour and minute provided: 2020-01-01T10:00:12.000Z\n */\nexport const convertTimeToDate = (timeString: string): Date => {\n const [hours, minutes] = timeString.split(':');\n const now = new Date();\n now.setUTCHours(Number(hours));\n now.setUTCMinutes(Number(minutes));\n return now;\n};\n\n/**\n * Receives a time e.g 10:00 and converts to UTC Date\n * with the hour and minute provided: 2020-01-01T07:00:12.000Z\n */\nexport const convertTimeToUTCDate = (timeString: string): Date => {\n const [hours, minutes] = timeString.split(':');\n const now = new Date();\n now.setHours(Number(hours));\n now.setMinutes(Number(minutes));\n return now;\n};\n\n/**\n * Receives a local browser time and converts it to UTC.\n * Example: 10:00 --> 13:00\n */\nexport const convertLocalTimeToUTC = (time: string): string => {\n const [hours, minutes] = time.split(':');\n const now = new Date();\n now.setHours(Number(hours));\n now.setMinutes(Number(minutes));\n return format(utcToZonedTime(now, 'UTC'), 'HH:mm');\n};\n\n/**\n * Receives a ISODateTime, and format to a time\n * with America/Sao_Paulo timezone (GMT -3),\n * e.g, 2022-06-06T13:00:00.000Z returns 10:00\n */\nexport const formatTimeToAmericaSaoPauloTimezone = (date: string): string => {\n /**\n * It removes 3 hours because the database holds the datetime as America/Sao_Paulo timezone.\n */\n const utcDatePtBr = subHours(new Date(date), 3);\n const formattedDate = format(\n // Removes timezone of the local machine that was introduced in Date instance above.\n timezoneUnawareDate(utcDatePtBr),\n 'HH:mm'\n );\n return formattedDate;\n};\n\n/**\n * Receives a ISODateTime, and format to a Date\n * with America/Sao_Paulo timezone (GMT -3),\n * e.g, 2022-06-06T12:24:45.255Z returns 06/06/2022\n */\nexport const formatShortDateToAmericaSaoPauloTimezone = (\n date: string\n): string => {\n /**\n * It removes 3 hours because the database holds the datetime as America/Sao_Paulo timezone.\n */\n const utcDatePtBr = subHours(new Date(date), 3);\n const formattedDate = format(\n // Removes timezone of the local machine that was introduced in Date instance above.\n timezoneUnawareDate(utcDatePtBr),\n 'dd/MM/yy'\n );\n return formattedDate;\n};\n\n/**\n * Checks wheter date is after than dateToCompare only comparing its HH:mm\n */\nexport const isTimeAfter = (date: Date, dateToCompare: Date): boolean => {\n if (date.getHours() > dateToCompare.getHours()) return true;\n if (\n date.getHours() === dateToCompare.getHours() &&\n date.getMinutes() > dateToCompare.getMinutes()\n ) {\n return true;\n }\n return false;\n};\n\n/**\n * This method will ignore time and timezone from a date, an use only the date\n * part, no matter the current local timezone for the machine running the code\n * Useful for \"fixed\" dates, like birthdates\n */\nexport const timezoneUnawareDate = (date: number | string | Date) =>\n addMinutes(new Date(date), new Date(date).getTimezoneOffset());\n\nexport const weekdayMap = Object.freeze({\n mon: 'Seg',\n tue: 'Ter',\n wed: 'Qua',\n thu: 'Qui',\n fri: 'Sex',\n sat: 'Sab',\n sun: 'Dom',\n});\n\nexport function getUTCWeeklySchedule(\n localSchedule: {\n mon?: boolean;\n tue?: boolean;\n wed?: boolean;\n thu?: boolean;\n fri?: boolean;\n sat?: boolean;\n sun?: boolean;\n },\n localTime: string\n) {\n const date = convertTimeToUTCDate(localTime);\n const utcWeekDay = date.getUTCDay();\n const localWeekDay = date.getDay();\n\n const daysDifference = utcWeekDay - localWeekDay;\n const modularDaysDifference = mod(daysDifference, 7);\n\n const utcSchedule = {\n mon: false,\n tue: false,\n wed: false,\n thu: false,\n fri: false,\n sat: false,\n sun: false,\n };\n\n const activeDays = (Object.keys(localSchedule) as Array<\n keyof typeof localSchedule\n >).filter((key) => localSchedule[key]);\n\n activeDays.forEach((day) => {\n if (day === 'sun') {\n if (modularDaysDifference > 0) {\n utcSchedule.mon = true;\n } else if (modularDaysDifference < 0) {\n utcSchedule.sat = true;\n } else {\n utcSchedule.sun = true;\n }\n }\n if (day === 'mon') {\n if (modularDaysDifference > 0) {\n utcSchedule.tue = true;\n } else if (modularDaysDifference < 0) {\n utcSchedule.sun = true;\n } else {\n utcSchedule.mon = true;\n }\n }\n if (day === 'tue') {\n if (modularDaysDifference > 0) {\n utcSchedule.wed = true;\n } else if (modularDaysDifference < 0) {\n utcSchedule.mon = true;\n } else {\n utcSchedule.tue = true;\n }\n }\n if (day === 'wed') {\n if (modularDaysDifference > 0) {\n utcSchedule.thu = true;\n } else if (modularDaysDifference < 0) {\n utcSchedule.tue = true;\n } else {\n utcSchedule.wed = true;\n }\n }\n if (day === 'thu') {\n if (modularDaysDifference > 0) {\n utcSchedule.fri = true;\n } else if (modularDaysDifference < 0) {\n utcSchedule.wed = true;\n } else {\n utcSchedule.thu = true;\n }\n }\n if (day === 'fri') {\n if (modularDaysDifference > 0) {\n utcSchedule.sat = true;\n } else if (modularDaysDifference < 0) {\n utcSchedule.thu = true;\n } else {\n utcSchedule.fri = true;\n }\n }\n if (day === 'sat') {\n if (modularDaysDifference > 0) {\n utcSchedule.sun = true;\n } else if (modularDaysDifference < 0) {\n utcSchedule.fri = true;\n } else {\n utcSchedule.sat = true;\n }\n }\n });\n\n return utcSchedule;\n}\n\nexport function getLocalWeeklySchedule(\n utcSchedule: {\n mon?: boolean;\n tue?: boolean;\n wed?: boolean;\n thu?: boolean;\n fri?: boolean;\n sat?: boolean;\n sun?: boolean;\n },\n utcTime: string\n) {\n const date = convertTimeToDate(utcTime);\n const utcWeekDay = date.getUTCDay();\n const localWeekDay = date.getDay();\n\n const daysDifference = utcWeekDay - localWeekDay;\n const modularDaysDifference = mod(daysDifference, 7);\n\n const localSchedule = {\n mon: false,\n tue: false,\n wed: false,\n thu: false,\n fri: false,\n sat: false,\n sun: false,\n };\n\n const activeDays = (Object.keys(utcSchedule) as Array<\n keyof typeof utcSchedule\n >).filter((elem) => utcSchedule[elem]);\n\n activeDays.forEach((day) => {\n if (day === 'sun') {\n if (modularDaysDifference < 0) {\n localSchedule.mon = true;\n } else if (modularDaysDifference > 0) {\n localSchedule.sat = true;\n } else {\n localSchedule.sun = true;\n }\n }\n if (day === 'mon') {\n if (modularDaysDifference < 0) {\n localSchedule.tue = true;\n } else if (modularDaysDifference > 0) {\n localSchedule.sun = true;\n } else {\n localSchedule.mon = true;\n }\n }\n if (day === 'tue') {\n if (modularDaysDifference < 0) {\n localSchedule.wed = true;\n } else if (modularDaysDifference > 0) {\n localSchedule.mon = true;\n } else {\n localSchedule.tue = true;\n }\n }\n if (day === 'wed') {\n if (modularDaysDifference < 0) {\n localSchedule.thu = true;\n } else if (modularDaysDifference > 0) {\n localSchedule.tue = true;\n } else {\n localSchedule.wed = true;\n }\n }\n if (day === 'thu') {\n if (modularDaysDifference < 0) {\n localSchedule.fri = true;\n } else if (modularDaysDifference > 0) {\n localSchedule.wed = true;\n } else {\n localSchedule.thu = true;\n }\n }\n if (day === 'fri') {\n if (modularDaysDifference < 0) {\n localSchedule.sat = true;\n } else if (modularDaysDifference > 0) {\n localSchedule.thu = true;\n } else {\n localSchedule.fri = true;\n }\n }\n if (day === 'sat') {\n if (modularDaysDifference < 0) {\n localSchedule.sun = true;\n } else if (modularDaysDifference > 0) {\n localSchedule.fri = true;\n } else {\n localSchedule.sat = true;\n }\n }\n });\n\n return localSchedule;\n}\n","import styled from 'styled-components';\nimport {\n Backdrop as MaterialBackdrop,\n CircularProgress as MaterialCircularProgress,\n} from '@material-ui/core';\nimport Tab from '@material-ui/core/Tab';\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n padding: ${({ theme }) => theme.spacing(2, 2)};\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid;\n border-color: ${({ theme }) => theme.palette.primary.main};\n padding: ${({ theme }) => theme.spacing(0, 0, 2, 0)};\n`;\n\nexport const StyledTabItem = styled(Tab)`\n width: ${({ theme }) => theme.spacing(15)}px;\n color: ${({ theme }) => theme.palette.primary.main};\n font-size: ${({ theme }) => theme.spacing(2)}px;\n font-weight: 400;\n border-radius: 5px 5px 0 0;\n`;\n\nexport const Backdrop = styled(MaterialBackdrop)`\n z-index: ${({ theme }) => theme.zIndex.drawer + 1};\n color: ${({ theme }) => theme.palette.primary.light};\n position: absolute;\n`;\n\nexport const BackdropCircularProgress = styled(MaterialCircularProgress).attrs({\n color: 'inherit',\n})``;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n color: ${({ theme }) => theme.palette.secondary.main};\n`;\n\nexport const SubTitleContainer = styled.div`\n display: flex;\n color: ${({ theme }) => theme.palette.secondary.main};\n margin-top: ${({ theme }) => theme.spacing(9)}px;\n margin-bottom: ${({ theme }) => theme.spacing(9)}px;\n margin-left: auto;\n margin-right: auto;\n`;\n\nexport const DateContainer = styled.div`\n display: flex;\n color: ${({ theme }) => theme.palette.secondary.main};\n justify-content: center;\n`;\n\nexport const MessageContainer = styled.div`\n display: flex;\n color: ${({ theme }) => theme.palette.secondary.main};\n margin-top: auto;\n margin-bottom: auto;\n text-align: center;\n align-self: center;\n`;\n","import { Typography } from '@material-ui/core';\nimport formatDate from 'date-fns/format';\nimport React, { useContext, useEffect } from 'react';\nimport { Redirect } from 'react-router-dom';\nimport { AuthContext } from '../../../contexts/auth';\nimport useCanAccess from '../../../hooks/useCanAccess';\nimport { timezoneUnawareDate } from '../../../utils/date';\nimport { Backdrop, BackdropCircularProgress } from '../styles';\nimport {\n Container,\n DateContainer,\n MessageContainer,\n SubTitleContainer,\n} from './styles';\n\nconst Payment: React.FC = () => {\n const { isAllowedToRead: isAllowedToReadSubscription } = useCanAccess(\n 'user/subscription'\n );\n const { userInfo, loading, refreshUserInfo } = useContext(AuthContext);\n\n useEffect(() => {\n refreshUserInfo();\n }, []);\n\n const patient = userInfo?.activePatient;\n\n if (!isAllowedToReadSubscription) {\n return ;\n }\n\n if (loading) {\n return (\n \n {loading && (\n \n )}\n \n );\n }\n\n const hasPlanExpirationDate = () => {\n if (!patient || !patient.planExpirationDate) {\n return false;\n } else {\n return true;\n }\n };\n\n return (\n <>\n \n {hasPlanExpirationDate() ? (\n <>\n Seu plano vence no dia\n \n \n {formatDate(\n timezoneUnawareDate(patient!.planExpirationDate!),\n 'dd/MM/yyyy'\n )}\n \n \n \n ) : (\n \n Seu plano não tem data de vencimento configurada. Se tiver algum\n problema, contacte o suporte.\n \n )}\n \n \n );\n};\n\nexport default Payment;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n color: ${({ theme }) => theme.palette.secondary.main};\n form {\n display: flex;\n flex: 1;\n flex-direction: column;\n }\n`;\n\nexport const FooterContainer = styled.div`\n display: flex;\n justify-content: center;\n flex: 1;\n align-items: flex-end;\n`;\n","import * as Yup from 'yup';\nimport { UserModel, GuardianModel } from '@cuidador/database';\n\nimport { phoneMask, numberMask } from '../../../utils/inputs';\n\nexport interface FormValues {\n name: string;\n cpf: string;\n phoneNumber: string;\n email: string;\n}\n\nexport const userModelToFormData = (user: UserModel): FormValues => ({\n name: user?.name || '',\n cpf: user?.cpf || '',\n email: user?.email || '',\n phoneNumber: user?.phoneNumber ? phoneMask(user.phoneNumber) : '',\n});\n\nexport const formDataToGuardianModel = (values: FormValues) =>\n ({\n user: {\n name: values.name,\n phoneNumber: numberMask(`55${values.phoneNumber}`),\n },\n } as GuardianModel);\n\nexport const validationSchema = Yup.object().shape({\n name: Yup.string()\n .required('Por favor, insira o nome completo')\n .min(3, 'O nome deve conter ao menos 3 caracteres')\n .test(\n 'isFullName',\n 'Por favor, insira o nome completo',\n (value) => (value || '').split(' ').length > 1\n ),\n phoneNumber: Yup.string()\n .required('Por favor, insira um celular')\n .min(15, 'Por favor, insira um celular válido')\n .max(15, 'Por favor, insira um celular válido'),\n});\n","import { GuardianModel } from '@cuidador/database';\nimport { useCallback, useReducer } from 'react';\nimport axios from '../config/axios';\nimport { createReducer, Item, ReducerData } from '../utils/store/index';\n\nconst endpoint = '/user/guardian';\n\nconst initialData: ReducerData = {\n byId: {} as Record>,\n ids: [] as Array,\n total: 0,\n loading: false,\n error: null,\n};\n\nconst useGuardian = () => {\n const [state, dispatch] = useReducer(\n createReducer(),\n initialData\n );\n const post = useCallback(async (data: GuardianModel) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(`${endpoint}`, data);\n dispatch({ type: 'CREATE', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const patch = useCallback(async (data: Partial) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.patch(`${endpoint}/me`, data);\n dispatch({ type: 'UPDATE', payload: response.data });\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n return {\n ...state,\n post,\n patch,\n };\n};\n\nexport default useGuardian;\n","import React, { useContext, useEffect } from 'react';\nimport { AuthContext } from '../../../contexts/auth';\nimport { Container, FooterContainer } from './styles';\nimport { Backdrop, BackdropCircularProgress } from '../styles';\nimport { Formik, Form } from 'formik';\nimport {\n validationSchema,\n FormValues,\n userModelToFormData,\n formDataToGuardianModel,\n} from './utils';\nimport FormikTextField from '../../../components/Forms/FormikTextField';\nimport { cpfMask, phoneMask } from '../../../utils/inputs';\nimport StyledButton from '../../../components/StyledButton';\nimport useGuardian from '../../../hooks/useGuardian';\nimport { toast } from 'react-toastify';\nimport { AxiosError } from 'axios';\nimport { APIError } from '@cuidador/lib';\nimport { resolveErrorMessage } from '../../../utils/error';\nimport { isEqual } from 'lodash';\n\nconst Personal: React.FC = () => {\n const { userInfo, loading, refreshUserInfo } = useContext(AuthContext);\n const { patch } = useGuardian();\n\n useEffect(() => {\n refreshUserInfo();\n }, []);\n\n const userData = userInfo?.user;\n const formInitialValue = userModelToFormData(userData!);\n\n const handleSubmit = (values: FormValues) => {\n patch(formDataToGuardianModel(values))\n .then(() => {\n toast.success('Dados alterados com sucesso!');\n refreshUserInfo();\n })\n .catch((err: AxiosError) => {\n const displayMessage = resolveErrorMessage(err);\n toast.error(displayMessage);\n });\n };\n\n if (loading) {\n return (\n \n {loading && (\n \n )}\n \n );\n }\n\n return (\n <>\n \n \n {(formik) => (\n \n )}\n \n \n \n );\n};\n\nexport default Personal;\n","export default __webpack_public_path__ + \"static/media/Elipseblue.d281caa2.svg\";","export default __webpack_public_path__ + \"static/media/Elipsegreen.56f01b17.svg\";","import { AppBar, Toolbar as MaterialToolbar } from '@material-ui/core';\nimport styled from 'styled-components';\nimport ElipseBlue from '../../assets/Elipseblue.svg';\nimport ElipseGreen from '../../assets/Elipsegreen.svg';\n\nexport const Toolbar = styled(MaterialToolbar)`\n justify-content: space-between;\n`;\n\nexport const Container = styled(AppBar).attrs({\n elevation: 0,\n position: 'sticky',\n})`\n & .MuiToolbar-root {\n height: 72px;\n z-index: 5;\n }\n`;\n\nexport const StyledElipseBlueTop = styled.img.attrs({\n src: ElipseBlue,\n})`\n width: 250px;\n height: 250px;\n top: -200px;\n right: 30px;\n position: absolute;\n z-index: 2;\n`;\n\nexport const StyledElipseGreenTop = styled.img.attrs({\n src: ElipseGreen,\n})`\n width: 250px;\n height: 250px;\n top: -180px;\n right: -80px;\n position: absolute;\n z-index: 1;\n`;\n\nexport const StyledElipseBlueBot = styled.img.attrs({\n src: ElipseBlue,\n})`\n width: 250px;\n height: 250px;\n bottom: -150px;\n left: -120px;\n position: absolute;\n z-index: 2;\n`;\n\nexport const StyledElipseGreenBot = styled.img.attrs({\n src: ElipseGreen,\n})`\n width: 250px;\n height: 250px;\n bottom: -220px;\n left: 0px;\n position: absolute;\n z-index: 1;\n`;\n\nexport const StyledDiv = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n // [TODO]: change to the right images if necessary\n filter: brightness(0.1) opacity(0.1);\n`;\n\nexport const StyledBlankDiv = styled.div`\n height: 40px;\n width: 40px;\n`;\n","import React from 'react';\n\nimport {\n Container,\n StyledBlankDiv,\n StyledDiv,\n StyledElipseBlueBot,\n StyledElipseBlueTop,\n StyledElipseGreenBot,\n StyledElipseGreenTop,\n Toolbar,\n} from './styles';\n\nexport type HeaderProps = {\n leftContent?: React.ReactNode;\n centerContent?: React.ReactNode;\n rightContent?: React.ReactNode;\n};\n\nexport function Header(props: HeaderProps) {\n const { leftContent, centerContent, rightContent } = props;\n\n return (\n \n \n {leftContent ? leftContent : }\n {centerContent ? centerContent : }\n {rightContent ? rightContent : }\n \n \n \n \n \n \n \n \n );\n}\n","import { PatientModel } from '@cuidador/database';\nimport { AxiosResponse } from 'axios';\nimport { useCallback, useReducer } from 'react';\nimport axios from '../config/axios';\nimport {\n createReducer,\n Item,\n PaginatedRequestParams,\n ReducerData,\n} from '../utils/store/index';\nimport useMedia from './useMedia';\n\nexport enum PatientEventFilter {\n intercorrencia,\n med_fora_do_horario,\n med_alterada,\n plan_atrasado,\n compromisso\n}\n\nexport interface GetPatientPaginatedRequestParams\n extends PaginatedRequestParams {\n customStatus?: CustomStatus[];\n withRelatedUserId?: number;\n eventFilter?: PatientEventFilter\n}\n\nexport type CustomStatus = 'enabled' | 'disabled' | 'pending';\nexport type PatientQueryType = 'relatedPatients' | 'organizationPatients';\n\nconst endpoint = '/user/patient';\n\nconst initialData: ReducerData = {\n byId: {} as Record>,\n ids: [] as Array,\n total: 0,\n loading: false,\n error: null,\n};\n\nconst usePatient = () => {\n const { uploadMedia, getMedia } = useMedia();\n const [state, dispatch] = useReducer(\n createReducer(),\n initialData\n );\n\n const post = useCallback(async (data: PatientModel) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(`${endpoint}`, data);\n dispatch({ type: 'CREATE', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const patch = useCallback(async (id: Id, data: Partial) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.patch(`${endpoint}/${id}`, data);\n dispatch({ type: 'UPDATE', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const uploadProfilePicture = useCallback(\n async (file: File, patientId: Id) => {\n try {\n const response = await uploadMedia(\n `/media/profile-picture/patient/${patientId}`,\n file\n );\n return Promise.resolve(response);\n } catch (err) {\n return Promise.reject(err);\n }\n },\n []\n );\n\n const getProfilePicture = useCallback(async (id: number) => {\n try {\n const response = await getMedia(`/media/profile-picture/patient/${id}`);\n return Promise.resolve(response);\n } catch (err) {\n return Promise.reject(err);\n }\n }, []);\n\n const getRelatedPatientsPaginated = useCallback(\n async (params: GetPatientPaginatedRequestParams) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get<{\n results: Item[];\n total: number;\n }>(endpoint, { params });\n dispatch({ type: 'PAGINATION', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n },\n []\n );\n\n const getOrganizationPatientsPaginated = useCallback(\n async (params: GetPatientPaginatedRequestParams) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get<{\n results: Item[];\n total: number;\n }>(`${endpoint}/by-organization`, { params });\n dispatch({ type: 'PAGINATION', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n },\n []\n );\n\n const getById = useCallback(async (id: Id) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get(`${endpoint}/${id}`);\n dispatch({ type: 'GET_BY_ID', payload: response.data });\n return Promise.resolve(response as AxiosResponse);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const setActive = useCallback(async (id: number) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.patch(`${endpoint}/activate/${id}`);\n dispatch({ type: 'UPDATE', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n return {\n ...state,\n post,\n uploadProfilePicture,\n getProfilePicture,\n getRelatedPatientsPaginated,\n getOrganizationPatientsPaginated,\n getById,\n patch,\n setActive,\n };\n};\n\nexport default usePatient;\n","import defaultAxios from 'axios';\nimport { useCallback } from 'react';\nimport axios from '../config/axios';\n\nconst useMedia = () => {\n // Gets PUT signed url\n const getSignedUrl = useCallback(\n (endpoint: string, contentType: string) =>\n axios({\n method: 'put',\n url: endpoint,\n data: null,\n headers: {\n 'Content-Type': contentType,\n },\n }),\n []\n );\n\n // Puts file into Storage bucket\n const uploadMedia = useCallback(async (endpoint: string, file: File) => {\n const {\n data: { signedUrl },\n } = await getSignedUrl(endpoint, file.type);\n return defaultAxios({\n method: 'put',\n data: file,\n url: signedUrl,\n headers: {\n 'Content-Type': file.type,\n },\n });\n }, []);\n\n const getMedia = useCallback(\n (endpoint: string) =>\n axios.request<{ signedUrl: string }>({\n method: 'get',\n url: endpoint,\n data: null,\n }),\n []\n );\n\n return { uploadMedia, getMedia };\n};\n\nexport default useMedia;\n","import React from 'react'\nimport { useEffect, useState } from 'react'\nimport usePatient from '../../hooks/usePatient'\nimport { Avatar } from '@material-ui/core'\n\nexport type PatientAvatarProps = {\n patientId: number\n}\n\nexport function PatientAvatar(props: PatientAvatarProps) {\n const { patientId } = props\n const [imageUrl, setImageUrl] = useState('')\n const { getProfilePicture } = usePatient()\n\n const handleGetProfilePicture = async (id: number) => {\n try {\n return await getProfilePicture(id).then(({ data }) => data?.signedUrl)\n } catch (err) {\n console.log('error')\n }\n }\n async function fetchPatientProfilePicture() {\n if (!patientId) return\n const result = await handleGetProfilePicture(parseInt(`${patientId}`))\n if (result) {\n setImageUrl(result)\n }\n }\n\n useEffect(() => {\n fetchPatientProfilePicture()\n }, [])\n\n return \n}\n","import { CaregiverModel, SupporterModel, UserModel } from '@cuidador/database';\nimport { TokenProfile } from '@cuidador/lib';\nimport { AxiosResponse } from 'axios';\nimport { useCallback, useReducer } from 'react';\nimport axios from '../config/axios';\nimport {\n createReducer,\n Item,\n PaginatedRequestParams,\n ReducerData,\n} from '../utils/store/index';\nimport useMedia from './useMedia';\n\nexport type CompleteSignupBody = {\n userData: UserModel;\n caregiverData?: Omit;\n supporterData?: SupporterModel;\n};\n\nexport interface GetOrganizationMembersPaginatedRequestParams\n extends PaginatedRequestParams {\n status?: UserModel['status'][];\n withRelatedPatientId?: number;\n}\n\nconst endpoint = '/user';\n\nconst initialData: ReducerData = {\n byId: {} as Record>,\n ids: [] as Array,\n total: 0,\n loading: false,\n error: null,\n};\n\nconst useUser = () => {\n const { uploadMedia, getMedia } = useMedia();\n const [state, dispatch] = useReducer(createReducer(), initialData);\n\n const post = useCallback(async (data: UserModel) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(`${endpoint}`, data);\n dispatch({ type: 'CREATE', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const patchAutoPatientRelate = useCallback(\n async (\n id: Id,\n isAutoPatientRelateEnabled: UserModel['isAutoPatientRelateEnabled']\n ) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.patch(\n `${endpoint}/${id}/auto-patient-relate`,\n { isAutoPatientRelateEnabled }\n );\n dispatch({ type: 'UPDATE', payload: response.data });\n return Promise.resolve(response as AxiosResponse);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n },\n []\n );\n\n const getById = useCallback(async (id: Id) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get(`${endpoint}/${id}`);\n dispatch({ type: 'GET_BY_ID', payload: response.data });\n return Promise.resolve(response as AxiosResponse);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const findAvailableUsers = useCallback(async (values: UserModel) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(`${endpoint}/available`, values);\n dispatch({ type: 'GET_BY_ID', payload: response.data });\n return Promise.resolve(response.data);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const completeSignup = useCallback(\n async (data: CompleteSignupBody, completeSignupToken: string) => {\n try {\n const response = await axios.post(`${endpoint}/complete-signup`, data, {\n headers: {\n Authorization: `Bearer ${completeSignupToken}`,\n },\n });\n return Promise.resolve(response.data);\n } catch (err) {\n return Promise.reject(err);\n }\n },\n []\n );\n\n const uploadProfilePicture = useCallback(\n async (file: File, userId: number) => {\n try {\n const response = await uploadMedia(\n `/media/profile-picture/user/${userId}`,\n file\n );\n return Promise.resolve(response);\n } catch (err) {\n return Promise.reject(err);\n }\n },\n []\n );\n\n const getProfilePicture = useCallback(async (id: number) => {\n try {\n const response = await getMedia(`/media/profile-picture/user/${id}`);\n return Promise.resolve(response);\n } catch (err) {\n return Promise.reject(err);\n }\n }, []);\n\n const getOrganizationMembersPaginated = useCallback(\n async (params: GetOrganizationMembersPaginatedRequestParams) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get<{\n results: Item[];\n total: number;\n }>(`${endpoint}/by-organization`, { params });\n dispatch({ type: 'PAGINATION', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n return Promise.reject(err);\n }\n },\n []\n );\n\n const relateToPatient = useCallback(\n async (userId: number, patientId: number) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(\n `${endpoint}/${userId}/relate-to-patient`,\n { patientToRelateId: patientId }\n );\n dispatch({ type: 'GET_BY_ID', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n },\n []\n );\n\n const relateToOrganization = useCallback(async (userId: number) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(\n `${endpoint}/${userId}/relate-to-organization`\n );\n dispatch({ type: 'SUCCESS' });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const unrelateFromPatient = useCallback(\n async (userId: number, patientId: number) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(\n `${endpoint}/${userId}/unrelate-from-patient`,\n { patientToUnrelateId: patientId }\n );\n dispatch({ type: 'GET_BY_ID', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n },\n []\n );\n\n const unrelateAllPatients = useCallback(async (userId: Id) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(\n `${endpoint}/${userId}/unrelate-from-patient/all`\n );\n dispatch({ type: 'SUCCESS' });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const unrelateFromOrganization = useCallback(async (userId: number) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(\n `${endpoint}/${userId}/unrelate-from-organization`\n );\n dispatch({ type: 'SUCCESS' });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const getPendingSignupToken = useCallback(async (id: Id) => {\n try {\n const response = await axios.post(`/auth/pending-signup-token`, {\n userId: id,\n });\n return Promise.resolve(\n response as AxiosResponse<{\n id: UserModel['id'];\n userProfile: TokenProfile;\n /**\n * @deprecated will be removed. completeSignupUrl should be used\n */\n token: string;\n completeSignupUrl: string;\n }>\n );\n } catch (err) {\n return Promise.reject(err);\n }\n }, []);\n\n const checkSignupStatus = useCallback(async (id: Id) => {\n try {\n const response = await axios.get(`${endpoint}/check-signup-status/${id}`);\n return Promise.resolve(response.data);\n } catch (err) {\n return Promise.reject(err);\n }\n }, []);\n\n return {\n ...state,\n post,\n patchAutoPatientRelate,\n getById,\n findAvailableUsers,\n completeSignup,\n uploadProfilePicture,\n getProfilePicture,\n getOrganizationMembersPaginated,\n relateToPatient,\n relateToOrganization,\n unrelateFromPatient,\n unrelateAllPatients,\n unrelateFromOrganization,\n getPendingSignupToken,\n checkSignupStatus,\n };\n};\n\nexport default useUser;\n","import React from 'react'\nimport { useEffect, useState } from 'react'\nimport useUser from '../../hooks/useUser'\nimport { Avatar } from '@material-ui/core'\n\nexport type UserAvatarProps = {\n userId: number\n}\n\nexport function UserAvatar(props: UserAvatarProps) {\n const { userId } = props\n const [imageUrl, setImageUrl] = useState('')\n const { getProfilePicture } = useUser()\n\n const handleGetProfilePicture = async (id: number) => {\n try {\n return await getProfilePicture(id).then(({ data }) => data?.signedUrl)\n } catch (err) {\n console.log('error')\n }\n }\n async function fetchUserProfilePicture() {\n if (!userId) return\n const result = await handleGetProfilePicture(parseInt(`${userId}`))\n if (result) {\n setImageUrl(result)\n }\n }\n\n useEffect(() => {\n fetchUserProfilePicture()\n }, [])\n\n return \n}\n","import { Typography, useTheme } from '@material-ui/core'\nimport React from 'react'\nimport { PatientAvatar } from '../PatientAvatar'\nimport { UserAvatar } from '../UserAvatar'\n\nexport type PageTitleProps = {\n title: string\n userId?: number\n patientId?: number\n}\n\nexport function PageTitle(props: PageTitleProps) {\n const { title, userId, patientId } = props\n const theme = useTheme()\n\n return (\n \n {patientId &&
}\n {userId &&
}\n
\n {title}\n \n \n \n Em qual caso entrar em contato?\n \n {callingCondition}\n
\n )}\n {relevantInformation && (\n \n Observação:\n {relevantInformation}\n
\n )}\n {phoneNumber && (\n \n \n {maskedPhoneNumber}\n \n )}\n {link && (\n \n \n \n {link.replace(/https?:\\/\\//, '') + '/consulta'}\n \n \n )}\n\n {id && (\n \n Editar contato \n \n )}\n \n \n {phoneNumber && (\n <>\n \n \n {'Ligar'}\n \n\n {!!isWhatsapp && (\n \n window.open(\n `https://api.whatsapp.com/send/?phone=${phoneNumber}`\n )\n }\n >\n \n Whatsapp\n \n )}\n \n )}\n {link && (\n window.open(link, '_blank')}>\n \n Abrir Link\n \n )}\n \n \n );\n};\n\nexport default ContactsCard;\n","import styled from 'styled-components';\nimport {\n Backdrop as MaterialBackdrop,\n CircularProgress as MaterialCircularProgress,\n} from '@material-ui/core';\nimport Typography from '@material-ui/core/Typography';\nimport { Link } from 'react-router-dom';\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: center;\n padding: ${({ theme }) => theme.spacing(2, 4)};\n`;\n\nexport const StyledLink = styled(Link)`\n text-decoration: none;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledContainer = styled.div`\n text-decoration: none;\n width: 100%;\n display: flex;\n`;\n\nexport const Backdrop = styled(MaterialBackdrop)`\n z-index: ${({ theme }) => theme.zIndex.drawer + 1};\n color: ${({ theme }) => theme.palette.primary.light};\n position: absolute;\n`;\n\nexport const BackdropCircularProgress = styled(MaterialCircularProgress).attrs({\n color: 'inherit',\n})``;\n\nexport const TypographyContainer = styled.div`\n width: 100%;\n text-align: center;\n color: ${({ theme }) => theme.palette.primary.main};\n padding-bottom: ${({ theme }) => theme.spacing(3)}px;\n`;\n\nexport const StyledTypography = styled(Typography)`\n color: ${({ theme }) => theme.palette.primary.dark};\n`;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 21.4286,\n height: 5,\n rx: 2,\n fill: \"white\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"rect\", {\n y: 8,\n width: 21.4286,\n height: 5,\n rx: 2,\n fill: \"white\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"rect\", {\n y: 16,\n width: 21.4286,\n height: 5,\n rx: 2,\n fill: \"white\"\n});\n\nfunction SvgBurgerMenu(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 21,\n viewBox: \"0 0 22 21\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3, _ref4);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgBurgerMenu);\nexport default __webpack_public_path__ + \"static/media/burger-menu.a8176db9.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react'\nimport { StyledIconButton } from '../StyledIconButton'\nimport { ReactComponent as MenuIcon } from '../../assets/burger-menu.svg'\n\nexport type MenuButtonProps = {\n action: () => void\n}\n\nexport function MenuButton (props: MenuButtonProps) {\n const { action } = props\n\n return (\n \n }\n action={() => action()}\n />\n )\n}\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3 2C3.26522 2 3.51957 1.89464 3.70711 1.70711C3.89464 1.51957 4 1.26522 4 1C4 0.734784 3.89464 0.48043 3.70711 0.292893C3.51957 0.105357 3.26522 0 3 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16H3C3.26522 16 3.51957 15.8946 3.70711 15.7071C3.89464 15.5196 4 15.2652 4 15C4 14.7348 3.89464 14.4804 3.70711 14.2929C3.51957 14.1054 3.26522 14 3 14H2V2H3ZM16.82 7.42L14 3.42C13.8471 3.20441 13.615 3.05814 13.3545 3.01317C13.0941 2.9682 12.8264 3.02818 12.61 3.18C12.5018 3.25579 12.4098 3.35224 12.3391 3.46381C12.2684 3.57537 12.2206 3.69982 12.1982 3.82998C12.1759 3.96015 12.1796 4.09344 12.2091 4.22217C12.2386 4.3509 12.2933 4.47252 12.37 4.58L14.09 7H6C5.73478 7 5.48043 7.10536 5.29289 7.29289C5.10536 7.48043 5 7.73478 5 8C5 8.26522 5.10536 8.51957 5.29289 8.70711C5.48043 8.89464 5.73478 9 6 9H14L12.2 11.4C12.1212 11.5051 12.0639 11.6246 12.0313 11.7518C11.9987 11.879 11.9915 12.0114 12.01 12.1414C12.0286 12.2714 12.0726 12.3965 12.1395 12.5095C12.2064 12.6225 12.2949 12.7212 12.4 12.8C12.5731 12.9298 12.7836 13 13 13C13.1552 13 13.3084 12.9639 13.4472 12.8944C13.5861 12.825 13.7069 12.7242 13.8 12.6L16.8 8.6C16.9281 8.43087 16.999 8.22539 17.0026 8.01326C17.0062 7.80114 16.9423 7.59338 16.82 7.42Z\",\n fill: \"white\"\n});\n\nfunction SvgSignOutIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 16,\n viewBox: \"0 0 18 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgSignOutIcon);\nexport default __webpack_public_path__ + \"static/media/sign-out-icon.d96f48c9.svg\";\nexport { ForwardRef as ReactComponent };","import { clientSideScheme } from '@cuidador/whitelabel';\nimport {\n Drawer,\n IconButton,\n Link,\n List,\n ListItem,\n ListItemText,\n} from '@material-ui/core';\nimport { Close, Person, Work } from '@material-ui/icons';\nimport FileIcon from '@material-ui/icons/InsertDriveFile';\nimport { Link as defaultLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nexport const StyledDrawer = styled(Drawer)`\n display: flex;\n\n .MuiDrawer-paper {\n max-width: 300px;\n width: 100%;\n }\n`;\n\nexport const StyledCloseIcon = styled(Close)`\n color: ${({ theme }) => theme.palette.common.white};\n`;\n\nexport const StyledPersonIcon = styled(Person)`\n color: ${({ theme }) => theme.palette.primary.main};\n`;\n\nexport const StyledFileIcon = styled(FileIcon)`\n color: ${({ theme }) => theme.palette.primary.main};\n`;\n\nexport const StyledWorkIcon = styled(Work)`\n color: ${({ theme }) => theme.palette.primary.main};\n`;\n\nexport const StyledLogoBlock = styled.img.attrs(() => {\n const { logoLightUrl } = clientSideScheme();\n return { src: logoLightUrl };\n})`\n max-width: 200px;\n max-height: 20px;\n margin-top: ${({ theme }) => theme.spacing(0.75)}px;\n width: 100%;\n margin-bottom: ${({ theme }) => theme.spacing(0.75)}px;\n`;\n\nexport const DrawerHeader = styled.div`\n background-color: ${({ theme }) => theme.palette.primary.main};\n display: flex;\n align-items: center;\n max-height: 72px;\n`;\n\nexport const StyledList = styled(List)`\n padding: 0;\n`;\n\nexport const StyledListItem = styled(ListItem)`\n &:hover {\n background-color: ${({ theme }) => theme.palette.primary.light};\n }\n`;\n\nexport const StyledListItemText = styled(ListItemText)`\n color: ${({ theme }) => theme.palette.primary.main};\n`;\n\nexport const StyledLink = styled(defaultLink)`\n text-decoration: none;\n`;\n\nexport const StyledHrefLink = styled(Link)`\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n }\n`;\n\nexport const AppItemTitle = styled.span`\n color: ${({ theme }) => theme.palette.primary.main};\n font-size: 16px;\n font-weight: 600;\n margin-bottom: ${({ theme }) => theme.spacing(0.5)}px;\n`;\n\nexport const AppItemLabel = styled.span`\n color: ${({ theme }) => theme.palette.primary.main};\n font-size: 12px;\n`;\n\nexport const AppIcon = styled.img`\n height: 25px;\n width: 25px;\n margin-left: ${({ theme }) => theme.spacing(0.2)}px;\n`;\n\nexport const TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n margin-left: ${({ theme }) => theme.spacing(0.2)}px;\n`;\n\nexport const DrawerBody = styled.div`\n flex: 1;\n`;\n\nexport const DrawerFooter = styled.div`\n background-color: ${({ theme }) => theme.palette.primary.main};\n padding-inline: ${({ theme }) => theme.spacing(2)}px;\n`;\n\nexport const DrawerButton = styled(IconButton)`\n color: ${({ theme }) => theme.palette.common.white}f;\n border-radius: 0;\n font-size: 16px;\n display: flex;\n align-items: center;\n`;\n\nexport const DrawerFooterText = styled.span`\n margin-left: ${({ theme }) => theme.spacing(2)}px;\n`;\n\nexport const HealthProductsIconWithMargin = styled.img`\n margin-left: 5px;\n`;\n","import React from 'react';\nimport { ListItemIcon } from '@material-ui/core';\nimport {\n TextContainer,\n StyledListItem,\n AppItemTitle,\n AppItemLabel,\n} from '../styles';\n\ninterface AppShortcutProps {\n label: string;\n icon: JSX.Element;\n}\n\nconst AppShortcut: React.FC = ({ label, icon }) => {\n return (\n \n {icon}\n \n Trocar de app\n {label}\n \n \n );\n};\n\nexport default AppShortcut;\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';\nimport { clientSideScheme } from '@cuidador/whitelabel';\n\nexport function UserIcon(props: SvgIconProps) {\n const scheme = clientSideScheme();\n\n return (\n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';\nimport { clientSideScheme } from '@cuidador/whitelabel';\n\nexport function FileIcon(props: SvgIconProps) {\n const scheme = clientSideScheme();\n\n return (\n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';\nimport { clientSideScheme } from '@cuidador/whitelabel';\n\nexport function CaseIcon(props: SvgIconProps) {\n const scheme = clientSideScheme();\n\n return (\n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';\nimport { clientSideScheme } from '@cuidador/whitelabel';\n\nexport function HandIcon(props: SvgIconProps) {\n const scheme = clientSideScheme();\n\n return (\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';\nimport { clientSideScheme } from '@cuidador/whitelabel';\n\nexport function ShareIcon(props: SvgIconProps) {\n const scheme = clientSideScheme();\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n","import { clientSideScheme } from '@cuidador/whitelabel';\nimport { IconButton, ListItemIcon } from '@material-ui/core';\nimport React, { useContext, useState } from 'react';\nimport { ReactComponent as SignOutIcon } from '../../assets/sign-out-icon.svg';\nimport AppShortcut from './AppSchortcut';\nimport {\n AppIcon,\n DrawerBody,\n DrawerButton,\n DrawerFooter,\n DrawerFooterText,\n DrawerHeader,\n StyledCloseIcon,\n StyledDrawer,\n StyledHrefLink,\n StyledLink,\n StyledList,\n StyledListItem,\n StyledListItemText,\n StyledLogoBlock,\n} from './styles';\nimport { UserIcon } from './SideMenuIcons/userIcon';\nimport { FileIcon } from './SideMenuIcons/fileIcon';\nimport { CaseIcon } from './SideMenuIcons/caseIcon';\nimport { HandIcon } from './SideMenuIcons/handIcon';\nimport { ShareIcon } from './SideMenuIcons/shareIcon';\nimport { AuthContext } from '../../contexts/auth';\nimport LogoutDialog from '../LogoutDialog';\nimport useCanAccess from '../../hooks/useCanAccess';\n\ninterface SideMenuProps {\n handleToggleSideMenu: () => void;\n isSideMenuOpen: boolean;\n}\n\nexport function SideMenu(props: SideMenuProps) {\n const { handleToggleSideMenu, isSideMenuOpen } = props;\n const { isAllowedToRead: isAllowedToReadSubscription } = useCanAccess(\n 'user/subscription'\n );\n const { signOut, userInfo } = useContext(AuthContext);\n const { appCShortcutIconUrl, appCUrl } = clientSideScheme();\n\n const isCaregiverAppAccess = userInfo?.user?.role?.caregiverAppAccess;\n const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);\n\n const handleToggleLogoutDialog = () => {\n setIsLogoutDialogOpen(!isLogoutDialogOpen);\n };\n\n return (\n <>\n {\n handleToggleSideMenu();\n }}\n >\n \n {\n handleToggleSideMenu();\n }}\n >\n \n \n \n \n \n \n \n \n \n \n \n {'Minha conta'}\n \n \n \n \n \n \n \n {'Termos de uso'}\n \n \n {isAllowedToReadSubscription && (\n \n \n \n \n \n {'Plano'}\n \n \n )}\n \n \n \n \n \n {'Serviços de saúde'}\n \n \n \n \n \n \n \n {'Produtos de saúde'}\n \n \n {Boolean(isCaregiverAppAccess) && (\n \n }\n label={'Ir para o app de Cuidados'}\n />\n \n )}\n \n \n \n {\n handleToggleLogoutDialog();\n }}\n >\n \n Sair da conta\n \n \n \n \n \n );\n}\n\nexport default SideMenu;\n","import { EmergencyContactModel } from '@cuidador/database'\nimport AddIcon from '@material-ui/icons/AddRounded'\nimport React, { useContext, useEffect, useState } from 'react'\nimport { useHistory } from 'react-router-dom'\nimport { toast } from 'react-toastify'\nimport EmergencyContacts from '../../components/EmergencyContactCard'\nimport Fab from '../../components/Fab'\nimport MedicBalloon from '../../components/MedicBalloon'\nimport PendingRegistrationBanner from '../../components/PendingRegistrationBanner'\nimport { AuthContext } from '../../contexts/auth'\nimport useCanAccess from '../../hooks/useCanAccess'\nimport useEmergencyContacts from '../../hooks/useEmergencyContacts'\nimport { Backdrop, BackdropCircularProgress, Container } from './styles'\nimport { Header } from '../../components/Header'\nimport { PageTitle } from '../../components/PageTitle'\nimport { BackButton } from '../../components/BackButton'\nimport { PscButton } from '../../components/PscButton'\nimport { MenuButton } from '../../components/MenuButton'\nimport { SideMenu } from '../../components/SideMenu'\n\nconst EmergencyContactsCard: React.FC<{\n contacts: EmergencyContactModel\n}> = ({ contacts }) => {\n return \n}\n\nconst WHATSAPP_NUMBER = '5511919006699'\n\nconst Contacts: React.FC = () => {\n const [isMenuOpen, setMenuOpen] = useState(false)\n const { userInfo } = useContext(AuthContext)\n const { getAllByPatientId, byId, ids, loading } = useEmergencyContacts()\n const { isAllowedToCreate } = useCanAccess('care/emergency-contact')\n const history = useHistory()\n const FAQ_URL =\n 'https://www.cuidadordeconfianca.com.br/perguntas-frequentes-aplicativo'\n\n const patientId = userInfo?.activePatientId\n\n const { isAllowedToRead: isAllowedToReadEmercencyContact } = useCanAccess(\n 'care/emergency-contact'\n )\n\n useEffect(() => {\n if (!isAllowedToReadEmercencyContact) {\n toast.error('Você não tem permissão para visualizar essa página')\n history.goBack()\n return\n }\n if (!patientId) return\n getAllByPatientId(patientId)\n }, [patientId])\n\n if (loading) {\n return (\n \n {loading && (\n \n )}\n \n )\n }\n\n return (\n <>\n setMenuOpen(false)}\n />\n setMenuOpen(true)} />}\n centerContent={\n \n }\n rightContent={}\n />\n \n \n \n \n \n \n \n {ids\n .map((id) => byId[id])\n .map((contacts) => (\n \n ))}\n\n {isAllowedToCreate && (\n \n \n \n )}\n \n \n )\n}\n\nexport default Contacts\n","import { Checkbox, Typography } from '@material-ui/core';\nimport { Form as FormikForm } from 'formik';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\n\nexport const Form = styled(FormikForm)`\n display: flex;\n flex: 1;\n flex-direction: column;\n width: 100%;\n color: ${({ theme }) => theme.palette.secondary.main};\n`;\n\nexport const TypographyContainer = styled.div`\n max-width: 100%;\n text-align: center;\n`;\n\nexport const StyledLink = styled(Link)`\n text-decoration: none;\n`;\n\nexport const Centralizer = styled.div`\n align-items: center;\n flex-direction: column;\n display: flex;\n flex: 1;\n justify-content: flex-end;\n`;\n\nexport const ContentContainer = styled.div`\n margin-top: ${({ theme }) => theme.spacing(3)}px;\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: column;\n`;\n\nexport const BlackTypography = styled(Typography)`\n color: ${({ theme }) => theme.palette.extra.color.grey.dark};\n`;\n\nexport const StyledCheckbox = styled(Checkbox)`\n color: ${(props) => props.theme.palette.secondary.main};\n`;\n","import * as Yup from 'yup';\nimport { numberMask, phoneMask } from '../../utils/inputs';\n\nexport interface FormValues {\n name?: string;\n phoneNumber?: string;\n callingCondition?: string;\n relevantInformation?: string;\n link?: string;\n isWhatsapp?: boolean;\n}\n\nexport const validationSchema = Yup.object().shape({\n name: Yup.string().required('Por favor, insira um nome do contato.'),\n phoneNumber: Yup.string(),\n callingCondition: Yup.string(),\n link: Yup.string()\n .max(255, 'O link não pode ter mais de 255 caracteres.')\n .nullable(),\n isWhatsapp: Yup.boolean(),\n});\n\nexport const formDataToEmergencyContactsModel = (\n values: FormValues,\n patientId: Id\n) => {\n return {\n name: values.name,\n phoneNumber: handleNumberMask(values.phoneNumber),\n callingCondition: values.callingCondition,\n relevantInformation: values.relevantInformation,\n patientId: patientId,\n link: values.link || '',\n isWhatsapp: values.phoneNumber ? !!values.isWhatsapp : false,\n } as FormValues;\n};\n\nexport const handleNumberMask = (phoneNumber?: string) => {\n // Numbers with the format 0800 ddd dddd\n if (phoneNumber && phoneNumber.startsWith('08'))\n return numberMask(phoneNumber);\n if (phoneNumber) return numberMask(`55${phoneNumber}`);\n return '';\n};\n\nexport const emergencyContactsModelToformData = (values: FormValues) => {\n return {\n name: values.name,\n phoneNumber: phoneMask(`${values.phoneNumber}`),\n callingCondition: values.callingCondition,\n relevantInformation: values.relevantInformation,\n link: values.link,\n isWhatsapp: values.isWhatsapp,\n } as FormValues;\n};\n\nexport const urlMask = (url?: string) => {\n if (!url) return '';\n if (url === 'https://') return;\n const linkWithoutHttp = url.replace(\n /^(?:https?:\\/\\/)?(?:http?:\\/\\/)?(?:www\\.)?/i,\n ''\n );\n const urlStartsWithHttp =\n url.startsWith('http://') || url.startsWith('https://');\n return urlStartsWithHttp ? url : `https://${linkWithoutHttp}`;\n};\n","import { FormControlLabel } from '@material-ui/core';\nimport { Formik, FormikHelpers, FormikProps } from 'formik';\nimport isEqual from 'lodash/isEqual';\nimport React from 'react';\nimport { toast } from 'react-toastify';\nimport { phoneMask } from '../../utils/inputs';\nimport {\n FormCardContainer,\n HelperContainer,\n HelperText,\n StyledBoldTitle,\n StyledFormikTextField as FormikTextField,\n} from '../FormCardContainer';\nimport MedicBalloon from '../MedicBalloon';\nimport StyledButton from '../StyledButton';\nimport {\n BlackTypography,\n Centralizer,\n ContentContainer,\n Form,\n StyledCheckbox,\n} from './styles';\nimport { FormValues, urlMask, validationSchema } from './utils';\n\nconst ContactsUpsertForm: React.FC<{\n initialValues: FormValues;\n innerRef?: React.Ref>;\n onSubmit: (\n values: FormValues,\n formikHelpers: FormikHelpers\n ) => void | Promise;\n}> = ({ initialValues, innerRef, onSubmit }) => {\n const validateAndSubmit = (\n values: FormValues,\n formikHelpers: FormikHelpers\n ) => {\n if (values.link || values.phoneNumber) {\n onSubmit(values, formikHelpers);\n } else {\n toast.error('Preencha o número de telefone ou link de contato');\n formikHelpers.setSubmitting(false);\n }\n };\n\n return (\n <>\n \n {({\n values,\n setFieldValue,\n isSubmitting,\n errors,\n touched,\n handleChange,\n }) => {\n return (\n \n \n \n \n \n Nome do contato\n \n\n \n Exemplo: Dr João, etc.\n {touched.name && errors.name}\n \n }\n />\n \n\n \n \n Adicione pelo menos uma das duas opções abaixo, ou,\n se preferir, pode adicionar as duas.\n \n\n ) => {\n setFieldValue('phoneNumber', phoneMask(e.target.value));\n }}\n />\n {!!values.phoneNumber && (\n \n }\n label=\"Whatsapp\"\n />\n )}\n\n \n {touched.link && errors.link}\n \n }\n onChange={(e: React.ChangeEvent) => {\n setFieldValue('link', urlMask(e.target.value));\n }}\n />\n \n\n \n \n Em qual caso entrar em contato?\n \n\n \n \n Exemplo: No caso de falta de remédio.\n \n {touched.callingCondition && errors.callingCondition}\n \n }\n />\n\n \n Instruções (opcional)\n \n\n \n \n\n \n \n Salvar\n \n \n \n \n );\n }}\n \n \n );\n};\n\nexport default ContactsUpsertForm;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n flex: 1;\n background-color: ${({ theme }) => theme.palette.common.white};\n padding-top: ${({ theme }) => theme.spacing(2)}px;\n padding-bottom: ${({ theme }) => theme.spacing(2)}px;\n display: flex;\n flex-direction: column;\n color: ${({ theme }) => theme.palette.secondary.main};\n`;\n","import { APIError } from '@cuidador/lib'\nimport { AxiosError } from 'axios'\nimport React, { useContext, useEffect } from 'react'\nimport { useHistory } from 'react-router-dom'\nimport { toast } from 'react-toastify'\nimport ContactsUpsertForm from '../../../components/ContactsUpsertForm'\nimport {\n formDataToEmergencyContactsModel,\n FormValues,\n} from '../../../components/ContactsUpsertForm/utils'\nimport { AuthContext } from '../../../contexts/auth'\nimport useCanAccess from '../../../hooks/useCanAccess'\nimport useEmergencyContacts from '../../../hooks/useEmergencyContacts'\nimport { resolveErrorMessage } from '../../../utils/error'\nimport { Container } from './styles'\nimport { Header } from '../../../components/Header'\nimport { PageTitle } from '../../../components/PageTitle'\nimport { BackButton } from '../../../components/BackButton'\nimport { PscButton } from '../../../components/PscButton'\n\nconst ContactsInsert: React.FC = () => {\n const { userInfo } = useContext(AuthContext)\n const patientId = userInfo?.activePatientId\n const { isAllowedToCreate } = useCanAccess('care/emergency-contact')\n\n const { post } = useEmergencyContacts()\n const history = useHistory()\n\n useEffect(() => {\n if (!isAllowedToCreate) {\n toast.error('Você não tem permissão para visualizar essa página')\n history.goBack()\n }\n }, [])\n\n const handleSubmit = (values: FormValues) => {\n return post(formDataToEmergencyContactsModel(values, patientId!))\n .then(() => {\n history.replace('/contatos')\n })\n .catch((err: AxiosError) => {\n const displayMessage = resolveErrorMessage(err)\n toast.error(displayMessage)\n })\n }\n\n const formInitialValue = {\n name: '',\n phoneNumber: '',\n callingCondition: '',\n relevantInformation: '',\n link: '',\n }\n\n return (\n <>\n }\n centerContent={}\n rightContent={}\n />\n \n \n \n \n )\n}\n\nexport default ContactsInsert\n","import {\n Backdrop as MaterialBackdrop,\n CircularProgress as MaterialCircularProgress,\n} from '@material-ui/core';\nimport styled from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n flex: 1;\n background-color: ${({ theme }) => theme.palette.common.white};\n padding-top: ${({ theme }) => theme.spacing(2)}px;\n padding-bottom: ${({ theme }) => theme.spacing(2)}px;\n display: flex;\n flex-direction: column;\n color: ${({ theme }) => theme.palette.secondary.main};\n`;\n\nexport const Backdrop = styled(MaterialBackdrop)`\n z-index: ${({ theme }) => theme.zIndex.drawer + 1};\n color: ${({ theme }) => theme.palette.primary.light};\n position: absolute;\n`;\n\nexport const BackdropCircularProgress = styled(MaterialCircularProgress).attrs({\n color: 'inherit',\n})``;\n","import { APIError } from '@cuidador/lib';\nimport { AxiosError } from 'axios';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { toast } from 'react-toastify';\nimport ContactsUpsertForm from '../../../components/ContactsUpsertForm';\nimport {\n emergencyContactsModelToformData,\n formDataToEmergencyContactsModel,\n FormValues,\n} from '../../../components/ContactsUpsertForm/utils';\nimport { StyledFieldset } from '../../../components/StyledFieldset';\nimport StyledSimpleDialog from '../../../components/StyledSimpleDialog';\nimport { AuthContext } from '../../../contexts/auth';\nimport useCanAccess from '../../../hooks/useCanAccess';\nimport useEmergencyContacts from '../../../hooks/useEmergencyContacts';\nimport { resolveErrorMessage } from '../../../utils/error';\nimport { Backdrop, BackdropCircularProgress, Container } from './styles';\nimport { Header } from '../../../components/Header'\nimport { PageTitle } from '../../../components/PageTitle'\nimport { BackButton } from '../../../components/BackButton'\nimport { RemoveButton } from '../../../components/RemoveButton'\n\nconst ContactsUpdate: React.FC = () => {\n const [dialogStatus, setDialogStatus] = useState(false);\n const params = useParams<{ id: string }>();\n const { getById, byId, loading, patch, remove } = useEmergencyContacts();\n const history = useHistory();\n const { isAllowedToDelete, isAllowedToUpdate } = useCanAccess(\n 'care/emergency-contact'\n );\n const { userInfo } = useContext(AuthContext);\n\n const id = parseInt(params.id);\n\n useEffect(\n function fetchInitialValues() {\n if (id) {\n getById(id);\n }\n },\n [id]\n );\n\n if (loading) {\n return (\n \n {loading && (\n \n )}\n \n );\n }\n\n const contacts = byId[id];\n\n if (!contacts) {\n return null;\n }\n\n const patientId = userInfo?.activePatientId;\n\n const handleSubmit = (values: FormValues) => {\n return patch(id!, formDataToEmergencyContactsModel(values, patientId!))\n .then(() => {\n history.goBack();\n })\n .catch((err: AxiosError) => {\n const displayMessage = resolveErrorMessage(err);\n toast.error(displayMessage);\n });\n };\n\n const handleDelete = (id: Id) => {\n setDialogStatus(false);\n remove(id)\n .then(() => {\n history.goBack();\n })\n .catch((err: AxiosError) => {\n const displayMessage = resolveErrorMessage(err);\n toast.error(displayMessage);\n });\n };\n\n return (\n <>\n \n }\n centerContent={\n \n }\n rightContent={\n isAllowedToDelete && (\n setDialogStatus(true)}\n />\n )\n }\n />\n \n \n \n \n setDialogStatus(false)}\n handleYes={() => handleDelete(id!)}\n title=\"Excluir contato de emergência\"\n subTitle=\"Tem certeza que deseja excluir o contato de emergência?\"\n />\n \n \n );\n};\n\nexport default ContactsUpdate;\n","import styled from 'styled-components';\n\nexport const HeaderContainer = styled.div`\n margin-bottom: ${({ theme }) => theme.spacing(2)}px;\n margin-top: ${({ theme }) => theme.spacing(1)}px;\n padding: 0 8px ${({ theme }) => theme.spacing(1)}px 8px;\n background-color: ${({ theme }) => theme.palette.extra.color.grey.light};\n\n h6 {\n color: ${({ theme }) => theme.palette.secondary.main};\n text-align: center;\n font-family: 'Work Sans';\n font-weight: bold;\n }\n`;\n\nexport const TimerContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n margin-bottom: ${({ theme }) => theme.spacing(1)}px;\n`;\n\nexport const TimerBox = styled.div`\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n margin: ${({ theme }) => theme.spacing(2, 2, 0, 2)};\n\n h6 {\n color: ${({ theme }) => theme.palette.primary.main};\n font-family: 'Work Sans';\n font-weight: bold;\n }\n\n p {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ${({ theme }) => theme.spacing(-0.1)}px;\n\n svg {\n margin-right: ${({ theme }) => theme.spacing(1)}px;\n color: ${({ theme }) => theme.palette.secondary.main};\n }\n }\n`;\n\nexport const HeaderSubtitle = styled.div`\n margin-left: ${({ theme }) => theme.spacing(2)}px;\n padding-bottom: ${({ theme }) => theme.spacing(2)}px;\n\n h6 {\n text-align: left;\n color: ${({ theme }) => theme.palette.primary.main};\n }\n\n p {\n margin: 0;\n }\n`;\n","import { Typography } from '@material-ui/core';\nimport TimerIcon from '@material-ui/icons/AccessTime';\nimport CalendarIcon from '@material-ui/icons/DateRange';\nimport { format } from 'date-fns';\nimport React from 'react';\nimport {\n HeaderContainer,\n HeaderSubtitle,\n TimerBox,\n TimerContainer,\n} from './styles';\n\ninterface ShiftTimeContestationDateBlockProps {\n startingDatetime?: Date;\n endingDatetime?: Date;\n startingLabel: string;\n endingLabel: string;\n responsibleName?: string;\n}\n\nconst ShiftTimeContestationDateBlock: React.FC = ({\n startingDatetime,\n endingDatetime,\n startingLabel,\n endingLabel,\n responsibleName,\n}) => {\n const getFormattedDate = (dateTime?: Date) => {\n if (dateTime) return format(dateTime, 'dd/MM/yyyy');\n return '';\n };\n\n const getFormattedTime = (dateTime?: Date) => {\n if (dateTime) return format(dateTime, 'HH:mm');\n return '';\n };\n\n return (\n \n \n \n \n {startingLabel}\n \n \n \n {getFormattedDate(startingDatetime)}\n
\n \n \n {getFormattedTime(startingDatetime)}\n
\n \n \n \n {endingLabel}\n \n \n \n {getFormattedDate(endingDatetime)}\n
\n \n \n {getFormattedTime(endingDatetime)}\n
\n \n \n {responsibleName && (\n \n Responsável\n {responsibleName}
\n \n )}\n \n );\n};\nexport default ShiftTimeContestationDateBlock;\n","import { FormControlLabel } from '@material-ui/core';\nimport styled from 'styled-components';\n\nconst StyledFormControlLabel = styled(FormControlLabel)`\n & .MuiRadio-root:not(.Mui-disabled) {\n color: ${({ theme }) => theme.palette.secondary.main};\n }\n & .MuiCheckbox-root:not(.Mui-disabled) {\n color: ${({ theme }) => theme.palette.secondary.main};\n }\n & .Mui-disabled {\n opacity: 65%;\n color: ${({ theme }) => theme.palette.secondary.main};\n }\n color: ${({ theme }) => theme.palette.extra.color.grey.dark};\n`;\n\nexport default StyledFormControlLabel;\n","import { ShiftAnnullationModel, ShiftModel } from '@cuidador/database';\nimport { useCallback, useReducer } from 'react';\nimport axios from '../config/axios';\nimport {\n createReducer,\n Item,\n PaginatedRequestParams,\n ReducerData,\n} from '../utils/store/index';\n\nconst endpoint = '/care';\n\nconst initialData: ReducerData = {\n byId: {} as Record>,\n ids: [] as Array,\n total: 0,\n loading: false,\n error: null,\n};\n\nconst useShift = () => {\n const [state, dispatch] = useReducer(\n createReducer(),\n initialData\n );\n\n const getLastShiftByPatientId = useCallback(async (id: Id) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get(\n `${endpoint}/lastshift/by-patient/${id}`\n );\n dispatch({ type: 'GET_BY_ID', payload: response.data });\n return response.data as ShiftModel;\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n }, []);\n\n const getById = useCallback(async (id: Id) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get(`${endpoint}/shift/${id}`);\n dispatch({ type: 'GET_BY_ID', payload: response.data });\n return response.data as ShiftModel;\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n }\n }, []);\n\n const getByPatientIdPaginated = useCallback(\n async (patientId: number, params: PaginatedRequestParams) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get<{\n results: Item[];\n total: number;\n }>(`${endpoint}/shift/by-patient/${patientId}`, {\n params,\n });\n dispatch({ type: 'PAGINATION', payload: response.data });\n return Promise.resolve(response);\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n },\n []\n );\n\n const patchAnnulledShiftExecution = useCallback(\n async (shiftExecutionId: Id, body: Partial) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.patch(\n `${endpoint}/shift/execution/${shiftExecutionId}/annulled`,\n body\n );\n dispatch({ type: 'SUCCESS' });\n return response.data as ShiftAnnullationModel;\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n return Promise.reject(err);\n }\n },\n []\n );\n\n const expelCaregiver = useCallback(\n async (shiftId: number, shouldKeepRecords: boolean) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.post(\n `${endpoint}/shift/expel/${shiftId}`,\n { shouldKeepRecords }\n );\n dispatch({ type: 'SUCCESS' });\n return response.data;\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n throw err;\n }\n },\n []\n );\n\n const getTimeline = useCallback(async (shiftId: number) => {\n try {\n dispatch({ type: 'LOADING' });\n const response = await axios.get(`${endpoint}/shift/timeline/${shiftId}`);\n dispatch({ type: 'SUCCESS' });\n return response.data;\n } catch (err) {\n dispatch({ type: 'ERROR', payload: err });\n throw err;\n }\n }, []);\n\n return {\n ...state,\n getLastShiftByPatientId,\n getById,\n expelCaregiver,\n getByPatientIdPaginated,\n patchAnnulledShiftExecution,\n getTimeline,\n };\n};\n\nexport default useShift;\n","import { useCallback } from 'react';\nimport axios from '../config/axios';\n\nconst useShiftTimeContestation = () => {\n const post = useCallback(\n async (shiftExecutionId: number, { endedAt, startedAt, justification }) => {\n try {\n await axios.post(\n `/care/shift/execution/${shiftExecutionId}/time-contestation`,\n {\n endedAt,\n startedAt,\n justification,\n }\n );\n } catch (err) {\n return Promise.reject(err);\n }\n },\n []\n );\n\n return { post };\n};\n\nexport default useShiftTimeContestation;\n","import React from 'react';\nimport { DialogActions, DialogContent, DialogTitle } from '@material-ui/core';\nimport { DialogProps } from '@material-ui/core/Dialog';\n\nimport StyledDialog from '../../../components/StyledDialog';\nimport StyledButton from '../../../components/StyledButton';\n\ninterface ConfirmSaveDialogProps extends DialogProps {\n onConfirm: (() => void) | undefined;\n onClose: () => void;\n}\n\nconst ConfirmSaveDialog: React.FC = ({\n open,\n onClose,\n onConfirm,\n}) => {\n return (\n \n \n Tem certeza que deseja salvar?\n \n \n Voltar\n \n \n Confirmar\n \n \n \n \n );\n};\n\nexport default ConfirmSaveDialog;\n","import { DatePicker, TimePicker } from '@material-ui/pickers';\nimport { Form as FormikForm } from 'formik';\nimport styled from 'styled-components';\nimport StyledButton from '../../components/StyledButton';\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const Body = styled.div`\n display: flex;\n flex: 1;\n background-color: ${({ theme }) => theme.palette.common.white};\n flex-direction: column;\n max-width: 600px;\n`;\n\nexport const TopGuidelineParagraph = styled.p`\n color: ${({ theme }) => theme.palette.primary.main};\n padding: 8px 24px 8px;\n text-align: center;\n`;\n\nexport const Form = styled(FormikForm)`\n display: flex;\n flex: 1;\n flex-direction: column;\n color: ${({ theme }) => theme.palette.extra.color.grey.light};\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n margin-top: ${({ theme }) => theme.spacing(-1)}px;\n`;\n\nexport const StyledDatePicker = styled(DatePicker)`\n width: 100%;\n & .MuiInputBase-root {\n color: ${({ theme }) => theme.palette.primary.main};\n }\n & .MuiOutlinedInput-input {\n padding: ${({ theme }) => theme.spacing(1.5)}px;\n border-radius: ${({ theme }) => theme.spacing(1)}px;\n }\n & .MuiOutlinedInput-root {\n border-radius: ${({ theme }) => theme.spacing(1)}px;\n }\n & .MuiOutlinedInput-notchedOutline {\n border-color: ${({ theme }) => theme.palette.primary.main};\n }\n`;\n\nexport const StyledTimePicker = styled(TimePicker)`\n width: 100%;\n & .MuiInputBase-root {\n color: ${({ theme }) => theme.palette.primary.main};\n }\n & .MuiOutlinedInput-input {\n padding: ${({ theme }) => theme.spacing(1.5)}px;\n border-radius: ${({ theme }) => theme.spacing(1)}px;\n }\n & .MuiOutlinedInput-root {\n border-radius: ${({ theme }) => theme.spacing(1)}px;\n }\n & .MuiOutlinedInput-notchedOutline {\n border-color: ${({ theme }) => theme.palette.primary.main};\n }\n`;\n\nexport const StyledOptions = styled.div`\n display: flex;\n flex: 1;\n flex-direction: row;\n justify-content: space-between;\n margin: ${({ theme }) => theme.spacing(2, 0)};\n`;\n\nexport const Button = styled(StyledButton)`\n width: 45%;\n`;\n\nexport const FormInnerContainer = styled.div`\n padding: 12px 24px 24px 24px;\n`;\n\nexport const DateTimePickersGroup = styled.div`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0 16px;\n margin-block: 0 16px;\n margin-inline: 16px;\n\n svg {\n margin-right: ${({ theme }) => theme.spacing(1)}px;\n color: ${({ theme }) => theme.palette.primary.main};\n }\n\n > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n img {\n margin-right: 8px;\n margin-top: 12px;\n }\n\n > div {\n margin-bottom: 0;\n > p {\n color: ${({ theme }) => theme.palette.error.main};\n }\n }\n }\n`;\n\nexport const DateTimeCheckboxGroup = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n span {\n color: ${({ theme }) => theme.palette.primary.main};\n font-weight: bold;\n }\n`;\n\nexport const JustificationContainer = styled.div`\n margin-top: ${({ theme }) => theme.spacing(4)}px;\n`;\n","import { DatePickerProps, TimePickerProps } from '@material-ui/pickers';\nimport { ErrorMessage } from 'formik';\nimport React from 'react';\nimport { StyledDatePicker, StyledTimePicker } from '../styles';\n\nexport const DatePicker: React.FC<\n Omit & {\n name: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n values: any;\n setFieldValue: (\n field: string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: any,\n shouldValidate?: boolean | undefined\n ) => void;\n }\n> = ({ name, values, setFieldValue, ...rest }) => {\n return (\n {\n // Since it's a Date only picker, lets set hours, minutes, seconds and milliseconds to 0\n date?.setHours(0, 0, 0, 0);\n setFieldValue(name, date, true);\n }}\n inputVariant=\"outlined\"\n cancelLabel=\"Cancelar\"\n helperText={}\n />\n );\n};\n\nexport const TimePicker: React.FC<\n Omit & {\n name: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n values: any;\n setFieldValue: (\n field: string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: any,\n shouldValidate?: boolean | undefined\n ) => void;\n }\n> = ({ name, values, setFieldValue, ...rest }) => {\n return (\n {\n setFieldValue(name, date, true);\n }}\n inputVariant=\"outlined\"\n cancelLabel=\"Cancelar\"\n helperText={}\n />\n );\n};\n","import { ShiftModel } from '@cuidador/database';\nimport DateFnsUtils from '@date-io/date-fns';\nimport { Checkbox } from '@material-ui/core';\nimport CalendarIcon from '@material-ui/icons/DateRange';\nimport TimeIcon from '@material-ui/icons/WatchLater';\nimport { MuiPickersUtilsProvider } from '@material-ui/pickers';\nimport ptBr from 'date-fns/locale/pt-BR';\nimport { Formik } from 'formik';\nimport { orderBy } from 'lodash';\nimport { default as React, useEffect, useMemo, useState } from 'react';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { toast } from 'react-toastify';\nimport * as yup from 'yup';\nimport FormikTextField from '../../components/Forms/FormikTextField';\nimport LoadingBackdrop from '../../components/LoadingBackdrop';\nimport ShiftTimeContestationDateBlock from '../../components/ShiftTimeContestationDateBlock';\nimport StyledFormControlLabel from '../../components/StyledFormControlLabel';\nimport useShift from '../../hooks/useShift';\nimport useShiftTimeContestation from '../../hooks/useShiftExecutionTimeContestation';\nimport { resolveErrorMessage } from '../../utils/error';\nimport ConfirmSaveDialog from './ConfirmSaveDialog';\nimport { DatePicker, TimePicker } from './DateTimePickers';\nimport {\n Body,\n Button,\n Container,\n DateTimeCheckboxGroup,\n DateTimePickersGroup,\n Form,\n FormInnerContainer,\n JustificationContainer,\n StyledOptions,\n TopGuidelineParagraph,\n} from './styles';\nimport { Header } from '../../components/Header'\nimport { PageTitle } from '../../components/PageTitle'\nimport { BackButton } from '../../components/BackButton'\nimport { PscButton } from '../../components/PscButton'\n\nexport type FormValues = {\n startedAtDate: Date | null | undefined;\n startedAtTime: Date | null | undefined;\n endedAtDate: Date | null | undefined;\n endedAtTime: Date | null | undefined;\n justification: string;\n startedDatetimeEnabled: boolean;\n endedDatetimeEnabled: boolean;\n isSubmitConfirmationModalOpen: boolean;\n};\n\nconst validationSchema = yup.object().shape({\n startedAtDate: yup\n .date()\n .nullable()\n .typeError('Por favor, insira uma data válida')\n .when(\n 'startedDatetimeEnabled',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (startedDatetimeEnabled: any, schema: any) =>\n startedDatetimeEnabled\n ? schema.required('Por favor, insira uma data de início')\n : schema\n ),\n startedAtTime: yup\n .date()\n .nullable()\n .typeError('Por favor, insira uma data válida')\n .when(\n 'startedDatetimeEnabled',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (startedDatetimeEnabled: any, schema: any) =>\n startedDatetimeEnabled\n ? schema.required('Por favor, insira um horário de início')\n : schema\n ),\n endedAtDate: yup\n .date()\n .nullable()\n .typeError('Por favor, insira uma data válida')\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .when('endedDatetimeEnabled', (endedDatetimeEnabled: any, schema: any) =>\n endedDatetimeEnabled\n ? schema.required('Por favor, insira uma data de fim')\n : schema\n ),\n endedAtTime: yup\n .date()\n .nullable()\n .typeError('Por favor, insira uma data válida')\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .when('endedDatetimeEnabled', (endedDatetimeEnabled: any, schema: any) =>\n endedDatetimeEnabled\n ? schema.required('Por favor, insira um horário de fim')\n : schema\n ),\n justification: yup\n .string()\n .nullable()\n .typeError('Por favor, insira uma justificativa válida')\n .required('Por favor, insira uma justificativa'),\n});\n\nconst CreateTimeContestationForm: React.FC<{\n onSubmit: (values: FormValues) => void;\n onCancel: () => void;\n minTimeContestationDatetime?: Date;\n maxTimeContestationDatetime?: Date;\n}> = ({\n onSubmit,\n onCancel,\n minTimeContestationDatetime,\n maxTimeContestationDatetime,\n}) => {\n return (\n \n {({\n isSubmitting,\n values,\n setFieldValue,\n submitForm,\n validateForm,\n setFieldTouched,\n }) => {\n const handleStartedDatetimeToogle = () => {\n const newValue = !values.startedDatetimeEnabled;\n setFieldValue('startedDatetimeEnabled', newValue);\n if (\n newValue &&\n !values.startedAtDate &&\n minTimeContestationDatetime &&\n maxTimeContestationDatetime &&\n checkIfDatesDaysAreEqual(\n minTimeContestationDatetime,\n maxTimeContestationDatetime\n )\n ) {\n setFieldValue('startedAtDate', minTimeContestationDatetime);\n }\n };\n const handleEndedDatetimeToogle = () => {\n const newValue = !values.endedDatetimeEnabled;\n setFieldValue('endedDatetimeEnabled', newValue);\n if (\n newValue &&\n !values.endedAtDate &&\n minTimeContestationDatetime &&\n maxTimeContestationDatetime &&\n checkIfDatesDaysAreEqual(\n minTimeContestationDatetime,\n maxTimeContestationDatetime\n )\n ) {\n setFieldValue('endedAtDate', minTimeContestationDatetime);\n }\n };\n\n const handleSaveClick = () => {\n return validateForm().then((errors) => {\n const hasErrors = Object.keys(errors).length > 0;\n if (hasErrors) {\n // If errors exist, set all fields as \"touched\", so validation errors\n // are displayed\n Object.keys(values).forEach((field) => {\n setFieldTouched(field);\n });\n } else {\n // If no errors exist, open confirmation modal\n setFieldValue('isSubmitConfirmationModalOpen', true);\n }\n });\n };\n\n return (\n